Web Development Study Guide: Lessons 7–8

How to use this guide

Use this guide after reading Lessons 7 and 8 and completing the labs. Practice reading short media, image-map, and script examples and naming exactly what each element, attribute, or term does. For Lesson 8, focus on vocabulary: where each language runs, what each programming term means, and how the DOM, DHTML, and HTML5 APIs fit together.

The ideas that connect Lessons 7–8

Lesson 7 adds media and advanced images to a page with plain HTML5. Lesson 8 explains the technologies that let a page do things beyond HTML. Both lessons trace the same shift:

Proprietary plug-ins such as Adobe Flash have been replaced by native HTML5 features: <video>, <audio>, canvas, geolocation, and drag-and-drop.
HTML5 features work because HTML5, CSS, and JavaScript cooperate through the Document Object Model (DOM).
Some work happens in the browser (client-side) and some on the Web server (server-side). Knowing which side runs the code explains its strengths and limits.
Every choice still has to serve users: fallback text, alt text, working controls, and pages that do not depend on features some users cannot run.

Lesson 7 — Video, Audio and Image Techniques

The `<video>` element

<video width="360" height="270" controls="controls" poster="image.png">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <source src="video.ogg" type="video/ogg">
  Your browser does not support the HTML5 video element.
</video>

Part	Purpose
`controls`	Adds video controls such as Play, Pause, Rewind, and Volume
`poster`	Identifies an image to display until Play is clicked or while the video downloads; it prevents the first frame from displaying
`width`, `height`	Size of the video window in pixels or percent
`<source>`	One media file; list several formats so each browser can play one
`src`	Location and file name of the media resource
`type`	Format or MIME type of the file, such as `video/mp4`
Text inside the element	Fallback shown only when the browser cannot play the media

The three HTML5 video formats are MP4, WebM, and Ogg. MP4 (usually the H.264 codec) is the most widely supported default. A codec is the method used to compress and decompress audio or video.

Use <iframe> to embed a video hosted elsewhere, such as YouTube, instead of copying the file to your site.

The `<audio>` element

<audio controls="controls">
  <source src="uCorpAudio.mp3" type="audio/mpeg">
  Your browser does not support the HTML5 audio element.
</audio>

The <audio> element supports three formats: MP3, Ogg, and WAV.
controls="controls" adds the default play, pause, and volume operations. Without it, the player has no visible controls.
The src value needs the full file name with its extension, and the MP3 MIME type is audio/mpeg.
In the course’s browser chart, Safari is the browser that lacks full support for the three audio formats (it does not play Ogg).

Attribute	Effect
`loop="loop"`	Plays the file over and over without stopping
`autoplay="autoplay"`	Starts playing as soon as the page loads

Audio and video format categories

Category	Formats
Only audio	MP3, WAV
Only video	MP4, WebM
Both video and audio	Ogg

Proprietary plug-ins

Adobe Flash and Microsoft Silverlight once provided animation and video. They had to be installed and updated, drained CPU and battery, failed on many mobile devices, and caused security problems. Both are retired; HTML5 media, CSS, and JavaScript replaced them.

Vector and raster graphics

Vector graphics	Raster (bitmap) graphics
Use mathematical coordinates with lines, curves, and shapes to create images and specify colors	Use many small dots (pixels) to create images and specify colors
Can be scaled or shrunk without losing image quality	Lose quality when enlarged; more detail means larger files
Examples: SVG, EPS; created in tools such as Adobe Illustrator	Examples: JPEG, GIF, PNG; the most common bitmaps on the Web are digitized photographs

Image maps

An image map is a Webpage graphic with one or more clickable regions, called hot spots, that link to other pages or page sections.

<img src="buttons.gif" alt="Home, Search, Help, Order" usemap="#ButtonMap">

<map name="ButtonMap">
  <area shape="rect" coords="0,0,78,75" href="home.htm" alt="home">
  <area shape="circle" coords="120,40,30" href="search.htm" alt="search">
  <area shape="poly" coords="200,10,240,70,160,70" href="help.htm" alt="help">
</map>

The <map> tag defines a client-side image map; its name connects to the image’s usemap="#name".
The <area> tag defines each hot spot region.
Accepted shape values are rect, circle, and poly (plus default for the whole image). Use shape="poly" for a hot spot that is neither rectangular nor circular.
Every <area> with an href needs alt text.

Shape	Coordinates
Rectangle	`coords="x1,y1,x2,y2"` (upper-left corner, then lower-right corner)
Circle	`coords="x1,y1,radius"` (center point, then radius)
Polygon	`coords="x1,y1,x2,y2,...xn,yn"` (each corner, in order)

Coordinates are pixels measured from the image’s top-left corner. They depend on the pixel size of the image: if the image is resized, you must change the coordinates.

Client-side image maps keep the map in the HTML page and are more common. Server-side image maps require server-side scripts, so they are rarely used.

Transparency, interlacing, and animation

Transparency lets the page background show through part of an image, so the image seems to float on the page. The Web-ready formats that support transparency are GIF (GIF89a), SVG, and PNG. Standard JPEG does not.

Interlacing lets a person who has partially received an image see a degraded copy of the entire image, which then fills in. The formats that support interlacing include PNG, GIF 87a and GIF 89a, and JPEG.

Interlaced image	Non-interlaced image
At first appears fuzzy, but continuously sharpens	Is read from top to bottom
Appears as a degraded image as it renders	The top appears after the browser has read 50 percent of the image
Shows the whole image early	Appears invisible or incomplete until the entire image is read

Animation combines several images in a sequence rendered in rapid succession to simulate motion. The animated GIF (GIF89a) is the common Web-ready format; APNG and MNG are PNG-based options.

Creating and managing images

Pixel is short for picture element, the smallest unit a monitor displays.
Color depth is the number of bits per pixel. Higher bit values produce more intense, realistic colors and increase file size.
Resolution is the number of pixels across and down a screen; Web images are sized in pixels.
Layers let you edit each part of an image separately. The PNG file format supports image layers; GIF and JPG do not. (Photoshop’s PSD is a proprietary layered format.)
Photo-management software lets you organize, edit, and share your photos.
Photos on photo-sharing sites are copyrighted to the photographer; get permission to use them.
Stock photography is any group of images for which you can purchase the rights to use in printed material or on a Website; the images are licensed, not free. Royalty-free means you pay once and may reuse the image under the license; rights-managed means you pay for a specific, negotiated use.
On a corporate site, logos and trademarks are crucial for name recognition and branding.
For SEO, give image files descriptive names and always include meaningful alt text.

Lesson 7 terms to know

video, audio, source, controls, poster, src, type, MIME type, loop, autoplay, fallback text, iframe, MP4, WebM, Ogg, MP3, WAV, codec, H.264, plug-in, Flash, vector graphic, raster graphic, bitmap, image map, hot spot, map, area, usemap, shape, coords, rect, circle, poly, client-side image map, server-side image map, transparency, GIF89a, PNG, interlacing, non-interlaced, animation, pixel, color depth, resolution, layers, stock photography, royalty-free, rights-managed, photo sharing, photo-management software

Lesson 8 — Extending HTML

Server-side and client-side scripting

Server-side code runs on the Web server through an interpreter or compiled runtime installed there. The Web server executes the CGI application or servlet that processes a submitted form.
Client-side code runs in the user’s browser after the page downloads. Users and organizations can disable client-side scripts, and some browsers (such as the text-only Lynx) do not support them.
Webpages can be developed with both client-side and server-side scripting.

Programming vocabulary

Term	Meaning
Variable	A place in memory used to store information for later use
Array	A collection of values stored in a series
Function	A stand-alone, reusable segment of program code that is not part of an object
Interpreter	Software used to read and process code in standard text files
Compiler	A program that converts text files into executable applications
Include	A command used to refer to a set of files called a library in your code
Event handler	A line of code that lets a language respond to a specific event or user input
Object-oriented	A style of programming that links data to the processes that manipulate it

Statements control program flow: if/then, if/then/else, do while, do until, and break.

Server-side languages

Language	Key facts
PHP	Interpreted scripting language that always runs on the server
Perl	Cross-platform language for CGI programs; the first-line shebang (`#!`) points to its interpreter
ASP.NET	Microsoft’s framework for dynamic Web applications, part of .NET
Python	Readable, object-oriented language with frameworks such as Django
Go	Compiles to one cross-platform executable, which shortens the production-to-distribution pipeline; it lacks some common language features and has weaker runtime safety
Java	Object-oriented compiled language whose applications are platform-independent (platform agnostic); used to create JSP and servlets
C++	Object-oriented compiled language whose programs must be compiled for a specific computer type
Visual Basic	Compiled Microsoft language best used for stand-alone applications and server-side Web applications
C#	Compiled object-oriented language that is the proprietary Microsoft competitor to Java

Java’s motto is “write once, run anywhere,” but applications still need to be tested on multiple systems.

A server-side include (SSI) is an instruction in an HTML page that tells the server to insert content before sending the page.

JavaScript

JavaScript is a scripting language that adds interactivity. It is used mostly on the client side, but it can be used on either the client side or the server side (server-side JavaScript).

It is placed in an HTML document with the <script> tag or linked from an external .js file referenced by the page.
It can detect the browser type and version (navigator.userAgent), show alert() and prompt() boxes, change content on mouse rollover, deposit cookies on users’ systems, and help with copyright protection.
It cannot access databases or anything outside the Webpage itself.
Its advantages are quick development, ease of learning, and platform independence.
Its three major built-in objects are Document, Navigator, and Array. Array lets you create a series of values to manipulate later.
The course calls JavaScript object-based, not object-oriented, because (by the course’s definition) it does not support inheritance.
Java and JavaScript are different languages.

Browser detection is the ability to use the DOM to discover particular aspects of a user agent. A cookie is a small text file stored on the user’s computer to maintain state and track activity; never store passwords in cookies.

The DOM and DHTML

The Document Object Model (DOM) is a W3C, vendor-neutral, cross-platform API that specifies how objects in a document can be referred to and manipulated through scripting languages. It represents a page as a tree:

document
└── <html>
    ├── <head>
    │   └── <title> → "My Website"
    └── <body>
        ├── <h1> → "Welcome"
        └── <a> → href attribute, "uCorp" text

Dynamic HTML (DHTML) is a general term for the combination of HTML, script, styles, and the DOM that provides Webpage interactivity. DHTML creates pages that react to user actions, animates text when the mouse passes over part of a page, and exchanges content without refreshing the browser window. Because it does this without contacting the server, DHTML decreases the burden on the server.

Remember the relationship: the DOM is the standard; DHTML is what you build with it.

HTML5 APIs

An API (Application Programming Interface) is a set of commands and functions that lets developers communicate with an application or operating system. HTML5 APIs are the best examples of DHTML because they use HTML5, CSS, and JavaScript to access the DOM.

API	What it does
Canvas	Provides a place on a Webpage where developers display graphics, animation, video, and games on the fly without a plug-in
Geolocation	Determines a user’s current position, monitors the location, and updates any changes (with the user’s permission)
Drag-and-drop	Lets a user grab an object and move it to a different location on the screen, called a drop zone

The <canvas> element has only two attributes: height and width. A script draws on it with getContext("2d") and methods such as fillRect(). Geolocation uses getCurrentPosition(), watchPosition(), and clearWatch().

Databases, permissions, and n-tier applications

Every database application has three parts: data, business logic (the SQL coding that creates relationships with the stored data), and presentation (what users see).

Model	Description
Single-tier	Data, business logic, and presentation are all combined in one application or database
Two-tier	The client handles presentation and business logic, and a server houses only the data
N-tier	Data, business logic, and presentation are completely separated

Scripts often fail because of permissions. Give files only the permissions they need. The default administrative username is Administrator on Windows and root on UNIX/Linux.

Web application frameworks such as Django (Python) and Ruby on Rails supply reusable code for building sites faster.

Lesson 8 terms to know

server-side script, client-side script, variable, array, function, interpreter, compiler, include, event handler, object-oriented, object-based, PHP, Perl, shebang, ASP.NET, Python, Go, Java, JSP, servlet, C++, Visual Basic, C#, SSI, JavaScript, script, document, navigator, Array, browser detection, cookie, DOM, DHTML, API, canvas, getContext, geolocation, drag-and-drop, drop zone, data, business logic, presentation, single-tier, two-tier, n-tier, Administrator, root, Django, Ruby on Rails