2022 HTML5: The future is now

2022 HTML5: The future is now Gonzalo Cordero F2E Summit 2011

Looking back• The front-end has lacked major updates for over a decade CSS 2 HTML 4.01 ECMASCript 3 (1998) (1999) (1999)

Looking back...We’ve been working on 10 years old Technology

Got Milk? You wouldn’t drink a 9 years old milk would you?

HTML5 To Save the day

So what’s HTML5?HTML5~=Buzz + HTML5 Tags + CSS3 + New JS Apis

can I haz HTML5?The W3C and WHATWG are currently working on the specs

can I haz HTML5?...And then there is this whole thing about 2022...

in the year 2022...We will have ﬂoating skateboards... (And awesome looking nike shoes)

In the year 2022...Skynet will be ruling the world...or not.

besides...

and...

and...The HTML5 spec will be ready...

ishtml5readyyet.com

Plus Crockford says we gotta start from scratch...

can I haz html5?So just when you thought your problems were going away...

can I haz HTML5?Browser vendors still deciding what and how

Welcome to the life of a Front End engineer

This concludes this presentation....

Go see a therapist and come back in 10 years...

Ok, It’s really not that bad... I promise

The future is now

HTML5• Is here to stay.• You can start using it today.• No need to throw away your previous code.

So what’s new?• Page level changes• New HTML Elements

Doctype: Before<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Doctype: now <!DOCTYPE html>

Meta: Before<meta http-equiv="Content-Type" content="text/ html; charset=utf-8">

Meta: Now<meta charset="utf-8">

Types No-More Assumes text/css<link rel="stylesheet" href="main.css"> Assumes text/javascript <script>....</script>

HTML5 Elements• HTML5 provides new structural block-level elements: - Header - Nav - Section - Footer - Article Aside

HTML5 Elements• HTML5 provides new structural block-level elements: - Header <header> - Nav <nav> <sec$on> - <ar$cle> <aside> Section <ar$cle > - Footer <ar$cle > - Article <footer> Aside

The Semantic of semantics• Better organized, easier to maintain.• Screen readers.• Open to future applications: Advanced rss readers, widgets, etc.

Header blocks : before <div id="header">...</div>

Headers blocks: Now <header>...</header>

Headers• ...represents a group of introductory or navigational aids.• can have multiple header elements on a page• it is deﬁned by its content, not its position• Should not exist within another <header> or within <footer>

Header

Header <header><header>

Headers: Example <div id="header"> <h1>BMW USA</h1> <h2 class="tagline">The Ultimate Driving Machine</h2> </div><header> <h1>BMW USA</h1> <h2 class="tagline">The Ultimate Driving Machine</h2></header>

hgroups• Related headings (h1-h6) may be grouped together (wrapped) and treated as a single structure in the document outline<header> <hgroup> <h1>BMW USA</h1> <h2 class="tagline">The Ultimate Driving ßMachine</h2> </hgroup></header>

Nav : Before<div id="nav"> <ul> <li><a href="#">home</a></li> <li><a href="#">blog</a></li> <li><a href="#">gallery</a></li> <li><a href="#">about</a></li> </ul></div>

Nav : after<nav> <ul> <li><a href="#">home</a></li> <li><a href="#">blog</a></li> <li><a href="#">gallery</a></li> <li><a href="#">about</a></li> </ul></nav>

Nav <nav><nav>

Nav• ...represents a section of a page that links to other pages or to parts within the page• only sections that consist of major navigation blocks are appropriate for the <nav> element

Sections• "...represents a generic section of a document or application. ...is a thematic grouping of content, typically with a heading."• It allows to reset the document outline

Sections<article> <hgroup> <h1>My Title</h1> <h2>My Subtitle</h2> </hgroup> <section> <h1>Section Title</h1> <p>Article content</p> <section> <h1>Sub-content title</h1> <p>Article sub-content</p> </section> </section></article>

Sections: Rule of thumb• Dont use it just as hook for styling or scripting; thats a <div>• Dont use it if <article>, <aside> or <nav> is more appropriate• Dont use it unless there is naturally a heading at the start of the section

Articles: before<div class="entry"> <h2> <a href="something.html" rel="bookmark" title="link to this post"> Travel day </a> <p class="post-date">October 22, 2009</p> </h2> ...</div>

Articles: now<article> <header> <h1> <a href="#" rel="bookmark" title="link to this post"> Travel day </a> </h1> <p class="post-date">October 22, 2009</p> </header> ...</article>

Articles• used for self-contained related content• useful for blog posts, news stories, comments, reviews, forum posts• can also be used for widget types of content, e.g. stock ticker• can be nested, as well as <section>

Aside• <aside> is another specialized form of section• Provides tangentially related content• May be used for • advertisements • pull quotes or sidebar content

Aside<article> <div class="article"> <h1>Blog 2</h1> <p>I discovered a new planetwhile...</p> <aside> <p>The number of potential planets that can support life are...</p> </aside> </div></article>

Aside: example <aside>

Footer: before<div id="footer">...</div>

Footer: now<footer>...</footer>

Footer• Indicate concluding content in a section• May be used to contain copyright info, author info, links to additional references, etc.

Footer

Footer<footer>

Other Notable Elements• <ﬁgure>, <ﬁgcaption>• <mark>• <time>, <meter>• <details> & <summary>• <b>, <i>, <small> revisited• Custom attributes• Global attributes

HTML5 Forms: now• New input types• Use of required ﬁelds, placeholders, and autofocus• Validation capabilities• Form elements outside of the <form> tag

PlaceHolders<input type="email" placeholder="Enter your email"></input>

Autofocus • Sets an element to be the default starting element in the form (can only be used once in the form)<input type="text" name="yahoo-search" autofocus>

Required ﬁelds<input type="password" name="password" required>

New input types• tel • search• number • range• url • color• email • date(month, week...)` For the input types that perform valida4on, visual  feedback should be provided as to the validity of the  data by using the :valid and :invalid CSS pseudo‐classes

HTML5 Forms- validation• Opera and FF4 offer form validations.

Media: Audio&Video• A <source> must be speciﬁed in a format supported by that browser• Video formats:• Audio: Browsers support WAV, MP3, Ogg Vorbis

Media: Audio&Video<video id="movie" width="320" height="240" controls> <source src="pr6.mp4"> <source ...></video><audio controls> <source src="intro.mp3"></audio>

Graphics: Canvas&SVG

Canvas• It gives you a "drawing" surface• You manipulate it via JS• Accessibility is an challenge. <canvas id="myCanvas" width="300" height="150"> Default fallback text </canvas> var mycanvas = document.getElementById("myCanvas").getContext(" 2d"); //draws a rectangle filled with the current fill style mycanvas.fillrect(x, y, width, height);

SVG• XML-based vector graphics format• You can also style SVG with CSS and add dynamic behavior to it using the SVG DOM• relatively accessible.

SVG: Example<svg version="1.1" width="320" height="320" xmlns="http://www.w3.org/2000/svg"> <ellipse fill="url(#circleGrad)" stroke="#000" cx="50%" cy="50%" rx="50%" ry="50%"> <animate attributename="rx" values="0%;50%;0%" dur="2s" repeatcount="indefinite"> <animate attributename="ry" values="0%;50%;0%" dur="2s" repeatcount="indefinite"> </animate></svg>

Playing nice with the elders• Different workarounds have emerged • Shivs(Javascript DOM injection) • Wrapping with HTML4 Elements

Pre-HTML5<style> article,aside,details,ﬁgcaption,ﬁgure,footer, header,hgroup,menu,nav,section { display: block; }</style>

HTML4 Wrapping<section> <div class="section">  </div></section>

Pre-html5• Don’t rely on html5 elements for styling or DOM manipulation• Avoid using css child selector rules.

Conclusion• HTML5 is here to stay• Use it today. Don’t be afraid.• Get excited and blog about it!

Q&Atwitter.com/goonieiam

2022 HTML5: The future is now

by Gonzalo Cordero on Mar 28, 2011

Accessibility

Categories

Upload Details

Usage Rights

2 Embeds 2

Statistics

2022 HTML5: The future is now Presentation Transcript

https://twimg0-a.akamaihd.net	1
https://abs.twimg.com	1