1. Dr Walid M. Aly Illuminating Computer Science CCIT 4-6Sep http://www.aast.edu/en/colleges/ccit/cs4hs/http://www.aast.edu/en/colleges/ccit/cs4hs/ 1

2. Dr Walid M. Aly Illuminating Computer Science CCIT 4-6Sep http://www.aast.edu/en/colleges/ccit/cs4hs/http://www.aast.edu/en/colleges/ccit/cs4hs/ Dr Walid M. Aly 2 Web Programming New Features in HTML5 /Usability

3. Dr Walid M. Aly Illuminating Computer Science CCIT 4-6Sep http://www.aast.edu/en/colleges/ccit/cs4hs/http://www.aast.edu/en/colleges/ccit/cs4hs/ 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.

4. Dr Walid M. Aly Illuminating Computer Science CCIT 4-6Sep http://www.aast.edu/en/colleges/ccit/cs4hs/http://www.aast.edu/en/colleges/ccit/cs4hs/ 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.

5. Dr Walid M. Aly Illuminating Computer Science CCIT 4-6Sep http://www.aast.edu/en/colleges/ccit/cs4hs/http://www.aast.edu/en/colleges/ccit/cs4hs/ 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 : 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 – HTML5FormDemo.html 5

6. Dr Walid M. Aly Illuminating Computer Science CCIT 4-6Sep http://www.aast.edu/en/colleges/ccit/cs4hs/http://www.aast.edu/en/colleges/ccit/cs4hs/ 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 : 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: HTML5FormDemo.html HTML5 is not yet an official standard, and no browser has full HTML5 support

7. Dr Walid M. Aly Illuminating Computer Science CCIT 4-6Sep http://www.aast.edu/en/colleges/ccit/cs4hs/http://www.aast.edu/en/colleges/ccit/cs4hs/ 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. Color: (Hexadecimal code such as #ADD8E6) 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.html

8. Dr Walid M. Aly Illuminating Computer Science CCIT 4-6Sep http://www.aast.edu/en/colleges/ccit/cs4hs/http://www.aast.edu/en/colleges/ccit/cs4hs/ 8

9. Dr Walid M. Aly Illuminating Computer Science CCIT 4-6Sep http://www.aast.edu/en/colleges/ccit/cs4hs/http://www.aast.edu/en/colleges/ccit/cs4hs/ placeholder Attribute 9 First Name 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 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. Email: <input type = "email" placeholder = "name@domain.com" required />

10. Dr Walid M. Aly Illuminating Computer Science CCIT 4-6Sep http://www.aast.edu/en/colleges/ccit/cs4hs/http://www.aast.edu/en/colleges/ccit/cs4hs/ HTML5 Tag 10 dataliastDemo.html The tag specifies a list of pre-defined options for an element. The tag is used to provide an "autocomplete" feature on elements. Users will see a drop-down list of pre-defined options as they input data. Use the element's list attribute to bind it together with a element.

11. Dr Walid M. Aly Illuminating Computer Science CCIT 4-6Sep http://www.aast.edu/en/colleges/ccit/cs4hs/http://www.aast.edu/en/colleges/ccit/cs4hs/ HTML5 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 element. Currently, there are 3 supported video formats for the video element: Ogg, MPEG4 and WebM 11 Your browser does not support the video tag.  The control attribute adds video controls, like play, pause, and volume.  The element allows multiple elements. elements can link to different video files. The browser will use the first recognized format. HTML5MultimediaDemo.html

12. Dr Walid M. Aly Illuminating Computer Science CCIT 4-6Sep http://www.aast.edu/en/colleges/ccit/cs4hs/http://www.aast.edu/en/colleges/ccit/cs4hs/ HTML5 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 HTML5MultimediaDemo.html Your browser does not support the audio element. 12

13. Dr Walid M. Aly Illuminating Computer Science CCIT 4-6Sep http://www.aast.edu/en/colleges/ccit/cs4hs/http://www.aast.edu/en/colleges/ccit/cs4hs/ HTML5 Tag The 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 ttributeValueDescription maxmaxNe w numberSpecifies how much work the task requires in total valuevalueNe w numberSpecifies how much of the task has been completed HTML5 Tag

14. Dr Walid M. Aly Illuminating Computer Science CCIT 4-6Sep http://www.aast.edu/en/colleges/ccit/cs4hs/http://www.aast.edu/en/colleges/ccit/cs4hs/ Web Usability 14 http://www.webpagesthatsuck.com/ You Do not Have to Think!

15. Dr Walid M. Aly Illuminating Computer Science CCIT 4-6Sep http://www.aast.edu/en/colleges/ccit/cs4hs/http://www.aast.edu/en/colleges/ccit/cs4hs/ 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

16. Dr Walid M. Aly Illuminating Computer Science CCIT 4-6Sep http://www.aast.edu/en/colleges/ccit/cs4hs/http://www.aast.edu/en/colleges/ccit/cs4hs/ 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

17. Dr Walid M. Aly Illuminating Computer Science CCIT 4-6Sep http://www.aast.edu/en/colleges/ccit/cs4hs/http://www.aast.edu/en/colleges/ccit/cs4hs/ 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

18. Dr Walid M. Aly Illuminating Computer Science CCIT 4-6Sep http://www.aast.edu/en/colleges/ccit/cs4hs/http://www.aast.edu/en/colleges/ccit/cs4hs/ Site Organisation Home Page Topic #1 #1a#1b #1c Topic #2 #2a#2b #2c Topic #3 #3a#3b #3c Simple hierarchical tree structure 18

19. Dr Walid M. Aly Illuminating Computer Science CCIT 4-6Sep http://www.aast.edu/en/colleges/ccit/cs4hs/http://www.aast.edu/en/colleges/ccit/cs4hs/ Navigation Tools Navigational Graphics – Buttons – Imagemaps For example: Buttons are powerful - don’t abuse them! Corresponding text links HomeNext BackPrevious 19

20. Dr Walid M. Aly Illuminating Computer Science CCIT 4-6Sep http://www.aast.edu/en/colleges/ccit/cs4hs/http://www.aast.edu/en/colleges/ccit/cs4hs/ 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 are

21. Dr Walid M. Aly Illuminating Computer Science CCIT 4-6Sep http://www.aast.edu/en/colleges/ccit/cs4hs/http://www.aast.edu/en/colleges/ccit/cs4hs/ 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 21 Content A web site must have useful content Content must be kept up-to-date Content must change regularly http://www.siphawaii.com/

22. Dr Walid M. Aly Illuminating Computer Science CCIT 4-6Sep http://www.aast.edu/en/colleges/ccit/cs4hs/http://www.aast.edu/en/colleges/ccit/cs4hs/ 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 or 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/

23. Dr Walid M. Aly Illuminating Computer Science CCIT 4-6Sep http://www.aast.edu/en/colleges/ccit/cs4hs/http://www.aast.edu/en/colleges/ccit/cs4hs/ Where to go to learn??? 23