SlideShare une entreprise Scribd logo
1  sur  28
Télécharger pour lire hors ligne
HTML5: Markup Evolved
                           y lton
                        y H 010
                    Bill C 2
                      CT
2022


       “Candidate Recommendation” for W3C.
                Ian Hickson, HTML5 Editor
HTML: A Short, Strange Trip
1991 “HTML
              1999 HTML 4.0   2000 XHTML
   Tags”




2004 XHTML2    2009 W3C &
  vs. HTML5   WHATWG UNITE    2010 HTML5
HTML5 Principles
Support existing content

Degrade gracefully

Don’t reinvent the wheel

Pave the cowpaths

Evolution, not revolution
“Revolutions sometimes change the world to the better. Most
often, however, it is better to evolve an existing design
rather than throwing it away.”
                                              -- W3C
us   ers r
                                  si der rs ove
                        ct, con            nte .”
                      i
                onfl r imple l pu      me rity
             fc
         e o s ove
    c as       r               ret  ica
“In autho           rt   heo
 ov er        so ve                      enc ies>
       cifi er                      stitu
  sp e                   ty of con
                  r
                 <p iori
Structure & New Elements
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


                 <!DOCTYPE html>
<HEADER>


             <NAV>

<SECTION>



<ARTICLE>              <ASIDE>




                             Ready to start using new
            <FOOTER>         markup?

                             1) Declare as “Block” in CSS

                             2) Add Remy’s script for IE
Obsolete (not “Deprecated”)
Frames (Woot!) , Frameset, Font, Big, Center,
   Strike, Cellpadding, Cellspacing, Valign
Rich Media
Canvas: Drawing with Code
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext('2d');

context.shadowOffsetX = 4;
context.shadowOffsetY = 4;
context.shadowBlur = 5;
context.shadowColor = "#666";
context.fillStyle = “#ccc”;
context.fillRect (0, 0, 150,100);


<p><canvas id="myCanvas" width="300"
height="300">Your browser does not have support for
canvas. Insert sad trombone .wav file.</p>
Audio
MP3 and .OGG required today

Use <source>

Attributes: autoplay, controls, preload, src



       <audio controls preload=”none”>
       
    <source src="file.ogg" type=”audio/.ogg”/>
       
    <source src="file.mp3" type=”audio/.mp3”/>
       </audio>
Audio
MP3 and .OGG required today

Use <source>

Attributes: autoplay, controls, preload, src


                                                        “Graceful degradation”
       <audio controls preload=”none”>
       
    <source src="file.ogg" type=”audio/ogg”/>   If HTML5 is not supported
       
    <source src="file.mp3" type=”audio/mp3”/>   fallback to Flash and
                                                        file download.
       <object type=”application/x-shockwave-flash”
       data=”player.swf?soundFile=file.mp3”>
       <param name=”movie” value=”player.swf?sound
       File=file.mp3”>

       <a href=”file.mp3”>Download MP3 file</a>

       </audio>
Video
.MP4, .OGV, and .Webm required today

.Webm = new open format. Game changer?

Attributes: autoplay, controls, height, width,
preload, loop
       <video controls poster=”image.jpg”
         width=”360” height=”240”>
                                                      Use “Poster” attribute to
       
                                              display a frame of the video
       <source src="video.ogv" type=”video/ogg”/>
       <source src=”video.mp4" type=”video/mp4”/>
       <source src=”video.webm"type=”video/webm”/>

       <object type=”application/x-shockwave-flash”
       width=”360” height=”240”
       data=”player.swf?soundFile=video.mp4”>
       <param name=”movie” value=”player.swf?sound
       File=video.mp4”>

       <a href=”video.mp4”>Download video</a>

       </video>
Forms & App Development
Placeholder




<input placeholder="search">

Attribute can only contain text (no HTML)

Ignored if not supported by browsers

Can use a JavaScript fallback solution
Autofocus
Automatically focus on a form field

<input type= "text" autofocus>

Ignored if not supported by browsers

Can use a JavaScript fallback solution
Required*
Simple client-side form validation

<input type= "text" required>

Does not prevent browsers from
submitting forms
User Interface

Replace JavaScript widgets

Sliders

Date Pickers

Color pickers

(Boo. Not much browser support today.)
JavaScript Goodness

Drag and Drop w/o
tons of JS

Geolocation

Offline Apps
(Goodbye Google
Gears)

Local Storage
(Goodbye cookies?)
This is How I Role.


<header role= "banner" >

Structural: banner, contentinfo, main, navigation,
note, search

Widget: alert, checkbox, dialog, radio, scrollbar,
slider, tab, textbox,
Next Steps
✓ Be flexible and embrace change.
✓ Dive in.
✓ Modify doctype.
✓ Add new structural elements.
✓ Experiment with canvas, audio, and video (probably
  too early for primetime).

✓ Learn about parallel developments such as
  microformats and ARIA.
Resources

SitePoint HTML5 Course
http://sitepoint.com/


HTML5 For Web Designers
http://books.alistapart.com/


Slideshare HTML Presentations
http://www.slideshare.net/


Dive Into HTML5
http://diveintohtml5.org/


Smashing Magazine
http://www.smashingmagazine.com/


Think Vitamin
http://thinkvitamin.com/category/code/html5/
Thanks CTC!

Billy Hylton
email:    billy_hylton@unc.edu
web:      www.publicrealm.com
linkedin: www.linkedin.com/in/billyhylton
Credits
   All Images Creative Commons (“Attribution-NonCommercial”)




VW Van                                            Whiteboard
http://www.flickr.com/photos/vwbuses/2942624949/   http://www.flickr.com/photos/justinavery/5011173415/
sizes/o/in/photostream/                           sizes/l/in/photostream/


Tim Berners-Lee                                   Headphones
http://www.flickr.com/photos/j-o-n-o/151830908/    http://www.flickr.com/photos/livingtheliminal/
                                                  4242548616/#/

Fist
http://www.flickr.com/photos/                      Video
24063093@N07/3983882921/sizes/l/in/photostream/   http://www.flickr.com/photos/spierisf/4481100942/
                                                  sizes/l/in/photostream/

Gloves
http://www.flickr.com/photos/atlnav/369536486/
                                                  Crayons
                                                  http://www.flickr.com/photos/rajarshi/4367150939

Contenu connexe

Tendances

WordPress-Templates mit Twig erstellen - PHPUGFFM
WordPress-Templates mit Twig erstellen - PHPUGFFMWordPress-Templates mit Twig erstellen - PHPUGFFM
WordPress-Templates mit Twig erstellen - PHPUGFFMWalter Ebert
 
High Performance HTML5 (SF HTML5 UG)
High Performance HTML5 (SF HTML5 UG)High Performance HTML5 (SF HTML5 UG)
High Performance HTML5 (SF HTML5 UG)Steve Souders
 
[jqconatx] Adaptive Images for Responsive Web Design
[jqconatx] Adaptive Images for Responsive Web Design[jqconatx] Adaptive Images for Responsive Web Design
[jqconatx] Adaptive Images for Responsive Web DesignChristopher Schmitt
 
Prebrowsing - Velocity NY 2013
Prebrowsing - Velocity NY 2013Prebrowsing - Velocity NY 2013
Prebrowsing - Velocity NY 2013Steve Souders
 
Progressive web and the problem of JavaScript
Progressive web and the problem of JavaScriptProgressive web and the problem of JavaScript
Progressive web and the problem of JavaScriptChristian Heilmann
 
How fast are we going now?
How fast are we going now?How fast are we going now?
How fast are we going now?Steve Souders
 
Real World Web Standards
Real World Web StandardsReal World Web Standards
Real World Web Standardsgleddy
 
Responsive Design: Mehr als CSS
Responsive Design: Mehr als CSSResponsive Design: Mehr als CSS
Responsive Design: Mehr als CSSWalter Ebert
 
Speed is Essential for a Great Web Experience
Speed is Essential for a Great Web ExperienceSpeed is Essential for a Great Web Experience
Speed is Essential for a Great Web ExperienceAndy Davies
 
Accessibility - A feature you can build
Accessibility - A feature you can buildAccessibility - A feature you can build
Accessibility - A feature you can buildMonika Piotrowicz
 
Mehr Performance für WordPress - WordCamp Köln
Mehr Performance für WordPress - WordCamp KölnMehr Performance für WordPress - WordCamp Köln
Mehr Performance für WordPress - WordCamp KölnWalter Ebert
 
Speak The Web: The HTML5 Experiments
Speak The Web: The HTML5 ExperimentsSpeak The Web: The HTML5 Experiments
Speak The Web: The HTML5 Experimentsguestd427df
 
Making Mobile Sites Faster
Making Mobile Sites FasterMaking Mobile Sites Faster
Making Mobile Sites FasterAndy Davies
 
High Performance Web Components
High Performance Web ComponentsHigh Performance Web Components
High Performance Web ComponentsSteve Souders
 
Scott Jehl - Delivering Responsibly - beyond tellerrand Düsseldorf 2015
Scott Jehl - Delivering Responsibly - beyond tellerrand Düsseldorf 2015Scott Jehl - Delivering Responsibly - beyond tellerrand Düsseldorf 2015
Scott Jehl - Delivering Responsibly - beyond tellerrand Düsseldorf 2015beyond tellerrand
 
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJ
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJRealize mais com HTML 5 e CSS 3 - 16 EDTED - RJ
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJLeonardo Balter
 
Sniffing the Mobile Context
Sniffing the Mobile ContextSniffing the Mobile Context
Sniffing the Mobile ContextAndy Davies
 

Tendances (20)

WordPress-Templates mit Twig erstellen - PHPUGFFM
WordPress-Templates mit Twig erstellen - PHPUGFFMWordPress-Templates mit Twig erstellen - PHPUGFFM
WordPress-Templates mit Twig erstellen - PHPUGFFM
 
High Performance HTML5 (SF HTML5 UG)
High Performance HTML5 (SF HTML5 UG)High Performance HTML5 (SF HTML5 UG)
High Performance HTML5 (SF HTML5 UG)
 
Using HTML5 sensibly
Using HTML5 sensiblyUsing HTML5 sensibly
Using HTML5 sensibly
 
[jqconatx] Adaptive Images for Responsive Web Design
[jqconatx] Adaptive Images for Responsive Web Design[jqconatx] Adaptive Images for Responsive Web Design
[jqconatx] Adaptive Images for Responsive Web Design
 
Prebrowsing - Velocity NY 2013
Prebrowsing - Velocity NY 2013Prebrowsing - Velocity NY 2013
Prebrowsing - Velocity NY 2013
 
Progressive web and the problem of JavaScript
Progressive web and the problem of JavaScriptProgressive web and the problem of JavaScript
Progressive web and the problem of JavaScript
 
How fast are we going now?
How fast are we going now?How fast are we going now?
How fast are we going now?
 
Real World Web Standards
Real World Web StandardsReal World Web Standards
Real World Web Standards
 
Responsive Design: Mehr als CSS
Responsive Design: Mehr als CSSResponsive Design: Mehr als CSS
Responsive Design: Mehr als CSS
 
Speed is Essential for a Great Web Experience
Speed is Essential for a Great Web ExperienceSpeed is Essential for a Great Web Experience
Speed is Essential for a Great Web Experience
 
Accessibility - A feature you can build
Accessibility - A feature you can buildAccessibility - A feature you can build
Accessibility - A feature you can build
 
Mehr Performance für WordPress - WordCamp Köln
Mehr Performance für WordPress - WordCamp KölnMehr Performance für WordPress - WordCamp Köln
Mehr Performance für WordPress - WordCamp Köln
 
Speak The Web: The HTML5 Experiments
Speak The Web: The HTML5 ExperimentsSpeak The Web: The HTML5 Experiments
Speak The Web: The HTML5 Experiments
 
Making Mobile Sites Faster
Making Mobile Sites FasterMaking Mobile Sites Faster
Making Mobile Sites Faster
 
jQuery UI and Plugins
jQuery UI and PluginsjQuery UI and Plugins
jQuery UI and Plugins
 
High Performance Web Components
High Performance Web ComponentsHigh Performance Web Components
High Performance Web Components
 
Scott Jehl - Delivering Responsibly - beyond tellerrand Düsseldorf 2015
Scott Jehl - Delivering Responsibly - beyond tellerrand Düsseldorf 2015Scott Jehl - Delivering Responsibly - beyond tellerrand Düsseldorf 2015
Scott Jehl - Delivering Responsibly - beyond tellerrand Düsseldorf 2015
 
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJ
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJRealize mais com HTML 5 e CSS 3 - 16 EDTED - RJ
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJ
 
Sniffing the Mobile Context
Sniffing the Mobile ContextSniffing the Mobile Context
Sniffing the Mobile Context
 
Design+Performance
Design+PerformanceDesign+Performance
Design+Performance
 

En vedette

IP power point
IP power pointIP power point
IP power pointclaudia11
 
openluchtklassen
openluchtklassenopenluchtklassen
openluchtklassenclaudia11
 
8,000 Sites and Counting: Running a *Huge* WordPress Service
8,000 Sites and Counting: Running a *Huge* WordPress Service8,000 Sites and Counting: Running a *Huge* WordPress Service
8,000 Sites and Counting: Running a *Huge* WordPress ServiceBilly Hylton
 
UNC Cause 2014 | 8,000 Sites and Counting - Running a *Huge* WordPress Service
UNC Cause 2014 | 8,000 Sites and Counting - Running a *Huge* WordPress Service UNC Cause 2014 | 8,000 Sites and Counting - Running a *Huge* WordPress Service
UNC Cause 2014 | 8,000 Sites and Counting - Running a *Huge* WordPress Service Billy Hylton
 
Er zal altijd iemand...
Er zal altijd iemand...Er zal altijd iemand...
Er zal altijd iemand...claudia11
 
Digital Commons - All Things Open 2016
Digital Commons - All Things Open 2016Digital Commons - All Things Open 2016
Digital Commons - All Things Open 2016Billy Hylton
 

En vedette (8)

IP power point
IP power pointIP power point
IP power point
 
openluchtklassen
openluchtklassenopenluchtklassen
openluchtklassen
 
8,000 Sites and Counting: Running a *Huge* WordPress Service
8,000 Sites and Counting: Running a *Huge* WordPress Service8,000 Sites and Counting: Running a *Huge* WordPress Service
8,000 Sites and Counting: Running a *Huge* WordPress Service
 
UNC Cause 2014 | 8,000 Sites and Counting - Running a *Huge* WordPress Service
UNC Cause 2014 | 8,000 Sites and Counting - Running a *Huge* WordPress Service UNC Cause 2014 | 8,000 Sites and Counting - Running a *Huge* WordPress Service
UNC Cause 2014 | 8,000 Sites and Counting - Running a *Huge* WordPress Service
 
Er zal altijd iemand...
Er zal altijd iemand...Er zal altijd iemand...
Er zal altijd iemand...
 
Digital Commons - All Things Open 2016
Digital Commons - All Things Open 2016Digital Commons - All Things Open 2016
Digital Commons - All Things Open 2016
 
Hugo Claus
Hugo ClausHugo Claus
Hugo Claus
 
PMBOK Guide 3rd Edition Flow
PMBOK Guide 3rd Edition FlowPMBOK Guide 3rd Edition Flow
PMBOK Guide 3rd Edition Flow
 

Similaire à HTML5: Markup Evolved

FITC Spotlight HTML5 - The state of the web
FITC Spotlight HTML5 - The state of the webFITC Spotlight HTML5 - The state of the web
FITC Spotlight HTML5 - The state of the webFrédéric Harper
 
[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web Design[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
Html5 - short intro
Html5 - short introHtml5 - short intro
Html5 - short introjeiseman
 
Webware - from Document to Operating System
Webware - from Document to Operating System Webware - from Document to Operating System
Webware - from Document to Operating System Channy Yun
 
[edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet!
[edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet![edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet!
[edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet!Christopher Schmitt
 
[funka] Adaptive Images in Responsive Web Design
[funka] Adaptive Images in Responsive Web Design[funka] Adaptive Images in Responsive Web Design
[funka] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
[refreshaustin] Adaptive Images in Responsive Web Design
[refreshaustin] Adaptive Images in Responsive Web Design[refreshaustin] Adaptive Images in Responsive Web Design
[refreshaustin] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
[rwdsummit2012] Adaptive Images in Responsive Web Design
[rwdsummit2012] Adaptive Images in Responsive Web Design[rwdsummit2012] Adaptive Images in Responsive Web Design
[rwdsummit2012] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
[html5tx] Adaptive Images in Responsive Web Design
[html5tx] Adaptive Images in Responsive Web Design[html5tx] Adaptive Images in Responsive Web Design
[html5tx] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
HTML5 and friends - JISC CETIS Conference 2010 Nottingham 15.11.2010
HTML5 and friends - JISC CETIS Conference 2010 Nottingham 15.11.2010HTML5 and friends - JISC CETIS Conference 2010 Nottingham 15.11.2010
HTML5 and friends - JISC CETIS Conference 2010 Nottingham 15.11.2010Patrick Lauke
 
[cssdevconf] Adaptive Images in RWD
[cssdevconf] Adaptive Images in RWD[cssdevconf] Adaptive Images in RWD
[cssdevconf] Adaptive Images in RWDChristopher Schmitt
 

Similaire à HTML5: Markup Evolved (20)

Web Apps
Web AppsWeb Apps
Web Apps
 
FITC Spotlight HTML5 - The state of the web
FITC Spotlight HTML5 - The state of the webFITC Spotlight HTML5 - The state of the web
FITC Spotlight HTML5 - The state of the web
 
[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web Design[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web Design
 
[In Control 2010] HTML5
[In Control 2010] HTML5[In Control 2010] HTML5
[In Control 2010] HTML5
 
Html5 - short intro
Html5 - short introHtml5 - short intro
Html5 - short intro
 
HTML5 Design
HTML5 DesignHTML5 Design
HTML5 Design
 
Webware - from Document to Operating System
Webware - from Document to Operating System Webware - from Document to Operating System
Webware - from Document to Operating System
 
Html5 - Novas Tags na Prática!
Html5 - Novas Tags na Prática!Html5 - Novas Tags na Prática!
Html5 - Novas Tags na Prática!
 
HTML5
HTML5HTML5
HTML5
 
HTML 5 - Overview
HTML 5 - OverviewHTML 5 - Overview
HTML 5 - Overview
 
[edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet!
[edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet![edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet!
[edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet!
 
[funka] Adaptive Images in Responsive Web Design
[funka] Adaptive Images in Responsive Web Design[funka] Adaptive Images in Responsive Web Design
[funka] Adaptive Images in Responsive Web Design
 
Looking into HTML5 + CSS3
Looking into HTML5 + CSS3Looking into HTML5 + CSS3
Looking into HTML5 + CSS3
 
[refreshaustin] Adaptive Images in Responsive Web Design
[refreshaustin] Adaptive Images in Responsive Web Design[refreshaustin] Adaptive Images in Responsive Web Design
[refreshaustin] Adaptive Images in Responsive Web Design
 
[rwdsummit2012] Adaptive Images in Responsive Web Design
[rwdsummit2012] Adaptive Images in Responsive Web Design[rwdsummit2012] Adaptive Images in Responsive Web Design
[rwdsummit2012] Adaptive Images in Responsive Web Design
 
HTML5 for all
HTML5 for allHTML5 for all
HTML5 for all
 
[html5tx] Adaptive Images in Responsive Web Design
[html5tx] Adaptive Images in Responsive Web Design[html5tx] Adaptive Images in Responsive Web Design
[html5tx] Adaptive Images in Responsive Web Design
 
HTML5 and friends - JISC CETIS Conference 2010 Nottingham 15.11.2010
HTML5 and friends - JISC CETIS Conference 2010 Nottingham 15.11.2010HTML5 and friends - JISC CETIS Conference 2010 Nottingham 15.11.2010
HTML5 and friends - JISC CETIS Conference 2010 Nottingham 15.11.2010
 
[cssdevconf] Adaptive Images in RWD
[cssdevconf] Adaptive Images in RWD[cssdevconf] Adaptive Images in RWD
[cssdevconf] Adaptive Images in RWD
 
Html5 public
Html5 publicHtml5 public
Html5 public
 

Dernier

Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 

Dernier (20)

Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 

HTML5: Markup Evolved

  • 1. HTML5: Markup Evolved y lton y H 010 Bill C 2 CT
  • 2. 2022 “Candidate Recommendation” for W3C. Ian Hickson, HTML5 Editor
  • 3. HTML: A Short, Strange Trip
  • 4. 1991 “HTML 1999 HTML 4.0 2000 XHTML Tags” 2004 XHTML2 2009 W3C & vs. HTML5 WHATWG UNITE 2010 HTML5
  • 5. HTML5 Principles Support existing content Degrade gracefully Don’t reinvent the wheel Pave the cowpaths Evolution, not revolution “Revolutions sometimes change the world to the better. Most often, however, it is better to evolve an existing design rather than throwing it away.” -- W3C
  • 6. us ers r si der rs ove ct, con nte .” i onfl r imple l pu me rity fc e o s ove c as r ret ica “In autho rt heo ov er so ve enc ies> cifi er stitu sp e ty of con r <p iori
  • 7. Structure & New Elements
  • 8. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  • 9. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!DOCTYPE html>
  • 10. <HEADER> <NAV> <SECTION> <ARTICLE> <ASIDE> Ready to start using new <FOOTER> markup? 1) Declare as “Block” in CSS 2) Add Remy’s script for IE
  • 11. Obsolete (not “Deprecated”) Frames (Woot!) , Frameset, Font, Big, Center, Strike, Cellpadding, Cellspacing, Valign
  • 14. var canvas = document.getElementById("myCanvas"); var context = canvas.getContext('2d'); context.shadowOffsetX = 4; context.shadowOffsetY = 4; context.shadowBlur = 5; context.shadowColor = "#666"; context.fillStyle = “#ccc”; context.fillRect (0, 0, 150,100); <p><canvas id="myCanvas" width="300" height="300">Your browser does not have support for canvas. Insert sad trombone .wav file.</p>
  • 15. Audio MP3 and .OGG required today Use <source> Attributes: autoplay, controls, preload, src <audio controls preload=”none”> <source src="file.ogg" type=”audio/.ogg”/> <source src="file.mp3" type=”audio/.mp3”/> </audio>
  • 16. Audio MP3 and .OGG required today Use <source> Attributes: autoplay, controls, preload, src “Graceful degradation” <audio controls preload=”none”> <source src="file.ogg" type=”audio/ogg”/> If HTML5 is not supported <source src="file.mp3" type=”audio/mp3”/> fallback to Flash and file download. <object type=”application/x-shockwave-flash” data=”player.swf?soundFile=file.mp3”> <param name=”movie” value=”player.swf?sound File=file.mp3”> <a href=”file.mp3”>Download MP3 file</a> </audio>
  • 17. Video .MP4, .OGV, and .Webm required today .Webm = new open format. Game changer? Attributes: autoplay, controls, height, width, preload, loop <video controls poster=”image.jpg” width=”360” height=”240”> Use “Poster” attribute to display a frame of the video <source src="video.ogv" type=”video/ogg”/> <source src=”video.mp4" type=”video/mp4”/> <source src=”video.webm"type=”video/webm”/> <object type=”application/x-shockwave-flash” width=”360” height=”240” data=”player.swf?soundFile=video.mp4”> <param name=”movie” value=”player.swf?sound File=video.mp4”> <a href=”video.mp4”>Download video</a> </video>
  • 18. Forms & App Development
  • 19. Placeholder <input placeholder="search"> Attribute can only contain text (no HTML) Ignored if not supported by browsers Can use a JavaScript fallback solution
  • 20. Autofocus Automatically focus on a form field <input type= "text" autofocus> Ignored if not supported by browsers Can use a JavaScript fallback solution
  • 21. Required* Simple client-side form validation <input type= "text" required> Does not prevent browsers from submitting forms
  • 22. User Interface Replace JavaScript widgets Sliders Date Pickers Color pickers (Boo. Not much browser support today.)
  • 23. JavaScript Goodness Drag and Drop w/o tons of JS Geolocation Offline Apps (Goodbye Google Gears) Local Storage (Goodbye cookies?)
  • 24. This is How I Role. <header role= "banner" > Structural: banner, contentinfo, main, navigation, note, search Widget: alert, checkbox, dialog, radio, scrollbar, slider, tab, textbox,
  • 25. Next Steps ✓ Be flexible and embrace change. ✓ Dive in. ✓ Modify doctype. ✓ Add new structural elements. ✓ Experiment with canvas, audio, and video (probably too early for primetime). ✓ Learn about parallel developments such as microformats and ARIA.
  • 26. Resources SitePoint HTML5 Course http://sitepoint.com/ HTML5 For Web Designers http://books.alistapart.com/ Slideshare HTML Presentations http://www.slideshare.net/ Dive Into HTML5 http://diveintohtml5.org/ Smashing Magazine http://www.smashingmagazine.com/ Think Vitamin http://thinkvitamin.com/category/code/html5/
  • 27. Thanks CTC! Billy Hylton email: billy_hylton@unc.edu web: www.publicrealm.com linkedin: www.linkedin.com/in/billyhylton
  • 28. Credits All Images Creative Commons (“Attribution-NonCommercial”) VW Van Whiteboard http://www.flickr.com/photos/vwbuses/2942624949/ http://www.flickr.com/photos/justinavery/5011173415/ sizes/o/in/photostream/ sizes/l/in/photostream/ Tim Berners-Lee Headphones http://www.flickr.com/photos/j-o-n-o/151830908/ http://www.flickr.com/photos/livingtheliminal/ 4242548616/#/ Fist http://www.flickr.com/photos/ Video 24063093@N07/3983882921/sizes/l/in/photostream/ http://www.flickr.com/photos/spierisf/4481100942/ sizes/l/in/photostream/ Gloves http://www.flickr.com/photos/atlnav/369536486/ Crayons http://www.flickr.com/photos/rajarshi/4367150939

Notes de l'éditeur