1. CPSC 594B: Software Engineering Project Lecture 1: Introduction to HTML5 issaa@ucalgary.ca Lecturer: Ayman Issa Office: ICT 555

2. Agenda Lesson Objectives The need for new HTML version Features Enhancements Coquille Improvement Q&A References

3. Objectives By the end of this lesson, students should be able to: –Name three motivations for HTML5. –Explain the main features of HTML5. –Implement at least three HTML5 tags. –Identify two areas for improvement in Coquille’s implementation.

4. The need Current World Wide Web is a mixture of features introduced by various specifications. An attempt to define a single markup language that can be written in either HTML or XHTML syntax. A potential candidate for cross-platform mobile applications.

5. Features Backwards compatible with legacy Applications Author familiarity Lenient and forgiving syntax Convenient shorthand syntax Strict XML Syntax Integrate directly with other XML vocabularies

6. Overview of Enhancements Structure and Semantics Embedded Content and Multimedia Forms Repetition Model Others

7. Structure and Semantics

8. <div id="nav"> Structure

9. Dates and Times The time Element – Fri, Aug 03 2007 at 09:30

10. Meter Representing scalar measurements or fractional values Useful for: –User Ratings (e.g. YouTube Videos) –Seach Result Relevance –Disk Quota Usage

11. Using Meter 60% 3/5 6 blocks used (out of 10 total) Medium

12. Progress Show completion progress of a task Progress bars are widely used in applications Useful for: –Indicate loading progress of an AJAX application –Show user progress through a series of forms –Making impatient users wait

13. Using Progress Step 3 of 6 50% Complete Half way!

14. M Marked or Highlighted text Indicates point of interest or relevance Useful for: –Highlighting relevant code in a code sample –Highlighting search keywords in a document (e.g. in Google Cache)

15. Using M The highlighted part below is where the error lies: var i: Integer; begin i := 1.1 ; end.

16. Embedded Content and Multimedia

17. Canvas Dynamic and interactive graphics Draw images using 2D drawing API –Lines, curves, shapes, fills, etc. Useful for: –Graphs –Applications –Games and Puzzles –And more…

18. Canvas Examples: Graphs Draws graphs from any data source, such as a table

19. Canvas Examples: Applications CanvasPaint Clone of MS Paint built with Canvas Could be used to build a Shared Whiteboard application

20. Video and Audio Videos have become very popular Currently difficult to embed videos in HTML Flash has become the de facto standard Adding native support to browsers

21. Using Video and Audio... Play Listen

22. Forms

23. Form Controls HTML 4 controls are too limited Several new types added

24. Form Controls: Dates and Times And more…

25. Form Controls: Numbers

26. Form Controls: Email and URIs

27. Form Controls: Combo Boxes

28. Form Validation New attributes to describe validity constraints for the expected input –required, pattern, min, max, etc. New DOM APIs allow scripts to detect and deal with user input errors more easily

29. Repetition Model

30. Allows client side processing to repeat sections based on templates Traditionally required scripts or server side interaction to add additional sections Useful for: –Adding multiple players to a game –Adding multiple, alternative contact details (e.g. home phone, work phone, mobile phone, etc.)

31. Using the Repetition Model Add Team Member Team Members Na me Ra nk Jack O'NeillRemo ve Colonel Remo ve Sam CarterMajor Remo ve Daniel JacksonCivilian Remo ve Continu e Remo ve Teal’cAlien Remove Remove Remove Remove Add Team Member

32. Other Enhancements GeoLocation Support: FF, Opera, Chrome, Safari, IE8. Storage: –Session and Local –Web Databases –Application Cache

33. Discussion What improvements can HTML5 make to Coquille?

34. Questions?

35. References Wikipedia - http://en.wikipedia.org/wiki/HTML5 http://en.wikipedia.org/wiki/HTML5 HTML5 Doctor - http://html5doctor.com/http://html5doctor.com/ Dive Into HTML5 - http://diveintohtml5.org/http://diveintohtml5.org/ Keith J., HTML5 For Web Designers, 2010.