Embedded Files
CIS-2440-VO01 - Intermediate Website Development
Independant Study: Spring 2017
Last Taught: Fall 2014
Location: Online
Credits: 3 - Expect to spend 8 hours per week for 15 weeks on this class.
Day/Times: Meets online
Semester Dates: Jan -2017 to May 2017
Former Faculty: Jil MacMenamin previously: Meg McCarthy, JilMac or James Lambert) | View Faculty Credentials
Faculty Email: Jil@JilMac.com, jmacmenamin@ccv.edu
Hiring Coordinator for this course: Justin Head Justin.Head@ccv.edu Winooski Phone: 802-654-0588
Materials/Textbook/Lab Fees: $0
Course Description:
This course covers advanced topics in HTML and web design including server-side includes, cascading style sheets, and dynamic HTML. In addition, students will be introduced to extensible markup language (XML) and learn to incorporate XML documents into web pages. Prerequisites: Website Development and Programming for the Internet.
Essential Objectives:
1. Discuss the relationships between various markup languages including SGML, HTML, XML and XHTML.
2. Discuss the emerging research on Web design and usability, and explain how the guidelines growing out of this research can be applied to the design and development of effective, usable Web sites.
3. Discuss accessibility issues and limitations faced by Internet users with disabilities, and describe Web design strategies to mitigate or eliminate these limitations.
4. Describe the characteristics and application of cascading style sheets in Web design, and demonstrate their use in a multiple page Web site.
5. Create a sample Web page that incorporates a combined image map, and demonstrate the effective use of streaming audio and video in Web page design.
6. Demonstrate the use of DHTML components--style sheets, client-side scripts, and the document object model--in creating dynamic, interactive Web pages.
7. Describe the characteristics and applications of XML in Web design, and create and display a simple XML document in a Web browser.
8. Create a XML data island, and bind XML elements to HTML tags to display XML data in a formatted Web page.
9. Discuss the security and performance issues related to the use of Server-side Includes (SSI), and create HTML pages that incorporate SSI config, echo and include statements.
CIS-2440 Intermediate Web Site Development (changes recommended for 2015) Added Removed
This course covers advanced topics in HTML and web design including server-side includes, cascading style sheets, and dynamic HTML. In addition, students will be introduced to extensible markup language (XML) and learn to incorporate XML documents into web pages.
Prerequisites: Website Development and Programming for the Internet.
1. Discuss the relationships between various languages including SGML, current and past versions of HTML, CSS, XML, XHTML Javascript and PHP.
2. Discuss the emerging research on Web design and usability, and explain how the guidelines growing out of this research can be applied to the design and development of effective, usable Web sites on a variety of devices.
3. Discuss accessibility issues and limitations faced by Internet users with disabilities, and describe Web design strategies to mitigate or eliminate these limitations.
4. Describe the characteristics and application of cascading style sheets in Web design, and demonstrate their use in a multiple page Web site.
5. Create a sample Web page that incorporates a combined image map, and demonstrate the effective use of streaming audio and video in Web page design. Demonstrate the effective use of advanced multi-media elements such as animation and streaming video and audio.
6. (new) Modify the styles for a web site using a CSS framework and discuss CSS compilers such as LESS or Sas.
7. Describe the characteristics and applications of XML in Web design, and create a page that utilizes an XML file.
8. (was 9.) Discuss the advantages of security and performance issues related to of using Server-side Includes (SSI), and create a web page that incorporates PHP file includes. create HTML pages that incorporate SSI config, echo and include statements.
9. (was 6.) Produce a web site using current verisons of HTML, CSS --style sheets, client-side scripts, and the document object model (DOM), --in creating dynamic, interactive Web pages.
(Removed 8.) Create a XML data island, and bind XML elements to HTML tags to display XML data in a formatted Web page
A LOT has changed with CSS in the past 4 years.
Students studying CSS today have the option to concentrate on:
CSS3 Many of the things you had to learn JavaScript for ... are now incorporated in CSS3 http://www.w3schools.com/css/default.asp scroll down to CSS3 Tutorials
Bootstrap http://www.w3schools.com/bootstrap/default.asp
Integrate Bootstrap with WordPress https://code.tutsplus.com/tutorials/how-to-integrate-a-bootstrap-navbar-into-a-wordpress-theme--wp-33410
https://github.com/twittem/wp-bootstrap-navwalker There are a number of guides on using it. Here is one: https://jonbellah.com/bootstrap-navigation-wordpress/
Understrap is an interesting variation ... extremely minimal Bootstrap based WP theme https://understrap.com/ uses BS4(Bootstrap version 4)
So what should we study?
For our 1st assignment (5 points) - let's research them - this assignment should take about 4 hours - there is a lot to look over ... to see where we want this independent study to go.
Research consists of writing up 50 words for each point - with links to where you found additional information.
Then for the 2nd assignment (5 points) - Let's pick one of the bullet points we researched in Assignment 1 and set it up on the Student Web Server http://CLASSweb.ccv.edu and see where it leads. (JilMac will supply you with Login)
TEXTBOOK for 2017 - we will be using On-Line Resources of w3Schools, CodeAcademy and others.
Textbook for the 2014 class was:
CSS3 Foundations
Publisher: John Wiley & Sons, Incorporated ISBN: 9781118356548
Amazon's Price approx $25.00
To read the first Chapter at Amazon http://www.amazon.com/CSS3-Foundations-Ian-Lunn/dp/1118356543/ref=sr_1_1?ie=UTF8&qid=1399252301&sr=8-1&keywords=CSS3+Foundations
TreeHouse Training has a 14 day free trail https://teamtreehouse.com/subscribe/plans?trial=yes
Fall 2013 textbook data will be uploaded on August 7. We strongly suggest that you verify the information below with our online bookseller EdMap before purchasing textbooks from another vendor. If your course is at the Winooski center, check the UVM Bookstore for textbook and pricing information.
Syllabus:
Late assignments/Attendance
Regular attendance and participation in class is an essential component of a student's success in this course and is a completion requirement. Attendance is taken in the Discussion each week. Three or more absences will result in a non-passing grade. All assignments are expected to be completed and turned in on time. A late assignment will result in a full letter grade deduction for each day late.
Our weeks will run beginning Tuesday morning and end at midnight Monday. Assignments must be submitted by midnight Monday.
Assignments
Assignments
· Assignments will be graded on the following standards:
· Exemplary: Meets all standards for assignment on time. Student demonstrates complete understanding of topic. Code validates.
· Basic: Meets minimum standards for assignment and submitted on time.
· Code validates. Does not meet expectations: Assignment not submitted, coding not valid or a variety of other problems with assignment.
Final Project
A major part of the grade for this course is in the form of the final project (see the rubric for details.) The objective is simple: Build a 5-10 page quality website using the skills you have learned in this class. What makes a quality website, you might ask? It's a site that meets the goals you have defined for your users, provides clear navigation and consistent design, among other things. There are two things to remember about this project:
1. This is an exercise. Though you can build a website intended for use in the real world, there might be certain class requirements that you don't want for your site. Remember to meet the requirements for class - and change it later if need be.
2. We will learn a lot of things in this class, and using all of them in your final site is not required. There are some elements that are required, but to me, building a quality website does not mean jamming everything you have ever learned to do into a final product.
Course schedule
Week 1: Introductions and Research on what is NEW in CSS which approach we take for this Independent Study will shape the semester.
Week 1: Introductions and Research on what is NEW in CSS which approach we take for this Independent Study will shape the semester.
Students studying CSS today have the option to concentrate on:
CSS3 Many of the things you had to learn JavaScript for ... are now incorporated in CSS3 http://www.w3schools.com/css/default.asp scroll down to CSS3 Tutorials
Bootstrap http://www.w3schools.com/bootstrap/default.asp
Integrate Bootstrap with WordPress https://code.tutsplus.com/tutorials/how-to-integrate-a-bootstrap-navbar-into-a-wordpress-theme--wp-33410
Guide to using Bootstrap with WordPress: https://jonbellah.com/bootstrap-navigation-wordpress/ Code from GetHub: https://github.com/twittem/wp-bootstrap-navwalker
Understrap is an interesting variation ... extremely minimal Bootstrap based WP theme https://understrap.com/ uses BS4(Bootstrap version 4)
Research Assignment: Research each of the bullets above - spend at least 1 hour on each and give me 100 words with PROS and CONS, links to additional info, with a conclusion of what to concentrate on for this course. Your Research should reside in a file named Assign01.html in the root of your Student Web Server Space. Post a link to your file named Assign01.html in Moodle. There should be an external .css file formatting your Assign01.html
B+A Assignment: Set up your Student Web Server Space http://CLASSweb.ccv.edu
Post a Link to your Student Web Server with a index.html & external .css on Moodle
Week 2: What we see when we look at a website how it is displayed is different browser to browser and Screen With to Screen Width. This week, we will take a look at what causes these differences.
Week 2: What we see when we look at a website how it is displayed is different browser to browser and Screen With to Screen Width. This week, we will take a look at what causes these differences.
Web standards - what are they, why do we have them, how do they change & evolve http://www.webstandards.org/learn/external/css
How do you know what CSS features can be utilized by each browser and browser version? Can I Use is one utility http://caniuse.com
Research Assignment: Research each of the bullets above - spend at least 1 hour on each and give me 100 words. Post a link to your file named Assign02.html in Moodle. There should be an external .css file formatting your Assign02.html (Note this can be different or the same .css files as Assignment01) Your external .css file should reside in a css folder.
B+A Assignment: Install WordPress on your Student Web Server Instructions Space http://CLASSweb.ccv.edu Post a link to it on your Assign02.html file. One link should be how the WORLD sees your WordPress site, and the other link should be how you get to your ADMINISTRATOR Panel. Set JilMac up with READ/View capabilities.
Week 3: Server-side includes
Week 3: Server-side includes
Server-side includes allow you to make changes across a site by editing only one file.
Create an index.php that incorporates a menu system (why are we changing form .html to .php?? that is part of your research!)
Research Assignment: Research each of the bullets above - spend at least 1 hour on each and give me 100 words. Post a link to your file named Assign03.php in Moodle. There should be an external .css file formatting your Assign03.php (Note this can be different or the same .css files as your other Assignments) Your external .css file should reside in a css folder.
B+A Assignment: Lets create an index.php file and create: Header, Footer and Navigation for your Web Site. Update and rename your Assign01.html and Assign02.html files to be .php with Insert & Require php statements for the Header, Footer and Navigation files. Post a link to your index.php file in Moodle..
Week 4: Content Management Systems
Week 4: Content Management Systems
When you get to the level of Website creation where you are trying to get your visitors to enter information in order to purchase items or leave their email address, it can get really expensive to create the code to run a site with all of the Safety and Performance in mind.
Research Assignment: Research each of the bullets above - spend at least 1 hour on each and give me 100 words. Post a link to your file named Assign04.php in Moodle. There should be an external .css file formatting your Assign04.php (Note this can be different or the same .css files as your other Assignments) Your external .css file should reside in a css folder.
B+A Assignment: Post a link to your index.php file in Moodle.
Week 5: Accessibility
Week 5: Accessibility
Research Assignment: Research What is Accessibility
B+A Assignment: Add an Accessibility component to your WordPress site.
Week 6: Alphabet soup?
Week 6: Alphabet soup?
Research each of these terms: SGML, HTML, XML, XHTML, DOM, DOM
B+A Assignment: Find where there are XML files in your WordPress site - name them and tell me what they do
Research Assignment: Properly planning a website is critical to the site's success and quality.
Your Project Outline is your PLAN - write it up.
B+A Assignment: Create a new site - if it is going to be a WordPress site - create it
If it is going to be an HTML/CSS/JS site ... than select BootstrapCSS3/Understrat or other
from your Week1 research. Put it in a PROJECT folder in your Root Directory.
Week 8: CSS
Week 8: CSS
Research Assignment: Cascading style sheet allows us to separate content and design.
We will research styling websites
B+A Assignment: Post a link to an example of advanced CSS from your research.
Week 9: Putting it together
Week 9: Putting it together
Research Assignment: Let's take a look at how we will progress on our final project.
Let's lay down the skeleton of our site this week.
B+A Assignment: Post a link to an example of your skeleton in HTML/CSS/JS from your research.
Week 10: Image Maps and image optimization
Week 10: Image Maps and image optimization
Research Assignment: A picture is worth a thousand words “but how many words is an image map worth? An image map is a (usually) large image that has different clickable areas that link to different pages.
B+A Assignment: Post a link to an example of an Image Map from your research.
Week 11: XML
Week 11: XML
Research Assignment: What is XML and how can it be used in our websites?
B+A Assignment: Post a link to an example of an XML document from your research.
Week 12: Dynamic html, Audio and video
Week 12: Dynamic html, Audio and video
Research Assignment: When you are going to talk about dynamic html, you are going to want to know about client-side scripting. Research adding some audio and video, are their any libraries that can help you with this?
B+A Assignment: Post a link to an example of audio/video from your research.
Week 13: Getting people to your site
Week 13: Getting people to your site
Research Assignment: Making a great website is important but it doesn't do any good if nobody can find it. How do we get traffic to our site?
B+A Assignment: Post a link to an example of SEO from your research.
Week 14: Work on your final project
Week 14: Work on your final project
Research Assignment: Research something you want to learn for your final project
B+A Assignment: Post a link to an example from your research.
Week 15: WRAP IT UP!
Week 15: WRAP IT UP!
Finish your final project.
Please note: In order to receive accommodations for disabilities in this course, students must make an appointment to see the Americans with Disabilities Coordinator in their site and bring documentation with them.
Academic Honesty: CCV has a commitment to honesty and excellence in academic work and expects the same from all students. Academic dishonesty, or cheating, can occur whenever you present -as your own work- something that you did not do. You can also be guilty of cheating if you help someone else cheat. Being unaware of what constitutes academic dishonesty (such as knowing what plagiarism is) does not absolve a student of the responsibility, to be honest in his/her academic work. Academic dishonesty is taken very seriously and may lead to dismissal from the College.
STUDENT WORK
Michelle - HTML Work:
WordPress Site:
Project:
by Ian Lunn
Page updated
Google Sites
Report abuse