Tutorial de .

htaccess

Para aquellos que pelean contra WP y el formato de links. Y también para quien lo necesite una

pequeña recopilación de consejos para poder crear y modificar el archivo misterioso que todo lo

puede :p.

Notas de traducción

 Esta traducción fue realizada bajo permiso expreso y por escrito - en e-mail -

del autor: Paolo Tagliaferri (que le manda saludos a Pampita)

 Tanto el artículo original como su traducción se encuentra bajo licencia Creative

Commons Atribución-NoComercial-SinDerivadas
 Los vínculos fueron mantenidos así que éstos seguramente se encontrará en inglés

 Artículo Original: Apache .htaccess tweaking tutorial

Si a alguien se le ocurre algo para agregar/modificar/corregir al tutorial sólo deje un comentario

y vemos cómo hacemos.

La traducción

En este tutorial mejoraremos nuestro sitio web modificando el archivo .htaccess.¿Por qué escribí

este artículo? Porque en la red encontré un montón de artículos sobre esta pequeña bestia pero

cada uno de ellos englobaba un problema en particular y no el uso general del archivo, o eran

demasiado grandes cuando uno necesitaba algo en poco tiempo. Por lo que estoy intentando

recopilar todas los datos útiles en un tutorial sencillo pero monolítico, que será actualizado a

medida que consiga más información. Primero sin embargo, veamos qué es un archivo

.htaccess.

Esto es lo que dice la definición de la wikipedia [en inglés]:

.htaccess (Acceso de Hiper-Texto) es el nombre por defecto del archivo de configuración de

directorios de Apache. Provee de la habilidad para personalizar la configuración de las

directivas definidas en el archivo de configuración principal. Las directivas de configuración

necesitan estar en el contexto de .htaccess y el usuario necesita los permisos apropiados.

Ahora veamos los problemas más comunes.

Índice (Última actualización: 28 de Febrero de 2006)

 1. Control de acceso a carpetas
2. Listado de carpetas
3. Activación de compresión
4. Escondiendo archivos
5. Páginas de error HTTP 404 personalizadas
6. Bloqueo de referers maliciosos - Nada de hotlinking
7. Bloqueo de robots maliciosos
8. No mostrar ‘wwww’
9. Escondiendo la extensión del lenguaje de scripting
10. Consejos y trucos varios
11. Protección con contraseña mediante htpasswd
12. Activando SSI
13. Cambiando la página por defecto
14. Evitando el error 500
15. Directiva CheckSpelling [Control de Ortografía]
16. Agregar sumario MD5
17. Fuentes
18. Herramientas

Control de acceso a carpetas

Podrías querer deshabilitar totalmente el acceso a una carpeta (por ejemplo, una carpeta

con librerías de programación que se incluyen en los archivos principales. En este caso sólo los

archivos principales accederána ellos mediante el sistema de archivos, pero no se podrán

acceder via web). Bueno, simplemente crea un archivo .htaccess en esa carpeta que contenga:

#deny all access

deny from all
Si se quiere permitir el acceso desde una IP específica

#deny all access

deny from all
allow from 10.0.0.1
o para un rango específico de IPs (forzado mediante la máscara de red)

allow from 192.168.0.0/24

también se puede bloquear el acceso a un archivo específico

<Files privado.html>
Order allow,deny
Deny from all

Volver al índice

Listado de carpetas

Si se quiere hacer las carpetas navegables, entonces necesitamos agregar esta línea al

archivo .htaccess

Options +Indexes +MultiViews +FollowSymlinks

Y esta si se tiene el módulo apropiado en el servidor web

IndexOptions FancyIndexing

También se podría querer prevenir el listado de carpetas

IndexIgnore *
Volver al índice

Activar compresión

Se puede habilitar la compresión de datos inherente de PHP para ahorrar ancho de banda

php_value zlib.output_compression 16386

Volver al índice

Escondiendo archivos
Para deshabilitar el acceso a un archivo en particula se puede utilizar una expresión regular y la

directiva Files para denegar acceso a cualquier archivo que comience con .ht

Se puede modificar esto para restringir un archivo en particular (como archivos de configuración,

robots.txt, archivos de logs o lo que se desee).

Order allow,deny
Deny from all
Satisfy All

Volver al índice

Páginas de error HTTP 404 personalizadas

Si se quisiera redireccionar los visitantes cada vez que se encuentran con una página de error

HTTP 404, utiliza éste código:

ErrorDocument 404 /errores/noencontrado.html

Esto redirije el usuario hacia /errores/noencontrado.html cada vez que sucede un error 404.

Obviamente, se puede redefinir para que capture otros errores http (403, 5000, etc). Sigue

leyendo para ver lo que encontré

Consejo: Internet Explorer tiene una “funcionalidad” poco documentada que previene la
utilización de cualquier página de error 404 personalizada que sea menor a 512 bytes de largo.

Los visitantes serán enviados, en cambio, a la página propia de IE, que es genérica y sugiere

que utilizen una búsqueda en MSN para buscar la información en internet. ¡Esa es una forma de

perder visitantes! Asegúrate que tu página personalizada esté por sobre este límite - algo así

como 10 líneas completas de texto y HTML deberían ser suficientes.

Volver al índice

Bloqueo de referers maliciosos - Nada de hotlinking

Si se desea bloquera algunas partes del sitio de cualquier referer malicioso:

RewriteEngine on
RewriteCond %{HTTP_REFERER} ejemplo\.com [NC,OR]
RewriteCond %{HTTP_REFERER} otroejemplo\.com
RewriteRule .* - [F]

Utilizando el motor rewrite [de reescritura] se denegará el acceso al sitio a cualquier visitante

que venga de chicomalo.com u otrositiodesagradable.com. Para evitar el robo de ancho de

banda, se puede bloquear el acceso a un archivo en particular (o extensión de archivos).

RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://([-a-z0-9]+\.)?
example\.com[NC]
RewriteRule .*\.(zip|mp3|avi|wmv|mpg|mpeg)$
http://www.example.com/images/nohotlink.gif [R,NC,L]

Esto dice: “si el visitante no proviene de misitio.net, entonce redirije todos los pedidos de

archivos (zip,mp3,avi,wmv,mpg,mpeg) a una imagen que dice “No permitimos hotlinking” De

esa forma, puedes redirigir a una página, o lo que desees, o p uedes modificar la lista de

extensíones de archivo para incluir/quitar otros archivos. Cuidado: cuando se decide bloquera el

hotlinking de imágenes recuerda que puedes estar bloqueando todo tráfico fuera del alcance de

tu dominio. Por ejemplo, si se posee un archivo de sindicación tomado por bloglines necesitarás

modificar la regla para permitirles a los lectores obtener las imágenes - o el RSS se verá mal.

Volver al índice

Bloqueo de robots maliciosos

En algunos casos se querrá bloquear algunos robots maliciosos, como spiders o descargadores.

Para ello utilizaremos mod_rewrite nuevamente. Normalmente los robots maliciosos ignoran el

archivo de directivas robots.txt por lo que se podría querer forzar un error 403 cada vez que

quieran recorrer o descargar tu sitio:

RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} ^BlackWidow [OR]
RewriteCond %{HTTP_USER_AGENT} ^Bot\ mailto:craftbot@yahoo.com
[OR]
RewriteCond %{HTTP_USER_AGENT} ^ChinaClaw [OR]
RewriteCond %{HTTP_USER_AGENT} ^Custo [OR]
RewriteCond %{HTTP_USER_AGENT} ^DISCo [OR]
RewriteCond %{HTTP_USER_AGENT} ^Download\ Demon [OR]
RewriteCond %{HTTP_USER_AGENT} ^eCatch [OR]
RewriteCond %{HTTP_USER_AGENT} ^EirGrabber [OR]
RewriteCond %{HTTP_USER_AGENT} ^EmailSiphon [OR]
RewriteCond %{HTTP_USER_AGENT} ^EmailWolf [OR]
RewriteCond %{HTTP_USER_AGENT} ^Express\ WebPictures [OR]
RewriteCond %{HTTP_USER_AGENT} ^ExtractorPro [OR]
RewriteCond %{HTTP_USER_AGENT} ^EyeNetIE [OR]
RewriteCond %{HTTP_USER_AGENT} ^FlashGet [OR]
RewriteCond %{HTTP_USER_AGENT} ^GetRight [OR]
RewriteCond %{HTTP_USER_AGENT} ^GetWeb! [OR]
RewriteCond %{HTTP_USER_AGENT} ^Go!Zilla [OR]
RewriteCond %{HTTP_USER_AGENT} ^Go-Ahead-Got-It [OR]
RewriteCond %{HTTP_USER_AGENT} ^GrabNet [OR]
RewriteCond %{HTTP_USER_AGENT} ^Grafula [OR]
RewriteCond %{HTTP_USER_AGENT} ^HMView [OR]
RewriteCond %{HTTP_USER_AGENT} HTTrack [NC,OR]
RewriteCond %{HTTP_USER_AGENT} ^Image\ Stripper [OR]
RewriteCond %{HTTP_USER_AGENT} ^Image\ Sucker [OR]
RewriteCond %{HTTP_USER_AGENT} Indy\ Library [NC,OR]
RewriteCond %{HTTP_USER_AGENT} ^InterGET [OR]
RewriteCond %{HTTP_USER_AGENT} ^Internet\ Ninja [OR]
RewriteCond %{HTTP_USER_AGENT} ^JetCar [OR]
RewriteCond %{HTTP_USER_AGENT} ^JOC\ Web\ Spider [OR]
RewriteCond %{HTTP_USER_AGENT} ^larbin [OR]
RewriteCond %{HTTP_USER_AGENT} ^LeechFTP [OR]
RewriteCond %{HTTP_USER_AGENT} ^Mass\ Downloader [OR]
RewriteCond %{HTTP_USER_AGENT} ^MIDown\ tool [OR]
RewriteCond %{HTTP_USER_AGENT} ^Mister\ PiX [OR]
RewriteCond %{HTTP_USER_AGENT} ^Navroad [OR]
RewriteCond %{HTTP_USER_AGENT} ^NearSite [OR]
RewriteCond %{HTTP_USER_AGENT} ^NetAnts [OR]
RewriteCond %{HTTP_USER_AGENT} ^NetSpider [OR]
RewriteCond %{HTTP_USER_AGENT} ^Net\ Vampire [OR]
RewriteCond %{HTTP_USER_AGENT} ^NetZIP [OR]
RewriteCond %{HTTP_USER_AGENT} ^Octopus [OR]
RewriteCond %{HTTP_USER_AGENT} ^Offline\ Explorer [OR]
RewriteCond %{HTTP_USER_AGENT} ^Offline\ Navigator [OR]
RewriteCond %{HTTP_USER_AGENT} ^PageGrabber [OR]
RewriteCond %{HTTP_USER_AGENT} ^Papa\ Foto [OR]
RewriteCond %{HTTP_USER_AGENT} ^pavuk [OR]
RewriteCond %{HTTP_USER_AGENT} ^pcBrowser [OR]
RewriteCond %{HTTP_USER_AGENT} ^RealDownload [OR]
RewriteCond %{HTTP_USER_AGENT} ^ReGet [OR]
RewriteCond %{HTTP_USER_AGENT} ^SiteSnagger [OR]
RewriteCond %{HTTP_USER_AGENT} ^SmartDownload [OR]
RewriteCond %{HTTP_USER_AGENT} ^SuperBot [OR]
RewriteCond %{HTTP_USER_AGENT} ^SuperHTTP [OR]
RewriteCond %{HTTP_USER_AGENT} ^Surfbot [OR]
RewriteCond %{HTTP_USER_AGENT} ^tAkeOut [OR]
RewriteCond %{HTTP_USER_AGENT} ^Teleport\ Pro [OR]
RewriteCond %{HTTP_USER_AGENT} ^VoidEYE [OR]
RewriteCond %{HTTP_USER_AGENT} ^Web\ Image\ Collector [OR]
RewriteCond %{HTTP_USER_AGENT} ^Web\ Sucker [OR]
RewriteCond %{HTTP_USER_AGENT} ^WebAuto [OR]
RewriteCond %{HTTP_USER_AGENT} ^WebCopier [OR]
RewriteCond %{HTTP_USER_AGENT} ^WebFetch [OR]
RewriteCond %{HTTP_USER_AGENT} ^WebGo\ IS [OR]
RewriteCond %{HTTP_USER_AGENT} ^WebLeacher [OR]
RewriteCond %{HTTP_USER_AGENT} ^WebReaper [OR]
RewriteCond %{HTTP_USER_AGENT} ^WebSauger [OR]
RewriteCond %{HTTP_USER_AGENT} ^Website\ eXtractor [OR]
RewriteCond %{HTTP_USER_AGENT} ^Website\ Quester [OR]
RewriteCond %{HTTP_USER_AGENT} ^WebStripper [OR]
RewriteCond %{HTTP_USER_AGENT} ^WebWhacker [OR]
RewriteCond %{HTTP_USER_AGENT} ^WebZIP [OR]
RewriteCond %{HTTP_USER_AGENT} ^Wget [OR]
RewriteCond %{HTTP_USER_AGENT} ^Widow [OR]
RewriteCond %{HTTP_USER_AGENT} ^WWWOFFLE [OR]
RewriteCond %{HTTP_USER_AGENT} ^Xaldon\ WebSpider [OR]
RewriteCond %{HTTP_USER_AGENT} ^Zeus
RewriteRule .* - [F]

(La lista se obtuvo de aquí)

Volver al índice

No mostrar ‘wwww’

Para hacer esto, basta con una simple regla de re-escritura:

Options +FollowSymlinks
RewriteEngine on
RewriteCond %{http_host} ^www\.example\.com[nc]
RewriteRule ^(.*)$ http://example.com/$1 [r=301,nc]

¿Por qué querría quitar ‘www’? En ese link los fundamentos

Volver al índice

Escondiendo la extensión del lenguaje de scripting

Se puede aumentar la seguridad cambiando la extensión de los scripts para que los visitantes

desconozcan qué lenguaje estás utilizando:

# Make PHP code look like unknown types

AddType application/x-httpd-php .cool
De esta forma, los archivos .cool serán tratados como si fuesen archivos PHP. Se deben

renombrar los archivos que se quiera con esta nueva extensión.

Volver al índice

Consejos y trucos varios

 Mantiene el archivo .htaccess pequeño: este archivo es procesado por el

servidor web en cada pedido (pudiendo causar problemas de performance).

 Mantiene tu archivo .htaccess organizado. Utiliza comentarios (líneas que

comienzan en #) y se lógicamente consistente. Es complicado entender un

archivo .htaccess desorganizado una vez que crece lo suficiente.

 Cuando se utilicen reglas de reescritura de URLs, agrega la opción [L] a

aquellas páginas finales (como la de hotlinking y demás). Esto le dirá al

servidor que no procese más reglas (aumentando la performance).

 Cuidado con la herencia: el archivo .htaccess a nivel raíz es aplicado

también en las carpetas, cuaquier regla .htaccess en la carpeta puede

reemplazar las reglas de la carpeta raíz.

Volver al índice

Protección con contraseña mediante .htpasswd

Esto es útil cuando se quiere agregar una contraseña a ciertas páginas y/o archivos

 Crea un archivo .htpasswd en la carpeta a protejer.

 El archivo contendrá la información de registro de la forma

usuario:contraseña. El nombre de usuario es en texto plano. La

contraseña debe de estar encriptada o no funcionará. Utiliza esta

herramienta para saber qué texto agregar.

 Si se crea el archivo en la PC local, acuérdate de subirlo al servidor en

modo ASCII.

 Normalmente, se puede modificar el archivo .htaccess. La autenticación se

aplicará a la carpeta en la que se encuentre y las subcarpetas.

AuthUserFile /home/pathto/.htpasswd
AuthType Basic
AuthName "Mi Carpeta Secreta"
 require valid-user

Se puede protejer un sólo archivo incluyendo este código dentro de una

directiva

 Asegúrate de protejer el acceso al archivo .htaccess utilizando el primer

consejo.

Volver al índice

Activando SSI

Utiliza éstas instrucciones para activar la interpretación SSI

AddType text/html .html

AddType text/html .shtml
AddHandler server-parsed .html
AddHandler server-parsed .shtml
Volver al índice

Cambiando la página por defecto

Se puede utilizar esta instrucción para cambiar la página por defecto (el orden es importante)

DirectoryIndex inicio.html index.htm index.html index.php

Volver al índice

Evitando el error 500

Pasando el juego de caracteres se evita el mostrar un error 500

AddDefaultCharset utf-8
Volver al índice

Directiva CheckSpelling [Control de Ortografía]

Esta directiva puede ser útil para auto-corregir errores de ortografía simple en la URL

CheckSpelling On

Volver al índice

Agregar sumario MD5

Si no se está preocupado por problemas de performance, se peude agregar un cálculo de llave

MD5 para agregar un MIC [Control de Integridad de Mensaje en inglés] en cada pedido. Esto es

útil para controlar la integridad del mensaje.

ContentDigest On
Volver al índice

Fuentes

 http://corz.org/serv/tricks/htaccess.php
 http://underscorebleach.net/jotsheet/2004/06/htaccess-
prevent-hotlinking
 http://brainstormsandraves.com/archives/2005/10/09/htaccess/
 http://www.usphp.com/security.hiding.html

Volver al índice

Herramientas

 Generador de contraseñas .htaccess

Volver al índice
55 Razones para diseñar en XHTML/CSS

Este es un artículo que, aunque teniendo cierto sentido humorístico, no deja de tener cierta

razón. Tómese con pinzas algunos de estos puntos y no se lo tomen tan a pecho los puristas; el

resto diviértase y a lo mejor se aprende algo también.

Notas de traducción

 El artículo fue traducido sin el consentimiento explícito del autor por lo que

puede ser modificado y/o eliminado eventualmente (se le informó al autor de la

misma sinembargo)

 Los vínculos fueron mantenidos del artículo original por lo que seguramente estarán

en inglés

 Las notas de traducción fueron agregadas entre corchetes (”[” y “]”)

 Via: Two Mad Geeks

 Artículo Original: 55 reasons to design in XHTML/CSS

La traducción

1. Obtienes links desde sitios de muestra como zengarden, stylegala,

cssimport y cssbeauty

2. No necesitas gastar más ideas en decidir los estilos del código del

documento (mayúsculas o minúsculas, comillas o no en los atributos)

3. No necesitas desperdiciar tiempo pensando en qué etiquetas deberían

cerrarse y cuáles podrían (o deberían) dejarse sin cerrar

4. “Ayudas” a los buscadores para que entreguen contenidos más relevantes

al utilizar código semántico

5. Puedes ahorrar en costos de ancho de banda y los visitantes las verán más

rápido al hacer páginas más livianas

6. Será más sencillo actualizar a XHTML 2.0 que nos proveerá de más

herramientas semánticas

7. Con suficiente práctica, la codificación de una página se torna mucho más

sencilla y rápida que cualquier grupo de tags table/tr/td

8. Cuando la codificación es más rápida, puedes dedicar más tiempo en

pensar acerca de la experiencia de usuario

9. Pensar acerca de la semántica de un documento te ayuda a tomar

decisiones sobre el diseño y la arquitectura de la información

10. Puedes hacer un sitio modelo rápidamente para probrar la arquitectura de

la información y agregar lo estético más adelante sólo con pequeños

cambios de código

11. Se puede hacer el diseño luego de que la mayor parte de la base está

hecha con ayuda del cliente (o jefe) para pensar de forma realista cuánto

trabajo queda aún por hacer

12. Es posible poner links directos al contenido de tus páginas (comparado con

Flash)

13. Los botones del navegador como el tamaño del texto y atrás/adelante

funcionan (comparado con Flash)

14. Rediseños y alineaciones en todo el sitio son más simples

15. Es más simple hacer cambios de último momento a los diseños

16. El código limpio facilita o vuelve innecesario la construcción de un CMS

completo

17. El código limpio facilita el que se agregue más gente al proyecto

18. Se puede hacer la base casi totalmente independiente del diseño final, por

parte de dos personas completamente diferentes

19. Se cuentan con muchas formas de jugar con el código intentando

optimizarlo para los buscadores sin afectar la cara visible

20. Tienes control total de los formatos de impresión de tus páginas

21. Tus sitios son automáticamente accesibles por toda clase de navegadores

22. La promoción de los estándares web te ayudará con tu trabajo futuro, sin

necesidad de codificar distinto para cada navegador

23. Con todos los elementos cerrados, el código es más limpio

24. Código bien formado asegura que el sitio funcione en más navegadores

25. Código bien formado ayudará a los programadores de navegadores dándole

más tiempo para desarrollar funcionalidades útiles en lugar de motores que

muestren y entiendan código roto

26. Tus sitios funcionarán en navegadores futuros

27. Tus sitios funcionarán en dispositivos móviles (y otros nuevos)

28. Aprenderás las bases de XML, que sirve para muchas otras cosas

29. Los archivos CSS son guardados en la caché del navegador para agilizar la

carga y minimizar el uso de ancho de banda

30. Tus documentos serán fácilmente conversibles desde hacia otro formato

utilizando XSLT

31. El pensar semánticamente te hace pensar más acerca del contenido

32. Aprender semántica te hace aprecial la organización y escribir tus otros

documentos (inclusive e-mails) de forma más organizada

33. Puedes escribir nuevas tecnologías en tu CV o portfolio

34. Los navegadores modernos visualizan más rápido un documento válido

35. Te sentirás mejor contigo mismo al hacer sitios “de la forma correcta
36. Ellos lo hacen: Dan Cederholm, Jeffrey Zeldman, Jason Santa Maria, Shaun
Inman, Cameron Moll, Douglas Bowman, Dave Shea…

37. Pertenecerás a un “movimiento”, haciendo buenos contactos, etc.

38. Aprenderás a apreciar nuevsos navegadores que provocan competencia y,

después, mejores navegadores

39. No existe más la etiqueta blink

40. La codificación estricta te enseña a ver más rápido los errores

41. Puedes intentar hacer dinero escribiendo un libro acerca de esto

42. Hay más oportunidades de trabajo si conoces estas nuevas formas

43. Aprendes a entender mejor cómo funciona un navegador

44. Puedes usar hacks y técnicas con nombres cool como “seamos buenos con

Opera”

45. Pueden comenzar a importarte los meta-datos, tipos de documento y tipos

de caracteres

46. Con más gente produciendo páginas más livianas, la cantidad de datos

moviéndose en toda la red será menor y todas las conexiones serán más

rápidas

47. XHTML tiene un nombre más cool que HTML

48. Existe más gente pensando sobre las ventajas, desventajas y trucos de

código de XHTML, lo que produce una base de aprendizaje más grande

49. Puedes utilizar, básicamente, la misma plantilla de código para muchos

sitios diferentes

50. Aprender a leer y escribir [código] rápidamente posibilita el uso de

herramientas más económicas (notepad)

51. Google sabe que:

 4,380,000 xhtml better than html > 4,370,000 html better

than xhtml [en español ambas búsquedas devuelve 1.010.000

resultados]
  206 “xhtml is better than html” > 87 “html is better than

xhtml” [en español es 1 a 0 sólamente]

 2,130,000 xhtml sucks < 10,300,000 html sucks

52. Cuando todos los navegadores comiencen a entender el MIME-type (xml)

correctamente, no hará falta convertir todos los sitios de HTML sólo para

ajustarse al MIME correcto

53. Meintras más gente utilice XHTML, nos aseguramos que en el futuro IE

necesitará entender el MIME-type correcto

54. La accesibilidad es reforzada al requerir atributos Alt para las imágenes

55. Simplemente no hay tantas razones para utilizar HTML o completamente

Flash en su lugar
CSS al desnudo

Los casi 200 locos que, según mis estadísticas, van a entrar hoy a esta página se preguntarán

qué pasó con el diseño. Los que leen desde un lector de feeds, vengan y pregúntenselo.

La respuesta empieza medio filosófica: la blogósfera se alimenta constantemente de memes que

están dando vueltas por todos lados. Por fin creo que una vez inventaron uno que valía la pena.

La idea de todo esto es fomentar los estándares. Mostrarle a tu público cuán accesible es tu

sitio aún sin una hoja de estilos, el HTML pelado y desnudo.

¿Para qué?

Esto puede parecer inútil a algunos. Otros dirán que con Flash estas cosas no pasan. Pero yo les

digo que así como lo ven es como lo van a ver en una Lynx corriendo en una XT con linux en

disquette, en un Opera, Firefox, IE, en el navegador de un celular, una palm o lo que se les

ocurra. Y el usuario va a poder usarlo tranquilamente por más que no tenga la última

tecnología o no la quiera usar. Lo que es más, una persona con problemas de visión

seguramente no ve cuán lindo queda tu sitio con colorcitos; lo prefiere así para que su programa

se lo lea en voz alta.

Esto también demuestra para qué se hizo CSS. El HTML no es un lenguaje de presentación, sólo

le da una base a Internet para poder inter-relacionarse. Todo el resto de arriba son adornos.

Si está hecho con estándares: cualquiera lo va a poder usar.

La locura es obra de Dustin Díaz. Es sólo un día al año, el 5 de Abril, en el que estamos seguros

que todos nuestros usuarios van a estar viendo nuestro sitio igualito sin importar si lo están

imprimiendo, si perdieron la visión, en su gadget favorito o en un proyector.

Demostremos que el contenido sigue siendo lo importante

¿Cómo?

Hay varias formas, todo depende. La más sencilla es simplemente comentar la línea de la hoja

de estilos. Sin embargo vas a necesitar hacer esto todos los años (si tu locura da para tanto).

Para eso existen otras soluciones:

WordPress

En el archivo headers.php (que se encuentra en el directorio wp-

content/themes/nombre_del_theme/) tienen que cambiar la línea:

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?

>" type="text/css" media="screen" />
por el código:

<?php
$DustinsNakedDay_isToday = (date('md')=='0405');
$DustinsNakedDay_allPages = true; // false for just the home
page
$DustinsNakedDay_getNaked = ($DustinsNakedDay_isToday &&
(is_home() || $DustinsNakedDay_allPages));
if(!$DustinsNakedDay_getNaked) { ?>
<link rel="stylesheet" href="” type=”text/css” media=”screen” />
<?php } ?>

Simple PHP

Agregás el código siguiente y luego utilizás la función como guarda de un if que incluye el código

de tus hojas de estilo:

<?php
function is_naked_day() {
$start = date('U', mktime(-12,0,0,04,05,date('Y')));
$end = date('U', mktime(36,0,0,04,05,date('Y')));
$z = date('Z') * -1;
$now = time() + $z;
if ( $now >= $start && $now <= $end ) {
return true;
}
else {
return false;
}
}
?>
Nótese que esta función devolverá que es el día de desnudos si en algún lugar del mundo

todavía es 5 de Abril.

El que se quiera prender, bienvenido sea. El que no, allá él.

Customize plugin (Wordpress)

Customize plugin for Wordpress
Provides css based customization for themes. Lets themers offer customization options with
their theme really easily, just with a few css tricks ! This plugin is free and open source, as
usual.

Download the Customize plugin (v1.0.1)

And start customizing !
This plugin lets users customize their theme easily, and themers provide customization
options just by adding some special comments in css. Freshy 2 is the first theme to provide
support for customize.

For users :

Easily customize your theme by changing images, colors, elements sizes, fonts or anything
the theme provides customization options for.

Download the plugin, place the customize folder in your wordpress plugins folder, and then
activate the plugin. A new tab will appear when you go to “Presentation”, named
“Customize Theme”, providing options for your theme if it is compatible.

For themers :

You made a great looking, neat and sweet theme ? Would not you like to let users change
some colors, backgrounds, sidebar width or make layout whether liquid or fixed ? Grr
making that stupid form, saving those database entries, hey i’m just a css coder man ! Cool,
this is exactly for you, then, just see :

This code :
a {
    /*:Navigation color*/
    color:#ff6600;
}

Gives a customize form with :

Some explanations : You must create a separate css named “custom_template.css” in your
theme folder. Write this little css snippet in it. You just saw that comment in the css, above
the color property ? That’s the only thing you need : add a comment beginning with “:” and
then add the name you would like to give to the property. Here i chose “Navigation color”,
but it could have been anything else.
With this only comment, and if the Customize plugin is installed and activated, then the
user will be able to change this value in the Customize panel, with a cool color selector.

Another example ?

body {
    /*:Header image*/
    background-
image:url(images/headers/bubbles.jpg);
}

Adds to the form :

It’s magic ! A list of images to choose from is provided to the user. In fact, those are all the
images located in the “images/header” directory. When the user hovers an image, a zoom
preview appears. It is also possible to upload an image. This example also shows that css
shortcuts, eg. “background:…” are NOT allowed, since we need single property-value
pairs. Use “background-image”, “background-color”…

Yet another ?

#title_image {
    /*:Header height*/
    padding-top:200px;
}

Adds to the form :

Sliders are provided for all length values. User can also choose between px, em or %,
which is great for example to switch between liquid or fixed layout.

But hey, wait a minute ! What if i do this :

a {
    /*:Navigation color*/
    color:#ff6600;
}
.sidebar h2 {
    /*:Navigation color*/
    border-left-color:#ff6600;
    /*:Navigation color*/
    color:#ff6600;
}

No worries, all of this will be handled by the plugin, you can even mix classes, mix
properties, names, whatever, only one field will be output. It will work ok since you did add
the special comment before the property-value pair.

Note that any property will work, providing a specific input widget or a simple input as a
fallback.

Besides this, you can provide additionnal sub-themes with your theme. They can be some
preset to choose from, or completely different css to provide additional properties or a
different layout. Just add some css files with names beginning with “custom_” and use the
same rules as for custom_template.css. These stylesheets will appear as a select box in the
Customize panel :
Users can also save their own settings. In fact they have to, that’s the way settings are
applied :

If for some reasons the user can’t write files, values are stored as variables. Note that i did
not test this extensively so let me know if you succeeded or failed.

Plugin YammYamm (Wordpress)

Big update ! A few bug corrections and now widget compatible !

Download : Plugin YammYamm 0.6 for Wordpress

YammYamm (yet another multilingual manager x2). You create a top category and a top
level page for each language. In the options panel, you set the languages. When you create
an article, make it under the language top category. When you create a page, make it under
the language top page. Then you call the appropriate functions in your template for
language selection and navigation display. That’s it.

Usage :

1. Unzip then upload the yammyamm folder in the “plugins” folder

2. Create a top-level category for each language.
Exemple : “Français” and “English”.
 3. Create a top-level page for each language.
Exemple : “Accueil” and “Welcome”.
4. Go to your space, then “Manage”, then “YammYamm”.
5. For each language do something like this :

6. Go to your space, then “Options”, then “YammYamm” and set your options
7. Then you must tell your template to use YammYamm :

There are 2 files to edit:

1. sidebar.php :
Edit your sidebar.php then call the function “yy_menu($args_page,$args_blog);” instead
of “wp_list_cats” and/or “wp_list_pages” like this :

<ul> <?php if(function_exists('yy_menu'))

yy_menu('sort_column=menu_order&title_li=','title_li=&hierarchical=
1'); ?> </ul>

Explanation : The function will display the menu (with “ul/li” tags) automagically
depending on whether the visitor is on a page or a post, and will guess the language too.

1. The first argument is equivalent to the internal fonction “wp_list_pages”

2. The second argument is equivalent to the internal fonction “wp_list_cats”

Update : To show always and only the blog categories, dont fill the “$args_page”
argument, and do the contrary to show only the pages :

<ul> <?php if(function_exists('yy_menu'))

yy_menu('','title_li=&hierarchical=1'); ?> </ul>

2. header.php :
1. At the very beginning add :

<?php if(function_exists('yy_redirect')) yy_redirect(); ?>

It will detect the language from the browser and redirect to the home page og this
language.
Update : In the options panel, you can choose whether to set the top page or the
top category as the home of your website.
 2. When you want to add a language selection menu :

<?php if(function_exists('yy_lang_menu'))
yy_lang_menu("lang_menu"); ?>

This will output :

<li id="fr_FR" class="lang_menu current_page_item"> <a

href="http://www.jide.fr/francais/"> <span>francais</span>
</a> </li> (etc...)
One of the biggest part of this update is that there is now a sidepanel in the admin
page : When you write a blog post, if no langu_age is set for that post, all the categories
will be shown. If you set a language, only the sub-categories will display :

That is the same for the pages. If no language is set, all the pages will be shown. If you
choose a language, only the children pages will display :

Roadmap :

 bug of “ALTER TABLE”

 automatise categories and pages creation for languages
 automatise languages creation + flags
 make shortcuts to create modify etc in the sidepanel
 link posts and pages in different languages
 link categories
 use options rather than a table
 handle rss correctly with languages
 make compatible with widgets