Viewing Sourcecode

1. In Internet Explorer, follow the link below to Barack Obama's Louisiana page http://my.barackobama.com/page/content/lahome .
2. On the menu bar, click on the view menu and choose source.
3. The source code for the webpage will open in notepad.
4. Save the file to your desktop (notice the file name).
5. Close the file.
6. On your desktop, right click on the file (the one that you just closed).
7. Choose Open with from the menu, then choose Wordpad.
8. With the source code open in Wordpad, click on the Print Preview Icon (this is the Icon with a magnigying glass in front of a piece of paper; It is inbetween the printer icon and the binocular icon).

The purpose of viewing the source code in this way is for us to view page numbers, and thereby be able to go through the document together.

Our goal is to isolate the source code for the Louisiana page from the code that is repeated on each page.

Tuesday 1st - 4th; Monday 5th-8th period

We will map barackobama.com. Instead of us all mapping the entire site, you may choose a link from Barack Obama's home page that you want to map; Check with me first to see if someone else has already chosen that link. At the end of class, make sure to upload your Powerpoint.

Instead of using the box and line tools as we used last week, students have decided that we use an organizational chart to create the maps. The link below is an example of a very simple map that Sashambry Hollins created http://www.slideshare.net/Shanky9/shollins-presentation/

To create this, in Powerpoint click on the Insert menu and choose diagram. The diagram menu opens, but it is already defaulted to the organizational chart that we want, so just press OK. This creates a four box pyramid organizational chart (one on top and three on the bottom). Name the top box "Home". You will only need one box at the second level, so click on and delete the second and third boxes (if you accidentally delete the entire chart, don't panic - just click on undo in the edit menu). Name the remaining second-level box the name of the link that you chose from Obama's site. Right click on this box and choose Subordinate from the drop down menu. You may have to click on your second level box and add more subordinates to it if there is more than one link to map out. Add subordinates at any level as needed.

To check yourself to see if you got all of the links, view the source of the page that you chose. Search for "a href =". Every where that you find an "a href =", you can be assured that this is another link.

When you are done, upload your PowerPoint to slideshare.com (If you had already created one on slideshare.com and need to edit it, you can click on the download link next to your presentation in slideshare.

After uploading your final PowerPoint, ask me for note cards. Write one link from your map on each note card. Hopefully, we will be in our new room today. If so you can place them on our wall in the new classroom. We will match them together to build a map of his entire website.

Friday 1st through 4th | Thursday - 5th through 8th period

If you have not already signed up with slideshare.com, please do so. In order to complete the assignment Creating a webstory board to plan your website layout posted on 10/7, we need to build a storyboard (a map of how webpages are connected to make a website) in Powerpoint. As with all of your classwork, you must post these Powerpoints to your blog. Blogspot does not allow us to simply upload Powerpoints, so must sign up with slideshare.com which will give us a location on the web to upload our Powerpoint presentations to so that we can link them to our blog.

Tuesday, we made a quick Powerpoint about anything (only 3 slides long) and uploaded them to our slideshare accounts and linked them to them in a new blog post. If you have not done this, please do so quickly. Do not spend much time on it. The purpose of this exercise is to upload the file and link to it; creating Powerpoints is not the purpose of the exercise.

Once you have completed all of the above, we will begin mapping out barackobama.com. Instead of us all mapping the entire site, you may choose a link a link from Barack Obama's home page that you want to map; Check with me first to see if someone else has already chosen that link. At the end of class, make sure to upload your Powerpoint.

You have a choice of one of two tool options to build your map in Powerpoint: 1) You may use an organizational chart to map your such as Sashambry Hollins did http://www.slideshare.net/Shanky9/shollins-presentation/, or 2) The box and line tools as we used last week.

At the end of the week we will print the maps out and place them on our wall in the classroom. We will match them together to build a map of his entire website.

Sign Up with Slideshare.com

Sign Up with Slideshare.com

Bell/Blog work - Tuesday pop quiz

Remember, sharing answers will lead to a zero for both parties.

This also means that during test time, you are restricted from clicking on other student's links from my blog. Don't forget, I can easily check your browser history.

Answer the following two questions in your blog. Title it Tuesday pop quiz. Raise your hand when you are done and I will record your answers.

Question one: To connect to the Internet, You need all of the following except _______

A. Internet Service Provider

B. Modem

C. FTP

D. Dial up connection software

E. Computer

Question two: To have a website http://www.yourname.com/, you to do all of the following except________

A) Create a file named index.html

B) Upload the index.html using FTP software

C) Buy a web server

D) Buy space (a directory) on an ISP's web server to which you can upload your files

E) Buy the domain name yourname.com

Classwork - Creating a webstory board to plan your website layout

Objectives
■ Identify the various Web site organizational structures
■ Distinguish between the various Web site organization structures as they relate to audience,preparation time, commonality, and server requirements
■ Create a Web site storyboard

Time Required - This lesson takes two class periods to complete.

Materials Required
■ Internet - John McCain's http://www.johnmccain.com/palin.htm and Barack Obama's websites http://www.barackobama.com/
■ Powerpoint

First, Read the following:

CREATING A WEB STORYBOARD is very important aspect of creating a Web site is page organization. This is more important even than how your pages look – if users can’t find their way around your site, they will leave before they accomplish what they came for. Before building your first page, you should have a clear path laid out to ensure your site is easy to use. The following is a discussion of the five most common types of Web page organizational charts, as well as a discussion on building a Web storyboard, the blueprint for your Web site.

TYPES OF ORGANIZATIONAL CHARTS
Website Organizational Type One - Heirarchical:
Hierarchy (most common) – Also referred to as a page tree, this organizational method is characterized by a centralized starting point – the home page. Additional pages in the site are linked in levels (or branches, hence the treereference) off of the home page, with each level being stored in its own folder. This structure follows this basic layout: With hierarchy, users move up levels for general information, or down levels for specific information. Users generally have little difficulty knowing where they are in the structure. Providing a link to the home page on all lower level pages allows users to quickly reorient themselves in the site.

Website Organizational Type Two - Linear:
Linear – Also referred to as a slide show, this structure begins at the home page and follows a succession of pages, each leading from the one before it to the one after it. This layout works best if you are creating a site with step-by-step instructions. Typically, the user can choose to go forward or back within the structure. Because this type of organization is similar to reading a book, it is very limiting in the variety of information that you can present.

Website Organizational Type Three - Multi Level Linear:
Multi-level Linear – While many directions have a beginning to end progression, it may be necessary at times to deviate from the path to cover supplemental material. That is the purpose of this structure. Observe the difference between this and a normal linear layout: As an example, let’s say you are presenting instructions on how to load an operating systemon a computer. After several pages explaining steps common to both a PC and Mac, you may want to split the instruction so users are taken todifferent pages that cover their particular machine. After discussing the things that are unique to each computer, both paths may then converge as you explain general steps to testing the installation.

Website Organizational Type Four - Heirarchy/Linear:
Hierarchy/Linear – The reality is that very few Web sites are strict linear sites. More common is a mix of hierarchy and linear elements. A hierarchy/linear structure may look like this: Home >Home >Home >Home. In this way, authors can build a page that offers a wide variety of information, while also including instances of slide show use. Continuing our example from above, your page may include a discussion of the various types of computer operating systems (OS’s - MacIntosh vs PC). Your site may compare pricing, performance, features,availability, etc., and then include links to the installation instructions. Keep in mind that combining two organizational styles may cause users to get lost more easily. A site map is a big help when using this structure.

Website Organizational Type Five - Random:
Random – This layout is simply a set of pages that are linked together in some way, but with no real underlying organization or overallstructure. Users move from page to page at random (hence the name). This structure is very similar to playing a computer game where the player wanders through various rooms. It is amorphous (changing shape) and without restrictions. Each page usually defines itself well, and provides links that allow users to explore, similar to moving from room to room in an unfamiliar building. The main problem with the layout is that users may get lost easily. Besure to provide them a way back to the homepage.

Website Organizational Type sixe - Grid:
Grid – This structure is somewhat complex in that all pages are of equal importance. This layout often includes an image map or a complex table design. The main disadvantage of this structure is that it is very easy for users to get lost in the site. Care must be taken to ensure users always know where they are.

Storyboarding:
Storyboarding is a concept taken from the film industry, and works much the same way for the Web. It involves planning the pages you intend to create, what information will appear on them, how they will look, and how they will be linked together before you begin creating pages. The idea is to create a visual representation of the Web site that can be easily manipulated, and allows you to work without having to remember where each pages fits in an often complex design. Storyboards allow multiple users to build different parts of the same site in an efficient manner. Additionally, members can physically check a page off the storyboard when completed and move to the next one. Storyboards can get rather complicated, as the following example shows: There are several ways to set up a storyboard, from a simple piece of paper with boxes and lines on it, to placing note cards on a bulletinboard with strings to indicate links. We will use Powerpoint to create a storyboard that is easily manipulated, and will provde a way for each page creator to indicate when a page is complete. If you are building a site with just a few pages, a story board may seem unnecessary. While this may be true for laying out how pages link to each other, a storyboard can still help to organize your thoughts and to get you started working.

Now, Open John Mcain's website and Powerpoint. We will work together to map out Jon McCain's website (the more simplistic site). Later, you will map out Barrack Obama's website on your own. Later, we will analyze the structures.




FYI (For your information) This lesson covers the following TEKS:
126.28(c) 1A Demonstrate knowledge and appropriate use of operating systems and networkingcomponents
■ 126.28(c) 1E Use vocabulary related to web mastering
■ 126.28(c) 2B Demonstrate proficiency in the use of keyboard and mouse
■ 126.28(c) 6A Evaluate the design and functionality of WWW pages and compare the methodwith other established methods
■ 126.28(c) 11A Synthesize and publish information in a variety of ways including printed copyand monitor display
■ 126.28(c) 12B Seek and respond to input from peers and professionals in evaluating the product