• Save
HTML5 for Web Designers
Upcoming SlideShare
Loading in...5
×
 

HTML5 for Web Designers

on

  • 662 views

These are the slides I used for a workshop/presentation about HTML5 and related techniques to build web and mobile applications. The session was about half theoretical and half practical. The audience ...

These are the slides I used for a workshop/presentation about HTML5 and related techniques to build web and mobile applications. The session was about half theoretical and half practical. The audience consisted of students wanting to get up to speed with new HTML5/CSS3 related techniques in web development.

Statistics

Views

Total Views
662
Views on SlideShare
654
Embed Views
8

Actions

Likes
3
Downloads
0
Comments
0

3 Embeds 8

https://twitter.com 3
http://www.linkedin.com 3
https://www.linkedin.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

HTML5 for Web Designers HTML5 for Web Designers Presentation Transcript

  • hi
  • These are the slides I used for athree hour presentation/workshopabout HTML5 and other moderntechniques that can be used tobuild web apps.
  • LET’S CONNECT• http://www.linkedin.com/in/jorishens• @goodbytes on Twitter• http://www.goodbytes.be
  • THE 10 YEARTECH CYCLE
  • 1960sHIPPIES & MAINFRAMES
  • source: oldhippie.com
  • 1970sMINI COMPUTING
  • source: computerhistory.org
  • 1980sPERSONAL COMPUTING
  • image credit: couldn’t verify
  • 1990sDESKTOP INTERNET COMPUTING
  • 1991: HTML1994: HTML 21996: CSS1 + Javascript1997: HTML41998: CSS 22000: XHTML 1
  • DESKTOPS 800px * 600px
  • WEB DESIGN IN 1997A.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 !
  • 2002: Tableless Web Design <TABLES>
  • 2005AJAX
  • 1 - click on link 2 - AJAX call to like.phpserver 3 - php updates the db and responds 4 - js catches response and updates UI
  • NO PAGEREFRESH
  • WEB DESIGNUNTIL ... 2007
  • http://www.flickr.com/photos/30713600@N00/4143454588/
  • NEWPOSSIBILITIES
  • MOBILE ACCESS
  • GPS+COMPASS
  • ACCELEROMETER + GYROSCOPE
  • ACCELEROMETER + GYROSCOPE
  • CAMERA
  • CAMERA
  • OFFLINE DATA
  • GOING NATIVE?
  • ADVANTAGESOF GOING NATIVE
  • ★ APP STORE REVENUE
  • ★ APP STORE REVENUE★ HARDWARE ACCESS
  • DISADVANTAGESOF GOING NATIVE
  • APP APPROVALTAKES FOREVER
  • MORE COMPLEX
  • HTML5AND RELATED AWESOMENESS
  • READY IN
  • 2022
  • 2022
  • = “require at least two browsers to completelypass [HTML 5 test suites]”
  • JUNE 2011 CSS2.1 is now aW3C 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/
  • OLD BROWSERS?
  • http://www.impressivewebs.com/difference-block-inline-css/
  • PROBLEMI don’t know <header>, <footer>, ... I’ll just make it inline
  • SOLUTION
  • http://meyerweb.com/eric/tools/css/reset/
  • IE6, 7, 8OLD BROWSERS?
  • GEOLOCATION?
  • OFFLINE DATA?
  • FORMS
  • <VIDEO> Flash<video width="400" height="360" src="vid.mp4">
  • <AUDIO>
  • <CANVAS>
  • http://www.cuttherope.ie/
  • http://chrome.angrybirds.com
  • http://chalk.37signals.com
  • <CANVAS>+<VIDEO> = lolcatzhttp://html5demos.com/video-canvas
  • SPEECH?http://www.goodbytes.be/presentations/pica/speech.html
  • SPEECH?http://www.goodbytes.be/presentations/pica/speech.html
  • DRAG&DROPhttp://html5demos.com/drag
  • WEB SOCKETS
  • “REAL TIME” vs “POLLING”
  • GOT CANDY? http://www.flickr.com/photos/53552950@N00/2379078919
  • ★ GOOGLE DOCS
  • ★ GOOGLE DOCS★ LIVE CHAT
  • ★ GOOGLE DOCS★ LIVE CHAT★ GAMES
  • ★ GOOGLE DOCS★ LIVE CHAT★ GAMES★ ...
  • CSS3AND OTHER HIPSTER TECHNIQUES
  • PHOTOSHOP
  • PHOTOSHOP
  • SPEC NOT FINAL YET -moz- -webkit- -o- -ms-
  • DO IT FUTURE PROOF
  • OR GO PREFIX FREE
  • border-image
  • SHAPESh*p://www.css3shapes.com/
  • SHAPEShttp://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/
  • CSSANIMATIONS
  • CSS ANIMATIONS http://leaverou.github.com/animatable/
  • CSSGRADIENTS
  • 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
  • EXAMPLES
  • http://pattern.dk/sun/
  • http://pattern.dk/sun/
  • http://pattern.dk/sun/
  • LET’S BUILDA SIMPLE APP
  • GET LOCATIONGET TOILETSANIMATE LOGOGET CLOSEST RESULTSHOW RESULTRESTART 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
  • 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/