Web Design II. Location: Anderson Building (333 S. Broad St.) Rm 728 Dates: June 2 August 4 (Mondays, 6 9PM)

Transcription

1 Web Design II [Pick the date][type the sender company name] CE Summer 2014 Course Information Location: Anderson Building (333 S. Broad St.) Rm 728 Dates: June 2 August 4 (Mondays, 6 9PM) Instructor Information Name: R. Lee Creasy rlee@etherealnation.net Github: Policy: Yes. Course Description Students expand upon their foundations in HTML and CSS by designing and building more complex web pages that are designed and built to be displayed on multiple form factors. Students explore complex CSS and media queries and JavaScript to change webpage layouts for different browser sizes. Students examine user experience design techniques and responsive sites allow users to use webpages on any device. Course Overview This course exposes students to the functionality and structure of CSS media queries and responsive web design and development. Students will design layouts by form factor, learn to define breakpoints, manipulate a webpage s layout based on media query selectors, and learn about available responsive design frameworks. Course Expectations To complete this course students are required learn how to demonstrate proper use of advanced CSS and media selectors to design and develop a responsive website. Students will demonstrate an understanding of the purpose of a responsive website. In order to facilitate an understanding of the course s aims, students are required to complete formal research, present applications and working models for each project, make revisions based on class feedback and to present finished projects, formally, in front of the class. Students are expected to contribute to class discussions and to provide rigorous and instructive feedback to classmates while accepting constructive feedback from peers and instructor. Prerequisites Classes or Knowledge Required for this Course The prerequisite for this course is CE 2411 Web Design I.

2 Course Objectives At the end of this course, students will be able to: Use wireframes to plan, describe design and implement a site that functions on 3 form factors Compare and contrast advantages and disadvantages of using a responsive framework Identify and define what a breakpoint is in CSS Identify ways to change layouts using breakpoints Identify and use media queries in CSS to create breakpoints Identify common breakpoint positions and their related devices Compare and contrast advantages and disadvantages of using JavaScript or a JavaScript library Identify basic programming language constructs such as variables, objects and methods Identify the Document Object Model and the relationship between HTML and JavaScript Identify basic JavaScript DOM selectors and their jquery equivalents Identify what a JavaScript library is and how it could be used Use JavaScript to conduct basic form validation Present and critique HTML, CSS, and JS development Identify Quality Assurance process and bugfixing processes C OURSE RESO URCE S Software Documents in this course will be presented in.pdf format where possible. Students will need Adobe Reader to view these files, which you can obtain free at Course will be conducted using Sublime Text 2 for code development. Students may use any text editor or WYSWIG editor they are comfortable with and have access to. Textbooks Designing Multi-Device Experiences by Michal Levin (Multi) Head First HTML and CSS (HFHC) Head First JavaScript (HFJS) Web Design in a Nutshell (WDN) C OURSE ACTI V ITIE S Readings Approximately one chapter from the textbook and one or two additional readings will be assigned each week. Presentations Most weeks there will be an instructor presentation related to the readings. Students are expected to complete all readings before the weekly in-class presentation. The presentation will be focused more on expansion of the reading materials, so it is their responsibility to gain a basic understanding of the reading materials first. Quizzes 2

3 Students will be required to complete five No-pressure Quizzes. These quizzes will consist of independent learning excercises and/or performance-based exercised based on the readings + presentations. Assignments There will be weekly assignments for this course. Assignments will be presented in class. Students will be presented with any assignment-specific files. Critiques Assignments will be critiqued by the class on merits of design and source code. C OURSE POLIC IES Student Feedback/Communication Student feedback is welcomed and encouraged. Platform for communication will be discussed during class. Attendance Attendance is mandatory and essential to your performance. The information needed to complete assignments properly will be given in class. As a student in this course, it is your responsibility to make certain you obtain information covered should you miss a class session. Previously absent students must come to the following class with all of the appropriate work due for that day. All students are expected to arrive to class on time and remain present for the duration of the class. Be aware that tardiness and early dismissals will accumulate in absences. 2 absences = lowered grade 2 late arrivals / early dismissals = 1 absence 30 minutes late arrival/early dismissal = 1 absence Evaluation and Grading Homework Assignments 45% Final Project 45% Participation 10% 100% UNI VERSITY POLIC IES Academic Honesty Policy Code of Conduct Violations of academic integrity are considered to be acts of academic dishonesty and include (but ar not limited to) cheating, plagiarizing, fabrication, denying others access to information or material, and facilitating academic dishonesty, and are subject to disciplinary action. (Please visit to review this policy in its entirety). 3

4 ACT 48 Activity Hours To have ACT 48 Activity Hours for this course reported to the Pennsylvania Department of Education (PDE) you must complete and return the CE Request for Activity Hours Submission Form to the UArts Continuing Studies Office and meet all requirements outlined by the PDE. Student Code of Conduct It is the policy of the Division of Continuing Studies to provide a safe and healthy environment for learning, personal growth and enjoyment. The well being of this community depends upon the good judgment and considerate behavior of its members. Student status at The University of the Arts is not an unconditional right, but a privilege subject to certain rules and expectations articulated in the Student Code of Conduct. To review the Student Code of Conduct in its entirety, please visit: G RADI NG Your grade will be based on the following: Component Points Homework Assignments 45% Final Project 45% Participation 10% Total 100% Your grade will be calculated using the following scale: Grade Percentage Range Grade Point A % 4.0 A % 3.67 B % 3.33 B 86 83% 3.0 B % 2.67 C % 2.33 C 76 73% 2.0 C % 1.67 D % 1.33 D 63 66% 1.0 F 59% or less 0.0 I Incomplete - P Pass - 4

5 SCHE DULE SESSION/DATE TOPIC COURSEWORK DUE THIS WEEK 1 Introduction Housekeeping: Introductions Class policies Class Tools Skill assessment exercises What is JavaScript What can't you do with JavaScript? Window, document and location objects Outputting Text with JavaScript Using Arrays to Refer to Forms History & location objects Variables Expressions & Operators JavaScript Objects String Objects Date Object Assigned Reading (HFJS) Chapter 1, 2, 3 Recommended Reading (Multi) Chapter 1 (HFHC) Chapter 6 2 Program Control Event Handlers Incorporating JavaScript into HTML using the <SCRIPT> tag or by placing JavaScript within HTML tags Modularizing event handlers Attributes for the <SCRIPT> tag Hiding scripts from other browsers The concept of Program Control if -- else branching, while loops, for loops, calculating and nesting loops Functions: parameters, passing arguments, returning values, "multiple" returns, variable scope, local vs. global variables Functions' locations, at work, recursive functions, ways to call a function (HFJS) Chapter 4, 5 - (HFJS) Chapter 1, 2, 3 - Assignment 1 5

6 (Multi) Chapter 2 (HFHC) Chapter 7 3 Mouse Events and Arrays JavaScript object hierarchy Mouse events Status bar messages, scrollers, and clock RollOvers: right and wrong Changing images using onclick or using a hyperlink Arrays Browser detection (HFJS) Chapter 6, 7 (Multi) Chapter 3 (HFHC) Chapter 8 - (HFJS) Chapter 4, 5 - Assignment 2 4 Forms CheckBox Textfields Text String Management Document.write() Form Objects Form Elements Form Handlers Form validation intro Final project introduction (HFJS) Chapter 8, 9 (Multi) Chapter 4 (HFHC) Chapter 9 Assignment: Final project proposal - (HFJS) Chapter 6, 7 - Assignment 3 5 Form validation Troubleshooting Dependent questions Form validation Browser issues - (HFJS) Chapter 8, 9 - Assignment 4 - Project proposals 6

7 (HFJS) Chapter 10, 11 (Multi) Chapter 5 (HFHC) Chapter 10 6 jquery Benefits of jquery Getting started Document prep Special selectors Animation Simple AJAX (HFJS) Chapter 12 (Multi) Chapter 6 (HFHC) Chapter 11 7 Designing for Multiple Form Factors 8 CSS for Responsive Designs 9 Final project work Device size and design What is a breakpoint? Determining device Determining browser Mobile first (HFJS) Chapter 13 (Multi) Chapter 7 (HFHC) Chapter new selectors and more Flexible layouts Flexible grids Media queries The viewport Final project review and design critiques (Multi) Chapter 8 (HFHC) Chapter 13 Final project work in lab with instructor feedback 10 Final project Final project presentations - (HFJS) Chapter 10, 11 - Assignment 5 - (HFJS) Chapter 12 - Assignment 6 - (HFJS) Chapter 13 - Assignment 7 7

8 8