Your SlideShare is downloading. ×
What designers need to know about HTML5 and CSS3
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

What designers need to know about HTML5 and CSS3

2,236
views

Published 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.

Published in: Education, Technology, Design

0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,236
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
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