• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
2022 HTML5: The future is now
 

2022 HTML5: The future is now

on

  • 1,510 views

The final spec of html5 won't be ready until 2022, but you don't have to wait that long to start using it today and build really advanced web apps.

The final spec of html5 won't be ready until 2022, but you don't have to wait that long to start using it today and build really advanced web apps.

Statistics

Views

Total Views
1,510
Views on SlideShare
1,508
Embed Views
2

Actions

Likes
3
Downloads
27
Comments
0

2 Embeds 2

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

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • HTML 4.01 has remained largely the same for over a decade. During this time, the markup has been used and misused in so many ways that it is evident a new markup is needed to support the current demands of page development.\n\nCSS 2.1 has gone from a working draft to candidate recommendation within the W3C, and back to working draft over the last six years. Nevertheless, CSS 2.1 has merely served as an update fixing minor errors within the CSS 2 specification. The major features of CSS have largely remained unchanged since 1998.\n\nECMAScript underwent 3 revisions from 1997 until 1999. After that, little occurred in the specification. Other features, such as the XMLHttpRequest, have appeared since, but these are a result of widespread adoption by numerous browser vendors and not as a result of updates to any specifications. Disagreements as to how ECMAScript 4 should look led to the formation of ECMAScript Harmony and the now abandoned ECMAScript 4. ECMAScript 5 was released in December of 2009. It is beginning to pick up support within the current generation of browsers.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • - This triggers standards mode even in ie6\n
  • \n
  • - Use only when server is unable to set the charset via headers.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Because a should not contain a header or footer element, a complex page header might require a section instead.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Pretty convenient, it replaces JS to set default text.\n
  • \n
  • JavaScript validation will still be necessary when form validation is needed\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

2022 HTML5: The future is now 2022 HTML5: The future is now Presentation Transcript

  • 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 floating 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...
  • 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
  • The future is now
  • The future is now
  • The future is now
  • 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>
  • <link> & <a> relations• Examples: <a rel="archives" href="http://myblog.com/archives">old posts</a> <link rel="alternate" type="application/rss+xml" href="http://myblog.com/feed"> <a rel="license" href="http://www.apache.org/licenses/LICENSE-2.0">license</a> <a rel="nofollow" href="http://notmysite.com/sample">wannabe</a>
  • <link> & <a> relations• Other values: alternate, author, bookmark, first, help, icon, index, last, next, noreferrer, pingback, prefetch, prev, search...
  • 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 defined 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>
  • 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• <figure>, <figcaption>• <mark>• <time>, <meter>• <details> & <summary>• <b>, <i>, <small> revisited• Custom attributes• Global attributes
  • HTML5 Forms: now• New input types• Use of required fields, 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 fields<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 specified 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,figcaption,figure,footer, header,hgroup,menu,nav,section { display: block; }</style>
  • HTML4 Wrapping<section> <div class="section"> <!-- content --> </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