SlideShare a Scribd company logo
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
About that code thing
Production vs. Non-production
html vs. html5
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">
HTML5 Doctypes
<!DOCTYPE  HTML>
HTML Tags            HTML5 Tags
<div>                <article>

<p>                  <aside>

<dl>,  <dt>,  <dd>   <section>

<ol>,  <ul>,  <li>   <header>,  <hgroup>

<fieldset>           <nav>

<input>              <footer>

                     <datalist>

                     <progress>

                     <time>
HTML helps you think about the
Organization / Structure
                                 DESIGN
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
HTML5 page structure
HTML5 gives semantic
meaning to these structures,             header
which previously required
IDs and Classes.
                               section/article
                                                  aside




                                         footer
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}
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}
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
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
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
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
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>
Html5 ux london
Html5 ux london
HTML5 Input Types
date
date-­‐time
email
tel
range
search
time
url
Pro tip: HTML5 Search Input
<form>
    <input  type="search"  name="q"  
placeholder="Search"  autofocus>
    <input  type="submit"  value="Search">
</form>
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>
http://bit.ly/html5_mobile
         Email               URL
Gettin’ Sexy with CSS3
      It’s the New Photoshop
.btn-­‐fancy  {}




            Fancy Button
Border Radius
border-­‐radius:6px;  -­‐moz-­‐border-­‐radius:
6px;  -­‐webkit-­‐border-­‐radius:6px;




            Fancy Button
Box Shadow
-­‐moz-­‐box-­‐shadow:  4px  4px  8px  #a2a2a2;  
-­‐webkit-­‐box-­‐shadow:  4px  4px  8px  #a2a2a2;
box-­‐shadow:  4px  4px  8px  #a2a2a2;  




            Fancy Button
TExt Shadow
text-­‐shadow:  1px  1px  0  #d2572b;}




           Fancy Button
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
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;}
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;}
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;}
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;}
CSS3 RGBA and Opacity
rgba  (238,88,0,1.0);
#d2572b;  opacity:1.0;


rgba  (238,88,0,0.5);
#d2572b;  opacity:0.5;
Html5 ux london
Hit me with some jQuery!
Simple JavaScript Function

 $('#PostMessage').click(function() {

 
 $('tr.new-comment').fadeIn();

 
 return false;

 });
Double Time

 $('#PostMessage').click(function() {

 
 $('#CommentForm').hide();

 
 $('tr.new-comment').fadeIn();

 
 return false;

 });
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  
http://bit.ly/protobk




on The Twitters
@zakiwarfel

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
 
Front end full stack development module 1pptx
Front end full stack development module 1pptxFront end full stack development module 1pptx
Front end full stack development module 1pptxMaruthiPrasad96
 
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
 

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
 
Front end full stack development module 1pptx
Front end full stack development module 1pptxFront end full stack development module 1pptx
Front end full stack development module 1pptx
 
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
 

Recently uploaded

Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 

Recently uploaded (19)

Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 

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