• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Html5 Brown Bag
 

Html5 Brown Bag

on

  • 1,812 views

My html5 brown bag presntation i made recently

My html5 brown bag presntation i made recently

Statistics

Views

Total Views
1,812
Views on SlideShare
1,761
Embed Views
51

Actions

Likes
3
Downloads
0
Comments
0

2 Embeds 51

http://vizedhtmlcontent.next.ecollege.com 46
http://jucagi.wordpress.com 5

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

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
  • \n
  • \n
  • \n
  • HTML4 successor webapps 1 + xhtml2 merged \n\n2009 W3C dropped XHTML2 to focus on HTML5\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • W3C did research on most commonly used class names, to come up with new semantic elements.\n\nBrowsers that encounter tags that they dont recognise, will be ignored. Means they element can’t be styled... however... Polyfills\n
  • W3C did research on most commonly used class names, to come up with new semantic elements.\n\nBrowsers that encounter tags that they dont recognise, will be ignored. Means they element can’t be styled... however... Polyfills\n
  • \n
  • W3C did research on most commonly used class names, to come up with new semantic elements.\nBrowsers that dont recognise the elements ignore them ,meaning they cant be styled\n\nBrowsers that encounter tags that they dont recognise, will be ignored. Means they element can’t be styled... however... Polyfills\n
  • W3C did research on most commonly used class names, to come up with new semantic elements.\nBrowsers that dont recognise the elements ignore them ,meaning they cant be styled\n\nBrowsers that encounter tags that they dont recognise, will be ignored. Means they element can’t be styled... however... Polyfills\n
  • W3C did research on most commonly used class names, to come up with new semantic elements.\nBrowsers that dont recognise the elements ignore them ,meaning they cant be styled\n\nBrowsers that encounter tags that they dont recognise, will be ignored. Means they element can’t be styled... however... Polyfills\n
  • W3C did research on most commonly used class names, to come up with new semantic elements.\nBrowsers that dont recognise the elements ignore them ,meaning they cant be styled\n\nBrowsers that encounter tags that they dont recognise, will be ignored. Means they element can’t be styled... however... Polyfills\n
  • W3C did research on most commonly used class names, to come up with new semantic elements.\nBrowsers that dont recognise the elements ignore them ,meaning they cant be styled\n\nBrowsers that encounter tags that they dont recognise, will be ignored. Means they element can’t be styled... however... Polyfills\n
  • W3C did research on most commonly used class names, to come up with new semantic elements.\nBrowsers that dont recognise the elements ignore them ,meaning they cant be styled\n\nBrowsers that encounter tags that they dont recognise, will be ignored. Means they element can’t be styled... however... Polyfills\n
  • W3C did research on most commonly used class names, to come up with new semantic elements.\nBrowsers that dont recognise the elements ignore them ,meaning they cant be styled\n\nBrowsers that encounter tags that they dont recognise, will be ignored. Means they element can’t be styled... however... Polyfills\n
  • W3C did research on most commonly used class names, to come up with new semantic elements.\nBrowsers that dont recognise the elements ignore them ,meaning they cant be styled\n\nBrowsers that encounter tags that they dont recognise, will be ignored. Means they element can’t be styled... however... Polyfills\n
  • polyfill is a piece of code added to the page to augment the browser with the tech you would expect it to provide natively.\n\nBrowsers that encounter tags that they dont recognise, will be ignored. Means they element can’t be styled... however... Polyfills\n
  • polyfill is a piece of code added to the page to augment the browser with the tech you would expect it to provide natively.\n\nBrowsers that encounter tags that they dont recognise, will be ignored. Means they element can’t be styled... however... Polyfills\n
  • \n
  • css fits in with the OOCSS technique whereby you never style elements only classnames, makes styling more reusable... should be doing this anyway!\n\nSome elements dont allow the div to be nested inside, so the div would wrap those elements instead ie hgroup\n
  • css fits in with the OOCSS technique whereby you never style elements only classnames, makes styling more reusable... should be doing this anyway!\n\nSome elements dont allow the div to be nested inside, so the div would wrap those elements instead ie hgroup\n
  • \n
  • \n
  • needs to have well designed fallback, not just for browser support, but also because users may choose not too share there location info, or no location info available.\n

Html5 Brown Bag Html5 Brown Bag Presentation Transcript

  • HTML
  • Why html5?
  • Why html5?•“Were betting big on HTML 5.”• - Vic Gundotra, Google•“The world is moving to HTML5.• - Steve Jobs, Apple•“The future of the web is HTML5.”• - Dean Hachamovitch, Microsoft
  • What is html5?
  • What is html5?•W3C Working draft (unfinished)• Upgrade to HTML4 + XHTML1• New forms capabilities• Native multimedia
  • What is usable now?
  • What is usable now? Web workersDOCTYPE File API Web SQL DB Form ControlsWeb Sockets Canvas Web Messaging Geolocation Refined/Restored Elements Semantic Elements Web Storage
  • What is usable now?DOCTYPE Form Controls Canvas GeolocationRefined/Restored Elements Semantic Elements
  • What is usable now?DOCTYPE Form Controls Geolocation Semantic Elements
  • What is usable now?DOCTYPEForm ControlsSemantic ElementsGeolocation
  • DOCTYPE
  • DOCTYPExhtml (strict):<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  • DOCTYPExhtml (strict):<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">html5:<!DOCTYPE html>
  • DOCTYPExhtml (strict):<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">html5:<!DOCTYPE html>xhtml:<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />html5:<meta charset=”utf-8” />
  • My first HTML5 doc
  • My first HTML5 doc<!DOCTYPE html><meta charset=”utf-8”>
  • My first HTML5 doc<!DOCTYPE html><meta charset=”utf-8”><title>Hello</title><p>World!</p>
  • My first HTML5 doc<!DOCTYPE html><meta charset=”utf-8”><title>Hello</title><p>World!</p><head> and <body> tags are implied...!
  • My first HTML5 doc
  • My first HTML5 doc<!DOCTYPE html><html> <head> <meta charset=”utf-8”/> <title>Hello</title> </head> <body> <p>World!</p> </body></html>
  • My first HTML5 doc<!DOCTYPE html><html> <head> <meta charset=”utf-8”/> <title>Hello</title> </head> <body> <p>World!</p> </body></html><table> must include <tbody>
  • Form Controls
  • Form Controls• <input type=”email”>• <input type=”tel”>• <input type=”url”>• <input type=”number”>• <input type=”date”>• <input type=”datetime”>• <input type=”search”>• <input type=”range”>• .....
  • Form Controls• <input type=”email”> • form - autocomplete=”on”• <input type=”tel”> • form - novalidate=”novalidate”• <input type=”url”> • input - required=”required”• <input type=”number”> • input - autofocus=”autofocus”• <input type=”date”> • input - pattern=”/regexp/”• <input type=”datetime”> • input - placeholder=”some text...”• <input type=”search”> • input - multiple=”multiple”• <input type=”range”> • input - form=”some_form”• .....
  • Demo - Form Controls
  • Semantic Elements
  • Semantic Elements• <section>• <header>• <nav>• <footer>• <article>• <aside>• <hgroup>
  • Semantic Elements• <section> - thematic grouping of content• <header>• <nav>• <footer>• <article>• <aside>• <hgroup>
  • Semantic Elements• <section> - thematic grouping of content• <header> - intro / nav / headings• <nav>• <footer>• <article>• <aside>• <hgroup>
  • Semantic Elements• <section> - thematic grouping of content• <header> - intro / nav / headings• <nav> - navigation links• <footer>• <article>• <aside>• <hgroup>
  • Semantic Elements• <section> - thematic grouping of content• <header> - intro / nav / headings• <nav> - navigation links• <footer> - info about section, author, copyright• <article>• <aside>• <hgroup>
  • Semantic Elements• <section> - thematic grouping of content• <header> - intro / nav / headings• <nav> - navigation links• <footer> - info about section, author, copyright• <article> - self contained post, news, comment• <aside>• <hgroup>
  • Semantic Elements• <section> - thematic grouping of content• <header> - intro / nav / headings• <nav> - navigation links• <footer> - info about section, author, copyright• <article> - self contained post, news, comment• <aside> - pull quotes• <hgroup>
  • Semantic Elements• <section> - thematic grouping of content• <header> - intro / nav / headings• <nav> - navigation links• <footer> - info about section, author, copyright• <article> - self contained post, news, comment• <aside> - pull quotes• <hgroup> - logical grouping of headings
  • Polyfills...
  • Polyfills... “A polyfill, or polyfiller, is a piece of code (or plugin) that provides the technology that you, the developer, expect the browser to provide natively. Flattening the API landscape if you will.” - Remy Sharp (Founder Full Frontal JavaScript Conference) “A shim that mimics a future API providing fallback functionality to older browsers.” - Paul Irish (creator of Modernizr)Examples @ https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
  • Demo - html5shiv
  • Another technique...
  • Another technique...“Bulletproof HTML5 technique: Use a nested div with semantic class name” - Tantek Celik (Mozilla)
  • Another technique...“Bulletproof HTML5 technique: Use a nested div with semantic class name” - Tantek Celik (Mozilla)<section><div class=”section”> ...</div></section>.section {/* styling */}
  • Demo - Bulletproof
  • GeolocationThe only webapp API that has been moved to acandidate recomendation... ...it’s stable
  • Demo - Geolocation