An introduction to html5 by Devs
-
Upload
debidatta-satapathy -
Category
Technology
-
view
1.032 -
download
3
description
Transcript of An introduction to html5 by Devs
![Page 1: An introduction to html5 by Devs](https://reader034.fdocuments.us/reader034/viewer/2022052303/54556b22b1af9fb66e8b48ae/html5/thumbnails/1.jpg)
Presentation On
HTML5
By: DebidattaRegd. No: 0711012073
![Page 2: An introduction to html5 by Devs](https://reader034.fdocuments.us/reader034/viewer/2022052303/54556b22b1af9fb66e8b48ae/html5/thumbnails/2.jpg)
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](https://reader034.fdocuments.us/reader034/viewer/2022052303/54556b22b1af9fb66e8b48ae/html5/thumbnails/3.jpg)
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](https://reader034.fdocuments.us/reader034/viewer/2022052303/54556b22b1af9fb66e8b48ae/html5/thumbnails/4.jpg)
![Page 5: An introduction to html5 by Devs](https://reader034.fdocuments.us/reader034/viewer/2022052303/54556b22b1af9fb66e8b48ae/html5/thumbnails/5.jpg)
Graphics
Storage
Geolocation
Speed
![Page 6: An introduction to html5 by Devs](https://reader034.fdocuments.us/reader034/viewer/2022052303/54556b22b1af9fb66e8b48ae/html5/thumbnails/6.jpg)
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](https://reader034.fdocuments.us/reader034/viewer/2022052303/54556b22b1af9fb66e8b48ae/html5/thumbnails/7.jpg)
Canvas/ Video Geolocation App Cache & Web SVG Database Workers
![Page 8: An introduction to html5 by Devs](https://reader034.fdocuments.us/reader034/viewer/2022052303/54556b22b1af9fb66e8b48ae/html5/thumbnails/8.jpg)
Until Recently, You Couldn’t Draw on the Web
![Page 9: An introduction to html5 by Devs](https://reader034.fdocuments.us/reader034/viewer/2022052303/54556b22b1af9fb66e8b48ae/html5/thumbnails/9.jpg)
Graphics are not Interactive
![Page 10: An introduction to html5 by Devs](https://reader034.fdocuments.us/reader034/viewer/2022052303/54556b22b1af9fb66e8b48ae/html5/thumbnails/10.jpg)
The Usual Options Do This... VML Flash Silverlight
![Page 11: An introduction to html5 by Devs](https://reader034.fdocuments.us/reader034/viewer/2022052303/54556b22b1af9fb66e8b48ae/html5/thumbnails/11.jpg)
What is SVG?
Scalable Vector Graphics
Provides user to draw any graphics in the web
![Page 12: An introduction to html5 by Devs](https://reader034.fdocuments.us/reader034/viewer/2022052303/54556b22b1af9fb66e8b48ae/html5/thumbnails/12.jpg)
ADVANTAGE:-
The IMAGE in the .svg format doesn’t distort or pixilated.
![Page 13: An introduction to html5 by Devs](https://reader034.fdocuments.us/reader034/viewer/2022052303/54556b22b1af9fb66e8b48ae/html5/thumbnails/13.jpg)
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](https://reader034.fdocuments.us/reader034/viewer/2022052303/54556b22b1af9fb66e8b48ae/html5/thumbnails/14.jpg)
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](https://reader034.fdocuments.us/reader034/viewer/2022052303/54556b22b1af9fb66e8b48ae/html5/thumbnails/15.jpg)
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](https://reader034.fdocuments.us/reader034/viewer/2022052303/54556b22b1af9fb66e8b48ae/html5/thumbnails/16.jpg)
Chrome Firefox Safari Opera
canvas/SVG
video
geolocation
app cache
database
workers
HTML 5 Support
![Page 17: An introduction to html5 by Devs](https://reader034.fdocuments.us/reader034/viewer/2022052303/54556b22b1af9fb66e8b48ae/html5/thumbnails/17.jpg)
Canvas/ Video Geolocation App Cache & Web SVG Database Workers
![Page 18: An introduction to html5 by Devs](https://reader034.fdocuments.us/reader034/viewer/2022052303/54556b22b1af9fb66e8b48ae/html5/thumbnails/18.jpg)
Video is Complicated, and Outside Your Control
![Page 19: An introduction to html5 by Devs](https://reader034.fdocuments.us/reader034/viewer/2022052303/54556b22b1af9fb66e8b48ae/html5/thumbnails/19.jpg)
// HTML 5 makes<video> as easyas <img>
![Page 20: An introduction to html5 by Devs](https://reader034.fdocuments.us/reader034/viewer/2022052303/54556b22b1af9fb66e8b48ae/html5/thumbnails/20.jpg)
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](https://reader034.fdocuments.us/reader034/viewer/2022052303/54556b22b1af9fb66e8b48ae/html5/thumbnails/21.jpg)
HTML 5 Support
Chrome Firefox Safari Opera
canvas/SVG
video
geolocation
app cache
database
workers
![Page 22: An introduction to html5 by Devs](https://reader034.fdocuments.us/reader034/viewer/2022052303/54556b22b1af9fb66e8b48ae/html5/thumbnails/22.jpg)
Canvas/ Video Geolocation App Cache & Web SVG Database Workers
![Page 23: An introduction to html5 by Devs](https://reader034.fdocuments.us/reader034/viewer/2022052303/54556b22b1af9fb66e8b48ae/html5/thumbnails/23.jpg)
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](https://reader034.fdocuments.us/reader034/viewer/2022052303/54556b22b1af9fb66e8b48ae/html5/thumbnails/24.jpg)
But GPS & IP aren’t good enough…
1.Too slow
2.Too constrained
3.Too fuzzy
![Page 25: An introduction to html5 by Devs](https://reader034.fdocuments.us/reader034/viewer/2022052303/54556b22b1af9fb66e8b48ae/html5/thumbnails/25.jpg)
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](https://reader034.fdocuments.us/reader034/viewer/2022052303/54556b22b1af9fb66e8b48ae/html5/thumbnails/26.jpg)
...And Browsers Are Now Location-Enabled
![Page 27: An introduction to html5 by Devs](https://reader034.fdocuments.us/reader034/viewer/2022052303/54556b22b1af9fb66e8b48ae/html5/thumbnails/27.jpg)
HTML 5 Support
Chrome Firefox Safari Opera
canvas/SVG
video
geolocation
app cache
database
workers
![Page 28: An introduction to html5 by Devs](https://reader034.fdocuments.us/reader034/viewer/2022052303/54556b22b1af9fb66e8b48ae/html5/thumbnails/28.jpg)
Canvas/ Video Geolocation App Cache & Web SVG Database Workers
![Page 29: An introduction to html5 by Devs](https://reader034.fdocuments.us/reader034/viewer/2022052303/54556b22b1af9fb66e8b48ae/html5/thumbnails/29.jpg)
Store what you need locally to make applications faster.
Web cache & Database
![Page 30: An introduction to html5 by Devs](https://reader034.fdocuments.us/reader034/viewer/2022052303/54556b22b1af9fb66e8b48ae/html5/thumbnails/30.jpg)
// database andapp cache storeuser data andapp resourceslocally
![Page 31: An introduction to html5 by Devs](https://reader034.fdocuments.us/reader034/viewer/2022052303/54556b22b1af9fb66e8b48ae/html5/thumbnails/31.jpg)
Web Apps Need to Work Everywhere
![Page 32: An introduction to html5 by Devs](https://reader034.fdocuments.us/reader034/viewer/2022052303/54556b22b1af9fb66e8b48ae/html5/thumbnails/32.jpg)
Database
![Page 33: An introduction to html5 by Devs](https://reader034.fdocuments.us/reader034/viewer/2022052303/54556b22b1af9fb66e8b48ae/html5/thumbnails/33.jpg)
HTML 5 Support
Chrome Firefox Safari Opera
canvas/SVG
video
geolocation
app cache
database
workers
![Page 34: An introduction to html5 by Devs](https://reader034.fdocuments.us/reader034/viewer/2022052303/54556b22b1af9fb66e8b48ae/html5/thumbnails/34.jpg)
Canvas/ Video Geolocation App Cache & Web SVG Database Workers
![Page 35: An introduction to html5 by Devs](https://reader034.fdocuments.us/reader034/viewer/2022052303/54556b22b1af9fb66e8b48ae/html5/thumbnails/35.jpg)
A More Powerful Web == More Powerful Apps
![Page 36: An introduction to html5 by Devs](https://reader034.fdocuments.us/reader034/viewer/2022052303/54556b22b1af9fb66e8b48ae/html5/thumbnails/36.jpg)
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](https://reader034.fdocuments.us/reader034/viewer/2022052303/54556b22b1af9fb66e8b48ae/html5/thumbnails/37.jpg)
HTML 5 Support Chrome Firefox Safari Opera
canvas/SVG
video
geolocation
app cache
database
workers
![Page 38: An introduction to html5 by Devs](https://reader034.fdocuments.us/reader034/viewer/2022052303/54556b22b1af9fb66e8b48ae/html5/thumbnails/38.jpg)
QUESTIONS
![Page 39: An introduction to html5 by Devs](https://reader034.fdocuments.us/reader034/viewer/2022052303/54556b22b1af9fb66e8b48ae/html5/thumbnails/39.jpg)