introduction to html5 & css3

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