Download presentation
Presentation is loading. Please wait.
Published byDarleen Dawson Modified over 8 years ago
1
Introduction to HTML5
2
Dive into HTML5 - Mark Pilgrim (http://diveintohtml5.info/) or (http://fortuito.us/diveintohtml5/) or (http://mislav.uniqpath.com/diveintohtml5/)http://diveintohtml5.info/http://fortuito.us/diveintohtml5/http://mislav.uniqpath.com/diveintohtml5/ Also available for PDF download (www.jesusda.com/docs/.../ebook_manual_en_dive -into-html5.pdf) or (http://s3.amazonaws.com/mislav/Dive+into+HTML 5.pdf)www.jesusda.com/docs/.../ebook_manual_en_dive -into-html5.pdfhttp://s3.amazonaws.com/mislav/Dive+into+HTML 5.pdf
4
Learn HTML5: 10 Must Read Lessons (http://www.webhostingsecretrevealed.com/f eatured-articles/learn-html5-10-must-read- lessons/)http://www.webhostingsecretrevealed.com/f eatured-articles/learn-html5-10-must-read- lessons/
6
HTML 5 Demos and Examples (http://html5demos.com/)http://html5demos.com/
8
WDL - 10 HTML5 Demos to Make You Forget About Flash (http://webdesignledger.com/inspiration/10- html5-demos-to-make-you-forget-about-flash)http://webdesignledger.com/inspiration/10- html5-demos-to-make-you-forget-about-flash
10
The term “HTML5” covers a family of web technologies currently being specified by the W3C and being used in various stages by browser vendors.
11
What is commonly referred to as “HTML5” is often a combination of HTML5 markup/features,CSS3 style and JavaScript interactivity/ animation.
12
HTML5 “Core” : New structural and semantic markup CSS3 : Support for animation and much more) Geolocation Canvas Web Storage (Offline Support) Web Sockets Drag and Drop
13
HTML5 addresses current limitations such as multimedia (without browser plugins – for example, Flash, Java, Silverlight), data storage, lack of a native graphical format. These are qualities well suited for web applications.
15
New Structural and Semantic markup is designed to reduce reliance on tags and introduce logical, consistent and readable page elements.
16
Examples of new tags: Structural elements
18
This is my header #header { width:960px; height:100px; background-color:gray; }
19
This is my header header { width:960px; height:100px; background-color:gray; }
20
Many more new semantic tags: Acts a wrapper for one or more related heading elements. It can only contain a group of - elements(s) The element is intended to be used with the element to mark up diagrams, illustrations, photos and more
21
New input types Many more: datepickers, auto-complete, data- lists…
22
and Enabling native audio and video playback within the browser, no browser plugins needed. Resolution-dependent bitmap canvas, which can be used for rendering visual images (charts, game graphics) on the fly in the browser. Provides native drawing and animation format.
23
and
24
http://camendesign.com/code/video_for_everybody/test.html
25
var canvas = document.getElementById ("myCanvas"), context = canvas.getContext("2d"); // x = 10, y = 20, width = 200, height = 100 context.fillRect(10, 20, 200, 100);
26
The canvas element works as a drawing surface on your page. You can create shapes with colour, gradient, and pattern fills. You can interactively manipulate pixels onscreen, render text, and export these contents to a static image file - such as a.png. You can also add JavaScript or the new CSS3 animation features to make the objects you create move, fade, scale - and so on.
27
http://www.lucidchart.com Web applications such as the one at LucidChart.com can use the canvas element to interactively draw charts and diagrams.
28
CSS3 : Support for animation and much more) Web Storage (Offline Support) - http://dev.w3.org/html5/webstorage/#introduction Geolocation - http://dev.w3.org/geo/api/spec- source.html#introduction Drag and Drop - http://developers.whatwg.org/dnd.html#dnd Web Workers and Sockets Microdata - http://developers.whatwg.org/links.html#microdata
29
HTML5 and CSS3 work hand in hand. Many “HTML5 experiences” include CSS3 features. CSS3 animations and transitions 2D and 3D transformations backgrounds, borders, RGBa colors, gradients, box and text shadows multi-column layouts media queries web fonts
30
CSS3 animations Technologies such as Flash have traditionally been used to animate objects in the browser. You can now create some of the same functionality using CSS rules and properties. In the future, the HTML5 Canvas element and CSS3 transitions can help designers create interactive and animated elements on the page. Visit http://animatable.com/demos/madmanimation/ in a Webkit browser - such as Chrome or Safari - to see CSS animation in action.http://animatable.com/demos/madmanimation/
32
CSS3 transitions CSS transitions are closely related to animation, but fundamentally different. A transition allows property changes in CSS values to occur smoothly over a specified duration. You can currently perform this type of animation with JavaScript and Flash, but transitions give designers a tool to use without becoming a scripting expert. Visit http://daftpunk.themaninblue.com/ to see an example of CSS transitions in action.http://daftpunk.themaninblue.com/
34
CSS 2D- and 3D-transformations The CSS transform property allows you to rotate, scale or skew an element on your page. You can also animate transforms. You can also add the perspective property to the transformation effect to simulate an object positioned or animated in 3D space. Visit http://www.webkit.org/blog-files/3d- transforms/morphing-cubes.html/ to see an example of a 3D-CSS transformation that is also animated.http://www.webkit.org/blog-files/3d- transforms/morphing-cubes.html/
35
http://www.webkit.org/blog-files/3d-transforms/morphing-cubes.html
36
What is an API? APIs (Application Programming Interfaces) are a way to create applications using pre-built components and are not unique to web development - or even to scripting languages. One of the main goals of an API is to standardize how certain mechanics work and to simplify otherwise complicated programming tasks. APIs are very significant in the world of HTML5
37
Takes the concept of browser “cookies” to higher levels. HTML5 provides two ways to store data: localStorage and sessionStorage. Data saved as localStorage is available at any point – even after browser closes or system is restarted. Data saved as sessionStorage is lost as soon as that window is closed.
38
http://developers.whatwg.org/ Web pages request user permission to use offline storage.
39
The Geolocation API Specification allows the web browser’s geographic location to be pinpointed. This information is then used to send you relevant data based on your whereabouts. Version 3.5 of Firefox was one of the first browser to make use of geolocation.
40
Example of Geolocation: http://www.flickr.com/map/ This page displays a map of photographs around the world that users have uploaded with metadata that tags their images with the geographical coordinates of the location. The term for images with this metadata is geotagged. Click ‘Find My Location’
41
Click ‘Share Location’
42
If there are geotagged images in your immediate area, you will see pink circles representing images on a local map.
43
Web Workers is a framework that addresses browser performance. When you access advanced web applications, such as mapping or applications that instantly generate charts and graphs, there are several processor-intensive computations that can slow down the performance of your application. Web Workers are scripts that run in a separate thread. This separation means that processes, such as obtaining data from a database, occur independently from user behaviour - which creates a more seamless environment for the user
44
Mobile devices and smartphones are active platforms for HTML5 documents and web applications today. Browsers such as Apple Safari for iOS have supported features associated with HTML5 - for example, offline storage and CSS3 animations - for a few years. This is because iOS mobile devices, such as the iPhone and the iPad, have a distinctive hardware profile including screen size and memory capabilities as well as a consistent software profile. The mobile Safari browser on Apple’s iPhone has been using HTML5 features such as offline storage since 2009, and has internal preferences to set the storage size.
45
Within the landscape of desktop computing, there are far too many variables to support easily, including multiple browsers, old browsers, different monitor resolutions and more. Users are also demanding content that is optimized for mobile devices, which HTML5 and its supporting technologies can deliver. For this reason, HTML5 support is a high priority for the manufacturers of these devices.
46
Visit the URL for your primary browser, and then explore the HTML5 features: Google Chrome (www.chromeexperiments.com)www.chromeexperiments.com Apple Safari (www.apple.com/html5)www.apple.com/html5 Mozilla Firefox (https://developer.mozilla.org/en/HTML/HTML5)https://developer.mozilla.org/en/HTML/HTML5 Microsoft Internet Explorer (www.nevermindthebullets.com)www.nevermindthebullets.com
48
Google Chrome 06_index.html
49
Safari
50
The web's #1 resource for smoothie recipes
51
#masthead { background-color: #FFF; } #masthead h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 2em; color:#a50476; font-weight: normal; float:right; margin:1.5em 4em 0 0; }
52
The web's #1 resource for smoothie recipes
53
Google Chrome 06_index.html
54
Firefox 3.6 06_index.html
55
When Firefox 3.6 encounters a tag it does not recognise it treats it as an inline element. Add the following code to reset.css: header, section, aside, nav, footer, figure, figcaption{ display:block; }
56
Firefox 3.6 06_index.html
57
Internet Explorer 8 06_index.html
58
When Internet Explorer 8 or earlier encounters a tag it does not recognise it completely ignores them. Add link to JavaScript library called Modernizr – forces IE to recognise HTML5 tags: 06_index.html
59
Internet Explorer 8 06_index.html
60
07_contactform.html Google Chrome
61
07_contactform.html Edit: Email: Website: Only effects mobile browsers. In future. will be used to process form data more efficiently.
62
07_contactform.html Edit: First name:
63
07_contactform.html Google Chrome
64
07_contactform.html Edit: First name:
65
07_contactform.html Google Chrome
66
07_contactform.html Internet Explorer 8
67
Providing fallback for browsers that don’t support HTML5 features Edit: yepnope({ test: Modernizr.input.placeholder, nope: 'h5f.js', callback: function(url, result, key) { H5F.setup(document.getElementById("contactform")); } }); 07_contactform.html
68
Internet Explorer 8 07_contactform.html
69
jquerytoggle.html Google Chrome
70
Edit: jquerytoggle.html
71
Edit: $(document).ready(function() { $('#CalorieBox').hide(); }); jquerytoggle.html
72
Google Chrome jquerytoggle.html
73
Edit: Calories per serving to Calories per serving jquerytoggle.html
74
Edit: $(document).ready(function() { $('#CalorieBox').hide(); $(‘a#triggerCalorieBox’).click(function() { $(‘#CalorieBox’).show(); e.preventDefault() }); jquerytoggle.html
75
Google Chrome
76
jquerytoggle.html Google Chrome
77
Edit: $(document).ready(function() { $('#CalorieBox').hide(); $(‘a#triggerCalorieBox’).click(function() { $(‘#CalorieBox’).toggle(); e.preventDefault() }); jquerytoggle.html
78
Edit: index.html
79
Firefox 3.6 index.html Not all browsers support the same video formats -.ogg supported by Firefox, Google Cfrome
80
Safari 4.0 Not all browsers support the same video formats -.ogg supported by Firefox, Google Cfrome index.html
81
Edit: Download the video index.html
82
Edit: Download the video Download the video index.html
83
cnavastemplate.html
84
function setup() { var canvas = document.getElementById('lessonCanvas'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); } canvastemplate.html
85
function setup() { var canvas = document.getElementById('lessonCanvas'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); ctx.strokeRect(0, 0, 300, 300); } canvastemplate.html
86
Google Chrome canvastemplate.html
87
function setup() { var canvas = document.getElementById('lessonCanvas'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); ctx.strokeRect(0, 0, 300, 300); ctx.strokeStyle = ‘rgb(255, 0, 0)’; ctx.strokeRect(0.5, 0.5, 100, 100); } canvastemplate.html
88
Google Chrome
89
function setup() { var canvas = document.getElementById('lessonCanvas'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); ctx.strokeRect(0, 0, 300, 300); ctx.strokeStyle = ‘rgb(255, 0, 0)’; ctx.strokeRect(0.5, 0.5, 100, 100); ctx.fillRect(20, 20, 100, 100); ctx.fillStyle = ‘rgb(0, 255, 0)’; ctx.fillRect(50, 50, 100, 100); } canvastemplate.html
90
Google Chrome canvastemplate.html
91
function setup() { var canvas = document.getElementById('lessonCanvas'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); ctx.strokeRect(0, 0, 300, 300); ctx.strokeStyle = ‘rgb(255, 0, 0)’; ctx.strokeRect(0.5, 0.5, 100, 100); ctx.fillRect(20, 20, 100, 100); ctx.fillStyle = ‘rgb(0, 255, 0)’; ctx.fillRect(50, 50, 100, 100); ctx.clearRect(80, 80, 30, 30); } canvastemplate.html
92
Google Chrome canvastemplate.html
93
colorsstylesand gradients_completed.html Google Chrome
94
Firefox 3.6 colorsstylesand gradients_completed.html
95
Google Chrome usingtransforms_completed.html
96
Google Chrome drawingloop_completed.html
97
notepad_example.html
98
Google Chrome notepad_example.html
99
Google Chrome notepad_example.html
100
Google Chrome notepad_example.html
101
Internet Explorer 8 notepad_example.html
102
Firefox 3.6 notepad_example.html
103
Firefox 3.6 notepad_example.html
104
Firefox 3.6 notepad_example.html Firefox 3.6 only use offline storage when on the Web.
105
Edit (line 30): mystorage = window.localStorage || (window.globalStorage ? globalStorage[location.hostname] : null); to mystorage = window.sessionStorage || (window.globalStorage ? globalStorage[location.hostname] : null); notepad_example.html
106
Google Chrome
107
notepad_example.html
108
Google Chrome notepad_example.html
109
Google Chrome notepad_example.html
110
Mozilla Firefox shopping_completed.html
111
Mozilla Firefox checkers_completed.html
Similar presentations
© 2025 SlidePlayer.com Inc.
All rights reserved.