Agendas

WEEK 1

Introduction and Syllabus

Assignment Overview – Project 1: Personal Website (Due week of Feb. 15 -19)

Lecture: Introduction to Color

  • Adobe Color Themes:

https://helpx.adobe.com/photoshop/how-to/color-themes-photoshop.html

https://color.adobe.com/create/color-wheel/

DEMO – Creating a Styletile:

https://www.youtube.com/watch?v=5mJNFp1-uw8&feature=youtu.be

Due Next Class:

Discussion Question 1

Weekly Assignment: Styletile

WEEK 2

Lecture: How the web works

https://www.slideboom.com/presentations/816002/how_the_web_works

DEMO – Getting setup

File Directory: https://www.youtube.com/watch?v=fs-0vwgVfDE&feature=youtu.be

File structure Rules:

  1. File names have no spaces or strange characters
  2. File names are lower case
  3. All files in folder named project1_website
  4. Folders named images, fonts, js inside project1_website folder
  5. All images are inside the images folder
  6. External stylesheet called project1.css
  7. All css in external file
  8. No psds uploaded
  9. All pages titled
  10. All images have alt text

 

Text Editors: https://www.youtube.com/watch?v=HNGRHSVdKuI&feature=youtu.be

Dreamweaver : http://www.adobe.com/products/dreamweaver.html

Bare Bones Text Wrangler : http://www.barebones.com/products/textwrangler/

Notepad++ : https://notepad-plus-plus.org/

 

Resource: How to use W3 schools:

https://www.youtube.com/watch?v=_SG00s8XqkY

 

DEMO – Working with the text editor

 

DEMO – HTML Basics

Follow these tutorials from W3schools. You can also look at the sample page link. 

Introduction to HTML

 

Inserting HTML Elements

 

Code

HTML elements
  • <!DOCTYPE>
  • <html>, <head>, <body>, <title>
  • <p>
  • <h1>, <h2>, <h3>
  • <hr>
  • <!– –>
  • <br>
  • <a>

 

Sample Page

To see the code: right-click in the page and select “View Source” (IE) or “View Page Source” (Firefox), or similar for other browsers. This will open a window containing the HTML code of the page.

 

DEMO – Intro to CSS

Follow these tutorials from W3schools. You can also look at the sample page link. 

 

CSS Basics

 

Adding CSS Rules

 

Code

HTML elements CSS selectors CSS properties
  • <link>
  • body
  • h1, h2, h3
  • p
  • a
  • a:link
  • a:visited
  • a:hover
  • a:active
  • grouped selector
  • hr

 

  • background-color
  • color
  • hex & rgba(255,0,0,0.3)
  • font-family
  • font-style
  • font-weight
  • font-size
  • text-transform
  • text-align
  • text-indent
  • text-decoration
  • border
  • height

 

Sample Page

To see the code: right-click in the page and select “View Source” (IE) or “View Page Source” (Firefox), or similar for other browsers. This will open a window containing the HTML code of the page.

  • Abraham Lincoln – Wikipedia (with CSS)

 

 

Due Next Class:

Discussion Question 2

Weekly Assignment: Basic HTML

 

WEEK 3

DEMO – CSS Layout

Layout Basics

 

Positioning a Block

 

Styling the Box

 

Code

HTML elements CSS selectors CSS properties
 <div>  id selector (#)
  • width (container 900px)
  • height (do not use)
  • min-height
  • position: relative
  • float
  • border-style
  • border-width
  • border-color
  • outline-style
  • outline-color
  • outline-width
  • margin
  • padding

 

Tips

  • If you add the overflow:hidden property to the containing CSS div element in CSS–the background color will stretch to include floated elements.
  • If you add margin:0px to the header(h1, h2 ect.) and body elements in CSS you will get rid of extra space between elements.

 

Sample Page

To see the code: right-click in the page and select “View Source” (IE) or “View Page Source” (Firefox), or similar for other browsers. This will open a window containing the HTML code of the page.

  • Abraham Lincoln – Wikipedia (with CSS positioning)

 

Lecture: Introduction to Imagery

  • Imagery:

https://www.slideboom.com/presentations/814277/imagery_intro

  • Pattern:

https://www.slideboom.com/presentations/826906/pattern

  • Texture:

https://www.slideboom.com/presentations/827771/textured2

 

DEMO – Introduction to Photoshop

Follow these tutorials from Adobe TV.

Photoshop basics

 

DEMO – Creating and Inserting Background Images

Follow these tutorials from me and Adobe TV.

 

Creating a background image

 

Adding shapes, lines and patterns

 

Saving the image for the web

 

Inserting backgrounds into CSS

 

Code

HTML elements CSS selectors CSS properties
  • background-image
  • background-repeat
  • background-position
  • background (optional)

 

Sample Page

To see the code download the zipped file and double-click or right click to extract or decompress the folders.

 

Due Next Class:

Discussion Question 3

Weekly Assignment: HTML with CSS and layout

 

WEEK 4

DEMO – Creating and Inserting Content Images

Follow these tutorials.

Preparing the image in Photoshop

Saving the image for the web (review)

Inserting an image into HTML

 

Code

HTML elements CSS selectors CSS properties
  • <img>(alt and src attributes)
  • img

 

  • vertical-align

 

Sample Page

To see the code: right-click in the page and select “View Source” (IE) or “View Page Source” (Firefox), or similar for other browsers. This will open a window containing the HTML code of the page.

 

DEMO – Uploading your website

Software

FTP information

 

How to upload your files

 

 

Due Next Class:

Discussion Question 4

Project 1: Personal Website

 

WEEK 5

CRITIQUE: Project 1

Assignment Overview – Project 2: Retail Website

Review: Design Principles

Please review the following lectures. The visual design of each project is a large part of the grade of each project. I am looking for the principles and concepts that are outlined in these lectures.

Color:

Imagery

Type

 

Review: Technical Skills

Please review these demonstrations. For the next project you will be expected to know the skills included in these demonstrations. Let me know if you have any questions about any of the skills.

HTML & CSS

 

Photoshop

 

Uploading

 

Due Next Class:

Project 2: Creative Brief

Project 2: Wireframe(PDF reference file)

 

WEEK 6

DEMO – Adding custom fonts and lists to CSS

Follow these tutorials.

Adding a custom google web font

 

Inserting and Styling Lists

 

Using classes to specify custom fonts

 


Adding fake links

  • hint–if you use a # instead of a url, you will create something that looks like a link but doesn’t link to any content
  • hint–this helps you style links before you link them

 

Code

HTML elements CSS selectors CSS properties
  •  class=”name” (attribute of any element)
  • <link> (from Google)
  • <ul>
  • <li>
  • <a href=”#”>
 .name (name of class)
  • font-family (Google)
  • list-style

 

Sample Page

To see the code download the zipped file and double-click or right click to extract or decompress the folders.

 

Lecture: Choosing a display and accent type

  • Display

https://www.slideboom.com/presentations/827882/type_display

  • Accent

https://www.slideboom.com/presentations/827940/type_accent

 

DEMO –Positioning in HTML & CSS: Part 1

Follow these tutorials. 

 

Review Layout Basics (optional)

 

Creating containers

http://youtu.be/LpQ1z7e28Es (Links to an external site.)

 

Float & Position Relative

http://youtu.be/_un9BWKGSOM (Links to an external site.)

 

Centering the Page

http://youtu.be/yZUDDV8pc6c (Links to an external site.)

 

Styling a Navigation Bar

 

Code

HTML elements CSS selectors CSS properties
  • <div id=””>
  •  advanced selectors — #name ul {   }
  • position:relative
  • float:left
  • overflow:auto
  • margin (margin-left ect)
  • padding (padding-top ect)
  • display:block
  • display:inline
  • margin:auto

 

Tips

 

Sample Page

o see the code download the zipped file and double-click or right click to extract or decompress the folders.

 

Due Next Class:

Discussion Question 5

Weekly assignment: HTML/CSS

Project 2: Wireframe with boxes (PDF reference file)

 

WEEK 7

Resource: Logos and Images

Logos

I have provided logos in both Illustrator and Photoshop format. You can change the color of the logo in either program.

Images

I have provided eight images of shoes for each store. I also included the price and name information for each shoe. You can use different shoes if you want, you just have to download them yourself. You can use shoes from any retail shoe–I am suspending the public domain rules for pictures of the shoes. If you want to add additional pictures, they must be public domain or creative commons licensed.

Downloads

 

Resource: Public Domain Images

Downloading

 

Searches

 

Websites

 

Lecture: Copyright Law and Images

https://www.slideboom.com/presentations/814137/imagery_copyright

Lecture: Creating interface imagery

http://www.slideboom.com/presentations/833424

Lecture: Creating emphasis

http://www.slideboom.com/presentations/833421

DEMO – Adding interface imagery

Follow these tutorials from W3schools.

Review Image Basics (optional)

 

Shapes and Layer Effects in Photoshop

 

Styling Divs

 

Code

HTML elements CSS selectors CSS properties
  • border-radius
  • box-shadow
  • text-shadow
  • word-wrap

 

Sample Page

To see the code download the zipped file and double-click or right click to extract or decompress the folders.

 

Lecture: Accessibility

 

DEMO – Positioning in HTML & CSS: Part II

Follow these tutorials from me and W3schools.

Review Layout Basics (optional)

 

Div & Class

http://youtu.be/ycxIBbJ0xRs (Links to an external site.)

Advanced Positioning

http://youtu.be/BVio2YcVlMw (Links to an external site.)

http://youtu.be/31J5BoAbiQQ (Links to an external site.)

 

Styling a Navigation Bar

 

Code

HTML elements CSS selectors CSS properties
  •  <div class=””>
  • <div id=””>
  •  advanced selectors — #name ul {   }
  • position:relative
  • float:left
  • overflow:auto
  • margin (margin-left ect)
  • padding (padding-top ect)
  • display:block
  • display:inline
  • margin:auto

 

Tips

 

Sample Page

To see the code download the zipped file and double-click or right click to extract or decompress the folders.

 

 

Due Next Class:

Weekly Assignment: Positioned with images

Discussion Question 6

 

WEEK 8

CRITIQUE – Project 2 : Retail Website

Assignment Overview – Project 3: Promotional Website

 

Due Next Class:

Discussion Question 7

 

WEEK 9

Lecture: Choosing Photographic Imagery

http://www.slideboom.com/presentations/844544

Lecture: Creating Unity

https://www.slideboom.com/presentations/846314/layout_unity

 

Project 3: Creative Brief

 

Due Next Class:

Discussion Question 8

 

WEEK 10

 

Due Next Class:

Discussion Question 9

Weekly Assignment Styletile and Wireframe

 

WEEK 11

DEMO – Creating a second page

Follow these tutorials.

Secondary Page

 

Code (elements you should use)

HTML elements CSS selectors CSS properties
  •  <a> (href, target)
  • <style>
a:link

a:visited

a:hover 

  • all properties we have learned so far

 

DEMO – Adding Animation

Follow these tutorials.

Code

HTML elements CSS selectors CSS properties
  •  any selector
  • @-webkit-keyframes
  • @keyframes
  • 0%
  • 50%
  • 100%
  • animation
  • -webkit-animation

OR

 

Sample Page

 

Your home page should at least one example of animation. Here is an example–I picked a different restauarant called Meshi. You must use Thyme for your restaurant!

I will not be giving you sample code for this project to encourage you to make a project that is unique.

Home page with animation (Links to an external site.)

 

DEMO – Photoshop Comps

A comp is a Photoshop version of a webpage. Photoshop is used to similate what the page would look like before taking the time to code the page.

Comp
styletile

 

Using Images

All images must be in the public domain.

Using Fonts

You may only use fonts that are free to use on the web. You can find these through Google Fonts or Font Squirrel. You may NOT use the fonts that are on your computer, you do not have the appropriate license to use them on the web.

Working in Photoshop

 

 

 

Due Next Class:

Discussion Question 10

Weekly Assignment: Home page with animation

 

WEEK 12

Weekly Assignment: Secondary Page

 

Due Next Class:

Discussion Question 11

Project 3: Promotional Website

 

WEEK 13

CRITIQUE – Project 3: Promotional Website

Lecture: Choosing an Illustration Style

Part 1: Choosing an Illustration Style (Links to an external site.)

 

Sample Illustration Styles (from student projects)

These were also included in last week’s work.

Photographic imagery (public domain)

 

CASE STUDY: Illustration Style

 

Assignment Overview: Project 4: Book Website [Entertainment]

Project 4 Sample Projects

I’ve included a selection of student projects from past semesters. All of the projects are not equally strong, but they all have one or two extraordinary elements–either the illustrations, the concept, the interactivity, the animations or the language are innovative and inspiring.

Lecture: Examples (Links to an external site.)

 

Overall

 

Photographic imagery (public domain)

 

Illustrations from the book

 

Original illustrations created by the student

 

Interesting interactivity

 

Inventive language

Lecture: Making a Sitemap and Wireframe

Part 1: Making a sitemap and wireframe (Links to an external site.)

Resources

To create your sitemap and wireframes you can use Adobe Photoshop, Illustrator or Google Draw like we did for the styletiles. You could also use a website that is made to create wireframes like moqups.com.

 

DEMO – Converting Photoshop into HTML/CSS

Follow these tutorials from me and the lessons from project 2.

 

Code (elements you should use)

HTML elements CSS selectors CSS properties
  •  <div>
  • <link>
  • <img>
  • <ul>,<li>
  • <a href=”#”>
  • <p>
  • class =”” (attribute)
  • id=””  (attribute)
body

u

li

advanced selectors

#id

.class

p

a:link

a:visited

a:hover 

  • margin
  • padding
  • text-decoration
  • width
  • height
  • position:relative
  • float:left
  • margin:auto
  • font-family 
  • font-size
  • color
  • background-color
  • background-image
  • background-repeat
  •  
  • list-style-type

 Sample Page

Your home page should have text and images and be arranged in a layout that has unity. Here is an example–I picked a different restauarant called Meshi. You must use Thyme for your restaurant!

I will not be giving you sample code for this project to encourage you to make a project that is unique.

 

DEMO – Adding JQuery

Follow these tutorials.

JQuery 

 

Code (elements you should use)

HTML elements JQuery events JQuery  CSS selectors CSS properties

click
  • hide()
  • show()
  • fadeIn()
  • fadeOut()
  • fadeToggle()
  • fadeTo()
 
  • visibility:hidden;
  • display:none; 

 

 

 

Due Next Class:

Discussion Question 12

Weekly Assignment: Project 4 Book Website – Messages & Title

Weekly Assignment: Project 4 Book Website – Wireframes, Sitemap and Comp

 

 

WEEK 14

DEMO – Adding JQuery animation

Follow these tutorials.

Review Introduction to JQuery

Jquery Animation

Jquery Animation Loop (optional)


$(document).ready(function(){

var firstAnimation = setInterval(function(){myAnimation()},1000);

function myAnimation(){
$(“#specialdiv”).animate({height:’300px’,opacity:’0.4′},”slow”);
$(“#specialdiv”).animate({width:’300px’,opacity:’0.8′},”slow”);
$(“#specialdiv”).animate({height:’100px’,opacity:’0.4′},”slow”);
$(“#specialdiv”).animate({width:’100px’,opacity:’0.8′},”slow”);

 };

});

 

 

Code (elements you should use)

HTML elements JQuery events JQuery  CSS selectors CSS properties

click

dblclick

mouseenter

mouseleave

  • animate()
  • setInterval () — optional
 

 

 

 

DEMO – Adding Advanced JQuery Interactivity

Follow these tutorials.

Review Introduction to JQuery

 

SlideUp/Slide Down

 

Draggable

$(function() {

$( “#draggable” ).draggable();

});

 

 

Delay

 

Code (elements you should use)

HTML elements JQuery events JQuery  CSS selectors CSS properties

 
  • slideUp()
  • slideDown()
  • slideToggle()
  • draggable()
  • delay()
 

 

 

DEMO – Adding custom fonts and lists to CSS

Follow these tutorials.

Adding a custom google web font

 

Inserting and Styling Lists

Using classes to specify custom fonts


Adding fake links

  • hint–if you use a # instead of a url, you will create something that looks like a link but doesn’t link to any content
  • hint–this helps you style links before you link them

 

Code

HTML elements CSS selectors CSS properties
  •  class=”name” (attribute of any element)
  • <link> (from Google)
  • <ul>
  • <li>
  • <a href=”#”>
 .name (name of class)
  • font-family (Google)
  • list-style

 

Sample Page

To see the code download the zipped file and double-click or right click to extract or decompress the folders.

 

Due Next Class:

Discussion Question 13

Weekly Assignment: Project 4 Book Website – Game Page

 

WEEK 15

DEMO – Creating Forms

Follow these tutorials. 

Creating a form in HTML

Making the form

The first information goes in the form tag as an attribute. Next through several hidden fields you tell the form where to send it and who it is from.Finally with a submit button the form gets submitted. To test the form, you’d need to host your html file on a webserver. We’re creating a form without the send function due to the lack of a web server.

Required tags:

<form action=”http://www.mccc.edu/cgi-bin/afm_mccc.cgi&#8221; method=”post” name=”bookorder”>
<input type=”hidden” name=”RECIPIENT” value=”sweeneys@mccc.edu”>
<input type=”hidden” name=”FROMADDRESS” value=”name@gmail.com”>
<input type=”hidden” name=”SUBJECT” value=”Subject Line Here”>
<input type=”hidden” name=”THANKURL” value=”http://www.google.com”&gt;
<input type=”submit” value=”submit”>
</form>

 

Styling forms

 

Code

HTML elements CSS selectors CSS properties
  •  <form>
  • <input>- types: button, checkbox, text, radio, hidden, image
  • <textarea>
  • <label>
  • <option>
  • <button>
  • <select> 
  • input:focus
  • textarea:focus
  • form
  • input
  • textarea
  • textarea#feedback
  • input.button
  • input.button:hover
  • box-shadow
  • border-radius
  • linear-gradient

 

 

Lecture: Adding Rich Media and Interactive Media

  • Rich Content

https://www.slideboom.com/presentations/861722/content_rich

  • Interactive Media

https://www.slideboom.com/presentations/861731/content_interactive

 

DEMO – Adding Audio and Video

Follow these tutorials.

Adding audio and video

Finding and Converting Media 

$(document).ready(function() {
var audioElement = document.createElement(‘audio’);
audioElement.setAttribute(‘src’, ‘http://www.uscis.gov/files/nativedocuments/Track%2093.mp3&#8217;);
audioElement.load();

 


$(‘.play’).click(function() {
audioElement.play();
});


$(‘.pause’).click(function() {
audioElement.pause();
});

 

});

 

Code (elements you should use)

HTML elements JQuery events JQuery  Media formats
  • <audio> – with attributes like loop, autoplay or controls
  • <video> – with attributes like loop, autoplay or controls
  • <source>

 

  • document.getElementbyId – optional
  • .play(); – optional
  • .pause(); – optional
Audio:

.mp3

.ogg

.wav

.wma 

Video:

.mp4

.ogg

 

 

 

Due Next Class:

Weekly Assignment: Project 4 Book Website – Order Page

Discussion Question 14

 

WEEK 16

CRITIQUE: Project 4 – Book Website [Entertainment]

Discussion Question 15

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s