MAT-125 (Late Start – Spring)

MAT-125 Online (late start), Web Design Fundamentals

The Basics

Meeting Times and Place

  • Spring 2014 semester : 1.27.2013 – 5.19.2014
  • This is a LATE START class lasting 15 weeks
  • Class Meeting Place: ONLINE ONLY
  • Class Sessions: Weekly via Blackboard announcements and discussion boards
  • Office Hours: By appointment via Collaborate online conferencing tool. In-person appointments will not be available for this course.

Instructor Contact

Regular effective contact and interaction with the instructor will be maintained through weekly instructor-prepared electronic lectures and updates to the class website, weekly email announcements, active online discussion and question and answer forums, timely instructor feedback on student work, weekly online office hours (by appointment), synchronous web conferencing or screen-sharing sessions (by appointment), and through responding to student emails, phone calls, and/or other questions or postings in a timely manner. Students can reasonably expect to hear back from the instructor within 1-3 days (excluding weekends and holidays) for most inquiries. If the instructor expects to be absent and unable to post materials and/or respond to email or discussion forums in excess of three or four days, she will notify the class and make other accommodations. If you have concerns about instructor contact or any other regard, please refer to the section on Students Rights in the MiraCosta College catalog (http://catalog.miracosta.edu/academicpolicies/studentrights/).

IMPORTANT Class Deadlines!

The following dates apply to this class’ deadline schedule! These are not necessarily for other courses you are taking, as some classes start later than others!

  • 2/6 : Last day to drop without W and to receive a full refund
  • 2/27 : Last day to switch to Pass/No-Pass grading status
  • 4/23 : Last day to drop the class and still receive a “W” on transcript

NOTE: the instructor of this class WILL NOT agree to a late appeal for a grade change, removal of a W, or to help get a refund if the student fails to abide by the above deadlines. You have been warned.

Holidays:

  • 2/14, 2/17 : Washington’s and Lincoln’s birthdays observed
  • 3/10-3/15 : Spring Break

Instructor

Leigh Cotnoir, lcotnoir@miracosta.edu

Prerequisites

None.

Course Objectives

This course introduces the fundamentals of building Web pages including HTML programming, CSS, effective images/backgrounds, interface design, and SFTP protocols for uploading Web sites. Students also learn the management techniques for personal Web pages, browser and platform issues, as well as the basics of network protocols.

At the end of this course a student will be able to:

  1. execute intermediate-level HTML programming skills, including debugging techniques;
  2. implement practical image editing techniques for web display;
  3. repurpose content from other media to web delivery;
  4. implement fundamental design principles into user interface designs;
  5. upload, update and maintain a basic web site;
  6. evaluate various web browser differences and functionalities;
  7. implement fundamental skills in file management and server techniques.

Students will be expected to achieve these goals through assignments, demonstrations, lectures, and critiques. It is important to learn from both instructors and peers to better understand the context and originality of your own work. Participation is critical in learning new techniques, approaches, and ideas in design.

Student Learning Outcomes

The Miracosta faculty believe that students who complete one or more certificates or degrees are systematic, critical, creative thinkers and clear communicators who are intellectually curious, technically proficient, professional, and aesthetically literate. To that end, the faculty have identified seven Student Learning Outcomes (SLO’s) that apply directly to the high-level skills you are expected to possess for the professional workforce:

  • Technical Skills
  • Application of Discipline Skills
  • Critical Thinking and Problem Solving
  • Communication
  • Professional Behavior
  • Aesthetic Literacy and Appreciation
  • Global Awareness and Responsible Citizenship

Specifically, when you have completed this course, you should be able to:

  • Apply HTML and CSS coding techniques to construct and format web pages using modern web standards.
  • Demonstrate and employ effective and efficient web-server skills and techniques.
  • Arrange, assemble and construct a web-based project and deliver in appropriate format.

Need Technical Help or Advice?

http://www.miracosta.edu/apps/studenthelp/default.html
While I will do my best to help students out in all areas, I will not be acting as technician during this course. Your system is your responsibility. I cannot troubleshoot your system problems.

Students With Disabilities

If you have specific physical, psychological or learning disabilities and require accommodations, please let me know early in the semester so that your learning needs may be appropriately met. You will also need to provide documentation of your disability to Disabled Students Programs & Services at 760-795-6658.

Course Requirements

Required Textbooks:

Learning Web Design: A Beginners Guide to HTML, CSS, JavaScript, and Web Graphics Fourth Ed.Edition
Fourth Ed.
Author(s): Jennifer Niederst Robbins
ISBN10: 1449319270
ISBN13: 9781449319274
O’Reilly Press

Recommended Books

HTML Dog: the Best-Practice Guide to XHTML and CSS
Author: Patrick Grifiths
ISBN: 0-321-31139-6
New Riders Press

HTML5 For Web Designers
Author: Jeremy Keith
ISBN: 978-0-9844425-0-8
Paperback: 85 pages
Abookapart Press

Software and Computer

Because this is an online course, students are expected to have access to a computer that meets the minimum requirements of Miracosta’s browser-ready guidelines. Furthermore, it is the instructor’s recommendation that students also have decent speakers or a headset to listen to video lectures and tutorials, as well as access to high-speed internet (cable, DSL, or better connection). Students on dial-up modems might experience some problems getting the content delivered in a timely or useful manner.

Software that you need is as follows:

  • A Simple, Free Code Editor (recommendations below)
    • REQUIRED FOR ALL USERS: Komodo Edit free editor (Mac and PC)
    • Special Note: If you already have Dreamweaver and want to use it, you may. The instructor will not be teaching this course as a Dreamweaver course, but you are free to use it as a code editor. It does, admittedly, have very good color coding and “Find-and-Replace” features. The instructor will not be supporting Dreamweaver troubleshooting, though.
  • Free SFTP Program for Conecting to the Server (recommendations below)
  • Design Software (recommendations below)
    • Adobe Photoshop (STRONG recommendation!). You can download 30-day free trial of Adobe Creative Cloud when it is time.
      • Adobe has changed its licensing method so that “CC (Creative Cloud)” is the product they push. Creative Cloud is a subscription service to the software with a monthly fee that provides all Adobe software. The rates can be confusing, but at the present time, the rates from Adobe’s site are as follows:
        • First month of Creative Cloud subscription free with trial.
        • New customers with NO annual commitment: $29/month. Can cancel at any time.
        • New customers with annual commitment: $29/month for full student CC subscription with annual commitment. This gives students access to ALL of Adobe’s apps. Effectively $348/year. Software stops working when subscription expires.
        • New customers with annual commitment: $19/month with annual commitment for Photoshop ONLY. Effectively $228/year. Software stops working when subscription expires.
        • New customers: Student version of Photoshop CS6 perpetual license (not a subscription) $349. Does not expire. This is only for the Photoshop application.
        • Explore Creative Cloud plans here: http://creative.adobe.com/plans
    • Adobe Illustrator (OPTIONAL. Great tool if you know how to use it!)
    • free online image editor Pixlr
    • free GIMP Image Editor (http://www.gimp.org/)
  • Browsers (only two required, but several are recommended for testing)

Here is what the instructor recommends NOT USING:

  • Notepad (PCs)
  • TextEdit (Macs)
  • Why??? They have no syntax color coding features, which makes it VERY hard to troubleshoot errors. Also, TextEdit can actually store formatting info in its files, which will really confuse you and mess you up.

Completion of Work

You are required to check into the class each Monday to see what you are responsible for doing each week. You will look in the Blackboard “Weekly Schedule!” link to find the current week’s folder. Weekly folders will be made available at the start of each week. Each weekly folder is divided up into sections of: Assignments, Lectures/Tutorials, and Readings/Browsings. Most assignments will be much easier if you do your readings and lectures first (or concurrently)!

You will be expected to complete ALL assignments. Incomplete assignments will be evaluated as-is when turned in. Late work can only be turned in up to one full week late after the original due date (with a grade reduction). As the course progresses, students can expect to spend, at a minimum, approximately 6-8 hours a week working on this course’s content to be successful.

Discussion Boards

You will be expected to participate in Discussion Boards almost every week, and sometimes more than once a week. In a normal classroom environment student-to-student interaction is just as important as student-to-teacher interaction; this is also true in an online learning environment. Because students will not be participating in any group projects for this course, the Discussion Boards are intended to encourage students to communicate with and help one another—just as they would in an on-ground classroom. Discussion boards will show up in your “Weekly Schedule!” folder as they are progressively assigned.

With the understanding that our class weeks will be Mondays 12a.m. – Sundays 11:55pm, you will make weekly posts according to the instructions in each individual discussion forum. Be aware that each forum has different requirements and due dates, so follow instructions to receive credit. You will NOT receive “late” credit for discussion boards, as they are specifically to engage you at that point in the course, as if you were in class. There is a technical help forum, however, to which you will contribute throughout the semester, which has a much longer-range due date. You may contribute as many posts as you want, as long as you meet these minimum requirements for credit. This participation will help the class stay lively, allow students to play active roles in helping other classmates, and foster a better understanding the course material. These forums are intended to serve several discussion roles:

  • Act as technical help boards for peer-to-peer help
  • Act as a place for students to share observations about web design techniques, methods, and trends
  • Serve as a place for students to share course-relevant design news and links
  • Serve as a place for students to share their own web work links and get constructive feedback / critiques
  • Discover that other people are experiencing similar problems, and find similar resolutions
  • Share observations about problems in scripts, misprints in the book, etc.

Lastly, some common sense rules apply to these forums: always be constructive in your criticism; always be respectful and courteous, and use good judgement so as not to post offensive material.

Critiques (For Credit)

It is imperative that each student contributes to each critique. A dialogue of constructive criticism is what helps artists and designers find weaknesses and strengths in their work. These sessions are important tools in refining your own self-critiquing and design processes. We will have online critique assignments for each project, either through discussion boards or Elluminate Live. Critiques will be assigned during the semester.

Drawings, Artwork, Comps

With each project, you will be required to create either hand sketches or computer drawings of web wireframes and layout design ideas before embarking on the full-scale project. You will need to create these precursory drawings with a computer design tool (likely Illustrator or Photoshop), or you can can digitize your hand sketches ona flatbed scanner. All materials turned into the instructor must be in digital format.

Because the majority of web users are sighted viewers (not blind), this course will also place an emphasis on the visual presentation aspect of design in addition to the purely technical components. It is a marketplace reality that users respond best to strong visual design and functional presences in websites, which further challenges and complicates the job of the web designer. Integrating a strong visual design front-end and a cohesive technical back-end will be one of the challenges in this course. Thus, knowing industry-standard graphic design tools such as Adobe Photoshop and/or Illustrator will be very helpful to your success in this course. You will be expected to use these tools on a regular basis to produce and prep artwork for comps and final web graphics.

Grading Policy

You may only turn in a project late up to one full week after the original due/critique date. Any work later than one week overdue will automatically receive an “F” without an excuse from a doctor, court, or police report. If you know you will be unable to complete work on time, please discuss it with the instructor in advance! Please note that your grade will automatically drop by 10 points for late work. This means that if work is up to a week late, your highest possible grade begins at a 90.

The final project is the exception! ******NO LATE WORK ACCEPTED FOR THE FINAL.******

Class Participation

This is an online course, so class participation is monitored in a variety of ways. While there is not a specific “Participation” evaluation value in your final grade, your level of participation will often help determine borderline grades, flexibility in missed work, etc. Participation is monitored through the following outlets:

  • meeting progressive deadlines for samples, preliminary sketches, etc.
  • contributing in a timely fashion to the discussion boards
  • critique participation
  • clear communication with the instructor and peers

Grading Breakdown:

  • Exercises :: 60% (exercises are not all weighted equally; they increase in value)
  • Discussion Forums :: 10%
  • Final Project :: 30%
  • Each project will take participation into account for borderline grades.Participation will be determined by the criteria outlined in the previous section.

Letter Grade Assignments

 
Letter Value Numerical Value
A 90-100
B 80-89
C 70-79
D 60-69
F 0-59

 

Completed projects will be graded on the following criteria (OVERVIEW):

  1. Instructions (did you follow technical instructions for the assignment?)
  2. Craftsmanship (is the finished piece and presentation clean and well-crafted?)
  3. Overall Composition and Creativity (did you understand and successfully execute the problems presented?)

For detailed grading criteria, you will need to refer to each project outline page.

Grading Definitions

  • A = Outstanding achievement: available only for the highest accomplishment
  • B = Praiseworthy performance: definitely above average
  • C = Average: award for satisfactory performance, most common undergraduate grade.
  • D = Minimally passing: less than the typical achievement.
  • F = Failing.

**No incompletes will be given without EXTENUATING circumstances.

Digital Art, Design, and Communication Education