[amigos] HTML5 and CSS3

1,081 views
937 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,081
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

[amigos] HTML5 and CSS3

  1. 1. #html5css3HTML5 and CSS3:Ready for Prime Time?Christopher SchmittChristopherSchmitt.comhttp://twitter.com/@teleject 1
  2. 2. Christopher SchmittChristopherSchmitt.comhttp://twitter.com/@teleject 2
  3. 3. http://e4h.tvChristopher SchmittChristopherSchmitt.comhttp://twitter.com/@teleject 3
  4. 4. DESIGN 4
  5. 5. 5
  6. 6. 6
  7. 7. 7
  8. 8. 8
  9. 9. 9
  10. 10. 10
  11. 11. 11
  12. 12. 12
  13. 13. DESIGNING ONLINE 13
  14. 14. 14
  15. 15. 15
  16. 16. http://youtu.be/RPcqz3pXQ-w?t=7m42s 16
  17. 17. 17
  18. 18. 18
  19. 19. 19
  20. 20. 20
  21. 21. 21
  22. 22. 22
  23. 23. XHTML EveryoneTHINGS ARE GOOD elseBETWEEN US, XHTML,RIGHT?I MEAN. WE GET ALONG WELL.AND WE BOTH LIKE STUFF. 3 23 23
  24. 24. http://dev.opera.com/articles/view/mama-markup-validation-report/ 24 24
  25. 25. “THE ATTEMPT TO GET THE WORLD TO SWITCH TO XML,INCLUDING QUOTES AROUND ATTRIBUTE VALUES AND SLASHES IN EMPTY TAGS AND NAMESPACES ALL AT ONCE DIDN’T WORK.” SIR TIM BERNERS-LEE 25 25
  26. 26. http://www.flickr.com/photos/teleject/432030263/ 26 26
  27. 27. 27 27
  28. 28. 28 28
  29. 29. 29 29
  30. 30. WEB 2.0 30 30
  31. 31. 31 31
  32. 32. BLUEPRINTS VS REALITY http://www.amazon.com/gp/product/0140139966 32 32
  33. 33. “TAKE CARE OF THE LUXURIES AND THE NECESSITIES WILL TAKE CARE OF THEMSELVES.”FRANK LLOYD WRIGHT 33 33
  34. 34. BUILDINGWITH HTML5 34 34
  35. 35. PAGE STRUCTURE 35 35
  36. 36. DIV ID=“header” DIV ID=“nav”DIV ID=“section” DIV ID=“sidecolumn”DIV ID=“article” DIV ID=“footer” 36 36
  37. 37. <HEADER> <NAV><SECTION> <ASIDE><ARTICLE> <FOOTER> 37 37
  38. 38. ARTICLE VS ASIDE VS SECTION• Molly Holzschlag, Opera standards evangelist, says: • <section> clarifies <div> • <article> replaces <div id="content"> • <aside> replaces <div id="sidebar">• Chris Mills, Opera browser employee, plays it safe: http://boblet.tumblr.com/post/130610820/html5-structure1 38 38
  39. 39. WHAT ABOUT THE DIVS?• Marc Grabanski, jQuery and HTML5 guy: • “div has no meaning whatsoever, so there is nothing semantic about divs”• Bruce Lawson, Opera browser employee: • “Likeall semantic questions, it depends on the context. If your only reason for wanting an element is to group stuff for styling, its a div.” 39 39
  40. 40. <body> <header> <h1>Heading </h1> </header> <nav> <h3>Site Navigation</h3> <ul>...</ul> </nav> <section> <article> <h3>Weblog Entry</h3> </article> </section> <aside> <p>You are reading "Chocolate Rain", an entry posted on <timedatetime="2009-03-05">5 March, 2009</time>, to the <a href="#">Mistycollection</a>. See other posts in <a href="#">this collection</a>.</p> </aside> <footer> <p>...</p> </footer></body> 40 40
  41. 41. 41 41
  42. 42. 42 42
  43. 43. <script type="text/javascript">document.createElement(header);document.createElement(nav);document.createElement(section);document.createElement(article);document.createElement(aside);document.createElement(footer);</script> http://ejohn.org/blog/html5-shiv/ 43 43
  44. 44. 44 44
  45. 45. HTML5 VIDEO 45 45
  46. 46. <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Basic HTML5 Web Document Structure</title> </head> <body><h1>Video Example</h1><object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/4GuKSqAg5xI&hl=en&fs=1"></param><paramname="allowFullScreen" value="true"></param><paramname="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/4GuKSqAg5xI&hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true"width="425" height="344"></embed></object> </body></html> 46 46
  47. 47. <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Basic HTML5 Web Document Structure</title> </head> <body><h1>Video Example</h1><video src="html5test.ogg" width="320" height="240" controls poster="html5testvideoposter.jpg"> <a href="html5testvideo.ogg">Download movie</a></video> </body></html> 47 47
  48. 48. HTML5 VIDEO• WIDTH and HEIGHT should be required, IMO, but movie plays anyway based on the values in the video file itself.• Video formats may have their own posterframe. The browser should use that by default unless overridden by valid POSTER attribute value.• Text can be included within VIDEO element to allow user to download video if their browser doesn’t support.• If you want to give users control, use CONTROL attribute. 48 48
  49. 49. HTML5 VIDEO• Video can start automatically if using the AUTOPLAY=”1” attribute and value.• Spec provides for LOOP, AUTOBUFFER which also take a value of O or 1.• Codecs support... 49 49
  50. 50. HTML5 VIDEO “It would be helpful for interoperability if all browsers could support the same codecs. However, there are no known codecsthat satisfy all the current players: we need a codec that is known to not require per-unit or per-distributor licensing, that is compatible with the open source development model, that is of sufficient quality as to be usable, and that is not an additional submarine patent risk for large companies. This is an ongoing issue and this section will be updated once more information is available.” - http://www.whatwg.org/specs/web-apps/current-work/#video- and-audio-codecs-for-video-elements 50 50
  51. 51. CODECS• Ogg (or “Vorbis”) • No need to worry about patents• H.264 • Created by the MPEG group • If you have blu-ray disc player, you are using it• WebM •A wrapper for the VP8 video and Ogg audio streams 51 51
  52. 52. VIDEO CODEC SUPPORT FF3.6+ S Ch5+ Op10.6+ IE9Ogg Y Y YH.264 Y Y* YWebM (W4.02+) (Ch6+) Y 52 52
  53. 53. http://firefogg.org/ 53 53
  54. 54. http://www.videolan.org/vlc/ 54 54
  55. 55. http://handbrake.fr/ 55 55
  56. 56. LESSONS LEARNED• Use VLC or Firefogg to encode common movie files types to OGG• H.264 encoding? Use Handbrake• Ifyou are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial: http://diveintohtml5.org/video.html • Good primer: http://dev.opera.com/articles/view/introduction-html5-video/ 56 56
  57. 57. 57 57
  58. 58. 58 58
  59. 59. <script> function playPause() { var myVideo = document.getElementsByTagName(video)[0]; if (myVideo.paused) myVideo.play(); else myVideo.pause(); } </script> 59 59
  60. 60. <input type=button onclick="playPause()" value="Play/Pause"tabindex="0" /> 60 60
  61. 61. HTML5 VIDEO & CAPTIONS 61 61
  62. 62. [Captioning] has been shown to improvereading skills among adults who are non-readers.http://www.ldonline.org/article/35793 62 62
  63. 63. 63 63
  64. 64. QUICK & DIRTYCAPTIONING 64 64
  65. 65. http://github.com/johnmcc/jCaps 65 65
  66. 66. 66 66
  67. 67. 67 67
  68. 68. SRT FILES• SRTfiles are text files used in video playback; therefore, they do not contain any video data.• Text file containing subtitles used by various video playback programs; supported by DivX, DVD, and other video formats; • Includes the time each subtitle should be displayed followed by the text of the subtitles. • Subtitle files are often named according to the language of the subtitles, i.e. "moviename-eng.srt" for English and "moviename- ger.srt" for German subtitles. 68 68
  69. 69. TRANSCRIPT-EN.SRT100:00:00,000 --> 00:00:6,000Allow me to introduce myself My name is Tay Its T-A-Y, T-A-Y to the Z200:00:06,000 --> 00:00:9,000This is the web and its gonna murder your TV It was Chocolate Rain300:00:09,500 --> 00:00:11,500Wrote a song about that history Chocolate Rain400:00:12,000 --> 00:00:15,000Now Im paid a hefty hefty fee Chocolate Rain 69 69
  70. 70. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script><script src="jquery.jcap.js"></script> 70 70
  71. 71.  <video id="myVid" width="400" src="cherry-chocolate-rain.ogv" autobuffer controls>  <track src="transcript-en.srt" type="text/srt" language="en"role="textaudesc"></track>  <track src="transcript-gr.srt" type="text/srt" language="gr"role="textaudesc"></track>  <p>Alternative text...</p></video> 71 71
  72. 72.  <video id="myVid" width="400" src="cherry-chocolate-rain.ogv" autobuffercontrols>  <track src="transcript-en.srt" type="text/srt"language="en" role="textaudesc"></track>  <track src="transcript-gr.srt" type="text/srt"language="gr" role="textaudesc"></track>  <p>Alternative text...</p></video> 72 72
  73. 73. BUILDING WITH CSS3 73 73
  74. 74. ~50 CSS3 Moduleshttp://www.w3.org/Style/CSS/current-work#CSS3 74 74
  75. 75. WHERE IS CSS3 COMING?• The specification is divided into different chunks, modules • http://www.w3.org/Style/CSS/current-work • Transformations • Animations • Media Queries • and so on, and so on... • at a glacial pace ever towards yesterday 75 75
  76. 76. WHERE IS CSS3 COMING?• The specification is divided into different chunks, modules • http://www.w3.org/Style/CSS/current-work• The specification is being written by W3C • http://www.w3.org/Style/CSS/ 76 76
  77. 77. WHERE IS CSS3 COMING?• The specification is divided into different chunks, modules • http://www.w3.org/Style/CSS/current-work• The specification is being written by W3C • http://www.w3.org/Style/CSS/• Browservendors (like Firefox, Safari, and Opera) are implementing their own versions of these unfinished standards • IE9 is “bringing the power of PC hardware and Windows” 77 77
  78. 78. 78 78
  79. 79. IMAGE MASKS 79 79
  80. 80. 80 80
  81. 81. 81 81
  82. 82. 82 82
  83. 83. 83 83
  84. 84. 84 84
  85. 85. TEXT COLUMNS 85 85
  86. 86. 86 86
  87. 87. TEXT COLUMNS<div id="column"><p>…<p><h2>…</h2><p>…<p><h2>…</h2><p>…<p></div> 87 87
  88. 88. TEXT COLUMNS#column { -moz-column-gap: 3em; -moz-column-width: 11em; -webkit-column-gap: 3em; -webkit-column-width: 11em; padding: 10px; } 88 88
  89. 89. TEXT COLUMNS#column { -moz-column-gap: 3em; -moz-column-width: 11em; -moz-column-rule: 1px solid #ccc; -webkit-column-gap: 3em; -webkit-column-width: 11em; -webkit-column-rule: 1px solid #ccc; padding: 10px; } 89 89
  90. 90. LESSONS LEARNED• Proprietary CSS extensions in Firefox and Safari.• JavaScriptsolution through a jQuery plugin: http://welcome.totheinter.net/2008/07/22/multi-column-layout-with- css-and-jquery/ 90 90
  91. 91. COMPLEXANIMATING LINKS 91 91
  92. 92. 92 92
  93. 93. COMPLEX ANIMATED LINKS• Web designer Faruk Ateş’s personal site (see http://farukat.es/) uses the transition property to change the color of the element. • As well as the color, width, box shadow, text shadow, and opacity. 93 93
  94. 94. COMPLEX ANIMATED LINKS#web20 li a { text-shadow: rgba(0,0,0, 0) 1px 1px 2px;-moz-box-shadow: rgba(0,0,0, 0) 2px 2px 2px;-webkit-box-shadow: rgba(0,0,0, 0) 2px 2px 2px;-moz-border-radius-topright: 31px;-moz-border-radius-bottomright: 31px;-webkit-border-top-right-radius: 31px;-webkit-border-bottom-right-radius: 31px;-webkit-transition: background-color .25s ease, color .5s ease, width .2s ease-out, -webkit-box-shadow .25s ease, text-shadow .2s ease, opacity .2s ease;} 94 94
  95. 95. BUILDINGWITH SANITY 95 95
  96. 96. 96 96
  97. 97. 97 97
  98. 98. 98 98
  99. 99. http://incident57.com/codekit/ 99 99
  100. 100. 100 100
  101. 101. 101 101
  102. 102. 102 102
  103. 103. 103 103
  104. 104. 104 104
  105. 105. 105 105
  106. 106. WHERE ISHTML & CSS GOING 106
  107. 107. http://www.alwaysbetonjs.com 107 107
  108. 108. 108
  109. 109. 109
  110. 110. 110
  111. 111. 111
  112. 112. 112
  113. 113. 113
  114. 114. http://www.sencha.com/blog/the-making-of-fastbook-an-html5-love-story/ 114
  115. 115. 115
  116. 116. 116
  117. 117. 117
  118. 118. 118
  119. 119. http://alistapart.com/article/testing-websites-in-game-console-browsers 119
  120. 120. http://mediaqueri.es/ 120
  121. 121. // default, mobile-1st CSS rules devices gohere@media screen and (min-width: 480px) { ... }@media screen and (min-width: 600px) { ... }@media screen and (min-width: 768px) { ... }@media screen and (min-width: 910px) { ... } 121
  122. 122. 122
  123. 123. 123
  124. 124. 124
  125. 125. 125
  126. 126. 126
  127. 127. 127
  128. 128. 128
  129. 129. 129
  130. 130. 130
  131. 131. 131
  132. 132. 132
  133. 133. THANK YOU! Christopher Schmittschmitt@heatvision.comhttp://twitter.com/teleject 133 133

×