Tumo Curriculum Activities

Archive for the ‘Foundations’ Category

  1. 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:  http-wiki http-google http-youtube
    • 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)
  2. 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:  browsers-opera Opera, browsers-ff Firefox,  browsers-ie Internet Explorer, browsers-safari Safari
    • Let’s look at the a news website, The Economist, in different web browsers.
      • Open up browsers-ffFirefox from the Start Menu.  Firefox
      • 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:open-operaopen-ie
      • 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:  ff-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:  tabs-ff
      • 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:  zoom-in
      • 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
  3. 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.  no-access
      • Hands on:  Type http://dev.opera.com/joniscool.html — the page doesn’t exist, so you’ll get a 404 error returned. no-page-error
    • 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
  4. 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)
  5. 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.
  6. 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
Advertisements
  1. STEP 1: Mixing colors for PAINT & LIGHT
    • red-swatch RED, blue-swatch BLUE & yellos-swatch 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-swatch RED, blue-swatch BLUE & green-swatch 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.
  2. STEP 2: Color on the World Wide Web
    • what-is-hexadecimal
    • hex-desc
    • hexadecimal-red
    • hexadecimal-green
    • hexadecimal-blue
    • 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:
      • color-blender
      • Click on the “Colorzilla” icon on the bottom left of your browser. It looks like this: colorzilla-icon
      • Use your mouse to hover over the color swatches on the screen
      • Notice the hexadecimal color changing on the bottom of the screen.
      • ColorZilla-2
      • 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”
      • open-ps
      • 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
      • ps-color-swatch
      • 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”.
        ps-color-white
        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.
        ps-color-black
      • QUESTION: Type in the following hexadecimal number “ff9915”. What color is this? ANSWER: [a. Orange]; b. Blue; c. Pink; d. Grey
  3. 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:
    • kuler-fromanimage
    • Upload this image of Yosemite National Park to Kuler:
    • mountains
    • 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.
  4. 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.

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

  1. STEP 1: All the Colors of the World
    • what-is-color-wheel
    • color-wheel-desc
    • 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.
    • primary
  2. STEP 2: What is a color scheme?
    • what-is-color-scheme
    • color-scheme-desc
    • primary
    • Slide2
    • Slide3
    • analogous-colors
    • complimentary-colors
    • Slide6
    • Slide7
    • Slide8
    • Slide9
    • 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
  3. 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.
    • kuler-list
    • 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:  kuler-view-all-color-themes
      • QUESTION:  Find a comment that you think is funny.  ANSWER:  Copy/paste it here.  [input textbox]
  4. 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.
      • kuler-register
      • This will take you to the Adobe Website to register
      • adobe-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
      • kuler-create-screen
      • Select “From a Color” on the left hand menu
      • Notice the Different types of color schemes you can choose from
      • kuler-color-schemes
      • 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”
      • kuler-my-color-theme
      • Navigate back to the homepage and select “Newest Colors” from the left menu
      • Notice that your color scheme is now available to the public!
      • kuler-my-color-theme-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%5D

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
  1. 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 google-logo, Yahoo! Search yahoo-logo (which is not the same as the Yahoo! Directory), Bing (formerly Live Search) bing-logo and Ask Ask-logo.  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. search-bar-fashion
    • (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.
    • dropdown-searchbar
    • 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.

  1. Lesson on Creative Commons.  Licensing on web.  etc.
  2. Explore the following resources:
  3. Stock Photography

    Icons

  1. Exploration activity.  Have students use “Cooliris” plugin on Firefox.
    1. scroll through the news section.  Click on the news images of your interest and read a few articlescooliris-screenshot
    2. Close Cooliris and browse to Flickr
    3. Do a Flickr search for “colorful”.  Hover over one of the images and click on the “cooliris” image in the bottom left corner of the thumbnail image.  Browse through the photos.
  2. Explore Kontain.com This is a blog, image, video, audio sharing website.
    1. Do a search
    2. View images in full screen view
    3. View followers, recent entries,
    4. Find some pictures from Armenia.
    5. Find a person who has followers from 10 different countries.  What type of pictures does this person take?
    6. Find a photo, video or blog post that inspires you.  Leave a comment for that person.
  1. Lesson on project process:  Project management, IA, Design, Development, Launch
  2. Simplify this process – keep it high level and describe how there are different ways to make it work.  In teams, alone, with different tools, documents, etc.