Cpsc 594b software engineering project
This presentation is the property of its rightful owner.
Sponsored Links
1 / 35

CPSC 594B: Software Engineering Project PowerPoint PPT Presentation


  • 104 Views
  • Uploaded on
  • Presentation posted in: General

CPSC 594B: Software Engineering Project. Lecture 1: Introduction to HTML5 [email protected] Lecturer: Ayman Issa Office: ICT 555. Agenda. Lesson Objectives The need for new HTML version Features Enhancements Coquille Improvement Q&A References. Objectives.

Download Presentation

CPSC 594B: Software Engineering Project

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Cpsc 594b software engineering project

CPSC 594B: Software Engineering Project

Lecture 1: Introduction to HTML5

[email protected]

Lecturer: Ayman Issa

Office: ICT 555


Agenda

Agenda

  • Lesson Objectives

  • The need for new HTML version

  • Features

  • Enhancements

  • Coquille Improvement

  • Q&A

  • References


Objectives

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.


The need

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.


Features

Features

  • Backwards compatible with legacy Applications

  • Author familiarity

  • Lenient and forgiving syntax

  • Convenient shorthand syntax

  • Strict XML Syntax

  • Integrate directly with other XML vocabularies


Overview of enhancements

Overview of Enhancements

  • Structure and Semantics

  • Embedded Content and Multimedia

  • Forms

  • Repetition Model

  • Others


Structure and semantics

Structure and Semantics


Structure

Structure

<header>

<divid="header">

<nav>

<div

id="nav">

<section>

<divid="content">

<aside>

<divid="right">

<article>

<divclass="article">

<footer>

<divid="footer">


Dates and times

Dates and Times

  • The time Element

    • <timedatetime="2007-08-02T23:30Z"> Fri, Aug 03 2007 at 09:30</time>


Meter

Meter

  • Representing scalar measurements or fractional values

  • Useful for:

    • User Ratings (e.g. YouTube Videos)

    • Seach Result Relevance

    • Disk Quota Usage


Using meter

Using Meter

  • <meter>60%</meter>

  • <meter>3/5</meter>

  • <meter>6 blocks used (out of 10 total)</meter>

  • <metervalue="0.6">Medium</meter>


Progress

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


Using progress

Using Progress

  • <progress>Step 3 of 6</progress>

  • <progress>50% Complete</progress>

  • <progressvalue="0.5"> Half way!</progress>


Cpsc 594b software engineering project

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)


Using m

Using M

  • <p>The highlighted part below is where the error lies:</p><pre><code>var i: Integer;begin i := <m>1.1</m>;end.</code></pre>


Embedded content and multimedia

Embedded Content and Multimedia


Canvas

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…


Canvas examples graphs

Canvas Examples: Graphs

  • Draws graphs from any data source, such as a table


Canvas examples applications

Canvas Examples: Applications

  • CanvasPaint

  • Clone of MS Paint built with Canvas

  • Could be used to build a Shared Whiteboard application


Video and audio

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


Using video and audio

Using Video and Audio

  • <videosrc="movie.ogg"id="video">...</video>

  • <buttononclick="video.play();"> Play</button>

  • <audiosrc="/tunes/boom.mp3" controls="true"><a href="/tunes/boom.mp3">Listen</a></audio>


Forms

Forms


Form controls

Form Controls

  • HTML 4 controls are too limited

  • Several new types added


Form controls dates and times

Form Controls: Dates and Times

  • <inputtype="datetime">

  • <inputtype="date">

  • <inputtype="time">

  • And more…


Form controls numbers

Form Controls: Numbers

  • <inputtype="number">

  • <inputtype="range">


Form controls email and uris

Form Controls: Email and URIs

  • <inputtype="email">

  • <inputtype="url">


Form controls combo boxes

Form Controls: Combo Boxes

  • <inputlist="title-list"><datalistid="title-list"> <optionvalue="..."></datalist>


Form validation

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


Repetition model

Repetition Model


Repetition model1

Repetition Model

  • 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.)


Using the repetition model

Colonel

Jack O'Neill

Remove

Major

Sam Carter

Remove

Civilian

Daniel Jackson

Remove

Using the Repetition Model

Team Members

<trrepeat-template="member"repeat="0">

<td><inputtype="text"name="member0.rank"></td>

<td><inputtype="text"name="member0.name"></td>

<td><buttontype="remove">Remove</button></td>

</tr>

<trrepeat-template="member"repeat="1">

<td><inputtype="text"name="member1.rank"></td>

<td><inputtype="text"name="member1.name"></td>

<td><buttontype="remove">Remove</button></td>

</tr>

<trid="member"repeat="template"repeat-start="2">

<td><inputtype="text"name="member[member].rank"></td>

<td><inputtype="text"name="member[member].name"></td>

<td><buttontype="remove">Remove</button></td>

</tr>

<trid="member"repeat="template"repeat-start="2">

<td><inputtype="text"name="member[member].rank"></td>

<td><inputtype="text"name="member[member].name"></td>

<td><buttontype="remove">Remove</button></td>

</tr>

Rank

Name

Remove

Alien

Teal’c

Add Team Member

Add Team Member

Continue

Remove

<buttontype="add"template="member">Add Team Member</button>


Other enhancements

Other Enhancements

  • GeoLocation Support: FF, Opera, Chrome, Safari, IE8.

  • Storage:

    • Session and Local

    • Web Databases

    • Application Cache


Discussion

Discussion

  • What improvements can HTML5 make to Coquille?


Questions

Questions?


References

References

  • Wikipedia - http://en.wikipedia.org/wiki/HTML5

  • HTML5 Doctor - http://html5doctor.com/

  • Dive Into HTML5 - http://diveintohtml5.org/

  • Keith J., HTML5 For Web Designers, 2010.


  • Login