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.

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.

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 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.

Inspired by writing the previous post “WordPress blog and your own domain“, I started playing with new WordPress themes.

Thousands of WordPress themes are available on the web. You can download many of them free as well as for a fee.

• You can google  “WordPress themes”
• Search WordPress’ Free Themes Directory
• Browse some of the links in my del.icio.us bookmarks for interesting WordPress themes.
• Check out Steve Dembo’s Top 20 WordPress Themes for Education

After two years of using the Ad Clerum theme…

Langwitches Blog Look 2007-2009

I decided it was time for a new look for Langwitches…

In WordPress version 2.8, there is the option to “Add New Themes” directly in the Dashboard under “Appearance”.

There you can search for a theme by certain criteria, such as colors, columns, width and other features. But you can also upload a zip file, that you have previously downloaded from another theme site.

Once you have found a theme that you like. Find the download button/link, then save the file to your computer (I created a dedicated WP-themes folder under MyDocuments).

Once the zip file of the theme is saved on your computer, you can

• unzip your file, then upload via FTP to your WP-content> themes folder on your server OR
• return to the Dashboard > Appearance>and click on upload, then browse for the folder that contain your zip files of the theme and click “Install Now”.

Once the theme has been installed, click on “Themes” under Appearance. The top thumbnail shows you the theme that is currently active. Select “Preview” or “Activate” link of any of the other theme thumbnails to change the look of your blog.

The free WordPress themes at Refueled.net, seem to speak to me the most, so I found another one, Peacemaker,  that I liked. I was able to tweak it a little bit to customize Langwitches’ look by changing the header and adding widgets to the two available sidebars.

With this particular theme, changing the header was simple. Not all themes will have the option for a Custom Header under the “Appearance” menu. In this case, I simply had to create an image (970 x 160 pixels), save it on my computer, then browse and upload it. This automatically changed the header from the default one to my customized one.

In case your new theme does not have the option, you will need to upload your new image via FTP into the WP-content>themes> “your-themes-name”>images folder in order to replace the default header image. Make sure that you keep the SAME dimensions as well as the SAME image file name as the default one.

Note: There is an email link embedded within this post, please visit this post to email it.
Note: There is a print link embedded within this post, please visit this post to print it.

I am testing an E-mail & Print this blog post WordPress plugin from Lesterchan.net.

It is supposed to add a small icon at the end of each post, to allow viewers to print or e-mail the post to someone.

I was manually able to add code to individual posts after acttivating the two plugins, but would like the option automatically added to each post.

1st Attempt: After pasting the code

<?php if(function_exists(‘wp_email’)) { email_link(); } ?>

into my single.php file, the two icons are showing up on the top of the post.

2nd Attempt: Am pasting the above code further down in the php file.

Result: No e-mail or print icon are showing up.

Will have to manually insert the code for now I guess

Note: There is an email link embedded within this post, please visit this post to email it.
Note: There is a print link embedded within this post, please visit this post to print it.

Several people have asked me lately how to purchase their own domain name and create a WordPress blog on that domain. It is probably a good idea to write a blog post about the experience, I have had and my recommendation.

Let’s explain some of the terms you need to be familiar with:

URL:

• Your domain name is part of the URL/Internet address
• ex. http://www.langwitches.org

Domain Name:

• Pick your domain name carefully. It will be part of your URL (Internet address) and is part of your online identity/brand.
  ex. langwitches.org
• The domain you want might not be available anymore (someone else purchased it before you), you might have to get creative.
• Domain names are purchased on an annual basis. If you fail to renew your domain name, someone else might purchase it and you will loose it.
• There are MANY places you can purchase a domain name through. Many (most/all?) hosting companies can/will  include the purchase of a domain name as part of their hosting package)
• If you purchase your domain name from a seperate company than your hosting company, you will need to “point” your domain name to your hosting company’s server, so when someone types in the URL, your site/files will be displayed. If you purchase your domain name through your hosting company, it should be done automatically.
• There are different domain name extensions: .com/.net/.org/.info/.bz/.us/ etc. You might want to consider purchasing .com/.net/.org at the same time, to make sure that no one else can purchase your online identity/brand
• You can have one domain name be forwarded to another domain or URL. Ex. langwitches.com will be forwarded to langwitches.org/blog
• I purchased all my domain names through a company called NameSecure . I pay U$8.95 per year for each of my domain names. (I do not get paid by them, nor am affiliated with them in any other way)

Hosting Company:

• A hosting company will “host” your web site files on their server for a monthly fee.
• There are literally THOUSANDS of hosting companies out there.
• Things to consider when choosing a hosting company
  • Monthly fee (add on fees)
  • Customer service availability (Chat-Online/Toll-Free/E-mail)
  • Local or International Calling Centers
  • Control Panel accessibility (How much can you tweak, edit, add, delete on your own?)
  • Willingness to customize options for you.
• I have had several hosting companies over the years. Some better, some worse than others. For the last 2 years, I have been with BlueHost. I have nothing but great things to say about their service. I am thrilled with their control panel options. Installing new WordPress blogs is a SimpleScript and takes only a few seconds compared to 20+ minutes a manual install used to take me. Updates to new versions of WordPress are also done in a flash.
• I do not get paid by BlueHost, nor am affiliated with them in any other way. I am simply a happy customer.

So here are the steps you could ( I will use BlueHost as an example) follow, in order to purchase your domain name, sign up for a hosting company and install a WordPress blog.

1. Go to BlueHost.com
2. Sign up for a domain name and a hosting plan
3. Sign into the ControlPanel

4.

5.

6.

7.

A few seconds later your database with all WordPress tables and files are created and installed and ready for you. Just login to the Dashboard and customize layout, add links, widgets, etc. and write your first blog post.

I found a simple and promising solution for creating a quick web site for your class, a topic or as a simple resource depository:

Netvibes

Sign up is free and easy. You get to pick a URL for each page that you create (ex. http://www.netvibes.com/mrstolisano). Each individual pages can either be private or public. Individual pages can have their own tabs. This is pretty useful for different classes you teach or different periods.

The first Netvibes page I ever created was for my TechCamp this past week. I called the first tab on that page “General” and added a weather widget and a “To Do List” widget for every day. That kept the kids informed what we were planning on doing that day and kept me on track. Some campers were very diligent about having me cross off accomplished tasks every day too. Great way of reviewing what was done previously.

There are many different widgets to be added to your pages. You can choose a different layout for each tab, depending on how many widgets you want to add next to each other. Simply click on “edit” next to each tab’s title and choose the appropriate layout. I used the “Link” and the “HTML” module mostly on this TechCamo page. Just click the green “Add” button to move it into your tab. You then can move it around to the a specific position, if you choose a layout of more than “1″.

I used several tabs to classify different links to website, I wanted to make available for my campers to explore.

What I especially like about it, was its visual format, which is particular helpful for younger elementary school students who get frustrated when having to scroll through long lists of text links. By selecting to add a “Link Module”, then entering the URL, Netvibes  automatically added a thumbnail of the linked site. You can add a title and a description to the link module as well.

You can also combine different widget on tab.  Once you added the module, click edit and enter the URL (for the link) or paste an embed code from a different website (such as wallwisher , tinychat or glogster)

Campers worked on a Glog poster(s) during the week, which I was also able to embed the code from each camper. When they updated their glog through Glogster, it automatically updated on our netvibes site too.

Another helpful tab, proved to be the embeded Wallwisher code. A virtual Bulletin Board, where students could leave digital Stickies to answer or ask a question and share information about a topic.

I found netvibes to be a very easy tool to work with . It was intuitive, visual, customizable, “embeddable” and easily accessible for me and my students on any computer. Students went onto the page from home as well and made sure that I was going to leave the site up for them to go to even after our TechCamp had ended.

If you are looking for a simple way to create a site to organize a class, add information, pull information from different places together, add links, feeds and student created content, give Netvibes a try.

Here are some more widgets that are available to add to you pages.

Yesterday, I had a very interesting talk about school web design  with the team of It’s Elementary on EdTechTalk. Thank you Alice, Jose, Maria and Lisa for having me!

You can listen in to the recorded show on EdTechTalk or download the MP3 file to your iPod for on the go listening.

I have been designing websites since 1992. Started out on the Prodigy service, when I created our family page and added my first audio file with the cries of my newborn daughter, so my father (in Germany) could hear his granddaughter for the first time. Since then I created and designed websites in plain HTML code, MS FrontPage, Dreamweaver and over the last few years through WordPress. I attended the Web Design and Development program at a Junior College, went to seminars that specifically dealt with educational web design and took graduate classes in web design as part of my Masters Degree.

6 years ago, I was hired at my current school as a Spanish teacher and as a webmaster. I designed the entire school website (1000+ pages)  in Photoshop and Dreamweaver.

Old website had the following characteristics:

• Each teacher had their own website, with its own layout and design. If teachers wanted to change the look of their site, or a new teacher was hired, I had to design, modify or create new pages from scratch.
• Every update had to be approved by the office and channeled through me to format and upload via FTP to the site. No last minute news update.
• No update was possible if I was out of town or country. When, due to a hurricane,  school was canceled and knocked out power to my house, no news flash of school cancellation and re-opening was possible.
• The website shell, the non-password protected area was static and changed little to not at all over 5 years.
• Classroom pages (all password protected)  would be updated between once a week to once a month. Teachers had to be reminded to send in updates in a timely manner.
• Digital version made available online of weekly newsletter sent home as a paper copy.

For almost 3 years, I have been using a WordPress Blog for Langwitches. Immediately, I understood that the blog format could solve my issues with classroom teachers. As long as they could type a Word document, they would be able to upload their own updates to their classroom site.

In 2007, I set up a self hosted WordPress blog for EVERY classroom teacher.  Each one was able to log into their password protected site and update without having to go through me. I also sent them off to scout out some of the WordPress themes and  layouts.  I then uploaded their chosen  files via FTP into their theme directory. Some teachers have several themes in their directory by now. They can administer their own changes by switching themes  depending on the season or their mood.

We continue to transition…

… Change is important, but does take time.

Understanding the underlying concept of the difference between a blog vs. static website is important,   if we wanted to support our teachers in creatinging  a learning community with their classroom blogs.

While teachers were getting comfortable in updating content, uploading images and embedding presentations and other slideshows, the main school site stayed static and outdated. Prospective parents visited the site to get a feel for the school and for information, but current parents had little reason to visit the site. What a wasted opportunity to communicate with parents and cut down on unnecessary phone calls and paper copies.

It was time to convert the old static HTML site to a better format in order to allow:

• Multiple users in different roles to create, author, review, edit, revise and upload content
• Deliver up to the minute important news flashes to parents
• Allow file downloads for recurring documents
• Showcase and point out digital projects created by teachers and students
• Allow visitors to subscribe to content update via RSS feed or E-mail subscription
• Allow updating from literally anywhere in the world, even from an iPhone, Internet cafe or Starbucks in case of a hurricane or other emergency situation

A website group was formed, made up by people from the school office, who would be in charge of creating, reviewing  and updating current content to the new site.

Here were a few requests from that group. The website should include :

• Flyout navigation bar
• Lots of places to showcase images of events and students
• Search function
• Clean layout
• School colors, matching brochures and flyers
• Include the school logo
• School Calendar
• Easy and direct access to teacher’s individual blog

Here are some other examples of elementary schools, that are  incorporating web 2.0 tools to better communicating to their parent/home community.

Please leave a link to other school sites that you have found in the comment section.

• San Jose Episcopal Day School
• Lewis Elementary School
• Grandview Elementary School
• Pencrest School District
• Cambridge Springs Elementary

All of our teachers are administrators of their own wordpress blog (hosted on our domain) As part of our monthly workshops, the past week “Embedding Media on Your Blog” was offered.

The definition of “embedding” is :

To enclose snugly or firmly.
To cause to be an integral part of a surrounding whole

In the world of our classroom blogs that means to insert an image, a slideshow, audio or video, so it can easily be viewed as part of your post.

There are many third party websites, that allow you to upload images and then easily embed them into YOUR classroom blog by copying and pasting special code that they provide to you. You can also upload and embed audio and video files directly. The blog software will automatically use a special player that plays directly inside your post without the need for the visitor to download the file.

Here is an overview that was shared with faculty members. You might find the following links helpful yourself or are able to pass it on to your staff as well.

Images (jpeg file)

Smilebox

Bubbleshare

Photoshow

Slide

• Embed code for my space
• Tweak code: delete after </object> to remove buttons that allow to click through

Voicethread

• In your VoiceThread click on menu>embed> then copy the code
• Go to your blog
• Create a new post
• Click on the HTML tab
• Paste (CTRL-V) the code into the text box

Audio (mp3 file)

• Audacity
• Once created, upload to blog by clicking on “Add Audio”
• Once uploaded, highlight the URL and copy it (CTRL-C)
• Type in your blog post [audio:your_mp3_file.mp3 . After you type in “[audio:” then paste the URL you have copied (CTRL-V), don’t forget to type the closing bracket. We use the Audio Player WordPress Plugin
• Publish your post and you should see the audio player in your post

Movies (.wmv file)

Windows Movie Maker

• Upload the .wmv file by clicking on “add Media” and browsing
• Copy the URL (CTRL-C)
• Click on the “Insert/edit embedded media” button on the second row of the toolbar
• Paste the URL
• Enter dimensions 400×400
• Under the advanced tab-uncheck “Auto Play”
• You will see a yellow box inserted in the blog text box. Once you publish, you will be able to watch the movie

Photostory

Animoto

• get embed code (push pin icon)
• copy-paste in blog post on the HTML tab

Presentations

Google Presentation

• Upload the PowerPoint presentation to Google Docs
• Share
• Embed
• Copy code-
• Paste in blog post on the html tab

Slideshare

• On your blog- add media
• browse for the file on your computer
• upload

Remember

• Use your school account email when signing up for any third party site. Do not use that account for personal projects
• Do not upload students’ personal information or pictures that display their names
• When embedding media in your blog:
  • Type any text on the visual tab
  • Then paste the embed code on the HTML tab