Los contenidos (textos, imágenes, vídeos) de una página web son importantísimos para tener una página web de calidad en la red, donde el usuario encuentre exactamente lo que busca. También son básicos para lograr un buen posicionamiento natural en los buscadores de Internet como Google, Bing y Yahoo!, pero nunca hay que focalizarse sólo en este aspecto, siempre debemos pensar en el usuario de nuestra página web.

Debemos centrarnos en explicar quiénes somos o qué ofrecemos en nuestra empresa, pero siempre acompañado de qué podemos hacer por los usuarios o en qué podemos ayudarles. Es decir, destacar los beneficios que obtendrá el cliente si contrata nuestros servicios o adquiere nuestros productos. Nunca debemos explicar aspectos internos de nuestra empresa que sólo pueden interesar a trabajadores o directivos de la empresa, ya que no es el objetivo de una página web y puede desviar la atención del usuario.

Nunca debemos dar por hecho que el usuario conoce nuestra empresa la primera vez que accede a la página web. De este modo, de una manera rápida y vistosa, el usuario debe ser capaz de entender rápidamente lo que ofrecemos y en lo que destacamos, así como los beneficios que puede obtener contratando los servicios de nuestra empresa.

Redacción de los textos

A la hora de redactar los textos de la página web, debemos tener en cuenta que pocos usuarios leen todo el texto, simplemente hacen un escaneo o una vista rápida. Así, para facilitar la lectura al usuario tenemos varias opciones:

• Incluir listados para resumir los puntos importantes
• Preparar esquemas o textos acompañados de gráficos
• Destacar los textos más importantes con títulos y negritas
• Evitar párrafos largos que no inviten a la lectura

Los textos deben ser claros y concisos, utilizando un lenguaje al alcance de cualquier usuario de nuestra página web. Se deben destacar las ideas principales en las primeras frases o títulos del texto, nunca dejarlas para el final ya que quizás el usuario no lo llegará a leer.

Otros aspectos a tener en cuenta

Debemos pensar en introducir palabras clave en los textos, ya que los textos también deben convencer a los motores de búsqueda. Sin embargo, nunca debemos centrarnos en este aspecto, es más útil explicar alguna idea o concepto para que la entienda el usuario, que no para que la entienda un motor de búsqueda. Al fin y al cabo, si un usuario lo ha entendido, el motor de búsqueda también lo entenderá.

Es recomendable también utilizar enlaces internos. Los enlaces internos son palabras o fragmentos de texto hacen de enlace a otros apartados de la propia página web. En este caso, es importante que estos enlaces se resalten de alguna manera respecto al texto, ya sea con subrayado o con un color diferente.

Si es posible, debemos pensar también en actualizar los textos o añadir un blog o apartado de noticias o novedades en nuestra página web. Además, también es un tema importante para el posicionamiento orgánico en buscadores, ya que estos valoran positivamente actualizaciones o renovaciones de textos y/o artículos.

Para acabar con el tema de los contenidos, tenemos que pensar en la importancia de las traducciones a otros idiomas. De este modo, si no dominamos un idioma, es recomendable encargar la traducción a alguna empresa externa especializada.

Factores externos a los contenidos

Hay muchos otros factores que debemos tener en cuenta y cuidar especialmente como:

• Nombre del dominio
• Título y descripción de la página que aparecen en los resultados de búsqueda de Google
• Visualización rápida de los datos de contacto de la empresa
• Acceso a otras páginas de la empresa, como pueden ser las de Facebook o Twitter

No podemos dejar de lado la gran importancia que tiene el diseño y la usabilidad de la página web, así como una buena programación para tener una página web que se visualice correctamente en todos los navegadores con un tiempo de descarga óptimo. No podemos tener una página web visualmente espectacular si el usuario debe esperar 20 segundos para poder verla.

Hace unos días Google anunció a través del blog Chromium el lanzamiento de un nuevo formato de imagen para web: WebP. Es un formato que comprime el tamaño del archivo de manera considerable respecto al formato JPG, manteniendo la misma calidad. De este modo, WebP se presenta como una clara alternativa al clásico JPG.

El formato WebP puede ser importante, por ejemplo, cuando los usuarios utilizan redes de banda ancha limitada, como pueden ser les redes móviles. En estos casos es cuando los usuarios aprecian más la lentitud al descargar las imágenes de las páginas web. hay que tener en cuenta que un 65% del total de bytes transmitidos de una página web corresponden a imágenes o fotografías. Así, WebP permitiría a los usuarios poder descargar imágenes más rápidamente, manteniendo la calidad y resolución.

Las pruebas que ha efectuado Google con 900.000 imágenes, han dado como resultado una reducción del tamaño de los archivo de un 39,8% de media, esperando incluso que los desarrolladores puedan conseguir unos mejores resultados.

En el siguiente enlace podéis ver algunos ejemplos comparativos con varias imágenes, donde se aprecia la reducción de tamaño, sin que se vea afectada la calidad de las imágenes.

Tendremos que ver como evoluciona el formato WebP y si será reconocido por los distintos navegadores de Internet. De momento, Pixelmator, el software de edición fotográfico para Mac, ya ha anunciado oficialmente que adoptará WebP. Así, todo parece indicar que, a medio o largo plazo, el formato WebP pasará a ser compatible y aceptado por los diferentes navegadores y sistemas operativos.

A continuación listamos una serie de galerías de páginas web diseñadas y maquetadas con CSS, que nos pueden ayudar a la hora de inspirarnos al diseñar una página web:

• Best CSS Gallery
• Best CSS Vault
• Best Web Gallery
• CSS Art
• CSS Bay
• CSS Beauty
• CSS Cake
• CSS Count
• CSS Cutie
• CSS Dance
• CSS Deluxe
• CSS Design Yorkshire
• CSS Elite
• CSS Garden
• CSS Leak
• CSS Mania
• CSS Perk
• CSS Remix
• CSS Style
• CSS Websites
• Design Bombs
• Divine CSS
• FantastiCSS
• Make Better Websites
• The Best Designs
• Web Creme
• Wow CSS

En Noupe encontramos este interesantísimo artículo en inglés titulado The Future Of The Web: Where Will We Be In Five Years?, donde podemos encontrar 15 predicciones de como serán y que tendrán las páginas web de aquí 5 años. Así, encontramos un listado con 15 puntos a tener en cuenta para prepararnos para las páginas web del futuro. Los puntos son los siguientes:

• Inclusión de micropagos para obtener contenidos de calidad. Estos micropagos estarán presentes en revistas online, servicios de noticias, páginas web de artistas, etc.
• Incremento del uso del scroll horizontal en el diseño web, debido a que las pantallas cada vez son más grandes y con resoluciones variables.
• Revistas online en formato más interactivo, con la inclusión de Wikis, vídeo y audio digital, redes sociales propias, etc.
• Contenido colaborativo y en tiempo real.
• Más contenidos semánticos y mejor uso de ellos, con nuevas aplicaciones que sepan sacarle partido.
• Mejor uso de los estándares web.
• Realidad aumentada en aplicaciones web para dispositivos móviles.
• Mejoras en la seguridad contra ataques de Phishing, Scams y Spam.
• Más aplicaciones y redes sociales.
• Programas televisivos de más alta calidad en Internet.
• Las aplicaciones web deben desempeñar un papel más importante en la vida diaria.
• El SEO (Search Engine Optimization) perderá importancia, ya que muchos usuarios utilizarán las recomendaciones que puedan encontrar en las redes sociales.
• Sistemas Operativos online.
• Interfaces de usuario personalizadas.
• La Web será el centro de información y distribución de contenido (mejor y mayor uso de RSS).

Desde NBSP, recomendamos una lectura exhaustiva de todos los puntos con sus explicaciones y comentarios: The Future Of The Web: Where Will We Be In Five Years?.

InstantShift nos ofrece en un interesante post 104 fuentes de excelente calidad para descargar de manera gratuita. Es una muy buena colección con tipografías de estilos muy variados.

* Además, si tenéis un rato libre, daros una vuelta por la página web de InstantShift, ya que hay un montón de artículos y recursos interesantes.

Os presentamos unas hojas (de funciones, tags, comandos …) descargables en PDF desde http://www.addedbytes.com/cheat-sheets/. Podemos encontrarlas de PHP, HTML, CSS, JavaScript, MySQL, expresiones regulares, mod_rewrite …

Os presentamos a continuación un buen número de páginas web con herramientas o recursos interesantes:

• WEBWAIT. Página web que nos calcula cuanto tiene que esperar un usuario para poder visualizar nuestra página web, es decir, nos calcula el tiempo de espera del usuario.
• SXC. Banco de fotos gratuito.
• José Luis Ávila Herrera. Banco de imágenes gratuitas.
• Free Icons Web. Página web con galerías de iconos gratuitos.
• Ajaxload. Página web que nos permite generar imágenes de carga, pudiendo seleccionar distintos estilos y colores.
• Ajax Rain. Página web que contiene artículos y scripts Ajax, DHTML y PHP.
• MiniAjax. Página web que contiene scripts Ajax, DHTML y PHP.
• Hivelogic: Enkoder. Herramienta web que nos ayuda a proteger las direcciones de correo electrónico convirtiéndolas en código JavaScript cifrado, ocultándolas de los robots de rastreo.
• The FWA. Página web donde encontrar miles de websites interesantes y atractivos.
• Dezignus.com. Blog de diseño gráfico muy interesante y útil. Se trata de un blog donde su creador muestra y comparte algunas de sus obras, así como las de otros artistas o diseñadores. Los conjuntos de iconos que presenta son muy recomendables.
• Load info – gif generator. Herramienta online para generar imágenes de carga (gifs animados). Hay diversos estilos que podemos adaptar a nuestro gusto o necesidad con color de fondo, color de la imagen animada y tamaño.
• Iconfinder.net. Buscador de iconos online muy completo y rápido. Nos permite filtrar por tamaño de icono y nos muestra los iconos con fondo de pantalla blanco o negro. Todos los iconos están bajo licencia Creative Commons, GPL y LGPL.
• Urbanfonts.com. Permite descargarnos un buen número de fuentes gratuitas. La búsqueda de la fuente es sencilla (ordenadas por categorías, imágenes de las fuentes … ) y, además, las encontramos para MAC y Windows.
• Stripe Generator. Herramienta online que nos permite crear diferentes tipos de fondos para nuestras páginas web. Podemos definir el color y ancho de las bandas, el color y tipo de fondo, el degradado …
• Color Wizard. Herramienta online que nos permite, partiendo de un color base, conseguir un combinado de colores relacionados con este color base.
• Squidfingers – Patterns. Website que nos permite descargar mosaicos o fondos para nuestras páginas web.
• Check Browser Compatibility. Herramienta web para comprobar si nuestra página web se visualiza correctamente con distintos navegadores.
• CSS Mania. Directorio de sitios desarrollados con hojas de estilo (CSS).
• CSSBarcelona.com. Galería de páginas web desarrolladas con CSS.
• Web a 2.0. Galería de aplicaciones y servicios Web 2.0.
• AddThis. Botón para que los usuarios compartan tu página web con otros usuarios de páginas como Delicious, Digg, Technorati …
• Lorem Ipsum. Generador de textos Lorem Ipsum.  Lorem ipsum es el texto que se usa habitualmente en diseño gráfico o web en borradores o presentaciones del diseño antes de insertar el texto final. Una de las cualidades del texto en cuestión es que tiene una distribucion de letras similar al inglés.
• BgPatterns. Herramienta online que nos permite crear fondos para nuestras páginas web con diferentes figuras. Se puede ajustar el tamaño, la imagen, los colores, la inclinación, la textura y la transparencia. Una vez creado el fondo, podemos descargarlo en formato JPG.
• Preloaders.net. Herramienta online que nos permite generar imágenes de carga animadas de forma sencilla. En este caso podemos escoger entre diferentes diseños como: 3D, rectangulares, circulares y horizontales. También se puede configurar el color, el tamaño y la velocidad de la animación. Una vez se ha configurado la imagen animada tal y como la queremos, la generamos y la descargamos en formato GIF para utilizarla en nuestro sitio web.
• TABS GENERATOR. Herramienta que nos permite generar pestañas para nuestras páginas web. Nos ofrece diversas opciones y parámetros para poder personalizarlas tal y como queremos. Es una herramienta muy cómoda, fácil de usar e intuitiva.
• ColoRotate. Herramienta online gratuita (desarrollada en Flash) que permite generar paletas de colores a partir de un cono de colores en 3D. Las paletas generadas se pueden compartir con los demás usuarios de la comunidad.