• Se ha desactivado el contador que impedía mostrar dos veces un carrusel debido a que algunos usuarios obtenían ese error aún cuando no habían mostrado más de un carrusel. Aún así persiste la limitación de no poder mostrar el mismo carrusel varias veces en la misma página.
• A partir de ahora cuando un elemento no tenga extracto ni tenga valor en el campo personalizado que utiliza WP Carousel para las descripciones, se mostrará todo el contenido del elemento.
• A partir de ahora los vídeos que se añadan a los contenidos personalizados funcionarán correctamente.
• Se ha eliminado algo de código innecesario y se han hecho algunos cambios menores.

Como de costumbre, se puede actualizar desde el Panel de Administración de WordPress o descargar el plugin desde WordPress.org.

Guardado AJAX, nuevos themes por defecto, galería de Addons y preguntas frecuentes

A partir de ahora, las opciones también se guardan inmediatamente sin salir de la página como los elementos del carrusel. Además cada vez que se guarden las opciones o se haga clic en cualquier botón para guardar los cambios, se creará una copia de seguridad, accesible desde el gestor de copias de seguridad. Desde ese mismo gestor se pueden ver por fechas y por carruseles todas las copias de seguridad, además se pueden ver los elementos que había en cada copia y se pueden restaurar con un sólo clic. Como en anteriores versiones, se puede extraer todo el contenido a través del código de exportación e importarlo a través de la página correspondiente.

WP Carousel 1.0 ofrece muchos nuevos themes por defecto, algunos de ellos basados en excelentes diseños creados por profesionales y ofrecidos de forma gratuita en 365psd.com. Además, para promocionar las capacidades de la nueva API de Extras y Themes de WP Carousel 1.0, he creado una galería de Addons, disponible para cualquier usuario. Quien quiera puede enviar su propio Addon para ser revisado y si supera un pequeño test para evitar scripts maliciosos, aparecerá en la galería.

Para facilitar el uso del plugin, la pestaña de ayuda muestra ahora las preguntas más frecuentes, además de las líneas exactas que se deben modificar para cambiar ciertos parámetros internos.

jCarousel, modo vertical y vídeos en el carrusel

En WP Carousel 1.0 se permite usar jCarousel como motor de carruseles. Este script permite, entre otras cosas, la disposición vertical de los carruseles. Los themes por defecto soportan en general esta característica, así como el nuevo script.

Además de imágenes y textos, en WP Carousel 1.0 también se pueden mostrar vídeos, siempre que el theme esté adaptado a esta característica. Mostrar un vídeo es tan fácil como completar un campo personalizado o simplemente dejar que WP Carousel tome el primer vídeo del artículo.

Para desarrolladores

La nueva API de Themes y Extras permite mostrar formularios para configurar el contenido de forma sencilla. Ahora un Extra puede dar la opción de seleccionar el orden de su contenido o de seleccionar elementos a través de filtros más complejos que por un identificador.

Por si fuera poco, se han añadido los Extras grupales, que permiten añadir no sólo un elemento individual, sino un grupo de elementos, como podrían ser artículos de una determinada categoría.

Como Extras de ejemplo se incluye un Extra para mostrar el contenido de otro carrusel del sitio web, uno para mostrar artículos con un determinado post_type o pertenecientes a una taxonomía personalizada específica, así como la integración con el plugin para WordPress TheCartPress, que permite crear una tienda online de forma fácil y rápida.

La documentación está traducida al inglés, y en combinación con los Extras y los Themes incluidos por defecto, permite expandir WP Carousel a un nuevo nivel.

Descarga

El plugin se puede descargar desde WordPress.org o instalar y actualizar directamente desde el panel de administración de WordPress.

Los bugs resueltos en esta Beta son:

• Bug que no permitía seleccionar el texto de los elementos del carrusel en el Panel de Administración (presente desde la versión 0.5)
• Bug que no permitía redimensionar las áreas de texto de los elementos añadidos al carrusel en el Panel de Administración en algunos navegadores (entre ellos Firefox 4)
• Diversos bugs menores en la interfaz del Gestor de Backups que aparecían al tener carruseles sin backups
• Actualizado el sistema de guardado AJAX para que en caso de error también se puedan guardar backups mediante el procedimiento no-AJAX
• Otros bugs menores y ligeros cambios en diversas funciones de WP Carousel

En cuanto a las nuevas características, la primera novedad es que ahora WP Carousel soporta el orden aleatorio en los artículos extraídos de categorías, tags o autores. Los elementos del carrusel serán ordenados al azar, de modo que puede darse el caso de que un elemento ordenado al azar aparezca en el carrusel antes de un elemento no añadido al azar. El orden aleatorio está pensado para carruseles en los que sólo hay contenido ordenado de forma aleatoria. Esta nueva opción se encuentra en la sección de orden de los elementos, junto con el orden cronológico y el orden cronológico inverso.

También he añadido la posibilidad de seleccionar el tamaño de las miniaturas de las imágenes, para lo cual tan sólo es necesario modificar una línea del archivo wp-carousel.php.

Por lo que respecta a la pestaña de ayuda, he añadido bastante más información a la misma, de modo que muchas de las dudas que surgen al comenzar a usar WP Carousel están resueltas ahí (cosas como la prioridad de las imágenes, de dónde sale el texto del carrusel, qué línea modificar para habilitar el modo de integración externa o cuáles son los campos personalizados que utiliza WP Carousel).

Por último, he añadido dos nuevos Extras por defecto: Custom Post Type y Custom Taxonomy que permiten mostrar, respectivamente, un artículo con un post type personalizado o artículos pertenecientes a cualquier taxonomía personalizada. La única pega es que en cualquiera de los dos casos es necesario indicar la ID del elemento, aunque tampoco es demasiado molesto teniendo en cuenta que se puede añadir artículos de cualquier taxonomía, sea del tipo que sea.

A aquellos que utilicéis la Beta 1, os recomiendo actualizar a la Beta 2. Aquellos interesados en las nuevas características también pueden actualizar a la Beta 2, aunque guardando siempre una copia de seguridad del contenido anterior, por si las moscas.

Descarga: WP Carousel 1.0 – Beta 2.

En estos casi dos años de desarrollo del plugin, WP Carousel ha avanzado barbaridades. Desde permitir crear sólo un carrusel hasta poder extender el plugin creando nuevos Extras y Themes. Pues bien, esta nueva versión añade mucho más que todas las anteriores. He escuchado la mayoría de las peticiones y comentarios que he recibido (creo que realmente he atentido todas las peticiones que me han llegado) y seguro que os encantan las novedades que incorpora esta versión, así que sin más dilación, ahí van, las nuevas características de WP Carousel 1.0.

Vídeo en el carrusel y modo vertical

Sí, parecía complicado, y sí, pensaba que sería necesario usar plugins de terceros, pero no, ni será complicado ni será necesario usar ningún otro plugin. Los vídeos se podrán insertar en el carrusel a través de un campo personalizado (por defecto, wp_carousel_video_url) y dependerá de los themes mostrar o no el vídeo (todos los themes que vienen por defecto soportan vídeos, y adaptar los themes para soportar vídeos es muy fácil). WP Carousel soporta los mismos proveedores que WordPress (utiliza el shortcode para mostrar los vídeos) y como ya he dicho, no requiere de ningún otro plugin para mostrar los vídeos.

Respecto al modo vertical, es muy fácil de activar (marcar un checkbox), sin embargo no todos los themes lo soportarán, ya que por motivos de diseño, hay algunos themes en los que no «pega» un modo vertical. Sin embargo el theme Default sí que soportará el modo vertical, al igual que el theme Default-Sidebar. El modo vertical sólo funciona con jCarousel, ya que StepCarousel no soporta el movimiento vertical de los paneles, así que es necesario que el theme soporte jCarousel para que pueda soportar el nuevo modo vertical.

Shortcode para WP Carousel y nombres de carruseles

Poder añadir carruseles en los artículos era una de las funciones más pedidas, y también la he añadido. El shortcode es muy fácil de usar. La sintaxis es:

[wp_carousel]ID del carrusel[/wp_carousel]

Este shortcode permite mostrar con mucha facilidad un carrusel dentro de un artículo. Además se añade un icono al editor de WordPress para no necesitar memorizar el código.

Por otro lado, he añadido la posibilidad de personalizar los nombres de los carruseles para saber qué contiene cada carrusel.

Cambiar el nombre es tan fácil como hacer clic sobre el nombre anterior, escribir uno nuevo y pulsar enter. Estos cambios, además de afectar el menú de WP Carousel, se reflejan en el Widget, que en lugar de pedirte la ID del carrusel, te muestra la lista de carruseles para que elijas el que quieras mostrar.

Nuevo gestor de themes y opciones

Continuando el trabajo que comencé al desarrollar la UI Drag & Drop, he modificado la zona de opciones del carrusel para que a partir de ahora se guarden sin cambiar de página, mediante AJAX. También he modificado las checkboxes para que tengan un aspecto más bonito y simple (a imitación de los UISwitch de iOS).

El primer lugar, he rediseñado completamente el selector de themes. A partir de ahora será un carrusel donde en cada panel se presentará un theme con la información básica (autor, versión, descripción y enlaces útiles). Pasando el cursor sobre el icono de información (en la esquina inferior derecha) aparecerá información acerca de las características que soporta el theme en cuestión. El theme seleccionado tendrá un borde blanco a su alrededor que te hará localizarlo más fácilmente.

Las opciones generales del carrusel se ajustan automáticamente al theme activo, de modo que si éste no soporta jCarousel, no se nos mostrará la opción de activarlo, y si no soporta el tamaño personalizado del carrusel, nos aparecerá un mensaje advirtiéndonos de esto. Todo de la forma más clara posible para evitar confusiones entre creadores de themes y usuarios. Los themes por defecto soportan todas las funciones de WP Carousel 1.0 a excepción de los tamaños personalizados, ya que algunos themes se ajustan por completo a un único tamaño, de modo que con configurar el tamaño del panel, todo el carrusel se ajusta automáticamente, facilitando todo el proceso de cambiar el tamaño.

En la segunda pestaña podremos modificar las opciones únicas de cada theme, porque con la nueva API de Themes de WP Carousel1.0, los creadores de themes podrán dotar a sus creaciones de opciones únicas que los hagan inconfundibles y le de un valor añadido al theme.

Entre las opciones de los themes por defecto se encuentra la posibilidad de mostrar el título en lugar del extracto en el carrusel.

Gestor de Copias de Seguridad

Desde hace tiempo WP Carousel incluye un sistema de exportación y de importación, de modo que se pueden hacer copias de seguridad manuales por si en algún momento queremos hacer alguna modificación arriesgada al plugin o simplemente migrar a otro servidor.

WP Carousel 1.0 le da un repaso esta función y la reinventa. A partir de ahora cada cambio que hagamos quedará registrado y podremos retroceder a cualquier punto anterior con tan sólo un par de clics.

El sistema es muy sencillo de entender. Cada vez que se pulsa el botón de guardar cambios, se crea una copia del contenido actual del carrusel y se añade a la matriz de copias de seguridad. Desde el gestor de Copias de Seguridad podemos ver las copias almacenadas, previsualizar el estado del carrusel (podemos ver tanto los elementos del carrusel como su configuración – a nivel general y a nivel de theme) y restaurar el carrusel a ese momento con tan sólo un clic. También podemos ocultar de la tabla los carruseles que no nos interesen y nos aparecerán por su nombre, de manera que es muy fácil identificarlos.

Aunque de todos modos la opción de código de exportación sigue presente, y su funcionamiento es idéntico al de las versiones anteriores.

Como es de suponer, el Gestor de Copias de Seguridad puede ser algo excesivo en muchos casos, así que se puede desactivar modificando una constante del archivo wp-carousel.php, una modificación que se hace en un par de segundos. También se pueden borrar las copias de seguridad para dejar más espacio a nuevas copias, desde la página de desinstalación.

Es un sistema muy fácil de usar y muy cómodo, ya que no requiere atención alguna por nuestra parte hasta el momento en el que lo queramos usar.

Los campos personalizados y los nombres de las opciones

Algunos usuarios me habían comentado la posibilidad de cambiar el campo personalizado del que WP Carousel sacaba las imágenes. Yo estuve dando vueltas a cómo añadir esa posiblidad de forma sencilla y decidí que lo más fácil de todo era permitir cambiar el nombre de los campos personalizados modificando el archivo wp-carousel.php. Tan sólo es necesario modificar una línea del plugin para cambiar los campos que «leerá» WP Carousel. Del mismo modo, se pueden cambiar las opciones en las que almacena WP Carousel los elementos del carrusel, la configuración de cada carrusel y las copias de seguridad.

También algunos usuarios tuvieron problemas con el plugin cuando tenían muchos artículos publicados. He añadido la posiblidad de deshabilitar algunos contenidos para el carrusel, de modo que no se cuelgue la página de opciones del carrusel si se tiene mucho contenido publicado.

Nuevas APIs

He revisado y reescrito las APIs de Themes y de Extras, y vienen cargadas de novedades. En cuanto a Themes, se mantiene la retrocompatibilidad, de modo que los themes diseñados para WP Carousel0.5 son compatibles con WP Carousel 1.0 (aunque no soportarán todas las opciones de la nueva versión). Los Themes admiten ahora una opciones personalizadas, que se muestran en la página de opciones de cada carrusel y se guardan al vuelo como el resto de opciones de WP Carousel.

El theme por defecto clásico de WP Carousel se ha revonado con opciones tan interesantes como poder mostrar el título en lugar de la descripción del elemento, o mostrar el texto a un lado de la imagen (el que prefieras) en lugar de debajo. También soporta múltiples colores, desde el gris y el azul hasta el rojo y el verde.

Además WP Carousel incluye 4 nuevos themes. Además del theme clásico y el theme adaptado a la sidebar, he añadido un theme vacío para usarse como plantilla para futuras creaciones. También he creado tres nuevos themes basados en excelentes diseños.

La API de Extras también está totalmente reescrita y actualizada. El primer problema que he resuelto es que la API anterior no permitía mostrar grupos de elementos, es decir, un Extra te permitía añadir un elemento (como un artículo individual), pero no un conjunto de elementos (como una categoría, que se transforma en diversos artículos al mostrarse en el carrusel). En segundo lugar me he centrado en permitir más opciones en los extras. Hasta ahora el usuario sólo podía comunicarse con el Extra a través de un único campo de texto. Ahora los Extras pueden mostrar listas desplegables, campos de texto…

Además he expandido la API de Extras para que se puedan añadir Extras a WP Carousel sin tener que copiar archivos dentro de la carpeta de Extras, es decir, con la nueva API los creadores de otros plugins pueden incluir dentro de su plugin el código necesario para que WP Carousel detecte los nuevos contenidos creados con estos y puedas añadirlos al carrusel sin tocar ni una sola línea de código.

La API de Extras es muy similar a la anterior. De hecho me he basado en la API anterior, sólo que la he expandido y he añadido las opciones personalizadas de la API de Themes. Ambas APIs las he desarrollado a la vez, así que veréis que tienen muchos puntos en común y que aprender a usar una es sinónimo de conocer la mayor parte de la otra.

Pero para explicar el funcionamiento de estas APIs necesito algo de tiempo para redactar la documentación, así que de momento no diré nada más sobre este punto.

Beta 1 disponible

Con tantos cambios he decidido que es mejor no lanzar directamente la versión 1.0 sin pasar antes por un periodo de pruebas. Yo he hecho unas cuantas pruebas, pero como siempre, es mejor que lo pruebe más gente antes de darle el visto bueno.

La Beta 1 estará disponible en breve (minutos, horas en el peor de los casos) en WordPress.org. Os recomiendo que hagáis una copia de seguridad del contenido de vuestros carruseles, actualicéis a la Beta y la probéis un rato.

¡Seguro que luego no querréis volver a la versión anterior!

No es nada complicado implementar el botón, básicamente tenemos que ir a la página del botón de Twitter (aunque podemos crear nuestros propios botones a través de la API, pero es más complicado) y elegir entre uno de los tres aspectos que nos ofrecen. Podemos especificar el texto del Tweet o dejar que sea el título de la página que se va a compartir, al igual que podemos especificar la URL del enlace o dejar que sea la URL de la página. También podemos definir el idioma del botón. A continuación nos piden que especifiquemos una serie de cuentas que se sugerirán al usuario, la idea es que sean las cuentas de aquellos que contribuyen publicando contenidos en la página web. Finalmente veremos un código HTML, basta con copiarlo y pegarlo en la página que queramos para mostrar el botón.

Por último os dejo el vídeo de presentación del botón.

Haz clic aquí para ver el vídeo

Por otro lado, y en lo referente a fechas de lanzamiento, me temo que tardaré más de lo que esperaba en terminar WP Carousel 0.6, de hecho creo que durante unos cuantos días (sino unas semanas) voy a pararme un poco y pensar detenidamente cómo llevar a cabo las novedades que tenía planeadas, sobretodo el tema de la nueva API de themes y la posible nueva API de Extras.

Por último, la imagen que tenéis a la izquierda es una captura de la UI de WP Carousel 0.6 donde se ven los 3 principales cambios que tenía planeados: poder contraer los elementos del carrusel, mostrar una miniatura de la imagen que se mostrará en el carrusel (sólo páginas y artículos) y darle un nuevo aspecto a los checkboxes para hacerlos más entendibles (he optado por darles un aspecto similar a los botones del iPhone porque así podía mostrar un texto al estar activos y otro diferente al no estarlo).

Reutilizar código

Pongamos por caso que estamos escribiendo un blog y que tenemos hecho ya el diseño. Ahora insertamos una imagen y queremos darle un borde gris para que encaje al a perfección con nuestro diseño. ¿Qué hacemos: modificar el CSS de nuestro diseño o utilizar el atributo style? Es tarde, estamos cansados y al día siguiente tenemos que madrugar, así que tomamos la vía rápida y utilizamos style. Un par de semanas después no encontramos en la misma situación y hacemos lo mismo, y según avanza el tiempo cada vez se dan más ocasiones como ésta. Quizás aplicar un simple borde no sea nada del otro mundo, pero si en lugar de eso también aplicamos un margen, un relleno y un color de fondo, estamos duplicando un montón de código que no tendríamos por que repetir.

Separar el contenido del diseño

Supongamos que hemos hecho lo que comentaba en el punto anterior y que tenemos un montón de etiquetas con estilos heredados del atributo style. ¿Qué sucedería si cambiamos el diseño de la web? Pensemos en un blog con WordPress y en la cantidad de themes que hay disponibles. Quizá dentro de tres o cuatro meses queramos cambiar el diseño por uno nuevo, y al aplicarlo no encontraríamos con una desagradable sorpresa: los elementos que tienen estilos en la etiqueta style se ven como en el diseño anterior y quedan mal en el nuevo diseño. Ahora tendríamos que ir buscando uno a uno cada elemento que al que le hemos añadido estilos de este modo para cambiarlos por unos que queden mejor. Menuda faena, ¿no os parece?

Rediseñar de forma más rápida

Pensemos ahora que hemos sido nosotros los que hemos creado el diseño, y que lo hemos hecho utilizando el atributo style. Si nuestra web es dinámica, tan sólo tendremos que modificar algunos archivos, pero si la hemos hecho con archivos HTML sueltos, sin una Base de Datos que almacene el contenido, tendremos que modificar tantos archivos como contenido hayamos creado. Quizás 10 páginas no son muchas, pero por ejemplo este blog tiene ya más de 650 artículos, que serían más de 650 archivos a modificar… no quiero ni imaginármelo.

Tener un código limpio

Algunas de las cosas que nos pueden parecer extrañas al entrar en el mundo del código (sea el que sea) es que se tabula con muchísima frecuencia el código. ¿A qué se debe? A mejorar la legibilidad del mismo. Puede que tras hacer un diseño o crear un programa recordemos a la perfección en qué línea estaba cada cosa y dónde comenzaba y acababa cada etiqueta (o condición, o bucle o…). ¿Nos acordaremos dentro de dos meses? ¿Y dentro de dos años? ¿Y aquellos que sólo miren el código para aprender podrán entender algo? Tener un código limpio es muy importante para poder mantener un proyecto, sea código CSS, PHP, C++… Tabular el código es una forma de mantenerlo limpio, y añadir estilos con el atributo style es una forma de ensuciarlo.

Mirad el siguiente código:

<div class="nota"><p>Hola mundo</p></div>

Y ahora mirad este otro:

<div style="background:#000 url(img/fondo_nota.png) top left no-repeat; border:1px solid #CCC; padding: 10px 5px 7px 3px; margin:2px 5px 6px 1px; float right; display:block; position:relative; top: -20px; left:50px;"><p>Hola mundo</p></div>

En ambos el contenido que se muestra es el mismo. ¿En cuál os ha costado más encontrar la frase que verá el visitante? Este es un ejemplo de a lo que me refiero con limpieza de código.

Selectores más avanzados

Hasta ahora todo lo que habíamos visto que nos permitía hacer CSS también podíamos hacerlo con el atributo style, pero no es así, CSS nos permite hacer más cosas. Pensemos por ejemplo en que queremos que un link cambie de color al pasar el cursor sobre él. Con CSS lo tenemos realmente fácil:

a:hover { color:#CCC; }

Sin embargo hacer esto con el atributo style no es posible. Puede que cambiar el color de un enlace no os parezca demasiado útil, pero imaginad ahora que queréis hacer un menú desplegable sin usar Javascript. Con CSS es realmente fácil de hacer, pero ¿y con el atributo style? Simplemente no se puede hacer.

Selectores “a secas”

Ahora pongamos el caso de que queremos usar Javascript para añadir algún efecto o para hacer que al hacer clic sobre cierto elemento se muestre otro elemento oculto. Usando el atributo ID o class de cualquier etiqueta HTML podemos detectar con Javascript no intrusivo cuándo se hace clic, sin embargo si no usamos estos atributos no podemos detectar cuándo se pulsa cierto elemento sin recurrir a métodos no recomendados para la accesbilida del sitio web. Además, tanto al atributo ID como el atributo class se pueden usar para darles estilos a los elementos de la web, así que ganamos en Javascript no intrusivo y en CSS.

Carga más rápida

Toda esta limpieza y reutilización de código contribuyen a que la página cargue más rápido, ya que hay un total de menos código, los archivos tienen un menor tamaño y la descarga de los mismos dura menos tiempo. Además al reducir el tamaño también reducimos el ancho de banda que consume cada visita, con lo cual también podemos ahorrar algo más en temas de alojamiento y servidor.

Un diseño para cada ocasión

Otra ventaja del CSS es que podemos cambiar el archivo por otro y modificar totalmente el aspecto de la web sin tocar el contenido. El mejor ejemplo de esto mismo es CSS Zen Garden, una página que tiene siempre el mismo código HTML y que sólo cambia el archvo CSS que se carga. Quizá parezca una tontería, pero en muchas ocasiones es necesario cargar un archivo CSS específico para cierto navegador o un archivos CSS diferente para dispositivos móbiles o para una versión para imprimir.

Las tablas para tabular

Y aquí es donde entran las tablas. Sin duda es muy fácil convertir una tabla en un rectángulo con esquinas curvas o un diseño a tres columnas, pero ¿se crearon para eso? No, el objetivo de las tablas es mostrar contenido tabulado, tarea que desempeñan la mar de bien. Pensemos que usamos tablas para el diseño de un blog en tres columnas. Ponemos una sidebar a cada lado y el contenido del blog en la columna central. Ahora imaginemos que queremos las dos sidebars a la derecha o ambas a la izquierda. Habría que modificar sí o sí el código HTML ya que no hay forma de alterar la posición de las columnas mediante CSS. Sin embargo usando capas (div) y CSS se podrían hacer las tres columnas sin problemas y más adelante cambiar su disposición modificando sólo el código CSS. Pensemos de nuevo en CSS Zen Garden. Si usara tablas, sería imposible que cambiase tanto la disposición del contenido al modificar el CSS.

Y a todo esto, ¿qué pasa con los estándares?

No es mi intención hablar de los estándares en este artículo, pero algo comentaré. Actualmente seguir los estándares y comprobar que el código es válido tiene algunas ventajas. La primera es que te ahorras posibles problemas al dejar etiquetas sin cerrar o al olvidar alguna comillas (“) o similares. Algunos navegadores pueden mostrar correctamente un diseño con este tipo de errores mientras que otros no. Siguiendo los estándares te ahorras estos problemas. Además los estándares te ofrecen un buen punto de partida para que el diseño se vea correctamente en cualquier navegador. Está claro que todo acaba dependiendo del motor de renderizado del navegador, pero si el navegador en cuestión utiliza un buen motor de renderizado, la página se verá perfectamente, mientras que si se recurre a código no estándar y que sólo funciona en determinado navegador, el página no se verá correctamente en todos lo demás. Los estándares no limitan lo que podemos hacer, simplemente nos proponen (ya que no es obligatorio, sino recomendable) un modo de hacerlo para que todos lo hagamos igual y los navegadores sean capaces de mostrar correctamente todo el contenido. Siempre debe haber un estándar, sino, cada navegador interpretaría el código de una forma diferente (algo que lamentablemente, a pesar de los estándares, sucede). ¿A que a nadie se le ocurriría utilizar la etiqueta <span> como <div> o como <p>? ¿Entonces por qué aún hay quién utiliza la etiqueta <table> como <div>? ¿Qué debe interpretar el navegador: esa tabla es sólo para estructura del contenido o es (como dice el estándar) para mostrar contenido tabulado?

Los principales puntos en los que me he centrado han sido:

• Unificar el foro, el portafolio y el blog bajo un mismo diseño totalmente unificado
• Renovar el buscador
• Crear una versión para iPhone / iPod Touch

Unidad y cohesión

Nuevo menú de proyectos

Menú del foro

Si os fijáis, el portafolio ha desaparecido y se ha vuelvo a unir al blog. La idea de separarlos no era mala, pero la verdad es que se me hacía algo incómodo tener que mantener dos diseños tan diferentes y las diferencias entre el portafolio y el blog contribuían a hacer que pareciesen páginas diferentes.

La solución que se me ocurrió fue usar el mismo diseño que en el blog pero con algunas variaciones, en este caso de color. Para ello he transformado todos los fondos en fondos semitransparentes, de modo que el blog funciona con tan sólo 3 colores básicos, aplicados sobre fondos con degradados blancos y negros cuya opacidad varía y que crean los degradados de colores que hay por la página. También he aprovechado para usar un color diferente en las páginas de contacto y de información sobre el blog.

El siguiente paso fue qué poner en la página de plugins y temas. En el portafolio había un listado de proyectos, pero no me convencía mucho, así que he optado por eliminar esta página, y al hacer clic en el enlace, mostrar un menú con un listado de mis proyectos. Este menú es accesible desde cualquier página, de modo que para acceder a la página de un plugin sólo es necesario hacer dos clics, estés donde estés, y cargar una única página, estés donde estés.

Con el foro sucedía algo similar: el menú del foro sustituía al del blog al entrar al foro, lo que podía ocasionar alguna que otra confusión. Tras haber encontrado un modo de mostrar menús de una forma más eficaz (el listado de proyectos), decidí aplicar lo aprendido juntamente con lo descubierto trasteando con SMF para mostrar el menú completo del foro en cualquier página. Aunque eso sí, decidí sustituir el buscador del blog por el del foro cuando se navega por el foro.

Buscador totalmente renovado

El nuevo buscador

El buscador que había en Sumolari.com me gustaba bastante como concepto, pero tenía fallos en la puesta en práctica. Es genial que se muestren los resultados sin salir de la página actual, pero ¿por qué limitarse a buscar artículos? ¿Por qué no buscar categorías, páginas y etiquetas? Busqué y busqué y la verdad es que nada de lo que encontré me convenció, así que pensé: “Si vas a hacer algo, hazlo bien”, y rediseñé por completo el buscador.

Hasta ahora usaba un plugin para mostrar los resultados, pero para optimizar decidí dejarlo de lado (no usaba jQuery, sino Prototype, de hecho era el único script del blog que usaba Prototype) y crear yo mismo la carga con AJAX (partiendo de lo aprendido durante el desarrollo de la nueva interfaz de WP Carousel 0.5) y dándole un diseño más bonito.

Finalmente ha salido lo que podéis ver en la parte derecha del menú principal: un buscador inspirado en Spotlight, capaz de buscar en páginas, etiquetas y categorías, que se carga en la misma página con jQuery y que se puede cerrar en cualquier momento haciendo clic en el icono con forma de cruz que aparece cuando se busca algo.

Versión para iPhone / iPod Touch

Versión para iPhone de Sumolari.com

Otra de las novedades es que he rediseñado el blog en la versión para iPhone / iPod Touch. El diseño está especialmente pensado para ser cómodo y poder leer el blog de forma simple. La página de inicio muestra los últimos artículos (se pueden cargar más vía AJAX) o un listado de páginas si se toca la pestaña de páginas. También tiene un buscador, pero más sencillo que el de la versión para navegadores de escritorio.

De todos modos, esta versión está pensada únicamente para iPhone / iPod Touch, para las demás ocasiones la versión estándar es mucho mejor.

Otros cambios

Además de estas novedades, también he cambiado algunas cosas más. Por ejemplo, ahora los menús tienen un fondo degradado y no sólido como antes. También he cambiado el logo, poniendo una nueva tipografía y reemplazando el color anterior por uno más neutro (a favor de las posibles gamas de colores del blog). He puesto la rueda dentada que había en el logo del portafolio (animada con jQuery) y he eliminado la pestaña de RSS del pie de página para poner el icono en el menú principal.

Y estas son todas las novedades respecto al diseño del blog.

Hasta ahora hemos visto cómo crear cabeceras y pies de página, pero no hemos visto nada del contenido. En esta parte me centraré en imitar las listas que aparecen en diversos lugares de iOS, pero haciendo un par de añadidos.

La lista básica tendría el siguiente código HTML: <ul class="post-list"> <!-- Post 1 --> <li> <a href="#"> <span class="post-comments"> <span class="post-comments-number">0</span> </span> Nombre del artículo <span class="post-dates">27 - 6 - 2010</span> </a></li> <!-- Post 2 --> <li> <a href="#"> <span class="post-comments"> <span class="post-comments-number">6</span> </span> Nombre del artículo 2 <span class="post-dates">26 - 6 - 2010</span> </a></li> <!-- Etc --></ul> El código CSS para imitar el resultado de la segunda imagen de la izquierda es el siguiente: ul.post-list li a { min-height:40px; padding:14px 10px; font-family:Helvetica; font-size:20px; font-weight:bold; border-bottom:1px solid #D9D9D9; color:#000; text-decoration:none; display:block; } ul.post-list li a span.post-comments { margin:0 0 0 10px; min-width:18px; height:28px; color:#FFF; text-align:center; border:2px solid #FFF; -webkit-box-shadow: 0 0 5px #888; float:right; display:block; -webkit-border-radius:14px; } ul.post-list li a span.post-comments span.post-comments-number { padding:3px 5px; min-width:18px; height:22px; background: -webkit-gradient(linear, left top, left bottom, from(#DE7B7E), to(#CB2A29), color-stop(0.5, #D76368), color-stop(0.5, #CF2A27)); color:#FFF; text-align:center; float:right; display:block; -webkit-border-radius:14px; } ul.post-list li a span.post-dates { font-size:13px; font-weight:normal; color:#666; display:block; }

Si analizáis el código veréis que no me he limitado a hacer una copia idéntica de las listas, sino que he modificado el código para (dejando de lado el círculo que indica, por ejemplo, los comentarios) que se ajuste a cualquier longitud del texto y que permita mostrar una pequeña descripción del contenido bajo el título (en la imagen aparece en forma de fecha de publicación).

Por último, tan sólo querría dar algunos consejos a la hora de diseñar una web para el iPhone / iPod Touch:

• El iPhone y el iPod Touch carecen de ratón, por lo que nuestros dedos son el puntero. Los elementos como los enlaces deben ser lo suficientemente grandes como para que un dedo pueda pulsarlos sin tocar ningún otro elemento.
• El scroll vertical no está mal, pero el horizontal es muy molesto. Es recomendable tratar de evitar siempre que se pueda hacer que la página exceda el ancho de la pantalla.
• Siempre es más cómodo tenerlo todo en una página que ir saltando de página en página. Siempre que sea posible sería conveniente usar AJAX para dar una sensación de ligereza, rapidez y unidad a la página, para que parezca más una aplicación nativa que una página web.
• Aprovechemos el motor Webkit de Mobile Safari y ahorrémonos imágenes: las imágenes requieren más transferencia que algo de código CSS3, así que siempre que sea posible hacer algo con CSS3 y no con imágenes, para el iPhone sería conveniente hacerlo así.
• CSS3 es el futuro, no lo olvidemos, así que si es posible usar una propiedad de CSS3 en lugar de un truco al estilo de -webkit-etc, es mejor usar la propiedad de CSS3, así otros navegadores que soporten CSS3 podrán mostrar correctamente la página.

Y con esto doy por terminado el tutorial de diseño web para el iPhone. Me gustaría unir todas las partes y distribuirlo en formato PDF, pero antes tengo algunas otras cosas a medias, así que eso tendrá que esperar.

Espero que os haya gustado y os sirva para tener algo más en esos momentos en los que nos atascamos durante el diseño de una web.

En la parte anterior expliqué cómo crear cabeceras, pues bien, en esta parte me centraré en los pies de página. Utilizaré las mismas páginas para mostrar distintos tipos de pies de página. Podemos ver a la izquierda como Coosh trata de imitar la barra inferior de algunas aplicaciones nativas del iPhone (ver imagen de la derecha). Mientras, tanto Google como Yahoo muestran un pie de página algo “dejado caer”, es decir, sin estar demasiado adaptado al estilo del iPhone, así que en lugar de explicar cómo diseñar un pie de página así (algo realmente fácil), explicaré como diseñar un pie de página que siga las líneas de la cabecera del Yahoo (que expliqué como crear en la parte anterior).

Así que comenzaremos por imitar la interfaz del iPhone y después veremos cómo adaptar el estilo de la caebcera al pie.

Creando un pie de página que imite el de una aplicación nativa

En las dos imágenes anteriores podéis ver cómo es el menú inferior de algunas aplicaciones nativas del iPhone. No todas las aplicaciones muestran un menú así, pero sí algunas importantes. Básicamente este menú consiste en un fondo con un degradado de colores oscuros y diversos iconos distribuidos a lo largo del mismo.

Yo no voy a diseñar iconos para el menú en este tutorial, así que me limitaré a usar imágenes con un fondo distinto para que resalten un poco. Sobre la altura del menú, son 47px de alto más el borde superior (de un color gris más claro) que añade 1px, haciendo un total de 48px.

El código HTML que usaríamos para este menú sería el siguiente: <div id="footer"> <ul> <li class="icon-circle selected"><a href="#">Categor&iacute;as</a></li> <li class="icon-circle"><a href="#">P&aacute;ginas</a></li> <li class="icon-circle"><a href="#">Etiquetas</a></li> <li class="icon-circle"><a href="#">B&uacute;squedas</a></li> </ul> </div> Y el CSS sería el que tenéis a continuación: body, div, h1, ul { /* Reseteamos algunos estilos para que se ajuste correctamente el contenido */ margin:0; padding:0; } #footer { margin:312px 0 0 0; /* Para ajustarlo al final de la página, como en mi demostración no hay más contenido, esta línea es necesaria para posicionar el pie de página en el final de la página, así que si añadís contenido, eliminad esta línea */ border-top:1px solid #434343; height:47px; background: -webkit-gradient(linear, left top, left bottom, fr om(#2E2E2E), to(#000), color-stop(0.5, #151515), color-stop(0.5, #000)); } #footer ul { width:100%; height:100%; list-style:none; text-align:center; } #footer ul li { margin:1px 5px; padding:0 5px; height:45px; font-family:Helvetica; float:left; font-size:11px; } #footer ul li.icon-circle { background:url(circle-iphone.png) top center no-repeat; } #footer ul li.icon-circle a { height:12px; display:block; text-decoration:none; color:#969696; padding:33px 2px 0 2px; } #footer ul li.icon-circle.selected a { color:#FFF; background:url(circle-iphone-selected.png) top center no-repeat; } #footer ul li.icon-circle.selected { -webkit-border-radius:5px; background:-webkit-gradient(linear, left top, left bottom, fr om(#494949), to(#252525), color-stop(0.5, #353535), color-stop(0.5, #252525)); }

Nota: Debido a un problema con WordPress, he tenido que modificar el código CSS para guardar el artículo. En algunas líneas veréis que pone “fr om”, pues bien, debería ir junto, sin el espacio entre “fr” y “om”.

Adaptando la cabecera para el pié de página

Hagamos memoria de la cabecera que habíamos diseñado basándonos en la de Yahoo.

El código HTML era el siguiente: <div id="header"> <div id="logo_container"> <!-- Aquí estará el logo --> <h1>Miweb.com</h1> </div> <div id="menu_container"> <!-- Aquí estarán las pestañas --> <ul id="menu"> <li class="selected"><a href="#">Inicio</a></li> <li><a href="#">Artículos</a></li> <li><a href="#">Páginas</a></li> </ul> </div> <div id="subheader"> <!-- Aquí estará el buscador --> </div> </div> Y su CSS era: body, div, h1 { /* Reseteamos algunos estilos para que se ajuste correctamente el contenido */ margin:0; padding:0; } #header { width:100%; height:150px; background: -webkit-gradient(linear, left top, left bottom, fr om(#75B856), to(#4C7A06)); } #logo_container { width:100%; height:50px; } #logo_container h1 { padding:8px; font-family:Helvetica; font-size:30px; color:#FFF; } #menu_container { width:100%; height:50px; } #menu { width:100%; height:50px; padding:0; margin:0; list-style:none; } #menu li { height:38px; margin:2px 5px 0 5px; padding:5px; float:left; } #menu li a { height:28px; padding:5px; font-family:Helvetica; font-size:20px; color:#FFF; text-decoration:none; font-weight:bold; display:block; } #menu li.selected { background: -webkit-gradient(linear, left top, left bottom, fr om(#FFF), to(#FEFEFE)); -webkit-border-top-left-radius:6px; -webkit-border-top-right-radius:6px; } #menu li.selected a { color:#000; } #subheader { width:100%; height:50px; background: -webkit-gradient(linear, left top, left bottom, fr om(#FEFEFE), to(#C0C0C0)); border-bottom:1px solid #666; } Nota: Debido a un problema con WordPress, he tenido que modificar el código CSS para guardar el artículo. En algunas líneas veréis que pone “fr om”, pues bien, debería ir junto, sin el espacio entre “fr” y “om”.

Adaptar la cabecera al pie de página es un proceso bastante sencillo. Tan sólo deberíamos retirar el logotipo e invertir las posiciones del menú y el contenido inferior: ahora la parte gris debería estar en la zona superior y el menú inferior, adaptado a su vez las esquinas curvas de los enlaces y el degradado.

Estos cambios ser verían reflejados en el código HTML y en el CSS. El HTML pasará a ser así: <div id="footer"> <div id="prefooter"> <!-- Aquí estará el buscador --> </div> <div id="footer_menu_container"> <!-- Aquí estarán las pestañas --> <ul id="footer_menu"> <li class="selected"><a href="#">Inicio</a></li> <li><a href="#">Artículos</a></li> <li><a href="#">Páginas</a></li> </ul> </div> </div> Y el CSS, así: body, div, h1 { /* Reseteamos algunos estilos para que se ajuste correctamente el contenido */ margin:0; padding:0; } #footer { margin:256px 0 0 0; width:100%; height:100px; background: -webkit-gradient(linear, left top, left bottom, fr om(#75B856), to(#4C7A06)); } #footer_menu_container { width:100%; height:50px; } #footer_menu { width:100%; height:50px; padding:0; margin:0; list-style:none; } #footer_menu li { height:38px; margin:-1px 5px 2px 5px; padding:5px; float:left; } #footer_menu li a { height:28px; padding:5px; font-family:Helvetica; font-size:20px; color:#FFF; text-decoration:none; font-weight:bold; display:block; } #footer_menu li.selected { background: -webkit-gradient(linear, left top, left bottom, fr om(#C0C0C0), to(#999)); -webkit-border-bottom-left-radius:6px; -webkit-border-bottom-right-radius:6px; } #footer_menu li.selected a { color:#000; } #prefooter { width:100%; height:50px; background: -webkit-gradient(linear, left top, left bottom, fr om(#FEFEFE), to(#C0C0C0)); border-bottom:1px solid #666; } Nota: Debido a un problema con WordPress, he tenido que modificar el código CSS para guardar el artículo. En algunas líneas veréis que pone “fr om”, pues bien, debería ir junto, sin el espacio entre “fr” y “om”.

Y esto es todo de momento. Tan sólo me gustaría hacer un apunte: los links que pongamos en el pie de página no tienen por qué ser los mismos que pondríamos en la versión completa de la web. Me explico, generalmente se pone en el pie de página un enlace a la parte superior de la web, sin embargo, pulsando la barra de título de Mobile Safari ya nos lleva a la parte superior, con lo cual no es necesario añadir este enlace en nuestro pie de página.