Thursday, May 29, 2008

Create a Random Widget with Images

In a previous post, I explained how to use the RotateContent.com tool to create a widget containing text and/or links. In this tutorial, I will explain how to use the RotateContent.com tool to create a widget containing images.

Getting your images ready. The trick to creating a widget with images is that the images have to be published on the web, with each image having its own web address. So, you can publish your images in your webspace if you want - but you might find it easier to publish your images in a shared image website, such as Google's Picasa. For the purposes of this tutorial, I will assume you are going to publish your images at Picasa, although you can certainly choose to publish them at another image service, such as Flickr, or in your own personal webspace.

You also need to make sure that your images are the right size to fit in a widget. If the images are being chosen at random, you need to make sure that they are more or less the same size - usually width is the most important dimension on a webpage, although height can also be an issue. You should probably make sure that your images do not exceed a certain maximum width (or a maximum height, depending on where you intend to use the widget on your webpage). You might even want to make sure the images have the exact same width. To resize your images, you can use an online service like Picnik.com. Remember: you can resize images to make them smaller, but you cannot resize images to make them larger because the image quality will degrade significantly if you try to enlarge them.

As you prepare your images, you should save them in a separate folder on your computer to make them easy to find. Before you go any farther with this tutorial, make sure that you have all your images resized and ready to use in a specific folder on your computer.

Step 1: Publish your images. For the purposes of this tutorial, I will assume that you are publishing the images online at Picasa. If you have a Google account log-on (for Gmail, for Blogger, etc.), you will find Google Picasa service listed as "Photos" when you are logged on to Google search or Gmail - just check the upper left-hand corner of the screen and if the "Photos" option is not listed, click on "More" and you will find "Photos" listed there:



You can also go directly to the Picasa Web Albums service and log on with your Gmail address.

Now that you are looking at the Picasa Web Albums screen, select the option that says New Album:



You will need to give the Album a name, and you should make sure that is listed as a public album, since you will be sharing the images via your widget. You can enter any other information here that you want, and when you are done, click Create.

Now you will upload the files from your computer, using the browse buttons to locate each file and upload it. (You can also choose to install a Picasa program on your computer if you want to make it easier to upload lots of photos at once; you'll see more information about uploading images on the right-hand side of the screen.)

When you are done uploading your photos, each photo in your Album has its own page, with the pages arranged in a slideshow format. What you will need for your widget is to get the address of each image. So, when you get to Step 2, you will go to the individual page of each image in the album, RIGHT-MOUSE click on the image, and select "Copy Image Location" to copy the image address to the clipboard.

Step 2: Add image address to your widget template. Okay, now that you have got your images all published online, you are ready to add the images to your widget. Follow the procedure in the Create a Widget Tutorial for generating your random content template. For the purposes of this tutorial, I will assume you are using the Mozilla Seamonkey HTML editor to add the images to your template. Just open the template in Mozilla Seamonkey, and click inside the content cell where you want to insert an image, and click the Image icon:



This will bring up the Image properties box, where you will paste in the http address for each image. Just go to the individual image page for each image in your Picasa Album, RIGHT-MOUSE click on the image, and choose "Copy Image Location" to copy the image address to your clipboard. Then, paste the image address into the Image properties box. You will also need to enter a brief description of the image in the Alternate Text box. If you have done this correctly, you will see a tiny version of your image appear in the bottom part of the Image properties box. Click OK when you are done.



You should now see the image displaying in the cell. You can add text and/or links if you want. Move on to the next cell, until you have added each of your images to the template. Here's an example of a template table as it gets filled up with an image in each row. Remember to delete any rows you do not use, and if you want to add more rows you can do that, too - just make sure to type the word "random" in the left-hand cell of any new rows that you add.



When you are done, save the template table you have created. Then follow the instructions for converting your template into a script and publishing the script online! After you have created your template with the images in it, there is no difference in publishing your widget; the instructions for a text widget and an image widget are exactly the same.

Publishing widgets with images can be a lot of fun - here is an Internet Bumper Sticker widget which I created using images from InternetBumperStickers.com! You should see a different Internet Bumper Sticker at random each time the page reloads - and notice that I also included a link to the website I used as my source for the images, since it is good to give credit where credit is due. InternetBumperStickers.com is one of many, many sites online which allows you to re-use their images, provided that you include a link back to the source, as I have done here. :-)


(Random Internet bumper stickers)


Some dynamic content may not display if you are reading this blog via RSS or through an email subscription. You can always visit the How-To Tech Tips blog to see the full content, and to find out how to subscribe to the latest posts.

Create a Random Widget with Text (and Links)

You can use the RotateContent.com tool to create your own widgets with dynamic content, either random content or date-based content. To do this, you will need to have access to webspace where you can publish the widget. For the purposes of this tutorial, I will be publishing the widget to my University of Oklahoma webspace, which is available to all students, faculty and staff at the University of Oklahoma. You probably also have webspace you can use from your Internet service provider or web hosting provider.

You will also need a good HTML editor, such as Dreamweaver. If you do not already have an HTML editor, I highly recommend Mozilla Seamonkey, which is a very simple, free HTML editor created by the same folks who brought you the Firefox browser. You can download and install Mozilla Seamonkey for Windows or Mac from the Mozilla Seamonkey website.

Before you start building the widget, you should identify the content you want to use. For the purposes of this tutorial, I prepared a quick list of some Latin proverbs that I like. You could also choose some websites you want to link to, and so on. For the purposes of this tutorial, I am NOT using images, but I will post a separate tutorial for creating widgets with images in them. To see some examples of widgets created the RotateContent tool, visit the SchoolhouseWidgets.com website (you can use any of the widgets there, without having to build your own, of course!).

After you have designated your content, go to RotateContent.com and select RANDOMIZED content from the Create Content options. This will take you to a screen where you enter the number of items you plan to include. Don't worry, you can change this later if you want - for now, just put in your best guess! For the purposes of this tutorial, I am going to make a widget with 10 random Latin quotes, so I enter 10 into the box and click the Create Template button.



This generates an HTML file that I need to download and save somewhere on my computer. It's a good idea to create a folder where you can keep all your widget materials. So, RIGHT-CLICK on the link provided, and save the file to the folder you are going to use. You should give the HTML file a name that you will remember. For this tutorial, I'll call the file favoritequotes.html.

After I have saved the file on my computer, I then use the HTML editor to open the file and add the content to it. When you open the file, you will see that it is a simple table, and you will enter your content in the individual cells of the right-hand column. Make sure you DELETE any rows where you decide not to add content. If you want to add more rows, you can do that, too - just make sure you type the word "random" in the left-hand cell of each row, as you see in the template file. You can format the text with bold, italics, etc., and you can also use the HTML editor to create links to webpages online. When you are done, make sure you save your work! (Do not try to use images for this tutorial; I'll be explaining in a separate tutorial how to create a widget with images.)



After you have finished adding content to the template file, you will return to RotateContent.com to change your table into a script (this is "Step 4" of the Randomized Content process, converting the template to a script). You need to choose whether you want a Javascript or a PHP script. If you are not sure about the difference between these two options, just choose the Javascript option - that is the best general choice. Next, browse to find your HTML file, and then click the Convert Template button.



After the template file is converted to a javascript, you will need to RIGHT-MOUSE click on the link to download the script file and save it. Make sure you save the javascript file in the same folder that you saved your template file so that you will be able to find the javascript later.

Next comes the tricky part: you need to UPLOAD THE SCRIPT (the .js file) to a server somewhere. To upload the script, you will need to use an FTP client to do that. If you do not already have an FTP client that you use, I recommend FIreFTP for Firefox. This is a browser-based FTP client that is extremely easy to use; here are some notes about installing and using FireFTP.

After you upload the script, it will have an address on the web. For example, if I use my university's webspace, my script is located here:
http://faculty-staff.ou.edu/G/Laura.K.Gibbs-1/favoritequotes.js

So, to use the script, I insert that address into this script formula. Where I have put the address of my script (http://faculty-staff.ou.edu/G/Laura.K.Gibbs-1/favoritequotes.js), you will need to substitute the address where you have published your script.



This formula is the Javascript code that I will insert into the webpage, blog page or wiki where I want to display the results of the script. To insert this formula, I need to be looking at the HTML view of the webpage, blog page, or wiki. In another tutorial I have explained how to insert a Javascript into a PBWiki page. For this tutorial, I will explain how to insert a Javascript into a Blogger.com blog post like this one.

If I want to insert the Javascript into a blog post like this one, I just have to make sure that I am in HTML mode (instead of Compose mode), and then I paste in the Javascript:



Here are the results if I do that with my random Latin quotes script (you should see one of the 10 quotes at random each time the page refreshes):

Random Latin Quote:



In a separate tutorial, I'll explain some other methods for inserting Javascripts into blogs and other websites, and I'll also explain how you can use the RotateContent.com tool to create widgets that contain images, too! :-)


Some dynamic content may not display if you are reading this blog via RSS or through an email subscription. You can always visit the How-To Tech Tips blog to see the full content, and to find out how to subscribe to the latest posts.

Typing Foreign Characters: Greek and Polish

Here are two VERY handy utilities I use for when I have to type classical Greek (polytonic Greek, with the complicated accents and breathing marks) and when I have to type in Polish (a funky extended Latin character set with various diacritics).

For Greek, I use Randy Hoyt's fantastic took at TypeGreek.com, which allows you to type Beta code and get Unicode-compliant Greek which you can cut-and-paste into any application. You can use this for typing Greek characters with or without accent marks. Here's a screenshot:



For Polish, I use Tomasz Szynalski's TypeIt.org, which offers support for several languages, including Polish, which is at Polish.TypeIt.org. The other languages it supports are Czech, French, German, Italian, Portuguese, Romanian, Spanish, Swedish and Turkish. Here's a screenshot:



What great online utilities, both completely free and very easy to use! I've never been very good at understanding how to install alternate keyboards, etc., but these web-based options allow me to do my typing without any special effort at all!


Some dynamic content may not display if you are reading this blog via RSS or through an email subscription. You can always visit the How-To Tech Tips blog to see the full content, and to find out how to subscribe to the latest posts. You can find Latin and Greek materials at the Bestiaria Latina blog.

Wednesday, May 28, 2008

Getting started with Blogger.com

There are a lot of different blogging services out there and in my various "lives online" I use a lot of them - the Bloglines blog tool, the Ning.com blog tool, my blog at Liberated Syndication (for podcasting), my own installation of b2evo, co-blogging with a friend at his installation of WordPress... perhaps others - I'm not even sure! But of all of them, BLOGGER.COM remains my favorite, and in this post I thought I would quickly outline the steps I follow when I create a new Blogger.com blog.

Log on to Blogger.com. First, I go to the website Blogger.com and log on with my Gmail identity (having a Gmail identity is one of the best ways to get access to the whole range of Goggle services, including Blogger.com, with a single log-on).

Create a blog. Then, I click on CREATE A BLOG. This takes me to a screen which asks me to designate a title for the blog, and to also obtain a blog address. For the blog TITLE, you can use as many words as you want, and you also have the option of changing the title later on - so don't stress about it. For the blog ADDRESS, you want to make sure that you pick a good, simple, short, phrase with no spaces in it that you will want to keep. After you start blogging, you will not want to change the address. You will need to "Check Availability" to make sure nobody is already using that address.

When you are done, Google will then require you to do the Word Verification test to make sure you are you, and not a machine!



Choose a template. Next, you will be asked to choose a template. This is definitely not something to stress about, because you can change your template any time later on. So just pick a template that appeals to you, and then click Continue. In just a few seconds, your blog will be set up and you can click on Start Blogging - you're good to go!



Publish a test post. It's a good idea to start by creating a test post - so just type Test in the TITLE space and type something or other in the body of the message. Then click on PUBLISH POST at the bottom of the screen. In just a few seconds you will get a confirmation screen that your blog post has been published.



Adjust Settings. Now, you will probably want to go in and adjust some of your SETTINGS before you go any farther. You can adjust the Settings by selecting the Settings tab, which will give you access to a whole variety of Setting areas. Whenever you make a change to one of the Setting areas, make sure you click SAVE at the bottom of the screen to save your changes.



Basic Settings: You might want to add something here that describes the contents of your blog - although it's fine if you want to leave it blank. Later, if you decide you want to delete the blog, this is the screen that allows you to do that.

Formatting: I always adjust the Time Zone on this screen to match my own Time Zone (the default is Pacific Time, where Google and Blogger.com are located).

Comments: You have many different options for how you want to handle comments on your blog. I usually go with the default options, which provide good spam protection while still making it easy for people to leave comments. The one thing I always do here is to enter my email address so that I get a notification email whenever someone does leave a comment at the blog.

Those are all the changes that I make in the Settings, although you will see there are many other changes you can make, based on your specific preferences and needs.

Customize Layout. In addition to changing the Settings, I also like to customize the Layout of the blog, especially the contents of the side bar. To do that, I click on the Layout tab, and that gives me access to the Page Elements and other layout options.



This is also where you can select an entirely different template. Changing the Page Elements is pretty easy, although there are some handy tricks I've learned about that which I'll save for another blog post!

Meanwhile, have fun blogging!
Some dynamic content may not display if you are reading this blog via RSS or through an email subscription. You can always visit the How-To Tech Tips blog to see the full content, and to find out how to subscribe to the latest posts.

Monday, May 26, 2008

Podcast Hosting at Liberated Syndication

I'm gearing up for a book that will be published this fall for which I will be doing regular weekly, perhaps daily, podcasts. After researching the various options (with great information provided by HowToPodCastTutorial.com), I decided to go with Liberated Syndication - and the first few podcasts I have created have gone flawlessly! So, this is an option I can definitely recommend to those of you who want to do podcasts and would be willing to spend $5/month to save yourself the hassle of hosting your own audio files and worrying about bandwidth.

The only limit is on your uploads (100MB per month for the $5 option, 250MB per month for the $10 option), with no limit on the downloads - so if you are lucky enough to hit it off with an audience, you will not be punished for your success! The files are available for download with a stable URL, although after one month they are put onto a slower delivery network (the assumption being that podcasts have a timely value). So, I'll report back in a month when some of my test podcasts are moved to archive status. Since my podcasts are quite short, I'm not expecting any problems there.

All you need to get up and going is a way to record MP3 files on your computer. I'm personally a big fan of Audacity, which is free software for both Mac and Windows (although I've heard there are some troubles with Audacity and Windows Vista - I'm a Mac user, and thus blissfully unaware of any gory details about Vista).

Once you have your MP3 file ready to upload, you log on to Liberated Syndication. You then provide a description of your file, upload - and that's it! Liberated Syndication publishes a blog for you (which could be handy for people who don't already have a blog) and, more importantly, that blog has the RSS feed which contains all the podcasting tags. I was able to run my RSS feed from the Liberated Syndication blog through Feedburner to get this very nice RSS feed page in Feedburner style:
http://feeds.feedburner.com/BestiariaLatinaPodcasts

This Feedburner feed then let me easily generate a nifty SpringWidget.com widget of my podcasts with an embedded audio player and everything!



Later this week, I'll post some more details about how this all fits together (Audacity, Feedburner, SpringWidgets, etc.) - but for now, I have to say that I am absolutely delighted with the service provided by Liberated Syndication, and I am really excited about adding podcasts to my online repertoire! :-)


Some dynamic content may not display if you are reading this blog via RSS or through an email subscription. You can always visit the How-To Tech Tips blog to see the full content, and to find out how to subscribe to the latest posts.

SpringWidgets RSS Reader

SpringWidgets is a fantastic service which provides all kinds of widgets you might want to add to your blog, and which also allows you to create your own custom widgets, including a great widget to capture an RSS feed (or multiple feeds) and display it in a nice scrolling window. You control the width of the window, allow with other parameters. It takes just a couple of minutes to create! Here's an example of a SpringWidget for this blog, and you can find simple instructions below for creating your own SpringWidget for any RSS feed(s) that you want!



Create Your Own SpringWidget RSS Reader!

All you need to create your widget is the address of the feed(s) you want to display in the Reader. Just go to the SpringWidgets RSS Reader page, and click on 1. Customize. This will open up a window where you can add the address of the RSS feed(s) you want to display, as well as setting the width and height of the widget, choosing a border color, etc.



Then, go to 2. Get the Widget Code, in the lower part of the screen. This is the code you need to cut and paste into your blog, wiki or webpage in order to have the widget display. That's it! What a great way to add an RSS feed (or multiple feeds) to your website!




Some dynamic content may not display if you are reading this blog via RSS or through an email subscription. You can always visit the How-To Tech Tips blog to see the full content, and to find out how to subscribe to the latest posts.

Friday, May 9, 2008

Create Feedburner Email Subscription Service

Feedburner is a free web-based service that provides all kinds of options to enhance the way that people make use of RSS, the content feed that is associated with blogs, discussion forums, and other websites that are prone to have lots of new content on a regular basis.

The main reason I use the Google-owned Feedburner service is so that I can distribute the content of my blog to people via email. Although I'm not much of an email user myself anymore, there are still plenty of people who rely on email as their primary mode of Internet communication and updates. So, by using Feedburner, I am able to instantly have an email subscription service for my blog. Every day that I post something new in the blog, an email is sent out to the people who have subscribed to the list. I don't have to do anything. People join the list and leave the list of their own free will; again, I don't have to do anything. I can make some choice about the way the email is configured, but Feedburner does all the work of actually maintaining the list and sending out the email.

So, if you have a blog with an RSS feed or a discussion board with an RSS feed, you can create a free email subscription service to go with it (no advertising either! very clean, very nice!). In these instructions, I'll explain how to do that. The example I'll be using is a Blogger.com blog, but pretty much any blog service has an RSS feed that you can use to do this, as do discussion board forums of various types, Twitter, and so on.

Feedburner account. Now that Google has acquired Feedburner, you can use your Google log-on as your Feedburner account. If you do not have a Google log-on, create that first at Gmail.com, and then go to Feedburner.com. You can use the same Feedburner account for as many feeds as you want - one, or a hundred.

My Feeds. After logging in at Feedburner.com, you will be taken to a page called My Feeds. On this page, you will see a box that says Burn a feed right this instant. That is where you will paste in the RSS address from your blog. Then click Next.

Based on the information you provided, Feedburner will try to assign an appropriate title and feed address - you can accept what they propose, or type your own choice here. When you are done, click Activate Feed.

To proceed to the email service, click on the link that says Skip directly to feed management. The option you then want to choose is Publicize.

From the Publicize options, click on Email Subscriptions in the list of services on the left. Then click Activate.


Let people subscribe. You then need to let people know how to subscribe. There are many ways to do this. If you are using a Blogger.com blog, you can click on the "Use as a widget in Blogger" option.

You can also just cut-and-paste the HTML code (for example: http://www.feedburner.com/fb/a/emailverifySubmit?feedId=452101) for a simple link which you can use to let people sign up, creating a useful link text: Sign Up for Email Here.

More options. You will also see a variety of options you can configure listed on the left, such as the specific format of your email, the time of day it will be delivered, etc. You can make changes to these options at any time.


When you are done, make sure you click Save at the bottom to record any changes you may have selected in the various options.

Review your subscribers. You can log on to Feed Burner at any time, and select your feed, then click on Publicize, and then Email Subscriptions and see the email addresses of the people who have signed up to be on your email list!

IMPORTANT NOTE: Confirmation email. For someone to subscribe to your email list, they have to click on a link in a confirmation email. Sometimes that confirmation email gets routed into the junk mail box. If someone is having trouble getting signed up, you might tell them to check their junk mail box to see if the confirmation email has ended up there!

Monday, May 5, 2008

Add Javascript to PBwiki

More and more hosted web environments are allowing you to add javascripts to your pages - and that includes PBwiki (more posts about PBwiki). The only problem you will run into is that you will have to do some editing in the "Source" (code) view, which can be a little bit intimidating at first, although it's really not that hard! Here are some instructions that explain how to do this at PBwiki.

First, you need to get the javascript code that you will be using. For example, if you are getting a javascript widget from SchoolhouseWidgets.com, you will cut-and-paste the contents of the script as shown in the box.



Get ready by opening the SchoolhouseWidgets.com page in one browser window, while you will have your PBwiki page open in the other window.

Then, you need to decide where you will want to place the javascript in your PBwiki page. Because the javascript itself is invisible in editing mode, it's a good idea to either put the javascript in-between two horizontal lines, or in the cell of a table. The instructions provided below show how you would insert the javascript in-between two lines.

First, create your two horizontal lines in the regular PBwiki editing page. The result will look like this:



Then, click on the SOURCE button to see the code. What you want to do is to paste the javascript code in-between the two tags that read <hr>, which stands for "horizontal rule". Here is what the two tags look like in the code view:



Here is what it looks like AFTER I paste in the javascript code that I have cut-and-pasted from SchoolhouseWidgets.com. Notice that I did not delete the horizontal rule tags; I just pasted in the script in-between the two tags. You will probably want to click on this image to get a full view:



Now, I can click on the SOURCE button again to switch back to the design view - but the javascript will not display. Don't worry: you know the script is there in-between the two horizontal lines. To see your code in action, click SAVE. When the page comes up in the browser, the results of the javascript will display:



Finally, PBwiki offers people the option to turn javascripts on or off. So, if your javascript is not displaying correctly, check down at the bottom of the page, and make sure that javascripts are turned ON.




Some dynamic content may not display if you are reading this blog via RSS or through an email subscription. You can always visit the How-To Tech Tips blog to see the full content, and to find out how to subscribe to the latest posts.

Optimize Your PBWiki Sidebar

PBWiki is a great wiki service which offers FREE wikis for educators that do not contain advertising of any kind (more about PBwiki). One of the most powerful features of PBWiki is the Sidebar which you can edit, displaying content on every page of the wiki. This is a great way to share important links and other site-wide information with your users.

The Sidebar actually has three different panels by default: QuickStart, RecentActivity, and Sidebar.



This can be a bit confusing for your users - PBwiki does "remember" what panel the user was on, but by default it starts out on the QuickStart panel. Unless you really need to use the multiple panels in the Sidebar, I always recommend just DELETING the QuickStart panel and the RecentActivity panel, so that the only panel remaining is the Sidebar panel, and the users don't have to choose which panel they see.

You can delete the QuickStart and RecentActivity panels by deleting the pages named QuickStart and RecentActivity from your wiki - just go to AllPages (link is at the bottom of every page), and then choose the Delete button next to QuickStart and next to RecentActivity.



After you delete those panels, the Sidebar will contain only the Sidebar panel, as in this screenshot:



You can always choose to create new pages named QuickStart and RecentActivity later on if you change your mind. PBwiki treats a page named QuickStart or a page named RecentActivity as special, and displays them automatically in the Sidebar.

If you want to delete the Sidebar completely, so that it does not appear on ANY of your pages, just delete all three of the special files: QuickStart, RecentActivity, and Sidebar. If all three of those pages are missing from the wiki, then PBwiki will not display any kind of sidebar on your pages.


Some dynamic content may not display if you are reading this blog via RSS or through an email subscription. You can always visit the How-To Tech Tips blog to see the full content, and to find out how to subscribe to the latest posts.