Online Journalism: Fall 2010


Just another site

Lecture Links 11-19-10

Quick Review: PageRank
How Google Works
Page Rank Checker
Sites with the Page Rank of 10

Writing for the Web
Writing Persuasive Content

Search Engine Optimization
The Basics of Search Engine Optimization
Writing for Search Engine Optimization
Creating the Curious/Known combo headline
An excellent critique of the SEO “industry”

WordPress SEO plugin

Calls to Action
Creating effective calls to action
37Signals tests calls to action

Flickr’s clear calls to action
37 Signals answers basic questions fast
Culinary Culture makes the sale


Filed under: Lecture Links

Two pages from today

Here are links to the two pages built in class today:
My Page
My Other Page

Filed under: Lecture Links

HTML & CSS tools

Here’s a link to the absolute most basic HTML structure around. Copy and use!

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.

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

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 your text-based code and getting a URL back that you can easily e-mail or Tweet to someone.

CSS Type Set. A great tool for setting all sorts of font properties in CSS.

A great font preview that gives you the CSS code for the examples

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

Filed under: Lecture Links

Lecture Links 10-8-10

Page Rank Checker: a great tool for checking the PageRank of sites around the Internet.
Google: Obviously, great for search. But the new left-hand sidebar allows for narrowing that search to different media types. Unbelievably helpful.
Twitter Search: For finding a needle in the Twitter haystack.
Listorious: A great third-party tool for finding people and lists in Twitter.
Google Reader: Collecting RSS feeds.
Google Alerts: Can send to e-mail *or* to a feed, which you could then consume in Reader
Twitter Lists: A great way to curate a group of people you’re following in Twitter.

Filed under: Lecture Links

user interface design with AJAX!

Modern websites use a series of technologies called AJAX to create smooth experiences for their users devoid of the many button-heavy workflows of the past. It’s important, even when developing a prototype application to consider how modern tech allows for different ways of presenting/parsing/manipulating information:

Google Instant. When you search google now, you no longer have to hit a key to see results–just start typing.
Twitter Search. Twitter keeps keeps a persistent search going for whatever you’ve entered in, and notifies you when there are updates.
Google Forms. A feature of Google Spreadsheets (go to create new > form), this form builder allows you to craft forms elegantly and in real-time.
Drop Mocks: a drag-and-drop enabled, automatic slide show generator.
The Gridulator. Sure it’s an obscure web-design need, but computing grids is a pain. The gridulator updates and creates previews in real-time.
Page SlideA technical demo, but a really interesting one: building additional info that literally slides the page over to reveal itself.
Chicago Mayoral Scorecard. This webapp allows you to filter, parse, and search the candidates in the mix for the mayoral race quickly and easily (full disclosure: I built it).

Filed under: Lecture Links

Paper Prototyping Examples

A basic paper prototype:

Complexity in paper:

OK, really, this is JUST PLAIN AWESOME:

Filed under: Lecture Links

Other links about Online Journalism