DSD-4708-A
Week 11

Questions from the assignment

  • For now, I'm always "guessing" the margin and size, how can i determining the actual margin from the contain to the edge and the actual size for titles and images ? and how to add shadow in html?
  • I had a problem with making footer. Plus, I have a problem with making linked card deck

In class review: Client Wireframe Presentations

  1. Lihua Jin :: Design | Coding
  2. Alyssa Tornese :: Design |
  3. Peiyu eva Zhou :: Design |
  4. Kyle An :: Design | Coding
  5. Hyeona Kim :: Design | Coding
  6. Ifah Pantitanonta :: Design |
  7. Yunfei Xie :: Design | Coding
  8. Yuran Won :: Design | Coding
  9. Grace Oh :: Design | Coding

Presentations!

  • It's important to get practice presenting your design ideas as you will, without a doubt, need to present your ideas to your colleagues, art directors, and eventually, clients.
  • Spoiler alert: if you are not able to successfully present your ideas, whether it be verbally, in email, or in person, they will never be used by anyone!
  • As we will be presenting to Genspace at the end of the semester, we are going to start practicing now
  • Each week we will hear four 5 minute content strategy presentations
  • If you choose, I will record your presentation (on your phone) for you to review later. This is highly recommended.
  • This week:

Introduction to JSON

  • JSON (don't click on that) has become the way to configure jQuery plugins, such as bxslider
  • Let's look at bxslider's configuration options and examples
  • How can we configure autostart? Change the duration of how long each slide is visible? Make the transition quicker?
  • Let's try customizing this bxslider slideshow to make it autostart, change the transition type, and make it quicker.

Introduction to dynamic navigation using jQuery

  • Using the jQuery plugin SuperFish, let's create some interactive navigation menus!
  • Let's create our own dynamic navbar in LiveWeave using this example
  • Steps:
    1. Download the plugin
    2. Unzip the download
    3. Notice that there are two folders: src and dist
      • src is for the source code, written by a human
      • dist is for the minified version, compressed by a computer
      • dist files are smaller and are good for production environments, but are almost impossible to modify
      • src files are larger and are good for development environments because they are easier to modify
      • For our purposes, we will always use src files
      • Other plugins do the same thing but name it differently. You'll often see a file name "javascript-library-x.min.js," which is the minified version. Don't use that one
    4. Following the example here, copy src/css/superfish.css into Liveweave's CSS editor
    5. Copy src/js/hoverIntent.js and src/js/superfish.js into Liveweave's Javascript editor
    6. Initialize the plugin by copying the initialization code at the bottom of the Javascript editor. This is the three lines that start with jQuery(document).ready...
    7. In the HTML editor, create a unordered list (ul) with the class "sf-menu"
    8. That should do it! Example here.

Introducing: WebFonts

Design Assignment

Deliverable: Publicly accessible PDF

  • Using your wireframes and content strategy as a guide, create three different annotated designs of the homepage

Writing Assignment

Deliverable: Publicly accessible PDF

  • Taking class feedback and discussion into account, rework and resubmit your sitemap and wireframes
  • Don't forget to add wireframes for persistent modules such as the header and footer
  • Remember: do not include real text. Just use gray bars of differing sizes to distinguish headers from subheaders from body text. Slideshows and video rectangles should maintain their 16:9 proportion, even in wireframe form
  • Remember: you should have one wireframe for every rectangle in your sitemap! This includes the pages that are listed as navigation!

Coding Assignment 1

Deliverable: LiveWeave URL (Remember: always have TextEdit open for questions)

  • Using your wireframes as a guide, create a prototype of your navigation using the SuperFish jQuery plugin
  • Change the default snapfish CSS to match the design of your chosen homepage

Coding Assignment 2

Deliverable: LiveWeave URL (Remember: always have TextEdit open for questions)

  • Finish coding the About page

Submitting Your Work

Make sure all links are publicly accessible (your grade will be lower if I cannot access your work). To make sure, open up a new private/incognito browser window and test all links before submitting. After the links have been tested, submit them to this Google Form.

Further Reading

Cool Links