Web Design:
Basic to Advanced Techniques
Web Design:
Basic to Advanced Techniques
Fall 2010
Mondays 7-9pm
200 Sutardja-Dai Hall

Enrollment Stats.
 Spots: 40
 Enrolled: 45
 Wait-Listed: 10
 Applied: 200+
What This Means
 If you’re not on the wait-list or already enrolled, it’s unlikely we’ll have space this semester
 Priority for next semester
 If you’re here and weren’t officially invited and your name doesn’t appear on the front page of the site, we have to ask you to leave so others have a place to sit
Web Design:
Basic to Advanced Techniques

later
 To be properly enrolled:
 Create application via decal.aw-industries.com
 Complete and submit application
 Receive confirmation of enrollment
 Attend first day of class (today)
 Register at decal.aw-industries.com with class acct. form
 Add class via Tele-Bears (CCNs tonight via email)
 Tele-Bears will be audited, please drop if don’t satisfy above requirements
Web Design:
Basic to Advanced Techniques

 Instructor Introductions
 Topic Overview
 What You’ll be Able to Do! (once you’ve completed the course)
 Syllabus Highlights
 Course Website
 Introduction to the Internet
 Software Setup
Web Design:
Basic to Advanced Techniques

alex@decal.aw…
amber@decal.aw…
jon@decal.aw…
Web Design:
Basic to Advanced Techniques

 4 th Year EECS Major
 Portfolio: http://www.aw-industries.com
 Freelance Web-Application Consulting, Design, and
Development
 http://hookupfeed.com
 http://iforged.com
 President & CEO of PyRIGHT, Inc. (May 2010)
 http://www.pyright.com
 Serial Entrepreneur; I <3 Startups and Pet Projects
Web Design:
Basic to Advanced Techniques

 3 rd Year EECS Major
 8+ years of web design/development experience
 TAing CS169 (Software Engineering with an emphasis on web development w/ Ruby on Rails)
 RAD Lab (cloud computing/distributed systems) undergraduate researcher
 http://www.amberfeng.com
Web Design:
Basic to Advanced Techniques

 Web Experience
 Been doing this for a few years
 Of course HTML, CSS, JS (Jquery, Prototype)
 Rails
 Php
 Java, Jsp
 Fun fact: I am a basketball fan, but mainly a Laker fan
Web Design:
Basic to Advanced Techniques

 HTML and CSS
 ~ 2 lectures on HTML, and ~ 5 lectures on CSS and layout
 JavaScript
 ~ 2 lectures
 Vanilla, JQuery
 MySQL
 ~ 2 lectures
 PHP
 ~ 2 lectures
Web Design:
Basic to Advanced Techniques

 Cool designs that you should be able to achieve at the end of this course!
 HTML, CSS, JavaScript
Web Design:
Basic to Advanced Techniques

 http://cssremix.com
 http://www.thefwa.com
 http://www.lookom.com
 http://www.designshack.co.uk
Web Design:
Basic to Advanced Techniques

 Attendance is mandatory
 20% of Grade
 Excusable if sick or exam conflict
 Course work
 Quiz (~weekly, 1 - 2 questions, due by end of class) - 10% of
Grade
 Mini-Projects (due 11:59PM day of lecture, so ask questions after lecture; just fill out framework) – 50% of Grade
 Final Project (last day of class) – 20% of Grade.
Mandatory !
 You MUST turn in a final project or you will fail the class ( even if you did everything else!
)
Web Design:
Basic to Advanced Techniques

 1 st half of class: lecture
 Then break
 2 nd half of class: lab

 http://decal.aw-industries.com
 Announcements
 Please check at least once a week before class
 Chatroom and Instant Message
 Collaborate
 Ask / Find Answers to Common
Questions
 Lecture


Slides
Roll call
 Real Time Status
 Missing Assignments
 Missing Attendances
 Current Grade
 Assignments
 Submission
 Grading and Class Distribution
Web Design:
Basic to Advanced Techniques

 http://fa10.decal.aw-industries.com/register
 Use same email, first-name, and last-name as application
 Use the login on the account form, pick any password – not necessarily the one on the account form
Web Design:
Basic to Advanced Techniques

 http://fa10.decal.aw-industries.com/lectures
 Next to today’s lecture use the following code:
759495
Web Design:
Basic to Advanced Techniques

Web Design:
Basic to Advanced Techniques
Web Design:
Basic to Advanced Techniques
Fall 2010
Mondays 7-9pm
200 Sutardja-Dai Hall

 Firefox, Internet Explorer, Safari, Chrome
 Our main link to websites hosted on the Internet
 Primary function: to download and display files hosted on a remote server
Web Design:
Basic to Advanced Techniques

 Apache, IIS, Nginx
 Make a set of files accessible to clients via the Internet
(also often perform a service)
 Primary function: to respond to browser requests for files
Web Design:
Basic to Advanced Techniques

 Allows for communication between remote machines
 Medium through which our browsers interact with webservers
Web Design:
Basic to Advanced Techniques

“Can I Have: img.gif”
“Can I Have: img.gif”
“Here you go” “Here you go”
Web Design:
Basic to Advanced Techniques

Prefix Path http://www.berkeley.edu/img/sections/berkeley-text.gif
Protocol
(https, ftp)
Domain File
Web Design:
Basic to Advanced Techniques

http://users.decal.aw-industries.com/cs198_xx
Your username suffix here http://users.decal.aw-industries.com/cs198_xx/stuff/test.html

 HyperText Markup Language
 Computer coding language on websites
 Gives structure to ordinary text using tags
 HTML files are really just text files (extension .html) that are then rendered by the browser
Web Design:
Basic to Advanced Techniques

This is a paragraph. This is a paragraph.
<p>This is a paragraph.</p><p>This is a paragraph</p>
This is a paragraph.
This is a paragraph.
Web Design:
Basic to Advanced Techniques

With HTML Without HTML
About Us Who We Are French Bros., a family owned and operated company, was established in San
Francisco Bay in 1954 specializing in commercial and residential floors (i.e., carpet, vinyl, hardwood & laminate) as well as ready-made window coverings.
Founders Robert and Ray Levesque built French Bros. on one principle: To provide their customers with outtstanding service, incredible savings, personal attention and fantastic products to enhance your living environment - a mission carried on today by the current owners (Ray's children) Jim, Brad, and Susan.
French Bros. provides complete no-cost consultations on all projects. No job is too big or too small for our dedicated sales staff who are commited to providing the technical support and innovative product knowledge that will empower you, our customer, to make the best buying decisions for your home or office.
Call us today to see what French Bros. can do for you!
What We Do We do it all...from the ground up (Floor
Coverings)... to a little privacy (Window Coverings)... and more... All at prices you can afford! Floor
Coverings: Carpet, vinyl, hardwood & laminate Window
Coverings: Hunter Douglas: Country Woods, Silhouette,
Window Shadings, Duette, Honeycomb Shades Home
Furnishings: Complete, no-cost consultations with our interior design specialists to meet all your home furnishing needs
Web Design:
Basic to Advanced Techniques

 Markup via tags
 Interpreted by the browser, but not printed on web page
 “<“ and “>” differentiate tags from rest of document
Web Design:
Basic to Advanced Techniques
Opening brace
Element type
Closing brace

 HTML elements are generally composed of opening tags and closing tags
 Some HTML elements can take attributes in the opening tag
Opening tag Contents Closing tag
Backslash
Web Design:
Basic to Advanced Techniques

Web Design:
Basic to Advanced Techniques

 Chrome/Safari Developer Toolbar
 Firefox extension Firebug
Web Design:
Basic to Advanced Techniques

 Browsers request files from servers via URLs
 Servers, as their name suggests, respond with requested files
 Internet links your home machine to Google’s computers and allows for file transfer between the two
 The format of URLs often correspond to the physical location of files on the server
 Websites, which are made of HTML and CSS files, are ordinary text files with a special extension and markup that your browser interprets and displays
Web Design:
Basic to Advanced Techniques

1. Web-server responds with corresponding HTML file
2. Browser interprets HTML file
3. Sees instructions to GET other files…
4. Renders complete web-page

 How many additional files are loaded when you visit a
URL like: http://www.google.com/intl/en_ALL/images/srpr/logo1 w.png
?
 What would I have to do to make a file located at http://mysite.com/myfile.doc
be accessible at http://mysite.com/mydocs/myfile.doc
?
 What types of web-site files aren’t stored on a server but rather on the client’s computer?

Web Design:
Basic to Advanced Techniques
Web Design:
Basic to Advanced Techniques
Fall 2010
Mondays 7-9pm
200 Sutardja-Dai Hall

 Windows (Jon)
 Notepad++ (w/ integrated FTP)
 OSX (Amber)
 Textmate
 Cyberduck
ask Alex
Web Design:
Basic to Advanced Techniques