• Save
Html5 for today and tomorrow
Upcoming SlideShare
Loading in...5
×
 

Html5 for today and tomorrow

on

  • 267 views

by Craig Shoemaker at the "During MIX!!" Event ROCK!ON at the store

by Craig Shoemaker at the "During MIX!!" Event ROCK!ON at the store

Statistics

Views

Total Views
267
Views on SlideShare
267
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Html5 for today and tomorrow Html5 for today and tomorrow Presentation Transcript

  • Fundamentals of HTML5Craig Shoemakercraig@craigshoemaker.net@craigshoemaker
  • Craig Shoemakercraig@craigshoemaker.net@craigshoemaker
  • What is HTML5?
  • Semantic Markup+ JavaScript APIs HTML5
  • Semantic Markup <article> <footer> <rt> <aside> <header> <ruby> <audio> <hgroup> <section> <canvas> <keygen> <source> <command> <mark> <summary> <datalist> <meter> <time> <details> <nav> <video> <embed> <output> <wbr> <figcaption> <progress> <figure> <rp> Source: http://www.w3schools.com/html5/html5_reference.asp
  • Article
  • Aside
  • Audio SourceVideo Source
  • Canvas
  • Command
  • Datalist
  • SummaryDetails
  • Embed
  • FigureFigcaption
  • Footer
  • Header
  • Keygen
  • Mark
  • Meter
  • Nav
  • Output
  • Progress
  • RPRTRub
  • Section
  • Time
  • Wbr
  • Semantic Markup <article> <footer> <rt> <aside> <header> <ruby> <audio> <hgroup> <section> <canvas> <keygen> <source> <command> <mark> <summary> <datalist> <meter> <time> <details> <nav> <video> <embed> <output> <wbr> <figcaption> <progress> <figure> <rp> Source: http://www.w3schools.com/html5/html5_reference.asp
  • Semantic Markup <article> <footer> <rt> <aside> <header> <ruby> <audio> <hgroup> <section> <canvas> <keygen> <source> <command> <mark> <summary> <datalist> <meter> <time> <details> <nav> <video> <embed> <output> <wbr> <figcaption> <progress> <figure> <rp> Source: http://www.w3schools.com/html5/html5_reference.asp
  • JavaScript APIs Canvas 2D Context Appllications Contacts Selection File APIs Server-Sent Events Forms Web Notifications Geolocation Web Sockets HTML Microdata Web Storage Indexed Database Web Workers Media Capture XMLHttpRequest Level 2 Messaging Offline Web Source: http://dret.typepad.com/dretblog/html5-api-overview.html
  • Contacts
  • Selection
  • Offline Apps
  • Indexed Database
  • Web Workers
  • Web Storage
  • Web Sockets
  • Server-Sent Events
  • XMLHttpRequest Level 2
  • Geolocation
  • Canvas
  • Microdata
  • Media Capture
  • Messaging
  • Forms
  • File APIs
  • JavaScript APIs Canvas 2D Context Selection Contacts Server-Sent Events File APIs Web Notifications Forms Web Sockets Geolocation Web Storage HTML Microdata Web Workers Indexed Database XMLHttpRequest Level 2 Media Capture Messaging Offline Web Applications Source: http://dret.typepad.com/dretblog/html5-api-overview.html
  • JavaScript APIs Contacts Geolocation Selection Canvas 2D Context Offline Apps HTML Microdata Indexed Database Media Capture Web Workers Messaging Web Storage Forms Web Sockets File API Web SQL DB Server Events XMLHttpRequest Level 2 Source: http://dret.typepad.com/dretblog/html5-api-overview.html
  • 2022?
  • Semantic Markup
  • HTML4/XHTML<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>About the Show – Polymorphic Podcast</title> <style type="text/css">h1{color:#ff9900;}</style> <script type="text/javascript" src="jquery-1.4.2.min.js"></script></head><body> <h1>Polymorphic Podcast</h1> <h2>About the Show</h2> <p><a href="http://weblogs.asp.net/craigshoemaker">Craig Shoemaker</a> is a software developer, podcaster, blogger and New- Media Evangelist for <a href="http://infragistics.com/">Infragistics</a>.</p></body></html>
  • HTML5<!doctype html><html lang="en"><head> <title>About the Show – Polymorphic Podcast</title> <style>h1{color:#ff9900;}</style> <script src="jquery-1.4.2.min.js"></script></head><body> <header> <hgroup> <h1>Polymorphic Podcast</h1> <h2>About the Show</h2> </hgroup> </header> <p><a href="http://weblogs.asp.net/craigshoemaker">Craig Shoemaker</a> is a software developer, podcaster, blogger and New- Media Evangelist for <a href="http://infragistics.com/">Infragistics</a>.</p></body></html>
  • Demo…
  • Native Media Support
  • Audio wav mp3 ogg vorbis
  • Video h.264 ogg theora webm
  • Demo…
  • Updated Selector Engine css selectors
  • Demo…
  • Canvas
  • Demo…
  • Forms API email time url search number color range date Source: http://www.w3schools.com/html5/html5_form_input_types.asp
  • Forms API email time url search number color range date Source: http://www.w3schools.com/html5/html5_form_input_types.asp
  • Demo…
  • Web Storage local storage session storage web sql/indexed db
  • Web Storage local storage session storage web sql/indexed db
  • Demo…
  • WebWorkers
  • Demo…
  • Geolocation
  • User- IP Address Coordinate Triangulation Defined GPS WiFi Cell Phone Available EverywherePros Processed Server Side Low AccuracyCons High Processing Overhead Source: Pro HTML5 Programming, Apress
  • User- IP Address Coordinate Triangulation Defined GPS WiFi Cell Phone Available High Everywhere AccuracyPros Processed Server Side Low Long Accuracy OperationCons High Not Optimal Processing for Indoors Overhead Hardware Req’d Source: Pro HTML5 Programming, Apress
  • User- IP Address Coordinate Triangulation Defined GPS WiFi Cell Phone Available High Accurate Everywhere AccuracyPros Works Indoors Processed Server Side Quick & Cheap Response Low Long Ineffective in Accuracy Operation Areas withCons Limited Access High Not Optimal Points Processing for Indoors Overhead Hardware Req’d Source: Pro HTML5 Programming, Apress
  • User- IP Address Coordinate Triangulation Defined GPS WiFi Cell Phone Available High Accurate Fairly Everywhere Accuracy AccuratePros Works Indoors Processed Works Server Side Quick & Cheap Indoors Response Quick & Cheap Response Low Long Ineffective in Req. access Accuracy Operation Areas with to cellCons Limited Access phone or High Not Optimal Points modem Processing for Indoors Overhead Ineffective Hardware in Areas Req’d with Few Cell Towers Source: Pro HTML5 Programming, Apress
  • User- IP Address Coordinate Triangulation Defined GPS WiFi Cell Phone Available High Accurate Fairly High Accuracy Everywhere Accuracy AccuratePros Works Indoors Flexibility to Processed Works Designate Alt. Server Side Quick & Cheap Indoors Locations Response Quick & May be Fastest Cheap Option Response Low Long Ineffective in Req. access Can be Very Accuracy Operation Areas with to cell InaccurateCons Limited Access phone or (esp. if High Not Optimal Points modem locations Processing for Indoors change) Overhead Ineffective Hardware in Areas Req’d with Few Cell Towers Source: Pro HTML5 Programming, Apress
  • Demo…
  • Fundamentals of HTML5Craig Shoemakercraig@craigshoemaker.net@craigshoemaker