Joel Kirchartz

Project: BAMP Festival of Homes mobile site

noreply@blogger.com (Joel Kirchartz) — Fri, 02 Dec 2011 18:54:00 +0000

Here's the Builders Association in the Metropolitan Pittsburgh Festival of Homes mobile site at bamp.songwhale.com

This little humdinger has a back end written with python/django, I'm also using geopy to assist in calculating distances for the map. The front end uses Google Maps APIv3 HTML5 and CSS3. Django's built-in admin back end made data-entry a breeze, although I wish it had built-in table alteration, changing your models is a pain in the butt, I didn't want to figure out South with very little data to migrate.

This was my first time running an nginx server, it's a big difference from apache. The configs are a lot cleaner, definitely more like python than markup. The uwsgi was used to run python and since it's packaged with nginx setup was a breeze. The Database was in postgres, although I could've used postGIS to do the distance calculations and bypass geopy, I was already in too deep to change it. This is a pretty nice stack.

I kept the design minimal and fluid to support the widest array of browsers. Django's templating is awesome, you can do a lot with it without getting in the way of your html.

Intro to Linux for Web Devs on Windows

noreply@blogger.com (Joel Kirchartz) — Mon, 28 Nov 2011 22:00:00 +0000

I've been spending a lot of time using the linux CLI lately, and I know it can seem difficult at first. When I started with computers everything ran off the CLI and nobody got all freaked out, that was back before color monitors, now we have color monitors in our pockets so don't worry, it's not that hard, you can do this.

Logging In:

To remotely access a server you'll need a telnet/ssh client, for windows PuTTY is a good choice , so download & install PuTTY. When you open putty you'll see a space for your host name or IP address for the server you're going to access, input the relevant information and hit open at the bottom of the window. You'll be promped for your username & password when PuTTY connects. Now take a deep breath, you're in a linux CLI, huzzah!

To learn more about PuTTY check the PuTTY docs.

Getting Around:

On windows you can list folders and directories like "C:/Program Files/" or "C:\Program Files\", on linux it's "/var/www/html" (for apache's html directory), so linux is /-only, where windows doesn't care if you use / or \.

Let's see where we are on the server, type in "pwd" at the command line (you should see /home/ or /root/).

To see what files are in this folder type "ls", this will print out columns of files in the current directory, but if you want to see more details you can add to this command with flags, "ls -a" will list all files, "ls -l" will list details about the files, you can mix these flags like "ls -al" to list details for all files. You'll notice a .. and a . directory, In linux the path to the current directory is "./" and the path to the parent directory is "../" Not much fun being stuck in one place huh?

Here's the last command in this section "cd" just typing in "cd" will usually take you to your home directory, which is where you currently are anyhow if you've been following along. cd is there to help you Change Directories, so to move to the parent directory of your current folder you do "cd ../" but you can move anywhere with this command as long as you know where you're going. If this is an apache server try "cd /var/www/html" to get to the default main directory for the files. Some servers keep this directory at "/sites" so you could try too.

Here's a quick reference of commands for moving around:

pwd = display current directory path (Print Working Directory)
ls = list files, you can add flags to see more info on each file, I like to use "ls -alF" (LiSt)
cd = change directory, use "cd ../" to move up one directory, or "cd /var/www/html" to move to an entirely different directory (Change Directory)

for more on these, check the wikipedia pages for cd, ls, and pwd.

Editing Text-based files:

The de-facto standard is VIM, so to try it out simply type "vim" into the command line to create a new file and lets go. Notice that typing isn't changing anything? yeah, vim has input mode and command mode, and you start in command mode. So hit "i" to switch from command mode to input mode and you can finally start typing, to get back to control mode hit "esc", and to save and quit (from command mode) use ":wq"; to quit immediately without saving use ":q!". Vim is super powerful but this switching thing is annoying and it's not obvious how to use it. The learning curve is steep. There have been books written about using VIM, it's a huge entity unto itself to learn more about VIM try their docs or check out this nice VIM Cheat-sheet.

Lets use something simpler for now: nano. type in "nano" at the command line to open a new file, start typing you're already in input mode, and there's a UI so it tells you what commands are available, but there's much more than meets the eye. To open an existing file use "nano filename.ext" at the command line

Unlike VIM nano doesn't have code-highlighting by default so to set this up you have to edit "/etc/nanorc", so type "nano /etc/nanorc" at the command line the section we're looking for starts on line 240, so hit "ctrl+/" and type "240" hit enter and you'll see a list of nanorc files, erase the # before each one you want code highlight for, then hit "ctrl+x" it prompts you to save changes, hit "Y", then it prompts for the file name just hit "Enter" to keep it the same.

Here's a few nano commands that are useful:

ctrl+k = cut, you can cut out multiple lines by hitting this repeatedly.
ctrl+u = uncut, you can re-insert cutout lines by hitting this repeatedly.
ctrl+/ = goto line #
ctrl+w = search for a word or phrase, there are a few options here, 'M-R' is a regex search, try hitting "esc+r" to use this (M stand for Meta-key, so try the Apple key or Windows key if esc doesn't work).

Nano's UI shows options you can use to translate keystrokes you should know that ^ = ctrl and M = esc.

For more information on nano, read the Nano docs

Moving, Copying, Renaming, and Deleting files:

Sometimes things are in the wrong place, or you don't want to overwrite a file to test out something, so how the heck do you move or copy or rename or delete files!? The commands are mv, cp, and rm.

Moving a file is "mv path/to/file/location/name.ext /path/to/new/location/name.ext" if you're currently in the directory with your file use "mv file.ext /path/to/wherever/your/putting/it/file.ext" you just gotta know where you're moving the file to, to move it up a directory use "mv file.ext ../", multiple files are easy too "mv file1 file2 ~/" would move those files to your home directory.

Copying a file is done with "cp filetocopy.ext newfile.ext" you can also copy the file to a new directory, you can even copy a directory with "cp /dir/to/copy/ ~/new/dir/"

Deleting files can be done with "rm file.ext" you can delete a directory and it's content with "rm -r", and the flag to force a deletion is "-f" but be careful, "rm -rf /" can delete the whole root directory and totally screw up the server. Most platforms and admins protect against this but it's better to be safe than sorry.

Conclusion:

The Command line can be intimidating at first, but don't fear it's power. It can be a very helpful tool. For more information check out http://linuxcommand.org/, TuxFiles' intro to the Linux CLI and Hypexr's Bash Tutorial. You can also add a linux cli to your windows desktop wth cygwin

Simple HTML5 notepad

noreply@blogger.com (Joel Kirchartz) — Sat, 26 Nov 2011 05:43:00 +0000

Here's a little html5 notepad using localStorage. View Demo

line 28 & 30 handle saving and retrieving the localStorage data, It's supported on ie8+ as well as all modern browsers. Works on Android & iPhone too. Lines 32-34 call the save function in 3 different ways to ensure your information is saved automagically (I get a little paranoid like that) Line 5 & lines 20-23 ensure this works on older browsers, but we don't really need most of it so really we could minimize this down to

Which is short enough to be in bookmarklet territory, unfortunately localStorage doesn't work with the local file protocol, the spec says it needs a scheme/host/port to work for security reasons.

Local storage is just too easy NOT to use

Code: Simple JQuery Div Slideshow 2.0

noreply@blogger.com (Joel Kirchartz) — Fri, 18 Nov 2011 05:46:00 +0000

Yes, I promised to update this in July of 2009, so sorry for taking so long. I've been using jQuery Cycle for most of my slideshow needs, but looking at the old code made me throw up in my mouth a little, it's non-standard and probably breaks for some people, I just have to fix it. hit the jump for the full details.

Here's the jsFiddle for it:

This code is a lot cleaner, relies on jQuery a bit more, and no longer uses evil eval's. The HTML is simpler too. You just need to nest slides inside of a container, in this case classed 'slideshow', the code above finds the children of that element (in the code below) and fades them in and out, then sets up the next loop through the child elements there.

This is just a hack, but I hope it's helpful.

jQuery type effect plugin

noreply@blogger.com (Joel Kirchartz) — Tue, 04 Oct 2011 18:28:00 +0000

Let's kick it old-school, with the absolute CLASSIC typewriter effect. I couldn't find a decent jQuery version of this effect that worked, so I pluginified some vintage javascript, checkout the JSFiddle embeded below. Click the play button to see the effect.

One little "bug" here is that I'm not handling any dom elements, so the raw html code is displayed while it's writing, but as soon as it's written the dom handles it as elements, you could pre-parse the html and write the elements wholesale but that's far beyond the scope of this simple solution.

If you wanna see the whole shebang check the jsfiddle at http://jsfiddle.net/JKirchartz/JEpWV/

Better Mobile Redirect

noreply@blogger.com (Joel Kirchartz) — Thu, 22 Sep 2011 01:24:00 +0000

Here is a simple, reusable javascript redirect that uses the Mobile Link Discovery Spec which describes a link tag that tells the browser where to find an Alternate for Hand-Held devices: <link href="< Mobile URI >" media="handheld" rel="alternate">. The script is detecting user-agents, which is "evil" but Not every site needs or wants the whole Responsive Design bundle, and that has it's problems. Sometimes you just gotta redirect, try using the link tag with the script below:

I'm only testing for iPhone, iPad, Android, Blackberry, and WebOs. They run the market right now so I don't feel too bad for leaving out the fray, if you're logging your visitors user agents you can tweak the regex as needed.

Hit the jump for the code for a html test page.

XUIjs for Mobile Development + 2 extensions

noreply@blogger.com (Joel Kirchartz) — Mon, 04 Apr 2011 14:48:00 +0000

I recently stared playing with xui.js it's a really nice library targeted to mobile devices, and it's based on JQuery. I'd really like to stick with jQuery but jQuery Mobile is actually more like jQueryUI for mobile and I'm not into making everything on the mobile web look like native iPhone (because if users wanted that UI they'd buy an iPhone!)

The thing with switching between xui and jQuery is that all the functions aren't there. Fortunately you can extend XUIjs! I was porting Marco van Hylckama Vlieg's Simple jQuery Accordion and needed jQuery's next and is function (I ended up simplifying the code to do without the IS, but it might be useful to you) Here's the extensions:

I ran into a couple problems, mainly that XUI doesn't return elements from it's main function but an object, which affects the this keyword in extensions, but I finally figured it out and now pass the knowledge on to you for free, because I'm awesome. Don't you love me?

Flickr & Github update

noreply@blogger.com (Joel Kirchartz) — Wed, 02 Feb 2011 06:07:00 +0000

I posted some new sets to Flickr and I've got a new project I've been playing with over on Github, here's the run-down.

Flickr Sets:

And my new project is TumblReader, an HTML5 Tumblr dashboard replacement. My primary goals are to add keyboard shortcuts ala Google Reader j/k = previous/next, l = like etc; make it easier to reblog & like without losing your place (a minor annoyance, but still...) and an attempt to improve upon the tumblr queue (it breaks often). It's still in the early stages, but if you want to add to it I'll gladly patch it in...

Python: HTML to CSS

noreply@blogger.com (Joel Kirchartz) — Fri, 19 Nov 2010 22:14:00 +0000

I surely couldn't have been the first to think of this, but wouldn't it be great if you could write your HTML, then convert it to CSS? Yeah, I know they're not really the same, but the CSS has to be attached to something. Why not pull it out and have a skeleton CSS file made for you? This short python script will read in HTML, and spit out all the CSS selectors it can find. I plan on adding this to a larger project, so it's just a funtion and the call. The code is after the jump.

I'm using regex to get rid of everything that ISN'T HTML, then BeautifulSoup to parse the HTML into tags, ids, and classes. I then remove duplicates by converting the list to a set and back, sort the lists, and add the appropriate CSS selector and brackets. Then it writes the CSS to a file. This last line runs the function, the first argument is the input HTML file, and the second is the output CSS file. You'll have to change this to reflect your desired filenames.

I'm sure there are a few things I can do to optimize this, or at least reduce the line count, but I'm new to python so I'll save that for another day. Like I said I plan to add this to a larger project so I'm going to take out the file I/O for that and just feed in strings; but until then, enjoy!

Border Radius Toy

noreply@blogger.com (Joel Kirchartz) — Sun, 03 Oct 2010 17:33:00 +0000

This is my CSS3 Border-Radius Toy, it's kind of a rip-off of a rip-off of BorderRadius.com — which allows you to input the radius for all 4 corners — the primary objective is to help create a box with rounded corners & output the code for it. Unlike BorderRadius.com Border Radius Toy allows you to play with the final shape, changing each parameter in the CSS3 and ultimately creating more complex shapes. It's a simple single-page toy, written with HTML5, CSS3, JQuery & JQueryUI.

The source code is available on GitHub, and you can view it live at http://demos.jkirchartz.com/Border_Radius_Toy.html

Project: Big Island Toyota

noreply@blogger.com (Joel Kirchartz) — Wed, 23 Jun 2010 15:30:00 +0000

Big Island Toyota has always been a little ahead of the curve on social media, They're involved with their community, and they use their website pro-actively. Here are 2 requested projects from them.

Here is the YouTube page from their website. This was made with Coldfusion & JQuery. The Coldfusion parses their YouTube RSS feed, JQuery is used to show each video in a simple LightBox.

They also requested a blog, which I developed with ColdFusion & SQL. The front-end is a standard Content-oriented design, with a contact link & links to share their posts around the web. The Back-end is just as simple to use, it uses the FCKeditor (now renamed CKeditor) for Coldfusion to provide a rich-text editor. There is also an RSS feed for the blog, although I no longer have the access I need to find it.

JQuery Plugin update: Letterpress2

noreply@blogger.com (Joel Kirchartz) — Mon, 24 May 2010 19:56:00 +0000

A While back I coded a plugin to apply the letterpress effect, since then I've decided that css's text-shadow property was a better way to go, but some browsers don't support text-shadow *cough* IE *cough* this is a slight mod to check for IE & apply the letterpress plugin to them, and use text-shadow on browsers that support it.

Here's what it looks like:

and this is the code needed for this example:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="jquery.letterpress2.js" type="text/javascript"></script>
<style>
.all {
font-family:Helvetica, Arial, Sans;
}
h1 {
background:#2bf;
}
h2 {
background:#f2b;
}
h3 {
background:#b2f;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("h1").letterpress({color: '#000', highlight: '#0ff', topOffset: '1px', leftOffset: '1px'});
$("h2").letterpress({color: '#000', highlight: '#f0f', leftOffset: '1px'});
$("h3").letterpress({color: '#000', highlight: '#f6f'});
$("h4").letterpress({topOffset: '2px', leftOffset: '2px'});
});
</script>
<div class="all">
<h1>Lorem ipsum dolor sit amet</h1>
<h2>Lorem ipsum dolor sit amet</h2>
<h3>Lorem ipsum dolor sit amet</h3>
<h4>Lorem ipsum dolor sit amet</h4>
</div>

This is a CSS / Graphic effect that usually requires a bit of planning and is kind-of hard to throw into dynamic content, or content you have no control over the markup of. No extra tags, or css required. No duplicate text needed.

Here's the basics:

$(".letterpress").letterpress();

You can, however, edit the styles easily with these 5 options:

color, highlight, blur, topOffset, leftOffset

note: The blur will only be applied if text-shadow is being used.

These attributes can be implemented like this:

$(".letterpress").letterpress({color: '#000', highlight: '#0ff', topOffset: '1px', blur: '1px', leftOffset: '1px'});

Download the JS here

Project: Baierl Race 2 Vegas

noreply@blogger.com (Joel Kirchartz) — Tue, 11 May 2010 12:48:00 +0000

Baierl Automotive and MarkIT Group developed the idea for a Youtube Video contest, with a raffle for FaceBook fans. The outline was to have a customer from a mailing list become a fan on facebook, and upload a home-made video to enter for a chance to win a trip for 2 to Las Vegas. During the course of this project the requirements and design changed many times, as well as the deadline. Eventually the contest became a raffle for 2 tickets to Vegas, a video contest to win 2 tickets to Vegas, and it was opened to the public. It was developed with ColdFusion, Javascript, and JQuery & 1kb Grid in the course of one week, with additional tweaks each time the requirements, contest, and design changed. See for yourself at baierlrace2vegas.com

Project: Automotive Search Tool & API

noreply@blogger.com (Joel Kirchartz) — Thu, 22 Apr 2010 13:57:00 +0000

This was an interesting project, that had a few iterations before it's current state. Originally when the inventory database was imported, an XML file would be generated to fill in the select boxes, but it took up a good bit of time and drive space. Now this works with a simple API that I created to return JSON to populate dependent select boxes. Using the API saves tons of time and disc space. This was all done with the power of JQuery. You can try it yourself at wrightcars.com

Project: Automotive Mobile site template.

noreply@blogger.com (Joel Kirchartz) — Thu, 22 Apr 2010 13:34:00 +0000

Here is a template I created for use on car dealership mobile sites. It's a minimalist design, made to work on the widest variety of software/firmware possible. This template was developed to launch quickly, if the dealer had an existing site, it was simply a the flick of the switch to launch. To maximize compatibility there is no JavaScript used on this, since only a handful of smartphones support it. Every step through this project was fully optimized for load time on non-3G networks. As of today this site is live and can be found at findlaytoyota.com/mobile, or by visiting findlaytoyota.com from your mobile phone.

New Plugin: Clickify

noreply@blogger.com (Joel Kirchartz) — Thu, 01 Apr 2010 20:44:00 +0000

Here's a quickly little plugin' tool, that I know people will find very useful. It's called Clickify, and it's an answer to a problem a lot of people are concerned about. Too often has somebody asked "How will users know where to click?" now we have your answer, Clickify automatically adds the text "(click here!)" to every "hyperlink" within a page, so that there will be no confusion as to where to click to visit a link.

I'm sure that people are actually very confused whenever text becomes blue and underlined, even more so when it changes their cursor to a hand. These new "Links" as their colloquially called are so new and bewildering that some users obviously need some assistance in understanding them.

Here's the source code:

(function($) {
$.fn.clickify = function(){
 $("a[href]").each(function(){
  $(this).append(" _{(click here!)}") 
 });
}
})(jQuery);

And it's simple to use! Just add <script>$(function(){$.clickify()});</script> to your page and you're good to go!

for more on the subject visit:
http://www.goodusability.co.uk/2009/01/dont-say-click-here-on-link-text/

Jpeg EXIF Metadata Removal

noreply@blogger.com (Joel Kirchartz) — Tue, 29 Dec 2009 17:11:00 +0000

Image Optimization is a fun game, trying to get just the right compression ratio to balance file size and appearance. There are a ton of tricks out there, but as a Photoshop user you generally end up with some pretty big files that are just small images. Today I had an icon, 71x30px that was 40.1kb after I resized it from a larger jpeg that was 38kb.

Where does all this extra data come from? Metadata. Cameras throw it in, flickr reads it and shows the setting your Cannon used to get that photo. Photoshop throws some junk in too. The real evil is thumbnails, Cat Schwartz had a bit of a scandal 6 years ago with thumbnails of un-cropped photos in the metadata that were not suitable for work. These thumbnails can almost DOUBLE your file size. It's just part and parcel of EXIF (The Exchangeable Image File format) standard, a bunch of useful data that takes up a bunch of space, and isn't important to the end user.

How do you get rid of EXIF? On OSX you could use Image Optim, which is totally sweet, if you own a mac. On a PC you run into a bunch of poorly written, virus laden, scam-ware programs that may or may not work. Fortunately for us, there's an Open Source community. So we'll do this with some FOSS.

Create a folder for all your image files (which you should do anyhow)
download JHEAD to that folder (jhead.exe | main page)
Create .BAT file (plain text renamed to .BAT) containing
```
jhead.exe -purejpg *
```
Run it.

What this does is strip out any EXIF and other metadata in the files in that folder. Just does away with anything that isn't purely essential for a jpeg to be an image, thus saving quite a bit on file size, bandwidth, and hopefully some embarrassment.

JQuery Extension: fixPng

noreply@blogger.com (Joel Kirchartz) — Thu, 17 Sep 2009 18:15:00 +0000

PNGs and IE6, sounds like a recipe for trouble. Well you could always use the lovely DD_belatedPNG but to call it you need to add a class to each element containing a png. Adding a class is fine unless you have user-generated content & no control over the back end, and they like to use semi-transparent PNGs. So today I cobbled together a little jQuery extention to search through and find all PNGs (in images, and backgrounds) and add a class to their container, then call DD_belatedPNG... probably not the most elegant solution, but a solution none the less.

$.extend({
/* Usage:
* $.fixPng();
*/
fixPng: function(){
if($.browser.msie && $.browser.version=="6.0"){
if(typeof DD_belatedPNG.fix == "function"){
var imgsrc, styleS;
$("img").each(function(){
imgsrc = $(this).attr('src');
if(imgsrc.split(".")[1] == "png"){
$(this).addClass("fixPng");
}});
$("*").each(function(){
styleS = $(this).css("background-image");
if(styleS != "none"){
var tmpS = styleS.substring(styleS.length-4,styleS.length-1);
if(tmpS == "png"){
$(this).addClass("fixPng");
}}});
}
DD_belatedPNG.fix(".fixPng");
} 
}
});

jQuery Plugin: Fish-Menu

noreply@blogger.com (Joel Kirchartz) — Wed, 09 Sep 2009 22:17:00 +0000

Here we go, at it again... with a new plugin called fish-menu... heavily based on jquery.ui.potato.menu by Makoto_KW

I've modified the code in many ways, adding a few features such as:

hoverIntent Support
Drop-down textual marker, such as »
Miniaturization, helps speed download
No jQuery UI, helps reduce HTTP requests

Use is as easy as the original potato menu, by simply using nested unordered lists, like this:

<ul id="menu1">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li>
<a href="#">Item 3</a>
<ul>
<li><a href="#">Sub Item A</a></li>
<li><a href="#">Sub Item B</a></li>
</ul>
</li>
</ul>

And then throwing some javascript/css at it like this:

<link rel="stylesheet" type="text/css" href="jquery.fish.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.hoverIntent.min.js" type="text/javascript"></script>
<script src="js/jquery.fish.menu.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#menu1').fishMenu();
});
</script>

and Ka-Pow, drop-down jQuery menus in 2.66KB (minified) or 3.22KB (full-sized)

DOWNLOAD: FULL MINI CSS

I have noticed a bug in ie6 (it exists in the original potato menu too) and I can't really figure it out, the li's in the sub-nav appear to float left, if anybody has any insight let me know (it's not the pseudo-element bug)

Hacks: FontBurner

noreply@blogger.com (Joel Kirchartz) — Thu, 30 Jul 2009 16:42:00 +0000

As you might have noticed I've got a couple crazy "non-standard" fonts here on my blog from fontburner.com.

FontBurner is a great tool for hosting sIFR (scalable inman flash replacement) flash files & javascript to simply replace fonts & text with a small flash file that displays it in the font of your choice. Currently fontburner has a limited set of options regarding color/spacing etc. but with a little ingenuity one is able to add this functionality themselves.

First let us look at how FontBurner works. When you goto their site choose fonts, then which style of font to use. Once you've chosen a style you can easily navigate through all the different type-faces, right below each example is a 'get the code' button, which will give you this:

<link rel="stylesheet" href="http://www.fontburner.com/css/fontburner.css" type="text/css" media="screen" /> <link rel="stylesheet" href="http://www.fontburner.com/css/fontburner_print.css" type="text/css" media="print" /> <script src="http://www.fontburner.com/fontburner.js" type="text/javascript"></script> <script type="text/javascript" src="http://www.fontburner.com/js/black/high_strung.php"></script> <!-- sIFR fonts delivered by www.fontburner.com -->

Now you copy that code onto your page & it will replace h1, h2, h3 tags and any dom element with a class or ID the same as the font-name.

Ok, so now let's do a little disection & investigation...

<link rel="stylesheet" href="http://www.fontburner.com/css/fontburner.css" type="text/css" media="screen">

Basically does the CSS image-replacement technique

<link rel="stylesheet" href="http://www.fontburner.com/css/fontburner_print.css" type="text/css" media="print">

Undoes the CSS image-replacement technique for print-only

&ltscript src="http://www.fontburner.com/fontburner.js" type="text/javascript"></script>

The sIFR code itself

<script type="text/javascript" src="http://www.fontburner.com/js/black/high_strung.php"></script>

The motherload of hackability, this is where we will have our fun.

Attribution, let's leave this in there because they deserve some credit.

Alright let's see what item #4 has in there:

var high_strung = {
src: 'http://www.fontburner.com/flash/high_strung.swf'
};
sIFR.prefetch(high_strung);
sIFR.delayCSS  = true;
sIFR.activate(high_strung);

sIFR.replace(high_strung, {
selector: 'h1, h2, h3,  .high_strung, #high_strung'
,css: [
'.sIFR-root {color:#000000;}'
,'a {color:#000000; text-decoration: underline; font-weight:normal; }'
,'a:link {color:#000000; text-decoration: underline; font-weight:normal; }'
,'a:hover {color:#000000; text-decoration: underline; font-weight:normal; }'
,'a:visited { color: #000000; text-decoration: underline }'
,'em { color: #000000; font-style:normal; font-weight:normal; }'
,'strong { color: #000000; font-weight:normal; font-style:normal; }'
]
,offsetTop:0
,marginBottom: 0
,verticalSpacing: 0
,wmode: 'transparent'
});

Hey look, CSS... this is EXACTLY what we want, and editing this script will give us much more control & options for fontburner. I suggest removing the h1, h2, and h3 tags from the selectors string in line 9 or this code, you probably shouldn't put CSS on a tag itself unless it's absolutely neccessary. Now lets move down to that lovely CSS... here you can change the font color, text-decoration, underling, weight, but there is alot more you can do with CSS. So here you can text-align and anything else.

Now you have some code that looks like this:

<link rel="stylesheet" href="http://www.fontburner.com/css/fontburner.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://www.fontburner.com/css/fontburner_print.css" type="text/css" media="print" />
<script src="http://www.fontburner.com/fontburner.js" type="text/javascript"></script>
<!-- sIFR fonts delivered by www.fontburner.com -->
<script type="text/javascript">
var high_strung = {
src: 'http://www.fontburner.com/flash/high_strung.swf'
};
sIFR.prefetch(high_strung);
sIFR.delayCSS  = true;
sIFR.activate(high_strung);
sIFR.replace(high_strung, {
selector: '.high_strung, #high_strung'
,css: [
'.sIFR-root {color:#F0E68C;text-align:center}'
,'a {color:#F0E68C; text-decoration: underline; font-weight:normal; text-align:center}'
,'a:link {color:#F0E68C; text-decoration: underline; font-weight:normal; text-align:center}'
,'a:hover {color:#F0E68C; text-decoration: underline; font-weight:normal; text-align:center}'
,'a:visited { color: #F0E68C; text-decoration: underline;text-align:center }'
,'em { color: #F0E68C; font-style:normal; font-weight:normal; text-align:center}'
,'strong { color: #F0E68C; font-weight:normal; font-style:normal;text-align:center }'
]
,offsetTop:0
,marginBottom: 0
,verticalSpacing: 0
,wmode: 'transparent'
});
</script>

And you will have khaki-colour center-aligned text with a non-standard font.

Tips: Walk-on Characters & Green Screen

noreply@blogger.com (Joel Kirchartz) — Wed, 15 Jul 2009 15:51:00 +0000

Keying -- the process used to remove green-screen -- is a relatively simple process now-a-days, pretty simply pick the shade of green, and tweak a few numbers and you're done; but sometimes there are issues...

A Walk-on Character project just came across my desk, a spokes-person shot on green-screen to say the mission statement of the site. But there's a problem, a big problem, the source footage is terrible, the spokes-person is casting 4-6 different shadows depending on where they're standing, and to make matters worse the video is pixelated, and blurry.

These issues individually cause problems when keying, combined the effects are HUGE, mainly because the system gets confused as to where the line between the subject and the green-screen actually are, this can be easily avoided by following a few simple guidelines.

Camera
This is perhaps the most important thing to a good green-screen shoot, you cannot pull out your old super-8 and get decent looking video to put online, you absolutely MUST use a professional or pro-sumer grade camera, so anything on sale at the local big box store is basically off-limits.
Lighting
Simply put, lighting is one of the most important things in videography, and for green-screen it's relatively easy. Just use the Layer Method. Each subject & set of lights is a different layer (yes the green-screen counts as a subject) Here is an image of the most lighting set-up, just be sure to have no possibility of shadows ANYWHERE.
Camera Setup
While setting up the camera make sure you're positioned dead-on to the subject, and that the entire background is green-screen (some gaffers tape is exceptable, if it's blue or green) Make sure there are no lighting fixtures or wires viewable anywhere.
White-balance your camera with a big matte-finished white card where your subject will be, to ensure that nothing turns out tinted funny.
Wardrobe & Make-up
You're going to need to pay attention to both of these very carefully if you're going to put somebody infront of a greenscreen & expect them to look good coming out of the other side. Here are some very important tips:
- No pin-stripes or similar patterns (They will produce a Moire Pattern)
- No Green (on greenscreen) No Blue (on bluescreen) not even in make-up
- Nothing Shiny (Apply appropriate ammounts of powder to all exposed skin & in
the case of a whole-body shot, be wary of watches, glasses, jewelry, shoes etc.)
Reflections will cause big missing chunks of the subject.
Always ask your talent to bring a few options of outfits, and if needed to wear contact lenses or memorize the script.

With these simple steps you will get a high-quality source video to give to the editor, and they will be able to key out the background perfectly leaving you with a beautiful walk-on character for your site.

For a more detailed explanation (aimed towords videographers) read Down and Dirty Green Screen by Walter Graff

Before I sign-off, here's another tip: If you're going to use a walk-on character to pop up when somebody launches your page, the video should be under 1 minute long so that it will load quickly when somebody visits the site.

JQuery Plugin: Letterpresser

noreply@blogger.com (Joel Kirchartz) — Tue, 14 Jul 2009 19:39:00 +0000

This plugin adds the Letterpress style to any assigned tag.

Here's what it looks like:

and this is the code needed for this example:


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="jquery.letterpress.js" type="text/javascript"></script>
<style>
.all {
font-family:Helvetica, Arial, Sans;
}
h1 {
background:#2bf;
}
h2 {
background:#f2b;
}
h3 {
background:#b2f;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
 $("h1").letterpress({color: '#000', highlight: '#0ff', topOffset: '1px', leftOffset: '1px'});
 $("h2").letterpress({color: '#000', highlight: '#f0f', leftOffset: '1px'});
 $("h3").letterpress({color: '#000', highlight: '#f6f'});
 $("h4").letterpress({topOffset: '2px', leftOffset: '2px'});
});
</script>
<div class="all">
<h1>Lorem ipsum dolor sit amet</h1>
<h2>Lorem ipsum dolor sit amet</h2>
<h3>Lorem ipsum dolor sit amet</h3>
<h4>Lorem ipsum dolor sit amet</h4>
</div>

$(".letterpress").letterpress();

You can, however, edit the styles easily with these 4 options:

color, highlight, topOffset, leftOffset

Which can be implemented as such:

$(".letterpress").letterpress({color: '#000', highlight: '#0ff', topOffset: '1px', leftOffset: '1px'});

Download the JS here

Code: Simple JQuery Div Slideshow

noreply@blogger.com (Joel Kirchartz) — Thu, 02 Jul 2009 16:29:00 +0000

UPDATE: This code has been updated, please see Simple JQuery Div Slideshow 2.0

Here's a super-simple DIV slideshow with JQuery based on one for prototype/scriptaculous, it can be found here. The beauty is that it can contain anything a div can. I've been using it for just a single image link, but you can put anything in there.

Here's the HTML:

<div id="slideshow1" class="slide"><div>frame 1</div></div>
<div id="slideshow2" class="slide" style="display: none"><div>frame 2</div></div>
<div id="slideshow3" class="slide" style="display: none"><div>frame 3</div></div>
<div id="slideshow4" class="slide" style="display: none"><div>frame 4</div></div>

And the Javascript:

s_ss(1, 4, 5000);
// usage: s_ss(first frame, end frame, delay time);

function s_ss(s_f, e_f, delay) {
 setTimeout(s_s(s_f,s_f,e_f, delay), delay);
}
function s_s(f, s_f, e_f, delay) {
 return (function() {
 $('#slideshow' + f).fadeOut();
 if (f == e_f) { f = s_f; } else { f = f + 1; }
 setTimeout("$('#slideshow" + f + "').fadeIn();", 850);
 setTimeout(s_s(f, s_f, e_f, delay), delay + 850);
 })
}

I'm thinking about maybe making this a real jQuery Plugin, but like I said, I'm just switching from Prototype/Scriptaculous to jQuery; so it may be a while.

UPDATE: This code has been updated, please see Simple JQuery Div Slideshow 2.0

Opinion: Protaculous to JQuery

noreply@blogger.com (Joel Kirchartz) — Fri, 19 Jun 2009 17:52:00 +0000

Last night I went to my local CFUG meeting, to hear Adam Lehman from Adobe talk about the new Flash Platform & Coldfusion Products. A lot of it was mouth-watering displays of computational power and speed optimization on behalf of the server & speedier compile times in the new Flash Builder.

He also talked about how Coldfusion is continuing with ExtJS, which to use with Prototype/Scriptaculous you'd need to completely rewrite your code. BUT with ExtJS works with JQuery out of the box, and that's probably a good thing.

For a while I've been a Prototype/Scriptaculous lover, and also an Adobe fan. To see Adobe supporting JQuery kinda hurts, but I'm starting to think that adobe has the right idea.

JQuery is 'packable' meaning that the 120Kb library can be compacted down to 56Kb, unlike Prototype whose size is 128Kb, and cannot be packed any smaller. Prototype also requires Scriptaculous for effects (another 4Kb) pushing the required file-size to 132Kb, which is a lot for some of the things I'm doing (Which is basically Modal Windows, Slide-shows & Accordions.)

So why was I so adamant about Protaculous? Mostly because I took the trouble to learn how to use it well. But the Disadvantages are starting to out-weight the learning curve.

Time to start Re-Writing Code.

Project: Medrespond - Cancer Clinical Trials

noreply@blogger.com (Joel Kirchartz) — Thu, 18 Jun 2009 17:29:00 +0000

I worked for MedRespond for a short time; During which I created all the broadcast-graphics, and videos for their Cancer Clinical Trials Project for UPMC's

My task was to Record, Edit, and add Graphics to hundreds of videos to be used with their AI-based question & answer engine.

Video was recorded on green-screen with a variety of actors, celebrities, patients, and doctors. Each video had to be edited together from several takes, and entered into a database containing a transcript and link to the video.

My time spent working on this project was quite enjoyable, but also daunting because of the sheer volume of videos to be created (over 1,000) and the detail put into most of the edits.

Programs Used:
Adobe Premier CS3

Adobe Photoshop CS3

Adobe After Effects CS3

Adobe Flash CS3

Sorenson Spark