Rose Ferro
Office K218, Fall River

Bristol Community College
Rose.Ferro@bristolcc.edu
(508) 678-2811 x2027

CIS 162 Home

Welcome to CIS 162!
Applications for Web Development

Course Description: This course provides students with advanced Web theory and graphics. Students will learn how to analyze the needs and desires of the client or company as related to its Web presence and translate these objectives and goals into appropriate Web architecture. Students will also explore e-commerce issues relevant to this design. Students will work with software packages for graphics and Web page creation and learn to implement the graphic and interactive needs into the Web architecture. Pre or co-requisite: CIS 122 and CIT 131, or permission of instructor. Three lecture hours per week. Instructional Support Fee applies. Competency met: Technical Literacy (8.0) 3 credits Spring

This website will be updated often and will be your resource for learning about weekly homework assignments, quizzes, etc. Be sure to check it frequently! If you have any questions, please feel free to contact me via email. I am available for in person meetings if requested. I look forward to having all of you in my class and I look forward to a successful semester!

Final Exam

This is a take home final exam - it is also an individual assignment. If you have any questions, please don't hesitate to email me (at RFerroBCC@hotmail.com). Upon completion of your final exam, you should email it to me no later than 11:59PM on Sunday, May 14 with the email subject CIS 162 Final Exam Your Name.

Final Website: You have until the date of the final exam to submit any modifications that you may be working on for you client website to be considered toward your overall course grade. Please be sure to include the final website URL within the body of your email submission.

Homework #9

Final Website (status check in #2): You should now be well on your way to completing a majority of your client's website. As you continue to work, I would like you to review the following resources to assist you as you work to build a dynamic site for your client. Please send me an email with your client's URL for your second check in by May 2. Feel free to send any questions you may have along the way. I look forward to reviewing your progress.

JQuery Resources: I recommend that you begin researching mobile websites and JQuery. Below are a variety of links to help get you started.

Mobile Webpage Examples

Homework #8

Final Website (status check in #1): To give you more time to focus on your client's website, I will not be giving you an additional assignment for submission this week.  I would like to see what you have completed thus far posted online (which could be on cisweb) and available for preliminary feedback by April 17. To do this you will need to provide me with your URL. Please be sure to use the keywords "Feedback Requested" as part of your email subject. Please also be sure to test your website on multiple browsers prior to turning it in for review.

I recommend using your storyboarding skills, from earlier in the semester, as a guide to completing your website design. As part of your final client's website, you will need to include (at least) the items listed below. If you feel that anything in particular does not apply, per your client's consultation, it is important that you reach out to me by April 17 with specific details.

  • A main page, an "About" page, a "Contact Us" page, etc.
  • A functional navigation bar
  • A universal footer and header on each page
  • Appropriately incorporated images (royalty free images, images provided to you by your client,  and/or images that you have taken)

Optional (extra credit) Components

  • A favicon (extra credit)
  • A feedback form
  • A sitemap (linked via your page footer)

Remember to use your web application tool to your advantage. For the sake of this course, your website cannot be hard coded throughout. You should already be familiar with / using either Expression Web, DreamWeaver, and/or WordPress for the implementation of your client's website.

Homework #7

This week I would like you to focus on your client. If you have not already done so, you should be touching base / meeting with your client and getting your questions answered, based on what you have learned from your peer interview exercise.

Review the stages of a Web Client Analysis and other important information.

Due by April 4

Part 1: Critical / Competitive Analysis Considerations: What would you critically analyze on a competitors website? Identify at least three competitors of the company for which you are building a website. Write up at least two paragraphs identifying your criteria for selecting these competitors (include their URL). Then, for each of your competitors, come up with at least three unique consideration that you believe would be important to review as part of a competitive analysis. Reference your resources for additional details. Feel free to let me know if you have any questions.

Part 2: Conduct a Competitive Analysis and document your findings using MS Word. Your Competitive Analysis should contain screenshots and detailed descriptions that indicate why this company / website would be considered your client's competitor along with the remaining Competitive Analysis requirements found in your resources and / or your research.

Due by April 9

Part 1: Develop a Project Scope and Creative Brief for your final project. Using this layout, you will be able to better organize the needs of your client. These do not have to be a lengthy documents, however, they need to be thorough enough to provide you with the necessary details to successfully complete your project before the end of the semester.

Part 2: Interviewing is a essential in the web development process, especially if you plan to work for yourself. Based on your client interview, come up with a sketch / outline design of your client's website and submit it to me for review prior to submiting it to your client.

Reading/Resources

Homework #6

Post Spring Break Final Project Check In (due March 26): At the beginning of the semester, you were asked to identify potential customers for your final project. Please email me with an updated status of your client, considering the questions below. Note: The more you can share the better idea I will have regarding your progress.

  • Have you met with your client as of yet? If so, how many times?
  • Have you run into any issues staying in contact your client? Have they been resolved?
  • What is the status of your project? Are you still gathering data or have you begun your design?
  • Is there anything that you are having an issue with or do you have an area in which you would like some additional guidance / feedback?

Photoshop (due April 2): This week I would like you to spend some time working with Photoshop. For those of you that may not already have Photoshop, please download a free trial from http://www.adobe.com/downloads/. For those of you that would prefer to work on campus, Photoshop is available in K103 and K104, at the Fall River campus for your convenience. The lab availability is posted outside of each lab. It will be your responsibility to schedule time to work on your assignment when the lab is available.

Please note that the different labs have different versions of Photoshop installed on them. The resources that I am providing to you contain references to multiple versions as well. If you find that you will be utilizing a version, not referenced in any of the resources that I am providing to you, please be sure to conduct the necessary online research to further assist you.

Using the following tutorials you will learn about several of the tools available in Photoshop as it pertains to web design, specifically logos and buttons. Please note that the button dimensions in the PPTs listed below are a bit small. I would like to see the size of your buttons be a bit larger, but I will leave the dimensions free for you to decide upon.

Additional Resources

Homework Details

Part 1:

Option A: Recreate the Home button identified in the Photoshop PowerPoint tutorial that I have provided to you (using larger dimensions) along with two additional buttons (also with the larger dimensions); one for contacts and one for services. Save your .PSD files as bing_home.psd, bing_contact.psd and bing_services.psd. You will be responsible for submitting both the PSD (original Photoshop files) and the .GIF files. All of the filenames must be names accordingly and include both the default and rollover.

Option B: Design at least 3 buttons that would pertain to your own website. Save your .PSD files with the appropriate name format. You will be responsible for submitting both the PSD (original Photoshop files) and the .GIF files. All of the filenames must be named accordingly and include both the default and rollover.

Going above and beyond: Play around with Photoshop and apply different color and style combinations to get a better feel for the tool and its capabilities. Create at least one additional .psd file with a different look. Email both the .psd file(s) and the final .gif(s) for credit.

Part 2:

Option A: Using the techniques referenced in the PowerPoint tutorials, along with the skills that you have learned via online tutorials, create an image which combines at least 2 original (separate) photos. You should send me your originals along with your final image. Note: This does not have to pertain to your website, I want you to use this as an opportunity to explore Photoshop on your own

Option B: Use Photoshop to redesign a company Logo. Provide me with the original logo, your PSD file, and your final image.

Note: Each of your submissions should clearly identify which part (1 or 2) and which option (A or B) of the homework assignment you are submitting.

Homework #5 - Multi-Stage Process (see deadlines and resources below)

Key Topics for Review:

  • Review General Design Process
  • Client interview considerations
  • Group Activity (post online to class blog at http://cis162.wordpress.com) - be sure to read all of the steps for this assignment prior to beginning this process. Please email me if you have any questions ASAP.

Reading/Resources (re-posted): Client Interview Questions/Considerations

Overview - Interview Questions

I would like you to spend the next week or so getting to know one another. Although you will be creating your work individually, I find that it will be helpful for you to have the opportunity to bounce ideas off of one another. This course is not only about developing websites by using packaged applications rather than notepad, but it is about creating a successful user experience by pulling from the knowledge that you obtained in prior classes/experiences and building upon them.

We already have a course blog located at http://cis162.wordpress.com/. The newly posted blog assignments will not only help you get to know one another, but give you some experience in interviewing.

Interviewing is an essential component within the web development process, especially if you plan to work for yourself and/or as a freelancer. As part of this course you will be working with a client and will need to conduct an official interview. To practice your skills, process, approach, etc. you will be interviewing a classmate. Below are several steps that you will need to take in order to meet your assignment requirements, including reviewing two PowerPoint presentations that walk you through the expected process and outcomes.

Interview Process and Development Plan

Interview Preparation - Review the stages of a typical Design Process and Client Interview.

Due by Sunday, March 5

  1. Go to the class blog at http://cis162.wordpress.com/.
  2. Under the appropriate post, write a brief introduction of yourself to the class by identifying your name, your current degree/certificate program, your specific field of interest, your expected month/year of graduation, and the best way to contact you for your mock interview assignment.
  3. Come up with several interview questions that would help you meet the requirements of the mock scenario presented to you within this PowerPoint. I would like each of you to post at least four unique (non duplicated) interview questions to the class blog based on the mock scenario that has been provided to you. You are welcome (and encouraged) to ask more than four questions, however, I want to share your thought process amongst one another as you prepare for your interviews.

Due by Thursday, March 9 - please contact me if this deadline is an issue

  1. Conduct an interview with your client based on the mock scenario presented to you within this PowerPoint. When scheduling your interview, please be sure to consider the time you will need to spend playing the role of both the interviewer and interviewee.
  2. Provide me with a list of the questions that you have asked your client along with your client’s response (in MS Word).

Due by Wednesday, March 15

  1. Create your client's Bio page and email the link to me as well as post your client’s URL to the course WordPress Blog. Be sure that you are meeting both the scenario and your client's expectations. You should be sharing your progress with your client throughout the process (after your interview and before you submit your final design to me). Submit all of the designs that you have come up within your email.
  2. Post your Post-Process Reflection to your own blog and then post the URL to your blog under the appropriate section within the class blog.

Homework #4 (due midnight on March 2)

Similarly to your first assignment, you will be converting / recreating pre-existing documents into webpages. However, this time you will be required to use a web design / development tool with click and drag features. I would like you to choose between DreamWeaver and Expression Web as your tool for this and future assignments.

Resources

DreamWeaver: You can download a free trial of DreamWeaver directly from Adobe. Please note that the trail is for a limited time. There are also video tutorials as well as instructional tutorials available from Adobe as well as YouTube.

Expression Web: The entire Expression Web product (full version, not a trial) can be downloaded for free from Microsoft. There are also several video tutorials available on YouTube, including the following:

Working with Templates (Expression Web)

Please note that for both of these tools, you have the option to view the Code, the Design as well as a Split view (both). I recommend that you use the Split view as it will help you see how making modifications to the design effects the code and visa versa. Although, you may be familiar with the code aspect of developing a webpage, for the sake of learning the application, please aim to work with the GUI to help you become familiar with the application. If you have any questions along the way, please let me know.

Reminder: Similarly to the first way you approached this exercise, this is not a typing assignment. You should be copying and pasting all of the text from the document.

Content / Layout Files
    - Tobacco-Free Campus
    - Letterhead Logo

Note 1: Three of the links included within the last page of the Tobacco-Free Campus document do not work. Please replace them with the following (active) links:

Note 2: Rule of thumb is that if you have a link that leads from your website to an external source, the external site should be opened in a new window.

  • I would like you to create a main page named index.html that contains the letterhead (BCC logo and address), the page header "Tobacco-Free College Policy" (as it appears within the document - as similar as possible to the original font size, style, etc.), and a bulleted list with links. The links being, the main headings of each section i.e. Purpose, Policy, etc.
  • You will need to create the individual pages with the information specific to each of the sections (heading and content), name them and link them accordingly. i.e. The "Purpose" page will contain the heading and content within the PDF file specific to that page. The web page will be named "purpose.html" and will link from the "index.html" page.
  • Note: Your "Resources" page should include a bulleted list of the resources along with the URL. Each URL should link to the appropriate webpage via a new window i.e. target = "_blank".
  • Zip all of your files inside of a folder with the following name format: CIS162_YourName_IntroToWebTools.zip
  • Be sure to check your files prior to submission as well as include your image / image folder.

Upon completion, I would also like you to post this to your CISWeb account and reference that link within your individual WordPress site. Along with the link, I would like you to reflect on which of the tools you used to complete this assignments as well as a 2+ paragraph reflection on the process of using a tool to develop web pages.

Homework #3

Logo Designs (due by midnight on February 19)

I would like you to continue to build upon your idea book by identifying at least 10 different company identification headlines / logos that appeal to you. As you had done last week, I would like you to take a screenshot and place your findings in either PowerPoint or Word. This document should be separate from your last idea book guideline. For each of the company headlines / logos you select, I want you to identify the category of typeface to which it best fits. As you search the web, I would like you to be looking to identify at least 4 different typeface categories.

Reading/Resources:

To help prepare you for future assignments, I would like you to begin reviewing the resources provided below.

Reading/Resources: Client Interview Questions/Considerations

Homework #2

Key Topics for Review:

  • Review XHTML, HTML5, CSS, Web Standards

Additional Reading/Resources: To help you fresh your XHTML, HTML5, CSS, and Web Standards knowledge, I have provided you with some resources that should help.

Part 1 (due by midnight on February 6)

  • Final Project Rough Draft: Begin to brainstorm about the type of professional website you would like to create as your final project for this course. The business you choose, should be an existing (or start up) business with which you will be building / redesigning the company website for a client. Please consider a few potential options until you confirm whom will be your client for the semester. If you do not have someone in mind, please contact me ASAP so that I may assist you.
  • Part B: Send me a summary of your goals and potential considerations. Since this is early in the semester, it is possible that you may change your mind in the next week or two, however, I want you to at least have some key considerations (an potential clients) in mind from which you can build upon.

    Some things to consider:
    • Sector of Industry: Private/Public, Profit/Non Profit
    • Type of Business: Financial, Consumer Product, Service Based, etc.
    • Size of Business: Small, Medium, Large, How many employees are there?
    • Target Audience: Business Professionals, Children, Senior Citizens, Government Agents, etc.

Part 2 (due by midnight on February 10)

Intro Exercise:

In the business industry it is not uncommon for a web developer to be asked to convert a document into a webpage. Below, I have provided you with three documents and one of the corresponding images. The files are a combination of MS Word and PDF format. As an exercise, I would like you to create individual html files that (to the best of your ability) mimic the layout/look of the pages including lists, tables, images, etc. and validate Strict (I will also accept Transitional validation, however Strict will be worth more points).

You are not required to type the content. You may use Nitro PDF or an alternative PDF reader so that you can select the content and paste it into your webpage. Since we have not started using any web tools, I would like you complete this exercise using only Notepad (or a Mac equivalent).

Content / Layout Files
    - Citing Poetry using MLA Format
    - Email Group Guidelines
    - January 2012 NSO Agenda (You are not required to include the logo at the top. You should begin your page with the "New Student Orientation" heading.)

Associated Images
    - Pen (JPG)
    - Pen (GIF)

Homework #1

Week #1

Key Topics for Review:

  • Introduction to Course and Related Policies (see course syllabus)
  • Online Communication
  • Online Research Techniques (see Search Engine Tutorial under Required Reading)
  • Understanding Web Design: Effective / Ineffective Web Design

Homework #1 (due by midnight on February 2)

Required Reading

Online Communication

  • Research the following forms of online communication: blog, discussion board, wiki, and website.
  • Using a Word Processor (i.e. MS Word), identify the purpose of each of these forms of online communication and differentiate between them - compare and contrast them (i.e. Why would someone create a blog rather than a wiki, website, or discussion board? List some of the differences between them.)
  • Identify at least two examples of each and provide the appropriate references for your research.
  • Upon completion, email your Word document to me as an attachment using the required email subject and filename format.

WordPress

  • Do some research on WordPress. Be sure that you understand the difference between a .com and a .org WordPress site.
  • Create your own FREE WordPress.com website. You are not required to spend any money to create your site as part of this course. If you choose to upgrade your WordPress site, you may do so of your own volition, but again are not required to do so for this course.
  • Once your WordPress site is create, email your WordPress URL to me.

Prior Experience

·    Using the WordPress site you created, write 2-3 paragraphs explaining your computer background, experience with web development (which should include past courses), the software packages that you have experience with (this may include non-web development software), and your goal(s) for this course based on the course description. These goals may be either personal or professional.

Effective / Ineffective Web Design (Idea Book): Using either PowerPoint or Word, I would like you to create a virtual idea book that encompasses the list of items below. This should be accomplished by using the PrintScreen functionality. For each item, along with a thorough explanation of each of your selections, provide the URL for reference.

If you are using PowerPoint, your explanation (per website) should appear in the Notes section. If you are using Word, be sure that you are clearly corresponding your explanation with the appropriate website and feature.

  1. Find 5 webpages with attractive background designs that enhance the overall appearance of the page.
  2. Find 10 sites with unique artistic features. Circle the effect using a circle shape with no fill.
  3. Research the Psychology of Color as it relates to web design (identify your references). Find 5 sites that have applied the psychology of color effectively to enhance their street appeal. Explain why you came to this conclusion for each site you have identified.
  4. Research monochromatic, warm, cool, analogous, and complementary color schemes (identify your resources). Find 5 additional sites that have employed any of the schemes you researched. Clearly identify which color scheme was used in each of your samples.