Category Archives: IDES 322 Techniques II

IDES 322 03: PROCESS 02/02/16

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

REVIEW
HTML link attributes
HTML is depends on file structure
HTML is depends on file paths
Path demo. Should end up at this LINK
Link Examples,
Ch4 – Summary
Ch5 – Questions on images?

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, Example2
– Modeling the user experience: Design Document: Audience Scenarios, and Competitive Analysis.
Experience mapping
Example
Example
DELIVERABLE: User Scenarios, Usability maps, Competitive Analysis

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

PROTOTYPING:
Examples
Another example
Prototyping tools
Deliverable: HTML Prototype

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

RESOURCES TO REVIEW:
UX diagram examples
Sketches
Sketches 2
Digital
With annotations
With Annotations 2
Read This
UPA
Experience Maps
Wireframes Mag
UX for gamers
Dummy text with a twist
Example?

ASSIGNMENT:
Read: Chapter 6 and 7.
Complete Code review for 6 and 7

Process and Design
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

IDES 322 02: Intro to HTML + Intro to Process 01/26/16

INTRO:
Review Assignment –
1. Buy a domain name and server space (hosting)
2. Set up your server and upload a file.
– Test file upload
3. Read Chapter 1,2
4. Code Work: Review 1, 2
5. Create a splash page for your web site (use anything you want) with an image and a link. Example?
Upload HTML files to your server. Verify.

READING REVIEW:
HTML is a hierarchy.
Attributes
HTML Summary
All the tags
HTML Summary 2
Good resource

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

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

IDES 322 01: Introduction 01/19/16

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

Introduction:
Review Syllabus
Sample Work
1 – Example of HW Deliverables
2 – Student Website
3 – Student Website
4 – Student Website
5 – Student Website
6 – Student Website
Mid-Term
Mid
Mid
Mid
Mid
Prototyping
Prototyping:
WordPress

Software:
Editors – BBEdit, TextWrangler
A new one, Brackets
FTP

Read This:
The world has changed
We all need a process – but none are set in stone

Structure:
DNS – What is it?
IP Address

Practice:
Real-time editor
W3
HTML Elements
HTML Attributes
– Setting up a development environment
– Uploading files to a server
– Testing uploads
– Server basics/HTML

Assignment:
Buy a domain name and server space (hosting)
Set up your server and upload a file.
– Test file upload
Read Chapter 1,2
Code Work: Review 1, 2
Try the W3 HTML Tutorial
Create a splash page for your web site (use anything you want) with an image and a link. Example?
Upload HTML files to your server. Verify.

IDES 322 Junior Techniques: Spring 2016

PDF Version:

Instructor
Prof. Juan M. Parada
e: jparada@uarts.edu
Office: Terra 1211B
Terra, Room 512
(Sec. 1) Juan Parada Tuesday 1pm – 3:50pm
(Sec. 2) Domenic D’Andrea

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

This 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 basic website development, 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.

Program Objectives:
Creativity/Innovation:
Students will know how to creatively approach, reframe and solve problems by managing a rigorous and iterative design process
Technique/Craftsmanship:
Students will explore and communicate design concepts through 2D and 3D skills as well as understand materials and manufacturing methods
Critical Thinking/Knowledge:
Students will be knowledgeable and fluent in discussing the contemporary issues facing design, have the ability to clearly express ideas in writing and thinking critically.

Learning Objectives
Students will:
Creativity/Innovation:
• Design and build a functional website and deploy it to the Internet
• Learn better methods of documenting workflow process
• Practical stages for building a website
• Practice an iterative design methodology alongside project management techniques (both individually and through group work).

Technique/Craftsmanship:
• Enhanced techniques for displaying and presenting work for desktop and mobile devices
• How to install and manage a web-based Content Management System (CMS). Develop knowledge of available web services/APIs and content management systems, be able to leverage their use for web projects.
• Using FTP software
• Set up a local web development environment

Critical Thinking/Knowledge:
• Understand contemporary web standards, accessibility guidelines, and semantic web development using CSS and XHTML
• Understand mobile web browsing and adapt your website to work with mobile devices
• Understand social media and using it as a self-promotion tool for your work and your creativity.

REQUIREMENTS
• Attendance and full participation are extremely important in getting the most out of this class.
• Be on time… always.
• You are required to backup 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.
• Students must use and frequently check their uarts.edu email addresses. Important communication outside of class will be directed to this account.
• Analog media: notebook/sketchbook and pens, markers, pencils, etc.
• Remember that perfection does not exist.
• plan on at least 3 – 5 hours of out of class work time.
• Be open to trying new methods and learning new techniques.
• Please communicate with instructor when something is not going well or if you are going to be late or if you know you will be absent.

SOFTWARE:
• HTML Text Editor
• WordPress
• Mac: BBEdit, Coda, Bracket. Dreamweaver*
• FTP software
• Chrome browser

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.

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

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 (PORTFOLIO) 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 work list 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.

EVALUATION & GRADING
• 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 (unless otherwise instructed).
• 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:

Short-term Assignments (homework) – 20%
WordPress setup and customization – 25%
Final Documentation, Mobile Website , Final Project – 55% (Midterm due after spring break)

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.

ID Program Standard Attendance Policy
All students are expected to attend classes regularly and promptly, and for the duration of the class.

Attendance will be taken of every class. Each unexcused absence beyond TWO (2) will result in an automatic drop in the final grade by one whole letter grade (i.e. from a final grade of “B” to a“C”). 15 minutes late will count as an absence. If students are delayed or not able to attend contact the department administrator before class starts. If you miss a class, you are responsible for having the appropriate work completed for the next class period. Attendance is also mandatory at all class presentation dates and for the duration of all presentations.

UArts Policy on Absences
Full participation is expected of all UArts students and is necessary to fully benefit from and succeed in the University’s programs of study. All students are expected to attend classes regularly and promptly, and for the duration of the scheduled instructional time. Absences from class and habitual lateness may result in a lowered grade or failure of the course, depending on the attendance policies stated by the on the course syllabus. It is the responsibility of the student to arrange with his/her instructor(s) to make up all missed work. Failure to do so will affect the student’s grade. In the event that absences are the result of extraordinary, documented circumstances and are numerous enough that it is impossible for the student to qualify for advancement, the student may be advised to withdraw from the course. If the course is required for the degree, the student will also be required to repeat the course in a subsequent semester.

TECHNOLOGY IN THE CLASSROOM
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.

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

UArts Disability Accommodation Policy
The University of the Arts provides reasonable accommodations for students with documented disabilities on an individualized and flexible basis. If you are a student with a documented disability, the University’s Educational Accessibility Advisor determines appropriate accommodations through consultation with the student. Before you can receive accommodations in this class, you will need to make an appointment with the EAA. To speak with me about other concerns, such as medical emergencies or arrangements in case the building must be evacuated, please make an appointment as soon as possible.

Reminder – visit the following link regarding the UArts Student Handbook. This is where you will find valuable information on student life, the student code of conduct, your rights, campus policies, etc.
http://www.uarts.edu/students/student-handbook

COURSE OUTLINE
01. Introduction:
Introductory class. Students will review the class syllabus, expectations and course outline.

02. Introduction to Basic HTML/XHTML and development tools:
Learning the tools of web development. HTML is the building block for all web site development and provides a stepping-stone for learning CSS.

03. Introduction to Web Development Process:
Web development requires iterative design methodology alongside project management techniques. Introduction to basic HTML/XHTML and helpful editing tools.

04. Process – UX. Usability concepts and application:
UX design from concept to visual demo. Introduction to user scenarios and usability mapping.

05. Process – Wireframes, Prototyping:
Creating wireframes and other structural models. Explain IA and how this is part of the UX design process. Introduction to HTML prototyping.

06. Process – Interface design.
Design the site interface in Photoshop or other. Introduction to website design concepts and best practices.

07. Introduction to CSS:
Students will spend much of the next few classes working with CSS. This is the introduction. Work on Mid-term (due after Spring break)

08. Continue with CSS:
Continue working with CSS. Mid-term is Due

09. The CMS – Content Management System:
Students will be introduced to WordPress and several other options. Primarily, this section will focus on customizing CMS platforms using CSS and other techniques.

10. CMS – WordPress customization and other tricks:
Learn how to easily customize WP and more advanced techniques.

11. Development for Mobile web sites:
How do we make sure our site looks great on a smartphones screen or a tablet? Introduce sub domains and mobile redirect code.

12. Development for Mobile web sites 2:
From concept to implementation. Explore adaptive templates for CMS platforms

13. Incorporation Social Media:
Using Social media to promote your “Brand”. The importance

14. Work on FINAL:

15. FINAL

Ides 322 12: WordPress 04/14/15

INTRO:
Practice JS redirect
Practice Media Queries (Simple)
Install WordPress on your server. Try posting something.

READING:
– Sub-domain. How does it look?
How to redirect? My Page. Code. Screen Shot on iPhone
– Some Basics
Mobile Site Bible
To Swipe?
– WordPress does it for you
– More mobile me
jquery picks
ready to slide?
WP customize
– More WP custom
– WP theme mods
– WP theme customization
– More WP tips

FINAL DELIVERABLES:
FINAL PROJECT DUE: April 28, 2015. We will review final sites in class (1PM)
What will you be delivering?

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

B. Homework Assignments.

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

2. Add more structural and semantic HTML to your pages. Try all new HTML introduced in Chapters 1 and 2

3. Tables: Try using Photoshop/slices to create a table mounted image. Text over image?
Practice creating forms Create your own mini web site (at least 3 pages), using css to complete the following on each page:
a. place background image,
b. Use the “box model”
c. Use pseudo classes

4. Try :first child selector
Try implementing a drop down menu
Create a 3 column web page using CSS
Create multiple web pages linked to an external CSS file. Use IDs and classes.

5. Try Ch 9 code
Try implementing a Favicon
Try Implementing a working email form

6. Practice JS redirect
Practice Media Queries (Simple)
Install WordPress on your server. Try posting something.

7. Customize your WordPress

C. Customized WordPress site (URL*)

D. Mobile Site – JS redirect (URL*)

E. Final Site (URL*)

URL* – These deliverables can be one single URL IF your final is on the WP platform.

ASSIGNMENT:
Customize WordPress
Work on your final Deliverables

Ides 322 11: HTML5 + Media Queries 04/07/15

INTRO:
Review Video and Flash
Try implementing a Favicon
Try Implementing a working email form

READING:
– Sub-domain. How does it look?
How to redirect? My Page. Code. Screen Shot on iPhone
Media Rules
– More Media info
– Intro to frameworks
Responsive Designs
– Some helpful SEO resources
More on SEO

Introduction to WordPress:
What is it?
2 types and they are different.
How do I get it?

ASSIGNMENT:
Practice JS redirect
Practice Media Queries (Simple)
Install WordPress on your server. Try posting something.

IDES 322 10: HTML5 03/24/15

INTRO
CSS/HTML
– Try all code samples for Ch 15, 16, 17
– Try :first child selector
– Try implementing a drop down menu
Create a 3 column web page using CSS
Create multiple web pages linked to an external CSS file. Use IDs and classes.

READING:
HTML5
The old
The new
What about those older browsers?. Use a shiv

Extras:
FAViSize
Flavor FAVicon
Favicon generator
Responsive Designs
JQuery Slideshow
– Adding Social Media
– Example form to get you started

Assignment:
Read Chapter 9
Try Ch 9 code
Try implementing a Favicon
Try Implementing a working email form

IDES 322 09: Advanced CSS 03/24/15

Intro:
HTML/CSS:
Tables: Try using Photoshop/slices to create a table mounted image. Text over image?
Practice creating forms

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

READING:
Review Page 238, 292 in book
The :first-child selector allows you to target the first element immediately inside another element. It is defined as a “structural pseudo-class”, meaning it is used to style content based on its relationship with parent and sibling content.
– First Child in action
– First and last child
Ch. 14
List styles
List images
List positioning and shorthand
Table Properties
Even the Cursor can change
Lists are important for drop down menus:
Drop, example
Pick your poison

In Class:
External CSS, how to and why we do it this way
ID and Class
Introduction to 3 columns

Read the following articles
External CSS
Float it
Flaunt it
3 columns
more 3s

Assignment:
Read: Chapter 15, 16, 17
Review: 15, 16, 17
CSS/HTML
– Try all code samples for Ch 15, 16, 17
– Try :first child selector
– Try implementing a drop down menu
Create a 3 column web page using CSS
Create multiple web pages linked to an external CSS file. Use IDs and classes.