CS110: Computers and the Internet Getting Started Orit ShaerOrit Shaer, Scott Anderson, Sohie Lee,...
-
Upload
christal-powers -
Category
Documents
-
view
219 -
download
3
Transcript of CS110: Computers and the Internet Getting Started Orit ShaerOrit Shaer, Scott Anderson, Sohie Lee,...
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….