,
This presentation is the property of its rightful owner.
Sponsored Links
1 / 70

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


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

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

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

[email protected]

j.mp/presentation12


  • Login