DV10 HTML5: The Future of Web Development


Published on

This session took the audience through some of the context of how HTML5 came about, the common misconceptions, new elements, Web API's and techniques made available in the new standard. It also touched on how to utilize HTML5 in the real world through showcasing Responsive Design Website using CSS3 media query & Polyfills and HTML5 Windows 8 Application.

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • http://html5demos.com/drag
  • http://robertnyman.com/html5/forms/input-types.htmlhttp://ie.microsoft.com/testdrive/HTML5/Forms/default.html
  • http://people.w3.org/mike/localstorage.html
  • http://www.cssportal.com/css3-rounded-corner/
  • http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_3d-transforms.htm
  • DV10 HTML5: The Future of Web Development

    1. 1. The HTML 5 doctype is way <!DOCTYPE html>easier than any other doctype.Ever! <html> vs. <html xmlns="http://www.w3.org/1999/xhtml">Just type the parts you remember,and you’ll probably be right.
    2. 2. Provides new semantic vocabularyfor parts of a page previouslyserved by DIVs with ID and Classattributes.
    3. 3. Allows for associating captionswith embedded content, includingvideos, audio, pullquotes, orimages.
    4. 4. <video src="test.ogg" autoplay="autoplay" controls="controls">Allows for associating captions Your browser does not support the video element. This could also include object andwith embedded content, including embed codes for legacy browsers.videos, audio, or images. </video>
    5. 5. <time datetime=“17:00”>starting at 5 pm</span>Xfnhcard
    6. 6. <span data-conference-time=“1700”>starting at 5 pm</span><li data-original-id=“” =“1700”>5 pm</li>
    7. 7. METER Contained content is a measurement, like length.PROGRESS Contains current process toward a goal, like a percentage.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.
    8. 8. 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.
    9. 9. Allows objects (images and links,by default) to be dragged andthendropped onto a target.The target is enabled by cancelingthe ‘dragover’ or ‘dragenter’ (forIE) events forthe drop target. Then listen for a‘drop’ event which contains a‘dataTransfer’ object with info.
    10. 10. The sessionStorage DOM attributestores session data for a singlewindow, like cookies on crack. <inputThe localStorage DOM attribute type="checkbox"allows each site to store onchange=" localStorage.insurance=checkedmegabytes of data across sessions "to improve performance. />Both methods store only strings.
    11. 11. <canvas id="canvas" width="150" height="150"> fallback content </canvas>Provides an API for drawingdirectly in the browser window, function draw() {using instructions that define var canvas = document.getElementById("canvas");vector-based shapes and lines. if (canvas.getContext) { var ctx = canvas.getContext("2d");This allows SVG-like graphics to ctx.fillStyle = "rgb(200,0,0)";be created on the fly in the ctx.fillRect (10, 10, 55, 50); ctx.fillStyle = "rgba(0, 0, 200, 0.5)";browser, with fallback content Ctx.fillRect (30, 30, 55, 50);(like Flash?) provided to legacy }browsers. }
    12. 12. Adjusts the opacity of the selectedelement’s presentation on screen.Takes values between 0.0 (fullytransparent) and 1.0 (fullyopaque)
    13. 13. Like RGB color definitions, butallows a fourth field, defining the div { color: rgb(0,255,0); }alpha value of the color beingapplied.Like opacity, the alpha value isbetween 0.0 (fully transparent)and 1.0 (fully opaque). div { color: rgba(0,255,0,0.5); }
    14. 14. Border-radiusBox-shadow
    15. 15. Rotates the selected element atthe defined angle, defined indegrees.The rotation doesn’t affect layout, transform: rotate(30deg);and elements that aretransformed are treated similarlyto position:relative.
    16. 16. Scales the element in questionbased on the specified unit-lessnumbers given for the X and Y transform: scale(0.5,2.0);axes. If only one number isgiven, it is applied to both axes.
    17. 17. 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 operationTRANSLATE3D Allows the matched element to be moved along three axes.
    18. 18. HTML 5 Doctor http://html5doctor.com/HTML 5 Spec http://dev.w3.org/html5/spec/Overview.htmlALA Article http://www.alistapart.com/articles/previewofhtml5IE9 Experience http://beautyoftheweb.com/Polyfills https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
    19. 19. Rate this session by sending an SMS to:4123 (Etisalat and Du subscribers)+971 55 142 5789 (Other subscribers) Rating Message (case insensitive) Excellent poll dv105 Good poll dv104 Acceptable poll dv103 Poor poll dv102 Very poor poll dv101 44