Web Design for Student Bloggers

I am meeting with Andrea Hernandez and our 5th graders to give our students an introduction (an awareness) about the design of a blog. The 5th graders are one of our pilot grades of implementing student portfolios. We will be starting the lesson out by looking at different sites that these 10/11 year olds frequent. What do they like about them, what don’t they like?

Here are some of the sites the students look at on a regular basis.

• Shelfari.com
• Facebook
• Google
• Webkinz/Club Penguin
• Cool Math
• Animal Jam
• Miniclip
• BrainPop
• YouTube
• Scratch

They like:

• Image related to content
• Search function
• Thumbnail images
• Ratings
• Logo

They don’t like:

• Advertisement (distracting)

Keep your audience in mind...

Will will also look at different sites designed for different audiences:

• News Sites- CNN, BBC,  Frankfurter Allgemeine, Jacksonville Times Union,
• School Sites- MJGDS, Charlotte Country Day School, Gesher Jewish Day School
• Student sites- Check out  many examples of student blogs participating in the Student Blogging Challenge.

Check out some of these web pages. What do you think of their design?

• Yale University School of Arts
  

  Yale University

• Political Campaign
  

  Political

• Indiana University: Evolution and Nature of Science Institute
  

  Indiana University

• Car Leasing
  

  Car Leasing

I will be using and clarifying (if needed) “web (blog) design” vocabulary.

• URL
• Domain
• Themes- WordPress Theme Gallery
• Widgets
• Embed Code
• Sidebar
• Header
• Links
• Categories
• CSS
• Pages
• Posts
• Advertisements
• HTML- Funky Chickens, Lissa Explains, Mrs. Yollis’s post
• Colors- use Color Scheme Designer, Hex Color Picker
• Fonts- typography- DaFonts, Samples of Web Typography,

Students will then browse the WordPress Theme Gallery to find a theme with a design of their liking. Since we are using WordPress 3.0 multi user site, students are not able to download and install their own themes, but will have to email us the link to the theme and the SuperAdmins will have to install and activate the theme network wide.

Once the theme of their liking is activated we will meet again to talk about how to customize their blog further with custom headers and other widgets.

Blinging Your Blog

Image licensed under Creative Commons by Swamibu Blinging your Blog:

• ClustrMap- Add a map of visitors
• Flag Counter- Add the flags of countries your visitors are from
• Revolver Maps- Add a rotating globe of your visitors
• Shelfari- Add a bookshelf
• Voki- Create an animated speaking avatar
• Virtual Pet

More Resources:

• Jeff Utecht wrote a blog post about Discussing Web Design in 5th Grade.

Image Resolution and Resizing for Your Blog

I order to save time and space when uploading images to your blog, it is necessary to “RESIZE” your images.

You can download the How-To-Guide to Resizing Images for your Blog here. (pdf)

Like other digital files, images are being measured in bytes

The higher the number of pixels, the sharper the image and the larger you “could” print the image. Since we are uploading the image to the blog, there is no need to upload an image with a pixel size larger than 600 pixels in width. Usually the blog theme will not accommodate a larger pixel width than that. In addition most monitors will not show a difference in the image quality anyway.

How do you re-size an image?

The easiest way is to use a screencapture software, such as Skitch (mac) or Jing Project (PC).

http://skitch.com http://www.techsmith.com/jing/

(For this How-To-Guide, we will be using Skitch)

Once the software is installed on your computer.

1. Open up the image on your screen (with iPhoto, Finder or Explorer) and make sure it shows the exact size you want it to be on your blog.

You might have to use the Command + or – (mac), Ctrl + or – (PC)  or adjust your window to resize the image on your screen.

2. Now open up Skitch

3. Click on “Snap to start.

4. A Crosshair will appear.

5. Place Crosshair in upper left corner and drag a rectangle over the area you want to capture. Let go of mouse or trackpad to snap the image. You will hear a “picture taking” sound.

6. Drag and adjust the lower right hand corner of window to resize the image. Keep an eye out on the dimensions displayed on the lower left hand side.

7. Name the new image

8. Drag the image to your Desktop or to another place in your Finder.

9. Upload image to your blog by browsing to that location.

Gone Hunting… for WP Plugins

Every once in a while, I go hunting…

Gone hunting...

… hunting for plugins for my blog which is using WordPress as its platform.

Plugins are defined according to Wikipedia as:

a computer program that interacts with a host application to provide a certain, usually very specific, function “on demand”

Sometimes, I find a “cool” feature on someone else’s blog and I want to add the same functionality to Langwitches. I then search WordPress’ plugin directory or directly google for “WordPress or WP plugin and what I want the plugin to do”.

Here is the list of plugins I have currently installed AND activated in my WordPress blog. Check them out and see if you might find them useful for your blog.

Akismet

Akismet checks your comments against the Akismet web service to see if they look like spam or not.

Akismet

Audio player

Audio Player is a highly configurable but simple mp3 player for all your audio needs. You can customise the player’s colour scheme to match your blog theme, have it automatically show track information from the encoded ID3 tags and more.

Once the pluginn is activate, you only have to upload your MP3 file and add this code to your post:

Audio clip: Adobe Flash Player (version 9 or above) is required to play this audio clip. Download the latest version here. You also need to have JavaScript enabled in your browser.

Audio Player

cforms

cformsII offers unparalleled flexibility in deploying contact forms across your blog. Features include: comprehensive SPAM protection, Ajax support, Backup & Restore, Multi-Recipients, Role Manager support, Database tracking and many more.

cForm

CommentLuv

Plugin to show a link to the last post from the commenters blog by parsing the feed at their given URL when they leave a comment. Rewards your readers and encourage more comments.

CommentLuv

LinkWithin

Displays recommended stories and associated thumbnails from your blog

LinkWithin

Most Popular Posts

Display a link to the most popular posts on your blog according to the number of comments.

Page Links To

Allows you to point WordPress pages or posts to a URL of your choosing. Good for setting up navigational links to non-WP sections of your site or to off-site resources.

PollDaddy Polls

Create and manage PollDaddy polls in WordPress

Polls

PostRank

Showcase your Top Posts with the PostRank widget, track social media analytics, and engage with your readers from the WP dashboard.

PostRank

Stray Random Quotes

Display and rotate random quotes and words everywhere on your blog. Easy to custom and manage. Ajax enabled.

Collect significant posts to you directly in your Dashboard. Widget will randomly display your quotes in a sidebar for you.

Subscribe2

Notifies an email list when new entries are posted.

Subscribe to blog updates via e-mail

Subscribe To Comments

Allows readers to receive notifications of new comments that are posted to an entry.

Subscribe to updates of comments on individual posts via e-mail

TweetMeme Retweet Button

Adds a button which easily lets you retweet your blog posts.

Allow readers to retweet easily from within you blog

Wickett Twitter Widget

Display Tweets in the sidebar of your blog

Display your own tweets on your blog

WordPress.com Stats

Tracks views, post/page views, referrers, and clicks.

Statistics

WordPress Database Backup

On-demand backup of your WordPress database.

WP-EMail

Allows people to recommand/send your WordPress blog’s post/page to a friend.

E-mail the posts

WP-Print

Displays a printable version of your WordPress blog’s post/page.

Print version of blog post

WP tags to Technorati

Simple plugin to convert WordPress 2.3′s tags to Technorati (‘http://technorati.com’) links.

WPtouch iPhone Theme

A plugin which formats your site with a mobile theme for the Apple iPhone / iPod touch, Google Android and other touch-based smartphones.

What are your favorite WordPress plugins? Which ones help you and your blog readers get the most out of? Which plugins are activated? Take the poll in the right sidebar or share in the comment section.