Tumo Curriculum Activities

[HTML - get started writing it]

Posted by: tumocurriculum on: October 19, 2009

“Hovering” and “Clicking”
- When you’re browsing on the web, there is a lot of information displayed. How does that information appear on your computer screen? This is what we’re going to look at now.
- The NASA website has a ton of great information about the universe, galaxy and astronomy. Let’s take a look.
- Hover over the words on the top of the webpage – NEWS, MISSION, MULTIMEDIA, etc.
- When you hover over these words, notice how another list of words opens up. Each of these words are “clickable” – able to be clicked on. Because of this, they are called “Links”.
- Scroll back up to the top of the page. Click on the “For Students” link at the top of the page.
  - Notice that a new list appears on the left.
    Which of the categories of students do you fit into?
    - Grades K-4
    - Grades 5-8
    - Grades 9-12
    - Higher Education
- All of this information that you just hovered over and clicked on was constructed by someone on the web design team. The person who built it is called the “Web Developer”. We will see how the web developer makes this work in this activity.
Organize your own information
- Information can be organized in a variety of ways. As we saw above, you can organize information by creating lists. Let’s do that now.
- Read over this cluster of words: Planets, Mercury, Venus, Earth, Mars, Jupiter, Saturn, Uranus, Neptune, Galaxy, Comet, Star, Asteroid, Black Hole, Meteor
- Separate these words into to groups – Planets and Galaxy – and write the groups of words on a piece of paper.
- We’re now going to transfer these groups into the computer, and write lists in the program, Notepad.
  - Open Notepad:
  - Type the groups of words into Notepad, each word should be on it’s own line.
  - Save this file on your desktop, titled “planets-galaxy.txt”
- We want the list that we made in Notepad to show up on the web, similar to the list we saw in the student section of NASA’s site. Go back to that link and we’re going to see how that appears on the web browser.
  How do you think we can get our text from Notepad onto the web?
  - A. We can highlight and change the text on an existing website, like we do in Notepad
  - B. We have to make a special function that the web browser will understand
  - C. We send an email to someone else to do it
  - D. We drag and drop the text from Notepad to the web browser
  - ANSWER: The web works differently than Notepad. To get the text to show up on a web browser, we must put the words into a format that the web browser understands. Try highlighting the text and hitting the “DELETE” button on your keyboard:
    Nothing happens. So what IS the format that the web browser understands?
Look underneath a website
- Firebug is an application that will help us see what’s underneath the website that makes the website work. Let’s take a look. Click on the FIREBUG Button in the footer of your web browser, on the bottom right:
  
  The Firebug screen should appear. Your screen is going to look something like this:
- Click on the “Selector” Button. This will allow you to choose one part of the website and look underneath it specifically. The “Selector” button looks like this:
  
  While you have the selector cursor active, hover over each of the “Student” list items. Notice how the code changes on the bottom left. We want our list to appear on the web like the “Students” list, so let’s see what is making that work… Click on the list element when your highlighted area looks like this:
  
  [HELP ITEM]: Are you having trouble with the selector? The selector works like this: if you click it once, your cursor becomes the selector. You can hover over as many items as you’d like, and the selector will find and display the code for those items. Then once you click on one of the items, the selector locks, and your cursor returns to its normal function. Unless you click the selector again, your mouse cursor will act as it normally does. (Watch this movie to see how to use this tool if you’re having trouble.)
- What’s behind that text making it work? To see, hover over the code that is highlighted (it should look like this:
  )
  - Right click the code and select “Edit HTML” from the menu
  - Now highlight and delete the code.
    
    Don’t worry, you’re not changing the site at all. No one but you is seeing these changes. That’s the beauty of this tool, the website changes only happen on your computer and when you turn it off, the site goes back to normal!
  - Undo this by hitting “Ctrl Z”.
- What just happened?? We found the code that controls this portion of the website. The code you just saw is called HTML
- This is the same code we need to make our list show up on the web. So, copy this code and paste it into your .txt document. We’re going to use it in the next step.
- These items in the code are called “TAGS“. For each tag, there’s an OPEN and a CLOSE tag. The content goes inside of the open and close tags. Some example of tags are:
  - <ul></ul>: Unordered List
  - <p></p>: Paragraph
  - <h1></h1>: Header (this is used for titles on the page)
  - <a></a>: Links (this makes text clickable)
  Look at this website here:
  . This is the W3Schools site, it describes the different types of tags in more detail. You can try HTML yourself.
How will the web read your list??
- We’ve now got most of what we need to turn our list into something that a web browser can read. Just needs a little more detail.
- Your “planets.txt” file should be open in Notepad already. If it isn’t, open this file with Notepad: Right Click/Open With/Notepad:
- Now let’s fill in the rest of the detail.
  Notice back on the NASA site that there is another tag that opens and closes around the <li></li> tags. Look back there now to see what that is:
  - A. <ul></ul>: Unordered List
  - B. <p></p>: Paragraph
  - C. <h1></h1>: Header (this is used for titles on the page)
  - D. <a></a>: Links (this makes text clickable)
  ANSWER: A. Unordered list. This code creates a bulleted list. Again, you can put as many list items inside of it as you need.
- The entire thing must be an “unordered list” in HTML language. To do this, write the open tag (<ul>) above the first list beginning with Planets, and write the close tab (</ul>) below the end of the last item in the list.
- We have two groups of lists. Each of the lists must be separated into individual list items. To do this, put an open li tag above the “Planets” list, and a close li tag below the last item in the “Planets” list. Do the same for the “Galaxy”.
- There are lists inside of lists – for example, “Mercury, Venus, Mars…” is a list inside of the “Planets” list. For each list we need an open and close ul tag> This is called an “embedded list”. We’ll now fill in the rest of the tags. Remember that the ones we’re going to use look like this: <ul>, </ul>, <li>, </li>. Your notepad should now look like this:
- When you’re done the code should look like this:
- Hit Save. You just finished writing your first code!
  
  Now test it out. Copy/Paste your text into Try-it editor to see what it looks like: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro (*show video*)
View your list on the web
- Finally, you will save the file into a language that the browser will understand. To do this, we’re going to change the type of file manually.
  - Go to the File Manager from the “Start” menu. Click “My Documents”, then navigate to “Desktop”. Remember that you saved the “planets-galaxy.txt” file on your desktop.
  - In the File Manager, we will change the type of file from “.txt” to “.html”.
    
    [Side Help Note]: Make sure that the file extensions are appearing in your File Manager – the file name should display in full, i.e. “planets-galaxy.txt”, not “planets-galaxy”. If it is not, check your settings – go to Tools/Folder Options. Click on the “View” tab. Make sure that the box to “Hide Extensions…” is unchecked. You will find it here:
    
    You want to rename your file, and you can do this one of two ways. You can Right Click and select “Rename” or click on the file and hit “F2″. When the file name is editable, highlight the extension of the file and change it from “.txt” to “.html”
  Your file can now be read by the web browser, because it is in a format that the web browser can understand (See Terminology Activity to learn more about file formats).
- If everything is right, you will be able to open your file in a web browser. Right click the file and open it in the Firefox browser. It should look like this:
- Next you can design your list, and then arrange more content on your page!

How does a website appear on your computer?

Posted by: tumocurriculum on: September 25, 2009

In: Foundations
1 Comment

Websites speak “code” like people speak “languages”
- Think about the different languages that you hear around you – people on the street, or on the TV. You may hear some people speaking Eastern Armenian, Western Armenian, Russian, English, French, Farsi, Arabic, Georgian, Greek, and maybe many others. Are you able to understand all of these languages? Websites on the internet are like people in the real world…
- Websites “communicate” with each other, just like people do. Every website contains a lot of information, and they want to show that information to as many other computers as possible. This is their way of “communicating” with one another. Just like people communicate with different languages.
- The difference is that websites speak code, like people speak languages. One lucky thing is that all websites use the same code to talk to one another. This code is called “HTTP”, short for “hypertext transfer protocol“. This is a universal ‘code’ used on the internet, to display websites. There are other ‘codes’, but this is the most often one used.
- You will see the “http” code when you view a website. For example, look at 3 of the most popular websites on the internet:
- Think about all the people who you talked to yesterday – maybe your mom? dad? brother? sister? friends at school? friends at home? teacher? grandmother?
- When you spoke, each of these people understood what you said. When a website speaks in HTTP code, all other computer devices can understand them – just as your family and friends understood what you said yesterday. Examples of computer devices that can understand websites when they speak in HTTP code are – Dell computers, HP computers, Mac computers, even mobile phones, mobile planners such as PDA’s or iPhones, and some video game devices.
- (Hands on: view websites on some of these devices)
- Quote: What has made the World Wide Web such a great success is that pages saved on different computers all over the world may be interlinked with so-called hyper-text links (which are normally underlined). As we will see, these links do not only help you move from one web site to the other; they also help the search engine find the pages.(Source)
Computers use a browser to comprehend information like people use their brain.
- When you spoke to your mom yesterday, why was it that she understood you? Because she understands the same language that you speak.
- Just like your family and friends understand the language that you speak, browsers understand the code that websites “speak”. There are several different browsers that can understand the code that websites emit. Some examples are: Opera, Firefox, Internet Explorer, Safari
- Let’s look at the a news website, The Economist, in different web browsers.
  - Open up Firefox from the Start Menu.
  - Copy/Paste the URL into the address bar: http://www.economist.com/
  - Do the same with Internet Explorer and Opera. You will likely need to open the programs from the “All Programs” menu, like shown below:
  - Notice how each web browser, or “brain” can translate (“render”) the website to the computer that you’re using right now.
  - Just how the browsers on your computer are each reading the website, different computers, mobile devices and some video games can do the same thing.
- You can view multiple websites at the same time, with a browser. Let’s use Firefox as an example. To view multiple websites you can open a new “tab”, or a new “window”.
  - To open a new tab, hit “Ctl T” on your keyboard, or go to File/New Tab:
  - You can open as many pages at once as you’d like. As you do this, your browser window should start to look like this:
  - Similarly, you can open a new “window” by typing “Ctl N” on your keyboard, or selecting “New Window” from the File menu.
  - Both new tabs and new windows allow you to view multiple websites at the same time. You can have multiple tabs in each window.
- There are many features in the web browsers these days. They do much more than simply display websites – you can search the web, post to websites, keep lists of favorite websites, etc. One of the most convenient things about a web browser is the ability to increase and decrease text size in the browser. Let’s try this on the Opera web browser.
  - To do this, hit the + and – key on your keyboard. Notice how the text increases and decreases as you do this. Another way to do the same thing is through the “View” menu like so:
  - Each browser has their own shortcuts, but the +/- are generally universal. For example, in Firefox, you type “Ctl +” / “Ctl -” to change the font size.
- Quiz: A browser in a computer is similar to a person’s brain in real life, why? a. because it speaks in code; b. because it understands the code that websites “speak”; c. because it is where a website lives; d. because it’s a tool websites use to communicate.
- Hands on: link users to Google search activity
Computers use numbers and letters to communicate, like people use words.
- When you spoke to your friend yesterday, you were using a series of words to get your message across, che? In the way that you use words, a website uses a series of numbers and/or letters to communicate.
- Open a new browser tab or window, and copy/paste this into it: http://www.apple.com and then hit enter. Open up another browser tab and copy/paste this into it: http://17.149.160.10/ and hit enter.
- You will get to the same website. If you don’t, click here to get help from a tutor.
- The series of numbers that a website uses to communicate is called an IP address, or Internet Protocol. The series of letters that a website uses to communicate is called a URL, or Universal Resource Locator. People almost always use URL’s to find websites. This is because URL’s have words that relate to the website itself and words are easier to remember than numbers.
- Sometimes when you type in a URL, it won’t work. This is usually because either the website is protected so that only certain people can access it, or the website is not there anymore. Do not be discouraged when something like this happens. You didn’t do anything wrong, it simply means that there is a technical problem. So continue browsing other websites, and leave the problems to the website-owners.
  - Hands on: Type http://213.236.208.98 into the address bar and hitting enter—you will get to the same server location that you got to in step 1, although you’ll get a 403 “Access Denied” error—this is because you don’t have permission to access the actual root of this server.
  - Hands on: Type http://dev.opera.com/joniscool.html — the page doesn’t exist, so you’ll get a 404 error returned.
- Quiz: type [an IP address] into the browser address bar. What is the URL that matches with it? (a,b,c,d)
- Quiz: type a URL into the browser address bar. a. This is a normal website; b. this website is protected and only certain people can access it; c. this website doesn’t exist anymore
Websites live in servers, like people live in houses
- Websites each have a home too. A website always has to “live” somewhere, just like a person lives in a house or apartment, in different cities or villages. Instead of living in a house or an apartment, a website lives in a “server“. A server is just a heavy-duty computer where the website files are stored.
- To define what a “server” is, we can say this: A server is a computer where web sites reside – when you type a web address into your browser, a server receives your request, finds the web page you want, and sends it back to your computer to be displayed in your web browser. (Source)
How websites relate to real life
- Quiz: A browser in a computer is similar to what in real life? a. a language, but it speaks in code; b. a brain, because it understands the code that websites “speak”; c. a house, because it is where a website lives; d. words, because it’s a tool websites use to communicate.
- Quiz: HTTP on the internet is similar to what in real life? a. a language, but it speaks in code; b. a brain, because it understands the code that websites “speak”; c. a house, because it is where a website lives; d. words, because it’s a tool websites use to communicate.
- Quiz: Servers are similar to what in real life? a. a language, but it speaks in code; b. a brain, because it understands the code that websites “speak”; c. a house, because it is where a website lives; d. words, because it’s a tool websites use to communicate.
Next Activities:
- What is HTML? view HTML with the color-coded FF plugin to see how the page is dissected.
- listen to the page source – leads students to lesson on accessibility
- web standards

Color the World Wide Web

Posted by: tumocurriculum on: July 21, 2009

In: Foundations
2 Comments

STEP 1: Mixing colors for PAINT & LIGHT
- RED, BLUE & YELLOW
  are the classic primary colors. If you combine these colors with paint, they will make up every other color on the color spectrum.
- RED, BLUE & GREEN
  are the primary colors of light. If you combine these colors in light rays, they will make up every other color on the color spectrum.
- EXERCISE: Use the projector and the transparency color sheets to create new colors. Turn the projector on and shine it onto a white screen or wall. With the transparent sheets, overlap the red, green & blue sheets to make new colors on the wall.
- Computer monitors work by displaying light on the screen. This is why RED, BLUE & GREEN are used to define all colors on the internet. Watch this movie to see more.
- EXERCISE: Use a magnifying glass to see how every color on your screen is made up of a reflection of red, blue & green.
STEP 2: Color on the World Wide Web
- The hexadecimal system is a way for computers to know what color to display on the internet.
  - EXTRA: The hexadecimal system is also used to define color when you code a website. (takes student to basic coding exercise where they can change the color of the background of a website, etc.)
- Now let’s see how it works…
  - Color Blender is a website that provides color schemes (we will learn more about color schemes later in this lesson). For now, go to this website and notice all of the different suggested groupings of color.
  - Scroll down on the page so that you see all the groupings of colors:
  - Click on the “Colorzilla” icon on the bottom left of your browser. It looks like this:
  - Use your mouse to hover over the color swatches on the screen
  - Notice the hexadecimal color changing on the bottom of the screen.
  - This displays the hexadecimal number that represents each color, and next to it the RGB numbers that represent each color.
  - EXERCISE: Find your favorite shade of blue within these color swatches.
  - QUESTION: Write the hexadecimal number for that color here. ANSWER: [input field]
- STEP 3: Color in Photoshop
  - Select the “Start Menu” in the bottom left corner of your monitor.
  - Hover over the tab that says “Programs”. This lists all the programs (or “applications”) that are installed on your computer at this time. A flyout menu of program options will appear.
  - Select the program called “Photoshop”
  - The Photoshop logo will appear now, and you will need to wait for the program to finish loading.
  - Once the program has loaded, you will see a new tab at the bottom of your screen labeled “Adobe Photoshop”. This is how you can get back to the Photoshop program at anytime, if you navigate away from it.
  - Click on the color swatch in the Tools panel on the left
  - The “Color Picker” will open. Here you can drag the color selector around to see the “Red”, “Blue” and “Green” values change, as well as the hexadecimal values.
  - EXERCISE: Drag the color selector to the color white. Notice here that the R, B, G values are all “255″.
    
    This is because the color white is the blending of all colors. Similarly, the R, B, G values for black are all “0″ because black is the absence of all colors.
  - QUESTION: Type in the following hexadecimal number “ff9915″. What color is this? ANSWER: [a. Orange]; b. Blue; c. Pink; d. Grey
STEP 4: Colors in an image
- Colors appear in images all around you. If you extract colors from an image you can create a color scheme that matches with that particular image. Let’s do this now…
- Login to the Kuler Website.
- Click “Create” from the left hand menu
- Click “From an Image” from the left hand menu:
- Upload this image of Yosemite National Park to Kuler:
- Drag the color selectors around on the image. Notice how the colors from the picture combine together to make a new color scheme below. Notice how the hexadecimal and RGB color numbers change below the color swatches. This is how you can find color schemes in nature.
STEP 5: Emotion from Colors
- Colors are seen everywhere in the world and people have become so used to colors that they relate certain colors to certain emotions. There is a color language. If you look at the world through this point of view, you will begin to see the meaning attached with color. Most colors seem to have strong associations, for example yellow represents optimism, happiness and cheerfulness; where blue represents calm, peacefulness and dependability.
- Read more about the meaning of color.
- EXERCISE: Create a color scheme that represents “Autumn”. What colors are usually associated with this season? Choose the colors from either a picture or from your memory and emotion when you think about Autumn.

Color the World

Posted by: tumocurriculum on: July 15, 2009

In: Foundations
3 Comments

In this lesson, we are going to explore color theory and make your own color theme.

STEP 1: All the Colors of the World
- All colors of the world are found in the color wheel. There are THREE colors that can be used to make up any color in the world – red, blue & yellow. These are called the PRIMARY COLORS.
STEP 2: What is a color scheme?
- QUESTION: What is the name of the color scheme that is consists of one base color and white tints and black shades of that same color?
- ANSWER: a. Complimentary Color Scheme; b. Primary Color Scheme; [c. Monochromatic Color Scheme]; d. Analogous Color Scheme
- - EXTRA: Get more information on the different types of color schemes.
STEP 3: Find other color schemes
- Kuler is a website that provides color schemes. Go to this website and click on some of the color schemes listed in the middle of the page.
- NOTE: “Color theme” is another way of saying “color scheme”.
- Click on some of the color schemes and you’ll see comments associated with it and the user name of the person who made it.
- EXERCISE: Find one color theme with many comments. Read the comments. View all the color schemes from this user by clicking on the user’s name:
  - QUESTION: Find a comment that you think is funny. ANSWER: Copy/paste it here. [input textbox]
STEP 4: Create your own color scheme
- Kuler allows you to create your own color theme. Let’s do this now. Click the “Register” link at the top right.
  - This will take you to the Adobe Website to register
  - Fill in each of the required fields with a red star. Uncheck the boxes near the bottom of the form that state “Email”, “Mail”, “Phone”. And hit “Continue”.
  - Once you’ve received your Adobe password, go back to the Kuler website and sign in (in the upper right hand corner)
  - Agree to the terms of service
  - click “Create” in the left hand menu
  - Select “From a Color” on the left hand menu
  - Notice the Different types of color schemes you can choose from
  - Change the color themes. Spin the color wheel. Change the base color. Remove and add a color.
  - When you’ve found a color combination that you like, name it in the upper right corner and hit “Save”
  - Navigate back to the homepage and select “Newest Colors” from the left menu
  - Notice that your color scheme is now available to the public!
  - QUESTION: Copy/Paste the public URL of your new color scheme here. ANSWER: [text input i.e. http://kuler.adobe.com/#themes/newest?time=30]

Congratulations! You’ve learned about color theory and made your own color scheme.

EXTRA: For more on Color Theory, explore the following website:
- Color Theory Lesson: A thorough description of color theory from Opera’s Web Standards curriculum.
- Kuler: Adobe Labs has released an incredibly useful and well designed color palette creator that beats the rest.
- Contrast checker: evalute contrast between type and background
- Color Scheme Generator 2: My favorite color scheme generation tool for its control and variety of system generation.
- Color Blender: A good, simple color utility, which exports to Illustrator and Photoshop
- Colour Lovers: Color palette generation in a social setting
- Color Palette Creator: Give it a base color, it will give you a color palette
- The Man in Blue: Technicolor: Palette shown in context of a CSS layout
- 4096Color Wheel: A different approach to a color wheel
- Colr.org: Generate color systems from a photo or randomly
- Color Mixers: A staple in color generation systems
- Color Meaning: See what emotions colors naturally bring out in human nature
- ColorZilla: Recommended Firefox Color Picker Add-on

Design Principles: Contrast, Repetition, Alignment, Proximity

Posted by: tumocurriculum on: June 9, 2009

In: Design
Leave a Comment

CRAP Lesson
Explore the website examples: Vreele’s Blog, Zimmer Twins, Icon Buffet, Chevrolet.com
Sketch in your sketchbook examples that demonstrate each principle
Deconstruct a website – take screenshots of examples of these principles – find examples of the other principles in the Icon Buffet site.

Other design principles to teach:

White Space theory – the use of space in a layout
The use of color: demonstrate the way the eye is attracted to saturated colors and to movement.
1. Color-blindedness – demonstrate how someone who’s color-blind sees a website. 8% of men are color blind,
Content and design should match: the images used should represent he text. (This goes along with writing for the web)

Photoshop Play

Posted by: tumocurriculum on: June 8, 2009

In: Design
Leave a Comment

Photoshop getting started:

Water Droplets: http://www.n-sane.net/effects/water-drops/index.php
Jelly Text Effects: http://psd.tutsplus.com/text-effects-tutorials/plastic-jelly-styles/
Watercolor Image Effects http://www.photoshopessentials.com/photo-effects/watercolor-painting/page-3.php

David of Sassoon Storybook

Posted by: tumocurriculum on: June 8, 2009

In: Group Project
Leave a Comment

Translations are here in PDF form: http://www.arak29.am/index.php?pt=6

Team of 4 people: designer, 2 programmers & IA

Create guidelines for project, i.e. http://www.thinkquest.org/competition/website/rules.html

Timeline and milestones
Duedates
Create our own culture of competition
Must be one coach per team
- List what coaches may and may not do
How to submit
Have our own awards ceremony
Language requirements
Technology requirements

Example outcome:

MacBeth: definitions, audio of terms, paging, etc: http://library.thinkquest.org/2888/

How do you search the web?

Posted by: tumocurriculum on: June 5, 2009

In: Foundations
Leave a Comment

Step 1: What is a Search Engine?
- What has made the World Wide Web such a great success is that pages saved on different computers all over the world may be interlinked with so-called hyper-text links (which are normally underlined). As we will see, these links do not only help you move from one web site to the other; they also help the search engine find the pages.
  - EXTRA: You can find out more about how websites appear on your computer by going to this activity.
- Search engines are “engines” or “robots” that crawl the Web looking for new webpages. These robots read the webpages and put the text (or parts of the text) into a large database or index that you may access. None of them cover the whole Net, but some of them are quite large.
- The major players in this field are Google , Yahoo! Search (which is not the same as the Yahoo! Directory), Bing (formerly Live Search) and Ask . Search engines should be your first choice when you know exactly what you are looking for. They also cover a much larger part of the Web than the directories.
- Click on each of the search engine websites above and type in a term related to something you’re interested in – i.e. “fashion in Armenia”, “Hummer Trucks”, “Pizza shops in Yerevan”, etc.
- (Fill in an activity comparing the results you get.)
- There’s a shortcut to doing web searches too. Many browsers (link to ‘how do websites appear on your computer’ activity) have a search bar built in now.
- Type in your keywords here and hit “Enter” on your keyboard, or click the magnifying glass, to perform searches.

Do a google search – search from the browser bar, go to google.com, tips & tricks for searching the web, go to ip address, see what it’s like with image previews, etc.

*Bookmark* your favorite pages. Look through the world’s favorite pages on DIGG.com.

Also lead the students to how to translate a webpage with Google Translator

One step exposing kids to “How to” websites: HowStuffWorks & How Video website.

Twitter Search exercise

link users to other activity! leads users to a lesson on SEO – why it’s important for websites to be developed with clean code – Search engines are like “blind users” – screen reader step. leads students to a lesson on wikipedia as a resource for research – how to translate that into languages, how to look something up. how to view the previous edits of a page. etc.search activity leads students to youtube exploration. flickr exploration, 3D browsing exploration, twitter exploration, etc.

Inspiration: Stock Imagery & Icons

Posted by: tumocurriculum on: June 4, 2009

In: Foundations
Leave a Comment

Lesson on Creative Commons. Licensing on web. etc.
Explore the following resources:
- Veer: Wonderful selection of stock photography
- iStock Photo
- Morgue File: Free!
- Stock Xchange
- Stock Vault
- iStock Pro
- Open Photo
- Getty Images
- Index Stock Imagery
- Absolute Vision
- Icon Buffet: Top notch icons for blogs, CMS, and more
- FamFamFam: A high qaulity, massive library of useful UI icons
- Icons: A good selection of icons
- Sanscons: Selection of icons with standard background color
- Tango Project: Open source icon project. High quality
- Mini Icons: Tiny UI icons
- Feed Icons: Get the standardized icons for RSS feeds
- Icons for Microformats

Stock Photography

Icons

3D Browsing: News & Images