Building a Better Web with HTML5 and CSS3

  • 914 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
914
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
23
Comments
0
Likes
2

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

Transcript

  • 1. Building a BetterWebwith 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 1119 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 arisesWhat so peculiar aboutHTML5?
  • 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
  • 13. example<video src="url" width="640px"height="380px"autoplay />
  • 14. DocTypeearlier:<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">now:<!DOCTYPE HTML>
  • 15. Local Storage1. Little bit of a cross between regular old cookies and a client-side database2. 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 closed3. Because it is stored at client-side we don’t have to worry about the user deleting cookies
  • 16. Local Storage - great1. 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 inan HTML page:<canvas id="example" width="200" height="200">This text is displayed if your browser does notsupport 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 cards 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 GeoLocationnavigator.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