Neal Stublen

Course Road Map  Create web page layouts using CSS  Manage CSS  Test website validity  Create navigation menus using CSS  Incorporate meta content and multimedia

 Refresh and redirect pages  Link media to a web page  Embed media in a web page What’s Ahead?

Refresh to Update Content  If your site’s content may change… Stock prices, sports scores, traffic information You can try to reload the page every 30 seconds…

Redirect to New Content  If your site’s content has moved… Site redesign, newer information You can redirect to another page…

Any Gotchas?  What should you consider when refreshing and redirecting pages?

Some Gotchas!  Browsers may allow the user to disable refreshes and redirects that are specified in meta tags Redirects should include a message to indicate what’s happening along with a link to the new page  You may refresh the page and interrupt the user (this could be annoying)

Practice Activity  Refresh a page, Activity 1 Specify a page refresh (p.118)  Redirect a page, Activity 2 Specify a page redirect (p.120)

Refresh Alternative  Use JavaScript and AJAX to update only portions of the page that may have changed Faster, less obtrusive Consider Gmail when you delete a message (Evening class scheduled for October)

 Refresh and redirect pages  Link media to a web page  Embed media in a web page What’s Ahead?

Practice Activity  Refresh a page, Activity 3 Specify a page refresh (p.124)

 Refresh and redirect pages  Link media to a web page  Embed media in a web page What’s Ahead?

Alternative to Linking  Embedding media in a web page allows the user to play the media without leaving the page YouTube Adobe Flash

Object Elements  elements can be used to embed media files on a page  Media playback occurs within the browser  The attributes of the element help the browser locate the media content  elements also help control media playback

Example <object standby=“Loading audio…” type=“application/x-mplayer2” data=“media/coffee.mp3” width=“320” height=“45”> <param name=“src” value=“media/coffee.mp3” /> <param name=“autostart” value=“true” />

MIME Types  The type attribute identifies the media type for the embedded content  It helps the browser locate the appropriate plug-in for playback  Not always necessary; it will depend on the media and the browser

Sample MIME Types audio/x-ms-wma (Windows Media) audio/x-wav (WAV audio files) audio/mpeg (MP3 audio files) video/x-ms-wmv (Windows Media) video/quicktime (Quicktime Media) application/x-shockwave-flash (Flash) application/x-mplayer2 (Windows Media)

Practice Activity  Activity 5-4 (p.131) Embedding a WMV file  Activity 5-5 (p.134) Embedding an MP3 file  Activity 5-6 (p.137) Embedding an MOV file  Activity 5-67 (p.144) Embedding an SWF file

Practice Activity  Most importantly…YouTube  We’ll go back and modify Activity 5-4 to embed a YouTube video instead of a WMV file.

HTML5 Media Additions  The newest version of the HTML specification includes and elements for embedding media  These would be preferable to using elements  (Evening classes scheduled for June and September)

 Refresh and redirect pages  Link media to a web page  Embed media in a web page What’s Behind?

Oops! That’s Bad…  Your site is published online  You want to make changes  What if you mess up and need to start over?  What if you can’t get back to where you started?

A Simple Solution  Archive the folder for the current version of your site site_folder  site_folder.v01  Begin making changes to a copy of that original version

Compare Versions  Tools allow you to compare one folder’s content with another folder’s content Microsoft Code Compare (free) Beyond Compare (not free) Araxis Merge (even less free, but supports OSX)  I’m certain there are others; these are just the ones I’ve used.