html5: new possibilities for publishing

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

<img src="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


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>Lorem ipsum 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 itemscope itemtype="http://schema.org/Book"> <img itemprop="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


2. Richer Interactive Content Opportunities:


2. Richer Interactive Content 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


3. Truer Design & Layout Opportunities:


3. Truer Design & Layout 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


5. Offline storage & applications– More like native apps– History management– Save user data

Example: Gmail

Example: Evernote

Example: Darkroom


5. Offline storage & applications Opportunities:


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?


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 ready today


source: findmebyip.com/litmus

Thank youwww.ifactory.com www.pubfactory.net

Join us on Twitter, Facebook, YouTube and LinkedIn as iFactoryBoston

html5: new possibilities for publishing

Education