Skip to Main Content

The One Three Web Design Blog

Peering Into the Future

Jan 21, 2010

Back at it again. I’ve been building, creating, trying and writing; and it’s time to share a bit of what I’ve learned.

Future Blog Posts

oAuth

I started to read about the process of using oAuth to authenticate with Twitter. There are several libraries out there already written, but I wanted to try to write my own. So, I developed what I am calling twitAuth in php and used it to create the site talkietweets.com (Re-design and expansions in the works). I’m working on a several part write up on how to create your own.

jQuery 1.4

The biggest and fastest version of jQuery has just been released and I’ve had a bit of time to play with it. So, given that I’m teaching a course on Javascript and jQuery at work it’s time to return to my favorite library and perhaps finish some plugins.

Raphael

After reading a bit about Google’s Closure library i ran into an article on why Closure is terrible. That lead me to the library Raphael and particularly the tiger drawing in the demos. I decided to combine Raphael and jQuery to create art tools and I’m currently working on a pen tool much like you would find in PhotoShop.

Site Stuff

Even though I still like my site, a few pages could definitely use some work. The about us, contact and portfolio pages to be exact. When I first created the portfolio page I made the images huge to compinsate for lack of sites. Having launched 24 sites with FIRSTROI its time to dial it back a bit and re-think some things.

Good things to come and hopefully more frequent posts. Hopefully.

Overdue Update

Oct 13, 2009

How do you know when you are overworked?

Oh I don’t know, maybe its when you can’t come up for air long enough to see your friends, take care of your house, sleep or even open up google reader to keep up with current trends and best practices.

And its not due to overextending myself, it’s just my primary job. You know, that thing that puts food on the table. But nlately, I’ve been working to get things under control.

I’ve even had time to work on a few freelance projects and started work on a couple personal projects I’ve been mulling over for a year now.

So what?

I’ve decided to no longer be just a passenger in the web game.

I’ve been discovering a lot about my favorite JavaScript library jQuery. I’m rediscovering my love for object oriented programming with PHP. And I’m thoroughly enjoying working with friends and co-workers to produce some very nice sites outside of work, and i plan to take all of this and write about it to share with the interwebs so that my trials and tribulations do not have to be repeated by others. And keep an eye out for a few jQuery plugins along the way.

  • Today we are going to watch some grass grow.

  • Whoa did you see that? Look at it grow!

  • Now we shall zoom in to really see it grow.

  • This concludes our grass growing presentation for the day.

What?

This is a jQuery library plugin.

This plugin takes any list and makes the list elements fade in and out in an endless loop. Pauses on mouse over and restarts on mouse out. Markup inside the list element does not matter it will roll and fade just about anything (not tested).

If you are looking specifically for something to roll a list of images with text on top of them then you are in luck. The plugin comes with some built in styles to do just that.

How?

Add rollSM.jQuery.js to the head of your page after the jQuery library.

  1. <head>
  2. <script type=”text/javascript” src=”jquery.min.js”></script>
  3. <script type=”text/javascript” src=”rollSM.jQuery.js”></script>
  4. </head>

Setup your list however you see fit. If you want to use the built in styles for the rolling image with test on top of the image setup the list as follows.

  1. <ul class=”someSelector”>
  2. <img srd=”imageName.jpg” alt=”" />
  3. <div>
  4. <p>Text to go on top of image here</p>
  5. </div>
  6. </ul>

Lastly, select you list and attach the roll function to it. Pass a variable of true if you are using the built in styles for an image with text on top of the image and false if you are going to use your own styles.

  1. $(document).ready(function(){
  2. $(“someSelector”).rollSM(true);
  3. });

If you choose to use the built in styles open rollSM.jQuery.js and edit the customizable variables to meet your needs. Also, you can change the time interval between rolls in this file.

Future Features List:

  • Text on bottom, left and right
  • Text that fades or animates in
  • Arrows for navigation

Download

Get the ZIP

March ‘09 Monthly Faves

Mar 31, 2009

More faves for the month. Some of these were written in February, but I didn’t stumble across them until March.

Lay Off the Juice Man!

An article running down the debacle that was the Tropicana carton redesign. Lots of good links and a particularly good quote from Paul Ford.

Creativity Abound

Designers block? Spark your creativity here. Lots of good examples and links.

Building Your Own Portfolio?

Ten surprisingly good things to consider when designing your own portfolio. Followed up by a slew, too many to count, of great portfolio examples.

Monthly How To

In this months how to segment we learn how to create simple and elegant light streaks using Photoshop. Thank you SpoonGraphics for being so awesome.

Manage A Large Corporate Site?

Learn what your corporate site is doing wrong, along with a slew of other things management will never give you the go ahead to fix.

Brand New Look and Feel

Mar 15, 2009

There’s something different about the site isn’t there?

Yup. After 1 month I already got sick of the old look of the site. So it had to go to make way for what you see before you. Hope you like it and feel free to let me know what you think.

Just think of it as an experiment in making a fresh looking new site without using gradients.