HTML5: New Possibilities for Publishing

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

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

Opportunities:

Opportunities:
Better search results
Syndication & monetization
Embeddable content licensing

2. Richer Interactive Content

Native audio & video

Canvas & SVG
source: en.inforapid.org

CSS 3D
source:apple.com

Drag & drop
source: my.picsengine.com

Opportunities:

Opportunities:
Figures, diagrams, games
Data visualization
Learning applications
Collaboration
Search engine optimization

3. Truer Design & Layout

Web fonts
source: lostworldsfairs.com

Columns
source: tripleships.com/sample

Media queries & responsive layouts
source: 2011.uxlondon.com

Opportunities:

Opportunities:
Closer brand adherence
Better legibility on screen
Nicer reading experience on mobile
Single site development

4. Geolocation

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

4. Geolocation
Opportunities:

4. Geolocation
Opportunities:
Social / sharing / collaboration
Location-based content
Augmented reality

5. Offline storage & applications

More like native apps
History management
Save user data

Example: Gmail

Example: Evernote

Example: Darkroom

Opportunities:

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?

Internet Explorer 9… 3.64%
source: statowl.com

Some features available now
Some desktop browsers 1-2 years off
But plenty of fallback scripts for IE
Mobile is readytoday

source: findmebyip.com/litmus

Thank you
www.ifactory.comwww.pubfactory.netJoin us on Twitter, Facebook, YouTube and LinkedIn as iFactoryBoston

HTML5: New Possibilities for Publishing

by iFactory

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 325

Statistics

HTML5: New Possibilities for Publishing Presentation Transcript