Feed:Article

From Tech Elephant

Editorial:Another experiment with jQuery

Jonathan, 19:12, August 4, 2007

Of course I wouldn't be writing about my personal art portfolio site here without some tie into technology, but I have an excuse: I decided to test some of the additional functionality of jQuery and a couple different plugins.

My art site has not been touch since late 2003/early-2004, so it already needed a serious face-lift. I don't want to come off as an expert in web design, but I think the new design is pretty decent. Besides putting a new skin on the site, I decided to add some flare to the gallery interaction.

Since I've recently been touting jQuery at work and applying it to the new Homescape site at work and my experiment in news aggregation, I figured I should apply something different, but simple, to the site. The obvious place to apply any such flare is on the gallery / portfolio section of the site.


To put a bit more focus on each individual piece, I used the jQuery thickbox plugin to load each piece's gallery page in a div/overlay. The beauty of how I applied this plugin is that if you don't support this functionality, or if you happen to be a search engine bot/crawler, the page will load in a normal http request (e.g., a full page load with the content on a separate html page).

This didn't require me to have separate html/page logic, because I'm using a customized version of the Smarty PHP Template Engine . You may be wondering why I had to customize the templating engine: simply put, I didn't want to do a conditional check on each page to determine if it was requested via AJAX . That is all handled within an extended version of the Smarty class (php object)... Maybe I should stop here and dedicate an article to this in the future?

To wrap things up, my new art portfolio site is simpler to use, with a bit of flare :) [...Editorial:Another experiment with jQuery...]

(Editorial:Another experiment with jQuery)

It has been a while since I last posted anything and, I'm assuming, you may be wondering why.

Well, part of the reason is that my day-job has taken over my life for the past month -- gotta love projects with a 2 month product lifecycle ;) The other reason is that I've been doing some other experiments on my off-time. (Yes, being a nerd doesn't stop when I clock-out).

One of these such experiments I am "officially" announcing today: News Elephant: my experiment in news aggregation. Yes, news aggregation has been done before and it's not really "sexy" anymore, with sites like digg and News Vine.


By developing and launching this site, I'm simply trying to do the following:

  • Build a simple/lightweight news aggregator (obviously)
  • Incorporate my research in new Javascript frameworks
  • Understand the limitations of AJAX/JSON resultset navigation
  • Have a bit of fun :D

One thing to note: News Elephant was privately launched way back in August and (kind of) lost my attention for a while when I switched hosting providers.

That early prototype used the Scriptaculous and Prototype javascript frameworks, both of which I now can say are bloatware. Last weekend, I decided it was time to give News Elephant a makeover and incorporate my newly found love of jQuery. What a difference using a lightweight javascript framework made... life is much easier now ;)

[edit] Notes

(Editorial:News Elephant: My Experiment in News Aggregation)

Moments ago, Apple unveiled what has been a rumor for the past 2 years or so: the next generation mobile phone called iPhone. Despite the trademark implications by Cisco's iPhone, apple paved the way for what is arguably the coolest, sexiest, most powerful mobile device that's ever come to market.

Here is a brief specification list:

  • 3 Devices in 1: widescreen ipod, mobile phone, and internet communicator
  • Runs Mac OS X (complete with Core Graphics, Audio, Animation, etc.)
  • 160 pixels per inch, 3.5" display
  • Ultraslim: 11/16" thin
  • Full, wide screen & portrait, auto-switching, touch-screen display/interface
  • Headphone jack, Sim Card expansion, Microphone, etc.
  • Proximity Sensor: when you bring it to ear, it automatically turns off display and sound
  • Ambient Light Sensor
  • Quad band, GSM+EDGE phone
  • Bluetooth, WiFi (802.11x)
  • Visual voicemail
  • Safari web browser built-in for mobile internet browsing
  • Google maps
  • Widgets (same concept as Mac OS X's widgets
  • Syncs with iTunes -- exactly like iPod interaction (calendar, contact, music, movie, photo sync)
  • Free Yahoo imap mail account for each phone user with "push imap" capability -- same as blackberry

I will provide a full review later this evening.


Update:

Here are the prices, which seem a little pricey at first glance, but I think it's worth it for the amount of features it has (it even has a built-in 2 megapixel digital camera/camcorder): $499* for 4GB $599* for 8GB

To put that in perspective, here are the iPod prices:

  • $149 for 2GB nano
  • $199 for 4GB nano
  • $249 for 8GB nano

Compare the prices to other "Smartphones":

  • $449.99* for Cingular's 8525 Pocket PC
  • $499.99* for Palm's Treo 750
  • $299.99* for Palm's Treo 680
  • $299.99* for Samsung's Blackjack
  • $249.99* for BlackBerry's Pearl
  • $199.99* for Nokia's E62


It's only being offered through Cingular -- a reason for me to switch! ;) [...Editorial:Apple unveils next generation mobile phone (a.k.a iPhone)...]

(Editorial:Apple unveils next generation mobile phone (a.k.a iPhone))

The NFB vs. Target law suit was brought to my attention this morning in a company email.

It seems this case is (finally) opening the eyes of the corporate world to the broader spectrum of Internet users and their needs.

[edit] Law suite?

Are you finding yourself panicked by the (sudden) need to analyze your site's accessibility?

Don't brush this aside as a problem for large consumer-centric sites: disabled people use every aspect of the web and you should want to make their Internet experience equal to that of the rest of the population.


[edit] Quick tips for making your site accessible

  • Have every employee, not just your designers, producers, and developers, read and understand the WCAG of the W3C.
    • Use this as a basis for your company's Accessibility initiative.
    • Getting everyone in your company on board will help your Accessibility initiative and will create an awareness of the various usability problems your site needs to address.
  • Test your site by using a text-only browser.
    • Screen readers "real aloud" the text on your web site to assist blind users; viewing a text-only version of your site will help you to understand how your site will be presented to blind users.
    • Are you able to easily find everything that was presented using your graphical navigation?
    • Does your site still flow without the visual “wow” of your graphics?
    • If you are a retailer, were you able to understand what your products would look like without the associated photo? Maybe you need to add relevant product descriptions to the product photos (alt text) or increase the quality of your product description page's text.
  • Turn off your browser's Javascript capabilities.

(Editorial:Accessibility, the law, and you. How to make your site 100% accessible.)

As someone discovered and posted on digg, it appears Google is testing a new type of advertising channel via their Google Video site by incorporating Adsense video ads within the video itself. The video that appears to be (one of) the first videos, with said inline advertising, is an episode of the "Charlie Rose Show."

While playing the video, the timeline shows two blue squares that indicate where the ads will be played. Once the viewer approaches these designated points, the video jumps to an advertisement powered by Google's Adsense program -- complete with a text overlay containing the Advertisement "slogan" and text link to the advertisers opt-in or product page.


So, I feel the big question is: what does this mean for users? Personally, the user-experience is not the best at all: the ads appear to be placed at random and fade in/out at inoppurtune times, which, in this case, cut-off the announcer introducing the guest (for the first ad) -- I didn't even bother to wait for the rest of the show to buffer, as I was completely turned-off by this absurd attempt at forcing me to view an advertisement. Simply put: these ads will not perform if people feel they are interrupting the video they are watching.


Imagine this occuring during the climax of a thriller: 'And the killer is [fade-out] Put more pep in your step. Viagara [fade-in] Professor Green...' -- what a spoiler!


Enough ranting, here's what I like about this whole thing: at least Google is experimenting with inline Adsense video ads. Let's face it, the traditional text/banner-ad wrap-around just doesn't work for a video site. Who is actually paying any attention to any sort of advertisement outside the prime video spot? Not me, that's for sure [...Editorial:Google Video testing Adsense within video content...]

(Editorial:Google Video testing Adsense within video content)