the
Old Fashioned

Un análisis del nuevo Cadena3.com

Recientemente, Cadena 3 presentó su nuevo sitio en un evento con bombos y platillos en el Sheraton de Córdoba. Lamentablemente, el sitio está tan mal encarado que las críticas empezaron a aparecer enseguida en toda la blogósfera cordobesa.

A continuación, contribuyo con un análisis visual y de código sobre el sitio, esperando que Cadena 3 tome estas sugerencias para mejorar.

Continue reading…

Pequeño hack para IE: El hack del selector universal

Sinceramente detesto los hacks en CSS. Sólo agregan código que solamente ensucia tu CSS por culpa de algún navegador con errores de interpretación en las especificaciones (léase Internet Explorer). Tal vez los dolores de cabeza más conocidos por los desarrolladores, sean los misteriosos márgenes duplicados, o el tener que usar —en ciertas ocasiones y en ciertos elementos— padding en vez de margin, sin ninguna razón aparente, todo porque IE así ha dicho que sea.

Hay hacks de todo tipo y para todos los navegadores, buscando un poco en Position Is Everything tal vez puedas encontrar la solución a tu problema. Pero si no la has encontrado, todavía puedes usar el último recurso: * html.

Vamos por partes. El selector universal, representado por el caracter asterisco (*) selecciona todos los elementos del árbol del documento. Esto quiere decir que la siguiente regla:

* { color: red; }

Le asignaría el color rojo a todos los elementos del árbol del documento, sobreescribiendo así su herencia (Eric tiene un excelente artículo sobre el poder de los selectores universales). Así, cualquier elemento de un documento HTML tendría el color rojo asignado.

Ahora bien, volviendo a nuestro hack:

* html { }

Esta regla en CSS, quiere decir “aplica esta regla a todos los HTML hijos del elemento universal”, o lo que es lo mismo, “aplica esta regla a todos los HTML descendientes de *“, o “selecciona todos los HTML hijos/descendientes de todos los elementos”. Ahora bien, como HTML es el elemento root por defecto (es decir, es el elemento por el cual comienza el árbol del documento ), no selecionariamos nada, ya que HTML no puede ser hijo de ningún otro elemento. La regla entonces no tiene sentido, pero es válida en CSS y nos servirá para ocultar reglas a navegadores buenos y mostrarlas al navegador malo (IE), ya que cualquier regla empezando por * html, es interpretada por IE (lo veremos más adelante) y puede ser usada a nuestro beneficio.

Esta regla, aunque sencilla, puede prestarse a confusión. ¿Por qué decimos “selecciona todos los HTML hijos de *” y no “selecciona todos los HTML”, o en todo caso, “selecciona EL HTML”? Si estamos pensando en “selecciona todos los HTML”, estamos pensando en D.O.S., en donde poner un dir *.txt quiere decir “muestra todos los archivos .txt”. Aquí, el espacio en blanco hace la diferencia. Al tener el espacio en blanco, estamos aplicando selectores descendentes y el elemento universal se toma simplemente como eso, como el elemento que quiere decir “todos los elementos”. La clave es esa, el elemento * significa “todos los elementos”, y no “todos los elementos X”.

Volviendo al hack, Firefox y Opera simplemente ignoran cualquier regla que empiece con * html, sin embargo, IE la interpreta. Entonces, el siguiente código:

* html body h1 { color:blue; }

Es interpretado por Internet Explorer como html body h1 { color:blue; } (noten que no interpreta el asterisco) y el resultado sería que todos los H1 (hijos de BODY y obviamente de HTML) tendrían color azul. En Firefox y Opera, no pasaría nada.

El hack funciona siempre poniendo a BODY como elemento hijo de HTML y luego poniendo el elemento que queremos estilizar, es decir, poniendo siempre * html body mi-elemento, lo cual es lógico, pues según el árbol del documento, no hay elementos para dar estilo entre HTML y BODY, es decir, no podríamos poner algo como * html h1 (nos estaríamos salteando a BODY, lo cual es incorrecto, pero sin embargo valida perfectamente).. Funciona si se pone * html h1, no hace falta ser tan estrictos con el árbol del documento siempre y cuando respetemos qué elemento contiene a quién (gracias Fede).

Nota: No lo piensen mucho ni se descerebren como yo, según el blog de IE, este hack ya está deprecado. Pero quien sabe, hasta que salga IE7 todavía puede serles útil :)

Como crear tu propio tema para Wordpress (Parte 1)

Bueno, ésta es la primer entrega de la serie “como crear tu propio theme para Wordpress desde cero”. En esta serie de artículos trataré de explicar, dummies-friendly, cuales son los pasos necesarios para crear tu propio theme o template para Wordpress, el sistema de publicación para blogs más usado hoy en día.

Qué necesitas saber/tener para aprovechar al máximo estos artículos:

• Tener una copia de Wordpress 1.5 instalado en tu servidor personal o en tu hosting. Lo recomendable es hacer todas las pruebas en tu servidor web personal.
• Mínimos conocimientos de XHTML, CSS y PHP.
• Curiosidad por ver como funcionan las cosas y muchas ganas de sacar los vestigios de Kubrick de tu blog :)

Vá a ser un artículo realmente introductorio, apto para que cualquier persona curiosa —y con ganas de modificar su theme actual— pueda echar mano en el código y armar su propio theme para Wordpress. Sin más, empecemos entonces por ver lo primero: La anatomía de Wordpress.

La estructura de Wordpress

Wordpress tiene una forma bastante lógica de manejar las “caras” de los blogs. De hecho, ésta forma de armar un blog les será conocida a los que vienen programando sitios dinámicos. La idea es básicamente separar cada sección del blog en archivos independientes, de manera que cada archivo pueda modificarse como deseemos. Luego, cada archivo o sección del blog, podrá llamarse desde un archivo maestro para armar cada tema.

Este archivo maestro en Wordpress se llama index.php. Como veremos más adelante, este template (para no confundirnos, llamaremos así a los archivos de Wordpress que se usan para crear un tema) incluirá llamadas a los otros templates de cabecera, contenido, barra lateral y pie de página que conformarán el blog.

Además de estos templates fundamentales, Wordpress también tiene templates especiales para los comentarios, las categorías, los enlaces, los autores, los archivos del blog, la página de búsqueda y hasta para la página 404 (error que devuelve el servidor cuando no se encuentra una página determinada). Por otro lado, este CMS es también capaz de manejar páginas individuales para el blog. Esto nos permitirá, por ejemplo, manejar secciones (digamos, “acerca de”, “portfolio”, “contacto”, etc.). Si me estuvieron siguiendo, entonces ya se van dando una idea de donde radica el potencial de este sistema de publicación: Wordpress también puede ser usado como un perfecto CMS para sitios de propósito general, y de hecho, no tiene nada de que envidiar a sus primos más grandes como Drupal o Mambo.

Veamos gráficamente el árbol de directorios de una instalación clásica de Wordpress:

/
wp-admin
  	wp-content
		plugins
		themes
			classic
			default
	wp-images
		smilies
	wp-includes
…
…

En la raíz de una instalación de Wordpress encontramos los archivos de configuración del sistema de publicación, además de carpetas con funciones que luego serán usadas por el CMS (agrupadas en archivos con extensión PHP). La carpeta wp-admin contiene todas las funciones que se usarán en el panel de administración de Wordpress. En wp-images residen las imágenes que vienen con el CMS, (como ser los emoticones) y las imágenes que se usarán en el panel de administración (el logo del sistema, las imágenes de fondo). En wp-includes encontraremos las funciones que manejan los comentarios, los enlaces, y algo muy importante, las funciones que definen las etiquetas (tags) para armar los templates (veremos que son más adelante).

Dejamos para el último la carpeta wp-content, puesto que es la que más nos interesa. En ella deberemos incluir los templates que conformarán nuestro tema de Wordpress. Los templates de cada tema se agrupan en carpetas (fíjense que la instalación básica de Wordpress trae 2 temas por defecto, classic y default). Como no somos originales, nuestro nuevo tema será bautizado como “mitema”, por lo que crearemos una carpeta con ese nombre dentro del directorio themes.

Además, dentro de la carpeta wp-content, hay una sub-carpeta llamada plugins, que servirá como repositorio para la instalación de plugins para Wordpress. Un plugin permite personalizar el sistema agregando funcionalidades extra de una manera sencilla (basta copiar y pegar el plugin y activarlo desde el panel de administración).

En resúmen: Para crear un nuevo tema para Wordpress, el único directorio que nos interesa es /wp-content/themes/. En el estarán los templates que conformarán nuestro nuevo tema. Cada tema, tendrá su propia carpeta.

Esta fue la primer entrega. Mañana seguiremos explicando más sobre la creación de un tema nuevo para Wordpress. Cualquier duda, en los comentarios :)

Una introducción a XHTML

Nota: El siguiente artículo fué publicado en la revista argentina USERS, en la edición #171. El contenido del mismo está bajo una licencia Reconocimiento-NoComercial-SinObraDerivada 2.0. Este artículo puede puede haber sido editado para la versión impresa de la revista con el fin de evitar localismos. Actualmente, se encuentra en proceso de revisión, se omitieron capturas de pantalla y recuadros informativos. Les aconsejo comprar la revista, o esperar a que el artículo esté disponible en la web de Tectimes para descargarlo en formato PDF.

Siguiendo con nuestra serie de artículos sobre desarrollo web orientado a estándares, en esta ocasión les explicaremos en que consiste XHTML, explicando paso por paso la estructura de un documento en este lenguaje.

Continue reading…

Hacia un nuevo modelo para construir la web

Nota: El siguiente artículo fué publicado en la revista argentina USERS, en la edición #170. El contenido del mismo está bajo una licencia Reconocimiento-NoComercial-SinObraDerivada 2.0. Este artículo puede puede haber sido editado para la versión impresa de la revista con el fin de evitar localismos. Actualmente, se encuentra en proceso de revisión, se omitieron capturas de pantalla y recuadros informativos. Les aconsejo comprar la revista, o esperar a que el artículo esté disponible en la web de Tectimes para descargarlo en formato PDF.

XHTML, CSS, DOM; siglas muy populares en weblogs y que empiezan a resonar en portales y grandes sitios: Juntas forman lo que se conoce como Estándares Web. En esta nota, veremos de qué se trata este nuevo concepto que está revolucionando Internet y delineando la forma de desarrollo web del futuro.

Es 1997. Estamos en medio de una loca guerra de navegadores, una carrera sin límites en la cual Internet Explorer y Netscape Navigator compiten arduamente por dominar el creciente mercado de internautas.
En un movimiento poco inteligente por sacar ventaja a la competencia, y en un intento de brindar mas herramientas para mejorar e innovar la gráfica en los web sites de esa época, ambas compañías anuncian que ofrecerán características especiales a los desarrolladores web: Elementos HTML propietarios que sólo serán interpretados por un navegador u otro, exclusivamente, desobedeciendo así a cualquier intento de estandarización de código que existiera en la fecha.
Entonces empiezan a surgir sitios con textos en marquesina que en Internet Explorer andan perfectamente, pero que en Netscape Navigator no se ven. Al revisar el código HTML de un sitio vemos etiquetas <font> que parecen renderizarse bien en un navegador, pero que no se interpretan correctamente en el otro.
Y así comienza el caos, con una enredada trama de tags y elementos propietarios que se comportan de una manera determinada en el navegador para el cual fueron hechos, pero que no sirven en el otro.
Conclusión: La tarea del desarrollador web se hace compleja, laboriosa, y muchos se inclinan por el navegador que más elementos HTML “atractivos” le ofrece al desarrollar. El mercado se fragmenta, la web se fragmenta y la interoperabilidad entre diferentes tecnologías y navegadores desaparece.
Pero pasan los meses y nos vamos dando cuenta que esta manera de desarrollar la web no es la adecuada. Vemos que mantener 2 versiones de un sitio, una para cada navegador no es rentable. Que nuestros costos en desarrollo web aumentan a medida que queremos introducir mejoras en sitios con base poco firme y con código que es imposible de mantener.
Y aquí aparece el antídoto, la bala de plata que promete unificar la web, a través de un modelo abierto de conectividad entre tecnologías de desarrollo: Los estándares web.

¿Pero qué son los estándares web?

Básicamente son un conjunto de tecnologías, impulsadas por el World Wide Web Consortium (W3C) y otros organismos, que tratan sobre la manera en que se debe –o debería- crear el contenido basado en la web. El W3C (http://www.w3.org/) es el principal comité internacional que se encarga de reglamentarlos, a través de especificaciones, guías y recomendaciones, pero hay grupos en todo el mundo, como el Web Standards Project (http://www.webstandards.org/), que se encargan de promover y fomentar su uso.

Específicamente, los estándares web se pueden clasificar en 4 categorías, cada categoría agrupa una o más tecnologías de desarrollo:

1. Lenguajes estructurales o contenido:
   • XHTML (Extensible Hypertext Markup Language)
   • XML (Extensible Markup Language)
2. Lenguajes de presentación:
   • CSS (Cascading Style Sheets)
   • XSLT (Extensible Stylesheet Language Transformations)
   • SVG (Scalable Vector Graphics)
   • MathML (Mathematical Markup Language)
3. Modelos de objetos:
   • DOM (Document Object Model)
4. Lenguajes de scripting:
   • ECMAScript 262 (la versión estándar de JavaScript)

En la práctica se suele decir que los estándares dividen un sitio en 3 partes: Su estructura (XHTML), su presentación (CSS) y su comportamiento (JavaScript).

¿Para qué nos sirven?

Llegas cansado del trabajo, y te decides por ver una buena película. Alquilaste un DVD excelente; por lo que te contaron, la última joya del cine, algo imperdible. Lo introduces en tu DVD-Player, y de repente, tu equipo muestra un “Lo siento, para ver este DVD necesitas una pantalla de 30 pulgadas wide-screen” en tu televisión. ¿Decepcionante, verdad?

En la web, la escena anterior también se repite. Ocurre cuando entramos a un sitio y se nos pide un determinado navegador para continuar. O peor aún, cuando nos recomiendan navegar con determinada resolución de pantalla, pues a la gente que desarrolló el sitio les pareció que se veía mejor en 1280×960px.

Es aquí en donde entran en escena los estándares web. Los estándares nos garantizan la compatibilidad con todas las plataformas y todos los agentes de usuario (navegadores, lectores de pantalla para gente ciega, celulares, etc.) que existan. Esto quiere decir que al menos el contenido del sitio, será igualmente accesible por alguien que esté usando la última versión de Mozilla Firefox, como por alguien que esté usando Lynx.

Desarrollar con estándares tiene muchas ventajas

En general, la mayoría de los beneficios de usar estándares web parten de la premisa de separación de contenido, en XHTML, y presentación, en CSS. Entre algunas, de las muchas ventajas, podemos nombrar que los estándares:

• Optimizan un sitio para motores de búsqueda (SEO). Desarrollar con estándares produce código XHTML limpio y semántico. Puesto que la mayoría de los buscadores trabajan indexando el contenido de un sitio, éstos tienden a priorizar a aquellos sitios con menor cantidad de código basura o no estándar en el sitio.
• Producen un sitio fácil de mantener. El código resultante de un sitio con estándares es simple y se puede dividir en secciones, reduciendo la dependencia de un solo desarrollador y facilitando la comunicación entre varios grupos de trabajo en una empresa de desarrollo web (programación, maquetado, diseño, etc.).
• Reducen el tamaño del sitio. Debido a la eliminación de elementos HTML que formatean visualmente una página, agrupando toda la parte visual en CSS, el tamaño de un sitio se reduce drásticamente. Esto nos garantiza que el sitio será cargado rápidamente aún en conexiones lentas, como celulares.
• Son un paso necesario para la accesibilidad. A nivel dispositivo, los estándares aseguran que el contenido de nuestro sitio estará disponible para cualquier dispositivo con conexión a Internet. A nivel personas, implica tener en cuenta que nuestro sitio puede estar siendo accedido por personas con discapacidades, ya sean físicas (discapacidad visual, motriz, etc.) o de entorno o (sin mouse, con pantallas demasiado chicas, etc.).
• Otorgan mayor flexibilidad al desarrollador web. Esto permite a los desarrolladores, por un lado, ocuparse solamente de la parte estructural del sitio (XHTML) y por otro lado, a los diseñadores nos da la versatilidad suficiente como para cambiar cualquier aspecto del diseño de un sitio. Como ejemplo, Wired Magazine (http://www.wired.com) cambia el esquema de colores de su sitio todas las semanas, y para hacerlo modifica solamente una línea de código en su XHTML.

Y también tiene un par de implicaciones

Lamentablemente el desarrollar sitios con estándares conlleva un precio. La interpretación de CSS como lenguaje de presentación en muchos navegadores, todavía es bastante mala y lleva a que cada uno tenga sus propios quirks o caprichos, que el desarrollador web debe conocer al realizar un sitio.

El caso más conocido es de Internet Explorer, el navegador usado por el 90% de los internautas del mundo, y el cual es totalmente deficiente en su interpretación del modelo de cajas de CSS (por citar uno de los cientos de bugs encontrados).

Por otro lado, la curva de aprendizaje de XHTML y sobre todo, de CSS, puede llegar a ser muy empinada para algunos diseñadores web de la “vieja escuela”, aquellos que todavía siguen maquetando sus sitios con tablas y llenando su código HTML con elementos de presentación (el elemento <font>, por citar uno).

Podemos resolver el primer problema consultando blogs y listas de correo con información sobre los últimos hacks encontrados para cada navegador. Por ejemplo, Ovillo es una lista de correo en español en donde se discuten acaloradamente temas sobre CSS y estándares web.

Para el segundo problema, lo única solución es capacitarnos. Enseñar a los profesores de universidades, que hay un nuevo y mejor método de construir la web. Y enseñar a nuestros colegas, que el mercado demanda sitios hechos con estándares web.

La repercusión de los estándares en el mundo

En el mundo, la proliferación del uso de los estándares para el desarrollo web, a nivel masivo, ciertamente empezó con el rediseño del sitio de la revista norteamericana Wired, en Octubre de 2002. El “caso Wired”, fue la prueba definitiva para los estándares web. Aquella que los llevaría a convertir su teoría en aplicaciones concretas del mundo real.

Luego, el mundo de los blogs, o la blogósfera, se encargó de diseminar la semilla. Jeffrey Zeldman, pionero, escribió largo y tendido sobre las ventajas de usar estándares web para la separación de contenido y presentación. Zeldman también fue el primero en escribir un libro orientado específicamente en el diseño web con estándares, camino que luego seguirían otros autores, como Dan Cederholm, con “Web Standards Solutions” y Dave Shea, creador de CSS Zen Garden, con “The Zen of CSS Design”.

Y la lista de sitios que migran hacia los estándares, continúa creciendo: Fast Company (http://www.fastcompany.com), ESPN (http://www.espn.com), Macromedia (http://www.macromedia.com), son solo algunos de los peces grandes que entienden el beneficio de los estándares web.

En Latinoamérica tampoco nos quedamos atrás

El uso de los estándares está muy difundido entre las empresas de desarrollo web del primer mundo, y en Latinoamérica también están pisando fuerte. Rediseños orientados a estándares y enfocados en la accesibilidad para personas discapacitadas, como el del diario La Nación (http://www.lanacion.com) iluminan el camino de los desarrolladores web hispanoparlantes y son un ejemplo a mostrar a posibles clientes.

Los blogs en español también se encargan de apoyar el movimiento por los estándares. Por citar un ejemplo, Juan Hurtado, en Armonía (http://armonia.spiral-static.org), escribe diariamente sobre desarrollo web, enfocándose en temas como los estándares web, la semántica y la accesibilidad.

En el futuro

En el futuro, los hacks y quirks propios de cada navegador serán cosa del pasado. Microsoft ha escuchado las plegarias de los desarrolladores web y con la nueva versión de Internet Explorer, es decir, la versión 7, promete ampliar enormemente su interpretación de CSS.

Por otro lado, Macromedia ha mejorado su soporte para CSS en Dreamweaver, y de esta manera está logrando posicionarse en la mente de los desarrolladores que buscan una suite enfocada en los estándares web.

Hoy en día, hay una clara tendencia al desarrollo web “responsable”, aquel que se basa en las premisas de compatibilidad futura y accesibilidad para todos los usuarios y dispositivos, esto es, las bases del desarrollo web con estándares.

Y dentro de muy poco tiempo, aquellas empresas de desarrollo web que no se den cuenta que los estándares llegaron para quedarse, y que no son solo una opción mas, no serán rentables y competitivas en un mercado que cambia día a día.