An overall brief description about what we can do with HTML5 & CSS3.

1. 1

2. 2
Working as a PHP developer in MFS for more than 4 years.
My skill set includes PHP, MySQL, HTML, HTML5, CSS, CSS3, jQuery, AJAX, Javascript,
XML, ZendFramework, GoogleAnalytics, YouTubeAPI, ZendFramework2, Twitter
Bootstrap, JSON
Zend Certified Engineer (ZCE) - Zend PHP 5.3 Certification
Oracle Certified Professional - OCP MySQL 5 Developer - Part 1 - 1Z0-871
Microsoft Certified Professional - MCP - Programming in HTML5 with Javascript & CSS3

3. 3
What is HTML5?
Advantages of HTML5 over HTML4
Structure of a Web page
Web Forms
SVG
MathML
Web Storage
Web SQL
WebSocket
Canvas
Audio & Video
Geolocation
Web Workers
Introduction to CSS3
Reference Links
Q & A
Thank You!!

4. 4

5. 45
5
Successor of HTML4.01
New tags, features and APIs
More clarifications
Standardises many features

6. 6

7. 7
Backward Compatibility
Accessibility
Cleaner code
Smarter Storage
Game Development
Cross Browser Support
Mobile!! Mobile!! Mobile!!

8. 8

9. 9
<header>
<article>
<header>
<nav> <aside>
<article>
<footer>
<footer>

10. 10

11. 11
New form elements (datalist, keygen, output)
New input types (email, url, number, tel, search, color, date,
time, datetime, datetime-local, month, week, range)
New input attributes (autocomplete, autofocus, min & max,
placeholder, pattern, required, step, formtarget, …)
New attribute syntax
New media elements (audio, video, embed, source, track)
HTML5 graphics (canvas, SVG)

12. 12

13. 13
Scalable Vector Graphics with W3C recommended
Used to describe 2D-graphics using XML
XML rendered by an SVG viewer.
Mainly used for Pie charts, Two-dimensional graphs in an X,Y
coordinate system etc.
Do not loose any quality on zoomed or resized
Every element and every attribute can be animated

14. 14

15. 15
Mathematical Markup Langauge
Designed to present and capture mathematics for Web
Used inside <math>...</math> tags

16. 16

17. 17
Storage prior to HTML5 Web Storage
userData for Microsoft Internet Explorer
Flash Cookies by Adobe
Gears by Google
dojox.storage

18. 18
Web Storage as a standardised and native API
Easily retrievable javascript objects
2 ways to store data on the client side
a) Web SQL database
b) Web Storage - key/value pair storage system
i) local storage
ii) session storage

19. 19
Session Storage vs Local Storage
Session Storage Local Storage
Values persist only as long as the window or
tab in which they were stored.
Values are only visible within the window or
tab that created them.
Values persist beyond window and browser
lifetime.
Values are shared across every window or tab
running at the same origin.

20. 20

21. Database API
Store complex relational data and perform simple or complex
queries on those data
Brings SQL to the client side
It has 3 main methods
21
1) openDatabase: It creates the database object either using
existing database or creating new one.
2) transaction: It gives us the ability to control a transaction
and performing either commit or rollback based on the situation.
3) executeSql: This method is used to execute actual SQL query.

22. 22

23. 23
Bidirectional communication technology
Operates over a single socket
Exposed via a JavaScript interface
Once the Web Socket connection made with the web server,
user can send the date from browser to server using send()
method and receive data from server to browser by an
onmessage event handler

24. 24

25. 25
Overview of Graphics in Browsers
Static images : <img> tag
Dynamic graphics? No native support
Current solution -
- use plug-ins such as Flash, Silverlight etc.
- HTML5 <canvas> element

26. 26
Canvas vs SVG
Canvas SVG
Advantages
−> High performance graphics
−> Pixel−level manipulation
−> Constant performance
depending on the resolution used
−> Canvas drawing surface can be
saved as an image file
-> Vector-based, scalable to any
resolution
-> Good support for animations
-> DOM manipulated elements
Drawbacks
-> No API for animation, you have to
redraw every time
-> Pixel manipulation - impossible
for shape you create to respond to
events
-> Not scalable
-> Not suited for user interfaces
-> Works with the DOM, so with a lot of
elements, it gets slower
-> Not suited for gaming application

27. 27

28. 28
Current scenario
Based on plug-ins i.e. Silverlight, Flash
Browser uses the <object> tag and can’t differentiate w.r.t.
audio/video
An end user might not have the plug-in installed/ not
permitted
Plug-ins are not cross-platform
Flash - not supported on iOS

29. 29
With HTML5
Use of<audio> and <video> tags
Need to set src attribute to identify the media source
Include a controls attribute
It supports
- Audio Video Interleave (.avi)
- Flash Video (.flv)
- MPEG 4 (.mp4)
- Matroska (.mkv)
- Ogg (.ogv)

30. 30

31. 31
Geographic and Location
Share user’s location, find direction etc.
There are many ways to share the location
- GPS
- Location inferred from network, IP address, wifi
- Cell IDs
- User Input
Sharing user location -> a privacy concern!!!
User must give explicit permission to the user agent
Some privacy concern will still present
- How long the data will be stored
- Is it shared with other sites
- Can the location data be updated/deleted
by end user?

32. 32

33. 33
Current scenario
Runs in single-threaded environment
Application could be unresponsive
Solution???
- Break a big operation
- Use timer

34. 34
Runs in single-threaded environment
Application could be unresponsive
Solution???
- Break a big operation
- Use timer

35. 35

36. 36
Latest standard of CSS
Completely backwards compatible
Split up into modules
- Selectors
- Box Models
- Background & Borders
- Text effect
- 2D Transformations
- Animations
- Multiple column layout

37. http://www.slideshare.net/pravasinisahoo9/html5-css3-a-startup
http://pravasini.wordpress.com/
http://www.tutorialspoint.com/html5/index.html
http://html5hub.com/
http://html5doctor.com/
http://www.w3schools.com/html/html5_intro.asp
37

38. 38

39. 39