span - UC Berkeley Web Design DeCal - AW Industries

peruvianwageslaveInternet and Web Development

Feb 5, 2013 (4 years and 7 months ago)

104 views

Web Design:

Basic to Advanced Techniques

Fall 2010

Mondays 7
-
9pm

200
Sutardja
-
Dai Hall

WELCOME TO THE COURSE!

Web Design:

Basic to Advanced Techniques

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


Web Design:

Basic to Advanced Techniques

Web Design:

Basic to Advanced Techniques

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


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

Alex

alex@decal.aw…

Amber

amber@decal.aw…


Jon

jon@decal.aw



All of Us: staff@decal.aw
-
industries.com

Alex


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

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

Web Design:

Basic to Advanced Techniques

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


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


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


http://cssremix.com


http://www.thefwa.com


http://www.lookom.com


http://www.designshack.co.uk


Web Design:

Basic to Advanced Techniques

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


1
st

half of class: lecture


Then break


2
nd

half of class: lab

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

Web Design:

Basic to Advanced Techniques

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


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


Next to today’s lecture use the following code:

759495


Web Design:

Basic to Advanced Techniques

Fall 2010

Mondays 7
-
9pm

200
Sutardja
-
Dai Hall

Introduction to the Internet

Web Design:

Basic to Advanced Techniques

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)


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

Web Design:

Basic to Advanced Techniques

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

“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: ?

Web Design:

Basic to Advanced Techniques

URLs

URLs specify the location of files on the web.

http://www.berkeley.edu/img/sections/berkeley
-
text.gif

Protocol

(https, ftp)

Prefix

Path

Domain

File

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?


H
yper
T
ext
M
arkup
L
anguage


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

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

Web Design:

Basic to Advanced Techniques

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

Closing brace

Web Design:

Basic to Advanced Techniques

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

Closing tag

Contents

Backslash

Web Design:

Basic to Advanced Techniques

View Source

Web Design:

Basic to Advanced Techniques

Modifying HTML Demo


Chrome/Safari Developer Toolbar


Firefox extension Firebug

Web Design:

Basic to Advanced Techniques

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

What happens when you visit


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

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

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

?


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

Fall 2010

Mondays 7
-
9pm

200
Sutardja
-
Dai Hall

Software Setup

Web Design:

Basic to Advanced Techniques

Software Requirements


Windows (Jon)


Notepad++ (w/ integrated FTP)


OSX (Amber)


Textmate


Cyberduck

Questions?


ask Alex

Web Design:

Basic to Advanced Techniques