https://youtu.be/pxfQ_tHpvx8CIS-151  WebSite Development Assignments  

This page is an OVERVIEW with RECORDINGS 
The handouts are found on the Web-Handouts page 
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://htmlcssvqs.com/8ed/examples/
=================================
Assignment01  Jan 26+27  
=================================
Assignment02  Feb  02+03  due in 1 week
What's in WebSiteDevelopment_Assign02-14.doc
Review:    How to add UPLOAD(FTP) your B+A code to your Student WEB Server space
                  https://youtu.be/TSEsVRRcg6E  27 minutes - so take your time, rewind, and Breath!
                * it includes: How to look at the Files - your Default Browser and Default Editor
                * and Adding a Link to your Assignment Page 
                More Add links to your Assignment Page to link to your STWEB for each set of code
                 https://youtu.be/TXEpXyt43a4
 
Read:        Chapters 3-HTML and 4-Text
Research: How to you Learn what the  terms/definitions/acronyms mean?  
                What web sites do you use as resources?  LINK Coming Soon
                You may want to start a LINKS page on your Google Site - 
LINK Coming Soon
                        with the Resource Links that match your learning style.  These could include:
Look for Carousel examples of web images - HTML5
What is the Internet?  LINK Coming Soon
Internet in 5 min:  https://www.youtube.com/channel/UCo_81kKe5qkF0JVsUaJ6fYQ
TED Talk https://www.youtube.com/watch?v=XE_FPEFpHt4&index=9&list=PL413E7C354DCA07E3
Code Before & After examples
  • Chap 1, 3, 4 code examples LINK Coming Soon
  • FTP Client  LINK Coming Soon
  • FTP an index.html to your root space on STWEB  LINK Coming Soon
=================================
Assignment03  Feb  09+10  due in 1 week
What's in WebSiteDevelopment_Assign03-14.doc
Read:            Chapter 5 Images & Chapter 6 Links
Research:      WYSIWYG, Notepad++ and Image EDITORS
                    Images, sizing, and spacing.
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/

Before+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.

Assign
 Reading  Research and B+A's
Wk-4
Assign04

Feb 16+17



Due
in
1 wk

Chap 7+8
7-CSS
8-StyleSheet
 Research:    http://JilMac.com > Connect with JilMac  >  Enter your GUEST name (that can be recorded)
     We will create Tables on our Google Sites
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
Wk-5
Assign05

Feb 23+24

Due
in
1 wk
Chap 9+10
9-Define Selectors
10-Format Text
Research:

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/
Wk-6
Assign06

Mar
1+2

Due
in
1 wk
Chap 11
Layout with Styles
Research:
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
Wk-7
Assign07

Mar
8+9

Due
in
1 wk
 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
Wk-8
Assign08

Mar 15+16

Due
in
1 wk
 Chap 13
Working with Web Fonts 
Early Progress Reports 
Your Project Outline is also Due.
Research:
Join an On-Line Forum
Recording:  http://experts.adobeconnect.com/p1v18eds2h7
Changing Fonts, Colors & Background Images in Google Sites
JilMac is available by Phone and would welcome working with you one-on-one, set up a time!  802-254-8628
Wk-9
Assign02

Mar 22+23

Due
in
1 wk
Chap 14
Progressive Design
CSS3 Enhancements 
Research:
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
Wk-10
Assign10

Mar 29+30

Due
in
1 wk
Chap 15
Lists 
Research:

-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


Wk-11
Assign11

Apr
6+7

Due
in
1 wk
Chap 16
Forms 
Research: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
Wk-12
Assign12

Apr 13+14

Due
in
1 wk
Chap 17
Audio, Video, Multimedia
 
Research: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/

---------------------------------------------------------------------------
Wk-13
Assign13

Apr 20+21

Due
in
1 wk
 Chap 18+19
 18-Tables
19-Scripts
 Research:  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/

Wk-14
Assign14 

Apr 27+28

Due
in
1 wk
 Chap 20
Testing & Debugging Web Pages

and

Chap 21
Publishing your Pages on the WEB
Research: 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
                 

Wk-15

May 3+4
 Project  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!
Research:

All 
Work
Turned
IN

May
11
 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