Techie Too!

IE Hacks and Conditional Comments

It always seemed like it would be interesting to serve a gif image to Internet Explorer 6 and a png to other browsers, instead of using a CSS behavior file (like IE PNG Fix or SuperSleight). So now that IE 6 is nearly gone, here’s how.

Demo

Continue Reading

Grants for Nonprofits from Community TechKnowledge or Google

Some info on two interesting Grant Award programs for nonprofits came through this week – the 2011 Heart and Soul Grant Award Program and Google Grants for Nonprofits.

Read More…

Screen Capture and Screen Cast Videos with Jing

There are lots of tools to use for screen captures, but one of the most useful and intuitive applications to use for screen cast video capture is Jing by Techsmith. It’s available for Windows and Mac. There’s a free version and also a Jing Pro version for $14.95 per year. Screen shots and videos can be easily saved and shared on your favorite social media site; that’s the beauty of Jing. Your Jing account is connected to a Screencast.com account with 2 GB storage for easily storing your videos.

Read more…

How To Encode Ogg Theora Video

Ogg-Theora video is the open source codec supported by Firefox, Chrome, and Opera to play HTML5 video. If the world were perfect, and all browsers supported Ogg Theora this would be the HTML code to play this simple HTML5 video demo:

<video src="Videos/cat.ogv" controls></video>

If you use this format instead, you will be ready to add the code to play H.264 and Flash:

<video width="320" height="240" poster="Videos/cat.jpg" controls>
<source src="Videos/cat.ogv" type"video/ogg">

</video>

where “poster” is the image used while the video is loading, “width” and “height” refer to the video dimensions, and “controls” adds the native video controls. The Dev Opera site has information on other attributes and also how to script your own controls.

You can convert nearly any video codec into Ogg Theora using either Firefogg, an add-on for Firefox or ffmpeg2theora.  These work in all operating systems.

Dive into HTML5 and Theora Cookbook both have detailed explanations of how to encode Ogg video with Firefogg.

Ffmpeg2theora is a command line application, but it is easy to use. If you use Linux it is probably available in your repositories. If you use MacOS X or Windows, you can download and install ffmpeg2theora.

The cat video in the demo was taken with an inexpensive camera; the video from the camera was .mov format. To convert it to Ogg Theora, use the command:

ffmpeg2theora cat.mov -o cat.ogv

where cat.mov is the input file and -o means that you are writing to an output file named cat.ogv.

You can also change the video quality and the view size of the video; both of these affect the size of the output file.  For instance, using the command:

ffmpeg2theora cat.mov -v 5 -a 2 -x 320 -y 240 -o cat.ogv

-v is the video quality; 5 is the default; smaller numbers are lower quality
-a is the audio quality; 2 is the default; again smaller is lower quality
-x is the desired width of the output video
-y is the desired height of the output video

There are other parameters that can be used as well.  Theora Cookbook and It Came from the Internet have more examples.

Simple HTML5 Video

Safari, Firefox, and Chrome now support HTML5 video; Opera support is coming soon.  Since the iPhone does not support Flash (and there are more users every day, especially with the iPad coming), it’s time to begin the transition.  I was interested in a solution that supplemented or enhanced the Flash video using JWPlayer that I have been using for several years.  Here is a demo of simple HTML5 video.

There are a number of methods for using HTML5 and Flash together:

• html5 video fallbacks with markup
• Video for Everybody! This also includes an example for editing the .htaccess file in the footer of the post.
• Video Tag Embed With Fallbacks
• Video on the Web
• Using the HTML5 <video> tag with a Flash fallback
• Fallback options for HTML5 video
• Introduction to HTML5 video

Currently I prefer a simple version of Video for Everybody! and Video Tag Embed with Fallbacks.  I’m using H.264 mp4 video for Safari, iPhone, and Chrome, Ogg -Theora-Vorbis for Firefox and Opera, a flash player to play the H.264 mp4 for all IE and older browsers, and also providing the videos for download.  This is needed by the iPhone, depending on the video.

To get started with HTML5 on your server, you first need to add the correct mime types to the hidden .htaccess file on your hosting server.  Croc Camen has a wonderful example that also includes embedded fonts, as mentioned above. As a minimum, add this code:

AddType video/ogg .ogv
AddType video/ogg .ogg
AddType audio/ogg .oga
AddType video/mp4 .mp4

Then you need to convert your video into both Ogg and and H.264 mp4. formats and use them with the following code. More is coming on this.

This is the simple HTML5 video code:

<div id="videoarea" class="shadow">
<video width="320" height="240" poster="Videos/cat.jpg" controls>
<source src="Videos/cat.ogv" type="video/ogg" />
<source src="Videos/cat.mp4" type="video/mp4" />
<object width="320" height="240" type="application/x-shockwave-flash" data="player.swf"> 
<param name="movie" value="player.swf" />
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="flashvars" value="file=Videos/cat.mp4&image=Videos/cat.jpg&controlbar=over" />  
<img src="Videos/cat.jpg" width="320" height="240" alt="HTML5 Video Demo" />
</object>
</video>
</div>
<p class="center"><a href="Videos/cat.mp4">Download MP4 Video</a> | 
<a href="Videos/cat.ogv">Download OGG Video</a></p> 

Pretty Form Input

This is part of a styled input form. It uses CSS3 rounded corners.

This is the input form in IE. Not as pretty, but still nice.

This is the CSS used:

input.inputbox, textarea.inputbox {
input.inputbox, textarea.inputbox {
	background-color: #fff; /* change the color */
	border-top: 2px solid #ccc;
	border-left: 2px solid #ccc;
	border-right: 2px solid #888;
	border-bottom: 2px solid #888;
	border-radius: 5px;
	-khtml-border-radius: 5px;
        -moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	margin: 0 0 5px 0;
	overflow: hidden;
	padding: 2px 0 0 2px;
	width: 270px;
	}
input.inputbox {height: 20px; line-height: 20px;}

Edit: Added

-khtml-border-radius: 5px; 

- somehow lost it.

Code for rounded corners & box shadow

Here is the code.  Class=contentbox was added to all the classes needing rounded corners and shadows.

<div class="box600 contentbox">

Full “.contentbox” code:

.contentbox { 
border-top: 1px solid #fff;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
border-left: 1px solid #fff; 
/* End White border */
-khtml-border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px; 
/* End Rounded corners */
-moz-box-shadow: 6px 6px 15px rgba(0, 0, 0, 0.9);
-webkit-box-shadow: 6px 6px 15px rgba(0, 0, 0, 0.9);
box-shadow: 6px 6px 15px rgba(0, 0, 0, 0.9); 
/* End Box shadow */
}