39
Presentation On HTML5 By: Debidatta Regd. No: 0711012073

An introduction to html5 by Devs

Tags:

Embed Size (px)

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

Page 1: An introduction to html5 by Devs

Presentation On

HTML5

By: DebidattaRegd. No: 0711012073

Page 2: An introduction to html5 by Devs

What is HTML?Hyper Text Markup Language

Text: A sequential form of characters in human understandableform

Hyper Text: Which is not constrainedto be linear

Page 3: An introduction to html5 by Devs

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”

Page 4: An introduction to html5 by Devs
Page 5: An introduction to html5 by Devs

Graphics

Storage

Geolocation

Speed

Page 6: An introduction to html5 by Devs

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

Page 7: An introduction to html5 by Devs

Canvas/ Video Geolocation App Cache & Web SVG Database Workers

Page 8: An introduction to html5 by Devs

Until Recently, You Couldn’t Draw on the Web

Page 9: An introduction to html5 by Devs

Graphics are not Interactive

Page 10: An introduction to html5 by Devs

The Usual Options Do This... VML Flash Silverlight

Page 11: An introduction to html5 by Devs

What is SVG?

Scalable Vector Graphics

Provides user to draw any graphics in the web

Page 12: An introduction to html5 by Devs

ADVANTAGE:-

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

Page 13: An introduction to html5 by Devs

Canvas Element

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

Page 14: An introduction to html5 by Devs

Advantage

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

Page 15: An introduction to html5 by Devs

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

Page 16: An introduction to html5 by Devs

Chrome Firefox Safari Opera

canvas/SVG

video

geolocation

app cache

database

workers

HTML 5 Support

Page 17: An introduction to html5 by Devs

Canvas/ Video Geolocation App Cache & Web SVG Database Workers

Page 18: An introduction to html5 by Devs

Video is Complicated, and Outside Your Control

Page 19: An introduction to html5 by Devs

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

Page 20: An introduction to html5 by Devs

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.

Page 21: An introduction to html5 by Devs

HTML 5 Support

Chrome Firefox Safari Opera

canvas/SVG

video

geolocation

app cache

database

workers

Page 22: An introduction to html5 by Devs

Canvas/ Video Geolocation App Cache & Web SVG Database Workers

Page 23: An introduction to html5 by Devs

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

Page 24: An introduction to html5 by Devs

But GPS & IP aren’t good enough…

1.Too slow

2.Too constrained

3.Too fuzzy

Page 25: An introduction to html5 by Devs

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.

Page 26: An introduction to html5 by Devs

...And Browsers Are Now Location-Enabled

Page 27: An introduction to html5 by Devs

HTML 5 Support

Chrome Firefox Safari Opera

canvas/SVG

video

geolocation

app cache

database

workers

Page 28: An introduction to html5 by Devs

Canvas/ Video Geolocation App Cache & Web SVG Database Workers

Page 29: An introduction to html5 by Devs

Store what you need locally to make applications faster.

Web cache & Database

Page 30: An introduction to html5 by Devs

// database andapp cache storeuser data andapp resourceslocally

Page 31: An introduction to html5 by Devs

Web Apps Need to Work Everywhere

Page 32: An introduction to html5 by Devs

Database

Page 33: An introduction to html5 by Devs

HTML 5 Support

Chrome Firefox Safari Opera

canvas/SVG

video

geolocation

app cache

database

workers

Page 34: An introduction to html5 by Devs

Canvas/ Video Geolocation App Cache & Web SVG Database Workers

Page 35: An introduction to html5 by Devs

A More Powerful Web == More Powerful Apps

Page 36: An introduction to html5 by Devs

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

Page 37: An introduction to html5 by Devs

HTML 5 Support Chrome Firefox Safari Opera

canvas/SVG

video

geolocation

app cache

database

workers

Page 38: An introduction to html5 by Devs

QUESTIONS

Page 39: An introduction to html5 by Devs