• No categories

Lesson 3 wk 0f 9/8

Chapter 5
Organization Systems

Challenges of Organizing Information
Internet is forcing the responsibility for organizing information on more of us each day.
New information technologies open the floodgates for exponential content growth, which
creates a need for innovation in content organization.

Words are capable of being understood more than one way.

This website has a lot free tagging indicating collaborative for
mob indexing and ethno-classification. This website gives a user
more tools to work with.

This website shows a great detail of what contextual designs are and navigation labels to find information that users are using as their search engine.

Refers to an object or collection of objects composed of unrelated or unlike parts.
An old-fashioned library card catalog is relatively homogeneous

Difference in Perspectives
The way people organized according to internal divisions or org charts , with groupings such as marketing.
sales, customer support, human resources , and information systems.

Internal Politics
The inherent power of information organization in forming understanding and opinion, the process of designing
information architectures for web sites and intranets can involve a strong undercurrent of politics.

Certain types of information lend themselves to chronological organization. For example, an archive of press releases might
be organized by the date of release.

We care about the news and weather that affects us in our location. Political, social, and economic issues are frequently

Social Classification
Free tagging known as collaborative categorization, mob indexing, and ethno-classification, is a simple yet powerful tool.
Users tag objects with one or more keywords. The tags are public and serve as pivots for social navigation.

Chapter 6
Labeling Systems

Why You Should Care About Labeling
To minimize this disconnect, information architects must try their best to d sign labels that speak the same language
as a site’s users while reflecting its content. And just as in a dialogue when there is a question or confusino over a label
there should be clarification and explanation.

describes links

Products & Services
Regional difference

English is wonderfully flexible, and new words are invented every day.

Others involvements with corporations.

Buy Online
Purchase or lease product.

Varieties of Labels
Contextual links-hyperlinks to chunks of information on other pages or to another location on the same page.

Labels that simply describe the content that follows them, just as print headings do

Navigation system choices
Labels representing the options in navigation systems

Index terms
Keywords, tags, and subject headings that represent content for searching or browsing.

Labels as Contextual Links
Labels describe the hypertext links within the body of a document or chunk of information, and naturally occur withing the descriptive context of their surrounding text.

Labels As headings
Labels are often used as headings that describe the chunk of information that follows. The hierarchcal relationships betweeen
headings-whether parent, child, or sibling are usually established visual through consistent use of numbering, font sizes, colors and styles, whitespace and indentation, or combination.


This website has a lot free tagging indicating collaborative for mob indexing and ethno-classification. This website allows users to utilize more tools.

his website shows a great detail of what contextual designs are and navigation labels to find information that users are using as their search engine.


Lesson 2 wk of 9/1

Chapter 3
User Needs and Behaviors

Information Needs
Organization systems-present the site’s information to us in a variety of ways, such as content categories that pertain to the
entire campus.

Navigation systems-help users move through the content such as a directory.

Search systems- allow users to search the content whole web from site’s search interface.

Labeling systems-describe categories, options, and links in language that is meaningful to users.

Chapter 4
The Anatomy of an Information Architecture

Visualizing Information Architecture
People don’t believe things exist until they can see them.

Organization systems-entire campus

Navigation systems-directory

Search systems- search content the interface

Labeling systems-links and language

Information Architecture Components
Users interact directly with some while others are so behind the scenes that users are unaware of their existence.

Organization systems- categorize information by subject or chronology

Labeling systems-how we represent information

Navigation systems-how we browse through information

Search systems-how we search information executing a search query against an index

Browsing Aids
Components present users with a predetermined set of paths to help them navigate the site:

Organization systems
Site-wide navigation system
Local navigation systems
Sitemaps/Table of contents
Site indices
Site guides
Site wizards
Contextual navigation systems

Search Aids
These components allow the entry of a user-defined query and automatically present users with a customized
set of results that match their queries.

Search interface
Query language
Query builders
Retrieval algorithms
Search zones
Search results

Content and Tasks
These are the users’ ultimate destinations, as opposed to separate components that get users to their destinations.

Embedded links
Embedded metadata
Sequential aids

Invisible Components
These components often feed other components such as a thesaurus that’s used to enhance a search query.
Some example of invisible information architecture components include.

Controlled vocabularies and thesauri
Retrieval algorithms
Best bets

Website- web site demonstrates various of art. The concepts and strategies are very detailed
in outlining different links to certain categories.

Lesson 1 wk 8/25


Introduction and Overview

Information Architecture is not computer programming software, development, database management. Note: based on
concepts not technologies.

Book-Information Architecture for the World Wide Web this book is also know as the”polar bear” text.

Three roles of Information Architecture is discipline, role & community.

Information Architecture began with Web-based information environments, over time it has expanded to include a wider
variety of information spaces, including:

Virtual-software & websites

Physical-museums, libraries & hospitals

Procedural-flows of information in work processes
_______________________________________________________________ _______________________________________________________________

Comments on my Website

“One Stop Center Famous Floridians Library”

1. I decided to build a website for my special dream library.
2. Before I started I thought about what steps I needed to take to build the library: by notepad, kompozer or Nvu
3. I tried using Kompozer had no clue to what I was doing.
4. Then I tried Nvu, well I started the title and 1st paragraph and from there, I couldn’t determined what to do from there.
5. After that I said forget it! I will just do it from scratch(using notepad) which the book helped a lot. Also asked friends, family, classmates, professors and GAs.
7. Uploaded images using TinyPic free image hosting, photo sharing & Video Hosting.
8. Free web buttons maker-took me a little time to figure out how to do the buttons.
9. Web Resizer-It was actually fun cropping and making a border for my special library picture.
10. MySpace clickable link generator html links.
11. I had trouble at first getting my web buttons to the left until I discovered br .
12. Other web resources was used etc.
***Most part of the project was trying to choose fonts, color schemes, centered paragraphs and images.

Wk of 7/7

Lesson 9

Chapter 16
Audio and Video
Using multimedia to trick out your pages with audio and video. Learning how to use creating web pages with the
background music, animatins, and even full-frame movies.

Understanding Multimedia
This includes a variety of different technologies and filed types, all of which have dramatically different computer requirements and pose
different Web design challenges.

Types of Multimedia Files
Synthesized music (MIDI)
Digial audio(WAV and MP3)
Digital video (MPEG, AVI, MOV, and WMV)
Animated GIF’s

The Embed Tag
Help you control the playback controls.

Chapter 17

A self-publishing format that can help you avoid the headaches of Web site management.
Blpgs are straightforward, and slightly chaotic way to communicate on the Web.

Blog Hosting and Software
Hosted blogs-you simply sign up with a blog provider and start blogging.

Self -hosted blogs-interesting in hosting a blog entirely on your own.

This website was very interesting in listening to different avatar stories using the sitepal. This tool would be good for any
teaching tool.

Wk of 6/30

Lesson 8

Chapter 14

JavaScript and DHTML
Adding Interactivity

Understanding JavaScript
Java Script can dynamically insert some HTML into Web page or modify an existing HTML tag, for example, you can show a personalized message or make a title grow and shrink perpetually.

The script Tag
Block that you slot somewhere into an HTML document

Temporary storage containers where you can keep track of important information.

Chapter 15
Fancy Buttons and Menus
Link to let visitors travel from one page in your Web site to another.

Generating Button Pictures
You can graphically inclined, you can create the pictures for a rollover button by hand using just about and
graphics program Macromedia Fireworks.

Interesting information about images and links to other Related sources.

Lesson 7 wk of 6/23

Chapter 13
Making Money with Your Site

Advertisements-the most popular way to make money on the Web is by selling small spaces
of Web-page real estate.

Affiliate Programs-many affiliate programs let you get a commission for referring customer to other sites.

Sell Stuff- If you have your own products to sell the Web is the perfect medium, since the costs required
to set up shop online are so much less than in the real world.

Pay For Content-If you have really great content you can ask for cash before letting your visitors read it.

Google AdSense-it requires for you to show small text-only advertisements on your Web site.

Chapter 14
Understanding JavaScript

JavaScript can dynamically insert some HTML into Web page or modify an existing HTML tag.

JavaScript can gather information about the current date, the surfer’s browser, and the choices he’s made
when presented with a form element.

JavaScript can react to events that happen in the browser

Server-Side and Client-Side Programming
This program is known as a server-side application. When you’re using one of these Web sits, you send the program some information and the application consults a massive database and spits out some HTML that creates the page you see in your

Scripting Languages
Scripts are written in a simplified scripting language, and even f you don’t know all the ins and outs of a language, you can often copy and paste a cool script from another Web site to get instant gratification.

Variables-every programming language includes the concept of variable, which are temporary storage.

Advertisements-the most popular way to make money on the Web is by selling small spaces
of Web-page real estate.

Affiliate Programs-many affiliate programs let you get a commission for referring customer to other sites.

Sell Stuff- If you have your own products to sell the Web is the perfect medium, since the costs required
to set up shop online are so much less than in the real world.


I Love Typography: 15 Examples of Excellent Web Typography


This website allowed you to browse different web pages to various links .
Some of the Web pages had very strong content of Typography

Lesson 6 wk 6/16

Chapter 11

Your Website Promotion Plan

1. Build a truly great Web site-if you start promoting your Web site before there’s ‘s anything to see you’re wasting your
effort .

2. The most important detail is whether or not you have some genuinely useful content.

3. Share links with friends and like-minded sites-this step is all about building community.

4. Perfect your Web site’s meta tags-Meta tags are hidden tags that convey important information about your Web site’s content.

5. Submit your Web site to Internet directories-like search engines, directories help surfers find Web sites.

6. Submit your Website to Internet search engines-Once you submit your Web site to Web heavyweights like Google it officially enters the public eye.

7. Figure out what happened-In order to assess the successes and failures of your strategy, you need to know measure some vital statistics-how many people are surfing to your site.

Reciprocal Links

This is a link-trading agreement and the concept is simple. You find a Web site with similar content, and you strike a bargain: for example Link to my site, and I’ll link to yours. These links are important thread in the underlying fabric of the Web.

Web Rings
A ring that is similar to a reciprocal link, but instead of sharing a link between two partners, it binds a group of Web sites together.

Search Engines

This is the one and only tool for finding information on the Web. In order for the average person to find your Web site, you need to make sure your site is in the most popular search engine catalogs, and turns up as a result for the right searches.

Chapter 12

Letting Visitors Talk to You
(and each other)

When you put your Web site online it doesn’t just drop into a vacuum. Instead, it takes center stage in front of an audience that’s always interested often opinionated and occasionally irritable.

Transforming a Site into a Community

Internet is all about community, which means you need to let your visitors react, respond, and harass you.

Mail-To Links

Let your visitor email you. This link automatically starts an email message when clicked. It’s still up to the Web surfer to
send the message, but you can supply some boilerplate subject and body text.

HTML forms

This is a corner of the HTML standard you haven’t explored yet. It defines tags that you can use to create graphical widgets
like text boxes, buttons, check boxes, and lists.

Adding Forums and Groups to Your Site

Forums are cropping up as a bonus feature on all sorts of different Web sites.
1. Technology vendors large and small use them to provide community support and spread information.
2. Topic sites use them to host rollicking discussions.
3. Individuals use them to provide technical support and get feedback.

About Google Groups
Google Group is a thriving community of discussion forums. Although it hasn’t been around as long as some other forum hosts, it
includes a collection of useful features that rival any of its competitors. And, of course, it’s all free.

Creating a Group

Head on over to Look for a link inviting new members to join, and click it.

Participating in a Group

You can add a topic right from the Web page by clicking the “Start a new topic” link.

Managing Your Group
An ordinary group member visits a group, he’ll have the option of posting new messages, replying to existing messages or changing his delivery setting by clicking the “Unsubscribe or change membership” link.


Best Textures Flickr Group

-This website sort of strange wasn’t for sure if I was on the right page. If so it was very different.

Deviant Art Textures

-This website was very enjoyable and radiant with a lot links to various of art.

Grunge Textures
-Very unique textures

Grunge Style

-Styles appear to be very useful

Screen Resolutions Worldwide

-This website very detailed in showing you segments of textures.

Lesson 5 wk 6/9

Chapter 9

Page layout Tools:
Tables and Styles

HTML Tables
A table is a grid of cells that’s built out of rows and columns. HTML tables were used to show tables of information.
Web developers quickly discovered that invisible tables offered a perfect way to get around the limits of plain vanilla HTML,
allowing Web page creators to lay out content in a variety of new ways.

The Anatomy of an HTML Table
All you need to whip up a table is a few new tags

wraps the whole shebang. This is the starting point for every table.

Formatting Table Borders
Traditional tables have borders around each cell. You can turn on table borders using the border attribute. The border attribute specifics the width of the line that is added around each cell and around the entire table.


Cell Spans
HTML tables supporting spanning, a feature that allows a single cell to stretch out over several columns or rows. Spanned cells let you tweak your tables in all kinds of crazy ways.

Contextual selectors
Contextual selectors are stricter than ordinary type selectors. Whereas a type selector matches a tag, a contextual selector matches a tag inside another tag. To understand the difference, take a look at this type selector.
b {
color: red;

Floating Boxes
Relative positioning elements are ordered based on where they appear in the document.
Example: If you have one

followed by another
, the second
is place below the first one.

When using overlapping layers, the browser needs to know which element goes on top. This is accomplished through a simple
number called the z-index. Elements with a high z-index are placed in front of elements with a lower z-index.

Chapter 10

This feature let you show more than one Web page in the same browser window.

The information inside your tags is the heart of your frameset page. It’s where you decide how to split the
browser window into rows or columns of specific sizes. You define the width of each column using the cols attribute or height of
each row using the rows attribute.

Targeting Frames
A small important flaw in the frameset-when you click of the navigation links, the target page of the link oopens in the frame where the link is placed.

Frames have one unmistakable feature the scroll bar. This is when the content of one page grows larger than the size of its
frame, scrollbars appear.

Handling Browser that don’t Support Frames
At a bare minimum, browsers that don’t support frames should still be able to read the content pages one at a time in an ordinary browser window. The easiet way to accomplish serve up these individual pages is to copy the HTML from the menu. htm file into the section.</p> <p>Better URLs for Framesets<br /> There&#8217;s no law against requesting a frameset page. You can type its URL into your browser window orlink to it in the same way<br /> you link to any page.</p> <p>Nested Framesets<br /> This is were you nest one set of frames inside another.</p> <p>Websites<br /> Colors on the web Http://<br /> Very interesting website to different links of color schemes. Great information on Hexadecimals which are numerical codes that<br /> are designate to use for shades of colors. This website has tremendous amount of headings and tags that links into variety of websites. </p> <p>

June 10th, 2008 | Category: Uncategorized | Leave a comment

Lesson 4 wk 6/02

Chapter 7

Adding Graphics

Understanding Images
Images aren’t stored in your HTML files. Images are stored in a separate file.
In order to show a picture in your page, you use the tag in your HTML

The alt Attribute
This provides a short bit of text that’s used instead of the graphic, when necessary.
For example, the web browser that requests the page doesn’t support images.

File Formats for Graphics

GIF- format is sutiable for graphics with a very small number of colors (like simple logos or clip art).
JPEG- format is sutiable for photos that can tolerate some loss of quality.
PNG-format is suitable for all kinds of images.

Compression JPEG gives the best compression as you introduce various problems which are know as compression artifacts. The
most compression artifacts you’ll notice are blocky regions, halos around edges, and a general blurriness.

Images and Style
The tag supports a few optional attributes that you can use to control alignment and borders.

Inline Images in text
If not taking any extra step every image you insert with an tag is placed right into the flow HTML text.
The bottom edge is lined up with the baseline of the text that surrounds.

Adding Captions
Give your pictures a caption above or below the image. Do a inline images by putting a line of text immediately above or
after the picture, separated by line break.

Background Images
CSS makes it possible to set a background image that sits underneath the rest of the page content.
This techniques can be a little distracting, and so it’s fallen out of favor with web gurus in recent years.
Note: Background images can maek your Web site seem tacky. Be wary of using them for a resume page
or a professional business site.

Graphic Text
1. Fire up your favorite image editor or drawing program.
2. Fill in a background color tht matches your web page.
3. Choose your font, and type the text over the background color.
4. Cut your image down to size.
5. Save your picture-GIF or PNG-note: Don’t use JPEG your texzt will have blurred edges.

Chapter 8

Linking Pages
Understanding the Anchor
In HTML you use the anchor tag to create a link that when clicked, tranports the web site reader to another page. The
anchor tag is a straightforward container tag. It looks like this: .
Inside the anchor tag, you put the clickable content: CLick Me.

Internal and External Links
Links can shuffle you from one page to another in the same Web site, or they can transport you to a completely different Web site on a far-off Web server. Depending on which task you’re performing on which task you’re performing, you use a different type of link.

Internal links point to other pages or resources in your Web site.

External links point to pages or resources in other Web sites
For example if you want visitors to surf from your bio page (MyBio.htm) to another page on your site with your address information (ContactMe.htm) you need to create an internal link.

Linking to Other Types of Content
You can link to a JPEG, GIF, or PNG image file
You can link to a specialized type of file, like a PDF file, a Microsoft Office document, or an audio file.
You can link o a file you want others to download.
You can link to an email message.

Adding Bookmarks
To create a bookmark you use the anchor tag, but with a twist. All you supply is a name attribute that gives your bookmark
a descriptive name. It’s up to you whether you put any text inside the anchor.

Site Management
Nvu, Dreamweaver, FrontPage, and many other HTML editor include site management tools that let you see your entire Web site at a glance.

Link Checkers
A link checker is an automated tool that scans throught one or more of your Web pages. It tests each link it finds by trying
to retrieve the target page which is the page your link is pointing to.

Using Redirects
This is a special instruction that tells the browser to automatically navigate to a new page. The advantage of using a redirect is
that it pevents a broken link, but it doesn’t lock you into the old structure of your Web site if you’ve decided it’s time to make a


Web Style Guide, 2nd ED.
Excellence choices of web designs with great tags and identifers

Smashing Magazine: Top 50 Blog Designs excelent-blog-designs/
A lot of colorful images and links to other sites for more info.

June 3rd, 2008 | Category: Uncategorized | Leave a comment

Recent Posts