Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
HTML5<br />New Possibilities for Publishing<br />
Who is iFactory?<br />A division of RDW Group, iFactory is an interactive design and development company with over 19 year...
Who is iFactory?<br />A division of RDW Group, iFactory is an interactive design and development company with over 19 year...
What is HTML?<br />HyperText Markup Language<br />The “building blocks” of all web pages<br />Tag format: <html></html><br />
Example<br /><div class="content"> <br /> <h1>Title for a Page</h1> <br /> <p>Text for a paragraph here. Text for a paragr...
Why a new version?<br />10 years since last update <br />An open standard <br />Consistency among an expanding number of d...
HTML 5 =<br />HTML 5 + CSS 3 + JavaScript<br />
A new logo<br />source: w3.org/html/logo<br />
What’s new in HTML 5?<br />Five Points for Publishing<br />
What’s new in HTML 5?<br />1. Better Findability & Syndication<br />
What’s new in HTML 5?<br />1. Better Findability & Syndication<br /><ul><li>New semantic tags
Microdata</li></li></ul><li>New semantic tags<br /><article><br /><aside><br /><details><br /><figure><br /><figcaption><b...
Example<br /><article> <header> <time datetime="2009-10-22" pubdate>October 22, 2009</time> <h1> <a href="page.html">T...
Microdata<br />itemscope<br />itemtype<br />itemprop<br />Event <br />Organization <br />Person <br />Product <br />Review...
schema.org—Google, Bing, Yahoo<br />
Example<br /><div itemscopeitemtype="http://schema.org/Book"> <imgitemprop="image" src="catcher-in-the-rye-cover.jpg" /> <...
We may soon see search results like this…<br />source: diveintohtml5.org<br />
What’s new in HTML 5?<br />1. Better Findability & Syndication<br />Opportunities:<br />
What’s new in HTML 5?<br />1. Better Findability & Syndication<br />Opportunities:<br /><ul><li>Better search results
Syndication & monetization
Embeddable content licensing</li></li></ul><li>What’s new in HTML 5?<br />2. Richer Interactive Content<br />
Native audio & video<br />
Canvas & SVG<br />source: en.inforapid.org<br />
CSS 3D<br />source:apple.com<br />
Drag & drop<br />source: my.picsengine.com<br />
What’s new in HTML 5?<br />2. Richer Interactive Content<br /> Opportunities:<br />
What’s new in HTML 5?<br />2. Richer Interactive Content<br /> Opportunities:<br /><ul><li>Figures, diagrams, games
Data visualization
Learning applications
Collaboration
Search engine optimization</li></li></ul><li>What’s new in HTML 5?<br />3. Truer Design & Layout<br />
Web fonts<br />source: lostworldsfairs.com<br />
Columns<br />source: tripleships.com/sample<br />
Media queries & responsive layouts<br />source: 2011.uxlondon.com<br />
What’s new in HTML 5?<br />3. Truer Design & Layout<br /> Opportunities:<br />
What’s new in HTML 5?<br />3. Truer Design & Layout<br /> Opportunities:<br /><ul><li>Closer brand adherence
Better legibility on screen
Nicer reading experience on mobile
Single site development</li></li></ul><li>What’s new in HTML 5?<br />4. Geolocation<br />
What’s new in HTML 5?<br />4. Geolocation<br /><ul><li>A user’s coordinates
Multiple ways of calculating (triangulation, GPS)
Handled with JavaScript
Currently a user opt-in feature</li></li></ul><li>Example: Twitter<br />
Example: Sonar<br />
Example: Constellations<br />source: nakshart.com<br />
Example: Augmented reality<br />source:acrossair.com<br />
What’s new in HTML 5?<br />4. Geolocation<br /> Opportunities:<br />
What’s new in HTML 5?<br />4. Geolocation<br /> Opportunities:<br /><ul><li>Social / sharing / collaboration
Location-based content
Augmented reality</li></li></ul><li>What’s new in HTML 5?<br />5. Offline storage & applications<br />
What’s new in HTML 5?<br />5. Offline storage & applications<br /><ul><li>More like native apps
History management
Save user data</li></li></ul><li>Example: Gmail<br />
Example: Evernote<br />
Example: Darkroom<br />
Upcoming SlideShare
Loading in …5
×

HTML5: New Possibilities for Publishing

4,637 views

Published on

The past year has seen the emergence of a new standard for building web sites and mobile applications. In this webcast iFactory Art Director, Jeremy Perkins, discusses how publishers are adopting HTML5 to make their content easier to find, richer with interaction, and truer to design, creating deeper connections with users on a variety of devices.

Published in: Education, Technology, Design
no profile picture user

  • Login to see the comments

HTML5: New Possibilities for Publishing

  1. 1. HTML5<br />New Possibilities for Publishing<br />
  2. 2. Who is iFactory?<br />A division of RDW Group, iFactory is an interactive design and development company with over 19 years experience.<br />
  3. 3. Who is iFactory?<br />A division of RDW Group, iFactory is an interactive design and development company with over 19 years experience.<br />Among our staff:<br />Designers<br />Developers<br />Information Architects<br />Usability Experts<br />Strategic Consultants<br />Clients include: <br />Academic Publishers <br />Reference Publishers<br />Journal Publishers<br />Libraries<br />…from Massachusetts to London<br />
  4. 4. What is HTML?<br />HyperText Markup Language<br />The “building blocks” of all web pages<br />Tag format: <html></html><br />
  5. 5. Example<br /><div class="content"> <br /> <h1>Title for a Page</h1> <br /> <p>Text for a paragraph here. Text for a paragraph here. Text for a paragraph here. Text for a paragraph here.</p> <br /> <imgsrc="images/face.jpg" alt="My face" /> <br /> <h2>Header Level Two Here</h2> <br /><ul> <br /> <li><a href="page.html">Item One</a></li><br /> <li><a href="page.html">Item Two</a></li><br /><li><a href="page.html">Item Three</a></li><br /> </ul> <br /></div><br />
  6. 6. Why a new version?<br />10 years since last update <br />An open standard <br />Consistency among an expanding number of devices <br />Easier and less expensive to publish content<br />
  7. 7. HTML 5 =<br />HTML 5 + CSS 3 + JavaScript<br />
  8. 8. A new logo<br />source: w3.org/html/logo<br />
  9. 9. What’s new in HTML 5?<br />Five Points for Publishing<br />
  10. 10. What’s new in HTML 5?<br />1. Better Findability & Syndication<br />
  11. 11. What’s new in HTML 5?<br />1. Better Findability & Syndication<br /><ul><li>New semantic tags
  12. 12. Microdata</li></li></ul><li>New semantic tags<br /><article><br /><aside><br /><details><br /><figure><br /><figcaption><br /><footer><br /><header><br /><hgroup><br /><mark><br /><menu><br /><nav><br /><section><br /><summary><br /><time><br />
  13. 13. Example<br /><article> <header> <time datetime="2009-10-22" pubdate>October 22, 2009</time> <h1> <a href="page.html">Travel day</a> </h1> </header> <br /> <p>Loremipsum dolor sit amet…</p> <br /></article><br />
  14. 14. Microdata<br />itemscope<br />itemtype<br />itemprop<br />Event <br />Organization <br />Person <br />Product <br />Review <br />Blog<br />Thing <br />Creative Work <br />Article <br />Book <br />Author <br />...and more <br />
  15. 15. schema.org—Google, Bing, Yahoo<br />
  16. 16. Example<br /><div itemscopeitemtype="http://schema.org/Book"> <imgitemprop="image" src="catcher-in-the-rye-cover.jpg" /> <br /> <span itemprop="name">The Catcher in the Rye</span><link itemprop="bookFormat" href="http://schema.org/ Paperback">Mass Market Paperback by <a itemprop="author" href="/author/jd_salinger.html"> J.D. Salinger</a> <br /> <span itemprop="numPages">224</span> pages<span itemprop="publisher">Little, Brown, and Company</span> <br /> <meta itemprop="publishDate" content="1991-05-01"> May 1, 1991<span itemprop="inLanguage">English</span>ISBN-10: <span itemprop="isbn">0316769487</span><br /></div><br />
  17. 17. We may soon see search results like this…<br />source: diveintohtml5.org<br />
  18. 18. What’s new in HTML 5?<br />1. Better Findability & Syndication<br />Opportunities:<br />
  19. 19. What’s new in HTML 5?<br />1. Better Findability & Syndication<br />Opportunities:<br /><ul><li>Better search results
  20. 20. Syndication & monetization
  21. 21. Embeddable content licensing</li></li></ul><li>What’s new in HTML 5?<br />2. Richer Interactive Content<br />
  22. 22. Native audio & video<br />
  23. 23. Canvas & SVG<br />source: en.inforapid.org<br />
  24. 24. CSS 3D<br />source:apple.com<br />
  25. 25. Drag & drop<br />source: my.picsengine.com<br />
  26. 26. What’s new in HTML 5?<br />2. Richer Interactive Content<br /> Opportunities:<br />
  27. 27. What’s new in HTML 5?<br />2. Richer Interactive Content<br /> Opportunities:<br /><ul><li>Figures, diagrams, games
  28. 28. Data visualization
  29. 29. Learning applications
  30. 30. Collaboration
  31. 31. Search engine optimization</li></li></ul><li>What’s new in HTML 5?<br />3. Truer Design & Layout<br />
  32. 32. Web fonts<br />source: lostworldsfairs.com<br />
  33. 33. Columns<br />source: tripleships.com/sample<br />
  34. 34. Media queries & responsive layouts<br />source: 2011.uxlondon.com<br />
  35. 35. What’s new in HTML 5?<br />3. Truer Design & Layout<br /> Opportunities:<br />
  36. 36. What’s new in HTML 5?<br />3. Truer Design & Layout<br /> Opportunities:<br /><ul><li>Closer brand adherence
  37. 37. Better legibility on screen
  38. 38. Nicer reading experience on mobile
  39. 39. Single site development</li></li></ul><li>What’s new in HTML 5?<br />4. Geolocation<br />
  40. 40. What’s new in HTML 5?<br />4. Geolocation<br /><ul><li>A user’s coordinates
  41. 41. Multiple ways of calculating (triangulation, GPS)
  42. 42. Handled with JavaScript
  43. 43. Currently a user opt-in feature</li></li></ul><li>Example: Twitter<br />
  44. 44. Example: Sonar<br />
  45. 45. Example: Constellations<br />source: nakshart.com<br />
  46. 46. Example: Augmented reality<br />source:acrossair.com<br />
  47. 47. What’s new in HTML 5?<br />4. Geolocation<br /> Opportunities:<br />
  48. 48. What’s new in HTML 5?<br />4. Geolocation<br /> Opportunities:<br /><ul><li>Social / sharing / collaboration
  49. 49. Location-based content
  50. 50. Augmented reality</li></li></ul><li>What’s new in HTML 5?<br />5. Offline storage & applications<br />
  51. 51. What’s new in HTML 5?<br />5. Offline storage & applications<br /><ul><li>More like native apps
  52. 52. History management
  53. 53. Save user data</li></li></ul><li>Example: Gmail<br />
  54. 54. Example: Evernote<br />
  55. 55. Example: Darkroom<br />
  56. 56. What’s new in HTML 5?<br />5. Offline storage & applications<br /> Opportunities:<br />
  57. 57. What’s new in HTML 5?<br />5. Offline storage & applications<br /> Opportunities:<br /><ul><li>Offline reading
  58. 58. Deeper engagement with content
  59. 59. New tools for productivity</li></li></ul><li>You might be wondering…<br />
  60. 60. Native app or web app?<br />
  61. 61. Native app or web app?<br />HTML 5 web app advantages:<br /><ul><li>Sharing, bookmarking
  62. 62. Web APIs & advertising networks
  63. 63. No need to build multiple apps for different platforms
  64. 64. No encumbering guidelines (Apple)</li></li></ul><li>How soon can I use it?<br />
  65. 65. How soon can I use it?<br />Internet Explorer 9… 3.64%<br />source: statowl.com<br />
  66. 66. How soon can I use it?<br /><ul><li>Some features available now
  67. 67. Some desktop browsers 1-2 years off
  68. 68. But plenty of fallback scripts for IE
  69. 69. Mobile is readytoday</li></li></ul><li>How soon can I use it?<br />source: findmebyip.com/litmus<br />
  70. 70. Thank you<br />www.ifactory.comwww.pubfactory.netJoin us on Twitter, Facebook, YouTube and LinkedIn as iFactoryBoston<br />

×