1
Illuminating Computer Science CCIT 4-6Sep
http://www.aast.edu/en/colleges/ccit/cs4hs/
Dr Walid M. Aly
Web Programming
New Features in HTML5 /Usability
Dr Walid M. Aly
2
Illuminating Computer Science CCIT 4-6Sep
http://www.aast.edu/en/colleges/ccit/cs4hs/
Dr Walid M. Aly
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.
Illuminating Computer Science CCIT 4-6Sep
http://www.aast.edu/en/colleges/ccit/cs4hs/
Dr Walid M. Aly
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.
Illuminating Computer Science CCIT 4-6Sep
http://www.aast.edu/en/colleges/ccit/cs4hs/
Dr Walid M. Aly
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 address
– The 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 address
– The value of the url field is automatically validated when the form is
submitted
– <input type="url" name="user_url" />
HTML5FormDemo.html
5
Illuminating Computer Science CCIT 4-6Sep
http://www.aast.edu/en/colleges/ccit/cs4hs/
Dr Walid M. Aly
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:
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
6
Illuminating Computer Science CCIT 4-6Sep
http://www.aast.edu/en/colleges/ccit/cs4hs/
Dr Walid M. Aly
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.
HTML5FormDemo.html
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.
<label>Color:
<input type = "color" autofocus />
(Hexadecimal code such as #ADD8E6)
</label>
Illuminating Computer Science CCIT 4-6Sep
http://www.aast.edu/en/colleges/ccit/cs4hs/
Dr Walid M. Aly
<input type="email" />
<input type="url" />
<input type="number" />
<input type="tel" />
8
Illuminating Computer Science CCIT 4-6Sep
http://www.aast.edu/en/colleges/ccit/cs4hs/
Dr Walid M. Aly
placeholder Attribute
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.
<Label>First Name<input type="text" name="fname" placeholder="First name" /><Label />
required Attribute
The 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>
9
Illuminating Computer Science CCIT 4-6Sep
http://www.aast.edu/en/colleges/ccit/cs4hs/
Dr Walid M. Aly
HTML5 <datalist> Tag
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.
<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"/>
dataliastDemo.html
10
Illuminating Computer Science CCIT 4-6Sep
http://www.aast.edu/en/colleges/ccit/cs4hs/
Dr Walid M. Aly
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
<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>
HTML5MultimediaDemo.html
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.
Illuminating Computer Science CCIT 4-6Sep
http://www.aast.edu/en/colleges/ccit/cs4hs/
Dr Walid M. Aly
11
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 element
• Ogg ,mp3 , wav are the only supported audio formats.
• The audio element can play sound files, or an audio stream
<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>
HTML5MultimediaDemo.html
12
Illuminating Computer Science CCIT 4-6Sep
http://www.aast.edu/en/colleges/ccit/cs4hs/
Dr Walid M. Aly
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.
<meter value="2" min="0" max="10"></meter><br />
<meter value="0.6"></meter>
HTML5 <progress> Tag
<progress value="22" max="100"></progress>
ttribute Value
maxNe number
w
valueNe number
w
Description
Specifies how much work the
task requires in total
Specifies how much of the
task has been completed
13
Illuminating Computer Science CCIT 4-6Sep
http://www.aast.edu/en/colleges/ccit/cs4hs/
Dr Walid M. Aly
Web Usability
You Do not
Have to Think!
http://www.webpagesthatsuck.com/
14
Illuminating Computer Science CCIT 4-6Sep
http://www.aast.edu/en/colleges/ccit/cs4hs/
Dr Walid M. Aly
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 traffic
Good design can increase return visits
Good design can help turn “visitors” into “customers”
15
Illuminating Computer Science CCIT 4-6Sep
http://www.aast.edu/en/colleges/ccit/cs4hs/
Dr Walid M. Aly
Top 10 Mistakes of Web Design
1. Using frames

frames break the fundamental model of the web page
2. Gratuitous use of cutting-edge technology

wait until some experience has been gained about the
appropriate use new techniques (trade off!)
3. Scrolling text, marquees, and constantly running
animations

moving images have an overpowering effect on the human
peripheral vision
4. Complex URL’s

a URL should contain human-readable directory and file
names
5. Orphan pages

every page should have a link up to your home page
16
Illuminating Computer Science CCIT 4-6Sep
http://www.aast.edu/en/colleges/ccit/cs4hs/
Dr Walid M. Aly
Top 10 Mistakes of Web Design.......
6. Long scrolling pages

critical content and navigation options should be on the
top part of the page
7. Lack of navigation support

communicate the structure of the information space to
the user
8. Non-standard link colours

use different colours for visited and unvisited links
9. Outdated information
10. Overly long download time

10-15 seconds as the maximum response time before
users lose interest
17
Illuminating Computer Science CCIT 4-6Sep
http://www.aast.edu/en/colleges/ccit/cs4hs/
Dr Walid M. Aly
Site Organisation
Home Page
Topic #1
#1a
Topic #2
#1b
#1c
#2a
Topic #3
#2b
#2c
#3a
#3b
#3c
Simple hierarchical tree structure
18
Illuminating Computer Science CCIT 4-6Sep
http://www.aast.edu/en/colleges/ccit/cs4hs/
Dr Walid M. Aly
Navigation Tools
• Navigational Graphics
– Buttons
– Imagemaps
• For example:
Home
Next
Back
Previous
• Buttons are powerful - don’t abuse them!
• Corresponding text links
19
Illuminating Computer Science CCIT 4-6Sep
http://www.aast.edu/en/colleges/ccit/cs4hs/
Dr Walid M. Aly
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
Appropriate Design
• Know what the objectives of the site are
• Know who the target users are
20
Illuminating Computer Science CCIT 4-6Sep
http://www.aast.edu/en/colleges/ccit/cs4hs/
Dr Walid M. Aly
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 graphics
– Sound / Multimedia etc.
– Anything difficult to read
Content
• A web site must have useful content
• Content must be kept up-to-date
• Content must change regularly
http://www.siphawaii.com/
Illuminating Computer Science CCIT 4-6Sep
21
http://www.aast.edu/en/colleges/ccit/cs4hs/
Dr Walid M. Aly
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>
Graphics
•
•
•
•
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
http://www.adlucent.com/
Illuminating Computer Science CCIT 4-6Sep
http://www.aast.edu/en/colleges/ccit/cs4hs/
22
Dr Walid M. Aly
Where to go to learn???
23
Illuminating Computer Science CCIT 4-6Sep
http://www.aast.edu/en/colleges/ccit/cs4hs/
Dr Walid M. Aly