Blog
Final Project Topics
Ms. Martin : June 13, 2010 9:04 pm : 2010 Spring Creative Computing 1, 2010 Spring Exploring CSFind inspiration in UW, CMU, Stanford research.
Artificial Intelligence
- intelligent transport systems
- swarm computing
- automatic image analysis (image search)
- automatic translation
- voice control
- natural language processing
- get ideas from MIT’s CSAIL
Human-Computer Interfaces
- brain-controlled computers
- gesture interfaces (skinput, sixth sense, Natal)
Ubiquitous Computing
- wearable computers
- “Smart grid” (sensors for electrical, power grids; HydroSense)
- RFID applications (“smart tags”, tracking)
Computing law
- laws regulating privacy
- anti-hacking laws
Large-scale computing
- quantum computing
- parallel computing (multi-core, multi-processor)
Computing Concepts
- Moore’s Law
- Agile Software Design
- Cloud Computing (Google docs, GMail, etc)
- Databases (information storage)
- Peer to peer networking (BitTorrent)
- Encryption
Human-based computation (Captcha)
Computing in the developing world
Android OS
Linux
People in computing
- Edsger Dijkstra (algorithms)
- Alan Turing (father of CS)
- Douglas Engelbart (pioneer, invented the mouse)
- Marissa Mayer (early Google employee)
CSS Cheat Sheet
Ms. Martin : June 9, 2010 9:03 pm : 2010 Spring Exploring CSThis reference was adapted from Dawn Pedersen’s original sheet — thanks!
External Style Sheets
External style sheets must be called from inside an XHTML page using a <link> element, which goes inside the <head> element. External style sheet file names must end in “.css”.
Example:
<head>
<title>An External Style Sheet</title>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
External style sheets contain only CSS rules. They should never contain any XHTML tags such as <style>.
CSS Rules
All CSS rules are formatted like this:
selector {
property: value;
}
Example:
p {
color: #000000;
}
The example above specifies that all text inside paragraph tags should be black.
CSS Classes
CSS classes start the selector with a dot, such as this:
.bluetext {
color: #0000ff;
}
CSS class allow you to pinpoint a single element for special treatment. For example, if you want only one paragraph to be blue but not all of them, you add the class to the open <p> tag, like this:
<p class="bluetext">
You do not leave the dot in the class name when adding the class to an XHTML element.
Some Beginner’s CSS Rules
Below are some sample property/value combinations. You choose the selector – either a tag like <h1> or a class as mentioned above. The values below can easily be changed to something else in most cases.
Colors
Make Font Color Red
color: #ff0000;
Make Background Color Green
background-color: #00ff00;
Font Styles
Make Font a Sans-Serif Style
font-family: sans-serif;
Make Font a Serif Style
font-family: serif;
Make a Font Bold
font-weight: bold;
Make a Font Italicized
font-style: italic;
Make Text All Uppercase
text-transform: uppercase;
Font Sizes
Make a Font Approximately 12pt
font-size: small;
Make a Font Larger Than the Body Font
font-size: 130%;
Make a Font Smaller Than the Body Font
font-size: 90%;
Text Decorations
Remove an Underline
text-decoration: none;
Add an Underline
text-decoration: underline;
Add an Overline
text-decoration: overline;
Borders
Add a Thin, Dotted, Gray Bottom Border
border-bottom: thin dotted #888888;
Remove a Border Around a Linked Image
img {
border: 0px;
}
Text Positioning
Center-Align Text
text-align: center;
Right-Align text
text-align: right;
Add Spacing Between Lines of Text Within a Block Element
line-height: 20px;
Links
Here’s an example of how to change the color and underline for links in their unvisited, visited, hover and active states.
Hover means the mouse is on the link but it has not been clicked yet.
Active means the link has just been clicked but the new page has not yet appeared.
a:link {
color: #000000;
text-decoration: underline;
}a:visited {
color: #444444;
text-decoration: underline;
}a:hover, a:active {
color: #FF3300;
text-decoration: none;
}
Getting started with HTML
Ms. Martin : June 7, 2010 4:19 pm : 2010 Spring Exploring CSWe will be using Notepad++, which is linked from the desktop.
A basic web page has head and body elements inside of the html element:
Type out the basic HTML shown above. Notice that tags open and close containers. For example, the head starts directly after html starts, contains the title and closes right after that.
When you save this page, make sure it ends in .html (bieber.html, for example).
To see your page in the browser, click on Run in the menu at the top, then select ‘launch in Firefox.’
You should now see the following:
Ok, now it’s your turn! What information are you going to want to share about your celebrity? What headings and paragraphs do you need? What links? What images? Take a second to plan and then write out the HTML.
Intro to HTML
Ms. Martin : June 6, 2010 9:46 pm : 2010 Spring Exploring CSYou will create a single HTML page giving information about your favorite musician, artist, politician, band or actor. If there’s another type of famous person you’re interested in covering, that’s probably ok. If you have no idea who to do this assignment about, then do it about The Beatles. Spend about 30 seconds choosing who it’s about!
The goal of this exercise is to practice basic HTML tags including:
If you can’t remember what the tags do, read more about them at W3Schools.
Your page should have:
- A title
- At least three headings
- At least three paragraphs
- At least one list
- At least one image
For this first part, your page should be super boring — black text on white background. See my example at bieber.html but do NOT start your page by copying mine! I want you to type out all the tags in Notepad++ on your own.
Intro to web pages
Ms. Martin : June 3, 2010 9:59 pm : 2010 Spring Exploring CSAs we have just learned, web pages are structured using HTML, styled using CSS and made dynamic using JavaScript. We’re going to spend some time getting familiar with these three technologies, starting with HTML.
Complete the following to get some familiarity with HTML:
- Open Firefox (double click the link on your desktop)
- Visit 3 websites you commonly go to and right click on the page then select ‘View Page Source.’ This will allow you to view the full source of the page. What are some things the pages have in common? Differences?
- In the Tools menu, select Firebug and open Firebug. This should open a window at the bottom of the open website which shows the page’s code. Firebug allows you to make immediate modifications to the current web page! On the left is HTML and on the right is CSS. Try making some changes. Can you change the background color of the page? The title of the page?
Presentations: Scratch Projects
Ms. Martin : May 26, 2010 6:07 pm : 2010 Spring Exploring CSEveryone will be presenting their Scratch projects Friday May 28th. I expect all group members to participate. You will need to address the following questions:
- Who is your team and why did you choose to work on the project you created?
- What are the goals of your project? (what is the educational aspect?)
- Who is your target audience?
- What does your project do (show us a demonstration).
- What is an interesting problem you had to solve to get your project running (show us the Scratch code)?
- What was challenging in completing the project.
Your presentation is worth 10 project points and your grade will be based on the completeness and clarity of your answers to these questions. It is possible to have a great project and do poorly on the presentation or have an incomplete project but a terrific presentation.
Show us how cool your product is!
Guest Speaker: Ben Slivka
Ms. Martin : May 25, 2010 5:21 pm : 2009 AP CS A, 2010 Spring Exploring CS, Programming ClubWe were lucky to have Ben Slivka join us in Exploring Computer Science and AP Computer Science. Mr. Slivka is a computer scientist who worked at Microsoft from 1985 to 1999 and was involved in several exciting projects there, including starting Internet Explorer. Since, he has worked at Amazon, started and recently sold Dreambox Learning, and has worked with several non-profits.
Mr. Slivka shared his ideas on the current state of computing technology as well as some of what is to come. I took some notes as students asked questions and have done my best to recreate some of what was discussed.
Which of the companies you worked in was the most fun?
Mr. Slivka told us that he had the most fun at Microsoft. Starting Internet Explorer was a creative and innovative endeavor involving great people. It was a lot of work, too — he told us that 80-100 hour weeks were not uncommon for him! Mr. Slivka first saw a web browser in 1994 (Mosaic) and knew that it was an exciting development. In fact, in 1995, he wrote an internal memo on how important the web would become titled “The Web is the Next Platform.” At the time, there were only a few thousand websites as opposed to today’s tens of millions.
Mr. Slivka worked with Internet Explorer through its third release and grew the team from 7 to 69 engineers. He shared with us that during his time at Microsoft, a person in the USA was more likely to become a Microsoft millionaire than an NBA player!
Why did you leave Microsoft?
Young Microsoft took lots of risks to become successful but as it has grown, it has become more concerned with protecting its primary products (Windows and Office) rather than innovating. Around 1999, Mr. Slivka wanted to pursue Internet-related innovations but that was not the direction the company was taking. The book Breaking Windows covers the time when he was leaving Microsoft and the prologue is online.
Is it scary to talk to company founders like Bill Gates (Microsoft) or Jeff Bezos (Amazon)?
No! According to Mr. Slivka, companies are a lot less hierarchical now than they were maybe 50 years ago so it’s natural for CEOs to have relatively frequent contact with their employees. When he was at Microsoft, it was not unusual for him to trade e-mails and have face-to-face meetings with Bill Gates.
What is one of the most exciting ideas in computer science?
Mr. Slivka told us about computational complexity, the study of the difficulty of programming tasks.
Was it difficult to see OS/2 fail after 5 and a half years of work?
Only doing things that will succeed is boring, says Mr. Slivka! There is a lot more to learn from mistakes than from successes. It was difficult to see such a big time and energy investment be lost but going through the process of creating the product was valuable. OS/2 was a joint venture between Microsoft and IBM and their goals were different.
What was the hardest project you were involved in?
The human factor in projects is often the most difficult. In 1998, Mr. Slivka was asked to take part in designing a new interface for Windows. He and two others were in charge of the project and there was conflict among the leadership which made it difficult.
What do you think of the iPad?
It’s somewhere between a phone and a laptop and it’s hard to know where it fits in. It still requires a PC since when turned on it wants to be synced to iTunes. The device is too heavy but it does have a gorgeous screen. The brushed aluminum is beautiful but very slippery. Mr. Slivka sees it mostly as an expensive toy. He reminded us that computing technology is like grocery store produce in that it has a limited shelf life. This first version of the iPad is not likely to be popular for long. The lack of multitasking and virtual memory are real limitations.
Can you comment on the Apple vs. Adobe war?
Apple is playing defense right now by trying to protect their control over all aspects of their products. The Flash battle is not about security or stability, it’s about market control and — ultimately — dollars.
Which web browser do you use?
IE7 was too slow and Mr. Slivka switched to Firefox. He does not use Bing.
What do you think about cloud computing?
Offline computing still has a role since there is no pervasive connectivity yet. If cloud computing means data is never lost, actions can be infinitely undone, groups can collaborate well, no need to worry about installations of software then it’s a great idea but in practice, there is no great implementation yet. Google Docs doesn’t work well but it’s definitely possible to create a fully-functioning word editor in the cloud some day.
What are the main privacy issues on the Internet?
Mr. Slivka shared his policy: he doesn’t put anything up online that he wouldn’t be ok with being on the New York Times front page. People should be thoughtful about what they share and market forces will work to punish companies that don’t respect privacy well enough. In his opinion, the government is getting involved because it’s currently on people’s mind and will help politicians win elections.
What will Google look like in the next few years?
Google is now suffering from the same problem as Microsoft: Microsoft has revenue from Windows and Office and wants to protect those while Google has Search and AdWords and wants to protect those revenue streams. Google’s challenge will be innovating beyond search and ads while making sure they can maintain their dominance as products like Bing get significant investment. Their current strategy is to be everywhere (Android, Chrome, etc) and make Google the preferred platform so they can protect their search and ad dominance.
Software Engineering Project Rubric
Ms. Martin : May 12, 2010 8:31 pm : 2010 Spring Exploring CSElevator Pitch (4 points)
Proposal (25 points)
Storyboard (15 points)
Final Product (20 points)
Scratch broadcasts
Ms. Martin : May 5, 2010 8:59 pm : 2010 Spring Exploring CSBroadcast statements are very important for synchronizing behavior between the different elements in a Scratch program. We can then do things like have a button that when clicked affects more than one sprite.
Today you will work with a tacky example I created to learn from how I used broadcast statements. You’ll see different uses of it: buttons and startup screens.
Download the broadcast example and SAVE IT IN YOUR FOLDER.
You will make the following additions to the program:
- Add at least one sprite which also reacts to the purple-ify and spin buttons
- Add at least one button that changes the sprites in a certain way. For example, you could add a ‘grow’ button that makes everything bigger. You could also add a pixelate button which makes the screen look like:
- Add a ‘clear all’ button that reverts everything to its original state.
Variables as game state
Ms. Martin : April 29, 2010 7:08 am : 2010 Spring Exploring CSLet’s put together the things we’ve learned in Scratch and make more interesting programs!
First, fill out the conditions on this guessing game.
Then, choose TWO of the following projects to complete by the end of Friday. Remember that I expect you to put in consistent effort at your level. Someone working hard and accomplishing less will get a better score than someone who is unfocused be races through all the projects.
- Scratch maze:
Write a program for your sprite to complete a maze. You should include a timer so that the game ends after a certain amount of time and a counter to keep track of how many times the user has gone outside the boundaries. If the user completes the maze with time and lives remaining, a congratulatory message should be shown. You may find the following bit of script useful for making the sprite follow the user’s mouse cursor:
“Pacman”
Create a game in which a sprite must “eat” (go over) as many other sprites as possible in a given amount of time. The player sprite should be controlled with the keyboard arrow keys and should get one point for each thing “eaten”. Here is what your stage might look like:
- Pong
Extend your ball bouncing program so the ball bounces at angles off paddles. Your paddles should be controlled with the keyboard. Use a timer to make the game end after a certain amount of time. Use variables to keep score for the two players. You could also have one of the players be controlled by the computer (artificial intelligence!) or have your ball speed up over time. - Quiz game
Create a game that allows users to practice some skill like writing out colors in Spanish or multiplying two numbers. For math-related quizzes, you won’t need anything extra, but to test the user on words, you’ll need to figure out how to use lists. The rest of the code will be similar to the guessing game. - Reaction timer
Create a game that challenges the user to press a certain key (like the space bar) as quickly as possible. A “host” sprite should say how long a certain trial took and ask if the user wants to play again.
