Archivos en la categoría Diseño páginas web

Las 25 tendencias de diseño web para el 2009

Las 25 tendencias del diseño web durante el 2009

La gente de Smashing Magazine ha elaborado un listado con las, que piensan, serán las 25 tendencias del diseño web a lo largo del año 2009. Durante meses han analizado numerosos diseños web, observando las tendencias que han ido cogiendo mayor fuerza y valorando las distintas técnicas de diseño, aspectos visuales, empleo de distintos recursos gráficos y de desarrollo e incluso de usabilidad web etc.

En conjunto, nos muestran un amplio abanico de posibilidades y sirven de perfecta fuente de inspiración a la hora de abordar un nuevo diseño de una página web. Hay técnicas muy interesantes, como el LetterPress, efecto de texto troquelado en un fondo que se ha extendido en el uso de cabeceras, titulares e incluso logotipos; usar etiquetas de precios como banner o medio promocional; reemplazar el texto por imagenes o animaciones flash (técnicas sFIR); interfaz similar a la de una revista; utilización de bloques de texto con un formato especial como introducción a un artículo; o el uso de Index Tags, en vez de Tags Clouds, donde todas las etiquetas tienen el mismo tamaño sin considerarse el volumen de artículos donde estén asignadas.

Más info | Smashingmagazine.com/web-design-trends-for-2009 (Parte I)
Más info | Smashingmagazine.com/web-design-trends-for-2009-ii (Parte II)


Sin Comentarios

MiWebCSS, galería de páginas web en español en CSS

MiWebCSS, galería de páginas web en español en CSS

MiWebCSS nace con la ilusión de ser la galería de referencia para páginas web en español en CSS. Existen infinidad de galerías CSS, todas ellas en inglés, si bien la comunidad hispana no dispone de un “escaparate” donde servirse de inspiración y promocionar trabajos de calidad en castellano.

Los usuarios pueden enviar sus trabajos para que sean incorporados en las galerías de MiWebCSS . Para que éstos sean aceptados deben cumplir dos requisitos fundamentales, a saber, cumplir estándares web actuales  (W3C) y ser trabajos en español y/o realizados por empresas hispanas.

Los criterios de selección de este índice se basan en la calidad, la innovación y la eficacia del diseño, ofreciendo una pasada rápida por los estándares del diseño web en español.

Más info | www.miwebcss.com

Sin Comentarios

Generador automático de iconos RSS, W3C, etc.

Generador automático de iconos RSS, W3C, etc.Es muy habitual ver en páginas web o blogs pequeños iconos rectangulares indicando características técnicas (código validado por la W3C, nivel de accesibilidad web, etc),  servicios (email, etc.) o como herramientas sociales (RSS, suscripción a través de diversas herramientas como iGoogle, ShareThis, Technorati, etc.).

En mi caso, hice esos iconos con Photoshop y una tipografía pixelada para darle un aspecto más anguloso. Aunque no me llevó mucho tiempo, acabo de descubrir varias herramientas online que, de forma gratuita, nos permiten elaborar este tipo de iconos de forma personalizada en cuestión de segundos.

Generador automático de iconos RSS, W3C, etc.

Tanto FeedForAll como RSS-Icons nos permiten crear nuestros propios iconos personalizando prácticamente todas las opciones: tamaño, tipo y tamaño de fuente, colores, tamaño y color del borde, textos que deben aparecer, etc.

Más info |  http://www.feedforall.com
Más info |  http://www.rss-icons.com

Sin Comentarios

¿Diseño web en flash? ¿o no?

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

13 Comentarios

Cómo crear documentos Word y Excel dinámicamente desde PHP a partir de HTML

Cómo crear documentos Word y Excel dinámicamente desde PHP a partir de HTMLEn 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.

2 Comentarios

CSS Page-Break, Orphans & Widows, versión XHTML friendly para impresión

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
Page-break-before
Page-break-inside
Orphans
Widows

Sin Comentarios