WEB III: Advanced. Dates: Mondays, 6 9PM: June 2, 2014 August 4, Location Terra Building Room 1212

Transcription

1 WEB III: Advanced [Pick the date][type the sender company name] CE 2410 C/N 01 Summer 2014 Course Information Dates: Mondays, 6 9PM: June 2, 2014 August 4, 2014 Location Terra Building Room 1212 Instructor Information Name: David Chaplin-Loebell [email protected] Course Description Web III continues your use of forward-looking technologies such as HTML5 + CSS3 while adding to your knowledge of advanced JavaScript, client-side development and cross-browser testing and compatibility. Using media queries and multiple layouts, you will create a complex website that works on phones, tablets, laptops and desktops across platforms and browsers. Coursework combines design and development into a single cohesive workflow as you build a multi-page website for a client beginning with wireframes and technical specifications. You will create designs and mock-ups and go through a formal client review and revision process. Course topics rely heavily on lectures and critique as you work through your site. The result will be a complete marketing site for a client. Course Overview This course engages students in the web creation process by integrating HTML, CSS, JavaScript and advanced development techniques. Students will create an advanced interactive website using the full project lifecycle from planning to launch. The site will be tested for cross-browser compatibility; use media queries to identify types of displays, and will have multiple style sheets in order to format for each size of device as well as for different platforms. This course covers all phases of website development: planning, Information Architecture, design, layout, construction, launch, troubleshooting and usability. The course will address other advanced topics such as creating template pages and print pages, using includes to streamline site creation, form styling and function, understanding content management systems, using tables in content layout and HTML , and new techniques available in HTML5 and CSS3. Prerequisites Classes or Knowledge Required for this Course The prerequisite for this course is CE2413C Web II: Intermediate Course Objectives At the end of this course, students will be able to: Evaluate and identify client objectives, create measurable success points, and develop a comprehensive project scope that outlines development and implementation

2 Identify and complete the entire web site development process from discovery to user acceptance testing Identify key upgrades in HTML5 and CSS3 and current acceptable use for both Identify pitfalls with using HTML5 or CSS3 specifications and possible negative effects with noncompliant browsers Use templated HTML and CSS code. Integrate JavaScripts, animations, advanced styles, and forms into a fully functional website Create sites that change layout dynamically depending on device and screen resolution Course Resources Software Course will be conducted using Dreamweaver for code development. Students may use the software of their choice as long as it supports editing code directly. Books The book Responsive Web Design by Ethan Marcotte is highly recommended, in either print or electronic form. Lists of useful books, articles, and other resources will be distributed throughout the semester. Student Feedback/Communication I welcome all feedback on the course. My preferred method of communication with individual students is via . Students are offered the opportunity to complete an official mid-semester evaluation of the course. This evaluation is traditionally delievered + completed electronically at the beginning of the fifth class session. If you experience an emergency which will prevent you from attending class or completing required coursework on time, I expect you to communicate with me at the earliest reasonable opportunity. Please state the nature of the emergency and when you expect to turn in the coursework. Course Expectations and Evaluation General Expectations To complete this course, students are required to demonstrate proper use of HTML5 and CSS3 in the development of a multi-page website with multi-level navigation, JavaScript functionality, content, images, and a multiple style sheets for various media outputs and screen resolutions. Students will demonstrate an understanding of fluid and static designs, cross browser compatibility, troubleshooting, responsive design, search engine optimization and online marketing. Mini-Site and Project Site In order to facilitate an understanding of the course s aims, students are required to create two web sites. For the mini-site, the project is informal, and the topic may be personal or invented, but the site should represent a fuly-realized design concept. Page 2 of 8

3 For the Project site, students must select a client, complete formal research, present wireframes, designs, and working models, get client feedback, and deliver a completed site. In both cases, students are expected to revise work based on class feedback and to present their work, formally, in front of the class, at multiple stages of development. Class Presentations, Optional, and Participation Students are expected to present work to the group at least 3 times over the course of the semester, and to contribute to class discussions and to provide rigorous and instructive feedback to classmates while accepting constructive feedback from peers and instructor. There are two optional assignments in this course which may be completed and presented to the class for extra credit. Submitting Work Please submit all work by posting it online as instructed. DO NOT YOUR CODE FILES TO THE INSTRUCTOR. The Uarts system often rejects code files sent by due to spam/virus protections. Attendance Attendance is essential to your performance in class. I will not grant excused absences. 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. (It is acceptable to leave early during a working session if you have completed the work for the day). Missing two or more class sessions is likely to affect your grade, as you will not have full information for completing assignments and may miss opportunities to present your work to your peers. Grading Grades on assignments will be based on the course rubric (distributed with this syllabus). Grades for the class will be calculated using the following weights: Class Project 60% Mini-Site Project 20% Class Presentations and Optional 20% 100% University Policies 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 Page 3 of 8

4 facilitating academic dishonesty, and are subject to disciplinary action. (Please visit to review this policy in its entirety). 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: Schedule 1 June 2 Introduction to HTML5 and CSS3 Introductions and Project Ideas History of Browsers and HTML Considerations for touch devices New developments in HTML and CSS standards: browser support, applications, and usability of new styles; current standards of use Review of important aspects of CSS layout. Polyfills for browser support Begin creating a mini site using new tags and styles Test site in several browsers Start planning client-based project site Page 4 of 8

5 2 June 9 3 June 16 Media Queries and Responsive Design More Responsive Design Mini-site and client site progress Review appropriate uses for fluid, static, and elastic layouts Identify industry standard sizes and resolutions for web devices: phones, tablets, laptops, and desktops Media queries for determining device resolution Continue work on mini-site Research industry and competitor websites, style guide/inspiration board, themes and concepts for Project Site Style guide/inspiration board for project site Fluid images Testing media queries without having every device Typography in Responsive Design Implications of retina displays. What is a pixel? Vertical responsive design. Proportional heights; when is it appropriate to use media queries based on the screen height? Meta Viewport Print Pages Implementation work on Mini-site Create wireframes for Project site Prepare to present Project site style guide & wirefreames to client Page 5 of 8

6 4 June 23 5 June 30 Tables and HTML Usability and User Interface Concerns Explore tables in HTML and effective styling of tabular data Use table layouts to create a basic HTML page Identify limitations in HTMLS based on programs, browsers, readers and settings Evaluate designs for compatibility to tabular layout and identify potential pitfalls of common design elements Working with tables/html Mini-site issues and questions Adapt an existing design for Create HTML-only from design and test in multiple readers Client Meetings re: Project site, revise designs Complete Mini Site Mini-site Presentations Which navigation components suit different website purposes, task scenarios, and content types/structure Identify pros and cons of different menu styles; considerations for mobile/touch devices How users employ both search and navigation to complete tasks Explore approaches to interfaces, functional programs, forms Tools to help users complete tasks: analytics, games, help, progress indicators Consistency and standards, user control, recognition rather than recall, flexibility and adaptability of design Begin implementation for Project Site Architecture and wireframes for Project Site Create an HTML wireframe for a simple (5-6 step) application Page 6 of 8

7 6 July 7 Integration Open presentations: Client sites, HTML , Multi-step processes. Integrating Javascript widgets, Flash, audio and video Bug fixes and troubleshooting tools Project site Develop Project Site: primary CSS, layout, and navigation 7 July 14 8 July 21 Includes and Templates Testing and Debugging Open presentations Using includes to streamline code Templates and standardization in large site development Project site & templating Develop Project Site: template pages for main sections. HTML and basic CSS Open presentations Coordinating style sheets to minimize conflicts Tools for cross-browser testing Tools for CSS debugging Tools for Javascript debugging Project site Continue working on project site Page 7 of 8

8 9 July August 4 Finishing Touches Wrap-up Open presentations Early Final Project Presentations Analytics Search Engine Optimization Icons Form Styling and Validation Project site : Complete Project Site! Final project presentations Critiques and user testing Documentation, maintenance and user training Working Session (end of class) Final Questions/Difficulties Page 8 of 8