Web Design I

UNIVERSITY OF WISCONSIN-MILWAUKEE

School of Information Studies

INFOST 240 – Introduction to Web Design

Summer 2016 SYLLABUS – Sect 201

Instructor: Adam Hudson Location: Northwest Quad Building B 3414

E-mail: Phone: (414) 229-3822

Office Hours: Local students may email for an appointment, otherwise email or the D2L discussion board is the best way to reach the instructor.

Meeting Times & Location: Online, no scheduled meetings

CATALOG DESCRIPTION:

Uses popular authoring tools to cover the basics of organizing information.

GENERAL DESCRIPTION:

• In this course students will learn the basics of the WWW and how to create basic web pages using HTML, and how to control the look and feel of web pages through the use of CSS.

• Students will learn how to add interactivity to static web pages using JavaScript while learning the basics of object-oriented programming.

• Students will learn how to work with fonts and graphic elements in HTML.

• Development of websites will focus on the perspective of the end user.

• Students will use a text or HTML editing program only for this course. You may not use any WYSIWIG editing programs such as Adobe Dreamweaver.

PREREQUISITES: INFO ST 230

OBJECTIVES:

Upon completion of the course, students will be able to:

1.  Connect to a server, upload files to the World Wide Web, examine the history of the www, and understand how the web communicates.

2.  Examine and be aware of the best practices for web design and usability.

3.  Create a web page using HTML; examine and understand different tags and attributes

4.  Control the layout and appearance of content through the application of CSS.

5.  Understand the basics of JavaScript and object-oriented programming and how JavaScript is used to add interactivity to web pages.

METHOD OF DELIVERY: Online

Students with special test and note-taking needs should contact the instructor as early as possible for accommodations. See policies below.

On-line Course Expectations:

• Many of you are preparing for careers as a professional, and the tone and formatting of your emails should reflect that. When emailing me make sure to include a subject relevant to the email in the subject line and address me by name (hey or no salutation at all is unprofessional). Also sign the email with your name so that the instructor doesn’t have to look you up in the class roster by your email id.

• Online learning assumes a high level of maturity, time management, and the ability to self-learn. Learning is more convenient but no less rigorous. The lack of formal schedule in an online course can be liberating. It can also be demanding because the student must determine when to make time for class.

• Please remember that you will spend as much or more time completing this course as you would taking it in a traditional, classroom-bound, format. Due dates are as "real" as they are in a traditional format.

• The following resources will help you if you have technical problems:

·  SOIS Distance Education: http://www4.uwm.edu/sois/online/,

·  UITS Help Desk: https://www4.uwm.edu/technology/help/campus/index.cfm

Students with special test and note-taking needs should contact the instructor as early as possible for accommodations. See policies below.

TEXTBOOK: None Required

Students are expected to digest the lecture notes each week which introduce the week’s concepts. Most of the lecture notes included audio embedded into the PowerPoint presentations. There are also video tutorials which run through the application of the concepts brought forth in the lecture notes.

Recommended Resources:

·  W3C HTML Tutorial: http://www.w3schools.com/html/default.asp

·  W3C CSS Tutorial: http://www.w3schools.com/css/default.asp

·  W3C JavaScript Tutorial: http://www.w3schools.com/js/default.asp

·  Lynda.com access: http://www4.uwm.edu/sois/resources/it/lynda/

o  Training library with courses on HTML, CSS, and JavaScript

o  Login with your ePanther username and password

TECH RESOURCES:

UWM Help Desk: http://www4.uwm.edu/technology/help/

SOIS Tech: http://www4.uwm.edu/sois/resources/it/, , (414-229-5275), NWQB 3432. The SOIS Tech office is open from 8am until 9pm during Monday thru Thursday and on Fridays from 8am until 5pm. Due to recent budget cuts the office is not open during the weekend so questions sent on the weekend will not be answered until the following Monday.

SOIS Virtual Lab: http://www4.uwm.edu/sois/resources/it/virtuallab/

The link includes information, tutorials, and login information for using the Virtual Lab.

COURSE SCHEDULE:

Week: / Topics:
1
(May 31 – June 4th) /

Introduction to the course, student introductions, course policies, and the D2L class site. Background overview of the internet and introduction to the World Wide Web. Using SOIS webspace account, creating content using a text editor and connecting to a server via FTP.

2
(June 5 -11th) /

Web Design Best Practices; usability, layout, color usage, mobile design. Basic structure and principles of an HTML form (input types and attributes), and structuring content using HTML tables.

3
(June 12 – 18th) / Introduction to CSS. Setting font type, size, color, and other attributes. Using CSS for page layout, styling different states of elements, layout using floats, div tags, span tag, margins, padding, etc.
4
June 19 – 25th) / Using CSS to enhance form layout and form input types. More with CSS including new developments within CSS3, current browser support, using CSS to create a responsive design template and using using CSS to create dropdown menus.
5
(June 26 – July 2nd) / Introduction to object-oriented scripting, basic constructs of scripting using JavaScript, and the Document Object Model. Programming concepts, syntax, and first functions working with objects visibility properties.
6
(July 3 – 9th ) / Manipulating an objects default properties using scripting and writing a routine Using HTML, JavaScript, and CSS together. Using JavaScript for simple data validation. Introduction to jQuery and creating an image gallery. Introduction to Responsive design (creating a CSS-based layout template).

ASSIGNMENTS:

Assignments are due on the specified date (midnight CST on the day it is due) *unless specifically noted by the instructor. Post the link to the assignment in the drop box on D2L. Grades will be reduced 2 points for each day that it is past due. Assignments submitted more than 5 days past the due date will not receive any credit. Assignments are worth 10 points each, so if an assignment is 1 day late 8/10, 2 days late 6/10, etc. Submissions that include an incorrect link (such as a link to the local file path rather than the url for the file hosted on your webspace account or the submission of an actual HTML file rather than the url) will receive a 1 point deduction.

Assignments compromise the largest part of your grade by far at 80% so it is important to submit work on time. Rules of academic conduct require that you not use the work of others without clearly indicating it as such. Academic misconduct may result in a lowered grade, no credit for a given assignment, or removal from the course.

If you are going to miss a deadline due to illness, emergency, etc please let the instructor know in advance. Reasonable accommodations can be made for students who inform the instructor in advance of complications meeting a particular deadline.

ASSIGNMENT DESCRIPTIONS:

Additional assignments may be assigned during the course of the semester. All assignments are worth 10 points except for the class introduction in week 1 which is worth 5.

Assignment: / Objectives: / Point Value: / Due:
Introduction to the class / 5 / Week 1
Creation of a home (assignment) page named index.html, and placing it on the web (using your webspace account). This can be used as a page for linking all of your subsequent assignments. / 1 / 10 / Week 1
Creation of your first web page using core HTML tags. / 1 & 3 / 10 / Week 1
Usability Assignment (comparison of website homepages based on certain criteria) / 2 / 10 / Week 2
Create an HTML form for a topic of your choosing. / 2 & 3 / 10 / Week 2
Create a short resume for you or someone else as an example and add some styling through the application of a CSS stylesheet. / 3 & 4 / 10 / Week 3
Layout a simple webpage using CSS to control how page elements are displayed. / 4 / 10 / Week 3
-Customize form input types with CSS / 2 & 4 / 10 / Week 4
-Creation of a page template using CSS / 3 & 4 / 10 / Week 4
-Create a dropdown navigation menu using the CSS visibility and z-index properties / 3 & 4 / 10 / Week 4
Create a page that sets the background and foreground (text) color of a page / 5 / 10 / Week 5
-Manipulation of image properties (border, width, height) through scripting.
-Writing a function and customizing the alert() method pop-up window / 3, 4, & 5 / 10 / Week 5
-Using JavaScript to validate an email address. / 3, 4, & 5 / 10 / Week 6
-Responsive layout
-Using jQuery to create an image gallery / 3, 4, & 5 / 10 / Week 6

DISCUSSION:

Class participation will be based on completion of assignments as scheduled, and contributions to class discussions (not required, but will positively impact your grade). Required discussions will be assigned throughout the course where you must participate (involves making posts to the D2L Discussion topic for that week). There will be 2-3 weeks during the semester where discussion is required for the assignment that week. More detail on the type and length of discussion posts will be given during the week in which it is assigned.

FINAL:

The final will be taken online through the D2L interface. The test consists of a mixture of multiple choice and T/F questions. All of the questions are drawn from the course lecture notes throughout the semester. You will have the final week of the course to take the exam between July 3rd and the 9th.

EVALUATION:

Undergraduate
Students
Assignments / 80%
Final / 20%
Total / 100%

GRADING SCALE:

93-100 / A / 73-78.99 / C
90-92.99 / A- / 70-72.99 / C-
89-89.99 / B+ / 69-69.99 / D+
83-88.99 / B / 63-68.99 / D
80-82.99 / B- / 60-62.99 / D-
79-79.99 / C+ / Below 60 / F

UWM AND SOIS ACADEMIC POLICIES:

The following link will take you to UWM pages/links which contain university policies affecting all UWM students.

http://www.uwm.edu/Dept/SecU/SyllabusLinks.pdf

Undergraduates may also find the Panther Planner and Undergraduate Student Handbook useful (http://www4.uwm.edu/dos/student-handbook.cfm).

For graduate students, there are additional guidelines from the Graduate School (http://www.graduateschool.uwm.edu/students/current/), including those found in the Graduate Student and Faculty Handbook: http://www.graduateschool.uwm.edu/students/policies/expanded/.

The following link will take you to pages/links which contain SOIS policies affecting all SOIS students.

http://www4.uwm.edu/sois/resources/formpol/policies.cfm