SlideShare a Scribd company logo
1 of 169
hi
These are the slides I used for a
three hour presentation/workshop
about HTML5 and other modern
techniques that can be used to
build web apps.
HTML5 for Web Designers
LET’S CONNECT


• http://www.linkedin.com/in/jorishens
• @goodbytes on Twitter
• http://www.goodbytes.be
THE 10 YEAR
TECH CYCLE
1960s
HIPPIES & MAINFRAMES
source: oldhippie.com
1970s
MINI COMPUTING
source: computerhistory.org
1980s
PERSONAL COMPUTING
image credit: couldn’t verify
1990s
DESKTOP INTERNET COMPUTING
1991: HTML
1994: HTML 2
1996: CSS1 + Javascript
1997: HTML4
1998: CSS 2
2000: XHTML 1
DESKTOPS
 800px * 600px
WEB DESIGN
  IN 1997
A.K.A. MY FIRST WEBSITE
LIFE WAS GREAT!
  no spam, no facebook, ICQ
  and 800px of safe canvas!
<TABLES>
<font color=”red”>
        yuk
      </font>
CSS !
HTML5 for Web Designers
2002: Tableless Web Design




  <TABLES>
2005




AJAX
1 - click on link


         2 - AJAX call to
                like.php
server
         3 - php updates
              the db and
                responds

           4 - js catches
           response and
              updates UI
NO PAGE
REFRESH
WEB DESIGN
UNTIL ... 2007
HTML5 for Web Designers
http://www.flickr.com/photos/30713600@N00/4143454588/
NEW
POSSIBILITIES
MOBILE ACCESS
HTML5 for Web Designers
GPS+COMPASS
HTML5 for Web Designers
HTML5 for Web Designers
ACCELEROMETER
 + GYROSCOPE
ACCELEROMETER
 + GYROSCOPE
CAMERA
CAMERA
OFFLINE DATA
HTML5 for Web Designers
GOING NATIVE?
ADVANTAGES
OF GOING NATIVE
HTML5 for Web Designers
★ APP STORE REVENUE
★ APP STORE REVENUE
★ HARDWARE ACCESS
DISADVANTAGES
OF GOING NATIVE
HTML5 for Web Designers
HTML5 for Web Designers
HTML5 for Web Designers
HTML5 for Web Designers
HTML5 for Web Designers
APP APPROVAL
TAKES FOREVER
MORE COMPLEX
HTML5
AND RELATED AWESOMENESS
HTML5 for Web Designers
READY IN
2022
2022
= “require at least two
 browsers to completely
pass [HTML 5 test suites]”
JUNE 2011
  CSS2.1 is now a
W3C recommendation
  (after 13 years)
NEW SEMANTIC
    TAGS
<!DOCTYPE html>
source:(h*p://www.smashingmagazine.com/2009/07/16/html5>and>the>future>of>the>web/
HTML5 for Web Designers
HTML5 for Web Designers
HTML5 for Web Designers
OLD BROWSERS?
http://www.impressivewebs.com/difference-block-inline-css/
PROBLEM
I don’t know <header>, <footer>, ...
         I’ll just make it inline
SOLUTION
http://meyerweb.com/eric/tools/css/reset/
IE6, 7, 8


OLD BROWSERS?
HTML5 for Web Designers
GEOLOCATION?
HTML5 for Web Designers
HTML5 for Web Designers
HTML5 for Web Designers
HTML5 for Web Designers
OFFLINE DATA?
HTML5 for Web Designers
FORMS
HTML5 for Web Designers
<VIDEO>

                   Flash
<video width="400" height="360" src="vid.mp4">
<AUDIO>
<CANVAS>
http://www.cuttherope.ie/
HTML5 for Web Designers
http://chrome.angrybirds.com
HTML5 for Web Designers
http://chalk.37signals.com
HTML5 for Web Designers
<CANVAS>+<VIDEO>
     = lolcatz




http://html5demos.com/video-canvas
SPEECH?




http://www.goodbytes.be/presentations/pica/speech.html
SPEECH?




http://www.goodbytes.be/presentations/pica/speech.html
DRAG&DROP


http://html5demos.com/drag
WEB SOCKETS
“REAL TIME”
    vs
 “POLLING”
GOT CANDY?

   http://www.flickr.com/photos/53552950@N00/2379078919
HTML5 for Web Designers
★ GOOGLE DOCS
★ GOOGLE DOCS
★ LIVE CHAT
★ GOOGLE DOCS
★ LIVE CHAT
★ GAMES
★ GOOGLE DOCS
★ LIVE CHAT
★ GAMES
★ ...
HTML5 for Web Designers
HTML5 for Web Designers
HTML5 for Web Designers
HTML5 for Web Designers
CSS3
AND OTHER HIPSTER TECHNIQUES
PHOTOSHOP
PHOTOSHOP
SPEC NOT FINAL YET


        -moz-
       -webkit-
          -o-
         -ms-
HTML5 for Web Designers
DO IT FUTURE PROOF
OR GO PREFIX FREE
border-image
SHAPES
h*p://www.css3shapes.com/
HTML5 for Web Designers
SHAPES




http://nicolasgallagher.com/pure-css-social-media-icons/
h*p://desandro.com/arCcles/opera>logo>css/
h*p://cordobo.com/1630>internet>explorer>pure>css>logo/
h*p://graphicpeel.com/cssiosicons
h*p://www.lensco.be/files/clocks/
CSS
ANIMATIONS
CSS ANIMATIONS




   http://leaverou.github.com/animatable/
CSS
GRADIENTS
CSS GRADIENTS
                 Complex :(




               Generators :)
http://gradients.glrzad.com/
http://www.westciv.com/tools/gradients/
TYPOGRAPHY
@font-face
• fontsquirrel.com, google fonts, typekit, ...
ICON FONTS
.icon:before
{content:'e048';}




  http://somerandomdude.com/work/iconic/
SVG
SVG
• h*p://webtypographyforthelonely.com/
SVG
• Scalable Vector Graphics
• not new
• resolution-independant
• XML
• http://www.w3schools.com/svg/default.asp
 <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <circle cx="100" cy="50" r="40" stroke="black"
   stroke-width="2" fill="red" />
 </svg>
SVG((Scalable(Vector(Graphics)




h*p://www.drawasCckman.com/   h*p://www.w3schools.com/svg/default.asp
HTML5 for Web Designers
EXAMPLES
http://pattern.dk/sun/
http://pattern.dk/sun/
http://pattern.dk/sun/
LET’S BUILD
A SIMPLE APP
HTML5 for Web Designers
GET LOCATION
GET TOILETS
ANIMATE LOGO
GET CLOSEST RESULT
SHOW RESULT
RESTART ON LOGO CLICK
ALREADY DONE
ALREADY DONE
APPLE SPECIFIC
  SETTINGS
APP ICONS
STARTUP
 SCREEN
STARTUP
 SCREEN
GO FULLSCREEN
HTML/CSS/JS
   ONLY
WORKS ON
*ANY* DEVICE
GEOLOCATION
if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(success, error);
} else {
  //error
}

function success(position)
{
//position.coords.latitude
//position.coords.longitude
}
OPEN DATA API
HTML5 for Web Designers
CSS3 TRANSITIONS +
   ANIMATIONS
FRAMEWORKS
FRAMEWORKS
FRAMEWORKS
FRAMEWORKS
FRAMEWORKS
WHERE DO I GO
 FROM HERE?
EXPERIMENT
Chrome Experiments
• h*p://www.chromeexperiments.com/arcadefire/
http://ro.me
Q&A
HTML5

• new semantic tags
• JavaScript API’s
• already here
• more than just html
CSS3
• less Photoshop
• scalable
• lightweight (mobile!)
• design in the browser
• watch out for vendor prefixes
SOURCES

•   http://bit.ly/5BqHuj

•   http://www.pakzilla.com/2012/01/01/a-reference-to-html-5-tags/

•   http://designshack.co.uk/articles/css/10-amazing-examples-of-innovative-css3-animation

•   http://www.webdesignerwall.com/trends/47-amazing-css3-animation-demos/

•   http://www.1stwebdesigner.com/development/50-awesome-css3-animations/
SOURCES / CSS3

•   http://www.css3.info

•   http://line25.com/tutorials/create-a-letterpress-effect-with-css-text-shadow

•   http://www.smashingmagazine.com/2009/06/15/take-your-design-to-the-next-level-with-
    css3/

•   http://designshack.co.uk/articles/css/10-amazing-examples-of-innovative-css3-animation

•   http://www.webdesignerwall.com/trends/47-amazing-css3-animation-demos/

•   http://www.1stwebdesigner.com/development/50-awesome-css3-animations/
SOURCES /
         MOBILE APPS

•   http://taylor.fausak.me/2012/03/27/ios-web-app-icons-and-startup-images/

•   http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/
    SafariWebContent/Introduction/Introduction.html#//apple_ref/doc/uid/TP40002051-CH1-
    SW1

•   http://cheeaun.com/blog/2012/03/how-i-built-hacker-news-mobile-web-app

•   http://lanyrd.com/2011/bd11/sccwh/

•   http://net.tutsplus.com/tutorials/javascript-ajax/start-using-html5-websockets-today/

More Related Content

What's hot

Responsive Design
Responsive DesignResponsive Design
Responsive DesignSara Cannon
 
Building desktop applications with web technologies - ELECTRON the easy way
Building desktop applications with web technologies - ELECTRON the easy wayBuilding desktop applications with web technologies - ELECTRON the easy way
Building desktop applications with web technologies - ELECTRON the easy waystefanjudis
 
Augmented Reality (AR) - The Future of Mobile Applications?
Augmented Reality (AR) - The Future of Mobile Applications? Augmented Reality (AR) - The Future of Mobile Applications?
Augmented Reality (AR) - The Future of Mobile Applications? Carin Campanario
 
CSS Tricks for WordPress - WordCamp Phoenix
CSS Tricks for WordPress - WordCamp PhoenixCSS Tricks for WordPress - WordCamp Phoenix
CSS Tricks for WordPress - WordCamp PhoenixSara Cannon
 
Standards.Next: Canvas
Standards.Next: CanvasStandards.Next: Canvas
Standards.Next: CanvasMartin Kliehm
 
Virtually Anyone
Virtually AnyoneVirtually Anyone
Virtually AnyoneTony Parisi
 
This Old Website: : Applying HTML5, CSS3, and Responsive Design to An Existin...
This Old Website: : Applying HTML5, CSS3, and Responsive Design to An Existin...This Old Website: : Applying HTML5, CSS3, and Responsive Design to An Existin...
This Old Website: : Applying HTML5, CSS3, and Responsive Design to An Existin...Wolf Loescher
 
Inkscape for web and UI mockups
Inkscape for web and UI mockupsInkscape for web and UI mockups
Inkscape for web and UI mockupsDonna Benjamin
 
Inkscape: Mockup that site (BADcamp edition)
Inkscape: Mockup that site (BADcamp edition)Inkscape: Mockup that site (BADcamp edition)
Inkscape: Mockup that site (BADcamp edition)Donna Benjamin
 
Week5 BA
Week5 BAWeek5 BA
Week5 BACMoz
 
Designer vs Developer: BE THE UNICORN
Designer vs Developer: BE THE UNICORNDesigner vs Developer: BE THE UNICORN
Designer vs Developer: BE THE UNICORNSara Cannon
 
Part 2: Intermediate Designing for Multiple Devices - GA London, 31 Jul 2013
Part 2: Intermediate Designing for Multiple Devices - GA London, 31 Jul 2013Part 2: Intermediate Designing for Multiple Devices - GA London, 31 Jul 2013
Part 2: Intermediate Designing for Multiple Devices - GA London, 31 Jul 2013Anna Dahlström
 
Accessibility in Canvas 3D
Accessibility in Canvas 3DAccessibility in Canvas 3D
Accessibility in Canvas 3DMartin Kliehm
 
WebGL, WebVR and the Metaverse
WebGL, WebVR and the MetaverseWebGL, WebVR and the Metaverse
WebGL, WebVR and the MetaverseTony Parisi
 
Responsive Web Design Process #HOWidc
Responsive Web Design Process #HOWidcResponsive Web Design Process #HOWidc
Responsive Web Design Process #HOWidcSteve Fisher
 
Responsive Design Workflow
Responsive Design WorkflowResponsive Design Workflow
Responsive Design WorkflowIntergen
 
Essential html tweaks for accessible themes
Essential html tweaks for accessible themesEssential html tweaks for accessible themes
Essential html tweaks for accessible themesMartin Stehle
 
Inkscape: Mockup that site
Inkscape: Mockup that siteInkscape: Mockup that site
Inkscape: Mockup that siteDonna Benjamin
 
React Storybook, Atomic Design, and ITCSS
React Storybook, Atomic Design, and ITCSSReact Storybook, Atomic Design, and ITCSS
React Storybook, Atomic Design, and ITCSSTrevor Pierce
 
Adm web 01 - html css - a-frame
Adm   web 01 - html  css - a-frameAdm   web 01 - html  css - a-frame
Adm web 01 - html css - a-frameMatthew_W00d
 

What's hot (20)

Responsive Design
Responsive DesignResponsive Design
Responsive Design
 
Building desktop applications with web technologies - ELECTRON the easy way
Building desktop applications with web technologies - ELECTRON the easy wayBuilding desktop applications with web technologies - ELECTRON the easy way
Building desktop applications with web technologies - ELECTRON the easy way
 
Augmented Reality (AR) - The Future of Mobile Applications?
Augmented Reality (AR) - The Future of Mobile Applications? Augmented Reality (AR) - The Future of Mobile Applications?
Augmented Reality (AR) - The Future of Mobile Applications?
 
CSS Tricks for WordPress - WordCamp Phoenix
CSS Tricks for WordPress - WordCamp PhoenixCSS Tricks for WordPress - WordCamp Phoenix
CSS Tricks for WordPress - WordCamp Phoenix
 
Standards.Next: Canvas
Standards.Next: CanvasStandards.Next: Canvas
Standards.Next: Canvas
 
Virtually Anyone
Virtually AnyoneVirtually Anyone
Virtually Anyone
 
This Old Website: : Applying HTML5, CSS3, and Responsive Design to An Existin...
This Old Website: : Applying HTML5, CSS3, and Responsive Design to An Existin...This Old Website: : Applying HTML5, CSS3, and Responsive Design to An Existin...
This Old Website: : Applying HTML5, CSS3, and Responsive Design to An Existin...
 
Inkscape for web and UI mockups
Inkscape for web and UI mockupsInkscape for web and UI mockups
Inkscape for web and UI mockups
 
Inkscape: Mockup that site (BADcamp edition)
Inkscape: Mockup that site (BADcamp edition)Inkscape: Mockup that site (BADcamp edition)
Inkscape: Mockup that site (BADcamp edition)
 
Week5 BA
Week5 BAWeek5 BA
Week5 BA
 
Designer vs Developer: BE THE UNICORN
Designer vs Developer: BE THE UNICORNDesigner vs Developer: BE THE UNICORN
Designer vs Developer: BE THE UNICORN
 
Part 2: Intermediate Designing for Multiple Devices - GA London, 31 Jul 2013
Part 2: Intermediate Designing for Multiple Devices - GA London, 31 Jul 2013Part 2: Intermediate Designing for Multiple Devices - GA London, 31 Jul 2013
Part 2: Intermediate Designing for Multiple Devices - GA London, 31 Jul 2013
 
Accessibility in Canvas 3D
Accessibility in Canvas 3DAccessibility in Canvas 3D
Accessibility in Canvas 3D
 
WebGL, WebVR and the Metaverse
WebGL, WebVR and the MetaverseWebGL, WebVR and the Metaverse
WebGL, WebVR and the Metaverse
 
Responsive Web Design Process #HOWidc
Responsive Web Design Process #HOWidcResponsive Web Design Process #HOWidc
Responsive Web Design Process #HOWidc
 
Responsive Design Workflow
Responsive Design WorkflowResponsive Design Workflow
Responsive Design Workflow
 
Essential html tweaks for accessible themes
Essential html tweaks for accessible themesEssential html tweaks for accessible themes
Essential html tweaks for accessible themes
 
Inkscape: Mockup that site
Inkscape: Mockup that siteInkscape: Mockup that site
Inkscape: Mockup that site
 
React Storybook, Atomic Design, and ITCSS
React Storybook, Atomic Design, and ITCSSReact Storybook, Atomic Design, and ITCSS
React Storybook, Atomic Design, and ITCSS
 
Adm web 01 - html css - a-frame
Adm   web 01 - html  css - a-frameAdm   web 01 - html  css - a-frame
Adm web 01 - html css - a-frame
 

Viewers also liked

Designing for web & beyond – don’t get caught with your browser down finalclean
Designing for web & beyond – don’t get caught with your browser down finalcleanDesigning for web & beyond – don’t get caught with your browser down finalclean
Designing for web & beyond – don’t get caught with your browser down finalcleanDuaneClare
 
Creative collaboration in online computer-supported collaborative learning.
Creative collaboration in online computer-supported collaborative learning.Creative collaboration in online computer-supported collaborative learning.
Creative collaboration in online computer-supported collaborative learning.Margarida Romero
 
Conceptualizing collaboration in the context of computer-supported collaborat...
Conceptualizing collaboration in the context of computer-supported collaborat...Conceptualizing collaboration in the context of computer-supported collaborat...
Conceptualizing collaboration in the context of computer-supported collaborat...Aleksandra Lazareva
 
Average case Analysis of Quicksort
Average case Analysis of QuicksortAverage case Analysis of Quicksort
Average case Analysis of QuicksortRajendran
 
Computer-Supported Collaborative Learning with Mind-Maps
Computer-Supported Collaborative Learning with Mind-MapsComputer-Supported Collaborative Learning with Mind-Maps
Computer-Supported Collaborative Learning with Mind-MapsGeorgiy Gerkushenko
 
Computer-Supported Collaborative Learning (CSCL), Virtual Math Teams (VMT) an...
Computer-Supported Collaborative Learning (CSCL), Virtual Math Teams (VMT) an...Computer-Supported Collaborative Learning (CSCL), Virtual Math Teams (VMT) an...
Computer-Supported Collaborative Learning (CSCL), Virtual Math Teams (VMT) an...Gerry Stahl
 
Blended learning in Software Engineering Education: the Application Lifecycle...
Blended learning in Software Engineering Education: the Application Lifecycle...Blended learning in Software Engineering Education: the Application Lifecycle...
Blended learning in Software Engineering Education: the Application Lifecycle...Alexey Neznanov
 
Quick sort Algorithm Discussion And Analysis
Quick sort Algorithm Discussion And AnalysisQuick sort Algorithm Discussion And Analysis
Quick sort Algorithm Discussion And AnalysisSNJ Chaudhary
 
Divide and conquer - Quick sort
Divide and conquer - Quick sortDivide and conquer - Quick sort
Divide and conquer - Quick sortMadhu Bala
 

Viewers also liked (12)

Designing for web & beyond – don’t get caught with your browser down finalclean
Designing for web & beyond – don’t get caught with your browser down finalcleanDesigning for web & beyond – don’t get caught with your browser down finalclean
Designing for web & beyond – don’t get caught with your browser down finalclean
 
Creative collaboration in online computer-supported collaborative learning.
Creative collaboration in online computer-supported collaborative learning.Creative collaboration in online computer-supported collaborative learning.
Creative collaboration in online computer-supported collaborative learning.
 
Conceptualizing collaboration in the context of computer-supported collaborat...
Conceptualizing collaboration in the context of computer-supported collaborat...Conceptualizing collaboration in the context of computer-supported collaborat...
Conceptualizing collaboration in the context of computer-supported collaborat...
 
Average case Analysis of Quicksort
Average case Analysis of QuicksortAverage case Analysis of Quicksort
Average case Analysis of Quicksort
 
Computer-Supported Collaborative Learning with Mind-Maps
Computer-Supported Collaborative Learning with Mind-MapsComputer-Supported Collaborative Learning with Mind-Maps
Computer-Supported Collaborative Learning with Mind-Maps
 
Computer-Supported Collaborative Learning (CSCL), Virtual Math Teams (VMT) an...
Computer-Supported Collaborative Learning (CSCL), Virtual Math Teams (VMT) an...Computer-Supported Collaborative Learning (CSCL), Virtual Math Teams (VMT) an...
Computer-Supported Collaborative Learning (CSCL), Virtual Math Teams (VMT) an...
 
Blended learning in Software Engineering Education: the Application Lifecycle...
Blended learning in Software Engineering Education: the Application Lifecycle...Blended learning in Software Engineering Education: the Application Lifecycle...
Blended learning in Software Engineering Education: the Application Lifecycle...
 
Agile Software Development - Agile and Scrum Intro
Agile Software Development - Agile and Scrum IntroAgile Software Development - Agile and Scrum Intro
Agile Software Development - Agile and Scrum Intro
 
Quicksort
QuicksortQuicksort
Quicksort
 
Quick sort Algorithm Discussion And Analysis
Quick sort Algorithm Discussion And AnalysisQuick sort Algorithm Discussion And Analysis
Quick sort Algorithm Discussion And Analysis
 
Divide and conquer - Quick sort
Divide and conquer - Quick sortDivide and conquer - Quick sort
Divide and conquer - Quick sort
 
Quick Sort
Quick SortQuick Sort
Quick Sort
 

Similar to HTML5 for Web Designers

CSS3: The Future is Now at DrupalCon San Francisco
CSS3: The Future is Now at DrupalCon San FranciscoCSS3: The Future is Now at DrupalCon San Francisco
CSS3: The Future is Now at DrupalCon San FranciscoJen Simmons
 
Mobile First Responsive Design
Mobile First Responsive DesignMobile First Responsive Design
Mobile First Responsive DesignJason Grigsby
 
It's a Mod World - A Practical Guide to Rocking Modernizr
It's a Mod World - A Practical Guide to Rocking ModernizrIt's a Mod World - A Practical Guide to Rocking Modernizr
It's a Mod World - A Practical Guide to Rocking ModernizrMichael Enslow
 
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Sadaaki HIRAI
 
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
 
Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)Nicholas Zakas
 
[refreshpitt] Adaptive Images in Responsive Web Design
[refreshpitt] Adaptive Images in Responsive Web Design[refreshpitt] Adaptive Images in Responsive Web Design
[refreshpitt] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
Developing web applications in 2010
Developing web applications in 2010Developing web applications in 2010
Developing web applications in 2010Ignacio Coloma
 
Fisl 11 - Dicas de Desenvolvimento Web com Ruby
Fisl 11 - Dicas de Desenvolvimento Web com RubyFisl 11 - Dicas de Desenvolvimento Web com Ruby
Fisl 11 - Dicas de Desenvolvimento Web com RubyFabio Akita
 
How to Develop Cross-Platform Apps
How to Develop Cross-Platform AppsHow to Develop Cross-Platform Apps
How to Develop Cross-Platform AppsAndrea Tino
 
Angular js mobile jsday 2014 - Verona 14 may
Angular js mobile   jsday 2014 - Verona 14 mayAngular js mobile   jsday 2014 - Verona 14 may
Angular js mobile jsday 2014 - Verona 14 mayLuciano Amodio
 
Consegi 2010 - Dicas de Desenvolvimento Web com Ruby
Consegi 2010 - Dicas de Desenvolvimento Web com RubyConsegi 2010 - Dicas de Desenvolvimento Web com Ruby
Consegi 2010 - Dicas de Desenvolvimento Web com RubyFabio Akita
 
[drupalcampatx] Adaptive Images in Responsive Web Design
[drupalcampatx] Adaptive Images in Responsive Web Design[drupalcampatx] Adaptive Images in Responsive Web Design
[drupalcampatx] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
Now you see me... Adaptive Web Design and Development
Now you see me... Adaptive Web Design and DevelopmentNow you see me... Adaptive Web Design and Development
Now you see me... Adaptive Web Design and DevelopmentJonas Päckos
 

Similar to HTML5 for Web Designers (20)

CSS3: The Future is Now at DrupalCon San Francisco
CSS3: The Future is Now at DrupalCon San FranciscoCSS3: The Future is Now at DrupalCon San Francisco
CSS3: The Future is Now at DrupalCon San Francisco
 
Echo HTML5
Echo HTML5Echo HTML5
Echo HTML5
 
Mobile First Responsive Design
Mobile First Responsive DesignMobile First Responsive Design
Mobile First Responsive Design
 
It's a Mod World - A Practical Guide to Rocking Modernizr
It's a Mod World - A Practical Guide to Rocking ModernizrIt's a Mod World - A Practical Guide to Rocking Modernizr
It's a Mod World - A Practical Guide to Rocking Modernizr
 
Introduction to html5
Introduction to html5Introduction to html5
Introduction to html5
 
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
 
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)
 
3d web
3d web3d web
3d web
 
Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)
 
[refreshpitt] Adaptive Images in Responsive Web Design
[refreshpitt] Adaptive Images in Responsive Web Design[refreshpitt] Adaptive Images in Responsive Web Design
[refreshpitt] Adaptive Images in Responsive Web Design
 
Developing web applications in 2010
Developing web applications in 2010Developing web applications in 2010
Developing web applications in 2010
 
Mobile Web Talk
Mobile Web TalkMobile Web Talk
Mobile Web Talk
 
Fisl 11 - Dicas de Desenvolvimento Web com Ruby
Fisl 11 - Dicas de Desenvolvimento Web com RubyFisl 11 - Dicas de Desenvolvimento Web com Ruby
Fisl 11 - Dicas de Desenvolvimento Web com Ruby
 
Death of a Themer
Death of a ThemerDeath of a Themer
Death of a Themer
 
How to Develop Cross-Platform Apps
How to Develop Cross-Platform AppsHow to Develop Cross-Platform Apps
How to Develop Cross-Platform Apps
 
Angular js mobile jsday 2014 - Verona 14 may
Angular js mobile   jsday 2014 - Verona 14 mayAngular js mobile   jsday 2014 - Verona 14 may
Angular js mobile jsday 2014 - Verona 14 may
 
Html5 & less css
Html5 & less cssHtml5 & less css
Html5 & less css
 
Consegi 2010 - Dicas de Desenvolvimento Web com Ruby
Consegi 2010 - Dicas de Desenvolvimento Web com RubyConsegi 2010 - Dicas de Desenvolvimento Web com Ruby
Consegi 2010 - Dicas de Desenvolvimento Web com Ruby
 
[drupalcampatx] Adaptive Images in Responsive Web Design
[drupalcampatx] Adaptive Images in Responsive Web Design[drupalcampatx] Adaptive Images in Responsive Web Design
[drupalcampatx] Adaptive Images in Responsive Web Design
 
Now you see me... Adaptive Web Design and Development
Now you see me... Adaptive Web Design and DevelopmentNow you see me... Adaptive Web Design and Development
Now you see me... Adaptive Web Design and Development
 

Recently uploaded

Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 

Recently uploaded (20)

Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 

HTML5 for Web Designers