Últimamente estoy aprendiendo mucho sobre la optimización de sitios web, tanto a nivel de código css y html como a nivel de navegadores y experiencia de usuario.

Hace unos días leí el artículo how to reduce the number of HTTP request, muy útil para acelerar la carga de nuestras webs. Además justo estos días atrás  en lawebera.es escribimos un artículo sobre el tema, y anteriormente hemos publicados otras cosas relacionadas que puedes leer aquí: Cómo hacer diseños web de carga rápida y como acelerar la carga de un sitio web.

Entre otras cosas, en el artículo explican la utilidad básica de CSS Sprites:

• CSS Sprites: es una técnica usada para combinar una serie de imágenes en una. A continuación, utilizando la propiedad background-position en el archivo CSS se controla qué parte de esa imagen será visible para un cierto elemento. De esta manera, en lugar de tener una petición HTTP para cada imagen individual, sólo habrá una para un archivo de imagen más grande que contiene a todas las demás. Muy recomendable.

Algunos recursos sobre CSS Sprites:

• CSS Sprites Generator: subes las imagenes a juntar en el sprite y la aplicación te crea la imagen padre junto con el background-position adecuado para cada imagen.
• Tutorial básico de CSS Sprites: un tutorial para iniciarse en el uso de esta técnica y empezar a ver sus ventajas, muy sencillo.
• Guía de CSS Sprites I y II: una guía mucho más completa de esta técnica. Muy recomendable su lectura.
• CSS Sprites de A List Apart: este artículo sobre el tema es casi una leyenda de las veces que ha sido nombrado y enlazado. Está en inglés, pero merece la pena leerlo.

¡A optimizar!

Hace unos años innauguré una sección, que si bien no actualizo todo lo que debería, ha tenido muy buena acogida entre los lectores del blog. Es la sección de diseños web con estilo, donde pongo capturas de pantalla de diseños que creo merece la pena parase a analizar para aprender a hacer una web mejor.

Bueno, pues ahora abro una sección parecida, pero dedicada a los logotipos, una rama mucho más cercana al diseño gráfico, pero que supone uno de los grandes pilares del diseño de páginas web, y de los trabajos más dificiles a los que se enfrenta un diseñador web, sino el que más.

Y para estrenarla, os traigo este logo que me ha dejado impresionada de lo sencillo y a la vez impactante que resulta:

(Coffee Cup)

Como digo, bajo mi punto de vista impresionante. Una prueba de las enormes cosas que se pueden hacer y además usando un solo color.

En Seomoz han creado una chuleta SEO muy útil para todo diseñador web mínimamente interesado en el posicionamiento web de las páginas de sus clientes, o las suyas propias.

Aquí una pequeña muestra:

Esta útil chuleta nos indica los aspectos SEO más importantes a la hora de diseñar una página web. Entre otros,   las etiquetas HTML que debemos usar para mejorar el posicionamiento (Title, H1, H2, H3, strong…), límites estimados en el indexado de páginas de los buscadores, sitemaps, robots.txt, Robots Meta Tags, etc.

Muy recomendable si eres diseñador web, o estás haciendo tu página web y los temas del posicionamiento en buscadores no te vienen de primeras a la cabeza, ya que son conceptos básicos que toda web debería tener como mínimo para facilitar la indexación y el ir escalando posiciones en Google.

En esta ocasión voy a analizar una nueva empresa de diseño web de Valencia: Internet y Ventas.

Acaban de lanzar su oferta a través de Internet y la verdad es que promete bastante. En particular me gustan sus 7 reglas de compromiso, entre ellas, me llaman la atención gratamente éstas:

• Si se retrasan en los plazos de entrega te devuelven un 5% de lo pagado por cada semana de retraso: esto es buena señal, ninguna empresa que se precie lanzaría una oferta así si no tuviera la seguridad de cumplir con los plazos que ofrece (o al menos no debería ofrecerlo siendo sensatos). Da cierta impresión de seriedad.
• Cuando te entregan el diseño web, te entregan un pack con videotutoriales y una guía para enseñarte a usar el sitio (trabajan con gestores de contenido por lo que puedo entender). Una cosa que he ido descubriendo por experiencia es que los videotutoriales son fantásticos para aprender cualquier cosa.
• Tienes soporte vía teléfono, chat y email gratis durante 2 meses tras la entrega del pedido. No está nada mal, 2 meses dan para probar y reprobar el diseño y para preguntar todo aquello que no entiendas.
• Lo que más me sorprende es su última regla. Afirman que ellos no ponen el precio del producto, lo pones tú. Hablando con el responsable del proyecto me cuenta que la idea es conseguir llegar a un acuerdo en el precio y evitar costes demasiado elevados. El cliente valora lo que está dispuesto a pagar y a partir de ahí se desarrolla la idea, asegura, sin afectar a su calidad.

Según cuentan en su web, son un equipo de diseñadores y desarrolladores web con 10 años de experiencia en el sector, que ofrecen servicios de diseño web profesional a un precio asequible. He visto algunos diseño que me han pasado vía email y son frescos y actuales… layouts construidos con capas (divs), uso de CSS, sin tablas, de buena calidad y compatibles con la mayoría de navegadores.

En Internet y Ventas hacen páginas web para empresas, para artistas y para emprendedores, aunque a día de hoy todavía no estás desarrolladas las dos últimas secciones. También desarrollan blogs y tiendas virtuales. En una de sus páginas para un cliente he visto el uso de Magento, un CMS para tiendas online que está pegando fuerte últimamente en el mercado debido a sus grandes ventajas frente a gestores clásicos como osCommerce.

No hay lista con tarifas, y muchas secciones se encuentran en construcción todavía, por lo que habrá que ver en las próximas semanas como va evolucionando el sitio y que servicios nos ofrece que la hagan destacar, porque empresas de diseño web hay muchas, es un mercado muy competitivo. De momento el ser flexibles con los precios y dejar que el cliente los “decida” parece un buen camino.

Un ejemplo de uno de sus diseños, ya que en la web  aún no tienen portafolio (está en construcción), es esta página: Verdadera Seducción.

Particularmente me gusta mucho su diseño porque se adapta a las nuevas resoluciones de los navegadores modernos, más grandes y espaciosas. Usa colores claros lo que siempre es de agradecer cuando tienes que leer textos en la web. Me gusta en especial el diseño del formulario de registro, sencillo y muy usable:

Tampoco he podido ver muchos más diseños, supongo que al ser una empresa nueva aún necesitan crearse una buena cartera de clientes. Igualmente creo que hay que tener muy en cuenta los nuevos proyectos, sobre todo por la ilusión que suelen llevar detrás y por su necesidad de ofrecer precios competitivos, esto puede hacernos ahorrar un buen dinero en nuestra factura de diseño web.

Enlace: Diseño Web Valencia

Twitter, o twiter, tweter, twetter, incluso tuiter… he visto de todo por ahí, al igual que su explicación no es fácil escribirlo.

De cualquier manera Twitter es una página web dificil de explicar, no es como Facebook, tampoco es un blog… entonces, ¿qué es twitter? pues este video de apenas 3 minutos lo explica a la perfección, y encima está traducido al español. Espero que a alguien le saque de dudas:

Como ya se acerca la navidad puede que alguien quiera decorar un poco su blog con algo de nieve, arboles navideños, gorros de Papá Noel y lo que queráis. Os traigo una lista de iconos e imágenes de navidad (christmas Icons) para vuestras páginas web y blogs:

• Iconos de Smashing Magazine: tienen un par de años pero siguen completamente vigentes. Además es una lista bastante completa, incluso hay algún theme de WordPress navideño por si quieres cambiar el blog por completo por estas fechas. Son archivos descargables y gratuitos.
• 250 Christmas Icons de 10steps.sg: pues eso, una colección (o más bien colecciones) de 250 iconos navideños de muy buena calidad. Con este recursos tenéis más que de sobra seguro, pero por si acaso, hay más.
• Imagenes navideñas de IconArchive: estas son más sencillas y básicas, pero cumplen a la perfección su función y son pequeñas y ligeras. Tienes cientos de iconos divididos por categorías.

Que los disfrutéis.

Dejo aquí unos manuales de posicionamiento web muy buenos y fáciles de entender, a los que suelo recurrir de vez en cuando y de los que me fío, por si a alguien le resultan útiles para mejorar su SEO.  Con estos manuales tienes muchísima información, incluso para convertirte en un experto:

• http://www.guia-buscadores.com/posicionamiento/
• http://www.manualdeposicionamiento.com/guia-de-referencia-seo/
• http://www.entrecodigos.com/manual-seo
• http://www.vseo.es/seo-google/seo-manual-seo-pdf/

(click para ampliar)

The Pixel Blog.

Leyendo Smashing Magazine me topé con este diseño, y francamente, me ha dejado asombrada.

Pocos diseñadores web están al alcance de crear diseños como este, sobre todo por la parte artística, o cuando menos pocos se atreven. No he visto cosas parecidas muchas veces, y siempre es de agradecer que a alguien se le ocurran este tipo de ideas y se exploten.

La parte gráfica es impecable para mi gusto, no puede llamar más la atención al visitante. Creo que en ese sentido logran muy bien los objetivos de la página puesto que es básicamente un portafolio de una empresa de diseño, y que mejor que impresionar al cliente con el diseño de tu propia web, es el mejor escaparate.

Por otro lado, la navegación resulta fácil, se han encargado de delimitar bien cada zona de la web con esa estructura de árbol tan original. Las diferentes ramas separan los post, las secciones…

Personalmente me gusta mucho el efecto de la rueda giratoria que hay en cabecera. Ya que te pones a hacer un diseño espectacular que menos que añadirle algo de flash… desde luego, tienen un excelente diseñador gráfico en su plantilla.

Como contra, tal vez la imagen de cabecera inutiliza un poco el resto de la página al ser tan grande y obligar a hacer scroll si quieres leer de que va el asunto. Yo habría aprovechado un poco más el diseño de lo que está, integrando más los botones que se ofrecen al principio de página. Por ejemplo para el botón de twitter habría usado la caseta que hay colgando en el sidebar.

Por otro lado, me da la sensación de que lanzan toda la artillería en el banner de cabecera con esa gran imagen y una vez llegas a los post, se vuelve un blog bastante corriente, que por un lado está muy bien para la usabilidad, pero por otro da la sensación de que falte algo.

Un dato, no dejéis de ver el pie de página, que no tiene nada que envidiar a la cabecera. Aunque como decía no hubiera estado de más añadirle alguna utilidad a tan fantástica gráfica. Otro ejemplo, hacer funcional ese buzón de correo que hay en la imagen del footer para ofrecer un medio de contacto.

¿qué opinas tú de este diseño web?

Buscamos bloggers para redacción de contenidos en LaWebera.es. Cada día contamos con un número de visitas más y más importante, así que buscamos gente que quiera promocionar su web a través de este sitio y aportar algo útil a la comunidad de diseñadores y desarrolladores web a cambio de contenidos.

Nos interesa gente entusiasta de la web, que realmente les guste esto y tengan ganas de ayudar a otros.

Puedes ver la información en esta página: Escribe tus artículos en LaWebera.es.

Últimamente he asistido a alguno seminarios de Google Adsense, y en el último que trataba sobre la optimización de diarios online, hablaban (como no) de los anuncios de Adsense que mejor funcionan, dan mejor rentabilidad, tienen mejor CTR (porcentaje de clics por impresión), etc.

Muchos ya sabréis de sobra que anuncios son los más rentables en Adsense, pero me ha parecido interesante dejar aquí una de las diapositivas del seminario para que aquellos poco familiarizados con Adsense lo tengan más claro:

Este gráfico viene a decir que los anuncios más rentables en Adsense son los formatos grandes, además, las ubicaciones en las que mejor funcionan son en la primera mitad de la página. En concreto, rentabilizan bastante bien el rectángulo de 336×280 (también el de 300×250) y el skycraper vertical de 160×600 (aunque también el de 120×600 y el horizontal de 728×90)

Y aquí unos ejemplos de cómo son este tipo de anuncios:

A los principiantes en Adsense y a todos en general, ¡suerte en la optimización!.

Hace unos días publiqué una entrada en LaWebera.es explicando como mostrar entradas aleatorias en WorPress para una categoría determinada. Como me costó encontrarlo un poco, me lo guardo en el blog para la próxima vez y lo comparto con quien lo necesite. Aquí está el código:

<?php $reciente = new WP_Query("cat=XX&showposts=5&orderby=rand");
      while($reciente->have_posts()) : $reciente->the_post();?>
<a href="<?php the_permalink() ?>"><?php the_title(); ?></a>
<?php the_excerpt(); ?>
<?php endwhile; ?>

Donde pone showposts=5, 5 es el número de artículos que mostrará, puedes modificarlo para mostrar el número de artículos que quieras.

Donde pone cat=XX, hay que sustituir las XX por el número de la categoría.

El orderby=rand es lo que hace que los post se muestren de forma aleatoria.

La versión completa de este artículo puedes leerla aquí: Post aleatorios por categorías en WordPress

Ya hemos comentado en esta web otras paletas de colores (II, III y IV) pero buscando herramientas para el lavado de cara de LaWebera me encontré con esta otra paleta que me resultó de utilidad.

Desde luego tiene una gama amplia de colores que puedes usar sin problemas, y lo bueno es que te da el valor hexadecimal y RGB.

Eso sí, si quieres una fantástica herramienta para seleccionar los colores de tu página web, no dejes de probar esta paleta. Aquí tienes una revisión completa de sus características.

Enlace: Dattahome y Color Scheme Designer 3

Recientemente he encontrado este videotutorial que te enseña paso a paso como convertir un archivo PSD de Photoshop a HTML+CSS.

Es una guía completísima, y el hecho de que te la expliquen en video ayuda mucho, para mí es el mejor howto (cómo hacer) que existe.

En este caso concreto, te enseña a separar por capas el diseño, a construir el CSS y el HTML, y hasta a añadirle los “arreglos” para que se vea igual en Internet Explorer que en el resto de navegadores. Eso sí, tiene un gran inconveniente, como muchos de los mejores recursos sobre diseño web, está en inglés.

También hay algunos tutoriales en español, aunque mucho más escasos, como este breve tutorial de PSD a HTML que es bastante sencillo de leer. El resultado no será un código perfecto, pero si te estás iniciando es una gran ayuda.

Videotutorial PSD en HTML en español

Uno muy muy bueno en español es este de cristalab, que recomiendo sin duda, ya aunque solo sea porque está en español. Pero a parte de eso es completísimo también y de gran calidad. Os dejo los enlaces a los videos:

1. Convertir PSD en HTML, parte 1
2. Convertir PSD en HTML, parte 2
3. Convertir PSD en HTML, parte 3
4. Convertir PSD en HTML, parte 4
5. Convertir PSD en HTML, parte 5
6. Convertir PSD en HTML, parte 6

Ahora bien, si no tienes tiempo y/o ganas de aprender como se hace, para variar tienes algunos recursos disponibles en Internet, eso sí, seguramente tendrás que gastarte algo de dinero para obtener un código decente:

• Quiero CSS: les entregas tu diseño en PSD y ellos te lo maquetan, como dije, pagando.
• PSD a HTML: una empresa que ofrece servicios similares a la anterior, te maquetan la página web a partir de un archivo PSD de Photoshop.
• PSD to HTML: es la página web por excelencia para contratar este tipo de servicios. Está en inglés, pero ofrece unos precios muy competitivos y sus diseños son de grandísima calidad, con muchas opciones para elegir y un cómodo formulario de compra.
• PSD to WordPress: lo mismo, una empresa de maquetación web, en este caso especializada en la plataforma WordPress, también en inglés.

¡A maquetar!

Hace ya un par de años desde que lancé el rediseño de LaWebera.es, que lo mío me costó por todo el trabajo de cambio de CMS que supuso. Y desde hace un tiempo resultaba necesario reestructurar ciertas partes del sitio, sobre todo el índice.

Lo más importante de este lavado de cara ha sido el cambio de resolución a 960px para adaptarlo a las altas resoluciones que llevan dominando la cuota de navegadores desde hace tiempo. Con esto ganamos en amplitud y espacio para ofrecer los contenidos. Este punto sobre todo se nota en el índice, al cual le he añadido nuevos apartados y en definitiva una nueva estructura que a mi parecer permite mostrar más información. También está diseñado con vistas a añadirle en los próximos días o semanas nuevas funcionalidades, como “videos destacados”, encuestas y alguna cosa más que se me ocurra y vea de utilidad.

El cambio a 960px le ha dado más espacio a todo en general, por lo que he ampliado las secciones destacadas en el menú horizontal que aparece en la parte superior de todas las páginas. Así es más rápido el acceso a los contenidos más importantes de la web.

A su vez, hay una modificación en el modo de mostrar la publicidad, también sutil, como casi todo en esta renovación. Lo más importante ha sido la eliminación del menú derecho, que tenía principalmente un bloque vertical de anuncios de Adsense.

Por otro lado, he cambiado la tipografía, aunque siendo de la misma familia es un cambio mínimo, pero me resulta más clara para leer texto, la base de esta web, así que espero que facilite la lectura de los artículos que aquí se ofrecen.

Y poco más por ahora, sólo que el diseño está en fase de prueba, tengo que rematar algunos aspectos que por falta de tiempo dejaré para otro día y sobre todo mejorar la página principal, a la que quiero añadirle un par de cosillas para darle más vida.

Cambios sutiles pero importantes, como digo sobre todo en la página principal. Aquí os dejo unas capturas, aunque no se aprecian muy bien las diferencias.

Antes:

Ahora:

Integrar Facebook con tu blog es una manera más de potenciar tu web y su contenido, ya sea promocionando los post de tu blog directamente en tu perfil de Facebook o añadiendo al blog funcionalidades como Facebook Connect, de forma que tengas un sistema de login para tus usuarios.

Nos guste o no, cada vez más y más gente usa Facebook, de hecho, millones de personas en el mundo lo usan. Es fácil que alguien que entre en tu web tenga pefil en Facebook, por lo que esta herramienta puede ser interesante para acercar más al usuario a nuestro sitio web.

Facebook Connect, que citando a Error500, viene a ser:

Connect, Facebook plantea un sistema de identificación para cualquier sitio web (en cualquier página que adopte el sistema, el usuario podrá acceder con su identificador y contraseña de esta red social), pero dando un paso más: no sólo permite identificarse sino que integra la información del perfil y los contactos de Facebook, es decir, te traes tu red social a esa página web.

Hay varias formas de integrar Facebook en tu web, ya sea para WordPress, para Movable Type, Drupal, Joomla, etc. En la página para desarrolladores de Facebook tienes la información detallada de cómo integrarlo en tus páginas web. O en la wiki de Facebook.

Vía: Mashable