Xavi Esteve » Web design

iPad web based Code Editor (with extra symbols keyboard)

Xavi — Wed, 08 Feb 2012 16:11:39 +0000

I mostly use the iPad for reading email, news and blogs although I am still perplexed at how few apps there are for actually doing some work. Well, to be honest, there are many apps to do some work. But I believe in platform-agnostic web-apps or SAAS to be the future of our world and the amount, variety and features of current web apps for web development is still quite scarce.

One of the big gaps that I found was regarding code editors. The lack of fast symbol typing in the keyboard is very frustrating and slow (you need to use iOS’s default keyboard and type 3 keys just to get a “<” sign, plus another one to get back). This is why I came up with a proof of concept on additional keyboard rows with extra keys for touch screen devices and added all symbols frequently used for coding and programming so you don’t need to keep switching from one keyboard set to another. It has been optimised for the iPad in portrait mode although with some responsive CSS queries and device detection it can be adapted anywhere.

The code itself is basic HTML, CSS and a bit of JavaScript and jQuery. I’ve kept it simple to aid scalability and customisation. This is how it looks:

Demo and download

Click the following link to open the Code Editor. To test it properly you will need an iPad in portrait mode.

iPad web-based code editor with extra symbols keyboard

License

Public Domain, keeping the Internet open. You can use it commercially and distribute it as much as you want without being forced to credit the author.

Changelog

If you have developed it further send me an email and I will include it in the next release and you in the Credits.

8 February 2012 (v1.0)

First release

If you haven’t seen my iPad HTML/CSS template you must see it now.

Test de usabilidad web económico

Xavi — Sun, 05 Feb 2012 19:47:49 +0000

Si nos falta el tiempo y el dinero para poder ejecutar un estudio de usabilidad de nuestra página web siempre podemos recurrir a sistemas caseros que son rápidos y económicos.

Escoger la lista de perfiles

Muchos usuarios visitarán nuestra web en el futuro. Entre éstos tenemos que identificar los diferentes perfiles de usuario (llamados “personas” en inglés) y de estos perfiles escoger los dos o tres principales, si hay algo que está claro es que la página web nunca será del agrado de todos nuestros usuarios ya que es imposible que agrade a todo el mundo aunque sí que podemos adaptarla a la mayoría que nos interese. Un perfil de usuario sería algo así:

Persona de entre 25 y 35 años con poder adquisitivo medio-alto, educación universitaria, que vive en una ciudad, no tiene hijos, con conocimientos medios de informática, que navega entre 30 minutos y 2 horas al día por Internet vía un ordenador portátil o de escritorio. Realiza actividades de ocio entre 4 y 8 veces al mes.

Una vez tengamos los perfiles principales deberemos encontrar gente que se adapte a ellos. Si nuestro presupuesto es bajo podemos recurrir a favores de amigos, familiares y conocidos. Lo importante es que puedan estar presencialmente con nosotros.

Test de usabilidad

Una vez tengamos una lista de los diferentes perfiles de usuario, situaremos al primero delante del ordenador y dejaremos unos minutos para que el usuario se acomode y familiarice con él, encuentre el icono del navegador web y lo abra. Si puedes realizar el test desde el ordenador del usuario muchísimo mejor.

Misión

El siguiente paso es el más importante y es que sólo le encomendamos una misión no más larga que una oración y cuya tarea debe durar menos de 15-30 minutos (podemos encomendarle varias misiones, una a una, pero una sola a la vez). Por ejemplo:

Visita la página xaviesteve.com y compra el aparato de música de entre 100 y 200 euros que más te guste.

En esa frase queda implícito que el usuario deberá: buscar el producto, registrarse para poder comprar, confirmar un enlace de activación de la cuenta en su correo, hacer click en Comprar, introducir sus datos de la tarjeta de crédito (una vez saque su tarjeta de crédito le proporcionaremos una nuestra de prueba) y finalmente confirmar. Otro ejemplo sería:

Mañana quieres ir a cenar a un restaurante japonés, haz una reserva para 2 en la web helloplan.com y encuentra donde está ubicado.

Nuestro papel

Lo importante es que el usuario lo deduzca todo por él mismo sin que tengamos que explicarle nada. Si nos hace preguntas le diremos que no se preocupe, que intente descubrirlo él mismo. Si vemos que duda demasiado o empieza a frustrarse le ayudaremos.

Pensando en voz alta

Al usuario le pediremos que piense en voz alta durante el proceso, es decir, que vaya contando todo lo que piensa, hace y por qué, por ejemplo:

Espero a que la página se cargue, a ver… ¡Ahá! Aquí pone Electrónica, los aparatos de música estarán dentro, ah no, hay otro que se llama Música, debe ser este mejor, hago clic… Ok este es, bien, a ver, aquí centrado hay las mejore ofertas… aquí a la izquierda me sale una lista con subcategorías… voy a clicar aquí…

Analizar con detalle

Si disponemos de una cámara de vídeo o programa de screencasts, nos ayudará muchísimo para poder analizar mas tarde cualquier duda que el usuario haya podido tener y descurir las dudas y micro-gestos que ha tenido y que ocurren en milisegundos (estas son las que cuestan más de detectar y las que tenemos que solucionar) o aquellas donde el usuario duda de entre varias opciones.

Objetivo del test

Nuestro objetivo final del test de usabilidad es detectar qué podemos cambiar o mejorar para que nuestros usuarios reales tengan que pensar o dudar lo mínimo. Cuanto menos hagamos pensar a nuestro usuario menor será su nivel de frustración y mayor el de autorealización. Una web usable es aquella donde el usuario cumple su objetivo por intuición sin tener que pensar demasiado. Para acabar, una cita de uno de los genios en usabilidad web, os recomiendo su libro.

Una web poco usable no es aquella web que no se usará pero sí aquella que se usará menos.
–Steve Krug en ‘Don’t make me Think’

iPad/iPhone/mobile HTML/CSS template for web apps (responsive, no javascript)

Xavi — Fri, 27 Jan 2012 17:03:16 +0000

iPad/iPhone template made in pure HTML and CSS (no JavaScript needed) that works perfectly on any modern browser (iPad, iPhone, tablets, mobiles, laptops, etc.). The template uses responsive queries to hide the sidebar in iPad portrait mode and in the iPhone and smaller screens (you can disable that easily if you want to).

This template is the perfect start for any front-end or back-end developer to build complex web apps without spending time on developing the main structure. Or even to create a mobile version of your current site.

The code has been developed so that there is no “divitis”, completely optimized, semantically correct and minimal HTML code. There are no images or animations at all, everything has been coded using some of the latest CSS3 available features and tested it in most modern browsers. Ready for you to download and start developing. These are some of the template’s features:

Features

App-ready

You can install this template as a normal App Store app, removing the Safari top navigation bar and enjoying the full screen.

Responsive Web Design

Hides the sidebar in iPhone, mobiles and iPad portrait mode. Adapts nicely to the full screen.

No images

The whole template has been built without requiring any images which means less server queries and increased bandwidth savings.

Heading styles

Two different heading styles: the main black one and the smaller blueish.

Anchor texts (links)

The whole clickable area is active so that even fat fingers can click comfortably.

Scrollable

Both the sidebar and the main content can be scrolled separately in the iPad and other touch screen tablets.

Tables

Fully flexible and liquid tables that allow you to include more information while keeping the same look and feel as in any Apple app.

Forms

Fillable textboxes, password fields, select dropdowns and buttons.

Fully tested in several devices

Works great in: iPhone 4, iPhone 3GS, iPad 2, Samsung Galaxy Tab (GT-P7510), Safari 5, Chrome 16 and Firefox 9.

Graceful degradation: IE9 (no rounded corners), IE8.

Not working: (none tested yet).

License

The best of it, I am releasing it under a Public Domain license. This means it is free to use as many times as you want (even for commercial projects) and you do not need to give me credits if you don’t want to. I would appreciate if you do so or if you send me a link to your creation, it will motivate me to develop it further and make me happy.

Download the template

To download the most recent version of the Xavi iPad template click the link below:

Xavi iPad template

And then go to File > Save as… The CSS has been coded in a

2. HTML Zen Coding shortcuts

Typical HTML website structure

With the power of Zen Coding, I can code a full HTML website in one line of code, then press the shortcut (Ctrl+, in Dreamweaver) and voila, there you have all the HTML ready:

html:xt>(div#wrap>(div#header.r>(div.g6>p#logo>span)+(div.g6>form#search>input[type=text]#s+input[type=submit].hide))+(div#topnav.r>div.g12>ul.nav>li*5>a)+(div#container.r>(div.main.g8>div.post>h1+p+img[src=http://dummyimage.com/150x150])+(div.side.g4>h4+p>ul>li*5>a))+(div#footer.r>(div.g6>p>a*1)+(div.g6>p>a*4)))

Here’s the fragmented HTML:

html:xt
div#wrap
div#header.r>div.g6*2
div#header.r>(div.g6>p#logo>span)+(div.g6>form#search>input[type=text]#s+input[type=submit].hide)
div#topnav.r>div.g12>ul.nav>li*5>a
div#container.r>(div.main.g8>div.post>h1+p+img[src=http://dummyimage.com/150x150])+(div.side.g4>h4+p>ul>li*5>a)
div#footer.r>(div.g6>p>a*1)+(div.g6>p>a*4)

Forms and tables

form>label+input:text+input:submit
select#items>option[value=item-$]*3
table>(tr>th*2)+(tr>td*2)

Listings

div.list-vert>(img[src=http://dummyimage.com/100x100]+h3+p.brand+span.rating-5+p.price+(p>a.button-m))

3. WordPress theme

Download the Starter Theme
Add TimThumb
Then grab snippets from WP Snippets
Start coding and customizing

4. WordPress customization

In the functions.php

date_default_timezone_set('Europe/Madrid');
date_default_timezone_set('Europe/London');

TimThumb shortcut

function timthumb($src, $w, $h, $q=90, $zc=1) {
    return get_bloginfo('template_url').'/thumb.php?src='.$src.'&w='.$w.'&h='.$h.'&q='.$q.'&zc='.$zc;
}

Custom field shortcut

function customfield($name, $id="") {
    $value = get_post_custom_values($name, $id);
    return $value[0];
}

Extract images of a post

function catch_that_image() {
    global $post, $posts;
    $first_img = '';
    ob_start();
    ob_end_clean();
    $output = preg_match_all('//i', $post->post_content, $matches);
    $first_img = $matches [1] [0];

    if(empty($first_img)){ $first_img = "/images/default.jpg"; }
    return $first_img;
}

Nice excerpts

/* This function will trim text without
cutting it in the middle of the word and
adding … if longer
*/
function trimtext($text, $length) {
    $words = explode(" ", strip_tags($text));
    $newtext = "";
    $addhellip = "";
    foreach ($words as $word) {
        if (strlen($newtext." ".$word) < $length) {
            $newtext .= " ".$word;
        }else{
            $addhellip = 1;
            break;
        }
    }
    if ($addhellip) {$newtext .= "…";}
    return $newtext;
}

Get exact current page URL

function curPageURL() {
 $pageURL = 'http';
 if ($_SERVER["HTTPS"] == "on") {$pageURL .= "s";}
 $pageURL .= "://";
 if ($_SERVER["SERVER_PORT"] != "80") {
  $pageURL .= $_SERVER["SERVER_NAME"].":".$_SERVER["SERVER_PORT"].$_SERVER["REQUEST_URI"];
 } else {
  $pageURL .= $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];
 }
 return $pageURL;
}

Optimize WYSIWYG editor for SEO

if (isset($wp_version)) {
    add_filter("mce_buttons", "extended_editor_mce_buttons", 0);
    add_filter("mce_buttons_2", "extended_editor_mce_buttons_2", 0);
    add_filter('tiny_mce_before_init', 'extended_editor_change_mce_buttons', 0);
}

function extended_editor_mce_buttons($buttons) {
    return array(
        "formatselect", "separator",
        "bold", "italic", "separator",
        "bullist", "numlist", "blockquote", "separator",
        "link", "unlink", "separator",
        "charmap", "separator",
        "pasteword", "separator",
        "fullscreen", "separator",
    );
}

function extended_editor_mce_buttons_2($buttons) {
// the second toolbar line
return array();
}

function extended_editor_change_mce_buttons( $initArray ) {
    $initArray['theme_advanced_blockformats'] = 'p,h2,h3,h4,h5,h6,pre';
    return $initArray;
}

In the wp-config.php

Disable/limit revisions

# Maximum 5 revisions
define('WP_POST_REVISIONS', 5);
# Disable revisions
define('WP_POST_REVISIONS', false);

5. WordPress must-have plugins

Photo by CoffeGeek

How to charge PPC services? Real numbers and 4 different ways to choose

Xavi — Fri, 04 Nov 2011 17:19:21 +0000

Once you get into the PPC business the first question that usually comes up is How much and how exactly should I charge my client for my PPC services? This article is a sum up of all the different ways and real world situations agencies and professionals charge their clients for managing and running their Pay Per Click campaigns. The research has been done by analysing different agencies and freelancers in the UK and US as well as per expert’s input at forums, Q&A sites and articles.

Four ways to charge for PPC

Lead per defined cost

You run the expenses of the PPC campaign and then sell the leads you obtain individually for £3 to £20 each depending on the lead quality, the business/market you are in and the average ROI of that converting lead. To get an idea lets look at some real examples: a lead for a pluming service may cost £5, a low quality lead for selling/buying a house (real estate) may cost £10 or £15, a lead for some financial investment can cost £20 or more and very good leads in insurance can go up to £100-£200.

This method is one of the most straight away and independent, you can set up your own unbranded website to get leads and then sell those leads individually to different clients at negotiable rates. If you are about to start this way, a good way to get the attention of new clients is to obtain 10-50 leads, offer them for free to a relevant company and tell them you can give them more for £10 each or so.

Percentage based on ad budget spent

The simplest way and the most broadly used to bill a client is by taking a percentage of the total monthly spent in advertising. Usually PPC companies range these percentages at a rate of 15% or 20% but there are also companies who charge 50% or even 100%. For example, if a client is spending £1,000 a month and you are charging him 20% you will be earning £200 per month.

This method is a Win-Win situation for both parties since you get to charge more if the client spends more money on advertising and the client will do so if the PPC campaign is doing good and profitable.

Percentage of lead benefit

Maybe the most realistic of the options is to get a percentage per each lead (either potential prospect or converting lead). The only issue with this method is that it is very difficult to track since your client needs to be completely honest with you. You can install a tracking script or monitor their sales/CRM software to make sure although you may miss phone leads since it is much harder to track phone calls (you can set up a separate phone number just for PPC at an increased cost and system complexity).

This method is the fairest ones of all since you get paid exactly by the business/money you generate but will only work if the client is completely honest or if you have the necessary tools to monitor everything effectively which is usually time consuming and complex.

Pay per hour

The last way is to charge per time spent working on the PPC campaign. Some people charge per hour and some charge per minute. This way you ensure you get the fairest amount of profit based on the time spent working for a client although it is completely independent from the success of the advertisement or the profit you are generating so it can sometimes be less motivating for the client or yourself. Also, your income will be very high during the campaign setup but fairly less once the campaign is running and steady you will just spend time monitoring and tweaking.

Which one should you choose?

Depending on your business structure and the number and characteristics of your clients you may want to go for one or another. If you have a lot of small clients the pay per hour may be the way to go. If you have big and demanding clients you could go for a percentage method. Make your calculations: check how much time you need to spend at the beginning while setting everything up and how much time will you spend every week tweaking and monitoring the campaigns. Then, based on that see which of the methods is the better for you and the client.

Some of these methods are easier to track and charge than others. I personally choose the Percentage based on ad budget spent to be the easiest to track, write the invoices and the most motivating for both me and my clients.

Have you got other ways to charge your PPC services? If you are already doing it, which method are you using? Post your opinion and comments below and if you have any doubts feel free to post them below so we can all help you.

Photo by redspotted

10 essential WordPress SEO tips for content writers (one page PDF download)

Xavi — Tue, 11 Oct 2011 07:22:16 +0000

About a year ago I created a one-page document for content writers in my team to write better online articles. I am now releasing it so you can print it and have it close to you while writing. These are the most basic and important SEO tips you need to know if you want your posts to succeed. You will find a link to download the one-page PDF at the bottom of the article.

1. The most important tip is to create quality content

Posts that are bookmarked, shared, linked, commented or thanked. That should be the purpose of every post and should either be:

Useful (people reference to them)
Interesting (people bookmark them)
Funny or entertaining (people share them)

Here’s a good article extending this concept on writing with a purpose.

2. User goes always first

Keep the post readable and attractive to humans. Google is secondary. Ensuring you write for your users will have long-term SEO benefits.

3. Use Headings to split the content

Heading 1 is always the page title and it is the most important title. Headings to use in the content must start from Heading 2 to a max depth of H6. Use headings instead of bolding or formatting the text yourself.

4. Use eye-catching titles but keep them short

Don’t be just informative, get the user’s attention.

Windows tricks -> Top 10 coolest tricks for Windows!
London party places -> Best secret places to party in London

5. First paragraphs are the most important ones

Search Engines give more importance to the first part of the posts. In fact, really large posts are usually not indexed completely.

6. Be descriptive by adding keywords whenever possible

All headings should have keywords in them:

What I like -> What I like about the HP Pavilion laptop
My trip -> My awesome trip to Barcelona this summer

7. Use synonyms

Don’t repeat keywords you are not targeting for, use a lot of synonyms instead.

What I like about Acer -> Review about Acer computers / My opinion on Acer laptops

This way, users searching for “acer review”, “acer opinion” or “acer laptop” will find our page.

8. Rich formatting increases SEO

Eases Search Engines to identify the content.

Using lists (and differentiating between ordered and unordered lists),
bold and italic words or sentences,
blockquote paragraphs when quoting or pasting literal text

9. Add both inbound and outbound links

Links to authority webs like Flickr, Wikipedia or YouTube can be frequent (you don’t lose any PageRank juice). But don’t link too much to other websites (one or two per paragraph). Always describe the links:

Download the Flash player by clicking here. -> Download the Flash player.

10. Format posts inside WordPress

Text editors like Microsoft Word may add irrelevant or invalid code into posts. If the text is in Word, paste it in Notepad so it looses all formatting, then copy and paste into WordPress and format it there using Headings, lists, bold, italic, etc.

Download the 10 SEO tips for WordPress PDF file

10 SEO tips for WordPress PDF file
If you have any doubts feel free to ask them in the comments. Also, share this article with your team, friends and colleagues for increased results and better blogging.

Twitter Website Template for Adobe Fireworks CS5 (inc. layers, guides, gradients, etc.)

Xavi — Fri, 30 Sep 2011 10:19:59 +0000

Since I discovered Macromedia Fireworks some years ago I moved from Photoshop to Fireworks and I am a big fan and supporter of it, the learning curve is smooth and it is much quicker and easier to work with images. I’ve also been converting web designers to the yellow side by explaining how much better, faster and simpler is Fireworks compared to Photoshop. And whenever I stumble upon another Fireworks fan in events or conferences, a little light brights inside my heart.

I am proud to be releasing a freebie for all the fans of Fireworks today. It is the new Twitter website template as a multilayered Adobe Fireworks CS5 PNG file. The PNG has been designed to be pixel perfect and following the colour and transparencies specified in the HTML/CSS. Everything is organized into folders and layers (see end of post), friendly named, guides and the Twitter CSS sprite map with all the extra icons are included to help you snap everything to the grid and design your own Twitter website-based and learn more about their web design.

License

This template is released free to use for both personal and commercial use, free for you to use and base your work on. No attribution is required although appreciated. If you want to share this template you should not host the source file directly on any website but link to this page (since I keep improving the file, having several copies spread around the Internet will create confusion among users).

Download the Twitter template

Right click the button and select “Save As”:

Twitter Template for Adobe Fireworks CS5 (1.90MB)

If you have any questions, feedback or ideas please post a comment below.

Thanks for using Fireworks!

WordPress – Get depth of pages and subpages

Xavi — Wed, 21 Sep 2011 13:26:46 +0000

This is how you can get how deep a page is compared to the root/home page in WordPress, works for both the current page or any page by providing its ID. Copy this script and paste it in your functions.php file:

function get_depth($postid) {
  $depth = ($postid==get_option('page_on_front')) ? -1 : 0;
  while ($postid > 0) {
    $postid = get_post_ancestors($postid);
    $postid = $postid[0];
    $depth++;
  }
  return $depth;
}

Now paste this anywhere in a loop:

echo get_depth($post->ID);

Other solutions I’ve found on the Internet where 50 lines long or even 100 and they where full of loops and slow, that’s why I decided to code this one.

The home page will return 0, direct childs will return 1, childs of childs will return 2, etc.

One line Alternative

You can also use this one:

echo count($post->ancestors);

Although it will not differentiate between the home page and level 1 pages (will output 0).

That’s it, easy as pie! If you maintain WordPress sites or are a theme developer see this post on advanced tips to improve performance and gain space in WordPress.

Admin Helper – WordPress Plugin (essential tool for theme developers)

Xavi — Sun, 18 Sep 2011 20:09:06 +0000

Admin Helper is a tiny WordPress Plugin that will provide you useful information such as the ID of the current page, the type of page you are viewing (post, page, category, tag, tax, author, archive, 404, search…), the template used by the page, the order of the page and links to edit the page, the Administration Panel and logout.

The plugin is extremely lightweight and is an essential tool for WordPress theme developers.

Admin Helper is hidden and does not show unless you are logged in. Once logged in it appears unobtrusively like this:

So it is not as annoying as the default Admin Bar that comes with WordPress yet it provides everything you need while developing the WordPress theme in a mouse move or click.

Login square: While you are not connected, a 5×5 invisible square at the bottom right of the page will link you to the Login page.

You can download the plugin by following the link below:

Admin helper WordPress Plugin v1.2