Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Building a Better Web

Building a Better Web

Featuring HTML5 and other technologies that are here to change how we design and interact with users on web

Karambir Singh Nain

May 01, 2012
Tweet

More Decks by Karambir Singh Nain

Other Decks in Programming

Transcript

  1. How web works today • HTML - Matter on the

    page • CSS - Appearance of elements • Javascript - Add interavtivity to Page
  2. 1996 1999 2001 2002 2003 2005 2007 2009 2011 1997

    1998 2000 1995 4.0 2.0 4.01 3.0 XHTML 4.0 HTML5 XHTML 4.01 Evolution of HTML Markups
  3. HTML5 ??? • It is next version of HTML •

    Work started in 2008 • 1st working draft released in June 2011 • Is expected to completed in 2012
  4. Reasons • Accessibility • Video & Audio Support • DocType

    • Smarter Storage • Better Interactions • Legacy/Cross Browser support • Mobile • Canvas • WebGL • GeoLocation
  5. Now

  6. Video & Audio Support • Forget Flash • No <embed>

    and <object> tags • Inbuilt Media tags
  7. 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>
  8. 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
  9. 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.
  10. Better Interactions • Drag and Drop (DnD) • Browser history

    management • Document editing • Timed media playback
  11. 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] -->
  12. 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.
  13. 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
  14. 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.
  15. 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);
  16. Canvas vs SVG • Earlier standard for drawing shapes in

    browsers. • It is at a fundamentally higher level because each drawn shape is remembered as an object in a scene graph or DOM • If attributes of an SVG object are changed, the browser can automatically re-render the scene. • Once the figure is drawn, the fact that it was drawn is forgotten by the system. • If its position were to be changed, the entire scene would need to be redrawn. • It is also possible to paint a canvas in layers and then recreate specific layers.
  17. 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.
  18. 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