Slide 1

Slide 1 text

HTML5 SEMANTIC ELEMENTS @idangazit HTML5Fest • 25th October 2011

Slide 2

Slide 2 text

http://ic.kr/p/7Efy5K I COME FROM HELLO!

Slide 3

Slide 3 text

djangoproject.com skilsapp.com

Slide 4

Slide 4 text

WHY SHOULD YOU CARE? WHAT DO THEY DO?

Slide 5

Slide 5 text

PRESENTATION CSS CONTENT HTML

Slide 6

Slide 6 text

your audience

Slide 7

Slide 7 text

HI! I’M A DESIGNER.

Slide 8

Slide 8 text

HI! I’M A DEVELOPER.

Slide 9

Slide 9 text

HI! I’M GOOGLEBOT.

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

PRESENTATION CONTENT

Slide 12

Slide 12 text

PRESENTATION CONTENT SEMANTIC STRUCTURE provides MEANING

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

quirks mode amost-standards mode standards mode

Slide 15

Slide 15 text

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

Slide 16

Slide 16 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 17

Slide 17 text


vs.
vs.

Slide 18

Slide 18 text

BRIEF!

Slide 19

Slide 19 text

NEW SEMANTIC ELEMENTS STRUCTURE

Slide 20

Slide 20 text

Slide 21

Slide 21 text

generic block-level

Slide 22

Slide 22 text

BEST BLOG IN THE WORLD

My Posts

A post

...

Slide 23

Slide 23 text

BEST BLOG IN THE WORLD

My Posts

A post

...

Slide 24

Slide 24 text

div class= HEADER HEADING PAGEHEAD MAINHEADER etc…

Slide 25

Slide 25 text

Slide 26

Slide 26 text

BEST HTML5 BLOG IN THE WORLD

    ...

My Posts

A post title!

...

© Natan Alterman

Slide 27

Slide 27 text

vs. vs.

Slide 28

Slide 28 text

BEST HTML5 BLOG IN THE WORLD

    ...

My Posts

A post title!

...

© Natan Alterman

Slide 29

Slide 29 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 30

Slide 30 text

and go inside SECTIONING CONTENT

Slide 31

Slide 31 text

YUMMY! bit.ly/html5-seo-google

Slide 32

Slide 32 text

YUMMY!

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

DEHACKIFYING UR FORMS IM IN UR MARKUP

Slide 37

Slide 37 text

now we have css :hover pseudoclass JS ROLLOVERS

Slide 38

Slide 38 text

GRACEFUL DEGRADATION SIMPLIFYING COMMON USAGE WEBFORMS 2.0

Slide 39

Slide 39 text

ATTRIBUTES

Slide 40

Slide 40 text

PLACEHOLDER TEXT

Slide 41

Slide 41 text

AUTOFOCUS

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

No datalist suppot! DATALIST

Slide 45

Slide 45 text

INPUT TYPES

Slide 46

Slide 46 text

CONTACT INFO

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

SEARCH

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

SPINNERS aso suppots min/max

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

ONLY OPERA SUPPORTS IT COLOR PICKER

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

http://bit.ly/polyfils FALLBACKS FOR OLDER BROWSERS POLYFILLS

Slide 56

Slide 56 text

LEARN YOU SOME HTML5 RESOURCES

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

@idangazit THANK YOU!