This week we:

  • examine additional HTML tags
  • learn how CSS controls the appearance and layout of a webpage
  • begin tackling the semester project

In-Class:

1. Design Challenge

Use content from Wikipedia to compose a page on CSSDeck about your favorite personality, comic book or film hero that includes the following:

  • A minimum of three paragraphs p of content
  • Proper heading structure:
    • An h1 tag for the page title
    • An h2 tag for the section
    • An h3 tag for the subsection
  • A link a to a website with more information
  • An image img of the hero or character
  • Styles and colors to your page (my Ada Lovelace version does not have)

2. Semester Project – Class Participation

By this point you should have a general, perhaps vague sense of what you would like to work on this semester. Explore your idea in more depth by reviewing websites that are similar to yours.

We will slowly, but intentionally, work on your Semester Project over the next 15 weeks. You might remember Aesop’s fable of the tortoise and the hare. The tortoise procrastinated while the hare diligently ran the course. Your (homework) reading assignments will help you understand why we procrastinate and more, importantly, what you can do to counteract the natural urge to procrastinate.

READ in class:

  1. Framing the Practice of Information Architecture
  2. The Difference Between Information Architecture (IA) and Navigation
  3. Creating a Web-Site Information Architecture in Six Steps
  4. Card Sorting and Taxonomies

TO-DO in class (DM of final work due before 10pm Central time):

  1. Assess your semester project site’s “business” intent: Name 5 things the “business” (or charity, etc.) you’re building a website for needs from your website.
  2. Assess user intent: Name 5 things a user can get from this potential site.
  3. Assess content: If no content yet, what types of content will be needed to meet all 10 of the goals listed above? If the site has content, identify the “gaps” in content – what’s missing?
  4. Organize content: Without relying on specific user groups as primary content areas, assess the ways in which the content to be used on the site would be best-organized. Do an OPEN card sort to determine what info belongs where.
  5. Provide navigation: Create your taxonomy artifact draft –  like this one (yours can be pencil-sketched on paper, via MindNode , or any other software). What I’m looking for here is your thought process, not a defined site map/taxonomy. (I use MindNode for SO MANY THINGS. If you’re interested in UX/Information Architecture, this tool is invaluable).

Assignments & Reading

Get into groups (see below):
  • Group 1: Abigail G  TerralynW  Maria R  Jamie S
  • Group 2: Kiayanna L, Christopher S, Ismael F, Paul H
  • Group 3: Bernadette W, Fernando F, Jason W, Grace M
  • Group 4: Erick S, Alina W, Bao-Tran P, Johana J
  • Group 5: Deidre P, Pablo R, Justin W
  • Group 6: Elias P, Gabrielle N, Arael R

Agree upon: 

  1. Musical style
  2. Band Name
  3. Instruments/roles
  4. Choose how you met and decided to be a band
  5. Write your own short bios/histories
  6. Combine them into a 3-paragraph group bio (similar to below) – to present to class.
  7. Submit for credit: Your own personal bio/outline.

EXAMPLE:  

Hyukoh

hyukoh (Korean: 혁오) are a South Korean indie band from the Hongdae area of Seoul, South Korea. The band released their debut extended play “20” on September 18, 2014. The band consists of Oh Hyuk (lead vocals, rhythm guitar), Im Dong-gun (bass guitar), Im Hyun-je (lead guitar) and Lee In-woo (drums).Band frontman and principal songwriter Oh Hyuk was born in South Korea, moving to China with his family at only 5 months of age and spending most of his teens in Beijing. He returned to South Korea in 2012 to study Fine Arts at Hongik University, but has since taken a leave of absence to focus on the band’s promotions.

The majority of songs from Hyukoh’s first EP 20 were completed by Oh alone while he was living in Beijing, and was recorded with session members while Hyuk performed in different Seoul venues as a solo artist under the name “Hyukoh”.

In summer of 2015, the band became widely known in South Korea after participating in the 2015 Infinite Challenge Summer Music Festival on the popular Korean variety program Infinite Challenge. The band received positive responses from critics and the public, even breaking the top ten of the Billboard World Albums Chart two months after the release of their second mini-album “22”. Their sudden success is often credited to their appearance on the show, the band’s musical talent, or a combination of the two.”

On July 21, 2015, renowned Korean rapper and record producer Tablo revealed Hyukoh as the first act to sign with his independent label HIGHGRND (pronounced as High Ground). HIGHGRND is financially backed by Tablo’s current management company, Korean music conglomerate YG Entertainment, but its operations are autonomous from its subsidizer. Hyukoh remains under DRDR AMC management.


2-2: What Do You Know?

  1. Working alone, brainstorm a list of 20 things
    • that you have a level of expertise in
    • or enough interest in to research it
    • This will be your starting point for semester project topics.
  2. Submit your list of 20 things here for credit. Since it is a brainstorm, I don’t expect it to be perfect, and again, grading on submission of 20 things.

2-3: Top Five Bestest

  1. Keeping in mind the topics in your list of 20, look over this list of content creation ideas: http://www.audiencebloom.com/101-content-ideas-for-your-website-or-blog/ 
  2. Choose the types of content that you might be able to create on a few of your 20 topics – or add a new topic!
  3. Select five potential topics for your semester project site and submit them here for credit.

2-4: Creative Brief

Required Readings:

A creative brief is, as the name implies, brief. It is a concise, high-level overview of the web redesign project. The readings below provide details about how to write a creative brief.

Review the required reading materials, and then examine websites similar to the one(s) from your list of 20 that you might select for your semester project. If it is difficult to select a topic based on writing a creative brief, select another of your topics from the 20…or come up with a new one!

Craft a creative brief that includes:

  • Problem – your unique idea and the need it fulfills
  • Audience – a specific (but not <50 people who would be interested in the content)
  • Competition – three+ websites that could be your competitors
  • Next Steps – add them to your Trello cards

Submit for Credit: A link to your Trello board with the cards. Upload the Creative Brief as an attachment here.


2-5: CSSDeck

You will need help in the future with your CSS and HTML workshop. That’s where CSSDeck comes in.

  1. Create an account on cssdeck.com
  2. When you need to share a CSSDeck file:
    1. Create a New Deck:
       Click for more options 
    2. When finished with your assignment, click on your profile picture, the specific project you want to share, then copy/paste the Real Time Collab link into eLearning:
       Click for more options 

Submit For Credit:Take a homework assignment that you wrote the HTML for, paste the proper code in the proper boxes, and share the link here.


2-6: CodeAcademy: Learn CSS

Complete the following in the Learn CSS module on Code Academy:

  1. Selectors and Visual Rules
    • CSS Setup and Selectors
    • CSS Visual Rules
  2. The Box Model
    • The Box Model
    • Changing the Box Model

SUBMIT FOR CREDIT: A link to your profile once modules are completed.