This post was published 13 years ago so it may be outdated.
Los que hayáis visitado antes Sumolari.com y seáis observadores, habréis notado ciertos cambios en el diseño del blog. Para comenzar, y como ya anuncié a mediados de septiembre del año pasado, y es hoy cuando se hace efectivo el cambio: el blog pasa a ser una parte más de Sumolari.com, y no el eje principal de la web. A partir de ahora se podrá acceder al blog desde el enlace del menú principal, desde http://sumolari.com/blog o desde el subdominio http://blog.sumolari.com. La página principal contendrá un carruseles con los últimos proyectos en los que trabaje y series de tutoriales que vaya publicando en el blog.
Información del artículoInformación del enlace
A pesar de no ser el centro de la web, el blog también tiene algunas novedades. He modificado ligeramente las etiquetas que indican la fecha de publicación del artículo, y al pasar el cursor sobre ésta, se despliega información acerca de las categorías en las que se ha publicado el artículo.
Otra de las novedades respecto al blog es que ahora dejar el cursor sobre un enlace que dirija a un artículo de Sumolari.com, se mostrará el título de la página a la que dirige, de modo que es más fácil saber hacia dónde lleva el enlace. He eliminado el icono que indicaba que el enlace dirigía a una página externa a Sumolari.com, y lo he reemplazado por un color negro al pasar el cursor sobre el enlace, por contra, al pasarse el cursor sobre un enlace que dirige a Sumolari.com, éste pasa a tener un color gris.
Buscador instantáneoSuscribirse a los comentarios
En cuanto al buscador de la web, lo he modificado para que busque según que van escribiendo las palabras, aunque se puede forzar una búsqueda pulsando Enter o haciendo clic en el icono de la lupa.
También he estado revisando el tema de las suscripciones a los comentarios. WordPress crea un RSS de los comentarios de cada artículo, pero he puesto ningún enlace a los mismos en los artículos: tan sólo hay un enlace a este RSS en la pestaña de Meta.
Gestionar las suscripcionesRediseño del formulario de contacto
Estuve planteándome qué solución aplicar para poder llevar un seguimiento de los comentarios, y he decidido implementar el plugin Subscribe to Comments, que permite a los lectores recibir un email automáticamente cada vez que se publica un nuevo comentario en un artículo. No obstante, he modificado el plugin para que se adapte mejor a mis intenciones y se puedan gestionar las suscripciones sin salir del artículo que se está leyendo, trabajando en una ventana que se superpone al contenido, como los resultados de la búsqueda o el menú de Proyectos.
El formulario de contacto también ha cambiado ligeramente para diferenciar mejor los campos y utilizar mejor el espacio, aunque el funcionamiento es el mismo de siempre.
Columnas en las pestañas
Por último, el pie de página también ha sido ligeramente modificado. He unificado las pestañas Recomendado y Meta, además de que ahora el contenido de las pestañas está dividido en dos columnas para aprovechar mejor el ancho de la página.
Aparte de estas novedades, también he arreglado algunos fallos que había acumulado de versiones anteriores del diseño, nada del otro mundo, pero ahora algunos fallos que había antes, como que al pasar el cursor sobre una imagen semitransparente su fondo cambiaba a un color azul claro, entre otros.
Y éstas son todas las novedades del diseño de Sumolari.com.
This post was published 13 years ago so it may be outdated.
Uno de los problemas a los que te enfrentas cuando llevas a cabo un proyecto es cómo recibir y gestionar las sugerencias y los problemas de los usuarios. Yo me he decantado por crear un foro sólo para dar soporte a mis proyectos, sin embargo vía Twitter descubro una forma algo más cómoda de llevar el avance de los proyectos.
Se trata de Quality Control, un theme para WordPress pensado especialmente para usarse para estos fines. Permite crear de una forma cómoda un sistema de gestión de tickets, ordenados por estados, categorías, etiquetas y ramas. Sin duda de lo más útil para gestionar los bugs que vayan apareciendo en nuestros proyectos.
Además de un excelente diseño y una gran utilidad, este theme tiene otro punto a su favor: es totalmente gratuito y podéis descargarlo gratis o ver la demo.
This post was published 13 years ago so it may be outdated.
Hoy han publicado en Smashing Magazine una excelente recopilación de 100 estupendos themes gratuitos para WordPress. En la recopilación hay themes especialmente pensados para portafolios, para blogs, para tiendas, para dispositivos móviles…
Si estáis buscando un buen theme para vuestro blog, revisad el artículo porque seguramente encontraréis alguno que os guste.
This post was published 13 years ago so it may be outdated.
Muchas veces se dice que no siempre el camino fácil es el mejor. Esto se puede aplicar a muchas cosas, y el CSS (Cascading Style Sheets) no iba a ser menos. Seguramente si acabáis de entrar en el mundo del diseño web os habréis sentido tentados a usar tablas (<table>) en lugar de capas (<div>) y a usar el atributo style en lugar de archivos CSS. A continuación voy a exponer mis 10 razones por las cuales es mejor usar CSS que no hacerlo. Read more →
This post was published 13 years ago so it may be outdated.
Ayer estuve dándole un pequeño repaso al diseño del blog con el objetivo de mejorar la legibilidad de los artículos y arreglar algún que otro error que había aparecido a raíz del último rediseño. La principal novedad que vais a notar es que el tamaño de la fuente es más grande, (de hecho he cambiado todas las fuentes de px a em) y también he amplido la separación entre líneas y párrafos.
En cuanto a los títulos, les he cambiado la tipografía para que destaquen algo más, y he actualizado las páginas de archivo y de resultados de búsqueda para solucionar algunos problemas que tenían, como por ejemplo, algunos descuadres con la etiqueta que contiene la fecha o la falta de la barra de permalinks y comentarios.
Por último he modificado también las galerías para que en lugar de enlazar a la imagen en tamaño reducido ahora enlacen a la imagen en tamaño completo. Tampoco son grandes cambios, y como podéis comprobar, están pensados princpalmente para mejorar la legibilidad de los artículos del blog.
This post was published 13 years ago so it may be outdated.
Con la salida de WordPress 3.0 decidí que el diseño de Sumolari.com necesitaba una puesta al día, una pequeña renovación de alguna de sus partes y alguna que otra optimización. Además, durante el desarrollo del tutorial de diseño web para el iPhone fui diseñando una versión para iPhone / iPod Touch de Sumolari.com, que quería poner online en cuanto fuese posible. Por úlimo, aprovechando que ya he terminado el desarrollo de WP Carousel 0.5 (aunque aún tengo que redactar la documentación antes de liberarla) he dedicado la mañana a actualizar el diseño del blog y del foro, juntamente con la versión de WordPress del blog y los plugins.
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
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.
This post was published 13 years ago so it may be outdated.
Nota: Esta es la quinta parte del tutorial Diseñando nuestra web para el iPhone. Si no has leído las partes anteriores, es muy recomendable que lo hagas, comenzando por la primera. También os aviso de que si bien voy a explicar cómo diseñar para el iPhone, para comprender estos tutoriales son necesarios unos mínimos conocimientos de HTML y CSS, siendo recomendable tener alguna idea de Javascript (tampoco es necesario ser experto, ya que yo mismo soy un novato).
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:
[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>
[/html]
El código CSS para imitar el resultado de la segunda imagen de la izquierda es el siguiente:
[css]
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;
ul.post-list li a span.post-dates {
font-size:13px;
font-weight:normal;
color:#666;
display:block;
}
[/css]
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.
This post was published 13 years ago so it may be outdated.
Ya está disponible la versión de prueba de la Creative Suite 5 de Adobe en todas sus ediciones, entre ellas la Master Collection (la única que incluye todos los programas de la suite). En la versión anterior la única forma de probar la Master Collection era comprando un DVD con el instalador de la versión de pruebas, sin embargo en esta versión sí que se puede descargar directamente la prueba desde la web de Adobe.
En esta página podéis descargar tanto la versión para Mac OS X como la versión para Windows y usarla durante 30 días. Para poder descargarla es necesario tener una ID de Adobe, que se puede obtener al regsitrarse de forma gratuita en la web.
Nota: No preguntéis por cracks, seriales o demás porque el tema de la piratería está totalmente censurado en este blog. Cualquier comentario de este tipo será eliminado de inmediato.
This post was published 13 years ago so it may be outdated.
Hoy han publicado en Smashing Magazine métodos para aplicar algunas propiedades de CSS3 como opacidad, esquinas redondeadas, sombras y demás en Internet Explorer. El método hace que el código CSS deje de ser válido y cumplir con los estándares, pero al menos se consigue un buen resultado.
A ver si en IE9 se ponen las pilas y nos evitan tener que recurrir a estos trucos.
