106: Week Two Computer Lab

Today's class will seek to introduce you to your blog, some of the features of Blogger, and to the basics of HTML that you will need to compose your posts.

Creating Your Blogger Account

All of you should have received an email invitation last night to join a Blogger blog. Find this email.

In order to join the blog, you will have to create a Google identity. Some of you might already have gmail accounts, and therefore already have a Google identity. MAKE SURE THAT YOUR GOOGLE IDENTITY CANNOT BE TRACED BACK TO YOUR REAL IDENTITY. Sorry to scream, but its very important to us that you remain anonymous. Do not create a user identity that involves your real name or your Purdue name. For instance, I have four online identities:

• marccsantos: I use this identity for web design discussions. I want people to know my real name and identify it with my comments and my work
• mcsantos: I use this identity for academic discussions and for Purdue accounts.
• santosis: I use this identity primarily for social groups
• insignificantwrangler: this is actually my primary online identity

For this assignment, I might use either of the latter identities. We'll walk through this process in class.

Blogger Features

One reason we chose to use Blogger in this class concerns its numerous available and accessible features. We're going to play with a few now.

• First, from the dashboard, chose to "View Blog." It is possible that a team member from another class has already begun making changes.
• Go back to the dashboard, and select "settings." You'll notice a number of options under the main tabs. The "basic" set of options includes a title field and a description field. Modify those now (remember that for your first project we want the group to create and justify an interesting and original title!). For now, anything better than "Blog #" will do.
• The Publishing tab will allow you to give your blog a new URL. Don't change this until you have discussed the change with your group! Like your title, you should be playful with your URL.
• Chances are you won't be using the Formatting tab right away, but this tab gives you the option of manipulating how many posts appear on one page, time and date format as well as some other advanced settings.
• We're not going to worry about the rest of the tabs under "Settings" today.
• Instead, choose the main tab "Template." Over the course of the semester, we'll discuss more and more ways for you to customize the design of your blog and to add elements, widgets, and functions. Today, I want to show you how to add a Blog Roll and input some entries. You'll want to make sure that this blog roll has at least three entries for each member of your group by the time you put up the first project post.
• When you click the "Template" tab, you should get the Page Elements screen. Here we are going to choose to add a page element
• We are going to add a link list. We'll walk through this in class.
• If time permits, I'll talk about the Pick New Template tab.

Now that we've poked around some of the features of Blogger, let's deal with the nitty-gritty--how to post.

Posting to Blogger

For the rest of today, we'll make a practice post. At the end of the class we'll delete it, so don't worry about writing anything of high quality, we just want to familiarize ourselves with HTML. HTML is the basic code used to categorize content on the web. All content appears between tags that classify it and instruct a web browser on how to format it. We'll be learning the essential tags by answering some simple questions.

First, let's see a list of the basic tags. Tags open before an element and close, using a backslash, after the element:

• <p> x </p> - the paragraph tag, this is the tag you'll use for most content
• <h#> x </h#> - the header tag, numbered according to importance. An h1 tag, for instance, is like a thesis statement--only one per page!
• <ul> x </ul> - the unordered list tag, this "opens" a list, you open a list before tagging list items. When you have finished your list, your close this tag. List
• <li> x </li> - the list item tag
• So, a completed list looks like this:
  <ul>
  <li> Tom Brady </li>
  <li> Joe Montana </li>
  <li> Dan Marino </li>
  </ul>
• <blockquote> x </blockquote> - the blockquote tag does exactly what its name implies: it sets off a block of text as a quote (adjusting margins, color, font, etc.)

These are all the structural tags we'll need today. Virtually every piece of information in your syllabus will fit into the above categories. We can add some semantic tags to our list:

• <strong> x </strong> - the strong tag appears as bold face. Use this for information that needs to be loud.
• <em> x </em> - the emphasis tag appears as italics. Use this for information that needs to be differentiated.
• <cite> x </cite> - the cite tag appears as italics (by default it appears exactly as the emphasis tag). Anything that would receive italics according to MLA citation should get the cite tag (any major publication--a book, a movie, a tv series, an album, etc.). The em tag is reserved for stress and emphasis, not for citation.

Now, let's put some of these tags to use.

1. Write a breif paragraph, using the <p> tag, on the last good movie you saw. Remember to use the cite tag for the movie title
2. Write a second paragraph on the main character of the movie
3. Now lets make a list of three movies similar to the one you watched
4. Now write a paragraph on whether you'd recommend the movie to other people
5. Now lets use blogger to insert a picture. Open a new tab or window and find a picture of your movie on the web. Make sure you click on the image to get its unique URL. Back in Blogger, click on the small landscape image right above the text box you are writing in. Input the URL of the image. Once you hit "Upload," the code for your image will appear in an "img" tag at the top of your post. You will have to copy all this code (unitl the />) and paste it where you want the image to appear

That's it for today, press publish and you can see what your post looks like. You can always edit a post after you post it by choosing "Edit Posts" from the "Posting" tab or by pressing the small pencil icon at the bottom of every post. We'll delete the post you just put up so you and your group can start with a clean slate.

Sliding Header

As I mentioned in my last post, I've created a "sliding header" technique: a CSS method for handling screen resize. Since buying a mac and regularly using Safari, I've been a bit more sensitive to the need to create pages that handle different screen sizes. My newest solution involves sliding a background image under the regular header text. My new course website shows the technique in action (try viewing the page at full screen and then at half screen--though I haven't tested it in Firefox or Explorer yet).

Here's how the trick works. First, the HTML code:

<body>
<div id="container">
<div id="header">
<h1> English 106 </h1>
<p>Fall 2007 <br />
Instructor: Marc C. Santos</p>
<h2>Composition 2.0: Rhetoric Goes Digital</h2>
</div>

Essentially, we have two divisions to work with, a header division, which contains some relevant information that we want to display on every page, and a container division, which contains not only our header, but also several other divisions: navigation, content, footer, etc. Whenever I code a site, I have one "catch-all" division called container which houses all of the page's content.

Next, the image file

Notice that the image file, which is 200 pixels high, includes the border (7pixels). This means that, if you want to duplicate my CSS code below and insert your own image, then your original picture must be 186 pixels high. I downloaded this image from Flickr and then cropped it to the size I needed.

O.k., now the CSS for div#container (its only two lines):

div#container {
min-width:520px;
border:1px solid #12385D;
}

While the "min-width" command won't work in IE 6.0 and earlier, all modern browsers (including IE 7, if memory serves correctly) won't allow the page to shrink below 520 pixels, the requisite size we need for our sliding image.

The CSS for div#header:

div#header {
height:200px;
overflow:hidden;
background-image:url(headerimage.jpg);
background-repeat:no-repeat;
background-color:#12385D;
background-position:right;
padding-left: 12px;
color:#ffffff;
border:2px solid #FFFF00;
}

The "overflow" property will keep everything contained just in case someone needs to increase the page's text size (CTRL + +), the postition-right technique pushes the image to the right side of the header division. Everything else above is pretty straightforward. Presto, easy way to code a clean page that can resize to fit a user's browsing style. In case you're looking to borrow the code, here's the source.

Standards Compliant URLs

I haven't put up a technology-oriented post in awhile, but, then again, I haven't been doing much web design this summer. This week I've started working on my course website for the fall, and thought I might share a cool, free web2.0 tool that really helps with standards compliance: tinyURL.

Next semester I am requiring my students to read one book on the social / economic / cultural / political / legal impact of technology. I created a list of possible books (and am looking for more--please leave suggestions in the comments) for my syllabus, creating a link to the amazon page for each suggestion. Since students will end up writing a review of the book for amazon, this seems like a good place to have them start. The problem: Amazon uses hideously long URLs full of the kind of code that drives the w3c (x)HTML standards validator crazy. As in 150 errors crazy. Solution: tinyURL. TinyURL creates a redirect that it stores on its servers--users will never know that they've clicked on this redirect. Amazon looses the page rank benefits of the link, but, hey, that's what they get for not providing standards- compliant URLs in the first place.

Victory is (Almost) Mine! (Standards Compliant Slideshow via ImageShack)

I recently finished working with a local dog group on a website redesign. Intially, I was particularly proud to recreate what was a table-based layout in xhtml and css. Later, the group decided they wanted to make some significant changes and I taught my wife enough Fireworks and Dreamweaver for her to redesign the color scheme. We worked together and remain married. Go us. But that's not today's victory.

From the beginning of the project the group wanted some kind of photo gallery for the site. The problem: how do I create a standards-compliant site that group members can easily update? My first idea was to use Flash to create a gallery. But this didn't seem like a good option, since images need to be re-sized before they are added to a collection, and every update means going in and editing the flash file. No...no..no. I also thought about using Javascript (I've done this before for Purdue's GradSEA), but this technique isn't standards-compliant.

Reading a Mashable article on image editing resources yesterday, I came across a link to ImageShack--a photo hosting service that allows users to easily create slideshows and pumps out code to embed the shows on other websites (kind of like the libraryThing widget Michael uses on Wishydig, but using Flash rather than Java). The problem? Embeds are banned by the w3c--use the easy widget, lose your validation. All seemed lost. Especially since the classic fix for embed, McLellan's satay method, works best when you can create a container moive. This wasn't the case. Then I remembered (via del.icio.us) Elizabeth Castro's article on how McLellan's technique can be used on Google Video and YouTube movies without the satay...

When you complete a slide show with ImageShack (and you don't have to register to create a slideshow, but you do have to register to be able to edit a show), it will produce this code:

<embed src="http://img515.imageshack.us/slideshow/smilplayer.swf" width="426" height="320" name="smilplayer" id="smilplayer" bgcolor="FFFFFF" menu="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=img515/8742/1182697433ltj.smil"/>

Following along with McLellan and Castor, we want to transform this embed into an object:

<object type="application/x-shockwave-flash"
data="http://img515.imageshack.us/slideshow/smilplayer.swf"
width="400" height="326" id="VideoPlayback">
<param name="movie"
value="id=img515/8742/1182697433ltj.smil"/>
<param name="allowScriptAcess" value="sameDomian" />
<param name="FlashVars" value="playerMode=embedded" />
<param name="FlashVars" value="id=img515/8742/1182697433ltj.smil"/>
</object>

The key to getting this puppy working is to include the unique id as a FlashVars parameter (the final line of the code). Google and Youtube supply each movie with its own URL, ImageShack doesn't--rather, it assigns each slideshow a unique id in its database. So, bottom line, you have to include this id to get the show rolling. The only line I am unsure of is the "allowScriptAcess" line--it was in Castor's code, but I'm not sure if its necessary. I tried removing it and the slideshow still played in Safari, but I'm not sure if it is an IE command (with the satay method, IE doesn't like auto-starting... if anyone has IE, let me know if this is working, I promise not to chastise you too much for using IE).

Victory is mine! And, best of all, ImageShack is an awesome 2.0 app--it automatically resizes images, allows for easy captions, allows users to re-order images, determine background color, tag presentations, import images from Flickr or other URL's (as well as direct upload), choose transition effects, add music (please don't), and make shows public or private. And now, thanks to A List Apart and some wranglin', it can be standards-compliant. Cool.

Here's the final, standards-compliant code in action:
Go to ImageShack® to Create your own Slideshow

UPDATE: Things aren't going quite so smoothly with my actual dog park moive. Yesterday, while working on the slideshow above, I noticed that the ImageShack server was reacting really slowly at times. I finished a sample dog park slide show last night, and it works fine through the standard embed method, my object method is running into problems:
Go to ImageShack® to Create your own Slideshow

I have no idea why this movie isn't loading....

UPDATE: I am dumb. Problem solved. Already sent "I'm an idiot" email to ImageShack (see my comment... before I delete it). Now I have to write this post up into something a bit more constructive and submit it to imageshack's tutorial contest...

UPDATE:

Apparently the video is only working in Safari. I'm going to play with it this evening. If any visitors are looking at this post, can you tell me 1) what browser you are using [IE 6, Firefox 1.5 etc.] and 2) whether you see two movies above. Thanks.

UPDATE: O.k., its working in Firefox 2.0.0.1. But IE is being terribly tiresome. Back to the drawing board later?

Filters vs. Live Effects

Not a bad tutorial, though nothing mind blowing. The trick about using the magic wand and the brighten filter to adjust select parts of an image is useful (though I often use the burn/dodge tool for this...) No images worth posting.

Sticky Notes

Like these Rapid Fire tutorials over at six things. This one took me about 40 minutes--most of which was spent fighting with the pen tool. Grr... pen tool... edit the existing vector! Don't randomly choose which points you will transform. That little plus sign next to the pen symbol mocks me.

Rapid-Fire Photo Realistic

This one was a bit tricky at times--but very cool advanced shadow technique. Pretty simple to pull off, but allow for a whole range of shadows that you simply couldn't get with the "drop shadow" filter. Total time: 37 minutes. Be aware: you cannot apply the Gaussian blur (part of the shadow technique) until after you convert the edges to paths and adjust them with the pen tool (the blur tool converts the rectangle to a bitmap). Also, I toned done the black gradient corner fill to only 35% (rather than 100%). To take this to the next level, I'd probably want to bend the photo similar to the shadow--but don't have the time!

Golden Seal Tutorial

This one took me about 20 minutes--I probably could have been a bit more careful with the bevel technique. Its a pretty simple technique to execute, and it looks better than the auto bevel feature (I used too small a font size for the technique to work properly.