CIS 105 - Intro to Web Design
Homework Assignment Calendar

Please complete the following assignments and submit to me the requested homework. Send me an email to mariodvc@gmail.com when you are done with an assignment and use the provided email subject line (copy and paste it) so that your homework submission is routed to the correct assignment folder.

Thank You and Email me if you have ANY questions - Mario :)

Tech Assignment #1
Due 8/24
Time: Approx 3 hrs

The tasks that you should complete for Tech Assignment #1:

1. Watch Videos:
   Video - Tips for Success
   Video - How to Logon to WebCT
   Video - How to us the Discussion Board WebCT
    
2. Install the Flash Player (If Needed):
   http://get.adobe.com/flashplayer/?promoid=BUIGP
    
3. Email me that you have completed Tech Assignment #1
   Email Subject Line should Read:
   Intro - Tech #1 Completed - Your Name
   Example = Intro - Tech #1 Completed - Mario Tejada

Tech Assignment #2
Due 8/28
Time: Approx 3 hrs

The tasks that you should complete for Tech Assignment #2:

1. Log In to the WebCT Class Website: http://webct.dvc.edu
    
2. In the Discussion Board on WebCT
   => Answer the Question Posted for Tech Assignment #2 .
    
3. Email me that you have completed Tech Assignment #2
   Email Subject Line should Read:
   Intro - Tech #2 Completed - Your Name
   Example = Intro - Tech #2 Completed - Mario Tejada

Lesson #1
Due 9/4
Time: Approx 4 hrs

In this lesson we begin by looking at a couple of web sites dedicated to web design.

The first web site: Getting Started in Web Design
will provide you with some basic information about web sites, the type of hosting used for web sites and little information on Domain Names.

The second web site: 10 Principles of Effective Web Design
discusses issues dealing with the principles behind white space, simple designs vs. complex designs, scanning vs. reading, etc.

NOTE: If you are interested in reading more about this subject - You can find additional articles simply by doing a Google search on - web design, priciples of web design, elements of web design and variations.

Finally I have provided a little video with some of my own comments.

The tasks that you should complete for this Lesson:  

1. Please go this web site and read this article:
   Getting Started in Web Design
   
   
2. Please go to this web site and read this artile:
   10 Principles of Effective Web Design
   
   
3. Videos - An Old Cooks Ideas on Web Design - My Thoughts
   Video - How this Class Works
   Video - Design for the Computer
   Video - Design for the User
   Video - Design for the Screen
   
   
4. In WebCT - in the discussion board under the topic Lesson 1,
   post 2 comments:
   
   A) Identify one item in web design that you were surprised to read about or see during your assignment.
   
   B) What would YOU consider the MOST important idea/concept presented in this assignment (FYI - There is NO ONE RIGHT Answer! - This is your opinion)
   
   
5. Notify me via email (mariodvc@gmail.com)
   When you have finished the homework for this Lesson - Thank You
   Email Subject Line should Read:
   Intro Lesson 1 - Completed - Your Name

Instructor's Note:

In the next set of Lessons, we will begin by learning about the Web Development Cycle and then move on to creating some basic web pages.

In Lesson 2 - we will be introduced to the Web Development Cycle and the process that can be used to create a 3 page web site, a 33 page web site or a 333 page web site!

In Lesson 3 we will then download and install our web authoring progeram - KompoZer. We will create a VERY simple web page and then upload it to the web server.

In the following lessons you will continue to build up your web pages and grow your web site!

Now to work!

Lesson #2
Due 9/11
Time: Approx 4 hrs

The Web Development Cycle

In this part of the lesson we will look at the basic Web Development Cycle.

The tasks that you should complete for this Lesson:

1. First watch this video with my description of the WDC:
   Video - Web Development Cycle
   
   
2. In WebCT - in the discussion board under the topic Lesson 2,
   post a comment on Mario's 10 Steps to Success
   - Which one suprised you?
   
   A Basic Introduction to HTMLCode
   
   
3. In this Part of the lesson we will look at the Basic structure of HTML code.
   
   Please read through this website:
   http://www.w3.org/MarkUp/Guide/
   Eventhough this was created in 2005 it has a Good Basic Info about HTML.
   
   The following pages are from an online tutorial that I like
   - I like the way they explain some of the basic concepts.
   
   
4. This page discribes what you "Need" to create a web page.
   http://www.html.net/tutorials/html/lesson1.asp
   
   
5. This page talks more about HTML
   http://www.html.net/tutorials/html/lesson2.asp
   
   
6. This page talks about HTML Elements and Tags
   http://www.html.net/tutorials/html/lesson3.asp
   
   
7. Notify me via email (mariodvc@gmail.com)
   When you have finished the homework - Thank You
   Email Subject Line should Read:
   Intro Lesson 2 - Completed - Your Name

Tech Assignment #3
Due 9/18
Time: Approx 4-6 hrs

Go To Top

Instructor's NOTE: 2/17 - Ready to GO!

PLEASE WAIT UNTIL I EMAIL YOU THE Web Server Configuration EMAIL AND
LET YOU KNOW IT IS OK TO COMPLETE TEACH ASSIGNMENT #3

In Tech Assignment #3 - you are going to set up the system we will use for you to publish your website on to the class Student Web Server. So, after you are done working on your web site homework assignments you will then use File Transfer Protocol (FTP) to copy files through the Internet.

First, you will download and install a program called FileZilla.
Second, you will configure FileZilla with information I email you.
Third, you will test the connection by sending a test file to the web server.

I am asking you to do this so that we can make sure that you will be able to copy your homework assignments to the web server.

The tasks that you should complete for Tech Assignment #3:

1. Watch the following videos:
   Video - Step 1 - Download FileZilla
   Video - Step 2 - Configure FileZilla
   Video - Step 3 - Download the test file - TA3_TestFile.jpg
   Video - Step 4 - Test the FTP Connection
   
   
2. Step 1 - Download FileZilla from this website:
   Click here to Download - FileZilla
   
   
3. Step 2 - Configure FileZilla with the information provided in the
   Intro to Web Student Web Server Configuration Info email.
   
   
4. Step 3 - Download this Test File for use in this assignment:
   Right-Click (PC) or
   Ctrl+Click (Mac)
   Here and Select Save Target as
   to Download FTP Test File
   
   
5. Step 4 - Test the FTP Connection by
   Copying (UpLoading) the Test File (TA3_TestFile.jpg) using FTP
   to the SRC Student Web Server.
   
   
6. Email me that you have completed Tech Assignment #3
   Email Subject Line should Read =
   Intro Tech #3 - Completed - Your Name & Your User #
   Example = Intro Tech #3 - Completed - Mario Tejada c105_50

Lesson #3
Due 9/25
Time: Approx 4 hrs

Web Authoring Tools

In this lesson we will look at the tools we will use for Web Development.

The tasks that you should complete for this Lesson:

1. First watch these video with my description of this Lesson:
   Video - Lesson Description - Part 1
   Video - Lesson Description - Part 2
   
   
2. Next watch this video on how to create a class folder and turn on the file extensions on your local computer.
   Video - Create Folder and Turn On Extensions (Mac)
   Video - Create Folder and Turn On Extensions (Win)
   Now Create your class folder and turn on the extensions
   
   
3. Watch this Video on How to install KompZer
   Video - Install KompoZer (Mac)
   Video - Install KompoZer (Win)
   Now Download and Install KompZer
   
   
4. Watch this Video on Creating & Uploading Your First Page
   Video - Creating and Uploading Your Web Page
   Now Create your 1st Web Page
   
   
5. Watch this Video on Reviewing your Web Page
   Video - Review Your Web Site
   Now Review your web page
   
   
6. Notify me via email (mariodvc@gmail.com)
   When you have finished the homework - Thank You
   Email Subject Line should Read:
   Intro Lesson 3 - Completed - Your Name C105_##

Want to see a Sample - Just go to my Student Site at:
http://cis.srvc.net/cis105/example/les3/

Lesson #4
Due 10/2
Time: Approx 4 hrs

A Look at Hyper Text Markup Language - HTML

In this Lesson we will take a closer look at the HTML code of web pages.
We'll start by using Kompzer's source view to look at the file you created in the previous lesson. Relax!...This class is not a HTML coding class so you will not be feverishly type big chunks of code.

Should you look into learning HTML coding? That depends on what you want to do? I do recommend that you take a least a basic HTML coding class so you get an understanding of how it works!

In this next video we take a quick look at some HTML code and how different web sites process the code.. If you are feeling adventurous - in Kompzer change some your text in Source View - if you mess up you can always fix it in Normal View! Or restart from scratch!!

Finally you will replace the current line of text on your index.html page with:
Your Name's Homepage
- you will bold, center and increase the font size of the page heading.

Save the modified file and upload it using FileZilla - emaill me that you are done.

The tasks that you should complete for this Lesson:

1. First watch these video with my description of this Lesson:
   FIXED! Video - Lesson Description
   
   
2. Open index.html and remove exsisting line of text
   
   
3. Add new line of text - Your Name's Homepage
   - bold, center and increase the font size -
   
   
4. Save the file then exist Kompozer
   
   
5. Upload the file using Filezilla to the web server
   
   
6. Notify me via email (mariodvc@gmail.com)
   When you have finished the homework - Thank You
   Email Subject Line should Read:
   Intro Lesson 4 - Completed - Your Name C105_##

Want to see a Sample - Just go to my Student Site at:
http://cis.srvc.net/cis105/example/les4/

Lesson #5
Due 10/9
Time: Approx 4 hrs

Creating HyperLinks - Part 1
- Let us start with Absolute Hyperlinks

In this Lesson we will take a look at how to start creating hyperlinks for web page navigation. We will start by watching a little video on the types of hyperlinks.

We will first focus on creating Absolute Hyperlinks and look at how to create them in Kompozer. Absolute links connect us to any other site out on the Internet. This is completely legal! You are not required to ask for permission to connect to any public web site. That is why we will are allowed to create links to Google, Wells Fargo, SF Giants, etc.

Note: Each web authoring system - Dreamweaver, GoLive, Kompozer, Frontpage, etc, handles creating hyperlinks slightly differently. It is your responsability as a Web Master to verifiy HOW your software accomplishes this and other processes.

The tasks that you should complete for this Lesson:

1. First watch these video with my description of this Lesson:
   Video - Lesson Description
   Video - Create a Absolute Hyperlink
   New Video - Add the Target command to a Absolute Hyperlink

2. Open index.html

3. Below the page title you created last lesson
   - press the enter key twice and add a line that says:
   My Absolute Links (press enter again)
   
   
4. Add 3 absolute hyperlinks to ANY outside
   - Can't think of Any...create a link to Google, Yahoo and DVC.edu!
   
   
5. Save the file then exist Kompozer
   
   
6. Upload the file using Filezilla to the web server
   
   
7. Notify me via email (mariodvc@gmail.com)
   When you have finished the homework - Thank You
   Email Subject Line should Read:
   Intro Lesson 5 - Completed - Your Name c105_##

Want to see a Sample - Just go to my Student Site at:
http://cis.srvc.net/cis105/example/les5/

Lesson #6
Due 10/16
Time: Approx 4 hrs

Creating HyperLinks - Part 2
- Let us start continue with Relative Hyperlinks
- But we'll need MORE web pages!

In this lesson we will create relative links for our web site navigation.
We'll start by watching a video explaining what Relative Links are and how they are different from Absolute links.

After watching the video, we will watch a video on creating additional web pages for our web site. To practice creating relative links from our homepage (index.html) we need to create the following pages:

• resume.html
• hobby.html
• vacations.html

Afterwards you will copy ALL the files to your folder on the web server using Filezilla and test the links using a web browser.

The tasks that you should complete for this Lesson:

1. First watch these videos with my description and directions for this Lesson:
   Video - Lesson Description
   Video - Create a Relative Hyperlink
   Video - Basic Web Page Navigation (Sorry the Audio is a little Tin Canny)
   Video - Adding Navigation to our Web pages

2. Open Kompozer

3. Create the 3 additional files listed above and save them into your class folder on your computer.
   
   FYI - There are MANY ways to create the files - I only give you one example - using the same file and just renaming and resaving it.
   You could also create the files individually like you created the original index.html file.
   Do what is ever easiest for you!
   
   
4. Add the text bar navigation as described in the video.
   - Open index.html
   - Below the page title you created
   - press the enter key and add a line that says:
   Home | Resume | Hobby | Vacations
   
   FYI - There are MANY ways to create the links
   - I only give you one example - using copy and paste.
   You could also hand type them indvidually on each page
   and then add the links individually also!
   Do what is ever easiest for you!
   
   
5. Create the links as described in the video.
   
   
6. Save All the files then exit Kompozer
   
   
7. Upload All the files using Filezilla to the web server
   
   
8. Notify me via email (mariodvc@gmail.com)
   When you have finished the homework - Thank You
   Email Subject Line should Read:
   Intro Lesson 6 - Completed - Your Name c105_##

Want to see a Sample - Just go to my Student Site at:
http://cis.srvc.net/cis105/example/les6/

Lesson #7
Due 10/23
Time: Approx 4 hrs

Creating Internal HyperLinks
- Jump links
- Used for same page navigation

In this lesson we will create a Jump Link Menu on our resume.html page.

We'll start by watching a video explaining what Jump Links are and how they are different from External links - absolute & relative links.

After watching the video, we will watch a video on how to create a mock up resume.html page to use in creating our Jump link.

Afterwards you will copy the updated resume.html file to your folder on the web server using Filezilla and test the links using a web browser.

The tasks that you should complete for this Lesson:

1. First watch these videos with my description and directions for this Lesson:
   Video - Lesson Description
   Video - Modifying the resume.html file
   Video - Inserting Anchors
   Video - Creating the Jump Menu
   Video - Testing the Jump Menu
   Video - Modify & Add a Combo Link

2. Open resume.html in Kompozer

3. Click Here to Open the file with Dummy Text (Lorem Ipsum)
   and copy and paste the text into your resume.html file
   below your navigation menu
   
   
4. Create the the Anchors for each section:
   - Objective
   - Education
   - Work Experience
   - Skills
   - References
   
   
5. Add the the Jump Link Menu
   
   
6. Connect the Jump Links to the Anchors
   
   
7. Create a Combo Link (Relative + Jump Link)
   
   
8. Save All the files then exit Kompozer
   
   
9. Upload All the files using Filezilla to the web server
   
   
10. Notify me via email (mariodvc@gmail.com)
    When you have finished the homework - Thank You
    Email Subject Line should Read:
    Intro Lesson 7 - Completed - Your Name c105_##

Want to see a Sample - Just go to my Student Site at:
http://cis.srvc.net/cis105/example/les7

Lesson #8
Due 10/30
Time: Approx 4 hrs

Working with Graphics and Tables

In this lesson we will accomplish 2 large tasks.

One, we will learn about and work with images/graphics/pictures. We will learn how to insert them onto our web pages and save them on our web server.

Two, we will learn to use a HTML table to organize - how the images are displayed on a web page.

The tasks that you should complete for this Lesson:

1. First watch this video with my description for this Lesson:
   Video - Lesson Description - Part 1

2. Please visit and review the following web sites that have information about Graphics:
   
   When to Use JPEG or GIF Format for Your Web Images and PNG Too
   http://webdesign.about.com/od/graphics/a/aa100906.htm
   
   Which Graphics File Format Is Best To Use When?
   http://graphicssoft.about.com/od/graphicformats/f/summary.htm
   
   Alt Attributes: Describing Your Images for Better Web Accessibility
   http://webdesign.about.com/od/beginningtutorials/a/aa122004.htm
   
   Image Search Engines
   http://websearch.about.com/od/imagesearch/a/image.htm
   
   
3. Please visit and review these web sites that contain information about Copy Rights:
   
   A Brief Introduction to Copyright
   http://www.templetons.com/brad/copyright.html
   
   Copyright concerns when creating a web site:
   http://www.bitlaw.com/internet/webpage.html
   
   10 Big Myths about copyright explained
   http://www.templetons.com/brad/copymyths.html
   
   
4. Second watch these videos with my description for this section of this Lesson's assignment:
   Video - Lesson Description - Tasks - Part 2
   Video - Creating a graphics folder on your site
   Video - Downloading Graphics off the Internet
   
   NEW Video - ReSizing Graphics
   Download Free Picture Resize Starter 4.5.12 software(PC Only)
   FYI - On a Mac use iPhoto
   
   Video - Adding a Table to your Hobby.html page
   Video - Inserting a Graphic into the Hobby page table
   Video - Uploading your completed file and graphics
   
   
5. Download 2 or 3 images/graphics/pictures from the Google Images, your camera, your personal collection or clipart. Save the files in a graphics folder in your local site folder.
   
   
6. Add a table to Hobby.html
   
   
7. Insert graphics into your hobby.html file
   
   
8. Upload All the files using Filezilla to the web server
   
   
9. Notify me via email (mariodvc@gmail.com)
   When you have finished the homework - Thank You
   Email Subject Line should Read:
   Intro Lesson 8 - Completed - Your Name c105_##

Want to see a Sample - Just go to my Student Site at:
http://cis.srvc.net/cis105/example/les8/

MidTerm Project
Due 11/6
Time: Approx 8 hrs

You might want to complete Lessons 7 & 8 - Before doing the MidTerm Project.
The Midterm is Due at the same time as Lesson #8
- Mario :)

MidTerm Project - MarioTronic Employee Event Site

Congratulations you have been Hired by MarioTronic Co. Inc. to create an Employee Event Web Site.

So you will create a 3 page Web Site for MarioTronic Inc. that will allow our employees learn about and sign up for either a sporting event or a music event.

You will upload these files to your student web server and create a link on your homepage to the MarioTronic Inc page (mt_index.html).

Below are the Design Parameters for the MarioTronic Inc web site.

Must have a minimum of 3 pages:

File #1 - Homepage (mt_index.html)
File #2 - Sporting Events Page (sportevent.html)
File #3 - Music Events Page (musicevent.html)

Welcome Message for mt_index.html page:

The MarioTronic Co. Inc. Employee Activity Website is for our employees to see what FUN events the company has put together for them. These events are a sign of appreciation from the company to our loyal employees. There is no charge for attending any of these events. The ONLY requirement is employees need to make reservations for the events by the posted dates.
Thank You – Mario

SAVE TIME TYPING You can Copy & Paste this ...

Design Parameters:

• Homepage (mt_index.html)
• Graphic
• Use a Table for Layout
• Welcome Message – Copy above message
• Add Link to Sporting Events Page
• Add Link to Music Events Page
• Add Link BACK to your homepage
• Contact Information for Reservations
• Email Address = reservations@mariotronic.com
• Phone Number = 925-555-1234

• Sporting Events Page (sportevent.html)
• Graphic
• Use Table for Layout
• Add Link to 1 Local Sports Teams Web Sites
• Add Link Back to Home Page & Link to Music Events Page
• List a Sporting Event to Attend (Real or Fictitious)
• EVENT Date = Pick a date for a sporting event.
• RESERVATIONS Date= 1 Week before
• Extra = Add a Map to the Sports Facility

• Music Events Page (musicevent.html)
• Graphic
• Use Table for Layout
• Add Link to Contra Costa Times – Timeout section (http://events.contracostatimes.com/)
• Link Back to Home Page & Link to Sporting Events Page
• List a Musical Event to Attend (Real or Fictitious)
• EVENT Date = Pick a date for a MUSIC event.
• RESERVATIONS Date= 1 Week before
• Extras = Add a Map to the Music event from here

1. Upload All the files using Filezilla to the web server
   
   
2. Notify me via email (mariodvc@gmail.com)
   When you have finished the homework - Thank You
   Email Subject Line should Read:
   Intro MidTerm Project- Completed - Your Name c105_##

Lesson #9
Due 11/13
Time: Approx 4 hrs

Working with Multimedia Objects
- Add Audio (mp3)
- Add a YouTube Video
- Add a Google Map
- What else???

In this lesson we will look at how we can add several types of multimedia elements to our web pages. We will start off with a simple definition of MuiltiMedia.

Please view this link and read the posted article:
http://www.systemdisc.com/multimedia

Next we will look

The tasks that you should complete for this Lesson:

1. First watch this video with my description for this Lesson:
   Video - Lesson Description

2. Video - Create NEW web Page - multimedia.html
   Create the multimedia.html page and add navigation
   
   
3. Click Here to - Go To Part 1 - YouTube Video
   
   
4. Click Here to - Go To Part 2 - Google Map
   
   
5. Click Here to - Go To Part 3 - Audio & Video
   
   
6. Click Here to - Go To Part 4 - Online Survey
   
   
7. Notify me via email (mariodvc@gmail.com)
   When you have finished the homework - Thank You
   Email Subject Line should Read:
   Intro Lesson 9 - Completed - Your Name c105_##

Want to see a Sample - Just go to my Student Site at:
http://cis.srvc.net/cis105/example/les9/

Lesson #10
Due 11/20
Time: Approx 4 hrs

Defining Cascading Style Sheets (CSS)

In this lesson we will investigate the use of Cascading Style Sheets(CSS) and their relationship to web pages/sites.

First we will look up 2 simple definitions and explanations on what is CSS?

Please read through these 2 sites:

TechTerms.com
Definition of CSS
http://www.techterms.com/definition/css

What is CSS?
What are Cascading Style Sheets?
By Jennifer Kyrnin, About.com Guide
http://webdesign.about.com/od/beginningcss/a/aa021607.htm

1. First watch this video with my description for this Lesson:
   Video - CSS Presentation
   Video - CSS Tutorial
   - Read through CSS Tutorial
   
   YouTube Video - Creating CSS in KompoZer with CaScadeS

   Tasks you need to do for Lesson 10

2. To practice using CSS we need to create the following pages:

   • page1_css.html
   • page2_css.html
     
     Video - Create CSS Test pages
     
     
   • Click Here to Open the file with Dummy Text (Lorem Ipsum)
     and copy and paste the text into your
     page1_css.html and page2_css.html files.
     
     
     
3. Create a link from your home page (index.html) to the CSS test page - page1_css.html
   Then create links from CSS Test page 1 and page 2 - using the menu I already provided.
   Video - Create Page Links
   
   
4. Create a CSS Styles for CSS Test page 1
   Video - Create a CSS Styles
   
   
5. Export Exsisting Styles into a CSS External File.
   Video - Export CSS Styles
   
   
6. Attach a CSS External File to a HTML page.
   Video - Attach CSS File
   
   
7. Update a CSS Style
   Video - Updating CSS Styles
   
   
8. Upload All the files using Filezilla to the web server
   - index.html
   - page1_css.html
   - page2_css.html
   - test_styles.css
   
   
9. Notify me via email (mariodvc@gmail.com)
   When you have finished the homework - Thank You
   Email Subject Line should Read:
   Intro Lesson 10 - Completed - Your Name c105_##

Want to see a Sample - Just go to my Student Site at:
http://cis.srvc.net/cis105/example/les10/

Lesson #11
Due 12/4
Time: Approx 4 hrs

Search Engine Optimization (SEO)
Website Analytics

In this lesson we will about how search engines work, what is Search Engine Optimization (SEO) and Web Site Analytics.

Search Engine
A computer program that searches documents, especially on the World Wide Web, for a specified word or words and provides a list of documents in which they are found.

Please watch this video (provided by Google):

Search Engine Optimization (SEO)
Computing the process of adjusting the content, structure, etc, of a website so that it will be displayed prominently by a search engine.

Please read this short article on SEO to help explain its purpose.

What is Search Engine Optimization (SEO)?
The Basics of SEO
By Jennifer Kyrnin, About.com Guide
http://webdesign.about.com/od/seo/a/seo_basics.htm

A keyword phrase is generally two or more words that are used by web designers in search engine optimization, or by visitors who are using the search engines to find information based on that particular phrase.

For example, on my parent's web site I used the following keyword phrases "Mario's La Fiesta", "mexican restaurant in Berkeley" and "near UC Berkeley" as keyword phrases to hopefully draw more visitors interested in locating their restaurant.

My thinking is that prospective customers will use the restaurant's name, the city, type of food or location as possible keywords in using a search engine to look for a place to eat in Berkeley!

Major search engines such as Google no longer look for keyword phrases in the Meta data, and are more apt to use the information within the actual text of the web page. So, I made sure that those keywords words all appeared on the homepage of the website.

Can you spot them on the restaurant's website?
http://www.marioslafiesta.com/

Listing the keyword phrases in the Meta data does not do any harm though, but is completely up to the designer as to whether they will use keyword phrases in the Meta data.

Here is a fun video to watch provided by Ali Baba at 1stoptutorials and I hope it helps explain this concept a little more:

Website Analytics
Web analytics is the measurement, collection, analysis and reporting of internet data for purposes of understanding and optimizing web usage. Basically, when someone visits your site, where do they go and for how long.

Web analytics is a generic term meaning the study of the impact of a website on its users. Ecommerce companies and other website publishers often use Web analytics software to measure such concrete details as how many people visited their site, how many of those visitors were unique visitors, how they came to the site (i.e., if they followed a link to get to the site or came there directly), what keywords they searched with on the site's search engine, how long they stayed on a given page or on the entire site and what links they clicked on and when they left the site.

Web analytic software can also be used to monitor whether or not a site's pages are working properly. With this information, Web site administrators can determine which areas of the site are popular and which areas of the site do not get traffic. Web analytics provides these site administrators and publishers with data that can be used to streamline a website to create a better user experience.

This next video is a FREE lynda.com video
- Google Analytics Essential Training—How does Analytics work?

Please watch this video:

The next video helps explain some of the terms used in analytics. This video is provided by www.traffic-is-king.com

Please watch this video:

Final Thoughts -
If you are serious about becoming a web master and designing sites for a living or managing your own personal site, I would recommend that you consider working with the FREE Google Analytics software. DVC uses it to track which of our college web site's pages are visited the most, where students linger the longest and where visitors don't go - this is as important as finding out where they do go!

Link Google Analytics website:
http://www.google.com/analytics/index.html

Tasks you need to do for Lesson 11

1. There are a No Pages to Upload
   
   
2. Notify me via email (mariodvc@gmail.com)
   When you have finished the homework - Thank You
   Email Subject Line should Read:
   Intro Lesson 11 - Completed - Your Name c105_##

Lesson #12
Due 12/11
Time: Approx 4 hrs

Web Hosting & Domain Names

In this lesson we will look at what is Web Hosting and Domain Names.

Web Hosting
FYI - For this class, our CIS Server has played the roll of the Web Host.

A web hosting service is a type of Internet hosting service that allows individuals and organizations to make their own website accessible via the World Wide Web. Web hosts are companies that provide space on a server they own or lease for use by their clients as well as providing Internet connectivity, typically in a data center.

It is best to think of hosting as if you are renting a space for your shop at a local shopping center.

The scope of hosting services varies widely. The most basic is web page and small-scale file hosting, where files can be uploaded via File Transfer Protocol (FTP) or a Web interface. The files are usually delivered to the Web "as is" or with little processing. Many Internet service providers (ISPs) offer this service free to their subscribers.

People can also obtain Web page hosting from other, alternative service providers and is typically free, advertisement-sponsored, or inexpensive.

Business web site hosting often has a higher expense. A complex site calls for a more comprehensive package that provides database support and application development platforms (e.g. PHP, Java, Ruby on Rails, ColdFusion, and ASP.NET). These facilities allow the customers to write or install scripts for applications like forums and content management. For e-commerce, SSL is also highly recommended especially if you are also using Credit Card processing services.

The host may also provide an interface or control panel for managing the Web server and installing scripts as well as other services like e-mail. Some hosts specialize in certain software or services (e.g. e-commerce). They are commonly used by larger companies to outsource network infrastructure to a hosting company.

Domain Names

A domain name is a unique name for your web site. Choosing a hosting solution could also include domain name registration. Your domain name should be easy to remember and easy to type. You should try and get a Domain Name that is like your Company Name.

What is a Domain Name?

A domain name is a unique name for a web site, like ford.com, sfgiants.com or dvc.edu.

Domain names must be registered. When domain names are registered, they are added to a large domain name register called DNS. DNS stands for Domain Name System. A DNS server is responsible for informing all other computers on the Internet about the domain name and the web site address. In addition, information about the web site, including the IP address, is stored on a DNS server.

That is why you can type: www.dvc.edu on any computer connected to the Internet anywhere and find the web site for Diablo Valley College!

This video shows How Domain Names are used with DNS to find a web site
-- besides it is kind of Fun!

Registering a Domain

Domains can be registered from domain name registration companies.These companies provide interfaces to search for available domain names, and they offer a variety of domain name extensions that can be registered at the same time.

Choosing a Domain Name

Choosing a domain name is a major step for any individual or organization.New domain name extensions and creative thinking still offer thousands of excellent domain names! When choosing a name, it is important to consider the purpose of a domain name, which is to provide an easy way to reach your web site.

The best domains have the following characteristics:

Short - People don't like to type!
A short domain name is easier to type, read, and remember.

Meaningful - A short domain is nothing without meaning, 34i4nh.com is not easy to enter or to remember. Select a domain that relates to your site in a way that people will understand.

Clear - Clarity is important when selecting a domain name. Avoid a name that is difficult to spell or pronounce.

Exposure - Names that are short and easy to remember are an asset. In addition to visitors, also consider search engines. Search engines index your site and rank it for relevance against terms people search for. In order to maximize your sites exposure, consider including a relevant search term in your domain. Of course, only consider this if it still maintains a short, clear and meaningful domain name.

Tasks you need to do for Lesson 12

1. First you need to create the following page:

   • webinfo.html
     
     
2. Create a link from your home page (index.html) to webinfo.html
   Then create a link back to your homepage
   
   
3. Add a the follwing Page Title and Heading:
   - Web Hosting and Domain Name Information -
   
   
4. Using Google, search for = web hosting reviews
   On your webinfo.html page
   list at least 3 links to sites with web hosting reviews
   
   
5. Using Google, search for = domain name registration
   On your webinfo.html page
   list at least 3 links to sites with domain name registration
   look up features
   
   
6. Below your lists add the follwing subtitle:
   - Possible Domain Names -
   
   
7. Using one of the domain name registration sites you found in Step #5.
   Find 3 Domain Names that could be used by a
   Spa & Resort company - because you will be building a web site for them
   FYI - Do NOT ACTUALLY BUY the Domain Names!!!
   Just Look them Up and check to see of they are available
   
   
8. Upload All the files using Filezilla to the web server
   
   
9. Notify me via email (mariodvc@gmail.com)
   When you have finished the homework - Thank You
   Email Subject Line should Read:
   Intro Lesson 12 - Completed - Your Name c105_##

Want to see a Sample - Just go to my Student Site at:
http://cis.srvc.net/cis105/example/les11

Final Project
Due 12/18
Time: Approx 12 hrs

Final Project

Serenity Spa Project

Congratulations you have been Hired by Serenity Spa Inc. to create a Web Site.

So you will create a 3 page Web Site for Serenity Spa Inc. that will tell prospective customers about the spa treatments available and look at a gallery of spa photos.

You will upload these files to your student web server and create a link on your homepage to the Serenity Spa Inc. page (spa_index.html).

Below are the Design Parameters for the Serenity Spa Inc. web site.

Must have a minimum of 3 pages:

File #1 - Homepage (spa_index.html)
File #2 - Spa Treatments Page (treatments.html)
File #3 - Photo Gallery Page (gallery.html)

Message text for spa_index.html page:

SAVE TIME TYPING You can Copy & Paste from this page
Spa_Text

Design Parameters:

• Homepage (spa_index.html)
• Graphic - at least 1
• Use a Table for Layout
• Homepage text – Copy from above link
• Create a link menu to the other 2 spa pages.
• Add Link BACK to your CIS-105 class homepage (index.html)
• Contact Information for Reservations
• Email Address = reservations@serenityspa.com
• Phone Number = 925-555-1234

• Spa Treatments Page (treatments.html)
• Graphic
• Use Table for Layout
• Create a link menu to the other 2 spa pages.
• List a minimum of 3 spa treatments include:
  - description of treatment
  - time (30 minutes, etc)
  - cost of treatment
• Link to a nice spa music audio
  
  
• Photo Gallery Page (gallery.html)
• 3 spa related graphics (min)
• Use Table for Layout
• Create a link menu to the other 2 spa pages
• Include a small info line for each picture
  for example - Relax in our Spa tubs
• Link to a YouTube Spa video
  

 

1. Upload All the files using Filezilla to the web server
   
   
2. Notify me via email (mariodvc@gmail.com)
   When you have finished the homework - Thank You
   Email Subject Line should Read:
   Intro Final Project- Completed - Your Name c105_##

All assignments need to be sumitted by 8am on Monday Dec 19th

I am submitting my Final Grade Roster at 9am on Monday Dec 19th