Category Archives: 1. UARTS

EMP2 06: HTML – From semantics to tables 02/21/18

INTRO:
Read Chapter 1, 2
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?
How to organize your HW

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

Looking Ahead:
Read: 3, 4, 5, and 6.
HTML: Try out all the code samples: 3, 4, 5 and 6.

Lists:

Links:
– HTML link attributes
– Ch4 – Examples,
HTML depends on file paths pg. 81
Path demo. Should end up at this LINK. You can also download the files
E-mail link magic

Images:

Tables:
– Tables: Basic
– Tables: Colspan, Rowspan
Table: Photoshop Demo
HTML and the background image
Tables: background attribute

ASSIGNMENT:
Read: 3, 4, 5, and 6.
HTML: Try out all the code samples: 3, 4, and 5 and 6.

Homework:
1. Read the chapters above
2. Create the following:
– At least 3 HTML pages set up in Parent, Child, and Grandchild directories.
– Include a list
– Use the “id” attribute, to link to “top” or “bottom”
– Use the “id” attribute to link to a specific section on another page
– Use the link attribute, to generate a new page (link to a new page or tab)
– Mount a large image in an HTML table using Photoshop. Next, put text over the image as demonstrated in class.

WDS 05: CSS 02/19/18

INTRO:
Previous Class
Read: 10.
Complete Code review for 10

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

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

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
Deliverables: Site Inventory/Site Map,. Layout grids (Wire frames and HTML Prototype

PROTOTYPING:
HTML prototype

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

Example Mid
A bit much

Studio 05: HTML/CSS:
PROCESS: Requirements.
What are you building? Why? What for? For who?
Read Chapter 18: Use the Questions on page 455 as a starting point.
Catch up on Assignments
Create at 3 HTML/CSS interlinked pages, and complete the following on each page:
— 1. place background image with CSS.
— 2. Use the “box model”
— 3. Use pseudo classes

EMP2 05: Project #1 Due + Intro to HTML 02/14/18

Project1 Editorial (Photoshop, Illustrator & InDesign) Due: Present in class.
Email me the competed package (JPARADA@UARTS.EDU)

Introduction to HTML/and Web Development:
Book:
HTML and CSS: Design and Build Websites. John Wiley & Sons. 2011.
…and companion Site.

Storage:
– USB Drive/ external Drive
– Pad or notebook + pen/pencil

Software:
Editors – BBEdit, TextWrangler
Brackets
My new favorite

Practice:
Real-time editor
W3
HTML: START
Review:
– Setting up a development environment
– Viewing Code
– Testing code
– Version control
– Introduction to HTML

Assignment
Read: Chapter 1, 2
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?
We will review at the start of class next week.

WDS 04: Into to CSS 02/12/18

INTRO:
Read: 4, 5, and 6.
Code Review?
Create the following:
– At least 3 HTML pages set up in Parent, Child, and Grandchild directories.
– Use the “id” attribute, to link to “top”
– Use the “id” attribute to link to a specific section on another page.
– Use the link attribute, to generate a new page (link to a new page or tab)
– Mount a large image in an HTML table using Photoshop. Next, put text over the image as demonstrated in class.*

AT THIS POINT, YOU SHOULD BE ABLE TO BUILD HTML PAGES WITH TABLES.

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

REVIEW:
7. Forms – Practice formatting.
Code review for 7

8. Extra Markup
Code review for 8.
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

Studio 04: HTML + Intro to CSS
Class Project:
HTML/CSS:
– Create HTML pages with iframes, examples of block and inline elements, specifically “div” and “span” and a sample form (no PHP)
– Use the META tag to refresh and redirect
Read: 10.
Complete Code review for 10

EMP2 04: INDESIGN + PROJECT

Desktop Publishing
Aldus to Adobe
Adobe Killer
Out of the ashes
A shift
What size????

Interactive PDF and forms
Object Styles
Packaging in all its glory
Instructional tutorial from Adobe

IN CLASS:
Take some time to organize all the assets.
What are you creating? What is your brand?
What type of interactivity?
Sketch a rough series of ideas for the project.
Give a short preview in class.

Assignment:
Create an e magazine, e- book, or interactive publication incorporating your Illustrator work, Photoshop design elements, and InDesign to format and publish. Your final should be:
– interactive
– include audio or video
– optimized for electronic delivery (on any platform – phone, laptop, pad, desktop)

DH 03: Mini Project #1 – Presentations

Presentations!

Deliverables:
– Written answers (#1, 2 above) should be turned in as a PDF file (if you are
working in pairs, please put BOTH names on the answer file)
– Your presentation should include visuals such as slides, images, videos, art, etc.
Visuals will be projected from the computer.
– Please turn in slides/presentations

Map
1. Motivation
2. Media
3. Process
4. Context

DESN200-MinorProject