Xavi Esteve » English

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.

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.

At last, the CHEAPEST & BEST mobile phone company in the UK

Xavi — Fri, 04 Nov 2011 19:19:41 +0000

After trying several mobile phone network companies such as Orange, Tesco and Vodafone I’ve finally discovered the best mobile phone network company in the United Kingdom. It is called GiffGaff (strange name but keep reading) and it is by far the cheapest and best of them all. Better than T-Mobile, O2, Orange, Vodafone, Tesco, Three, Lebara and so on…

For just £10 a month you get unlimited 3G Internet (there is a flexible limit of 6,000 MB per month which is much more than you can use in a mobile phone), unlimited texts to any UK mobile phone, 250 minute calls to any UK mobile or landline phone and unlimited free calls to other GiffGaff mobile phones (get your friends and family to switch to GiffGaff and you can call them for free).

Already convinced? Click here to get a free GiffGaff SIM card now

Frequently Asked Questions

What is the network coverage quality?

It uses the O2 network so it is by far the best in the whole United Kingdom.

Is there a permanent/fixed-term contract required?

None at all! If you don’t like it you can switch to any other mobile network company whenever you want. Period. No need to tell them or anything.

Can I keep my old number?

Yes! You can try GiffGaff and if you like it transfer your old number whenever you want so you can keep using it seamlessly. To transfer it you need to ask for a PAC code to your current company and then GiffGaff will switch your number during the night so you don’t have any downtime.

Are there any hidden fees or small print?

Transparent as water! GiffGaff has proven to be a serious company, not like other dodgy mobile companies that say you pay X and at the end of the month you end up paying two times what they promised because you forgot to read the small print in the contract.

Can I get a phone with it?

Nope… for that cheap and without contracts they can’t offer free phones but with the money you save you can buy an unblocked phone and still save money. I bought an unlocked iPhone and have been using GiffGaff for the past several months so saved quite a lot of money.

Can I go on a contract mode instead of Pay-As-You-Go?

If you are looking to not have to worry about topping up: Yes! You can set up auto-topup so that every month (or whenever you run out of credit) your SIM card gets more credit and you never run out of it. It is better than a “contract” since you can cancel it or pause it through the website at any time.

What if I have any problems with it? How is the support like?

Here comes the best part, GiffGaff is mostly web based (you still have a support phone number) but I hugely prefer its web based support. The good thing of being web based is that the support is completely free for you and it is also immediate since other expert giffgaffers earn free credits for answering questions successfully so there is always people there helping you out in a few minutes instead of calling and waiting on the line for a useless operator to come available and drive you nuts.

How about roaming and international calls?

Great! They are also surprisingly cheap compared to other mobile phone network companies and they keep lowering the prices every now and then:

All EU countries, Australia, Andorra, Croatia, Faroe Islands, Gibraltar, Iceland, India, Kosovo, Liechtenstein, Monaco, Montenegro, New Zealand, Norway, Pakistan, San Marino, Serbia, Switzerland, Vatican City: 8p/min landlines, 16p/min mobiles, 8p/text, £1.50 per MB
USA and Canada: 8p/min landlines and mobiles, 8p/text, £5 per MB
Other countries: £1/min, 20p text, £5 per MB

Note: When you visit another country you will get a free text with the updated tariffs in there.

250 minutes is not enough for me, is there anything else?

I’ve been using the £10 (250 minutes) for the past several months and never reached the limit but if you speak a lot on your phone you can pay £15 a month and get 400 minutes, or for £20 you get 800 minutes per month, for £25 you get 1500 minutes… which is insane! All of these are with unlimited Internet, texts and GiffGaff calls included so you may want to get your frequent callers to switch to GiffGaff and then you don’t waste any minutes.

YEAH! Where do I get my free SIM card?!

Use the link below to request your free SIM card and get an extra £5 credit thanks to my recommendation. Important: Fill in the form there and in the next step top up £10 of credit but make sure to get a Goodybag, goodybags are the best!

Click here to get a free GiffGaff SIM card

Once you request the SIM it should arrive home in about 3 days (it can take up to 5, don’t stress out). Use it for a few days and let me know your feedback, I am pretty sure you will LOVE THIS COMPANY, personally, it changed the way I saw mobile phone companies, for me they where money suckers, now GiffGaff changed that. Wish we had the same in Spain…

Disclaimer: This is a personal opinion, I’ve done extensive research though. If there is a better option post it in the comments and I’ll update this post. I do not work for GiffGaff or anything similar, I just get free credits when someone asks for a free SIM thanks to my recommendation, the asker also gets free credits so it is a mutual win-win. You can get to recommend other people once you get your GiffGaff SIM card too! :)

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