| Spring 2014 |
Due |
Topic(s) |
Skill(s) |
Links |
Handouts (PDFs) |
| 18.jan |
|
Syllabus, schedule, basic design features of the Web, Web design, file conventions, |
HTML, how Web works, hyperlinking and interactivity |
• If HTML were a hamburger
• HTML tutorials
• Writing HTML using TextEdit (YouTube)
• Bluehost
• Practice HTML with Codecademy
Reading Assignment for Week 02
• Interaction Design for Visual Designers
• In Defense of Eye Candy
• Inclusive Design |
• File conventions
• Basic HTML
• HTML formatting
Presentation
• Intro to HTML (PPT) |
| 25.jan |
1. Blog post 1 – Intro
2. Blog post 2 – History of the Internet and Web |
History of the Internet, history of the Web, hosting |
Understanding and searching the Web |
Internet
• History of the Internet – Ethan Zuckerman
• Nerds 2.0.1-Timeline (PBS)
• The Internet: A Decade Later
Web
• The first Web site
• The evolution of the Web
• How search engines work
• Get more out of Google |
Presentation
• Using the Web (PPT) |
01.feb
News:
cary-anne |
Project 01 |
Design issues & challenges |
HTML, uploading files |
• HTML color codes |
• Lists and tables in HTML • Uploading files to the Web with Fetch |
08.feb
News:
|
Blog post 3 – tweak posts/Twitter RT exercise |
information architecture, site maps, wireframing, understanding stylesheets |
information architecture, site maps, wireframing, CSS, Twitter, RT |
• Information Architecture 101
• The EU’s usability glossary
• Nielsen’s guide on how to display links
|
• Browser wireframe sketch sheet
• CSS Properties
• Stylesheet details
• Vertical navigation stylesheet (CSS)
• Horizontal navigation stylesheet (CSS)
Presentation
• Site Maps, Wireframing, and CSS (PPTX) |
15.feb
News:
Brittani |
Blog post 4 – Twitter @reply, Non-Designer’s Web book |
Understanding stylesheets, design software, wireframing, TextWrangler/Sublime Text intro |
Using a Web editor, @reply, Balsamiq |
• Concept Codify: Online card sorting
• Meet the Ipsums: Lorem ipsum generator
• Google Web fonts |
• Site maps
• Make wireframes using Balsamiq
• Intro to Photoshop |
22.feb
News:
Cory |
1. Blog post 5 – site reviews, TX State photos
2. Project 02 |
Responsive design |
design analysis, Instagram, troubleshooting |
• Responsive Web design explained
• Intro to media queries
• HTML validator
• CSS validator
|
• Web design process
• Responsive design
• How to troubleshoot
• Horizontal navigation responsive files (ZIP)
• Vertical navigation responsive files (ZIP)
Presentation
• RWD – Responsive Web Design (PPTX)
|
01.mar
News:
Jeremy |
1. Blog post 6
2. Troubleshooting exercise |
TextWrangler/Sublime Text, advanced design concepts |
troubleshooting |
• Twitter Bootstrap
|
• Intro to Twitter Bootstrap – new
• Intro to Twitter Bootstrap – old |
08.mar
News:
Jack |
Project 03 |
|
|
|
|
22.mar
News:
Lauren |
1. jQuery exercise
2. Blog post 7 – Community Exercise
3. Unfinished blogs |
jQuery exercise, shovelware vs. multimedia story design |
|
• A People Torn – Minneapolis Star Tribune
• Amazing Girls – The New York Times
• Interactive Narratives
|
• jQuery slideshow using Twitter Bootstrap |
29.mar
News:
Michael
|
1. iMovie exercise
2. Make-up assignment |
Video |
DV camcorder, iMovie |
|
• iMovie |
05.apr
News:
Taylor |
|
WordPress, CMS customization |
HTML5, CSS3, WordPress, plugins |
• HTML5 elements
• CSS3 elements |
• Installing WordPress
• WordPress plugins
Presentation
• Intro to WordPress (PPTX)
|
12.apr
News:
Trevor |
Blog post 8 – Final Project Idea |
Data journalism, project idea discussion |
Identifying good design, knowing when to use visualizations |
New York Times
Examples
• Buying vs. renting
• Build a pop song
• Post-election sentiment
• Water contaminants testing
• Where were you on September 11?
On Data Journalism
• Aron Pilhofer on BreakingTheNewNews
• When the Data Struts Its Stuff
The Guardian
Examples
• Olympics 2012 data
• Snake oil supplements
On Data Journalism
• Data Journalism: What Is It and How Do We Do It?
• Analyzing Data is the Future for Journalists
The Texas Tribune
Examples
• Public schools visualization
• Public employee salaries
Stanford
• Journalism in the Age of Data
• Narrative Visualization: Telling Stories with Data
Other Sources on Data
• The Programmer Majored in English – Nieman Lab
• Approaching Data with a Beginner’s Mind – UX Magazine
• Data Journalism Handbook
|
Presentation
• The Value of Information Visualization (PPTX) |
19.apr
News:
Eddie |
1. Final Project draft
2. Bonus Project |
Work on Final Project |
|
|
|
| 26.apr |
Blog post 9 – Search People and Power |
|
|
• The True Story of the Internet |
|
| 03.may |
Final Project
Final from 8:30a – 10:30a |
|
|
|
|