About vbonilla

Mi nombre es Víctor Bonilla y soy un diseñador web y gráfico de Dénia, Alicante, especializado en diseñar y maquetar sitios web accesibles y usables. Llevo en el sector más de 7 años en los que no he dejado de aprender y enfocar nuevos retos. Mira en los enlaces para ver algunos mis trabajos en la red. Licenciado en Bellas Artes y Master en Ingeniería del Diseño por la Universidad Politécnica de Valencia, también dedico parte de mi tiempo a crear esculturas y practicar con la bicicleta de montaña.

Cross-Browser ::before and ::after pseudo-class polyfill (and use in older internet explorer versions)

I was asked to give support to a website in Internet Explorer < 8 and was looking for a solution for :before and :after pseudo-elements, so I eventually stumbled upon this gist that really solved my issue. I think it is worthy to share this one.

Cross-Browser ::before and ::after pseudo-class polyfill thanks to @corydorning.

It should be applied with IE conditional comments, and it only works with JavaScript enabled

Project – Video series for Innatia and A Perder Peso

I have started a series of videos for my main client, Innatia, that are focused to add a layer of audiovisual content for their users. Innatia is a network of blogs focused in healthy lifestyles, and traditional and natural remedies.

These videos are developed with Adobe After Effects and the graphics are all done with Adobe Illustrator. The music was selected from Jamendo.

And this is my first puppet animation and it will be improved in next videos.

Realidad Virtual Inmersiva en el CAVE

En el Master en Ingenierí­a del Diseño realizamos un proyecto durante el curso 2009/2010 sobre arquitecturas efímeras, que englobaba al conjunto de asignaturas del bloque de Diseño de Productos de Uso Colectivo. Mi proyecto en concreto se trataba de un teatro abierto y desmontable, pero lo más interesante del proceso fue la revisión de los modelos digitales en el CAVE que se encuentra en la Ciudad Politécnica de la Innovación de la UPV.

El CAVE es una sala de proyecciones que contiene un cubo abierto de 4 lados de 3 metros cada uno, dónde se proyectan la imagen de nuestro modelo tridimensional en perspectiva y estereoscópica, que acompañado de unos sensores que captan la posición de la vista del usuario mediante unas gafas polarizadas con sensores, nos transmite la sensación de estar dentro del propio modelo, a escala.

La experiencia fue muy constructiva, ya que se pueden apreciar los detalles a tamaño ‘real’ de manera virtual, cosa que con el 3d studio costaba un poco el tema de hacer zoom y rotar las vistas con modelos tan pesados. Era impresionante verte dentro del modelo en el que llevabas una gran cantidad de horas haciendo ajustes ¡Incluso podías sacar el metro y ponerte a medir en el aire sobre la proyección! y comprobabas que coincidía con el que le habías dado.

Muy curioso era cuando reducías la escala del modelo y lo convertías en una maqueta virtual, flotando en el aire, pudiendo rodearla y verla con otra perspectiva. Lo único que se echaba en falta era poder desplazarte por el modelo, cosa que estaban implementando ya, y poder interactuar con los objetos del modelo, aunque esto último a lo mejor es demasiado pedir, pero con tecnologías que conocemos hoy en dia como Kinect de la Xbox no parece tan descabellado.

Tipografía y diseño web

Esta entrada corresponde a un trabajo realizado para la asignatura Tipografía y diseño, en el Máster en Ingenieria del Diseño. La verdad es que está bastante desactualizado ya que fué realizado en el año 2007, cuando llevaba poco tiempo en esto del diseño web, de todas formas, trata sobre todo la base y los inicios de la web, que son eminentemente tipográficos.

Podéis ver el trabajo original aquí, que entregué en formato html ¡como no!

Además aprovecho esta entrada para iniciar una serie de artículos sobre tipografía y diseño web que describirán la situación actual de la misma y los nuevos usos que podemos realizar desde la salida de CSS3

Introducción

Este trabajo pretende hacer una visión general de la tipografía en internet, su uso y su aplicación. La presencia de texto en la red es contínua y las posibilidades de darle formato son bastante amplias, pero muchos diseñadores de páginas web no saben sacarle provecho.

El texto que nos muestra una página web no es un texto tradicional, éste se llama hipertexto, que es un concepto expandido del texto tradicional donde el lector interactúa con él y le conduce a otros textos que están relacionados con el mismo mediante enlaces, también conocidos como vínculos o hipervínculos. Así, se forma una red que conecta cada página del mismo sitio entre ellas y también desde dentro y fuera del propio sitio al resto del mundo, dando el muy recurrido sobrenombre por el que tambien se conoce a internet: la red de redes.

Cada uno de estos sitios web tiene su propio estilo, y aqui es donde entra el diseñador, que, mediante un lenguaje de programación relativamente sencillo, puede crear un sinfín de diseños diferentes. Como la mayor parte del contenido que nos muestra una página web es texto, que se nos representa sobre la pantalla del ordenador, es muy importante que el estilo que lo defina facilite la lectura y que esta información sea accesible, mediante una estructura general que sitúe los elementos dentro cada página: cabeceras, titulares, párrafos, listas… y enlaces, que deben destacar del resto del texto para que el usuario lo identifique.

Este trabajo pretende ser el ejemplo de una página web en la que sólo se ha utilizado texto, exceptuando alguna imágen necesaria, aplicando un estilo paricular. Y muestra las nociones básicas que debe conocer un diseñador web.

El material del diseñador de páginas web

Para hacer una página web el diseñador debe conocer las dos herramientas básicas, dos lenguajes bastante simples, HTML y CSS. Éstos son los idiomas, entre otros, que interpreta nuestro navegador cuando nos muestra una página web.

HTML

HTML, o Hyper Text Mark-up Language (Lenguaje de Marcado de HiperTexto), es el lenguaje más básico de los dos, un sistema de marcado que consiste en una serie de etiquetas predefinidas que dan formato al texto entre otras posibilidades, como puede ser crear un hipervínculo o incluir una imagen. Estas etiquetas conforman un archivo con la extensión .html o .htm, que represemta la página que estas visualizando en ese momento, basicamente, por cada página que forma un sitio web hay un archivo html. Las imágenes, por ejemplo, son externas al propio archivo y se suelen colocar en una carpeta aparte, a la cual accede su correspondiente etiqueta html, asignandole las diferentes propiedades que podemos darle, como pueden ser altura, anchura, borde, nombre… Además deben estar cerradas de esta forma:

<etiqueta propiedad=“valor”>texto o contenido de la etiqueta</etiqueta>

Para formatear el texto existen una serie de etiquetas, aunque de dos tipos diferentes, las marcas lógicas y las marcas tipográficas. Digamos que las marcas tipográficas formatean el texto y las marcas lógicas añaden significado al texto, identificandolo para el navegador, y dándole la importancia que le corresponde. Lo que no significa que no se muestren, o que no formateen el texto, ya que le dan el formato que tiene por defecto esa etiqueta. Se usan para titulos de diferentes grados de importancia, para direcciones, para citas textuales… veamos algunas de ellas:

  • <H1><H2><H3><H6>
    Títulos de primer, segundo, tercer orden, hasta sexto. Se muestran con un tamaño mayor segun la importancia que se le de y en negrita.
  • <ADDRESS>
    Se emplea para indicar información relacionada con cualquier tipo de dirección (e-mail, teléfono, etc.).
  • <BLOCKQUOTE>
    Se usa en las citas textuales que ocupan más de dos o tres líneas.
  • <CITE>
    Indica la fuente de la cita.
  • <CODE>
    Se utiliza para formatear líneas de códigos de programación.
  • <DFN>
    El texto comprendido dentro es una definición.
  • <EM>
    Da énfasis al texto comprendido dentro.
  • <KBD> y <SAMP>
    Poco utilizados. Indican cosas que el ordenador debería decir al usuario y viceversa, según un típico concepto de Unix.
  • <STRONG>
    Denota énfasis fuerte.
  • <VAR>
    Asociado a CODE, indica las variables de programación.

Luego tenemos las marcas tipográficas que tienen como función formatear visualmente un documento, es decir aplicarle negritas, cursivas, subrayarlo, etc. Veamos algunas de ellas:

  • <B> Texto en negrita </B>
    El texto comprendido entre estas marcas queda formateado en negrita (la B corresponde al inglés BOLD).
  • <I> Texto en cursiva </I>
    El texto comprendido entre estas marcas queda formateado en cursiva (la I corresponde al inglés ITALIC).
  • <U> Texto subrayado </U>
    El texto comprendido entre estas marcas queda subrayado aun sin ser un enlace (la U corresponde al inglés UNDERLINE).
  • <STRIKE> Texto tachado </STRIKE>
    El texto comprendido entre estas marcas queda tachado
  • <SUP> Superíndice </SUP> y <SUB> Subíndice </SUB>
    El texto comprendido entre estas marcas corresponden a superíndice y subíndice respectivamente.

Comentaremos para finalizar con html, una etiqueta ya en desuso, y es la que se utilizaba para configurar el aspecto de la tipografía en partes específicas del texto. Es la marca <FONT>, veamos un ejemplo con sus propiedades:

<FONT FACE=“arial” SIZE=“5” COLOR=“red” POINT-SIZE=”x” WEIGHT=”x”>Tipo para formatear</FONT>

  • Face
    Fuente (cara): nos indica cual va a usar y depende de las fuentes que tenga instalado el ordenador. Los valores más usuales, por ser más seguros, son: arial, times y verdana.
  • Size
    Tamaño: x es un valor entre 1 y 7 o +/-, y altera el tamaño que por defecto interpreta el navegador.
  • Color
    Admite valores hexadecimales, rgb y nombres en ingles
  • Point-size
    Tamaño del punto: tambien modifica la medida de la fuente pero no en relacion con el tamaño por defecto
  • Weight
    Peso de la fuente: se refiere al grosor de la línea de la fuente

Como hemos dicho esta etiqueta se encuentra en desuso, ya que desde la aparicion de la versión 4 del estándar HTML, la World Wide Web Consortium (www.w3.org), entidad que gestiona éstos estándares, recomienda el uso de hojas de estilo para formatear el texto, que veremos en la siguiente sección.

Tenemos etiquetas que identifican y forman un párrafo,<P></P>, y otras para saltos de línea, <BR>, ésta no necesita cerrarse. Así tambien tenemos otra marca para tabular la primera línea de un párrafo, <BLOCKQUOTE></BLOCKQUOTE>.

Existen otras etiquetas que forman listas, tablas, enlaces… para conocerlas podéis consultar esta HTML Cheat Sheet (chuleta de HTML en inglés), aunque no aparecen las propiedades de las etiquetas.

CSS

Cascade Style Sheet, conocido en nuestro idioma como Hojas de Estilo en Cascada, es otro código que se incluye en un documento aparte y al cual enlazan las páginas. En este archivo se definen las propiedades que van a tener las diferentes etiquetas html, evitando así repetir las propiedades de cada etiqueta de cada página web y ahorrando líneas de código. Además permite distribuir los elementos de una forma más eficaz mediante capas que se pueden posicionar donde queramos.

Ésta capacidad de posicionar bloques es muy importante a la hora de maquetar en html, ya que antes de la aparición de las hojas de estilo las páginas codificadas en html solo podias componer una línea debajo de otra. Si querias colocar un parrafo al lado de otro, tenias que empezar a crear tablas que dividian el espacio en filas y columnas, en las que se distribuian los textos y las imágenes. No es que sea difícil crear tablas en html, el problema es que es algo complejo, sobre todo cuando empiezas a crear tablas anidadas. Las páginas con mayor contenido gráfico se debian trocear en partes más pequeñas para colocarlas en el lugar exacto dentro de la tabla. Aunque la gran mayoría de sitios web supieron amoldarse a este método y su estilo no desmerece a muchos diseños realizados con CSS.

Se llaman hojas de estilo en cascada, porque las propiedades que le demos a una capa influirá al conjunto de capas que se encuentre dentro de ella, a no ser que alguna modifique alguna propiedad marcada por la capa principal, que afectara a las capas o elementos que se encuentren dentro de la secundaria. Se dice que una capa hereda las propiedades de la capa en la que se encuentra. Por ejemplo, podemos indicarle a una capa que queremos que el texto que aparezca dentro de ella utilice la fuente arial, pero dentro de de la misma colocamos otra capa con otro texto y que utiliza la fuente verdana. Así el resultado nos mostraria dos textos utilizando dos tipografías diferentes. Hay que decir que al reves no funciona, la capa secundaria no influye a la pricipal si esa propiedad esta definida.

Las capas se reconocen en el archivo .css mediante identificadores y clases, dentro de estas se indica la posición que deben tener, igual que el tamaño, el color o si llevan alguna imagen de fondo, los márgenes que debe tener, los bordes, etc. Normalmente, si utilizamos un editor de html (llámese dreamweaver o notepad++, entre otros), el archivo css nos muestra la propiedades de cada elemento dentro de su identificador, de la siguiente manera:

#dcha {
position:relative;
float:left;
border-right:1px solid #000000;
padding:0px 10px ;
margin-top:0px;
top:0px;
width:200px;
height:300px;
}

Pero su principal función, igual que hemos explicado en html, es formatear el texto, y tenemos una gran cantidad de propiedades para hacerlo. Con html las etiquetas venian con sus propiedades por defecto y solo podías modificar alguna que otra, con las hojas de estilo podemos hacer que las etiquetas tengan el aspecto que queramos.

Veamos algunas de las propiedades css referidas a la tipografía o fuente:

  • color
    Valores: hexadecimal | rgb | name
    Esta propiedad afecta al color de la fuente
  • font
    A esta se puede dar los valores de las siguientes propiedades
  • font-family
    Valores: nombre de la familia | familia genérica
    Se pone el nombre de la familia que vas a utilizar (Georgia) y el de la familia genérica para que, si esa fuente no esta instalada en el ordenador, se pueda substituir por otra fuente de la misma familia. Por ejemplo:
    font-family: Georgia, “Times New Roman”, Times, serif;
  • font-style
    Valores: normal | italic | oblique
  • font-variant
    Valores: normal | small-caps
    small-caps se refiere a que modifica las letras capitulares por mayúsculas de tamaño pequeño.
  • font-weight
    Valores: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
    Peso de la fuente se refiere al grosor de la línea, pudiendo ser negrita (bold) o valores numéricos. Los valores relativos, más negrita (bolder) y más ligera (lighter), afectan al valor que viene dado por la capa padre.
  • font-size
    Valores: <tamaño-absoluto> | <tamaño-relativo> | <longitud> | <porcentaje>
    Tamaño absoluto, este valor se expresa con unidades absolutas, como píxeles (px), puntos (pt) y em.
    Otros valores absolutos son: xx-small | x-small | small | medium | large | x-large | xx-large; pero dependen del navegador.
    Tamaño relativo, igual que en el caso anterior, valores larger | smaller (más grande | más pequeño).
  • font-size-adjust
    Valores: <número> | none | inherit
    Especifica que el tamaño de la fuente debería escogerse basándose en el tamaño de las minúsculas en lugar las mayúsculas.
    Por ejemplo, si especificamos una fuente font-size: 16px; font-size-adjust: 0.5, realmente estamos especificando que las letras minúsculas de la fuente deben tener 8px de alto (16px multiplicado por 0.5)
  • font-stretch
    Valores: ultra-condensed | extra-condensed | condensed | semi-condensed | normal | semi-expanded | expanded | extra-expanded | ultra-expanded
    Esta propiedad trata el estiramiento del texto o, mas bien, el espacio entre letras que van de menor a mayor separación.

Ahora veamos algunas de las propiedades referentes a la edición del texto:

  • word-spacing
    Valores: normal | <distancia>
    Afecta a la separación entre palabras y se expresa mediante valores numéricos en px, pt o em.
  • letter-spacing
    Valores: normal | <distancia>
    Afecta a la distancia entre letras y se expresa mediante valores numéricos en px, pt o em.
  • text-decoration
    Valores: none | underline | overline | line-through | blink
    El texto se puede decorar mediante subrayado, superayado, tachado o parpadeante. Esta propiedad es muy usada a la hora de configurar el aspecto de los enlaces e hipervínculos
  • vertical-align
    Valores: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <porcentaje>
    Alinea horizontalmente el texto (u otro elemento) segun la línea de base, subíndice, superíndice, arriba, arriba del texto, abajo…
  • text-transform
    Valores: capitalize | uppercase | lowercase | none
    Transforma el texto con letras capitales, todo en mayúsculas o todo en minúsculas respectivamente.
  • text-align
    Valores: left | right | center | justify
    Alinea el texto a la izquierda, derecha, centrado o justificado respectivamente, siempre dentro de la capa a la que afecta.
  • text-indent
    Valores: <distancia> | <porcentaje>
    Sangria de primera línea, se expresa mediante valores numéricos en px, pt, em, o en porcentaje
  • line-height
    Valores: normal | <numero> | <distancia> | <porcentaje>
    Altura de línea es la distancia entre dos líneas de base adyacentes en un mismo párrafo

Como podemos observar las posibilidades de modificar el aspecto del texto que aparece en pantalla son muy grandes, sobretodo si lo comparamos con la etiqueta <font> de html, sin hablar del resto de propiedades que también se aplica al texto como a otros contenidos. Ya sean listas, margenes, separación entre borde y contenido… Un listado de todas estas propiedades y elementos de las hojas de estilo lo podemos ver en esta CSS Cheat Sheet, y si quereis podeis echar un vistazo al archivo css de este sitio. También podemos observar como estas propiedades modifican el texto mediante varias aplicaciones web:

CSS Type – compara diferentes estilos de una misma fuente, pudiendo modificar propiedades de css.
TypeTester – es una aplicación que compara diferentes fuentes para pantalla.
FontTester – muy similar a las anteriores.

Problemática

Pero con todas estas ventajas que aporta css, el principal problema reside en la interpretación que realiza el navegador del código que hemos generado, mostrando resultados diferentes según diversos factores, como puede ser el navegador que estemos utilizando (internet explorer, firefox, opera…), el sistema operativo (windows, mac os, linux…), la resolución de pantalla o las fuentes que tengamos instaladas. Todos estos factores, entre otros, influyen a la hora de la visualización de una página web, y el diseñador debe contar con todos ellos

Las fuentes disponibles en cada sistema operativo son diferentes, ya sea windows, macos o linux, aunque van aumentando cuando instalamos diferentes aplicaciones que traen fuentes que comparten con el sistema, ya sean de ofimática, de diseño gráfico o navegadores de internet. Por eso debemos utilizar lo que se conocen como fuentes seguras, siendo las más compatibles, o por lo menos las que garantizarán una visualización óptima de la pagina en las diferentes combinaciones sistema operativo+navegador. Veamos las fuentes compatibles y sus diferencias:

Compatibilidad fuentes SO

Para solventar este conflicto, se debe utilizar css e indicar a la propiedad font-family dos fuentes equivalentes, si además queremos estar seguros de una visualización similar en otros sistemas (Linux, por ejemplo), podemos asignar también una familia tipográfica genérica, como serif, sans-serif, cursive, etc.).

<style type=“text/css”>
.titular {
font-size:16px;
font-family:Arial, Helvetica,sans-serif;
}
</style>

<p class=“titular”>Esto es un titular</p>

Aún así se podría recurrir a crear una hoja de estilo para cada navegador y que se cargara mediante algún codigo javascript que reconociera el navegador que esta utilizando el usuario.

El problema para un diseñador aparece cuando necesita usar una fuente no segura, o simplemente una fuente muy especifica, o gráfica, ya que probablemente sólo la pueda visualizar en su ordenador o en otro con la misma fuente instalada. La solución más recurrida es incorporarla como una imágen, aumentando el peso de nuestro sitio web, y tendríamos que incluir la propiedad “alt” de la imagen, que incluye un texto alternativo en caso que no se muestre la imagen, de esto podemos ver un montón de ejemplos en la página css zen garden, un proyecto en el que colaboran gran cantidad de diseñadores gráficos, cambiando el aspecto de la página, únicamente reemplazando el archivo css.

Otra forma de incluir una fuente en tu pagina web sería utilizando el programa de animación Macromedia (Adobe) Flash, que incorpora dentro de su propio archivo la fuente utilizada, aunque esta solución aumenta el peso de nuestra página web sólo tendría sentido en caso que hicieramos una página dinámica o con animación, y en realidad es una herramienta ajena al css y el html.

Una opción que se sugiere en A List Apart, aunque no esta disponible de momento, sería enlazar nuestra página o nuestra hoja de estilo a un archivo con la correspondiente fuente, que estuviera alojado en un servidor web, y que se cargara en el computador. Así las posibilidades no dependerían únicamente de las fuentes instaladas en el ordenador y el diseñador tendría las manos libres a la hora de elegir la tipografía más adecuada para su sitio web.

El tamaño es otra variable a tener en cuenta ya que las resoluciones de un pc y un mac son diferentes. El mac, que trabaja a 72ppp muestra una relacion punto/pixel exacta, y el pc, que utiliza una resolución más alta a 92ppp. Así para un mac una tipografía de 12 puntos tendrá el mismo tamaño que una de 12 px, no como en un pc que en pixeles tendria un tamaño de 16.

Fuentes a 12pt win y mac os

Hay diferentes opiniones sobre en que unidades es mejor indicar el tamaño, en píxeles, en puntos o en ems, cada uno tiene sus ventajas, aunque su uso es diferente. Por ejemplo, es recomendable usar píxeles por que el visitante puede aumentar o reducir el tamaño del tipo con su navegador y es más progresivo que si lo hicieramos en puntos, aunque aunque es mejor expresarlo en puntos por motivos de accesibilidad.

El uso de em es más complicado ya que primero se fija un tamaño en píxeles de referencia, y con las propiedades se especifican las relaciones del interlineado y tamaños de títulos, para que tenga un diseño fluido y no se desajuste al aumentar o reducir el tamaño de la fuente. Ésta es la opción más interesante de todas, pero no todos los navegadores interpretan los em, y es una técnica costosa de realizar. Podemos ver algunos ejemplos de unidades relativas en este artículo. Este otro sitio también es muy interesante, ya que es un libro sobre estilo tipográfico en la web, y parte de la tipografía tradicional, ya que está basado en otro manual de estilo, The Elements of Typographic Style Applied to the Web – a practical guide to web typography. Y esta presentación, comentada por el mismo autor, que trata algunos conceptos de la tipografía web, Web Typography Sucks.

El papel de la tipografía

Muchas empresas, instituciones y personas tienen sitios web mediante los que se comunican con el mundo, dentro de su propio mundo, ya que es el usuario el que visita los sitios web desde su casa, la oficina… Estos sitios tienen un estilo u otro de acuerdo con la filosofía de la empresa y la idea de si misma que quiere transmitir, en ellos recrea su propio universo, en el cual el navegante debe identificar los elementos fundamentales para que pueda realizar su actividad en el sitio, mediante menús y enlaces, además de localizar el contenido o información que esta buscando, y sobretodo, que sea accesible y legible, cosa que agradecera el usuario.

El primer caso que me gustaría comentar seria el de los periodicos, una gran fuente de información que, desde su formato diario y en papel, salta a las pantallas de los ordenadores gracias a este nuevo medio que es internet. Los periodicos, como medio escrito en papel, han hecho esfuerzos para actualizar el formato tipográfico de su publicación, estimulados por diferentes motivos, pero sobre todo para facilitar la lectura, concepto que trasladan a la web.

Éstos generan gran cantidad de información continuamente y tienen su propio estilo a la hora de mostrarla en una web, si observamos los diferentes periodicos en su versión digital (El País, El Mundo, La Vanguardia, El Periódico, ABC), observaremos que todos utilizan la misma estructura.

Un diseño común mediante el cual se nos muestra una portada con su cabecera, con su menu de secciones y lleno de porciones de información condensada, la que alcanzamos en su version completa mediante un solo clic. Así llegamos al artículo, un bloque de texto seguido con alguna que otra fotografía, situado sobre éste tenemos el titular y el subtítulo, además de los elementos que articulan el sitio como la cabecera y el menú. Este bloque de texto debe tener ciertas propiedades para facilitar su lectura y compresión, por ejemplo El País, que utiliza una tipografía de palo seco, Arial o Helvetica, y un interlineado bastante alto, aunque los márgenes son más bien pequeños, ya que, igual que en su version en papel, el espacio es dinero. Por ello todas las paginas de la mayoría periodicos digitales estan plagadas de publicidad, y como la mayoria de los anuncios que se ponen en internet (banners) suelen ser animaciones, lo único que consiguen es añadir ruido y distraer la atención del lector.

Otro género de páginas son los weblogs, o diarios personales, un fenomeno social en toda regla, donde se expresan las ideas, las vivencias o lo que quiera la persona que se dedique a escribir en el. Muchas empresas tambien se comunican con sus clientes mediante blogs corporativos donde publican las noticias que se refieren a la propia empresa. Normalmente, a nivel personal, vienen apoyados por un portal o suministrador, en el cual, registrandote, puedes crear tu propio blog gratuitamente. Estos portales suministran el espacio y la pagina donde vas a mostrar el contenido que generes, aunque son bastante personalizables, y suelen darte a elegir entre una gran cantidad de plantillas y temas.

Los más importantes son blogger y wordpress.com. Aunque tambien tienes la posibilidad de hacerte el tuyo propio con tu propio espacio en un servidor y con tu propio dominio, con aplicaciones que puedes instalarte en tu server, como wordpress.org. Tambien se crean comunidades de bloggers con ideas afines, para compartir opiniones o curiosidades, como puede ser el caso de myspace, o meneame, aunque este último es mucho más colaborativo por parte de los usuarios.

Generamente los blogs utilizan una estructura común, formada por la cabecera y tres columnas, las laterales se utilizan como menú, con un buscador, con palabras clave y enlaces que nos llevan a los archivos del blog. La columna central se reserva para mostrar el contenido, que son los articulos o entradas generadas por su dueño, que también puede tener colaboradores. Estas entradas estan compuestas por un titular y el bloque de texto, con o sin imagen, o solo una imagen, y el pie, donde se muestra el nombre del autor y la fecha en que se publicó. Suelen tener la opción de incluir comentarios de los lectores, que se encuentran debajo del artículo. Las líneas no suelen muy largas, entre 400 y 600 px, y la distancia entre ellas siempre es optima para una lectura fluida.

Existen revistas en linea, muy interesantes, ya que son sitios que tienen un estilo muy cuidado, aunque con un formato muy similar al de los weblogs, ya que tambien estan pensados para publicar articulos con mucha frecuencia. Las más bonitas suelen ser las relacionadas con el diseño, aunque las hay desde las que abusan de gráficos a las más minimalistas donde llegar a orientarte puede ser imposible. Una revista muy útil para diseñadores web, ademas de tener un estilo muy cuidado, sobretodo a nivel tipográfico, es A list apart.

Siguiendo hacia un mundo más gráfico llegamos a los portfolios de artistas, a las páginas de museos y galerias, donde la importancia la tienen las imágenes de las obras que muestran. Aunque la cantidad de texto que muestran suele ser poca, la tipografía tiene que estar muy cuidada, ya que debe responder a los valores estéticos de las obras que albergará la página. El contenido textual de éstas se reduce a la cabecera, los menús, los titulos de las obras y referencias de la misma, y notas de prensa. Normalmente el texto de cabecera y del menu se incluye mediante imágenes, ya que suelen utilizar tipografías artísticas o manuales que no son las que llevan instaladas los ordenadores.

Otra opción muy utilizada tambien es realizar el sitio mediante la aplicación Flash, que incrusta la tipografia utilizada en el archivo que genera, es un programa bastante gráfico, que esta pensado para crear animaciones para web. El problema es que no implementa el contenido, causando problemas de accesibilidad, ademas de necesitar un plug-in para poder reproducirlo en el navegador, y aumenta, muchas veces sin sentido, el peso de los sitios web. Podemos ver algunas páginas de museos como el Reina Sofía (MNCARS) o l’Espai d’Art Contemporani de Castelló (EACC), un ejemplo del abuso del flash en una web podría ser este Vito Acconci Studio, aunque lo que busca es crear una interfaz diferente.

Enlaces relacionados.

Tesis doctoral hipertexto – M. J. Lamarca Lapuente
El Hipertexto y la lógica del laberinto – Prof. Dr. Adolfo Vásquez Rocca
Internet, espacios virtuales y reconfiguración del autor – Prof. Dr. Adolfo Vásquez Rocca
Web Design is 95% Typography
The Elements of Typographic Style Applied to the Web – a practical guide to web typography
Web Typography Sucks

css zen garden
a list apart
World Wide Web Consortium
wikipedia

CSS Type
TypeTester
FontTester

Tamaños de banners más usuales

Como diseñador web, me han encargado un proyecto para realizar un paquete de banners para una página. Lo primero que he realizado ha sido una plantilla con los tamaños más usuales para tenerla de referencia, que creo que puede ser útil compartir con vosotros.

Los banners podemos distinguirlos según sus formas en tres clases principales:

  • Cuadrados – 300×150, 300×250, 250×250, 200×200.
  • Horizontales – 728×90, 650×90, 468×60, 120×60.
  • Verticales (tambien conocidos como Skyscraper) – 200×600, 160×600, 120×600, 120×240.

Así que ahi os dejo el pdf, por si lo necesitáis.

Descargar archivo(.pdf 84 kb)

¡Hola mundo!

Esta es mi primera entrada. Bienvenidos a mi nuevo blog donde pienso compartir mis experiencias en el mundo del diseño, en el que estoy empezando a trabajar de freelance, de momento, despues de haber estado 3 años trabajando en una empresa del sector ocupando el cargo de diseñador/maquetador web.

Ahora intento desarrollar mi trabajo de diseñador web en Dénia y más allá. Me interesan temas como la usabilidad y la accesibilidad de sitios web y técnicas modernas de CSS3 y HTML5. Además del diseño web también me interesa mucho el mundo del diseño gráfico e industrial, del arte, en particular del arte público y la escultura, y también la arquitectura y el urbanismo, que aunque no sean el tema pricipal de este blog iré publicando algun que otro comentario sobre estos.

También subiré cosas que vaya haciendo que considere ser util compartir con el mundo, ademas de algún que otro tutorial o artículo. Además podéis seguir el grupo que he creado recientemente en Facebook o mi cuenta de Twitter para ver más enlaces interesantes que lleguen a mis manos.