Web Design:

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

2. Enrollment Enrollment Stats. 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 • Spots: 40 • Enrolled: 45 • Wait-Listed: 10 • Applied: 200+ Web Design:Basic to Advanced Techniques

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 Web Design:Basic to Advanced Techniques

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 Web Design:Basic to Advanced Techniques

5. Instructors • Jon • jon@decal.aw… Alex alex@decal.aw… Amber amber@decal.aw… Web Design:Basic to Advanced Techniques All of Us: staff@decal.aw-industries.com

6. Alex • 4th 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

7. Amber • 3rd 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

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 Web Design:Basic to Advanced Techniques

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 Web Design:Basic to Advanced Techniques

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

11. Website Galleries • http://cssremix.com • http://www.thefwa.com • http://www.lookom.com • http://www.designshack.co.uk Web Design:Basic to Advanced Techniques

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!) Web Design:Basic to Advanced Techniques

13. Class / Lab • 1st half of class: lecture • Then break • 2nd 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 Web Design:Basic to Advanced Techniques

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 Web Design:Basic to Advanced Techniques

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

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

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 Web Design:Basic to Advanced Techniques

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 Web Design:Basic to Advanced Techniques

20. Internet • Allows for communication between remote machines • Medium through which our browsers interact with web-servers Web Design:Basic to Advanced Techniques

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

22. URLs URLs specify the location of files on the web. Path Prefix http://www.berkeley.edu/img/sections/berkeley-text.gif Protocol (https, ftp) Domain File Web Design:Basic to Advanced Techniques

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 Web Design:Basic to Advanced Techniques

25. Using Markup • 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

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

27. HTML Tags • Markup via tags • Interpreted by the browser, but not printed on web page • “<“ and “>” differentiate tags from rest of document <span> Opening brace Element type Web Design:Basic to Advanced Techniques 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 <span>Hello, world!</span> Opening tag Contents Closing tag Backslash Web Design:Basic to Advanced Techniques

29. View Source Web Design:Basic to Advanced Techniques

30. Modifying HTML Demo • Chrome/Safari Developer Toolbar • Firefox extension Firebug Web Design:Basic to Advanced Techniques

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 Web Design:Basic to Advanced Techniques

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

33. Loading a Website • Web-server responds with corresponding HTML file • Browser interprets HTML file • Sees instructions to GET other files… • 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/logo1w.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?

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

36. Software Requirements • Windows (Jon) • Notepad++ (w/ integrated FTP) • OSX (Amber) • Textmate • Cyberduck Questions? ask Alex Web Design:Basic to Advanced Techniques