CIS-151  WebSite Development Assignments  

   As you read the chapters - use the examples from the book - to see what each type of code does:
CLICK on the ASSIGNMENT link for each 1 - 14 - to see the DETAILED WORD outline for each Assignment
The Manual has 21 Chapters http://www.bruceontheloose.com/htmlcss/examples  
NOTE:  Assignments links will NOT work until September 1st, 2013
Jing Video Recording Tutorials http://www.techsmith.com/tutorial-jing.html
Assignments are due the following week, for extensions talk with JilMac

Days    Assign-ment  Reading  Research  B+A     D
u
e
Sept 04






 






Introduction 
Chap 1+2
Web Pages
 Introduce yourself & tell me about your computer setup
 I will introduce you to Adobe Connect PRO

Download Files from the text http://BruceontheLoose.com/htmlcss
   Unzip them
   Put them on the computer you are working on
   Edit them with Notepad++

Download Notepad++ from http://notepad-plus.sourceforge.net

HTML Tags        w3schools-HTML5 Tags
Set up a gMail login
Set up Google Site
Create a Page for each Assignment
 1
wk
Sep 11







     2




 Chap 3+4
3-HTML
4-Text
How to you Learn what the terms/definitions/achronyms mean?  What web sites do you use as resources?
You may want to start a LINKS page on your Google Site - with the Resource Links that match your learning style.  These could include:
   http://Dictionary.com
   http://Wikipedia.com
   http://YouTube.com
   http://Google.com
Look for Carousel examples of web images - HTML5

 Chap 2, 3, 4
FTP Client
FTP an index.html to your root space on STWEB
 1
wk
Sep 18






      3





 Chap 5+6
 5-Image
 6-Links
WYSIWYG, Notepad++ and Image EDITORS
Workshops:  Google Sites:  Inserting Images, Links, and their properties
                    Favicons-Document to View or Download (scroll down to find)
                    for Google Sites & HTML code.
Menu http://stweb.ccv.edu/CIS-2140-VO01-V13FA/jam08260/Assignments/Assignment09/Menu-Stephen/Menu-Stephen-After/

There are two types of errors that you will come across:

SYNTAX - you have not closed a tag properly or are not using a tag correctly.

Where can you get help to find errors in your code??  Validator:  http://validator.w3.org/  - you enter your URL and the W3C (WWW Consortium) Validator lists things that you should address.  These may be causing something else further down to not function properly.

 

LOGIC - your program is not working the way you thought you designed it to.

This is a harder type of problem to find - because there is no Automated Validator that you can run it through.  You will have to walk the code and step through the steps to debug this.

 Chap 5+6
Images, sizing, and spacing.
 1
wk
Sept 25





     4





Chap 7+8
7-CSS
8-StyleSheet
     http://JilMac.com > Connect with JilMac  >  Enter your GUEST name (that can be recorded)
     We will create Tables on our Google Sites
     It will be recorded if you can't attend LIVE.
Recording from a previous semester 2/18/2013 - http://experts.adobeconnect.com/p5vnqk4dqgq/
     NOTE:  the reason that the Favicon did not display in the recording is
                   because JilMac spelled href incorrectly hreg

      <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">

Can you see my Favicon??  http://myvermont.tv/GCC-JilMac/Assign02/index-withFavicon.html

Basic HTML5 Website: index.html, style.css, student-pic.jpg, favicon-cow.ico

     http://myvermont.tv/GCC-JilMac/Assign04/HTML5-Menu
     to add the Assignment Pages copy the index.html,
     when you have Header & Footer the way you want them, 
     rename it to assignment-0X.html
     for each of the Assignments 01-14,
     then update the section id=Main of each page.

You can add a Table to each Assignments page for the Before & After examples
*   Free CSS website:  http://www.freecsstemplates.org
*   W3schools TryME  http://www.w3schools.com/tags/att_td_colspan.asp
 Chap 7+8  1
wk
 Oct 02




Chap 9+10
9-Define Selectors
10-Format Text

Google Sites-Insert Image, Header & Page Title

There are 2 videos (1 is imbedded here ) & 2 questionairres
Please watch them both and answer the True/False + Yes/No questions
https://sites.google.com/site/jilmacgsites/training-videos 

LinkedIN.com     fast forward & rewind as needed.
  Recording  9/11/2012-  http://experts.adobeconnect.com/p5ulec6qhcb
  Recording  9/18/2012 - http://experts.adobeconnect.com/p74oblej77d
  Recording 9/25/2012  http://experts.adobeconnect.com/p3z8tovjmng/
  Recording 10/2/2012  http://experts.adobeconnect.com/p4k5pzth8pl/
                                   Fast Forward to 15 minutes to see CREATING CALENDARS
================================================================
Recording NEAUG New England Adobe Users Group Meeting:  
A discussion of CMS - Content Management Systems

WordPress by Matt Nelson, notes on the left Chat window
    Interactive Media Directory at FirstTracksMarketing.com

Joomla by Meg McCarthy of Meg McCarthy Designs  http://www.megmccarthy.com/

Drupal by  Beth Armor, Web Designer/ Production Admin at UMass @ Amherst
================================================================
Panel Discussion on NEAUG's new WordPress site
Meg McCarthy, Barb Ackermann, Dawn Russel, Ann Campbell & Matt Nelson
==============================================================

Challenge:  
http://deepubalan.com/blog/2010/01/18/cool-sprites-free-overlapped-css-menu-using-css-sprites/
 Chap 9 1
wk
Oct 09     6




Chap 11
Layout with Styles
 EVALUATIONS:  Early Progress Reports & Mid-Term Grades
Recording of 10/09/2012 - Assign06, Embed Maps, Paint.net Size+Text
http://experts.adobeconnect.com/p5pzij3ewrk/
Photoshop/Paint.net Tutorials and You'Tube Videos
                               Layers is the KEY to Graphic software  Google "TUTORIAL paint.net layers"
                               Paint.NET is FREE & has Layers-to see them:  Click Window > Layers
                               http://www.getpaint.net
                               http://www.dotpdn.com/downloads/pdn.html
                               Docs:   http://www.getpaint.net/doc/latest
Challenge: Select a Menu from the web site CSS3Menu.com
http://css3menu.com/index.html#new
Put it on your HTML site and create links to all Assign01-Assig14
Post all resources, tutorials, etc. that you used on your Web Site
 Chap 11  1
wk
Oct 16       7




 Chap 12
Style Sheets for Mobile to Desktop
 Research REACTIVE DESIGN & RESPONSIVE DESIGN 
 Recording 10/16/2012 - LINKS - open in New TAB & what is the impact on Phones & Tablets?
                   What's new in HTML5 & CSS3, World Usability Day 

Recording:  http://experts.adobeconnect.com/p12oct5qswl/
Challenge: 

CLICKABLE IMAGE  
LinkedIN IMage that links to LinedIN website
 Chap 12
 Project Outline
 1
wk
Oct 23    8

 Chap 13
Working with Web Fonts 
Early Progress Reports 
Your Project Outline is also Due.

Join an On-Line Forum
Recording:  http://experts.adobeconnect.com/p1v18eds2h7

JilMac is available by Phone and would welcome working with you one-on-one, set up a time!  802-254-8628
 Chap 13
and Changing Fonts, Colors & Background Images in Google Sites
 1
wk
Oct 30     9




Chap 14
Progressive Design
CSS3 Enhancements 
JilMac will be out of her home office - she will be retrieving her eMails periodically.  
This will be an ON-LINE class only

CSS Transititions  
        http://www.adobe.com/devnet/html5/articles/using-css3-transitions-a-comprehensive-guide.html

Rec 10/4/2011 NEAUG.org New England Adobe Users Group - Mobile Development by Jason Mark of GravitySwitch.com fast forward & rewind!!   http://experts.adobeconnect.com/p17mwa1zpph 

Recording: http://experts.adobeconnect.com/p3545nrgz57/
Challenge: Break up a .html file into php include & requires to reduce redundancy
  Chap 14  1
wk
 Nov 06



Chap 15
Lists 
Becka - http://myvermont.tv/gcc13spbecka/Assign07/Assign7After3.html
Jim's Forum - http://responsinator.com
Nessim's CSS - works   http://myvermont.tv/gcc13spnessim/
                        doesn't http://myvermont.tv/gcc13spnessim/assignment02.html

CSS Generators  
http://www.awwwards.com/the-best-css3-tools-experiments-and-demos-for-web-developers.html

Colors   
https://sites.google.com/site/jilmactraining/multimedia_apps-tools-ccv/mm-assignments/color

Liquid Layout
 - Does it work on Phones & Tablets?
                       #wrapper {width: 100%; min-width: 300px; max-width: 2000px; margin: 0 auto;}
http://googlewebmastercentral.blogspot.com/2012/04/responsive-design-harnessing-power-of.html

-OR-
Multi-Media 
What is it & incorporate it into a web site

Recording:  http://experts.adobeconnect.com/p1t9fllrd33/
Challenge:  Star Wars - Scrolling Text  http://www.sitepoint.com/css3-starwars-scrolling-text/?utm_medium=email
&utm_campaign=SitePoint%20Newsletter%20October%2024%202012&utm_content=SitePoint%20Newsletter
%20October%2024%202012+Version+A+CID_39c798f82964baa7527c6f1cc2f15a9a&utm_source=Newsletter&utm_term=Create%20
Your%20Own%20Star%20Wars%20Scrolling%20Text%20in%20CSS3


Chap 15  1
wk
 Nov 13  11


Chap 16
Forms 
Responsive Design
http://webdesign.about.com/lr/responsive_web_design/1783580/1/?nl=1

Recording: http://experts.adobeconnect.com/p9mcuv09s8e
Challenge: Udacity has a free course on building a Game in HTML5 (doesn't start till 2013 - but is there anything else???? Research)
http://www.udacity.com/overview/Course/cs255/CourseRev/1?utm_source=udacity&utm_medium=newsletter&utm_campaign=october
  Chap 16  1
wk
Nov 20   12



Chap 17
Audio, Video, Multimedia
 
SEO - Search Engine Optimization and
SEM - Search Engine Marketing 

Recording: http://experts.adobeconnect.com/p1bw5i6jnxs/
        AND

SEO - by Zach Luse zach@paragondigital.com

http://experts.adobeconnect.com/p9anr5pxlva

Zack's http://www.paragondigital.com/pages/joomla-day-april-2013/

---------------------------------------------------------------------------
 Chap 17  1
wk
Nov 27    13




 Chap 18+19
 18-Tables
19-Scripts
 Page 504 in Text
http://dev.w3.org/html5/spec-author-view/global-attributes.html

Test your Web Site & your Project Web Site
  • Validate each page of your web site
Copying as Marketing--Thinking About Copyright 

Recording: http://experts.adobeconnect.com/p2moljl9hdp/
Challenge:
  New Boston's jQuery examples - get them going and EXPAND them
http://stweb.ccv.edu/CIS-1151-VS01-V12FA/jam08260/Assignment13/assignment13-NewBostonExamples/
Chap 18 & 19 1
wk 
 Dec 04   14





 Chap 20
Testing & Debugging Web Pages

and

Chap 21
Publishing your Pages on the WEB
Research of your choice -  pertaining to your Project

16 of the Most Common WordPress Mistakes  


An Hour of Code http://csedweek.org/

Recording went over JavaScript Rollovers, Google Sites Clickable Images
                  Advanced Google Search Bar
Recording: 
http://experts.adobeconnect.com/p4kii773932

Challenge:
 Find a Better Rollover, Install a Google Search Bar 

                 https://sites.google.com/site/jilmacgsites/intermediate-overview/search

                  Fill out the form http://www.google.com/cse/manage/create

                  MooTools Demo http://mootools.net/demos

                  World Scrolling http://stweb.ccv.edu/CIS-2140-VO01-V12FA/exs01180/Assignment13/animatedBackgnd_after.php

                  Image Reflection: http://stweb.ccv.edu/CIS-2140-VO01-V12FA/jbp04300/Assignments/Assignment13/after3/week13.php
                 

 Chap 
20 & 21
1
wk
Dec 11Project   Project Presentation  Review your project, update your Project Outline - this is the Bill that you will present to a Customer or Supervisor.  Make sure you include a PHASE II - for future work!

Recording: Assignment 14 & Forms with ALERTS http://experts.adobeconnect.com/p4hof5yvyyz 
Use Google's PageSpeed to optimize your site or another's site!
Installing PageSpeed for FireFox https://developers.google.com/speed/docs/insights/using_firefox#Installing

  5 days
Dec
16
 By Noon      All work: B+A, Research, Extra Credit & Project that you want included in your grade must be in your:
      STWEB,  Moodle, and/or Your Google Site.
      Note:  Students working on other WebServers - need to FTP a copy of their code to their STWEB, it doesn't have to be working on STWEB - but I must be able to see the code to grade you.
  

FireFox has an add-on for FTP-File Transfer Prototype.  FTP is how you will move your files from your Personal Computer to the Web Server 

FireBug is FireFox's debugger, Chrome has Tools > Developer Tools, IE has F12-Developer Tools
Comments