HTML 5

HTML5
Jason R. Leveille
Who am I?
HTML5 - Do You Care?
HTML5 - Why do I care?
Topics:
Tags GeoLocation Graphics - Canvas & SVG Video/Audio Storage
Tags:
HTML5 contains a rich set of proposed tags. The goal of these new tags is to bring richer semantic meaning to content.
Tags - <header>:
"a group of introductory or navigational aids. A header element typically contains the sections heading (an h1h6 element or an hgroup element), but can also contain other content, such as a table of contents, a search form, or any relevant logos."
<header> <h1>Main Header</h1> <p class="tagline">Tagline</p> </header>
Tags - <nav>:
"Not all groups of links on a page need to be in a nav element only sections that consist of major navigation blocks are appropriate for the nav element."
<nav role="navigation"> <ul> <li> <a href="#" title="link">link</a> </li> </ul> </nav>
Tags - <article>:
"a composition that forms an independent part of a document, page, application, or site. This could be a forum post, a magazine or newspaper article, a Web log entry ..."
<article> <h2>Item</h2> <p>Some content here.</p> </article>
Tags - <section>:
"section is a blob of content that you could store as an individual record in a database."
<section id="foo"> <h2>Foo</h2> <p> Content here </p> </section>
Tags - <article> vs. <section>:

"Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the element." "Section is used when there is naturally a heading at the start of the section."
Tags - <footer>:
"The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like."
Tags - <footer>:
<footer role="contentinfo"> <p> Footer </p> <nav> <h5>Quick Links</h5> <ul role="navigation"> <li> <a href="#">link</a> </li> </ul> </nav> </footer>
Tags - Getting Started:

Small - Minor integration o Only modify the doctype Medium - Thinking ahead o Modify the doctype, and include divs and classes that mimic HTML5 tags Large - Full integration o Actually start using HTML5 tags
HTML5 - Doctype:
<!DOCTYPE html> When browsers see this doctype, content is automatically switched into standards mode (as opposed to quirks mode). With this doctype, you can continue to write your markup as either HTML4 or XHTML1.0 Strict. What is quirks mode?
HTML5:
Examples: http://bitbucket.org/leveille/html5-presentation/src/tip/Tags/
GeoLocation:
navigator.geolocation.getCurrentPosition() obtain the user's current location navigator.geolocation.watchPosition() - watches for changes in a user's location
GeoLocation Usability:
FF 3.5 Opera Chrome (via GoogleGears) Safari on the IPhone IE8
GeoLocation:
Examples: http://bitbucket.org/leveille/html5presentation/src/tip/GeoLocation/
Graphics: Canvas & SVG:

Canvas - is a new HTML element which can be used to draw graphics using scripting (usually JavaScript).

"SVG - Scalable Vector Graphics (SVG) is a standard from the W3C which is built on top of XML. The SVG standard describes ways that graphics can be drawn for use on the web." (http://www.svgbasics.com/index.html)

Examples:
http://bitbucket.org/leveille/html5-presentation/src/tip/Graphics/ http://downloadstats.mozilla.com/

Usability:
Mozilla 1.8+ based browsers such as Firefox 1.5+, Camino 1.0+ and SeaMonkey 1.0+ implement a large part of SVG Full 1.1. Opera Web BrowserS o Opera 8+ includes support for most of SVG Tiny 1.1 o Opera 9 includes support for SVG Basic 1.1, including declarative animation, scripting, and SVG Tiny Fonts WebKit Web content rendering component. Bringing browsernative SVG to the next version of Safari and Konqueror.
Audio / Video:
Offers the ability to easily embed media into HTML documents Media playback can be controlled via JS and media events A flash fallback could be provided for browsers that don't support HTML5 media Many issues surrounding codecs that I am intentionally not getting into. o http://diveintohtml5.org/video.html
Audio / Video:
Examples:
http://bitbucket.org/leveille/html5-presentation/src/tip/Video-Audio/
Audio / Video:
Usability:
FF3.5, Chrome, Safari 3/4
Storage:
Session and Local Storageprovides a js interface to key-value storage. Web DatabasesRDBMS support for storing structured data inside the browser. Application CacheLocal Cache
Storage:
Examples:
http://bitbucket.org/leveille/html5presentation/src/tip/Storage/
Storage:
Usability:
IE8,FF3.5, Safari 4
Web Forms:
strongly-typed input fields new attributes for defining constraints new DOM interfaces
Web Forms:
Examples http://bitbucket.org/leveille/html5presentation/src/tip/WebForms2.0/
Conclusion
Who gives a shit?
Resources
HTML5 Doctor - http://html5doctor.com/ Dive Into HTML5 - http://diveintohtml5.org/ Cufon - http://github.com/sorccu/cufon RaphaelJS - http://raphaeljs.com/ SVG Basics - http://www.svgbasics.com/
Contact
http://jasonleveille.com json.leveille at the gmail

HTML 5

Hochgeladen von

Dokumentinformationen

Originalbeschreibung:

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

HTML 5

Hochgeladen von

Copyright:

Verfügbare Formate

HTML5

HTML5 - Do You Care?

HTML5 - Why do I care?

<header> <h1>Main Header</h1> <p class="tagline">Tagline</p> </header>

<article> <h2>Item</h2> <p>Some content here.</p> </article>

<section id="foo"> <h2>Foo</h2> <p> Content here </p> </section>

Tags - <article> vs. <section>:

Tags - Getting Started:

Graphics: Canvas & SVG:

Graphics: Canvas & SVG:

Graphics: Canvas & SVG:

Graphics: Canvas & SVG:

Das könnte Ihnen auch gefallen