Crystal's Adventures in Webdev Land » html

Myers Listing Syndication

Crys — Thu, 06 Jan 2011 23:00:12 +0000

Myers Listings Syndication screen

One of the features in Myers AgentCenter/OriginatorNetwork that I worked on the interface for is the Listing Syndication product. The challenge with this interface was to make it easy for non-technical people to, not just use within the confines of AgentCenter, but for them to take their listings and use it in places that don’t allow direct syndication, such as Craigslist (which specifically prohibits any automated submissions). The solution to this was to take each of the four different layouts for listings within our system and convert them to Craigslist-friendly html, ready to be simply pasted from our application:

Myers Listings Syndication Get HTML dialog screen

Besides the usual “change color on hover,” “sort by heading” sorts of interaction you expect from a records list table, we needed to denote which listings lacked information required by the sites we syndicate to, so we added a grayed-out style for those records with an alert that tells the user what’s missing and offers them a link back to put the information in. I initially designed this table to allow inline editing for that information but that feature was cut in favor of the simple link.

Teaching HTML as a Second Language (HSL)

Crys — Thu, 11 Jun 2009 16:43:31 +0000

…is hard.

A major project I’m doing right now at work involves teaching HTML/CSS and (and probably Javascript) to an audience of mixed knowledge-levels.

Now, I’ve got a lot of experience explaining things in context and answering questions for people of different levels of computer literacy. And I used to tutor students in Math, Science, English and other languages, and I taught Art privately for awhile. So no problem, right?

Trying to condense an entire introductory class into a couple hours and make it both appropriate AND useful to all different skill levels and then use it to contrast against the html/css/javascript being written by a tool provided by a vendor? Ouch.

I’m thinking that it might be best approached as exactly what it is: a foreign language. It has its own alphabet. Its words are elements, and it most definitely has its own rules of grammar. The doctype tells a browser what dialect you’re speaking in (html and xhtml are about as different as American and Britsh English, for instance).

View Javascript-Generated Code in Internet Explorer

Crys — Tue, 26 May 2009 16:23:42 +0000

If you’re using the Web Developer Add-on in Firefox, you are probably already familiar with the “View Generated Source” option (Web Developer > View Source > View Generated Source) for use in debugging code that is manipulated by javascript. But what do you do in Internet Explorer, where no such option exists?

Here’s my solution:

1) Go to the page whose generated source you want to view. Let it load in its entirety.

2) Put this in the address bar (broken to two lines to fit in my page’s width. Should be all on one line with no spaces for browser):
javascript:'

'+window.document.body.<br />
parentNode.outerHTML+''

Your page will be replaced with the current state of the DOM, as Explorer sees it. xmp is a deprecated html tag that treats all the characters between the start and end tag as text instead of reading it as html. Since you can run javascript from the address bar, you can just take the whole page, put it between xmp tags, and spit it back out again. This is especially useful if you’re using browser-sniffing js to serve different js code to different browsers, because you otherwise would be unable to see the js in action in IE.

Note that this only works in Explorer, but that’s ok. If you want to see it in Firefox, it’s built right into the Web Developer’s Toolbar, or you can use innerHTML instead of outerHTML to get a similar output. The Developer Toolbar for Explorer is less reliable for viewing generated content; my experience is that it tends to get caught on a cached version of the DOM, so this trick is invaluable when you want to see the same page before and after events on the page have changed the DOM.

Keepers of Stromgarde

Crys — Fri, 22 Aug 2008 00:11:18 +0000

the Keepers of Stromgarde‘s site has gone through several iterations, on multiple versions of phpbb and the CMS MX-Publisher. I was responsible for two of them, from initial concept through custom theme. I also created the guild’s logo.

Summer 2008

July 2009

Logo

Resume – Paul Lathrop

Crys — Sat, 05 May 2007 21:28:11 +0000

Visit Site: Paul Lathrop’s Resume

Resume designs should have personality, but the design should never get in the way of telling the person’s story. For Paul, I knew that I needed something typographically simple that could get across the practical and efficient side of his work, but that was a little playful and conveyed just how vibrant he is as a person. This particular shade of red, as a background, I chose because it’s solid and very active, but not so blindingly red that it detracts from the most important part of the page: the text. For the font I used the most basic Arial/Helvetica/san-serif font stack, and stuck to a single font stack throughout the page (except the header graphic). This generates an attractive screen-viewed page that focuses on Paul’s work experience without being boring (because Paul is anything but boring), and leaves a clean, minimalist print version.

Schroeder Bros. Construction, Inc.

Crys — Fri, 13 Apr 2007 17:06:17 +0000

Schroeder Bros. Construction Inc.

This is one of my favorite designs. They were great to work with and they made it really easy to make the site for them. They do amazing work and gave me excellent photos to work from. If I was building a house, I’d want them to do it — and I’m not just saying that because they were clients. Go take a look at some of the gorgeous woodwork in their gallery.

Fixed width site with repeating background. All of the textures used in the site are sampled from client-supplied photos from their homes, including the background/bracketing texture. The site has been redesigned since my work on it, but they continue to use the banners I created for them:

Precision Screw Thread Corp.

Crys — Fri, 12 Jan 2007 18:18:34 +0000

The initial landing page for the site was conceived as an abstracted display panel from one of the threading machines and evolved into what you see on the page now. We wanted to showcase the short movie but avoid the typical “trash splash” intro that trips up a lot of sites. This display panel instead brings together the site’s navigation and news from the company blog to make it easy for users to get where they want to go on the site (I was outvoted on making the movie start playing immediately. Sorry visitors, you’ll have to hit stop instead of start).

Visit Site: Precision Screw Thread, Inc.

The internal pages carry through the theme and the navigation from the intro page. We wanted to add a little motion so I animated the starburst behind the logo in the upper left so that it glows and rotates on mouseover.

Lithograhics.com

Crys — Fri, 28 Oct 2005 13:50:45 +0000

Lithographics, Inc. – Quality Printing, Superior Production

The brief for Lithographics included a small book that they print and use for promotions and my task was to keep the website in line with that book while still giving them a dynamic — in both design and technical terms — site that would stand out from the competition and convey the quality of their print work despite being a non-print medium.

I wrote all the code and markup for this site, with the exception of the reference desk, which I heavily modified from an application written in-house by another programmer at the company, and I created all the banner ads using single-frame cel animation techniques in Photoshop and ImageReady. I also converted all the photos from press-ready to web-ready with an eye to making them look the way they looked after coming off the press, rather than just making them look like digital photos.

Each section of the site had its own photo. Here are mockups of two of those other two sections:

Banners: