Chapter 2 Production Possibilities and Opportunity Cost ©2002 South-Western College Publishing.
HTML5: New Possibilities for Publishing
description
Transcript of 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
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>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
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 ready today
How soon can I use it?
source: findmebyip.com/litmus
Thank youwww.ifactory.com www.pubfactory.net
Join us on Twitter, Facebook, YouTube and LinkedIn as iFactoryBoston