Xavi Esteve » Computers

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

Send and Receive emails from your company’s account directly in Gmail

Xavi — Wed, 16 Nov 2011 16:31:27 +0000

If you have set up a new website or a company and want to send and receive emails with your company’s email address but don’t want to have multiple inboxes (specially when you manage more than 5 different email accounts) the best way to do it is to redirect all your emails to the same email account. And thanks to the power of Google Mail or Gmail you can manage unlimited accounts effortlessly and send and receive emails from different accounts easily into one inbox. Follow these two step-by-step guides to set up receiving and sending:

Receiving emails from your website to your email

Go to your website’s cPanel (if you don’t know what cPanel is then send this website to your web developer to do this for you) and click on Forwarding:

Then click on Add Forwarder:

Now fill in your email account name (what goes before the @ symbol) and select the domain you want to use, then forward it to your Gmail account like in the image:

Click on Add Forwarder and a success message will appear. You can now close cPanel. You must wait for a few minutes or even a few hours for the mail server to update and spread your new email account before it forwards emails correctly and you start receiving them.

Sending emails from your company’s email address

First of all make sure that emails sent to your company’s email address are successfully forwarded to your Gmail account, try sending a test email now and look in your Gmail account for the message to arrive. Once you open the message you should see your company’s email address in the To: field as in this screenshot:

If you are not receiving them then wait a few hours and try again later or check the Spam folder in case it went there.

Once you are receiving the emails you can set Gmail up to start sending emails with your company’s email address:

Go to the top right corner of Gmail and click Options > Mail settings:

The Settings page will open, click on Accounts and Import:

Now keep scrolling down until you see a Send email as section and a link to Add another email address you own, click that:

A popup window will open, on this step you need to fill in the name that will show when people receive an email from your company’s address and your company’s email address, then click on Next Step:

The easy and quick way now is to select Send through Gmail and click Next Step. If you want to send it through the SMTP servers of your company you will need to find them out asking your web developer or IT company. For HostGator accounts have a look at the Email client settings.

The next steps are pretty straight forward, a confirmation email will be sent to the company email address (which will be forwarded to your Gmail account), open it and click on the activation link to authorize Gmail to send emails as the company’s address.

Now, when writing a new email or replying to one, there will be a From: dropdown from which you will be able to choose the account to use:

Organizing your inbox

Once you start using multiple email accounts in the same inbox things may start to get unorganised. To solve this you can create tags. Go to your Gmail and go to Mail settings again (at the top right), then select the Filters tab and click Create a new filter and type in your company’s email address there and click Create filter with this search:

In this step select Apply label and create a new label:

You are done! Now, every time you receive an email to the company’s email address a label will appear next to the subject, you can customize the colour of the label and rename it to whatever you want.

In your inbox sidebar you will be able to filter messages sent only to that email address. Find below my own inbox, I have more than 10 email accounts configured and all of them have a different Label so that I keep everything organised:

If you have any questions or anything is unclear let me know in the comments section below and I will do my best to help you.

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

Cheapest iPhone/iPod stand ever

Xavi — Wed, 05 Oct 2011 17:18:42 +0000

So you don’t want to waste any money in iPhone stands nor care about looks. You are looking for a stand where you can have your iPhone in portrait mode to read, listen to music and use most apps and also in landscape mode to watch movies too. You are lucky because thanks to one of the best inventions in the world… Yes! you got it right, the toilet paper roll! With just a single roll we can create a highly customized iPhone stand without too much effort or complex professional tools. It will just take you 60 seconds to create (without counting step 1). Keep reading for step-by-step instructions.

Instructions

1. First of all, finish a toilet paper roll as you would normally do (no image will be provided for this step).

2. Now get the roll and some scissors and cut it along the dashed line like in the following image:

3. You are done!

If you would like your cheapest iPhone stand to also be able to charge the iPhone… What?! Srsly? Yea! the cheapest iPhone stand can also charge your iPhone while it’s on it. Just cut an extra whole in the back like in the following image and put your cable in:

So that’s how you get a free iPhone stand. In fact, this stand will work for any phone so Androids are also welcome. Furthermore, I guess you could use a kitchen paper roll to create the cheapest iPad stand too.

Did you like this DIY tutorial? Share and tweet it to your friends and Apple fans!