MWF 2:00 – 2:50 College Hall 205 WEB DESIGN JMA 318 | 574.
-
Upload
alexandra-simpson -
Category
Documents
-
view
215 -
download
1
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.](https://reader038.fdocuments.in/reader038/viewer/2022103100/56649e885503460f94b8cbe9/html5/thumbnails/1.jpg)
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.](https://reader038.fdocuments.in/reader038/viewer/2022103100/56649e885503460f94b8cbe9/html5/thumbnails/2.jpg)
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.](https://reader038.fdocuments.in/reader038/viewer/2022103100/56649e885503460f94b8cbe9/html5/thumbnails/3.jpg)
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.](https://reader038.fdocuments.in/reader038/viewer/2022103100/56649e885503460f94b8cbe9/html5/thumbnails/4.jpg)
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.](https://reader038.fdocuments.in/reader038/viewer/2022103100/56649e885503460f94b8cbe9/html5/thumbnails/5.jpg)
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.](https://reader038.fdocuments.in/reader038/viewer/2022103100/56649e885503460f94b8cbe9/html5/thumbnails/6.jpg)
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.](https://reader038.fdocuments.in/reader038/viewer/2022103100/56649e885503460f94b8cbe9/html5/thumbnails/7.jpg)
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.](https://reader038.fdocuments.in/reader038/viewer/2022103100/56649e885503460f94b8cbe9/html5/thumbnails/8.jpg)
Web Design - Textbook
Transcending CSS
Andy Clarke
Not required
![Page 9: MWF 2:00 – 2:50 College Hall 205 WEB DESIGN JMA 318 | 574.](https://reader038.fdocuments.in/reader038/viewer/2022103100/56649e885503460f94b8cbe9/html5/thumbnails/9.jpg)
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.](https://reader038.fdocuments.in/reader038/viewer/2022103100/56649e885503460f94b8cbe9/html5/thumbnails/10.jpg)
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.](https://reader038.fdocuments.in/reader038/viewer/2022103100/56649e885503460f94b8cbe9/html5/thumbnails/11.jpg)
Assignments
Points assigned to each project
![Page 12: MWF 2:00 – 2:50 College Hall 205 WEB DESIGN JMA 318 | 574.](https://reader038.fdocuments.in/reader038/viewer/2022103100/56649e885503460f94b8cbe9/html5/thumbnails/12.jpg)
Examine a variety of designs,
functional … aesthetic
![Page 13: MWF 2:00 – 2:50 College Hall 205 WEB DESIGN JMA 318 | 574.](https://reader038.fdocuments.in/reader038/viewer/2022103100/56649e885503460f94b8cbe9/html5/thumbnails/13.jpg)
![Page 14: MWF 2:00 – 2:50 College Hall 205 WEB DESIGN JMA 318 | 574.](https://reader038.fdocuments.in/reader038/viewer/2022103100/56649e885503460f94b8cbe9/html5/thumbnails/14.jpg)
![Page 15: MWF 2:00 – 2:50 College Hall 205 WEB DESIGN JMA 318 | 574.](https://reader038.fdocuments.in/reader038/viewer/2022103100/56649e885503460f94b8cbe9/html5/thumbnails/15.jpg)
![Page 16: MWF 2:00 – 2:50 College Hall 205 WEB DESIGN JMA 318 | 574.](https://reader038.fdocuments.in/reader038/viewer/2022103100/56649e885503460f94b8cbe9/html5/thumbnails/16.jpg)
![Page 17: MWF 2:00 – 2:50 College Hall 205 WEB DESIGN JMA 318 | 574.](https://reader038.fdocuments.in/reader038/viewer/2022103100/56649e885503460f94b8cbe9/html5/thumbnails/17.jpg)
![Page 18: MWF 2:00 – 2:50 College Hall 205 WEB DESIGN JMA 318 | 574.](https://reader038.fdocuments.in/reader038/viewer/2022103100/56649e885503460f94b8cbe9/html5/thumbnails/18.jpg)
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.](https://reader038.fdocuments.in/reader038/viewer/2022103100/56649e885503460f94b8cbe9/html5/thumbnails/19.jpg)
![Page 20: MWF 2:00 – 2:50 College Hall 205 WEB DESIGN JMA 318 | 574.](https://reader038.fdocuments.in/reader038/viewer/2022103100/56649e885503460f94b8cbe9/html5/thumbnails/20.jpg)
![Page 21: MWF 2:00 – 2:50 College Hall 205 WEB DESIGN JMA 318 | 574.](https://reader038.fdocuments.in/reader038/viewer/2022103100/56649e885503460f94b8cbe9/html5/thumbnails/21.jpg)
![Page 22: MWF 2:00 – 2:50 College Hall 205 WEB DESIGN JMA 318 | 574.](https://reader038.fdocuments.in/reader038/viewer/2022103100/56649e885503460f94b8cbe9/html5/thumbnails/22.jpg)
![Page 23: MWF 2:00 – 2:50 College Hall 205 WEB DESIGN JMA 318 | 574.](https://reader038.fdocuments.in/reader038/viewer/2022103100/56649e885503460f94b8cbe9/html5/thumbnails/23.jpg)
![Page 24: MWF 2:00 – 2:50 College Hall 205 WEB DESIGN JMA 318 | 574.](https://reader038.fdocuments.in/reader038/viewer/2022103100/56649e885503460f94b8cbe9/html5/thumbnails/24.jpg)
![Page 25: MWF 2:00 – 2:50 College Hall 205 WEB DESIGN JMA 318 | 574.](https://reader038.fdocuments.in/reader038/viewer/2022103100/56649e885503460f94b8cbe9/html5/thumbnails/25.jpg)
![Page 26: MWF 2:00 – 2:50 College Hall 205 WEB DESIGN JMA 318 | 574.](https://reader038.fdocuments.in/reader038/viewer/2022103100/56649e885503460f94b8cbe9/html5/thumbnails/26.jpg)
![Page 27: MWF 2:00 – 2:50 College Hall 205 WEB DESIGN JMA 318 | 574.](https://reader038.fdocuments.in/reader038/viewer/2022103100/56649e885503460f94b8cbe9/html5/thumbnails/27.jpg)
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.](https://reader038.fdocuments.in/reader038/viewer/2022103100/56649e885503460f94b8cbe9/html5/thumbnails/28.jpg)
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.](https://reader038.fdocuments.in/reader038/viewer/2022103100/56649e885503460f94b8cbe9/html5/thumbnails/29.jpg)
Class Web Site
http://www.jma.duq.edu/classes/gibbs/JMA318/
![Page 31: MWF 2:00 – 2:50 College Hall 205 WEB DESIGN JMA 318 | 574.](https://reader038.fdocuments.in/reader038/viewer/2022103100/56649e885503460f94b8cbe9/html5/thumbnails/31.jpg)
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.](https://reader038.fdocuments.in/reader038/viewer/2022103100/56649e885503460f94b8cbe9/html5/thumbnails/32.jpg)
Applications
MS Office:
• Word
• Visio
![Page 33: MWF 2:00 – 2:50 College Hall 205 WEB DESIGN JMA 318 | 574.](https://reader038.fdocuments.in/reader038/viewer/2022103100/56649e885503460f94b8cbe9/html5/thumbnails/33.jpg)
Applications
Adobe Illustrator
![Page 34: MWF 2:00 – 2:50 College Hall 205 WEB DESIGN JMA 318 | 574.](https://reader038.fdocuments.in/reader038/viewer/2022103100/56649e885503460f94b8cbe9/html5/thumbnails/34.jpg)
Applications
Adobe Photoshop
![Page 35: MWF 2:00 – 2:50 College Hall 205 WEB DESIGN JMA 318 | 574.](https://reader038.fdocuments.in/reader038/viewer/2022103100/56649e885503460f94b8cbe9/html5/thumbnails/35.jpg)
Applications
Dreamweaver
![Page 36: MWF 2:00 – 2:50 College Hall 205 WEB DESIGN JMA 318 | 574.](https://reader038.fdocuments.in/reader038/viewer/2022103100/56649e885503460f94b8cbe9/html5/thumbnails/36.jpg)
Applications
<html></html>
.CSS
Web development
![Page 37: MWF 2:00 – 2:50 College Hall 205 WEB DESIGN JMA 318 | 574.](https://reader038.fdocuments.in/reader038/viewer/2022103100/56649e885503460f94b8cbe9/html5/thumbnails/37.jpg)
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.](https://reader038.fdocuments.in/reader038/viewer/2022103100/56649e885503460f94b8cbe9/html5/thumbnails/38.jpg)
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.](https://reader038.fdocuments.in/reader038/viewer/2022103100/56649e885503460f94b8cbe9/html5/thumbnails/39.jpg)
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.](https://reader038.fdocuments.in/reader038/viewer/2022103100/56649e885503460f94b8cbe9/html5/thumbnails/40.jpg)
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.](https://reader038.fdocuments.in/reader038/viewer/2022103100/56649e885503460f94b8cbe9/html5/thumbnails/41.jpg)
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.](https://reader038.fdocuments.in/reader038/viewer/2022103100/56649e885503460f94b8cbe9/html5/thumbnails/42.jpg)
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.](https://reader038.fdocuments.in/reader038/viewer/2022103100/56649e885503460f94b8cbe9/html5/thumbnails/43.jpg)
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.](https://reader038.fdocuments.in/reader038/viewer/2022103100/56649e885503460f94b8cbe9/html5/thumbnails/44.jpg)
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.](https://reader038.fdocuments.in/reader038/viewer/2022103100/56649e885503460f94b8cbe9/html5/thumbnails/45.jpg)
The PUB folder
USER FOLDER
![Page 46: MWF 2:00 – 2:50 College Hall 205 WEB DESIGN JMA 318 | 574.](https://reader038.fdocuments.in/reader038/viewer/2022103100/56649e885503460f94b8cbe9/html5/thumbnails/46.jpg)
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.](https://reader038.fdocuments.in/reader038/viewer/2022103100/56649e885503460f94b8cbe9/html5/thumbnails/47.jpg)
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.](https://reader038.fdocuments.in/reader038/viewer/2022103100/56649e885503460f94b8cbe9/html5/thumbnails/48.jpg)
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.](https://reader038.fdocuments.in/reader038/viewer/2022103100/56649e885503460f94b8cbe9/html5/thumbnails/49.jpg)
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.](https://reader038.fdocuments.in/reader038/viewer/2022103100/56649e885503460f94b8cbe9/html5/thumbnails/50.jpg)
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.](https://reader038.fdocuments.in/reader038/viewer/2022103100/56649e885503460f94b8cbe9/html5/thumbnails/51.jpg)
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.](https://reader038.fdocuments.in/reader038/viewer/2022103100/56649e885503460f94b8cbe9/html5/thumbnails/52.jpg)
For next time
Room 205 access Biographical sheet