Building a Better Web with HTML5 and CSS3
3 likes838 views
HTML5 and CSS3 provide improvements to building the web. HTML5 introduces more semantic tags that improve accessibility and cleaner code. It also provides native support for video, audio, local storage and better interactions. CSS3 enhances presentation. HTML5 is supported across modern browsers and on mobile, allowing responsive design. New features like canvas and WebGL enable graphic effects. Geolocation allows accessing a user's location with permission. HTML5 aims to make the web platform more powerful and flexible.
![Cross Browser Support
● Modern, popular browsers all support HTML5 (Chrome,
Firefox, Safari IE9 and Opera)
● Even the really old and annoying ones, er, IE6 can use it. We
can just simply add a Javascript shiv that will allow them to
use the new elements:
<! --[if it IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"
>
<! [endif] -->](https://image.slidesharecdn.com/html5-termpaper-111204082241-phpapp01/85/Building-a-Better-Web-with-HTML5-and-CSS3-18-320.jpg)
Building a Better Web with HTML5 and CSS3
- 1. Building a Better Web with HTML5 and CSS3 By: Karambir Singh Nain
- 2. How web works today ● HTML - Matter on the page ● CSS - Appearance of elements ● Javascript - Add interavtivity to Page
- 3. XHTML 4.0 XHTML 4.01 HTML5 4.01 2.0 3.0 4.0 95 96 97 9 8 9 9 00 01 02 03 05 07 09 11 19 19 19 19 19 20 20 20 20 20 20 20 20 Evolution of HTML Markups
- 4. HTML5 ??? ● It is next version of HTML ● Work started in 2008 ● 1st working draft released in June 2011 ● Is expected to completed in 2012
- 5. Question arises What so peculiar about HTML5?
- 6. Reasons ● Accessibility ● Video & Audio Support ● DocType ● Smarter Storage ● Better Interactions ● Legacy/Cross Browser support ● Mobile ● Canvas ● WebGL ● GeoLocation
- 7. Accessibility More Semantic HTML tags Cleaner Code
- 8. Earlier
- 9. <div id="header"> <div id="nav"> <div id="article"> <div id="sidebar"> <div id="footer">
- 10. Now
- 11. <header> <nav> <section> <aside> <footer>
- 12. Video & Audio Support ● Forget Flash ● No <embed> and <object> tags ● Inbuilt Media tags
- 14. DocType earlier: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> now: <!DOCTYPE HTML>
- 15. Local Storage 1. Little bit of a cross between regular old cookies and a client-side database 2. Better than cookies because a. it allows for storage across multiple windows b. it has better security and performance c. data will persist even after the browser is closed 3. Because it is stored at client-side we don’t have to worry about the user deleting cookies
- 16. Local Storage - great 1. It is making web apps possible without third party plugins. 2. Being able to store data in the user’s browser allows you to easily create those app features like: ○ storing user information ○ the ability to cache data ○ the ability to load the user’s previous application state.
- 17. Better Interactions ● Drag and Drop (DnD) ● Browser history management ● Document editing ● Timed media playback
- 18. Cross Browser Support ● Modern, popular browsers all support HTML5 (Chrome, Firefox, Safari IE9 and Opera) ● Even the really old and annoying ones, er, IE6 can use it. We can just simply add a Javascript shiv that will allow them to use the new elements: <! --[if it IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" > <! [endif] -->
- 19. Mobile Friendly ● Mobile devices are taking over the world ● HTML5 is the most mobile ready tool for developing mobile sites and apps ● Mobile browsers have fully adopted HTML5 so creating mobile ready projects is as easy as designing and constructing for their smaller touch screen displays — hence the popularity of Responsive Design.
- 20. Some Great meta tags: ● Viewport: allows you to define viewport widths and zoom settings ● Full screen browsing: IOS specific values that allow Apple devices to display in full screen mode ● Home Screen Icons: like favicons on desktop, these icons are used to add favorites to the home screen of an IOS and Android mobile device
- 21. Canvas ● Canvas consists of a drawable region defined in HTML code with height and width attributes. ● JavaScript code may access the area through a full set of drawing functions similar to those of other common 2D APIs, thus allowing for dynamically generated graphics. ● uses of canvas include building graphs, animations, games, and image composition.
- 22. The following code creates a Canvas element in an HTML page: <canvas id="example" width="200" height="200"> This text is displayed if your browser does not support HTML5 Canvas. </canvas> Using JavaScript, you can draw on the canvas: var example = document.getElementById ('example'); var context = example.getContext('2d'); context.fillStyle = "rgb(255,0,0)"; context.fillRect(30, 30, 50, 50);
- 23. Canvas vs SVG ● Earlier standard for ● Once the figure is drawing shapes in drawn, the fact that it browsers. was drawn is forgotten ● It is at a fundamentally by the system. higher level because ● If its position were to be each drawn shape is changed, the entire remembered as an scene would need to be object in a scene graph redrawn. or DOM ● It is also possible to ● If attributes of an SVG paint a canvas in layers object are changed, the and then recreate browser can specific layers. automatically re-render the scene.
- 24. WebGL ● Web-based Graphics Library is a software library that extends the capability of the JavaScript programming language to allow it to generate interactive 3D graphics within any compatible web browser. ● WebGL code executes on a computer display card's Graphics Processing Unit (GPU), which must support shader rendering.
- 25. Applicaions in HTML5 ● HTML5 syntax and related Web-GL technology can help us build and play HD games using Graphics Card of Computer ● Will increase usage of web and cloud computing ● No need of increased Hard Disk Space
- 26. Native GeoLocation navigator.geolocation.getCurrentPosition( function(position){ position.coords.latitude, position.coords.longitude } ); and you are can access the location of user.
- 27. Reference ● http://html5readiness.com/ ● http://caniuse.com/ ● http://beta.html5test.com/
- 28. Documentation ● http://dev.w3.org/html5/spec-author-view/ ● https://developer.mozilla.org/en/HTML/HTML5 ● http://www.whatwg.org/specs/web- apps/current-work/multipage/ ● http://diveintohtml5.org/
- 29. Tools ● http://www.modernizr.com/ ● http://code.google.com/p/html5shiv/ ● http://html5boilerplate.com ● /http://gradients.glrzad.com/ ● http://code.google.com/speed/tools.html
- 30. Community ● http://html5doctor.com/ ● http://blog.whatwg.org/ ● http://ajaxian.com/ ● http://www.chromeexperiments.com/ ● http://hacks.mozilla.org/
- 31. Books ● http://www.amazon.com/HTML5-Up- Running-Mark-Pilgrim/dp/0596806027 ● http://introducinghtml5.com/
- 32. Thank You