wannabit who do you wanna bit

17Dec/10Off

Using dropbox as git repository

This is just another way to give some use to your dropbox account. Although I use git in this article, you can pretty much do it with any other SCM tool.

First of all you obviously need a dropbox account. If you don't have one already, go register for one and get 2Gb of free online storage.

Now that you have an account, create a folder on your dropbox and on the web interface and share the folder with some friends if you wish to do so.

All is ready now to start creating the repo. For this post I'm assuming you already have a local git repository of a project called my_killer_app and that you are working on a unix based operating system like OS X or Linux.

Open up a terminal, and change directory to your project folder:

cd ~/Sites/my_killer_app

The next step is to clone your existing local repo into the shared dropbox folder:

git clone --bare . ~/Dropbox/shared_folder/my_killer_app.git

The --bare option tells git to not include the project files. Only those files needed to track the versioning are cloned (mainly those present in the .git/ folder).

Now you have sort of a remote repository. Although it's on your machine, it's remote to everyone else sharing the folder. But to make things work we need to add this "remote" location and give it an alias:

git remote add my_killer_app ~/Dropbox/shared_folder/my_killer_app.git

There! It's done. Now you can push your changes to the repository. And pull the changes on another machine with your dropbox account. Also people sharing the folder will be able to do the same.

Just for the sake of completeness, here's how you would make changes and commit them to the "remote" server:

You made changes to the code, now it's time to add and commit:

git commit -a -m "another commit example"

Nice! Now let push them to the "remote" server:

git push my_killer_app master

Piece of cake.

And here's how a different user sharing the folder would do to collaborate on your project:

Clone the repository:

git clone ~/Dropbox/shared_folder/my_killer_app.git

Add the alias to remote repository:

git remote add my_killer_app ~/Dropbox/shared_folder/my_killer_app.git

And that's it! Now it's pull, commit, push. If you need more info on git usage you can check this manual.

from:http://blog.rogeriopvl.com/archives/using-git-with-dropbox/

Filed under: Programming Comments Off
29Nov/10Off

HTML Email and CSS on different email-client

I found this interesting table about which CSS attribute is supported by the different email client.

Style Element Outlook
2000/03		 Live
Hotmail		 Yahoo!
Mail		 Yahoo!
Classic		 Outlook
2007/10		 Apple
Mail		 Apple
iPhone		 Google
Gmail		 Lotus
Notes 6/7		 Lotus
Notes 8.5		 AOL
Desk 10
<style> in <head> Yes Yes Yes Yes Yes Yes Yes No No Yes Yes
<style> in <body> Yes Yes Yes Yes Yes Yes Yes No No Yes Yes
Link Element Outlook
2000/03		 Live
Hotmail		 Yahoo!
Mail		 Yahoo!
Classic		 Outlook
2007/10		 Apple
Mail		 Apple
iPhone		 Google
Gmail		 Lotus
Notes 6/7		 Lotus
Notes 8.5		 AOL
Desk 10
<link> in <head> Yes Yes Yes Yes Yes Yes Yes No Yes Yes Yes
<link> in <body> Yes Yes Yes Yes Yes Yes Yes No No Yes Yes
Selectors Outlook
2000/03		 Live
Hotmail		 Yahoo!
Mail		 Yahoo!
Classic		 Outlook
2007/10		 Apple
Mail		 Apple
iPhone		 Google
Gmail		 Lotus
Notes 6/7		 Lotus
Notes 8.5		 AOL
Desk 10
e Yes Yes Yes Yes Yes Yes Yes No No Yes Yes
* Yes Yes Yes No No Yes Yes No No Yes Yes
e.className Yes Yes Yes Yes Yes Yes Yes No No Yes Yes
e#id Yes No Yes Yes Yes Yes Yes No No Yes Yes
e:link Yes Yes Yes Yes Yes Yes Yes No No Yes Yes
e:active, e:hover Yes Yes Yes Yes No Yes Yes No No Yes Yes
e:first-line Yes No No Yes No Yes Yes No No Yes Yes
e:first-letter Yes No No Yes No Yes Yes No No Yes Yes
e > f No No Yes Yes No Yes No No No No No
e:focus No No Yes Yes No Yes Yes No No No No
e+f No No No No No Yes Yes No No No No
e[foo] No No Yes Yes No Yes Yes No No No No
Text & Fonts Outlook
2000/03		 Live
Hotmail		 Yahoo!
Mail		 Yahoo!
Classic		 Outlook
2007/10		 Apple
Mail		 Apple
iPhone		 Google
Gmail		 Lotus
Notes 6/7		 Lotus
Notes 8.5		 AOL
Desk 10
direction Yes Yes Yes Yes No Yes Yes No No Yes Yes
font Yes Yes Yes Yes Yes Yes Yes Yes No Yes Yes
font-family Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
font-style Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
font-variant Yes Yes Yes Yes Yes Yes Yes Yes No Yes Yes
font-size Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
font-weight Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
letter-spacing Yes Yes Yes Yes Yes Yes Yes Yes No Yes Yes
line-height Yes Yes Yes Yes Yes Yes Yes Yes No Yes Yes
text-align Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
text-decoration Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
text-indent Yes Yes Yes Yes Yes Yes Yes Yes No Yes Yes
text-overflow CSS3 Partial or buggy support Partial or buggy support No No No Partial or buggy support Partial or buggy support Partial or buggy support No Partial or buggy support Partial or buggy support
text-shadow CSS3 No Partial or buggy support Partial or buggy support Partial or buggy support No Yes Yes Partial or buggy support No No No
text-transform Yes Yes Yes Yes Yes Yes Yes Yes No Yes Yes
white-space No Yes Yes Yes Yes Yes Yes Yes No No No
word-spacing Yes Yes Yes Yes No Yes Yes Yes No Yes Yes
word-wrap CSS3 Partial or buggy support No Yes Yes No Yes Partial or buggy support No No Partial or buggy support Partial or buggy support
vertical-align Yes Yes Yes Yes No Yes Yes Yes No Yes Yes
Color & Background Outlook
2000/03		 Live
Hotmail		 Yahoo!
Mail		 Yahoo!
Classic		 Outlook
2007/10		 Apple
Mail		 Apple
iPhone		 Google
Gmail		 Lotus
Notes 6/7		 Lotus
Notes 8.5		 AOL
Desk 10
color Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
background Yes No Yes Yes Partial or buggy support Yes Yes Partial or buggy support No No Yes
-moz-background CSS3 No No No No No No No No No No No
-webkit-background CSS3 No No No No No Yes Yes No No No No
background-color Yes Yes Yes Yes Yes Yes Yes Yes No Yes Yes
background-image Yes No Yes Yes No Yes Yes No No No Yes
background-position Yes No Yes Yes No Yes Yes No No No Yes
background-repeat Yes No Yes Yes No Yes Yes No No No Yes
-khtml-background-size CSS3 No No No No No Yes Yes No No No No
-moz-background-size CSS3 No No No No No No No No No No No
-o-background-size CSS3 No No No No No No No No No No No
-webkit-background-size CSS3 No No No No No Yes Yes No No No No
HSL Colors CSS3 Yes Yes Yes Yes Yes Yes Yes Yes No Yes Yes
HSLA Colors CSS3 No No No No No Yes Yes No No No No
Opacity CSS3 No No No No No Yes Yes No No No No
RGBA Colors CSS3 No No No No No Yes Yes No No No No
Box Model Outlook
2000/03		 Live
Hotmail		 Yahoo!
Mail		 Yahoo!
Classic		 Outlook
2007/10		 Apple
Mail		 Apple
iPhone		 Google
Gmail		 Lotus
Notes 6/7		 Lotus
Notes 8.5		 AOL
Desk 10
border Yes Partial or buggy support Yes Yes Yes Yes Yes Yes No Yes Yes
-moz-border-color CSS3 No No No No No No No No No No No
-moz-border-image CSS3 No No No No No No No No No No No
-moz-border-radius CSS3 No No No No No No No No No No No
-webkit-border-radius CSS3 No No No No No Yes Yes No No No No
-moz-box-shadow CSS3 No No No No No No No No No No No
-moz-box-sizing CSS3 No No Yes No No No No No No Yes Yes
height Yes Yes Yes Yes No Yes Yes Yes No Yes Yes
margin Yes No Yes Yes Yes Yes Yes Yes No Yes Yes
padding Yes Yes Yes Yes Partial or buggy support Yes Yes Yes No Yes Yes
width Yes Yes Yes Yes No Yes Yes Yes No Yes Yes
Positioning & Display Outlook
2000/03		 Live
Hotmail		 Yahoo!
Mail		 Yahoo!
Classic		 Outlook
2007/10		 Apple
Mail		 Apple
iPhone		 Google
Gmail		 Lotus
Notes 6/7		 Lotus
Notes 8.5		 AOL
Desk 10
bottom Yes No No No No Yes Yes No No Yes Yes
clear Yes Yes Yes Yes No Yes Yes Yes No Yes Yes
clip Yes No No No No Yes Yes No No No Yes
cursor Yes Yes Yes Yes No Yes No No No Yes Yes
display Yes Yes Yes Yes No Yes Yes Yes Yes Yes Yes
float Yes Yes Yes Yes No Yes Yes Yes No Yes Yes
left Yes No No No No Yes Yes No No Yes Yes
opacity No No No No No Yes Yes No No No Yes
outline CSS3 No No Partial or buggy support Partial or buggy support No Yes Yes Partial or buggy support No No No
overflow Yes Yes Yes Yes No Yes No Yes No No Yes
position Yes No No No No Yes Yes No No Yes Yes
resize CSS3 No Yes Yes Yes No Yes No No No Yes Yes
right Yes No No No No Yes Yes No No Yes Yes
top Yes No No No No Yes Yes No No Yes Yes
visibility Yes Yes Yes Yes No Yes Yes No No No Yes
z-index Yes No No No Yes Yes Yes No No Yes Yes
Lists Outlook
2000/03		 Live
Hotmail		 Yahoo!
Mail		 Yahoo!
Classic		 Outlook
2007/10		 Apple
Mail		 Apple
iPhone		 Google
Gmail		 Lotus
Notes 6/7		 Lotus
Notes 8.5		 AOL
Desk 10
list-style-image Yes No Yes Yes No Yes Yes No No No Yes
list-style-position Yes Yes Yes Yes No Yes Yes Yes No No Yes
list-style-type Yes Yes Yes Yes No Yes Yes Yes Yes Yes Yes
Tables Outlook
2000/03		 Live
Hotmail		 Yahoo!
Mail		 Yahoo!
Classic		 Outlook
2007/10		 Apple
Mail		 Apple
iPhone		 Google
Gmail		 Lotus
Notes 6/7		 Lotus
Notes 8.5		 AOL
Desk 10
border-collapse Yes Yes Yes No Yes Yes Yes Yes Yes Yes Yes
border-spacing No No Yes Yes No Yes Yes Yes No No No
caption-side No Yes No No No No No Yes No No No
empty-cells No Yes Yes Yes No Yes Yes Yes No No No
table-layout Yes Yes Yes Yes Yes Yes Yes Yes No Yes Yes
Total Market Share 28% 16% 14% 9% 8% 7% 6% 1% 1%

from:http://www.campaignmonitor.com/css/

Filed under: web design Comments Off
25Nov/10Off

How to convert PSD to JPG using Linux convert from command line

I recently had the need to convert psd images to jpg from command line. I browsed the net a little bit and I found an interesting article about how to do it easily. The right command is "convert" and it works for several images type and among them photoshop psd.

here is how it looks like:

/usr/bin/convert -quality 80 -flatten myimage.psd myimage.jpg

Filed under: Programming, web design, web sites Comments Off
4Nov/10Off

Top 10 Wireframe Tips

1.Start Sketching
Sketch them first with a pencil and paper for a quick sanity check. This should take about 30 seconds and opens up the possibility of getting early feedback. This can save a lot of time and money. The feedback can be gained through peer review or, best of all, from some early and informal user testing (you may need to spend a little more than 30 seconds on the sketches if they’re for user tests).

2.Focus on Communication
The key point of wireframes is to communicate. Don’t forget this. Keep them simple and stop working on them as soon as they communicate their key information.

3.Use Proper Documentation
Since wireframes are meant to communicate something, provide some accompanying notes. Whenever possible, each wireframe should include documentation, i.e. revision date, author, page title, interaction notes, etc.

4.Host the Wireframes
If possible, host the wireframe files yourself, rather than sending them out as email attachments. My preferred method is to export the files as PNGs and then embed them within some simple HTML files. This way they’re easy to share and update.

5.Don’t Forget the Goal Of the Page
Keep the goals of the page in mind when designing a wireframe. Focus on driving action. Organize the information into a hierarchy that serves the goal of the page.

6.Pick Your End Point
Prior to commencement, work out who will be consuming the wireframes, how they’ll consume and what level of fidelity is required. Remember that there’s a relationship between the level of fidelity and type of feedback. Will quick paper sketches suffice or will they need to be fully interactive with accurate dimensions? Keep in mind: the less precise the wireframes are, the more liberty and creativity a designer is going to take with them. On the other hand, if you they look perfect designers may feel inhibited and merely “color in” the wireframes, preventing the design process from really getting going.

7.Loop the Rest of the Team in
Wireframes are not just for clients. All members of the web team should provide feedback on them, buying into the process at an early stage.

8.Consider the Content
If your wireframes aren’t sketches then be realistic about the amount of content that will be added to the page. This holds true also for number (and length) of links in navigation. If practical, use accurate sized fonts, images and consider what will happen when more text than is ideal is added. Nothing on the web should be etched in stone, so ask if the design will flow as required.

9.Use Common Elements
If designing a set of pages, use tools that allow you to make multiple changes to all common page elements at once. Moreover, as you’re creating the wireframes, look out for design patterns that repeat. Leveraging these is key to gaining efficiency and consistency.

10.Get Feedback
Don’t be afraid to test your wireframes in a couple of informal user tests. Grab people from around the office and ask them to find various bits of information or explain what they think the function of certain elements is.

from:http://www.uxbooth.com/blog/wireframing-tips-tools-and-techniques-pt-2/

Filed under: web design Comments Off
20Oct/10Off

Less is More: Simplifying your User Experience

Too many options can confuse and weigh down users. Don’t overwhelm them.

Through the rapidly increasing amount of information, messaging, reviews and data online, we know that consumers are presented with more options than ever before. As a result they are becoming more and more savvy and resourceful to research products and services that they’re interested in. Ultimately they’re becoming wiser with how they are making their buying decisions and more demanding to have the information they need, when they need it.

As marketers, it’s important to consider the opportunity we have to lead our consumers from inquiry to purchase by offering them what they need—and only what they need—at every step of the process. No more, no less.

When considering what and when we’re delivering to customers, we need to keep in mind that most consumers are now doing their research through multiple platforms. Whether it’s through their laptop browsers, iPads, Blackberrys or iPhones, the need to develop smart user experiences and intuitive interfaces on every platform is greater than ever.

So how do you ensure you’re providing this to your customers?

Be one step ahead

It’s something that the advertising industry has excelled at for years and something that the digital world can certainly learn from. Who are we communicating with? How do they think and what do we need to say to persuade them towards an action? In our case, what information and options do we need to provide them with to move them to the next step towards their purchase decision?

To fully answer these questions, let’s take a look at the restaurant dining experience. Generally, once someone sits down to eat, you have their full attention and their commitment to spend money with you. For whatever reason, they’ve chosen to engage in a dining experience at your restaurant. In the same way, once someone lands at a website, mobile site, iPhone app, or any user experience that you’ve provided, you have their full attention. Now all you have to do is keep their attention and walk them down the path that you’ve carefully planned and thought through.

How do you carefully plan and think through a user experience?

Start with the end user

Clearly establishing who is going to be using the interface, identifying their wants and desires surrounding your product, and then mapping out their decision making process are things that can’t be overlooked in your planning process. Can you imagine sitting down for dinner at your favorite restaurant and having your waiter ask you what you would like to drink, and then immediately ask what you think you’ll want for dessert later on? You likely have enough trouble trying to figure out what you want for a main course, or if you even want an appetizer.

Stage what you’re presenting your users with in digestible pieces—too much too soon may heighten your drop off rate.

No dessert until you finish your meal

There is a common sense approach to how you are sold at a restaurant. Much like how they stage your dining experience, in web and mobile experiences, our approach needs to be as equally simplistic.
This is where the idea of less is more comes into play. It’s centered around the notion that we don’t want to make our customers think more than they have to. The fewer decisions, the better.

This becomes easier to accomplish when we consider all of our customer touch points throughout the decision making process and specifically what they’ll be looking for at that point. With how connected most people are now, an important part of this is recognizing what platform they’re using and what specific information they’re looking for. An example of this would be someone looking up your website on their way to your store in hopes of finding your address.

Ask yourself the following questions when approaching UX design:

What can we take out of the experience to make it easier for our users to make decisions?
Are we presenting them with a desert option too soon in the process? What options and upgrades would be better suited for another menu at a later time?
How do we keep them engaged through the whole experience?
Less really is more

After identifying what environment or device consumers will be on at any given point along the way, remove all unnecessary options along that path, giving them exactly what they need at each step—no more, no less. The end result will be smaller bounce rates, more sales, customers who feel like you understand their needs, and hopefully as a result, more word of mouth referrals.

from:http://www.uxbooth.com/blog/less-is-more-simplifying-your-user-experience/

Filed under: web design Comments Off
 « Newer Entries  Older Entries »

Pages

Categories

Blogroll

Archive

Meta