CS110: Computers and the Internet

Getting Started

Orit Shaer, Scott Anderson, Sohie Lee, Jean Herbst

Getting Started 1-2

Am I in the right class?• CS110, Computer Science and the

Internet introduces the fundamentals of web design and programming, and the impact of the digital revolution.

• CS111 introduces the fundamentals of programming and problem solving techniques using Java.

• CS112, Computation for the Sciences, teaches programming skills using MATLAB

• CS114, The Socio-Techno Web, teaches the structure of the social web. Won’t be offered again until Fall, 2012.

• CS117, Inventing Mobile Apps, teaches the programming and big ideas of CS in the context of making apps for Android smartphones. Won’t be offered again until Fall, 2012.

Getting Started 1-3

Please register for lab section*• Labs provide hands on

experience with the ideas presented in lecture.

• Labs meet on Tuesday• If you cannot get into the

section you want, register for another and use Q&A to arrange a swap.

*This does not satisfy the Wellesley laboratory requirement.

Getting Started 1-4

Home Away from Home

• All course materials may be found at

• The CS file server, cs.wellesley.edu, is used to download and upload programming assignments.*

• There are two textbook. Lecture notes are available on the course website.

http://cs.wellesley.edu/~cs110/

Getting Started 1-5

Four big ideas• Four important concepts are at the

core of this course:

1. Digital representation of information

2. Impact of the digital revolution;

3. Problem Solving;

4. Project Development Cycle

• We will illustrate these ideas in the context of web design.

Big Ideas

• Digital representation of information• Impact of the digital revolution• Problem solving• Project development cycle

Big idea #1: Digital representation• How do we represent the many

kinds of information:– Numbers– Text– Images– Color– Video– Sound

• How can we keep information private?

• How can we compress information?

Big Idea #2: Impact of digital revolution

• How does access to information impact our society?

• How does it impact you?• Privacy • Security• Intellectual property

Big idea # 3: Problem Solving

Divide problem P into subproblems.

Conquer each of the subproblems.

Glue (combine) the solutions to the subproblems into a solution S for P.

ModularityLarge systems are built from components

called modules. The interfaces between modules are

designed so they can be put together in a mix-and-match way.

• Our goal is to design for maximum reusability.

Getting Started 1-9

P

P1 P2 P3 P4

S4S3S2S1

S

Big Idea #4: Project Development Lifecycle

• Apply these ideas to build a website:– Form team– Find a client– Specify requirement– Design, implement, test– Deliver– Present

Course Overview

• HTML• CSS• JavaScript• Concepts and tools for graphics, sound, form,

animation, and movies• Social, legal, ethical implication• Designing and implementing a website

Seurat, A Sunday Afternoonon La Grande Jatte

Seurat, Study for LaGrande Jatte

HTML: View Page Source• http://cs.wellesley.edu/~cs110/lectures/L01-welcome/csfun/CSfun.html

• How is a <title> different from <h1>? • How is <h1> different from <h2>? from <h3>?• How is a bullet list created?• What does <strong> do?• What does <q> do? What does <blockquote> do?• What does <em> do?• What does <br> do?• What does <hr> do?• How are the beginning and end of a region marked?• Are there tags that don't have both a beginning and an end?• What tag is used to insert an image? How does its use differ from other tags in the

file?• How are hyperlinks (links to other web pages) created?

HTML Syntax

• An HTML document is composed out of elements that begin and end with tags:– <start tag> contents </end tag>

• Some HTML tags that you have seen:– Structural tags– Header tags– Text tags– List tags– Other tags– Comments <!-- I can say anything I want in a comment. -->

Tag Syntax

• Some tags have attributes:– <a href="http://www.yahoo.com">Yahoo!</a>– <img src = "small_weasel.jpg" alt = "a small weasel">

• <tag attr1 = "value1" attr2 = "value2" ... attrN = "valueN"> contents</tag>

What’s Next?

• Tell us about yourself• Find a well designed website• Sakai quiz before next lecture (due midnight

before class)

Getting an Account

• http://cs.wellesley.edu/accounts/cs110-account-request.htm

• You will need a password:– Use a mixture of upper and lower case letters, digits, and characters.– Longer passwords are more secure (at least 6 characters)– Don’t use information associated with you that someone could guess.– Don't write it down, but don't forget it– Use different passwords for different systems and purposes. That way, if one

password is broken, the others will be okay.

• And the Magic Word is….