Xavi Esteve » XHTML

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

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.

Google Web Fonts Pack – 90+ free fonts for the web

Xavi — Thu, 27 Jan 2011 13:59:07 +0000

Modern browsers are now the vast percentage of website users and it is quite safe to use advanced features from CSS3 to some HTML5 as well as one of the most needed features which is using fonts the user didn’t have in its computer. Google is making a great effort on enabling and easing this feature to all web developers by releasing a huge collection of open source fonts created by great typographers that generously have shared them.
You can either download all of them as a pack or have a look at the font screenshots here, once you download them go to the Font Preview to try some sample text and grab the CSS code which is auto-generated.

In the Google Fonts Pack (February 2011) you will find: Allan, Allerta, Allerta Stencil, Anonymous Pro, Arimo, Arvo, Bentham, Buda, Cabin, Calligraffitti, Cantarell, Cardo, Cherry Cream Soda, Chewy, Coda, Coming Soon, Copse, Corben, Cousine, Covered By Your Grace, Crafty Girls, Crimson Text, Crushed, Cuprum, Droid Sans, Droid Sans Mono, Droid Serif, Fontdiner Swanky, GFS Didot, GFS Neohellenic, Geo, Gruppo, Hanuman, Homemade Apple, IM Fell DW Pica, IM Fell DW Pica SC, IM Fell Double Pica, IM Fell Double Pica SC, IM Fell English, IM Fell English SC, IM Fell French Canon, IM Fell French Canon SC, IM Fell Great Primer, IM Fell Great Primer SC, Inconsolata, Irish Growler, Josefin Sans, Josefin Slab, Just Another Hand, Just Me Again Down Here, Kenia, Kranky, Kristi, Lato, Lekton, Lobster, Luckiest Guy, Merriweather, Molengo, Mountains of Christmas, Neucha, Neuton, Nobile, OFL Sorts Mill Goudy TT, Old Standard TT, Orbitron, PT Sans, PT Sans Caption, PT Sans Narrow, Permanent Marker, Philosopher, Puritan, Raleway, Reenie Beanie, Rock Salt, Schoolbell, Slackey, Sniglet, Sunshiney, Syncopate, Tangerine, Tinos, Ubuntu, UnifrakturCook, UnifrakturMaguntia, Unkempt, Vibur, Vollkorn, Walter Turncoat, Yanone Kaffeesatz

Download the full pack here:
Google Fonts Pack (February 2011) (9.89MB)

The list is constantly updated by the Google Fonts team and they give you the option to donate to the font authors so you can buy them a nice dinner to thank them.

WordPress Stalker… I mean Starkers!

Xavi — Tue, 11 Jan 2011 22:16:36 +0000

Everytime I search for the Starkers blank WordPress theme created by Elliot the only thing I recall is that it was called something like “stalker”. And I spend some good 20 minutes trying to find out how it was called exactly.
I’ll use this post as an experiment and try to rank #1 for WordPress Stalker Theme and use it as a shortcut to the real name that I always forget.

This is the link to the Starkers Theme

Starker Theme is a blank theme specially useful for WordPress theme developers. It has the mandatory code and file structure needed to start developing a brand new theme hence saving you tons of time. I prefer this one rather than other WordPress blank themes as all the junk has been removed and you start from a pure start with the minimal code possible which later derives in smaller and more concise code.

BTW, thanks Elliot, it’s great!

Image is a screenshot from the Starkers Theme with the theme HTML code demo overlayed

Code editors comparison: Dreamweaver vs jEdit vs PSPad vs Notepad++

Xavi — Wed, 08 Sep 2010 16:48:19 +0000

A quick comparison on different code editors. I stick with Dreamweaver although it has so many bugs that make me consider other options. jEdit has a lot of functionalities but relies on Java. PSPad is small, flexible and portable. Notepad++ has tons of features and it’s lightweight too.

	Dreamweaver	jEdit	PSPad	Notepad ++
Price	£240-£420	Free	Free	Free
Code view	Yes	Yes	Yes	Yes
Design view	Yes	No	No	No
Browser preview	Yes	No	Yes	No
Text helpers (autocomplete, shortcuts…)	Yes!	No	Yes	Yes
Themes (code highlighting)	No	Yes	Yes	Yes
Debugger	Yes	No	No	Plugin
FTP	Yes	Yes	No (really buggy, not functional)	Plugin
Version control	Yes	No	No	No
Plugins	Yes (but not common)	Yes! (a lot)	Yes	Yes
Open Source	No	Yes (Java)	No	Yes
Support	Yes!	Yes	Yes	Yes
Portable	No	No	Yes!	Yes!
Size	-	-	-	-
Overall rating	9	6	7	-
Website	adobe.com	jedit.org	pspad.com	notepad-plus-plus.org

CSS Sprite Map in Adobe Fireworks Tutorial

Xavi — Tue, 01 Jun 2010 09:42:52 +0000

Adobe Fireworks or Photoshop haven’t got any CSS Sprite Map tool or wizard but it is very easy to create sprite maps. I recommend you to use Fireworks instead of Photoshop for this since the interface is much cleaner and organized and the exported images have smaller size but excellent results. You should also use Smush.it when you finish with your image to compress it even more.

What is a CSS Sprite?

A CSS Sprite is one big image that has many small images in it. We then use CSS to get the little images, all from the big image. Everyone uses them nowadays and once you get the trick of it it is really beneficial for a website. So, what are the advantages of using Sprites? The user will only have to make one server request to get all the icons and logos, etc. Instead of asking for each image separately. Here are some examples: XaviEsteve, Google, LinkedIn, Facebook…

How to create a CSS Sprite Map with Adobe Fireworks

The image map

Place every little image in a large canvas, trying to order them by groups. Leave as few space as possible between images but do not overlap them, leave 1px spacing between them.

CSS properties for the sprite

The main three CSS properties needed for a CSS Sprite are:

background-position: -Xpx -Ypx;
height: 16px;
width: 16px;

Which can be easily found in Fireworks. Click the image or layer you want to know the CSS values and look at the bottom left of Fireworks:

Remember that Background Position is always negative. Nothing to worry about, just add a hyphen (-) in the CSS style sheet.

If we are using

or tags and want to show them as inline elements we should use:

display: inline-block;

IE6 doesn’t support inline-block so use this in the IE6 style sheet:

display: block; float: left;

We can also use

or any other HTML tags we want. If we need to hide the text inside that tag we can put the text in a and hide it:

Text to be hidden

Do not use inline styling, I’ve added it above just to show you the example in one line.

Group properties to optimize the CSS code

To get the best out of CSS sprite maps it is recommended to group the properties and make the code as small as possible.
There are two main ways to save code while creating a sprite map. The first one is to add all the selectors to the same URL:

The second one is to group all the images by its same height/width or any other shared properties like floatings:

Once you have the image and the CSS you just need to call it in the HTML page like this:

This will “magically” convert the into an image.

CSS Sprite Planning for a website

Before starting with creating the CSS Sprite in Fireworks it is good to plan how many icons/images you are going to use and which type of images are you going to use: if they will have transparent background, use a lot of colours or gradients…

How many files will you need?

CSS Sprite map based on its use

Think which graphics are used always and which are just used for specific sections and split them. For example, create one for the home and common content like the header, sidebar, etc. and another one for specific sections that may not be accessed as much. The idea of CSS Sprites is to minimize server requests so packing images by context is the way to go.

Do you need transparency?

Are these images/icons going to be placed always on the same background? If they are going to have different backgrounds save the sprite as a PNG with alpha transparency (or a transparent GIF to support IE6 users). If you don’t need transparency then go with JPG or GIF.

File size of the image

The CSS Sprite map shouldn’t weight more than 300KB. If it does, split it on different ones.

The screenshots of Fireworks were taken using Adobe CS3, the sprite map belongs to PC-Site.co.uk

Top photo by Gadl

jQuery-JavaScript: Basic Cheat Sheet for Beginners

Xavi — Sun, 20 Dec 2009 08:51:34 +0000

Content

Check if element exists

if ($('#infobox').length) { /*exists, do things here*/ }

Change attribute

$('#name').attr('title', 'Hello!');

Change content of a container

$('#main').html('Lorem ipsum
');

Change page title

document.title = 'Hello!';

Add content before/after

$('table>tbody>tr:last').after('This is now the last row.');

Style

Add or remove classes

$('#main').addClass('red');
$('#main').removeClass('blue');

Check if element has class

if ($('#main').hasClass('green')) { }

Ajax

GET with parameters

$.get("page.php", { action: "edit", id: 38 },
  function(data){
   $('#infobox').html(data);
});

Loops

Do something with every matching element

$('table>tbody>tr').each(
  function (intIndex) {
    /* Modify all table rows */
});

Maths

Check if even or odd

if ($id % 2) { /*even*/ }else{ /*odd*/ }

Force string to integer

parseInt(var);

Filter words, numbers or symbols

$(this).attr('id').replace(/[^0-9]+/, '');

Timer

setInterval(timer1s, 1000);
function timer1s() { /*run this every second*/ }