Slide 1

Slide 1 text

HTML5 SEMANTIC ELEMENTS @idangazit PyWeb-IL 32 • 31st October 2011

Slide 2

Slide 2 text

djangoproject.com skilsapp.com

Slide 3

Slide 3 text

WHY SHOULD YOU CARE? WHAT DO THEY DO?

Slide 4

Slide 4 text

PRESENTATION CSS CONTENT HTML

Slide 5

Slide 5 text

your audience

Slide 6

Slide 6 text

HI! I’M A DESIGNER.

Slide 7

Slide 7 text

HI! I’M A DEVELOPER.

Slide 8

Slide 8 text

HI! I’M GOOGLEBOT.

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

PRESENTATION CONTENT

Slide 11

Slide 11 text

PRESENTATION CONTENT SEMANTIC STRUCTURE provides MEANING

Slide 12

Slide 12 text

a good semantic structure makes it EASY for eveybody TO CONSUME YOUR CONTENT

Slide 13

Slide 13 text

quirks mode amost-standards mode standards mode

Slide 14

Slide 14 text

Q: quirks mode A: amost-standards mode S: standards mode http://hsivonen.iki.ﬁ/doctype/ S S S S S IE8+ A IE6/7

Slide 15

Slide 15 text

http://html5doctor.com/html-5-xml-xhtml-5/ http://mathiasbynens.be/notes/xhtml5 DON’T BOTHER, IT WON’T WORK IN IE “Content-Type: application/xhtml+xml” XHTML5

Slide 16

Slide 16 text

vs.
vs.

Slide 17

Slide 17 text

BRIEF!

Slide 18

Slide 18 text

NEW SEMANTIC ELEMENTS STRUCTURE

Slide 19

Slide 19 text

heading paagaph link

Slide 20

Slide 20 text

generic block-level

Slide 21

Slide 21 text

BEST BLOG IN THE WORLD

...

My Posts

A post

...

Slide 22

Slide 22 text

BEST BLOG IN THE WORLD

...

My Posts

A post

...

Slide 23

Slide 23 text

div class= HEADER HEADING PAGEHEAD MAINHEADER etc…

Slide 24

Slide 24 text

Slide 25

Slide 25 text

BEST HTML5 BLOG IN THE WORLD

...

My Posts

A post title!

...

Slide 26

Slide 26 text

vs. vs.

Slide 27

Slide 27 text

BEST HTML5 BLOG IN THE WORLD

...

My Posts

A post title!

...

Slide 28

Slide 28 text

• BEST HTML5 BLOG IN THE WORLD • My Posts - A post title! - Another post title! - A really old post. http://gsnedders.html5.org/outiner/ http://dev.w3.org/html5/spec/Oveview.html#outine

Slide 29

Slide 29 text

My Awesome Site

About me

I like bananas

My Day Job

I eat bananas

Contact

[email protected]

•My Awesome Site •About Me •My Day Job •Contact

Slide 30

Slide 30 text

My Awesome Site

About me

I like bananas

My Day Job

I eat bananas

Contact

[email protected]

•My Awesome Site •About Me •My Day Job •Contact

Slide 31

Slide 31 text

Foo …

Bar …

•Untitled Aside •Foo •Bar

Slide 32

Slide 32 text

Slide 33

Slide 33 text

My Awesome Blog

I Love Cake!

I love it so so much.

…

The Cake is a Lie!

Don’t believe them!

… •My Awesome Blog •I Love Cake •I love it so so much. •The Cake is a Lie! •Don’t believe them!

Slide 34

Slide 34 text

My Awesome Blog

I Love Cake!

I love it so so much.

…

The Cake is a Lie!

Don’t believe them!

… •My Awesome Blog •I Love Cake •The Cake is a Lie!

Slide 35

Slide 35 text

SECTIONING ROOTS

Slide 36

Slide 36 text

and go inside …but don’t aﬀect the outine SECTIONING CONTENT

Slide 37

Slide 37 text

YUMMY! bit.ly/html5-seo-google

Slide 38

Slide 38 text

YUMMY!

Slide 39

Slide 39 text

http://en.wikipedia.org/wiki/HTML5_Shiv JS FIX FOR IE6-8 HTML5 SHIV

Slide 40

Slide 40 text

, ,

Slide 41

Slide 41 text

http://dev.w3.org/html5/spec/Oveview.html THE FINAL WORD HTML5 SPEC

Slide 42

Slide 42 text

DEHACKIFYING UR FORMS IM IN UR MARKUP

Slide 43

Slide 43 text

now we have css :hover pseudoclass JS ROLLOVERS

Slide 44

Slide 44 text

GRACEFUL DEGRADATION SIMPLIFYING COMMON USAGE WEBFORMS 2.0

Slide 45

Slide 45 text

ATTRIBUTES

Slide 46

Slide 46 text

PLACEHOLDER TEXT

Slide 47

Slide 47 text

AUTOFOCUS

Slide 48

Slide 48 text

input[required] { background: #cfc; } REQUIRED

Slide 49

Slide 49 text

:invalid { background: #cfc; } PATTERN pattern is a regex

Slide 50

Slide 50 text

No datalist suppot! DATALIST

Slide 51

Slide 51 text

INPUT TYPES

Slide 52

Slide 52 text

CONTACT INFO

Slide 53

Slide 53 text

http://bit.ly/html5-iphone-forms

Slide 54

Slide 54 text

http://bit.ly/html5-iphone-forms EMAIL URL TEL

Slide 55

Slide 55 text

Slide 56

Slide 56 text

SLIDERS discrete min="1" max="10" continuous

Slide 57

Slide 57 text

SPINNERS aso suppots min/max

Slide 58

Slide 58 text

DATE AND TIME visit with a webkit browser, ike chrome: http://bit.ly/html5-input-tests

Slide 59

Slide 59 text

ONLY OPERA SUPPORTS IT COLOR PICKER

Slide 60

Slide 60 text

http://www.modernizr.com FEATURE DETECTION MODERNIZR

Slide 61

Slide 61 text

http://bit.ly/polyﬁls FALLBACKS FOR OLDER BROWSERS POLYFILLS

Slide 62

Slide 62 text

LEARN YOU SOME HTML5 RESOURCES

Slide 63

Slide 63 text

http://diveintohtml5.info/ FREE ONLINE DIVE INTO HTML5

Slide 64

Slide 64 text

http://html5doctor.com “WHEN SHOULD I...” HTML5 DOCTOR

Slide 65

Slide 65 text

http://www.abookapat.com/products/html5-for-web-designers IT’S SHORT AND SWEET HTML5 BOOK

Slide 66

Slide 66 text

http://dev.w3.org/html5/spec/Oveview.html THE FINAL WORD HTML5 SPEC

Slide 67

Slide 67 text

ALL BENEFITS • NO DRAWBACKS EASY FIXES FOR IE6-8 FUTURE-PROOF YOUR SITE USE IT NOW!

Slide 68

Slide 68 text

@idangazit THANK YOU! Sides: http://bit.ly/pyweb32-html5-semantic