Tumo Curriculum Activities

Archive for the ‘Front-End Development’ Category

  1. “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.
    • nasa-logo
      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.
      • dropdown-menu
    • 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”.

        QUESTION: Hover over the ABOUT NASA link on the top. What is the 6th item in the list that opens up?

        • What NASA Does
        • NASA Locations
        • NASA Calendar
        • Interactive Features
    • Use your mouse to hover over other items on the website. What is the only thing that doesn’t move when you hover over it on the homepage?

      • A. The images under “TV & Video”
        nasa-tvvideo
      • B. The calendar date items
        nasa-calendar
      • C. The search bar
        nasa-search
      • D. The grey bars on the right
        nasa-greybars
      • Answer: C. The search bar. All other things have movement when you hover over them.
    • Scroll back up to the top of the page. Click on the “For Students” link at the top of the page. nasa-forstudents-nav
      • Notice that a new list appears on the left.
        nasa-forstudents-list

         

        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.
  2. 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:
        open-notepad
      • Type the groups of words into Notepad, each word should be on it’s own line.
        notepad-list
      • 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.nasa-forstudents-list

      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:
        delete-key Nothing happens. So what IS the format that the web browser understands?
  3. 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:
      firebug-icon
      The Firebug screen should appear. Your screen is going to look something like this:
      firebug-screen
    • 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:
      firebug-selector-icon
      firebug-selectorWhile 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:
      firebug-list-selection-2

       

      [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:
      firebug-code)

      • 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
    • Remember when you hovered over the items on the homepage – some moved, opened up, etc? That was what the USER sees. The code that you’re seeing now makes the site work right. This is what the DEVELOPER writes to build the website.

      QUESTION: Now, look back at the code you deleted – find the following text: <li> </li>. These are open and close tags in HTML. What do you think these tags stand for?

      • A. line item
      • B. link
      • C. little item
      • D. list item

      ANSWER: The answer is “D. list item” because it is displaying one of many items in a list format. There can be as many items in a list as you need there to be for your particular webpage.

    • 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:
      w3schools. This is the W3Schools site, it describes the different types of tags in more detail. You can try HTML yourself.

  4. 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:
      notepad-openwith
    • 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:
      notepad-html-1
    • When you’re done the code should look like this:
      notepad-html-3
    • 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*)

  5. 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:
        file-manager-addextensions

        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:
      html-inbrowser
    • Next you can design your list, and then arrange more content on your page!

Steps:

  1. Open  up your web browser, Firefox
    1. HAVE QUESTIONS:  Left click on the “Start” menu at the bottom left corner of your monitor.  Select the Firefox icon to open your web browser, Firefox.Firefox
  2. Open the file directory of your new website
    1. HAVE QUESTIONS:  Open the file directory by going to the “Start” menu and finding the folder titled “Car Website”
    2. file-directory-car-website
  3. Locate your new animation file and copy/paste it into the images folder in your file directory.  This will likely be either a .gif file or a .swf file.
  4. Open the index.html file.  This is where we will write code to link the animation file onto the website.
    1. HAVE QUESTIONS:  Open up the “index.html” file by right clicking on the icon for the “index.html” file, and selecting the “Open With” option.  A flyout menu will open and from there, select “Wordpad”.
    2. open-with-wordpad
  5. If you have a .gif animation file, you will embed your animation in your website as follows:
    1. Copy/paste the following code in your .html document:  <img src=”http://www.geocities.com/geodanny/image.gif&#8221; alt=”image description” >
    2. Change the source link, (the text in between the quotation marks) to link to your animation file.  To do this you will be implementing relative linking.
  1. i.      EXTRA:  To read more about relative linking, go here:  http://www.billhartzer.com/absolute-versus-relative-linking-in-web-sites/
  2. i.      <object width=”550″ height=”400″>
    <param value=”somefilename.swf”>
    <embed src=”somefilename.swf” width=”550″ height=”400″>
    </embed>
    </object>
  3. i.      NOTE: This is the minimum code you need to embed a Flash movie in a browser. A broken icon will appear on the Web page if the user does not have the Flash plug-in installed.
  4. ii.      Note: In the code above there is both an <embed> tag and an <object> tag. This is because the <object> tag is recognized by Internet Explorer, and Netscape recognizes the <embed> tag and ignores the <object> tag.
  1. If you have a .swf animation file, you will embed your animation in your website as follows:.
    1. Copy/paste the following code in your .html document:
    1. Change the value link and double check all text in between the quotation marks.
  1. Hit Save.  Go back to your web browser and double check if the animated.  If there is a problem, attempt to trouble-shoot.
    1. If you are having problems, call a tutor by clicking here.

Language:  Eng

Sm Icon:

Lg Icon:

Activity Type:  Exposure

Goal:

  • Students will be able to embed an animated gif or swf movie file into their HTML web page

Brief Description:

You’ve created a rotating image clip, now show it to the world by putting it on the internet!

Full Description:

You’ve created a rotating image clip, now show it to the world by putting it on the internet!  Learn how to embed your new animation clip onto a website to post it to the world.

Mandatory Dependencies:

  • Create a gif clip
  • Understanding Linking within a website

Optional Dependencies:

Focus Area: Web – Foundations

Coach:

Type:

Param:

Print Results:

Execute Actions:

Grading Criteria: