1. Web Design: Basic to Advanced Techniques Fall 2010 Mondays 7-9pm 200 Sutardja-Dai Hall WELCOME TO THE COURSE!

2. Enrollment 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

3. Enrollment via Tele-Bears != Actual Enrollment in Course 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 later

4. Today’s Agenda 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

5. Instructors Alex alex@decal.aw… Amber amber@decal.aw… Jon jon@decal.aw… All of Us: staff@decal.aw-industries.com

6. Alex 4 th Year EECS Major Portfolio: http://www.aw-industries.comhttp://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

7. Amber 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

8. Jon 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

9. Topic Overview 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

10. Website Examples Cool designs that you should be able to achieve at the end of this course! HTML, CSS, JavaScript

11. Website Galleries http://cssremix.com http://www.thefwa.com http://www.lookom.com http://www.designshack.co.uk

12. Syllabus Highlights 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!)

13. Class / Lab 1 st half of class: lecture Then break 2 nd half of class: lab

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

15. Register/Attendance 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

16. Attendance http://fa10.decal.aw-industries.com/lectures Next to today’s lecture use the following code: 759495

17. Web Design: Basic to Advanced Techniques Fall 2010 Mondays 7-9pm 200 Sutardja-Dai Hall Introduction to the Internet

18. Browser (client-side) 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

19. Web Server (server-side) 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

20. Internet Allows for communication between remote machines Medium through which our browsers interact with web- servers

21. Browser & Server Interaction “Can I Have: img.gif” “Here you go” “Can I Have: img.gif” “Here you go” http://google.com/img.gif What happens when you visit: ?

22. URLs URLs specify the location of files on the web. http://www.berkeley.edu/img/sections/berkeley-text.gif Protocol (https, ftp) Prefix Path DomainFile

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

24. What is 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

25. Using Markup This is a paragraph. This is a paragraph. This is a paragraph This is a paragraph.

26. What is 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 With HTML

27. HTML Tags Markup via tags Interpreted by the browser, but not printed on web page “ ” differentiate tags from rest of document Opening brace Element type Closing brace

28. HTML Element HTML elements are generally composed of opening tags and closing tags Some HTML elements can take attributes in the opening tag Hello, world! Opening tagClosing tagContents Backslash

29. View Source

30. Modifying HTML Demo Chrome/Safari Developer Toolbar Firefox extension Firebug

31. Recap 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

32. Loading a Website What happens when you visit http://www.aw-industries.com?

33. Loading a Website 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

34. Challenge Questions How many additional files are loaded when you visit a URL like: http://www.google.com/intl/en_ALL/images/srpr/logo1 w.png ? 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 ? http://mysite.com/myfile.doc 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?

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

36. Software Requirements Windows (Jon) Notepad++ (w/ integrated FTP) OSX (Amber) Textmate Cyberduck Questions? ask Alex