Html5 for beginners

n|u
Structure
Session 1
Introduction
HTML 5 Basics
Session 2
What’s inn for me ….Developer ?
Session 3
What’s inn for me …. Code reviewer/ Webtesting ?
Session 4
What’s inn for me …. Hacker ?

n|u
 New Standard for HTML
 work in progress..
 Supported Browsers

n|u
Objective
 New Feature - HTML, CSS, DOM, and JavaScript
 Error handling
 Markup vs Scripting
 Independence
How it all Started?
W3C & WHATWG(WebHypertext Application Technology Working Group )

n|u
http://www.youtube.com/watch?v=mzPxo7Y6JyA

n|uHTML5 - New Features
 Drag and Drop
 <canvas> vs SVG
 HTML5 Geolocation
 Webforms 2.0
 local storage & session storage
 HTML5 Cache
 Web sockets
 Webworkers
 Server Sent events

n|u
What is SVG?
Vector based graphics
 Resolution independence
 W3C recommendation
 Dom Based
What is Canvas?
 Speed
 Text rendering capabilities
 Graphics quality – Max and Min
 Animation and accessibility support
Graphics

n|u
Core methods
 openDatabase
 transaction
 executeSql
Operations
 Read
 Insert
Web SQL

n|u
Types
 Session
 local
Operations
 CPU Utilization
 Threads
 Terminate
 Import scripts
Web Storage
Web Workers

n|uHTML5 <keygen> Element
The purpose of the <keygen> element is to
provide a secure way to authenticate
users.
The <keygen> tag specifies a key-pair
generator field in a form.
When the form is submitted, two keys are
generated, one private and one public.
The private key is stored locally, and the
public key is sent to the server. The public
key could be used to generate a client
certificate to authenticate the user in the
future.

n|uWhat is HTML5 Web Storage?
With HTML5, web pages can store data locally within the
user's browser.
Earlier, this was done with cookies. However, Web Storage is
more secure and faster. The data is not included with every
server request, but used ONLY when asked for. It is also
possible to store large amounts of data, without affecting the
website's performance.
The data is stored in key/value pairs, and a web page can
only access data stored by itself

n|uWhat is Application Cache?
HTML5 introduces application cache, which means that a web application
is cached, and accessible without an internet connection.
Application cache gives an application three advantages:
Offline browsing - users can use the application when they're offline
Speed - cached resources load faster
Reduced server load - the browser will only download updated/changed
resources from the server

n|u
What is a Web Worker?
When executing scripts in an HTML page,
the page becomes unresponsive until the
script is finished.
A web worker is a JavaScript that runs in
the background, independently of other
scripts, without affecting the performance
of the page. You can continue to do
whatever you want: clicking, selecting
things, etc., while the web worker runs in
the background.

n|u
Server-Sent Events - One Way Messaging
A server-sent event is when a web page automatically gets
updates from a server.
This was also possible before, but the web page would have to
ask if any updates were available. With server-sent events, the
updates come automatically.
Examples: Facebook/Twitter updates, stock price updates,
news feeds, sport results, etc.

Html5 for beginners

More Related Content

What's hot (20)

Viewers also liked (12)

Similar to Html5 for beginners (20)

More from n|u - The Open Security Community (20)

Recently uploaded (20)

Html5 for beginners