introduction to html5
Skip this Video
Download Presentation
Introduction to HTML5

Loading in 2 Seconds...

play fullscreen
1 / 123

Introduction to HTML5 - PowerPoint PPT Presentation

  • Uploaded on

Introduction to HTML5. Jeanine Meyer Purchase College/SUNY. Introductions. Jeanine Meyer Purchase College/SUNY: Math/CS & New Media. Prior: IBM Research (robotics, manufacturing research, educational grants), Pace University.

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'Introduction to HTML5' - nay

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
introduction to html5

Introduction to HTML5

Jeanine Meyer

Purchase College/SUNY

  • Jeanine Meyer
    • Purchase College/SUNY: Math/CS & New Media. Prior: IBM Research (robotics, manufacturing research, educational grants), Pace University.
    • 5 books: latest is The Essential Guide to HTML5: Using Games to learn HTML5 & JavaScript
  • HTML5 is the latest/soon to be version of
    • HyperText Markup Language (HTML): text with tags for content
    • JavaScript: scripting/programming language for interactivity, dynamic presentation
    • Cascading Style Sheets: formatting
  • Many new features, for support of semantic web, dynamic/interactive websites
  • CAUTION: definition not official.
  • Browser support evolving.
  • Do ask/remind me to say: what are my names versus built-in parts of HTML5.
new features include
New features include:
  • Semantic elements: header, footer, section, article, others.
  • canvas for drawing
    • paths of rectangles, arcs, lines, images
    • mouse events
  • localStorage (variation of cookies)
  • audio & video elements
    • including drawing video on canvas
this tutorial
This Tutorial
  • Build Favorite sites
    • review HTML structure, new elements)
  • Build Drawings
    • draw rectangles, arcs, lines on canvas
  • Build Coin toss
    • event handling, draw text and images on canvas
  • Find video clips & convert.
    • Add video to favorite sites or make it stand-alone.
  • Build Bouncing Video
    • draw video, create mask, timed event
  • Build geolocation application, including Google Maps API app and localStorage
  • Preview Essential Guide to HTML5
  • TextPad or TextWrangler or NotePad
    • Dreamweaver okay but it does cost.
  • Compatible browser
    • Firefox: works for all examples, including masked video and geolocation
    • Chrome and Safari work for most examples
    • IE9 being tested now
  • Miro Converter
html review
HTML review
  • Elements consist of opening tag, contents of the element and closing tag.
  • Tags have attributes.


  • Some elements/tags are singletons

  • Document Object Model (DOM) defines relationships, attributes & methods of objects.
first webpage favorite sites
First webpage: Favorite Sites
  • Annotated list of 'favorite sites'
  • Need to determine URLs for links, images, brief text.
  • header and article elements
  • style element (CSS) for formatting
    • critical for header and article. Also use it for images
  • script element: single statement to insert date.
  • HTML does not recognize white space.
  • You need to make spacing and line breaks explicit.
  • For your readability, put line breaks and spaces.
  • My objective often is to squeeze things in one slide. This isn't your objective!
html template
HTML template



favorite sites
Favorite Sites
  • overview for this example:

// for header and article and img

content: header, article for each site


Favorite Sites

  • Remember: spaces, line breaks need to be inserted explicitly
  • My first attempt was to use
    to force images to their own line. I changed to using a style to keep formatting in the


Change base location:


Purchase College

Illinois Institute of Technology

  • Geolocation returns accuracy and, maybe, other information, including altitude.
  • These applications mark the center with a red x and display other information
      • Note: accuracy is given in meters in both cases
critical code
Critical code
  • Uses custom image for marker

var xmarker = "x1.png";

marker = new google.maps.Marker({ position: blatlng, title: "center", icon: xmarker, map: map });

  • 3rd parameter to getCurrentPosition call

positionopts = {enableHighAccuracy: true} ;

navigator.geolocation.getCurrentPosition(handler, problemhandler, positionopts);

  • Add form coutput for output = mylat;

document.coutput.lon.value = mylong;

document.coutput.acc.value = position.coords.accuracy;

document.coutput.alt.value = position.coords.altitude;

document.coutput.altacc.value = position.coords.altitudeAccuracy;

document.coutput.heading.value = position.coords.heading;

document.coutput.speed.value = position.coords.speed;

next application persistent storage
Next application:persistent storage
  • Normal situation: no changes to client computer beyond downloaded files.
  • cookies invented (with a pleasing name) to be files associated with each browser to be used only by same server site.
    • convenience: IDs and passwords, preferences, etc.
    • behavioral marketing!
  • Early HTML supported cookies. localStorage is a new variation.
  • CAUTION: Firefox requires the program to run on a server! Chrome allows running locally.
objective add to maps app
Objective: add to maps app
  • 3 buttons: store base, retrieve base stored, change base to last marker
  • localStorage used name-value pairs.
  • Do error checking!
    • check for ability to do localStorage
    • check if there is a stored time.
  • Three buttons, invoking store(), retrieve(), and changebasetomarker()
  • Use try { } catch(e) { } . The code in try will NOT trigger an error, but if there is one, will go to catch.
  • Also use typeof(localStorage) to test if this is defined.

function store() {

if (typeof(localStorage) == "undefined") {

alert("Browser does not recognize HTML local storage.");


else { try { localStorage.setItem("baselat",;




catch(e) {

alert("Error with use of local storage: "+e);}


return false; }

function retrieve() {

if (typeof(localStorage) == "undefined") {

alert("Browser does not recognize HTML local storage.");


else { try {

oldlat= localStorage.getItem("baselat");

oldlng = localStorage.getItem("baselng");

oldname = localStorage.getItem("basename");

if (oldlat==null) {

alert("No base stored");}

else {makemap(Number(oldlat),Number(oldlng));

basename = oldname;

document.getElementById("header").innerHTML = "Base location is "+basename; } }

catch(e) {

alert("Error with use of local storage: "+e);} }

return false; }

changes base to marker
changes base to marker

function changebasetomarker() {

if (lastmarker!="undefined") {


basename = "marker";



  • Error checking good!
  • Many GIS programs with common/similar features
  • Need to determine where information goes
    • my locations array kept information in my JavaScript
plug for book
Plug for Book
  • introduce application, mainly familiar games.
  • critical requirements
  • HTML5 (CSS, JavaScript) features
  • complete code: comments
  • Many chapters involve sets of applications
  • Introduction to programming
  • NOTE: not encyclopedic on features

applications html5 features
Applications (HTML5 features)
  • Favorite sites
  • Dice game: drawing arcs & rectangles
  • Bouncing ball: drawing, including gradient, form validation, timed events
  • Cannonball & Slingshot: drawing lines & images, mouse events, rotation & translation, programmer-defined objects
  • Memory polygons & pictures: drawing, mouse events (clicking on card), timing
applications html5 features1
Applications(HTML5 features)
  • Quiz: dynamically created HTML markup, mouse events on elements, video
  • Mazes: mouse events, drawing, localStorage, radio buttons
  • Rock, Paper, Scissors: drawing, audio
  • Hangman: drawing lines and arcs (ovals), dynamic HTML markup
  • Blackjack: key events, drawing images, footer
  • Please email with comments on this tutorial and HTML5 for
    • professional use
    • educational use
  • Thank you
  • [email protected]