1 / 36

Web Design:

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. Enrollment. Enrollment Stats. What This Means.

whitley
Download Presentation

Web Design:

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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

More Related