WEEK 10: Navigation and Interaction
(October 21-25)

To Do This Week:

Work on Multimodal Narrative Project: build your idea, create the HTML structure for pages.

---

Due Dates:

Multimodal Narrative Projects
folder name: “narrative”
Multimodal Narrative List 01
Multimodal Narrative List 02

• Multimodal Project Idea (due October 18) 
  send me your idea and design/navigation approach on Slack by the end of the week
• In-class Critiques: Wednesday (Oct 30) and Friday (Nov 1)
  There will be in-class pod critiques of your Multimodal Narrative projects. While I am not grading this part of the project, I will give 3 extra credit points if you come to class with a nearly complete project for the pod critiques and my feedback.If you do not have a nearly complete design, then there is no need to come to class. Just keep working.  
  
• Multimodal Responsive Structure (due October 25)
  submit on Canvas your responsive structure with colored borders of elements, dummy text and placeholders
  
• Multimodal Final Design (due November 8)
  submit on Canvas your final design with complete media and  text (1000 word minimum).

---

Notes:

Recipe Project Notes:
Recipe Sec 01 List
Recipe Sec 02 List

• validate html and css
• resize images (under 1000px width or height)
• typography detail – difference/repetition
• more padding on text (3-5%)
• fewer borders – not helpful to hierarchy
• above the fold 
• alignment – divs and wrapper
• remove html and css that you are not using
• do NOT position or change margins to fix problems
• use alt tags for images
• fix media query errors 
• do not apply width or height to children of grid
• avoid handwriting/decorative fonts for text that is to be read
• text-align left for reading text

Integrated Media Techniques

Navigation:

• horizontal scrolling
• parallax scrolling effect – background image alternates fixed and scroll
• parallax vertical scroll 2 and anchor link nav

Tabs/Buttons/Breadcrumbs:

• How to Make a Nav Bar
  
• w3schools navbar tutorial

Scroll:

• Parallax Scroll effect | demo
• smooth-scrolling
• Skrollr / resource

Media

•  Audio  
• Video
• play/pause audio with JavaScript
• play/pause video with JavsScript
• *note: if you are not hosting video on the server and using YouTube or Vimeo, you will want to use the “embed code” from the Share button of those platforms. Just paste the code into your HTML and stylize the “embed” tag as you would any other element. To make the <video> or <embed> elements responsive, just set their widths to 100% in the CSS.

CSS Animation

• CSS Transitions
• CSS Animation
• Examples 1
• Examples 2

CSS Grid:

• W3Schools CSS Grid
• Complete Guide to Grid
• Complete Guide to Flexbox