CSS

Places - a location information system using Drupal 7 and Google Maps API v3

"Places" is a Drupal7 site that shows all the locations in it either as a list or on a map.

The site can be viewed at www.netnik.com/places.

An HTML5 audio keyboard

After playing with a couple of keyboard and drum apps on the iPhone and being underwhelmed, I set out to see what kind of keyboard I could make in HTML5 and its new audio features.

A mobile web app using Ajax and localStorage

Sometimes one gets so involved in a project that one forgets to write about it. That's been me these past couple of weeks, but hopefully this post will rectify that with insightful analysis. The only thing worse than documentation is no documentation.

Athenites mobile site

screenshot

Athenites is optimized for use with smartphones. It's main feauture is a directory of live music venues in downtown Athens, Georgia. The page for each venue provides general information as well as their twitter and facebook status updates, and a Google maps widget.

You can see Athenites at athenites.com.

Mobile styling

screenshot

Click here to see the demo.

When writing code I always try to keep things simple and with smartphones, this is a really good idea. Compared to a desktop or laptop, a smartphone is a puny thing: much less screen area, and less bandwidth and processing power. Good reasons to keep those HTML and CSS files as small as possible.

Making one page look different in Drupal

Here is a demo page showing how to make one page a a Drupal site look different from the rest. One way to do this would be to add page-specific css to your style sheet (i.e. style.css in your theme's folder), but I don't want to add bloat to my theme just for one page.

Views displayed in an accordion

This page features an accordion which contains 3 Views, each of which displays a list of articles tagged with the taxonomy terms "Drupal," "JQuery," and "CSS." (See the accordion at the bottom of the page.)

Touchscreens and Hover

One issue I haven't seen discussed much is the impact of touchscreens on how we design web pages. The most obvious issue is that for an iPad or iPhone user there is no such thing as "hover" or "mouseover" - in software-speak, touchscreens do not support mouseover.

Photo Tagging with CSS

Here's a little demonstration of photo tagging ala facebook, flickr, etc. done with just CSS. When you hover over a person in the photo, a red outline appears around the person and a grey box pops up displaying information about him.

Drupal in-page jquery demo

This page is an experiment in embedding code in a single Drupal page. Usually, in Drupal you would put jquery code in a script file in the theme folder and declare it in the theme's .info file, but using this in-page method will allow for quick-and-dirty demo pages like this one.

Syndicate content