Category Archives: EMP2

EMP2 13: Work on Final Project 04/25/18


INTRO:
Review Site Interface Design.
Make sure you have completed Sitemap and Wireframes.

-Designing the visual interface:
Deliverables: Interface in JPG, PNG or PDF

Slideshows:
jquery picks
ready to slide?

FINAL DELIVERABLES:
Homework:

01
– Create a sitemap. Create Wireframes for you major pages.

02
At least 3 HTML/CSS pages with the following:
– Try Color names
– Make sure you understand the “Z-index”. Try either example.
– Try the Float and Clear Examples
– Use “Display – Block/Inline”

03
Create at 3 HTML/CSS interlinked pages, and complete the following on each page:
— 1. place background image or color using CSS
— 2. Use the “box model”
— 3. Use pseudo-classes
— 4. One page should use external CSS
— Practice CSS priorities

04
– At least 3 HTML pages set up in Root, second Level, and third level directories. Help?
– Create forms (Remember: they will not work yet)
– Include a META refresh and redirect
– Include iframes
– Include video, audio. Compare to embedding.

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

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

Final HTML Project:
1. Sitemap
2. wire frames
3. Interface
4. A full site (HTML/CSS + images in a folder)

EMP2 12: Review Sitemaps, Wireframes 04/18/18

INTRO:
Present Sitemap + Wireframes. Talk about in DETAIL.
NEXT:
– Create your interface based on your wireframes.
– Start building your HTML structure

REVIEW:
Wire frames: Read about
Explore site styles
RWD

FINAL DELIVERABLES:
Homework:

01
– Create a sitemap. Create Wireframes for you major pages.
– Intro to frameworks
– Fluid Template
– Responsive Designs

02
At least 3 HTML/CSS pages with the following:
– Try Color names
– Make sure you understand the “Z-index”. Try either example.
– Try the Float and Clear Examples
– Use “Display – Block/Inline”

03
Create at 3 HTML/CSS interlinked pages, and complete the following on each page:
— 1. place background image or color using CSS
— 2. Use the “box model”
— 3. Use pseudo-classes
— 4. One page should use external CSS
— Practice CSS priorities

04
– At least 3 HTML pages set up in Root, second Level, and third level directories. Help?
– Create forms (Remember: they will not work yet)
– Include a META refresh and redirect
– Include iframes
– Include video, audio. Compare to embedding.

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

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

Final HTML Project:
1. Sitemap
2. wire frames
3. Interface
4. A full site (HTML/CSS + images in a folder)

EMP2 11: HTML/CSS Quiz

Intro:
Quiz! Some helpful tools.
Review instructions and start.

CREATE: 1 HTML/CSS page. Include:
– multiple columns (2 or 3)
– Use @import for CSS and/or Fonts
– try a simple media rule
– try a CSS drop-down menu
EXAMPLE

REVIEW:
LAYOUT:
Inline vs float
Remember This? Try using the above instead

PROCESS:
-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.
Sources to Review:
More on the Hover
Advanced Hover effects
Zen Garden

HOMEWORK:
Start Work on your Final
– Create a sitemap. Create Wireframes for you major pages.
– Intro to frameworks
Fluid Template
Responsive Designs

EMP2 10: ADVANCED CSS 04/04/18

INTRO
Read Chapter 11, 13, 15.
Practice code: 11, 13, and 15.
At least 3 HTML/CSS pages with the following:
– Try Color names
– Make sure you understand the “Z-index”. Try either example.
– Try the Float and Clear Examples
– Use “Display – Block/Inline”
EXAMPLE
–OR–
Create at 3 HTML/CSS interlinked pages, and complete the following on each page:
— 1. place background image or color using CSS
— 2. Use the “box model”
— 3. Use pseudo-classes
— 4. One page should use external CSS
— Practice CSS priorities
EXAMPLE | CODE

READING
Ch. 15
2 column, and 3 column layout.
@import. + Layout example
But, when presented as a media rule: @media – used for different purposes:
Media Rules
– More Media info
Which leads to….
Ch. 12
– Can also import fonts
Can also use Google Fonts
Some Examples

Ch 14
More Lists.
Leads to Drop-down menu

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

HOMEWORK:
Complete Code review for 14, 12, and 17

CREATE: 1 HTML/CSS page. Include:
– multiple columns (2 or 3)
– Use @import for CSS and Fonts
– try a simple media rule
– try a CSS drop-down menu

Next week: HTML/CSS Quiz covering EVERYTHING

EMP2 09: More CSS 03/26/18

INTRO:
Create at 3 HTML/CSS interlinked pages, and complete the following on each page:
— 1. place background image or color using CSS
— 2. Use the “box model”
— 3. Use pseudo-classes
— 4. One page should use external CSS
— Practice CSS priorities
EXAMPLE | CODE

REVIEW:
Ch. 11
Color names
Opacity
Opacity Roll-over: try it using the CSS – hover property

Ch. 13
Make sure you are familiar with this.
And, you did all of these…
display /BlockInline

Ch. 15
They have semantic difference – a “div” element is designed to describe a container of data whereas a “p” element is designed to describe a paragraph of content. (Nesting: you can not nest anything in a “p” tag)
Best review
The power of “Z” and test code
Floaters
Float and Clear
Another explanation of the FLOAT
Example
Next Week: 2 column, and 3 column layout. Media queries – using multiple CSS

HOMEWORK:
Read Chapter 11, 13, 15.
Practice code: 11, 13, and 15.
At least 3 HTML/CSS pages with the following:
– Try Color names
– Make sure you understand the “Z-index”. Try either example.
– Try the Float and Clear Examples
– Use “Display – Block/Inline”

HOMEWORK:
Read Chapter 12, 14, 17.
Practice code: 12, 14, and 17

EMP2 08: Intro to CSS 03/19/18

INTRO:
Read: Chapter 7, 8, and 9.
Complete Code review for 7, 8, and 9.

Homework Due:
1. Read the chapters above
2. Create the following:
– At least 3 HTML pages set up in Root, second Level, and third level directories. Help?
– Create forms (Remember: they will not work yet)
– Include a META refresh and redirect
– Include iframes
– Include video, audio. Compare to embedding.
Example. Code

REVIEW:
Read: 10.
Complete Code review for 10

CSS in Action!
CSS parts
CSS Propertes
CSS Selector
The box
Pseudo class
External CSS. Here is how
Class, ID and Grouping Book, pg. 238.
Cascading – Book, pg. 239.
CSS priorities

HOMEWORK:
Create at 3 HTML/CSS interlinked pages, and complete the following on each page:
— 1. place background image or color using CSS
— 2. Use the “box model”
— 3. Use pseudo classes
— 4. One page should use external CSS
— Practice CSS priorities

EMP2 07: Forms, Meta, and A/V 02/28/18

INTRO:
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.
Example and the Code.

REVIEW:
Read: Chapter 7, 8, and 9.

7. Forms – Practice formatting.
Code review for 7
Adding PHP and functionality.
Example

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

9. Video, Audio, Flash
Examples.

ASSIGNMENT:
Read: Chapter 7, 8, and 9.
Complete Code review for 7, 8, and 9.

Homework:
1. Read the chapters above
2. Create the following:
– At least 3 HTML pages set up in Root, second Level, and third level directories. Help?
– Create forms (Remember: they will not work yet)
– Include a META refresh and redirect
– Include iframes
– Include video, audio. Compare to embedding.

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.

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.

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)