hi
These are the slides I used for athree hour presentation/workshopabout HTML5 and other moderntechniques that can be used t...
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  ...
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/too...
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="...
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(...
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...
SOURCES / CSS3•   http://www.css3.info•   http://line25.com/tutorials/create-a-letterpress-effect-with-css-text-shadow•   ...
SOURCES /         MOBILE APPS•   http://taylor.fausak.me/2012/03/27/ios-web-app-icons-and-startup-images/•   http://develo...
HTML5 for Web Designers
HTML5 for Web Designers
HTML5 for Web Designers
HTML5 for Web Designers
HTML5 for Web Designers
HTML5 for Web Designers
HTML5 for Web Designers
HTML5 for Web Designers
HTML5 for Web Designers
HTML5 for Web Designers
HTML5 for Web Designers
HTML5 for Web Designers
HTML5 for Web Designers
HTML5 for Web Designers
HTML5 for Web Designers
HTML5 for Web Designers
HTML5 for Web Designers
HTML5 for Web Designers
HTML5 for Web Designers
HTML5 for Web Designers
HTML5 for Web Designers
HTML5 for Web Designers
HTML5 for Web Designers
HTML5 for Web Designers
HTML5 for Web Designers
HTML5 for Web Designers
HTML5 for Web Designers
HTML5 for Web Designers
HTML5 for Web Designers
HTML5 for Web Designers
HTML5 for Web Designers
HTML5 for Web Designers
HTML5 for Web Designers
HTML5 for Web Designers
HTML5 for Web Designers
HTML5 for Web Designers
HTML5 for Web Designers
Upcoming SlideShare
Loading in...5
×

HTML5 for Web Designers

485

Published on

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.

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
485
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "HTML5 for Web Designers"

  1. 1. hi
  2. 2. These are the slides I used for athree hour presentation/workshopabout HTML5 and other moderntechniques that can be used tobuild web apps.
  3. 3. LET’S CONNECT• http://www.linkedin.com/in/jorishens• @goodbytes on Twitter• http://www.goodbytes.be
  4. 4. THE 10 YEARTECH CYCLE
  5. 5. 1960sHIPPIES & MAINFRAMES
  6. 6. source: oldhippie.com
  7. 7. 1970sMINI COMPUTING
  8. 8. source: computerhistory.org
  9. 9. 1980sPERSONAL COMPUTING
  10. 10. image credit: couldn’t verify
  11. 11. 1990sDESKTOP INTERNET COMPUTING
  12. 12. 1991: HTML1994: HTML 21996: CSS1 + Javascript1997: HTML41998: CSS 22000: XHTML 1
  13. 13. DESKTOPS 800px * 600px
  14. 14. WEB DESIGN IN 1997A.K.A. MY FIRST WEBSITE
  15. 15. LIFE WAS GREAT! no spam, no facebook, ICQ and 800px of safe canvas!
  16. 16. <TABLES>
  17. 17. <font color=”red”> yuk </font>
  18. 18. CSS !
  19. 19. 2002: Tableless Web Design <TABLES>
  20. 20. 2005AJAX
  21. 21. 1 - click on link 2 - AJAX call to like.phpserver 3 - php updates the db and responds 4 - js catches response and updates UI
  22. 22. NO PAGEREFRESH
  23. 23. WEB DESIGNUNTIL ... 2007
  24. 24. http://www.flickr.com/photos/30713600@N00/4143454588/
  25. 25. NEWPOSSIBILITIES
  26. 26. MOBILE ACCESS
  27. 27. GPS+COMPASS
  28. 28. ACCELEROMETER + GYROSCOPE
  29. 29. ACCELEROMETER + GYROSCOPE
  30. 30. CAMERA
  31. 31. CAMERA
  32. 32. OFFLINE DATA
  33. 33. GOING NATIVE?
  34. 34. ADVANTAGESOF GOING NATIVE
  35. 35. ★ APP STORE REVENUE
  36. 36. ★ APP STORE REVENUE★ HARDWARE ACCESS
  37. 37. DISADVANTAGESOF GOING NATIVE
  38. 38. APP APPROVALTAKES FOREVER
  39. 39. MORE COMPLEX
  40. 40. HTML5AND RELATED AWESOMENESS
  41. 41. READY IN
  42. 42. 2022
  43. 43. 2022
  44. 44. = “require at least two browsers to completelypass [HTML 5 test suites]”
  45. 45. JUNE 2011 CSS2.1 is now aW3C recommendation (after 13 years)
  46. 46. NEW SEMANTIC TAGS
  47. 47. <!DOCTYPE html>
  48. 48. source:(h*p://www.smashingmagazine.com/2009/07/16/html5>and>the>future>of>the>web/
  49. 49. OLD BROWSERS?
  50. 50. http://www.impressivewebs.com/difference-block-inline-css/
  51. 51. PROBLEMI don’t know <header>, <footer>, ... I’ll just make it inline
  52. 52. SOLUTION
  53. 53. http://meyerweb.com/eric/tools/css/reset/
  54. 54. IE6, 7, 8OLD BROWSERS?
  55. 55. GEOLOCATION?
  56. 56. OFFLINE DATA?
  57. 57. FORMS
  58. 58. <VIDEO> Flash<video width="400" height="360" src="vid.mp4">
  59. 59. <AUDIO>
  60. 60. <CANVAS>
  61. 61. http://www.cuttherope.ie/
  62. 62. http://chrome.angrybirds.com
  63. 63. http://chalk.37signals.com
  64. 64. <CANVAS>+<VIDEO> = lolcatzhttp://html5demos.com/video-canvas
  65. 65. SPEECH?http://www.goodbytes.be/presentations/pica/speech.html
  66. 66. SPEECH?http://www.goodbytes.be/presentations/pica/speech.html
  67. 67. DRAG&DROPhttp://html5demos.com/drag
  68. 68. WEB SOCKETS
  69. 69. “REAL TIME” vs “POLLING”
  70. 70. GOT CANDY? http://www.flickr.com/photos/53552950@N00/2379078919
  71. 71. ★ GOOGLE DOCS
  72. 72. ★ GOOGLE DOCS★ LIVE CHAT
  73. 73. ★ GOOGLE DOCS★ LIVE CHAT★ GAMES
  74. 74. ★ GOOGLE DOCS★ LIVE CHAT★ GAMES★ ...
  75. 75. CSS3AND OTHER HIPSTER TECHNIQUES
  76. 76. PHOTOSHOP
  77. 77. PHOTOSHOP
  78. 78. SPEC NOT FINAL YET -moz- -webkit- -o- -ms-
  79. 79. DO IT FUTURE PROOF
  80. 80. OR GO PREFIX FREE
  81. 81. border-image
  82. 82. SHAPESh*p://www.css3shapes.com/
  83. 83. SHAPEShttp://nicolasgallagher.com/pure-css-social-media-icons/
  84. 84. h*p://desandro.com/arCcles/opera>logo>css/
  85. 85. h*p://cordobo.com/1630>internet>explorer>pure>css>logo/
  86. 86. h*p://graphicpeel.com/cssiosicons
  87. 87. h*p://www.lensco.be/files/clocks/
  88. 88. CSSANIMATIONS
  89. 89. CSS ANIMATIONS http://leaverou.github.com/animatable/
  90. 90. CSSGRADIENTS
  91. 91. CSS GRADIENTS Complex :( Generators :)http://gradients.glrzad.com/http://www.westciv.com/tools/gradients/
  92. 92. TYPOGRAPHY
  93. 93. @font-face• fontsquirrel.com, google fonts, typekit, ...
  94. 94. ICON FONTS.icon:before{content:e048;} http://somerandomdude.com/work/iconic/
  95. 95. SVG
  96. 96. SVG• h*p://webtypographyforthelonely.com/
  97. 97. 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>
  98. 98. SVG((Scalable(Vector(Graphics)h*p://www.drawasCckman.com/ h*p://www.w3schools.com/svg/default.asp
  99. 99. EXAMPLES
  100. 100. http://pattern.dk/sun/
  101. 101. http://pattern.dk/sun/
  102. 102. http://pattern.dk/sun/
  103. 103. LET’S BUILDA SIMPLE APP
  104. 104. GET LOCATIONGET TOILETSANIMATE LOGOGET CLOSEST RESULTSHOW RESULTRESTART ON LOGO CLICK
  105. 105. ALREADY DONE
  106. 106. ALREADY DONE
  107. 107. APPLE SPECIFIC SETTINGS
  108. 108. APP ICONS
  109. 109. STARTUP SCREEN
  110. 110. STARTUP SCREEN
  111. 111. GO FULLSCREEN
  112. 112. HTML/CSS/JS ONLY
  113. 113. WORKS ON*ANY* DEVICE
  114. 114. GEOLOCATION
  115. 115. if (navigator.geolocation) {  navigator.geolocation.getCurrentPosition(success, error);} else {  //error}function success(position){//position.coords.latitude//position.coords.longitude}
  116. 116. OPEN DATA API
  117. 117. CSS3 TRANSITIONS + ANIMATIONS
  118. 118. FRAMEWORKS
  119. 119. FRAMEWORKS
  120. 120. FRAMEWORKS
  121. 121. FRAMEWORKS
  122. 122. FRAMEWORKS
  123. 123. WHERE DO I GO FROM HERE?
  124. 124. EXPERIMENT
  125. 125. Chrome Experiments• h*p://www.chromeexperiments.com/arcadefire/
  126. 126. http://ro.me
  127. 127. Q&A
  128. 128. HTML5• new semantic tags• JavaScript API’s• already here• more than just html
  129. 129. CSS3• less Photoshop• scalable• lightweight (mobile!)• design in the browser• watch out for vendor prefixes
  130. 130. 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/
  131. 131. 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/
  132. 132. 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/

×