Technology Blog

December 8, 2008 | Uncategorized | Comments Off on Technology Blog

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)

December 3, 2008 | Uncategorized | 9 Comments

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
image

Correct Display
image

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
 image

Correct Display
image

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)

image

2. Change the Image Type to “PNG 8”

image

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).

image 

image

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

image

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

September 16, 2008 | Uncategorized | 6 Comments

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:

  1. 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.
  2. 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.
  3. 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.

[flv: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.

Alumni World Globe

 

Libraries Used

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

August 21, 2008 | Uncategorized | 17 Comments

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:

image

Mouse over the third book from the left:

image 

Book clicked:

image

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

August 19, 2008 | Uncategorized | 12 Comments

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

www.pontificast.com

image

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:

Hope you enjoy!

Hi, I'm John Dyer. In my day job, I build websites and create online seminary software for a seminary in Dallas. I also like to release open source tools including a pretty popular HTML5 video player and build tools that help people find best bible commentaries and do bible study. And just for fun, I also wrote a book on the theology of technology and media.

Fork me on GitHub

Social Widgets powered by AB-WebLog.com.