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:

    # 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 :)

É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 :)

Por asegurarme, comprobé también en algunos países de latino américa, y las estadísticas son muy similares, e incluso mejores para el desarrollador.

Yo, en mis proyectos ya no doy soporte a este navegador, pero éstas estadísticas sólo dicen lo siguiente: No perdáis tiempo en hacks para que las cosas funcionen en ese navegador, no dejéis de usar una funcionalidad por que no la soporte, simplemente usad estándares (que IE8 soporta decentemente).

Si os preocupáis por la gente que usa IE7, probablemente lo mejor sea avisarles de que actualicen su navegador, o instalen Google Chrome Frame.

Si finalmente también os preocupáis de la gente que tal vez tenga que navegar con IE7 por culpa de los ordenadores de la oficina, tal vez la mejor solución para facilitarte a ti la vida como desarrollador, y a ellos como usuarios, sea servir una hoja de estilos universal.

Ver en Codepen

Explicaciones

El reloj es un simple <div> hecho circular via border-radius, con un borde gris.

Los cuatro indicadores están hechos con dos pseudo-elementos del mismo tamaño, uno de ellos rotado 90 grados. Son del alto del reloj, así que forman una cruz perfectamente centrada. El efecto de mostrar sólo el puntero se consigue en vez de dándoles un fondo sólido, usando un fondo con radial-gradient, que es transparente excepto en el fragmento del 75 al 90%:

/* un círculo transparente desde el centro al 75%, de color desde el 75% al 90%, y transparente a partir de ahí */
background-image: radial-gradient(circle, transparent, transparent 75%, $clock-indicator-color 75%, $clock-indicator-color 90%, transparent 90%, transparent);

Las agujas son tres elementos diferentes, posicionados absolutamente, y que siguen una animación llamada rotate con un tiempo diferente (60s para el segundero, 3600s para la aguja de los minutos y 86400s para la de los segundos).

steps()

El efecto de los segundos se consigue usando animation-timing-function: steps();, que es una función que toma el número de pasos que tiene que dar la animación (60 en nuestro caso, el número de segundos que tiene un minuto), y la palabra clave start o end, que es el momento en el que el valor cambiará.

Ejemplo

Éste es un pequeño ejemplo del uso más frecuente que se le puede dar a la etiqueta:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Función

La etiqueta meta viewport es una etiqueta que se está moviendo a CSS (aunque hasta que haya mejor soporte no deberías de dejar de usar la etiqueta, deberías de echar un vistazo a la directiva @viewport).

Básicamente, indica cómo debería de comportarse el navegador móvil a la hora de mostrar en pantalla la página web.

Por defecto los navegadores móviles muestran con un ancho determinado la página (en el caso del iPhone, 980px, por ejemplo). Por lo tanto la página no sólo se mostrará reducida, sino que además no se aplicarán nunca nuestras @media queries que afecten a dispositivos móviles. A efectos prácticos el iPhone mostraría una web de 980px.

Sin embargo, con ésta etiqueta, podemos establecer el ancho, el alto, el zoom de la página….

Referencia

La meta viewport consiste en una lista de claves=valores separadas por comas. Aquí estaría un ejemplo con todas las opciones disponibles:

Nota: float, es un número con o sin decimales, pixels, es un número entero puesto sin unidades, el resto son palabras literales

<meta name="viewport" content="
	width = [pixels | device-width ],
	height = [pixels | device-height],
	initial-scale = float,
	minimum-scale = float,
	maximum-scale = float,
	user-scalable = [yes | no]
">

Ahora iremos una por una. Todos los ejemplos se basan en el siguiente código (variando el content) de la etiqueta viewport:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="">

	<title>Viewport</title>

	<style>
		body {
			margin: 0;
		}
		p {
			width: 300px;
			padding: 15px;
			background: red;
		}
	</style>
</head>
<body>
	<p>Hola a todo el mundo! [...]</p>
</body>
</html>

width

width indica el ancho que tomará la página en el dispositivo.

Lo ideal suele ser usar la palabra clave device-width (que representa el ancho del dispositivo), pero para páginas con contenido de un ancho fijo (no fluido), es posible usar un valor estático en píxels (leer más abajo).

Para el ejemplo he puesto uno como width=device-width:

Y para el caso (como es) de un diseño estático (300px + 30 de los paddings), he hecho otro ejemplo con width=330, que queda escalado adecuadamente para que la página entre exactamente en el viewport:

height

height indica el alto (¿a que no lo habríais adivinado?). Sinceramente, aún no he visto caso útil para él, aunque sigue las mismas directrices que width (device-height o valor en píxels).

initial-scale

¿Con un dispositivo móvil puedes hacer zoom en cualquier lado de la página, verdad? Pues con esto se regula a qué zoom estará inicialmente la página. Es recomendable ponerlo en principio como initial-scale=1, ya que Opera Mini suele hacer zoom de más al principio si no se especifica.

Para poner un ejemplo algo diferente, he creado un ejemplo con initial-scale=0.75, que mostrará la página a un 75% de su ancho original:

maximum/minimum-scale

maximum-scale, sirve para establecer el zoom máximo de la página, y minimum-scale para el mínimo (sorprendente, ¿eh? ;)).

Lo más frecuente es establecer maximum-scale=1 para evitar que el usuario haga zoom hacia atrás de la página.

El uso de minimum-scale lo discutiremos más abajo.

user-scalable

user-scalable te permite controlar si el usuario puede hacer zoom en la página (por defecto es yes). El porqué no ponerlo como no más abajo.

Otras

Existen otros valores como target-densitydpi (propietaria de Android) que no suele ser utilizado (es más recomendable hacer media queries según la resolución).

Malas prácticas

En mi opinión hay dos muy malas prácticas a la hora de usar la etiqueta meta viewport:

1. user-scalable=no: No dejar al usuario moverse con la página con libertad haciendo zoom puede no ser un problema para la mayoría de los usuarios, pero definitivamente puede convertirse en un gran problema para gente con problemas de visión. Además, es incómodo no poder hacer zoom en una página cuando te apetece.
2. minimum-scale: Lo mismo de antes, limitar el zoom al usuario para mí es un craso error en accesibilidad

El futuro de la etiqueta viewport: @viewport {}

El futuro de la etiqueta viewport no está en una etiqueta viewport, está en tu hoja de estilos. Opera e Internet Explorer ya han hecho la primera implementación de @viewport. Si te interesa, ya se ha hablado de ello aquí.

Siempre he querido tener una lista de lo que leo disponible para todo el mundo, para aquel al que pueda ayudar. El blogroll hasta ahora era el sitio, pero creo que tener los últimos artículos de los sitios será más de ayuda que un simple link en el blogroll.

Demo Ver en GitHub

Por eso he hecho ésta pequeña utilidad con PHP, que gracias a Google Feed API (+ info) lee los feeds cada 6 horas y los actualiza. Para no tener que usar la API constantemente, uso mi sistema de caché con PHP, lo que hace que el sitio cargue con velocidad todas las veces menos una al día.

La idea está inspirada en NetK, de un blog que por aquí ya conoceréis.

Iré actualizando la lista de feeds constantemente (ahora faltan muchos) para que os sea de utilidad.

El código está enterito en Github, así que podéis echarle un vistazo, jugar con él…

Demo Ver en GitHub

Llamamiento

Si tienes un blog con contenidos originales, y quieres que se muestre aquí, puedes o bien contactar conmigo, o bien dejar aquí un comentario. Puedes hacer lo mismo si tu blog ya está aquí y no quieres que esté.

Aviso

La intención de esta utilidad es compartir conocimiento, nunca copiar contenido. Dicho queda. Así que por favor, si vas a hacer algo basándote en esto, procura ser bueno ;)

Ésto no es ningún tipo de broma, como en principio podíais haber imaginado. Sigue leyendo para más información.

Parece ser que Opera (el navegador que todo el mundo adora pero que poca gente usa), ha anunciado junto con la llegada a 300 millones de usuarios, que cambiará su motor a WebKit. Eso significa que también usará V8 como motor de Javascript.

Causas

Opera siempre ha usado Presto (creado por ellos), por eso en principio todo esto me ha parecido un shock, pero Bruce Lawson nos explica en el anuncio oficial las razones:

1. Más compatibilidad, sobre todo en páginas móbiles (que suelen no incorporar prefijos -o-).
2. Chromium es código abierto así que, con Opera colaborando, podrán dedicarse a mejorar de forma común más tiempo del que lo hacen ahora mismo cada uno por su lado

Consecuencias

• Opera tendrá bastante menos poder “político” dentro de la comunidad web que el que tiene ahora: Opera ha sido una compañía que siempre ha movido la web hacia delante soportando estándares. Ahora pasarán a tener mucha menos autoridad en ese campo.
• Adiós al prefijo -o-. El motor de renderizado será el de Chromium, así que usará el prefijo -webkit-.
• Colaboración: Opera va a seguir colaborando en el proyecto WebKit y Chromium, lo que hará que la web avance más rápidamente. La primera aportación de Opera a WebKit va a ser la estructura multicolumna en CSS (multi-column layout). Aquí está el mail oficial por parte de Opera.

Hoy, eso ha cobrado un nuevo nivel: mi primer plugin para WordPress.

Es un plugin muy sencillo de usar, con opciones fáciles, y muy ligero. Podéis verlo en funcionamiento en este mismo post (y en el resto) ;)

Instalación

1- Instalar el plugin

Actualización: Ahora el plugin está en el directorio oficial de WordPress, así que ya podéis instalarlo buscando EC-Stars-Rating desde vuestro escritorio, o descargarlo desde la página oficial. También podéis calificarlo si queréis ;).

Luego tenéis que activarlo, pero ya sabéis cómo va eso, no?

2- Mostrar las estrellas

Ahora sólo falta que en vuestro tema pongáis (allá donde queráis que aparezca, probablemente en single.php o content-single.php) la siguiente línea de código:

<?php 
if(function_exists('ec_stars_rating')) {
	ec_stars_rating();
}
?>

Listo! He pensado en incluirlo en el directorio de WordPress, pero primero tengo que tener una página de documentación (o sea esta).

Configuración

Básicamente el plugin tiene una página (en Ajustes » EC Stars Rating), donde podéis escoger:

• Tamaño de las estrellas: El valor de la propiedad font-size de CSS para las estrellas (si las estrellas son más grandes o pequeñas).
• Colores: El color de las estrellas por defecto, de las estrellas votadas (el valor actual) o al pasar el ratón por encima, y el color de las estrellas al hacer click.
• Mostrar los votos: Si el número de votos y votantes se debería de mostrar.
• Usar microformats: Si se debería usar microformats o microdata. Con microformats aparece un link al post, y consigue que salgan las famosas estrellas en google.
• Usar jQuery: He hecho una versión del script sin jQuery, para aquellos que no lo usen (el 95% de los sitios de WordPress lo usa, pero el mío no, así que… ;)). Sin jQuery no hay soporte para IE7, pero esto a mí no me parece ningún problema…

Soporte

Hasta que este plugin sea aceptado en el directorio de WordPress, cualquier problema (espero que pocos), lo podréis comentar aquí.

Descarga

La solución no es fácil (me llevó tiempo encontrarla), y reside en usar la variable <data:top.newerPageUrl/>. Básicamente, si es un post nuevo, no tendrá un post siguiente, así que ahí está la clave:

El código debería de ir en la plantilla (edición HTML y accesorios expandidos), dentro de cualquiera de estos elementos:

• <b:includable id='post' var='post'> (cualquiera de sus ocurrencias, aunque tened en cuenta que algunas sólo se muestran en la plantilla para móbiles).
• <b:loop values='data:post' var='post'>

Código básico

<b:if cond='data:post.isFirstPost'>
	<!-- Si es el primer post de la página -->
	<b:if cond='data:top.newerPageUrl'>
		<!-- El post tiene un post nuevo, abortar! -->
	<b:else/>
		<!-- Éste es el último post publicado -->
		Último post
	</b:if>
</b:if>

Ejemplo de uso básico: mostrar el texto “último post”

Debajo de <b:includable id='post' var='post'> (o en el sitio donde quieras que aparezca dentro de ese includable):

<b:if cond='data:post.isFirstPost'>
	<b:if cond='data:top.newerPageUrl'><b:else/>
		<p class='last-post-text'>Último post</p>
	</b:if>
</b:if>

Ejemplo de uso avanzado: añadir una clase con CSS al post-outer

El método de uso será similar al utilizado para personalizar las entradas según sus etiquetas. Simplemente sería cambiar:

<div class='post hentry' ...>

Por:

&lt;div class='post hentry<b:if cond='data:post.isFirstPost'><b:if cond='data:top.newerPageUrl'><b:else/> last-post <b:if cond='data:post.pageType == "item"'> last-post-item<b:else/>last-post-homepage</b:if></b:if>
</b:if>'&gt;

Y su correspondiente </div> (encima de el </b:includable>) por >/div<

Conseguido! Ahora puedes hacer con tu CSS:

.last-post {
	/*Estilos comunes para el primer post aquí*/
}
.last-post-item {
	/*Estilos para el último post en su página*/
}
.last-post-homepage {
	/*Estilos para el último post en la página principal*/
}

También hace falta algo de Javascript para llevar a cabo el envío de los datos, y PHP para recibirlos, pero eso lo voy a dejar para un poco más adelante.

Así que empezaremos por un poquito de HTML básico: un contenedor con 5 links (uno por estrella), con el carácter unicode de la estrella (★). Además, añadiremos un noscript para que los usuarios que no tengan Javascipt:

<div class="ec-stars-wrapper">
	<a href="#" data-value="1" title="Votar con 1 estrellas">&#9733;</a>
	<a href="#" data-value="2" title="Votar con 2 estrellas">&#9733;</a>
	<a href="#" data-value="3" title="Votar con 3 estrellas">&#9733;</a>
	<a href="#" data-value="4" title="Votar con 4 estrellas">&#9733;</a>
	<a href="#" data-value="5" title="Votar con 5 estrellas">&#9733;</a>
</div>
<noscript>Necesitas tener habilitado javascript para poder votar</noscript>

Actualmente quedaría algo así:

El CSS

Ahora viene la parte truculenta, el CSS, que hará el efecto :hover. Brevemente: Símplemente cuando tengan el ratón encima del padre, pondremos las estrellas como activas. Luego utilizamos el selector ~ para seleccionar las de la derecha, y quitárselo.

.ec-stars-wrapper {
	/* Espacio entre los inline-block (los hijos, los `a`) 
	   http://ksesocss.blogspot.com/2012/03/display-inline-block-y-sus-empeno-en.html */
	font-size: 0;
	/* Podríamos quitarlo, 
		pero de esta manera (siempre que no le demos padding), 
		sólo aplicará la regla .ec-stars-wrapper:hover a cuando
		también se esté haciendo hover a alguna estrella */
	display: inline-block;
}
.ec-stars-wrapper a {
	text-decoration: none;
	display: inline-block;
	/* Volver a dar tamaño al texto */
	font-size: 32px;
	font-size: 2rem;
	
	color: #888;
}

.ec-stars-wrapper:hover a {
	color: rgb(39, 130, 228);
}
/*
 * El selector de hijo, es necesario para aumentar la especifidad
 */
.ec-stars-wrapper > a:hover ~ a {
	color: #888;
}

Ahora tendríamos algo como ésto:

Ir más allá

El efecto ahora mismo no es precisamente alucinante, pero puedes hacer ciertas cosas para mejorarlo:

• Usa text-shadow: Las estrellas son textos, así que puedes jugar con esta propiedad tanto como quieras para crear efectos mejores (ver ejemplo).
• Gradientes (sólo webkit): Usando -webkit-background-clip: text;, junto con -webkit-text-fill-color: transparent;, podrás aplicar un gradiente a las estrellas (Ver ejemplo)
• Fuentes con iconos: Así podrás usar la estrella que más te parezca, y además los que tengan navegadores que no soporten ese carácter, verán la estrella en todo su esplendor, y no ese cuadrado molesto de unicode.