In-Process Presentation & Walkthrough 4-2

The week we get back from Spring Break is our first of two graded check-ins on your site. This check-in will accomplish two things: introduce the idea and the audience/community for your site, and demonstrate a hi-rez prototype of some elements of the site. These presentations will be to your classmates and to an invited panel of industry experts.

You will give a presentation to the panel and turn in a report to me. Your report and your presentation should encompass:

presentation & report

Who is the audience you’re targeting?
— what age/gender/etc are they?
— what do they do, both for a living and also for fun?
— what are their hopes/dreams?
— why are they interested in the things they’re interested in?
— where do they go? (both in real life and online)
— why are they a part of the community(ies) they are a part of?
— what will they gain by visiting your site?
Give three specific examples of real people, complete with photo documentation. For your written report, write a short profile of each person.

Where is the community that already exists around your site’s topic?
— where do they go online?
— where do they go in the real world?
— what do they do when they’re there?
For both locations, please cite three specific examples of each (both virtual and real), explain the motivation your audience/community has in going to those places, their activities once they are there and what you can learn from these things to apply to your site. For the real-world place, please include photo documentation of your visit there: show us your community “in the wild”.

What sites are working in a similar space?
— how are you different?
— what are they doing right?
— what are they doing wrong?
— how do you plan to work with and among those sites?

Bring it all together
With all this information about your audience/community, explain how you will reach them and engage them with your site.
— three specific online examples
— two specific real-world ideas

Your report will be handed in, be sure that every member of your team signs the report.

Slides

Your slides need to cover:

1. Intro to your site with a one-sentence description
2. Your audience defined, with photos
3. Their community defined, with images of them in the locations you identified
4. Other sites in your space
5. A slide for your conclusion

Your slides can contain as much information as you want (though remember: less is often more, you will be talking along with them), but need to cover these five points.

Walkthrough

In addition, you will also present a guided walkthrough of a high-rez prototype of your site. Similar to your work in the Student Communications project, you should craft a mockup of your site in a presentation program of your choosing, with enough detail to get the site idea across, and enough active links to be able to show us some basic functionality.

Presentation specific notes

–Your group’s presentation should not last longer than 10 minutes, that will leave plenty of time for questions from the class and our panelists. If I had to offer a breakdown, that would be probably 7 minutes for the presentation and 3 minutes for the walkthrough. But that’s just an estimate–your time is your own.
–Plan your presentation and walkthrough out in advance, and make sure everyone’s practiced it as well. Rambling doesn’t help anyone.
–Be prepared to answer questions with further detail about your site and your strategy. Prepare also to hear criticism. Being argumentative does not help you in any way, shape, or form. Criticism at this stage is crucial to building a viable site.

Filed under: homework

Twitter Assignment: 21 days

Twitter is a lot of things. One of them is that it’s very hard to explain. There’s one thing that is true though: It’s a new paradigm for communication and community, and it’s reaching critical mass.

Because of that, we’re going to do a deep dive into Twitter. The thing about Twitter is that it takes a little time to “get it” (and, even more importantly, what that “it” is will be different for each person). As a result, we’re going to follow the “21 days” concept: It takes 21 days of doing something regularly for it to become a habit.

So let’s form Twitter habits:

• Starting by March 10th, you’ll need to sign up for an account on Twitter.
• Follow me. My Twitter page is here. I will follow you back–though drop me an @ reply on twitter (that’s @dansinker) so I know you’re there, otherwise you may get lost in a new follower shuffle.
• Also, post your twitter user name in the comments of this thread so that your classmates can find you.
• You need to post to twitter at least 3 times a day. In addition, you need to @ reply to someone at least twice a day. That’s a MINIMUM of five tweets a day.
• Follow new people every day. Here’s 10 good folks to get you started. Use Twitter Search to find other interesting people to follow (type in keywords of things that you find interesting, for example). I also find Google a great tool for finding people simply typing in their name followed by “twitter” tends to surface their Twitter account.
• Every 3 days, in 140 characters, sum up what you’ve learned and include the hashtag #onlinej10 in your tweet. For example: retweeting can really spread a message quickly #onlinej10
• Follow your classmates’ revelations by doing a twitter search for that hashtag
• We’ll have a pretty good list of things we’ve learned on Twitter at the end of this experiment. Plus, you’ll have developed a pretty healthy Twitter habit by then.
• At the end of our 21 days, write a 500 word summary of your time on Twitter, what you think it’s useful for, and how you see Journalism intersecting with it. That report will be due Friday April 9.

Another great thing about Twitter is that there are any number of ways to access it outside of the homepage. There are some great applications for accessing your tweets, like:
Tweetdeck
Tweetie
Twhirl
Twitteriffic

There are an almost countless list of interesting Twitter apps–The “app store” One Forty is fantastic for finding them.

Finally, one thing about having only 140 characters is that it makes it hard to paste in a real link. You’re going to need a URL shortener to do so. Personally, I like bit.ly, but people also use tinyurl and others.

For those just getting started on Twitter, there is an excellent guidebook published by Mashable. It’s online here.

See you on Twitter!

Filed under: homework

Powerful Copy & Paste Coding

Google Web Elements: Simple copy & paste widgets that allow for a lot of interaction with Google content.
Google AJAX Search API Wizards: Slightly more complicated, but more powerful, than Elements for finding and displaying things from the web.
Twitter Widgets: including embeddable, real-time Twitter searches.
Facebook Widgets: Warning, I find these to be hinkey, but they’ll bring various bits of Facebook into your site.
The motherlode: Google Gadgets: Built by others, code for integrating everything from RSS feeds to games into your site.
Google Friend Connect: Note, these work only when a page is hosted. But they’re very cool: build an entire social network from copy & paste code.

Filed under: lecture links

Your work for next week

A busy week! Three things:

1) Prepare and test a paper prototype for your group site. This is a group project, so divvy up the work equitably. You need to:
–build the prototype and test it on three actual users of your site (not just your roomates).
–between each user testing session, refine the prototype according to feedback from the previous test.
–document all the testing sessions with video and upload a video of the testing to YouTube.
–write a brief report documenting what you learned from testing and how you’re proceeding with the site concept and design (250 words).
–stick the report and video in the comments of this post.

2) Hand-code a deep-dive web page on a subject of your choosing. This page needs to:
–demonstrate your understanding of both basic HTML and CSS.
–show a deep understanding of the subject you’ve chosen.
–as with the example we looked at in class, it should have an introduction and three distinct topic “dives” consisting of multiple links.
–bring the .html file with you to class.

3) We’ll have a mid-term check-in on the blog you’ve been keeping since week one. Please make sure it’s up-to-date.

Filed under: homework

deep dive examples.

Living Stories “deep dive” example
WTTW’s Chicago Tonight created a pretty amazing deep dive about the mortgage crisis.

Finally, a links to the deep dive demo from class today:
basic HTML
ugly CSS

Filed under: in-class work

basic HTML structure

Understanding the structure of a basic HTML document is crucial to, well, everything. To give you a head start, here’s a downloadable .html file with that basic structure, plus basic placement of CSS inside the head.

NOTE: clicking on that link will bring up a blank page. Right-click (PC) or Control-click (Mac) to download the file instead.

Filed under: lecture links

in-class links 3-12-10

Party like it’s 1994: The original website for Mosaic, the browser that changed everything.

Firebug, the Firefox add-on that lets you dig into site structure and design.

HTML TOOLS
Text Wrangler the free text editor we used in class today.

Bespin, the online text editor. Free and great (if not slightly buggy).

Pastie a great tool for pasting in your HTML code in order to, say, send it along to a teacher to find out what went wrong.

CSS TOOLS
CSS Zen Garden an incredible resource for downloadable CSS-based site designs. Don’t just take it out of the can, but look at what they’re doing and borrow code to tweak and customize and learn.

There are a number of additional tools for determining various CSS properties. One that’s endlessly helpful is CSS Type Set.

Color Picker a very intuitive web app to pick HTML-ready colors.

Filed under: lecture links

HTML and CSS reference

The best reference site that I’ve found to help you with grasping both basic and advanced HTML and CSS is a site called HTML Dog.

It not only includes a number of very good tutorials for people working at beginner, intermediate, and advanced levels, it also includes a complete reference for both HTML tags and CSS properties, complete with examples of use.

Bookmark it, and use it regularly. The best way to learn this stuff is to simply try it out and look at how other sites do it using a tool like Firebug.

Filed under: lecture links

Readings, links, + reactions for 3-12-10

In class next week, we’ll be getting our hands dirty with code. Here are two good reasons why:
Why Journalists Should Learn to Code
Be Not Afraid: Journalists Should Learn Code

Filed under: readings

Tools for group collaboration

the google suite
Google Docs
Google Calendar
Google Sites

the social networks
Facebook
Twitter

collaboration-focused tools
Basecamp
Drop.io

Filed under: Uncategorized