What designers need to know about HTML5 and CSS3

  • 2,072 views
Uploaded on

A talk/lab introducing HTML5 & CSS3 — what's new, how to use the new things and what to be careful for.

A talk/lab introducing HTML5 & CSS3 — what's new, how to use the new things and what to be careful for.

More in: Education , Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,072
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
0
Comments
0
Likes
5

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Transcript

  • 1. HTML 5 & YOU & ME
  • 2. W ho is th isH gu TM y? L5Br ea kCS S3 AheadW or ld The Journey D om in at io n, e tc .
  • 3. W ho is th isH gu TM y? L5Br ea kCS S3 AheadW or ld The Journey D om in at io n, e tc .
  • 4. W ho is th isH gu TM y? L5Br ea kCS S3 AheadW or ld The Journey D om in at io n, e tc .
  • 5. W ho is th isH gu TM y? L5Br ea kCS S3 AheadW or ld The Journey D om in at io n, e tc .
  • 6. W ho is th isH gu TM y? L5Br ea kCS S3 AheadW or ld The Journey D om in at io n, e tc .
  • 7. W ho is th isH gu TM y? L5Br ea kCS S3 AheadW or ld The Journey D om in at io n, e tc .
  • 8. W ho is th is H gu TM y? L5 Br ea k CS S3 Ahead W or ld The Journey D om in at io n,PLEASE FASTEN YOUR SEAT BELTS e tc .
  • 9. Who Am I?
  • 10. Who Am I?• I’m Fred LeBlanc.
  • 11. Who Am I?• I’m Fred LeBlanc.• I run .
  • 12. Who Am I?• I’m Fred LeBlanc.• I run .• I specialize in front-end development.
  • 13. Who Am I?• I’m Fred LeBlanc.• I run .• I specialize in front-end development.• I’ve been html-ing for 15 years.
  • 14. Who Am I?• I’m Fred LeBlanc.• I run .• I specialize in front-end development.• I’ve been html-ing for 15 years.• I love making web things.
  • 15. OK —ENOUGH
  • 16. LET’STALKHTML
  • 17. Getting our Hands DirtyHTML5
  • 18. Getting our Hands Dirty Please open index.html from lab-01 in your favorite text editor.HTML5
  • 19. This is HTML4.HTML5
  • 20. This is HTML4. Let’s make this html5.HTML5
  • 21. Above the <html> element, write this:HTML5
  • 22. Above the <html> element, write this:<!doctype html>HTML5
  • 23. BOOM! DONHTML5
  • 24. DOCTYPEsHTML5
  • 25. DOCTYPEs a/k/a DTDsHTML5
  • 26. DOCTYPEs a/k/a DTDs “Document Type Definition”HTML5
  • 27. Other DOCTYPEsHTML5
  • 28. Other DOCTYPEs<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ TR/html4/loose.dtd">HTML5
  • 29. Other DOCTYPEs<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ TR/html4/loose.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.0 Transitional//EN" "http://www.w3.org/TR/ xhtml1/DTD/xhtml1-transitional.dtd">HTML5
  • 30. The Coolest PartHTML5
  • 31. The Coolest Part Most of the html you know is still valid html5!HTML5
  • 32. Have a Look <!--...--> <body> <dl> <head> <map> <samp> <tfoot> <!doctype> <br> <dt> <hr> <menu> <script> <th> <a> <button> <em> <html> <meta> <select> <thead> <abbr> <caption> <fieldset> <i> <noframes> <small> <title> <acronym> <center> <font> <iframe> <noscript> <span> <tr> <address> <cite> <form> <img> <object> <strike> <tt> <applet> <code> <frame> <input> <ol> <strong> <u> <area> <col> <frameset> <ins> <optgroup> <style> <ul> <b> <colgroup> <h1> <isindex> <option> <sub> <var> <base> <dd> <h2> <kbd> <p> <sup> <basefont> <del> <h3> <label> <param> <table> <bdo> <dfn> <h4> <legend> <pre> <tbody> <big> <dir> <h5> <li> <q> <td><blockquote> <div> <h6> <link> <s> <textarea>HTML5
  • 33. Still Cool <!--...--> <body> <dl> <head> <map> <samp> <tfoot> <!doctype> <br> <dt> <hr> <menu> <script> <th> <a> <button> <em> <html> <meta> <select> <thead> <abbr> <caption> <fieldset> <i> <noframes> <small> <title> <acronym> <center> <font> <iframe> <noscript> <span> <tr> <address> <cite> <form> <img> <object> <strike> <tt> <applet> <code> <frame> <input> <ol> <strong> <u> <area> <col> <frameset> <ins> <optgroup> <style> <ul> <b> <colgroup> <h1> <isindex> <option> <sub> <var> <base> <dd> <h2> <kbd> <p> <sup> <basefont> <del> <h3> <label> <param> <table> <bdo> <dfn> <h4> <legend> <pre> <tbody> <big> <dir> <h5> <li> <q> <td><blockquote> <div> <h6> <link> <s> <textarea>HTML5
  • 34. Goodnight, Sweet <!--...--> Prince <body> <dl> <head> <map> <samp> <tfoot> <!doctype> <br> <dt> <hr> <menu> <script> <th> <a> <button> <em> <html> <meta> <select> <thead> <abbr> <caption> <fieldset> <i> <noframes> <small> <title> <acronym> <center> <font> <iframe> <noscript> <span> <tr> <address> <cite> <form> <img> <object> <strike> <tt> <applet> <code> <frame> <input> <ol> <strong> <u> <area> <col> <frameset> <ins> <optgroup> <style> <ul> <b> <colgroup> <h1> <isindex> <option> <sub> <var> <base> <dd> <h2> <kbd> <p> <sup> <basefont> <del> <h3> <label> <param> <table> <bdo> <dfn> <h4> <legend> <pre> <tbody> <big> <dir> <h5> <li> <q> <td><blockquote> <div> <h6> <link> <s> <textarea>HTML5
  • 35. HTML5 Stages of Grief How to cope with these losses.HTML5
  • 36. Twelve Angry TagsHTML5
  • 37. Twelve Angry TagsOut with the old…HTML5
  • 38. Twelve Angry TagsOut with the old……in with the new.HTML5
  • 39. Twelve Angry Tags ith the old… <acronym>Out w…in with the new.HTML5
  • 40. Twelve Angry Tags ith the old… <acronym>Out w…in with the new. The <abbr> tag.HTML5
  • 41. Twelve Angry TagsOut with the old… <a p p l e t>…in with the new.HTML5
  • 42. Twelve Angry TagsOut with the old… <a p p l e t>…in with the new. JS, <canvas>, FlashHTML5
  • 43. Twelve Angry Tags ith the old… <b asefont>Out w…in with the new.HTML5
  • 44. Twelve Angry Tags ith the old… <b asefont>Out w…in with the new. CSS on html eleme ntHTML5
  • 45. Twelve Angry TagsOut with the old… <big>…in with the new.HTML5
  • 46. Twelve Angry TagsOut with the old… <big>…in with the new. <span> & CSSHTML5
  • 47. Twelve Angry TagsOut with the old… <center>…in with the new.HTML5
  • 48. Twelve Angry TagsOut with the old… <center>…in with the new. CSSHTML5
  • 49. Twelve Angry TagsOut with the old… <dir>…in with the new.HTML5
  • 50. Twelve Angry TagsOut with the old… <dir>…in with the new. <ul>HTML5
  • 51. Twelve Angry TagsOut with the old… <font>…in with the new.HTML5
  • 52. Twelve Angry TagsOut with the old… <font>…in with the new. CSSHTML5
  • 53. Twelve Angry Tags <frameset>/Out with the old… <frame>…in with the new.HTML5
  • 54. Twelve Angry Tags <frameset>/Out with the old… <frame>…in with the new. <iframe>HTML5
  • 55. Twelve Angry Tags ith the old… <noframes>Out w…in with the new.HTML5
  • 56. Twelve Angry Tags ith the old… <noframes>Out w…in with the new. Nothing…HTML5
  • 57. Twelve Angry TagsOut with the old… <strike>…in with the new.HTML5
  • 58. Twelve Angry TagsOut with the old… <strike>…in with the new. CSSHTML5
  • 59. Twelve Angry TagsOut with the old… <tt>…in with the new.HTML5
  • 60. Twelve Angry TagsOut with the old… <tt>…in with the new. <code>, <var>, <pre>HTML5
  • 61. It Was a Different Time 2.0. Waaaaay before WebHTML5
  • 62. HTML5 All about semantics.HTML5
  • 63. 21 To help us out, 28 NEWHTML5
  • 64. To help us out,29 28 NEW2827HTML5
  • 65. Said New Tags <article> <figure> <ruby> <aside> <footer> <rp> <audio> <header> <rt> <canvas> <hgroup> <section> <command> <keygen> <source> <datalist> <mark> <summary> <details> <meter> <time> <embed> <nav> <video> <eventsource <output> <wbr> > <progress> <figcaption>HTML5
  • 66. Today’s Focus Is On… <article> <figure> <ruby> <aside> <footer> <rp> <audio> <header> <rt> <canvas> <hgroup> <section> <command> <keygen> <source> <datalist> <mark> <summary> <details> <meter> <time> <embed> <nav> <video> <eventsource> <output> <wbr> <figcaption> <progress>HTML5
  • 67. Notes on Others <article> <figure> <ruby> <aside> <footer> <rp> <audio> <header> <rt> <canvas> <hgroup> <section> <command> <keygen> <source> <datalist> <mark> <summary> <details> <meter> <time> <embed> <nav> <video> <eventsource <output> <wbr> > <progress> <figcaption>HTML5
  • 68. Notes on Others <article> <figure> <ruby> <aside> <footer> <rp> <audio> <header> <rt> <canvas> <hgroup> <section> <command> <keygen> <source> <datalist> <mark> <summary> <details> <meter> <time> <embed> <nav> <video> <eventsource <output> <wbr> > <progress> <figcaption>HTML5
  • 69. Notes on Others <article> <figure> <ruby> <aside> <footer> <rp> <audio> <header> <rt> <canvas> <hgroup> <section> <command> <keygen> <source> <datalist> <mark> <summary> <details> <meter> <time> <embed> <nav> <video> <eventsource <output> <wbr> > <progress> <figcaption>HTML5
  • 70. Notes on Others <article> <figure> <ruby> <aside> <footer> <rp> <audio> <header> <rt> <canvas> <hgroup> <section> <command> <keygen> <source> <datalist> <mark> <summary> <details> <meter> <time> <embed> <nav> <video> <eventsource <output> <wbr> > <progress> <figcaption>HTML5
  • 71. Notes on Others <article> <figure> <ruby> <aside> <footer> <rp> <audio> <header> <rt> <canvas> <hgroup> <section> <command> <keygen> <source> <datalist> <mark> <summary> <details> <meter> <time> <embed> <nav> <video> <eventsource <output> <wbr> > <progress> <figcaption>HTML5
  • 72. Here We Go Please open index.html from lab-02 in your favorite text editor.HTML5
  • 73. DIVs,SECTIONs&HTML5
  • 74. DIVs,SECTIONs&HTML5
  • 75. DIVs,SECTIONs&HTML5
  • 76. DIVs,SECTIONs&HTML5
  • 77. This Can BeCONFUSING And that’s A-OK!HTML5
  • 78. Within the <div> element, create a element, and add a heading.HTML5
  • 79. Within the <div> element, create a <section> element, and add a heading.HTML5
  • 80. Within that, create two elements, and give’em some content.HTML5
  • 81. Within that, create two <article> elements, and give’em some content.HTML5
  • 82. On ManyHTML5
  • 83. On Many This is also OK!HTML5
  • 84. Moving On Please open index.html from lab-03 in your favorite text editor.HTML5
  • 85. ASIDEsHTML5
  • 86. After the <section> element, create an element, with the class related.HTML5
  • 87. After the <section> element, create an <aside> element, with the class related.HTML5
  • 88. Inside of that, create a couple of elements, each with sample content.HTML5
  • 89. Inside of that, create a couple of <section> elements, each with sample content.HTML5
  • 90. Header Time Please open index.html from lab-04 in your favorite text editor.HTML5
  • 91. HEADERs&FOOTERsHTML5
  • 92. Before the <section> element, create a element, with a page title.HTML5
  • 93. Before the <section> element, create a <header> element, with a page title.HTML5
  • 94. After the <aside> element, create a element, with copyright information.HTML5
  • 95. After the <aside> element, create a <footer> element, with copyright information.HTML5
  • 96. Getting Around Please open index.html from lab-05 in your favorite text editor.HTML5
  • 97. NAVsHTML5
  • 98. At the end of the <header> element, create a element, with links to other pages.HTML5
  • 99. At the end of the <header> element, create a <nav> element, with links to other pages.HTML5
  • 100. HEY YOU!NICE HTML5PAGEHTML5
  • 101. GEARCHANGHTML5
  • 102. A Detail Page Please open index.html from lab-06 in your favorite text editor.HTML5
  • 103. FIGUREs&FIGCAPTIONsHTML5
  • 104. After the first <p> element, create a element, with the provided image.HTML5
  • 105. After the first <p> element, create a <figure> element, with the provided image.HTML5
  • 106. Within that element (after the image), create a element, with an appropriate caption.HTML5
  • 107. Within that element (after the image), create a <figcaption> element, with an appropriate caption.HTML5
  • 108. Let’s Add Media Please open index.html from lab-07 in your favorite text editor.HTML5
  • 109. AUDIOsHTML5
  • 110. After the first <p> element, create an element, with the audio sources.HTML5
  • 111. After the first <p> element, create an <audio> element, with the audio sources.HTML5
  • 112. New Attributes autoplay="autoplay" controls="controls" loop="loop" preload="preload"HTML5
  • 113. Last One Please open index.html from lab-08 in your favorite text editor.HTML5
  • 114. VIDEOsHTML5
  • 115. After the first <p> element, create a element, with the video sources.HTML5
  • 116. After the first <p> element, create a <video> element, with the video sources.HTML5
  • 117. New Attributes autobuffer="autobuffer" autoplay="autoplay" controls="controls" loop="loop" poster="poster"HTML5
  • 118. AS ALWAYS,BE CAREFUL WITHAUTOPLAHTML5
  • 119. ONE MOREHTML5
  • 120. IE!ONE MOREHTML5
  • 121. THE SHIM http://code.google.com/p/html5shim/HTML5
  • 122. &HTMLTHAT’S
  • 123. IT’S ALMOSTBREATIME!
  • 124. BUTFIRST…
  • 125. Why You Should Come Back
  • 126. Why You Should Come Back• Next up: css3! (The fun stuff)
  • 127. Why You Should Come Back• Next up: css3! (The fun stuff)• Transitions, transforms, new colors, rounded corners & more
  • 128. Why You Should Come Back• Next up: css3! (The fun stuff)• Transitions, transforms, new colors, rounded corners & more• Web fonts
  • 129. Why You Should Come Back• Next up: css3! (The fun stuff)• Transitions, transforms, new colors, rounded corners & more• Web fonts• Media queries & responsive web stuff
  • 130. SEEYOUSHORTL
  • 131. HEY, YOUCAMEBACK!
  • 132. LET’S TALKCSS
  • 133. Diving InCSS3
  • 134. Diving In Please open index.html from lab-09 in your favorite text editor.CSS3
  • 135. OPACITY& RGBACSS3
  • 136. For IE7 & 8CSS3
  • 137. For IE7 & 8 background-color: #ffc;CSS3
  • 138. HSL &ColorsCSS3
  • 139. HSLCSS3
  • 140. HSLCSS3
  • 141. HSL isCSS3
  • 142. HSL is hsl(60, 20%, 100%)CSS3
  • 143. HSL rgb(255, 255, 204) is hsl(60, 20%, 100%)CSS3
  • 144. New Color Names!CSS3
  • 145. New Color Names!CSS3
  • 146. From One to AnotherCSS3
  • 147. From One to Another Please open index.html from lab-10 in your favorite text editor.CSS3
  • 148. GRADIENTSCSS3
  • 149. Use a Generator The syntax is complex, and differs across browsers. My favorite:http://www.colorzilla.com/gradient-editor/CSS3
  • 150. Round It OffCSS3
  • 151. Round It Off Please open index.html from lab-11 in your favorite text editor.CSS3
  • 152. BORDER-RADIUSCSS3
  • 153. For IE7 & 8 Square corners. :)CSS3
  • 154. Yet Another http://border-radius.com/CSS3
  • 155. And… Circles!CSS3
  • 156. Make it PopCSS3
  • 157. Make it Pop Please open index.html from lab-12 in your favorite text editor.CSS3
  • 158. SHADOWSCSS3
  • 159. Segments horizontal offset vertical offset blur radius (optional) spread radius (optional) colorCSS3
  • 160. For IE7 & 8 No shadows.CSS3
  • 161. TransformsCSS3
  • 162. Transforms Please open index.html from lab-13 in your favorite text editor.CSS3
  • 163. TRANSFORMSCSS3
  • 164. This part is a lot ofCSS3
  • 165. Fantastic FourCSS3
  • 166. Fantastic Four SkewCSS3
  • 167. Fantastic Four Skew RotateCSS3
  • 168. Fantastic Four Skew Rotate TranslateCSS3
  • 169. Fantastic Four Skew Rotate Translate ScaleCSS3
  • 170. For IE7 & 8 No transforms. Don’t do anything that would destroy your interface.CSS3
  • 171. Awesome AnimationCSS3
  • 172. Awesome Animation Please open index.html from lab-14 in your favorite text editor.CSS3
  • 173. TRANSITIONSCSS3
  • 174. More AnimationCSS3
  • 175. More Animation Please open index-2.html from lab-14 in your favorite text editor.CSS3
  • 176. For IE7 & 8 Again, no transitions. Keep this in mind.CSS3
  • 177. More Than ArialCSS3
  • 178. More Than Arial Please open index.html from lab-15 in your favorite text editor.CSS3
  • 179. @FONT-FACECSS3
  • 180. Finding Fonts Font Squirrel http://www.fontsquirrel.com/ TypeKit http://www.typekit.comCSS3
  • 181. Legal & LicensingCSS3
  • 182. For IE7 & 8 These work!CSS3
  • 183. Finally, EverywhereCSS3
  • 184. Finally, Everywhere Please open index.html from lab-16 in your favorite text editor.CSS3
  • 185. MEDIAQUERIESCSS3
  • 186. Simply Put… Media Queries allow us to change any css style based on screen-size, pixel-density, and media-type. (This is super powerful.)CSS3
  • 187. On Responsiveness We’re still figuring it all out.CSS3
  • 188. For IE7 & 8 These don’t work with css, although people have created JavaScript libraries that will work. But is that necessary?CSS3
  • 189. &CSSTHAT’S
  • 190. MOVINGFORWARFROM HERE
  • 191. QUESTIONS? LET’S CHAT
  • 192. THANK I’m Fred LeBlanc. Find me:@fredhq fred@fredhq.com http://fredhq.com