introduction to html5 & css3
DESCRIPTION
An overall brief description about what we can do with HTML5 & CSS3.TRANSCRIPT
1
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 CertificationOracle Certified Professional - OCP MySQL 5 Developer - Part 1 - 1Z0-871Microsoft Certified Professional - MCP - Programming in HTML5 with Javascript & CSS3
3
What is HTML5?Advantages of HTML5 over HTML4Structure of a Web pageWeb FormsSVGMathMLWeb StorageWeb SQLWebSocketCanvasAudio & VideoGeolocationWeb WorkersIntroduction to CSS3Reference LinksQ & AThank You!!
4
45
5
Successor of HTML4.01
New tags, features and APIs
More clarifications
Standardises many features
6
7
Backward Compatibility
Accessibility
Cleaner code
Smarter Storage
Game Development
Cross Browser Support
Mobile!! Mobile!! Mobile!!
8
9
<nav> <aside>
<header>
<footer>
<header>
<footer>
<article>
<article>
10
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 syntaxNew media elements (audio, video, embed, source, track)HTML5 graphics (canvas, SVG)
12
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
15
Mathematical Markup Langauge
Designed to present and capture mathematics for Web
Used inside <math>...</math> tags
16
17
Storage prior to HTML5 Web Storage
userData for Microsoft Internet Explorer
Flash Cookies by Adobe
Gears by Google
dojox.storage
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
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
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
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
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
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
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
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
With HTML5
Use of<audio> and <video> tagsNeed to set src attribute to identify the media sourceInclude a controls attributeIt supports
- Audio Video Interleave (.avi) - Flash Video (.flv)- MPEG 4 (.mp4)- Matroska (.mkv)- Ogg (.ogv)
30
31
Geographic and LocationShare 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 agentSome 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
33
Current scenario
Runs in single-threaded environment
Application could be unresponsive
Solution???
- Break a big operation- Use timer
34
Runs in single-threaded environment
Application could be unresponsive
Solution???
- Break a big operation- Use timer
35
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
38
39