1
2
CHAPTER ONE
PROJECT PROPOSAL GROUP PROPOSAL
This online course will introduce the intermediate level designer/programming student to the wonders of the responsive website. Responsive websites have become almost a necessity, because websites are now being looked at on such a variety of screen sizes. No longer is it acceptable for a website to only look good on one screen size, and most companies don’t want to pay to have three unique sites designed. An affordable and increasingly popular option is to design one website that can comfortably scale from the widest cinema display all the way down to the smallest mobile phone display.There is a growing demand for designers who can create such sites, and students who take this course will be fully prepared to fend off job offers left and right. Learning Outcomes • The student will design and code a fully responsive website by the end of the class. • The student will comfortable converting rigid pixel-based grids into percentage based grids. • The student will understand the unique challenges of each size browser–mobile, tablet and desktop–and can design with them in mind. Requirements • Comfortable coding in HTML, CSS, and Javascript/JQuery • Comfortable designing in a browser (designing on a grid, pixel based measurements, web-fonts, interactive elements etc)
3
PROJECT PROPOSAL CONT Course Policy Every student has 48 hours to complete their work. Any projects or assignments that are turned in late will be deducted an entire letter grade. Afterwards, half a letter grade will be deducted per day. If a student anticipates being late to their selected session time, they have the option to reschedule for another session, but points will be deducted for tardiness after 5 minutes. Failure to attend 3 classes will result in a full letter grade deduction. If the student misses any additional classes, they will be given an alternate assignment for whichever section to prevent them from finding answers off the original assignment. Any students who have attended all session will receive 5 bonus points awarded towards their lowest project grade. There will be no make-up or alternates for late projects. Projects must be submitted online on the given due date. Any late submissions will not be accepted. If students anticipate an emergency, please provide necessary documents and file for an extension. Extensions should be requested 12 hours in advance. Work must be submitted within the next 24 hours.
Grading Policy
4
This entire course is weighed as
A+ (100%-97%)
followed:
A (96%-93%)
Project 1 (20%)
A- (92%-90%)
– Authoring (10%)
B+ (89%-86%)
– Design (5%)
B (85%-83%)
– Process (5%)
B- (82%-80%)
Project 2 (20%)
C+ (79%-76%)
– Authoring (10%)
C (75%-73%)
– Design (5%)
C- (72%-70%)
– Process (5%)
D+ (69%-66%)
Assignments (13 total – 6.15%
D (65%-63%)
each)
D- (62%-60%)
Total: 100%
F (under 60%)
LEARNING MADE EASY AS PIE! Whiteboard encourages student to student interaction with the livechat feature, forum, and student gallery. Our course is project-based learning through exercises that will contribute as a part of your final project. This course has been created to ensure consistency. It offers a structured and predictable schedule, where you will always know what is due on the homepage.
5
PROJECT PROPOSAL CONT Final grades will be posted within 24 hours after submitting your final project. Students who have filed for extensions will be given a grade of INC. Any extended projects that are not received within 24 hours will result in failure of that project. If a student has more than 3 extensions on their record, they must appeal to the course instructor. Acceptable extensions: Family emergency, health emergencies, and court. Gradebook Grades for every project and assignment will be posted within 24 hours so that students have an idea of where they stand in the class. Midterm grades will be given halfway through the course before students can continue with the remaining half. Each graded work will have a provided link to the students’ submitted project and assignment to review their progress and errors. Gradebook gives students a report of their progress while also giving them access to their previous work to reference for later projects and assignments. Students are encouraged to review them and ask questions and clarifications to the forum or live chat. While gradebook details the history of the students’ progress, it will also have a list of upcoming assignments and projects that are due along with due dates. Students will know what is due and when. This is also where they may file for extensions. Comments Thread Comments thread will help students find information before they refer to forums or live chat. The thread sets up comments that are rated the most by default. However, students may filter it through the search engine to find their answers quicker. The thread can also be sorted by: most helpful, least helpful, recent posts, and older posts. Under each comment, students can rate the helpfulness of the comment on a 5 star system. They can also make comments on them as well. This is encouraged so that students are able to review questions, concerns, and review of the course. It helps them engage in the material and for the designer and instructor to get feedback throughout the course on what is successful and what is not.
6
PROJECT PROPOSAL CONT Students can also save comments they like so that they do not have to find it when they have to reference it. All favorited comments are added to the sort filter so that they can easily access it. These favorites will help the designer and instructor know how to revise the course so that it is more successful in the future. The comments thread, however, is separate from the forums and live chat, which is reserved for more in detail questions and concerns. Students are encouraged to use both functions. WordPress For our E-learning system, we will use WordPress to manage our content. WordPress gives us the flexibility to design the look and feel of our course. As a course management system, WordPress provides instructors the ease of preparing and crafting the materials. As an interactive tool, WordPress allows students to engage with their classmates and instructor. Discussion Forum In each lesson, we would use WordPress’s comment system as an online class discussion. Students could post their comments on the materials or ask questions if they need further assistance to understand the subject. The instructor and fellow students could reply to the comments in a threaded (nested) level. Codepen & Browser Codepen is a tool that allows users to “build, explore and teach the web, instantly.” Using Codepen students could write HTML, CSS and JavaScript to complete the class exercises; however, testing the codes in the actual browser is much better for responsive design. With the real browser, students can resize the window to see how their design changes in various widths. Ideally, student should test their design on real devices, but that could be expensive or impossible. An alternative solution is to use Responsive Design Bookmarklet.
7
PROJECT PROPOSAL CONT Live Chat One limitation of an online class is the difficulty in meeting fellow students. Frequently the only contact a student has in an online class is with their professor. Of course, in a traditional setting, most students ask their classmates a question first, and if they don’t know the answer, then they will ask the teacher. This encourages students to ask questions, because there is less risk involved in asking a fellow student, and if that student cannot answer the question, the original student has just built enough confidence to ask the teacher. To imitate this dynamic, we will include a live-chat feature in our e-learning environment. There will be an indicator saying how many students are online at the time and what their names are. As long as you are enrolled in the course, you can initiate a chat with any of the online classmates. Additionally, the teacher herself will also show up in this list whenever she is online. This will encourage active class participation and mitigate any possible confusion regarding assignments. Student Work Gallery Similar to the structure of AVT 420, there will be a student work gallery on the website. Each student will be required to create a course page and publish their assignments on the course page. The student gallery will be where students can go to look at their fellow classmates’ work. This will be square thumbnails of the students websites, to highlight the visual design of each students’ site. Conclusion This e-learning website will be responsive, and the students themselves will be learning the intricacies of a responsive website. We hope the students will learn more than just code and design, but also how to think critically about what type of website fits the needs of the client best.
8
9
CHAPTER TWO
TASK FLOW ADEY CHAPLIN
STUDENT SITEMAP LOGIN
UNIT 1-15
HOME
Start/Resume Class Start/Resume Assignment
Turn In Assignment Exercises
Immediate P/F grade Three attempts to repeat
Recent Discussions
Comments
Notifications (Such as Private Messages, Announcements)
Useful Links
Teacher Blog Progress Bar
Most useful comments voted to top
Specific to that course Also can be found under Syllabus
Quizzes (When applicable)
Track your progress through the course
10
PARTICIPATION
Private Messages Inbox Send new message
Live Chat Who is online Teacher hours
Forum Existing thread for each unit start a new thread most commented on thread rises to top
Google Hangout Sessions
Open study hours Instructions to set up chat Teacher hours
Student Gallery
Where students post their work See student info: (headshot, major, other info) Send PM Sort by date last modified .... Alphabetical .... Special honors
SYLLABUS
GRADES
Objectives
Grade to date
Class Projects
Upcoming assignments
Required Texts
Compare grade to other students
Prerequisites
Check your submitted assignment
Grading Policy
Date submitted assignment
Schedule
See teacher comments
Useful Links
REVISED
Sitemap Donny Truong, Adey Chaplin, Christine Vi AVT 619 - Advanced Web Design February 28, 2013
Login
Home
Upcoming Dates Link to Current Unit Link to project check point Resume class Progress Bar Latest Comments Teacher Announcements Explanation of project Expectations Teacher Contact Info Part of the Syllabus section Part of the Gradebook section
Course
Project Overview Week 1: Why Responsive Design Week 2: Planning Week 3: Website Proposal Week 4: Content Strategy Week 5: Workflow Week 6: Website Mockup Week 7: Mobile First Week 8: Flexible Layout Comments/Forum Useful Links See other student’s work Week 9: Media Week 10: Media Queries Week 11: Design Critique Week 12: Preprocessors Week 13: Pollyfills Week 14: Performance Week 15: Final Project Due Part of the Participation section
Forums
STudent gallery
SYLLABUS
Unit Overview
Part 1
Exercise 1
Part 2
Exercise 2
Challenge
Apply to Project
Forums Add your own comments Start a thread Vote up/down comments Student Gallery Link to each student’s website Send PM Start livechat Submitted assignments (from each student)
Student Gallery Link to each student’s website See student info Send PM Start livechat
Schedule Instructor Contact Info Send a PM Start Livechat Resources Grading Policy Required Texts Explanation of Project Objectives Part of the Participation section
Gradebook
Profile
Livechat
Progress Bar Current Grade Compare grade to class average See submitted assignments Schedule of assignments Overall grade breakdown
Change Personal Info profile photo email address Messages response to comment
Who is online Start livechat
11
TASK FLOW CONT CHRISTINE VI
Login
STUDENT ID #
STUDENT DATABASE NO
DOES STUDENT EXIST?
CREATE ACCOUNT
INFO AUTO-FILL
ADD CLASS(ES)
SELECT SECTION/TIME YES
SELECT MORE CLASSES/DROP
NO
REGISTER PAYMENT
NO
CHECKOUT LATER YES
RECIEPT
Logout 12
PAID
SAVE CART
Login
INSTRUCTOR ID #
SELECT CLASS
SUBMISSIONS BOX
SUBMIT LATER
SAVE INFO
NO
NO
GRADEBOOK
SUBMIT GRADES
Logout
13
TASK FLOW CONT DONNY TRUONG
STUDENT TASKFLOW EXAMPLE LOGIN
HOME
COURSE
PARTICIPATION
SYLLABUS
STUDENTS
Week 1: Why Responsive Design?
Schedule
Objectives
Student Gallery
HTML
Messages
Class Projects
Due Dates
CSS
Week 2: Planning
Live Chat
Required Texts
Assignments
JavaScript
Start/Resume Project
Week 3: Web Site Proposal
Discussions
Prerequisites
Readings
Typography
Recent Discussions
Week 4: Content Strategy
Google Hangout Sessions
Grading Policy
Projects
Responsive Frameworks
Notifications
Week 5: Workflow
Start/Resume Class Start/Resume Assignment
Grades
Week 6: Web Site Mockup Week 7: Mobile First Week 8: Layout Week 9: Media Week 10: Media Queries Week 11: Design Critique Week 12: Preprocessors Week 13: Pollyfills Week 14: Performance Week 15: Final Project Due
14
RESOURCES
LOGOUT
INSTRUCTOR TASKFLOW EXAMPLE LOGIN
HOME
COURSE
Class Status
Week 1: Why Responsive Design?
Schedule
Objectives
Student Gallery
HTML
Messages
Class Projects
Due Dates
CSS
Week 2: Planning
Live Chat
Required Texts
Assignments
JavaScript
Week 3: Web Site Proposal
Discussions
Prerequisites
Readings
Typography
Google Hangout Sessions
Grading Policy
Projects
Responsive Frameworks
Submitted Assignments Grading Recent Discussions Notifications
Week 4: Content Strategy Week 5: Workflow
PARTICIPATION
SYLLABUS
INSTRUCTOR
Grading
RESOURCES
Reports
Week 6: Web Site Mockup Week 7: Mobile First
LOGOUT
Week 8: Layout Week 9: Media Week 10: Media Queries Week 11: Design Critique Week 12: Preprocessors Week 13: Pollyfills Week 14: Performance Week 15: Final Project Due
15
16 Login
Course
Home
Week 1: Why Responsive Design Week 2: Planning Week 3: Website Proposal Week 4: Content Strategy Week 5: Workflow Week 6: Website Mockup Week 7: Mobile First Week 8: Flexible Layout Lesson Exercises Comments/Forum Useful Links Livechat See other student’s work Week 9: Media Week 10: Media Queries Week 11: Design Critique Week 12: Preprocessors Week 13: Pollyfills Week 14: Performance Week 15: Final Project Due
Part of the Gradebook section
Part of the Syllabus section
Upcoming Dates Link to exercise Link to project check point Notifications PM Resume class Response to your comment Progress Bar Latest Comments Teacher Announcements Explanation of project Expectations Contact Info Teacher hours Upcoming Assignments
AVT 619 - Advanced Web Design
Donny Truong, Adey Chaplin, Christine Vi
Sitemap TASK FLOW CONT
FINAL TASK FLOW
17
Gradebook
SYLLABUS
Participation
Part of the Participation section
Progress Bar Current Grade Compare grade to class average See submitted assignments Schedule of assignments Overall grade breakdown
Part of the Participation section
Schedule Instructor Contact Info Send a PM Start Livechat Resources Grading Policy Required Texts Explanation of Project Objectives
Private Messages Inbox Send new message Live Chat See who’s online Start a chat Join a chat Forums Add your own comments Start a thread Vote up/down comments Student Gallery Link to each student’s website Send PM Start livechat Submitted assignments (from each student)
25% of project is due
CHAPTER THREE
WIREFRAMES CHRISTINE VI
18
19
20
21
22
CHRISTINE’S WIREFRAME CONT ROUND 2
23
24
25
26
27
28
29
30
31
32
33
34
DONNY TRUONG WIREFRAMES
35
36
37
38
39
40
41
42
FINAL WIREFRAMES
43
44
45
46
47
48
49
50
51
CHAPTER FOUR
MOCKUPS CHRISTINE VI // ROUND 1
52
53
54
CHRISTINE’S MOCKUP CONT ROUND 2
55
56
57
58
59
60
61
62
63
64
DONNY TRUONG MOCKUPS
65
66
67
ADEY CHAPLIN MOCKUPS
68
69
70
71
CHAPTER FIVE
WHITEBOARD FINAL DESIGN
Exercise 1
Converting pixels to ems Step One: Find the context Nulla vitae leo dolor. Suspendisse dignissim nulla non erat bibendum ultrices. In quis lacinia lorem. In bibendum euismod massa, id consequat est volutpat sed. Cras justo mi, tincidunt vitae fringilla eu, luctus at ante. Pellentesque ultricies quam vitae orci adipiscing volutpat.
This is a caption
72
73
74
75
76
77
78
79
80