MWF 2:00 – 2:50 College Hall 205 WEB DESIGN JMA 318 | 574.

52
MWF 2:00 – 2:50 College Hall 205 WEB DESIGN JMA 318 | 574

Transcript of MWF 2:00 – 2:50 College Hall 205 WEB DESIGN JMA 318 | 574.

Page 1: MWF 2:00 – 2:50 College Hall 205 WEB DESIGN JMA 318 | 574.

MWF 2:00 – 2:50

College Hall 205

WEBDESIGN

JMA 318 | 574

Page 2: MWF 2:00 – 2:50 College Hall 205 WEB DESIGN JMA 318 | 574.

Instructor

Dr. Bill Gibbs

Associate Professor in the JMA Department.

Ph.D. in Instructional Systems from The Pennsylvania

State University.

Office – 341 COLH

Office hours – Tues 11:00-2:00, WF 10:30 – 12:00 and by

appointment

Phone – 412-396-1310

E-mail – .gibbsw@duq edu

Page 3: MWF 2:00 – 2:50 College Hall 205 WEB DESIGN JMA 318 | 574.

Purpose

• Introduction to Web Introduction to Web design design

• Overview of Web design Overview of Web design principlesprinciples

• Work with various Work with various software tools to software tools to design sites.design sites.

Page 4: MWF 2:00 – 2:50 College Hall 205 WEB DESIGN JMA 318 | 574.

Web Design –Goals

Demonstrate understanding of key principles underlying effective and innovative web design.

Analyze audience needs to design and develop web sites.

Prototype web designs.

Page 5: MWF 2:00 – 2:50 College Hall 205 WEB DESIGN JMA 318 | 574.

Web Design –Goals

Analyze web design characteristics – study other site designs.

Acquire skill in web technologies to create innovative designs.

Page 6: MWF 2:00 – 2:50 College Hall 205 WEB DESIGN JMA 318 | 574.

Web Design –Goals

Apply precepts of: design, typography, [Web type] and color [more color sites]in web designs.

Critically evaluate our own web designs.

Plan, design, develop, and implement Web sites.

Page 7: MWF 2:00 – 2:50 College Hall 205 WEB DESIGN JMA 318 | 574.

Web Design - Textbook

Learning Web Design by Jennifer Robbins, 2012, 4th edition.ISBN: 978-1-449-31927-4.

Page 8: MWF 2:00 – 2:50 College Hall 205 WEB DESIGN JMA 318 | 574.

Web Design - Textbook

Transcending CSS

Andy Clarke

Not required

Page 9: MWF 2:00 – 2:50 College Hall 205 WEB DESIGN JMA 318 | 574.

Assignments

1. Labs/homework - design exercises (7)2. Quizzes (2)3. Midterm Exam4. Final Exam5. Group design exercise6. Web Site – Final Course Project 7. Graduate project

Page 10: MWF 2:00 – 2:50 College Hall 205 WEB DESIGN JMA 318 | 574.

Assignments

•Labs/projects are due at the end of the day.

• Late assignments receive a 10% per class penalty up to a maximum of 30%. Cannot be accepted after 3 class periods.

Page 11: MWF 2:00 – 2:50 College Hall 205 WEB DESIGN JMA 318 | 574.

Assignments

Points assigned to each project

Page 12: MWF 2:00 – 2:50 College Hall 205 WEB DESIGN JMA 318 | 574.

Examine a variety of designs,

functional … aesthetic

Page 13: MWF 2:00 – 2:50 College Hall 205 WEB DESIGN JMA 318 | 574.
Page 14: MWF 2:00 – 2:50 College Hall 205 WEB DESIGN JMA 318 | 574.
Page 15: MWF 2:00 – 2:50 College Hall 205 WEB DESIGN JMA 318 | 574.
Page 16: MWF 2:00 – 2:50 College Hall 205 WEB DESIGN JMA 318 | 574.
Page 17: MWF 2:00 – 2:50 College Hall 205 WEB DESIGN JMA 318 | 574.
Page 18: MWF 2:00 – 2:50 College Hall 205 WEB DESIGN JMA 318 | 574.

We will look for examples of beautiful web design Aesthetically pleasing objects appear

more effective to the user because of their appeal.

… the user feels an affinity for an object that appeals to him/her, due to the formation of an emotional connection with the object.

Don Norman, Emotional Design

Page 19: MWF 2:00 – 2:50 College Hall 205 WEB DESIGN JMA 318 | 574.
Page 20: MWF 2:00 – 2:50 College Hall 205 WEB DESIGN JMA 318 | 574.
Page 21: MWF 2:00 – 2:50 College Hall 205 WEB DESIGN JMA 318 | 574.
Page 22: MWF 2:00 – 2:50 College Hall 205 WEB DESIGN JMA 318 | 574.
Page 23: MWF 2:00 – 2:50 College Hall 205 WEB DESIGN JMA 318 | 574.
Page 24: MWF 2:00 – 2:50 College Hall 205 WEB DESIGN JMA 318 | 574.
Page 25: MWF 2:00 – 2:50 College Hall 205 WEB DESIGN JMA 318 | 574.
Page 26: MWF 2:00 – 2:50 College Hall 205 WEB DESIGN JMA 318 | 574.
Page 27: MWF 2:00 – 2:50 College Hall 205 WEB DESIGN JMA 318 | 574.

Examine a variety of designs

http://www.netmagazine.com/features/top-20-css-sites-2012

.netmagazine best uses of CSS we've seen this year

Zen Garden: http://www.csszengarden.com/

Veerle Pieters: http://veerle.duoh.com/design

CSS3 features: http://tapbots.com/

Responsive: http://www.mindgarden.de/ |

http://www.stuffandnonsense.co.uk/design

Page 28: MWF 2:00 – 2:50 College Hall 205 WEB DESIGN JMA 318 | 574.

You’ll need

You should have access to e-mail and a Web browser – outside of class.

Flash drive (recommended) labeled with your name and contact information on them.

Page 29: MWF 2:00 – 2:50 College Hall 205 WEB DESIGN JMA 318 | 574.

Class Web Site

http://www.jma.duq.edu/classes/gibbs/JMA318/

Page 30: MWF 2:00 – 2:50 College Hall 205 WEB DESIGN JMA 318 | 574.

E-mailing

E-mailing assignments.

Use your

Duquesne

([email protected])

account.

Page 31: MWF 2:00 – 2:50 College Hall 205 WEB DESIGN JMA 318 | 574.

E-mailing

E-mailing assignments/attachments.

• Must have your name

• E-mail address

• Title of assignment

• Label subject of e-mail

Page 32: MWF 2:00 – 2:50 College Hall 205 WEB DESIGN JMA 318 | 574.

Applications

MS Office:

• Word

• Visio

Page 33: MWF 2:00 – 2:50 College Hall 205 WEB DESIGN JMA 318 | 574.

Applications

Adobe Illustrator

Page 34: MWF 2:00 – 2:50 College Hall 205 WEB DESIGN JMA 318 | 574.

Applications

Adobe Photoshop

Page 35: MWF 2:00 – 2:50 College Hall 205 WEB DESIGN JMA 318 | 574.

Applications

Dreamweaver

Page 36: MWF 2:00 – 2:50 College Hall 205 WEB DESIGN JMA 318 | 574.

Applications

<html></html>

.CSS

Web development

Page 37: MWF 2:00 – 2:50 College Hall 205 WEB DESIGN JMA 318 | 574.

Overview: topics

Logging on Our servers Using FTP User folder and class folders File Extensions

Page 38: MWF 2:00 – 2:50 College Hall 205 WEB DESIGN JMA 318 | 574.

User Name and Password

To connect to our servers from within either of our two labs (205 or 345): Ctrl-Alt-Delete Username: YourLastName PW: Given in class You will be asked to change your password

the first time you login

Page 39: MWF 2:00 – 2:50 College Hall 205 WEB DESIGN JMA 318 | 574.

User Name and Password

8 characters or more 1 UPPERCASE character 1 number 1 Special character ($, &) – no spaces

(e.g., Duquesne$07)

Page 40: MWF 2:00 – 2:50 College Hall 205 WEB DESIGN JMA 318 | 574.

Our Server

www.jma.duq.edu Your private folder It’s a subfolder of users folder

www.jma.duq.edu/users/YourLoginName

Save files (drag and drop files) while in either lab (CH205, CH345)

You can also FTP to there from home…

Page 41: MWF 2:00 – 2:50 College Hall 205 WEB DESIGN JMA 318 | 574.

How do I access the server?

Access from either CH345 and CH205

Start >> Computer (Z: Drive)

\\jma1\users\username

Page 42: MWF 2:00 – 2:50 College Hall 205 WEB DESIGN JMA 318 | 574.

How do I access the server?

From dorm or home

ftp://www.jma.duq.edu/users/YourLastName

Example: ftp://www.jma.duq.edu/users/gibbs/

You will be prompted for your user name and password Use the same name and password you used to login to

Windows

Page 43: MWF 2:00 – 2:50 College Hall 205 WEB DESIGN JMA 318 | 574.

How do I access the server? (from dorm or home)

You will be prompted for your username and password – jma/username

Page 44: MWF 2:00 – 2:50 College Hall 205 WEB DESIGN JMA 318 | 574.

How do I access the server?(from dorm or home)

• Folders and files display• Transfer (put) files from your computer, • Download (get) files to your computer.

Page 45: MWF 2:00 – 2:50 College Hall 205 WEB DESIGN JMA 318 | 574.

The PUB folder

USER FOLDER

Page 46: MWF 2:00 – 2:50 College Hall 205 WEB DESIGN JMA 318 | 574.

www.jma.duq.edu

Folder

File

File

FileFile

PUB Folder

Folder

Your Space

User folder

Page 47: MWF 2:00 – 2:50 College Hall 205 WEB DESIGN JMA 318 | 574.

Folder

File

File

FileFile

PUB Folder

Folder

Your Space

All files for the

Web must be in PUB

All files for the

Web must be in PUB

User folder

www.jma.duq.edu

Page 48: MWF 2:00 – 2:50 College Hall 205 WEB DESIGN JMA 318 | 574.

User Folder

Your folder on server has a child folder named pub

Inside that folder you should create a folder for each course that requires a web site

In this course, create a sub folder named JMA318

Page 49: MWF 2:00 – 2:50 College Hall 205 WEB DESIGN JMA 318 | 574.

The PUB folder

•You might create subfolders, for each course.

Double-click on pub

Right-click on any unused white area

Page 50: MWF 2:00 – 2:50 College Hall 205 WEB DESIGN JMA 318 | 574.

The PUB folder

Create new folder

Name it your course name

Page 51: MWF 2:00 – 2:50 College Hall 205 WEB DESIGN JMA 318 | 574.

Web URL

The URL to your website(s) depend on how you structured your home folder

Using earlier example

http://www.jma.duq.edu/users/gibbs/pub/JMA318/FileName.htm

Assuming your file name is default.htm, or index.htm in the jma318 folder the address would be:

http://www.jma.duq.edu/users/gibbs/pub/JMA318/index.htm

Page 52: MWF 2:00 – 2:50 College Hall 205 WEB DESIGN JMA 318 | 574.

For next time

Room 205 access Biographical sheet