COVID 19 Schedule (sec1 and sec2) – DTC 355: Web Design & Development

Hi DTC355,

Life has changed for the whole world. The skills you are learning in this class and in DTC can do much to inform, educate, entertain, stimulate, connect as we remain distant physically. I encourage you all to use your Narrative Project to address questions that we all have about the virus, the economy or just how to cope. This can be a healing and even visionary time.

PLEASE READ:

This page is set up to give you a picture of how we will proceed with the course after Spring break. You can check the main schedule for links and notes, but this page will act as a main resource for you. My initial idea was to meet on Zoom as a class at the same time we met in the lab. The university, however, has recommended we do more asynchronous teaching/learning. This is because many of you will no doubt have upended lives, with altered work schedules or no work and children to care for. So, we will not be meeting as a class on Zoom.

The remainder of the course is focused on the last two projects: The Narrative Project and The Portfolio. I will post here video tutorials (10-20 min each) on various techniques and subjects that I would normally present in class. I will also be providing resource links related to each of these tutorials. For what you are planning you may not need to watch all the tutorials (I’m not checking what you watch). These are designed to give you new techniques and skillsets that will help you with implementing your ideas.

I will also be available for one-on-one Zoom meetings. These sessions will be for getting helping with your projects, discussing grades and getting feedback. I will not have any schedule for this (I’m not going anywhere). Please just email me when you want a meeting and I will send you an invite. But if you have minor questions or small code issues then it would be best to send me an email with a link to your project and the question you are asking. You are not required to meet with me. As for grades, I can send you a pdf of your current scores if you ask for it. Or I can show you in a Zoom meeting.

I will now only be grading the remaining two projects, but I will ask that you complete certain stages of each project so I can make sure you don’t leave everything to the last minute. Keeping up with projects will be reflected in your final grade. I will post the schedule for each project here. Please just upload your projects as you work on them so I can see development (btw-the folders should be called “narrative” and “portfolio” with an index.html as the default homepage). I will provide the page of link for each project so you can make sure you have it set up correctly.

The tutorials will cover the following:

NAV BARS
CSS GRID
SKROLLR
JQUERY/JAVASCRIPT
AUDIO/VIDEO ELEMENTS
PLUGINS
CSS ANIMATION
PORTFOLIO PAGE STRUCTURE

SCHEDULE FOR PROJECTS

I will give one grade for each of the remaining projects, but if you are not completing the general stages that I have set below, then that will be reflected in the final grade. I just want to see steady progress.

Narrative Project:
Project List Sec 1 TTTH
Project List Sec 2 M

Wed 3/25 email me your project idea. Watch Nav Bar and other relevant videos tutorials posted below to help with your project. Look over past student projects.
Fri 3/27 upload to server basic layout wireframe (colored borders on html elements) with minimal responsive design – it may be difficult to be fully responsive for mobile depending on project. The folder should be called “narrative” with an “index.html” as the default homepage.
Thurs 4/2 upload first stage of design elements (color, images, typography)
Tues 4/7 upload second stage of design elements
Thurs 4/9 upload complete project for peer review. I will email small groups a form to fill out in a critique of the narrative projects of each student in your group. Use peer critique to guide you in finishing up your site.
Tues 4/14 Final Stage of your Narrative Project should be uploaded for grading. Don’t forget to validate! Check that images are resized for the web. Make sure the link from my page to your project works.

Portfolio Project:

Project List Sec 1 TTTH
Project List Sec 2 M

Thurs 4/16 email me if you are NOT a DTC student do not want to make a portfolio site. You may choose to do any multipage site.
Thurs 4/16 watch my video talk about the Portfolio project.
Tues 4/21 upload to server basic layout wireframe (colored borders on html elements) with minimal responsive design. The folder should be called “portfolio” with an “index.html” as the default homepage.
Thurs 4/23 upload first stage of design elements (color, images, typography)
Tues 4/28 upload second stage of design elements.
Thurs 4/30 upload complete project for peer review. I will email small groups a form to fill out in a critique of the portfolio projects of each student in your group
Tues 5/5 Final Stage of your Portfolio Project should be upload for grading. Don’t forget to validate! Check that images are resized for the web. Make sure the link from my page to your project works.

TUTORIALS & RESOURCES

Navigation/ Multimedia / Effects Overview

Nav Bars:

Skrollr Tutorial:

skrollr resource page

Short CSS GRID Tutorial:

Getting Started on a Project

jQuery

*Sorry, I will work on better framing for my screen capture!!

jQuery and JavaScript Plugins:

Lightbox 2
Videobox
Fancy Box – pop-ups for img, video and html
jQuery Gallery Plugins
37 jQuery Gallery Plugins
More jQuery Gallery Plugins

HTML Audio and Video

CSS ANIMATION

Portfolio Project

Tuesday April 30 DUE: (nearly) complete Portfolio sites for online critique – 10%

* your project folder should be called “portfolio”

** see the schedule above for working on your portfolio over the next weeks.

Portfolio Project List Sec 1 TTTH
Portfolio Project List Sec 2 M

Portfolio website – who, what, why?

Other Examples:

DTC Portfolio Project:

Other past student portfolios:

Portfolio Projects- spring 2018

Portfolio Projects- fall 2018

Portfolio Projects- spring 2019

Portfolio Projects- fall 2019

Include short project statements
Include a short statement about the blackbird, recipe and sequential project on your portfolio site. Always include a short statement on projects in your portfolio. What was the nature of the assignment? Describe the tools, design ideas, code and/or specific processes. This is for you to properly document your work for your portfolio.

Process for Designing Portfolio:

Research site ideas (screen grabs, inspect element)’
Storyboard/Sketch a multipage website (minimum 4 pages or sections)
Gather media and copy (images, screen grabs of projects, text)
Build HTML
CSS for responsive design and navigation (colored borders)
Add Content
Final CSS design

RESPONSIVE DESIGN PRINCIPLES:

mobile first! – default css is for mobile
flexible design (using % instead of px)
width: auto; is default and adjusts padding and margins
cascade principle -location and inheritance (only change styles that need to change)
max-width and min-width (set limit with max or min width)
height values are tricky! use by pixels or set height on parent
responsive images (100% of container parent or img {width: 100%;})
breakpoints based on design not device
turning off iOS resize: <meta name=”viewport” content=”width=device-width, initial-scale=1″>

Media Queries Overview

How to Make a Nav Bar

Mr. Potatohead – extra credit (5pts)

Project Checklist:

Validate!
resize images for web
no autoplay on audio (use <audio>)
wrapper under 1000px
h1 in header should be your name (or site name)
do not change navigation placement or tabs
navigation, screen real estate, above the fold
div alignment
make site responsive with media queries ( images 100% of container)
no lorem ipsum / real content!
format html/css to see errors

NOTES from the Narrative Project:

setting body {margin:0; padding:0;} (eric meyers reset)
validate!!!
name of projects!
author name! (footer)
padding on text boxes (15px or 2-3%)
image sizes (resize to less than 1000px or the size you will use image)
duplicate ids!!!
stopping vertical scroll on horizontal scroll sites: html, body {height: 100%; overflow-y: hidden;}
height %

Submit your COVID-19-themed digital work to wluers@wsu.edu for inclusion in the Spring Nouspace Student Gallery Issue: https://www.dtc-wsuv.org/cmdc/gallery/

PROJECT DESCRIPTIONS

Narrative Project – 15%

Build a responsive, 1-5 page website that follows a sequential path or linear progression. For example: a how-to sequence or instruction, a story, a comic, a brief biography, a narrative about a past event. You must include text, images and/or other media, like audio, video or gif animations. In class, we will discuss narrative sequencing, navigation, visual rhythm and hierarchy along with the basics of responsive design and scroll animations.

Your grade in this assignment will be based on your effort and thoughtful consideration of:

responsive design
typography
html and css syntax and formatting
sequential content (text and media)

Portfolio – 20%

Using HTML5 and CSS, handcode a multiple-page* responsive portfolio website that allows you to present and promote yourself and your work to potential employers and friends.

Portfolio websites grading will be based on the following criteria:

Sites Completed for Peer Critique 10%
It is important that you finish a majority of your site’s design and content for the scheduled critique/usability testing. I will grade this portion of your project.

Design 30%

Website must have a color scheme that is in harmony (use Kuler!).
Typography is legible and text boxes are aligned properly,
Navigation is functioning, clear and accessible.’
Pages are consistent throughout the site; there is unity in the design.
Clear visual hierarchy is used in overall design. Layout, color and imagery evoke information (difference) and context (repetition) effectively.

HTML5 and CSS mark-up 30%

The start home/page is index.html
HTML5 and CSS mark-up is “validated”. Semantic elements and divs are properly nested with good hierarchical page structure.
A single external stylesheet (inline styles and internal stylesheets can be occasionally used to override external css).
The site is responsive to device widths, using percentages and media queries
HTML and CSS are handcoded; no WYSIWYG editors or templates. Plugins for galleries are OK. Please see me if you have questions about this.
HTML and CSS are well formatted – indentation is used to indicate nested elements.
Navigation must be in the form of a CSS-styled unordered list <ul>.

Content 30%

Content is your own and complete. Images that are not created by you and/or in the Public Domain must be clearly labeled with ownership and copyright information.
Text is grammatically correct, spell-checked and images are compressed for web with proper aspect ratio.
The website must have at least 4 pages all together. Suggestions include: Homepage, Biography, Artist’s Statement, Resume or discussion of your skills and abilities, Samples or Galleries of your writing, photography, or artwork, Contact information, Information about your favorite causes, Links to resources or other things you think worthwhile, etc.

*If you would like to design a single page website with anchor links, please talk to me.