SlideShare a Scribd company logo
HTML
Why html5?
Why html5?
•“We're 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 workers
DOCTYPE
                    File API
                               Web SQL DB          Form Controls
Web Sockets
                Canvas

                      Web Messaging         Geolocation
  Refined/Restored
     Elements                               Semantic Elements
                       Web Storage
What is usable now?
DOCTYPE

                                Form Controls
              Canvas
                         Geolocation
Refined/Restored
   Elements               Semantic Elements
What is usable now?
DOCTYPE

                                Form Controls


                         Geolocation


                          Semantic Elements
What is usable now?
DOCTYPE
Form Controls
Semantic Elements
Geolocation
DOCTYPE
DOCTYPE
xhtml (strict):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
DOCTYPE
xhtml (strict):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

html5:
<!DOCTYPE html>
DOCTYPE
xhtml (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
Geolocation
The only webapp API that has been moved to a
candidate recomendation...

                                     ...it’s stable
Demo - Geolocation

More Related Content

What's hot

Intro to HTML 5 / CSS 3
Intro to HTML 5 / CSS 3Intro to HTML 5 / CSS 3
Intro to HTML 5 / CSS 3
Tadpole Collective
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5Terry Ryan
 
Grok Drupal (7) Theming
Grok Drupal (7) ThemingGrok Drupal (7) Theming
Grok Drupal (7) Theming
PINGV
 
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Laura Scott
 
Comprehensive Browser Automation Solution using Groovy, WebDriver & Obect Model
Comprehensive Browser Automation Solution using Groovy, WebDriver & Obect ModelComprehensive Browser Automation Solution using Groovy, WebDriver & Obect Model
Comprehensive Browser Automation Solution using Groovy, WebDriver & Obect Model
vodQA
 
Creating Custom Templates for Joomla! 2.5
Creating Custom Templates for Joomla! 2.5Creating Custom Templates for Joomla! 2.5
Creating Custom Templates for Joomla! 2.5
Don Cranford
 
Web component driven development
Web component driven developmentWeb component driven development
Web component driven development
Gil Fink
 
Basics of Front End Web Dev PowerPoint
Basics of Front End Web Dev PowerPointBasics of Front End Web Dev PowerPoint
Basics of Front End Web Dev PowerPointSahil Gandhi
 
Developing Your Ultimate Package
Developing Your Ultimate PackageDeveloping Your Ultimate Package
Developing Your Ultimate Package
Simon Collison
 
TOSSUG HTML5 讀書會 新標籤與表單
TOSSUG HTML5 讀書會 新標籤與表單TOSSUG HTML5 讀書會 新標籤與表單
TOSSUG HTML5 讀書會 新標籤與表單
偉格 高
 
BDUG Responsive Web Theming - 7/23/12
BDUG Responsive Web Theming - 7/23/12BDUG Responsive Web Theming - 7/23/12
BDUG Responsive Web Theming - 7/23/12
ucbdrupal
 
2022 HTML5: The future is now
2022 HTML5: The future is now2022 HTML5: The future is now
2022 HTML5: The future is now
Gonzalo Cordero
 
Component-Oriented Web Development with Dart
Component-Oriented Web Development with DartComponent-Oriented Web Development with Dart
Component-Oriented Web Development with Dart
C4Media
 
HTML5, The Open Web, and what it means for you - Altran
HTML5, The Open Web, and what it means for you - AltranHTML5, The Open Web, and what it means for you - Altran
HTML5, The Open Web, and what it means for you - AltranRobert Nyman
 
WordPress Theme Development: Part 2
WordPress Theme Development: Part 2WordPress Theme Development: Part 2
WordPress Theme Development: Part 2
Josh Lee
 
Intro to polymer-Devfest Yaoundé 2013
Intro to polymer-Devfest Yaoundé 2013Intro to polymer-Devfest Yaoundé 2013
Intro to polymer-Devfest Yaoundé 2013gdgyaounde
 
Introduction to Drupal (7) Theming
Introduction to Drupal (7) ThemingIntroduction to Drupal (7) Theming
Introduction to Drupal (7) Theming
Robert Carr
 
Custom WordPress theme development
Custom WordPress theme developmentCustom WordPress theme development
Custom WordPress theme development
Tammy Hart
 
WordPress theme development from scratch : ICT MeetUp 2013 Nepal
WordPress theme development from scratch : ICT MeetUp 2013 NepalWordPress theme development from scratch : ICT MeetUp 2013 Nepal
WordPress theme development from scratch : ICT MeetUp 2013 Nepal
Chandra Prakash Thapa
 
In the Trenches with Accessible EPUB - Charles LaPierre - ebookcraft 2017
In the Trenches with Accessible EPUB - Charles LaPierre - ebookcraft 2017In the Trenches with Accessible EPUB - Charles LaPierre - ebookcraft 2017
In the Trenches with Accessible EPUB - Charles LaPierre - ebookcraft 2017
BookNet Canada
 

What's hot (20)

Intro to HTML 5 / CSS 3
Intro to HTML 5 / CSS 3Intro to HTML 5 / CSS 3
Intro to HTML 5 / CSS 3
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5
 
Grok Drupal (7) Theming
Grok Drupal (7) ThemingGrok Drupal (7) Theming
Grok Drupal (7) Theming
 
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
 
Comprehensive Browser Automation Solution using Groovy, WebDriver & Obect Model
Comprehensive Browser Automation Solution using Groovy, WebDriver & Obect ModelComprehensive Browser Automation Solution using Groovy, WebDriver & Obect Model
Comprehensive Browser Automation Solution using Groovy, WebDriver & Obect Model
 
Creating Custom Templates for Joomla! 2.5
Creating Custom Templates for Joomla! 2.5Creating Custom Templates for Joomla! 2.5
Creating Custom Templates for Joomla! 2.5
 
Web component driven development
Web component driven developmentWeb component driven development
Web component driven development
 
Basics of Front End Web Dev PowerPoint
Basics of Front End Web Dev PowerPointBasics of Front End Web Dev PowerPoint
Basics of Front End Web Dev PowerPoint
 
Developing Your Ultimate Package
Developing Your Ultimate PackageDeveloping Your Ultimate Package
Developing Your Ultimate Package
 
TOSSUG HTML5 讀書會 新標籤與表單
TOSSUG HTML5 讀書會 新標籤與表單TOSSUG HTML5 讀書會 新標籤與表單
TOSSUG HTML5 讀書會 新標籤與表單
 
BDUG Responsive Web Theming - 7/23/12
BDUG Responsive Web Theming - 7/23/12BDUG Responsive Web Theming - 7/23/12
BDUG Responsive Web Theming - 7/23/12
 
2022 HTML5: The future is now
2022 HTML5: The future is now2022 HTML5: The future is now
2022 HTML5: The future is now
 
Component-Oriented Web Development with Dart
Component-Oriented Web Development with DartComponent-Oriented Web Development with Dart
Component-Oriented Web Development with Dart
 
HTML5, The Open Web, and what it means for you - Altran
HTML5, The Open Web, and what it means for you - AltranHTML5, The Open Web, and what it means for you - Altran
HTML5, The Open Web, and what it means for you - Altran
 
WordPress Theme Development: Part 2
WordPress Theme Development: Part 2WordPress Theme Development: Part 2
WordPress Theme Development: Part 2
 
Intro to polymer-Devfest Yaoundé 2013
Intro to polymer-Devfest Yaoundé 2013Intro to polymer-Devfest Yaoundé 2013
Intro to polymer-Devfest Yaoundé 2013
 
Introduction to Drupal (7) Theming
Introduction to Drupal (7) ThemingIntroduction to Drupal (7) Theming
Introduction to Drupal (7) Theming
 
Custom WordPress theme development
Custom WordPress theme developmentCustom WordPress theme development
Custom WordPress theme development
 
WordPress theme development from scratch : ICT MeetUp 2013 Nepal
WordPress theme development from scratch : ICT MeetUp 2013 NepalWordPress theme development from scratch : ICT MeetUp 2013 Nepal
WordPress theme development from scratch : ICT MeetUp 2013 Nepal
 
In the Trenches with Accessible EPUB - Charles LaPierre - ebookcraft 2017
In the Trenches with Accessible EPUB - Charles LaPierre - ebookcraft 2017In the Trenches with Accessible EPUB - Charles LaPierre - ebookcraft 2017
In the Trenches with Accessible EPUB - Charles LaPierre - ebookcraft 2017
 

Viewers also liked

Plenaire opening praktijkvoorbeelden in de spotlight
Plenaire opening praktijkvoorbeelden in de spotlightPlenaire opening praktijkvoorbeelden in de spotlight
Plenaire opening praktijkvoorbeelden in de spotlightGemeente Schoon
 
FBC STEP
FBC STEPFBC STEP
FBC STEP
fbcedmonton
 
FBC Identity Plan 2013-2018
FBC Identity Plan 2013-2018FBC Identity Plan 2013-2018
FBC Identity Plan 2013-2018fbcedmonton
 
Xsolla Offers
Xsolla OffersXsolla Offers
Xsolla Offersxsollacom
 
Xsolla PayStation
Xsolla PayStationXsolla PayStation
Xsolla PayStationxsollacom
 
Growth accounting and total factor productivity with a
Growth accounting and total factor productivity with aGrowth accounting and total factor productivity with a
Growth accounting and total factor productivity with a
Brahm Shree
 
Why don't you use Digital Look Book?
Why don't you use Digital Look Book?Why don't you use Digital Look Book?
Why don't you use Digital Look Book?
DianaEugeniLeQuesne
 

Viewers also liked (7)

Plenaire opening praktijkvoorbeelden in de spotlight
Plenaire opening praktijkvoorbeelden in de spotlightPlenaire opening praktijkvoorbeelden in de spotlight
Plenaire opening praktijkvoorbeelden in de spotlight
 
FBC STEP
FBC STEPFBC STEP
FBC STEP
 
FBC Identity Plan 2013-2018
FBC Identity Plan 2013-2018FBC Identity Plan 2013-2018
FBC Identity Plan 2013-2018
 
Xsolla Offers
Xsolla OffersXsolla Offers
Xsolla Offers
 
Xsolla PayStation
Xsolla PayStationXsolla PayStation
Xsolla PayStation
 
Growth accounting and total factor productivity with a
Growth accounting and total factor productivity with aGrowth accounting and total factor productivity with a
Growth accounting and total factor productivity with a
 
Why don't you use Digital Look Book?
Why don't you use Digital Look Book?Why don't you use Digital Look Book?
Why don't you use Digital Look Book?
 

Similar to Html5 Brown Bag

5 ways to embrace HTML5 today
5 ways to embrace HTML5 today5 ways to embrace HTML5 today
5 ways to embrace HTML5 today
Daniel Ryan
 
Frontend for developers
Frontend for developersFrontend for developers
Frontend for developers
Hernan Mammana
 
Darwin web standards
Darwin web standardsDarwin web standards
Darwin web standardsJustin Avery
 
Html5 drupal7 with mandakini kumari(1)
Html5 drupal7 with mandakini kumari(1)Html5 drupal7 with mandakini kumari(1)
Html5 drupal7 with mandakini kumari(1)
Mandakini Kumari
 
HTML5 & Front-end overview
HTML5 & Front-end overviewHTML5 & Front-end overview
HTML5 & Front-end overviewAshish Mukherjee
 
HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]
HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]
HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]
Aaron Gustafson
 
HTML5 History & Features
HTML5 History & FeaturesHTML5 History & Features
HTML5 History & Features
Dave Ross
 
HTML Semantic Tags
HTML Semantic TagsHTML Semantic Tags
HTML Semantic Tags
Bruce Kyle
 
Looking into HTML5 + CSS3
Looking into HTML5 + CSS3Looking into HTML5 + CSS3
Looking into HTML5 + CSS3
Christopher Schmitt
 
Advanced guide to develop ajax applications using dojo
Advanced guide to develop ajax applications using dojoAdvanced guide to develop ajax applications using dojo
Advanced guide to develop ajax applications using dojo
Fu Cheng
 
Apex & jQuery Mobile
Apex & jQuery MobileApex & jQuery Mobile
Apex & jQuery Mobile
Christian Rokitta
 
HTML5 Essential Training
HTML5 Essential TrainingHTML5 Essential Training
HTML5 Essential Training
Kaloyan Kosev
 
WHAT IS HTML5? (at CSS Nite Osaka)
WHAT IS HTML5? (at CSS Nite Osaka)WHAT IS HTML5? (at CSS Nite Osaka)
WHAT IS HTML5? (at CSS Nite Osaka)Shumpei Shiraishi
 
HTML 5 - Overview
HTML 5 - OverviewHTML 5 - Overview
HTML 5 - Overview
Marcelio Leal
 
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)
Doris Chen
 
SW Drupal Summit: HTML5+Drupal
SW Drupal Summit: HTML5+DrupalSW Drupal Summit: HTML5+Drupal
SW Drupal Summit: HTML5+DrupalJen Simmons
 

Similar to Html5 Brown Bag (20)

5 ways to embrace HTML5 today
5 ways to embrace HTML5 today5 ways to embrace HTML5 today
5 ways to embrace HTML5 today
 
Frontend for developers
Frontend for developersFrontend for developers
Frontend for developers
 
Html5 public
Html5 publicHtml5 public
Html5 public
 
Darwin web standards
Darwin web standardsDarwin web standards
Darwin web standards
 
Html5 drupal7 with mandakini kumari(1)
Html5 drupal7 with mandakini kumari(1)Html5 drupal7 with mandakini kumari(1)
Html5 drupal7 with mandakini kumari(1)
 
HTML5 & Front-end overview
HTML5 & Front-end overviewHTML5 & Front-end overview
HTML5 & Front-end overview
 
HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]
HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]
HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]
 
HTML5 History & Features
HTML5 History & FeaturesHTML5 History & Features
HTML5 History & Features
 
HTML Semantic Tags
HTML Semantic TagsHTML Semantic Tags
HTML Semantic Tags
 
Looking into HTML5 + CSS3
Looking into HTML5 + CSS3Looking into HTML5 + CSS3
Looking into HTML5 + CSS3
 
Advanced guide to develop ajax applications using dojo
Advanced guide to develop ajax applications using dojoAdvanced guide to develop ajax applications using dojo
Advanced guide to develop ajax applications using dojo
 
Apex & jQuery Mobile
Apex & jQuery MobileApex & jQuery Mobile
Apex & jQuery Mobile
 
HTML5 Essential Training
HTML5 Essential TrainingHTML5 Essential Training
HTML5 Essential Training
 
WHAT IS HTML5? (at CSS Nite Osaka)
WHAT IS HTML5? (at CSS Nite Osaka)WHAT IS HTML5? (at CSS Nite Osaka)
WHAT IS HTML5? (at CSS Nite Osaka)
 
WHAT IS HTML5?(20100510)
WHAT IS HTML5?(20100510)WHAT IS HTML5?(20100510)
WHAT IS HTML5?(20100510)
 
HTML 5 - Overview
HTML 5 - OverviewHTML 5 - Overview
HTML 5 - Overview
 
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)
 
HTML 5
HTML 5HTML 5
HTML 5
 
SW Drupal Summit: HTML5+Drupal
SW Drupal Summit: HTML5+DrupalSW Drupal Summit: HTML5+Drupal
SW Drupal Summit: HTML5+Drupal
 
[In Control 2010] HTML5
[In Control 2010] HTML5[In Control 2010] HTML5
[In Control 2010] HTML5
 

Recently uploaded

From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
Product School
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdf
Cheryl Hung
 
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
DanBrown980551
 
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Thierry Lestable
 
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 previewState of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
Prayukth K V
 
The Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and SalesThe Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and Sales
Laura Byrne
 
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Jeffrey Haguewood
 
FIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdfFIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance
 
Designing Great Products: The Power of Design and Leadership by Chief Designe...
Designing Great Products: The Power of Design and Leadership by Chief Designe...Designing Great Products: The Power of Design and Leadership by Chief Designe...
Designing Great Products: The Power of Design and Leadership by Chief Designe...
Product School
 
Connector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a buttonConnector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a button
DianaGray10
 
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdfFIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance
 
Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*
Frank van Harmelen
 
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
James Anderson
 
PCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase TeamPCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase Team
ControlCase
 
Leading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdfLeading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdf
OnBoard
 
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdfFIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance
 
To Graph or Not to Graph Knowledge Graph Architectures and LLMs
To Graph or Not to Graph Knowledge Graph Architectures and LLMsTo Graph or Not to Graph Knowledge Graph Architectures and LLMs
To Graph or Not to Graph Knowledge Graph Architectures and LLMs
Paul Groth
 
UiPath Test Automation using UiPath Test Suite series, part 4
UiPath Test Automation using UiPath Test Suite series, part 4UiPath Test Automation using UiPath Test Suite series, part 4
UiPath Test Automation using UiPath Test Suite series, part 4
DianaGray10
 
The Future of Platform Engineering
The Future of Platform EngineeringThe Future of Platform Engineering
The Future of Platform Engineering
Jemma Hussein Allen
 
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
Product School
 

Recently uploaded (20)

From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdf
 
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
 
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
 
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 previewState of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
 
The Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and SalesThe Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and Sales
 
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
 
FIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdfFIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdf
 
Designing Great Products: The Power of Design and Leadership by Chief Designe...
Designing Great Products: The Power of Design and Leadership by Chief Designe...Designing Great Products: The Power of Design and Leadership by Chief Designe...
Designing Great Products: The Power of Design and Leadership by Chief Designe...
 
Connector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a buttonConnector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a button
 
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdfFIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
 
Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*
 
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
 
PCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase TeamPCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase Team
 
Leading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdfLeading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdf
 
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdfFIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
 
To Graph or Not to Graph Knowledge Graph Architectures and LLMs
To Graph or Not to Graph Knowledge Graph Architectures and LLMsTo Graph or Not to Graph Knowledge Graph Architectures and LLMs
To Graph or Not to Graph Knowledge Graph Architectures and LLMs
 
UiPath Test Automation using UiPath Test Suite series, part 4
UiPath Test Automation using UiPath Test Suite series, part 4UiPath Test Automation using UiPath Test Suite series, part 4
UiPath Test Automation using UiPath Test Suite series, part 4
 
The Future of Platform Engineering
The Future of Platform EngineeringThe Future of Platform Engineering
The Future of Platform Engineering
 
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
 

Html5 Brown Bag

  • 3. Why html5? •“We're 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
  • 5. What is html5? •W3C Working draft (unfinished) • Upgrade to HTML4 + XHTML1 • New forms capabilities • Native multimedia
  • 7. What is usable now? Web workers DOCTYPE File API Web SQL DB Form Controls Web Sockets Canvas Web Messaging Geolocation Refined/Restored Elements Semantic Elements Web Storage
  • 8. What is usable now? DOCTYPE Form Controls Canvas Geolocation Refined/Restored Elements Semantic Elements
  • 9. What is usable now? DOCTYPE Form Controls Geolocation Semantic Elements
  • 10. What is usable now? DOCTYPE Form Controls Semantic Elements Geolocation
  • 12. DOCTYPE xhtml (strict): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  • 13. DOCTYPE xhtml (strict): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> html5: <!DOCTYPE html>
  • 14. DOCTYPE xhtml (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” />
  • 16. My first HTML5 doc <!DOCTYPE html> <meta charset=”utf-8”>
  • 17. My first HTML5 doc <!DOCTYPE html> <meta charset=”utf-8”> <title>Hello</title> <p>World!</p>
  • 18. My first HTML5 doc <!DOCTYPE html> <meta charset=”utf-8”> <title>Hello</title> <p>World!</p> <head> and <body> tags are implied...!
  • 20. My first HTML5 doc <!DOCTYPE html> <html> <head> <meta charset=”utf-8”/> <title>Hello</title> </head> <body> <p>World!</p> </body> </html>
  • 21. 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>
  • 23. 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”> • .....
  • 24. 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” • .....
  • 25. Demo - Form Controls
  • 27. Semantic Elements • <section> • <header> • <nav> • <footer> • <article> • <aside> • <hgroup>
  • 28. Semantic Elements • <section> - thematic grouping of content • <header> • <nav> • <footer> • <article> • <aside> • <hgroup>
  • 29. Semantic Elements • <section> - thematic grouping of content • <header> - intro / nav / headings • <nav> • <footer> • <article> • <aside> • <hgroup>
  • 30. Semantic Elements • <section> - thematic grouping of content • <header> - intro / nav / headings • <nav> - navigation links • <footer> • <article> • <aside> • <hgroup>
  • 31. Semantic Elements • <section> - thematic grouping of content • <header> - intro / nav / headings • <nav> - navigation links • <footer> - info about section, author, copyright • <article> • <aside> • <hgroup>
  • 32. 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>
  • 33. 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>
  • 34. 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
  • 36. 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
  • 39. Another technique... “Bulletproof HTML5 technique: Use a nested div with semantic class name” - Tantek Celik (Mozilla)
  • 40. Another technique... “Bulletproof HTML5 technique: Use a nested div with semantic class name” - Tantek Celik (Mozilla) <section><div class=”section”> ... </div></section> .section {/* styling */}
  • 42. Geolocation The only webapp API that has been moved to a candidate recomendation... ...it’s stable

Editor's Notes

  1. \n
  2. \n
  3. \n
  4. HTML4 successor webapps 1 + xhtml2 merged \n\n2009 W3C dropped XHTML2 to focus on HTML5\n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n
  17. 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&amp;#x2019;t be styled... however... Polyfills\n
  18. 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&amp;#x2019;t be styled... however... Polyfills\n
  19. \n
  20. 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&amp;#x2019;t be styled... however... Polyfills\n
  21. 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&amp;#x2019;t be styled... however... Polyfills\n
  22. 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&amp;#x2019;t be styled... however... Polyfills\n
  23. 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&amp;#x2019;t be styled... however... Polyfills\n
  24. 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&amp;#x2019;t be styled... however... Polyfills\n
  25. 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&amp;#x2019;t be styled... however... Polyfills\n
  26. 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&amp;#x2019;t be styled... however... Polyfills\n
  27. 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&amp;#x2019;t be styled... however... Polyfills\n
  28. 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&amp;#x2019;t be styled... however... Polyfills\n
  29. 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&amp;#x2019;t be styled... however... Polyfills\n
  30. \n
  31. 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
  32. 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
  33. \n
  34. \n
  35. 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