SlideShare a Scribd company logo

Html5 ux london

Todd Zaki Warfel
Todd Zaki Warfel
Todd Zaki WarfelSr Director of Design at Workday-I'm hiring designers and researchers

Slides from my progressive prototyping with HTML5 and CSS3 workshop at UXLondon.

Html5 ux london

1 of 44
Download to read offline
PROTOTYPING
                                      with




TODD ZAKI WARFEL / UXLONDON /#HTML5
Grab the files
http://bit.ly/UXLondon
Guiding Principles
Set Expectations
Guiding Principles
The Best Tool is the one you know
Guiding Principles
Prototype Only What you Need
HTMl as a prototyping tool
Pros and Cons
Ad

Recommended

Prototyping w/HTML5 and CSS3
Prototyping w/HTML5 and CSS3Prototyping w/HTML5 and CSS3
Prototyping w/HTML5 and CSS3Todd Zaki Warfel
 
Rapid and Responsive - UX to Prototype with Bootstrap
Rapid and Responsive - UX to Prototype with BootstrapRapid and Responsive - UX to Prototype with Bootstrap
Rapid and Responsive - UX to Prototype with BootstrapJosh Jeffryes
 
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone developmentiPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone developmentEstelle Weyl
 
CSS pattern libraries
CSS pattern librariesCSS pattern libraries
CSS pattern librariesRuss Weakley
 
モダンなCSS設計パターンを考える
モダンなCSS設計パターンを考えるモダンなCSS設計パターンを考える
モダンなCSS設計パターンを考える拓樹 谷
 
Slow kinda sucks
Slow kinda sucksSlow kinda sucks
Slow kinda sucksTim Wright
 
Modular HTML, CSS, & JS Workshop
Modular HTML, CSS, & JS WorkshopModular HTML, CSS, & JS Workshop
Modular HTML, CSS, & JS WorkshopShay Howe
 
Beyond CSS Architecture
Beyond CSS ArchitectureBeyond CSS Architecture
Beyond CSS Architecture拓樹 谷
 

More Related Content

What's hot

HTML & CSS Workshop Notes
HTML & CSS Workshop NotesHTML & CSS Workshop Notes
HTML & CSS Workshop NotesPamela Fox
 
CSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and moreCSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and moreRuss Weakley
 
An Intro to HTML & CSS
An Intro to HTML & CSSAn Intro to HTML & CSS
An Intro to HTML & CSSShay Howe
 
Try Web Components
Try Web ComponentsTry Web Components
Try Web Components拓樹 谷
 
モダンなCSS設計パターンを考える
モダンなCSS設計パターンを考えるモダンなCSS設計パターンを考える
モダンなCSS設計パターンを考える拓樹 谷
 
Html&Browser
Html&BrowserHtml&Browser
Html&BrowserAlipay
 
How to create a basic template
How to create a basic templateHow to create a basic template
How to create a basic templatevathur
 
From PSD to WordPress Theme: Bringing designs to life
From PSD to WordPress Theme: Bringing designs to lifeFrom PSD to WordPress Theme: Bringing designs to life
From PSD to WordPress Theme: Bringing designs to lifeDerek Christensen
 
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)Nicholas Zakas
 
Getting Started with DOM
Getting Started with DOMGetting Started with DOM
Getting Started with DOMHernan Mammana
 
Efficient, maintainable CSS
Efficient, maintainable CSSEfficient, maintainable CSS
Efficient, maintainable CSSRuss Weakley
 
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
 
Advanced Web Scraping or How To Make Internet Your Database #seoplus2018
Advanced Web Scraping or How To Make Internet Your Database #seoplus2018Advanced Web Scraping or How To Make Internet Your Database #seoplus2018
Advanced Web Scraping or How To Make Internet Your Database #seoplus2018Esteve Castells
 
Front End Good Practices
Front End Good PracticesFront End Good Practices
Front End Good PracticesHernan Mammana
 
CSS3 - is everything we used to do wrong?
CSS3 - is everything we used to do wrong? CSS3 - is everything we used to do wrong?
CSS3 - is everything we used to do wrong? Russ Weakley
 
Designers & Developers
Designers & DevelopersDesigners & Developers
Designers & DevelopersAndré Luís
 

What's hot (18)

HTML & CSS Workshop Notes
HTML & CSS Workshop NotesHTML & CSS Workshop Notes
HTML & CSS Workshop Notes
 
CSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and moreCSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and more
 
HTML5 & CSS3 Flag
HTML5 & CSS3 FlagHTML5 & CSS3 Flag
HTML5 & CSS3 Flag
 
An Intro to HTML & CSS
An Intro to HTML & CSSAn Intro to HTML & CSS
An Intro to HTML & CSS
 
Try Web Components
Try Web ComponentsTry Web Components
Try Web Components
 
HTML5 Essentials
HTML5 EssentialsHTML5 Essentials
HTML5 Essentials
 
モダンなCSS設計パターンを考える
モダンなCSS設計パターンを考えるモダンなCSS設計パターンを考える
モダンなCSS設計パターンを考える
 
Html&Browser
Html&BrowserHtml&Browser
Html&Browser
 
How to create a basic template
How to create a basic templateHow to create a basic template
How to create a basic template
 
From PSD to WordPress Theme: Bringing designs to life
From PSD to WordPress Theme: Bringing designs to lifeFrom PSD to WordPress Theme: Bringing designs to life
From PSD to WordPress Theme: Bringing designs to life
 
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
 
Getting Started with DOM
Getting Started with DOMGetting Started with DOM
Getting Started with DOM
 
Efficient, maintainable CSS
Efficient, maintainable CSSEfficient, maintainable CSS
Efficient, maintainable CSS
 
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
 
Advanced Web Scraping or How To Make Internet Your Database #seoplus2018
Advanced Web Scraping or How To Make Internet Your Database #seoplus2018Advanced Web Scraping or How To Make Internet Your Database #seoplus2018
Advanced Web Scraping or How To Make Internet Your Database #seoplus2018
 
Front End Good Practices
Front End Good PracticesFront End Good Practices
Front End Good Practices
 
CSS3 - is everything we used to do wrong?
CSS3 - is everything we used to do wrong? CSS3 - is everything we used to do wrong?
CSS3 - is everything we used to do wrong?
 
Designers & Developers
Designers & DevelopersDesigners & Developers
Designers & Developers
 

Similar to Html5 ux london

Progressive Prototyping w/HTML5, CSS3 and jQuery
Progressive Prototyping w/HTML5, CSS3 and jQueryProgressive Prototyping w/HTML5, CSS3 and jQuery
Progressive Prototyping w/HTML5, CSS3 and jQueryTodd Zaki Warfel
 
Web Design Bootcamp - Day1
Web Design Bootcamp - Day1Web Design Bootcamp - Day1
Web Design Bootcamp - Day1Aslam Najeebdeen
 
Modifying your themes design - Learning CSS - Atlanta WordPress users group
Modifying your themes design - Learning CSS - Atlanta WordPress users groupModifying your themes design - Learning CSS - Atlanta WordPress users group
Modifying your themes design - Learning CSS - Atlanta WordPress users groupEvan Mullins
 
Using HTML5 and CSS3 today
Using HTML5 and CSS3 todayUsing HTML5 and CSS3 today
Using HTML5 and CSS3 todaythebeebs
 
GDI Seattle Intermediate HTML and CSS Class 1
GDI Seattle Intermediate HTML and CSS Class 1GDI Seattle Intermediate HTML and CSS Class 1
GDI Seattle Intermediate HTML and CSS Class 1Heather Rock
 
A practical guide to building websites with HTML5 & CSS3
A practical guide to building websites with HTML5 & CSS3A practical guide to building websites with HTML5 & CSS3
A practical guide to building websites with HTML5 & CSS3Darren Wood
 
Html5 Brown Bag
Html5 Brown BagHtml5 Brown Bag
Html5 Brown Bagstuplum
 
2022 HTML5: The future is now
2022 HTML5: The future is now2022 HTML5: The future is now
2022 HTML5: The future is nowGonzalo Cordero
 
WordPress Theme Design - Rich Media Institute Workshop
WordPress Theme Design - Rich Media Institute WorkshopWordPress Theme Design - Rich Media Institute Workshop
WordPress Theme Design - Rich Media Institute WorkshopBrendan Sera-Shriar
 
Introduction of Html/css/js
Introduction of Html/css/jsIntroduction of Html/css/js
Introduction of Html/css/jsKnoldus Inc.
 
Diazo: Bridging Designers and Programmers
Diazo: Bridging Designers and ProgrammersDiazo: Bridging Designers and Programmers
Diazo: Bridging Designers and ProgrammersTsungWei Hu
 
Grok Drupal (7) Theming - 2011 Feb update
Grok Drupal (7) Theming - 2011 Feb updateGrok Drupal (7) Theming - 2011 Feb update
Grok Drupal (7) Theming - 2011 Feb updateLaura Scott
 
Club website demo
Club website demoClub website demo
Club website demoblstov
 
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
 

Similar to Html5 ux london (20)

Progressive Prototyping w/HTML5, CSS3 and jQuery
Progressive Prototyping w/HTML5, CSS3 and jQueryProgressive Prototyping w/HTML5, CSS3 and jQuery
Progressive Prototyping w/HTML5, CSS3 and jQuery
 
Web Design Bootcamp - Day1
Web Design Bootcamp - Day1Web Design Bootcamp - Day1
Web Design Bootcamp - Day1
 
Modifying your themes design - Learning CSS - Atlanta WordPress users group
Modifying your themes design - Learning CSS - Atlanta WordPress users groupModifying your themes design - Learning CSS - Atlanta WordPress users group
Modifying your themes design - Learning CSS - Atlanta WordPress users group
 
Html5
Html5Html5
Html5
 
Using HTML5 and CSS3 today
Using HTML5 and CSS3 todayUsing HTML5 and CSS3 today
Using HTML5 and CSS3 today
 
GDI Seattle Intermediate HTML and CSS Class 1
GDI Seattle Intermediate HTML and CSS Class 1GDI Seattle Intermediate HTML and CSS Class 1
GDI Seattle Intermediate HTML and CSS Class 1
 
A practical guide to building websites with HTML5 & CSS3
A practical guide to building websites with HTML5 & CSS3A practical guide to building websites with HTML5 & CSS3
A practical guide to building websites with HTML5 & CSS3
 
Intro to HTML 5 / CSS 3
Intro to HTML 5 / CSS 3Intro to HTML 5 / CSS 3
Intro to HTML 5 / CSS 3
 
Html5 Brown Bag
Html5 Brown BagHtml5 Brown Bag
Html5 Brown Bag
 
Html5
Html5Html5
Html5
 
2022 HTML5: The future is now
2022 HTML5: The future is now2022 HTML5: The future is now
2022 HTML5: The future is now
 
WordPress Theme Design - Rich Media Institute Workshop
WordPress Theme Design - Rich Media Institute WorkshopWordPress Theme Design - Rich Media Institute Workshop
WordPress Theme Design - Rich Media Institute Workshop
 
Introduction of Html/css/js
Introduction of Html/css/jsIntroduction of Html/css/js
Introduction of Html/css/js
 
Diazo: Bridging Designers and Programmers
Diazo: Bridging Designers and ProgrammersDiazo: Bridging Designers and Programmers
Diazo: Bridging Designers and Programmers
 
Grok Drupal (7) Theming - 2011 Feb update
Grok Drupal (7) Theming - 2011 Feb updateGrok Drupal (7) Theming - 2011 Feb update
Grok Drupal (7) Theming - 2011 Feb update
 
Html5
Html5Html5
Html5
 
Club website demo
Club website demoClub website demo
Club website demo
 
Wa html5-pdf
Wa html5-pdfWa html5-pdf
Wa html5-pdf
 
Wa html5-pdf
Wa html5-pdfWa html5-pdf
Wa html5-pdf
 
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]
 

Recently uploaded

Heathers Symbols for Gerald Freedman Theatre.pdf
Heathers Symbols for Gerald Freedman Theatre.pdfHeathers Symbols for Gerald Freedman Theatre.pdf
Heathers Symbols for Gerald Freedman Theatre.pdfLizShek
 
AWS-Architecture-Icons-Deck_For-Dark-BG_02062024.pptx
AWS-Architecture-Icons-Deck_For-Dark-BG_02062024.pptxAWS-Architecture-Icons-Deck_For-Dark-BG_02062024.pptx
AWS-Architecture-Icons-Deck_For-Dark-BG_02062024.pptxGopiNarahari1
 
Amadeus Hang and Cable Layouts UNCSA.pdf
Amadeus Hang and Cable Layouts UNCSA.pdfAmadeus Hang and Cable Layouts UNCSA.pdf
Amadeus Hang and Cable Layouts UNCSA.pdfLizShek
 
Mother Courage and Her Children Layouts.pdf
Mother Courage and Her Children Layouts.pdfMother Courage and Her Children Layouts.pdf
Mother Courage and Her Children Layouts.pdfLizShek
 
fashion forecasting for levele 3.pdf
fashion forecasting for levele 3.pdffashion forecasting for levele 3.pdf
fashion forecasting for levele 3.pdfMezgebuTesfaye4
 
Portfolio of designs and Visualization Samuel Jayeola
Portfolio of designs and Visualization Samuel JayeolaPortfolio of designs and Visualization Samuel Jayeola
Portfolio of designs and Visualization Samuel JayeolaJayeola Samuel
 
Black and Red Modern Guess The Movie Animated Game Presentation(1).pptx
Black and Red Modern Guess The Movie Animated Game Presentation(1).pptxBlack and Red Modern Guess The Movie Animated Game Presentation(1).pptx
Black and Red Modern Guess The Movie Animated Game Presentation(1).pptxklozinska
 
Apparel Portfolio draft: Cayden Ingman |
Apparel Portfolio draft: Cayden Ingman |Apparel Portfolio draft: Cayden Ingman |
Apparel Portfolio draft: Cayden Ingman |CaydenIngman
 
HTM Example Layouts Freedman Theatre.pdf
HTM Example Layouts Freedman Theatre.pdfHTM Example Layouts Freedman Theatre.pdf
HTM Example Layouts Freedman Theatre.pdfLizShek
 
Preposition for grade 12th Vietnamese student
Preposition for grade 12th Vietnamese studentPreposition for grade 12th Vietnamese student
Preposition for grade 12th Vietnamese studentThaoNguyenDang4
 
Mother Courage and Her Children Layouts.pdf
Mother Courage and Her Children Layouts.pdfMother Courage and Her Children Layouts.pdf
Mother Courage and Her Children Layouts.pdfLizShek
 
Spoleto Festival23 Hang and Cable Layouts.pdf
Spoleto Festival23 Hang and Cable Layouts.pdfSpoleto Festival23 Hang and Cable Layouts.pdf
Spoleto Festival23 Hang and Cable Layouts.pdfLizShek
 
Before and After Wheelchair Accessible Whole Home Remodel.pptx
Before and After Wheelchair Accessible Whole Home Remodel.pptxBefore and After Wheelchair Accessible Whole Home Remodel.pptx
Before and After Wheelchair Accessible Whole Home Remodel.pptxleahlareaupci
 
December 2023 Issue - Fnewsmagazine SAIC
December 2023 Issue - Fnewsmagazine SAICDecember 2023 Issue - Fnewsmagazine SAIC
December 2023 Issue - Fnewsmagazine SAICaditisingh523288
 
the bloomberg office headquarters in London.pptx
the bloomberg office headquarters in London.pptxthe bloomberg office headquarters in London.pptx
the bloomberg office headquarters in London.pptxumerufitti
 
Studio Surfaced - Textile Design Studio based out of Delhi NCR
Studio Surfaced - Textile Design Studio based out of Delhi NCRStudio Surfaced - Textile Design Studio based out of Delhi NCR
Studio Surfaced - Textile Design Studio based out of Delhi NCRSurfaced - Designs By Meera Narula
 
Carpentry 7-8 explorartory (Week 3).pptx
Carpentry 7-8 explorartory (Week 3).pptxCarpentry 7-8 explorartory (Week 3).pptx
Carpentry 7-8 explorartory (Week 3).pptxMonroewellFajardo
 
homescreen revamp homescreen revamphomescreen revamp
homescreen revamp homescreen revamphomescreen revamphomescreen revamp homescreen revamphomescreen revamp
homescreen revamp homescreen revamphomescreen revampvidya934261
 

Recently uploaded (20)

Heathers Symbols for Gerald Freedman Theatre.pdf
Heathers Symbols for Gerald Freedman Theatre.pdfHeathers Symbols for Gerald Freedman Theatre.pdf
Heathers Symbols for Gerald Freedman Theatre.pdf
 
AWS-Architecture-Icons-Deck_For-Dark-BG_02062024.pptx
AWS-Architecture-Icons-Deck_For-Dark-BG_02062024.pptxAWS-Architecture-Icons-Deck_For-Dark-BG_02062024.pptx
AWS-Architecture-Icons-Deck_For-Dark-BG_02062024.pptx
 
Amadeus Hang and Cable Layouts UNCSA.pdf
Amadeus Hang and Cable Layouts UNCSA.pdfAmadeus Hang and Cable Layouts UNCSA.pdf
Amadeus Hang and Cable Layouts UNCSA.pdf
 
Mother Courage and Her Children Layouts.pdf
Mother Courage and Her Children Layouts.pdfMother Courage and Her Children Layouts.pdf
Mother Courage and Her Children Layouts.pdf
 
fashion forecasting for levele 3.pdf
fashion forecasting for levele 3.pdffashion forecasting for levele 3.pdf
fashion forecasting for levele 3.pdf
 
Portfolio of designs and Visualization Samuel Jayeola
Portfolio of designs and Visualization Samuel JayeolaPortfolio of designs and Visualization Samuel Jayeola
Portfolio of designs and Visualization Samuel Jayeola
 
Black and Red Modern Guess The Movie Animated Game Presentation(1).pptx
Black and Red Modern Guess The Movie Animated Game Presentation(1).pptxBlack and Red Modern Guess The Movie Animated Game Presentation(1).pptx
Black and Red Modern Guess The Movie Animated Game Presentation(1).pptx
 
Apparel Portfolio draft: Cayden Ingman |
Apparel Portfolio draft: Cayden Ingman |Apparel Portfolio draft: Cayden Ingman |
Apparel Portfolio draft: Cayden Ingman |
 
HTM Example Layouts Freedman Theatre.pdf
HTM Example Layouts Freedman Theatre.pdfHTM Example Layouts Freedman Theatre.pdf
HTM Example Layouts Freedman Theatre.pdf
 
Preposition for grade 12th Vietnamese student
Preposition for grade 12th Vietnamese studentPreposition for grade 12th Vietnamese student
Preposition for grade 12th Vietnamese student
 
Mother Courage and Her Children Layouts.pdf
Mother Courage and Her Children Layouts.pdfMother Courage and Her Children Layouts.pdf
Mother Courage and Her Children Layouts.pdf
 
Spoleto Festival23 Hang and Cable Layouts.pdf
Spoleto Festival23 Hang and Cable Layouts.pdfSpoleto Festival23 Hang and Cable Layouts.pdf
Spoleto Festival23 Hang and Cable Layouts.pdf
 
Before and After Wheelchair Accessible Whole Home Remodel.pptx
Before and After Wheelchair Accessible Whole Home Remodel.pptxBefore and After Wheelchair Accessible Whole Home Remodel.pptx
Before and After Wheelchair Accessible Whole Home Remodel.pptx
 
December 2023 Issue - Fnewsmagazine SAIC
December 2023 Issue - Fnewsmagazine SAICDecember 2023 Issue - Fnewsmagazine SAIC
December 2023 Issue - Fnewsmagazine SAIC
 
Bring Your Office Interiors Back to Life The Enchantment of Personalized Wall...
Bring Your Office Interiors Back to Life The Enchantment of Personalized Wall...Bring Your Office Interiors Back to Life The Enchantment of Personalized Wall...
Bring Your Office Interiors Back to Life The Enchantment of Personalized Wall...
 
the bloomberg office headquarters in London.pptx
the bloomberg office headquarters in London.pptxthe bloomberg office headquarters in London.pptx
the bloomberg office headquarters in London.pptx
 
Studio Surfaced - Textile Design Studio based out of Delhi NCR
Studio Surfaced - Textile Design Studio based out of Delhi NCRStudio Surfaced - Textile Design Studio based out of Delhi NCR
Studio Surfaced - Textile Design Studio based out of Delhi NCR
 
Carpentry 7-8 explorartory (Week 3).pptx
Carpentry 7-8 explorartory (Week 3).pptxCarpentry 7-8 explorartory (Week 3).pptx
Carpentry 7-8 explorartory (Week 3).pptx
 
homescreen revamp homescreen revamphomescreen revamp
homescreen revamp homescreen revamphomescreen revamphomescreen revamp homescreen revamphomescreen revamp
homescreen revamp homescreen revamphomescreen revamp
 
Maximize Your Brand Impact with a Box Truck Wrap Design
Maximize Your Brand Impact with a Box Truck Wrap DesignMaximize Your Brand Impact with a Box Truck Wrap Design
Maximize Your Brand Impact with a Box Truck Wrap Design
 

Html5 ux london

  • 1. PROTOTYPING with TODD ZAKI WARFEL / UXLONDON /#HTML5
  • 4. Guiding Principles The Best Tool is the one you know
  • 6. HTMl as a prototyping tool Pros and Cons
  • 7. About that code thing Production vs. Non-production
  • 9. HTML Doctypes <!DOCTYPE  html  PUBLIC  "-­‐//W3C//DTD  XHTML  1.1//EN"   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <!DOCTYPE  html  PUBLIC  "-­‐//W3C//DTD  XHTML  1.0  Strict//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-­‐strict.dtd"> <!DOCTYPE  html  PUBLIC  "-­‐//W3C//DTD  HTML  4.01  Transitional//EN"      "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE  html  PUBLIC  "-­‐//W3C//DTD  XHTML  1.0  Frameset//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-­‐frameset.dtd"> <!DOCTYPE  html  PUBLIC  "-­‐//W3C//DTD  HTML  4.01  Strict//EN"      "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE  html  PUBLIC  "-­‐//W3C//DTD  HTML  4.01  Transitional//EN"      "http://www.w3.org/TR/html4/loose.dtd">
  • 11. HTML Tags HTML5 Tags <div> <article> <p> <aside> <dl>,  <dt>,  <dd> <section> <ol>,  <ul>,  <li> <header>,  <hgroup> <fieldset> <nav> <input> <footer> <datalist> <progress> <time>
  • 12. HTML helps you think about the Organization / Structure DESIGN
  • 13. html page structure A typical HTML page will div  id=header use divs with IDs and Classes to create the div  id=nav structure. div  id=content div  id=   sidebar div  id=footer
  • 14. HTML5 page structure HTML5 gives semantic meaning to these structures, header which previously required IDs and Classes. section/article aside footer
  • 15. Pro tip: Update your reset.css article,  aside,  footer,  header,   hgroup,  nav,  section   {display:block;  margin:0;  padding: 0;  border:0;  font-­‐weight:inherit;   font-­‐style:inherit;  font-­‐size: 100%;  font-­‐family:inherit;   vertical-­‐align:baseline;  list-­‐ style:none;  outline:none}
  • 16. Pro tip: Update your reset.css article,  aside,  footer,  header,   hgroup,  nav,  section   {display:block;  margin:0;  padding: 0;  border:0;  font-­‐weight:inherit;   font-­‐style:inherit;  font-­‐size: 100%;  font-­‐family:inherit;   vertical-­‐align:baseline;  list-­‐ style:none;  outline:none}
  • 17. html5 Recursiveness HTML5 allows for multiple header sections and articles within a single page. Each section/ nav article can have its own header, footer, aside and section aside nav. header article footer footer
  • 18. html5 Recursiveness HTML5 allows for multiple header sections and articles within a single page. Each section/ nav article can have its own header, footer, aside and section aside nav. header article footer footer
  • 19. html5 Recursiveness HTML5 allows for multiple header sections and articles within a single page. Each section/ nav article can have its own header, footer, aside and section aside nav. header article footer footer
  • 20. What about the problem child? IE needs a little help from our friend JavaScript. Modernizer/HTML5shiv to the rescue. http://modernizr.com http:// html5shiv.googlecode.co m/svn/trunk/html5.js
  • 21. Pro tip: Smack IE Into Shape <!DOCTYPE  html> <html> <head> <!-­‐-­‐[if  lt  IE  9]> <script  src="http://html5shiv.googlecode.com/svn/ trunk/html5.js"  type="text/javascript"></script> <![endif]-­‐-­‐> </head>
  • 25. Pro tip: HTML5 Search Input <form>    <input  type="search"  name="q"   placeholder="Search"  autofocus>    <input  type="submit"  value="Search"> </form>
  • 26. HTML5 Registration Form <form>    <input  name="Full  Name"   placeholder="Enter  your  full  name"   autofocus  required>    <input  type="email"  name="Email"   placeholder="Enter  your  email  address"   required>    <input  type="url"  name="URL"   placeholder="What’s  your  website   address?">    <input  type="submit"  value="Register"> </form>
  • 28. Gettin’ Sexy with CSS3 It’s the New Photoshop
  • 29. .btn-­‐fancy  {} Fancy Button
  • 30. Border Radius border-­‐radius:6px;  -­‐moz-­‐border-­‐radius: 6px;  -­‐webkit-­‐border-­‐radius:6px; Fancy Button
  • 31. Box Shadow -­‐moz-­‐box-­‐shadow:  4px  4px  8px  #a2a2a2;   -­‐webkit-­‐box-­‐shadow:  4px  4px  8px  #a2a2a2; box-­‐shadow:  4px  4px  8px  #a2a2a2;   Fancy Button
  • 32. TExt Shadow text-­‐shadow:  1px  1px  0  #d2572b;} Fancy Button
  • 33. Background Gradient background:-­‐webkit-­‐gradient(linear,  0%   0%,  0%  100%,  from(#eb9972),  color-­‐stop (0.55,  #e67646),  to(#d2572b));   background:-­‐moz-­‐linear-­‐gradient(center   top,  #eb9972,  #e67646  55%,  #d2572b); Fancy Button
  • 34. Anatomy of a CSS3 Button .btn-­‐primary  {padding:  .5em  .9em;  background:   #e67646;  background:-­‐webkit-­‐gradient(linear,  0%   0%,  0%  100%,  from(#eb9972),  color-­‐stop(0.55,   #e67646),  to(#d2572b));  background:-­‐moz-­‐linear-­‐ gradient(center  top,  #eb9972,  #e67646  55%,   #d2572b);  -­‐moz-­‐border-­‐radius:6px;  -­‐webkit-­‐ border-­‐radius:6px;  border-­‐radius:6px;  border:1px   solid  #bc6647;  -­‐moz-­‐box-­‐shadow:0  0  0;  -­‐webkit-­‐ box-­‐shadow:0  0  0;  font-­‐size:  1.375em;  font-­‐ weight:  500;  color:  #fff;  text-­‐shadow:  1px  1px  0   #d2572b;}
  • 35. Anatomy of a CSS3 Button .btn-­‐primary  {padding:  .5em  .9em;  background:   #e67646;  background:-­‐webkit-­‐gradient(linear,  0%   0%,  0%  100%,  from(#eb9972),  color-­‐stop(0.55,   #e67646),  to(#d2572b));  background:-­‐moz-­‐linear-­‐ gradient(center  top,  #eb9972,  #e67646  55%,   #d2572b);  -­‐moz-­‐border-­‐radius:6px;  -­‐webkit-­‐ border-­‐radius:6px;  border-­‐radius:6px;  border:1px   solid  #bc6647;  -­‐moz-­‐box-­‐shadow:0  0  0;  -­‐webkit-­‐ box-­‐shadow:0  0  0;  font-­‐size:  1.375em;  font-­‐ weight:  500;  color:  #fff;  text-­‐shadow:  1px  1px  0   #d2572b;}
  • 36. Anatomy of a CSS3 Button .btn-­‐primary  {padding:  .5em  .9em;  background:   #e67646;  background:-­‐webkit-­‐gradient(linear,  0%   0%,  0%  100%,  from(#eb9972),  color-­‐stop(0.55,   #e67646),  to(#d2572b));  background:-­‐moz-­‐linear-­‐ gradient(center  top,  #eb9972,  #e67646  55%,   #d2572b);  -­‐moz-­‐border-­‐radius:6px;  -­‐webkit-­‐ border-­‐radius:6px;  border-­‐radius:6px;  border:1px   solid  #bc6647;  -­‐moz-­‐box-­‐shadow:0  0  0;  -­‐webkit-­‐ box-­‐shadow:0  0  0;  font-­‐size:  1.375em;  font-­‐ weight:  500;  color:  #fff;  text-­‐shadow:  1px  1px  0   #d2572b;}
  • 37. Anatomy of a CSS3 Button .btn-­‐primary  {padding:  .5em  .9em;  background:   #e67646;  background:-­‐webkit-­‐gradient(linear,  0%   0%,  0%  100%,  from(#eb9972),  color-­‐stop(0.55,   #e67646),  to(#d2572b));  background:-­‐moz-­‐linear-­‐ gradient(center  top,  #eb9972,  #e67646  55%,   #d2572b);  -­‐moz-­‐border-­‐radius:6px;  -­‐webkit-­‐ border-­‐radius:6px;  border-­‐radius:6px;  border:1px   solid  #bc6647;  -­‐moz-­‐box-­‐shadow:0  0  0;  -­‐webkit-­‐ box-­‐shadow:0  0  0;  font-­‐size:  1.375em;  font-­‐ weight:  500;  color:  #fff;  text-­‐shadow:  1px  1px  0   #d2572b;}
  • 38. CSS3 RGBA and Opacity rgba  (238,88,0,1.0); #d2572b;  opacity:1.0; rgba  (238,88,0,0.5); #d2572b;  opacity:0.5;
  • 40. Hit me with some jQuery!
  • 41. Simple JavaScript Function $('#PostMessage').click(function() { $('tr.new-comment').fadeIn(); return false; });
  • 42. Double Time $('#PostMessage').click(function() { $('#CommentForm').hide(); $('tr.new-comment').fadeIn(); return false; });
  • 43. Resources HTML5 Spec http://www.w3.org/TR/html5/   CSS3 Spec http://www.w3.org/Style/CSS/current-­‐work.en.html   HTML5SHIV http://html5shiv.googlecode.com/svn/trunk/html5.js Modernizer http://modernizr.com/   Dive Into HTML5 http://diveintohtml5.org/ Reframer http://reframerapp.com