UNIVERSITY OF WISCONSIN-MILWAUKEE School of Information Studies

INFOST 320 – Advanced Web Design - 3 credits Spring 2015 – section 201

Instructor: Adam Hudson Location: Northwest Quad, Building B 3414 E-mail: [email protected] Phone: (414) 229-3822

Meeting Times & Location: Online, new material and assignments are posted on a weekly basis for each of week of the semester.

CATALOG DESCRIPTION:

Instruction and examination of advanced technologies and practices being employed in Web usability and design.

GENERAL DESCRIPTION:

 Use the latest open source web technologies including; CSS3, HTML 5, and JavaScript libraries to design more advanced webpages  Learn about web standards, current best practices, and how to write valid code for optimal cross-browser and device compatibility  An introduction to HTML 5 and the changes/capabilities it presents for web developers  Focus on accessible and responsive design for an enriched end user experience  Learn about technologies including; API’s, designing for mobile and other non-desktop devices, responsive design, CSS3, CSS Flexbox, and jQuery.

PREREQUISITES:

INFOST 240

OBJECTIVES:

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

1. Build more user friendly websites through their understanding of color & font usage, visual hierarchy, and other layout principles. 2. Understand the major enhancements in HTML 5 and how these will affect web development in the future with respect to form design and including audio and video content. 3. Use new enhancements available in CSS3 to create better designs for a more enriched user experience. 4. Have a basic knowledge of Web APIs like Google Maps, and JavaScript libraries like jQuery. 5. Have knowledge of responsive design and be able to create designs that seamlessly adjust to different devices and screen sizes.

WORKLOAD: Advanced Web Design Page 2 of 6 Students should be prepared to devote 6-8 hours of time to the course per week. This includes digesting the weekly notes, tutorials, and supplemental readings. Since this is a task-based course, a large portion of the time will be committed to completing weekly homework assignments.

TEXTS:

There is no required textbook for the course.

Students are expected to digest the lecture notes each week which introduce the week’s concepts. A majority 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

METHOD:

Lecture, discussion, and demonstrations

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

Addressing Emails:

Many of you are preparing for careers as a professional, and the tone and formatting of your emails should reflect that. When emailing the instructor make sure to include a subject relevant to the email in the subject line and address the instructor by name (hey or no salutation at all is unprofessional). Sign the email with your name and class section so the instructor knows which course you are referring to.

TECH RESOURCES:

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

SOIS Tech: http://www4.uwm.edu/sois/resources/it/, [email protected] The SOIS Tech office is open from 8am til 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.

Lynda.com access: http://www4.uwm.edu/sois/resources/it/lynda/ Advanced Web Design Page 3 of 6 Resources for SOIS students on IT related topics, includes many useful tutorials.

COURSE SCHEDULE:

Week: Topics Scheduled to be Covered: 1 Introduction to the course policies, format, class introductions, content to be (Jan. 25th -30th) covered, setup SOIS student webspace, and begin review of HTML/XHTML 2 Review of HTML/XHTML and CSS and how they work together (Jan. 31st – Feb 6th) 3 Importance of color, font, layout, and visual hierarchy in creating an enriched user (Feb. 7th – 13th) experience. Introduction to HTML5 4 Discussion of HTML 5 and new features including; new section tags, and new (Feb. 14th -20th) form input types and selectors 5 Continue with HTML 5. Video and audio elements; what is new with HTML5 (Feb. 21st – and file editing and conversion. 27th) 6 CSS3 and the latest additions including; using CSS for animation, font types (new (Feb. 28th Mar. font libraries), and introduction to the different types of transitions – 5th) 7 Introduction to responsive design: devices, platforms, screen-size, markup, and (Mar. 6th – 12th) media queries. Mar. 13th – 19th Spring Break Week 8 Continue with responsive design (Mar. 20th – 26th) 9 Continue with responsive design and introduction to CSS Flexbox (Mar. 27th – Apr. 2nd) 10 JavaScript and the DOM review. Introduction to JavaScript libraries, including (Apr. 3rd – 9th) the most popular, jQuery 11 Continue working with jQuery; jsLettering to control individual letters with CSS, (Apr. 10th – 16th) over-ride default HTML video tag controls for cross-browser compatibility 12 Continue working with jQuery; effects like fade, animation, and image galleries (Apr. 17th – 23rd) 13 Introduction to the Google Maps API; inserting a map into a webpage and (Apr. 24th – customizing it 30th ) 14 Continue with Google Maps API, adding markers, placeholders, etc. (May 1st – 7th) 15 Final Exam (May 8th – 10th) Advanced Web Design Page 4 of 6 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 60% so it is important to get your work in 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:

This is not an exhaustive listing of assignments; others may be assigned throughout the course of the semester.

Description: Due: Setup SOIS student webspace Week 1 HTML review – Registration Form Week2 CSS Review – layout concepts and the box Week 3 model HTML 5 new form features Week 4 HTML5 video/audio editing and semantic Week 5 elements CSS3 box, text, and color properties Week 6 CSS3 Animation and transitions Week 7 Responsive Design layout Week 8 Responsive Design layout (Lynda.com course) Week9 Layout using Flexbox model (2 different Week 10 assignments) JavaScript Image gallery Week 11 jQuery properties and events Week 12 jQuery events and image gallery and creating Week 13 custom video controls using jQuery Hometown Map Assignment Week 14 Google Maps markers & info windows Week 15 Advanced Web Design Page 5 of 6

MIDTERM:

The midterm will be taken via D2L. The test will consist of a mixture of multiple choice and T/F questions. There are 10 T/F questions and 30 multiple choice questions. All of the questions are drawn from the course lecture notes and assigned readings. The midterm is worth 20% of the overall course grade. The midterm date will be announced in the middle of the semester and you will have the entire week to login and take it during the week it is assigned.

FINAL:

The final will be taken via D2L. The test will consist of a mixture of multiple choice and T/F questions. All of the questions are drawn from the course lecture notes and assigned readings. The final is worth 20% of the overall course grade. The final is taken the last week of the semester and you will have the entire week to login and take it during the week it is assigned.

EVALUATION:

Criteria Percent of Grade Assignments 60% Midterm 20% 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 links contain university policies affecting all SOIS students. Many of the links below may be accessed through a PDF-document maintained by the Secretary of the University: http://www.uwm.edu/Dept/SecU/SyllabusLinks.pdf. Undergraduates may also find the Panther Planner and Undergraduate Student Handbook useful (http://www.uwm.edu/Dept/OSL/DOS/Handbook2005-06.pdf). Students with disabilities. If you will need accommodations in order to meet any of the requirements of a course, please contact the instructor as soon as possible. Students with disabilities are responsible to communicate directly with the instructor to ensure special accommodation in a timely manner. There is comprehensive coverage of issues related to disabilities at the Student Accessibility Center Advanced Web Design Page 6 of 6 (http://www.uwm.edu/Dept/DSAD/SAC/MainOffice.html ), important components of which are expressed here: http://www.uwm.edu/Dept/DSAD/SAC/SACltr.pdf. Religious observances. Students’ sincerely held religious beliefs must be reasonably accommodated with respect to all examinations and other academic requirements, according to the following policy: http://www.uwm.edu/Dept/SecU/acad%2Badmin_policies/S1.5.htm. Please notify your instructor within the first three weeks of the Fall or Spring Term (first week of shorter-term or Summer courses) of any specific days or dates on which you request relief from an examination or academic requirement for religious observances. Students called to active military duty. UWM has several policies that accommodate students who must temporarily lay aside their educational pursuits when called to active duty in the military (see http://www3.uwm.edu/des/web/registration/militarycallup.cfm), including provisions for refunds, readmission, grading, and other situations. Incompletes. A notation of “incomplete” may be given in lieu of a final grade to a student who has carried a subject successfully until the end of a semester but who, because of illness or other unusual and substantial cause beyond the student’s control, has been unable to take or complete the final examination or some limited amount of other term work. An incomplete is not given unless the student proves to the instructor that s/he was prevented from completing course requirements for just cause as indicated above (http://www.uwm.edu/Dept/SecU/acad%2Badmin_policies/S31.pdf). Discriminatory conduct (such as sexual harassment). UWM and SOIS are committed to building and maintaining a campus environment that recognizes the inherent worth and dignity of every person, fosters tolerance, sensitivity, understanding, and mutual respect, and encourages the members of its community to strive to reach their full potential. The UWM policy statement (http://www.uwm.edu/Dept/SecU/acad%2Badmin_policies/S47.pdf) summarizes and defines situations that constitute discriminatory conduct. If you have questions, please contact an appropriate SOIS administrator. Academic misconduct. Cheating on exams and plagiarism are violations of the academic honor code and carry severe sanctions, ranging from a failing grade for a course or assignment to expulsion from the University. See the following document (http://www.uwm.edu/Dept/OSL/DOS/conduct.html) or contact the SOIS Investigating Officer (currently the Associate Dean) for more information. Complaints. Students may direct complaints to the SOIS Dean or Associate Dean. If the complaint allegedly violates a specific university policy, it may be directed to the appropriate university office responsible for enforcing the policy. Grade appeal procedures. A student may appeal a grade on the grounds that it is based on a capricious or arbitrary decision of the course instructor. Such an appeal shall follow SOIS appeals procedures. These procedures are available in writing from the respective department chairperson or the Academic Dean of the College/School (http://www.uwm.edu/Dept/SecU/acad%2Badmin_policies/S28.htm). Examinations, Finals. The Secretary of the University is authorized to prepare the final examination schedule. The time of the final examination for an individual or a class may be changed only with the prior approval of the dean or director of the respective college/school. The change will involve a postponement to a later date. For individuals with exam conflicts, a separate week at the very end of the exam week will be reserved to take one of the conflicting exams (http://www.uwm.edu/Dept/SecU/acad+admin_policies/S22.htm