Web design
This presentation is the property of its rightful owner.
Sponsored Links
1 / 36

Web Design: PowerPoint PPT Presentation


  • 66 Views
  • Uploaded on
  • Presentation posted in: General

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.

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


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

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


Enrollment via tele bears actual enrollment in course

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


Today s agenda

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


Instructors

Instructors

  • Jon

  • [email protected]

Alex

[email protected]

Amber

[email protected]

Web Design:Basic to Advanced Techniques

All of Us: [email protected]


Web design

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


Amber

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


Web design

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


Topic overview

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


Website examples

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


Website galleries

Website Galleries

  • http://cssremix.com

  • http://www.thefwa.com

  • http://www.lookom.com

  • http://www.designshack.co.uk

Web Design:Basic to Advanced Techniques


Syllabus highlights

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


Class lab

Class / Lab

  • 1st half of class: lecture

  • Then break

  • 2nd half of class: lab


Course website

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


Register attendance

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


Attendance

Attendance

  • http://fa10.decal.aw-industries.com/lectures

  • Next to today’s lecture use the following code:

    759495

Web Design:Basic to Advanced Techniques


Web design1

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


Browser client side

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


Web server server side

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


Internet

Internet

  • Allows for communication between remote machines

  • Medium through which our browsers interact with web-servers

Web Design:Basic to Advanced Techniques


Browser server interaction

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


Web design

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


Your base urls

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


What is html

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


Using markup

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


What is html1

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


Html tags

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


Html element

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


View source

View Source

Web Design:Basic to Advanced Techniques


Modifying html demo

Modifying HTML Demo

  • Chrome/Safari Developer Toolbar

  • Firefox extension Firebug

Web Design:Basic to Advanced Techniques


Recap

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


Loading a website

Loading a Website

What happens when you visit

http://www.aw-industries.com?


Loading a website1

Loading a Website

  • Web-server responds with corresponding HTML file

  • Browser interprets HTML file

  • Sees instructions to GET other files…

  • Renders complete web-page


Challenge questions

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?


Web design2

Web Design:

Fall 2010

Mondays 7-9pm

200 Sutardja-Dai Hall

Basic to Advanced Techniques

Software Setup

Web Design:Basic to Advanced Techniques


Software requirements

Software Requirements

  • Windows (Jon)

    • Notepad++ (w/ integrated FTP)

  • OSX (Amber)

    • Textmate

    • Cyberduck

Questions?

ask Alex

Web Design:Basic to Advanced Techniques


  • Login