RSS
 

Archive for August, 2009

Add and Remove items with jQuery

28 Aug

Creating the markup

In this example I’m going to create text field and 2 buttons that will allow me to add and remove text fields. Similar to online apps that allow you to create web form.

<a href="#" id="add">Add</a>
<a href="#" id="remove">Remove</a>
<p><input type="text" value="1" /></p>

The <p> around the input is just to add a new line when I add now input’s.

Applying jQuery to the markup

First you need to get jQuery. You can download it from the official jQuery website or use the link from Google Code: http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js

Now you need to call jQuery in the <head> section of you HTML Template using the script tag:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">&lt/script>

Now you need to add the jQuery under the script you just called:

<script type="text/javascript">
$(function() { // when document has loaded
	var i = $('input').size() + 1; // check how many input exists on the document and add 1 for the add command to work
	$('a#add').click(function() { // when you click the add link
		$('<p><input type="text" value="' + i + '" /></p>').appendTo('body'); // append (add) a new input to the document.
// if you have the input inside a form, change body to form in the appendTo
		i++; //after the click i will be i = 3 if you click again i will be i = 4
	});
	$('a#remove').click(function() { // similar to the previous, when you click remove link
	if(i > 1) { // if you have at least 1 input on the form
		$('input:last').remove(); //remove the last input
		i--; //deduct 1 from i so if i = 3, after i--, i will be i = 2
	}
	});
	$('a.reset').click(function() {
	while(i > 2) { // while you have more than 1 input on the page
		$('input:last').remove(); // remove inputs
		i--;
	}
	});
});
</script>

Here you have it a simple . You need to keep in mind that every time you refresh the page the items will be gone. You’ll need more codding in order to keep the variables on a database. This is just to cover the basic add / remove functions from jQuery.

Add / Remove input with jQuery Demo

Usefull links
Theme Forest – Jquery for Absolute Beginners – Day 5
jQuery Homepage

 
7 Comments

Posted in Web Design

 

The Pomodoro Technique

18 Aug

The technique can be applied to practically anything you are doing and consists on disciplining yourself following the Pomodoro rules. You basically break tasks down in minutes time and when you reach a certain limit you must take time to yourself.

My co-worker Catarina introduced me to the Pomodoro Technique, she found it quite interesting and a bit funny since Pomodoro means tomato in Italian. I decided to take a deeper look into the technique on my extremely short free time and test the results. This post is based on my 2 week experience of the Pomodoro Technique trying to GTD in my personal projects and life.

The Pomodoro Method

Like I mentioned the Pomodoro Technique has rules you must respect in order for the technique to be effective.

Rule #1
The most important rule and also the most basic one is knowing that 1 Pomodoro is equivalent to 25 minutes and you cannot subtract or add any minutes to it.
During these 25 minutes you must do only the task you committed yourself to do with no distractions and no breaks.

Rule #2
After each 25 minute period you must take 5 minutes off to relax.
You are not allowed to talk about work or engage in any activity that will require any mental effort such as making phone calls or writing emails that will require you to make decisions, etc… This is time for you to relax and completely disconnect from what you where doing, even if you did not finish it.

When you go back to an unfinished task reset the clock to 25 minutes and start the Pomodoro process from
the beginning. This means that the task you are doing will now last 2 Pomodoros (two 25 minute periods).

When you reach 4 Pomodoros (four 25 minute periods) increase the break to 15-30 minutes.

The way of the Pomodoro

PomodoroOver the past two weeks I have been applying the Pomodoro Technique to myself and I’ve found extremely complicated to respect the 25 minute rule during the first 3-5 days but I managed.

The improvement is visible mostly on myself and on organization aspects like knowing exactly how much time I took to accomplish tasks and knowing that I was able to know exactly how much they cost.
On the other hand when I was working from 9pm I knew that I would get tired, slower and less motivated around 11pm so knowing that and breaking a coding process every 25 minutes isn’t the smartest thing to do.
But take in consideration each case should be handled as a single case but you must respect rule #1 do the Pomodoro Technique.

The hardest part is disciple, making yourself follow the rules but the the results are gratifying. You will sleep better, get things done and have them under control. Trust me, I have a rough time dealing with anxiety and this technique has helped.

Resources

I advise you to visit The Pomodoro Technique Website and download the free e-book complete with helpful sheets you can use with the Pomodoro Technique. It’s an excellent reading and will teach you The Pomodoro Technique and how to implement it to yourself and you team.

I use an Adobe Air based Application called Pomodairo which is a timer created to be used when applying the Pomodoro Technique.

 
5 Comments

Posted in Productivity

 

Website Wireframes

05 Aug

What is a website wireframe

A website wireframe is the basic structure of the website. It does not have any functionality or design it’s the basic concept of the layout and works as a guideline for the designer.

The wireframe must incorporate all important information keeping the page structure clean and accessible. As a web consultant you decide the layout of the website not the client. In my experience I find that most clients accept structural changes very well when done right.

Why work with wireframes
Think of a website as a person where the wireframe is the skeleton. The skeleton alone does not do anything, can’t even hold himself up, it needs muscles for that. That’s where the design comes into action.
But a skeleton and muscles alone don’t do anything you need a heart and a brain that’s the development part.

The following example is a very basic wireframe built exclusively for this article as visual aid:

Website Wireframe

Notice that I did not specify any color, this is important because the designer might be influenced by any color or scheme you introduce in the wireframe.

A website wireframe must include all the non design elements that will show on the page. For example if the content is a text article you should define the title, article information like author, date, category, and body text to work as guideline for the designer.
Wireframing will allow the project run smother and easier from the design and development point of view by reducing their process to simple and quick question-answer issues.

Tips for producing high quality wireframes

Search Engine Optimization (SEO)

When building a website it’s crucial to think of SEO. Basic SEO will help you understand key pages for the website as well as their layout. Do some keyword research this will help you build the navegation and key pages for the website. It helps if you create a flow chart or mind map.
Many people this of SEO as a final step when building a website when in fact SEO should be on everybody’s mind from beginning to end.

SEOmoz has covered this very well on their article SEO Wireframing.

Grids
I’ll be honest. I never really liked grid because they kind of make your mind get stuck to that grid structure but on the other hand you will need some sort of grid structure to guide yourself: Page width, sidebar, content area, menu area, logo area, advertisement area, etc are all part of a basic grid structure that will help you along the way.

Although times are changing 1024×768 is still considered the default screen resolution and therefore all websites should adequate to this resolution. Wireframing for 1024×768 resolutions means you have somewhere between 940 and 970 pixels width to work with and around 580 or 600 pixels of of the website visible on the browser so take these measures into consideration.
Don’t overdue your header if it hides the content and doesn’t add anything to the user experience when visiting the website.

One tool I find very useful is the Grids System Generator that facilitates the creation of a grid to help you, based on the most popular and effective grid systems.

Trip Wire Magazine wrote a kick ass article with allot of information and helpful tutorials about css grid systems called 45 CSS Grid system layout generators and Tutorials that every designer should know. It’s a very interesting and helpful reading. I recommend it.

Be negative, think of the worst case scenario
This is a very common rookie mistake and very usual for individuals to forget about when wireframing on a tight deadline.
You start by creating a wireframe based on the best case scenario. This means the user will always do every action correctly, but what happens if he doesn’t? What happens if the user is filling a form and puts letters on the phone number input? Or numbers on the name input? Or if the user doesn’t fill an obligatory field?

By thinking of the worst case scenario you will be able to anticipate common error actions and improve your work quality, help the designer and the developer.

  • Before starting a wireframe be sure to look for good examples of layouts you will be making. Making a company blog is allot different from making an e-commerce website.
  • Make a 15min session with 4 or 5 other people to simply point out features they would think that might be a good practice to include on the website.
  • Experience tells me designers and clients will be influenced by any colors or text you include in the wireframes. White and gray colors and never fill blocks with color unless necessary and, if possible use real text / actual text from a website instead of Lorem Ipsum. This way is easier to identify what will or will not work.
  • Ask for feedback from your co-workers. You might think you have the perfect layout concept but if more people disagree on some aspect, maybe you should reconsider.

Tools for Wireframing

Unfortunately I don’t know any good free wireframing tools. I’ve always been an Open-Source / Freeware apologist but in this case I had to give in it’s worth to pay for the software:

  • Pencil, Pen and Papper
    Sometimes it’s just easier to sketch something on paper and later adapt that to a cleaner digital version. I’m not a big fan of using paper and pen to wireframe professional projects but it’s always my start point. This is the only good free tool I know at this point.
  • FlairBuilder is a very interesting tool built with Flex and with great potential. It’s very intuitive and has a very good gallery of components and functional component. The only downside I see to this tool is the lack of guidelines althought it supports grid based backgrounds. It’s just not the same.
  • Axure (PC) – This is one of the most powerful tools I’ve experienced it would be my first choice for windows based computers but the price is over my available badget.
  • OmniGraffle (mac) – This is probably the best tool I know for Wireframing. It’s simplicity and effectiveness makes it extremely useful and easy to learn. Unfortunately it’s only available for mac.
  • Balsamiq mockups – I’m not a big fan of balsamiq mockups for me they look to to hand drawn to be taken serious when presenting this to other people but I have to admin this is a great peace of software if you are not looking to spend alot of money.
  • SmartDraw - is a good peace of software, very feature complete but that doesn’t support pixel units making it harder to build web projects. The have good user / client support over Twitter.
  • Microsoft Visio – A very complete software from Microsoft that will allow you to do a whole lot more than wireframing. Not the most user friendly price though.

You can actually do wireframes with any software that can draw a line but many features will be missed. Photoshop, Illustrator, PowerPoint, inDesign, HTML and Adobe Flash are all valid options but do not allow you to do much more than the basic wireframe and will take longer.

For further reading visit:

 
24 Comments

Posted in Web Design

 

CSS Text Gradient Effect

01 Aug

All you need is to add an empty <span> tag that will hold the PNG image with the gradient and overlay the text. This css trick is supported by al modern browsers like Firefox, Safari, Opera and IE7 or higher.

Putting it together

HTML

<h1><span></span>Some text you want</h1>

CSS

The key to secure this trick is applying the css property position:relative; to the <H1> tag and position:absolute; to the <span>. The span will need to have the same width and height as the <H1>:

h1 {
    color#222;
    position:relative;
}
h1 span {
    position:absolute;
    width:100%;
    height:40px;
    display:block;
    background: url(text-gradient.png) repeat-x;
}

And there you have it. Check out the demo of CSS Text Gradient Effect to see the code in action. This technique does not allow the user to select of click on the text since the PNG image will overlay it they will be clicking on the image.

 
1 Comment

Posted in Web Design

 
 

Page optimized by WP Minify WordPress Plugin