HTML5 - Saba Web Page

Download Report

Transcript HTML5 - Saba Web Page 

HTML5
Golsana Ghaemi
8811143
1
•
•
•
•
•
•
•
Introduction
Page Structure
Multimedia
Forms
Canvas
Storage
Drag & Drop
2
•
HTML5 is the next generation of HTML
– HTML5 is still a work in progress. However, most modern
browsers have some HTML5 support
• HTML5 is a cooperation between the World Wide Web Consortium
(W3C) and the Web Hypertext Application Technology Working
Group (WHATWG)
– WHATWG was working with web forms and applications, and
W3C was working with XHTML 2.0. In 2006, they decided to
cooperate and create a new version of HTML.
 INTRODUCTION
3
• The first draft was made public in 2008, but not much
happened until 2011
• Today all major browsers (Chrome, Safari, Firefox, Opera, IE)
offer HTML5 support
• HTML5 works with CSS3 and is still in development. Since its
release, HTML5 has been in continuous development, with the
W3C adding more and more impressive features
• HTML5 is the successor of HTML 4.01, released for the first
time in 1999. The internet has changed significantly since 1999
and it seemed like the creation of HTML5 was necessary . The
new markup language was developed based on pre-set
standards.
 HTML5 STANDARD STATUS
4
• New features should be based on HTML, CSS, DOM,
and JavaScript
• Reduce the need for external plugins
– like Flash, …
• Better error handling
– A consistent DOM for any bad markup
• More markup to replace scripting
• The development process should be visible to the
public

HTML5 RULES AND GOALS
5
• HTML5 was created to make the coding process easier and
more logical
• Many of the features it comes with have been created with
the consideration that users should be able to run heavy
content on low-powered devices
• The canvas element for drawing
• The video and audio elements for media playback
• Better support for local & offline storage
• New content specific elements
– article, footer, header, nav, section
• New form controls
– date, time, email, url, …

SOME NEW FEATURE
6
• HTML5 is not based on XML or SGML
• Browsers need to see <!DOCTYPE …>
– To work in standard compliance mode
• HTML5 Document type(in older versions of HTML were longer)
<!DOCTYPE html>
• Character encoding
<meta charset="utf-8">

DOCUMENT TYPE & ENCODING
7
• HTML5 syntax (not XHTML5) is very lax
• Unlike Xhtml, HTML5 is coming with lots of flexibility and
would support the followings:
 Uppercase tag names.
 Quotes are optional for attributes.
 Attribute values are optional.
 Closing empty elements are optional.
• These are equivalent
<meta CHARSET=utf-8 >
<meta charset="utf-8" />
<META charset="utf-8" >
• Following tags are not required
 Document is successfully validated without them
<html> <head> <body>

HTML5 SYNTAX
8
Attribute
contenteditable
draggable
hidden
spellcheck

Value
true
false
inherit
true
false
auto
hidden
Description
Specifies whether a user can edit the content of
an element or not
true
false
Specifies if the element must have its spelling and
grammar checked
Specifies whether a user is allowed to drag an
element or not
Specifies that an element should be hidden
SOME NEW GLOBAL ATTRIBUTES
9
• Emphasize semantic web
• HTML5 offers new semantic elements to clearly
define different parts of a web page:

 <header>
 <nav>
 <section>
 <article>
 <aside>
 <figcaption>
 <figure>
 <footer>
PAGE STRUCTURE
10
• HTML is not just presentation
• Each page portion has its own meaning
• In XHTML, page is organized by divs
– Assign meaningful ID or Class for divs
• header, navigation, footer, content, …
• HTML5: new tags for the common divs
– <header>, <nav>, <footer>, …
• HTML5 recommends the usage of these tags

PAGE STRUCTURE
11
• A sample weblog
• Assign id & class to divs
• Use CSS to arrange divs
 XHTML BASED PAGE DESIGN
12
• The weblog using HTML5 semantic tags
• Use HTML5 new tags
A semantic element clearly
Describes its meaning to
Both the browser and the
developer
 HTML5 BASED PAGE DESIGN
13
Header
Figure
Navigation
Article
Section
Aside
Section
Image, Video, Quote, Table,
etc…
Section
Footer
caption
Footer
 SAMPLE HTML5 PAGE STRUCTURE
14
• header
– Represents a group of introductory or aids
• section
– Represents a generic document section
• article
– Represents an independent piece of content of a
document, such as newspaper article
• aside
– Represents an independent piece of content of a
document, such as a blog entry

HTML5 PAGE STRUCTURE TAGS
15
• hgroup
– Groups multiple headers, title and subtitle in the header
• footer
– Represents a footer for a section
• nav
– Represents a section intended for navigation
• figure
– Used to associate a caption together with some
embedded content
– <img> is used to insert (source) the image
– <figcaption> The figcaption element represents a
caption or legend for a figure.

HTML5 PAGE STRUCTURE TAGS
16
•
•
•
•
Until now, there hasn't been a standard multimedia on web
Multimedia on the web is sound, music, videos, and animations.
Most videos are shown through a plugin
A helper application is a small computer program that extends the
standard functionality of the browser. Helper applications are also
called plug-ins.

HTML5 MULTIMEDIA
17
• Plug-ins can be used for many purposes: to display maps, scan
for viruses, verify your bank id, and much more. The
restrictions are few.
• However, not all browsers have the same plugins
• HTML5 specifies a standard way to include multimedia
contents (video or audio) on web
– <video> element to insert video
– <audio> element to play audio sound
– <source> element to source the content

HTML5 MULTIMEDIA
18
• Currently, there are 3 supported video formats for the <video>
element: MP4, WebM, and Ogg,Not all browsers support all
formats
<video width="320" height="240"
controls="controls">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
Your browser does not support video tag.
</video>
• Problems:






You must convert your videos to many different formats
The <video> element does not work in older browsers
Try to play the .ogg audio file
If item 1 fails, try to play the .mp3 file
If item 2 fails, display the “browser does not support” message
HTML5 VIDEO
19
• The control attribute adds video controls, like play,
pause, and volume
It is also a good idea to always include width and height
attributes. If height and width are set, the space required for
the video is reserved when the page is loaded
• Insert text content between the <video> and
</video> tags for browsers that do not support
the <video> element

HTML5 VIDEO (cont’d)
20
• The <video> element allows multiple <source>
elements. <source> elements can link to different video
files
• The browser will use the first recognized format
• Today
– Firefox, Opera, and Chrome: Ogg
– Internet Explorer, Chrome, and Safari: MPEG4
• To cover all the major browsers, use two <source>
elements
– an MPEG4 file, and an Ogg file

HTML5 VIDEO (cont’d)
21
Attribute
autoplay
controls
Value
autoplay
controls
Description
The video will start playing as soon as it is ready
Video controls should be displayed
height
loop
muted
poster
pixels
loop
muted
URL
width
pixels
Sets the height of the video player
Video will start over again, every time it is finished
Audio output of the video should be muted
An image to be shown while the video is
downloading, or until the user hits the play button
Sets the width of the video player

VIDEO ATTRIBUTES
22
• Three formats: Ogg, WAV, MP3
– Ogg: Firefox, Opera, Chrome
– MP3: IE9, Chrome, Safari
<audio controls="controls">
<source src="song.ogg" type="audio/ogg" />
<source src="song.mp3" type="audio/mpeg" />
Your browser does not support audio element.
</audio>
• control, multiple source, and content text is similar to
<video> element

HTML5 AUDIO
23
Attribute
Value
Description
autoplay
autoplay
Audio will start playing as soon as it is ready
controls
controls
Audio controls should be displayed (such as a
play/pause button etc).
loop
loop
Audio will start over again, every time it is finished

HTML5 AUDIO (cont’d)
24
Attribute
oncanplay
Description
Script to be run when a file is ready to start playing (when it has
buffered enough to begin)
onemptied
Script to be run when something bad happens and the file is suddenly
unavailable (like unexpectedly disconnects)
onended
Script to be run when the media has reach the end (a useful event for
messages like "thanks for listening")
onerror
Script to be run when an error occurs when the file is being loaded
onloadstart
Script to be run just as the file begins to load before anything is actually
loaded
onpause
Script to be run when the media is paused either by the user or
programmatically
onplay
onplaying
onvolumechange
Script to be run when the media is ready to start playing
Script to be run when the media actually has started playing
Script to be run each time the volume is changed which (includes
setting the volume to "mute")

MEDIA EVENTS
25
• HTML5 threw a whole bunch of awesomeness at us. Tasks we
accomplished with JavaScript and Flash, like basic form validation and
audio/video, can now be completed using basic HTML.
• Validation is required on the server, of course
• But you have to duplicate it in the user’s browser with JavaScript
• Given that almost every web page has some kind of form—search,
comments, sign-up, and so on—it would be great if browsers had built-in
validation for some of the most common data types that we collect
•
HTML5 defines new input elements
 FORMS CURRENT & FUTURE
26
• Built-in validation
One of the coolest features for developers—which will be
transparent to bosses and consumers, but they’ll make our
lives much easier— are new form input types which can give
us special built-in error reporting. From now on you just need
to specify a "type" inside your "input field" and the browser
will validate automatically. For example "<input
type=number>" will validate input field for numbers only
 FORMS CURRENT & FUTURE
27
• Not all major browsers support all the new input
types. However, you can already start using them; If
they are not supported, they will behave as regular
text fields
Type
url
email
date
month
week
time
number
range
color

Description
The input value is a URL
The input value is one or more email addresses
The input value is a date
The input value is a month
The input value is a week
The input value is of type time
The input value is a number
The input value is a number in a given range
The input value is a hexadecimal color, like #FF8800
NEW INPUT TYPES
28

REAL EXAMPLE
29
HTML5 has several new attributes for <form> and <input>.
• New attributes for <form>:
• autocomplete
• novalidate
• New attributes for <input>:
• autocomplete
• autofocus
• form
• formaction
• formenctype
• formmethod

NEW INPUT TYPE ATTRIBUTES
30
•
•
•
•
•
•
•
•
•
•
formnovalidate
formtarget
height and width
list
min and max
multiple
pattern (regexp)
placeholder
required
step

NEW INPUT TYPE ATTRIBUTES
31
• autocomplete: on / off
– The autocomplete attribute works with <form> and the
following <input> types: text, search, url, tel, email, password,
datepickers, range, and color.
– When autocomplete is on, the browser automatically complete
values based on values that the user has entered before.
– It is possible to have autocomplete "on" for the form, and "off"
for specific input fields, or vice versa.

NEW INPUT TYPE ATTRIBUTES
32
• autofocus: autofocus
– field should automatically get focus when a page is loaded.
 NEW INPUT TYPE ATTRIBUTES
33
• min, max and step: a number
– Used with number and range
– Input data in number & range can be controlled
 NEW INPUT TYPE ATTRIBUTES
34
• list: datalist
– A list of options for an input field
– For text, url, email, …
 NEW INPUT TYPE ATTRIBUTES
35
•
novalidate: novalidate
is a boolean attribute.
– form or input field should not be validated when submitted
• pattern:specifies regular expression
– The pattern that input should match with
– Note: The pattern attribute works with the following input
types: text, search, url, tel, email, and password.
– Tip: Use the global title attribute to describe the pattern to
help the user.
 NEW INPUT TYPE ATTRIBUTES
36
Country code: <input type="text"
name="country_code" pattern="[A-Za-z]{3}"
title="Three letter country code">
sadafnaz
• required: required
– Input field must be filled out before submitting
 NEW INPUT TYPE ATTRIBUTES
37
• In HTML4, input elements must be inside a form to be
associated with it
• In HTML5, input elements can be associated with forms
using form attribute , An input field located outside the
HTML form (but still a part of the form), <input
form="form_id">
• <form action="demo_form.asp" id="form1">
First name: <input type="text" name="fname"><br>
<input type="submit" value="Submit">
</form>
Last name: <input type="text" name="lname"
form="form1">
 HTML5 FORMS ASSOCIATION
38
• The HTML5 <canvas> element is used to draw graphics, The <canvas>
element is only a container for graphics. You must use a script to
actually draw the graphics.
• Canvas has several methods for drawing paths, boxes, circles,
characters, and adding images.
• A canvas is a rectangular area on an HTML page,
• Note: By default, the <canvas> element has no border and no
content.
• Note: Always specify an id attribute(baraye element e canvas) (to be
referred to in a script), and a width and height attribute to define the
size of the canvas.
• Tip: You can have multiple <canvas> elements on one HTML page.
<canvas id="canvas_id" width="200"
height="100">
Your browser does not support Canvas
</canvas>
 CANVAS
39
• All drawing on the canvas must be done inside a JavaScript(from
javascript function)
• First, find the <canvas> element:
• var c=document.getElementById("myCanvas")
• Then, call its getContext() method (you must pass the string "2d"
to the getContext() method):
• var ctx=c.getContext("2d");
• getContext("2d") object is a built-in HTML5 object, with many
properties and methods for drawing paths, boxes, circles, text,
images, and more.
 CANVAS (CONT’D)
40
• Whenever drawing shapes on an HTML5 canvas, there are two
properties you need to set:
Stroke
Fill
The stroke and fill determines how the shape is drawn.
The stroke is the outline of a shape.
The fill is the contents inside the shape.
Fillstyle property: The fillStyle property sets or returns
the color, gradient, or pattern used to fill the drawing.
Strokestyle property: The strokeStyle property sets or
returns the color, gradient, or pattern used for strokes.
 CANVAS API
41
• Here is an example rectangle drawn with blue stroke, and
green fill (actually it is two rectangles):
// Obtain a reference to the canvas element.
var canvas = document.getElementById("ex1");
// Obtain a 2D context from the canvas element.
var context = canvas.getContext("2d");
// Draw grahpics.
context.fillStyle = "#009900";
context.fillRect(10,10, 100,100);
context.strokeStyle = "#0000ff";
context.lineWidth = 5;
context.strokeRect(10,10, 100,100);
 CANVAS API
42
• Rectangle
2D Context functions fillRect() and strokeRect()
context.fillStyle = "#ff0000";
context.fillRect(10,10, 100,100);
context.strokeStyle = "#0000ff";
context.strokeRect(30,20, 120,110);
fillRect()
• The fillRect() function draws a filled rectangle, The 4 parameters (x, y,
width, height) are passed to the fillRect()
strokeRect()
• The strokeRect() function draws the outline of a rectangle, without
filling it
 CANVAS API (CONT’D)
43
Arc
ctx.arc(X,Y,R,sAngle,eAngle,anticlock);
• The arc() method creates an arc/curve (used to create circles, or parts of circles).
• Tip: To create a circle with arc(): Set start angle to 0 and end angle to 2*Math.PI.
• Tip: Use the stroke() or the fill() method to actually draw the arc on the canvas.
Path and line:
• A HTML5 Canvas path is a series of points with drawing instructions
between those points. For instance, a series of points with lines
between them, or with arcs between them
• Paths are used to draw many types of shapes (lines, circles, polygons
etc.) on an HTML5 canvas, so it is important to understand this central
concept.
• A path is started and ended using the 2D Context
functions beginPath() andclosePath()
 CANVAS API (CONT’D)
44
• Line:
• The stroke() method actually draws the path you have defined with
all those moveTo() and lineTo() methods. The default color is black.
• To draw straight lines on a canvas, we will use the following two
methods:
moveTo(x,y) defines the starting point of the line
lineTo(x,y) defines the ending point of the line
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
ctx.moveTo(X, Y)
ctx.lineTo(X, Y)
 CANVAS API (CONT’D)
45
• Complex shapes
ctx.beginPath();
ctx.strokeStyle = "rgb(0, 0, 240)";
ctx.moveTo(100, 100);
ctx.lineTo(200, 100);
ctx.lineTo(200, 300);
ctx.lineTo(150, 250);
ctx.closePath();
ctx.stroke();
 CANVAS API (CONT’D)
46
Gradients:
patterns of color which changes gradiently from one color to another
There are two types of gradients:
 Linear: linear pattern
 Radial:circular pattern
 CANVAS API (CONT’D)
47
Linear gradient:
The createLinearGradient() function takes 4 parameters: x1, y1, x2, y2.
These 4 parameters determine the direction and extension of the
gradient pattern. The gradient extends from the first point x1, y1 to
the second point x2, y2.
horizontal gradient, vertical gradient, diagonal gradient
The addColorStop() function takes 2 parameters. The first parameter is
a number between 0 and 1, The second parameter is the color
you can draw using the gradient as either fill or stroke color
 CANVAS API (CONT’D)
48
Radial Gradients:
A radial gradient is defined by 2 circles. Each circle has a center point and a radius.
Here is a code example:
var x1 = 100; // x of 1. circle center point
var y1 = 100; // y of 1. circle center point
var r1 = 30; // radius of 1. circle
var x2 = 100; // x of 2. circle center point
var y2 = 100; // y of 2. circle center point
var r2 = 100; // radius of 2. circle
 CANVAS API (CONT’D)
49
var radialGradient1 =
context.createRadialGradient(x1, y1, r1, x2, y2, r2);
radialGradient1.addColorStop(0, 'rgb(0, 0, 255)');
radialGradient1.addColorStop(1, 'rgb(0, 255, 0)');
context.fillStyle = radialGradient1;
context.fillRect(10,10, 200, 200);
 CANVAS API (CONT’D)
50
• Put image in canvas
var img=new Image();
img.src="URL";
cxt.drawImage(img,0,0);
 CANVAS API (CONT’D)
51
• With HTML5, web pages can store data locally within the user's
browser.
• Earlier, this was done with cookies. However, Web
• Storage is more secure and faster
• It is also possible to store large amounts of data, without
affecting the website's performance.
• web page can only access data stored by itself.
• HTML5 offers two new objects for storing data on the client
– localStorage: stores data with no time limit
– sessionStorage: stores data for one session
 STORING DATA ON THE CLIENT
52
• Before using web storage, check browser support for
localStorage and
• sessionStorage:
• if(typeof(Storage)!=="undefined")
{
// Yes! localStorage and sessionStorage support!
// Some code.....
}
else
{
// Sorry! No web storage support..
}
 STORING DATA ON THE CLIENT
53
• To store the data for one session
• Data is deleted when session finishes(when the user closes the
browser)
• How to create and access sessionStorage:
<script>
sessionStorage.lastname="Smith";
var name = sessionStorage.lastname;
</script>
 SESSION STORAGE
54
• Count page visits in current session
<script>
if (sessionStorage.pagecount){
sessionStorage.pagecount =
Number(sessionStorage.pagecount) + 1;
}
else{
sessionStorage.pagecount = 1;
}
document.write("Visits "+ sessionStorage.pagecount
+ " time(s).");
</script>
 SESSION STORAGE EXAMPLE
55
• The localStorage Object
• Stores data with no time limit.
– The data will be available the next day, week, …
• How to create and access a localStorage:
<script>
localStorage.lastname="Smith";
</script>
Create a localStorage key/value pair with key="lastname" and
value="Smith"
Key/value pairs are always stored as strings. Remember to convert them to
another format when needed.
 LOCAL STORAGE
56
<!DOCTYPE html>
<html>
<head>
<script>
function clickCounter()
{
if(typeof(Storage)!=="undefined")
{
if (localStorage.clickcount)
{
localStorage.clickcount=Number(localStorage.clickcount)+1;
}
else
{
localStorage.clickcount=1;
}
document.getElementById("result").innerHTML="You have clicked
the button " + localStorage.clickcount + " time(s).";
}
 LOCAL STORAGE EXAMPLE
57
else
{
document.getElementById("result").innerHTML="Sorry, your
browser does not support web storage...";
}
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">Click
me!</button></p>
<div id="result"></div>
<p>Click the button to see the counter increase.</p>
<p>Close the browser tab (or window), and try again, and the
counter will continue to count (is not reset).</p>
</body>
</html>
 LOCAL STORAGE EXAMPLE
58
HTML5 supports drag-and-drop operations
• Drag and Drop (DnD) is powerful User Interface concept which
makes it easy to copy, reorder and deletion of items with the
help of mouse clicks. This allows the user to click and hold the
mouse button down over an element, drag it to another
location, and release the mouse button to drop the element
there.
 DRAG & DROP
59
• To achieve drag and drop functionality with traditional HTML4,
developers would either have to either have to use complex
Javascript programming or other Javascript frameworks like
jQuery etc.
• From HTML5 point of view
– By default, all links, text, image are draggable
– make an element draggable:
<div id="ID" draggable="true"> </div>
 DRAG & DROP
60
• Bruce Lawson and Remy Sharp, “Introducing HTML5”
• www.w3.org/
•
•
•
•
www.w3schools.com/html5
faculty.purchase.edu/jeanine.meyer/html5projects.html
http://html5doctor.com/the-figure-figcaption-elements/
http://coding.smashingmagazine.com/2013/01/18/theimportance-of-sections/
• http://www.htmlgoodies.com/html5/tutorials/HTML5Development-Class-Media-Events-3883356.htm
• http://ingus.info/blog/introducing-html5-second-editionbook-review.html
• http://www.wufoo.com/html5/attributes/05-list.html
 REFERENCES
61