All posts by admin

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

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.

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

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.

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

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

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

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

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:

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 –

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
Simple examples (wireframes + sitemap)
Wireframes + HTML
Software Development Prototypes

Read the following articles
Visual Narrative
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

MMDI 202 04: WDS UX and Wireframes

User Experience Maps. Homepage mapping.

User experience/wireframes
UX diagram examples
Sketches 2
With annotations
With Annotations 2

Sources to Review:
From smashingmagazine
Free wireframing tools

Studio 04: UX and Wire Frames
1. Read the following articles
Beyond Wireframes
UX case study
The Importance of the Wireframe
Wireframe your site
2. Create wireframes for several pages of your website (home+ top level + second level). Start with sketches. Post to your server.
3. Create an HTML prototype with your wireframes

MMDI 202 03: WDS Process & Design

Sources to Review:
Read This
Experience Maps
Wireframes Mag
UX for gamers
Dummy text with a twist

The Development Process:
– Who is the site for, Why would people Visit this site, What are your vistors trying to achieve? What information do your visitors need?
– Research/sketches : – DELIVERABLE: Requirements Doc
– Anticipating end-user scenarios: Example, Example2
– Modeling the user experience: Deliverable: Design Document: Audience Scenarios, and Competitive Analysis. Many examples to consider and all are different.
-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
-Invite feedback/user testing: Deliverable: Feedback
-Technical Production: Deliverables: Alpha Site
-QA: Testing. Deliverables: Bug List, Beta Site
-Launch: Deliverables: Final Site

Studio 03: Web Development Process and UIX
Review work from last class
Read Articles above. We are focusing on Usability and Usability Mapping today.
Practice 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.
– Create User experience maps for your site
– Create a Site Map for the site. Start with content inventory.
Upload to your site and send me the URL.

MMDI 202 02: WDS HTML Basics – 09/08/14

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

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

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

Studio 02: HTML
Review 1, 2
Read: Chapter 18 – Process and Design
Add more structural and semantic HTML to your pages. Try all new HTML introduced in Chapters 1 and 2

MMDI 202 Web Design Studio Fall 2014

Lecture/Studio: Monday 8:30AM – 11:50AM/ 1:00PM – 3:50PM
Room: Terra 1213
Prof. Juan M. Parada (e:
Office: Terra 1211B – By appointment only
PDF Copy

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.

The class web site is the official source for all dates and assignments; the syllabus is
NOT. The syllabus provides a general overview and guidelines for the course. The web site is a
living, dynamic document.

-Set up a local web development environment
-Understand contemporary web standards, accessibility guidelines, and semantic web development using CSS and XHTML.
-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

-Attendance and full participation are extremely important in getting the most out of this class.
-You are required to back up your files. If your computer is wiped clean by Academic Computing and you lose your course work it will affect your grade.
-Active learning involves engaging in the subject matter, class discussions, and projects, and will be significant in determining your grade.
-Completion of all assigned projects and readings by their due dates (expect between 6 – 12 hours per week of outside class work).
-Students must use and frequently check their email addresses. Important communication outside of class will be directed to this account.
-Analog media: notebook/sketchbook and pens, markers, pencils, etc.

• HTML Text Editor
• Mac: skEdit, BBEdit, Coda, TextMate PC: TextPad, jEdit, PSPad, TextMate
• FTP App
Mac: Transmit, Fetch PC: WS_FTP, SmartFTP or – Firefox add-on: FireFTP (

Web Hosting & Domain Name
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. Recommended
web hosting companies include: Site5, ServerGrove, Media Temple.

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 (Wednesday 01:00PM – 03:50PM) will provide students with the opportunity to put the morning lectures into progress 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.

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

1. Short-term Assignments – Studio work = 30%
2. WordPress setup and customization = 30%
3. Final Project (Mobile Website, Final Documentation) = 40%

As well as a qualitative evaluation:
• A – Excellent
Performance and attendance of the student has been of the highest level, showing
sustained excellence in meeting course responsibilities.
• B – Very Good / Good
Performance and attendance of the student has been good, though not of the highest level.
• C – Satisfactory / Average
Performance and attendance of the student has been adequate, satisfactorily meeting the
course requirements.
• D – Poor / Below Average
Performance and attendance of the student has been less than adequate.
• F – Unacceptable
Performance and attendance of the student has been such that course requirements have
not been met.

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

Laptop computers and other mobile devices are invaluable tools for artists, designers, and
students when used responsibly. However, this technology can also be incredibly distracting,
especially in the classroom. When in class, you may use your laptops and other devices for any
activities pertaining to the course: taking notes, researching material relevant to our readings
and discussions, making class presentations, etc. As a general rule, the following uses are
unacceptable: checking e-mail (unless you are sending me an assignment or question), instant messaging, texting, using Facebook, YouTube, or other social networking sites.

All work for this class must be your own and specific to this semester. Plagiarism, that is, knowingly representing the words or ideas of another as oneʼs own work in any academic exercise, is absolutely unacceptable. Any student who commits plagiarism must re-do the assignment for a grade no higher than a D. In fact, a D is the highest
possible course grade for any student who commits plagiarism. Also, incidents of plagiarism
will be reported to the Dean of Students for further disciplinary action. Please contact me with
any specific questions about citing and documenting source material.

Any student eligible for and requesting academic accommodations due to a disability should
provide an Accommodation Form from Disability Services within the first two weeks of the
semester. Disability Services is located at Gershman YM/WHA, room 306. Contact Neila
Douglas, Director of Disability Services at 215-717-6616 or for more

MMDI 202 01: WDS Introduction – 08/25/14

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

Editors – BBEdit, TextWrangler

Read This:
separate but equal?
The world has changed
We all need a process – but none are set in stone
The importance of layout

Free FTP
CSS Schools

Intro to HTML:

Read Chapter 1, Chapter 2

Studio 01: Set up and Intro to HTML
Read the articles above.
Buy a domain name and server space (hosting)
Create a splash page for your web site (use anything you want) Example?
– Use HTML and images.
– Create links to multiple pages both internal and external (what does this mean?)
– Create a link to your email address for contact

CE 2411 08: HTML5 – 07/28/14

Review Final Interface design
Due: FINAL WEB SITE (08/06)
HW Deliverables for final:
– Create a Basic splash page with images, links, and headings.
– Add more structural and semantic HTML to your pages.

– 1-2 page proposal For Final Website. Discuss limitations and example sites.
– Create Site Maps
– Create wireframes
– Build out your Site prototype using your final wire frames.
– Create Interface Design, (JPG, PDF, ETC.).

-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
— 4. Include Declaration and metatags (refresh and redirect)
– CSS: Play with CSS rules and box model attributes.
– CSS: Practice text attributes. In particular, I want to see the @font-face
– Create a 3 column web page using CSS
– Practice- create tables and try all the attributes in Ch. 6
– Practice styling Forms
– Practice modifying Cursors
– Practice opacity, Z-index, drop down menu using lists.
– Practice – Image alignment
– Practice – Roll-overs and sprites
– Practice all HTML5 elements in Chapter 17

The old
The new
What about those older browsers?
CSS magic

Review 17
Practice all HTML5 elements in Chapter 17 (use code and images)
Read Ch 19 – SEO
Work on your final PROJECT!!
Purchase a domain name and hosting. Many options