html5: new possibilities for publishing
DESCRIPTION
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.TRANSCRIPT
![Page 1: HTML5: New Possibilities for Publishing](https://reader035.vdocuments.mx/reader035/viewer/2022062418/5542324eb4c9059b4f8b45e1/html5/thumbnails/1.jpg)
HTML5New Possibilities for Publishing
![Page 2: HTML5: New Possibilities for Publishing](https://reader035.vdocuments.mx/reader035/viewer/2022062418/5542324eb4c9059b4f8b45e1/html5/thumbnails/2.jpg)
Who is iFactory?
A division of RDW Group, iFactory is an interactive design and development company with over 19 years experience.
![Page 3: HTML5: New Possibilities for Publishing](https://reader035.vdocuments.mx/reader035/viewer/2022062418/5542324eb4c9059b4f8b45e1/html5/thumbnails/3.jpg)
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
![Page 4: HTML5: New Possibilities for Publishing](https://reader035.vdocuments.mx/reader035/viewer/2022062418/5542324eb4c9059b4f8b45e1/html5/thumbnails/4.jpg)
What is HTML?
– HyperText Markup Language– The “building blocks” of all web pages– Tag format: <html></html>
![Page 5: HTML5: New Possibilities for Publishing](https://reader035.vdocuments.mx/reader035/viewer/2022062418/5542324eb4c9059b4f8b45e1/html5/thumbnails/5.jpg)
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>
![Page 6: HTML5: New Possibilities for Publishing](https://reader035.vdocuments.mx/reader035/viewer/2022062418/5542324eb4c9059b4f8b45e1/html5/thumbnails/6.jpg)
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
![Page 7: HTML5: New Possibilities for Publishing](https://reader035.vdocuments.mx/reader035/viewer/2022062418/5542324eb4c9059b4f8b45e1/html5/thumbnails/7.jpg)
HTML 5 =HTML 5 + CSS 3 + JavaScript
![Page 8: HTML5: New Possibilities for Publishing](https://reader035.vdocuments.mx/reader035/viewer/2022062418/5542324eb4c9059b4f8b45e1/html5/thumbnails/8.jpg)
A new logo
source: w3.org/html/logo
![Page 9: HTML5: New Possibilities for Publishing](https://reader035.vdocuments.mx/reader035/viewer/2022062418/5542324eb4c9059b4f8b45e1/html5/thumbnails/9.jpg)
What’s new in HTML 5?
Five Points for Publishing
![Page 10: HTML5: New Possibilities for Publishing](https://reader035.vdocuments.mx/reader035/viewer/2022062418/5542324eb4c9059b4f8b45e1/html5/thumbnails/10.jpg)
What’s new in HTML 5?
1. Better Findability & Syndication
![Page 11: HTML5: New Possibilities for Publishing](https://reader035.vdocuments.mx/reader035/viewer/2022062418/5542324eb4c9059b4f8b45e1/html5/thumbnails/11.jpg)
What’s new in HTML 5?
1. Better Findability & Syndication– New semantic tags– Microdata
![Page 12: HTML5: New Possibilities for Publishing](https://reader035.vdocuments.mx/reader035/viewer/2022062418/5542324eb4c9059b4f8b45e1/html5/thumbnails/12.jpg)
New semantic tags
<article>
<aside>
<details>
<figure>
<figcaption>
<footer>
<header>
<hgroup>
<mark>
<menu>
<nav>
<section>
<summary>
<time>
![Page 13: HTML5: New Possibilities for Publishing](https://reader035.vdocuments.mx/reader035/viewer/2022062418/5542324eb4c9059b4f8b45e1/html5/thumbnails/13.jpg)
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>
![Page 14: HTML5: New Possibilities for Publishing](https://reader035.vdocuments.mx/reader035/viewer/2022062418/5542324eb4c9059b4f8b45e1/html5/thumbnails/14.jpg)
Microdata
itemscope
itemtype
itemprop
Event
Organization
Person
Product
Review
Blog
Thing
Creative Work
Article
Book
Author
...and more
![Page 15: HTML5: New Possibilities for Publishing](https://reader035.vdocuments.mx/reader035/viewer/2022062418/5542324eb4c9059b4f8b45e1/html5/thumbnails/15.jpg)
schema.org—Google, Bing, Yahoo
![Page 16: HTML5: New Possibilities for Publishing](https://reader035.vdocuments.mx/reader035/viewer/2022062418/5542324eb4c9059b4f8b45e1/html5/thumbnails/16.jpg)
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>
![Page 17: HTML5: New Possibilities for Publishing](https://reader035.vdocuments.mx/reader035/viewer/2022062418/5542324eb4c9059b4f8b45e1/html5/thumbnails/17.jpg)
We may soon see search results like this…
source: diveintohtml5.org
![Page 18: HTML5: New Possibilities for Publishing](https://reader035.vdocuments.mx/reader035/viewer/2022062418/5542324eb4c9059b4f8b45e1/html5/thumbnails/18.jpg)
What’s new in HTML 5?
1. Better Findability & Syndication
Opportunities:
![Page 19: HTML5: New Possibilities for Publishing](https://reader035.vdocuments.mx/reader035/viewer/2022062418/5542324eb4c9059b4f8b45e1/html5/thumbnails/19.jpg)
What’s new in HTML 5?
1. Better Findability & Syndication
Opportunities:–Better search results–Syndication & monetization–Embeddable content licensing
![Page 20: HTML5: New Possibilities for Publishing](https://reader035.vdocuments.mx/reader035/viewer/2022062418/5542324eb4c9059b4f8b45e1/html5/thumbnails/20.jpg)
What’s new in HTML 5?
2. Richer Interactive Content
![Page 21: HTML5: New Possibilities for Publishing](https://reader035.vdocuments.mx/reader035/viewer/2022062418/5542324eb4c9059b4f8b45e1/html5/thumbnails/21.jpg)
Native audio & video
![Page 22: HTML5: New Possibilities for Publishing](https://reader035.vdocuments.mx/reader035/viewer/2022062418/5542324eb4c9059b4f8b45e1/html5/thumbnails/22.jpg)
Canvas & SVG
source: en.inforapid.org
![Page 23: HTML5: New Possibilities for Publishing](https://reader035.vdocuments.mx/reader035/viewer/2022062418/5542324eb4c9059b4f8b45e1/html5/thumbnails/23.jpg)
CSS 3D
source: apple.com
![Page 24: HTML5: New Possibilities for Publishing](https://reader035.vdocuments.mx/reader035/viewer/2022062418/5542324eb4c9059b4f8b45e1/html5/thumbnails/24.jpg)
Drag & drop
source: my.picsengine.com
![Page 25: HTML5: New Possibilities for Publishing](https://reader035.vdocuments.mx/reader035/viewer/2022062418/5542324eb4c9059b4f8b45e1/html5/thumbnails/25.jpg)
What’s new in HTML 5?
2. Richer Interactive Content Opportunities:
![Page 26: HTML5: New Possibilities for Publishing](https://reader035.vdocuments.mx/reader035/viewer/2022062418/5542324eb4c9059b4f8b45e1/html5/thumbnails/26.jpg)
What’s new in HTML 5?
2. Richer Interactive Content Opportunities:
–Figures, diagrams, games–Data visualization –Learning applications –Collaboration –Search engine optimization
![Page 27: HTML5: New Possibilities for Publishing](https://reader035.vdocuments.mx/reader035/viewer/2022062418/5542324eb4c9059b4f8b45e1/html5/thumbnails/27.jpg)
What’s new in HTML 5?
3. Truer Design & Layout
![Page 28: HTML5: New Possibilities for Publishing](https://reader035.vdocuments.mx/reader035/viewer/2022062418/5542324eb4c9059b4f8b45e1/html5/thumbnails/28.jpg)
Web fonts
source: lostworldsfairs.com
![Page 29: HTML5: New Possibilities for Publishing](https://reader035.vdocuments.mx/reader035/viewer/2022062418/5542324eb4c9059b4f8b45e1/html5/thumbnails/29.jpg)
Columns
source: tripleships.com/sample
![Page 30: HTML5: New Possibilities for Publishing](https://reader035.vdocuments.mx/reader035/viewer/2022062418/5542324eb4c9059b4f8b45e1/html5/thumbnails/30.jpg)
Media queries & responsive layouts
source: 2011.uxlondon.com
![Page 31: HTML5: New Possibilities for Publishing](https://reader035.vdocuments.mx/reader035/viewer/2022062418/5542324eb4c9059b4f8b45e1/html5/thumbnails/31.jpg)
What’s new in HTML 5?
3. Truer Design & Layout Opportunities:
![Page 32: HTML5: New Possibilities for Publishing](https://reader035.vdocuments.mx/reader035/viewer/2022062418/5542324eb4c9059b4f8b45e1/html5/thumbnails/32.jpg)
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
![Page 33: HTML5: New Possibilities for Publishing](https://reader035.vdocuments.mx/reader035/viewer/2022062418/5542324eb4c9059b4f8b45e1/html5/thumbnails/33.jpg)
What’s new in HTML 5?
4. Geolocation
![Page 34: HTML5: New Possibilities for Publishing](https://reader035.vdocuments.mx/reader035/viewer/2022062418/5542324eb4c9059b4f8b45e1/html5/thumbnails/34.jpg)
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
![Page 35: HTML5: New Possibilities for Publishing](https://reader035.vdocuments.mx/reader035/viewer/2022062418/5542324eb4c9059b4f8b45e1/html5/thumbnails/35.jpg)
Example: Twitter
![Page 36: HTML5: New Possibilities for Publishing](https://reader035.vdocuments.mx/reader035/viewer/2022062418/5542324eb4c9059b4f8b45e1/html5/thumbnails/36.jpg)
Example: Sonar
![Page 37: HTML5: New Possibilities for Publishing](https://reader035.vdocuments.mx/reader035/viewer/2022062418/5542324eb4c9059b4f8b45e1/html5/thumbnails/37.jpg)
Example: Constellations
source: nakshart.com
![Page 38: HTML5: New Possibilities for Publishing](https://reader035.vdocuments.mx/reader035/viewer/2022062418/5542324eb4c9059b4f8b45e1/html5/thumbnails/38.jpg)
Example: Augmented reality
source: acrossair.com
![Page 39: HTML5: New Possibilities for Publishing](https://reader035.vdocuments.mx/reader035/viewer/2022062418/5542324eb4c9059b4f8b45e1/html5/thumbnails/39.jpg)
What’s new in HTML 5?
4. Geolocation Opportunities:
![Page 40: HTML5: New Possibilities for Publishing](https://reader035.vdocuments.mx/reader035/viewer/2022062418/5542324eb4c9059b4f8b45e1/html5/thumbnails/40.jpg)
What’s new in HTML 5?
4. Geolocation Opportunities:
–Social / sharing / collaboration –Location-based content –Augmented reality
![Page 41: HTML5: New Possibilities for Publishing](https://reader035.vdocuments.mx/reader035/viewer/2022062418/5542324eb4c9059b4f8b45e1/html5/thumbnails/41.jpg)
What’s new in HTML 5?
5. Offline storage & applications
![Page 42: HTML5: New Possibilities for Publishing](https://reader035.vdocuments.mx/reader035/viewer/2022062418/5542324eb4c9059b4f8b45e1/html5/thumbnails/42.jpg)
What’s new in HTML 5?
5. Offline storage & applications– More like native apps– History management– Save user data
![Page 43: HTML5: New Possibilities for Publishing](https://reader035.vdocuments.mx/reader035/viewer/2022062418/5542324eb4c9059b4f8b45e1/html5/thumbnails/43.jpg)
Example: Gmail
![Page 44: HTML5: New Possibilities for Publishing](https://reader035.vdocuments.mx/reader035/viewer/2022062418/5542324eb4c9059b4f8b45e1/html5/thumbnails/44.jpg)
Example: Evernote
![Page 45: HTML5: New Possibilities for Publishing](https://reader035.vdocuments.mx/reader035/viewer/2022062418/5542324eb4c9059b4f8b45e1/html5/thumbnails/45.jpg)
Example: Darkroom
![Page 46: HTML5: New Possibilities for Publishing](https://reader035.vdocuments.mx/reader035/viewer/2022062418/5542324eb4c9059b4f8b45e1/html5/thumbnails/46.jpg)
What’s new in HTML 5?
5. Offline storage & applications Opportunities:
![Page 47: HTML5: New Possibilities for Publishing](https://reader035.vdocuments.mx/reader035/viewer/2022062418/5542324eb4c9059b4f8b45e1/html5/thumbnails/47.jpg)
What’s new in HTML 5?
5. Offline storage & applications Opportunities:
–Offline reading–Deeper engagement with content–New tools for productivity
![Page 48: HTML5: New Possibilities for Publishing](https://reader035.vdocuments.mx/reader035/viewer/2022062418/5542324eb4c9059b4f8b45e1/html5/thumbnails/48.jpg)
You might be wondering…
![Page 49: HTML5: New Possibilities for Publishing](https://reader035.vdocuments.mx/reader035/viewer/2022062418/5542324eb4c9059b4f8b45e1/html5/thumbnails/49.jpg)
Native app or web app?
![Page 50: HTML5: New Possibilities for Publishing](https://reader035.vdocuments.mx/reader035/viewer/2022062418/5542324eb4c9059b4f8b45e1/html5/thumbnails/50.jpg)
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)
![Page 51: HTML5: New Possibilities for Publishing](https://reader035.vdocuments.mx/reader035/viewer/2022062418/5542324eb4c9059b4f8b45e1/html5/thumbnails/51.jpg)
How soon can I use it?
![Page 52: HTML5: New Possibilities for Publishing](https://reader035.vdocuments.mx/reader035/viewer/2022062418/5542324eb4c9059b4f8b45e1/html5/thumbnails/52.jpg)
How soon can I use it?
Internet Explorer 9… 3.64%
source: statowl.com
![Page 53: HTML5: New Possibilities for Publishing](https://reader035.vdocuments.mx/reader035/viewer/2022062418/5542324eb4c9059b4f8b45e1/html5/thumbnails/53.jpg)
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
![Page 54: HTML5: New Possibilities for Publishing](https://reader035.vdocuments.mx/reader035/viewer/2022062418/5542324eb4c9059b4f8b45e1/html5/thumbnails/54.jpg)
How soon can I use it?
source: findmebyip.com/litmus
![Page 55: HTML5: New Possibilities for Publishing](https://reader035.vdocuments.mx/reader035/viewer/2022062418/5542324eb4c9059b4f8b45e1/html5/thumbnails/55.jpg)
Thank youwww.ifactory.com www.pubfactory.net
Join us on Twitter, Facebook, YouTube and LinkedIn as iFactoryBoston