Malaletra Blog

Últimamente tuve algunas pláticas con amigos sobre el uso de internet como medio de publicación y divulgación. En éstas me he dado cuenta que muchos de ellos no ubican algunos de los pros y se preocupan principalmente en los contras. Lo que me ha llevado a pensar en cómo se están generando las relaciones entre las Tecnologías de la Información y Comunicación (TIC) y nuestro entorno socio‑cultural. Tema que indiscutiblemente se relaciona con el concepto de brecha digital, que en Latinoamérica es muy marcada. Entonces, si queremos utilizar las TIC, en proyectos sociales y de distribución de la información, debemos encontrar el modo de que el uso de la tecnología se dé más allá de simplemente tener una computadora y conexión a internet.

Por otro lado, es importante resaltar que en estas latitudes es muy poco el desarrollo de innovaciones tecnológicas, tanto en software como en hardware. Lo cual nos plantea como consumidores y, por lo tanto, pagamos altos precios por el acceso a tecnología de punta. En este aspecto vemos que las otras brechas, educativas y económicas, se interrelacionan junto con el ámbito tecnológico, lo que da por resultado un panorama muy elaborado para salvar dichos atrasos. Ya que éstos no se solventan solamente con el equipo necesario para conectarse, sino que además se necesita la capacitación de los usuarios para que puedan explotar debidamente dichas herramientas. Muchos opinan que esta tarea debe realizarse desde el gobierno, pero como hemos visto en diferentes proyectos, las propuestas se centran en la adquisición del equipo. Ejemplo de esto es cuando uno observa el uso que los profesores hacen de Enciclomedia, el proyecto tecnológico del sexenio pasado, ya que no todos los profesores no logran relacionarse adecuadamente con el hardware y software del proyecto. Ahora bien, si planteamos esta situación en zonas rurales donde existen niveles muy bajos de educación, entonces aunque tengan acceso a las computadoras, los beneficios de éstas quedan descontextualizados respecto a la situación
socio-económica de los usuarios.

Por lo mismo, desde mi punto de vista, es necesario implementar programas de integración tecnológica adaptados a las necesidades específicas de las diferentes comunidades que integran el país. Es claro que actualmente se comienza a utilizar el web 2.0 para proyectos sociales, en donde una comunidad interactúa en un portal para mejorar su inter-comunicación y así encontrar las necesidades en conjunto. Como es el caso de las noticias hiperlocales. Por lo tanto, este tipo de proyectos pueden beneficiar considerablemente a comunidades que, dada su situación geográfica, se encuentran incomunicadas, en mayor o menor medida. Otro aspecto importante es la necesidad de estos usuarios para acceder a contenidos culturalmente adecuados para su contexto. Datos de la consultora NIC señalan que entre 1992 y 2008, el número de sitios mexicanos en internet pasó de 19 mil a casi 200 mil, en la misma medida el número de cibernautas pasó de 2 millones a 27 millones. Sin embargo, el mayor porcentaje de contenido en internet se encuentra en inglés y eso conlleva usuarios bilingües. Asimismo, generalmente sucede que las comunidades receptoras, de estos procesos de integración tecnológica, pocas veces son tomadas en cuenta, afectando considerablemente la sustentabilidad a largo plazo de los proyectos de esta naturaleza. De tal modo, que se necesita una fuerte interacción entre los usuarios posibles de estos programas gubernamentales y los funcionarios encargados de los mismos, para que así se obtengan mayores beneficios sociales y económicos:

En este sentido, algunos autores plantean que las TICs deberían proporcionar un espacio de encuentro de una nueva esfera pública, donde la sociedad civil pueda definirse y comprenderse en su diversidad y donde las estructuras políticas estén sujetas al debate público y sean evaluadas por sus acciones, garantizando la participación de las categorías más excluidas a través de perspectivas de género, regionales y sociales (Wikipedia).

Asimismo, la situación económica de gran mayoría de la población en México y Latinoamérica hace que el adquirir una computadora y una conexión a internet no sea algo absolutamente necesario; primero se tienen que medio cubrir las necesidades básicas. Por lo mismo, vemos que el acceso a internet, y ya no digamos a una conexión de banda ancha, está francamente restringido por nuestra situación económica. En México existen 109,955,400 habitantes y de ellos 27,400,000 son usuarios de Internet.

Pero estos datos no son alentadores, del total de conexiones, casi el 60% corresponde a entidades de gobierno locales y federales así como empresas. El resto son conexiones privadas, pero se calcula que solamente una quinta parte de los mexicanos se conecta a internet con una computadora instalada en su casa (OnceTV México).

Por lo mismo, los proyectos de integración tecnológica deben contar, a mi entender, con capacitadores enlace que trabajen con las comunidades. De esta forma, los enlaces deberán darle cauce a las necesidades de la comunidad y plantear los usos y las herramientas necesarios para satisfacerlas. Asimismo, deberá proporcionar los conocimientos necesarios para que las propias comunidades generen contenidos relacionados con su entorno. Logrando de esta manera que la brecha de contenidos se vaya reduciendo. Esta medida proporciona una contextualización de las TIC dentro del ámbito socio-económico de las comunidades a enlazar y además promueve la generación de contenidos adecuados para las múltiples zonas geográficas del país. Con lo cual se logra una mejor interacción entre las comunidades y las oficinas gubernamentales a cargo de los proyectos, proporcionando una mayor sustentabilidad de los proyectos. Dado que su desarrollo se basa en la satisfacción de necesidades específicas.

La evolución de la tecnología, de la cultura, así como de las nuevas formas de comunicación son factores que modifican constantemente al estilo del diseño gráfico impreso y digital. En el caso del medio digital se observan algunas tendencias de estilo que provienen del diseño impreso. Por otro lado debe incluirse en el diseño la forma como el usuario interactuará con nuestro diseño, dado el papel primordial  que tiene en el desarrollo de medios tecnológicos. Actualmente existen usuarios que buscan y promueven herramientas más dinámicas con las cuales se puedan desarrollar formas de comunicación, participación e interacción: como la Web 2.0.

Actualmente, para que las personas se puedan comunicar en Internet, siempre será necesaria una interfaz gráfica. Un área de comunicación donde sea posible interactuar a través de diferentes herramientas de comunicación. Estas herramientas –como los códigos lingüísticos, visuales, sonoros y secuenciales– han sido adaptadas a lo largo del tiempo a partir de las necesidades del usuario y de la tecnología imperante. Por lo tanto, en Internet el estilo de la interfaz gráfica se adapta y evoluciona de igual manera, para que así todos los elementos visuales aplicados en la interfaz ilustren de forma correcta el mensaje y transmitan la información apropiadamente.

Por lo general los nuevos estilos de diseño de interfaz gráfica buscarán conceptos como frescura, modernidad, estabilidad, flexibilidad, agudeza e inteligencia en sus herramientas. Puesto que éstas están pensadas para facilitar la comunicación y participación del usuario con el medio. Sin embargo, algunos estilos vuelven a ser retomados para “modernizar” el sitio al usar un diseño retro. Hay que considerar que el estilo está influenciado por la cultura en que se desarrolla el diseño, como plantea Daniel Prieto, en Diseño y Comunicación (1994: 32): “la formación social en que se encuentre el diseñador hace que los procesos de creación difieran, no existe un proceso válido para todos por lo cual tenemos alternativas de elaboración, distribución y uso de los diseños”. Esto podemos verle al confrontar un diseño oriental como Art and Design, en el que su diseño es muy limpio, con B.N.WEISS creado desde la cultura occidental y donde se retoma la textura.

A continuación hago una recapitulación de las tendencias del diseño, aunque comenzará desde el 2006 puesto que ejemplos de años anteriores ya no se encuentran tan fácilmente, dada la constante renovación del diseño en los sitios web.

Tendencia del diseño:

2006

• Uso de degradados
• Backgrounds en diagonal
• Tipografías de gran tamaño
• Backgrounds blancos
• Efecto de reflejo en el piso
• Tipografías con pixeles acentuados

2007

• Uso de caricaturas y mascotas
• Estilo galigoreado
• Bordes rotos
• Iconos RSS grandes
• Textura
• Fondos oscuros para realzar los colores

2008

• Estilo retro
• Notas sobre el diseño (post-it)
• Grungy
• Manchas de tinta
• Ilustración de acuarela
• Collage
• Tipografía manuscrita
• Tipografía grande
• Imagen con patrón de madera
• Imagen con patrón en zig-zag

2009

• Letras grabadas en relieve
• Colores en ondas y brillantes
• Transparencias
• Letras grandes
• Diseño sin áreas delimitadas o fueras de los márgenes
• Uso de lightboxes y no pop-up
• Áreas de medios visuales
• Realismo de imágenes de fondos
• Espacios blancos más grandes
• Elementos de diseño con redes sociales

Últimamente he tenido que pensar mucho en los procesos necesarios para obtener los archivos de una publicación digital. Uno de los puntos más difíciles de discernir ha sido cómo hacer para que al final del proceso obtengamos archivos válidos para diferentes plataformas, pues finalmente la gran ventaja de editar digitalmente es poder utilizar una fuente para múltiples formatos. Sin embargo, esta capacidad puede conllevar una complicada implementación, puesto que requiere visualizar los distintos formatos que se generarán antes que se comience la producción de la publicación. Por el momento, la mejor solución para obtener un archivo maestro para varios formatos es marcar el contenido con XML (eXtensible Markup Language), uno de los mejores formatos para intercambiar información estructurada.

Por otro lado, antes de obtener el material que se marcará habrá que definir muchos otros procesos. Influye mucho la fuente de donde obtendremos el contenido de nuestra publicación; por ejemplo, si vamos a digitalizar un material ya publicado o si contamos con los archivos digitales. Al tener que digitalizar un acervo nos encontramos con la necesidad de establecer estándares de digitalización (dpi, tamaño y formato para obtener un archivo maestro). A su vez, si contamos con archivos digitales -Word, TXT, PDF, etcétera- deberemos establecer las características que deberán contar para trasladar de forma sencilla dichos formatos a XML. En Word se puede estructurar el archivo a través de secciones u otras funciones del programa para que, al guardar como XML, ya obtengamos los archivos marcados. No obstante, esta forma puede complicarse, puesto que, por lo regular, Word integra código basura a los archivos. Por lo mismo podemos limpiarlos o decidir marcarlos desde un origen con un Marcador de XML, esta última opción cuenta también para los formatos PDF, TXT, entre otros. Asimismo, cuando digitalizamos material impreso, antes de ponerse a escanear, deberemos establecer los parámetros que tendrán los archivos digitalizados, para que así obtengamos imágenes con la calidad suficiente: normalmente es suficiente con archivos a 300dpi y en escala de grises (para texto) o millones de colores para fotos, asimismo guardar las imágenes en formato TIFF (Tagged Image File Format), aunque estas características dependerán de la calidad del material a escanear -no es lo mismo escanear fotocopias que un libro con papel couche brillante. Todo esto debido a que si realizaremos procesos de limpieza para las imágenes o de OCR (Optical Character Recognition) contemos con la mejor eficacia en ellos. Siempre hay que mantener los archivos de calidad de la digitalización como maestros, dado que así podremos realizarles diferentes procesos sin tener que re-escanear el material.

Una vez que ya tengamos la información digital lista para marcarse, deberemos planificar todas las diferentes etiquetas que podremos usar. Este proceso de edición es muy importante puesto que a cada etiqueta le podremos dar especificaciones al momento de transformar los archivos en HTML, PDF o integrarlos en una base de datos para generar archivos dinámicos en línea. En esta etapa del proceso se necesitan diversos conocimientos, puesto que la generación de las XSL (eXtensible Stylesheet Language) para los distintos formatos implica conocimientos de programación, diseño web en CSS (Cascading Style Sheets), bases de datos, entre otros, claro está que estos dependerán de los formatos de salida que deseemos tener. Por lo mismo, deberemos contar con un equipo humano capaz de llevarlo a cabo, ya que incluso podemos obtener e-books para lectores digitales como Plastic Logic, Kindle o el mismo i-phone. Además, es muy importante que todos los cambios, que se le hagan al contenido, se realicen en los archivos XML, puesto que así, al volverlos a generar, no tendremos que reincorporar los cambios en los archivos de los diferentes formatos de salida. Cabe mencionar que incluso podemos importar estos archivos en programas de maquetación para publicaciones impresas, como InDesign y QuarkExpress, obteniendo así todo un proceso para publicaciones digitales e impresas. Respecto a las publicaciones impresas, en la actualidad existen propuestas para estandarizar el marcado XML y así se puedan intercambiar más fácilmente. Por último, me queda decir que en la actualidad es muy importante poder intercambiar la información y, debido al constante avance de la tecnología, casi siempre un formato puede dejar de tener actualidad e incluso podemos perder la capacidad para extraer el contenido de un archivo. Por lo tanto, si marcamos nuestra información en XML podremos exportarla a casi cualquier formato. Si de recuperación hablamos solo menciono que los archivos XML pueden visualizarse con el más sencillo editor de textos.

La imagen, como parte fundamental del diseño de interfaces, debe ser optimizada  para que pueda cumplir dos funciones principales en web: que se vea bien y que pese poco. Las imágenes vistas en el monitor no son optimizadas de la misma manera que para salida de impresión por lo que la resolución es parte primordial en su manipulación entre otros aspectos como color, número de bits y formato.

Existen dos clases de imágenes con las que diseñamos, vectoriales y mapa de bits. Las primeras se generan en la computadora y las otras son las que retomamos del mundo exterior (fotografías o video) y se manipulan en la computadora (escaneadas o descargadas). Las imágenes vectoriales son figuras generadas con vectores, estos vectores –basados en cálculos matemáticos de la computadora– son los puntos que controlan el contorno de la figura en su angularidad y modulación. Por la forma en que son generadas estas figuras no pesan mucho y no pierden definición cuando son escaladas. Las imágenes de mapa de bits están generadas a partir de píxeles (puntos) contenidos en una retícula. Cada píxel contiene información de color. Por lo que el número de píxeles dentro de una imagen determina su calidad visual o su resolución. Es decir, a mayor número píxeles mejor definición, pero mientras más píxeles contenga se vuelve más pesada y si requieres escalarla puedes perder definición en la imagen, lo cual comúnmente se conoce como “pixelearse“. Generalmente, empezamos a diseñar con imágenes de mapa de bits, por lo tanto abordaré algunos de los elementos que se deben considerar para su optimización.

La resolución

Es la cantidad de pixeles –puntos– que conforma la imagen. Dicha cantidad representa la calidad de una imagen. La resolución se mide en dpi (siglas en inglés de dots per inch obien, puntos por pulgadas) y es la “unidad de medida de la resolución de la imagen“. Cuando se comienza a manipular una imagen se recomienda hacerlo con una alta resolución. Si se va escanear una imagen de preferencia hacerlo con una resolución mínima de 300 dpi para que cuando se manipule, retoque o escale no pierda definición. Conforme vaya quedando la imagen podrás trabajarla a 150 dpi y cuando tengas la imagen definitiva entonces bajas la resolución a 72 dpi, que es la resolución estándar para web. Pero doy un consejo, dejen una copia de la imagen original sin manipular su resolución por cualquier eventualidad. Ya que si quieres subir la resolución de una imagen –digamos de 72 a 300 dpi– para que puedas escalarla seguramente se perderá la calidad, lo que también es conocido como “romperse el pixel“. Esto significa que cuando quitas pixeles o bajas la resolución de una imagen estas quitando información y luego si quieres meterle más pixeles simplemente la imagen no puede compensar esta información con una mejor definición.

Color y número de bits

Por la forma en que están hechos los monitores existen 3 colores principales: RGB (siglas en inglés de Red, Green y Blue). Estos son colores luz o aditivos; es decir, mientras más porcentaje de color se tiene de ellos se llega al color blanco; en caso contrario si se quita porcentaje de color, le restamos luz, se llega al color negro. Sin embargo, este aspecto es inconstante y no se puede controlar, ya que en cada usuario varía la calibración de color de su monitor. Entonces, aunque uno tenga los súper colores en el diseño, en otro monitor puede verse como la peor combinación de colores y destrozarlo. Por lo que se aconseja visualizar el sitio en diferentes monitores para llegar a un estándar de colores con el que no se vean tan distintos.

Este tema está muy relacionado con el número de bits ya que el número colores que tenga el píxel depende del número de bits, mientras más bits tengamos mayor profundidad de color se tiene pero la imagen se vuelve más pesada, es decir, mientras más colores soporte una imagen, se necesitaran de más bits por píxel, lo que incrementará el tamaño del archivo. El bit se entiende como la unidad mínima de información que reconoce una computadora en un solo dígito (0 o 1) su número determina la cantidad de tonos de una imagen, lo cual lo podemos ver en la siguiente escala:

1 bit (2¹) = 2 tonos

2 bits (2²) = 4 tonos

8 bits (2⁸) = 256 tonos

16 bits (2¹⁶) = 65,536 tonos

24 bits (2²⁴) = 16,777,216 tonos

32 bits (2³²) = 4,294,967,296 tonos

Ejemplos:

Los monitores utilizan entre 8, 16 y 32 bits, algunos hasta 64 bits. No obstante, la forma como debe ser guardada una imagen para web es de 24 bits, así obtenemos una imagen que se vea bien y no pese tanto. Los bits superiores se utilizan para salida de impresión. Esta profundidad incluso nos permite usar transparencia en el formato png.

Formato

El formato es la extensión con la que se guarda la imagen y dependiendo de las necesidades del diseño utilizas cada una de ella de acuerdo a sus características, optimización y peso. Las extensiones más comunes son jpg, gif y png. El formato jpg permite tener miles de colores, por lo que muestra mejor los degradados y fotografías pero no tiene transparencia. El formato gif tiene una paleta de colores hasta de 256 tonos y permite salvar con transparencia y además se pueden animar, pero por su cantidad de colores las imágenes con una gran cantidad de tonos no se ven muy bien. El formato png es una combinación entre jpg y gif, esto significa que tiene una paleta de colores alta y permite la transparencia con buena calidad, el inconveniente es que tiene mayor peso y las versiones anteriores y del Internet Explorer 7 no permiten ver la transparencia, a menos que hagamos un hack con javascript.

El formato que utilices en una imagen depende mucho de la necesidad de la misma, por ejemplo, si usas una imagen de fondo o que sea grande te recomiendo que sea en formato jpg. Si utilizas botones o iconos pequeños que no tengan mucho degradado utiliza el formato gif, también algunas imágenes grandes pueden verse bien en este formato pero depende como fueron trabajadas desde el inicio. Si requieres una imagen con transparencia mejor usa el formato png pero considera que tal vez no lo puedan ver los navegadores mencionados.

La correcta combinación de estos aspectos (resolución, color, número de bits y formato) es muy importante para la optimización de una imagen. Puesto que en web se deben cumplir dos principios: que se vean bien las imágenes y que pesen poco, para que no tarden mucho en descargarse. Así los usuarios no abandonarán tu página porque la información se despliega rápido.