WEEK 10: Navigation and Interaction
(October 23-27)

To Do This Week:

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

In Class:

Ideas for Multimodal Narrative Projects?
Have a design ready for In-class Critique Nov 1st / Nov 2nd
DUE  Multimodal Narrative Final Design Nov 10th (Friday)

Effects

  • Nav Bars / nested nav bars
  • Parallax Scroll
  • Audio/Video
  • CSS Animations
  • Intro: jQuery / JavaScript
  • Skrollr overview / other scroll options

Notes:

Recipe Project Notes:
Recipe List 01
Recipe List 02

  • validate html and css
  • resize images (under 1000px width or height)
  • typography detail – difference/repetition
  • more padding on text
  • 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 of height to children of grid
  • avoid handwriting/decorative fonts for text that is to be read

Integrated Media Techniques

Navigation:

Tabs/Buttons/Breadcrumbs:

Scroll:

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

Review Fixed, Relative and Absolute Positioning

 

CSS Grid:

 

Web Design Process:

  1. Research ideas, organize media and writing
  2. Sketch ideas for layout and navigation (plugins or libraries?)
  3. Research color scheme and font pairings
  4. Create HTML responsive “wireframe” (add borders)
  5. Add content or placeholders
  6. Refine responsive layout with grid and/or flex
  7. Add color scheme
  8. Add typography
  9. Add CSS or JavaScript for animation effects (fades, slides etc)
  10. Add content and media (spellcheck!)
  11. Refine narrative content and visual hierarchy
  12. Check errors
  13. Get feedback from others
  14. Refine navigation, functionality, narrative content and design

AI  Coding:

Prompts – specificity and detail!

Building a Standard HTML5 Page Template

Prompt Template:

Create a basic HTML5 template with a responsive, mobile-first layout consisting of a header, main section, and footer. Ensure the webpage is set up for English speakers. 

In the main section, use CSS Grid to create [number] columns for content. Please include ‘lorem ipsum’ text as placeholders for content sections and add comments to explain the structure.

Make sure the site content does not stretch beyond 1200px width and that that the grid collapses to one column in the mobile view under 600px. Define breakpoints for mobile (less than 600px), tablet (601px to 1024px), and desktop (more than 1024px).

Building a Horizontal HTML5 Page Template

Prompt Template:

Create a flexible HTML5 horizontal-scroll template with a fixed header and footer.  The header should have a nav bar with anchor links. Ensure the webpage is set up for English speakers. 

Inside the horizontal scrollable section, create [number] content divs that a 100% of the browser window.  Give then different background colors.

 

AI and World-building

Principle:

  1. Tone – the attitude and approach you want, create a scenario and roles for the chat
  2. Format – describe the parts and structure of the response
  3. Objective – what is the larger project goal
  4. Context – is this for social media, academia, art?
  5. Examples – give an example of the response you want

example:
Tone:
You are a story coach that is knowledgable about the variety of forms that a story can take. Help me brainstorm the characters for my story.

Format:
I would like a breakdown of the characters and their backstories as well as a general description of the story-world, setting, period etc.

Objective:
I am going to give you a brief summary of my story idea and its world. Based on your initial response and prompt, I will respond with specific questions about characters in an open and free-flowing conversation with you. It is OK if the story veers from its original intention.

Context:
You are a story coach to help me with my own creative ideas. You can make suggestions and question certain directions in where the story is headed. But, because you are not human, I will guide the creative process no matter how weird. 

Extra Requests:
With any of your responses to my prompts, suggest another prompt or question that I can ask you to help shape the story and characters.

 

 

AI Audio:

 

AI Image Generation:

GAN: A generative adversarial network is a type of machine learning framework in which two neural networks compete with each other: a generator and a discriminator. The generator starts building a fake sample image, the discriminator checks to see if it passes the test of being real or fake.

Prompts 101:

  • Style (name artists, genre or describe style) – “In the style of…
  • Describe lighting
  • Describe mood and emotions
  • Describe camera angle and position (birds-eye view, etc)
  • Describe film types and stocks
  • Output resolution keywords:  8K , 4K , photorealistic , ultra photoreal , ultra detailed, intricate details etc
  • Use other images as prompts
  • Describe order and hierarchy of details