Deep Dive into
HTML5 / CSS3

Presenter:
Wesley Reisz, wes@wesleyreisz.com

Session Number: 502


Click here, Press → key to advance.

Disclaimer and Admissions



  • 10 Minutes Behind... catch up after lunch.
  • Lunch is on the 10th Floo

New to HTML5... This is my exploration and some of my
discoveries along the way. In no way should this be considered a comprehensive or authoritative HTML 5 discussion.

Everything that I'm going to show you today is HTML, CSS, and Javascript. I used jQuery for a infobox plugin later.
NO ServerSide Technology was used.

Show

What is HTML5



"HTML5" has at various times been used to refer to a wide variety of technologies, some of which originated in this document, and some of which have only ever been tangentially related.

This specification actually now defines the next generation of HTML after HTML5. HTML5 reached Last Call at the WHATWG in October 2009, and shortly after we started working on some experimental new features that are not as stable as the rest of the specification. The stability of sections is annotated in the margin.

http://www.whatwg.org/specs/web-apps/current-work/#is-this-html5

New HTML5 API's'


What is NOT HTML5 (or CSS3)




  • Web Workers: Thread-like operation for multiple concurrent processes.
  • Web Storage: Defines an API for persistent data storage of key-value pair data in Web clients
  • WebSocket API: Defines an API that enables Web pages to use the WebSocket protocol for two-way communication with a remote host.
  • Server-sent Events: defines an API for opening an HTTP connection for receiving push notifications from a server in the form of DOM events
  • Media Type Sniffing: an algorithm for determining the effective media type of HTTP responses that balances security and compatibility considerations.
  • The Web Origin Concept: defines how to compute an origin from a URI, how to serialize an origin to a string, and an HTTP header, named "Origin”, for indicating which origin caused the user agent to issue a particular HTTP request
  • Geolocation API: API that provides scripted access to geographical location information associated with the hosting device.
  • SVG: a modularized language for describing two-dimensional vector and mixed vector/raster graphics in XML
  • MathML: MathML is an XML application for describing mathematical notation and capturing both its structure and content. The goal of MathML is to enable mathematics to be served, received, and processed on the World Wide Web, just as HTML has enabled this functionality for text.
  • XMLHttpRequest: object implements an interface exposed by a scripting engine that allows scripts to perform HTTP client functionality, such as submitting form data or loading data from a server. It is the ECMAScript HTTP API.
  • Parts of CSS: (ex: http://www.w3.org/Style/CSS/current-work)

New HTML Tags: So What's It Look Like?





"Divitis" - Brian Hogan, HTML5 and CSS3 PragProg

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
   		"http://www.w3.org/TR/html4/loose.dtd">
...
// HTML 4 Sample Code
<div id="navbar_wrapper">
  <div id="navbar" >
    <ul>
      <li><a href="/" >Home</a></li>
      ...
    </ul>
  </div>
</div>
<div id="content" >
   <div id="contentLeft" >
     <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ullamcorper cursus dignissim. 
        Sed congue vestibulum lorem eget tempus. Donec sagittis ultrices nisi at pellentesque. 
     </p> 
   </div>
   <div id="contentRight" >
     <p>
        Vivamus vulputate, lectus non rhoncus vulputate, arcu diam fringilla sapien, ut mattis 
        enim tellus non turpis. Sed porttitor libero eget dolor suscipit eget pharetra nunc 
        tristique...
     </p>
   </div>
</div>
<div id="footer" >
   <ul>
     <li><a href="/" >Home</a></li>
     ...
   </ul>
 </div>

New HTML Tags: So What's It Look Like? 






<!DOCTYPE html >
...
// HTML 5 Sample Code
<nav id="navbar" >
  <ul>
    <li><a href="/" >Home</a></li>
    ...
  </ul>
</nav>
<section id="content">
  <article id=="contentLeft">
     <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ullamcorper cursus dignissim. 
        Sed congue vestibulum lorem eget tempus. Donec sagittis ultrices nisi at pellentesque. 
     </p> 
    </article>
   <article id="contentRight" >
     <p>
        Vivamus vulputate, lectus non rhoncus vulputate, arcu diam fringilla sapien, ut mattis 
        enim tellus non turpis. Sed porttitor libero eget dolor suscipit eget pharetra nunc 
        tristique...
     </p>
   </div>
</section>
<footer id="footer" >
   <ul>
     <li><a href="/" >Home</a></li>
     ...
   </ul>
</footer>

The New HTML Tags



  • Placeholder & Autofocus Attr
  • Slider
  • Calendar
  • Email & Url Field
  • Color Picker
  • Custom Data Attributes: prefaced with "data-" Sample
Comparison of layoutEngines (HTML5)

The Challenge

Develop an application using HTML5 and CSS3...

Make it work on all major browsers...

Make it work on cell phones...

Use local storage / webdb storage...

Use CSS3 Effects...


...after all that, discuss the challenges I faced.


Develop an application using HTML5 and CSS3...

Show
...after all that, discuss the challenges I faced.
http://bit.ly/fcAbM4


Make it work on all major browsers...

...


Show


Next