RSS
 

Archive for the ‘Websites’ Category

Latest work – Internal Kiosk Site

27 Jan

I finally have something really cool to show from my job. We have a client who wanted a “Kiosk” in their rental office that guests could browse through the various units they have available. It did not need to do anything that different than our normal web work….choose arrival date, number of nights, number of guests, etc. The challenge was how to do it all with JUST a touch screen for input. The “kiosk” was going to be one of the new “all-in-one” MSI Wind Top PC’s with a 20″ touch screen.

Index Page

Index Page.... simple, no nonsense. Also -- Boring

I had some idea of what was going on since I built a small .mobi site for this company last year geared toward the iPhone/iPod Touch. It turned out OK, but was nothing I really felt stood out. It works, but I honestly don’t think it gets much attention. I’d like to revisit it sometime and make some improvements with what I’ve learned on this project.

Date and Nights Selection

The site will not be available outside of this office, but I’ve got some screenshots AND A VIDEO showing off the functionality. I’m not much of a designer, so it’s not as pretty as it could be probably, but it works I think. I’ll post a couple of the fun jQuery stuff I found/did as well. I think the most instructional and entertaining part was modifying the jQuery quicksearch plugin from www.rikrikrik.com to be able to use an on-screen keyboard.

And somehow I don’t have a screenshot of that…will update later :)

Rather than creating a separate keyboard and try to tie it into the event handling for quicksearch, I ended up extending the plugin, adding new functionality through the options passed during the .quicksearch() call so the keyboard was fully integrated. It took some trial and error, and it likely could be done “better”, but it works, and functions great.

$('table#cabin_names tbody tr').quicksearch({
				position:'after',
				attached:'#uber_wrap',
				labelText:'',
				inputClass:'sel wide',
				watchElement:'li.alpha_btns',
				keyboard: true,
				keyboardId: 'alpha_btns'
			});

The ‘watchElement’ option is the elements that should trigger the qs() function in quicksearch. ‘keyboard’ defaults to false, but when set to true, it renders the html to insert the keyboard and bind the events to do the proper stuff. ‘keyboardId’ just lets you define the element Id so you can style at will. This extension of the plugin likely has no real use beyond sites designed for touch screens, but it was still educational, and was an interesting introduction to plugins in jQuery. I’ve never written my own, but if I find some functionality I need in the future, maybe I can break into that field too.

# of Guests

Anyhow, there’s not much else to say. This site was designed specifically for this screen, specifically to run in Firefox, specifically in Fullscreen mode. If I had more time I think it could be made to be a bit more flexible, but I suck at CSS, and I just didn’t know how to make a few things flow fluidly on different sized screens. Enjoy!

kiosk_demo

List of cabins available for selected dates and # of guests

One of the other really fun things to write/integrate was the scrolling buttons. I realized after the initial design that having regular scrollbars just wouldn’t be usable with a touch screen interface. Theoretically I could have altered the Firefox userContent.css to enlarge the scroll bars to the point they would have been usable, but that just didn’t feel right. Once again, though, jQuery plugins to the rescue! I found a nice little scrolling plugin that allowed me to bind relative scroll positions with easing to click events on the fixed-position nav-box on the right side. Not sure I’m thrilled with how it looks right now, but at least it’s functionally complete. Can always tweak it down the road.

Fun screen to write. "Buttons" are actually labels for hidden checkboxes. jQuery styling changes make it look fancy

Individual cabin page...small photos are clickable to rotate through pictures

 
4 Comments

Posted in Programming, Websites, linux

 

Is the ‘Bandwidth Hog’ a Myth? – Bandwidth hogs – Gizmodo

04 Dec

Is the ‘Bandwidth Hog’ a Myth? – Bandwidth hogs – Gizmodo.

Good article I would love to see the answer to.

Now I’m no insane downloader. I’ll buy an album on itunes, and I do stream video from youtube and hulu quite a bit, but at most I’m around 30-50GB of transfer/month (and yes I do keep a rough track of how much I use via Conky).

Mostly posting this just for the article to get some publicity as the author requested so hopefully some of us can see the “real numbers”. Cable companies have been ripping us off for long enough, and they need to be forced to innovate if they are going to keep charging these exorbitant rates.

 
Comments Off

Posted in Websites

 

couple of fun and useful jQuery Plugins

12 Nov

I am far from an accomplished web developer, but jQuery is one tool that helps out immensely in writing javascript that “just works”. As many of you are aware, browser differences create all sorts of havoc when trying to write code that navigates the DOM. And writing code from scratch to validate forms is a serious pain in the butt. So here are a few jQuery plugins that might make your life a little easier in that regard.

First off, there is the the combined magic of the jquery Form plugin from malsup.com which creates a nice AJAX-submitted form with one quick line of code

$('#form').ajaxForm();

Optionally, you can pass the .ajaxForm() function any options that you would normally pass to a regular jQuery .ajax() method like so….

Now that’s fun, but it can be extended just a LITTLE bit more with the jquery validate plugin. Here we can define some simple rules in JSON format and the validation plugin will automatically display customizable messages for any errors that are found before submitting the form. The validation function takes the option submitHandler to create the ajaxSubmit event from the Form plugin above.

Here is an example:

$('#contactus_form').validate({
	submitHandler: function(form){
		$(form).ajaxSubmit({
			success: function(msg){
				alert(msg);
			},
			error: function(msg){
				alert(msg);
			}
		});
	},
	rules:{
		name:"required",
		email:{
			required:true,
			email:true
		},
		message:"required"
	},
	messages: {
		name:"Name is required",
		email:{
			required:"Email is required",
			email: "Email is in an invalid format"
		},
		message:"Some message to the staff is required"
	},
	errorLabelContainer:"#ajaxmsg",
	wrapper:"li"
});

Obviously you need to validate the data in whatever script you are handling on the server side, but the jQuery error messages are a great way to improve your forms usability and they can be styled to be attractive and make any input errors very clear to your users.

 
Comments Off

Posted in Programming, Websites

 

The Evils of PHP magic_quotes_gpc

17 Oct

I’m honestly surprised this hasn’t bit me before now. I was working on some OLD code that didn’t have much of any escaping built into it. Ok, I take that back. It had /no/ validation methods whatsoever. So I’m rewriting a good chunk of it so that doing things like entering a person’s name that happens to have an apostrophe in it actually works and doesn’t break the SQL query.

So, you take a query in php with no validation and add mysql_real_escape_string() to the values you are inserting/updating right?

Well, it turns out it’s not /quite/ that easy if the lovely php magic_quotes_gpc is on. The insert or update will succeed (albeit with nasty escaping characters in your data). But now go try and select row (imagining your searching for a name) using a query such as :

“SELECT * FROM guest WHERE name LIKE ‘%”.mysql_real_escape_string($name).”%’”;

MySQL at least will not find your data. If the name field you were searching for contained “test\’s name” and you searched for “test’s”, the escape function above would insert the backslash and if you viewed your MySQL log, it would appear that MySQL had gone off the deep end. You print your table and clearly see “test\’s name”, but your query (truncated to the relevant portion) ” name LIKE ‘%test\’s%’” returns zero results.

My first thought was to “escape the escape character”. So like a dumbass, I try this mess: addslashes(mysql_real_escape_string($name)). I figured there’s no way that they would make you jump through this many hoops to deal with escaped data, and in that regard at least I was right. It’s much, MUCH easier than all that. (For the record, not even the previous monstrosity worked. Playing with queries manually in MySQL’s CLI, i found if you ran a search ” LIKE ‘%test\\\\’s%’ ” it would FINALLY find it. But that looks terrible, and there’s no way that such a commonly used language would get that way if it required ugly unreadable code like that.

So, the solution I found after plenty of reading:

#1) If you have full access to your server (dedicated, VPS, your home test server), in /etc/php5/apache2/php.ini (for Ubuntu Server at least) change the line:

magic_quotes_gpc = On

to

magic_quotes_gpc = Off

Be sure to then restart your apache service using

sudo /etc/init.d/apache2 restart

#2) if you do not have root access to your server (Shared hosting, etc), you can use a rule in your webroot’s .htaccess. Add the line:

php_flag magic_quotes_gpc off

preferably in the top of the file so it’s nice and easy to find. I believe this will only work on linux apache servers. Windows does not support .htaccess for anything but password authentication I believe. But you should be running your apache server on linux anyhow :)

So, this was a really newb mistake, but I learned my lesson and figured maybe this could help someone else out.

 
1 Comment

Posted in Programming, Websites

 

I got my Google Wave Invite!

13 Oct

*Dances*

Finally got my Google Wave invite. It looks very promising, but sadly I don’t know anyone else who’s gotten one yet, so I have no one to talk to :( Very lonely. If you’ve got an account, let me know, I’d just like to try out the various features that are available.

 
Comments Off

Posted in Websites

 

New Site for Church

11 Oct

We joined West Hills Presbyterian Church here in Knoxville, TN in September. When we originally found this church, I ran across their web site and gathered there was no one at the church who had any web development experience at all. It was a sad 4 or 5 page static site with no contact form, a painfully “premade” looking template, and was just overall a horrible experience. Now, I’m no graphic designer, but I figured I could do a little bit better at least and so here is the new site : http://www.whpca.net. Nothing mindblowing, and still mostly static, but at least it has a way for people to contact the church and for new visitors to easily get essential info and directions.

On a related topic, I LOVE Google’s APIs. Whether it’s doing AJAX searches, integrating interactive maps into a page, or taking advantage of the multitude of other tools they have created (or bought). If you do any kind of web development, you will surely be able to find a use for one or more of their tools….. Google API AJAX Playground. To see an example of how it’s used on this site, go to the directions page under Information.

 
Comments Off

Posted in Websites