SlideShare a Scribd company logo

Up to Speed on HTML 5 and CSS 3

A presentation to Refresh DC about the emerging HTML 5 and CSS 3 standards, namely about aspects that are beginning to become applicable to web design and development. Given by Jason Garber and M. Jackson Wilkinson.

1 of 67
Download to read offline
UP TO SPEED ON
                        HTML 5 & CSS 3                               </TITLE>




  REFRESH DC | M. JACKSON WILKINSON & JASON GARBER | JULY 16, 2009
Sunday, July 19, 2009
THE INTRO

Sunday, July 19, 2009
That’s
                “Michael”



                        M. JACKSON WILKINSON
                                  Your Humble Refresh DC Organizer




Sunday, July 19, 2009
Sunday, July 19, 2009
Sunday, July 19, 2009
JASON GARBER
                           Refresh DC Organizer Emeritus




Sunday, July 19, 2009

More Related Content

What's hot

Presentation on HTML
Presentation on HTMLPresentation on HTML
Presentation on HTMLsatvirsandhu9
 
Html5 tutorial for beginners
Html5 tutorial for beginnersHtml5 tutorial for beginners
Html5 tutorial for beginnersSingsys Pte Ltd
 
Javascript dom event
Javascript dom eventJavascript dom event
Javascript dom eventBunlong Van
 
HTML + CSS Examples
HTML + CSS ExamplesHTML + CSS Examples
HTML + CSS ExamplesMohamed Loey
 
Lab #2: Introduction to Javascript
Lab #2: Introduction to JavascriptLab #2: Introduction to Javascript
Lab #2: Introduction to JavascriptWalid Ashraf
 
Intro to HTML and CSS basics
Intro to HTML and CSS basicsIntro to HTML and CSS basics
Intro to HTML and CSS basicsEliran Eliassy
 
Html5 and-css3-overview
Html5 and-css3-overviewHtml5 and-css3-overview
Html5 and-css3-overviewJacob Nelson
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSSMario Hernandez
 
Introduction to php
Introduction to phpIntroduction to php
Introduction to phpAnjan Banda
 
Getting Started with HTML5 in Tech Com (STC 2012)
Getting Started with HTML5 in Tech Com (STC 2012)Getting Started with HTML5 in Tech Com (STC 2012)
Getting Started with HTML5 in Tech Com (STC 2012)Peter Lubbers
 

What's hot (20)

Presentation on HTML
Presentation on HTMLPresentation on HTML
Presentation on HTML
 
jQuery
jQueryjQuery
jQuery
 
Html5 tutorial for beginners
Html5 tutorial for beginnersHtml5 tutorial for beginners
Html5 tutorial for beginners
 
Javascript dom event
Javascript dom eventJavascript dom event
Javascript dom event
 
HTML + CSS Examples
HTML + CSS ExamplesHTML + CSS Examples
HTML + CSS Examples
 
Lab #2: Introduction to Javascript
Lab #2: Introduction to JavascriptLab #2: Introduction to Javascript
Lab #2: Introduction to Javascript
 
Html
HtmlHtml
Html
 
Javascript
JavascriptJavascript
Javascript
 
Intro to HTML and CSS basics
Intro to HTML and CSS basicsIntro to HTML and CSS basics
Intro to HTML and CSS basics
 
Java Script ppt
Java Script pptJava Script ppt
Java Script ppt
 
Html5 and-css3-overview
Html5 and-css3-overviewHtml5 and-css3-overview
Html5 and-css3-overview
 
Introduction to php
Introduction to phpIntroduction to php
Introduction to php
 
Ruby on Rails Presentation
Ruby on Rails PresentationRuby on Rails Presentation
Ruby on Rails Presentation
 
HTML Forms
HTML FormsHTML Forms
HTML Forms
 
Introduction to XHTML
Introduction to XHTMLIntroduction to XHTML
Introduction to XHTML
 
Html 5
Html 5Html 5
Html 5
 
Basics of JavaScript
Basics of JavaScriptBasics of JavaScript
Basics of JavaScript
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSS
 
Introduction to php
Introduction to phpIntroduction to php
Introduction to php
 
Getting Started with HTML5 in Tech Com (STC 2012)
Getting Started with HTML5 in Tech Com (STC 2012)Getting Started with HTML5 in Tech Com (STC 2012)
Getting Started with HTML5 in Tech Com (STC 2012)
 

Viewers also liked

Designing for a Better User Experience
Designing for a Better User ExperienceDesigning for a Better User Experience
Designing for a Better User ExperienceBuiltByHQ
 
Wireframes for WordPress
Wireframes for WordPressWireframes for WordPress
Wireframes for WordPressJohn Housholder
 
Typography in Web Design (WordCamp Toronto 2014)
Typography in Web Design (WordCamp Toronto 2014)Typography in Web Design (WordCamp Toronto 2014)
Typography in Web Design (WordCamp Toronto 2014)Jasmine Vesque
 
The Ultimate Guide to Font Pairing
The Ultimate Guide to Font PairingThe Ultimate Guide to Font Pairing
The Ultimate Guide to Font PairingGuy Kawasaki
 
CSS3 Media Queries: Mobile Elixir or CSS Snake Oil
CSS3 Media Queries: Mobile Elixir or CSS Snake OilCSS3 Media Queries: Mobile Elixir or CSS Snake Oil
CSS3 Media Queries: Mobile Elixir or CSS Snake Oiljameswillweb
 
Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hon...
Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hon...Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hon...
Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hon...Holger Bartel
 
Neuro Web Design: What makes them click
Neuro Web Design: What makes them clickNeuro Web Design: What makes them click
Neuro Web Design: What makes them clickSusan Weinschenk
 
Double Integral Powerpoint
Double Integral PowerpointDouble Integral Powerpoint
Double Integral Powerpointoaishnosaj
 
C++ Function
C++ FunctionC++ Function
C++ FunctionHajar
 
An introduction to Usability
An introduction to UsabilityAn introduction to Usability
An introduction to UsabilityErlend Debast
 

Viewers also liked (12)

Designing for a Better User Experience
Designing for a Better User ExperienceDesigning for a Better User Experience
Designing for a Better User Experience
 
Wireframes for WordPress
Wireframes for WordPressWireframes for WordPress
Wireframes for WordPress
 
Typography in Web Design (WordCamp Toronto 2014)
Typography in Web Design (WordCamp Toronto 2014)Typography in Web Design (WordCamp Toronto 2014)
Typography in Web Design (WordCamp Toronto 2014)
 
The Ultimate Guide to Font Pairing
The Ultimate Guide to Font PairingThe Ultimate Guide to Font Pairing
The Ultimate Guide to Font Pairing
 
CSS3 Media Queries: Mobile Elixir or CSS Snake Oil
CSS3 Media Queries: Mobile Elixir or CSS Snake OilCSS3 Media Queries: Mobile Elixir or CSS Snake Oil
CSS3 Media Queries: Mobile Elixir or CSS Snake Oil
 
Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hon...
Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hon...Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hon...
Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hon...
 
Neuro Web Design: What makes them click
Neuro Web Design: What makes them clickNeuro Web Design: What makes them click
Neuro Web Design: What makes them click
 
Double Integral Powerpoint
Double Integral PowerpointDouble Integral Powerpoint
Double Integral Powerpoint
 
C++ Function
C++ FunctionC++ Function
C++ Function
 
Double Integrals
Double IntegralsDouble Integrals
Double Integrals
 
An introduction to Usability
An introduction to UsabilityAn introduction to Usability
An introduction to Usability
 
Html Ppt
Html PptHtml Ppt
Html Ppt
 

Similar to Up to Speed on HTML 5 and CSS 3

Giáo trình học Html5/Css3
Giáo trình học Html5/Css3Giáo trình học Html5/Css3
Giáo trình học Html5/Css3Ho Ngoc Tan
 
Talk by Tomas Lin on Building Killer RIAs with Flex and Grails at the Groovy ...
Talk by Tomas Lin on Building Killer RIAs with Flex and Grails at the Groovy ...Talk by Tomas Lin on Building Killer RIAs with Flex and Grails at the Groovy ...
Talk by Tomas Lin on Building Killer RIAs with Flex and Grails at the Groovy ...Skills Matter
 
Practice mashups. Mlearning 2009
Practice mashups.  Mlearning 2009Practice mashups.  Mlearning 2009
Practice mashups. Mlearning 2009Jean-Marie Gilliot
 
HTML5 Presentation
HTML5 PresentationHTML5 Presentation
HTML5 Presentationvs4vijay
 
Adobe's RIA Technologies (non technical)
Adobe's RIA Technologies (non technical)Adobe's RIA Technologies (non technical)
Adobe's RIA Technologies (non technical)Cyril Hanquez
 
HTML5 Pearson preso
HTML5 Pearson presoHTML5 Pearson preso
HTML5 Pearson presoChris Mills
 
Using Firebug & YSlow
Using Firebug & YSlowUsing Firebug & YSlow
Using Firebug & YSlowBrad Vernon
 
Gaelyk quickie - GR8Conf Europe 2010 - Guillaume Laforge
Gaelyk quickie - GR8Conf Europe 2010 - Guillaume LaforgeGaelyk quickie - GR8Conf Europe 2010 - Guillaume Laforge
Gaelyk quickie - GR8Conf Europe 2010 - Guillaume LaforgeGuillaume Laforge
 
Yahoo! Frontend Building Blocks
Yahoo! Frontend Building BlocksYahoo! Frontend Building Blocks
Yahoo! Frontend Building BlocksSubramanyan Murali
 
buildingxmlbasedapplications-180322042009.pptx
buildingxmlbasedapplications-180322042009.pptxbuildingxmlbasedapplications-180322042009.pptx
buildingxmlbasedapplications-180322042009.pptxNKannanCSE
 
Beyond The Web: Drupal Meets The Desktop (And Mobile)
Beyond The Web: Drupal Meets The Desktop (And Mobile)Beyond The Web: Drupal Meets The Desktop (And Mobile)
Beyond The Web: Drupal Meets The Desktop (And Mobile)Justin Miller
 
HTML5 and Google Chrome - DevFest09
HTML5 and Google Chrome - DevFest09HTML5 and Google Chrome - DevFest09
HTML5 and Google Chrome - DevFest09mihaiionescu
 
Front-end optimisation & jQuery Internals
Front-end optimisation & jQuery InternalsFront-end optimisation & jQuery Internals
Front-end optimisation & jQuery InternalsArtur Cistov
 
HTML5 introduction for beginners
HTML5 introduction for beginnersHTML5 introduction for beginners
HTML5 introduction for beginnersVineeth N Krishnan
 
Xebia adobe flash mobile applications
Xebia adobe flash mobile applicationsXebia adobe flash mobile applications
Xebia adobe flash mobile applicationsMichael Chaize
 
Building XML Based Applications
Building XML Based ApplicationsBuilding XML Based Applications
Building XML Based ApplicationsPrabu U
 

Similar to Up to Speed on HTML 5 and CSS 3 (20)

Html5/CSS3
Html5/CSS3Html5/CSS3
Html5/CSS3
 
Giáo trình học Html5/Css3
Giáo trình học Html5/Css3Giáo trình học Html5/Css3
Giáo trình học Html5/Css3
 
Talk by Tomas Lin on Building Killer RIAs with Flex and Grails at the Groovy ...
Talk by Tomas Lin on Building Killer RIAs with Flex and Grails at the Groovy ...Talk by Tomas Lin on Building Killer RIAs with Flex and Grails at the Groovy ...
Talk by Tomas Lin on Building Killer RIAs with Flex and Grails at the Groovy ...
 
Ie9 overview
Ie9 overviewIe9 overview
Ie9 overview
 
Practice mashups. Mlearning 2009
Practice mashups.  Mlearning 2009Practice mashups.  Mlearning 2009
Practice mashups. Mlearning 2009
 
HTML5 Presentation
HTML5 PresentationHTML5 Presentation
HTML5 Presentation
 
Adobe's RIA Technologies (non technical)
Adobe's RIA Technologies (non technical)Adobe's RIA Technologies (non technical)
Adobe's RIA Technologies (non technical)
 
lecture2_public
lecture2_publiclecture2_public
lecture2_public
 
lecture2_public
lecture2_publiclecture2_public
lecture2_public
 
HTML5 Pearson preso
HTML5 Pearson presoHTML5 Pearson preso
HTML5 Pearson preso
 
Using Firebug & YSlow
Using Firebug & YSlowUsing Firebug & YSlow
Using Firebug & YSlow
 
Gaelyk quickie - GR8Conf Europe 2010 - Guillaume Laforge
Gaelyk quickie - GR8Conf Europe 2010 - Guillaume LaforgeGaelyk quickie - GR8Conf Europe 2010 - Guillaume Laforge
Gaelyk quickie - GR8Conf Europe 2010 - Guillaume Laforge
 
Yahoo! Frontend Building Blocks
Yahoo! Frontend Building BlocksYahoo! Frontend Building Blocks
Yahoo! Frontend Building Blocks
 
buildingxmlbasedapplications-180322042009.pptx
buildingxmlbasedapplications-180322042009.pptxbuildingxmlbasedapplications-180322042009.pptx
buildingxmlbasedapplications-180322042009.pptx
 
Beyond The Web: Drupal Meets The Desktop (And Mobile)
Beyond The Web: Drupal Meets The Desktop (And Mobile)Beyond The Web: Drupal Meets The Desktop (And Mobile)
Beyond The Web: Drupal Meets The Desktop (And Mobile)
 
HTML5 and Google Chrome - DevFest09
HTML5 and Google Chrome - DevFest09HTML5 and Google Chrome - DevFest09
HTML5 and Google Chrome - DevFest09
 
Front-end optimisation & jQuery Internals
Front-end optimisation & jQuery InternalsFront-end optimisation & jQuery Internals
Front-end optimisation & jQuery Internals
 
HTML5 introduction for beginners
HTML5 introduction for beginnersHTML5 introduction for beginners
HTML5 introduction for beginners
 
Xebia adobe flash mobile applications
Xebia adobe flash mobile applicationsXebia adobe flash mobile applications
Xebia adobe flash mobile applications
 
Building XML Based Applications
Building XML Based ApplicationsBuilding XML Based Applications
Building XML Based Applications
 

More from M. Jackson Wilkinson

More from M. Jackson Wilkinson (9)

Rebooting the Blue Button
Rebooting the Blue ButtonRebooting the Blue Button
Rebooting the Blue Button
 
Designing for Silence
Designing for SilenceDesigning for Silence
Designing for Silence
 
Jacks of All Trades or Masters of One?
Jacks of All Trades or Masters of One?Jacks of All Trades or Masters of One?
Jacks of All Trades or Masters of One?
 
Tips for Presenting
Tips for PresentingTips for Presenting
Tips for Presenting
 
Asset Positioning for Performance
Asset Positioning for PerformanceAsset Positioning for Performance
Asset Positioning for Performance
 
How MacGyver Would Do Design Research
How MacGyver Would Do Design ResearchHow MacGyver Would Do Design Research
How MacGyver Would Do Design Research
 
UX Matters
UX MattersUX Matters
UX Matters
 
Keeping it Snappy: Improving Website Performance
Keeping it Snappy: Improving Website PerformanceKeeping it Snappy: Improving Website Performance
Keeping it Snappy: Improving Website Performance
 
Design and UX in an Agile Process
Design and UX in an Agile ProcessDesign and UX in an Agile Process
Design and UX in an Agile Process
 

Recently uploaded

Mind your App Footprint 🐾⚡️🌱 (@FlutterHeroes 2024)
Mind your App Footprint 🐾⚡️🌱 (@FlutterHeroes 2024)Mind your App Footprint 🐾⚡️🌱 (@FlutterHeroes 2024)
Mind your App Footprint 🐾⚡️🌱 (@FlutterHeroes 2024)François
 
Revolutionizing The Banking Industry: The Monzo Way by CPO, Monzo
Revolutionizing The Banking Industry: The Monzo Way by CPO, MonzoRevolutionizing The Banking Industry: The Monzo Way by CPO, Monzo
Revolutionizing The Banking Industry: The Monzo Way by CPO, MonzoProduct School
 
IT Nation Evolve event 2024 - Quarter 1
IT Nation Evolve event 2024  - Quarter 1IT Nation Evolve event 2024  - Quarter 1
IT Nation Evolve event 2024 - Quarter 1Inbay UK
 
Harnessing the Power of GenAI for Exceptional Product Outcomes by Booking.com...
Harnessing the Power of GenAI for Exceptional Product Outcomes by Booking.com...Harnessing the Power of GenAI for Exceptional Product Outcomes by Booking.com...
Harnessing the Power of GenAI for Exceptional Product Outcomes by Booking.com...Product School
 
Launching New Products In Companies Where It Matters Most by Product Director...
Launching New Products In Companies Where It Matters Most by Product Director...Launching New Products In Companies Where It Matters Most by Product Director...
Launching New Products In Companies Where It Matters Most by Product Director...Product School
 
From Challenger to Champion: How SpiraPlan Outperforms JIRA+Plugins
From Challenger to Champion: How SpiraPlan Outperforms JIRA+PluginsFrom Challenger to Champion: How SpiraPlan Outperforms JIRA+Plugins
From Challenger to Champion: How SpiraPlan Outperforms JIRA+PluginsInflectra
 
How we think about an advisor tech stack
How we think about an advisor tech stackHow we think about an advisor tech stack
How we think about an advisor tech stackSummit
 
"Testing of Helm Charts or There and Back Again", Yura Rochniak
"Testing of Helm Charts or There and Back Again", Yura Rochniak"Testing of Helm Charts or There and Back Again", Yura Rochniak
"Testing of Helm Charts or There and Back Again", Yura RochniakFwdays
 
HBR SERIES METAL HOUSED RESISTORS POWER ELECTRICAL ABSORBS HIGH CURRENT DURIN...
HBR SERIES METAL HOUSED RESISTORS POWER ELECTRICAL ABSORBS HIGH CURRENT DURIN...HBR SERIES METAL HOUSED RESISTORS POWER ELECTRICAL ABSORBS HIGH CURRENT DURIN...
HBR SERIES METAL HOUSED RESISTORS POWER ELECTRICAL ABSORBS HIGH CURRENT DURIN...htrindia
 
Relationship Counselling: From Disjointed Features to Product-First Thinking ...
Relationship Counselling: From Disjointed Features to Product-First Thinking ...Relationship Counselling: From Disjointed Features to Product-First Thinking ...
Relationship Counselling: From Disjointed Features to Product-First Thinking ...Product School
 
Act Like an Owner, Challenge Like a VC by former CPO, Tripadvisor
Act Like an Owner,  Challenge Like a VC by former CPO, TripadvisorAct Like an Owner,  Challenge Like a VC by former CPO, Tripadvisor
Act Like an Owner, Challenge Like a VC by former CPO, TripadvisorProduct School
 
Introduction to Multimodal LLMs with LLaVA
Introduction to Multimodal LLMs with LLaVAIntroduction to Multimodal LLMs with LLaVA
Introduction to Multimodal LLMs with LLaVARobert McDermott
 
"How we created an SRE team in Temabit as a part of FOZZY Group in conditions...
"How we created an SRE team in Temabit as a part of FOZZY Group in conditions..."How we created an SRE team in Temabit as a part of FOZZY Group in conditions...
"How we created an SRE team in Temabit as a part of FOZZY Group in conditions...Fwdays
 
LF Energy Webinar: Introduction to TROLIE
LF Energy Webinar: Introduction to TROLIELF Energy Webinar: Introduction to TROLIE
LF Energy Webinar: Introduction to TROLIEDanBrown980551
 
Progress Report: Ministry of IT under Dr. Umar Saif Aug 23-Feb'24
Progress Report: Ministry of IT under Dr. Umar Saif Aug 23-Feb'24Progress Report: Ministry of IT under Dr. Umar Saif Aug 23-Feb'24
Progress Report: Ministry of IT under Dr. Umar Saif Aug 23-Feb'24Umar Saif
 
Enterprise Architecture As Strategy - Book Review
Enterprise Architecture As Strategy - Book ReviewEnterprise Architecture As Strategy - Book Review
Enterprise Architecture As Strategy - Book ReviewAshraf Fouad
 
National Institute of Standards and Technology (NIST) Cybersecurity Framework...
National Institute of Standards and Technology (NIST) Cybersecurity Framework...National Institute of Standards and Technology (NIST) Cybersecurity Framework...
National Institute of Standards and Technology (NIST) Cybersecurity Framework...MichaelBenis1
 
Cultivating Entrepreneurial Mindset in Product Management: Strategies for Suc...
Cultivating Entrepreneurial Mindset in Product Management: Strategies for Suc...Cultivating Entrepreneurial Mindset in Product Management: Strategies for Suc...
Cultivating Entrepreneurial Mindset in Product Management: Strategies for Suc...Product School
 
Introducing the New FME Community Webinar - Feb 21, 2024 (2).pdf
Introducing the New FME Community Webinar - Feb 21, 2024 (2).pdfIntroducing the New FME Community Webinar - Feb 21, 2024 (2).pdf
Introducing the New FME Community Webinar - Feb 21, 2024 (2).pdfSafe Software
 

Recently uploaded (20)

In sharing we trust. Taking advantage of a diverse consortium to build a tran...
In sharing we trust. Taking advantage of a diverse consortium to build a tran...In sharing we trust. Taking advantage of a diverse consortium to build a tran...
In sharing we trust. Taking advantage of a diverse consortium to build a tran...
 
Mind your App Footprint 🐾⚡️🌱 (@FlutterHeroes 2024)
Mind your App Footprint 🐾⚡️🌱 (@FlutterHeroes 2024)Mind your App Footprint 🐾⚡️🌱 (@FlutterHeroes 2024)
Mind your App Footprint 🐾⚡️🌱 (@FlutterHeroes 2024)
 
Revolutionizing The Banking Industry: The Monzo Way by CPO, Monzo
Revolutionizing The Banking Industry: The Monzo Way by CPO, MonzoRevolutionizing The Banking Industry: The Monzo Way by CPO, Monzo
Revolutionizing The Banking Industry: The Monzo Way by CPO, Monzo
 
IT Nation Evolve event 2024 - Quarter 1
IT Nation Evolve event 2024  - Quarter 1IT Nation Evolve event 2024  - Quarter 1
IT Nation Evolve event 2024 - Quarter 1
 
Harnessing the Power of GenAI for Exceptional Product Outcomes by Booking.com...
Harnessing the Power of GenAI for Exceptional Product Outcomes by Booking.com...Harnessing the Power of GenAI for Exceptional Product Outcomes by Booking.com...
Harnessing the Power of GenAI for Exceptional Product Outcomes by Booking.com...
 
Launching New Products In Companies Where It Matters Most by Product Director...
Launching New Products In Companies Where It Matters Most by Product Director...Launching New Products In Companies Where It Matters Most by Product Director...
Launching New Products In Companies Where It Matters Most by Product Director...
 
From Challenger to Champion: How SpiraPlan Outperforms JIRA+Plugins
From Challenger to Champion: How SpiraPlan Outperforms JIRA+PluginsFrom Challenger to Champion: How SpiraPlan Outperforms JIRA+Plugins
From Challenger to Champion: How SpiraPlan Outperforms JIRA+Plugins
 
How we think about an advisor tech stack
How we think about an advisor tech stackHow we think about an advisor tech stack
How we think about an advisor tech stack
 
"Testing of Helm Charts or There and Back Again", Yura Rochniak
"Testing of Helm Charts or There and Back Again", Yura Rochniak"Testing of Helm Charts or There and Back Again", Yura Rochniak
"Testing of Helm Charts or There and Back Again", Yura Rochniak
 
HBR SERIES METAL HOUSED RESISTORS POWER ELECTRICAL ABSORBS HIGH CURRENT DURIN...
HBR SERIES METAL HOUSED RESISTORS POWER ELECTRICAL ABSORBS HIGH CURRENT DURIN...HBR SERIES METAL HOUSED RESISTORS POWER ELECTRICAL ABSORBS HIGH CURRENT DURIN...
HBR SERIES METAL HOUSED RESISTORS POWER ELECTRICAL ABSORBS HIGH CURRENT DURIN...
 
Relationship Counselling: From Disjointed Features to Product-First Thinking ...
Relationship Counselling: From Disjointed Features to Product-First Thinking ...Relationship Counselling: From Disjointed Features to Product-First Thinking ...
Relationship Counselling: From Disjointed Features to Product-First Thinking ...
 
Act Like an Owner, Challenge Like a VC by former CPO, Tripadvisor
Act Like an Owner,  Challenge Like a VC by former CPO, TripadvisorAct Like an Owner,  Challenge Like a VC by former CPO, Tripadvisor
Act Like an Owner, Challenge Like a VC by former CPO, Tripadvisor
 
Introduction to Multimodal LLMs with LLaVA
Introduction to Multimodal LLMs with LLaVAIntroduction to Multimodal LLMs with LLaVA
Introduction to Multimodal LLMs with LLaVA
 
"How we created an SRE team in Temabit as a part of FOZZY Group in conditions...
"How we created an SRE team in Temabit as a part of FOZZY Group in conditions..."How we created an SRE team in Temabit as a part of FOZZY Group in conditions...
"How we created an SRE team in Temabit as a part of FOZZY Group in conditions...
 
LF Energy Webinar: Introduction to TROLIE
LF Energy Webinar: Introduction to TROLIELF Energy Webinar: Introduction to TROLIE
LF Energy Webinar: Introduction to TROLIE
 
Progress Report: Ministry of IT under Dr. Umar Saif Aug 23-Feb'24
Progress Report: Ministry of IT under Dr. Umar Saif Aug 23-Feb'24Progress Report: Ministry of IT under Dr. Umar Saif Aug 23-Feb'24
Progress Report: Ministry of IT under Dr. Umar Saif Aug 23-Feb'24
 
Enterprise Architecture As Strategy - Book Review
Enterprise Architecture As Strategy - Book ReviewEnterprise Architecture As Strategy - Book Review
Enterprise Architecture As Strategy - Book Review
 
National Institute of Standards and Technology (NIST) Cybersecurity Framework...
National Institute of Standards and Technology (NIST) Cybersecurity Framework...National Institute of Standards and Technology (NIST) Cybersecurity Framework...
National Institute of Standards and Technology (NIST) Cybersecurity Framework...
 
Cultivating Entrepreneurial Mindset in Product Management: Strategies for Suc...
Cultivating Entrepreneurial Mindset in Product Management: Strategies for Suc...Cultivating Entrepreneurial Mindset in Product Management: Strategies for Suc...
Cultivating Entrepreneurial Mindset in Product Management: Strategies for Suc...
 
Introducing the New FME Community Webinar - Feb 21, 2024 (2).pdf
Introducing the New FME Community Webinar - Feb 21, 2024 (2).pdfIntroducing the New FME Community Webinar - Feb 21, 2024 (2).pdf
Introducing the New FME Community Webinar - Feb 21, 2024 (2).pdf
 

Up to Speed on HTML 5 and CSS 3

  • 1. UP TO SPEED ON HTML 5 & CSS 3 </TITLE> REFRESH DC | M. JACKSON WILKINSON & JASON GARBER | JULY 16, 2009 Sunday, July 19, 2009
  • 3. That’s “Michael” M. JACKSON WILKINSON Your Humble Refresh DC Organizer Sunday, July 19, 2009
  • 6. JASON GARBER Refresh DC Organizer Emeritus Sunday, July 19, 2009
  • 8. A Very Brief History of WEB STANDARDS Sunday, July 19, 2009
  • 9. XHTML 1 CSS 2.1 Content Presentation 2001-2006 Sunday, July 19, 2009
  • 10. WHAT WG Web Hypertext Application Technology Working Group 2004-2007 Sunday, July 19, 2009
  • 11. W3C World Wide Web Consortium 2007 - PRESENT Sunday, July 19, 2009
  • 12. HTML 5 CSS 3 Content Presentation 2007 - PRESENT Sunday, July 19, 2009
  • 13. The Content Layer: HTML 5 Sunday, July 19, 2009
  • 15. structural elements Provides new semantic vocabulary HEADER for parts of a page previously NAV served by DIVs with ID and Class attributes. ARTICLE IE requires some workarounds ASIDE using JavaScript to make these elements work. SECTION FOOTER structural elements Browser Support: Sunday, July 19, 2009
  • 16. figure Allows for associating captions FIGURE with embedded content, including videos, audio, pullquotes, or images. CONTENT (IMG, Q, VIDEO, ETC.) LEGEND figure Browser Support: Sunday, July 19, 2009
  • 17. audio & video Allows for associating captions <video src="test.ogg" autoplay="autoplay" controls="controls"> with embedded content, including Your browser does not support the video videos, audio, or images. element. This could also include object and embed codes for legacy browsers. </video> Opera, Chrome, and Firefox all support the Ogg Theora video format natively, while Safari and Chrome support H.264. audio & video Browser Support: Sunday, July 19, 2009
  • 18. OTHER ELEMENTS METER Contained content is a measurement, like length. PROGRESS Contains current process toward a goal, like a percentage. TIME Time COMMAND Represents something a command a user may execute. DATAGRID Represents data. Non-tabular or otherwise. OUTPUT Displays the output of a program or process. RUBY Allows input of rubi/ruby annotations for Asian languages. Sunday, July 19, 2009
  • 19. NEW FORM CONTROLS Sunday, July 19, 2009
  • 20. FORM CONTROLS DATETIME Allows input of a date and a time. DATETIME-LOCAL Allows input of a date and a time, in local time. NUMBER Allows input of a number. RANGE Input is verified to be within a range. EMAIL Confirms the input to be a valid email. URL Ensures input is a valid URL. COLOR Provides a mechanism for the user to input an RGB color. Sunday, July 19, 2009
  • 22. HTML 5 doctype <!DOCTYPE html> The HTML 5 doctype is way easier than any other doctype. Evar. Just type the parts you remember, and you’ll probably be right. HTML 5 doctype Browser Support: Sunday, July 19, 2009
  • 23. HTML5 & XHTML5 <html> HTML 5 supports the standard HTML syntax (formerly SGML), but also allows for an XML-based variant XHTML5. Since it’s XML, XHTML should vs. be served as application/xml or application/xhtml+xml. Warning: <html xmlns="http:// this means browsers freak if there’s www.w3.org/1999/xhtml"> an error. HTML 5 doctype Browser Support: Sunday, July 19, 2009
  • 24. Block-Level Links You can now wrap links around <li> block-level elements, rather than having to create links around <a href="page.html"> every element inside the block <img src="pic.jpg"> element. <h3>Title</h3> <p>Text</p> This is useful for lists of articles that include multiple elements, </a> callouts with a single action, etc. </li> Block-level Links Browser Support: Sunday, July 19, 2009
  • 26. Drag & Drop API Allows objects (images and links, by default) to be dragged and then dropped onto a target. The target is enabled by canceling the ‘dragover’ (for sane browsers) or ‘dragenter’ (for IE) events for + the drop target. Then listen for a ‘drop’ event which contains a ‘dataTransfer’ object with info. Drag and Drop API Browser Support: Sunday, July 19, 2009
  • 27. getElementsByClassName Works just like getElementsById, but selects an array of all elements based on a shared class name. No more varied custom functions to make this happen, and performance is significantly better. getElementsByClassName Browser Support: Sunday, July 19, 2009
  • 28. Cross-Document Messaging This allows non-hostile documents on different domains to simply MAIN DOCUMENT communicate with each other. The sending document can call FOREIGN postMessage() on the window IFRAME object of the receiving document, while the receiving document listens for a ‘message’ event. Cross-Doc Messaging Browser Support: Sunday, July 19, 2009
  • 29. Simple Client Storage The sessionStorage DOM attribute <input stores session data for a single type="checkbox" window, like cookies on crack. onchange=" localStorage.insurance=checked " The localStorage DOM attribute /> allows each site to store megabytes of data across sessions to improve performance. Both methods store only strings. Simple Client Storage Browser Support: Sunday, July 19, 2009
  • 30. Structured Client Storage HTML 5’s Web Storage module tx.executeSql( provides an SQL server within the ‘SELECT * FROM Notes’, client, accessible using Javascript. It [], function(tx, rs) { uses fairly standard SQL queries for(var i = 0; for both reading and writing. i < rs.rows.length; i++) { renderNote(rs.rows[i]); There’s a lot to be explained about } the built-in SQL server, so go check out the docs for more information. Structured Client Storage Browser Support: Sunday, July 19, 2009
  • 31. Offline Application Caching Allow the client to refer directly to <html manifest=”/cache.manifest”> its cache, authoritatively, for certain resources, even if the CACHE MANIFEST browser is offline. index.html help.html Resources listed in the “network” style/default.css section are never cached. images/logo.png images/backgound.png NETWORK: server.cgi Offline Application Caching Browser Support: Sunday, July 19, 2009
  • 32. Canvas Provides an API for drawing <canvas id="canvas" width="150" height="150"> fallback content directly in the browser window, </canvas> using instructions that define function draw() { vector-based shapes and lines. var canvas = document.getElementById("canvas"); if (canvas.getContext) { var ctx = canvas.getContext("2d"); This allows SVG-like graphics to be created on the fly in the browser, ctx.fillStyle = "rgb(200,0,0)"; ctx.fillRect (10, 10, 55, 50); with fallback content (like Flash?) ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; provided to legacy browsers. ctx.fillRect (30, 30, 55, 50); } } canvas Browser Support: Sunday, July 19, 2009
  • 33. The Presentation Layer: CSS 3 Sunday, July 19, 2009
  • 35. opacity Adjusts the opacity of the selected div { color: #f00; opacity: 1.0; } element’s presentation on screen. Takes values between 0.0 (fully div { color: #f00; opacity: 0.5; } transparent) and 1.0 (fully opaque) opacity Browser Support: Sunday, July 19, 2009
  • 36. RGBA Color Like RGB color definitions, but div { color: rgb(0,255,0); } allows a fourth field, defining the alpha value of the color being applied. div { color: rgba(0,255,0,0.5); } Like opacity, the alpha value is between 0.0 (fully transparent) and 1.0 (fully opaque). RGBA color Browser Support: Sunday, July 19, 2009
  • 37. HSL/A Color HSL color definitions accept three div { color: hsl(240,50%,50%); } arguments: hue is a degree on a color wheel (0-360), saturation is a percentage, and lightness is a div { color: hsla(240,50%,50%,0.5); } percentage. HSLA is like HSL color, but allows a fourth field, defining the alpha value of the color being applied. See RGBA. HSL/A color Browser Support: Sunday, July 19, 2009
  • 39. background-size Defines the size at which the div { background-size: 100px 65px; } browser should display the specified background image. Accepts all normal size definitions as width div { background-size: 400px 65px; } followed by height. In shorthand, this appears after background-position values. background-size Browser Support: Sunday, July 19, 2009
  • 40. background-image Allows for multiple images to be background: url(body-top.png) top left no-repeat, url(body-bottom.png) bottom left no-repeat, specified. The first image specified url(body-middle.png) left repeat-y; is layered closest to the top of the screen, and subsequent images are layered beneath. background-image Browser Support: Sunday, July 19, 2009
  • 42. border-color Allows for multiple border colors border: 5px solid #000; border-color: #000 transparent transparent #000; to be specified, one pixel at a time. The last specified color is repeated if necessary. This cannot be used in the border shorthand syntax. border-color Browser Support: Sunday, July 19, 2009
  • 43. border-image Allows the border to be represented border-image: url(button.png) 0 12 0 12 stretch stretch; by an image, by defining which parts of the image should be used for the edges, and which should be repeated in the main part of the border-image: url(border.png) 27 27 27 27 round element. round; This is difficult to represent completely, so go look it up. border-image Browser Support: Sunday, July 19, 2009
  • 44. border-radius Curves the corners of the border border-radius: 10px; using the radius given, often in pixels. This can be given to all corners, or only to individual corners as specified. border-top-right-radius: 10px; Firefox refers to individual corners like “border-radius-topright” while Safari (correctly) refers to it as “border-top-right-radius”. border-radius Browser Support: Sunday, July 19, 2009
  • 45. box-shadow Creates a drop shadow beneath the box-shadow: 10px 10px 10px #333; selected element. The first argument is the horizontal offset, the second is the vertical offset, the third is the blur radius, and the final argument is the color to be used as the shadow. box-shadow Browser Support: Sunday, July 19, 2009
  • 47. text-overflow If text overflows the available text-overflow: ellipsis; space, the text-overflow property Lorem ipsum dolor sit amet, consectetur adipiscing defines what happens. elit. Nam purus nunc, auctor et accumsan ut, aliquam vel leo. Quisque dignissim tincidunt rhoncus. Duis sed velit rutrum lorem rutrum faucibus. Nam tincidunt eros at arcu vestibulum egestas. Donec fringilla, The value “ellipsis” appends an turpis in auctor luctus, orci orci vestibulum lacus, a tristique felis erat non diam. Morbi dolor massa, ellipsis character at the overflow elementum ac iaculis quis, iaculis sed neque. Aliquam erat volutpat. Aliquam porttitor auctor massa sit point. amet ultrices. Maecenas quis nunc nibh, sit amet hendrerit leo. Donec a massa eget velit consectetur fermentum aliquet et eros. Vestibulum volutpat, est vitae dapibus congue, nibh augue vehicula lacutus es… text-overflow Browser Support: Sunday, July 19, 2009
  • 48. text-shadow Creates a drop shadow beneath the text-shadow: 10px 10px 10px #333; selected text. This is sample text. The first argument is the horizontal offset, the second is the vertical offset, the third is the blur radius, and the final argument is the color to be used as the shadow. Multiple shadow definitions may be separated using commas. text-shadow Browser Support: Sunday, July 19, 2009
  • 49. column-width & column-gap Breaks flowing text into multiple column-width: 200px; column-gap: 20px; columns, based on the width of the Lorem ipsum dolor sit amet, consectetur quisque dignissim tincidunt rhoncus. Duis sed container. Column width defines adipiscing elit. Nam purus nunc, auctor et accumsan ut, aliquam vel leo. Quisque velit rutrum lorem rutrum faucibus. Nam tincidunt eros at arcu vestibulum egestas. the width of each column, and dignissim tincidunt rhoncus. Duis sed velit rutrum lorem rutrum faucibus. Nam tincidunt eros at arcu vestibulum egestas. Donec Donec fringilla, turpis in auctor luctus, orci orci vestibulum lacus, a tristique felis erat non diam. Morbi dolor massa, elementum ac column-gap defines the gap fringilla, turpis in auctor luctus, orci orci vestibulum lacus, a tristique felis erat non iaculis quis, iaculis sed neque. Aliquam erat volutpat. Aliquam porttitor auctor massa sit diam. Morbi dolor massa, elementum ac amet ultrices. Maecenas quis nunc nibh, sit between columns. iaculis quis, iaculis sed neque. Aliquam erat volutpat. Aliquam porttitor auctor massa sit amet hendrerit leo. Donec a massa eget velit consectetur fermentum aliquet et eros. amet ultrices. Maecenas quis nunc nibh, sit Vestibulum volutpat, est vitae dapibus amet hendrerit leo. Donec a massa eget velit congue, nibh augue vehicula lacus, vel consectetur fermentum aliquet et eros. semper dolor odio in libero. Curabitur vitae Column-count can be specified in Vestibulum volutpat, est vitae dapibus congue, nibh augue vehicula lacus, vel sem consequat purus fermentum tincidunt. Donec vestibulum felis ut metus ultrices a semper dolor odio in libero. Curabitur vitae vulputate felis rhoncus eum ivolonortis lieu of column-width. sem consequat purus fermentum tincidunt. Donec vestibulum felis ut metus ultrices a vulputate felis rhoncus eum ivolonortis column-width/column-gap Browser Support: Sunday, July 19, 2009
  • 50. @font-face Allows a font file to be associated @font-face { font-family: Helvy; with a font name for later use in src: local("Helvetica Neue Bold"), font-family declarations. local("HelveticaNeue-Bold"), url(MgOpenModernaBold.ttf); font-weight: bold; IE supports only .eot Embedded } OpenType files, while the other p.specialFont { font-family: Helvy, sans-serif; } browsers support any TTF and OTF font files. column-width/column-gap Browser Support: Sunday, July 19, 2009
  • 52. rotate Rotates the selected element at the defined angle, defined in degrees. The rotation doesn’t affect layout, transform: rotate(30deg); and elements that are transformed are treated similarly to position:relative. rotate Browser Support: Sunday, July 19, 2009
  • 53. scale Scales the element in question based on the specified unit-less numbers given for the X and Y axes. If only one number is given, it transform: scale(0.5,2.0); is applied to both axes. scale Browser Support: Sunday, July 19, 2009
  • 54. skew Skews the element around the X and Y axes by the specified angles, in degrees. If it’s only one number, the Y axis is assumed to be zero. transform: skew(-30deg); scale Browser Support: Sunday, July 19, 2009
  • 55. translate Moves the object along each axis by the length specified. The unit can be anything accepted as a length in CSS, such as px, em, percentages, transform: translate(30px, 0); etc. translate Browser Support: Sunday, July 19, 2009
  • 56. 3D TRANSFORMATIONS PERSPECTIVE The distance, in pixels, of the z=0 plane from the viewer. MATRIX3D Allows creation of a 3d transformation matrix. ROTATE3D Rotate the matched element in three dimensions. SCALE3D Performs a three-dimensional scale operation. TRANSLATE3D Allows the matched element to be moved along three axes. Sunday, July 19, 2009
  • 58. FIREFOX: -moz-box-shadow: SAFARI: -webkit-box-shadow: OPERA: -o-box-shadow: IE: -ms-box-shadow: Sunday, July 19, 2009
  • 59. READY YET? When is it Time to Use These? Sunday, July 19, 2009
  • 61. IMPLEMENTATION trumps SPECIFICATION Sunday, July 19, 2009
  • 62. PROGRESSFUL DEGRAHANCEMENT ™ Sunday, July 19, 2009
  • 63. In the end, be mindful of BUSINESS AND USER GOALS Sunday, July 19, 2009
  • 64. A Healthy Dose of CRITICISM Sunday, July 19, 2009
  • 65. MORE RESOURCES HTML 5 Doctor http://html5doctor.com/ HTML 5 Spec http://dev.w3.org/html5/spec/Overview.html ALA Article http://www.alistapart.com/articles/previewofhtml5 Bruce Lawson http://www.brucelawson.co.uk/category/ accessibility-web-standards/html5/ Your Presenters Feel free to follow up with Jackson & Jason Sunday, July 19, 2009
  • 67. Get in Touch! SpeakerRate: spkr8.com/t/1250 Twitter: @whafro & @jgarber Sunday, July 19, 2009