Category Archives: WDS

WDS 06: MORE CSS 02/24/17

REVIEW:
HTML/CSS:
Complete Code review for 11 and 13
– Create at least 3 HTML pages, using CSS to complete the following on each page:
— 1. place background image,
— 2. Use the “box model”
— 3. Use pseudo classes
PROCESS AND DESIGN:
Create a detailed site prototype from your wireframes

READING:
Chapter 10
External CSS. Here is how

Class, ID and Grouping Book, pg. 238.
Cascading – Book, pg. 239.
CSS priorities

Ch. 11
Color names
Opacity
Opacity – roll over using JavaScript:
Try it using the CSS – hover property

Ch. 13
Make sure you are familiar with this.

PROCESS:
By this point, you should have:
1. Requirements
2. Usability (user scenarios, usability maps)
3. Competitive Analysis
4. Site Map
5. Wire Frames
6. Prototype

Next step: Interface Design. Create your design for Home page and a second level page.
This is the end point after a complete cycle (UI-wireframes-design).

Studio 06: CSS Review
HTML/CSS:
Read: Chapter 15, and 16.
Complete Code review for 15, and 16
– Try External CSS
– Try CSS opacity hover
PROCESS: Interface design. Home page + second level (key pages)

WDS 05: CSS INTRO 02/17/17

Intro
Code review for 10
HTML/CSS: Use the META tag to refresh and redirect
Process and Design:
– Modify Usability and site maps based on feedback.
– Create Detailed Wire frames and annotated versions
– HTML prototype from your wireframes. NEXT CLASS.

REVIEW:
Ch. 10.
INTRO TO CSS:
CSS in Action!
CSS Intro
CSS parts
CSS Propertes
CSS Selector
The box
Pseudo class

PROCESS AND DESIGN:
Sources to Review:
You need a strategy
AWD – What is it?
AWD vs RWD
Modern Web Design
Your Wire frames and prototypes must include consideration of mobile platforms.
Prototyping tools

Studio 05: Prototype – CSS:
PROCESS AND DESIGN:
Create a detailed site prototype from your wireframes

HTML/CSS:
Read: Chapter 11 and 13.
Complete Code review for 11 and 13
– Create at least 3 HTML pages, using CSS to complete the following on each page:
— 1. place background image,
— 2. Use the “box model”
— 3. Use pseudo classes

WDS 04: PROCESS 2 + TABLES 02/10/17

INTRO:
Web Development Process and UIX
Complete Code review for 7 and 8
Start UIX and Documentation:
– Start thinking about the site you want to build. Draft requirements.
– Who is the audience? Determine the target demographic and create preliminary user scenarios and usability maps
– Create a Site Map for the site. Start with content inventory. Think through Mobile options for your final development
– Try creating a table in Photoshop like the Demo in class

REVIEW:
7. Forms – Practice formatting.
Adding PHP and functionality.
Example
Download the code

8. Extra Markup
Review types of HTML
ID and Class, Declaration or “Doctypes”
Comments are useful.
Be very clear on Block and Inline elements
iframes are everywhere.
Meta basics – Here are EXAMPLES
Meta from Google
Meta today
Special Characters, Escape
Ch8, Summary

PROCESS + PROTOTYPING
REQUIREMENTS:
– Who is the site for, Why would people Visit this site, What are your visitors trying to achieve? What information do your visitors need?
DELIVERABLE: Requirements, Target Audience, Research/sketches

USABILITY (UIX):
DELIVERABLE: User Scenarios, Usability maps, Competitive Analysis

SITE STRUCTURE
-Generating schematic wireframes for key interfaces and interactions:
Site map
User experience/wireframes
Wireframes
Deliverables: Site Inventory/Site Map,. Layout grids (Wire frames and HTML Prototype

Resources:
Sketches
Sketches 2
Digital
With annotations
With Annotations 2

PROTOTYPING:
Examples
Another example
Deliverable: HTML Prototype

Resources:
Prototyping tools

DESIGN:
-Designing the visual interface:
Template mock-ups in PSD or IA.
Deliverables: Interface in JPG

OUTSTANDING ISSUES:
– Think ahead. What do you think will be challenges to development? Keep a list trhough project life cycle

DEVELOPMENT:
-Technical Production: Deliverables: Alpha Site
-QA: Testing. Deliverables: Bug List, Beta Site
-Launch: Deliverables: Final Site

TODAY:
-Generating schematic wireframes for key interfaces and interactions:
Deliverables: Site Inventory/Site Map,
Layout grids – Wire Frames.
Wire frames should be worked up to scale.
Virtual Space is as old as art.
Stats for size
Think of a grid
Stats for Browsers
Don’t forget the “Mobile” Experience
Mobile sizes are helpful.
You need a strategy

Studio 04: Web Development Process- Wire Framing and Prototype
Sources to Review:
Start reviewing Grid Systems

Read: 10.
Complete Code review for 10

HTML/CSS: Use the META tag to refresh and redirect

Process and Design:
– Modify Usability and site maps based on feedback.
– Create Detailed Wire frames and annotated versions
– HTML prototype from your wireframes. NEXT CLASS.
We will review in class

wds 03: Process + HTML 02/03/17

INTRO:
Read: Chapter 18 – Process and Design, 4, 5, and 6.
HTML: Try out all the code samples: 4, and 5 and 6.
Based on Ch 18, start thinking about the kind of site you want to develop (Requirements). Answer questions on page 455.

Review Hosting and FRP

REVIEW:
HTML link attributes
E-mail link magic
HTML is depends on file structure pg. 9
HTML is depends on file paths pg. 11
Path demo. Should end up at this LINK
Ch4 – Examples,
Ch5 – Questions on images?
Tables: Basic
Tables: Colspan, Rowspan
Table: Photoshop Demo
Tables: background attribute

PROCESS + PROTOTYPING
REQUIREMENTS:
– Who is the site for, Why would people Visit this site, What are your visitors trying to achieve? What information do your visitors need?
DELIVERABLE: Requirements, Target Audience, Research/sketches

USABILITY (UIX):
– Anticipating end-user scenarios: Example, Example 2 and a quick Usability Map
– Modeling the user experience: Design Document: Audience Scenarios, and Competitive Analysis.
DELIVERABLE: User Scenarios, Usability maps, Competitive Analysis

Resources:
UX diagram examples
Read This
UPA
Experience Maps

SITE STRUCTURE
-Generating schematic wireframes for key interfaces and interactions:
Site map
User experience/wireframes
Wireframes
Deliverables: Site Inventory/Site Map,. Layout grids (Wire frames and HTML Prototype

Resources:
Sketches
Sketches 2
Digital
With annotations
With Annotations 2

PROTOTYPING:
Examples
Another example
Deliverable: HTML Prototype

Resources:
Prototyping tools

DESIGN:
-Designing the visual interface:
Template mock-ups in PSD or IA.
Deliverables: Interface in JPG

OUTSTANDING ISSUES:
– Think ahead. What do you think will be challenges to development? Keep a list trhough project life cycle
MIDTERM

DEVELOPMENT:
-Technical Production: Deliverables: Alpha Site
-QA: Testing. Deliverables: Bug List, Beta Site
-Launch: Deliverables: Final Site

Studio 03: Web Development Process and UIX
Read: Chapter 7 and 8.
Complete Code review for 7 and 8

Studio 03
Start UIX and Documentation:
– Start thinking about the site you want to build. Draft requirements.
– Who is the audience? Determine the target demographic and create preliminary user scenarios and usability maps
– Create a Site Map for the site. Start with content inventory. Think through Mobile options for your final development
– Try creating a table in Photoshop like the Demo in class

WDS 02: HTML + Intro Process 01/27/17

INTRO:
Review Studio Assignment –
Get Domain name and hosting.
Code Work: Review 1, 2 – Practice (create several HTML files)
Create a splash page for your web site (use anything you want) with an image and a link. Example?

READING REVIEW:
HTML is a hierarchy.
Attributes
HTML Summary
All the tags
HTML Summary 2
Good resource
Looking Ahead:
Links
Images
Tables

INTRO TO PROCESS:
What process? Why do we need it?
The bad.
What?, just plain ugly
Still pretty bad
Wow!
Oh,Boy.
Oh my.
Are you kidding??
All kinds of “bad”

Studio 02: HTML and Process
Read: Chapter 18 – Process and Design, 4, 5, and 6.
HTML: Try out all the code samples: 4, and 5 and 6. I want to see tables in particular.
Based on Ch 18, start thinking about the kind of site you want to develop (Requirements). Answer questions on page 455.

DAAT 222.01: Web Design Studio (WDS) SP17

Credits 3.00 credits
Instructor Juan M. Parada
Class Meetings Friday 01:00 – 6:50PM

Semester/Year Spring 2016

Course Description
Increasingly, the Web is becoming the de facto medium for communicating and networking with
others, sharing and accessing information and knowledge, doing business, and engaging the
world. This studio course focuses on the creation of web sites through the concepts and practical application of interactivity. Comprised of readings and group discussions, short assignments, and long-term projects, individual creativity and iterative design are stressed as well as the understanding and use of the Web as an interactive platform in the communication of ideas. Both collaborative and individual exercises will be assigned.

Web Design Studio will equip students with the skills to quickly create a web-presence. They will learn to leverage existing technologies, services, and frameworks to get the most from today’s maturing Internet. By balancing online existing services and learning the basics to hand-code a website, students will gain a broad understanding of the language of the Internet, Web Design and the Dynamic Web. Students will apply the knowledge they gain by creating a personal website, then adapting their site to suit a mobile audience.

Faculty Office Hours
By appointment only

Contact Instructor
Office: Terra 1211A
Phone: 215-717-6369
Email: jparada@uarts.edu
Website: http://www.322ides.com

Course Objectives:
• Set up a local web development environment
• Understand contemporary web standards, accessibility guidelines, and semantic web development using CSS and HTML5.
• Develop a knowledge of available web services/APIs and content management systems, be able to leverage their use for web projects (WordPress)
• Practice an iterative design methodology alongside project management techniques (both individually and through group work).
• Design and build a functional website and deploy it to the Internet
• Understand mobile web browsing and adapt your website to work with mobile devices
• Introduction to JavaScript

Teaching/Learning Methods
• More narrowly focused assignments, exercises, and presentations will be given in order to
sharpen studentsʼ skills in project management, interface design, user experience design,
information design, HTML/CSS programming, and CMS usage.
• The Studio section of the class will provide students with the opportunity to put the lectures into practice and thus is extremely important.
• Your Own Custom Blog
You will deploy and customize your own WordPress blog. Here, you will eventually post all your assignments, notes, questions, etc. At the end of the semester, I must be able to find all your work here.
• Final Project
Students build a personal website (blog, portfolio, business, etc.) that demonstrates
understanding of all concepts covered over the first half of the semester.
• Mobilize Personal Website
Students will develop a mobile version of a website. They will learn the current best practices, creating a site that degrades gracefully to work on the widest range of mobile handsets.
• Final Documentation
All web-based projects completed during this course are required to be hosted and live at
students’ web domains. Additionally, students will maintain a class wiki containing all of your
work from the course: research, inspiration, process diagrams, schematics, design iterations, screenshots, code snippets, and more. Specific requirements will be given at a later date. Additionally, all project files must be submitted along with the final project.

Required Supplies and Software
• Laptop
• HTML Text Editor – Mac: skEdit, BBEdit, Coda, TextMate
• FTP App Mac: Transmit, Fetch
• Students must acquire their own web hosting account and domain for posting their projects.
Hosting accounts must have PHP and MySQL enabled. Students may choose to share hosting accounts as most allow for hosting multiple domains under a single account.

Attendance and Lateness Policies:
• Unexcused absences will affect your grade. Attendance will be taken at the beginning of
every class. Since there is so much technical, conceptual, and design information to
absorb, regular attendance is essential. Contact me in advance if you will not be
in class (in person or by email is preferred and not AFTER the fact).
• One absence is allowed; after that, your grade will drop. This is a weekly, six hour production class. Be on time.

Professionalism and Behavior:
The classroom will be a safe, respectful environment for everyone. The expectation is that you will be quiet unless called upon to speak. If you are late or leave early you will enter/exit the classroom in the least distracting manner possible and not burden the professor, or other students, with the task of getting you caught up while the class is otherwise engaged in lecture and discussions. You are responsible to find out what you missed at an appropriate time, either during open lab or outside of class. The use of electronic devices with not be permitted during demos and class discussions, but may be used quietly during open lab times. There is NO tolerance for violence, cruelty and vandalism.

Academic Integrity Standards
You are responsible for reading, understanding and abiding by The University of the Arts Student Handbook. Academic dishonesty of any type, including cheating and plagiarism is unacceptable. “Cheating” is misrepresenting another student’s efforts/work as your own. “Plagiarism” is the representation of another person’s work, words or concepts as your own.

Educational Accessibility
Students who believe they are eligible for course accommodations under the ADA or Section 504 or have had accommodations or modifications in the past, should contact the Office of Educational Accessibility at 215.717.6616 to arrange for appropriate accommodations and to obtain an accommodations letter, if applicable. Faculty can provide course accommodations/modifications only after receipt of an approved accommodations letter from the office of Educational Accessibility. Accommodation letters can be provided to qualified students at any time during the semester, but grades earned before the letter is received by the faculty cannot be changed.

Grading –
• Short-term Assignments – Studio work (HW) = 10%
• Mid Term = 30%
• WordPress setup and customization = 20%
• Final Project (Mobile Website, Final Documentation) = 40%

Grading Assessment Criteria
• All work assigned will be completed and delivered on the due date, otherwise you will
receive a failing grade for that assignment. In other words, late work will not be
accepted. All work must be turned in at the beginning of class or it will be considered late.
• Makeup assignments are only available when discussed with and approved by the
instructor in advance of the due date.
• Each student will be judged on the application of the ideas and concepts introduced during
the course. Incomplete or unsatisfactory work will receive a failing grade.
Your final grade will be based upon a combination of qualitative and quantitative evaluation of
your performance:

Class Schedule – Subject to Change

WDS 12: Work on Final Deliverables – 11/18/16

INTRO:
Assignment:
– Make sure WordPress is installed and working on your server
– Explore WP. Change the theme, customize, post, play
– Have you started organizing your Final Project?

FINAL DELIVERABLES:
A. The Development Process Documents (This was your mid term. Make sure process reflects the finished final project):

B. Homework Assignments.

Studio 01:
Create a splash page for your web site (use anything you want) with an image and a link. Example?

Studio 02: HTML and Process
HTML: Try out all the code samples: 4, and 5 and 6.

Studio 03:
Read: Chapter 7 and 8.
Complete Code review for 7 and 8

Studio 04:
Mount an image in a table. Put text in certain table cells.

Studio 05:
– Try Meta tag, refresh and redirect
– Create at least 3 HTML pages, using CSS to complete the following on each page:
– 1. place background image,
– 2. Use the “box model”
– 3. Use pseudo classes

Studio 06:
– Try :first child selector
– Try External CSS
– Try CSS opacity hover

Studio 07:
Make sure you understand “Float” and “Clear”.
Review this EXAMPLE. Copy and customize! (Show next Week)

Studio 08:
– Create a 2 Column layout using HTML/CSS
– Create a 3 Column layout using HTML/CSS
– Try a JS Drop down menu
– Try CSS Drop down
– Try Media query (color change)

Studio 09:
– Import and display fonts
– Try an image Roll-over (javascript or CSS)
– HTML5 Code (make sure you have tried it)
– Try a Favicon
– RWD tutorial

Studio 10:
JS redirect – Provide a link

C. WordPress

D. Final Site (URL)

E. Screen Shots of you Final Homepage (minimum)

STUDIO 12: Final

WDS 11: WordPress, Tips & Tricks 2 – 11/11/16

INTRO:
Try the JS redirect. Show next week. Example (try in mobile)
Read Chapter 19

READING:
– Some helpful SEO resources
– More on Google Analytics

To Swipe?
– WordPress does it for you
– More mobile me
jquery picks
ready to slide?
– How about forms? Examples

WORDPRESS:
– Install! First, need to get it
– A “how to”
WP customize
– More WP custom
– WP theme mods
– WP theme customization
– More WP tips

Studio 11: WordPress
Sources to Review:
– Intro to frameworks
Fluid Template
Responsive Designs

Assignment:
– Make sure WordPress is installed and working on your server (Follow instructions above)
– Explore WP. Change the theme, customize, post, play
– Have you started organizing your Final Project?

WDS 10: TIPS & TRICKS 11/04/16

INTRO:
– Import and display fonts (Show)
– Try an image Roll-over (javascript or CSS) (Show)
– HTML5 Code (make sure you have tried it) (Show)
– Try a Favicon (Show)
– RWD tutorial
Start Working on your Final – Planning

NEW:
JS Redirect:
– Sub-domain. How does it look?
How to redirect? My Page. Code. Screen Shot on iPhone

FINAL DELIVERABLES:
A. The Development Process Documents (This was your mid term. Make sure process reflects the finished final project):

B. Homework Assignments.

Studio 01:
Create a splash page for your web site (use anything you want) with an image and a link. Example?

Studio 02: HTML and Process
HTML: Try out all the code samples: 4, and 5 and 6.

Studio 03:
Read: Chapter 7 and 8.
Complete Code review for 7 and 8

Studio 04:
Mount an image in a table. Put text in certain table cells.

Studio 05:
– Try Meta tag, refresh and redirect
– Create at least 3 HTML pages, using CSS to complete the following on each page:
– 1. place background image,
– 2. Use the “box model”
– 3. Use pseudo classes

Studio 06:
– Try :first child selector
– Try External CSS
– Try CSS opacity hover

Studio 07:
Make sure you understand “Float” and “Clear”.
Review this EXAMPLE. Copy and customize! (Show next Week)

Studio 08:
– Create a 2 Column layout using HTML/CSS
– Create a 3 Column layout using HTML/CSS
– Try a JS Drop down menu
– Try CSS Drop down
– Try Media query (color change)

Studio 09:
– Import and display fonts
– Try an image Roll-over (javascript or CSS)
– HTML5 Code (make sure you have tried it)
– Try a Favicon
– RWD tutorial

Studio 10:
Try the JS redirect

C. Final Site (URL)

Studio 10:
Sources to Review:
More on the Hover
Advanced Hover effects
Zen Garden

HTML/CSS
Try the JS redirect. Show next week.
Read Chapter 19

WDS 09: CSS Advanced – 10/28/16

INTRO:
Present your Midterm. Turn them in.

READING:
Chapter 12
– Can also import fonts
Can also use Google Fonts
Some Examples

From Chapter 16, rollovers.
JS tried and true.
Better but tricky
Something easier…
What’sdisplay block”?

Ch. 17
The old
The new
How it works
Older Browser?

FAVICON:
FAViSize
Flavor FAVicon
Favicon generator

RWD:
More Media Rules

Studio 09: CSS/HTML
Read: Chapter 9
Complete Code review for 9
In Class:
– Import and display fonts
– Try an image Roll-over (javascript or CSS)
– HTML5 Code (make sure you have tried it)
– Try a Favicon
– RWD tutorial
Start Working on your Final – Planning