Category: Development

Categories
Development

Bioderma Medical Laser & Aesthetics Redesign

Bioderma Laser & Aesthetics

Just went live with the redesign I had been working on for Bioderma Medical Laser & Aesthetics.  Been working with them on a site redesign and incorporating many new features to their website.  Working with them has been a pleasure and the site has turned really nice.  There’s a lot of heavy tech running in the background that gives users a great and informative experience while giving the client the tools necessary to manage their website with little training.

Some notable features include:

CMS powered by Joomla

Building on top of Joomla for the CMS gave the client an amazingly powerful and easy to use CMS solution.  They now have the ability to make basic content edits to their own site at their own convenience.  Allowing them to keep the site content current and up to without having to pay a web developer for basic edits.  

interactive mapping and driving directions powered by Google Maps API

To help their customers find them, mapping powered by the Google Maps API was incorporated into their site.  Current map, satellite, and hybrid information is delivered via Google for users.  Custom driving directions are delivered with no page refresh/reload via AJAX scripting to save users time and unnecessary load times.

newsletter management

A full newsletter management system built upon the ccNewsletter Joomla component has been incorporated into the upgraded site.  Users can easily sign up to receive a newsletter via the newsletter sign up box or through the contact form on the website.  A full admin panel is built into the CMS for the client to easily manage, create, and send out newsletters to users who’ve signed up to receive their newsletter.  A very cool feature.

custom contact form

A custom contact form allows users to easily contact the client.  Submissions are delivered to the client as well as recorded to a database for easy retrieval of information for the client.  DOM scripting found in the contact form hides/reveals content if relevant for the user.  Leading the a cleaner, simpler experience.

lightbox powered before & after photos

Before and after photos associated with their respective services are powered by the slimbox lightbox extension.  This enables full sized detailed photos to appear via a modal window ontop of the page via clicking on a thumbnail photo.  This reduces unnecessary page load for the user while looking really nice.

Categories
Development

Dashcode

 Dashcode

Finally got around to messing around with creating a dashboard widget using Dashcode. Wow, the whole interface had a polish on it that you don’t find in most software, especially IDE’s. Very smooth, clean, and can pretty much just drag and drop anything that you like.

It makes creating certain types of widgets extremely simple. I made a quick RSS feed based widget in just a few minutes, with no tutorial. Eventually I had to tweak some .js and .css files a bit by hand, but that was very easy to get too as well.

I’m very much impressed with Dashcode, and won’t give a tutorial as there are already many great one’s online.  It’s a great tool, now I just have to come up with some cool ideas for gadgets.

If you run OS X 10.4.3 or higher feel free to download:

Categories
Development

Using a Spreadsheet to populate a chart with the Google Visualization API

I’ve been messing around with adding charts/graphs to web pages that can pull their data from a Google Doc Spreadsheet.  That way the chart is updated when the data is updated, instead of placing a static image of a chart on the page.  Conveniently the Google Visualization API makes creating attractive visualization of data fairly easy.  All you have to do is set up a Google Docs Spreadsheet, then do the following steps:

To get the data source url for Google Spreadsheet data sources follow these steps:

  • Create a spreadsheet in the format expected by your gadget.
  • Select the range of cells you want to display in the gadget.
  • From the toolbar, click ‘Insert’ and choose ‘Gadget’.
  • Choose an existing gadget or select ‘Custom’ as the gadget type, enter the URL of your gadget XML specification and click ‘Add’.
  • In the gadget title, click the arrow icon on top right of the title bar.
  • Choose “Get query data source url…” from the popup menu.
Then you can just call that data source url through some javascript on a webpage.  


Categories
Development

reCAPTCHA

I’ve been looking to reduce the amount of spam that web forms have been getting hit with recently. Figured that a captcha would be a good solution to determine if a human is in fact filling out the form and not some spambot.  I’m been hesitant to implement most of the captcha solutions I’ve come across due to their lack of accessibility.  For instance, most standard captchas require that you look at an image and then key in what it says.  This would prohibit someone dependent on a screen reader or a user who has images disabled in their web browser.

I’ve been messing around with reCAPTCHA as a solution and thus far have been very much impressed.  It offers and easy and very well documented means of incorporating a captcha into a site.  And it also offers an audio captcha for vision impaired users, which is great.  Also the submissions go towards helping digitize older books.  Might as well apply that extra time to solving a noble cause.  They also offer a library to work with most every server side scripting language available.

Categories
Development

Blog Redesign

I’m in the process of redesigning this blog.  The basic colors and layout are in place.  There’s still a couple of areas I need to finish up.  No amazing new features in this upgrade, just tried to make things a bit cleaner and easier to read.

  • Widened the layout of the site
  • Increased font size and spacing
  • New colors used sitewide
  • Plan to make my portfolio easier to navigate too, but haven’t gotten to that quite yet.
Categories
Development

Working From Home

With some renovations being done at work I’m not working from home for three weeks.  Right now I’m in the middle of my second week working from home.  It’s not too bad so far.  I actually find that I get more done with less interruptions at home than I usually find in the office.  Nobody asking stopping me and asking me, “This is a really dumb question, but my computer is doing…”.  While it’s cool being a nice guy and helping to figure something out, it does take time away from projects I’m usually trying to get done.

I wake up at the same time (ok I do sleep in a bit, but barely) and go through the normal morning routine.  Then I get dressed like I’m going to work (many would say it’s the same attire than if I were staying home) and have to put my sneakers on.  Not sure why, but if those sneakers are off I’m just not in that work mode.

I’ve stopped into work a couple of times to meet up with people and take care of some of the things that require being in person for.  So that’s pretty cool, I feel bad for the people who couldn’t work from home due to what they do. Everyone is crammed into the cafeteria, and with the start of classes, it’s really crazy in there.  I wouldn’t want to be working in that environment.