El cuento de la lechera 2

Bromas a parte, todos sabemos ya que nuestros diseños tienen que ser accesibles por muchos motivos, incluso por posicionamiento de nuestros contenidos, así que de una manera y otra nos hemos decidido a seguir estas pautas (más información en esta web).

Hay diversas reglas a seguir, pero quizá la más tediosa es la de sustituir la maquetación de tablas, por maquetación por capas, algo que se antoja cuasi imposible cuando hay que hacer composiciones complejas de elementos.

Supongo que muchos de vosotros os habréis peleado en numerosas ocasiones con el consabido atributo float de los div. [Ejemplo de Float].

La verdad, es que tras mucho usarlo y pelearme con él, nunca me ha convencido realmente. Si bien se usa mucho sobre todo en composiciones de layouts de páginas en 2-3 columnas, empieza a ser muy complicado de usar cuando no es tan fácil lo que tienes que maquetar en XHTML.

Gracias a Dios (y a este libro, totalmente recomendado 100%), di con otra solución que creo mucho más útil y que permite que tus diseños sean total y realmente cross-browser. El uso combinado de posicionamiento relativo y absoluto.

Para muestra un botón. Me dispongo a maquetar una rejilla de 3×3 elementos, típicamente una “tabla”, pero con el uso únicamente de capas (divs) y CSS. Si bien con floats, esto se antoja cuanto menos “complicado”, vereis como con el uso de posicionamientos relativo y absoluto se simplifica en gran manera tanto la CSS como se disminuye la cantidad de capas a usar, únicamente a las 9 celdas implicadas y a una capa contenedora.

El atributo position: absolute, posiciona un elemento de manera absoluta respecto a su contenedor, que si no establecemos ninguno, sería la ventana del navegador, con los problemas entre distintas resoluciones que esto nos puede provocar.

La clave está en establecer una capa contenedora de nuestro layout y poner el atributo position: relative, pero sin fijar ni las posición vertical (top) ni izquierda (left). De esta manera conseguiremos que todos los elementos que se posicionen dentro de dicha capa, lo pueda hacer de manera relativa a ésta.

Para esto, simplemente, en las capas interiores deberemos de establecer position:absolute (a la contenedora), y fijar las coordenadas x (top) e y (left) a partir de las cuales se pintarán. Por supuesto también tendremos que fijar al menos su ancho y alto.

Para que podáis ver un ejemplo completo, os he preparado este archivo HTML con la información de estilos pertinentes, para que reviseis el código fuente y veais lo limpio que queda el código, además de lo sencillo que es posicionar los elementos. Os dejo comentada la versión líquida (ancho variable) para que podáis probarlo.

Espero que os sea de utilidad.

La primera pregunta es trabajar para vivir, o vivir para trabajar. Si me permitís, creo que esto también se traduce en: “tener un sueldo digno, o ganar mucho dinero.”

La frontera de cuánto es para cada uno es un sueldo digno es muy diferente. No solo se trata de que lo que nos paguen por nuestro trabajo diario sea suficiente para pagar las facturas (el piso, la comida, la luz, el agua, el coche, etc.), sino de algo que creo mucho más importante, cuánto hemos de ganar para sentirnos realizados o satisfechos por nuestro trabajo. Eso sí que es difícil de medir.

Por regla general siempre pensamos que ganamos menos de lo que merecemos. En esta sociedad actual llena de mileuristas (os aconsejo este artículo) por doquier es difícil sentirse realmente compensado por aquello que hacemos. A parte queda la infravaloración existente acerca de nuestra profesión de diseñadores. Son muchos los que piensan que al no ser un trabajo manual o físico, carece de valor. La creatividad está realmente devaluada.

Ante esto siempre pienso lo mismo (aunque no lo digo): “HAZLO TÚ”. El componente subjetivo siempre estará presente. Es lógico que nuestros diseños no gusten por igual a todo el mundo. Está claro que incluso nosotros no estaremos siempre igual de satisfechos con lo que hemos creado. Pero a diferencia con otros trabajos, aquí todo el mundo parece tener opinión y además que esa opinión es más importante que la del propio diseñador. Es una especie de intrusismo laboral pero a gran escala.

No obstante dejaré estas reflexiones para otra nueva entrega de estos artículos.

Siguiendo con el tema, no hay más que palpar el mercado laboral para darse cuenta de que tienes tres opciones. Si eres algo más conformista (complicado para un diseñador), no quieres demasiadas complicaciones a final de mes, o simplemente quieres ver a tu mujer más de 3 horas al día, tu puesto está en el trabajo por cuenta ajena. Eso sí, ya sabes lo que hay: poco sueldo, todos tendrán opinión y parte en tu trabajo, probablemente infravaloren lo que haces… todo esto salvo honrosas excepciones (que tengo la suerte de disfrutar).

Otra opción es ser freelance. Hoy en día puedes encontrar muchísimo trabajo de esta manera, y bastante mejor pagado que la anterior opción, pero con ese nervio en el estómago en el que puedes llegar a fin de mes (o no). Podrás trabajar en casa, o en un estudio, pero las horas de trabajo, lejos de lo que muchos piensan, se multiplican al menos por dos, estarás bajo el régimen de autónomos que en España no se puede decir que sea la panacea precisamente y tendrás mucho más papeleo.

La tercera opción es la del emprendedor. Normalmente a este perfil se acogen muchos ex-freelance o autónomos que viendo crecer su negocio se lanzan a la aventura de convertise en empresa. Estos si que son los valientes. Pasan de la libertad a ponerse al otro lado de la mesa del director de su primera empresa. Empiezan a ver que todo no es tan fácil, que todo cuesta muchísimo dinero, ahora si que es complicado llevar el día a día, si que duermes poco. Pero pienso que todo no es negativo. Ves crecer tu empresa como si de un hijo propio se tratara y es una satisfacción enorme, como pocas en la vida. Ahora sí, dile a tu mujer que o trabaja contigo o que ya nos vemos si eso… (es broma… o no? )

Bueno, aquí queda esta primera entrega de la vida de un diseñador. Espero que os haya gustado. Seguiremos escribiendo.

Para los que no conozcan el término os dejo la definición que podemos encontrar en Wikipedia: “es uno de varios métodos de manipular la relevancia o prominencia de los recursos indexados por un motor de búsqueda”. Es decir, técnicas destinadas a mejorar la posición de una web en los buscadores, pero de dudosa profesionalidad o seriedad.

El efecto inmediato es muchas veces una manipulación de los resultados para una determinada cadena de búsqueda, con lo cual perjudicamos directamente al usuario, en pos de beneficiarnos a nosotros mismos.

El spamdexing tiene muchas formas, principalmente dirigidas a la manipulación del contenido y de los enlaces. Dejaré aquí algunas de ellas:

• Texto oculto del mismo color del fondo con relleno de palabras clave.
• Sobreutilización de palabras clave para aumentar la densidad de estas en el contenido. Desvirtúa totalmente el contenido y dificulta mucho su lectura y comprensión por parte del usuario. Ej. (http://www.relojeria.org)
• Ocultación y repetición múltiple de enlaces con distinto texto que apuntan a una misma página.
• Ocultación de código de spamdexing bajo películas flash a pantalla completa.

y muchas más…
Desde luego, lo primero que pienso cuando veo que webs que hacen spamdexing están las primeras en los buscadores, es que todo vale. La competición por aparecer en los primeros puestos, y supuestamente conseguir más clientes, se ha convertido para muchos en una guerra sin cuartel y me hace dudar de su profesionalidad.

Por otra parte estoy convencido que hoy en día los buscadores no hacen un buen filtraje de los contenidos o bien se han quedado anticuados ante la increible picaresca de los webmasters para ocultar estas prácticas ilícitas que van en perjuicio directo de los usuarios.

No obstante podemos respirar tranquilos, porque creo que somos mayoría los que velamos por ofrecer contenidos de calidad en nuestras páginas, los que trabajamos por llevar esta profesión como bandera de la innovación y ser un servicio para nuestros usuarios.

¿Cuál es tu posición en este tema? Os invito a participar.

Trata sobre la eterna pregunta de ¿cuánto cuesta una web?. Ante esto Javi afirma que el precio lo pones tu, no el cliente… ¿Opiniones?

“Después de una gratificante clase en Madrid donde he disfrutado de la grata compañía de mis alumnos, toca la vuelta en AVE. Gracias a dios vodafone, con internet. Tengo dos horas para pensar un poco en todo, y hoy he estado reflexionando un poco acerca de los precios de las páginas web.

¿Cuanto cuesta una web? Es la pregunta del millón, diréis muchos de vosotros.

La verdad es que es una pregunta un tanto difícil de responder.

Tal vez, haciéndonos algunas preguntas como ¿cuanto cuesta una hora de mi tiempo?, ¿y mi experiencia? podamos orientarnos un poco pero la verdad es que cuando veo páginas de compañeros de profesión en los que se ofrece diseños web por 500/1000 € me pregunto como podrán llegar a final de més sin acudir a estas empresas tan de moda que te ofrecen dinero rápido a un insignificante interés del 30%…”

Continua en la web de Javi Rodriguez

Las principales reglas para optimizar el tamaño de tus SWF son:

- No crear movimientos fotograma a fotograma sino utilizando las interpolaciones, de movimiento y de forma. Hay que tener cuidado en este aspecto porque si hacemos animaciones fotograma a fotograma es muy posible que sobrecarguemos mucho el procesador y se vea afectado el rendimiento general de la película al tirar mucho de procesador. No obstante también debemos de tener cuidado con las interpolaciones porque si superponemos varias de estas (en distintas capas), el efecto es mismo, una bajada considerable de rendimiento y consecuentemente de la velocidad de reproducción.

- En la medida de lo posible no usar los componentes predefinidos de Flash, ya que aumentan entre 30Kb y 40Kb de media el tamaño de nuestra película y existen numerosas alternativas libres en la red, o tal vez no tardemos casi nada en reproducir su funcionalidad nosotros mismos.

- Intentar usar las capacidades vectoriales de Flash. Es muy común la utilización de imágenes de fondo para nuestras películas. Por mucho que optimicemos su tamaño debemos de pensar si no somos capaces de reproducir esto mismo mediante las herramientas que el programa nos proporciona. Un ejemplo claro de esto son los fondos degradados.

- Si utilizamos imágenes de mapa de bits es recomendable su inclusión en formato PNG, dada su alta calidad y cualidades de transparencia muy superiores a las del GIF, y dejar en manos de Flash la posterior compresión a formato JPG. Aquí apuntar que para muchos casos es aceptable una compresión al 50% o incluso algo menos, para elementos en movimiento o elementos pequeños.

- Cuidado en la utilización de tipografías. Si utilizamos textos estáticos se reduce bastante el problema al realizarse la vectorización de estas, pero en el caso de inclusión de textos dinámicos debemos de tener mucho cuidado en no incrustar más caracteres de los que necesitamos. Según Javi Rodriguez, lo óptimo es la inclusión de Mayúsculas, Minúsculas, Numerales, Signos de Puntuación, y la siguiente cadena optimizada: áéíóúÁÉÍÓÚÑñ´¨¡¿ÇçäëïöüÄËÏÖÜâêîôûÂÊÎÔÛàèìòùÀÈÌÒÙºª. Además, a mayor complejidad de la fuente, mayor tamaño. Se recomienda por ejemplo en textos pequeños, el uso de Pixel Fonts.

- En la inclusión de ficheros de audio, no usar directamente mp3, sino ficheros sin compresión en formato WAV, para posteriormente comprimirlos con Flash. Aquí deberemos cuidar tanto el bitrate, como si necesitamos estéreo o mono. Lo ideal es ir probando hasta obtener un compromiso entre calidad y tamaño.

- No duplicar código. Centralizar la escritura de las funciones en un punto concreto, y si es necesario, en ficheros .as externos. Este punto además facilita el mantenimiento posterior y evita errores.

- Utilizar la carga externa de recursos. No condicionar el tamaño de una película a la suma de los recursos de los que hace uso, sino cargarlos de manera dinámica según se necesiten.

Vamos a hacer un recorrido por lo que fueron las primeras versiones del Flash, algunas de ellas desconocidas para muchos diseñadores.

A más de uno se le va a escapar una lagrimilla o un suspiro de añoranza de tiempos mozos…

Flash 1. FutureSplash de FutureWave

La empresa FutureWave lanza al mercado un programa de animación de GIFs para publicidad en webs, fue el momento dorado de los banners animados.

Permitía la exportación a un formato conocido como .SPL, que resultaba ser un formato de animación vectorial que necesitaba de un plugin para su ejecución.

Flash 2. Macromedia

Una tal Macromedia, conocida en aquel entonces por programas de autoreo como Director o Authorware, ve futuro en la tecnología de FutureWave y decide absorberla. Poco después lanza Macromedia Flash 2, con prácticamente la misma tecnología que el FutureSplash, con la excepción de que su formato .SPL pasa a denominarse .SWF (ShockWave Flash), además de aparecer el primer logo de flash, en forma de molinillo. Flash ha nacido.

Flash 3. Comienza la revolución. Transparencias!!!

Macromedia sorprende a propios y extraños incluyendo una capacidad en su nueva versión de Flash, puede trabajar con transparencia, algo realmente potente para la época. Ya comienza a haber animaciones de forma y exportación de ficheros HTML, así como incipientes aplicaciones de servidor.

Flash 4. Esto empieza a parecer algo serio

En esta nueva versión, Macromedia incluyó una buena cantidad de nuevas herramientas, así como el primer código con propiedades de objetos, variables. Se convierte en una aplicación sólida y realmente favorece la primera época dorada de los sitios en flash.

Se cambia la línea de tiempo, se permite la carga de recursos externos, se añade compresión MP3, una revolución por aquel entonces.

Todos sabemos donde está la historia en estos momentos… Macromedia fue comprada por la todopoderosa Adobe y nos encontramos con Adobe Flash CS3 (o Flash 9), que hoy en día se entiende como estándar de facto en cuanto a la creación de contenidos multimedia y web, estando instalado su reproductor en más del 90% de los ordenadores personales del mundo. Su tecnología de compresión y streaming de video es la más usada…

Espero que os haya gustado este repaso por los inicios de nuestro querido Flash.

Toda la información está basada en el post citado, así como los ficheros relacionados.

Recomendaciones de uso y escritura de código

Usar las etiquetas HTML estrictamente para lo que se han concebido

Si se consigue crear un código XHTML lo más limpio y claro posible se verá reducido considerablemente el número de estilos propios que tendremos que crear y evitaremos la mayoría de los errores e inconsistencias comunes.

• Maquetar en base a capas (div), no usar tablas (table).
• Párrafos: (p)
• Encabezados: (h1, h2, … h6)
• Tablas: (table, thead/tr/th, tbody/tr/td)
• Listas: (ul/li, ol/li)
• Menús: basados en listas con el atributo display:inline

Uso de medidas relativas en los tamaños de las fuentes

Las medidas relativas son aquellas que no establecen un tamaño fijo en píxeles o puntos para un elemento. En concreto son el porcentaje (%) y el em (1em equivale a 100%, 1.2em a 120%…, 0.7em 70%, …)

Es muy importante este punto por varios aspectos:

• No todas las personas tienen el monitor a la misma resolución y nuestra tipografía le puede resultar muy pequeña o grande según el caso.
• Al establecer la medida de tipografía de manera relativa en la etiqueta body, se tomará el tamaño relativo al navegador y dispositivo que interprete la página. Esto es especialmente en dispositivos con pequeñas pantallas (móviles, pda, etc.).

Maquetación de layout fijo basado en capas

Esta es una antigua polémica, el maquetado de tamaño fijo de ancho o el maquetado líquido o de tamaño variable.

Los estudios de usabilidad web aconsejan el uso de tamaños fijos adecuados a la resolución más usada por los usuarios de internet, intentando que el porcentaje discriminado sea el menor posible. La explicación de este aspecto se justifica por el constante crecimiento en las ventas de monitores de gran tamaño (17″ o más) y resolución (1024×768 en adelante).

La expansión de las páginas sobre todos en resoluciones de monitores panorámicos dificulta enormemente la legibilidad de los párrafos de texto.

Crear estilos o redefinirlos solo en el caso estrictamente necesario

Si creamos nuestras páginas haciendo un uso adecuado de las etiquetas XHTML y seguimos las pautas descritas en este documento, se reducirá drásticamente la necesidad de creación de estilos innecesarios y redundantes, lo que conlleva enormes beneficios sobre todos relativos a la facilidad de mantenimiento y reducción de errores y comportamientos extraños.

Existen infinidad de sitios en Internet que ofrecen miles de propuestas diferentes a la hora del uso de hojas de estilo CSS en la maquetación de portales web, como sabemos aplicables a múltiples tecnologías: XHTML, Flash, etc…

Lo que es difícil de encontrar es aquella solución que se adapte perfectamente a tus desarrollos, a tu entorno concreto. Quizá más difícil aun es adecuar algún enfoque similar al tuyo. Esta tarea es proclive a múltiples errores, que irán saliendo conforme se vaya utilizando y que llegado el momento, podemos comprobar que nos hemos equivocado de base, lo que exige una reestructuración desde el inicio.

Este es el contexto en el que nos encontramos actualmente. Tras una fuerte apuesta por la reestructuración y organización de CSS basadas en su semántica de uso se ve que si es quizá uno de los enfoques más acertados, deja bastantes puntos abiertos que es necesario concretar. Esa es la tarea que nos proponemos aquí.

Para los no iniciados, comentar que el enfoque semántico se basa en la idea de que la manera de estructurar la información relativa a la capa de presentación de nuestros proyectos web debe de seguir el criterio de qué es y el contexto donde se usa cada elemento.

El entorno web tiene una característica fundamental que pocos otros tienen y es la capacidad y potencialidad de uso en múltiples tipos de dispositivos, lo cual nos abre aun más el abanico de puntos que debemos controlar a la hora de crear nuestras hojas de estilos, a la vez que multiplica la casuística y potenciales errores que es necesario controlar.

Aquí trataremos de dar una posible solución que se adecue a los principios de CSS semántica y que siga las pautas de accesibilidad y de facilidad de extensión a múltiples dispositivos.

Puntos a tener en cuenta

Estructura jerárquica de las CSS

Nuestras hojas de estilo seguirán una estructura jerárquica, cuyo elemento principal será el que incluya, para cada tipo de dispositivo, las hojas de estilo correspondientes.

Explicación de cada una de las hojas de estilo

• Pantalla.css, Impresora.css y Movil.css. Estas son CSS específicas para cada tipo de dispositivo. Su misión en la parte superior de la jerarquía es la importación de las CSS hijas (@import url(”…css”) ). No incluyen estilos concretos.
• LayoutPantalla.css, LayoutImpresora.css y LayoutMovil.css. Incluyen la información relativa a las diversas capas que forman el layout de la página, es decir, información de maquetación de las distintas zonas del portal (Banner, menús, contenidos, créditos, …)
• CrossBrowser.css. Aglutina trucos, fixes y demás elementos para hacer que las páginas se vean igual en todos los navegadores (Internet Explorer, Mozilla, Firefox, Opera, etc.)
• Tipografía.css. Cualquier elemento relacionado con las forma en que se presenta la tipografía de la página queda recogida aquí.Comienza con una medida relativa de 62.5% en la etiqueta body, que se establece como medida equivalente a 1em. El resto de tamaños vendrán supeditados a este (mayores: 1.2em, 1.5em, etc…, y menores: 0.8em, 0.5em, etc.)
• Formularios.css. Definición de los estilos aplicables a todas las etiquetas relacionadas con los formularios genéricos.

Documentos asociados a este artículo

• CSS Semánticas. Incluye los distintos CSS descritos.
• Página ejemplo en XHTML con una maquetación tipo basada en capas

Si quieres seguir leyendo sobre este tema… CSS Semánticas. Un nuevo enfoque (y II)