HTML5 - A Whirlwind Tour of the Future of the Web
•Download as PPTX, PDF•
1 like•617 views
Presentatiuon
Recommended
More Related Content
What's hot
What's hot (18)
Viewers also liked
Viewers also liked (20)
Similar to HTML5 - A Whirlwind Tour of the Future of the Web
Similar to HTML5 - A Whirlwind Tour of the Future of the Web (20)
More from Lohith Goudagere Nagaraj
More from Lohith Goudagere Nagaraj (20)
Recently uploaded
Recently uploaded (20)
HTML5 - A Whirlwind Tour of the Future of the Web
- 2. "HTML5” – More than just HTML5 Lohith G N
- 3. About Me… - Technical Evangelist, Telerik (South India) - Microsoft MVP – ASP.NET/IIS - Bangalore DotNet User Group Member - Decade old in the industry
- 4. WHATWG: HTML is the new HTML5!
- 5. What is “HTML5”? HTML5 is... the future of the web still under development a huge spec, and testing isn’t binary HTML5 is not ... “How To Meet Ladies” version 5 (Credit: @hackatac) Just a marketing message
- 6. The “map” of HTML5
- 7. Specification lifecycle Candidate Proposed First Public Recommendati Working Draft Recommendati Recommendati Working Draft on on on Last Call to call implement
- 8. W3C HTML5 Specification ~1200 print pages Issue Tracker: ~37 open Bug Tracker: ~208 open Mailing list: ~4000 emails/month www.w3.org/TR/html5
- 9. The map of “HTML5” Candidate First Public Recommendati Working Draft Last Call Recommendati Working Draft on on
- 10. A whirlwind tour of “HTML5”
- 11. <!DOCTYPE.. From: HTML 4.01 Strict/Transitional/Frameset XHTML 1.0 Strict/Transitional/Frameset <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> To HTML5 <!DOCTYPE html>
- 12. <video> Support for the HTML5 <video> element MPEG-4/H.264, can be composited with anything else HTML content, images, SVG graphics Hardware accelerated, GPU-based decoding Supports fallback to different formats (mp4, webm) as well as Flash/Silverlight <video id="myVideo" controls> <source src="videos/video.mp4" type="video/mp4"/> <!–- insert sorry message here or fall back to SL/Flash --> <object type="application/x-silverlight-2"> <param name="source" value="player.xap"> </object> </video>
- 13. <audio> Add audio content to page with native playback, events & controls Relies on browser features Supports fallback to different formats (mp3, aac) <audio src="audio.mp3" id="audioTag" autoplay controls> <!-- Only shown when browser doesn’t support audio --> <!-- You could embed Flash or Silverlight audio here --> </audio>
- 14. SVG Basics XML-based • Scriptable, extensible, easily editable • Easy to apply CSS styles Vector graphics • Resizable without degradation • Vector images are composed of shapes instead of pixels Compression • Fast download Easy debugging • It is just XML!
- 15. Scalable Vector Graphics (SVG) Support for: Full DOM access to SVG elements Document structure, scripting, styling, paths, shapes, colors, transforms, gradients, patterns, masking, clipping, markers, linking and views <svg width="400" height="200" xmlns="http://www.w3.org/2000/svg"> <rect fill="red" x="20" y="20" width="100" height="75" /> <rect fill="blue" x="50" y="50" width="100" height="75" /> </svg> Demo
- 16. Canvas 16 block element, allows drawing 2d graphics using JavaScript Methods for drawing include: paths, boxes, circles, text and rasterized images <canvas id="myCanvas" width="200" height="200"> Your browser doesn’t support Canvas, sorry. </canvas> <script type="text/javascript"> var example = document.getElementById("myCanvas"); var context = example.getContext("2d"); context.fillStyle = "rgb(255,0,0)"; context.fillRect(30, 30, 50, 50); Demo </script>
- 17. SVG or Canvas Characteristic SVG Canvas When to use Highly detailed Programmatic drawing, charts rendering, games Drawing Mode By Runtime By Application DOM Support Each SVG <CANVAS> part of the element part of DOM DOM Animation Manipulating Using direct scripting objects in the in canvas DOM GPU Yes Yes acceleration Performance Best for larger Best for smaller surface and/or surface and/or large small # of objects # of objects Modification Tag, Script & CSS Script only
- 18. GeoLocation 18 Let websites use your location information to improve their services Requires users consent Navigator.geolocation.getCurrentPosition(); Navigator.geolocation.watchPosition(); function getLocation() IP reverse lookup / Wi-Fi triangulation Resolution via { if (navigator.getlocation != undefined) { navigator.getlocation.getCurrentPosition(callBack); } } function callBack(position) { var accuracy = position.coords[“accuracy”]; //in meters var latitude = position.coords[“latitude”]; var longitude = position.coords[“longitude”]; Demo }
- 19. CSS3 2nd largest spec in “HTML5” Major revision to CSS 2.1 CSS 3 Borders & Colors Backgrounds & Shadows WOFF Media queries Selectors Transforms
- 20. CSS3 Borders CSS3 Borders Rounded corners with the border-radius property div.top { border-radius: 152px 304px 228px 152px; border-style: double; border-width: 42px; padding: 12px; }
- 21. CSS3 Colors CSS3 Colors & Transparency Alpha color with rgba() and hsla() color functions Transparency control with the opacity property Full support for CSS3 color keywords div.top { background-color: rgba(155,0,155,0.5) } div.bottom { background-color: hsla(0,100%,50%,0.2); }
- 22. CSS3 Shadows CSS3 Shadows box-shadow property on block elements Inset & Multiple shadows div{… box-shadow: 20px 20px 20px hsla(0,100%,50%,0.2); } div{… box-shadow: 20px 20px 20px hsla(0,100%,50%,0.2), -20px -20px 20px hsla(180,50%,50%,0.8); } Demo
- 23. CSS3 Backgrounds CSS3 Backgrounds Multiple background images per element Comma separated values div{ background-image: url("images/1.jpg"), url("images/2.jpg"), url("images/3.jpg"); background-position: 90px 90px, 60px 60px, 30px 30px; } Demo
- 24. WOFF Fonts & @font-face No longer limited to the “web safe” font list! WOFFs cannot be used outside of page context Web Open Font Format allows you to package and deliver fonts as needed Designed for web use with the @font-face declaration A simple repackaging of OpenType or TrueType font data Source from WOFF Font Subscription Services <style type="text/css"> @font-face { font-family:MyFontName; src: url('FontFile.woff'); } </style> Demo <div style="font: 24pt MyFontName, sans-serif;"> This will render using MyFontName in FontFile.woff </div>
- 25. CSS3 Media Queries Selectively style page based on properties of the display media <link href=“mobile.css" rel="stylesheet" media="screen and (max-width:480px)" type="text/css"/> <link href=“netbook.css" rel="stylesheet" media="screen and (min-width:481px) and (max- width: 1024px)" type="text/css" /> Demo <link href=“laptop.css" rel="stylesheet" media="screen and (min-width:1025px)" type="text/css" />
- 26. CSS Selectors Dynamic Styling Style elements based on parameters such as: Pattern matching: rounded borders for all jpg images Element location: 1st paragraph Many kinds of selectors: Type selectors: all H1 elements Attribute selectors: all autoplay videos Demo
- 27. CSS3 2D Transforms 27 CSS3 2D Transforms Matrix Translate Scale Rotate Skew div { -ms-transform: scale(2, 2) rotate(30deg); } Demo
- 28. DEMO Turning things around Bringing it all together
- 29. “HTML5” What we saw <Audio>, <Video>, SVG, <Canvas>, Geolocation, CSS What we didn’t get to
- 30. Resources www.w3c.org www.beautyoftheweb.in www.ietestdrive.com www.html5labs.com
Editor's Notes
- 18-Jan: W3C announces the new HTML5 logo19-Jan: WHATWG, focused on some of the key Web Apps specs announces that HTML is the new HTML5 and that HTML5 spec is a living document and hence no version numbers are required.
- Like the HTML5 <video> element, the <audio> element allows designers and developers to embed sounds on their sites without having to rely on Flash or Silverlight. The <audio> tag supports industry standard codecs like MP3 and AAC. In the same way the <video> element is scriptable, so is the <audio> tag, allowing you to script the object.
- Scalable Vector Graphics (SVG) are a graphics format that describe vector graphics with an XML-based file format. Unlike rasterized images, instead of drawing individual pixels on a page, vector graphics render based on the shapes defined in the XML file. Because they’re based on shapes instead of pixels, there’s no limit to how they can be zoomed in, there isn’t a loss because of a lack of pixel depth. And since they’re just XML files, they can be included right in your HTML, like you would any other HTML element, and are treated by the browser just like any other HTML element – they’re fully accessible via the DOM and can be scripted and modified as you want.SVG drawings work really well for organizational charts, simple images and line drawings. For example, a flow chart, or business organizational chart. The code on this page shows a very simple example, in our HTML I’ve placed an SVG element, 400 pixels wide by 200 pixels high. Within that SVG element, we’ve drawn two shapes, both rectangles. Almost all browsers today support the basic shapes like rectangles, circles, polygons; as well as paths, colors, gradients, patterns and more.
- The <canvas> element is a part of the HTML5 Standards specification and allows for dynamic scriptable rendering of 2D graphics. The <canvas> element in your HTML defines the drawing area, then through JavaScript, you can get the 2d context and begin dynamically drawing within that region.Much like SVG, you can draw on the page using basic shapes, but you can also easily include rasterized images, videos and other objects. One question that sometimes comes up is the difference between canvas and SVG. The biggest and most important is that with SVG, the drawings are objects within the DOM, where as with canvas, the browser doesn’t remember what’s been drawn and therefore to update the graphic JavaScript needs to redraw the full canvas, instead of just updating the existing object.Demo From IETestDrive.comhttp://iepm/testdrive/Graphics/CanvasPad/http://iepm/testdrive/Performance/FishIE%20tank/http://iepm/testdrive/Performance/MrPotatoGun/http://iepm/testdrive/Performance/AsteroidBelt/http://iepm/testdrive/Graphics/DeepZoom/
- With support for geolocation, Internet Explorer 9 RC enables a web application to access the current geographical location of the PC running Internet Explorer, as specified in the Geolocation API specification. The webpage can then tailor the user experience according to location.
- Internet Explorer 9 adds support for several features of the CSS3 Backgrounds and Borders Module. The most notable new feature, the border-radius properties, is also the most requested CSS border feature.The border-radius properties enable you to curve border corners by essentially “replacing” the hard corners with a quarter-ellipse and specifying the radii of each ellipse.
- CSS3 adds several new ways of defining the opacity of elements, including the opacity CSS property, but also the ability to set the alpha-transparency value when defining colors with the RGBA or HSLA color model. The RGBA color model allows you to specify the amount of red, green and blue as 0-255 values, with the final parameter being the transparency of the element. The alpha transparency value ranges from zero to one, with zero being completely transparent, and one being fully opaque. If you set the alpha transparency to 0.5, the object will allow 50% of the background through. Some designers and developers grew up and are more confortable with the HSLA color model, which is a little different. HSLA stands for hue, saturation, light and alpha transparency. The hue is represented as a color wheel with a value of 0 to 360, where red is 0 (or 360), green is 120, and blue is 240. For example, a pure purple would be 300 (in between the red and the blue). The saturation value, represented as a precentage defines how strong the color is. Lightness defines the how “bright” the color is – where 0% is black, and 100% is pure white. At 50%, the color is at it’s “normal” color.Demo From IETestDrive.com-None-
- Internet Explorer 9 adds support for several features of the CSS3 Backgrounds and Borders Module. The most notable new feature, the border-radius properties, is also the most requested CSS border feature.The border-radius properties enable you to curve border corners by essentially “replacing” the hard corners with a quarter-ellipse and specifying the radii of each ellipse.
- Internet Explorer 9 adds support for several features of the CSS3 Backgrounds and Borders Module. The most notable new feature, the border-radius properties, is also the most requested CSS border feature.The border-radius properties enable you to curve border corners by essentially “replacing” the hard corners with a quarter-ellipse and specifying the radii of each ellipse.
- Better typographic control has been a consistent feature of each new iteration of CSS. At the same time, the lack of an interoperable Web font format can be frustrating. Internet Explorer 9 enhances existing support for CSS fonts to provide compliance with the CSS3 Fonts Module. It also adds support for the Web Open Font Format (WOFF) and raw fonts. WOFF is backed by all of the major browser vendors and font foundries is a repackaging of the OpenType font format – for which there are many tools available to developers for packaging fonts today.No longer are designers and developers limited to the small list of web safe fonts. By using the @font-face, and specifying a source URL for the WOFF font file, the browser downloads the necessary font and uses it as the page designer specifies. Demo From IETestDrive.comhttp://ie.microsoft.com/testdrive/Graphics/WebFonts/http://ie.microsoft.com/testdrive/Graphics/MoreWebFonts/
- The CSS3 Media Queries Module specifies methods to enable web developers to scope a style sheet to a set of precise device capabilities. For instance, you might want to design pages differently for users browsing on a mobile device (that has a tiny screen, limited color palette, low resolution, and so on) versus a netbook (that has a small screen, full color palette, high resolution, and so on) versus a standard computer (with a large screen, full color palette, high resolution, and so on). The full list of media properties supported by CSS3 media queries includes width, height, device-width, device-height, orientation, aspect-ratio, device-aspect-ratio, color, color-index, monochrome, and resolution.Demos From IETestDrive.comhttp://ie.microsoft.com/testdrive/HTML5/85CSS3_MediaQueries/Default.html
- 2D transforms in CSS allow for various transformation to be applied to elements, such as scaling or rotating. It is possible to apply one or many transforms to a single element. This allows for effects such as rotating text or images at an angle, and can be combined with transitions to apply interactive effects such as scaling up elements when the users interacts with them.