CS2413: Web Site Development
Weekly Materials - Week 12
Click Topic to Open | Open All | Close All
Objectives
Chapter 11: Web Multimedia and Interactivity
  • Describe the purpose of plug- ins, helper applications, media containers, and codecs
  • Describe the types of multimedia files used on the Web
  • Configure hyperlinks to multimedia files
  • Configure audio and video on a web page with HTML5 elements
  • Configure a Flash animation on a web page
  • Configure a Java applet on a web page
  • Create an interactive image gallery with CSS
  • Configure the CSS3 transform and transition properties
  • Describe features and common uses of JavaScript
  • Describe the purpose of HTML5 APIs such as geolocation, web storage, offline web applications, and canvas
  • Describe features and common uses of Ajax
  • Describe features and common uses of jQuery
  • Locate Flash, Java applets, JavaScript, Ajax, and jQuery resources on the Web
Chapter 13: Web Promotion
  • Identify commonly used search engines and search indexes
  • Describe the components of a search engine
  • Design web pages that are friendly to search engines
  • Submit a website for inclusion in a search engine or search directory
  • Monitor a search engine listing
  • Describe other website promotion activities
  • Use the iframe element to create an inline frame
Assignments and Due Dates

Assignments and Due Dates: View

Required Readings

Web Development & Design Foundations with HTML5 - 7th Edition by Terry Felke-Morris
Chapter 11: Web Multimedia and Interactivity
Chapter 13: Web Promotion

Required Tutorials
  1. Text's Companion Website - VideoNotes: http://wps.pearsoned.com/ecs_felke_webdevdesf_7/
    (Page number indicates related page in the textbook)
    • Chapter 11: HTML5 Video (Page 470)
    • Chapter 13: Configure an Inline Frame (Page 548)
  2. Search Engine Optimization (SEO) for Small Businesses (3:00 min, Page 536)
    http://www.youtube.com/watch?v=yfZZeTTp3Rc&feature=channel&list=UL
  3. What is Search Engine Optimization/SEO (3:30 min, Page 536)
    http://www.youtube.com/watch?v=hF515-0Tduk
  4. Search Engine Marketing for Small Businesses (2:37 min, Page 540)
    http://www.youtube.com/watch?v=wE2nMxkCh-A&feature=plcp
Not Required but Recommended...Interesting!
  1. What is Social Media? Find out exactly what is social media... (6:22 min)
    http://www.youtube.com/watch?v=5mid8p4A6Eg&feature=related

Sample Code and/or Data Files
  • Textbook's Chapter and Web Site Case Study Data Files
    • http://wps.pearsoned.com/ecs_felke_webdevdesf_7/243/62410/15977113.cw/index.html
    • Click on Student Resources
      Click on Student Data Files in left margin
    • Download the Zip file for the current chapter
    • Extract/unzip the file
    • Chapter files will be visible or accessible by opening various folders
    • "If" needed for this chapter's Case Study Hands-On, the files for Pacific Trails are located in the casestudystarters/pacific folder.
Supplemental Materials
  1. PowerPoint from Text: Chapter 11 - View (ppt) | Print (pdf)
  2. PowerPoint from Text: Chapter 13 - View (ppt) | Print (pdf)

  3. Author's Web Site: http://www.webdevfoundations.net/7e /chapter11.html
    (Scroll to the bottom of each chapter's web page for the chapter updates AKA errata sheet )
  4. Author's Web Site: http://www.webdevfoundations.net/7e /chapter13.html
    (Scroll to the bottom of each chapter's web page for the chapter updates AKA errata sheet )

  5. Textbook's Website: http://wps.pearsoned.com/ecs_felke_webdevdesf_7/
    6. (The access code is located in the front of the text. For those with used text's the code is available online. Click on the link above.)

For Inquiring Minds:
   Google's SEO Starter Guide:
   http://www.google.com/webmasters/docs/search-engine-optimization-starter-guide.pdf

Software

No new software

Chapter Questions and Test Reviews

Chapters 11 and 13 Reviews:
Although no points are earned for the Quizlet tests, it is highly recommended that students know the answers. It is an excellent way to prepare for both the weekly quizzes and major tests.

Test 1 Review Sheet: Test 3 Review
It is highly recommended that students work through the test review sheets as each chapter is studied. It will help with learning the material and may reduce the amount of study time required for the major tests.

Required Assignments

WSD10: PacificTrails - Multimedia (Publish to Apollo, submit the URL in the LMS)
Two quizzes this week:
   QUIZ: Chapter 11 (LMS)
   QUIZ: Chapter 13 (LMS)

Professor's Class Notes and Comments

This week...

Let's add some fun and pizazz to our web sites. While media is fun, be sure not to overdo. Also take into consideration that mobile phone users may not be able to access items such as Flash files so plan accordingly.

It can be the greatest web site EVER, but if there are no users the value is questionable. Take time to understand this week's material on this topic.

Take time to understand inline frames. Yes, it will be on the test!

Chapter 11:

p. 458-9 Plug-Ins, Containers, and Codecs

This is important when adding audio/visual components to a web page. If the user's device/browser will not recognize the file type and/or codec the media will not play. Hence, alternate formats need to be included in the code.

p. 470 HTML5 Video

View the video which accompanies the text.: HTML5 Video
Text's Companion Website - VideoNotes: http://wps.pearsoned.com/ecs_felke_webdevdesf_7/

p. 472 Creative Commons

http://creativecommons.org/

p. 483-487 JavaScript, AJAX, jQuery

These topics are covered in CS2513: Client-Side Programming. This course is offered only in the Fall semester and has this course CS2413: Web Site Development as well as CS1343: Beginning Programming as prerequisites. Contact your instructor for more information.

Chapter 13:

p. 522 Meta Tags

Take a few minutes to glance at this article. I think you will find it interesting. Although the author states that keywords may do more harm than good, at the time of this writing Google does not use them but Yahoo, Microsoft and YouTube all use them. You decide.

W3Schools: Meta Tags
http://www.w3schools.com/tags/tag_meta.asp
How to use HTML Meta Tags
http://searchenginewatch.com/article/2067564/How-To-Use-HTML-Meta-Tags

In your final project web site you will be required to include the following Meta Tags on all of your pages. Each page must have its own unique description.

<meta charset="UTF-8"> <!-- Note: This is the recommended syntax for HTML5 -->
<meta name="author" content="FirstName LastName" >
<meta name="description" content="Description of web page">
<meta name="keywords" content="Keywords for web page"><!-- Note: keywords is optional -->
<meta name="viewport" content="width=device-width,initial-scale=1.0">

p. 536-540 Search Engines

  1. Search Engine Optimization (SEO) for Small Businesses (3:00 min, Page 536)
    http://www.youtube.com/watch?v=yfZZeTTp3Rc&feature=channel&list=UL
  2. What is Search Engine Optimization/SEO (3:30 min, Page 536)
    http://www.youtube.com/watch?v=hF515-0Tduk
  3. Search Engine Marketing for Small Businesses (2:37 min, Page 540)
    http://www.youtube.com/watch?v=wE2nMxkCh-A&feature=plcp

p. 548 Serving Dynamic Content with Inline Frames

View the video which accompanies the text.: Configure an Inline Frame
Text's Companion Website - VideoNotes: http://wps.pearsoned.com/ecs_felke_webdevdesf_7/

The syllabus web page for this course contains an inline frame for office hours.
http://www.occc.edu/aphilipp/htm_wsd/CS2413_Syllabus.htm#OfficeHours
The information for this area is really a web page named
http://www.occc.edu/aphilipp/OfficeHours.htm
In this way, I can set my office hours on one page and it appears in the syllabi for all of my courses...just like magic!

A word to the wise.... iframes will be on the test..and perhaps as a coding question!