An introduction to html5 by Devs

Tags:

Preview:

DESCRIPTION

This is the presentation on HTML5, the newer version of HTML. I've discussed only the 5 new features of the HTML5 & they are 1.Canvas/SVG 2.Video 3.Geolocation 4.App cache & Database 5.Web Workers

Citation preview

Presentation On

HTML5

By: DebidattaRegd. No: 0711012073

What is HTML?Hyper Text Markup Language

Text: A sequential form of characters in human understandableform

Hyper Text: Which is not constrainedto be linear

What is Markup?

Refers to the sequence of characters or other symbols

That you insert at certain Place in a text or word processing file, which can be displayed.

Often called as “TAGS”

Graphics

Storage

Geolocation

Speed

HTML 5: A Chance to Do Things DifferentlyHTML 5: A Chance to Do Things DifferentlyHTML 5: A Chance to Do Things Differently: A Chance to Do Things Differently

Canvas/ Video Geolocation App Cache & Web SVG Database Workers

Until Recently, You Couldn’t Draw on the Web

Graphics are not Interactive

The Usual Options Do This... VML Flash Silverlight

What is SVG?

Scalable Vector Graphics

Provides user to draw any graphics in the web

ADVANTAGE:-

The IMAGE in the .svg format doesn’t distort or pixilated.

Canvas Element

The canvas element provides a straight and powerful way to draw arbitrary graphics in a web page using java script.

Advantage

1.3-D view in the web2.Big in texture-Game Graphics3.The graphics loaded into the CPU in less than 10% time

When Canvas or SVG?

SVG -> –High level–Import/Export–Easy UIs–Interactive–Medium Animation–Tree of objects

Canvas -> –Low level–No mouse interaction–High Animation–JS Centric–More Bookkeeping–Pixels

Chrome Firefox Safari Opera

canvas/SVG

video

geolocation

app cache

database

workers

HTML 5 Support

Canvas/ Video Geolocation App Cache & Web SVG Database Workers

Video is Complicated, and Outside Your Control

// HTML 5 makes<video> as easyas <img>

What’s about video

Video in the browser is tough today because it’s about plug-ins. Now a new video tag. YouTube running entirely using the video tag .No Flash required.

HTML 5 Support

Chrome Firefox Safari Opera

canvas/SVG

video

geolocation

app cache

database

workers

Canvas/ Video Geolocation App Cache & Web SVG Database Workers

Life’s Better with Location

CRM Social Ads Games

Photos

Places

75 ft

20 ft

500 ft

1.1 mi2.1 mi

2.8 mi

But GPS & IP aren’t good enough…

1.Too slow

2.Too constrained

3.Too fuzzy

Geolocation

All apps could be better with geolocation. Cell ID and WiFi solve the problem of getting the data.

They’ve mapped really the entire world. Again all the browsers but IE support this now.

...And Browsers Are Now Location-Enabled

HTML 5 Support

Chrome Firefox Safari Opera

canvas/SVG

video

geolocation

app cache

database

workers

Canvas/ Video Geolocation App Cache & Web SVG Database Workers

Store what you need locally to make applications faster.

Web cache & Database

// database andapp cache storeuser data andapp resourceslocally

Web Apps Need to Work Everywhere

Database

HTML 5 Support

Chrome Firefox Safari Opera

canvas/SVG

video

geolocation

app cache

database

workers

Canvas/ Video Geolocation App Cache & Web SVG Database Workers

A More Powerful Web == More Powerful Apps

I will not hose the browser with JavaScript

I will not hose the browser with JavaScript

I will not hose the browser with JavaScript

I will not hose the browser with JavaScript

I will not hose the browser with JavaScript

I will not hose the browser with JavaScript

But More Power == More Responsibility

HTML 5 Support Chrome Firefox Safari Opera

canvas/SVG

video

geolocation

app cache

database

workers

QUESTIONS