,
Download
1 / 70

כלים ושיטות לבניית אתרים תקניים, נגישים ועשירים יותר - PowerPoint PPT Presentation


  • 137 Views
  • Uploaded on
  • Presentation posted in: General

כלים ושיטות לבניית אתרים תקניים, נגישים ועשירים יותר. אייל סלע מנהל פרויקטים, איגוד האינטרנט הישראלי ומשרד ה- W3C הישראלי. j.mp/w3cdoc. תוכנית. מבוא - איגוד האינטרנט הישראלי ו W3C- HTML & CSS נגישות מובייל. איגוד האינטרנט הישראלי. שלוחת האיגוד הבינלאומי: עמותה ללא מטרת רווח

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha

Download Presentation

כלים ושיטות לבניית אתרים תקניים, נגישים ועשירים יותר

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


3709699

,

, -W3C


3709699

j.mp/w3cdoc


3709699

...

- W3C-

HTML & CSS


3709699

:

, , , .


3709699

W3C

-350

.

:

.


3709699

W3C

(, )

/

...

()


3709699


3709699

W3C

,


3709699

W3C -


Preview

(Preview)


Html css

HTML -CSS


Html css1

: -HTML, CSS

...

  • Mobile

  • SVG

j.mp/w3cmo8


Float

float

j.mp/w3cmo8


3709699


1 doctype

1. DOCTYPE

:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

-HTML5...

j.mp/w3av5


3709699

<!doctype html>


3709699

2.

:

<html>, <body>, <div>

:

<HTML>, <BODY>, <DIV>

j.mp/w3av5


3709699

3.

:

<p><span></span></p>

:

<p><span></p></span>

j.mp/w3add3


3709699

4.

:

<p></p>

:

<p>

j.mp/w3adb


5 attributes

5. Attributes

:

<img height="52" width="279"

alt="W3C Israel Office logo" src="/logo-il.png" />

:

<img height=52 width=279

Alt=W3C Israel Office logo src=/logo-il.png />


3709699

6.

, CSS

  • HTML

  • CSS

j.mp/dkrg123

...


3709699

standards.co.il

csszengarden.com


7 html css

7. -HTML -CSS

HTML - validator.w3.org

j.mp/w3add1 - CSS

...


Css gov il

CSS - gov.il

gov.il


3709699

?

(..., )

' '

( , , debugging).

-SEO


3709699


Html5 css3

HTML5 -CSS3


3 css

3CSS

j.mp/w3add8


Html5

- HTML5

Notifications - http://slides.html5rocks.com/#slide12

semantic tags http://slides.html5rocks.com/#slide17

New form field types http://slides.html5rocks.com/#slide21

Audio + Video http://slides.html5rocks.com/#slide22

j.mp/w3av8


3709699

?

caniuse.com


3709699


3709699

?

.

:

, , ,


Wcag 2 0

(WCAG) 2.0

j.mp/w3av2


3709699

4

12

j.mp/w3ada


Nagish org il

nagish.org.il

nagish.org.il


A aa aaa

A, AA, AAA


3709699

1:

'' (perceive) .

1.1 ( , - CAPTCHA, )

1.2 -.

1.3 ( , , , )

1.4 ( , , , , )


3709699

.

, ,

j.mp/w3ad8


3709699

-

- 4.5:1

) j.mp/w3ad9 : )


3709699


3709699

2:

.

2.1 ( , , , , )

2.2

2.3 ( , )

2.4 ( , , )


3709699

3:

3.1 ( , , ' )

3.2 ( , )

3.3 ( , , , )


3709699

- , ,


3709699

4 -

,

4.1 Parsing( , , attributes, IDs are unique)

4.2 -- ( )


3709699

: checkbox : " ", : " ".

<input type="checkbox" id="markuplang" name="computerskills" checked="checked /> <label for="markuplang"> </label>

j.mp/w3addd


3709699

....

nagish.org.il


3709699

Alt

Skip

( )

- (4 h1

whitehouse.gov


3709699


3709699

bit.ly/w3cmbp


3709699

Mobile Web Best Practices 1.0


Some practices

Some practices

[TESTING] Carry out testing on actual devices as well as emulators.

[URIS] Keep the URIs of site entry points short.


Some practices1

Some practices

[NAVBAR] Provide only minimal navigation at the top of the page.

[BALANCE] Take into account the trade-off between having too many links on a page and asking the user to follow too many links to reach what they are looking for.

[NAVIGATION] Provide consistent navigation mechanisms.


Some practices2

Some practices

[ACCESS_KEYS] Assign access keys to links in navigational menus and frequently accessed functionality.

[LINK_TARGET_FORMAT] Note the target file's format unless you know the device supports it.

[POP_UPS] Do not cause pop-ups or other windows to appear and do not change the current window without informing the user.


Some practices3

Some practices

[AUTO_REFRESH] Do not create periodically auto-refreshing pages, unless you have informed the user and provided a means of stopping it.

[SUITABLE] Ensure that content is suitable for use in a mobilecontext.

[CLARITY] Use clear and simple language.


Mobile ok checker

Mobile OK checker

j.mp/w3cmbl


3709699

Mobile Web Apps


3709699

(BP1)

include locally executable elements of interactivityand persistentstate.

:

app.clichespotting.com

app.clichespotting.com

  • nextbus.com/webkit/

m.jobscentral.com.sg


3709699

+ User Agent Switcher

  • nextbus.com/webkit/

j.mp/w3cmo1

58


3709699

touchsolitaire.mobi/app

j.mp/w3cmo15


Sencha touch

Sencha touch (!!)

http://www.sencha.com/

j.mp/w3cmo6


3709699

Best practices


3709699

  • (3)

  • (1)

  • (4)

  • (11)

  • (10)

  • -Delivery Context(5)

  • (1)

(" 35)


3709699

2.

?

, .

( start-up time , Responsiveness)

?

BONDI

HTML5 - Offline - j.mp/w3coff

OperaWidgets

byRemy Sharp - remysharp.com/demo/rubiks/

2. Use Appropriate Client-Side Storage Technologies for Local Data

j.mp/w3cmo7


3709699

13.

?

, CSS, = HTTP request =

?

CSS -JavaScript

OR

13.Minimize External Resources


26 ensure paragraph text flows

26. Ensure Paragraph Text Flows

Image by: curiouslee

26.Ensure Paragraph Text Flows

?

?

:

: /

...

65


3709699

W3c.org


3709699

-

Viewport

Offlines

Data URI

http://nils-dehl.de/m/

j.mp/w3cmo9


35 consider canvas or svg for dynamic graphics

35. Consider Canvas or SVG For Dynamic Graphics

SVG

XML -DOM, JavaScript

...

http://www.mozilla.com/en-US/firefox/stats/

35.Consider Use Of Canvas Element or SVG For Dynamic Graphics

?

canvas

JavaScript

68


Svg and canvas demos

SVG and canvas demos

  • Bomomo.com

  • zwibbler.com

  • www.iconza.com

j.mp/w3cmo16

j.mp/w3cmo14

Video - Cool mobile apps with SVG and other Web technologies - j.mp/w3cmo13


3709699

www.w3c.org.il

@isociltech @eyalsela

eyal@isoc.org.il

j.mp/presentation12


ad
  • Login