HTML5: New Possibilities for Publishing
Upcoming SlideShare
Loading in...5
×
 

HTML5: New Possibilities for Publishing

on

  • 4,360 views

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 ...

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.

Statistics

Views

Total Views
4,360
Views on SlideShare
4,011
Embed Views
349

Actions

Likes
2
Downloads
55
Comments
0

1 Embed 349

http://interactivity.ifactory.com 349

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

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: New Possibilities for Publishing HTML5: New Possibilities for Publishing Presentation Transcript

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