2 Web Programming New Features in HTML5 Usability HTML5 new Input elements HTML5 has several new input types for forms These new features allow better input control and validation Not all major browsers support all the new input types However you can already start using them If th ID: 312151
Download Presentation The PPT/PDF document "1 Dr Walid M. Aly" is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.
Slide1
1Slide2
Dr Walid M. Aly
2
Web Programming
New
Features in HTML5 /Usability
Slide3
HTML5 new Input elements
HTML5 has several new input types for forms. These new features allow better input control and validation
.
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.Slide4
Validation
The new HTML 5
input
types are
self validating
on the client side, eliminating the need to add complicated JavaScript code to your web pages to validate user input, reducing the amount of invalid data submitted and consequently reducing Internet traffic between the server and the client to correct invalid input.
The server should still validate all user input.
When a user enters data into a form then submits the form the browser immediately checks the self-validating elements to ensure that the data is correct
Copyright © Pearson, Inc. 2013. All Rights Reserved.Slide5
New form controls
Several new input types for forms
allow for better input control and
validation
Input Type :
email
-- used for input fields that should contain an e-mail addressThe value of the email field is automatically validated when the form is submitted
<input type="email" name="
user_email" />Input Type :
url used for input fields that should contain a URL addressThe value of the
url field is automatically validated when the form is submitted<input type="
url" name="user_url" />
HTML5FormDemo.html
5Slide6
Input Type :number
The number type is used for input fields that should contain a numeric value.
You can also set restrictions on what numbers are accepted:
6
Points: <input type="number" name="points" min="1" max="10" />
Input Type : range
The range type is used for input fields that should contain a value from a range of numbers.
The range type is displayed as a slider bar.
You can also set restrictions on what numbers are accepted:
<input type="range" name="points" min="1" max="10" />
HTML5FormDemo.html
HTML5 is not yet an official standard, and no browser has full HTML5 support Slide7
input
Type
color
The
color input type
enables the user to enter a color.
At the time of this writing, old browsers render the
color
input type as a text field in which the user can enter a hexadecamal
code or a color name. In Browsers implementing this input ,when you click a
color input, browsers display a color picker
similar to the Microsoft Windows color dialog shown.
<label>Color:
<input type = "color" autofocus />
(Hexadecimal code such as #ADD8E6)
</label>
autofocus
Attribute
The
autofocus attribute
—an optional attribute that can be used in only one
input
element on a form—automatically gives the focus to the
input
element, allowing the user to begin typing in that element immediately.
HTML5FormDemo.htmlSlide8
<input
type
=
"
url
"
/>
<input
type
=
"email"
/>
<input
type
=
"number"
/>
<input
type
=
"
tel
"
/>
8Slide9
placeholder
Attribute
9
<Label>First Name<input
type="text" name="
fname
" placeholder="First name"
/><Label />
The placeholder attribute specifies a short hint that describes the expected value of an input field (e.g. a sample value or a short description of the expected format).The hint is displayed in the input field when it is empty, and disappears when the field gets focus.Note: The placeholder attribute works with the following input types: text, search,
url, tel, email, and password.
required
AttributeThe required attribute forces the user to enter a value before submitting the form. You can add
required to any of the input types.
<label>Email:
<input type = "email" placeholder = "name@domain.com"
required />
</label>Slide10
HTML5
<
datalist
> Tag
10
dataliastDemo.html
<
datalist
id="browsers">
<option value="Internet Explorer">
<option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari">
</datalist><input type="text" id="browser" list="browsers" placeholder="select your browser"/>The <datalist
> tag specifies a list of pre-defined options for an <input> element.The <datalist> tag is used to provide an "autocomplete" feature on <input> elements. Users will see a drop-down list of pre-defined options as they input data.Use the <input> element's list attribute to bind it together with a <datalist> element.Slide11
HTML5 <video>
Until HTML5, there has never been a standard for showing a video or movie on a web page.
Today, most videos are shown through a
plugin
(like flash). However, different browsers may have different
plugins
.HTML5 defines a new element which specifies a standard way to include video: the
<video> element.Currently, there are 3 supported video formats for the video element:
Ogg, MPEG4 and WebM
11
<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 the video tag.
</video>The control attribute adds video controls, like play, pause, and volume.The <video> element allows multiple <source> elements. <source> elements can link to different video files. The browser will use the first recognized format.
HTML5MultimediaDemo.htmlSlide12
HTML5 <audio>
Most audio are played through a
plugin
(flash)
However, not all browsers have the same
plugins
HTML5 specifies a standard way to include audio, with the audio elementOgg ,mp3 , wav are the only supported audio formats.
The audio element can play sound files, or an audio stream
HTML5MultimediaDemo.html
<audio controls="controls">
<source src
="music1.ogg" type="audio/ogg" /><source
src="music1.mp3" type="audio/mpeg" />Your browser does not support the audio element.</audio>
12Slide13
HTML5 <meter>
Tag
The <meter> tag defines a scalar measurement within a known range, or a fractional value. This is also known as a gauge.
Examples: Disk usage, the relevance of a query result, etc.
13
<meter value="2" min="0" max="10"></meter><br />
<meter value="0.6"></meter>
ttribute
Value
Description
max
New
number
Specifies how much work the task requires in total
value
New
number
Specifies how much of the task has been completed
HTML5 <progress> Tag
<progress value="22" max="100"></progress
>Slide14
Web Usability
14
http://www.webpagesthatsuck.com/
You Do not Have to Think!Slide15
Importance of Design
Design Matters!
Web sites are usually competing for attention with
many other similar sites
Especially true of commercial sites
Traffic
is their “life-blood”Good design can drastically increase
trafficGood design can increase return visits
Good design can help turn “visitors” into “customers”
15Slide16
Top
10 Mistakes of Web
Design
Using frames
frames break the fundamental model of the web page
Gratuitous use of cutting-edge technology
wait until some experience has been gained about the appropriate use new
techniques (
trade off!
)
Scrolling text, marquees, and constantly running animationsmoving images have an overpowering effect on the human peripheral vision
Complex URL’sa URL should contain human-readable directory and file names
Orphan pagesevery page should have a link up to your home page 16Slide17
Top 10 Mistakes of Web Design.......
Long scrolling pages
critical content and navigation options should be on the top part of the page
Lack of navigation support
communicate the structure of the information space to the user
Non-standard link colours
use different colours for visited and unvisited links
Outdated information
Overly long download time
10-15 seconds as the maximum response time before users lose interest
17Slide18
Site Organisation
Home Page
Topic #1
#1a
#1b
#1c
Topic #2
#2a
#2b
#2c
Topic #3
#3a
#3b
#3c
Simple hierarchical tree structure
18Slide19
Navigation Tools
Navigational Graphics
Buttons
Imagemaps
For example:
Buttons are powerful - don’t abuse them!
Corresponding text links
Home
Next
Back
Previous
19Slide20
Consistency
Be consistent in the design of navigational tools
Buttons should be stylistically consistent (i.e. similar colour scheme, feel etc.)
Location on screen should be consistent (do not change the orders of buttons on different
pages
20
Appropriate Design
Know what the objectives of the site are
Know who the target users areSlide21
The Home Page
The gateway to the site - much more than just a title!
Must contain the following in an easily comprehensible form:
The purpose of the site
What kind of content is in the site
How to find the content and use the site
Must avoid:
Large graphicsSound / Multimedia etc.
Anything difficult to read
21
Content
A web site must have useful content
Content must be kept up-to-date
Content must change regularly
http://www.siphawaii.com/Slide22
Text
Make sure the contract between text and background is fine
Do
not mix a large number of fonts, sizes and styles
Do not use multiple text colours on the same
page
Check for spelling, typos etc.Never ever use the <BLINK> or <marquees>
22
Size of graphics is a very common problem
Aim for 35-65K total size per page
Thumbnails are useful
Crop images - remove extraneous white space
Graphics
http://www.adlucent.com/Slide23
Where to go to learn???
23