John Dyer

Simple Cross-Browser HTML5 video with a single H.264 file and fallback options

johndyer@gmail.com — Sun, 06 Jun 2010 01:32:00 +0300

At first glance, the promise of HTML5 <video> seems awesome. Just a simple

<video src="myvideo.mp4" controls></video>

and you're done right? Not quite. In reality there are all kinds of browser inconsistence that make this impossible. Here's a run down of the problems:

1. Older browsers don't support <video>

Only the most recent versions of the big five (Firefox, Chrome, Safari, IE, Opera) support <video>, so you have to have a fallback solution of some kind if you want to use <video> and still support your audience.

2. Newer browsers don't support the same codecs

Sadly, different browsers support different codecs. H.264 works in Chrome, Safari, and IE9, while Firefox and Opera only support Ogg/Vorbis. All the major browser vendors have pledged support for Google's recently released WebM format, but this will take some time for the browers and encoding software to catch up.

3. Fallback HTML requires multiple video files

The most common solution offered is to use nested HTML to allow browsers that don't support <video> to fallback to flash. One of the best of these is called Video for Everybody and looks something like this:

<video>
   <source src="myfile.mp4">
   <source src="myfile.ogg">
   <object src="flashplayer.swf?file=myfile.mp4">
      <embed src="flashplayer.swf?file=myfile.mp4">
   </object>
</video>

This works in all browsers, but it has a major problem: You must have two video files. If you attempt to use only MP4, Firefox on Opera will fail. If you remove the <source src="myfile.ogg">, Firefox and Opera will not fallback to the Flash <object>. They will just display a big, blank, black box with an X. The same goes if you only use OGG on browsers that don't support OGG, or attempt to use WebM.

The HTML fallback mechanism only works if the browser doesn't understand the <video> tag. It doesn't work if it doesn't understand the <source> file. So if you want to only use one file, then you must use JavaScript.

A Simple JavaScript Solution

Since I don't want to maintain two versions of every video, I need a way to fallback to Flash for non-H.264 browsers. Here's my simple solution using jQuery.

<video id="my-video">
   <source src="myfile.mp4" type="video/mp4">
</video>

<script>
(function() {
  var video = document.createElement("video");
  if ( typeof(video.canPlayType) == 'undefined' || // detect browsers with no <video> support
       video.canPlayType('video/mp4') == '') { // detect the ability to play H.264/MP4

       var video = $('#my-video');
       var videoUrl = video.find('source').attr('src');
       var flashUrl = '/flash/myplayer.swf';

       // create flash        
       var flash = '<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" ' +
				'	codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" ' +
				'	width="' + video.width() + '" height="' + video.height() + '" id="fallbackplayer">' +
				'		<param name="allowfullscreen" value="true" /> ' +
				'		<param name="movie" value="' + flashUrl + '?mediaUrl=' + videoUrl + '" /> ' +
				'		<embed id="dtsplayer" width="' + video.width() + '" height="' + video.height() + '" allowfullscreen="true" allowscriptaccess="always" ' +
				'			quality="high" name="fallbackplayer" ' +
				'			src="' + flashUrl + '?mediaUrl=' + videoUrl + '" ' +
				'			type="application/x-shockwave-flash" /> ' +
				'</object>';
        
        // insert flash and remove video
        video.before(flash);
        video.detach();
  }
})();
</script>

The code is fairly simple. It just checks if the browser understands the <video> tag by checking for the "canPlayType" function, then it uses canPlayType to determine if the browser can play an H.264/MP4. If not, it inserts Flash as a fallback.

Please note: This is a simplified script for example purposes only. It needs flash version detection, and it should be turned into a jQuery extension, but it should still be a nice guide for

Purple CMS - Now on Github

johndyer@gmail.com — Fri, 07 May 2010 16:50:00 +0300

A few months ago, I put out a preview of a ASP.NET 4.0 CMS called "Purple" (named for the official color of Dallas Theological Seminary).

I'm now pushing updates to Github, so if you're interested go grab a copy here

http://github.com/johndyer/purple

About Purple

Purple is a CMS that uses .NET's URL Routing to quickly create a website using normal .NET tools like Masterpages and ASCX controls. It has versioning controls for every page and allows you to edit in page rather than through a backend editing area and stores everything in either XML or SQL for rapid development.

to JSON

johndyer@gmail.com — Wed, 05 May 2010 16:19:00 +0300

I am updating a tool that allows users to customize a large data table to their needs. It's sort of like a progressive insurance for seminaries in that it helps students compare information on about 30 US seminaries so they can make an informed decision about where to go.

My initial approach when I built it 4-5 years ago was to embed JSON data in the HTML page and then use JavaScript to convert that JSON data into a table based on the user's choices.

But there are a few problems with this approach.

The data is not accessible to screen readers.
The data is not accessible to those without JavaScript
Embedding a lot of JSON data in an HTML page isn't a very good idea. It should be a separate cached .js file, but I can't do that since the data often changes and it still wouldn't address #1 and #2

So I've decided in the new version to start with a large <table> and then turn that table into JSON data using the <thead> region as the JSON labels. Then I can take that data and customize it based on the user's choices. Interestingly the overall data size is a bit smaller since writing a <td> and </td> for each peice of information is actually smaller than writing the header name and quotes over and over.

Here's the simple table to JSON code. It assumes the first row is has header names and removes spaces and lower cases it.

function tableToJson(table) {
	var data = [];
	
	// first row needs to be headers
	var headers = [];
	for (var i=0; i<table.rows[0].cells.length; i++) {
		headers[i] = table.rows[0].cells[i].innerHTML.toLowerCase().replace(/ /gi,'');
	}
	
	// go through cells
	for (var i=1; i<table.rows.length; i++) {
		
		var tableRow = table.rows[i];
		var rowData = {};
		
		for (var j=0; j<tableRow.cells.length; j++) {
			
			rowData[ headers[j] ] = tableRow.cells[j].innerHTML;
		
		}
		
		data.push(rowData);
	}		
	
	return data;
}

Below are links to the two pages for comparison. Please note that the site where the "new" page is is still a work in progress and won't be launched for a month or two.

HTML5 Video Player with Slides and Transcript

johndyer@gmail.com — Mon, 26 Apr 2010 16:34:00 +0300

A few weeks ago I created an HTML5 version of DTS's online video player application. A few years ago, when Flash 9 enabled H.264 playback, we switched all of our video from the FLV format to MP4s encoded with the H.264 codec so that our videos could work on as many places as possible, especially Apple's iPod and iPhone.

I didn't initially plan to work the the HTML5 <video> tag because of all the browser support and formatting issues, but with the advent of the iPad and IE9's support for H.264 it makes sense to start using it. I wish that Firefox would support H.264 as well or at least fall back helpfully, but until it does, we will only support Webkit and IE9.

The Player

The player begins in a landscape format with a small video frame and larger slides, but it can also switch to portrait mode and an alternate layout by clicking on the buttons in the lower right. On an iPad, it automatically sense the orientation and rotates accordingly.

Portrait Version

The Code

To code the player, I build a generic MediaPlayer JavaScript object which abstracts out several HTML5 JavaScript APi methods and events. Other than handling HTML5 Media Events, the main thing it does is store and fire Time Cue events much like Flash's MediaPlayer API (see addASCuePoint). This allows me to add events for syncing the transcript and slides and also handling the UI for controls. On top of the core MediaPlayer object, I built a DtsController which handles choosing a class and building the visual environment for slides and transcript. The timing code looks like this:

player.addCuePoint('event-title', 66); player.addEventListener('cuepoint', function (e) { console.log('fired', e.name, e.time); });

To keep it relatively lightweight, I didn't use a library like jQuery, but instead used HTML5's document.querySelector and some custom animation methods to achieve the scrolling and fading effects. I only wish it were as elegant as Thomas Fuch's emile library.

Try it Out

If you're interested in the player or the code head to (using a WebKit browser like Safari or Chrome)

http://my.dts.edu/player-html5

Hopefully, the next preview of IE9 will enable the HTML5 <video> tag and let me clean it up for the final version of IE9. Once that happens, we'll abandon the Flash version of the player and go completely HTML5.

Purple CMS - Super Early Alpha (0.1)

johndyer@gmail.com — Wed, 03 Mar 2010 17:00:00 +0300

A few years ago, I built a CMS for Dallas Theological Seminary that has served us pretty well. It has some features we really wanted, but to get them I had to hack up the ASP.NET 2.0 page life cycle to get it to work. With ASP.NET 4.0, a lot of what I did is much easier and can be done "normally" instead of with things that felt like hacks.

Project Requirements

Different projects require different kinds of CMS packages, but here were my requirements:

Extensionless URLs (no .aspx on the end of URLs) - this was harder in ASP.NET 2.0, but in ASP.NET 4.0 especially on IIS7 this is much easier.
Normal Masterpages - I don't want a special, proprietary template engine. I just want to use normal ASP.NET features so that people can work on the site without learning an new language and use Visual Studio if they want.
WebForms and *.ascx Controls - I love using MVC on certain projects, but for a site with lots of pages (DTS has around 1000 pages), I need to be able to use simple *.ascx controls. We have lots of pages with various repeaters and forms to fill out and using MVC controllers for each it too much to maintain. Personally I like <script runat="server"> rather than codebehind or codebeside so we can keep a site agile.
Not require <form runat="server"> - A lot of pages with plain HTML or just a <asp:repeater> don't need viewstate, so there is no need to have ASP.NET form on every page. The CMS is smart enough to wrap content in <form runat="server"> if needed, but not otherwise.
No takeover - The CMS can't take over the entire site and not allow other normal ASP.NET functionality like pages (*.aspx) and handlers (*.ashx).
In page editing - This isn't really a requirement, but I like being able to edit a page in place rather than have to go to a separate admin area.

Click "edit" and then you go to:
Page versioning - Of course we need to be able to rollback to a previous version. Nothing too complex, just a list of revisions with dates.
XML or SQL - A nice CMS shouldn't have to use SQL for a 10 pages site. For now, XML is the default.
Permissions - We don't need a complex workflow, but we need to be able to specify a role for super admin and a role for users who can be assigned edit access to special pages. It needs to work with ASP.NET Membership and Roles.
Redirects - A small feature, but we use a lot of vanity URLs in print advertisements that need to go somewhere else (www.dts.edu/thm -> www.dts.edu/admissions/degrees/thm)
Complex URL handling - I also want to be able to create a page that has wildcard handling for all sub pages. For example, I want a page that lists a faculty (www.dts.edu/about/faculty) but can also handle and sub pages and show an individual faculty member (www.dts.edu/about/faculty/dbock). This also allows things like blogs or forums if someone wanted to make those.

Download Purple CMS 0.1

I've put up a very rough demo you can try out. The permissions, redirects, and "complex URL handling" are not yet finished in this build, but the main ability to use masterpages, controls, and edit pages with HTML is in the demo. It looks just like the default ASP.NET site and allows you to login and edit pages.

To use it, you'll need Visual Studio .NET 2010 RC and .NET 4.0 RC. Just unzip the file, run the solution, and hit "Debug" or point your local IIS to the website folder and select "ASP.NET 4.0" it's Application Pool.

Download Purple CMS 0.1 (995 KB)

Let me know what you think.

Experimenting with Web SQL databases

johndyer@gmail.com — Sat, 27 Feb 2010 17:05:00 +0300

What is Web SQL?

Web SQL (http://www.w3.org/TR/webdatabase/) is proposed technology that allows a small SQL database to reside inside a browser. Instead of making AJAX calls back and forth from server to client whenever any information is needed, the data is stored locally in the browser so it can be quickly queried and used. Web SQL is not technically part of HTML5, but it is part of a group of technology suggestions for the future of the web.

Currently, Web SQL is only implemented in WebKit based browsers (Safari, Chrome, iPhone) and beta versions of Opera. Google Gears also had a local database implementation, but Google Gears is being discontinued in favor of HTML5.

How Does Web SQL Work?

HTML5 Doctor has a great article on using Web SQL, so I'll only repeat a small code sample.

// create/open database
var db = openDatabase('mydb', '1.0', 'my first database', 2 * 1024 * 1024);

// start transaction, create table, insert data
db.transaction(function (tx) {
amp;nbsp; tx.executeSql('CREATE TABLE IF NOT EXISTS foo (id unique, text)');
  tx.executeSql('INSERT INTO foo (id, text) VALUES (1, "synergies")');
});

// query the data
db.transaction(function (tx) {
  tx.executeSql('SELECT * FROM foo', [], function (tx, results) {
   var len = results.rows.length, i;
   for (i = 0; i < len; i++) {
   alert(results.rows.item(i).text);
   }
  });
});

A Giant Web SQL example

Web SQL is great for small amounts of data. The Webkit team has a sample which creates and stores notes (http://webkit.org/demos/sticky-notes/index.html), while HTML5 doctor stores recent tweets (http://html5demos.com/database).

I wanted to load a lot more data to see what the performance would be, so I decided to load the entire Greek New Testament which is around 170,000 words along with its morphology information (part of speech, declension, etc.). It attempts to load entire books at a time and then allow you to pull up a chapter. You can also click on a word and see every time it is use in the Greek Bible. Once the database is loaded, you can come back to the site at any time and never have to reload the database. It will always be there in your browser.

Try it out:

The Greek New Testament in Web SQL

Gotchas: The database is a little over 5MB which breaks the limit in Google Chrome. Safari will ask you if you want to increase the storage, but it will also stop the loading processing while it waits for the user to respond. If you use Safari, you can click the "Toggle DB Admin" then click "Delete all" and then "Load all" to clear out and then reload the entire database.

Optimizing CSS with Base64 Embedded Images (with Bonus Utility!)

johndyer@gmail.com — Tue, 26 Jan 2010 18:42:00 +0300

As I design a new site (current site | early demo of new site), I am working through what combination of technologies (CDN, sprites, caching, gzipping, etc.) we want to use to optimize it. One tool I’m looking at is embedding images in CSS with base64 strings. Instead of the browser needing to make several calls, one for the CSS file and then one for each image, base64 embedding means that all of the images are embedded within the CSS file itself.

It’s great for small images or images that only show up on :hover or mouseover and you don't want there to be any delay in the image appearing. Here’s what it looks like:

Normal CSS

.myclass {
    width: 45px;
    background: transparent url(myimage.jpg) top left no-repeat;
}

CSS with Base64 Embedded Image

.myclass {
    width: 45px;
    background: transparent url(data:image/png;base64,LONG-STRING-OF-BASE64-TEXT) top left no-repeat;
}

Problems with Base64

Works in all browsers except IE6 and IE7. Solution: use a conditional comments to give IE6/7 a stylesheet that still references the images.
Base64 is bigger than real images: In my tests a base64 encoded string image is somewhere around 150% the size of a regular image. This means it’s unusable for large images.
Hard to manage: If you change the image, you’ll need to reembed the base64 string. You also have to maitain a separate IE stylesheet.

How to manage it

To help figure out which images were worth embedded and help manage it, I developed a small utility that analyzes a CSS file and allows you to select which images you want to embed. You can also preselect them by adding a comment somewhere within your CSS declaration that says /*embed*/

What It Does

Finds all image URLs in your CSS file (note: no CSS3 multiples or borders)
Shows the size difference between the image and the base64 string
Shows the final size output size and the GZipped size for comparison to the original
Removes comments and whitespace if you want
Creates a new base64 stylesheet and a IE6/7 stylesheet with references to the original image

Download

Download CssImageEmbedder.zip (9.55 kb)
Requires: .NET Framework (sorry! It was just faster than doing it in AIR)

Refactoring the JavaScript Color Picker - Step 1: Clean up the HTML and CSS

johndyer@gmail.com — Thu, 19 Nov 2009 20:03:00 +0300

On of the most popular posts on this blog was a color picker (demo) I created about 4 years ago and then released 2 years ago. It was based on the Prototype library which at the time was the only major mega-JavaScript library. Since then, others have ported the color picker to jQuery, MooTools, YUI, and other libraries, and it's popularity can be seen by searching for "javascript color picker" on Google.

The Original Color Picker (mimics Photoshop)

Rebuilding Goals

If the original color picker was popular, it was because of it's functionality, not so much pretty code. So, I'd like to rebuild the color picker with a few goals in mind:

Be library independent - I'll have to add a little bit of extra code for things like event management, but this will allow it to work for everyone.
Small and fast - The original JavaScript isn't too slow, but the color picker uses lots of separate images (27!). Originally, I hid these inside a <div> so that the browser would keep them cached, but I'd like to combine them into a few sprites to speed up the load time.
Clean up the HTML/CSS - The original has a lot of inline styles and unnecessary complexity, making it ugly and unwieldy.
Clean up the JavaScript - The original code separated out some functionality which makes it harder to figure out what's going on. I plan bring these together, so that I have one class for color conversion, one class for slider functionality, and one class for the color picker. The new code will also include code to function as a plugin to the major existing libraries (jQuery, Prototype, Mootools, YUI, etc.).

The first big step is to clean up the HTML and CSS. To get a feel for the old HTML/CSS, check out the version 1 example page. Here's what I've come up with so far:

Color Picker CSS

.color-picker
    { border: 0; padding: 0; margin: 0; font-family: Tahoma; font-size: 12px;}
.color-picker table, .color-picker td
    { border: 0; margin: 0; padding: 0; vertical-align: top;}
.color-picker label
    { margin: 4px 0; display: block;}
.cp-container
    { position: relative; float: left; border: solid 1px #000; padding: 0px; }
.cp-layer1, .cp-layer2, .cp-layer3, .cp-layer4
    { display: block; position: absolute; top: 0px; left: 0px; }
.cp-map
    { width: 256px; height: 256px; margin: 0px; }
.cp-map div
    { width: 256px; height: 256px; position: absolute; top: 0; left: 0; background: transparent url(maps.png) 0px 0px no-repeat;}
.cp-bar
    { width: 20px; height: 256px; margin: 0px 9px;}
.cp-bar div
    { width: 20px; height: 256px; position: absolute; top: 0; left: 0; background: transparent url(bars.png) 0px 0px no-repeat;}
.cp-preview
    { width: 60px; height: 60px; padding: 0px; margin: 0px; border: solid 1px #000; }
.cp-hsv, .cp-rgb
    { width: 40px; }
.cp-hex
    { width: 55px; }
.cp-map-arrow
    { background: transparent url(map-arrow.gif) 0px 0px no-repeat; width: 40px; height: 9px; position: absolute;}
.cp-bar-arrow
    { background: transparent url(bar-arrow.gif) 0px 0px no-repeat; width: 15px; height: 15px; position: absolute;}

Color Picker HTML

Cleanup Comments

To make it more readable, I've removed all the id attributes except for the single id on the containing div, taken out all inline styles, and moved the CSS to a separate file. I also changed the layers to <div> tags with background images instead of <img> tags. This may present some problems with IE6 opacity down the road, so I might need to change it back. I've also removed z-index values from the CSS to prevent problems with other JavaScript controls on the page. I was not careful with DOCTYPE in the past, but the new HTML and CSS should work in any DOCTYPE (I'll be using the HTML5 DOCTYPE in all the examples). Finally, the arrows are created using <div> that are inside the main block, which will make it easer to show and hide the entire color picker.

Bar Sprite

As a preview, I'm including the sprite for the value bar of the color picker. This combines 14 different bars into one 1.77KB file. Next time, we'll talk about memory consumption and sprites and see if the sprite usage is actually helpful.

HTML5 (XHTML5) Validation Schema and Intellisense for Visual Studio 2008

johndyer@gmail.com — Tue, 21 Jul 2009 20:46:00 +0300

I've been playing around with HTML5 (nice intro at Smashing Magazine) for a side project, and I wanted Visual Studio 2008 to stop telling me the new elements were not valid. So I created a new Validation Schema for Visual Studio 2008 that implements much of the HTML5 spec. I found some hints on how to do this in Visual Studio 2005 and went from there. Here's a pic of it in action giving you the attributes of of the new <source> tag under a new <video> tag:

Readme.txt

There is a lot of confusion about HTML, XHTML, and mime-types. I've chose to go with a stricter XML-like syntax of closed tags and quoted attributes, rather than the looser HTML, so I called it "XHTML 5" although that doesn't really make it offically XHTML 5 until you do the rest of the research, work, and fun.
This is not a 100% perfect implementation. There are bound to be different interpretations of what's "correct" HTML5 and you have until 2022 to get it right, so please don't worry about it too much.

What's Finished

All the new elements in HTML5 have been added in the follow groupings
- structure: article, aside, footer, header, nav, section
- media: audio, video, source
- other: bb, canvas, command, datagrid, datalist, details, dialog, eventsource, figure, hgroup, keygen, mark, menu, meter, output, progress, time
When new elements have custom attributes (such as height and width for video, I've tried to add those)
I've also changed a few things like not requiring the type attribute on script blocks and allowing meta tags to have a charset attribute
I've begun adding HTML5 events (ondrag, onplay, etc.) but have not completed all of them
I am not sure how to add HTML5 style data- attributes, so those won't validate yet.

How to Use it

Download XHTML Validation Schema for Visual Studio 2008
Save it to C:\Program Files\Microsoft Visual Studio 9.0\Common7\Packages\schemas\html\
Add the following to the Registry:
[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\VisualStudio\9.0\Packages\{1B437D20-F8FE-11D2-A6AE-00104BCC7269}\Schemas\Schema 23]
"Friendly Name"="XHTML 5"
"URI"="http://schemas.microsoft.com/intellisense/xhtml5"
"File"="html\\xhtml5.xsd"

Note that you might need to change "Schema 23" to something else if you already have other non-default schemas installed. You just need to use the next available number in the list.

I hope you find it helpful. Please let me know if you end up using it and feel free to suggest updates or corrections.

MVC Edit View Template Upgrades

johndyer@gmail.com — Wed, 11 Mar 2009 22:11:23 +0300

I’m building a new LMS using ASP.NET MVC and I am making heavy use of the View templates added in RC1. (see: T4 Templates: A Quick-Start Guide for ASP.NET MVC Developers)

I made a few changes to the default template to allow (1) table rows and cells instead of <p> tags, (2)add spaced to “ProperyName” so it looks like “Property Name”, and (3) use reflection to determine the <input> type generated by the Html helper. For all string Properties, a normal <input type=”text” /> is still generated, but for Int32, I am generating a <select> and for Booleans, a <input type=”checkbox” /> since these are the normal fields I use for forms.

For an object that looks like this

public class Person {
   public string FullName { get; set; }
   public bool IsActive { get; set; }
}

The default Edit View looks like this:

<p>
    <label for="FullName">FullName:</label>
    <%= Html.TextBox("FullName") %>
    <%= Html.ValidationMessage("FullName", "*") %>
</p>
<p>
    <label for="CampusID">IsActive:</label>
    <%= Html.TextBox("IsActive") %>
    <%= Html.ValidationMessage("IsActive", "*") %>
</p>

Here's what I wanted the Edit View to look like:

<tr>
    <td class="form-title"><label for="FullName">Full Name</label></td>
    <td class="form-input"><%= Html.TextBox("FullName") %></td>
    <td class="form-val"><%= Html.ValidationMessage("FullName", "*") %></td>
</tr>
<tr>
    <td class="form-title"><label for="Password">Is Active</label></td>
    <td class="form-input"><%= Html.CheckBox("IsActive") %></td>
    <td class="form-val"><%= Html.ValidationMessage("IsActive", "*") %></td>
</tr>

Here’s how I handled the different property types

Property Type	Html Helper	Output
String (and others)	Html.TextBox	<input type="text" />
Boolean	Html.CheckBox	<input type="checkbox" />
Int32	Html.DropDownList	<select>

You can modify this easily in the code below to put whatever controls you want for each property type. To use the template, just create a folder in your project called CodeTemplates\AddView:

Here is my are the parts of Edit.tt file that I updated:

<#
    
if(!String.IsNullOrEmpty(mvcHost.ViewDataTypeGenericString)) {    
    List<PropertyInfo> properties = new List<PropertyInfo>();

    FilterProperties(mvcHost.ViewDataType, properties);  
#>    
    <%= Html.ValidationSummary() %>     <% using (Html.BeginForm()) {%> 

        <table class="form-admin">    
<#

    foreach(PropertyInfo pi in properties) {    
#>

            <tr>    
                <td class="form-title"><label for="<#= pi.Name #>"><#= FormatLabel(pi.Name) #></label></td>

                <td class="form-input"><%= Html.<#= GetInputType(pi) #>("<#= pi.Name #>") %></td>    
                <td class="form-val"><%= Html.ValidationMessage("<#= pi.Name #>", "*") %></td>

            </tr>
<#    
    }    
#>  
        </table>  
        <input type="submit" value="Save" />    
    <% } %> 

    <div>   
        <%=Html.ActionLink("Back to List", "Index") %>    
    </div>
<#+
    
public string FormatLabel(string label) {    
    return System.Text.RegularExpressions.Regex.Replace(label, "([a-z](?=[A-Z])|[A-Z](?=[A-Z][a-z]))", "$1 ");

} 
  
public string GetInputType(PropertyInfo pi) {    
    switch (pi.PropertyType.ToString()) {
    
        case "System.Int32":    
        case "System.Int64":    
            return "DropDownList";
    
        case "System.Boolean":    
            return "CheckBox";
    
        case "System.String":    
        default:    
            return "TextBox";    
    }    
}



public void FilterProperties(Type type, List<PropertyInfo> properties) {     if(type != null) {    
        PropertyInfo[] publicProperties = type.GetProperties(BindingFlags.Public | BindingFlags.Instance | BindingFlags.Static); 
  

        foreach (PropertyInfo pi in publicProperties)    
        {    
            if (IsBindableType(pi.PropertyType) && pi.CanRead && pi.CanWrite)    
            {    
                properties.Add(pi);    
            }    
        }    
    }    
} 

#>

Hope this is helpful to you!

iTunesU Manager App Source Released

johndyer@gmail.com — Fri, 20 Feb 2009 23:30:00 +0300

A while back, I created an iTunesU Manager application for DTS's iTunesU site, and I finally got around to putting up the source code and executables. Below is a screenshot of the app and links to the Google code repository. The app requires .NET 2.0 (it's written in C#) and an iTunesU administrative account.

Nested Comments for BlogEngine.NET

johndyer@gmail.com — Fri, 16 Jan 2009 21:03:00 +0300

There are some great changes coming for BlogEngine.NET 1.5.0.0, and one of them is nested comments! I checked in the changes to Codeplex just last night, and I’ve implemented them here as a demo while we hammer out the final details.

Nested (or threaded) comments have been added to a lot of blog platforms lately (including WordPress 2.7), and it is a major feature of comment plugins like Disqus and Intense Debate. I personally think threaded comments make longer posts with lots of comments make a lot more sense.

Here’s an example of how a the comments in a recent post of mine make a lot more sense after turning on nesting. Since I responded in bursts to comments, they were out of order, but with nesting you can see that my comment (in dark brown) are now contextually nested and make much more sense. (Note: To make this work, I had to go back and manually add the “parentid” attribute to my comments to make them nested.)

Before (not nested)	After (nested)

If you want to try it out, you can try it on this post or download the latest check-in from Codeplex. Just be warned that this isn’t the final release. There may be some quirks in the JavaScript.

To add nesting to your existing themes, you’ll need to add the following code (marked by HTML comments) from the Standard Theme:

<div id="id_<%=Comment.Id %>" class="vcard comment<%= Post.Author.Equals(Comment.Author, StringComparison.OrdinalIgnoreCase) ? " self" : "" %>">  
  <p class="date"><%= Comment.DateCreated %> <a href="#id_<%=Comment.Id %>">#</a></p>
  <p class="gravatar"><%= Gravatar(80)%></p>  
  <p class="content"><%= Text %></p>  
  <p class="author">
    <%= Comment.Website != null ? "<a href=\"" + Comment.Website + "\" class=\"url fn\">" + Comment.Author + "</a>" : "<span class=\"fn\">" +Comment.Author + "</span>" %>
    <%= Flag %>
    <%= ((BlogEngine.Core.BlogSettings.Instance.IsCommentNestingEnabled && Comment.IsApproved) ? " | " : "") %>
    <%= ReplyToLink %> <!—- add this for reply to links –>
    <%= AdminLinks %>
  </p>
</div>
<!—- Start: threading –>
<div class="comment-replies" id="replies_<%=Comment.Id %>" <%= (Comment.Comments.Count == 0) ? " style=\"display:none;\"" : "" %>>
  <asp:PlaceHolder ID="phSubComments" runat="server" />
</div>
<!—- End: threading –>

Hope you like it, and let me know if you implement it on your site!

Everyone’s Going “HD” (Sort of)

johndyer@gmail.com — Mon, 08 Dec 2008 22:10:10 +0300

Last week, YouTube made big news by introducing “HD” video, thought it’s unclear what YouTube’s definition of “HD” is. The video is certainly higher definition, but it’s certainly not 720p or 1080p which is technically what HD is supposed to be. It might be 480p which is what Hulu.com does for their high quality streams (and is also what the Wii ouputs).

At DTS, we also recently revamped our videos to be “HD” (in the higher definition sense), moving to 480p in most cases.

For chapels and profiles of students and alumni, we have moved from RMTP streamed 426x240 FLV videos to progressively downloaded 640x360 MP4 (H.264) videos using Amazon S3 (and soon, CloudFront) for video.
For online education we moved from 320x240 streamed FLVs to 640x480 MP4s also from Amazon (c.f. previous post on online education player design).

We’ve also changed the player quite a bit. The old player had a lot of “chrome” around it and this new one is chromeless (ala Vimeo) and has the option to popout (similar to Hulu). Compare the old player below, with the new player showing two recent profiles, one of an alumnus and the other of a currents student who is also an NFL player.

Old player

New Embedded Player Samples

Some Technical Information

This player needed to be able to play both MP4s for video and MP3s for audio. Unfortunately, Flash’s built-in video controls like PlayButton and Seekbar only work for video, and there is no way to use them for audio. I wrote a some wrapper classes that can handle both MP4/FLVs and MP3s and normalizes the event model so they can both be hooked to the same control UI. If we move back to streaming it should be easy to write another class for that and have it all “just work.”

If anyone is interested in the source code, I’d be happy to publish it as an example of a Flash IDE AS3 video player that can also handle MP3s.

Technology Blog

johndyer@gmail.com — Mon, 08 Dec 2008 21:56:29 +0300

I would like to keep this blog focused on technical developments and code samples, but a few recent posts have been showing I am growing in my interest for the philosophy behind technology. To keep the two interests separate, I’ve started a separate blog called

www.donteatthefruit.com

It will be aimed at discussing the influence of technology on society and human relationships. Right now, I’m looking at Neil Postman’s “Five Things You Need to Know about Technological Change” as related to churches.

Stay tuned to this blog for more technical developments!

PNG transparency in IE6 (without JavaScript)

johndyer@gmail.com — Wed, 03 Dec 2008 02:35:30 +0300

As most of us know IE6 does not support PNGs with alpha transparency. We recently updated DTS’s site with some popups that have a drop shadow using PNG-24 images with alpha transparency. Here’s how it looks in IE6 compared to any modern browser (FF, IE7, Opera, Safari, Chrome, etc.). Notice the nasty blue border.

PNG-32 (problems in IE6)

IE6	Correct Display

I wish we could ignore IE6 users, but around 20% of our traffic still hasn’t upgraded, so we have to make it work for them. There are tons of JavaScript and CSS hacks out there to get IE6 to display PNGs with alpha transparency correctly, but we’re trying to avoid hacks whenever possible so as to not break things in the future. Also IE6’s filter technology can cause other problems. To fix this, I found a sweet “non-hack” solution on sitepoint which recommends using PNG-8 instead of PNG-24.

To summarize the article on PNG-8 and PNG-32.

PNG-32	PNG-8
16.7 million colors (like a JPEG)	256 colors (like a GIF)
alpha transparency, not just indexed (like GIF)	alpha transparency (just like PNG-32)
doesn’t work in IE6	works in IE6 like a GIF (indexed transparency)

PNG-8 with alpha transparency (IE6 works, pretty much)

Here’s what the PNG8 looks like in IE6 on our site. Notice that the drop shadow is missing, but the transparency still remains.

IE6	Correct Display

Everything “works” for IE6 users even thought it’s a slightly downgraded experience since the shadow is missing. For us, this is preferable to using JavaScript or CSS hacks that could cause other problems with animation. Since this is a image that only needs 256 colors, the PNG-8 is the perfect solution that is win-win-win.

How to make Alpha PNG-8 Images

The problem with all of this is that there is only one program that can make this specific kind of PNG-8 – Adobe Fireworks. Photoshop can’t do it, and I’m not sure if any other graphics programs can either. Here’s a step by step for making the PNG-8

1. Open the PNG-32 (or photoshop file)

2. Change the Image Type to “PNG 8”

3. Change to “Alpha Transparency”, then click the “Rebuild” button

Now you will see the new color palette with alpha colors. IE6 will only display the solid colors, not the fully transparent (upper left) or semi-transparent (the three with inset clear boxes).

4. Chose File-Export to save the PNG-8

And that’s it. It takes a little more time but has made our development easier and provides a more stable experience for users.

Sources

Wii + Flash + Papervision3D + C# = Alumni World Map

johndyer@gmail.com — Tue, 16 Sep 2008 01:37:40 +0300

The 2008 class gift for Dallas Seminary is supposed to be a large flat screen with a 3D world that shows where in the world DTS alumni are serving. The requirements were:

The target OS is still unknown and I haven't done much native Windows or Mac 3D programming. This leads me to use Papervision in Flash which I know and is very easy to use.
The data needs to be easily updatable. Rather than use a database, I built a flat file using a quick C# app that plots alumni by state and country and geocodes their location.
At DTS, the Admissions and Alumni offices are nearby, so the application needs to be interesting to Admissions. Ever since my sweet wife got me a Nintendo Wii a few months ago, I've wanted an excuse to program with it. For this project I thought, What's more fun and interesting than controlling the globe with a Nintendo Wii controller?

Video Demo

Here is a (low quality) video of an early version of the project that gives you an idea of what it's supposed to accomplish and look like. The first few seconds use mouse navigation, then it switches to WiiMote navigation.

wiiflashworld.mp4

Live Demo

To see a live demo, click the following image. If you want to control using a WiiMote, do the following. (1) connect your WiiMote to a PC via bluetooth. (2) Download the WiiFlash 0.4 package (3) run the included WiiFlash Server, (4) refresh the demo page page, (5) click the "Home" button the WiiMote to toggle controlling via mouse or WiiMote.

Libraries Used

Papervision3D
Tweener
WiiFlash
Also thanks to this tip on WiiMote data and this tip on Papervision geocoding

All the tools for this project have been around for almost a year, so nothing is particularly cutting edge, but the mashup and purpose are pretty unique and really fun. Hopefully, playing with the WiiMote will be as fun as actually viewing the map, making the entire experience for prospective students really positive.

Papervision3D Bookshelf

johndyer@gmail.com — Thu, 21 Aug 2008 03:02:00 +0300

I recently completed a website that catalogs books and in the development I wanted to make something really new. The backend is all ASP.NET, implementing UrlRewriter.NET and AJAX.NET libraries. The frontend uses several JavaScript libraries including Prototype, Scriptaculous, and Tablesort.

The one really unique feature of the site is the 3D bookshelf built using Papervision3D. Just yesterday it was featured in blog Daily PV3D as Papervision showcase.

You can check out the book shelf here:

http://www.bestcommentaries.com/category/proverbs/

Screenshots

Plain bookshelf:

Mouse over the third book from the left:

Book clicked:

How it works

Using Papervision, it's relatively easy to make a 6 sided polygon (cube) and then wrap images around it. I use the physical dimensions of the actual book to size the cube. Then, for the cover, I use an image of the book and wrap the last pixel around the side since I don't have spin images. I tried using System.Drawing code to write the author's name on the spine, but I could never get it to look just right, so I left it out. The only real catch was that I needed to place the shelf on a different Papervision scene to prevent clipping problems. The bookshelf also interacts with an HTML table down below via Flash's JavaScript ExternalInterface.

Since developing this 3D bookshelf, I found one site that does something somewhat similar, but they have the spine images which I can't afford to find for 1000s of books. Also, I think that the JavaScript interaction on mine might give it an edge.

Podcast on Technology

johndyer@gmail.com — Tue, 19 Aug 2008 02:27:57 +0300

A few weeks ago, I was invited to speak on a podcast with the best possible name of all time:

www.pontificast.com

Joey and Ryan (two smart, funny, creative guys) had me on for three episodes to discuss the effect of technology on people. I've been reading quite a few books and articles in this area lately, and concurrently such considerations have begun to move out of the academy and into the mainstream with articles such as Nicholas Carr's article "Is Google Making Us Stupid?"

Here are links to the three episodes:

The Medium is the Message (the effect of communication technologies on our thinking)
Technology's Effect on People (the speed of modern life takes its toll)
Technology and Relationships (the impact of facebook, twitter, and the rest)

Hope you enjoy!

Show Commenter's Latest Post: BlogEngine.NET Extension

johndyer@gmail.com — Wed, 23 Jul 2008 03:11:38 +0300

Background

Over the past few weeks, I've seen a few WordPress blogs that pull in the last post from a commenter's website. I also saw a post from Mads about how to find semantic links on a webpage.

So, I mashed his code together with some code from the BlogRoll control and created an extension that goes out and looks for RSS feeds at the commenter's website and then pulls in the latest post. [side note: I wish I could say, "a half hour later ... ", but it actually took me a while to get it to work...]

It all happens asynchronously, so if you comment on this post, it'll take a few seconds for it to show up. Then it will keep checking every so often for new posts.

Example

Last year, I posted a JavaScript color picker and the post now has over 100 comments. Here's what it looks like with the extension running:

Download & Installation

Download Commenter's Latest Post Extension
The last post is wrapped in the following class so you can style it:
```
<span class="commenterslastpost"></span>
```
Sometimes the ResolveLinks extension interferes with this, so you might want to add the following code around the foreach loop:
```
if (e.Body.IndexOf("href=\"" + match.Value + "\"") == -1) { ... }
```

Add a comment to this post to see it in action...

iTunesU Site Utility in C# (.NET)

johndyer@gmail.com — Fri, 18 Jul 2008 22:24:21 +0300

In the process of moving Dallas Seminary's content to iTunesU, I created a very simple application to edit site details via the Web Service API. It currently has the following functions:

Add/Edit/Delete Sections
Add/Edit/Delete Courses
Add/Edit/Delete Groups
Upload/Edit/Delete Tracks

There are a lot of things it doesn't do, like let you edit themes or add images to courses, but it is really helping us get started. Here's a screenshot:

You just enter your shared secret and domain name, press "Load Site Tree" and then right click on the various items to add/edit/delete.

And here's what it looks like in iTunes.

Download & Installation

Download iTunes U Utility 0.1
Requirements - Microsoft .NET Framework 2.0; PC only

Programming History

johndyer@gmail.com — Thu, 17 Jul 2008 22:48:00 +0300

From Keyvan Nayyari and Janko to Mads Kristensen and now to me comes a challenge to tell how I got into programming...

How old were you when you started programming?

I think I was around 14 or 15.

How did you get started in programming?

My friend and I made text adventure games.

What was your first language?

It was some form of BASIC.

What was the first real program you wrote?

By "text adventure game", I really mean lame spaghetti-coded ASCII choose your own adventure "games." My friend had most of the funny ideas and I did most of the programming. He's now in a crazy band in Austin, TX called Natchet Taylor, and I work at a seminary!

What languages have you used since?

ASP, PHP, C#, ActionScript, SQL, X/HTML, JavaScript, CSS, and all the rest...

What was your first professional programming gig?

When I graduated from college, I took a job as a youth pastor. I needed extra cash, so I got a job as as ASP programmer for http://www.texags.com/. At that point, all I had really done was build a personal webpage in college (with animated flaming gifs!), so I just learned everything on the job. It was great fun. In those days, I'd write everything for IE, and then fix it for Netscape. Funny how things change.

If you knew then what you know now, would you have started programming?

Totally. There's always good work, and it really frees me up to be anywhere. I've made it through an entire masters degree since I could work whenever and wherever, and still be involved with friends and in ministry.

What is the one thing you would tell new developers?

I'll cheat and go with two:

Always, always, always have a signed contract with everything spelled out in detail and a 25-50% payment before writing a single line of code.
Release as much code as you can (to a blog or whatever). If your code is worth publishing, it means you probably did a good job, and would be something you won't hate to go back and modify later.

What’s the most fun you’ve ever had … programming?

I would have to say programming online education stuff with foreign language support. I have no idea what any of it says, but it's really fun to develop stuff that is used in a home in Dallas, a tent in the deserts of Iraq, in the Packers lockerroom, and in an underground church in China - and all of it not just to make a buck, but to make a difference in the world. That's rock-star coding.

Okay, I'm passing this on to Nathan Smith, Chris Merritt, and John Saddington. Have fun guys.

Online Education Player Design Considerations

johndyer@gmail.com — Mon, 02 Jun 2008 18:33:00 +0300

Dallas Seminary has been doing video-based online education for about 5 years now. One of the initial goals was to replicate the classroom teaching experience as much as possible by including the video and the professor's illustrations (Powerpoint, Keynote, etc.). Beyond that, we also wanted to enhance the experience by adding things like a transcript and editing down the video to the most important segments.

Our initial player was created by Yahoo!'s Broadcast.com division and it used HTML frames and Windows media. This limited us to Internet Explorer, but there was no other option at the time. Then Flash 7 came out with video support and I custom built the player below. Since then, video on the web has come a long way, and the introduction of H.264 support means that we only need one format for playing on the web and on the desktop.

Here is the original design using 320x240 video and 480x360 slides:

Here are some changes we wanted to make:

Move from Flash 8 to 9 - use AS3 and enable fullscreen support
Use H.264 video - to simplify our workflow
Increase the video size, quality, and availability
Some users found the auto-scrolling transcript distracting and we need another option for them
Many classes don't have slides, so we need to de-emphasize those, yet also provide a good slide navigation system.
More narrow player - the current design is about 850px which makes it hard to have many more windows open at the same time.

Here are wireframe mockups of various design proposals

First player (2003) using Yahoo!'s Broadcast.com using HTML/Frames/WMV
Obviously, WMV is limited to really working in IE, and we were stuck with Yahoo!'s platform.
Flash player with 320x240 video
This player is wider since the slides are bigger, but the transcript is more narrow column which makes it easier to read.

New Designs

Swapped video and slides sizes, controls at the bottom
This swaps the video and slide sizes. It's nice, but the transcript is far away and the slides are hard to read. The player is also still very wide.
Larger video size, small slides on the side
To make the video even bigger, the transcript is now a single line like closed captioning on TV. Rather than give the slides their own dedicated space, the slides have a tray on the right and the full size slide appears over the video for a few seconds. The width is slightly smaller, but not much.
Coverflow Style Player
To make the player more narrow (for multi-tasking), we move the slides to the bottom and use the Apple CoverFlow to show a lot of them at once. This makes the player more narrow which is good, but also taller. To shorten it, we've moved all the controls on top of the video that appears/diasppears on mouse hover.

Here is a screenshot of a fairly common desktop size (1680x1050) with MS Word and a preview version of this player open. (note: I've made sure the controls are visible for the screenshot, but they are hidden normally)

This seems effective, but there is a possible drawback in that the Coverflow might be somewhat distracting to some students (it can be turned off). Also, some may prefer the older style transcript with more than one line visible at once.

Links to preview the players:

Old Player: http://my.dts.edu/player/
Coverflow: http://my.dts.edu/player2/

Another future goal is to build the player as an AIR application so that videos can be downloaded for offline use.

ISBN Functions in C# (ISBN-10 to ISBN-13 Conversion)

johndyer@gmail.com — Fri, 16 May 2008 01:05:16 +0300

While working with some book data, I needed to merge the old ISBN-10 and ISBN-13 data. Unfortunately, I couldn't find any C# code to do the conversion. Search for "ISBN C#" in Google only return book stores with C# books.

So here is a little class that will convert and validate ISBNs. Here's how the code would look:

string isbn10 = "0830818030"; 
string isbn13 = ISBN.Convert10to13(isbn10); // returns "9780830818037"

string isbn = "083081803X"; // this one has a bad checksum (last digit) 
string correctIsbn = ""; 
if (!ISBN.IsValid(isbn, out correctIsbn)) { 
	isbn = corretnIsbn; // returns "0830818030"
}

An ISBN object can also be instantiated and used:

IBSN myBook = new ISBN("0-83081-803-0"); 
string isbn13 = myBook.ISBN13; // returns "9780830818037"
string isbn10 = myBook.ISBN10; // returns "0830818030"

Here is the class:

public class ISBN
    {

        public ISBN(string isbn)
        {
            SetIsbn(isbn);
        }

        private string _isbn10 = "";
        private string _isbn13 = "";

        public string ISBN10
        {
            get
            {
                return _isbn10;
            }
            set
            {                
                string corrected = "";
               
                if (!IsValid(value, out corrected) && corrected == "")
                    throw new Exception("invalid ISBN");

                SetIsbn(corrected);
            }
        }

        public string ISBN13
        {
            get
            {
                return _isbn13;
            }
            set
            {
                string corrected = "";

                if (!IsValid(value, out corrected) && corrected == "")
                    throw new Exception("invalid ISBN");

                SetIsbn(corrected);
            }
        }

        private void SetIsbn(string isbn)
        {
            isbn = CleanIsbn(isbn);

            if (isbn.Length == 10)
            {
                _isbn10 = isbn;
                _isbn13 = Convert10to13(isbn);
            }
            else if (isbn.Length == 13)
            {
                _isbn13 = isbn;
                _isbn10 = Convert13to10(isbn);
            }
        }

        private static string CleanIsbn(string isbn)
        {
            return isbn.Replace("-", "").Replace(" ", "");
        }


        public static string Convert10to13(string isbn)
        {
            return Convert10to13(isbn, true);
        }
        public static string Convert10to13(string isbn, bool throwError) {
            
            // remove - and space
            string isbn10 = CleanIsbn(isbn);

            if (isbn10.Length != 10 && throwError)
                throw new Exception("ISBN must be 10 characters long");

            // 1) Drop the check digit (the last digit)
            isbn10 = isbn10.Substring(0, 9);

            // 2) Add the prefix '978' 
            string isbn13 = "978" + isbn10;

            // 3) Recalculate check digit 
            isbn13 = isbn13 + Isbn13Checksum(isbn13);

            return isbn13;
        }

        public static string Convert13to10(string isbn)
        {
            return Convert13to10(isbn, true);
        }

        public static string Convert13to10(string isbn, bool throwError)
        {

            // remove - and space
            string isbn13 = CleanIsbn(isbn);

            if (isbn13.Length != 13 && throwError)
                throw new Exception("ISBN must be 13 characters long");

            // 1) Drop the check digit (the last digit) and prefix '978'
            string isbn10 = isbn13.Substring(3, 9);
     
            // 2) Recalculate your check digit using the modules 10 check digit routine.
            isbn10 = isbn10 + Isbn10Checksum(isbn10);

            return isbn10;
        }

        public static bool IsValid(string isbn)
        {
            string correctIsbn = "";
            return IsValid(isbn, out correctIsbn);
        }

        public static bool IsValid(string isbn, out string correctISBN)
        {
            // remove - and space
            isbn = CleanIsbn(isbn);

            if (isbn.Length == 10) {
                return ValidateIsbn10(isbn, out correctISBN);
            }
            else if (isbn.Length == 13)
            {
                return ValidateIsbn13(isbn, out correctISBN);
            }
            else
            {
                correctISBN = "";
                return false;
            }

        }

        private static string Isbn10Checksum(string isbn)
        {
            int sum = 0;
            for (int i = 0; i < 9; i++)
                 sum += (10-i) * Int32.Parse(isbn[i].ToString());
   
            float div = sum / 11;
            float rem = sum % 11;

            if (rem == 0)
                return "0";
            else if (rem == 1)
                return "X";
            else
                return (11 - rem).ToString();
        }

        private static string Isbn13Checksum(string isbn)
        {
            float sum = 0;
            for (int i = 0; i < 12; i++)
                sum += ((i % 2 == 0) ? 1 : 3) * Int32.Parse(isbn[i].ToString());

            float div = sum / 10;
            float rem = sum % 10;

            if (rem == 0)
                return "0";
            else
                return (10 - rem).ToString();
        }


        private static bool ValidateIsbn10(string isbn, out string correctISBN)
        {
            correctISBN = isbn.Substring(0, 9) + Isbn10Checksum(isbn);

            return (correctISBN == isbn);
        }

        private static bool ValidateIsbn13(string isbn, out string correctISBN)
        {
            correctISBN = isbn.Substring(0, 12) + Isbn13Checksum(isbn);

            return (correctISBN == isbn);
        }
}

I initially wanted to also make a method that would add back in the correct dashes, but I found out that the make up is based on country and publisher codes assigned by the International ISBN Agency which regularly updates the list of codes making it pretty much impossible to permanantly functionalize.

The Best Way to Demo Websites for Clients

johndyer@gmail.com — Mon, 12 May 2008 19:29:10 +0300

For the last few years, my web team has used a projector to collaborate on web projects. We use it for going through our weekly work items, demoing designs, doing training, and so on.

Unfortunately, it was an old projector with a weak bulb so we always had to turn out the lights to use it. Even then it was hard to see because the contrast and color depth were poor, and the resolution was only 1024x768. So last year I budgeted to get a new projector to solve these problems.

Instead of getting a new projector, I decided to get a LCD HDTV and use it as a monitor. I found a killer deal at Sam's Club on a 65" Olevia. The screen isn't quote as nice as something like a Sony, but for what we are doing, it is absolutely amazing. The 1920x1080 resolution and super bright LCD screen is perfect for looking at web designs. In this pic, We have our task app on the right and a full size web page on the left. Even though the text is tiny it's readable from about 8' away:

I have an old PC running the display, and I'm using a few little utilities to make enhance presentations:

PowerStrip - Some PCs and Macs can't natively display 1920x1080 resolution. This little Windows app helps out and can usually enable even really old machines to do HD resolutions.
ZoomIt - this is a little app by the former SysInternals.com guys. It lets you zoom into a screen with the mouse scroll wheel and draw on the screen. This features are invaluable for mockups.
Zune Theme Modified - I also used a modified Zune theme, because I like how the dark colors make the UI fade into the background and focus attention on the design.

On the fun side, we can occasionally use it for things other than web design. Since we're in a basement, we don't have a good way of getting an antenna to pipe in some HD goodness, but we can watch trailers in full 1080p goodness!

Web Marketing using Facebook Ads and Video for Dallas Seminary

johndyer@gmail.com — Tue, 06 May 2008 18:22:19 +0300

Note: This blog is usually fairly technical, dealing with ASP.NET, Flash, and JavaScript code samples, but this is a brief deviation into the broader world of the web as a technology platform for communicating an institution's message.

For Dallas Theological Seminary, we've been experimenting with "branding" and reaching different audiences by producing some new videos and experimenting with Facebook's relatively new targeted advertising.

Marketing for Seminaries?

Advertising and marketing for churches and seminaries can be a tricky thing, because it seems rather sacrilegious to "market" something spiritual. We've all seen late night and afternoon televangelists that make us cringe. But DTS isn't offering a "product" that someone buys; rather its mission is to train pastors, professors, and missionaries for a lifetime of service. If you call an admissions counselor and ask why you should go to DTS, you won't get a sales pitch. The admissions counselor will tell you that you should go to the school to which God is calling you. The admissions person will then mention some of DTS's strengths, but stay away from comparisons with other schools or "selling DTS."

Still, it is important for DTS to inform prospective students on what kind of school it is and what it's strengths are. Basic marketing ideas can help convey this, and naturally the web is a great place to start.

Context for the Advertisements

Any time you create an ad for a "company," it is important to know the background of the business and the historical context in which the ad is situated. This history of seminaries and churches in America is key to understanding what ads will communicate to the seminary audience.

In the early 1900s, was a debate in the Christian church between "fundamentalists" (those who believe certain truths are the most important thing about Christianity) and "liberals" (those who believe certain actions are the most important thing about Christianity). In this debate, it seemed that the "liberals" forgot that Jesus asked Christians to believe something (that he is the savior and the Son of God), while the the fundamentalists often forgot that Jesus asked Christians to do something (love others).

DTS was started in the 1920s during the fundamentalist movement. Unfortunately, many of the seminaries which started during this time period have a reputation of caring about teaching the Bible, but neglecting to meet real world needs. By the 60s and 70s, some Christians wanted to balance the emphases of both the liberals (loving) and fundamentalists (truth), and there they were called "evangelicals." Today, this term has become politically decisive and has less positive connotations in many places, so the word "evangelical" communicates something different than it used it.

Today's students who are considering seminary are more concerned than ever about balancing these two things and so DTS needs new ways to communicate that it wants to care about Christian beliefs and Christian practices without making one too dominate. These students also don't read traditional Christian publications, so DTS needs to shift from print publications to Internet and from top down communication to allowing prospects to connect to real students.

A New Tagline

The older taglines for DTS have been things that primarily emphasize Biblical teaching such as "Standing Strong for the Truth" or "Training You Can Trust. Leaders You Can Follow."

We wanted something shorter and somewhat pithy that emphasized both aspects of truth and love. Here's what we came up with.

Teach Truth. Love Well.

Not too revolutionary, but hopefully it's clear and it communicates. Here's how Google sees it :)

Facebook Page and Ads Summary

DTS has traditionally run ads on large Christian website like ChristianityToday.com and OnePlace.com. But to reach younger students, we moved over to Facebook.

Also, in the past, a traditional DTS ad might have emphasized something like "Want to be a Pastor?", but many of today's seminarians are going into non-traditional forms of ministry. DTS grads still have a very strong emphasis on teaching the Bible, but more students are doing this outside the traditional church pastor role. The first few ads we ran emphasize these other forms of ministry. We ran each one for around a week and paid per click with click-through rates of around 0.10%.

Which one do you like more?

The second ad turned out to be more successful (higher click-through rates). This is probably because the image is more appealing and "Dallas Seminary" doesn't show up until later in the text of the ad.

In addition to advertisements, we also setup a Facebook Page for DTS. Rather than aggressively market to students through physical mail or email blasts, this allows interested students to check out DTS and ask questions of current students and alumni before talking to an admissions counselor. On the GoingToSeminary blog, there is a great post about connecting to a current student to get real answers. Below is an example of a prospect asking a question that a current student answered on Facebook. That person got a real answer from a real student without ever needing to visit the main seminary website.

Connecting with Video

DTS's excellent AV team has also produced several videos that communicate the "Teach truth. Love Well." message. These are sent to alumni and supporters via email every few months.

Ben Stuart
Ben leads a college ministry called BreakAway which is attended by about 5,000 Texas A&M (my alma mater) students. His story is classic DTS and emphasizes "Teach Truth".

Christ in North Africa
Where Ben highlights "Teach Truth," Christy highlights "Love Well." She is an English teacher North Africa, but never "teaches" Christianity verbally; she does it by loving the girls in her classes.

William "Duce" Branch
"Duce" Branch is a pastor who ministers to the hip hop generation through his music.This is a guy who took 120 hours of course work and still managed to keep his love for his culture. He really embraces both elements of "Teach Truth. Love Well."

This last video also has a great metaphor for communicating to different audiences where the president of the school is shown on an upper-middle-class HDTV while Duce is shown on various older TVs. They both are working for the same goal with the same message, but the context and transmission system changes to be audience appropriate. Good stuff.

I hope this is a helpful summary of how DTS works and how the newer media forms can be used to communicate to changing audiences.

Dynamic Text Replacement with JavaScript and C# ASP.NET

johndyer@gmail.com — Wed, 23 Apr 2008 18:32:42 +0300

What it Does

You write some basic markup and include a JavaScript file and some code which replaces normal text with a .NET generated image:

<style type="text/css">
h2 { color: #9E100F; size: 22px; }
</style>

<!-- This says "Frequently asked questions in zh-TW -->
<!-- If you just see boxes, you need to install Asian fonts on your machine -->
<h2>關於網上教育常見的問題</h2>

<script type="text/javascript" src="fontreplacer.js"></script>
<script type="text/javascript">
FontReplacer.replace('h2','*', 'MyGreatFont');
</script>

See the DEMO

This will take all h2 tags with any class (*) and replace them with and image rendered using 'MyGreatFont'. This font needs to be installed the c:\windows\fonts\ folder of your server or in the same folder as the .NET script which generates it. Initially the page will look like this (using the standard font for Chinese script on a PC which is 'MS Mincho'):

But after the replacement happens, it looks like this:

With another less formal font, it could look like this:

Of course, you can use any font installed on the server and it is not limited to Chinese text. Here is an example replacing the default Times New Roman text with Century Gothic:

This may be useful in other scenarios for viewing Unicode text on a machine without Unicode fonts installed (Greek, Hebrew, Arabic, etc.).

It can also produce anti-aliased PNGs for use on top of an image:

Why I did it

Recently, I needed to have the titles for a series of webpages be rendered in a specific Chinese font (see http://www.dts.edu/chinese and click on "zh-TW" in the upper right) because the default doesn't look very official (according to my Chinese friends). I wanted to use sIFR which replaces the HTML text node with a Flash file that has the font embedded. The problem is that Chinese fonts are 3-8MB which means the user has to download a gigantic SWF. Also, there can be copyright problems with using sIFR.

So I turned to .NET to generate images using the font. The basic technique was first published back in a 2004 A List Apart article titled Dynamic Text Replacement. ALA used JavaScript and PHP and, since then, there have been many permutations of the basic idea, some using pure CSS instead of JavaScript. I haven't seen a good one for .NET, so I had to write my own. I don't like using CSS for some of the reasons mentioned here, so I went with JavaScript for the replacement. This way users without images or JavaScript can still see the text. Users with images and JavaScript get a slightly nicer view.

How it Works

The JavaScript method looks at the HTML element(s) you send it and pulls out the text and font color. It then sends a request to ASP.NET to return an image which renders the text using your assigned font and colors. There are three ways to call it:

// elements by tag and class
FontReplacer.replace(tag, class, fontName);
// elements by tag and class inside a given elmenent
FontReplacer.replaceIn(element, tag, class, fontName);
// replace array of elements
FontReplacer.replaceElements(elementArray, fontName);

This calls up a .NET script which writes the text to an image using the specified font. The C# code can generate a JPG or transparent PNG which happily sits on top of any background and looks very nice. (There is a flag in the JavaScript to to allow the PNG transparency). There are some tricks in .NET for generating a PNG with alpha channels and for saving a JPEG with a specified quality, so here's the full code for that part.

if (backColor == "transparent")
{
	MemoryStream io = new MemoryStream();
	bitmap.Save(io, ImageFormat.Png);

	context.Response.ContentType = "image/png";
	context.Response.BinaryWrite(io.GetBuffer());
}
else
{
	context.Response.ContentType = "image/jpg";
	SaveAsJpeg(bitmap, context.Response.OutputStream, (long)100);
}
void SaveAsJpeg(Image inputImage, Stream stream, long quality)
{
	 // generate JPEG stuff
	 ImageCodecInfo codecEncoder = GetEncoder("image/jpeg");
	 EncoderParameters encoderParams = new EncoderParameters(1);
	 EncoderParameter qualityParam = new EncoderParameter(System.Drawing.Imaging.Encoder.Quality, quality);
	 encoderParams.Param[0] = qualityParam;
	 inputImage.Save(stream, codecEncoder, encoderParams);
}
ImageCodecInfo GetEncoder(string mimeType)
{
	ImageCodecInfo[] codecs = ImageCodecInfo.GetImageEncoders();
	foreach (ImageCodecInfo codec in codecs)
	{
		if (codec.MimeType == mimeType)
		{
			return codec;
		}
	}
	return null;

}

There are also flags in the JavaScript to force the returned image to be the same height and width as the element you are replacing. By default, the height is forced so that the page doesn't jerk at all, but you should be aware that browsers often report the font size inaccurately. Also, .NET's measurement of the size a given string will take up can include some padding depending on the font, so you may have to play with it for your scenario.

Lastly, there are some important things to know about using fonts on the server.

When you install a font on c:\windows\fonts\, IIS doesn't immediately know it's there. You'll need to run the "resetiis" command for IIS to pick up the new fonts.
If you're in a hosted environment and can't install fonts, you're still in luck. There is some code to load a *.TTF file in the fontwriter.ashx script. In this case, you'll need to specify the font file name ('gothic.ttf') rather than the installed font name ('Century Gothic').
You might want to adjust the TextRenderingHint hint property at the top if you don't want anti-aliased rendering.

Download & Example

var baby = john.Meiosis() + amber.Meiosis();

johndyer@gmail.com — Thu, 17 Apr 2008 04:21:00 +0300

Just a little genetics (my college major) humor written in C# 3.0 syntax (with overloaded operators and an implicitely typed local var) to announce that we're going to be parents later this fall! Check out the sweet spin moves below. I'm calling all-star running back...

offspring01_sonogram.flv

“Behold, children are a gift of the LORD; The fruit of the womb is a reward.” Psalm 127:3

Dallas Seminary Mobile Site

johndyer@gmail.com — Tue, 15 Apr 2008 00:56:10 +0300

Since Microsoft and Apple finally decided to allow/license versions of Flash Lite 3.0 for their mobile devices (Windows Mobile and iPhone), I created an initial build of a mobile site for Dallas Seminary which will eventually use Flash Lite 3.0 for all the audio and video content.

Main site: www.dts.edu
Mobile site: mobile.dts.edu (view with iPhone tester)

The goal was to make it look like an iPhone application using the list format, but have it work properly on other mobile devices by not specifically targeting the iPhone's screen size such as Windows Mobile and Blackberry. It's a bit more cramped on the smaller WM screen, but it works well.

Here are a few screen shots:

iPhone	Windows Mobile

There is one gotcha on the iPhone that doesn't show up using Safari. The iPhone may try to startup zoomed out like it would need for a normal website. If your <div> tags are set to expand, the iPhone will stretch everything out and then zoom out.

To fix this add the following:

<meta name="viewport" content="user-scalable=no,width=320,scale=1.0" />

Totally Unobtrusive (and totally awesome) Upside Down Text

johndyer@gmail.com — Fri, 11 Apr 2008 02:38:26 +0300

There is a huge need for upside down text on the web. With everyone "going mobile," developers cannot simply rely on users having their screens oriented the same way all the time. I went through all of the possible options for creating upside down text and finally came up with a totally unobtrusive, Unicode enabled, completely web-changing piece of code (which is mostly from someone else and using this and this).

Options for Upside Down Text

Images - The most obvious option for upside down text is to open up Photoshop, enter some text, and use Rotate Canvas.
Pros: easy to do.
Cons: must be done for every piece of text. Not every OS/browser in the world can display images. This is just unacceptable.
sIFR - I know it's a little 2005 of me to say it, but a great use of Flash is to replace text and rotate it around.
Pros: works for any HTML text element.
Cons: requires Flash which has even less support than images. Also, requires extra coding.
Canvas - one day it might be possible to do more with text drawing on a canvas tag, but right now its not
Pros: none, for now.
Cons: doesn't exist.
JavaScript - Everyone knows JavaScript can do anything. See my experiments in 3D and color and this guy's port of Mario. Using this great script its possible to simulate upside down characters using Unicode equivalents.
Pros: is awesome.
Cons: nothing at all.

Usage &Implementation

Just give your HTML element a class called "upsidedowntext" and add the script in the header and you have pure greatness:

<script type="text/javascript" src="upsidedown.js"></script>

<div class="upsidedowntext">I can be read in any orientation</div>
<div>I can be read in any orientation</div>

<div class="upsidedowntext">This is Tom Cruise taking your picture</div>
<div>This is a boring Russian Mig</div>

Result:

uoıʇɐʇuǝıɹo ʎuɐ uı pɐǝɹ ǝq uɐɔ ı

I can be read in any orientation

ǝɹnʇɔıd ɹnoʎ ƃuıʞɐʇ ǝsınɹɔ ɯoʇ sı sıɥʇ

This is a boring Russian Mig

Demo and Download

Upside down text in action

Note: this post was intended to be an light-hearted (late) April's fools poke at all the random stuff developers are doing with JavaScript, sometimes in the name of a standard or idea that really isn't really needed. Also, I think upside down text is funny.

QTVR like Panoramas of Chichen Itza made in Flash with Papervision3D

johndyer@gmail.com — Mon, 17 Mar 2008 00:38:00 +0300

Last week, I visited Cancun with my in-laws and had a chance to see the ruins at Chichen Itza. I took a series of photos and made them into a panorama using Papervision3D (as done here by BlitzAgency for NBC's The Office and here by a company selling a product called Flash Panoramas). I made a little script that can handle both spherical and cubic images to see how both would look. Here's some previews of the two versions (The lines are there to show how the panorama is being constructed):

Spherical

Cubic

A cubsic panorama is composed of six images (top, bottom, left, right, front, back) while a spherical panorama is made using a single image which is stretched at the top and bottom (like a map of the world where Greenland and Antarctica are distorted). In general, it looks like the spherical version can generate the same level of detail with fewer polygons and thus more speed, but the cubic images can be a little smaller and are more easily edited.

Each of these is composed from approximately 45-50 images. I took around 15 in a circle at the horizon, 15 looking up about 45 degrees, and 15 looking down 45 degrees. Unfortunately, I didn't take enough pictures to complete the sky or the ground below, so you'll see some black spots if you "look" up or down. I used Hugin to stitch the images together, and it did a pretty good job considering I didn't have a tripod or wide angle lens to accurately take the pictures. (link: the best tutorial I have seen on image stitching)

3D Panoramas

Pyramid: spherical | cubic
Ball court: spherical | cubic

Original Images

Pyramid:
- sphere
- front, right, back, left, top, bottom
Ball Court
- sphere
- front, right, back, left, top, bottom

The view page also has a list of commands (f=fullscreen) and links to the original files.

Update: I changed the navigation to be more like QTVR where you have to click to move, and there is an arrow cursor. Also, smoothing and precision are automatically applied when you stop moving.

John Dyer

Simple Cross-Browser HTML5 video with a single H.264 file and fallback options

Purple CMS - Now on Github

About Purple

HTML5 Video Player with Slides and Transcript

The Player

The Code

Try it Out

Purple CMS - Super Early Alpha (0.1)

Project Requirements

Download Purple CMS 0.1

Experimenting with Web SQL databases

What is Web SQL?

How Does Web SQL Work?

A Giant Web SQL example

Optimizing CSS with Base64 Embedded Images (with Bonus Utility!)

Normal CSS

CSS with Base64 Embedded Image

Problems with Base64

How to manage it

What It Does

Download

Refactoring the JavaScript Color Picker - Step 1: Clean up the HTML and CSS

The Original Color Picker (mimics Photoshop)

Rebuilding Goals

Color Picker CSS

Color Picker HTML

Cleanup Comments

Bar Sprite

HTML5 (XHTML5) Validation Schema and Intellisense for Visual Studio 2008

Readme.txt

What's Finished

How to Use it

MVC Edit View Template Upgrades

iTunesU Manager App Source Released

Nested Comments for BlogEngine.NET

Before (not nested)

After (nested)

Everyone’s Going “HD” (Sort of)

Old player

New Embedded Player Samples

Some Technical Information

Technology Blog

PNG transparency in IE6 (without JavaScript)

PNG-32 (problems in IE6)

PNG-8 with alpha transparency (IE6 works, pretty much)

How to make Alpha PNG-8 Images

1. Open the PNG-32 (or photoshop file)

2. Change the Image Type to “PNG 8”

3. Change to “Alpha Transparency”, then click the “Rebuild” button

4. Chose File-Export to save the PNG-8

Wii + Flash + Papervision3D + C# = Alumni World Map

Video Demo

Live Demo

Libraries Used

Papervision3D Bookshelf

Screenshots

How it works

Podcast on Technology

Show Commenter's Latest Post: BlogEngine.NET Extension

Background

Example

Download & Installation

iTunesU Site Utility in C# (.NET)

Download & Installation

Links

Programming History

How old were you when you started programming?

How did you get started in programming?

What was your first language?

What was the first real program you wrote?

What languages have you used since?

What was your first professional programming gig?

If you knew then what you know now, would you have started programming?

What is the one thing you would tell new developers?

What’s the most fun you’ve ever had … programming?

Online Education Player Design Considerations

ISBN Functions in C# (ISBN-10 to ISBN-13 Conversion)

The Best Way to Demo Websites for Clients

Web Marketing using Facebook Ads and Video for Dallas Seminary