Optimize photos for the web

If you upload photos to the web for a blog or website, it is best to optimize the photo first. This reduces the file size so your viewers don't have an annoying delay while large photo files are loaded.

I use Adobe Photoshop for photo optimization. It is part of the Adobe Creative Suite I bought for my web technology classes. There are other photo editing programs so research the web for the best option for you. Your camera's software may have photo editing capabilities.

To optimize in Photoshop:

1. Open the image in PS
2. Duplicate the image (image > duplicate)
3. Crop excess photo around subject
4. Reduce image size (image > size > change dimensions here/select bicubic sharper > ok)
5. File > Save for web > jpeg medium quality

Duplicate your image so, if you're not happy with the results, your original is preserved.

For landscape orientation, I use a 300 pixel width and let the height set proportionately.
For portrait orientation, I use a 250 pixel width.



Most jpeg images, will be fine at a medium quality.
The optimization process reduced a 183K file down to 18K. That will allow websites with your photographs to download much quicker.


Advertising on this blog supports my writing. By clicking an ad, you are under no obligation to buy. If you see an advertisement of interest, please click.

Finding a web host

I blogged earlier in the year about trying out a free web hosting service. If you followed those blogs, you are aware that the site was down more than it was up. Taking into account the time spent putting together a website, setting up the server account, and loading the website to the web host server, I concluded that even a free web host was not worth the trouble if the site was down extensively.

Web hosting can be obtained for around $5 a month, and there are many reliable choices. I launched my first commercial website in September, and have found IMH to be a good web host. As with many host companies, their website provides tutorials and instructional materials for website management. They also have customer service tools like a chat line and faq pages that are helpful.

I chose my host company by geographic location and pricing. Decide what aspects of a web host are most important to you, and chose your host accordingly.  Recommendations from friends can also help in the decision making.

Posterize with Windows Moviemaker

There’s an interesting effect available on Windows Moviemaker. 

After loading your video, select Visual effects > posterize.

Here’s a video demonstrating the effect:

Windows Moviemaker software comes standard with many computers. 

It allows you to add music, title, credits, and captions to a video. I usually cut excessive video with Adobe Media Encoder then load the video (avi) file into Windows Moviemaker for music and text. If you need a flv or f4v format, load the file back into Media Encoder to convert it. 

If you don't have Adobe Media Encoder (this comes with Adobe Flash which is part of the Adobe Creative Suite), Windows Moviemaker allows length editing, but no format conversion.

Obviously, a tripod would have made a much smoother video.

The music was downloaded from ccmixter.org. It's DoKashiteru by The Annual New England Xylophone Symposium.

Domain Name Transfer

I recently had to transfer a domain name when I designed a replacement web site for a company. This transfer was shrouded in mystery until I went through the process.

Originally the former webmaster had established the domain name with Go Daddy. To complete the transfer, I had to set up an account there.

 The former webmaster needed two pieces of information from me:

1. My email that I used to set up the Go Daddy Account

2. Go Daddy Account number

She initiated the transfer. About 20 minutes later, I received an email from Go Daddy with a change of registrant pending notice.

I signed into my account to accept the change. I did have trouble with the hidden menus on the Go Daddy website, and required customer service to point me in the right direction. The phone representative was very helpful.

Now that the domain name transfer is complete, future renewal notices will come to me. That completed the transfer. Once I set up a web host, I pointed the domain to the web host nameservers.

Background Image with Opacity Using CSS

A class assignment required using a company logo as a background image behind text. The company logo was required to be 70% transparent. The opacity property renders the logo and the text transparent because it is an inherited property. How do you keep the text visible? This requirement had me stumped as I tried different approaches.

One reason this concept was so difficult for me was because I remember making images transparent in Photoshop with the touch of a button. Because of this, it was difficult for me to understand what has to happen for a logo to be partially transparent without affecting the text and without using Photoshop or another image editing  application.

This is the scheme. The logo is applied to a div as a background image. The text is placed in a nested div inside the logo div. A background color (matching the body color) is applied to the text div. It covers up the logo, right? The transparency of the background color is adjusted to let the logo show through as desired. You do this with the rgba color property:

background-color: rgba(94, 153, 150, .75) where the .75 is the opacity (alpha value) of the background color.  To get the logo to be very faint at 30% opacity, we cover it up with a background color on the text div with an alpha value of .7. It is a background color and does not affect the text.

GEM #6 The key here is to understand that you’re working with a layer (div) on top of the logo div to create the transparency.

A helpful video for this concept is by hdvidsonly.

When a Virus Attacks

The saying “If it’s not broke, don’t fix it,” has a lot of merit. I was interested in trying out a new text editor. Previously, I had used Dreamweaver in code view. I found myself making minor typing errors like leaving off a semicolon or curly brace with terrible results when a browser interprets the CSS code.

I suspected there were text editors that would catch the code errors, and save me hours in tracking down my mistakes and reducing eye strain. Dreamweaver highlights code errors in html, but I haven’t found it to highlight CSS errors.  I downloaded Notebook ++ and then the craziness started.

I was following a HTML5 Canvas Tutorial and had 10 or so lines of code written. I pressed enter to move to the next line, and the curser started racing down the page adding blank lines to the code. Line numbers in the hundreds raced up the page. I managed to get to the top of the page and copied the few lines of program. I pasted them in a new Dreamweaver site, and the curser took off down the page in that application. I switched over to Microsoft word, and, still trying to save my precious few lines of code, started to paste when page after page of blank pages started piling onto my document. I moved to my browser, Mozilla Firefox, and windows started opening. Some were duplicates of the code I’d been working on, and some were blank blue screens. When I closed out Firefox, it reported I had 400 plus windows open!!

I did some things that didn’t help my situation, but I won’t go into that now.  I uninstalled the Notebook ++. A system restore got me out of my jam. This takes your computer back in time before the incident that caused the virus or whatever disrupted your system. Once I made it back to my desktop screen, I clicked that oft ignored button, HP Recovery Manager, and followed the easy directions to restore. I chose the most recent date [to restore back to] which was a week ago.

After the restore, I started my McAfee Virus Scan. This took several hours to complete, and didn’t report any problems.

I was most concerned about work I could lose with the restore. I had set up 3 FTP sites with Dreamweaver and those were gone. Fortunately, I had the sites saved and could easily import them. The precious 10 lines of canvas code were still in Dreamweaver with all that extra space. I copied the lines I needed and set up a new file. Then I deleted the file with hundreds of blank lines. I pulled up the word document, copied the pages that weren’t blank, opened a new document to paste them into, and deleted the many-paged monstrosity created by the “virus.” All in all, I was able to recover in a couple of hours and get back to my tutorial.

I use the term “virus” generically. I’ve described what I saw on my computer screen, and, to the best of my knowledge, those are symptoms of a computer virus. Certainly the technician at McAfee’s Techmaster service agreed wholeheartedly that I had a virus, and would be glad to remove the virus for a one-time fee of $129 or a year contract for $179. 

Additionally, I don't know that Notebook ++ downloaded a virus. I only know that 20 minutes after the download, my problems started. A classmate of mine downloaded the program 6 months ago, and is thrilled with it.

Access Denied Message in Adobe Flash Professional

I started up my Flash Professional CS5.5 to continue a tutorial and the screen said, "Access Denied." My heart started racing and I wanted to run for the hills. Nooooooooo.

My natural reflex was to google the problem. The solutions were not warm and fuzzy. I got lucky and tried something that worked so I'll pass it on.

This is what gave me the Access Denied message:

Start Menu> Select Flash Professional>Select Recent File and click

This is how I avoided it:

Start Menu> Select Flash Professional and click

Problem solved....whew!

It would be interesting to know why this happened...leave a comment if you have any insight.

Adobe Media Encoder: Shorten a video and post on a blog

My camera takes videos and produces .avi files. These files can be uploaded and used as is, but what if you want to cut out the end or part of the beginning? This would produce a more concise, professional video.

I used Adobe Media Encoder that came with my Adobe Creative Suite CS5.5.

1. Open the Encoder program and load your video in the Queue by clicking on "+".

2.Click on the video name in the Queue table (make sure format is f4v), then edit, then export settings.

3. Under export settings on the right side, select web 320x240. I unchecked "export audio" because I don't want audio on this clip. Specify the name and location for the new encoded file by clicking on the output name.

4. On the left side, move the white triangles on the yellow timeline to set the beginning and end of your clip. Above the timeline, click the "set in point" triangle for the beginning and "set out point" triangle for the end of the clip. Click "ok" to return to the Queue.

5. Click the white arrow at the top right to start the encoding. When complete, there's an audio signal. You can look for your new file labeled "FC" in the location specified. That file is ready to be uploaded to your blog.

Video of Tobacco Hornworm on Tomato Plant

So, I've accomplished 2 things with the media encoding: 

1- I completed some basic editing of the video length

2- I converted the file to an .f4v type.

There are many options that make this program very powerful. I'll blog more as I discover additional uses.

Citing and References for a Paper

Microsoft Office Word (I’m using 2007) has everything you need under References (GEM #5).

Place the cursor where you need to site a reference. 

Click References. Look at Citations & Bibliography.

Choose the style required by your instructor (MLA, APA, etc.).

Click on Insert Citation. You can choose Placeholder and add the info later.

To add the reference information [later], click Manage Sources.

 Fill in the form. Unbelievably easy.

Click here for Microsoft Instructions.