Google Reader antes de activar el nuevo estilo

Google Reader no destaca precisamente por tener el diseño más bonito del mundo. De hecho no ha recibido ningún rediseño desde hace bastante tiempo, a diferencia de otros servicios de como Calendar o Gmail. Si sois de los que utilizáis Google Reader directamente desde su web, sin recurrir a ninguna aplicación que se sincronice con él, agradeceréis este artículo.

Lo que veis en la imagen de arriba es Google Reader tras activar algo de CSS a través de Stylish. Si no tenéis instalado Stylish, podéis hacerlo en Firefox o Google Chrome (en otros navegadores, como Opera o Safari, hay formas diferentes de aplicar los estilos CSS).

Si ya tenéis instalado Stylish, ahora tendréis que instalar los estilos. Al ser un archivo demasiado grande, el autor (Mestiso) no ha podido insertarlo directamente en userstyles.org, pero comparte el código en su página web. Para instalarlo (a través de Stylish) primero accederemos a userstyles.org y haremos clic en el botón Install with Stylish, a continuación editaremos el estilo y reemplazaremos todo el código por el que nos ofrece su autor en su página web. Para ello, en Firefox, mostraremos el panel lateral de Stylish (Ver » Panel lateral » Stylish) y haremos doble clic sobre el estilo Google Reader – 3 Column Reader. Una vez reemplazado el código haremos clic en Guardar y cuando accedamos de nuevo a Google Reader, veremos un diseño mucho más limpio y elegante.

El único inconveniente es que algunas características dejan de ser accesibles, como los patrones. Sin embargo esta función sigue estando activa. Para poder acceder a ella simplemente desactivaremos temporalmente el nuevo estilo (siguiendo los mismos pasos que antes, sólo que en lugar de hacer doble clic en Google Reader – 3 Column Reader lo haremos sobre el icono con una S que aparece a la izquierda del nombre, que tras el doble clic perderá el color, indicando que el estilo está desactivado).

Estilo: userstyles.org
Estilo: kamilb.info
Stylish: Firefox | Google Chrome

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?

Afortunadamente Víctor me avisó del problema, y ha dado la casualidad de que tenía una copia de la versión 1.0.2.3 en mi servidor de pruebas, así que la he subido a Sumolari.com y la podéis descargar desde aquí.

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.

En esta parte me centraré por completo en el diseño de las cabeceras, aprovechando algunos atributos CSS únicos de Webkit que nos facilitarán tareas como redondear esquinas y crear degradados. Si recordáis dónde nos quedamos en la parte anterior, llegamos a ver diferentes ejemplos de cabeceras, de las cuales nos centraríamos en las que utilizan un sistema de navegación por pestañas y en las que imitan la interfaz de las aplicaciones nativas del iPhone.

Creando una cabecera con degradados y pestañas

Comenzaremos por la cabecera con degradados y pestañas. Yo seguiré el modelo de Yahoo, que podéis en la imagen de la izquierda. Podría haber seguido el modelo de Google, pero me parecía más simple y fácil de hacer.

La cabecera está formada por tres niveles diferentes. En el primero está el logotipo y un enlace hacia el correo, en el segundo están las pestañas y en el tercero está el buscador. Puede que no tengamos clara la utilidad del tercer nivel fuera de un buscador, pero realmente puede ser muy útil. Por ejemplo, podemos mostrar ahí las subpáginas que hay dentro de la pestaña, o si estamos diseñando para un blog, la lista de categorías del artículo, o simplemente, un buscador.

Así que en principio la cabecerá tendrá la siguiente estructura HTML:

<div id="header">
		<div id="logo_container">
			<!– Aquí estará el logo –>
		</div>
		<div id="menu_container">
			<!– Aquí estarán las pestañas –>
		</div>
		<div id="subheader">
			<!– Aquí estará el buscador –>
		</div>
	</div>

Dicho esto, centrémonos en crear los degradados. Generalmente tendríamos que recurrir a imágenes, sin embargo, Webkit permite crear degradados mediante -webkit-gradient. Su sintaxis puede parecer algo compleja, así que veámosla con un ejemplo:

background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#000));

Cada coma (,) separa un valor diferente. El primero indica de si se trata de un degradado lineal o radial. En este caso tomaremos el linela. El segundo valor indica la posición desde la que comienza: a la izquierda y arriba. El tercer valor indica dónde acaba: a la izquierda y abajo. El cuarto valor indica el color inicial: blanco. El quinto y último valor indica el color en el que acaba: negro. También podemos establecer colores intermedios, pero es algo más complejo.

Esto nos evita tener que crear una imagen con el degradado y agiliza la carga de la página.

Para crear las esquinas curvas, recurriremos a -webkit-border-radius para establecer un radio a todas las esquinas y -webkit-border-(top | bottom)-(left | right)-radius para especificar qué esquinas tendrán cierto radio.

#redondear_bordes {
-webkit-border-radius:4px; /* Todas las esquinas tendrán un radio de 4px */
-webkit-border-top-left-radius:4px; /* Sólo la esquina superior izquierda tendrá un radio de 4px */
-webkit-border-top-right-radius:4px; /* Sólo la esquina superior derecha tendrá un radio de 4px */
-webkit-border-bottom-left-radius:4px; /* Sólo la esquina inferior izquierda tendrá un radio de 4px */
-webkit-border-bottom-right-radius:4px; /* Sólo la esquina inferior derecha tendrá un radio de 4px */
}

Combinando esto con algo más de CSS e ingenio podemos lograr sin mucha dificultad algo como lo de la imagen que hay a continuación, que se crearía a partir del siguiente código HTML / CSS:

<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>

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, f rom(#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, f rom(#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, f rom(#FEFEFE), to(#C0C0C0));
	border-bottom:1px solid #666;
}

Nota: He usado varias veces la palabra “f rom” en el código anterior. En realidad debería escribirse todo junto (sin el espacio entre la “f” y “rom”), pero no he podido unirlo y guardar el artículo, WordPress me devuelve un error. En fin, disculpad las molestias.

Como podéis ver, el resultado es muy similar al de Yahoo, aunque no he añadido el buscador, eso os lo dejo a vosotros.

Creando una cabecera que imite la de una aplicación nativa

El segundo tipo de cabeceras que vimos eran las que imitaban la barra de título de una aplicación nativa. Esta vez partiremos del diseño de Coosh, que podéis ver en la imagen de la izquierda.

Si bien Coosh trata de imitar la interfaz de una aplicación, lo cierto es que la barra de título está incompleta, faltan el título y el enlace hacia la siguiente página.

Así que partiremos de una estructura con un nivel y tres elementos: botón anterior, botón posterior y título de la página, que en HTML quedaría así:

<div id="header">
		<div id="back">
			<!– Aquí estará el enlace hacia la página anterior –>
			<a href="#">Atr&aacute;s</a>
		</div>
		<div id="forward">
			<!– Aquí estará el enlace hacia la siguiente página –>
			<a href="#">Adelante</a>
		</div>
		<div id="title">
			<!– Aquí estará el título de la página –>
			<h1>Miweb.com</h1>
		</div>
	</div>

Bien, ahora mediante combinación de degradados y bordes curvos podemos imitar la interfaz de una aplicación sin demasiada dificultad y sin usar imágenes. Podríamos mejorar el aspecto mediante el uso de imágenes, pero estamos hablando de aprovechar al máximo las posibilidades del iPhone, así que las dejaremos para más adelante.

El resultado que podemos lograr lo tenéis a continuación, junto con el código CSS que lo logra.

body, div, h1 { /* Reseteamos algunos estilos para que se ajuste correctamente el contenido */ margin:0; padding:0; } #header { height:30px; /* Tomaremos una altura aceptable */ padding:4px; background: -webkit-gradient(linear, left top, left bottom, f rom(#BEC8D6), to(#7A90AD)); border-bottom:1px solid #6F7A86; clear:both; } #back { height:20px; margin:0 10px 0 0; padding:4px; float:left; border:1px solid #626C79; -webkit-border-radius:6px; background: -webkit-gradient(linear, left top, left bottom, f rom(#9AADC6), to(#5C7DA9), color-stop(0.5, #6584AD), color-stop(0.5, #5C7DA9)); } #back a , #forward a{ font-family:Helvetica; font-size:15px; font-weight:bold; text-decoration:none; text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.6); text-align:center; white-space: nowrap; color:#FFF; } #forward { height:20px; margin:0 0 0 10px; padding:4px; float:right; border:1px solid #626C79; -webkit-border-radius:6px; background: -webkit-gradient(linear, left top, left bottom, f rom(#9AADC6), to(#5C7DA9), color-stop(0.5, #6584AD), color-stop(0.5, #5C7DA9)); } #title h1 { font-family:Helvetica; font-size:26px; font-weight:bold; text-decoration:none; text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.6); text-align:center; white-space: nowrap; color:#FFF; }

Nota: Como antes, he usado varias veces la palabra “f rom” en el código anterior. En realidad debería escribirse todo junto (sin el espacio entre la “f” y “rom”), pero no he podido unirlo y guardar el artículo, WordPress me devuelve un error. En fin, disculpad las molestias.

Con esto ya podemos crear dos tipos diferentes de cabeceras, que era el objetivo de esta tercera parte. Como siempre, cualquier duda, sugerencia o pregunta, podéis hacerla en los comentarios.

En esta segunda parte nos centraremos en las medidas que debe tener nuestro diseño, detectar rotaciones (giros a la derecha o a la izquierda), definir un icono para nuestra web, personalizar el zoom máximo y daré unas pinceladas sobre la cabecera. Para ello revisaremos algunas páginas diseñadas específicamente para el iPhone, como Yahoo y Google (versión iPhone), deviantART, Coosh o Please fix the iPhone.

Medidas

Medidas

Medidas en horizontal

Vayamos por partes. Antes de comenzar a hacer nada debemos tener claro el tamaño que tendrá el diseño. En la imagen de la izquierda podéis ver las medidas de los diferentes contenidos que muestra el iPhone: la barra de estado (está siempre visible, tiene 20px de alto y ocupa siempre todo el espacio horizontal de la pantalla), el campo de la URL (se oculta al hacer scroll hacia debajo, ocupa todo lo posible en el eje horizontal y 60px en el vertical), la barra de botones (al igual que la barra de estado, no se puede ocultar, ocupa 44px en la vertical y todo lo posible en la horizontal), lo cual deja un espacio de 320px x 356px de contenido propio de la página (320 en el eje horizontal y 356 en el vertical).

Si colocamos el iPhone en posición horizontal (apaisado), algunas medidas variarán (ver imagen de la derecha): la barra de estado y el campo de la URL permanecen como antes, mientras que la barra de botones para a ocupar sólo 32px en el eje vertical, con lo cual el contenido visible ocupa un espacio de 480px x 208px.

Cuando se diseña una web suele ser necesario tener en cuenta las diversas resoluciones de pantalla en las que se visualizará la página, sin embargo una de las cosas buenas para los diseñadores (y en algunos casos malas para los usuarios) es que la resolución es fija, así que basta con diseñar específicamente para estas medidas: nuestro diseño sólo se verá en un dispositivo un determinado navegador y una resolución de pantalla de 320px x 480px.

Detectando los giros, asignando icono y personalizando zoom

Al poderse girar el iPhone hay dos posibilidades: que se esté visualizando la página con el dispositivo en vertical o que se visualice con el iPhone en horizontal, lo cual hace que sea necesario detectar estos giros para poder mostrar u ocultar cierto contenido en cada caso.

Por ejemplo, si queremos que en la versión horizontal se vea algo más de contenido en los laterales (por aprovechar el espacio), será necesario detectar el cambio de posición y ajustar el diseño en consecuencia. Otro caso en el que necesitemos saber si se ha producido un giro es en el caso de los formularios: un campo de texto se puede alargar cuando el iPhone está en posición horizontal y se debe acortar cuando está en posición vertical, pura lógica.

Parar ello recurriremos a Javascript, con el cual podemos detectar fácilmente estos giros.

function updateOrientation()
{
	switch(window.orientation)
	{
		case 0:
			tamanio_cuadro_texto = "200px";
			tamanio_contenedor_a = "150px";
			break;
		case -90:
			tamanio_cuadro_texto = "360px";
			tamanio_contenedor_a = "300px";
			break;
		case 90:
			tamanio_cuadro_texto = "360px";
			tamanio_contenedor_a = "300px";
			break;
		case 180:
			tamanio_cuadro_texto = "200px";
			tamanio_contenedor_a = "150px";
			break;
		default:
			tamanio_cuadro_texto = "200px";
			tamanio_contenedor_a = "150px";
			break;
	}
	document.getElementById("cuadro_texto_1").style.width =  tamanio_cuadro_texto;
	document.getElementById("a").style.width =  tamanio_contenedor_a;
}

Es un código bastante sencillo, que se puede ampliar mucho más (el de arriba es sólo un pequeño ejemplo). Para hacer que funcione del todo tendremos que modificar la etiqueta body de nuestro HTML y añadirle los atributos onorientationchange y onLoad, que nos asegurarán que cada vez que se cargue la página o se cambie la orientación, se cambiará el tamaño por el adecuado (definido antes en el código Javascript), quedando así nuestra etiqueta body:

<body onorientationchange="updateOrientation();" onLoad="updateOrientation();">

Otro punto interesante para hacer única nuestra página web es asignarle un icono. En principio el iPhone no muestra ningún favicon en el navegador, pero al añadir un enlace a una web en la página de inicio, podemos indicarle al navegador que tome como icono una imagen específica, en lugar de una previsualización de la página web (que es lo que toma por defecto). Para esto usaremos la etiqueta link con el atributo rel establecido en apple-touch-icon:

<link rel="apple-touch-icon" href="http://10.0.1.3:8888/sumolari/wp-content/themes/sumolari/ipo/img/favicon.png"/>

Este icono debe ser una imagen con un tamaño cuadrado. No es necesario que le añadamos bordes curvos ni el toque luminoso, ya que los hará el iPhone directamente.

Por último, el iPhone permite hacer zoom en las páginas, sin embargo, como estamos diseñando específicamente para él, nos interesa mantenerlo bloqueado y ser nosotros quienes definamos el tamaño de las textos y los elementos. Con esto también logramos darle a la web un aspecto más similar al de una aplicación nativa. Para bloquear el zoom usaremos el meta-tag viewport, como en el siguiente ejemplo:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>

Si os fijáis, este meta-tag define varias cosas, como la anchura máxima (width – recordad que una cosa es hacer scroll vertical, cosa que ocurre muy a menudo en equipos tanto sobremesa como móviles, y otra hacer scroll vertical: queda mucho más “profesional” e integrado en la plataforma el que la web tenga scroll vertical pero carezca de horizontal, probadlo vosotros mismos y veréis como notáis el cambio), la escala inicial (initial-scale), la escala máxima (maximum-scale) y la posibilidad de escalar por parte del usuario (user-scalable).

Cabeceras

Ya llegamos a lo que es el diseño en sí. Este apartado lo completaré en la próxima parte, ya que hay bastantes cosas que explicar y me gustaría dejarles una parte sólo a ellas. Para adentrarnos en el tema de las cabeceras me gustaría proponeros 5 páginas diseñadas para el iPhone como ejemplo de diseños.

Como podéis ver, las 5 páginas se ajustan al tamaño horizontal del iPhone (que no al vertical). Las tres primeras páginas comparten el uso de pestañas, mientras que las dos últimas no hacen uso de ellas. La tercera página junto con la quinta intentan simular el aspecto de una aplicación nativa (usando parte del contenido visible para mostrar una barra de título similar a las de las aplicaciones nativas), mientras que la cuarta página utiliza un diseño más propio, siguiendo las líneas que utiliza el iPhone pero no intentando imitar tanto.

Así que deberemos decantarnos por un tipo de cabecera: con pestañas, simulando un aplicación nativa o que tenga un toque personal. A mí, de las que he visto hasta ahora, la que más me gusta es la de Yahoo. Creo que han dado en el clavo al mezclar un toque personal con el sistema de pestañas y la imitación (en parte) de la barra de título de una aplicación nativa.

Pero bueno, esto es todo por ahora. En la próxima parte me centraré por completo en lograr resultados parecidos a los de los ejemplos, es decir, me centraré en crear una cabecera con pestañas y una que simule la barra de título de una aplicación nativa.

También añade la posibilidad de limitar el número de artículos que se mostrará en cada categoría, de modo que es posible mostrar 5 artículos de una categoría y 3 de otra. Es recomendable limitar a un número de artículos menor de los que hay en la categoría, ya que si no se pueden producir comportamientos anómalos (añadir artículos de otras categorías para llegar al límite, por ejemplo).

Por último, también permite seleccionar el orden de los artículos: se pueden ordenar de más recientes a más antiguos o al revés.

No es mucha novedad y por eso esta nueva versión sigue siendo de la rama 0.4.0.x.

Podéis actualizar a esta versión desde el Panel de Administración de WordPress o descargando el plugin desde aquí.

Ya se puede descargar tanto para Windows como Mac y Linux la versión 3.6 de Firefox, que, entre otras cosas, es un 20% más rápida que la versión 3.5, implementa las últimas especificaciones HTML5, admite audio y vídeo en formatos abiertos y en pantalla completa e incluye “Personas” por defecto.

Se puede descargar la versión 3.6 desde la página de Mozilla o ver las novedades en el comunidado de prensa.