Best HTML5 Slides for teaching beginners

1. -Saurabh Bhatia, CEO – Safew Labs
- Ritesh Ambastha, CEO – iWillStudy.com
Session 1 on 17th Feb 2012, NIRMA University

2. Hello Participants!

HTML5 is The New
HTML Standard!

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. 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. 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. 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. Minimum HTML5 Document

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. Let's start with
some basic
concepts!

10. HTML5 - Multimedia &
Graphics!
Let's be honest, everyone likes
lasers, 3D effects, and
explosions.
Let's Explore!

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. HTML5 - Offline And
Storage!
Offline web?! Not an
oxymoron anymore.
Let's Explore!

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. 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. 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
 It's a performance booster
 It's an easier programming model, with
no server infrastructure required

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. PERFORMANCE
Faster, Higher,
Stronger!

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. Performance - Themes
Store Locally Data stored on the client is
quicker to access than data
stored on the server.
Process in the background Anything that doesn't 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. EASIER DEVELOPMENT
...Because we’d rather play
games than rewrite that
app for yet another
device.

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. REACH

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. SECURITY
Yes, you are safe!
No more pirates :)

25. Security
 Better Security Design for HTML5 APIs.
 More Secure Browsers
 Sandboxing
 Multi-Process Architecture
 Developments in HTTP
 Security Policies
 Safer Web Apps

26. LOWER
COSTS

27. LOWER COSTS AND EASIER
MAINTENANCE
 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. LOCAL FILE ACCESS
The internet and the
local file system,
together at last!

29. Local File Access
 SANDBOXING - Web apps can create, read,
navigate, and write to a sandboxed section
of the user's local file system.
 HTML5 provides very powerful APIs to
interact with binary data and a user's local
file system.
 HTML5 is broadly supported on all modern
desktop browsers and major mobile devices

30.  PRESENTATION
 Ooh! Shiny!

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. Thank You
Keep in Touch:
www.facebook.com/iwillstudy
Join our Study-Group:
http://www.iwillstudy.com/group/html5