HTML5 - What you need to know
Upcoming SlideShare
Loading in...5
×
 

HTML5 - What you need to know

on

  • 557 views

A talk I delivered on 18th Jan 2011

A talk I delivered on 18th Jan 2011

Statistics

Views

Total Views
557
Views on SlideShare
556
Embed Views
1

Actions

Likes
0
Downloads
6
Comments
0

1 Embed 1

http://jfeeds.carsmantra.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

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

    HTML5 - What you need to know HTML5 - What you need to know Presentation Transcript

    • Matt Fielding | Creative Director | Panoetic Ltd HTML5 What you need to know PANOETIC ® WEBSITE DESIGN & DEVELOPMENT
    • Matt Fielding | Creative Director | Panoetic Ltd Overview u A brief history of Markup v The design of HTML5 w Semantics x Rich media y Using HTML5 today
    • Matt Fielding | Creative Director | Panoetic Ltd A brief history of Markup g HTML was the brainchild of Sir Tim Berners-Lee g Tags already existed in the form of SGML g Never was such a thing as HTML 1 g HTML 2 published by the Internet Engineering task Force (IETF)
    • Matt Fielding | Creative Director | Panoetic Ltd HTML HTML 2.0 1995 HTML 3.2 1997 HTML 4.0 1997 HTML 4.01 1999
    • Matt Fielding | Creative Director | Panoetic Ltd XHTML XHTML 1.0 2000 XHTML 1.1 2001 XHTML 2
    • Matt Fielding | Creative Director | Panoetic Ltd Ian Hickson Editor of the HTML5 Specification WHATWG Web Hypertext Applications Technology Working Group
    • Matt Fielding | Creative Director | Panoetic Ltd HTML5 WHATWG 2004 W3C 2007
    • Matt Fielding | Creative Director | Panoetic Ltd The design of HTML5 g HTML Design Principles http://w3.org/html-design-principles
    • Matt Fielding | Creative Director | Panoetic Ltd Design Principles u Avoid needless x Pave the cowpaths complexity v Support existing y Degrade gracefully content w Solve Real z Priority of problems constituencies
    • Matt Fielding | Creative Director | Panoetic Ltd u Avoid needless complexity Simple solutions are preferred to complex ones, when possible.
    • Matt Fielding | Creative Director | Panoetic Ltd (X)HTML 1.0 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> HTML5 <!DOCTYPE html>
    • Matt Fielding | Creative Director | Panoetic Ltd (X)HTML <?xml version=”1.0” encoding=”UTF-8”?> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8” /> HTML5 <meta charset=”utf-8”>
    • Matt Fielding | Creative Director | Panoetic Ltd (X)HTML <link rel=”stylesheet” type=”text/css” href=”file.css” /> <script src=”modernizr-1.5.js” type=”text/javascript” ></script> HTML5 <link rel=”stylesheet” href=”file.css”> <script type=”text/javascript”></script>
    • Matt Fielding | Creative Director | Panoetic Ltd v Support existing content Existing content often relies upon expected user agent processing and behaviour to function as intended.
    • Matt Fielding | Creative Director | Panoetic Ltd Accepted coding styles <img src=”foo” alt=”bar” /> <p class=”foo”>Hello world</p> <img src=”foo” alt=”bar”> <p class=”foo”>Hello world <IMG SRC=”foo” ALT=”bar”> <P CLASS=”foo”>Hello world</P> <img src=foo alt=bar> <p class=foo>Hello world</p>
    • Matt Fielding | Creative Director | Panoetic Ltd w Solve Real problems Abstract architectures that don’t address an existing need are less favoured than pragmatic solutions to problems that web content faces today.
    • Matt Fielding | Creative Director | Panoetic Ltd (X)HTML <h2><a href=”/path/to/resource”>Headline text</a></h2> <p><a href=”/path/to/resource”>Paragraph text.</a></p> HTML5 <a href=”/path/to/resource”> <h2>Headline text</h2> <p>Paragraph text.</p> </a>
    • Matt Fielding | Creative Director | Panoetic Ltd x Pave the cowpaths Look where people are already coming up with solutions. Don’t re-invent the wheel.
    • Matt Fielding | Creative Director | Panoetic Ltd New elements g In 2005, Google surveyed over three billion web pages to find out what id and class attributes web designers most commonly use to name HTML elements. section header article footer aside details nav figure
    • Matt Fielding | Creative Director | Panoetic Ltd Swap out those divs with the new HTML5 elements (X)HTML HTML5 <body> <body> <div id=”header”>...</div> <header>...</header> <div id=”navigation”>...</div> <nav>...</nav> <div id=”main”>...</div> <div id=”main”>...</div> <div id=”sidebar”>...</div> <aside>...</aside> <div id=”footer”>...</div> <footer>...</footer> </body> </body>
    • Matt Fielding | Creative Director | Panoetic Ltd (X)HTML HTML5 <div class=”item”> <section class=”item”> <h2>...</h2> <header><h1>...</h1></header> <div class=”meta”>...</div> <footer class=”meta”>...</footer> <div class=”content”> <div class=”content”> ... ... </div> </div> <div class=”links”>...</div> <nav class=”links”>...</nav> </div> </section>
    • Matt Fielding | Creative Director | Panoetic Ltd y Degrade gracefully HTML 5 document conformance requirements should be designed so that Web content can degrade gracefully in older or less capable user agents, even when making use of new elements, attributes, APIs and content models.
    • Matt Fielding | Creative Director | Panoetic Ltd g Forms have been enhanced in HTML5 using the type attributes input type=”number” input type=”search” input type=”range” input type=”email” input type=”date” input type=”url” g Existing browsers that don’t understand this stuff, degrade gracefully g New form attributes including ‘placeholder’
    • Matt Fielding | Creative Director | Panoetic Ltd z Priority of constituencies In case of conflict, consider users over authors over implementors over specifiers over theoretical purity.
    • Matt Fielding | Creative Director | Panoetic Ltd Semantics g Elements used for presentation removed g New elements introduced
    • Matt Fielding | Creative Director | Panoetic Ltd Removed Presentational (moved to CSS) <font> <big> <center> & attributes - border, bgcolor etc others <frame> <frameset> <noframes> <acronym> <axis> <summary>
    • Matt Fielding | Creative Director | Panoetic Ltd Changed <a> “…may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within.” <b> “…a span of text to be stylistically offset from the normal prose without conveying any extra importance.” <i> “…a span of text in an alternate voice or mood, or otherwise offset from the normal prose..”
    • Matt Fielding | Creative Director | Panoetic Ltd Changed <hr> “…a paragraph-level thematic break.” <small> “…small print (for side comments and legal print).”
    • Matt Fielding | Creative Director | Panoetic Ltd New elements <mark> “…a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context.” <time> “This element is intended as a way to encode modern dates and times in a machine-readable way so that user agents can offer to add them to the user’s calendar” <time datetime=”2009-09-02T09:30:00” pubdate> September 2nd, 9:30am</time>
    • Matt Fielding | Creative Director | Panoetic Ltd New elements <section> <header> <details> <article> <footer> <figure> <nav> <hgroup> <aside>
    • Matt Fielding | Creative Director | Panoetic Ltd (X)HTML <div class=”content”> <div class=”content-uk”>[…]</div> <div class=”content-usa”>[…]</div> <div class=”content-world”>[…]</div> </div> <section> <section id=”content-uk”> <h1>Stories from the UK</h1> </section> <section id=”content-usa”> <h1>Stories from the USA</h1> </section> <section id=”content-world”> <h1>Stories from around the world</h1> </section>
    • Matt Fielding | Creative Director | Panoetic Ltd <article> <section id=”content-uk”> <h1>Stories from the UK</h1> <article>[…]</article> <article>[…]</article> </section> <section id=”content-usa”> <h1>Stories from the USA</h1> <article>[…]</article> <article>[…]</article> </section> <section id=”content-world”> <h1>Stories from around the world</h1> <article>[…]</article> <article>[…]</article> </section>
    • Matt Fielding | Creative Director | Panoetic Ltd Articles <article> can have <section id=”raymond-chandler”>[…]</section> sections <section id=”dashiell-hammett”>[…]</section> too! <section id=”mickey-spillane”>[…]</section> </article> <header> <header> <h1>Punchy title</h1> </header> <hgroup> <header> <hgroup> <h1>Punchy title</h1> <h2>Very catchy strapline</h2> </hgroup> </header>
    • Matt Fielding | Creative Director | Panoetic Ltd combining <article> <section> <header> <h1>Punchy title</h1> <article> </header> and <section id=”raymond-chandler”> <header> <header> <h1>Raymond Chandler</h1> </header> </section> <section id=”dashiell-hammett”> <header> <h1>Dashiell Hammett</h1> </header> </section> <section id=”mickey-spillane”> <header> <h1>Mickey Spillane</h1> </header> </section> </article>
    • Matt Fielding | Creative Director | Panoetic Ltd <footer> <footer> <h3>...</h3> <p>...</p> “…typically </footer> contains information about <section class=”item”> its section such <header> as who wrote it, <h1>...</h1> links to related </header> <footer class=”meta”>...</footer> documents, <div class=”content”> copyright data, ... </div> and the like.” <nav class=”links”>...</nav> </section>
    • Matt Fielding | Creative Director | Panoetic Ltd <nav> <nav> <ul> <li><a href=”/”>Home</a></li> “...a section of a <li><a href=”/about”>About</a></li> page that links to <li><a href=”/contact”>Contact</a></li> </ul> other pages or to </nav> parts within the page: a section with navigation links.”
    • Matt Fielding | Creative Director | Panoetic Ltd <aside> <article> <header> <h1>Mickey Spillane</h1> “...represents a </header> section of a page <footer> that consists <p>Published by Andy Clarke on November 20th, 2010</p> of content that </footer> is tangentially <p>Frank Morrison Spillane, better known as related to the Mickey Spillane… </p> <aside> content around it, <h2>My Gun Is Quick</h2> and which could <p>Mickey Spillane’s second novel featuring private investigator Mike Hammer.</p> be considered </aside> separate from </article> that content.”
    • Matt Fielding | Creative Director | Panoetic Ltd <figure> & <dl class=”figure”> <figcaption> <dt><img src=”jury.jpg” alt=”The Jury”></dt> <dd>The Jury by Mickey Spillane</dd> </dl> “...some flow content, optionally with <figure> <img src=”jury.jpg” alt=”I, The Jury”> a caption, that is <img src=”gun.jpg” alt=”My Gun is Quick”> self-contained <img src=”vengeance.jpg” alt=”Vengeance”> <figcaption>Books by Mickey Spillane</figcaption> and is typically </figure> referenced as a single unit from the main flow of the document.”
    • Matt Fielding | Creative Director | Panoetic Ltd <details> <details> <summary>Log in</summary> <form method=”post” action=”login”> “…a disclosure <label for=”username”>Username</label> widget from <input type=”text” name=”username” id=”username”> which the user can <label for=”password”>Password</label> obtain additional <input type=”password” name=”password” information or id=”password”> </form> controls.” </details>
    • Matt Fielding | Creative Director | Panoetic Ltd Rich media HTML is filling holes and doing away with the need to use proprietary technologies and plug-ins g The <canvas> element g The <audio> element g The <video> element
    • Matt Fielding | Creative Director | Panoetic Ltd <canvas> g Created by Apple g The element itself is very simple <canvas id=”my-first-canvas” width=”360” height=”240”> <p>No canvas support? Have an old fashioned image instead:</p> <img src=”puppy.jpg” alt=”a cute puppy”> </canvas>
    • Matt Fielding | Creative Director | Panoetic Ltd <canvas> Cont... g All the hard work is done in JavaScript g The real power of canvas is that it’s content can be updated at any moment based on the actions of the user g Current accessibility issues. No DOM = no access to screen readers. But being addressed. g Should be used as an enhancement for existing content
    • Matt Fielding | Creative Director | Panoetic Ltd <audio> g HTML5 is taking on the Flash plug-in <audio src=”audiotrack.mp3” autoplay loop controls> </audio> g You can use JavaScript to interact with the audio API g Big problem with MP3 not being an open technology
    • Matt Fielding | Creative Director | Panoetic Ltd <audio> Cont... g Fall backs <audio controls> <source src=”soundfile.ogg” type=”audio/ogg”> <source src=”soundfile.mp3” type=”audio/mp3”> <object type=”application/x-shockwave-flash” data=”player.swf?soundFile=soundfile.mp3”> <param name=”movie” value=”player.swf?soundFile=soundfile.mp3”> <a href=”soundfile.mp3”>Download the song</a> </object> </audio>
    • Matt Fielding | Creative Director | Panoetic Ltd <video> g Works just like the audio element <video src=”movie.mp4” controls width=”360” height=”240” poster=”placeholder.jpg”> </video> g Even bloodier battleground for competing video formats g MP4 is patent-encumbered also
    • Matt Fielding | Creative Director | Panoetic Ltd <video> Cont... <video controls width=”360” height=”240” poster=”placeholder.jpg”> <source src=”movie.ogv” type=”video/ogg”> <source src=”movie.mp4” type=”video/mp4”> <object type=”application/x-shockwave-flash” width=”360” height=”240” data=”player.swf?file=movie. mp4”> <param name=”movie” value=”player.swf?file=movie.mp4”> <a href=”movie.mp4”>Download this movie</a> </object> </video>
    • Matt Fielding | Creative Director | Panoetic Ltd <video> Cont... g Pretty exciting to add video natively to web pages g No sandbox issues, so plays nice with CSS and JavaScript g Actually styleable as well as scriptable
    • Matt Fielding | Creative Director | Panoetic Ltd Using HTML5 today g Using the new doctype, charset, input types and attributes should not cause any issues at all. g All the rich media elements have fallbacks so are safe to use also. g The new structural elements will need extra effort to work cross-browser
    • Matt Fielding | Creative Director | Panoetic Ltd Internet Exploer To style the new elements with CSS <!--[if lt IE 9]> <script src=”http://html5shiv.googlecode.com/svn/trunk/ html5.js”> </script> <![endif]--> This tiny script creates elements in Internet Explorer’s DOM so we can style them using CSS.
    • Matt Fielding | Creative Director | Panoetic Ltd Further Reading Hard HTML5 Boiled for web Web designers Design by Jeremy by Andy Keith Clarke http://books.alistapart.com/ http://hardboiledwebdesign.com/
    • Matt Fielding | Creative Director | Panoetic Ltd Questions?
    • Matt Fielding | Creative Director | Panoetic Ltd Matt Fielding mattfielding.net twitter.com/mattfielding PANOETIC ® WEBSITE DESIGN & DEVELOPMENT panoetic.com twitter.com/panoetic