1 / 16

HTML5

HTML5. Steve Gabrio CST300L Fall 2012. Pre-HTML5 Code. Bland. Music, video and interactive media such as games required additional plugins (Flash etc.) to play. Plugins required constant updates. Web developers had to limit their creativity. What’s Different Now About The Web?.

zacharee-horn
Download Presentation

HTML5

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML5 Steve Gabrio CST300L Fall 2012

  2. Pre-HTML5 Code • Bland. • Music, video and interactive media such as games required additional plugins (Flash etc.) to play. Plugins required constant updates. • Web developers had to limit their creativity.

  3. What’s Different Now About The Web? • Faster computers with more memory. • Faster connections! • More users and devices than ever before.

  4. What does a developer do now to make their website stand out?

  5. Hello <!DOCTYPE html> First work on HTML5 started in 2006. This new version of HTML (HTML5), would be defined by the opening HTML tag: <!DOCTYPE html> The features of this new version would take the Web to a whole new reality.

  6. HTML5: The Plan • New features should be based on HTML, CSS, DOM, and JavaScript. • Reduce the need for external plugins (like Flash). • Better error handling. • More markup to replace scripting. • HTML5 should be device independent. • The development process should be visible to the public.

  7. The Magical Canvas One of the most powerful of the new elements is the <canvas> tag. Main purpose of canvas is to draw graphics, on the fly, via scripting (usually JavaScript). What can be achieved with this new capability?

  8. <canvas id=“MindBlown”> Take a look. • 3D graphics and text anywhere on a site. • Generate displays such as fractals and run full 3D games previously thought to be impossible in a browser.

  9. Inline SVG • SVG stands for Scalable Vector Graphics. • Graphics are defined in XML format. • SVG graphics do NOT lose any quality if they are zoomed or resized. • Every element and every attribute in SVG files can be animated.

  10. Audio and Video Tags New elements were also added to simplify the code required to play audio and video files in a page. Audio Tag: <audio><source src=“meow.mp3” type=“audio/mp3”></audio> Video Tag: <video><source src=“video.mp4” type=“video/mp4”></video>

  11. Geolocation • Works only after user gives permission to browser. • Provides web developers with values for longitude, latitude, altitude, heading and speed. • Better results on iPhone or other mobile device where GPS can be enabled. • Yelp and other destination review sites use this to give users information on places around them.

  12. Application Cache • Web applications are cached, and accessible without an internet connection. • Offline browsing - users can use the application when they're offline • Speed - cached resources load faster • Reduced server load - the browser will only download updated/changed resources from the server

  13. Server-Sent Events - One Way Messaging • A server-sent event is when a web page automatically gets updates from a server. • Examples: Facebook and Twitter updates, stock price updates, news feeds, sport results, etc.

  14. Web Storage Wars • More secure and faster than cookies. • It is possible to store large amounts of data, without affecting the website's performance. • The data is stored in key/value pairs, and a web page can only access data stored by itself. • “localStorage” - stores data with no expiration • “datesessionStorage” - stores data for one session

  15. Sources (n.d.). HTML5 Intro. Retrieved November 22, 2012, from http://www.w3schools.com/html/html5_intro.asp (n.d.). HTML canvas Tag. Retrieved November 22, 2012, from http://www.w3schools.com/tags/tag_canvas.asp (n.d.). Drag and Drop. Retrieved November 22, 2012, from http://www.w3schools.com/html/html5_draganddrop.asp (n.d.). Inline SVG. Retrieved November 22, 2012, from http://www.w3schools.com/html/html5_svg.asp (n.d.). Geolocation. Retrieved November 22, 2012, from http://www.w3schools.com/html/html5_geolocation.asp (n.d.). Web Storage. Retrieved November 22, 2012, http://www.w3schools.com/html/html5_webstorage.asp Blkcore(2012, August 16). HexGL, the HTML5 futuristic racing game. Retrieved November 22, 2012, from http://www.youtube.com/watch?v=se-oorr2zM8

  16. Image Used Crowds of People. Retrieved. November 22, 2012, from http://world-links.org/wp-content/uploads/2012/10/crowd-of-people-233x300.jpg David Hester of Storage Wars. Retrieved. November 22, 2012, from http://3.bp.blogspot.com/-Dqay7ZyS1zU/T-ybiRkVWPI/AAAAAAAADTM/b1AduiXRVTs/s1600/dave-hester-storage-wars.jpg HTML5 logo. Retrieved. November 22, 2012, from http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png Nutshell. Retrieved. November 22, 2012, from http://www.stmargaretsarasota.org/images/Nutshell4.jpg

More Related