¿Primar el diseño o el posicionamiento en buscadores? ¿Una web atractiva o una web usable? Desde hace tiempo éstas han sido algunas de las inquietudes con las que diseñadores y clientes han tenido que lidiar. Los diseños web en flash son visualmente muy atractivos, sin embargo, también pueden darnos problemas a la hora de aparecer en buscadores, permitir una navegación sencilla e intuitiva u obligar a hacer pesadas descargas de los ficheros flash para poder visualizar el contenido.

Hoy han publicado un interesante artículo en Site-Reference.com donde abordan este tema. A grandes rasgos, nos cuentan que en términos generales existen dos tipos de contenido en una página web: texto y gráficos. Los motores de búsqueda indexarán el contenido de nuestra página web gracias, en parte, al texto que tengamos publicado, por ello, es importante que la proporción de texto/gráficos vaya de lado del texto.

El contenido gráfico, ya sean imagenes, flash o multimedia, sólo nos reportará beneficios en términos de diseño y concepto visual, pero no para el posicionamiento web, la usabilidad o la accesibilidad. De hecho, según la W3C, es imprescindible ofrecer contenido alternativo para cualquier elemento que pueda provocar dificultades para su lectura o comprensión.

En el artículo argumentan varios puntos negativos en la utilización de contenidos Flash en nuestra página web, ya sean algunos elementos de la web o todo el diseño:

• Algunas animaciones, presentaciones o diseños web en flash requieren la descarga de ficheros pesados. Para conexiones lentas puede resultar mortal y los usuarios pueden optar por abandonar la página. Como ejemplo personal, el otro día entré en la web de Opel para ver el nuevo modelo Insignia. El microsite del configurador del coche estaba desarrollado en flash y tardó una eternidad en descargarse, por lo que me quedé sin ver las prestaciones del coche.
• Hay que tratar de buscar el equilibrio y la proporción entre el contenido gráfico y el texto. Normalmente un diseño web en flash tiende a concentrarse en las animaciones flash más que en el texto, que es lo importante para los motores de búsqueda y el posicionamiento web.
• A los motores de búsqueda no les gusta el contenido Flash. En este punto estoy en desacuerdo con el autor del artículo, ya que argumenta que los buscadores no son capaces de detectar el contenido flash, y como ya demostramos hace tiempo, Google sí indexa páginas web en Flash.

Como conclusión personal, opino que a día de hoy un diseño full en flash es visualmente muy atractivo pero lleva consigo algunos de los problemas que ya hemos comentado. Para mí, lo ideal sería crear una web en XHTML insertando algunos elementos en flash, como cabeceras o menús, y siempre permitiendo una versión alternativa, tanto para mejorar la accesibilidad web del sitio, como para mejorar la indexación en buscadores, ¿y tú? ¿qué diseño web prefieres?

Polaris es una herramienta multiplataforma basada en Adobe AIR que permite tener acceso a las estadísticas generadas por Google Analytics. Con 8 informes estándar, es la forma más sencilla de acceder a las estadísticas de tus páginas web de forma instantánea. La completa interfaz y la fácil navegación hacen un placer usarla.

Ponen a disposición de los usuarios dos tipos de descarga: Single Website & Multiple Website. La primera opción es gratuita y sólo permite recibir los datos de una página web. Podrás configurar el perfil de la página de la que deseas recibir los datos. La segunda opción nos permite elegir todos los perfiles web que deseemos, además, podremos recibir periodicamente actualizaciones y nuevas funcionalidades. Esta opción cuesta 15$ al año.

Polaris está disponible para los Windows, Linux y MacOSX. Herramienta útil y muy sencilla de usar que nos permitirá, de un vistazo, ver cómo van las stats de nuestra web directamente desde el escritorio.

Más info | http://www.desktop-reporting.com

En la red existen diversos scripts en PHP para generar documentos Word o Excel siguiendo el formato y código de estas aplicaciones de ofimática. Sin embargo, hay formas más sencillas de generar estos documentos que requieren menos conocimientos técnicos y prácticamente nada de programación.

Tanto el Word como el Excel son capaces de leer documentos en HTML. Prueba a crear una página en HTML con el bloc de notas, guarda el fichero con extensión .doc ó .xls. Comprobarás que el contenido puede visualizarse sin problemas.

Creando un Word o Excel a partir de HTML

Sabiendo esto, podemos recuperar la información de las consultas a la base de datos y pintarla en HTML, aplicándo el formato y distribución que deseemos, ya sea mediante tablas, párrafos, divs e incluso podremos aplicar estilos y colores.

Una vez hemos generado el documento en HTML sólo nos queda descargarlo. La opción básica es ir al menú Archivo, pulsar en Guardar Como e indicar la extensión correcta, sin embargo, esta medida es poco práctica, además de exigir ciertos conocimientos técnicos. Existe otro método que facilita esta tarea y permite forzar la descarga automáticamente. Para ello, podemos utilizar los headers de PHP.

header(“Content-Type: application/vnd.ms-excel”);
header(“content-disposition: attachment;filename=mifichero.xls”);

El Content-type especifica qué tipo de datos contiene el fichero a través del código MIME correspondiente (Multipurpouse Internet Mail Extensions, serie de especificaciones dirigidas al intercambio transparente de todo tipo de archivos a través de Internet). Cada tipo de fichero tiene uno o varios MIMEs. En Glosarium.com puedes encontrar el catálogo completo de códigos MIMEs. Por ejemplo, un fichero Excel tiene varios MIMEs (application/vnd.ms-excel, application/excel, application/x-excel, application/x-msexcel)

En la segunda línea especificamos el nombre del fichero que se va a descargar. Debemos indicar nombre y extensión.

¿Cómo cambio los margenes del documento Word con CSS?

Un truco para modificar los márgenes es crear un fichero con el Word, establecer los márgenes que deseemos y guardarlo Como Página Web. Abrimos el fichero con un editor HTML y recuperamos las CSS que ha generado automáticamente el Word. Tras limpiar un poco el código (tanto HTML como CSS), tendremos a nuestra disposición una plantilla para el Word con los márgenes que hemos especificado.

Una de las partes del proyecto en el que ando liado actualmente requiere crear documentos dinámicamente a partir de una BBDD, pintarlos en HTML y exportarlos a PDF o Word.

El principal problema con el que nos encontramos a la hora de desarrollar la idea es cómo hacer que el contenido no quede cortado entre página y página. Una fórmula es crear una plantilla con varios contenedores con un tamaño determinado, de forma que cada contenedor quepa sin problemas en un A4 (o el tamaño del documento deseado) y la información no quede fraccionada.

Otro método mucho más sencillo y limpio de usar es con CSS. Existen varias clases que nos permiten establecer cuándo debe producirse un salto de página y cómo deben tratarse los párrafos para evitar que queden huérfanos o viudos.

CSS Page-break-[after, before, inside]

Al asignar una de estas clases a cualquier elemento de una página forzará el salto de página. Por ejemplo, si no queremos que ninguna tabla quede cortada, podemos definir que para todas las tablas del documento se produzca un salto de página antes de pintarlas (table { page-break-before:always } ).  Pueden tener varios valores:  auto (sólo si es necesario), always, avoid, left y right.

• Page-break-after: después de un elemento se fuerza el salto de página.
• Page-break-before: antes de un elemento se fuerza el salto de página.
• Page-break-inside: dentro de un elemento se fuerza el salto de página. La W3C recomienda no abusar de esta clase y evitar utilizarla dentro de contenedores como tablas o divs.

CSS Orphans & Widows

Los términos Orphans (huérfano) y Widows (viudo) se utilizan cuando un párrafo se ha cortado al producirse un salto de página, cambio de columna o se ha insertado una imagen de por medio y el texto del párrafo ha quedado fraccionado en dos partes, quedando una de ellas con una sóla línea. Normalmente lo ideal es que si nos vemos forzados a cortar un párrafo por la mitad es dejar al menos dos líneas como mínimo en cada sitio.

• Orphans: permite espeficar el número de líneas que debe mantener un párrafo al final de la página.
• Widows: permite espeficiar el número de líneas en la parte superior de la página.

Más información

Page-break-before | http://www.w3schools.com/css/pr_print_pagebb.asp
Page-break-before | http://www.w3schools.com/css/pr_print_pageba.asp
Page-break-inside | http://www.w3schools.com/css/pr_print_pagebi.asp
Orphans | http://webdesign.about.com/blsporphans.htm
Widows | http://webdesign.about.com/blspwidows.htm

A continuación os paso una interesante recopilación de videos con el efecto Motion Typography Graphics o Kinetic Typography (tipografía en movimiento). La verdad es que el resultado final es espectacular y últimamente está de moda, habrá que intentar aprender a hacerlo, ¿alguien sabe con qué software se puede hacer?, tengo endendido que con el 3DsMax…

Hace tiempo que quería publicar una entrada acerca de las posibilidades que nos ofrecen los blogs como herramienta de promoción de nuestro negocio o simplemente de otra página web o blog. A día de hoy crear un blog puede llevarnos unos minutos. En unas horas habremos comenzado a crear contenido y en cuestión de días ya tendremos una tímida presencia en internet. A partir de ahí es cuestión de habilidad, técnica, ingenio y sobre todo, tenacidad, para lograr escalar posiciones y aparecer en los primeros resultados de búsqueda.

En mi caso, desarrollé un blog para promocionar una comunidad de foros y lo cierto es que el resultado ha sido muy satisfactorio. Actualmente ambas páginas aparecen en la primera página de resultados por las keywords más importantes, e incluso en algunas ocasiones el blog está por delante de la propia comunidad de foros. Debo reconocer que fue un proyecto experimental y le dediqué pocos recursos y escaso esfuerzo. Me registré en WordPress.com y cree un blog en 5 minutos. Lo personalicé con los colores corporativos y algunos widgets en la barra lateral y comencé a crear contenido haciéndome eco de las novedades del sector y de la propia comunidad de foros (banners, widgets de Feedburner, etc.). En cuestión de semanas el blog se posicionó realmente bien y consiguió el mismo PR que la comunidad. Actualmente el blog genera un 9% del tráfico de referidos, apareciendo por las mismas keywords que la comunidad y por otras de nichos más minoritarios y que también reportan visitas. Además, en este caso concreto, la comunidad ha tenido en varias ocasiones problemas con el hosting y el blog ha permitido mantener avisados a los usuarios del estado de los servidores.

Hoy he recibido en el correo un e-mail de HubSpot acerca de la publicación de un documento de distribución gratuita (tras registrarte en un formulario) donde nos indican qué ventajas y beneficios puede reportarnos el blogging para promocionar un negocio (que puede extrapolarse perfectamente a la promoción de otra página web o blog).

En el pequeño manual (10 páginas) nos comentan los distintos factores que debemos considerar para aprovechar el blogging como herramienta de promoción.  Según nos cuentan, la forma en la que los consumidores buscan un producto ha cambiado. Si antes era la empresa quien llegaba al cliente (a través de publicidad en radio, tv, panfletos, flyers), las nuevas tendencias se inclinan en la balanza contraria, es el cliente el que busca los productos a través de las nuevas tecnologías e internet. Por ello, aparecer en la red es esencial para ampliar el ámbito de nuestro proyecto, ya sea a través de los buscadores (Google, Yahoo, Live Search, etc.), como en la blogosfera o en las redes sociales (Delicious, Twitter, Bitacoras, etc.). Además, un blog otorga un valor añadido a nuestra empresa o proyecto, ya que nos permite comunicarnos directamente con el usuario final a través de la participación que ofrece la web 2.0. Además del documento, ponen a nuestra disposición varios videomanuales donde ilustran el contenido de la pequeña guía.

Más info | http://www.hubspot.com/blogging-kit-wsg