All posts by admin

CE 2411 04: Intro to CSS 10/20/14

INTRO:
Prototypes: Review prototypes/interface

INTERFACE ON THE WEB:
The interface
Virtual Space is as old as art.
Stats for size
960 Grid
t960 upgrade
Stats for Browser

READING:
HTML is depends on file structure
HTML is depends on file paths
Examples,
Ch4 – Summary
Chapter 8
Meta basics – Here are EXAMPLES
Meta from Google
Meta today
Special Characters, Escape
Example
Ch8, Summary

INTRO TO CSS:
Tables – Review
CSS Intro
CSS parts
CSS Propertes
CSS Selector
The box
Pseudo class
Best examples

Assignment:
Review 4, 8
Read: Chapter 6, 10, 13
HTML:
1. Use Metatags (refresh and redirect)
2. Include declaration “Doctypes”
3. Try a table

CSS:
Create your own mini web site (at least 3 pages), using css to complete the following on each page:
1. place background image,
2. Use the “box model”
3. Use pseudo classes

INTERFACE:
Try a version.

MMDI 202 08: CSS and Box Models 10/20/14

INTRO:
Create your own mini web site (at least 3 pages), using css to complete the following on each page: Example
1. place background image,
2. Use the “box model”
3. Use pseudo classes

READING:
Best examples
CSS Rules
External CSS. Here is how
Class, ID and Grouping
CSS priorities
Tables – Review

Assignment:
Review 10, 13
Read: Chapter 3, review 13
CSS:
Convert your mini site – to an external CSS
Practice tables (create an image mounted in a table, create other table structures including ‘colspan’ and ‘rowspan’). Put text on top of your image/images in your table using the background image capability in HTML tables)

CE 2411 03: Links, Extra Markup/Template Design 10/13/14

INTRO:
Review HW: Talk about your Final (proposal emailed to me)
Review Site maps and wireframes.
Add more structural and semantic HTML to your pages (I will review. Email to me)

PROTOTYPING:
Examples
The interface

INTERFACE ON THE WEB:
Virtual Space is as old as art.
Design was limited by resolution
Stats for size
Used to be 960 Grid
t960 upgrade
Bigger and better?
Stats for Browser

Assignment:
Read: Chapter 4, 8
Revise IA and Wireframes based on feedback
Build out your Site prototype using your final wire frames.
Create Interface Design, Present next week as a JPG.
We will review in class next week.

MMDI 202 07: Links, Extra Markup

INTRO:
Review HW: Interface/Proto, etc
Add more structural and semantic HTML to your pages (I will review. Email to me)

READING:
HTML is depends on file structure
HTML is depends on file paths
Examples,
Ch4 – Summary
Chapter 8
Meta basics – Here are EXAMPLES
Meta from Google
Meta today
Special Characters, Escape
Example
Ch8, Summary

INTRO TO CSS:
CSS Intro
CSS parts
CSS Propertes
CSS Selector
The box
Pseudo class

Assignment:
Review 4, 8
Create HTML pages using all the new tags above. Pay close attention to anchors using the “id” attribute, iframes and the Meta tag functionality I introduced in class.
Read: Chapter 10, 13
CSS:
Create your own mini web site (at least 3 pages), using css to complete the following on each page: Example
1. place background image,
2. Use the “box model”
3. Use pseudo classes

CE 2411: 02 Process 10/06/14

INTRO:
Questions? Email me: jparada@uarts.edu
Review HW:
– Buy a domain name and Hosting account
– Create a Basic splash page with images, links, and headings.
– Select topic/project and begin research

If you want to turn your work in using DropBox, make sure you have an account and email me.
Review HW.

READING:
HTML is a hierarchy.
HTML provides structure
Attributes
Chapter 1 – Summary
Chapter 2, all the tags
Another example
Chapter 2 – Summary

PROCESS
What process? Why do we need it?
the bad, worse, just plain ugly
All kinds of “bad”

– Functional Specifications: Deliverable: 1-2 page proposal.
-Generating schematic wireframes for key interfaces and interactions: Deliverables: Site Inventory/Site Map,. Layout grids (Wire frames)
-Designing the visual interface: Deliverables: Template mock-ups in PSD or IA., Web based prototype

Assignment:
Review 1, 2
Read: Chapter 18 – Process and Design
Add more structural and semantic HTML to your pages.
Create Site Maps, wireframes
1-2 page proposal For Final Website. Discuss limitations and example sites (present next week)

MMDI 202 06: Links, Extra Markup/Into to CSS

INTRO:
Review HW: Interface/Proto, etc
Add more structural and semantic HTML to your pages (I will review. Email to me)

READING:
HTML is depends on file structure
HTML is depends on file paths
Examples,
Ch4 – Summary
Chapter 8
Meta basics – Here are EXAMPLES
Meta from Google
Meta today
Special Characters, Escape
Example
Ch8, Summary

INTRO TO CSS:
CSS Intro
CSS parts
CSS Propertes
CSS Selector
The box
Pseudo class

Assignment:
Review 4, 8
Read: Chapter 4, 8
Revise Wireframes prototype and Interface based on feedback
CSS:

CE 2411: 01 Introduction 09/29/14

Book: HTML and CSS: Design and Build Websites. John Wiley & Sons. 2011.

Software:
Editors – BBEdit, TextWrangler
FTP

Wireless Access:
Login ID: uaguest
password: Y14S09_uartS

History:
Early Computer.
he helped
So did Pascal, at around the same time
Computer creator
First Electrically driven
Breaking Jerry’s Code
Reprogram me
Why a network?
PCs put the “Personal” in computing
We need a better transfer method
How many?

Structure:
DNS – What is it?
IP Address

Intro to HTML:
W3

Assignment:
Read Chapter 1, Chapter 2
Buy a domain name and Hosting account
Create a Basic splash page with images, links, and headings.
Select topic/project and begin research

CE 2411: Syllabus

CE 2411:Web I – HTML + CSS
CE 2411 01 | Fall 2014
Continuing Education

Course Information
Location: Terra – Room 1113
Dates: MON, September 29 – 7:00-10:00 pm

Instructor Information
Name: Juan M. Parada
Email: jparada@uarts.edu
Email Policy: If you have any questions during the course of the class, please email me. I will do my best to respond to you within 24 hours on weekdays (Mon-Fri) and within 48 hours on weekends (Sat-Sun).

Juan M. Parada
Juan has over 15 years of web design and development experience and is a professor at the University of the Arts.

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.

Course Overview
This course engages students in the web creation process using the most universal tools in web development: HTML and CSS. This course covers all phases of website development: planning, Information Architecture, design, layout, construction, launch, troubleshooting and usability. The main focus is on translating designs into code using css for layout, navigation, and image control.

Students will make use of any number of HTML editors, however the focus of the course is on learning to code HTML and CSS directly.

The class web site is the official source for all dates and assignments:
http://www.322ides.com/?cat=6
The syllabus provides a general overview and guidelines for the course. The web site is a living, dynamic document.

Course Expectations
To complete this course students are required learn how to demonstrate proper use of HTML and CSS in the development of a multi-page website with working navigation, content, images, and a universal style sheet. Students will demonstrate an understanding of the cascade, cross browser functionality, search engine optimization techniques, image optimization, float and positioning-based layouts, and basic troubleshooting techniques. Students will also learn how to get their creations on the actual web through hosting services and domain management.

In order to facilitate an understanding of the course’s aims, students are required to complete research, present wireframes, designs, and working models for each project, revisions based on class feedback and to present finished projects in front of the class.

Students are required to complete a series of homework assignments and a final project.

Students are expected to contribute to class discussions and to be a reflective student through accepting and giving constructive feedback to yourself, your peers, and your instructor.

Prerequisites — Classes or Knowledge Required for this Course
The prerequisites for this course are CE 002C – Designing Effective Web Pages and CE 9506C Foundations of Web Design.
Students should also have familiarity navigating a computer’s file structure, zipping and unzipping files, and a general level of comfort using a computer and typing.

Course Objectives
At the end of this course, students will be able to:
• Identify and use basic HTML tag elements and attributes
• Identify CSS and use CSS selectors to style HTML
• Create complex layouts using CSS with an understanding of static and fluid layouts as well as floats and positioning
• Differentiate between absolute and relative URLs and identify appropriate use cases for both
• Revise a web page based on user feedback
• Implement various design elements using best practices and limiting the number and size of images
• Create user-friendly navigation and architecture that provides quick access to varied content
• Optimize websites for mobile devices
• Website hosting and Domain registration: how to make this work for you

COURSE RESOURCES
Software
Course will be conducted using any number of editors for code development. Students may use code editing program on their machines such as Blue Griffon (a free WYSIWYG program) or a simple text editor such as BBEdit, TextWrangler, TextMate, or TacoHTML which are free to try and less than $60 to purchase.

Textbook
Required texts for this course are:
• HTML and CSS: Design and Build Websites. John Wiley & Sons. 2011.
ISBN-10: 1118008189
ISBN-13: 978-1118008188

Students will also be asked to read selections from pertinent web sources.

Online Resources
Students will be given access to an online repository for course materials.

Additional Course Materials | Supplies
Students are encouraged to purchase a USB drive with a minimum memory capacity of 2GB and come prepared with it to each class session. In lieu of a USB drive, students may also create a DropBox account, if they do not already have one. This will allow them to easily transfer course materials to and from the classroom.

COURSE ACTIVITIES
Readings
One to two chapters from the textbook and one or two additional readings will be assigned each week.

Presentations
Most weeks there will be an instructor presentation related to the readings. Students are expected to complete all readings after the weekly in-class presentation. The presentation will be focused on the introduction of topics and the reading materials will expand upon what is discussed in class.

Homework:
Students will be required to complete all Homework. Homework will consist of performance-based exercised based on the readings + presentations.

Assignments
There will be weekly assignments for this course. Assignments will be presented in class. Students will be given any assignment-specific files.

COURSE POLICIES
Student Feedback/Communication
I welcome all feedback on the course. My preferred method of communication with individual students is via email. Students are offered the opportunity to complete an official mid-semester evaluation of the course. This evaluation is traditionally delivered + completed electronically at the beginning of the fourth class session.
If you experience a legitimate emergency that will prevent you from completing required coursework on time, I expect you to communicate with me at the earliest reasonable opportunity. Please state the nature of the emergency and when you expect to turn in the coursework.

Submitting Electronic Files
All electronic files must be submitted in a zip file unless otherwise stated by the instructor. The instructor will give specific details for submitting homework assignments during the first week of class.

Attendance
Attendance is mandatory and essential to your performance. The information needed to complete assignments properly will be given in class. As a student in this course, it is your responsibility to make certain you obtain information covered should you miss a class session. Previously absent students must come to the following class with all of the appropriate work due for that day. All students are expected to arrive to class on time and remain present for the duration of the class. Be aware that tardiness and early dismissals will accumulate in absences.
2 absences = lowered grade
2 late arrivals / early dismissals = 1 absence
30 minutes late arrival/early dismissal = 1 absence

Evaluation and Grading
Individual Final Project 50%
Homework Assignments 50%
100%

UNIVERSITY POLICIES
Academic Honesty Policy | Code of Conduct
Violations of academic integrity are considered to be acts of academic dishonesty and include (but are not limited to) cheating, plagiarizing, fabrication, denying others access to information or material, and facilitating academic dishonesty, and are subject to disciplinary action.
(Please visit
http://cs.uarts.edu/ce/policies#academichonesty/integritypolicy to review this policy in its entirety).

ACT 48 Activity Hours
To have ACT 48 Activity Hours for this course reported to the Pennsylvania Department of Education (PDE) you must complete and return the CE Request for Activity Hours Submission Form to the UArts Continuing Studies Office and meet all requirements outlined by the PDE.

GRADING
Student Code of Conduct
It is the policy of the Division of Continuing Studies to provide a safe and healthy environment for learning, personal growth and enjoyment. The well being of this community depends upon the good judgment and considerate behavior of its members. Student status at The University of the Arts is not an unconditional right, but a privilege subject to certain rules and expectations articulated in the Student
Code of Conduct. To review the Student Code of Conduct in its entirety, please visit:
http://cs.uarts.edu/uploads/media_items/student-code-of-conduct.original.pdf

Your grade will be based on the following:
Component Points
Homework 50%
Final Project 50%
Total 100%
Your grade will be calculated using the following scale:
Grade Percentage Range Grade Point
A 100 – 93% 4.0
A- 92 – 90% 3.67
B+ 89 – 87% 3.33
B 86 – 83% 3.0
B- 82 – 80% 2.67
C+ 79 – 77% 2.33
C 76 – 73% 2.0
C- 72 – 70% 1.67
D+ 67 – 69% 1.33
D 63 – 66% 1.0
F 59% or less 0.0
I Incomplete –
P Pass –

SCHEDULE/SESSION TOPIC COURSEWORK
01. Introduction to the course and introduction to HTML.
02. Planning a site:
03. Links, Extra Mark-up. CSS Introduction:
04. CSS and Boxes
05. Lists
06. Tables and Layout
07. Images
08. HTML5
09. SEO and final preparations
10. Present Final Projects

MMDI 202 05: 02/25/14: Interface Design

Review Homework:
– Review Prototypes

Inventory: you have UX maps, site map, Wireframes, and
PROTOTYPE:
Simple examples (wireframes + sitemap)
Wireframes + HTML
Software Development Prototypes

Read the following articles
Visual Narrative
Layout
Design Method
960 grid

Web Design Studio 05:
Modify Prototypes based on feedback.
Start designing your templates based on the wireframes (create at least a home page and Second level)
We will critique as a group next week