0
-Saurabh Bhatia, CEO – Safew Labs- Ritesh Ambastha, CEO – iWillStudy.com            Session 1 on 17th Feb 2012, NIRMA Univ...
Hello Participants!HTML5 is The NewHTML Standard!
What is HTML5? HTML5 will be the new standard for  HTML. The previous version of HTML, HTML 4.01,  came in 1999. HTML5 ...
How Did HTML5 Get Started?   HTML5 is a cooperation between    the W3C and the WHATWG. W3C - World Wide Web Consortium ...
Chronicle   May 1994 HTML+ Released , first version to be used by    WWW   July 1994 HTML2 Released , first standard doc...
Some rules for HTML5   New features should be based on HTML, CSS,    DOM, and JavaScript   Reduce the need for external ...
Minimum HTML5 Document
HTML5 New Features   The <canvas> element for 2D drawing   The <video> and <audio> elements for media    playback   Sup...
Lets start with some basic concepts!
HTML5 - Multimedia & Graphics!Lets be honest, everyone likes lasers, 3D effects, and explosions.                      Let...
Do wonders with HTML5   With HTML5, the browser has become a full-fledged    platform for games, animation, movies—anythi...
HTML5 - Offline And Storage!Offline web?! Not an oxymoron anymore.               Lets Explore!
Disconnected? No issues at all !   HTML5 APIs that let you create apps that work even    when they’re not connected.   A...
HTML5 Features - Offline   HTML5 and related specs introduce a    number of features to make offline web    apps a realit...
HTML5 Features - Storage When web developers think of storing  anything about the user, they immediately  think of upload...
Offline Technologies:   Web Storage: simply provides a key-value    mapping, e.g. localStorage["name"] =    username;.  ...
PERFORMANCEFaster, Higher, Stronger!
Performance: Interesting!   HTML5 enables web apps to be more responsive   Offline APIs are not just for storing files l...
Performance - ThemesStore Locally               Data stored on the client is                            quicker to access ...
EASIER DEVELOPMENT...Because we’d rather play  games than rewrite that  app for yet another  device.
Easier Development   Code Portability     Enter HTML5. It simplifies your development cycle by letting       you use the...
REACH
BROAD REACH   No other platform can match the user base of    HTML5.   Connect with users wherever they are by creating ...
SECURITYYes, you are safe! No more pirates :)
Security Better Security Design for HTML5 APIs. More Secure Browsers     Sandboxing     Multi-Process  Architecture   ...
LOWER COSTS
LOWER COSTS AND EASIERMAINTENANCE   Lower Overhead       While desktop apps must be installed separately on each        ...
LOCAL FILE ACCESSThe internet and the  local file system,  together at last!
Local File Access SANDBOXING - Web apps can create, read,  navigate, and write to a sandboxed section  of the users local...
   PRESENTATION       Ooh! Shiny!
Presentation You can create visual enhancements like  rounded corners, gradients, and shadows. Presentation can all be d...
Thank YouKeep in Touch:www.facebook.com/iwillstudyJoin our Study-Group:http://www.iwillstudy.com/group/html5
Upcoming SlideShare
Loading in...5
×

Html5 workshop part 1

1,660

Published on

Best HTML5 Slides for teaching beginners

Published in: Education, Technology, Design
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,660
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
131
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "Html5 workshop part 1"

  1. 1. -Saurabh Bhatia, CEO – Safew Labs- Ritesh Ambastha, CEO – iWillStudy.com Session 1 on 17th Feb 2012, NIRMA University
  2. 2. Hello Participants!HTML5 is The NewHTML Standard!
  3. 3. What is HTML5? HTML5 will be the new standard for HTML. The previous version of HTML, HTML 4.01, came in 1999. HTML5 is still a work in progress. However, the major browsers support many of the new HTML5 elements and APIs.
  4. 4. How Did HTML5 Get Started? HTML5 is a cooperation between the W3C and the WHATWG. W3C - World Wide Web Consortium WHATWG - Web Hypertext Application Technology Working Group
  5. 5. Chronicle May 1994 HTML+ Released , first version to be used by WWW July 1994 HTML2 Released , first standard doctype defined November 1994 Netscape comes to Life, WWW consortium formed March 1995 HTML 3 Released November 1997 HTML Version 3.2 released November 1998 HTML4, the longest Running version Released April 2010 HTML5 enters mainstream , to be in active development till 2014
  6. 6. Some rules for HTML5 New features should be based on HTML, CSS, DOM, and JavaScript Reduce the need for external plugins (like Flash) Better error handling More markup to replace scripting HTML5 should be device independent The development process should be visible to the public
  7. 7. Minimum HTML5 Document
  8. 8. HTML5 New Features The <canvas> element for 2D drawing The <video> and <audio> elements for media playback Support for local storage New content-specific elements, like <article>,<footer>, <header>, <nav>, <sect ion> New form controls, like calendar, date, time, email, url, search
  9. 9. Lets start with some basic concepts!
  10. 10. HTML5 - Multimedia & Graphics!Lets be honest, everyone likes lasers, 3D effects, and explosions. Lets Explore!
  11. 11. Do wonders with HTML5 With HTML5, the browser has become a full-fledged platform for games, animation, movies—anything graphical. Lighting and shadows, reflections, and rich textures result in realistic compositions. 3D CSS, vector graphics (canvas and SVG), and WebGL turbocharge web apps with amazing 3D graphics and special effects. Rich audio APIs and low-latency networking of WebSockets—together with the graphical APIs and technologies.
  12. 12. HTML5 - Offline And Storage!Offline web?! Not an oxymoron anymore. Lets Explore!
  13. 13. Disconnected? No issues at all ! HTML5 APIs that let you create apps that work even when they’re not connected. Application cache, localStorage, sessionStorage, IndexedDB, File System and online and offline events enable apps to “amphibiously” work with or without online connection. Users can even download large files (greater than 1 GB) in full or in part for later offline viewing.. Rich audio APIs and low-latency networking of WebSockets—together with the graphical APIs and technologies.
  14. 14. HTML5 Features - Offline HTML5 and related specs introduce a number of features to make offline web apps a reality: application cache localStorage web SQL & indexed database online/offline events
  15. 15. HTML5 Features - Storage When web developers think of storing anything about the user, they immediately think of uploading to the server. Make your app work when the user is offline Its a performance booster Its an easier programming model, with no server infrastructure required
  16. 16. Offline Technologies: Web Storage: simply provides a key-value mapping, e.g. localStorage["name"] = username;. Web SQL Database: gives you all the power - and effort - of a structured SQL relational database. Indexed Database: is somewhere in between Web Storage and Web SQL Database. File Access: s an API for reading file content in JavaScript.
  17. 17. PERFORMANCEFaster, Higher, Stronger!
  18. 18. Performance: Interesting! HTML5 enables web apps to be more responsive Offline APIs are not just for storing files locally, they can also improve performance. You can cache pages that users are likely to click. Web Workers - lets you run multiple processes in the background. Open-sourced JavaScript interpreter for Google Chrome—runs faster than Python.
  19. 19. Performance - ThemesStore Locally Data stored on the client is quicker to access than data stored on the server.Process in the background Anything that doesnt help the user see a response to their action should be performed in the background.Minimize connections Each connection requires work for setup and teardown.Decrease bandwidth Less bandwidth means a faster response.
  20. 20. EASIER DEVELOPMENT...Because we’d rather play games than rewrite that app for yet another device.
  21. 21. Easier Development Code Portability  Enter HTML5. It simplifies your development cycle by letting you use the same technology stack across multiple platforms and devices. Single Sourcing-ish  With HTML5, you can have a single technology stack that you fine-tune for different browsers. You don’t have to rewrite things from scratch, port anything, or maintain entirely separate code bases for each device you support. Approachability  HTML5 technologies—JavaScript, CSS, and HTML—are easier to learn for some developers.
  22. 22. REACH
  23. 23. BROAD REACH No other platform can match the user base of HTML5. Connect with users wherever they are by creating HTML5 apps that can be deployed across multiple platforms and a wide range of devices. Whether you are running an enterprise, creating games, or developing personal apps HTML5 is broadly supported on all modern desktop browsers and major mobile devices
  24. 24. SECURITYYes, you are safe! No more pirates :)
  25. 25. Security Better Security Design for HTML5 APIs. More Secure Browsers  Sandboxing  Multi-Process Architecture  Developments in HTTP  Security Policies Safer Web Apps
  26. 26. LOWER COSTS
  27. 27. LOWER COSTS AND EASIERMAINTENANCE Lower Overhead  While desktop apps must be installed separately on each computer, web apps are just one click away. Better User Experience.  Users are assured that their apps are always up to date. Device Agnosticism.  Users can just open the browser on another device and instantly access core apps and critical data. Enterprise Solution.  Having one code base for multiple devices, the ease of simultaneous deployment and upgrade, simplified data migration and backup make HTML5 an excellent platform for businesses.
  28. 28. LOCAL FILE ACCESSThe internet and the local file system, together at last!
  29. 29. Local File Access SANDBOXING - Web apps can create, read, navigate, and write to a sandboxed section of the users local file system. HTML5 provides very powerful APIs to interact with binary data and a users local file system. HTML5 is broadly supported on all modern desktop browsers and major mobile devices
  30. 30.  PRESENTATION  Ooh! Shiny!
  31. 31. Presentation You can create visual enhancements like rounded corners, gradients, and shadows. Presentation can all be done with only CSS3 and not a single lick of JavaScript CSS3 Transformations allow you to apply rotations, scales, skews and translations to any DOM element with simple styles. Applying 3D transforms is simple too.
  32. 32. Thank YouKeep in Touch:www.facebook.com/iwillstudyJoin our Study-Group:http://www.iwillstudy.com/group/html5
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×