Lo he reescrito, para que sea mucho más intuitivo, mucho más óptimo en cuanto al uso de la memoria, y en cuanto a la detección de errores.

El tutorial antiguo sigue siendo válido, lo único que ahora deberíais usar estos archivos, y no tenéis que subir el xml a vuestro servidor, sino indicarlo cuando abráis la página de migración.

Ah, importante! Un navegador actualizado ;)

Este post es corto, he usado muchas cosas chulas para hacerlo, pero no me da tiempo a explicarlas todas una a una. Entraré con más detalle más adelante.

Si tenéis alguna duda, por favor, dejarla en los comentarios, que no muerdo :P

The post Pasar de blogger a wp, mejor que nunca! first appeared on Emilio Cobos.

Llevaba muchísimo sin pasarme por aquí la verdad. Vamos a ver qué tal se nos da esto…

Razones de mi ausencia

He estado ausente de esta web por bastantes razones, algunas familiares, algo de pereza, pero… También ha habido algo de trabajo de por medio!

He estado trabajando en mi ciudad con una empresa de desarrollo web Innovega (no, no hay tiempo para rediseñar la web, están hasta arriba de trabajo ;), pero para que os hagáis una idea están detrás de proyectos como Groopify), programando en Ruby on Rails!

Lo cierto es que para desarrollar rápido una aplicación compleja es otro mundo: Probad ruby y no volveréis a querer usar PHP en vuestra vida, ni con framework ni sin él ;).

También he tocado algo de angular.js, y he mejorado mi capacidad de organización (poco, todo sea dicho…), además de haber hecho mis pinitos con Django, que es bastante similar a Rails, aunque prefiero el último.

Luego está la facultad, donde programamos en C y… lo creáis o no me gusta!

Y… Eso ha sido todo lo que he estado haciendo este tiempo! Podéis ver las ultimas cosillas de código libre que he ido publicando en GitHub:

• Clib: Una biblioteca de funciones en C, porque no me gusta programar las cosas cinco veces…
• Editable input: Un pequeño javascript que programé para actualizar un par de campos al doble click en rails…
• Tristemente, pero no he publicado nada más de código abierto en bastante tiempo… Y tengo ganas!

Cosas que hacer

Por ahora me toca hacer un porrón de cosas:

• Contestar comentarios: Hay como millones!
• Dar soporte a EC-stars-rating
• Actualizar algún artículo antiguo que sigue recibiendo visitas (modalBox y sobre todo Migrar de blogger a WP)
• Rediseñar esto (a ver qué sale).
• Programar mucho
• Escribir aquí

Y ahí es donde entráis vosotros…

La verdad es que no sé de qué leches escribir porque tengo muchísimo de lo que escribir: que si CSS, Javascript, Ruby on Rails, Django (podríamos animarnos a hacer un mini proyecto), C, PHP, programación en general…

Así que he dicho… Pues si no me decido, a gusto del consumidor. Y he plantado una encuesta en la sidebar…

Sois libres de votar, o incluso mejor proponer en los comentarios ;).

PD: Si me decís qué preferís, si artículos más técnicos o más para principiantes, me hacéis un favor también :P.

The post Sigo vivo! first appeared on Emilio Cobos.

http://emiliocobos.net/?p=787

Hoy os presento un par de clases en php que os facilitarán la tarea de crear webs con urls bonitas:

Demo Descarga Ver en GitHub

Para lograr urls bonitas hay dos alternativas:

1- .htaccess

Usar mod_rewrite es a priori la más «simple» de conseguir urls bonitas, ya que viene integrada en nuestro servidor, pero tiene muchos inconvenientes:

• Es poco mantenible: El día que quieras cambiar la estructura de una url (pasar un nombre de usuario en vez de una id) tendrás que cambiar tanto tu código PHP como tu .htaccess
• Al final trabajas con la query string: Puede haber conflictos entre parámetros pasados por el usuario y los tuyos, o que cualquier otro parámetro sea ignorado. Supongamos que /user/1 redirige mediante apache a /user.php?uid=1. Si quisieras usar un parámetro get para otra cosa, seguramente no funcione ir a /user/4?edit, sino que habrá que crear otra regla específica.

2- Redirigir todas las solicitudes a index.php y desde ahí leer

Ésta es la opción más sana (sobre todo porque mantienes toda tu lógica en el mismo sitio), se consigue con un .htaccess tal que así:

<IfModule mod_rewrite.c>
	RewriteEngine on

	RewriteCond %{REQUEST_FILENAME} !-f
	RewriteCond %{REQUEST_FILENAME} !-d

	RewriteRule ^(.*)$ index.php/$1 [L]
</IfModule>

Se pueden leer las urls a mano (mediante $_SERVER['REQUEST_URI']), pero yo he hecho un par de clases para facilitar la tarea, permitiéndote usar expresiones regulares, y dejándote elegir métodos específicos (GET, POST…).

Un ejemplo sencillo:

Nuestro index.php con nuestra nueva configuración para hacer el rewrite anterior quedaría así:

<?php
include 'src/Router/Route.php';
include 'src/Router/Router.php';

// Si está en el directorio raíz dejar así, si no especificar como primer parámetro '/la-subcarpeta'
$router = new Router\Router();

$router->add('/', function() {
    // Mostrar el home
});

$router->add('/user/([0-9]+)', function($user_id) {
    // Ya tenemos la id del usuario en la variable $user_id, sin tener que acceder a $_GET ni nada por el estilo
    // En este caso habría que comprobar si el usuario existe, y si no mandar un 404
});

$router->add('/*.', function() {
    // 404
});
?>

Más ejemplos:

Podéis ver más ejemplos en github, donde se encuentra el código, o la demo en vivo:

• Ejemplo de url estática (Hola, mundo).
• Ejemplo de url dinámica (cambia «Juan» en la url por una serie de palabras separadas por guiones).
• Ejemplo de url dinámica con subdirectorios (cambia «Pepe Perez»)

Demo y descarga

Demo Descarga Ver en GitHub

The post Router en PHP: Urls dinámicas sin saber .htaccess! first appeared on Emilio Cobos.

Las bases son las siguientes:

• Se regalarán tres plantillas para WordPress, una para cada uno de los tres ganadores del sorteo.
• Para participar, sólo es necesario especificar en un comentario usando tu nombre real, el número de la plantilla que te gustaría conseguir (puedes verlas aquí, cada una tiene un número distinto), y la razón por la que te gustaría conseguirla.
• Sólo es válido un comentario por persona (supongo que eso ya lo imaginabas ;)).
• El sorteo comienza en el momento que la entrada esté publicada (así que si lees esto ya puedes participar) y acaba el lunes 30 de diciembre a las 12:00. Cualquier comentario a partir de esa fecha ya no será válido. Los números serán escogidos aleatoriamente usando random.org. Yo seré el encargado y subiré a esta entrada la captura.
• Tras haber elegido a los ganadores me pondré en contacto con ellos y se les entregará el premio.

Cualquier duda, o lo que sea, ya sabéis, no muerdo.

Actualización: Ganadores

Estoy esperando a que me conteste TemplateMonster sobre la forma de distribuir las plantillas, pero aquí están las capturas que acreditan a los ganadores:

The post Sorteo de 3 plantillas premium para WordPress via TemplateMonster [CERRADO] first appeared on Emilio Cobos.

Lo normal es que hable de desarrollo web, que es lo que más me gusta, pero en la universidad estamos con C a saco, y si de algo me doy cuenta, es que hay cosas que independientemente del lenguaje, son universales. Hago este post como recopilación personal de los aspectos que más importancia tienen en mi opinión como programador.

Como siempre, estoy abierto a la discusión, rectificación o adición de cosas

Organización

Un código bien organizado es más fácil de leer, usar y mantener.

Una de las cosas que me ha enseñado haber «empezado a programar de cero» (en clase no me dejaban usar ni una mísera función, por el hecho de que no lo habíamos dado), es de la importancia que tiene organizar tu código.

Tener organizado el código significa:

Que no se repita

Esto a los guiris les encanta llamarlo DRY (Don’t Repeat Yourself). Para hacer el código más mantenible lo ideal es que cada instrucción sólo se repita una vez, y así sólo habrá que cambiarla una vez, entenderla una vez… y sobre todo, programarla una vez.

Si te encuentras con esto:

int main(void) {
	// Lo ideal sería que la array en este caso fuera dinámica, pero es un ejemplo...
	int v[12];
	size_t length;
	printf("Introduce cuántos números vas a meter (máximo 12):");
	do {
		scanf("%u", &length);
		if ( length > 12 ) {
			printf("Dimensión nó válida, ha de ser menor o igual a 12, repite:");
		} else {
			break;
		}
	} while(1);
}

Te habrás fijado que el valor 12 aparece escrito a mano cuatro veces. El día que queramos permitir 14 elementos nos tocará cambiarlo las cuatro veces.

Este caso es muy simple, la repetición de valores (al igual que en CSS pasa con los colores, tamaños…), y se puede solucionar con una constante:

#define DIM 12
int main(void) {
	// Lo ideal sería que la array en este caso fuera dinámica, pero es un ejemplo...
	int vector[DIM];
	size_t length;
	printf("Introduce cuántos números vas a meter (máximo %d):", DIM);
	do {
		scanf("%u", &length);
		if ( length > DIM ) {
			printf("Dimensión nó válida, ha de ser menor o igual a %d, repite:", DIM);
		} else {
			break;
		}
	} while(1);
}

A lo que voy

Estoy oxidado con esto de escribir y me voy por las ramas…

Todos los lenguajes de programación tienen formas de no repetir instrucciones y valores: constantes, variables, funciones, clases… Como programador debes de tratar de abstraerte lo máximo posible para que tu código sea mucho más polivalente y legible.

Separa y reutiliza

Cuando me encuentro con el código fuente de úna página/aplicación y me doy de bruces con un archivo de 2000 líneas de texto, no puedo hacer otra cosa que llorar…

Por tu bien y el del resto de personas que lean tu código, lo mejor que puedes hacer es separar tu lógica de tu ejecución. Así, podrás reutilizar tu código lógico, y tu código principal, el de ejecución, será mucho más visible y legible.

Llama a tus variables con nombres descriptivos

Cuando digo variables también digo funciones/clases/constantes…

No hay nada como encontrarse un código así:

function at($array) {
	foreach($array as $i) {
		// ...
	}
}

No cuesta nada poner nombres descriptivos a las variables para así facilitar al que lo lee su comprensión:

function purchase($products) {
	foreach($products as $product) {
		// ...
	}
}

Indenta tu código

Sea cual sea la forma que escojas para indentar (tabulación, 2 espacios, 4 espacios…), úsala, y sobre todo sé consistente.

Documentación

Es muy importante saber el uso que hay que darle a un método/función, o lo que almacena una variable. Esto es incluso más importante en los lenguajes con tipos de datos dinámicos (JavaScript/PHP…).

Por lo general no debería ser necesario leer toda la función interna para saber qué tenemos que pasar:

var sendGetRequest = function(url, params, callback) {
	var xhr = new XMLHttpRequest();
	// ...
}

Deberíamos pasar un objeto a params? O tal vez valga sólo con pasar la query string via una cadena? Tal vez soporte ambas?

/**
 * Sends an ajax GET request to a url
 * @param {String} url the target url
 * @param {Object|String} params the GET parameters either in string ("a=1&b=3") or object format ({a: 1, b: 3})
 * @param {Function} callback the success callback
 * @return {XMLHttpRequest}
 */
var sendGetRequest = function(url, params, callback) {
	var xhr = new XMLHttpRequest();
	// ...
	return xhr;
}

No dejes lugar a la duda!

Soy de esos a los que no les gusta ver código en C/JavaScript/PHP/cualquierlenguajedondelasllavesseanopcionales escrito de esta manera:

if( a == 5 )
	c = 2;
	b = 2;

Es posible que el que programó eso fuera consciente de que la variable b es independiente de la condición (y se hubiera equivocado al indentar), pero también es posible que quisiera decir:

if( a == 5 ) {
	c = 2;
	b = 2;
}

A mí este tipo de confusiones no me gusta (pasa lo mismo cuando falta un break en un switch), y por eso no me gusta dejarme una sóla llave por poner.

Ésto es todo? No

Estoy seguro de que se me ha pasado alguna cosa, de ser así la pondré cuando me acuerde (con esta memoria… ). Si tenéis alguna aportación es siempre bienvenida, por mí no os cortéis

The post Conceptos básicos de programación independientes del lenguaje first appeared on Emilio Cobos.

Raciona automáticamente las cookies de Analytics y Adsense, pero es sencillo añadir otros servicios de terceros sin tocar el código, posee una API de eventos para poder añadir esos scripts asíncronamente.

Demo Descarga Ver en GitHub

Características

• Carga automática de Google Analytics y Google Adsense si son usados
• API de eventos para facilitar la carga de cualquier script que cargue cookies
• Sección de opciones

Instalación

Paso 1: Añadir el script

Lo primero será añadir el script y los estilos necesarios. Los estilos son algo muy básico símplemente para asegurar que el mensaje sea visible y podéis modificarlos a vuestro gusto. Los links que veréis aquí están hosteados en github, pero lo ideal sería que cada uno guardase una copia y lo hosteara.

Encima de </head>:

<link rel="stylesheet" type="text/css" href="https://raw.github.com/ecoal95/CookieTool/master/cookietool.css" />

Encima de </body> (éste es el interesante).

<script src="https://raw.github.com/ecoal95/CookieTool/master/cookietool.js"></script>
<!-- Configuración (ver más abajo) -->
<!-- Otros códigos de configuración (ver más abajo) -->
<script>CookieTool.API.ask();</script>

Uso Blogger

En este caso tendrás que sustituir las comillas dobles por simples.

Uso WordPress

Tendrás que tocar los archivos header.php y footer.php de tu tema. Es posible que haga un plugin, pero por ahora es lo que hay.

Si tienes las estadísticas de JetPack activadas tendrás que desactivarlas, ya que esa cookie la manda el servidor y no se puede hacer nada para evitarlo.

Paso 2: Configurar el script

El script admite algunas opciones para mostrar el mensaje y demás. Justo en el comentario de Configuración es donde debemos ponerlo.

Este es un ejemplo con las opciones más básicas:

<script>
    CookieTool.Config.set('link','/politicadecookies.html'); // Link a la política de cookies
    CookieTool.Config.set('message', 'Este es el mensaje que se mostrará, <a href="{{link}}">política de cookies</a>');
    CookieTool.Config.set('agreetext','Sí, acepto'); // Mensaje del botón de aceptar
    CookieTool.Config.set('declinetext','No, me niego'); // Mensaje del botón de No aceptar
    CookieTool.Config.set('position', 'top'); // top o bottom, la posición del mensaje usando los estilos por defecto.

// También podríamos hacer:
CookieTool.Config.set({
    'link': '/loquesea',
    'message': 'Cualquier cosa'
    // ...
})

</script>

Paso 3: Modificar el código que inserte cookies

Aquí viene cómo modificar los códigos de Analytics y Google Adsense, que son los códigos más frecuentes y los que trata el script por defecto.

Google Adsense

Tendréis que usar el código asíncrono de Google Adsense con una pequeña modificación (aquí viene explicado).

Google Analytics

Tendréis que dejarlo tal y como está, pero sin cargar el script:

Código antiguo (_gaq)

Con dejarlo así vale

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXX-Y']);
  _gaq.push(['_trackPageview']);
</script>

Código nuevo (isogram)

En este caso el código que carga el script es un poco más difícil de quitar. Sólo hay que quitar el fragmento que va desde 1*new Date() al fin de la función (})(window...)).

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-27809661-2', 'emiliocobos.net');
  ga('send', 'pageview');

</script>

Otros scripts

Para usar otros scripts tendréis que alterar el código de tal manera que no inserte cookies de primeras, luego podéis usar el script tal que así (en otros códigos de configuración):

<script>
    CookieTool.Event.on('agree', function() {
        // Código que carga las cookies
        // Por elemplo:
        // CookieTool.Utils.loadScript('http://abc.com/script-que-carga-cookies.js');
    });
    CookieTool.Event.on('decline', function() {
        // Borrar las cookies si es posible:
        // CookieTool.Cookie.remove('cookieinsertadaporeseprograma');
    });
</script>

Paso 3: Crear o modificar la página de Política de cookies

Como habéis visto, hay una opción llamada link que lleva a una página (exigida por la ley) llamada política de cookies.

En esa página debéis de explicar qué es una cookie, qué cookies no requeridas instaláis y su finalidad.

Como la herramienta genera una cookie requerida no hará falta añadirla, pero tendréis que añadir una sección llamada Configuración de cookies, donde tenéis que poner el siguiente código html:

<div id="cookietool-settings"></div>

Allí se mostrará una pequeña configuración como en la demo.

Ya!

Pues eso, que ya tendrías tu página acorde a esa salvajada llamada ley de cookies del estado español.

Modificaciones, etc…

Es código libre, así que podéis tocar y cambiar lo que queráis. Cualquier mejora os rogaría que la mandarais a github

Demo Descarga Ver en GitHub

Tú lo has hecho, por qué no lo usas?

Sí lo uso, pero lo uso de un modo «especial»: Yo asumo que vosotros dais el consentimiento, ya que la falta de consentimiento no está tipificada como delito (ver aquí), así que no puede ser sancionada, sin embargo, sí informo y doy opciones para revocar el permiso en mi página de política de cookies.

Si os interesa usarlo así, sólo hace falta cambiar el CookieTool.API.ask() por CookieTool.API.impliedAgreement()

The post Script para cumplir la ley de cookies first appeared on Emilio Cobos.

Personalmente creo que esta ley es completamente innecesaria, es sobrecomplicar las cosas sin ningún motivo: las cookies en el 99% de los sitios web sólo son usadas para mejorar la experiencia del usuario. Pero qué se le va a hacer…

Google Adsense

El caso es que he estado enredando estos días con adsense (que usa cookies), y me estaba preguntando cómo podíamos cargar adsense una vez el usuario diera el visto bueno. El código de adsense (el de toda la vida, el síncrono, y el único que yo conocía) es algo así:

<script type="text/javascript"><!--
google_ad_client = "ca-pub-xxxxxxxxxxx";
/* nombre del anuncio */
google_ad_slot = "xxxxxxxxx";
google_ad_width = xxx;
google_ad_height = xxx;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

Éste código no se puede cambiar, la única forma de insertarlo automáticamente podría ser un iframe que contuviera los anuncios, pero el robot de Google Adsense no rastrearía nuestra página, sino esa página en blanco. Por desgracia no es viable.

Entonces, ¿Cómo puedo cumplir la ley si uso Google Adsense?

Gracias a que a google le ha dado por crear un nuevo tipo de código (el código asíncrono), podemos crear fácilmente los anuncios y sólo mostrarlos cuando queramos cargando el script.

Pero a Google no le gusta que toquen su código…

Es cierto, a mucha gente le han baneado cuentas de Adsense con el pretexto de que el código en la página no era exactamente como debería ser. Últimamente han sido más permisivos, y daban permiso para modificarlo si era para un diseño responsive, un A/B test, etc… (Ver aquí).

La modificación que yo propongo (eliminar el script del código asíncrono, para cargarlo tras el consentimiento del usuario) no está listada explícitamente ahí, pero entra dentro de «modificaciones aceptables». Además sí que lo está implícitamente (tercera pregunta frecuente).

Al meollo: ¿Cuál es la idea?

Básicamente, sustituir todos los anuncios por anuncios asíncronos, y eliminar el script, quedando así:

<!-- nombre del anuncio -->
<ins class="adsbygoogle"
     style="display:inline-block;width:xxxpx;height:xxxpx"
     data-ad-client="ca-pub-xxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

¿Y los anuncios sin tamaño fijo (adaptable)?

Usan el código asíncrono, así que lo mismo, sólo hay que quitar el primer <script>.

Cuando el usuario de su consentimiento se carga el script mediante javascript (publicaré los detalles junto con una herramienta para hacerlo en otro artículo, probablemente a la vez que este, si me acuerdo dejo el link ;)).

Actualización: Script para cumplir la ley de cokies

Pues eso, que ya terminé el script, podéis verlo aquí.

The post Ley de cookies española y adsense first appeared on Emilio Cobos.

Demo Descarga

Bueno, lo que vamos a hacer hoy es buscar tweets con PHP. Twitter nos provee con una API bastante chula, pero por desgracia la autenticación con ella, que se realiza mediante OAuth, es bastante complicada.

Por ello vamos a usar una librería muy bien mantenida llamada TwitterOAuth, que nos facilitará la tarea de hacer las solicitudes a la API.

Lo que haremos por ahora será crear nuestro index.php, una carpeta llamada inc, donde meteremos OAuth.php, twitteroauth.php, Cache.php (éste archivo) y otros archivos que puedan surgir mientras lo hacemos, otra carpeta llamada cache donde almacenaremos las búsquedas, y una última carpeta llamada css para nuestro archivo style.css (yo personalmente lo generaré con compass).

Ya tenemos todo preparado, empecemos!

Paso 1: Crear nuestra aplicación

Lo primero que tendremos que hacer es ir a Twitter Developers e iniciar sesión.

En el desplegable de nuestra foto, hacemos click en My Applications » Create a new aplication. Insertamos el nombre de nuestra aplicación, la descripción y la página en la que va a estar, rellenamos el captcha, y listo!

Aparecerá la página de la aplicación, donde tenemos el consumer key y el consumer secret:

Paso 2: Crear nuestro token de usuario

Para hacer solicitudes a la API necesitamos el token de usuario y el token secret que podemos generar directamente pulsando el botón Create my access token. Con ello ya tenemos todos los datos necesarios para hacer solicitudes a la api.

Paso 3: El index.php

Puedes ver el pequeño formulario descargando el código algo más abajo, pero las líneas relevantes del código son éstas:

$twitteroauth = new TwitterOAuth(APP_CONSUMER_KEY, APP_CONSUMER_SECRET, ACCESS_TOKEN, ACCESS_TOKEN_SECRET);
$results = $twitteroauth->get('search/tweets', array(
	'q' => $_GET['q'],
	'lang' => 'es',
	'count' => 5,
	'include_entities' => false,
));

Ésto nos devolverá un objeto stdClass, donde los tweets se guardan en la propiedad statuses

Listo! Ahora ya solo falta mostrarlos a nuestro gusto usando las propiedades adecuadas. Puedes descargar los archivos para ver qué propiedades he usado yo, o ver la demo directamente

Demo Descarga

The post Buscar tweets con PHP (Twitter API 1.1) first appeared on Emilio Cobos.

En este artículo os voy a enseñar mis líneas de .htaccess básicas para cualquier página web.

Nota inicial

.htaccess se evalúa cada solicitud, añadiendo carga al servidor. Por eso, siempre que sea posible, en producción modifica el archivo httpd.conf directamente.

Desgraciadamente, esto no es posible para la inmensa mayoría de los mortales (entre los que me incluyo).

Finalmente indicar que buena parte de estas líneas de código vienen gracias a html5 Boilerplate. Creo que recopilarlos aquí y hacerlos accesibles a todos puede ser una buena idea.

Redirección del domino

Hay dos opciones: Que quieras redirigir el dominio con www a sin www (de www.midominio.com a midominio.com) o viceversa. Mantener ambos puede llevar problemas de SEO, o acceso a archivos.

De con www a sin www

# Eliminar www.
<IfModule mod_rewrite.c>
  RewriteCond %{HTTPS} !=on
  RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC]
  RewriteRule ^ http://%1%{REQUEST_URI} [R=301,L]
</IfModule>

De sin www a con www

<IfModule mod_rewrite.c>
  RewriteCond %{HTTPS} !=on
  RewriteCond %{HTTP_HOST} !^www\..+$ [NC]
  RewriteRule ^ http://www.%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</IfModule>

Caché de archivos

La caché de archivos puede ser inmensamente beneficiosa para la velocidad de una web. Básicamente: Si un usuario visita cinco páginas de nuestra web, no tiene por qué descargar los mismos archivos estáticos (como imágenes, css y javascript) cinco veces. El navegador puede almacenar esos archivos en el sistema para obtenerlos mucho más rápidamente, pero para ello necesita instrucciones del servidor.

<IfModule mod_expires.c>
  ExpiresActive on

  # Por defecto 1 mes de caché
  ExpiresDefault                          "access plus 1 month"

  # los manifiestos appcache necesitan solicitarse cada vez, por firefox 3.6 (probablemente no necesario actualmente?
  ExpiresByType text/cache-manifest       "access plus 0 seconds"

  # El HTML nunca debe de ser cacheado
  ExpiresByType text/html                 "access plus 0 seconds"

  # Los datos dinámicos tampoco (tal vez podría variar dependiendo de tu aplicación)
  ExpiresByType text/xml                  "access plus 0 seconds"
  ExpiresByType application/xml           "access plus 0 seconds"
  ExpiresByType application/json          "access plus 0 seconds"

  # Una hora para los feeds (cambiar dependiendo de la fecha de actualización de tu web)
  ExpiresByType application/rss+xml       "access plus 1 hour"
  ExpiresByType application/atom+xml      "access plus 1 hour"

  # Favicon (Sólo una semana porque el nombre no cambia, luego podría haber cambios y mantenerse el cacheado)
  ExpiresByType image/x-icon              "access plus 1 week"

  # Imágenes, vídeo, audio: 1 mes
  ExpiresByType image/gif                 "access plus 1 month"
  ExpiresByType image/png                 "access plus 1 month"
  ExpiresByType image/jpeg                "access plus 1 month"
  ExpiresByType video/ogg                 "access plus 1 month"
  ExpiresByType audio/ogg                 "access plus 1 month"
  ExpiresByType video/mp4                 "access plus 1 month"
  ExpiresByType video/webm                "access plus 1 month"

  # Fuentes web: 1 mes
  ExpiresByType application/x-font-ttf    "access plus 1 month"
  ExpiresByType font/opentype             "access plus 1 month"
  ExpiresByType application/x-font-woff   "access plus 1 month"
  ExpiresByType image/svg+xml             "access plus 1 month"
  ExpiresByType application/vnd.ms-fontobject "access plus 1 month"

  # CSS y JavaScript: 1 año. Ten en cuenta que si cambias los ficheros deberías usar una query string o un nombre de archivo diferente para evitar que los visitantes reciban archivos cacheados.
  ExpiresByType text/css                  "access plus 1 year"
  ExpiresByType application/javascript    "access plus 1 year"

</IfModule>

# Eliminar E-Tag
# Estamos enviando periodos de caché muy amplios, así que no es necesario que el navegador compruebe mediante E-Tag si el fichero cambió
<IfModule mod_headers.c>
  Header unset ETag
</IfModule>
FileETag None

Compresión GZIP

GZIP es la manera más rápida de reducir el tamaño del archivo enviado al navegador, mejorando el tiempo de carga. Con las siguientes líneas la activarás en tu web:

<IfModule mod_deflate.c>
    # Force compression for mangled headers.
    # http://developer.yahoo.com/blogs/ydn/posts/2010/12/pushing-beyond-gzipping
    <IfModule mod_setenvif.c>
        <IfModule mod_headers.c>
            SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
            RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding
        </IfModule>
    </IfModule>

    <IfModule mod_filter.c>
        AddOutputFilterByType DEFLATE application/atom+xml \
                                      application/javascript \
                                      application/json \
                                      application/rss+xml \
                                      application/vnd.ms-fontobject \
                                      application/x-font-ttf \
                                      application/x-web-app-manifest+json \
                                      application/xhtml+xml \
                                      application/xml \
                                      font/opentype \
                                      image/svg+xml \
                                      image/x-icon \
                                      text/css \
                                      text/html \
                                      text/plain \
                                      text/x-component \
                                      text/xml
    </IfModule>

</IfModule>

Codificación UTF-8

Si alguna vez habéis tenido problemas con caracteres extraños en vuestro servidor, puede ser por dos cosas: La base de datos o el propio servidor, si es por lo segundo, con las siguientes líneas debería de estar solucionado:

AddDefaultCharset utf-8
AddCharset utf-8 .atom .css .js .json .rss .vtt .xml

Forzar IE a no emularse

Puede que la conozcáis o no, pero hay una pequeña cabecera usada por IE llamada X-UA-Compatible, que puede hacer que IE9 se comporte como si fuera IE7 (por ejemplo). Esto causa bastantes problemas, porque además de usar un navegador menos compilante con los estándares, crea inconsistencias entre versiones, para asegurarse de que IE10 actúa como IE10, IE9 como IE9, etc… y que IE6/7/8 usen Chrome Frame si está instalado:

# Eliminar www.
<IfModule mod_headers.c>
    Header set X-UA-Compatible "IE=edge,chrome=1"
    # Sólo queremos añadirlo para páginas HTML, el resto es un desperdicio de ancho de banda
    <FilesMatch "\.(appcache|crx|css|eot|gif|htc|ico|jpe?g|js|m4a|m4v|manifest|mp4|oex|oga|ogg|ogv|otf|pdf|png|safariextz|svg|svgz|ttf|vcf|webapp|webm|webp|woff|xml|xpi)$">
        Header unset X-UA-Compatible
    </FilesMatch>
</IfModule>

¿Alguna línea de código más?

Soy todo oídos si tienes algo que aportar :)

The post Creando el .htaccess perfecto first appeared on Emilio Cobos.

Ésto es simplemente la presentación oficial de un script que hice hace poco, para emular el funcionamiento de input[type="time"] en navegadores que no lo soportaran, y que puedes ver en github

Demo Descarga Ver en GitHub

Para que os hagáis una idea, el soporte para <input type="time"> es muy escaso. Actualmente sólo Chrome y Opera.

El uso es sencillo, simplemente creamos una instancia del objeto (TimePikr), pasáis el elemento y listo! Si hay soporte nativo se deja como está. Si no hay soporte o el elemento no es del tipo esperado se aplican ciertas operaciones mágicas que…

No, ahora en serio, simplemente ocultamos el elemento y lo reemplazamos por un input[type="text"] con dos flechas y un par de eventos, que hacen el resto: validación, acceso rápido…

Uso

Hace falta cargar dos archivos: el CSS (que hace que las flechitas se vean genial ;)) y el Javascript. Un uso básico sería así:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- ... -->
    <link rel="stylesheet" href="timepicker.css">
    <!-- ... -->
</head>
<body>
    <!-- ... -->
    <input type="time" id="timepikr-me">
    <!-- ... -->
    <script src="timepicker.js"></script>
    <script>
        var picker = new TimePikr({
            element: document.getElementById('timepikr-me');
        });
    </script>
</body>
</html>

Obviamente, si hay soporte nativo no son necesarios, así que… Carga condicional via Modernizr al rescate!

Modernizr.load({
    test: Modernizr.inputtypes.time,
    nope: ['timepicker.css', 'timepicker.js'],
    callback: function() {
        var picker = new TimePikr({
            element: document.getElementById('timepikr-me');
        });
    }
})

Espero que os sea útil :)

The post Polyfill para input type time – TimePikr first appeared on Emilio Cobos.