{WebProductionWorkshop, Fall16}

Web Production Workshop

Media Arts 327, 527
Monday & Wednesday: 2:00-3:50  Office hours; M, T (main campus)  W (museum classroom):

Prof. Miriam Langer melanger@nmhu.edu, slack channel: mediaartslanger.slack.com (you’ll need to be invited by me, so send an email and I’ll invite you in to the channel, you can then use the slack app or web interface)
Web: arduinogirl.wordpress.com (syllabus & tutorial links)


Main Campus TA: Keisha Braithwaite (kcbrathwaite@gmail.com) – Teaching assistants are present to assist you with your classwork and help you. Keisha will not do your homework, or teach you 1 on 1 if you miss class due to unexcused absences.

Course description:  In 2016, there are infinite ways to approach the ideas and practice of “web” production. Even the term is outdated and a bit quaint. That said, we’ll cover a LOT of ground (or server space, if you will). Starting with what the web is, how it works, how people use it differently across different devices and points of entry, and who it serves well, and who it serves poorly (and how to remedy that). We’ll talk about all the things that make up networked production, UX design, UI dev, awareness of the Stack development, IA, design thinking/audience engagement, then move on to production with HTML, CSS, some javascript & finishing up with several weeks of responsive design, analytics, tracking issues (that will come up repeatedly). All the while remembering that we’re designing & building to meet accessibility standards.

Goals: The goals of this class are to understand the path to good, accessible, empathetic production for the networked world in which we live. Our practice will involve discussion, readings, lots of hands on practice, small group & individual assignments, critiques.

Attendance: Required. This class is split between the main campus and the Abq museum classroom.

Grading:
30% attendance/in-class participation (each class is worth 1 pt)
40% homework assignments (each homework is worth 1 or 2  pts)
(*let me note here that you can get a C- just by showing up to every class and turning in all the homework)
15% midterm project & quiz (10% project, 5 % quiz)
15% final project & quiz (10% project, 5% quiz)
Extra credit: You can earn points by answering other students’ questions on the slack board. I’ll explain how this works in class.

Assignments: Do them, otherwise what’s the point? Late work: Creates a backlog for me, so you’ll get a lower grade when you turn something in late. If you are traveling or have a personal/medical excuse, you are responsible for timely communication via email.

Week 1, W 8/17: Goals of class, syllabus review, what is the web for in 2016, introduction to terminology, who does what ON the web, who does what FOR the web. Technical language vs. job descriptions, the network ecosystem. What’s the stack? Where do you fit in?

email me from the address you actually check, so that I can invite you to the slack board.
Assignment: Read Katie Shelly on Mindsets, Tools and the Terminology of Experience Design
There will be a question on the article posted on the slack board, due before class on Monday, M 8/22

Week 2,  M 8/22 W 8/24:
1st: problems with slack/setting notifications
M: How does the web see you? What is user experience/ What is Human Centered Design? what is empathetic design, what is Service Design? How can we solve design/production problems if we don’t know what they are?  Preparation for Design Thinking workshop.
Assignment: Get your partner for the weds workshop, post it to the slack board.

W: Design Thinking Workshop – arrive on time, don’t let your partner down. You’ll be given materials and instructions for the 90 minute workshop.

Assignment: work with partner, present 5 minute presentation on DT results. Questions to address will be posted on the Slack board on Weds after class. Presentations on Monday 8/29 in class.

Just posted on Slack: *Question for Week 3*: As you prepare your presentation on Design Thinking, you should address these questions: What did you make, how effectively did you communicate with your partner, and why do this exercise? For this final question, please submit to me via slack Direct Message before 5 pm Monday: If an opportunity arose for you to do a Design Thinking workshop like this for a real client, would you want to try it?

Week 3, M  8/29/ W 8/31:
M: Design Thinking  Presentations & Information Architecture
Review HCD, Design Thinking- how can these exercise make us better experience designers & developers? Introduction to IA
W: Information Architecture – in class IA workshop. Take the stack of “information” you’ve been given, and working with your partners, and figure out the users & stakeholders for 3 completely different clients using the same basic “content”. How might you “make sense of the mess”, in either scenario? Follow the directions, in the link above. 

Here’s the homework assignment (it’s also on the slack board)
For next wednesday, you do NOT need to build a site! Your assignment is:
1.Choose one of the three ideas.
2. Take this idea and think about it, plan to present for 2 minutes (individually) next wednesday on how you developed your idea.
3) Take more time to think about & develop your users & stakeholders. In your presentation, focus on the specifics about your users/stakeholders and who they are.
Then: What might be their LIKELY point of entry? A facebook page? A hashtag? a link from another site (for example a nmhu link from a “colleges in the west” page?) Why?

Assignment: Read  Abby Covert’s “How to Make Sense of Any Mess”  , pages 1-49.

Week 4 – M 9/5 (no class) W 9/7: 2minute presentations on IA, discussion. Getting started with site production (finally!).  Intro to basic tags using Brackets. The files for today’s class are uploaded to the slack page, under “web_prod_workshop”. They also live on googledocs, here.
Image optimization for the web.

Assignment: By any means possible, build a front-end visitor-facing page for your client from week 3. You can use a graphic editor, html editor, online 3rd party web environment, blog, or FB page. Due Monday 9/12 in class. Show me what you know how to to do.

Week 5 – M 9/12 W 9/14: Working with Brackets continued– code generation environments vs. code from scratch.
read: W3 schools –Introduction to CSS.
This week’s files: Basic CSS &  Intro to grid layout
download from slack or  googledocs.
Accessibility: Alt tags and the Chrome “alt text image replacement” extension. Screen reader extension for Chrome : ChromeVox
Font inclusion: Try google CSS fonts!
BASIC HTML if you want to have the introductory tutorial on how to use tags.

Assignment: Choose a poem or a short essay (someone else’s or yours!) and make 6 linked pages with the same content,  links from each page to the next page, perfect file structure, basic CSS, images, markup (like it’s at least 2004). Check in 3 browsers, use all the tags showed in class, experiment with styles from the w3schools link above, You should have 3 CSS options that makes your site presentation change completely. You can change images on  the page that are NOT part of the CSS. Respect all your users, use the “alt” tag!
Due Monday, 9/19 in class.

Week 6 –
M 9/19 :
Assignment due in class, Project3 example files here (also posted on the slack board), review Google Fonts api (this links to the font I chose for the hw), and practice layout
assignment for weds: add two google fonts (at least)  to today’s homework

W 9/21:
  Quick review of basic css/google api/file structure (put that to rest so we can move on to…) going further with CSS- Using the design grid to turn a psd into a CSS-based html document.
Files for today are on google drive & the slack board (project4.zip).
Assignment:
Read: Chapter 1 of Responsive Web Design pdf (or download it from slack) for Monday 9/26
and do CSS grid layout assignment part 1- below, due Wednesday 9/28 (in class or zipped/posted to slack)
For CSS grid layout: look at the file “assets/TrolleyMain_small.png”. This is what you might get and then have to layout as a web page. How would you even start? For homework, get  the title, navigation, and logo, and 4 text boxes on the page in a layout similar to what is in the main document? Can you add 3 of the images from the images folder? 

Week 7 -CSS continued/responsive CSS continued, Trolley pages continued
M 9/26 :
How to take a PSD and turn it into CSS
Files for Monday are on slack & googledocs
Assignment: Follow directions at the end of class to work on CSS details for wednesday
W 9/28
:  Responsive CSS continued: finish trolley building page due in class
Wednesday: CSS Project 2 handed out, due W 10/5, CSS review.
grades will be sent via direct message by Sunday 10/4.
Assignment: Take the new file TrolleyDesign2 (or on slack), and build it in CSS, using the steps we covered in the presentation/class time on Monday. Make it as responsive as possible (scale up/down) and check it in 3 browsers. Pay attention to details- fonts, letter spacing, alignment, etc.

Week 8 – M 20/3 W 10/5: CSS continued/responsive CSS continued
M: Review CSS, review Midterm project  (midterm assignment handed out in class). More CSS for more responsive sites. LV class will attend the President’s branding forum at 3, Abq students free to work on midterm.
W: Homework due (CSS Assignment 2) uploaded to slack by the end of class. Work on Midterm projects -Come to class for help/troubleshooting/work time/Quiz review
Notes on CSS tweaks you’ll need to do the final

Week 9 – M 10/10  W 10/12:
M 10/10: Final work day for midterms!
W 10/ 12: Midterms due uploaded by 6pm &  midterm quiz in class – All files and homework assignments must be uploaded by 6 pm today !
Files for in-class midterm are on slack and googleDocs

Week 10 – M 10/17:  – Break on Monday
W 10/19:  Quick midterm review,  review of markup, flexibility. 
Assignment: One set of content, two completely different CSS structures; Design your own CSS! due Wedneday 10/26.
Files are on slack and google docs.
read: Your Text Is Too Small
(
stay tuned for more tutorials posted this week/weekend)

Week 11 – M 10/24 W 10/26:
M: Css for Responsive  design, some simple javascript features, work session
w3 demos for today: Javascript drop-down menus, mp4 video embed, youtube video embed
Files with demos (based on W3 tutorials) are on slack
W: Work session, homework uploaded at end of class. Grades for this assignment will be sent via slack on Sunday 10/30.

Week 12 – M 10/31/ W 11/ 2(MCN):
Some changes: Land Arts presentations will take place 11/7 : Be prepared to demonstrate your CSS designs with 3 minutes demonstration of what you were able to do.  You may make changes/mods & improvements to your project up until the presentation.
Content Management Systems -What Are they?
M: Working with WordPress, Assignment 1
What is a CMS/Why WordPress? Which others are there?
M &W: In- class WordPress assignment
Assignment: Review  the *free* WordPress templates  (if you already have an account you can login) and either 1) repurpose the land arts content to fit within the confines of the templates or 2) Come up with your own content (but you must have enough to use – ie- you can’t use lorem ipsum and place holder images. So if you want to do your own portfolio, or a site about a personal interest, or a cause you care about – that’s fine. But you must supply enough content to make it appear complete, at least  4 pages.

Then select 2 finalists. Take screenshots of the templates, before choosing 1 final template (be prepared to show both and say why you choose the final one)
FULL SITE due Wednesday 11/9 at the end of class- on Monday 11/14 be prepared to address: What are the strengths/limitations of using a free CMS? Did you research any other free CMS sites? Which ones? What would you like to control that you couldn’t? In 2016, 25% of all sites WordPress – what are the pros & cons?

Week 13 – M 11/7 W 11/9:
M: Presentations of Land Art project (from 10/26). Prepare 3 minutes to demonstrate your project. Focus on what new things you learned, what you were able to make work/troubleshoot yourself.
Review of some CSS/markup issues
W: WordPress Projects due at the end of class today. Post links via slack by 4 pm.
Answer question on slack board (due sunday 11/13) in preparation for class discusson Monday

Please answer the following question (through slack direct messages) by midnight sunday (in preparation for discussion on Monday):
Given what you know about html/CSS and web production, and this current experience with WordPress CMS, what does the future of web production (6 months, 1 year in the future) look like to you? I’m expecting a paragraph of considered thought based on your experience in design, web, writing code, client work – whatever you can bring to your thought process.

Week 14 – M 11/14 W 11/16
M: Discussion of CMS /WordPress pros & cons, research on other free /subscription CMS development environments, Review CSS projects, WordPress Projects
Final Projects assigned.
Assets for final project, part 1
W: Work day for Final Assignment, Part 1.
Code updates/ existing code snippets for browser resolution detection and other things.  review dropdown menus, video/audio embed.

Week 15 –
M 11/ 21
  Accessibility & analytics
Guest Speaker, Jason Alderman
Work Day
Additional assets for WordPress part of final are posted on slack
No Class Weds- fall recess – Work on your Final!

Week 16 –
M 11/28  W 11/30:

Work week for final projects, part one due monday at 10 pm.
All late posts will get 5 points off for every 1-24 hours late (5 pts every 24 hours, even if it’s just 1 hour late)
Part 2 Due Wednesday 11/30 at 4 pm
All late posts will get 5 points off for every 1-24 hours late.
Abq: Final Presentations will be in class on Wednesday at 3 pm, although you have until Monday 12/5 to turn in final versions.

Week 17 – Final Project Presentations during finals period, Monday, December 5th 11:00-2:pm
Short answer questions due at 5 pm (Linked on the assignment page and the slack board)

Have a good break!