Webmaker/Sooke/Schools/Journey
Contents
Welcome the 'Build the Web' Exploratory Wiki for Journey Middle School!
=== Basic Rules ===a
- Same as school for food & drink
- Raise your hand to ask a question
- You can work alone or in partners (completely up to you)
- Help each other
- Do not post photos of yourself or others on the web, share personal information like phone numbers, home addresses. (clarify school's policy)
- Please don't wander off - no Facebook/Youtube, or other unrelated web activities while we work.
- Work at your own pace!
Week 1
- What is the Internet?
- What is the Web?
- What is the Open Web?
- Web Browsers
- Introduction & Webmaker Overview
- What Web Pages are Made Of ?
- HTML Tags: HTML, BODY, HEAD, TITLE, H1, H2, H3, H4, IMG
- Activity: Introduce Yourself using X-Ray Goggles
- HTML Tags: Div
- CSS Attributes: background-color, height, width, margin
- X-Ray Goggles
- Installing in X-Ray Goggles
- Remix the Sooke News Mirror or Times Colonist to:
- Report on something important in your family (a birthday, an anniversary)
- Announce that you have become supreme ruler of the world (or universe ), and what that means for everyone.
- Report on something important to you ie: hockey, horses, Harry Potter, My Little Pony, Snakes
Week 2
Terminology
URL URL stands for Universal Resource Locator. It is the address of a web page. Each page has its own unique web address (URL). This is how your computer locates the web page that you are trying to find.
HTTP The Hypertext Transfer Protocol (HTTP) is an application protocol for distributed, collaborative, hypermedia information systems. HTTP is the foundation of data communication for the World Wide Web.
HTML HTML or HyperText Markup Language is the standard markup language used to create Web pages. HTML is written in the form of HTML elements consisting of tags enclosed in angle brackets (like <html> ).
Tags Tags are codes in an HTML document which the browser reads and then interprets for subsequent display to a reader. Tags are not visible when an HTML document is viewed in a browser, but their effects are. Tags begin with the opening symbol "<" and end with the closing symbol ">"; and usually come in pairs, one that begins an action and one that ends it.
hi <b>there</b> everyone
hi there everyone.
Tags are codes in an HTML document which the browser reads and then interprets for subsequent display to a reader. Tags are not visible when an HTML document is viewed in a browser, but their effects are. Tags begin with the opening symbol "<" and end with the closing symbol ">"; and usually come in pairs, one that begins an action and one that ends it.
Document Link (for tutorial #1 and #2)
- Complete tutorial #1 - "your first web page".
- Follow the tutorial #2 - "My Evil Twin"
- If you find you have extra time, please navigate to: http://www.codecademy.com/courses/hour-of-code/0/1 and follow this tutorial on JavaScript.
Week 3
Your choice (finish the web pages you were working on - tutorial #2) or move onto online challenges:
- http://studio.code.org/s/playlab/stage/1/puzzle/1
- http://www.codecademy.com/courses/hour-of-code/0/1
Week 4
Week 5
- Go to this template (which was what we made last week)
- Hit 'Remix'
- Login (Login with Persona) and use the same user and password as last week
- Look through the code.
- See how, from last week we copied the same containers a few times over to duplicate our flipping card?
- Notice that the first div container has an extra attributed added : card1
AND that there is a new style added
#card1, #card4{ background-image: url(http://content9.flixster.com/question/33/54/66/3354663_std.gif); }
This is how we tell the webpage we want to card1 and card4 the same background.
1. With a goal of having two cards matching, please add styles for cards2 - cards12
Take your time, have fun. You can also add a few more cards if you want, but recommend max of 20
2. Change 'flipper speed' so people can see the picture for a longer period of time. Hint you'll find this in the .flipper portion of style. If you think your game would be more fun at a fast speed that's OK too :) 3. Add a border to your front card and your back card, using the .back and .front styles border-color:black; border-style: solid;
There are a number of border styles: dotted, solid, double, dashed to choose from
4. Finally, If you would like to, add a 'Card Game Title' to the backs of your cards. You might think this means you have to write it over and over again, but no. All you do is add this style:
.front:after { content: "Cat Memory Game"; font-family:verdana; color:white; font-size:15px; }
By using 'after' we're telling the CSS to put this text after everything else already in that container. There is also .before for the opposite.
Week 6
- Go to https://tiptoes.makes.org/thimble/LTEwMDc3NDY4MTY=/flipper-week-4
- Click Remix
- Change background, heights, widths pictures.
Week 7
- Go to Webmaker.org (Chrome or Firefox Only)
- Click on Tools
- Click on Popcorn Maker (or go right to https://popcorn.webmaker.org )
- In a second Tab open [Youtube https://www.youtube.com/]
- In a third tab open [http://search.creativecommons.org/ Creative Commons Image Search
- In a fourth tab open [Wikipedia http://en.wikipedia.org/wiki/Main_Page]
- In Youtube find a video of your favorite song, copy (cntrl-C) and paste (contrl-V) the URL of the video into Popcorn Maker's Media tab. Click here for what that looks like.
- Click the 'Get Media'
- Click 'once' on the thumbnnail (small image), of your video. This add it to your Popcorn Make Timeline.
- Press Play to see the timeline move with your video.
- Click on the Events Tab and add text to your timeline.
- Add a Popup.
- In Wikipedia find an article about the music, artist or topic of your video. Copy the URL (control C)
- In Popcorn maker add a Wikimedia Event to your timeline, and insert the URL of your Wikipedia article.
- Play with adding images an anything else you'd like!
- Login to save and share
- Check back for the final version of our Card Game
Resources
- Shortlink to this Wiki: bit.ly/sookweb
- Webmaker
- Thimble
- HTML Cheat Sheet
- XRay Goggles
- CSS Basics
- How the Internet Works
- HTML Cheat Sheet
- Hogwarts Images
- Place Kitten
Referenced