Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

of

Up to Speed on HTML 5 and CSS 3 Slide 1 Up to Speed on HTML 5 and CSS 3 Slide 2 Up to Speed on HTML 5 and CSS 3 Slide 3 Up to Speed on HTML 5 and CSS 3 Slide 4 Up to Speed on HTML 5 and CSS 3 Slide 5 Up to Speed on HTML 5 and CSS 3 Slide 6 Up to Speed on HTML 5 and CSS 3 Slide 7 Up to Speed on HTML 5 and CSS 3 Slide 8 Up to Speed on HTML 5 and CSS 3 Slide 9 Up to Speed on HTML 5 and CSS 3 Slide 10 Up to Speed on HTML 5 and CSS 3 Slide 11 Up to Speed on HTML 5 and CSS 3 Slide 12 Up to Speed on HTML 5 and CSS 3 Slide 13 Up to Speed on HTML 5 and CSS 3 Slide 14 Up to Speed on HTML 5 and CSS 3 Slide 15 Up to Speed on HTML 5 and CSS 3 Slide 16 Up to Speed on HTML 5 and CSS 3 Slide 17 Up to Speed on HTML 5 and CSS 3 Slide 18 Up to Speed on HTML 5 and CSS 3 Slide 19 Up to Speed on HTML 5 and CSS 3 Slide 20 Up to Speed on HTML 5 and CSS 3 Slide 21 Up to Speed on HTML 5 and CSS 3 Slide 22 Up to Speed on HTML 5 and CSS 3 Slide 23 Up to Speed on HTML 5 and CSS 3 Slide 24 Up to Speed on HTML 5 and CSS 3 Slide 25 Up to Speed on HTML 5 and CSS 3 Slide 26 Up to Speed on HTML 5 and CSS 3 Slide 27 Up to Speed on HTML 5 and CSS 3 Slide 28 Up to Speed on HTML 5 and CSS 3 Slide 29 Up to Speed on HTML 5 and CSS 3 Slide 30 Up to Speed on HTML 5 and CSS 3 Slide 31 Up to Speed on HTML 5 and CSS 3 Slide 32 Up to Speed on HTML 5 and CSS 3 Slide 33 Up to Speed on HTML 5 and CSS 3 Slide 34 Up to Speed on HTML 5 and CSS 3 Slide 35 Up to Speed on HTML 5 and CSS 3 Slide 36 Up to Speed on HTML 5 and CSS 3 Slide 37 Up to Speed on HTML 5 and CSS 3 Slide 38 Up to Speed on HTML 5 and CSS 3 Slide 39 Up to Speed on HTML 5 and CSS 3 Slide 40 Up to Speed on HTML 5 and CSS 3 Slide 41 Up to Speed on HTML 5 and CSS 3 Slide 42 Up to Speed on HTML 5 and CSS 3 Slide 43 Up to Speed on HTML 5 and CSS 3 Slide 44 Up to Speed on HTML 5 and CSS 3 Slide 45 Up to Speed on HTML 5 and CSS 3 Slide 46 Up to Speed on HTML 5 and CSS 3 Slide 47 Up to Speed on HTML 5 and CSS 3 Slide 48 Up to Speed on HTML 5 and CSS 3 Slide 49 Up to Speed on HTML 5 and CSS 3 Slide 50 Up to Speed on HTML 5 and CSS 3 Slide 51 Up to Speed on HTML 5 and CSS 3 Slide 52 Up to Speed on HTML 5 and CSS 3 Slide 53 Up to Speed on HTML 5 and CSS 3 Slide 54 Up to Speed on HTML 5 and CSS 3 Slide 55 Up to Speed on HTML 5 and CSS 3 Slide 56 Up to Speed on HTML 5 and CSS 3 Slide 57 Up to Speed on HTML 5 and CSS 3 Slide 58 Up to Speed on HTML 5 and CSS 3 Slide 59 Up to Speed on HTML 5 and CSS 3 Slide 60 Up to Speed on HTML 5 and CSS 3 Slide 61 Up to Speed on HTML 5 and CSS 3 Slide 62 Up to Speed on HTML 5 and CSS 3 Slide 63 Up to Speed on HTML 5 and CSS 3 Slide 64 Up to Speed on HTML 5 and CSS 3 Slide 65 Up to Speed on HTML 5 and CSS 3 Slide 66 Up to Speed on HTML 5 and CSS 3 Slide 67
Upcoming SlideShare
Designing for a Better User Experience
Next
Download to read offline and view in fullscreen.

444 Likes

Share

Download to read offline

Up to Speed on HTML 5 and CSS 3

Download to read offline

A presentation to Refresh DC about the emerging HTML 5 and CSS 3 standards, namely about aspects that are beginning to become applicable to web design and development. Given by Jason Garber and M. Jackson Wilkinson.

Related Books

Free with a 30 day trial from Scribd

See all

Up to Speed on HTML 5 and CSS 3

  1. UP TO SPEED ON HTML 5 & CSS 3 </TITLE> REFRESH DC | M. JACKSON WILKINSON & JASON GARBER | JULY 16, 2009 Sunday, July 19, 2009
  2. THE INTRO Sunday, July 19, 2009
  3. That’s “Michael” M. JACKSON WILKINSON Your Humble Refresh DC Organizer Sunday, July 19, 2009
  4. Sunday, July 19, 2009
  5. Sunday, July 19, 2009
  6. JASON GARBER Refresh DC Organizer Emeritus Sunday, July 19, 2009
  7. Sunday, July 19, 2009
  8. A Very Brief History of WEB STANDARDS Sunday, July 19, 2009
  9. XHTML 1 CSS 2.1 Content Presentation 2001-2006 Sunday, July 19, 2009
  10. WHAT WG Web Hypertext Application Technology Working Group 2004-2007 Sunday, July 19, 2009
  11. W3C World Wide Web Consortium 2007 - PRESENT Sunday, July 19, 2009
  12. HTML 5 CSS 3 Content Presentation 2007 - PRESENT Sunday, July 19, 2009
  13. The Content Layer: HTML 5 Sunday, July 19, 2009
  14. NEW ELEMENTS Sunday, July 19, 2009
  15. structural elements Provides new semantic vocabulary HEADER for parts of a page previously NAV served by DIVs with ID and Class attributes. ARTICLE IE requires some workarounds ASIDE using JavaScript to make these elements work. SECTION FOOTER structural elements Browser Support: Sunday, July 19, 2009
  16. figure Allows for associating captions FIGURE with embedded content, including videos, audio, pullquotes, or images. CONTENT (IMG, Q, VIDEO, ETC.) LEGEND figure Browser Support: Sunday, July 19, 2009
  17. audio & video Allows for associating captions <video src="test.ogg" autoplay="autoplay" controls="controls"> with embedded content, including Your browser does not support the video videos, audio, or images. element. This could also include object and embed codes for legacy browsers. </video> Opera, Chrome, and Firefox all support the Ogg Theora video format natively, while Safari and Chrome support H.264. audio & video Browser Support: Sunday, July 19, 2009
  18. OTHER ELEMENTS METER Contained content is a measurement, like length. PROGRESS Contains current process toward a goal, like a percentage. TIME Time COMMAND Represents something a command a user may execute. DATAGRID Represents data. Non-tabular or otherwise. OUTPUT Displays the output of a program or process. RUBY Allows input of rubi/ruby annotations for Asian languages. Sunday, July 19, 2009
  19. NEW FORM CONTROLS Sunday, July 19, 2009
  20. FORM CONTROLS DATETIME Allows input of a date and a time. DATETIME-LOCAL Allows input of a date and a time, in local time. NUMBER Allows input of a number. RANGE Input is verified to be within a range. EMAIL Confirms the input to be a valid email. URL Ensures input is a valid URL. COLOR Provides a mechanism for the user to input an RGB color. Sunday, July 19, 2009
  21. DOC STRUCTURE Sunday, July 19, 2009
  22. HTML 5 doctype <!DOCTYPE html> The HTML 5 doctype is way easier than any other doctype. Evar. Just type the parts you remember, and you’ll probably be right. HTML 5 doctype Browser Support: Sunday, July 19, 2009
  23. HTML5 & XHTML5 <html> HTML 5 supports the standard HTML syntax (formerly SGML), but also allows for an XML-based variant XHTML5. Since it’s XML, XHTML should vs. be served as application/xml or application/xhtml+xml. Warning: <html xmlns="http:// this means browsers freak if there’s www.w3.org/1999/xhtml"> an error. HTML 5 doctype Browser Support: Sunday, July 19, 2009
  24. Block-Level Links You can now wrap links around <li> block-level elements, rather than having to create links around <a href="page.html"> every element inside the block <img src="pic.jpg"> element. <h3>Title</h3> <p>Text</p> This is useful for lists of articles that include multiple elements, </a> callouts with a single action, etc. </li> Block-level Links Browser Support: Sunday, July 19, 2009
  25. NEW APIs Sunday, July 19, 2009
  26. Drag & Drop API Allows objects (images and links, by default) to be dragged and then dropped onto a target. The target is enabled by canceling the ‘dragover’ (for sane browsers) or ‘dragenter’ (for IE) events for + the drop target. Then listen for a ‘drop’ event which contains a ‘dataTransfer’ object with info. Drag and Drop API Browser Support: Sunday, July 19, 2009
  27. getElementsByClassName Works just like getElementsById, but selects an array of all elements based on a shared class name. No more varied custom functions to make this happen, and performance is significantly better. getElementsByClassName Browser Support: Sunday, July 19, 2009
  28. Cross-Document Messaging This allows non-hostile documents on different domains to simply MAIN DOCUMENT communicate with each other. The sending document can call FOREIGN postMessage() on the window IFRAME object of the receiving document, while the receiving document listens for a ‘message’ event. Cross-Doc Messaging Browser Support: Sunday, July 19, 2009
  29. Simple Client Storage The sessionStorage DOM attribute <input stores session data for a single type="checkbox" window, like cookies on crack. onchange=" localStorage.insurance=checked " The localStorage DOM attribute /> allows each site to store megabytes of data across sessions to improve performance. Both methods store only strings. Simple Client Storage Browser Support: Sunday, July 19, 2009
  30. Structured Client Storage HTML 5’s Web Storage module tx.executeSql( provides an SQL server within the ‘SELECT * FROM Notes’, client, accessible using Javascript. It [], function(tx, rs) { uses fairly standard SQL queries for(var i = 0; for both reading and writing. i < rs.rows.length; i++) { renderNote(rs.rows[i]); There’s a lot to be explained about } the built-in SQL server, so go check out the docs for more information. Structured Client Storage Browser Support: Sunday, July 19, 2009
  31. Offline Application Caching Allow the client to refer directly to <html manifest=”/cache.manifest”> its cache, authoritatively, for certain resources, even if the CACHE MANIFEST browser is offline. index.html help.html Resources listed in the “network” style/default.css section are never cached. images/logo.png images/backgound.png NETWORK: server.cgi Offline Application Caching Browser Support: Sunday, July 19, 2009
  32. Canvas Provides an API for drawing <canvas id="canvas" width="150" height="150"> fallback content directly in the browser window, </canvas> using instructions that define function draw() { vector-based shapes and lines. var canvas = document.getElementById("canvas"); if (canvas.getContext) { var ctx = canvas.getContext("2d"); This allows SVG-like graphics to be created on the fly in the browser, ctx.fillStyle = "rgb(200,0,0)"; ctx.fillRect (10, 10, 55, 50); with fallback content (like Flash?) ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; provided to legacy browsers. ctx.fillRect (30, 30, 55, 50); } } canvas Browser Support: Sunday, July 19, 2009
  33. The Presentation Layer: CSS 3 Sunday, July 19, 2009
  34. COLOR Sunday, July 19, 2009
  35. opacity Adjusts the opacity of the selected div { color: #f00; opacity: 1.0; } element’s presentation on screen. Takes values between 0.0 (fully div { color: #f00; opacity: 0.5; } transparent) and 1.0 (fully opaque) opacity Browser Support: Sunday, July 19, 2009
  36. RGBA Color Like RGB color definitions, but div { color: rgb(0,255,0); } allows a fourth field, defining the alpha value of the color being applied. div { color: rgba(0,255,0,0.5); } Like opacity, the alpha value is between 0.0 (fully transparent) and 1.0 (fully opaque). RGBA color Browser Support: Sunday, July 19, 2009
  37. HSL/A Color HSL color definitions accept three div { color: hsl(240,50%,50%); } arguments: hue is a degree on a color wheel (0-360), saturation is a percentage, and lightness is a div { color: hsla(240,50%,50%,0.5); } percentage. HSLA is like HSL color, but allows a fourth field, defining the alpha value of the color being applied. See RGBA. HSL/A color Browser Support: Sunday, July 19, 2009
  38. BACKGROUNDS Sunday, July 19, 2009
  39. background-size Defines the size at which the div { background-size: 100px 65px; } browser should display the specified background image. Accepts all normal size definitions as width div { background-size: 400px 65px; } followed by height. In shorthand, this appears after background-position values. background-size Browser Support: Sunday, July 19, 2009
  40. background-image Allows for multiple images to be background: url(body-top.png) top left no-repeat, url(body-bottom.png) bottom left no-repeat, specified. The first image specified url(body-middle.png) left repeat-y; is layered closest to the top of the screen, and subsequent images are layered beneath. background-image Browser Support: Sunday, July 19, 2009
  41. BORDERS Sunday, July 19, 2009
  42. border-color Allows for multiple border colors border: 5px solid #000; border-color: #000 transparent transparent #000; to be specified, one pixel at a time. The last specified color is repeated if necessary. This cannot be used in the border shorthand syntax. border-color Browser Support: Sunday, July 19, 2009
  43. border-image Allows the border to be represented border-image: url(button.png) 0 12 0 12 stretch stretch; by an image, by defining which parts of the image should be used for the edges, and which should be repeated in the main part of the border-image: url(border.png) 27 27 27 27 round element. round; This is difficult to represent completely, so go look it up. border-image Browser Support: Sunday, July 19, 2009
  44. border-radius Curves the corners of the border border-radius: 10px; using the radius given, often in pixels. This can be given to all corners, or only to individual corners as specified. border-top-right-radius: 10px; Firefox refers to individual corners like “border-radius-topright” while Safari (correctly) refers to it as “border-top-right-radius”. border-radius Browser Support: Sunday, July 19, 2009
  45. box-shadow Creates a drop shadow beneath the box-shadow: 10px 10px 10px #333; selected element. The first argument is the horizontal offset, the second is the vertical offset, the third is the blur radius, and the final argument is the color to be used as the shadow. box-shadow Browser Support: Sunday, July 19, 2009
  46. TEXT Sunday, July 19, 2009
  47. text-overflow If text overflows the available text-overflow: ellipsis; space, the text-overflow property Lorem ipsum dolor sit amet, consectetur adipiscing defines what happens. elit. Nam purus nunc, auctor et accumsan ut, aliquam vel leo. Quisque dignissim tincidunt rhoncus. Duis sed velit rutrum lorem rutrum faucibus. Nam tincidunt eros at arcu vestibulum egestas. Donec fringilla, The value “ellipsis” appends an turpis in auctor luctus, orci orci vestibulum lacus, a tristique felis erat non diam. Morbi dolor massa, ellipsis character at the overflow elementum ac iaculis quis, iaculis sed neque. Aliquam erat volutpat. Aliquam porttitor auctor massa sit point. amet ultrices. Maecenas quis nunc nibh, sit amet hendrerit leo. Donec a massa eget velit consectetur fermentum aliquet et eros. Vestibulum volutpat, est vitae dapibus congue, nibh augue vehicula lacutus es… text-overflow Browser Support: Sunday, July 19, 2009
  48. text-shadow Creates a drop shadow beneath the text-shadow: 10px 10px 10px #333; selected text. This is sample text. The first argument is the horizontal offset, the second is the vertical offset, the third is the blur radius, and the final argument is the color to be used as the shadow. Multiple shadow definitions may be separated using commas. text-shadow Browser Support: Sunday, July 19, 2009
  49. column-width & column-gap Breaks flowing text into multiple column-width: 200px; column-gap: 20px; columns, based on the width of the Lorem ipsum dolor sit amet, consectetur quisque dignissim tincidunt rhoncus. Duis sed container. Column width defines adipiscing elit. Nam purus nunc, auctor et accumsan ut, aliquam vel leo. Quisque velit rutrum lorem rutrum faucibus. Nam tincidunt eros at arcu vestibulum egestas. the width of each column, and dignissim tincidunt rhoncus. Duis sed velit rutrum lorem rutrum faucibus. Nam tincidunt eros at arcu vestibulum egestas. Donec Donec fringilla, turpis in auctor luctus, orci orci vestibulum lacus, a tristique felis erat non diam. Morbi dolor massa, elementum ac column-gap defines the gap fringilla, turpis in auctor luctus, orci orci vestibulum lacus, a tristique felis erat non iaculis quis, iaculis sed neque. Aliquam erat volutpat. Aliquam porttitor auctor massa sit diam. Morbi dolor massa, elementum ac amet ultrices. Maecenas quis nunc nibh, sit between columns. iaculis quis, iaculis sed neque. Aliquam erat volutpat. Aliquam porttitor auctor massa sit amet hendrerit leo. Donec a massa eget velit consectetur fermentum aliquet et eros. amet ultrices. Maecenas quis nunc nibh, sit Vestibulum volutpat, est vitae dapibus amet hendrerit leo. Donec a massa eget velit congue, nibh augue vehicula lacus, vel consectetur fermentum aliquet et eros. semper dolor odio in libero. Curabitur vitae Column-count can be specified in Vestibulum volutpat, est vitae dapibus congue, nibh augue vehicula lacus, vel sem consequat purus fermentum tincidunt. Donec vestibulum felis ut metus ultrices a semper dolor odio in libero. Curabitur vitae vulputate felis rhoncus eum ivolonortis lieu of column-width. sem consequat purus fermentum tincidunt. Donec vestibulum felis ut metus ultrices a vulputate felis rhoncus eum ivolonortis column-width/column-gap Browser Support: Sunday, July 19, 2009
  50. @font-face Allows a font file to be associated @font-face { font-family: Helvy; with a font name for later use in src: local("Helvetica Neue Bold"), font-family declarations. local("HelveticaNeue-Bold"), url(MgOpenModernaBold.ttf); font-weight: bold; IE supports only .eot Embedded } OpenType files, while the other p.specialFont { font-family: Helvy, sans-serif; } browsers support any TTF and OTF font files. column-width/column-gap Browser Support: Sunday, July 19, 2009
  51. TRANSFORMATION Sunday, July 19, 2009
  52. rotate Rotates the selected element at the defined angle, defined in degrees. The rotation doesn’t affect layout, transform: rotate(30deg); and elements that are transformed are treated similarly to position:relative. rotate Browser Support: Sunday, July 19, 2009
  53. scale Scales the element in question based on the specified unit-less numbers given for the X and Y axes. If only one number is given, it transform: scale(0.5,2.0); is applied to both axes. scale Browser Support: Sunday, July 19, 2009
  54. skew Skews the element around the X and Y axes by the specified angles, in degrees. If it’s only one number, the Y axis is assumed to be zero. transform: skew(-30deg); scale Browser Support: Sunday, July 19, 2009
  55. translate Moves the object along each axis by the length specified. The unit can be anything accepted as a length in CSS, such as px, em, percentages, transform: translate(30px, 0); etc. translate Browser Support: Sunday, July 19, 2009
  56. 3D TRANSFORMATIONS PERSPECTIVE The distance, in pixels, of the z=0 plane from the viewer. MATRIX3D Allows creation of a 3d transformation matrix. ROTATE3D Rotate the matched element in three dimensions. SCALE3D Performs a three-dimensional scale operation. TRANSLATE3D Allows the matched element to be moved along three axes. Sunday, July 19, 2009
  57. BROWSER PREFIXES Sunday, July 19, 2009
  58. FIREFOX: -moz-box-shadow: SAFARI: -webkit-box-shadow: OPERA: -o-box-shadow: IE: -ms-box-shadow: Sunday, July 19, 2009
  59. READY YET? When is it Time to Use These? Sunday, July 19, 2009
  60. THE FUTURE Sunday, July 19, 2009
  61. IMPLEMENTATION trumps SPECIFICATION Sunday, July 19, 2009
  62. PROGRESSFUL DEGRAHANCEMENT ™ Sunday, July 19, 2009
  63. In the end, be mindful of BUSINESS AND USER GOALS Sunday, July 19, 2009
  64. A Healthy Dose of CRITICISM Sunday, July 19, 2009
  65. MORE RESOURCES HTML 5 Doctor http://html5doctor.com/ HTML 5 Spec http://dev.w3.org/html5/spec/Overview.html ALA Article http://www.alistapart.com/articles/previewofhtml5 Bruce Lawson http://www.brucelawson.co.uk/category/ accessibility-web-standards/html5/ Your Presenters Feel free to follow up with Jackson & Jason Sunday, July 19, 2009
  66. FIN Sunday, July 19, 2009
  67. Get in Touch! SpeakerRate: spkr8.com/t/1250 Twitter: @whafro & @jgarber Sunday, July 19, 2009
  • revamore

    Oct. 28, 2021
  • AnkitManda

    Nov. 22, 2020
  • YashJethavaYJ

    Oct. 1, 2020
  • victorferreira

    Mar. 9, 2020
  • RaviParmar81

    Dec. 19, 2019
  • ValliDevi1

    Dec. 14, 2019
  • Kevalpatel4498

    May. 3, 2019
  • PauloRobertodeAssis1

    Mar. 11, 2019
  • ankit11102

    Jan. 31, 2019
  • Naimulislam16

    Mar. 8, 2018
  • MohammadJawaad

    Feb. 11, 2018
  • sheaupingtu

    Jan. 28, 2018
  • IrwanRuswandi1

    Jan. 8, 2018
  • FabioMazzaglia

    Jan. 7, 2018
  • Tranhoangtuan3

    Nov. 23, 2017
  • ThandarHtay

    Nov. 22, 2017
  • suliamanagha

    Sep. 27, 2017
  • JyotiPandey68

    Sep. 11, 2017
  • DJCuba

    Aug. 14, 2017
  • MyoMinHtun3

    Aug. 4, 2017

A presentation to Refresh DC about the emerging HTML 5 and CSS 3 standards, namely about aspects that are beginning to become applicable to web design and development. Given by Jason Garber and M. Jackson Wilkinson.

Views

Total views

206,865

On Slideshare

0

From embeds

0

Number of embeds

57,638

Actions

Downloads

8,762

Shares

0

Comments

0

Likes

444

×