EL ESTUDIANTE DE DISEÑO GRAFICO EN INTERNET

ADO

[

EL ESTUDIANTE DE DISEÑO GRÁFICO EN INTERNET_]

ARLEY DAZA ORTEGA Trabajo de Investigación Dirigido presentado al programa de Diseño y Producción Gráfica como requisito parcial para optar al título de TECNÓLOGO EN DISEÑO Y PRODUCCIÓN GRÁFICA

CATALINA HERRERA SANABRIA ASESORA

CORPORACIÓN UNIVERSITARIA UNITEC FACULTAD DE DISEÑO Y PRODUCCIÓN GRÁFICA BOGOTÁ D. C 2008

EL ESTUDIANTE DE DISEÑO GRAFICO EN INTERNET

ARLEY DAZA ORTEGA

Trabajo de Investigación Dirigido presentado al programa de Diseño y Producción Gráfica como requisito parcial para optar al título de TECNÓLOGO EN DISEÑO Y PRODUCCIÓN GRÁFICA

CATALINA HERRERA SANABRIA ASESORA

CORPORACIÓN UNIVERSITARIA UNITEC FACULTAD DE DISEÑO Y PRODUCCIÓN GRÁFICA BOGOTÁ D. C 2008

RESUMEN

El estudiante de diseño gráfico cuenta actualmente con una gran variedad de herramientas que le facilitan la producción, promoción y publicación de sus trabajos en un medio como el Internet con sus múltiples aplicaciones y herramientas colaborativas. Algunas de estas herramientas son aplicables y utilizadas debido al surgimiento del concepto aplicado de la Web 2.0, la cual nos ofrece una gran variedad de utilidades de manera colaborativa; y nos facilitan el comunicarnos con grandes grupos de usuarios en la red.

La problemática que se presenta actualmente consiste en que el estudiante de diseño gráfico conoce poco sobre el alcance de las herramientas que le ofrece el Internet.

Este trabajo busca dar a conocer algunas utilidades y fuentes de publicación presentadas a través de este medio.

RESUMEN

Este trabajo de investigación ofrece como producto final una guía práctica para el estudiante de diseño gráfico sobre el uso de herramientas basadas en aplicaciones de Internet para la presentación y gestión de sus trabajos; y adicionalmente los procedimientos que se deben tener en cuenta para la creación de páginas Web y multimedias.

La metodología a emplearse en este TID inicia con un proceso de recolección de información, donde se busca identificar las necesidades y debilidades puntuales que tienen los estudiantes al realizar o aplicar soluciones donde el Internet sea su herramienta principal. La primera actividad a realizar es aplicar una encuesta a los estudiantes de la facultad de Diseño y Producción Gráfica de los semestres 4 y 5 de la Corporación Universitaria Unitec. La forma de presentación de la encuesta fue a través de preguntas cerradas, con el fin de filtrar datos específicos para poder evaluar los resultados y obtener bases para la presentación del producto final.

Posterior a este filtro de información, se procederá a elaborar una pieza grafica – Cuadernillo y CD ilustrado – donde se le informe a los estudiantes de diseño y Producción gráfica métodos de producción para el desarrollo de productos digitales de diseño, portafolios, multimedias, Web sites, y posteriormente poderlos publicar en Internet, según las diferentes alternativas.

Este trabajo de investigación surge por la importancia que tiene el Internet como un medio de comunicación y divulgación de información. Dado esto, el estudiante de diseño gráfico debe conocer métodos de desarrollo para la producción de piezas gráficas en Internet, desde conocer la información necesaria para el inicio del proyecto hasta su publicación usando los medios que se encuentran en vanguardia.

Este trabajo puede ser usado posteriormente como base para estudios que les permitan a los estudiantes de diseño gráfico el uso y alcance de las posibilidades que tiene el Internet sobre el mismo diseño gráfico y sus usos e implementaciones sobre Internet.

AGRADECIMIENTOS

AGRADECIMIENTOS En primer lugar quiero agradecer a Dios por permitirme conocer las personas indicadas para el crecimiento y desarrollo personal y profesional. A mi familia por apoyarme en las decisiones que he tomado durante mi vida y carrera universitaria. A Mireya Ávila por su valioso cariño, apoyo y colaboración incondicional durante el desarrollo de este trabajo.

De igual manera, a la facultad de Diseño y Producción Grafica de la Corporación Universitaria Unitec por su formación académica. A la docente Catalina Herrera Sanabria, tutora de esta tesis por las recomendaciones dadas y la disposición para llevar a feliz termino este trabajo.

A SIG - Sistemas Integrados de Gestión, en especial a Leonardo Daza Ortega, consultor en tecnología informática, por compartir su valioso conocimiento y experiencia y permitir que éste trabajo se constituya en un espacio de mejoramiento de sus procesos.

A Adriana Cruz, Tecnologa en Diseño y Produccion gráfica, por su amistad y apoyo incondicional en la produccion de este trabajo de investigación.

INDICE

6

EL ESTUDIANTE DE DISEÑO GRÁFICO EN INTERNET

7 8 9 12 13 13 13 16 18 20 23 24 26 27 28 29 31 31 34 34 38 44 44 45 46 49 50 50 51 53 56 59 63 66 67 68 75

INDICE

INTRODUCCIÓN PROBLEMA ALCANCE 1. EL ESTUDIANTE DE DISEÑO GRÁFICO EN INTERNET 1.1 Definición de Sitios Web 1.2 Proceso de Producción 1.2.1 Antes de empezar 1.2.2 Planificación 1.2.2.1 Definición y planificación del sitio 1.2.2.2 Arquitectura de la información 1.2.2.3 Bosquejo del sitio 1.2.2.4 Construcción 1.2.2.5 Estudios de mercado – Marketing del sitio 1.2.2.5.1 Posicionamiento web 1.2.2.5.2 eBusiness 1.2.2.6 Rastreo, evaluación y mantenimiento 1.3 Diseño del sitio 1.3.1 Conseguir que las páginas web sean autónomas 1.4 Diseño de la interfaz 1.4.1 Diseño centrado en el usuario 1.4.2 Accesibilidad 1.4.3 Distintas plataformas 1.5 GRAFICOS WEB 1.5.1 LOS GRÁFICOS Y EL ANCHO DE BANDA 1.5.2 FORMATOS DE ARCHIVOS GRÁFICOS 1.6 MULTIMEDIA 1.6.1 AUDIO 1.6.2 IMÁGENES Y VIDEO 1.6.3 ELEMENTOS DE ORGANIZACIÓN Y PROCESAMIENTO 1.6.4 DIFUSIÓN 1.7 SERVICIOS EMERGENTES 1.7.1 WIDGETS 1.7.2 FUENTES DE ACTUALIZACIÓN RESULTADOS Y DISCUSIÓN CONCLUSIONES GLOSARIO BIBLIOGRAFÍA

INTRODUCCIÓN

INTRODUCCIÓN Este trabajo está encaminado a la presentación y socialización de procesos que le ayudan y aportan al estudiante de diseño gráfico en el desarrollo de piezas digitales presentadas sobre Internet como un medio de comunicación.

Uno de los mayores retos de este trabajo es que el estudiante de diseño gráfico vea en la investigación un apoyo o una herramienta de trabajo para ser utilizada en los procesos de producción y publicación de las piezas gráficas utilizando debidamente la información, visualizando el Internet como un valor agregado en su trabajo diario.

El Internet como medio y herramienta de aplicación se encuentra en constante evolución y es responsabilidad del estudiante de diseño gráfico el conocer y adaptarse a estas nuevas tendencias para poder aplicarlas en el desarrollo de sus trabajos.

EL ESTUDIANTE DE DISEÑO GRÁFICO EN INTERNET

7

PROBLEMA

PROBLEMA

El fenómeno del Internet ha alterado la forma de vida de millones de personas que hoy en día utilizan la red en diferentes actividades de su vida cotidiana, uno de los ejemplos más claros es el correo electrónico, una de las aplicaciones más utilizadas y de una gran utilidad para la comunicación entre amigos, investigadores, clientes y colegas.

8

Sin embargo hace falta tener la claridad del alcance que se puede obtener a través de las valiosas herramientas que el Internet ofrece, el servicio al que todo usuario puede acceder, buscar información en bibliotecas virtuales, universidades, centros de investigación o en páginas desarrolladas por personas especializadas o aficionadas al tema.

Existen otros servicios, como el utilizado para la transferencia de archivos, llamado FTP (File Transfer Protocol). Este está dirigido a quienes necesitan enviar grandes volúmenes de información a lugares distantes y que demandan seguridad y confiabilidad. Otro servicio es el de terminal virtual con el cual se pueden realizar tareas desde terminales remotas como si físicamente se estuviera trabajando en el equipo al cual se conecta, entre otros.

Una de las profesiones más beneficiadas por este fenómeno en la del diseño grafico, ya que la comunicación que se puede desarrollar tiene ventajas competitivas de tiempo, metodologías de presentación, alcance y diferentes formas de transmisión de información que por otros medios sería casi imposible de aplicar.

El problema que presento es que muchos Diseñadores o estudiantes de diseño no tiene claro el alcance real de las herramientas que el internet ofrece y mucho menos cuando aparecen conceptos tales como Web 2.0, presentado en esta investigación.

Por tal motivo este trabajo de investigación ofrece una guía práctica donde se presentan ejemplos y aplicaciones de herramientas basadas en Internet para la presentación y gestión de sus trabajos y adicionalmente los procedimientos que se deben tener en cuenta para la creación de páginas Web y multimedias.

Para plantear este problema realice una investigación donde aplique una encuesta en una muestra de estudiantes de Diseño y Producción Gráfica, los resultados evidenciaron la falta de conocimientos sobre el tema de herramientas en la Web, el internet y la multimedia, por tal motivo el planteamiento que encontraran en la monografía de la presente tesis.

EL ESTUDIANTE DE DISEÑO GRÁFICO EN INTERNET

ALCANCE

ALCANCE

Este trabajo de investigación hará énfasis desde la recolección de información necesaria para la estructuración de contenido, la creación del sitio Web y multimedia hasta la publicación en Internet. De esta forma se plantea una solución consistente para el estudiante de diseño gráfico en el proceso de producción de piezas digitales.

EL ESTUDIANTE DE DISEÑO GRÁFICO EN INTERNET

9

EL ESTUDIANTE DE DISEﾃ前 GRﾃ：ICO EN INTERNET

1.1 Definición Primero que todo debemos definir la palabra Red aplicada al diseño gráfico. Cuando las cosas cambian a un ritmo tan acelerado, el proceso de adaptación es difícil, pues en poco tiempo hemos de entender qué es lo que tenemos entre manos, y actualizar constantemente nuestros puntos de vista al respecto. Pero si la relación de la gente ante la Red ha cambiado tan rápidamente es precisamente porque muy pocos entendieron desde un principio lo que era en realidad. De hecho, la mayoría de nosotros, los estudiantes de diseño gráfico, tuvimos el tiempo suficiente para pensar cómo la Red podía sernos útil, ni para plantearse lo importante que era poseer unos principios básicos de diseño para hacer efectiva esa utilidad.

La Red ha evolucionado pasando de un extremo al otro. Al principio, era básicamente un conjunto de información entrelazada; en el mejor de los casos, su apariencia visual era fortuita. Las páginas web se elaboraban de forma tosca, y los “sitios” simplemente acumulaban documentos hiperenlazados, sin apenas estructura o consistencia entre ellos. Luego llegaron los estudiantes de diseño gráfico y le dieron una imagen atractiva, idiosincrásica y a menudo desconcertante a esos contenedores de información. La Red se convirtió en un lugar visualmente más atractivo, pero muchos usuarios se enfrentaron entonces a nuevos obstáculos: gráficos de gran tamaño, composiciones complejas o codificación no estándar. Cada sitio web se fue tornando distinto, y el usuario tenía que aprender a usarlo, ya que los estudiantes de diseño gráfico no se ajustaban a las convenciones al uso, si que iban más allá del código HTML para conseguir un diseño original y único.

Hoy el diseño web se percibe más como un oficio que como un arte; un oficio donde la función tiene prioridad sobre la forma, y donde lo más importante es el contenido. Los diseños innovadores que se sirven de sofisticados artilugios para la navegación se perciben generalmente como una interferencia entre e usuario y lo que éste está buscando. Y es de esta forma como el diseñador gráfico ha tomado partido en la Red, como un medio de comunicación digital.

1.2 Proceso de Producción El primer paso en la creación de un sitio web es definir los objetivos. Sin una definición clara de los propósitos, el proyecto empezará a divagar, o puede que incluso a provocar un rendimiento decreciente, alejándose de las intenciones iniciales.

Una cuidadosa planificación y un claro juicio de las finalidades son las claves de éxito en la construcción de cualquier pieza digital, tal como lo es un sitio web, especialmente si uno está siendo parte del equipo de trabajo.

1.2.1 Antes de empezar Un grupo de personas desarrolla un sitio web para satisfacer las necesidades de otro grupo de personas. Lamentablemente, en demasiadas ocasiones los proyectos web tienden a tratarse exclusivamente como un “problema tecnológico” y, desde un principio, se ven más afectados por las preferencias hacia determinadas técnicas web o plug-ins adaptadores varios para navegadores (Flash, medios digitales, XML, bases de

EL ESTUDIANTE DE DISEÑO GRÁFICO EN INTERNET

13

datos, etc.), que por las verdaderas necesidades del usuario o del negocio. Para crear un sitio web sólido se necesita contar con expertos en contenido, escritores, arquitectos de la información, diseñadores gráficos, expertos en tecnología y un productor o jefe de equipo responsable de supervisar el proyecto hasta su conclusión. Si el resultado es acertado, deberá ser verdaderamente útil al público al que va dirigido, y satisfacer sus necesidades y expectativas sin que su uso sea demasiado difícil.

Lo primero que debemos conocer cuando se quiere construir un sitio web es la misión y visión del mismo. Los autores Rosenfeld y Morville proponen el siguiente método para el diseño y elaboración de sitios Web. Este propone los siguientes pasos: 1. Las investigaciones 2. El diseño conceptual 3. El de producción y operación

La Investigación: En este paso se determina la audiencia, las metas que se pretenden lograr con el sitio, se determinan las necesidades de los usuarios, principales características de los posibles usuarios, se identifica el contenido y las necesidades funcionales del mismo que garanticen de manera eficaz y eficiente su diseño y construcción.

Diseño Conceptual: Aquí se presentan los posibles es-

quemas de organización, considerando los escenarios, el esquema general de la página y los bocetos de diseño.

La Producción: Se crean los planos detallados de cada página y se comienza a incorporar su contenido. Al final de este proceso se realizan las pruebas y revisiones con miras a publicar el sitio.

14

Otra metodología es la propuesta por Jonh Shiple Squishy: Este método propone la definición de los objetivos, de la experiencia del usuario, el contenido del sitio, la estructura y por último el diseño visual.

Cuando uno desarrolla estos pasos construye una plantilla que es muy útil en la construcción del sitio, esta consta de los elementos siguientes (Shiple Squishy, John. 2000): 1. Metas.

2. Experiencia de los usuarios.

• Definición de las audiencias.

• Panoramas.

• Resumen del análisis competitivo.

3. Contenido del sitio.

• Agrupado y etiquetado de los contenidos.

• Requisitos funcionales.

4. Estructura del sitio.

• Listado de la estructura del sitio.

• Modelos arquitectónicos.

• Sistemas de navegaciones globales y locales.

5. Diseño visual.

• Rejillas de disposición.

• Bosquejos de diseño.

• Maquetas de la página.

• Prototipo.

Con el objetivo cumplir con la percepción de calidad del usuario y lograr un alto grado de satisfacción en los mismos, el equipo de desarrollo Web del Joven Club de Computación y Electrónica de Florencia decidió utilizar para el diseño de su portal una combinación de ambas metodologías pues a su juicio ambos tocan aspectos vitales a la hora de construir un sitio web. Por lo que la metodología que proponemos es la siguiente: 1. Definir los siguientes aspectos del portal: • Misión • Visión/Función 2. Investigación sobre la audiencia: • Meta • Definir audiencia • Caracterización de la audiencia.(nivel educacional, necesidades, gustos, intereses y preferencias)

EL ESTUDIANTE DE DISEÑO GRÁFICO EN INTERNET

3.

4.

5.

6.

7.

Disposición funcional Esquema de la disposición del portal Contenido del portal Estructura general del portal Diseño de los prototipos: • Rejillas de disposición • Bosquejos de diseño • Maqueta de la página • Prototipo 8. Validación: • Autoría • Adecuación • Comunicación • Propósito y audiencia • Actualidad de los contenidos • Navegación y recuperación

dos de experiencia e intereses de los usuarios. Por ejemplo, si el objetivo de la web es comunicar información corporativa interna, documentos de recursos humanos u otro tipo de información publicada con anterioridad en papel, su público irá desde aquellos que visiten el lugar muchas veces al día hasta aquellos que sólo accedan a él ocasionalmente.

Recuerde que el equipo de desarrollo de un proyecto web deberá actuar siempre como un diligente defensor del usuario y sus necesidades. Los expertos de su equipo pueden mostrarse escépticos en este sentido: todo esto está muy bien, pero ¿puede llevarse a cabo ante las presiones de la dirección, las limitaciones del presupuesto o los intereses divergentes de las distintas partes implicadas? Claro que se puede, porque no se tiene otra opción si se quiere que el proyecto tenga éxito. Pero si sólo escucha las opiniones del equipo directivo, mantiene el proceso herméticamente cerrado en el marco del equipo de trabajo y desarrolla el proyecto en función de lo que cree más conveniente para unos usuarios imaginarios que ni siquiera conoce, prepárese para un fracaso seguro. Para que esto no suceda, involucre desde el principio a usuarios reales, escuche y responda a lo que le comentan, pruebe los diseños con ellos y haga que el sitio sea fácil de usar; sólo así el proyecto tendrá éxito.

Un tema que no de debe dejar de lado antes de la planeación es el Inventario de contenidos. Cuando se tenga una idea aproximada de los fines y la estructura general de la web, se pueden empezar a evaluar los contenidos que serían necesarios para conseguir los objetivos. Confeccionar un inventario o base de datos de los contenidos, obligará a realizar un examen atento de los recursos que ya existen y un detallado perfil de los que son necesarios. Cuando se sepa dónde faltan contenidos, se podrán concentrar los esfuerzos en solventar esas deficiencias y así evitar perder tiempo en áreas con recursos ya listos para utilizar. Una visión clara de las verdaderas necesidades también ayudará a desarrollar un presupuesto y un calendario realistas para el proyecto. En cualquier proyecto de sitio web, el desarrollo de los contenidos es probablemente la tarea más ardua, y la que más tiempo requiere. Iniciarla pronto y con una buena planificación evitará encontrarse más tarde con un sitio web muy bien estructurado, pero vacío.

Conozca a su público. El siguiente paso es identificar

a los usuarios potenciales del sitio web para poder estructurar el diseño en función de sus expectativas y necesidades.

Los conocimientos, procedencia, intereses y necesidades de los usuarios cambiarán dependiendo de si es un usuario ocasional o nuevo, que requiere una presentación cuidadosa y estructurada, o de si se trata de un usuario experto, al que le desagradará cualquier intento de paternalismo o simplemente cualquier retraso en el acceso a la información. Un sistema bien diseñado debería ser capaz de acomodar distintos graEL ESTUDIANTE DE DISEÑO GRÁFICO EN INTERNET

15

1.2.2 Planificación Aquí vamos a tocar un punto realmente importante para el desarrollo exitoso de un sitio, El desarrollo de las especificaciones del sitio. Las especificaciones son un conciso enunciado de los objetivos, los valores y las principales intenciones del sitio por parte del equipo de planificación, que pautará todos los procesos del desarrollo. Diseñar un sitio web de gran envergadura supone una gran inversión de tiempo y dinero. Cuando uno está inmerso en la cotidianeidad del proceso de trabajo, puede resultar extremadamente fácil olvidarse de a qué responde lo que se está haciendo en ese momento, perder de vista las prioridades originales y no saber si las decisiones concretas que se están tomando día a día se ajustan a los objetivos y aspiraciones globales. Unas especificaciones del sitio bien redactadas son una poderosa herramienta para valorar la efectividad de los esfuerzos que se estén llevando a cabo. Proporcionan al equipo de trabajo una especie de brújula que permite en todo momento que el proceso de desarrollo se dirija a los objetivos últimos por los que se construye el sitio. Por tanto, se convierten rápidamente en un punto de referencia cotidiano que permite solventar cualquier disputa, juzgar la utilidad potencial de las ideas que van emergiendo, cuantificar el progreso y conducir al equipo de trabajo en la dirección correcta.

Unas buenas especificaciones del sitio deberían definir como mínimo el alcance de los contenidos, el presupuesto, el calendario y los aspectos más técnicos del sitio web. Cuanto más concisas y precisas sean, mejor. Generalmente consisten en un esquema o una enumeración de los aspectos técnicos y de diseño más importantes planificados. Así, las especificaciones del sitio deberían definir los objetivos desde la fase inicial de planificación y también la estructura del sitio:

Estrategias y objetivos

¿Cuál es el propósito de la organización? ¿De qué modo la construcción de un sitio web apoyará este propósito? ¿Cuáles son los dos o tres objetivos más importantes del sitio? ¿Cuál es el público al que va destinado el sitio web principalmente? ¿Qué se desea que piense o haga el público tras haber visitado el sitio? ¿Qué estrategias en Internet se utilizarán para alcanzar estos objetivos? ¿Cómo se medirá el éxito del sitio web? ¿Cómo se realizará un mantenimiento una vez confeccionado el sitio?

Temas de producción ¿Cuántas páginas va a contener el sitio? ¿Cuál es el máximo aceptable

en función del presupuesto acordado?

¿Qué tipo de requisitos técnicos o funcionales especiales se necesitan? ¿Cuál es el presupuesto para el sitio? ¿Cuál es el calendario de producción, incluyendo las entregas de las

distintas fases intermedias?

¿Quiénes son las personas y proveedores que formarán parte del equipo

de desarrollo del sitio? ¿Cuáles son sus responsabilidades?

16

EL ESTUDIANTE DE DISEÑO GRÁFICO EN INTERNET

Éstas son preguntas importantes y conceptos fundamentales que, a menudo, los comités encargados desestiman en sus prisas por empezar lo más rápidamente posible el “trabajo real” de diseñar y construir una web. Sin embargo, si no se tiene clara la respuesta a estas preguntas, el trabajo invertido en el diseño y la producción puede resulta inútil.

Todo proyecto de un sitio web complejo supone unos retos particulares, pero el proceso de desarrollo sigue generalmente estas seis grandes fases: 1. Definición y planificación del sitio 2. Arquitectura de la información 3. Bosquejo del sitio 4. Construcción 5. Estudios de mercado – Marketing 6. Rastreo, evaluación y mantenimiento

Las anteriores fases mencionadas se describirán en siguientes numerales.

Para cualquier organización, desarrollar un sitio web de gran envergadura es un proceso de importantes implicaciones a nivel presupuestario, de personal y relaciones públicas, tanto en su fase de desarrollo como mucho después de su publicación en la Red. Demasiadas webs empiezan como un trabajo aislado de un grupo de profesionales de la organización sin que se hayan considerado en profundidad los objetivos del sitio web dentro de la misión general de la empresa. El resultado de una escasa planificación suele ser un "sitio huérfano", falto de recursos y de atención.

Si analiza el proceso de desarrollo esbozado abajo, percibirá que la construcción final de cada página del sitio web es una de las últimas fases en un proyecto bien diseñado. Considere cada uno de los pasos que forman parte del proceso, y sus implicaciones en las especificaciones del sitio que está desarrollando. Piense antes de actuar y asegúrese de que tiene el respaldo de la organización, el presupuesto y los recursos humanos necesarios para convertir el proyecto en un éxito.

EL ESTUDIANTE DE DISEÑO GRÁFICO EN INTERNET

17

1.2.2.1 Definición y planificación del sitio En este estadio preliminar definiremos los objetivos y las metas que se pretenden alcanzar con el sitio web, y empezaremos a recoger y analizar la información necesaria para justifica el presupuesto y los recursos requeridos. Aquí también definiremos el alcance de los contenidos, la funcionalidad interactiva y el apoyo tecnológico necesarios, y la amplitud y profundidad de los recursos informativos que se precisan para llenar la web y satisfacer las expectativas de los usuarios. Si para la producción del sitio web se va a contratar a una empresa externa, se deberán seleccionar varias empresas de diseño web.

Lo ideal sería que los diseñadores gráficos de su sitio web se introdujeran lo antes posible en el proceso de planificación.

Lista de puntos para la producción No todos los sitios necesitan tener en cuenta todos los puntos que siguen. Los creadores de un sitio web en una gran empresa por lo general contarán con el apoyo de un equipo informático interno. Si, por el contrario, usted trabaja como particular o en una pequeña empresa, deberá contactar con algunos proveedores de servicios de diseño y tecnología para crear un sitio web con contenidos sustanciosos, o un pequeño sitio de comercio electrónico.

Tecnología ¿Qué navegadores y sistemas operativos podrá

Producción ¿Estará el equipo de producción compuesto por

personal de la propia empresa, se contratará a un equipo externo, o será una mezcla de ambos? ¿Quién dirigirá el proyecto? ¿Quiénes son los principales expertos en contenido? ¿Quién negociará con las empresas externas contratadas? ¿Quién se encargará del mantenimiento a largo plazo, en calidad de editor web jefe?

18

EL ESTUDIANTE DE DISEÑO GRÁFICO EN INTERNET

usar el sitio?

• Windows, Macintosh, Unix - Linux.

• Netscape Navigator, Internet Explorer, Firefox, Opera, etc. Este dato es importante debido a la compresión del código que ofrece cada navegador, pues sus librerías Javascript y CSS varían dependiendo de su versión. Un claro ejemplo se puede encontrar al momento de realizar un sitio web para su visualización por medio de dispositivos móviles.

Ancho de banda del usuario medio • ¿Usuario interno o mayoritariamente usuarios externos?

• Conexiones de velocidad media ISDN / ADSL típicas de hogares de nivel medio-alto. ¿Se requerirá HTML Dinámico (Hipertext Markup Language) y otras opciones avanzadas?

• Javascript.

• Applets de Java.

• Hojas de estilo CSS. • Plug’ins o adaptadores de terceros.

• Herramientas especiales para la seguridad y confidencialidad.

Contacto del usuario con el personal de apoyo • A través del correo electrónico.

• Chats, foros, blogs, mostradores de ayuda.

Requisitos para la base de datos • ¿Se requieren Log-ins (usuario + contraseña) para acceder a ciertas zonas del sitio?

• ¿Se utilizarán encuestas?

• ¿Se necesitarán motores de búsqueda de base de datos?

Contenidos audiovisuales • ¿Producciones de audio o vídeo?

Servidor web ¿Servidor web interno o contratación de un Proveedor de Servicios de Internet (ISP) externo?

• Nombres de dominio originales disponibles (múltiples portadas).

• Limitaciones en espacio de disco o tráfico, o costes añadidos.

• ¿Capacidad adecuada para responder a la demanda de tráfico?

• ¿Mantenimiento y apoyo técnico las veinticuatro horas del día, los siete días de la semana?

• ¿Estadísticas de visitantes y de tráfico de usuarios?

• Análisis de registros del servidor, ¿internos o subcontratados?

• ¿Son los motores de búsqueda adecuados a los contenidos?

• ¿Apoyo técnico para la programación, y bases de datos • ¿Coordinación y apoyo técnico de bases de datos con personal de la propia empresa?

Presupuesto Salarios y beneficios del personal de desarrollo

contratado en la fase

inicial del proyecto, y del personal editorial y de

mantenimiento contratado a largo plazo.

Hardware y software para los miembros del equipo interno.

Formación del personal en el uso de la Red, bases de datos, estudios de mercado web y diseño en Internet.

Honorarios de subcontratación.

• Desarrollo y diseño del sitio web.

• Apoyo y consultoría técnica.

• Desarrollo de bases de datos.

• Marketing para la web.

Personal de apoyo a largo plazo.

• Editor o Web master.

Apoyo técnico del servidor a medio y largo plazo.

Mantenimiento y apoyo de las bases de datos.

Desarrollo de nuevos contenidos y actualizaciones.

EL ESTUDIANTE DE DISEÑO GRÁFICO EN INTERNET

19

Para garantizar la calidad del contenido del sitio, lo más importante es el designar a un editor del sitio. Un sitio web que es “responsabilidad de todos” puede fácilmente convertirse en un sitio huérfano. La planificación del mantenimiento debería especificar quién es el responsable de los contenidos de cada página. Además, para asegurar unas normas de estilo editorial, de diseño gráfico y de gestión consistentes, también se necesitará a una persona que actúe como editor general del sitio web. Las tareas del editor del sitio variarán en función de cómo se decida llevar a cabo el mantenimiento del sitio. Algunos editores se encargan de todo el trabajo de renovación de los contenidos del sitio, liberando a sus compañeros de la necesidad de tratar directamente con la edición de páginas web. Otros coordinan y editan el trabajo de muchos colaboradores que trabajan directamente en las páginas. Si las personas que colaboran en el mantenimiento del sitio son muchas, el editor puede decidir revisar las páginas una vez hayan sido creadas y publicadas en el servidor para así evitar un parón en el proceso de comunicación. De todas formas, en las páginas de perfil público y con contenidos de alta calidad, el editor del sitio debería revisar todas las páginas antes de que se hagan públicas. Además de garantizar la calidad editorial, un buen editor del sitio debe también asegurarse de que el contenido que se presenta refleja la política interna de la empresa, es consistente con las normativas locales y no contiene material que pueda violar las leyes de propiedad intelectual. Mucha gente que publica en sus webs imágenes, historietas gráficas, archivos de música o material escrito copiado de otros sitios, no piensa en los riesgos legales a los que puede enfrentarse por usar ilegalmente material con una propiedad intelectual definida. A menudo, el editor del sitio puede evitar a una institución un costoso pleito legal por el uso inadecuado de material protegido y orientar el desarrollo del material propio del cliente.

1.2.2.2 Arquitectura de la información En esta etapa se deberán detallar tanto la organización como los contenidos del sitio web. El equipo deberá inventariar los contenidos existentes, definir qué nuevos contenidos se necesitan y concretar la organización del sitio.

Una vez se haya esbozado la arquitectura / estructura de los contenidos, se deberán construir pequeños prototipos de partes de la web para poder probar cómo se adapta el diseño a la navegación. Estos prototipos parciales son útiles en dos sentidos. En primer lugar, son la mejor manera de probar la navegación del sitio y desarrollar la interfaz de usuario. Un prototipo debería tener las suficientes páginas para poder comprobar con precisión cómo se desplaza uno desde los menús a las páginas con contenidos y viceversa. En segundo lugar, la creación de prototipos permite a los estudiantes de diseño gráfico determinar la relación entre la apariencia del sitio y el papel de la interfaz de navegación en el diseño de la información. La clave para un buen prototipo debe ser desde el principio la flexibilidad: no debería elaborarse demasiado, pues el equipo podría quedarse estancado en un diseño, en lugar de investigar otras posibilidades.

20

EL ESTUDIANTE DE DISEÑO GRÁFICO EN INTERNET

Estructura básica de la información. Un sitio web se construye alrededor de unos temas estructurales básicos. Esta arquitectura elemental será la que gobernará la interfaz de navegación de la web, y la que moldeará los esquemas mentales del usuario sobre cómo se organiza la información. Esencialmente, existen tres formas de estructurar un sitio web: en secuencias, jerárquicamente y en forma de telaraña (web).

Secuencias La forma más sencilla de organizar la información es colocarla secuencialmente. Un orden secuencial puede darse a partir de una cronología, una serie lógica de temas que vaya de lo más general a lo más específico o un orden alfabético (como en los índices, enciclopedias o glosarios). Una secuencia lineal es la organización más adecuada, por ejemplo, para sitios de formación o educativos, o para todos aquellos en los que el usuario deba pasar por una serie de contenidos y los enlaces únicamente guíen este recorrido lineal:

Las webs más complejas pueden también estar organizadas en forma de secuencias lógicas, pero cada una de las páginas de la secuencia principal puede tener enlaces hacia una o más páginas paralelas donde se presenten observaciones e información colateral o de otras webs:

Jerarquías. Jerarquizar la información es la mejor manera

de organizar bloques de contenidos complejos. Este tipo de esquemas encaja perfectamente en la organización de un sitio web, ya que generalmente éste siempre se articula alrededor de una página principal o de inicio. La mayoría de los usuarios se sienten cómodos con este tipo de estructuras, pues son muy comunes en instituciones y empresas. Una estructura jerárquica también impone al constructor de la web una eficaz disciplina en su análisis de los contenidos, ya que las jerarquías sólo funcionan si el material está bien organizado.

EL ESTUDIANTE DE DISEÑO GRÁFICO EN INTERNET

21

Telaraña (web). Las estructuras en forma de telaraña conllevan pocas restricciones a la hora de organizar la información.

En este tipo de estructuras el fin es muchas veces imitar el pensamiento asociativo y el flujo libre de las ideas, permitiendo al usuario seguir sus propios intereses en un patrón único, heurístico e idiosincrásico. Este patrón se produce a partir de una gran densidad de enlaces, tanto hacia la información interna como hacia la de otras webs. A pesar de utilizar al máximo la capacidad de vinculación y asociación de la Red, este tipo de estructuras puede generar confusión. Irónicamente, tal vez sean estos esquemas de organización asociativa los menos prácticos para un sitio web, pues dificultan al usuario la predicción y comprensión del material. Las estructuras en telaraña funcionan bien en webs pequeñas donde predominan las listas de enlaces, y en sitios web dirigidos a usuarios expertos o muy instruidos, que busquen ampliar sus conocimientos de una materia más que su comprensión básica.

El resultado o producto contratado al final de esta fase podría incluir: Especificaciones claras y precisas de diseño.

Descripción detallada de los contenidos.

• Mapas del sitio, imágenes en miniatura, resúmenes, tablas de contenidos.

Especificaciones detalladas de los recursos técnicos necesarios.

• Navegadores aceptados.

• Velocidad de conexión aceptada.

• Servidor web y recursos del servidor.

Propuestas de la tecnología y programación necesarias para realizar partes específicas de la web.

Un calendario de implementación del diseño y su construcción.

Uno o varios prototipos de varias páginas.

Varios bocetos de diseño gráfico y de interfaces.

22

EL ESTUDIANTE DE DISEÑO GRÁFICO EN INTERNET

1.2.2.3 Bosquejo del sitio En esta fase del proyecto el sitio web empieza a tener una imagen clara, a medida que se crea y se aprueba la retícula (gríd) de la página, su diseño y las especificaciones generales del diseño gráfico. Es el momento de encargar o generar las ilustraciones, las fotografías y demás materiales gráficos y audiovisuales necesarios. También es el momento de investigar, escribir, organizar, ensamblar y editar los contenidos en formato de texto. En este momento, todos los elementos de programación, diseño de bases de datos y entrada de datos, deberían estar ya concretados y en marcha. El fin es producir todos los componentes de contenido y de programación funcional y dejarlos listos para la última fase de la producción: la construcción de cada una de las páginas web.

Detallada organización y ensamblaje de los componentes de contenido Texto, editado y corregido.

Especificaciones de diseño gráfico para cada tipo de página.

• Gráficos acabados de la interfaz para las páginas plantilla. Elementos gráficos

del encabezamiento y pie de .página, así como logotipos, botones y fondos.

Composiciones en detalle de las páginas o ejemplos acabados de las principales

páginas.

• Manual de estilo gráfico para sitios complejos.

Diseño de la interfaz y plantillas acabadas de páginas maestras.

• Páginas plantilla en HTML acabadas.

Ilustraciones.

Fotografía.

Componentes lógicos y funcionales Tablas y programación de bases de datos, prototipos de interacción finalizados.

Motores de búsqueda diseñados y comprobados.

Debemos contemplar las Plantillas, tanto si desarrolla el sitio web personalmente como si contrata a un equipo profesional, deberían generarse páginas plantilla (témplales) para su nuevo sitio web. Es mucho más sencillo añadir páginas si se parte de una página que ya contiene los elementos gráficos y de navegación básicos posicionados correctamente. Si además se comparte el proceso de desarrollo con más personas, podrá ofrecer a los miembros del equipo las plantillas junto con las instrucciones para manejar el texto de la página y los gráficos de contenido de acuerdo con las normas del editor. Los paquetes de software de creación web más populares, como Dreamweaver de Adobe, ofrecen útiles plantillas y una gran variedad de bibliotecas de HTML y gráficos estándar reutilizables que facilitan la creación de nuevas páginas y el mantenimiento del sitio.

EL ESTUDIANTE DE DISEÑO GRÁFICO EN INTERNET

23

Accesibilidad. Muchas organizaciones ofrecen, por norma, igualdad de acceso a todos los usuarios a sus páginas web. Por

tanto, es de extrema importancia validar el diseño, las plantillas y el contenido de su web durante todo el proceso de desarrollo para garantizar que sean accesibles a todo tipo de usuarios. Vale la pena anotar que es útil comprobar los diseños cada vez que se hagan cambios importantes, para evitar posibles fallos cuya solución implicaría un gran consumo de tiempo y recursos.

1.2.2.4 Construcción Es en esta fase avanzada del proyecto cuando se construirá la parte más importante de las páginas del sitio y se llenarán con los contenidos. Si espera a tener una arquitectura detallada del sitio, los elementos de contenido a punto y unas especificaciones precisas del diseño de las páginas, minimizará los posibles problemas de contenido y evitará el derroche de energía que supone precipitarse en la construcción de las páginas. Por supuesto, a medida que el prototipo se transforma en la versión final definitiva, iremos aprendiendo nuevos aspectos del diseño en conjunto. Hemos de estar preparados para refinar el diseño a medida que el sitio web crece, y también para descubrir cuáles son sus puntos débiles o reconocer las oportunidades para mejorar tanto la navegación como los contenidos.

Una vez construido el sitio, con todas las páginas acabadas y los componentes de programación y bases de datos enlazados, estaremos preparados para lanzar y probar una versión beta. En primer lugar, deben hacer la prueba usuarios externos al equipo, que estén dispuestos a aportar información crítica acerca de los fallos de programación y las erratas en el texto, o a evaluar el diseño y la efectividad del sitio. Inevitablemente, un usuario nuevo percibirá aspectos que han pasado inadvertidos al equipo. Sólo cuando el sitio web haya sido probado y evaluado en profundidad, se puede hacer publicidad de su dirección URL a una audiencia más amplia.

24

EL ESTUDIANTE DE DISEÑO GRÁFICO EN INTERNET

ás típicos

Los resultados m

al de esta fase del contrato al fin

deberían incluir: gar.

ntenidos en su lu

eb, todos los co de las páginas w

una . para todas y cada o ad iz al una versión beta fin a. ra L ad M pa iz T o al nt fin pu H s a ce s, la en ientes enlace n y estructura de n sus correspond co s páginas. y Navegació r ga lu su y enlazados a la ión en r ac ga m lu ra su og pr en s la to Toda bases de da su lugar. ponentes de las m co s lo s s y fotografías en do ne To io

ac

tr us il s, elementos gráfico enidos.

Todos los s de datos. de todos los cont al fin ón ci ión y de las base ec ac rr m co ra y og n pr ió is s. la ev R las bases de dato funcionalidad de de la o de nt a ie m ad ll na ico, etc. ta io de nc Prueba de correo electrón resultados del fu as s st lo oue de sp n re ió o, ac ri fic ri L, códigos de pr o al usua M T oy H ap go de di Prueba y ve os có nt o, ie im idos del siti todos los proced todos los conten ra pa Prueba de d da ri gu archivos de se del sitio.

Creación de les de desarrollo ia er at m s ro ot y gramación

Ejemplo 1

Código descifrable

para su mantenimiento La mayoría de empresas o departamentos comerciales de grandes compañías subcontratan a un equipo de desarrollo web para que diseñe y construya la primera versión del sitio web, que posteriormente se encargarán de mantener ellos mismos, responsabilizándose de la actualización diaria de los contenidos.

Generalmente, el cliente no es consciente de la importancia de entender cómo se ha generado el HTML o los demás códigos que conforman el sitio web, hasta que aforan los problemas más prácticos y cotidianos de su mantenimiento. Aunque para un navegador web la mayoría de códigos HTML son lo mismo, la forma en que éste se ha formateado o la herramienta que ha utilizado quien ha desarrollado la web pueden implicar una enorme diferencia en cómo lo percibe el ojo humano. Considere los dos ejemplos de código siguientes:

<!— INICIO DE LA TABLA DE CALENTADIO—> <table width="50%" border="2" bordercolor="#336699" summary="Investigaciones Humanas 2008"> <tr> <td width="50%" align="center">Límite de entrega</td> </tr> <tr> <td align="center">&nbsp;</td> </tr> <tr width="2%" align="center"> <td>Fechas de las reuniones 2008</td> </tr width="48%"> </table>

Ejemplo 2 <!— INICIO DE LA TABLA DE CALENTADIO—> <table width="50%" border="2" bordercolor="#336699" summary="Investigaciones Humanas 2008"><tr><td width="50%" align="center">Límite de entrega</td></ tr><tr><td align="center">&nbsp;</td></tr><tr width="2%" align="center"><td>Fechas de las reuniones 2008</td></tr width="48%"></table>

EL ESTUDIANTE DE DISEÑO GRÁFICO EN INTERNET

25

A pesar de que los dos ejemplos presentarían el mismo resultado, ¿Cuál de los dos ejemplos considera de más fácil comprensión? Para un navegador web, los dos son equivalentes, pero no cabe duda de que, para el ojo humano, el primer ejemplo es significativamente más fácil de entender que el segundo. Si se contrata a un desarrollador web para la construcción del sitio, es de crucial importancia entender la manera en que éste escribe el código, en qué estado se va a encontrar el código cuando se entregue la versión contratada del trabajo y si el software que ha utilizado es compatible con el que se utilizará para el mantenimiento general del sitio y de sus contenidos tras la entrega. Algunos programas de desarrollo web producen código HTML casi imposible de leer para un humano sin que antes se haya reformateado (con el consecuente incremento de presupuesto). Otros programas

(como Adobe Dreamweaver) escriben el código HTML de forma más clara para todo programador web, lo que supone una gran diferencia si desea cambiar el equipo de desarrollo web, o si se decide a editar usted mismo el HTML directamente para mantener el sitio. Si decide contratar a alguien para que desarrolle un sitio web, es conveniente preguntar de antemano qué herramientas va a utilizar en la escritura del código HTML y otros códigos. Incluso sería interesante que le mostrase ejemplos de código escrito para otros clientes. Observe si inserta comentarios explicativos y divisores para una mejor lectura del código. Y asegúrese que no habrá problemas de compatibilidad con los programas de edición de HTML que se vayan a utilizar posteriormente.

1.2.2.5 Estudios de mercado – Marketing del sitio Su sitio web debería forman parte de todas las campañas y programas de comunicación de la empresa u organización, y la dirección URL debería aparecer en toda la correspondencia y los elementos de marketing que genere.

Si el sitio web está destinado principalmente a un público local, no sólo deberíamos incluir la dirección URL en los principales buscadores como Google, Yahoo! o Infoseek, sino también en lugares donde los empresarios y residentes locales pudieran encontrarla fácilmente. Las bibliotecas locales (y las escuelas, cuando el contenido sea relevante) son espacios importantes a la hora de dar a conocer un sitio web en un área geográfica específica.

También se pueden hacer intercambios publicitarios con negocios afiliados, organizaciones profesionales, publicaciones en papel, televisión y radio, agencias de información locales, inmobiliarias, oficinas de empleo, proveedores de acceso a Internet y directorios locales o páginas amarillas. Por otro lado, en su web pueden figurar acontecimientos escolares locales o actos benéficos sin ánimo de lucro. El espacio que esto ocupa en el servidor es mínimo, e incluir actos sociales importantes en su propio sitio aumentará la presencia local de su web enormemente. Los medios

26

EL ESTUDIANTE DE DISEÑO GRÁFICO EN INTERNET

locales pueden estar interesados en aparecer en su web para llegar a públicos distintos.

La dirección URL de su página principal debería aparecer en:

Facturas y albaranes.

Catálogos y envoltorios.

Tarjetas de respuesta comercial y de garantías.

Publicaciones y material de promoción.

Comunicados de prensa.

Carteles y vallas publicitarias.

Anuncios en papel.

Anuncios en radio y televisión.

Puntos y zonas muy concurridas de la or-

ganización; bibliotecas locales, escuelas o lugares de encuentro apropiados.

Campañas de correo.

Papelería de la empresa.

1.2.2.5.1 Posicionamiento web. En marketing, se define como posicionamiento al lugar que ocupa un producto o servicio

en la mente del consumidor. Esto es, el resultado de una estrategia especialmente diseñada para proyectar la imagen específica de ese producto, servicio, idea, marca… todo ello con relación a la competencia. Pero el posicionamiento web conlleva algunas dificultades añadidas respecto al marketing tradicional, pues ya sabemos que en la red ya no resulta suficiente con tener una página web. Si ésta no se encuentra bien posicionada en los buscadores el tráfico de visitas será muy escaso o irrelevante.

El posicionamiento web es la principal actividad a la que se dedican los especialistas en

SEO. La actividad SEO, siglas en inglés de Search Engine Optimization, optimización para motores de búsqueda, se basa en ajustar la información y estructura de los sitios web para intentar indexar en las primeras posiciones de los resultados de buscadores. Para muchos es una especie de arte, que está apoyado casi siempre en la experiencia y en la intuición. No se trata de una actividad exacta.

Los SEO se guían por resultados e intuición. El problema estriba en saber que es más importante: la calidad de los enlaces, el PageRank del sitio web, o el número de páginas que se encuentran indexadas. Hay variadas opiniones sobre ello.

En el campo de las búsquedas, aunque hay alternativas muy eficaces y profesionales, Google es el rey. Yahoo! y Windows Live Search (MSN), los dos buscadores que le siguen, ocupan porcentajes menores en mercados como Estados Unidos. En USA, Google tiene una cuota de mercado del 60%, mientras que Yahoo! ocupa el segundo puesto con un 20%. En España, Google es aún más hegemónico, con un índice de penetración cercano al 90%. Es decir, de cada 100 personas, 90 eligen a Google como primer y único buscador.

En definitiva, cada píxel de pantalla está muy cotizado, por lo que se debe pensar muy bien a la hora de desarrollar una estrategia en la red. Desde el momento que se plantee la construcción del sitio de tu presencia web, participación en foros, o la estrategia web 2.0, se debe pensar en términos de posicionamiento.

EL ESTUDIANTE DE DISEÑO GRÁFICO EN INTERNET

27

1.2.2.5.2 eBusiness. Cuando oímos el término eBusiness

(eBiz) muchas veces se asocia a comercio electrónico o comercio online; y hay que aclarar que esto no es completamente cierto, ya que la definición se queda corta en lo que se refiere realmente a e-Business.

¿Qué es eBusiness? Técnicamente es ejercer operaciones

o negocios empresariales mediante el uso de las tecnologías de información. Sin embargo, el concepto se aproxima más a la realización de negocios u operaciones empresariales mediante el uso de los servicios basados en Internet, y eso no implica necesariamente el comercio electrónico.

Ahora, si Internet es un recurso de altísimo potencial, ¿cómo podemos hacer para que la empresa u organización lo utilice al máximo y ejerza un eBusiness efectivo?. Primero tenemos que entender la terminología y conceptos más básicos sobre eBusiness.

Podemos categorizar dicha terminología por el tipo de servicio que se ofrece: eCommerce: obvio, cualquier servicio de comer-

cio electrónico basado en la web. Desde una simple tienda online, hasta un marketplace tipo eBay, Adquira o Mercado Libre. eProcurement: son servicios de logística vía web, también entran aquí los servicios de seguimiento y atención de cuentas de clientes. eLearning: educación y capacitación en línea. eSupport: servicios de soporte y servicio al cliente vía web. eMedia: servicios de información y contenidos basados en canales de comunicación por Internet.

Desde un simple blog, portal informativo, TV por IP, todo tipo de difusión de contenidos vía Internet. eBanking: banca por internet. El comercio electrónico no se concibe sin el apoyo de la banca online. Todas las validaciones de tarjetas, depósitos y pagos vía electrónica mediante la web son eBanking.

28

eSocial: aquí entrarían todas las redes sociales.

Consideremos que dichas redes son un repositorio enorme y estructurado de clientes y mercado potencial.

O por las partes que se involucran en el negocio electrónico: B2B: business to business (de empresa a empresa),

es cuando la operación es realizada por dos entidades que se ofrecen servicios y/o productos de forma bilateral.

B2C: business to customer (de empresa a cliente), cuando la empresa atiende a un cliente directo.

C2C: customer to customer (de cliente a cliente), cuando dos clientes de un tercero (empresa) realizan operaciones independientes a su proveedor principal.

M2C: marketplace to customer (de mercado a cliente), cuando un mercado compuesto de varias empresas atiende a un cliente.

Y así, podemos encontrar o deducir otras combinaciones como: M2M, B2M, etc.

Al momento hemos descrito toda esta terminología del eBusiness para aquellos que están en sus primeros pasos en los negocios por internet o bien ya tienen cierta presencia pero desconocen sus posibilidades, porque ejercer eBusiness no solo es vender y poner una tienda online.

EL ESTUDIANTE DE DISEÑO GRÁFICO EN INTERNET

1.2.2.6 Rastreo, evaluación y mantenimiento Con el software de cualquier servidor web se puede generar automáticamente una gran cantidad de información acerca de los visitantes de su web. Incluso los registros web más sencillos pueden almacenar la cantidad de visitantes que acceden a ella en un tiempo determinado, a cuántas páginas acceden y otras muchas variables. Para un sitio web, el análisis de estos registros puede proporcionar datos interesantes acerca de su popularidad: las páginas más visitadas, los navegadores utilizados, etc. De este modo, obtendremos un registro por memorizado para poder evaluar posteriormente el éxito de la web. Más adelante podemos cambiar estas variables registradas según nuestras necesidades e intereses.

Algunos paquetes de software están diseñados específicamente para producir informes de tráfico que se leen de forma sencilla y rápida, y que se complementan con gráficos y tablas para facilitar el análisis de los datos. Como una atención a los clientes, las empresas de hospedaje de sitios web ofrecen gratuitamente informes de tráfico de visitantes de programas de análisis de webs tan populares como WebTrends (Tendencias Web) o el WebAlizer. Antes de contratar un servicio de hospedaje con un proveedor de servicios de Internet o ISP (Internet Service Provider), pregunte si pueden ofrecerle servicios de análisis de tráfico. Si no es así, pregunte si podría tener acceso mensual a los registros (logs) de su cuenta en el servidor. Las versiones básicas de programas de análisis de tráfico como WebTrends cuestan unos trescientos dólares o el WebAlizer sin ningún costo, y pueden ejecutarse desde un ordenador personal si se poseen los accesos del servidor web del ISP o el editor web de su empresa.

EL ESTUDIANTE DE DISEÑO GRÁFICO EN INTERNET

29

El Mantenimiento del sitio web no se debe olvidar una vez se haya publicado con éxito. Los aspectos funcionales y estéticos de una web de gran tamaño requieren una atención continuada y un mantenimiento, especialmente si hay individuos que comparten la responsabilidad de actualizar y revisar los contenidos. Alguien debe responsabilizarse de coordinar y aprobar las nuevas aportaciones de contenido, del mantenimiento de las normas gráficas y editoriales, y de asegurarse de que los enlaces y la programación de todas las páginas siguen funcionando.

En la Red, los enlaces son perecederos, y deberá comprobar periódicamente que los que se dirigen hacia páginas externas a su web siguen funcionando. No deje que la web se quede obsoleta por falta de dedicación y recursos justo cuando está empezando a conseguir público, si desilusiona al usuario, será muy difícil volver a recuperarlo. Sin embargo hoy en día existen recursos RSS que ayudan a alimentar un sitio web de manera automática, pero esto lo veremos más adelante.

Copias de seguridad y archivos. El editor encargado de un sitio web deberá asegurarse de que se realicen regularmente copias de seguridad en un soporte de almacenamiento seguro y estable para evitar que un fallo en el servidor haga desaparecer toda la información del sitio web. La mayoría de servidores web que están a cargo de profesionales de Tecnologías de la Información, y también los proveedores de servicios de webs comerciales, generalmente realizan por defecto estas copias de seguridad una vez al día. Si desconoce cuál es la regularidad con la que se hacen las copias de seguridad en su servidor web, pregunte a su técnico o a su proveedor de servicios web. La principal razón por la cual es necesario disponer de acceso rápido a una copia de seguridad de toda la web es la posibilidad de un error humano. No es extraño copiar un viejo archivo (o una carpeta entera) accidentalmente sobre una versión más reciente de la web, o borrar algo importante por error, como el trabajo de otra persona, al actualizar una web. Una copia de seguridad reciente (idealmente, de no más de veinticuatro horas de antigüedad) puede ser un buen remedio para corregir el error.

Si su sitio web tiene éxito, a medida que evolucione, se convertirá rápidamente en un importante registro del trabajo de su empresa y de sus logros e inclusive una herramienta de comunicación dentro de su empresa. Generalmente, se presta muy poca atención a estos detalles y estamos perdiendo grandes porciones de nuestra historia colectiva, pues son muy pocos los que piensan en conservar archivos permanentes de su sitio web. A menos que su web sea exageradamente grande, el editor puede encargarse de recoger y almacenar archivos periódicamente o solicitar al proveedor de servicios de Internet que realice y aparte regularmente copias de seguridad que puedan almacenarse para su uso a largo plazo. Damos por sentado el "rastro de papel" que dejan nuestras prácticas empresariales convencionales. Pero sin un plan adecuado para la preservación de nuestros trabajos digitales, nuestra historia colectiva puede desaparecer sin dejar huella.

30

EL ESTUDIANTE DE DISEÑO GRÁFICO EN INTERNET

1.3 Diseño del sitio Con respecto al diseño, cada uno de los miembros del equipo de desarrollo de una web aportará distintos objetivos, preferencias y habilidades al proyecto. Una vez el equipo se haya puesto de acuerdo sobre los fines y objetivos del proyecto, es necesario llegar a un consenso sobre las líneas maestras que se utilizarán a la hora de abordar el sitio web.

1.3.1 Conseguir que las páginas web sean autónomas Las páginas web se diferencian de los libros y otros documentos en algo crucial: los enlaces de hipertexto permiten al usuario acceder a una página web sin ningún tipo de preámbulo. Así, una página web deberá tener forzosamente una mayor autonomía que las páginas de un libro convencional. Esto significa que sus encabezamientos y pies de página deberán ser más informativos y elaborados que los de las páginas impresas.

Sería absurdo repetir el copyright, el autor o la fecha de un libro al pie de cada una de las páginas impresas. Pero la mayoría de páginas web requieren esta información, pues puede darse la circunstancia de que ésta sea la única parte que el usuario visite del sitio web. Este carácter necesariamente independiente de cada una de las páginas web no es exclusivo de la Red. La mayoría de los periódicos y revistas repiten la fecha, el volumen y el número de ejemplar en la parte superior o inferior de cada página impresa, porque saben que en muchas ocasiones sus lectores separan artículos concretos o hacen fotocopias de alguna página y necesitarán esa información para poder volver a la fuente original de ese material.

Debido a estas dificultades inherentes a la creación de sitios web fáciles de usar y llenos de complejos contenidos, la mejor estrategia de diseño es la de

aplicar y seguir unos cuantos principios básicos en cada una de las páginas que se generen. Los elementos básicos que deben incluirse en cada documento no son complicados y no tienen nada que ver con la tecnología de Internet. Sería algo parecido a una clase de periodismo: definir el quién, qué, cuándo y dónde.

Quién. ¿Quién está hablando? La pregunta es tan básica y la respuesta se da tantas veces por supuesta, que muchos autores web a menudo pasan por alto la parte más fundamental de la información que un lector necesita para conocer la procedencia de un documento. Facilite siempre a su lector el nombre de quién ha creado la página, sea un autor individual o una organización. El aluvión de sitios web que propagaban material intencionadamente engañoso en las votaciones del estado de Florida durante las elecciones presidenciales de Estados Unidos del año 2000, para confundir al lector, es un claro ejemplo de cómo una "información" de origen desconocido y dudosa autenticidad puede rápidamente ocultar la auténtica discusión.

Qué. Todo documento requiere títulos claros para captar la atención del lector y, por las particularidades de la Red, este elemento editorial tiene una enorme importancia. El título es muchas veces lo primero que los navegadores nos mues-

tran al bajar un documento web. En páginas con muchos gráficos, el título de la página puede ser lo único que el usuario perciba durante algunos segundos mientras se descargan las imágenes.

Además, el título de la página se convertirá en el texto de los “favoritos” del navegador, si el usuario decide añadir la página a su lista de URL favoritas (URL: Universal Resource Locator, Localizador de Recursos Universal, el término formal para las direcciones web en Internet). Un título ambiguo o confuso, o que contenga tecnicismos, no recordará al usuario por qué había guardado la dirección de su página.

Cuándo. El factor tiempo es también

importante para valorar un documento.

Normalmente conocemos la antigüedad de los documentos en papel: los periódicos, las revistas y todo tipo de correspondencia de trabajo siempre van fechados. Es, pues, importante acompañar todo documento web con la fecha de su publicación, y modificarla cuando se actualice. Sobre todo, resulta necesario cuando se trata de documentos web extensos o complejos que se actualizan regularmente, pero en los que la apariencia no cambia tanto como para indicar al usuario ocasional un cambio en los contenidos. Toda la información corporativa, los manuales de personal, la información sobre productos y otros

EL ESTUDIANTE DE DISEÑO GRÁFICO EN INTERNET

31

documentos técnicos entregados como páginas web deberán contener siempre el número de versión o la fecha de actualización.

Incluir la dirección URL de la página principal, al menos en las páginas más importantes del sitio web, es una manera fácil de mantener el vínculo con el origen de la página. Una vez el lector ha guardado la página como archivo de texto o la ha impreso en papel, ese vínculo se puede perder. A pesar de que las versiones recientes de los navegadores web permiten incluir la dirección URL en todo lo que se imprime, mucha gente no activa esas opciones de impresión. Muchos amontonamos páginas impresas de la Red sin poder localizar después su procedencia.

e web deb o t n e m cu

r:

contene

xto al en el te

incluir

la

ién rte tamb e i v n o c e se tivo (qu a m r o f n n). ). eb. título i oritos” tor o institució v a f s de la w “ Un e t s n o l u a t a n ( r e dor ina impo pág del crea actualización. l o menú. as más n d i a más g d á i t p n s la ipa ide az web no c f n ó r n i e i e c r t s a p n o i e La n r a ec er la al me págin fecha d ara hac ncipal, p ce a la i a r o l p n n La i e a m n n i el ca menos u URL de la pág l 90% d e Al o d i n r ó r i r reco direcc La ne habe o p u s s sico entos bá m e l e s esto o.

Incluir l usuari a e l b i s n compre Todo do

32

EL ESTUDIANTE DE DISEÑO GRÁFICO EN INTERNET

EL ESTUDIANTE DE DISEﾃ前 GRﾃ：ICO EN INTERNET

33

1.4 Diseño de la interfaz 1.4.1 Diseño centrado en el usuario La interfaz gráfica de usuario (GUI) se creó para proporcionar al público un control directo sobre sus ordenadores personales. Hoy, el usuario espera de ellos un alto nivel de sofisticación de los diseños, incluyendo las páginas web. El objetivo es satisfacer las necesidades de todo usuario potencial, adaptando la tecnología web a sus expectativas, sin imponerle nunca una interfaz que obstaculice sus propósitos.

Es aquí donde cobra importancia la investigación de las necesidades de su público potencial. Es imposible diseñar para una persona desconocida cuyas, necesidades se ignoran; por ello, es preciso desarrollar ejemplos de marcos: hipotéticos para distintos tipos de usuario que busquen información en su web. El diseño de la página principal, ¿ayudará o impacientará a un usuario con experiencia en la búsqueda de una parte específica de información? Un menú complejo, ¿intimidará a un principiante? Probar los diseños y observar las reacciones de usuarios concretos es la mejor manera de comprobar si los conceptos de diseño utilizados proporcionan lo que realmente esperan de la web.

Ayudas claras a la navegación. La mayor parte de las

interacciones del usuario con la web implican el uso de enlaces de hipertexto para la navegación entre documentos. El principal problema de interfaz en los sitios web es la pérdida del sentido de la orientación dentro de la organización local de la información.

El uso de iconos, gráficos, mapas del sitio o índices y diagramas que señalen consistente y claramente la identidad del sitio darle al usuario la seguridad de que encontrará lo que busca en poco tiempo.

34

El usuario debe poder volver siempre a la página principal y a otros puntos de navegación importantes de la web con facilidad. Estos enlaces básicos deben aparecer en cada una de las páginas y en lugares destacados. Los gráficos tipo botón proporcionarán enlaces de navegación básica y ayudarán a crear la imagen gráfica o corporativa que indica al usuario que se encuentra todavía dentro de las fronteras de un determinado dominio. En el sitio que se ve sobre estas líneas, por ejemplo, la cabecera gráfica aparece en todas y cada una de las páginas que lo componen.

EL ESTUDIANTE DE DISEÑO GRÁFICO EN INTERNET

La barra de botones es eficaz (ofrece muchas posibilidades de elección en poco espacio), predecible (está siempre presente, al principio de cada una de las páginas) y proporciona una identidad gráfica consistente a cada página del sitio web.

Evitar páginas que sean un callejón sin salida Muchas veces las páginas web aparecen sin ningún tipo de presentación: el lector puede enlazar directamente o seguir enlaces hacia otras subsecciones ocultas prácticamente en la jerarquía del sitio web. Tal vez nunca se encuentren con la página principal de su web ni con cualquier otra página de presentación de la misma. Si las páginas de las subsecciones no contienen enlaces hacia la página de inicio, o hacia las páginas de menú de la sección, el usuario se encontrará esencialmente atrapado, sin poder acceder al resto del sitio web: Fuente: www.wecreatelogos.com

Conviene asegurarse de que todas las páginas de un sitio web contienen, como mínimo, un enlace hacia la página de inicio, o mejor aún, un enlace a la página de inicio junto con enlaces a las demás secciones de la web.

Acceso directo a la información. El objetivo

es ofrecer al usuario la información que desea con el mínimo de pasos posibles.

Esto significa que se debe jerarquizar la información de forma eficaz para minimizar los pasos a través de los menús. Los estudios han demostrado que el usuario prefiere menús que presenten un mínimo de entre cinco y siete enlaces, así como unas pocas aunque densas pantallas de menú a muchas capas de menús simplificados.

EL ESTUDIANTE DE DISEÑO GRÁFICO EN INTERNET

35

Interacción y ancho de banda. El usuario no toler-

ará largas esperas. Las investigaciones demuestran que en la mayoría de las tareas que se realizan con el ordenador el umbral de frustración está alrededor de los 10 segundos. mane e d Los diseños de web que no están bien “sintonizados” o el siti ncuentre d a í u e con la velocidad de acceso a la Red del usuario medio e arq real s ginas la jer sólo conseguirán frustrarlo. Si se trabaja con usuarios iseñe l contenido cipales pá e n i e r u p q que navegan por la Red a través de conexiones con s ra de la s o d módem vía telefónica, es absurdo intentar colocar en co un cli itio web. o l ó las páginas grandes gráficos en formato de mapa de s s a ús del n e bits que harían perder la paciencia a cualquier usum de ario medio mientras espera a que los datos bajen a través de la línea de teléfono. Sin embargo, se puede ser mucho más ambicioso en el uso de gráficos y elementos multimedia si se está construyendo un sitio intranet para una empresa o una universidad, donde la mayoría de los usuarios acceden al servidor web a velocidades Ethernet o superiores. Hoy, muchos usuarios acceden a la Red desde su hogar a través de líneas de alta velocidad ADSL (líneas digitales de suscripción asimétrica) o a través de módems para cable. De todas formas, los expertos aseguran que no se podrá contar con un uso generalizado de este tipo de líneas de alta velocidad hasta dentro de cinco años. Por tanto, es conveniente ser moderado en el uso de archivos gráficos para la Red. Incluso los usuarios con conexiones de alta velocidad agradecen un tiempo de descarga corto.

D

Simplicidad y consistencia.

Los usuarios no desean una complejidad innecesaria, especialmente aquellos que se dirigen a la web para obtener una información oportuna y detallada relacionada con su trabajo. Las metáforas de la interfaz deberán ser sencillas, familiares y lógicas; si se necesita una metáfora para el diseño de la información, es mejor escoger alguna que resulte familiar a un lector de documentos, como por ejemplo un libro o una biblioteca. Recurrir a metáforas poco corrientes y altamente "creativas" en la página principal y en la navegación no suele funcionar, pues imponen una interfaz extraña e impredecible que puede desconcertar al usuario.

Fuente: www.amazon.com

La interfaz de usuario para un sitio web debería seguir las convenciones generales de navegación y composición de los principales y más conocidos sitios web, puesto que los usuarios ya están acostumbrados a estas convenciones. Dado que éstos pasan la mayor parte de su tiempo en otras webs distintas a la suya, evite interfaces extrañas si desea atraer a un gran público.

36

EL ESTUDIANTE DE DISEÑO GRÁFICO EN INTERNET

Los mejores diseños de la información son los que ni siquiera se perciben. Un ejemplo paradigmático de diseño de la interfaz es el sitio web de Adobe. Las cabeceras gráficas acompañan consistentemente la navegación en todas las páginas; en cuanto se reconoce el lugar que corresponde a los enlaces más comunes y utilizados, la interfaz se vuelve casi invisible y facilita la navegación:

Para una máxima funcionalidad y legibilidad, el diseño del sitio web y de cada una de sus páginas debe construirse sobre un sólido patrón de módulos que compartan una retícula base y unos mismos temas gráficos, convenciones editoriales y jerarquías de organización. Se trata de conseguir consistencia y previsibilidad: al viajar por el sitio, el usuario debe sentirse cómodo y seguro de que va a encontrar lo que busca. La identidad gráfica (también conocida como identidad de marca) en una serie de páginas de un sitio web proporciona las pistas visuales necesarias para que el flujo de información sea continuo.

El menú de la cabecera de cada página del sitio web de Adobe aporta, además de una consistente interfaz, una marcada imagen corporativa:

Fuente: www.adobe.com

Fuente: www.adobe.com EL ESTUDIANTE DE DISEÑO GRÁFICO EN INTERNET

37

Incluso si no se utilizan elementos gráficos para la navegación, la consistencia en la forma de componer los títulos, subtítulos, pies de página y enlaces hacia la página principal o páginas menú, puede reforzar la sensación de que se está en un determinado contexto en la web. Para conservar un efecto de páginas sucesivas, en lugar de enlaces que lleven al usuario a otros sitios web, puede recoger la información externa que desee incorporar y adaptarla al esquema de composición de su web (aunque, antes de incluir dichos contenidos, es preciso asegurarse de que no hay restricciones de copyright).

Integridad y estabilidad del diseño. Para convencer

al usuario de que lo que se le ofrece es fiable y adecuado, es preciso cuidar el diseño de la web tal como se haría en cualquier otro tipo de soporte, y utilizar los mismos niveles de calidad en el diseño y en los contenidos editoriales. Una web de apariencia descuidada, con un diseño visual pobre y unos niveles editoriales de baja calidad, no inspira ningún tipo de confianza.

La funcionalidad de una web implica mantener los elementos interactivos en perfecto funcionamiento. Esta funcionalidad implica dos aspectos: hacer las cosas bien desde el momento en que se inicia el proceso de diseño y hacer que todo funcione perfectamente a largo plazo. Un buen sitio web es intrínsecamente interactivo, con múltiples enlaces hacia páginas internas del sitio y otros enlaces hacia páginas de otras webs. A medida que se va confeccionando el diseño de la web, es necesario asegurarse de que los enlaces funcionan.

En la Red, la información cambia de forma vertiginosa. Una vez establecido el sitio web, es necesario comprobar el funcionamiento de estos enlaces y que los contenidos a los que se accede siguen siendo pertinentes.

1.4.2 Accesibilidad Uno de los principios que definen y caracterizan la Red es que debe proporcionar acceso a la información a todos los usuarios, independientemente de su capacidad física o tecnológica.

Desde que la Red apareció y se consolidó como un medio visual más, los objetivos del diseño han estado enfrentados con los de la accesibilidad. Cuando para construir documentos bien diseñados empezaron a usarse composiciones complejas de página, imágenes de gran tamaño o formatos de propiedad exclusiva, la Red se convirtió en un lugar aparentemente más bonito, pero se cerraron las puertas de muchas páginas a miles de usuarios que requerían un código HTML nítido para acceder a la información. Hoy, el diseño web está cambiando y volviendo a su propósito original. El lenguaje HTML ha madurado y ofrece una capacidad de control visual mucho mayor, con lo que los estudiantes de diseño gráfico disponen de más herramientas para poder construir webs más estructuradas y navegables sin tener que recurrir a rodeos u otros recursos tangenciales al diseño. Hay numerosas iniciativas en todo el mundo que exigen que los usuarios discapacitados tengan igualdad de acceso a los recursos de Internet, como por ejemplo las normativas publicadas por la WAI (Web Accessibility Initiative, Iniciativa para la Accesibilidad en la Red) o las del consorcio W3C (World Wide Web Consortium) o, en Estados Unidos, las enmiendas a la sección 508 de la Rehabilitation Act (Ley sobre la rehabilitación) de 1973.

Todas estas iniciativas suponen que el diseño de la interfaz web debe estar íntimamente vinculado con la accesibilidad.

Es responsabilidad de los diseñadores gráficos entender y dar respuesta a las necesidades de los usuarios discapacitados.

Diálogo y retroalimentación. La web debería ofrecer

al usuario, a través del diseño gráfico, de botones de navegación o enlaces de hipertexto colocados uniformemente, una confirmación visual y funcional de su posición y sus opciones.

La retroalimentación (o feedback) también significa estar preparado para responder a cualquier pregunta o comentario de un usuario. Una web bien diseñada proporciona enlaces directos al webmaster o editor responsable del sitio. Para el éxito de la empresa a largo plazo, una cuidada planificación de esta relación con el usuario es fundamental.

38

EL ESTUDIANTE DE DISEÑO GRÁFICO EN INTERNET

Alternativas y "fallbacks". El principio subyacente a las directrices de accesibilidad web y es muy sencillo: si usted proporciona información en algún tipo de medio que no sea texto simple, debe proporcionar siempre una versión alternativa o fallback (de emergencia). Esta noción de fallback descansa en el corazón mismo del lenguaje de la Red, permitiendo que un contenido rico y variado se transforme con elegancia bajo condiciones diversas. También se basa en la prescripción de que ningún contenido debe quedar anticuado o inaccesible debido al progreso tecnológico. Para lograr estos objetivos, el lenguaje HTML incluye métodos que pueden proporcionar versiones alternativas a ciertos contenidos no textuales.

Como ejemplo, uno de los encantos de la Red y del lenguaje HTML es la posibilidad de incorporar mensajes descriptivos textuales alternativos, para que un usuario que no pueda visualizar los gráficos pueda entender su función dentro del contexto de la página. Utilizando un software especial, un usuario ciego puede escuchar (mediante un lenguaje sintetizado) los mensajes alternativos que acompañan a cada uno de los gráficos y botones de navegación (etiqueta "ALT" en HTML), y así no perderse la totalidad de su contenido. Los usuarios que tienen navegadores de texto exclusivamente o han eliminado la opción de mostrar imágenes verán el texto alternativo en lugar del contenido visual. Si se utilizan menús gráficos para la navegación, estas etiquetas alternativas en formato de texto serán de gran ayuda para un usuario incapaz de visualizarlo. Si utiliza gráficos en formato Gif de un píxel para insertar espacios, asegúrese de incluir la etiqueta ALT en blanco en la imagen de espaciado original (ALT=" "). En algunos navegadores, leen el texto en voz alta para discapacitados visuales:

<IMG SRC="pixel.gif" HEIGHT="80" WIDTH ="20" ALT="DESCRIPCION DE LA IMAGEN">

Esto a su vez es de alta importancia para el posicionamiento en los buscadores de Internet, como por ejemplo Google, que toma el nombre de las imágenes, los títulos de la página, las negrillas que se marcan en la página para reconocer que el contenido de la página es fiel a la búsqueda que se realiza. Así, de esta forma podrás tener más alternativas para resaltar el contenido del sitio web.

También deberían incluirse textos alternativos como parte del diseño de página para usuarios que no puedan acceder a los contenidos principales. Por ejemplo, es conveniente incluir un menú de navegación sólo-texto equivalente para aquellos usuarios que no puedan utilizar los menús gráficos; o si se presenta algún tipo de vídeo de una conferencia o presentación, conviene también proporcionar una transcripción del texto y subtítulos para que los usuarios sordos puedan también acceder a los materiales.

Además de ser de gran ayuda, esto a su vez es de alta importancia para el

posicionamiento en

los buscadores de Internet, como por ejemplo Google, que toma el nombre de las imágenes, los títulos de la página, las negrillas que se marcan en la página para reconocer que el contenido de la página es fiel a la búsqueda que se realiza. Así, de esta forma podrás tener más alternativas para resaltar el contenido del sitio web.

EL ESTUDIANTE DE DISEÑO GRÁFICO EN INTERNET

39

También deberían incluirse textos alternativos como parte del diseño de página para usuarios que no puedan acceder a los contenidos principales. Por ejemplo, es conveniente incluir un menú de navegación sólo texto equivalente para aquellos usuarios que no puedan utilizar los menús gráficos; o si se presenta algún tipo de vídeo de una conferencia o presentación, conviene también proporcionar una transcripción del texto y subtítulos para que los usuarios sordos puedan también acceder a los materiales.

Hojas de estilo. Con el uso de las hojas de estilo en casca-

da (CSS) para el diseño de sus páginas los contenidos pueden hacerse más accesibles. En páginas web diseñadas con hojas de estilo CSS, el usuario puede personalizar fácilmente el formato final de los documentos a los que accede. Por ejemplo, una página diseñada utilizando texto en rojo sobre fondo verde representaría un gran problema para aquellos usuarios que no distinguen entre el rojo y el verde, pues el contraste entre texto y fondo podría no ser suficiente para que el texto fuera legible. Si los colores se especifican mediante una hoja de estilo, el usuario puede ajustar las preferencias de su navegador y anular el estilo definido por el diseñador gráfico, aplicando su propia hoja de estilo a la página en cuestión. En páginas web en las que se utilizan las hojas de estilo CSS, el usuario puede transformar el contenido web hasta obtener un formato adecuado a sus propias necesidades de accesibilidad.

Fuente: www.darasgarden.com.uk

De igual forma es de gran utilidad para el administrador el uso del CSS, planeando desde un inicio la construcción de los estilos que se quieren presentar, será una tarea fácil de implementar cambio en el sitio web, pues los estilos para ciertas etiquetas estarán siendo llamados en todas sus instancias, por ejemplo, si deseas que las negrillas (etiqueta <B> en HTML) tengan un color especifico solo debes asignarle desde el estilo: ESTILO b{ color: #FFCC00; }

HTML

RESULTADO

<p> Nuestro lanzamiento se realizará el: Nuestro lanzamiento se realizará el: 25 de Octubre <b>25 de Octubre del presente año</b>. del presente año.

De esta forma, automáticamente las negrillas te tomaran este color naranja, sin necesidad de editar cada negrilla que uses en el sitio web.

40

EL ESTUDIANTE DE DISEÑO GRÁFICO EN INTERNET

Directrices de accesibilidad. Todos los sitios web o intranets diseñados por profesionales deberían cumplir, por lo menos, los requisitos mínimos de accesibilidad definidos por el consorcio del World Wide Web (W3C). El sitio web de W3C contiene información extensa y detallada sobre cómo hacer su sitio razonablemente accesible a los ciegos, a los sordos u a otros usuarios discapacitados (ver abajo). Hasta no hace mucho, los diseñadores web se enfrentaban con grandes dificultades si querían poner en práctica las sugerencias de accesibilidad del consorcio W3C, pues las versiones más populares de los principales navegadores web no implementaban (o lo hacían deficientemente) los estándares de tecnologías nuevas, como la de las hojas de estilo en cascada CSS. Ahora que Netscape Navigator, Mozilla Firefox e Internet Explorer son totalmente compatibles con los estándares W3C, están desapareciendo las razones para no usar CSS u otras herramientas que incrementen la accesibilidad de los lectores discapacitados a la información y los contenidos web.

EL ESTUDIANTE DE DISEÑO GRÁFICO EN INTERNET

41

Degradación agradable. A los estudiantes de diseño gráfico nos gustaría que todo el mundo navegara con la última versión de los navegadores más importantes, que sus ordenadores fueran el último modelo aparecido en el mercado y que se utilizara una conexión ultrarrápida a Internet. Pero la realidad dista mucho de este ideal. No es necesario diseñar la web exclusivamente para el mínimo común denominador de la informática y tecnología de redes actuales, pero sí debe tenerse en cuenta cómo visualizará la web el usuario que no tiene ni el mejor equipo, ni las últimas versiones de software, ni una buena conexión a Internet. Además, no hay que olvidar que la mayoría de realizadores web trabajan con equipos mucho más potentes que la mayoría de los usuarios. No diseñe para su máquina, sino para un usuario medio.

Es conveniente no apoyarse únicamente en una tecnología de navegadores o en la necesidad de plug-ins o adaptadores ("Ésta es una web optimizada para Internet Explorer 5.5 y Adobe Flash"). Estos comentarios parecerán ingenuos en la página principal de la web de una empresa o institución, y alejarán a la mayoría de usuarios con una cierta experiencia. Es bueno realizar el diseño basándose en los navegadores más importantes lanzados al mercado en los dos últimos años.

Si se requieren plug'ins de marca, intente ubicar el material que depende de ese plug-in en partes muy internas de la web, donde se supone que el usuario ya se habrá hecho una idea precisa de los contenidos y no le importará descargar el plugin de la Red para visualizar información específica. El usuario sólo podrá tomar una determinación cuando haya captado claramente lo que puede obtener a cambio de molestarse en descargar algún plug-in o adaptador.

Ventajas de hojas de estilo CSS. Las hojas de estilo en cascada ofrecen al diseñador web dos ventajas claras en el

mantenimiento de sitios web complejos:

Independencia entre contenidos y diseño. Las ho-

jas de estilo CSS aportan al creador de un sitio web lo mejor de las dos herramientas: poder etiquetar los contenidos para que éstos reflejen la estructura lógica de la información y además, la libertad de poder especificar cómo se visualizará de forma exacta cada una de estas etiquetas HTML.

Un control eficaz de grandes conjuntos de docu-

mentos. Las implementaciones más eficaces de las CSS permitirán al diseñador de un sitio web controlar la apariencia de miles de páginas al mismo tiempo, modificando un sólo un documento maestro de hoja de estilo.

Además, las hojas de estilo ofrecen más opciones de formato que las etiquetas HTML simples. Por ejemplo, con las hojas de estilo se puede controlar el espacio entre líneas, el espacio entre las letras o el color de fondo del texto. Y afortunadamente, los distintos navegadores aplican estas propiedades de formato con una consistencia muy aceptable.

Fuente: www.folietto.com

42

EL ESTUDIANTE DE DISEÑO GRÁFICO EN INTERNET

Legibilidad. La buena tipografía depende del contraste visual entre los distintos tipos de letra y entre los distintos bloques de texto, títulos y espacio en blanco circundante. Nada es más atractivo para el ojo y la mente del usuario que un estudiado contraste y unos patrones distintivos. Estos atributos se pueden conseguir con un diseño cuidado de las páginas. Si se rellena tupidamente cada una de las páginas con texto, el lector se enfrenta a una pared gris carente de contraste visual e, instintivamente, siente rechazo. Tampoco ayuda hacer más grandes todos los elementos de la página de manera uniforme. Incluso las fuentes en negrita pueden resultar monótonas, ya que si todas tienen esta propiedad, en realidad nada destaca.

Cuando el contenido es esencialmente texto, la tipografía se convierte en la herramienta para “pintar” y organizar la página.

Lo primero que ve un lector no es el título u otros detalles de la página, sino su esquema y contraste global. La repetición regular de esquemas establecidos de gráficos y textos en una sucesión de páginas ayudará al lector a sentirse situado e incrementará la legibilidad. Para el usuario es más difícil reconocer la estructura subyacente cuando la tipografía y los títulos son desiguales o heterogéneos, lo que además le impide prever la ubicación de la información en nuevos documentos:

EL ESTUDIANTE DE DISEÑO GRÁFICO EN INTERNET

43

1.4.3 Distintas plataformas Diferencias entre navegadores Cada navegador interpreta las etiquetas de HTML y de CSS de forma distinta. Las tablas, los formularios, la posición gráfica y la alineación van a funcionar de forma diferente según la marca o versión del navegador que se utilice. Normalmente estas sutilezas pasan desapercibidas, pero pueden acarrear algunas sorpresas desagradables en composiciones de página complejas o muy precisas. No debe confiarse demasiado en la implementación del lenguaje HTML, las hojas de estilo CSS, del JavaScript o de cualquier módulo adaptador o plug-in hasta que se haya comprobado que la visualización y el funcionamiento de las páginas son correctos en los navegadores más populares. Si un número importante de los usuarios para los que se diseña la web utiliza otros sistemas operativos aparte de Windows - Macintosh, Linux o UNÍX, debería también comprobarse la correcta funcionalidad de la programación de las páginas más complejas en las citadas plataformas.

Lamentablemente, los errores específicos de plataforma siguen siendo muy comunes en los principales navegadores web.

1.5 GRAFICOS WEB Características de los gráficos web. Los parámetros que más afectan a la visualización de un elemento gráfico en la Red son el monitor del usuario y el ancho de banda de su conexión. Una buena parte de usuarios de internet se conecta a través de un módem y visualiza las páginas con un monitor que sólo muestra 256 colores. Estos factores impondrán ciertos límites al tamaño de los archivos y al número de colores de un gráfico web.

La profundidad de color y los archivos gráficos.

La terminología y los esquemas de memoria que se utilizan para las pantallas en color son exactamente los mismos que los que se utilizan para describir la profundidad de color en los archivos gráficos. En su estado descomprimido, los archivos gráficos de 8 bits, o 256 colores, dedican 8 bits para cada píxel en color de la imagen. En imágenes a 8 bits, los 256 colores que componen la imagen se almacenan en una sucesión llamada “paleta” o “índice”. Una imagen a 8 bits nunca puede contener más de 256 colores distintos.

44

EL ESTUDIANTE DE DISEÑO GRÁFICO EN INTERNET

Las imágenes en color verdadero, o a 24 bits, tienen generalmente un tamaño de archivo mucho mayor que las de 8 bits descomprimidas, pues a cada uno de los píxeles se le dedican 24 bits de memoria, que por lo general se organizan en tres canales monocromáticos (rojo, verde y azul):

1.5.1 LOS GRÁFICOS Y EL ANCHO DE BANDA La mayoría de los usuarios web acceden generalmente a su proveedor de servicios de internet a través de módems a una velocidad de 256 kilobytes por segundo (kbps), ya sea desde su casa o desde la oficina. A esta velocidad, la cadencia real de la descarga es tan sólo de 49 kilobytes (Kb) por segundo (8 bits son 1 byte). Lo cual significa que un modesto gráfico de 36 Kb en una página web puede tardar en descargarse en el navegador del usuario un segundo o más. En realidad, los valores de transmisión de datos variarán según el módem que tenga el usuario o su ADSL, la velocidad del servidor web, la conexión a internet y otros factores. Pero la importancia de estos datos está clara: cuantos más gráficos se incorporen a la página, el usuario tendrá que esperar más tiempo para descargar toda la información de la página.

A medida que el usuario se interese por los contenidos, tendrá mejor predisposición a esperar para visualizarlos, especialmente si se indica el tamaño de los gráficos o multimedias que se van a descargar, o se le informa de que la página que desea ver está compuesta de varios gráficos y/o multimedias que puede tardar en descargarse.

Gráficos e intranets. Por suerte para los diseñadores gráficos, muchos sitios web se crean principalmente para intranets

de carácter educativo, comercial o institucional, con usuarios que acceden desde la escuela o la oficina a intranets locales y a la WWW con velocidades Ethernet o mayores. Además, cada vez más usuarios residenciales o que practican y acceden a la Red con conexiones de alta velocidad ADSL o por cable. El comportamiento de los elementos gráficos también se ha de considerar en estos casos, pero no tiene mucho sentido reducirlos arbitrariamente para “ahorrar ancho de banda”. Al fin y al cabo, los elementos gráficos son los que atrajeron al público en general a la Red; dada cualquiera que sea la alternativa de conexión que tengamos a disposición no se debe olvidar que parte de un buen diseño también está es un óptimo rendimiento de visualización.

EL ESTUDIANTE DE DISEÑO GRÁFICO EN INTERNET

45

1.5.2 FORMATOS DE ARCHIVOS GRÁFICOS Archivos GIF. El Servicio de Información de Compuserve popularizó en los años ochenta el formato GIF (Graphic Inter-

change Format: formato gráfico intercambiable) como una forma eficaz de transportar imágenes a través de redes de datos. A principios de los años noventa, los diseñadores de la WWW adoptaron este formato por su eficacia y por su extendido uso y popularidad. La inmensa mayoría de las imágenes que se encuentran en la Red tienen formato GIF y prácticamente todos los navegadores web que pueden mostrar imágenes pueden mostrar archivos gif. Este tipo de archivos incorpora un esquema de compresión propietario para reducir su tamaño al mínimo, y la paleta de color se limita a 8-bits (256 colores o menos). Unas nuevas variantes del formato GIF permiten incluir el color transparente o definir la forma en que se descarga (GIF entrelazado popularizado por Netscape Navigator).

GIF transparente.

El formato de imagen GIF permite elegir los colores que se quiera convertir en transparentes de la paleta de color del GIF. Puede utilizar un programa de tratamiento de imágenes como Photoshop (o muchos otros) para seleccionar los colores de la paleta de color de un gráfico GIF que desea que se conviertan en transparentes. Generalmente, se adjudica la transparencia al color de fondo de la imagen.

Gráficos JPEG. El otro formato de archivos gráficos usados comúnmente en la Red para minimizar su tamaño es el es-

quema de compresión JPEG (Joint Photographic Experts Group: estándar del grupo de expertos fotográficos). A diferencia de los gráficos GIF, las imágenes en JPEG permiten imágenes a todo color (de 24 bits o "color verdadero"). Este tipo de imágenes ha generado un gran interés entre fotógrafos, artistas, diseñadores gráficos, especialistas en imagen médica, historiadores del arte y otros profesionales para los cuales la calidad de la imagen es de suma importancia, por lo que no desean que la fidelidad del color se vea alterada utilizando una indexación a 8 bits. Una nueva forma de archivo JPEG es la conocida como "JPEG progresivo", que proporciona al gráfico las mismas propiedades de descarga progresiva en la pantalla que vimos en los gráficos GIF entrelazados. Al igual que éstos, los JPEG progresivos tienen un tiempo de descarga mayor que los normales, pero facilitan al lector una rápida vista previa.

La compresión JPEG utiliza una sofisticada técnica matemática, denominada transformación discreta de cosenos, para producir una escala de compresión gráfica en varios niveles. Se puede seleccionar el grado de compresión que se desea aplicar a una imagen, pero al hacerlo también se está definiendo el nivel de calidad de la imagen. Cuanto más se comprime la imagen en formato JPEG, menor es la calidad resultante. El JPEG puede conseguir un sorprendente índice de compresión, pudiendo reducir cien veces el tamaño del archivo original. Esto es posible debido a que el logaritmo JPEG descarta los datos no necesarios a medida que comprime la imagen. En el ejemplo siguiente podemos comprobar cómo, a medida que incrementamos la compresión JPEG, se degenera progresivamente la imagen:

46

EL ESTUDIANTE DE DISEÑO GRÁFICO EN INTERNET

Gráficos PNG. Los gráficos PNG (Portable Network Graphic: gráficos portátiles en Red) son un tipo de formato gráfico desarrollado por un consorcio de creadores de software gráfico como alternativa de carácter público al formato GIF tradicional. Como ya se ha mencionado, Compuserve desarrolló el formato GIF y utiliza un esquema de compresión privado, propiedad de Unisys Corporation. Todo desarrollador de herramientas gráficas que construya software que guarde las imágenes en formato GIF, debe pagar los correspondientes derechos de propiedad a Unysis y a Compuserve.

Los gráficos PNG se diseñaron especialmente para su uso en páginas web y presentan una serie de atractivas características que, con toda seguridad, lo convertirán en poco tiempo en el más popular de los formatos gráficos. Sus características incluyen una gama completa de profundidad de color, sofisticadas propiedades de transparencia, un entrelazado mejor resuelto y correcciones automáticas del factor gamma de las pantallas de los ordenadores. En las imágenes PNG se puede incluir también un pequeño texto descriptivo del contenido de la imagen, EL ESTUDIANTE DE DISEÑO GRÁFICO EN INTERNET

47

lo que permite que los motores de búsqueda en internet busquen imágenes basándose en estas breves descripciones insertas en el archivo. Desgraciadamente, el uso del formato gráfico PNG todavía no está muy extendido, y las principales versiones de navegadores aún no han implementado todas las características que el formato PNG puede ofrecer. Esto debería cambiar en los próximos años, pero no le conviene usar gráficos PNG hasta que esté seguro de que la mayoría de sus usuarios utilizan navegadores que permiten su correcta visualización.

Este tipo de archivo también soporta la transparencia de una forma mejorada que el GIF, pero claro debe estar que en navegadores como el Internet Explorer no siempre funciona dicha transparencia y en otros como Firefox y Opera siempre reconocen la transparencia, así que debemos cerciorarnos que nuestros resultados sean los esperados para todo tipo de usuario.

ación el portante durante la plane im es s, co áfi gr s so ur Dados estos rec idad de la red, ctura a trabajar (veloc tru es ra inf la rá se al cu , etc.) conocer , navegadores utilizados tes en cli los de ar nd sta resoluciones de monitor s adecuada. imágenes de la forma má las tar ap ad de fin el n co

48

EL ESTUDIANTE DE DISEÑO GRÁFICO EN INTERNET

1.6 MULTIMEDIA Tal vez el aspecto más fascinante de la tecnología informática sea la posibilidad de combinar texto, imágenes, sonido e imágenes en movimiento de formas muy variadas e interesantes.

Debido a las limitaciones del ancho de banda, la esperada promesa multimedia ha tardado en llegar a la Red, pero cada día aparecen nuevas soluciones. A pesar de que existen muchas formas de generar multimedia para la Red, recomendamos usar tecnologías ya consolidadas, que funcionarán para la mayoría de los usuarios. Los plug-ins o adaptadores que aumentan las posibilidades de las páginas web tienen sus pros y sus contras. Si se exige a los usuarios que vayan a buscar a otro lado la tecnología necesaria para visualizar las páginas, uno se arriesga a perderlos. Aunque este aspecto ha venido cambiando, pues contenidos que son de gran uso en internet como videos, multimedias flash, y demás son automáticamente instalados en el navegador y lo único que se necesita ocasionalmente es aceptar una actualización que dura unos pocos segundos, lo que le facilita definitivamente el uso de estos medios al usuario.

Para adaptar mater iales multimedia a la Red se necesitan y escalados muy al compresiones to s, lo que significa analógicos no enca qu e la m ay or ía de jan en la Red. La los contenidos clave de un buen elementos multimed funcionamiento de ia es adaptar el co los ntenido específicam ente para la Red.

Las multimedias deben tener completamente estructurados y en armonía sus componentes de presentación, tales como el sonido, los elementos visuales y sus elementos de organización, cada uno planeado, producido, editado y finalizado de la manera independiente para posteriormente hacer un ensamble y montaje de la forma más adecuada.

EL ESTUDIANTE DE DISEÑO GRÁFICO EN INTERNET

49

1.6.1 AUDIO El audio es una forma muy eficaz de transmitir información. Piense en un vídeo ilustrativo de cómo medir y pesar componentes químicos. ¿Cuál de las pistas audio o vídeo será más importante en la transmisión de la información? En la pista de audio, el narrador cuenta el procedimiento, y en la pista de vídeo, alguien mide y pesa los componentes. ¿Cuál de las dos pistas quitaría si fuera necesario? ¿Cuál sería más ilustrativa sin necesidad de la otra? La pista de audio, evidentemente. Considere, pues, la posibilidad de incluir un componente de audio para complementar los contenidos. El sonido puede capturarse y optimizarse con bastante facilidad y, además, se comprime muy bien.

Al grabar sonido original, tómese el tiempo necesario para hacerlo bien. Una vez grabado, los ruidos de fondo de baja frecuencia, como por ejemplo el zumbido de un sistema de ventilación, serán inseparables de la pista de audio; pues será muy complicado hacerlo desaparecer dependiendo su intensidad. Recuerde también que cualquier defecto en la grabación se amplificará al comprimirlo para su reproducción en la Red.

1.6.2 IMÁGENES Y VIDEO Pases de diapositivas. Los pases de diapositivas son otra forma de incluir multimedia en una página web. En ellos, se sincroniza el audio con imágenes estáticas. La información se recibe a través del audio y el énfasis visual se amplifica con las imágenes. Por ejemplo, para presentar el vídeo ilustrativo mencionado en el apartado anterior mediante diapositivas, se podría utilizar un programa de edición de vídeo para sincronizar la narración con las imágenes estáticas del proceso de medir y pesar los componentes químicos. Las imágenes estáticas se comprimen de forma mucho más eficaz que el vídeo y, debido a que los pases de diapositivas no necesitan una reproducción fluida, el índice de fotogramas por segundo puede ser muy bajo. Esto implica que se puede aumentar la calidad de la imagen y su tamaño. También son muy usados los SlideShow, que son pases de imágenes sin audio que hacen la transición entre imágenes de manera dinámica, refiriéndonos a dinámico la interacción del usuario con el pase de imágenes, ya sea manipulando una serie de álbumes o con solo pasar el cursor sobre esta multimedia. Los SlideShow se han convertido en una buena alternativa para mostrar con alta calidad y rendimiento por internet nuestros portafolios, por lo que encontraremos muchos recursos Javascript y Flash para nuestro uso e inclusive, servicios/páginas web que realizan el SlideShow gratuitamente y el usuario solo realiza la carga de las imágenes, pero de ello hablaré mas adelante.

50

EL ESTUDIANTE DE DISEÑO GRÁFICO EN INTERNET

Video. Es el contenido multimedia de más difícil de transmisión en la Red. Un segundo de vídeo en formato NTSC (el es-

tándar americano para vídeo y televisión) no comprimido necesita un espacio de 27 Megabytes de disco duro. La cantidad de compresión y escalado necesarios para reducir tal cantidad de datos para su uso en la Red es muy significativa, tanto que a veces el material quedaría inservible. Si es posible, adapte la grabación especialmente para la Red y siga las siguientes recomendaciones: Grabe vídeo original, de esta forma se puede generar vídeo que se comprima eficazmente manteniendo la calidad

a pesar de la poca resolución y el bajo índice de fotogramas por segundo.

Grabe primeros planos. Los planos generales tienen demasiados detalles que no servirán de nada a resoluciones

bajas.

Grabe siempre que sea posible con un fondo monocromático. Hará las imágenes de vídeo más claras y facilitará

su compresión.

Utilice un trípode para minimizar el movimiento de la cámara. Si la cámara no se mueve, las diferencias entre

fotogramas son mínimas y, por tanto, mejorará la compresión.

No haga zoom ni panorámicas. Las películas de baja frecuencia de fotogramas se hacen confusas y difíciles de

interpretar, además de que no se comprimirán adecuadamente.

Cuando edite el vídeo, utilice los cortes en seco entre las escenas. No utilice los efectos de transición que puede encontrar en los programa de edición de vídeo, como "disolver" o "barridos", ya que no se comprimen adecuadamente y su reproducción en la Red es deficiente.

Si se está digitalizando material que se había grabado originalmente para vídeo o film, escoja cuidadosamente el material, busque aquellas secuencias en que el movimiento y los pequeños detalles sean mínimos. Los detalles y el movimiento son los grandes inconvenientes del vídeo a baja resolución.

Posterior a tener listo el material de video, en internet existen varias herramientas multimedia de fácil implementación y uso que realizan el Streaming de este material, al igual que sitios web que prestan el servicio de difusión de videos, como por ejemplo, www.daylimotion.com o www.Youtube.com. Servicios como estos facilitan la visualización de nuestro material, incluyendo servicios de estadística de visualizaciones y demás, claro está que la carga de nuestros videos a un sitio de estos estará expuesta a una compresión y por consiguiente llegaremos a una baja de calidad. Así que si se desea mostrar un material de alta calidad es mejor que se realice un propio reproductor (player) e implemente streaming como se haga necesario.

1.6.3 ELEMENTOS DE ORGANIZACIÓN Y PROCESAMIENTO Los elementos multimedia incluidos en una aplicación necesitan un entorno que lleve al usuario a interaccionar con la información y aprender. Entre los elementos interactivos están los menús desplegables, pequeñas ventanas que aparecen en la pantalla del ordenador con una lista de instrucciones o elementos multimedia para que el usuario elija. Las barras de desplazamiento, que suelen estar situadas en un lado de la pantalla, permiten al usuario moverse a lo largo de un documento o imagen extensa.

EL ESTUDIANTE DE DISEÑO GRÁFICO EN INTERNET

51

Las fuentes analógicas tienen generalmente unas características propias. Por ejemplo, la calidad CD de audio tiene una frecuencia de 44.1 Khz a 16 bits de sonido estéreo, y el vídeo generalmente tiene una dimensión de 640 x 480 píxeles y una frecuencia de 30 fotogramas por segundo (FPS). Sin embargo, este tipo de fuente analógica digitalizada a la máxima resolución requeriría una gran cantidad de espacio de disco duro y sería demasiado grande para su difusión en la Red. Una forma de preparar este tipo de archivos para la Red es reducir la información, por ejemplo, bajando la calidad de los archivos de audio hasta 11.025 Khz a 8 bits y sonido mono.

Esto reduce el tamaño del archivo, pero también reduce sustancialmente su calidad. Otra forma de reducir el tamaño es aplicar una compresión.

En primer lugar la compresión elimina los datos redundantes del archivo y luego elimina los datos menos importantes para reducirlo aún más. Este proceso se realiza mediante logaritmos, o codecs (abreviación de compresores / descompresores), que manejan el proceso de compresión del archivo y de descompresión cuando éste se reproduce. Los codecs que se utilizan para una buena difusión en la Red utilizan una compresión bastante deficiente: el procedimiento elimina información de la fuente original del material. Nunca se debería comprimir algo varias veces, pues en cada uno de los procesos de compresión la calidad del vídeo disminuye.

Procesado de Audio: Normalizar. En el proceso de digitalización los ar-

chivos de audio pueden perder amplitud y claridad.

Para compensar, puede utilizarse un programa de edición de sonido para normalizar el archivo de audio. El programa busca el punto más alto de la onda acústica en el archivo y luego amplifica todo el archivo para que ese punto álgido tenga un volumen del cien por cien. Esto garantiza que se está trabajando con la señal de audio con el mayor volumen posible.

Aumentar el nivel medio. Otra forma de realzar los archivos de audio es utilizar un software cuyo ecualizador tenga una función para incrementar ligeramente las frecuencias medias.

Frecuencia. Reducir la frecuencia reduce los datos necesarios para la reproducción del material, por ejemplo, de 44,1 khz a 22,050 khz.

52

Profundidad. Los archivos a 16 bits tienen una

gama más dinámica de sonidos, pero ocupan más espacio. Reducir la profundidad a 8 bits reducirá el tamaño del archivo.

Canales. Asegúrese de no utilizar las opciones de estéreo para archivos de sonido mono. Si la fuente original de sonido no tiene propiedades estéreo, cambie a mono para reducir la velocidad de transmisión.

Codec. Aplicar compresión a una pista de audio permite conservar los archivos de sonido con propiedades de frecuencia y profundidad de mejor calidad.

Procesado de Video: Procesar el audio. Extraer la pista de audio del

EL ESTUDIANTE DE DISEÑO GRÁFICO EN INTERNET

vídeo y ejecutar el proceso de normalizado y ecualizado de audio mencionado arriba.

Cortar los clips. Asegúrese que la película empieza y acaba con fotogramas que tienen sentido por sí mismos como imágenes estáticas. El primer fotograma aparecerá en la pantalla del usuario mientras la película se está cargando, y el último permanecerá en ella cuando la película haya finalizado. Estas imágenes deberían ser inteligibles y no alejarse del contexto de la película.

Recortar. Utilice el programa de edición de vídeo para quitar los ruidos no deseados o los bordes de la imagen de la película que no interesen.

Escalar. La mayoría de los vídeos para la Red tienen un tamaño de un cuarto de pantalla (320 x 240 píxeles) o menos.

Calidad de la imagen. Reducir la calidad de la imagen de una película reduce también la cantidad de información necesaria almacenada para cada uno de los fotogramas.

Fotogramas por segundo. El estándar ntsc americano es de 30 fps (el estándar europeo pal es de 25 fps.). La mayor parte de los vídeos para la Red se construyen a 10 fps.

Codec. Algunos codees comprimen más eficazmente que otros, aunque siempre a expensas de la calidad de la imagen.

Filtros específicos. El software de compresión in-

cluye algunos filtros que reducen las diferencias entre fotogramas, permitiendo así una mejor compresión.

Audio. La pista de audio de un vídeo se puede comprimir independientemente para así reducir el tamaño total del

archivo y mejorar su velocidad de transmisión.

1.6.4 DIFUSIÓN La tecnología de los medios en redes se basa en tres componentes fundamentales: el servidor, la red y el ordenador del usuario final. Para una buena difusión de los elementos multimedia, estos tres componentes deben trabajar en sincronía. Un servidor de vídeo o una red de alta capacidad de transmisión no sirven de nada si el ordenador del usuario no tiene suficiente capacidad para procesar las exigencias de la reproducción.

El más complejo de estos componentes es el ancho de banda. Si se adquiere un servidor de calidad, puede asegurarse un nivel aceptable de rendimiento. También se puede prever la capacidad del equipo del usuario. Ambos elementos son mensurables en cierta medida. Pero, a menos que se trabaje en una red de carácter interno, el ancho de banda será muy variable y de difícil predicción. Los factores que afectan al ancho de banda van desde la configuración básica de la conexión a la red hasta la cantidad de tráfico en cada momento específico.

Con estas variables, los parámetros para generar y transmitir multimedia en la Red no son fáciles de determinar. Dependerán de los contenidos y el alcance del proyecto. Si se está creando una web corporativa para una intranet, por ejemplo, los archivos multimedia pueden tener más exigencias tecnológicas que si se van a enviar a todo el mundo a través de la Red. La clave está en conocer las distintas configuraciones de los clientes potenciales, para así adaptarse a ellas.

Streaming. La tecnología streaming (envío por flujos de información) envía los datos al ordenador del usuario de forma continua, pero no descarga la totalidad del archivo. En un escenario ideal, el contenido se almacena en un servidor que mantiene una conferencia constante con la máquina del usuario para determinar la cantidad de datos que puede aceptar.

Entonces, el servidor ajusta los flujos (streams) de información y envía al usuario sólo la cantidad de datos que puede aceptar su equipo.

EL ESTUDIANTE DE DISEÑO GRÁFICO EN INTERNET

53

La tecnología streaming ofrece muchas ventajas, la primera de las cuales es la posibilidad de acceso aleatorio, pues permite visualizar una película en cualquiera de los puntos del flujo de transmisión. Si el usuario accede a un vídeo de una hora de duración y desea ver tan sólo los cinco minutos finales, puede utilizar los botones de control de la reproducción para desplazarse hasta ese determinado punto. Otra ventaja es que no requiere gran cantidad de espacio de memoria en el disco duro del usuario. La reproducción mediante flujos reproduce directamente los datos en pantalla; éstos no se almacenan en la memoria ni en el disco duro.

Pero la potencia de esta tecnología es también la razón de sus defectos. Para reproducir una película a tiempo real, el software reproductor necesita seguir el ritmo de los datos que llegan desde el servidor. Por tanto, si se produce algún tipo de fallo técnico en la Red o si el ordenador del usuario no puede seguir el ritmo de la reproducción, algunos paquetes de datos pueden perderse. La reproducción en streaming requiere gran capacidad de procesado; la visualización puede quedar afectada si el procesador tiene que dejar caer algunos fotogramas para mantener el ritmo del flujo de transmisión que recibe. Además, para poder visualizarse en tiempo real, los niveles de compresión deben ser muy altos.

54

EL ESTUDIANTE DE DISEÑO GRÁFICO EN INTERNET

EL ESTUDIANTE DE DISEﾃ前 GRﾃ：ICO EN INTERNET

55

1.7 SERVICIOS EMERGENTES Web 2.0: El término fue acuñado por Tim O’Reilly en 2004 para referirse a una segunda generación en la historia de la Web basada en comunidades de usuarios y una gama especial de servicios, como las redes sociales, los blogs, entre otros, que fomentan la colaboración y el intercambio ágil de información entre los usuarios por medio de Internet.

56

EL ESTUDIANTE DE DISEÑO GRÁFICO EN INTERNET

5 .

G A

P TO

R E S IN

F D .7 P

EL ESTUDIANTE DE DISEﾃ前 GRﾃ：ICO EN INTERNET

57

A medida que surgen este tipo de tecnologías para el usuario, podremos encontrar servicios gratuitos para crear nuestro propio sitio Web. A continuación se enlistan los mejores y más utilizados servicios para la creación de sitios web de forma gratuita en internet.

A continuación se presenta el listado de aplicaciones Web libres que le ayudan a crear y alojar su sitio web. Para utilizar estas aplicaciones web no se tiene la necesidad de ser un diseñador gráfico o desarrollador web y aun más, no se necesita ningún conocimiento técnico. Se pueden crear múltiples sitios web según su uso, algunos de los siguientes sitios están ofreciendo sitios web basados en flash, mientras que algunos de ellos son estáticos, y algunos de ellos tienen la funcionalidad para crear blog y galería de fotos. La mayoría de ellos no son muy bien conocidos pero son realmente sorprendentes en lo que respecta a sus características y funcionalidad.

Con WIX puede crear un sitio web libre o de forma gratuita cuenta con diseños de MySpace y diseños Flash. Es el más sencillo, más rápido, y es la mejor manera de construir y diseñar en la web. http://www.wix.com

Weebly es la forma más fácil de crear un sitio web libre. De personal profesional a los sitios, Weebly le permitirá gastar su tiempo en la parte más valiosa de su sitio, su contenido. http://www.weebly.com

Sites de Google es un servicio gratuito y fácil de crear y compartir páginas web. Esto es lo suficientemente poderoso para una intranet de la empresa, sin embargo, lo suficientemente simple para un sitio web de este estilo. http://sites.google.com

Aquí, con FreeWebs, puede hacer un sitio web en minutos con herramientas simples para los individuos, grupos, o las pequeñas empresas para compartir fotos y videos, abrir una tienda, y construir un miembro de la comunidad. http://www.freewebs.com

58

EL ESTUDIANTE DE DISEÑO GRÁFICO EN INTERNET

Viviti es la manera más rápida de hacer un profesional, fácil de actualizar, sitio web con sólo unos pocos clics tendrá su sitio web buscando una gran línea y en cuestión de minutos. http://viviti.com

Webon cuenta con una poderosa plataforma de la creación de sitios. Puede incrustar widgets de los servicios como YouTube, Flickr, y de diapositivas.

http://www.webon.com

http://www.webon.com

Webnode le trae una nueva forma innovadora de creación y edición de sitios web avanzados utilizando sólo un navegador web. Mediante el uso de arrastrar y colocar desde la barra de herramientas puede añadir nuevos contenidos tales como encuestas, los foros, artículos, catálogos, widgets, como PayPal y mucho más.

1.7.1 WIDGETS Esto solo es una pequeña parte de los servicios que promueve este concepto del Web 2.0.

Todos estos servicios nos facilitan de primera mano muchas herramientas que automatizan varios pasos, evitando el uso del HTML con el fin de facilitar el trabajo de administración al usuario. Sin embargo, no debemos dejar pasar este código de lado completamente. Esta tendencia Web 2.0 surge con el uso de plugins/widgets que tercerizan utilidades por nosotros, como por ejemplo, videoconferencias, galerías de imágenes dinámicas, salas de Chat personalizábles, carga de videos optimizados para internet, etc. Y todo esto con un poco de HTML, casi todo se encuentra en una etiqueta <object>.

Para hacer uso de estos servicios 2.0 solo es necesario que el usuario ingrese al sitio que ofrezca la utilidad, registrarse (en la mayoría de los casos gratuitamente), personalizar el plugin y tomar el código HTML, que posteriormente será agregado a la estructura de nuestro sitio. Posteriormente, al momento que sea cargado nuestro sitio, será cargado nuestro plugin haciendo contacto instantáneamente con su proveedor para cargarse y presentar su funcionalidad.

A continuación presento algunos sitios donde se brindan utilidades de la nueva generación Web 2.0: EL ESTUDIANTE DE DISEÑO GRÁFICO EN INTERNET

59

Plugoo, comunícate con los visitantes de tu blog mediante este widget Plugoo es un widget que nos permite estar comunicados con los usuarios de nuestra web tranquilamente desde nuestro programa de mensajería favorito, soportando las redes de MSN Messenger, Yahoo Messenger y Google Talk.

Este widget nos permite estar localizables gracias a un bot que tendremos que añadir a nuestra lista de contactos, el cual indicará a nuestros usuarios nuestro estado que, en caso de estar desconectados, podemos indicar que nos manden mensajes offline cuando reconectemos, que nos lo manden al buzón o simplemente que no haga nada.

El widget en sí es configurable, con lo que al final obtendremos el código necesario para insertarlo en nuestro blog o web. http://www.plugoo.com

Eyejot, sistema de videomensajería Eyejot un un sistema de videomensajería, por lo que evidentemente necesitaremos una webcam y crearnos una cuenta gratuita.

Es un servicio desarrollado en flash en su mayor parte, que nos permite tener una lista de contactos, donde podamos formar grupos, y en el que nos servirá para mandar y recibir videomensajes como si de correos electrónicos se tratara.

Dicho ésto, tiene más opciones, como el código para añadir un widget en tu web, incitando a los usuarios a registrarse y responderte, y podemos habilitar el soporte para itunes y para dispositivos móviles.

Si no tienes webcam, tiene acceso a un catálogo de webcams y accesorios a través de Amazon, para que puedas realizar tus compras desde casa.

Lo único malo es que los mensajes van destinados a usuarios de tu lista generada previamente, con lo que vas a tener que convencer a más de uno para abrirse su cuenta. http://www.eyejot.com

60

EL ESTUDIANTE DE DISEÑO GRÁFICO EN INTERNET

Flikzor, videomensajes para tu web Flikzor es una nueva herramienta de interacción entre usuarios de sitios web o de redes sociales mediante un widget que permite la grabación y reproducción de mensajes de saludos enviados por los propios contactos.

Es decir, instalamos este widget en nuestro sitio web y luego grabaremos nuestro saludo a través de la webcam. Entonces toca esperar a que los visitantes de nuestro sitio web, nuestros colegas, e incluso familiares lejanos, graben mediante sus propias cámaras web los mensajes que deseen, siendo visibles para el resto de usuarios de tu web.

Un widget más para mantener los contactos con tus visitantes de tu sitio web o tus redes de contactos en los perfiles donde hayas instalado el widget. De momento está en beta privada, aunque yo no he tenido problemas en hacerme una cuenta. http://www.flikzor.com

YouCams, salas de videoconferencias para tu web YouCams es un widget, bastante grande con lo que deberemos de buscar un lugar espacioso en nuestra web, que introduce una sala de videoconferencia, realizada en flash, donde poder establecer conversaciones de textos y vídeos con nuestros propios amigos, estén o no registrados, e incluso otras opciones mediante plugins, como la de compartir los vídeos de YouTube o coleccionar otros widgets. Desde la misma interface pueden navegar para poder acceder a otras salas de chats públicas existentes.

Podemos modificar nuestra propia sala e incluso crearnos nuevas salas, que podrán ser públicas o privadas, indicando una serie de parámetros de personalización.

Como usuarios registrados, podemos acceder a funciones extras gracias a los créditos que podemos ganar enviando invitaciones, añadiendo el widget en nuestra web e incluso que otros usuarios nos la hayan transferido a nosotros. Además podemos acceder a códigos específicos de nuestra sala para añadir en nuestra web o dentro de nuestros perfiles de nuestras redes sociales, en formato flash o java, así como el enlace para poder compartir con otros usuarios de cualquier forma, por ejemplo, como firma de correo electrónico, ya que dicho enlace es fácil de recordar. http://www.youcams.com

EL ESTUDIANTE DE DISEÑO GRÁFICO EN INTERNET

61

Polldaddy, sistema de encuestas Polldaddy, un sistema de encuestas mucho más completo, personalizable y sencillo, cuyo destinatario es cualquier tipo de páginas web a la que le podamos insertar el código html que deseemos.

Nos registramos en Polldaddy e inmediatamente podemos crear nuestra primera encuesta, con su pregunta y sus posibles respuestas, donde mediante ajax podemos variar el orden, añadir nuevas respuestas o eliminarlas. Indicando además si deseamos tener sólo una respuesta o varias a la vez, permitir que los usuarios elijan “otros” e impedir que voten varias veces la misma encuesta.

Una vez definida la encuesta, tan sólo debemos de elegir el estilo de nuestro widget, donde tenemos donde elegir aunque si sabemos algo de hojas de estilos CSS, podemos adaptar la estética a nuestra web.

Una vez realizada, tenemos el enlace de nuestra encuesta, para mandar por correo electrónico por ejemplo, y el código html para introducirla en cualquier sitio web.

Desde el panel de control tenemos acceso a los resultados, podemos modificar la encuesta, cambiar el estilo e incluso seguirla mediante RSS. En caso de que no queramos más la encuesta, la podemos borrar.

La verdad me ha gustado, por su sencillez, estética agradable y por las herramientas de las que dispone. http://www.polldaddy.com

62

EL ESTUDIANTE DE DISEÑO GRÁFICO EN INTERNET

1.7.1 FUENTES DE ACTUALIZACIÓN Directorios de Widgets:

Encuentra miles de widgets para cualquier web, de escritorio o móviles y plataformas para sus páginas web y blogs. http://www.widgiland.com

Una fresca colección de widgets que puede usar y compartir con los demás. http://www.thespringbox.com

Web basada en componentes que añadir la personalización de sitios web. http://www.loomia.com

EL ESTUDIANTE DE DISEÑO GRÁFICO EN INTERNET

63

Widgetbox es una galería on-line de widgets para blogs y otras páginas web. Ellos trabajan en TypePad, WordPress, Blogger y más cualquier otro blog. http://www.widgetbox.com

Descubre, comparte y disfruta de aplicaciones web para tu vida en Internet. http://www.simplespark.com

Directorios de Redes Sociales: Weblogs SL es la empresa líder en weblogs en español y la mayor de Europa. http://www.weblogssl.com

En esta red podrás encontrar Blogs tales como:

64

Genbeta – Blog de software VidaExtra – Blog de videojuegos Xataka Foto - Blog de Fotografía Applesfera – Blog sobre apple Trendencias – Blog de moda Entre otros…

EL ESTUDIANTE DE DISEÑO GRÁFICO EN INTERNET

http://www.genbeta.com http://www.vidaextra.com http://www.xatakafoto.com http://www.applesfera.com http://www.trendencias.com

http://www.hipertextual.com. En esta red social podrás consultar los siguientes Blogs:

Este tipo de herramientas enriquecerán definitivamente nuestro sitio web, pero no debemos perder nuestro objetivo principal de comunicar, brindar la información específica basada en los objetivos y estrategias establecidas.

Con estos servicios solo tenemos un problema, el cual consiste en que los servicios de hospedaje o funcionalidades adquiridas están fuera de nuestro alcance, así que si el sitio con el cual nos encontramos relacionados llega a fallar, nuestros objetivos y estrategias corren el riesgo de fallar. Sin embargo, estos sitios ofrecen servicios con un costo de alquiler donde nos veremos cubiertos con ciertas garantías sobre el servicio.

El ingresar a este mundo del web 2.0 se ingresa a ser parte de la comunidad, harás parte de un segmento de usuarios que participan en cierta medida con la información cruzada entre redes sociales, compartiendo tus contenidos no solo en una URL independiente sino con una serie de buscadores donde estará la información al alcance de todos los usuarios y visitantes del internet.

Así que tenemos a nuestro alcance el uso de toda una red para nuestro uso y beneficio, con la posibilidad de participar en sectores específicos de nuestro segmento de negocio.

EL ESTUDIANTE DE DISEÑO GRÁFICO EN INTERNET

65

RESULTADOS Y DIS

RESULTADOS Y DISCUCIÓN

66

Durante el desarrollo de este trabajo de investigación pude localizar información

específica a mi área laboral como el diseño web, su planeación y bases para la construcción.

A su vez, aprendí sobre recursos y tecnologías emergentes en internet bajo el concepto del Web 2.0.

Este trabajo de investigación se convierte en una fuente útil para el seguimiento y desarrollo de tecnologías emergentes en Internet.

En este trabajo se puede apreciar el internet como medio de comunicación efectivo para la transmisión de información y de fácil uso.

EL ESTUDIANTE DE DISEÑO GRÁFICO EN INTERNET

CONCLUSIONES El estudiante de diseño gráfico cuenta con una gran variedad de herramientas que le facilitan la producción, promoción y publicación de sus trabajos en un medio como el Internet con sus múltiples aplicaciones y herramientas colaborativas. Algunas de estas herramientas son aplicables y utilizadas debido al surgimiento del concepto aplicado del Web 2.0, el cual nos ofrece una gran variedad de utilidades de manera colaborativa; y facilita la comunicación con grandes grupos de usuarios en la red.

Un beneficio que se presenta en esta nueva era de Internet, es la clasificación de la información, ya sea por programas automatizados como buscadores o por el mismo usuario al crear o participar en redes sociales específicas. Así, de esta forma, tenemos a nuestro alcance el uso de toda una red para nuestro uso y beneficio, con la posibilidad de participar en sectores específicos de nuestro segmento de negocio.

La planeación de los objetivos, las metas, alcances, las estrategias, la construcción, y los planes de mantenimiento son cruciales para el éxito de un proyecto en internet. Teniendo toda esta información, el estudiante de diseño gráfico puede comunicar de manera eficaz la información que se desea.

CONCLUSIONES

Durante este trabajo se establece que el Internet es un medio de comunicación para el estudiante de diseño gráfico que proporciona todas las herramientas necesarias para ello y que se encuentra en constante evolución.

EL ESTUDIANTE DE DISEÑO GRÁFICO EN INTERNET

67

GLOSARIO

Accesibilidad: Es el grado en el que todas las personas pueden utilizar un objeto, visitar un lugar o acceder a un

ADSL: Línea de Suscripción Asimétrica Digital. Tecnología de conexión a internet de banda ancha con velocidad de hasta 16Mbps.

servicio, independientemente de sus capacidades técnicas o físicas.

AJAX: (Asynchronous JavaScript And XML, Javascript y XML Asíncronos) - Técnica de desarrollo web que per-

API (Application Programming interface, Interfaz de Programación de Aplicaciones): Conjunto de especifica-

Applets Java: Son códigos específicos usados en páginas web para ejecutar aplicaciones pre-realizadas con tecnología Java, otro lenguaje de programación ejecutable en internet.

mite modificar la información de una página web sin tener que recargarla completamente, agilizando de esta forma la interacción con el usuario.

ciones para comunicarse con una aplicación, normalmente para obtener información y utilizarla en otros servicios.

Ejemplos: Amazon Web Seivices, Flickr Services, Googie AJAX API.

GLOSARIO

A

68

B

Bases de datos: Son aquellas fuentes de datos donde es almacenada toda la información posterior a su procesamiento.

Blog: En español bitácora. Es un sitio web periódicamente actualizado que recopila cronológicamente textos o artículos de uno o varios autores, apareciendo primero el más reciente, donde el autor conserva siempre la libertad de dejar publicado lo que crea pertinente. El término blog proviene de las palabras web y log (‘log’ en inglés = diario). El término bitácora, en referencia a los antiguos cuadernos de bitácora de los barcos, se utiliza preferentemente cuando el autor escribe sobre su vida propia como si fuese un diario, pero publicado en Internet en línea.

Browser / Navegador: Del inglés, web browser es una aplicación/software que permite al usuario interpretar códigos de internet como el HTML. Ejemplo de estos navegadores son: Netscape Navigator, Internet Explorer, Firefox, Opera.

EL ESTUDIANTE DE DISEÑO GRÁFICO EN INTERNET

E F

GLOSARIO

C

Chat: En español charla, es un anglicismo que usualmente se refiere a una comunicación escrita a través de internet entre dos o más personas que se realiza instantáneamente. Esta puede ser desde y hasta cualquier parte del mundo.

Códigos de programación: Son usados para implementar de manera uniforme y universal

una idea.

Copyright: Derecho que tiene un autor, incluido el autor de un programa informático, sobre to-

das y cada una de sus obras y que le permite decidir en qué condiciones han ser éstas reproducidas y distribuidas. Aunque este derecho es legalmente irrenunciable puede ser ejercido de forma tan restrictiva o tan generosa como el autor decida. El símbolo de este derecho es ©.

CSS: El lenguaje de hojas de estilo en cascada (Cascading Style Sheets) utilizadas para definir la

presentación de un documento HTML

Ethernet: Es un estándar de redes de computadoras enlazadas en un área local.

Flash: Es una aplicación en forma de estudio de animación que trabaja sobre “Fotogramas” destinado a la producción y entrega de contenido interactivo para diferentes audiencias alrededor del mundo sin importar la plataforma. Es actualmente escrito y distribuido por Adobe Systems.

Fallback: Es un punto de restauración previamente planeado.

Foro: En Internet es también conocido como foro de mensajes, de opinión o foro de discusión y

es una aplicación web que le da soporte a discusiones u opiniones en línea.

G

Feedback: Notificación, literalmente realimentación.

Gif: Extensión de archivo gráfico que traduce Graphics Interchange Format (Formato Gráfico de Intercambio).

GUI: En ingles (Graphical User Interface), interfaz grafica de usuario.

Grid: Es español retícula, usada en el diseño para diagramar la composición de una pieza, en nuestro caso, una

pagina web.

EL ESTUDIANTE DE DISEÑO GRÁFICO EN INTERNET

69

H

Hardware: Es la parte física de un computador y más ampliamente de cualquier dispositivo electrónico.

Hipertexto: en informática, es el nombre que recibe el texto que en la pantalla de una computadora conduce a

su usuario a otro texto relacionado. La forma más habitual de hipertexto en documentos es la de hipervínculos o referencias cruzadas automáticas que van a otros documentos.

Hiperenlaces/Hipervínculo: Un hiperenlace (también llamado enlace, vínculo, hipervínculo o link) es un

Internet: Nos referimos a Internet como esa gran nube donde podemos estar conectados a diversos centros de información en todo el planeta y podemos intercambiar información libremente.

elemento de un documento electrónico que hace referencia a otro recurso, por ejemplo, otro documento o un punto específico del mismo o de otro documento.

Interfaz: Es el medio con que el usuario puede comunicarse e interactuar con una máquina, en nuestro caso, con

ISP: Del ingles Internet Sservice Provider (Proveedor de Servicios de Internet) y son aquellos proveedores que facilitan el acceso a Internet.

sitios web.

J

GLOSARIO

I

HTML: siglas de HyperText Markup Language (Lenguaje de Marcas de Hipertexto), es el lenguaje de marcado predominante para la construcción de páginas Web.

L

70

Javascript: Es un lenguaje de programación interpretado, es decir, que no requiere compilación, utilizado principalmente en páginas web con el fin de brindarle funcionalidad al HTML.

JPG: Formato de compresión de imágenes, utilizado para crear logos, banners por su calidad visual en pantalla. Reduce el peso de la imagen, acelerando el tiempo de descarga.

Log-in: En español Autenticación, de una persona ante un sitio en internet Logs: Son los registros de operaciones realizadas en un sistema.

Linux/Unix: También conocido como GNU/Linux, es un sistema operativo similar a Unix

distribuido sin costo alguno. Este sistema es más utilizado como sistema servidor dada la administración de sus servicios.

EL ESTUDIANTE DE DISEÑO GRÁFICO EN INTERNET

O

P

GLOSARIO

M

Macintosh: Tipo de ordenador fabricado por Apple Computer. Su principal característica es el

Marketing: según Philip Kotler (considerado padre del marketing) es “el proceso social y administrativo por el cual los grupos e individuos satisfacen sus necesidades al crear e intercambiar bienes y servicios”

potente interfaz gráfico y la facilidad de manejo

Marketplace:

Mashup (Remezcla): Aplicación web que utiliza información de diversas fuentes relevantes para

OPML (Outline Processor Markup Language, Lenguaje de Marcas para Esquemas) - Un for-

Define el lugar en la red donde se producen intercambios comerciales entre diferentes empresas. Son más importantes en algunos sectores que en otros.

crear un nuevo servicio en base a ellas, normalmente empleando Servicios Web y APIs públicas.

mato para esquemas y listas, en lenguaje XML, que se suele utilizar para compartir información.

P2P (Peer-to-Peer, Entre Pares) - Red informática entre pares o «iguales», normalmente sin servidores centraliza-

dos, donde se puede compartir información de cualquier tipo. Ejemplos: Skype, Windows Live Messenger, BitTorrent, Kazaa, eMule.

PageRank: Es una marca registrada y patentada por Google el 9 de enero de 1999 que ampara una familia de algoritmos utilizados para asignar de forma numérica la relevancia de los documentos (o páginas web) indexados por un motor de búsqueda. El sistema PageRank es utilizado por el popular motor de búsqueda Google para ayudarle a determinar la importancia o relevancia de una página. Fue desarrollado por los fundadores de Google, Larry Page y Sergey Brin, en la Universidad de Stanford.

Permalinks (Enlaces Permanentes): Enlaces fijos a páginas de contenido en Internet que no varían con el tiempo e idealmente son fáciles de leer para las personas.

Píxel: Un píxel o pixel (acrónimo del inglés picture element, “elemento de imagen”) es la menor unidad homogénea en color que forma parte de una imagen digital, ya sea esta una fotografía, un fotograma de vídeo o un gráfico.

Plug-in: Un módulo suplementario que añade funciones a un navegador con miras a soportar ciertos elementos, como soporte para archivos de sonido, vídeo y animación tridimensional, entre otros.

PNG: Portable Network Graphic. Formato de imagen gráfico de alto grado de compresión.

EL ESTUDIANTE DE DISEÑO GRÁFICO EN INTERNET

71

R

Rastreo: Nos referimos a rastreo como la labor de hacer seguimiento a las actividades de un sitio posterior a su instalación, tales como informar sus estadísticas de visitas, posicionamiento, estabilidad de sus enlaces, entre otras.

Red: Es la conexión que existe entre dos y mas computadoras.

REST (Representational State Transfer, Transferencia de Estado Representacional): Filosofía de diseño y arqui

tectura web que se apoya en el intercambio de información mediante XML.

RSS: Es un sencillo formato de datos que es utilizado para redifundir contenidos a suscriptores de un sitio web. El

Ruby on Rails: Entorno de programación (Ralis) que se apoya en el lenguaje Ruby. Goza de gran popularidad para el desarrollo de aplicaciones de tipo Web 2.0 puesto que automatiza las tareas más comunes y permite ciclos cortos para el desarrollo de prototipos.

formato permite distribuir contenido sin necesidad de un navegador, utilizando un software diseñado para leer estos contenidos RSS (agregador). A pesar de eso, es posible utilizar el mismo navegador para ver los contenidos RSS.

S

SEO: Search Engine Optimization, optimización para motores de búsqueda.

Servidor Web: Equipo disponible para almacenar sitio(s) web y mantenerse conectado a

GLOSARIO

internet todo el tiempo.

72

U

Servidor Web: Equipo disponible para almacenar sitio(s) web y mantenerse conectado a

Sitio: Un sitio web (en inglés website) es un conjunto de páginas web, típicamente co-

internet todo el tiempo.

munes a una dirección (dominio) de Internet.

SOAP (Simple Object Access Protocol. Protocolo Simple de Acceso a Objetos): Proto-

Software: Palabra proveniente del inglés, también denominado equipamiento lógico del

Streaming: s un término que se refiere a ver u oír un archivo directamente en una página web sin necesidad de descargarlo antes al ordenador. En términos más complejos podría decirse que describe una estrategia sobre demanda para la distribución de contenido multimedia a través del internet.

URL: Significa Uniform Resource Locator, es decir, localizador uniforme de recurso. Es

colo estándar de comunicación utilizado en los servicios web, mediante e cual dos objetos pueden intercambiar información en XML.

llamado hardware.

una secuencia de caracteres, de acuerdo a un formato estándar, que se usa para nombrar recursos, como documentos e imágenes en Internet, por su localización.

EL ESTUDIANTE DE DISEÑO GRÁFICO EN INTERNET

W

W3C: World Wide Web Consortium. La organización internacional que define normas y reglas para Internet.

WAI (Web Accessibility Initiative): Iniciativa para la Accesibilidad Web. Normativa de accesibilidad para per

sonas con discapacidades, que será de obligatorio cumplimiento para determinados websites de administraciones públicas a partir de 2005.

WebAlizer: Sistema para la gestión de reportes de visitas de un sitio web.

Web 2.0: El término fue acuñado por Tim O’Reilly en 2004 para referirse a una segunda generación en la historia

de la Web basada en comunidades de usuarios y una gama especial de servicios, como las redes sociales, los blogs, entre otros, que fomentan la colaboración y el intercambio ágil de información entre los usuarios por medio de Internet.

Web Master: Es un término comúnmente usado para referirse a las personas responsables de un sitio web espe-

cífico en todas las actividades que ocurren a su alrededor.

Web Semántica: Conceptualmente se basa en añadir significado a los datos, en forma de metadatos, de modo que los ordenadores puedan entender mejor la información que existe en la World Wide Web.

Web site: Conjunto de páginas web que dependen del mismo dominio.

WebTrends: Sistema para la administración, el análisis y presentación de informes de un sitio web.

Widget: Pequeña aplicación o módulo que realiza una función concreta, generalmente de tipo visual, dentro de

otras aplicaciones o sistemas operativos.

Windows: Sistema operativo creado por la empresa Microsoft.

WWW: Siglas que en ingles traducen World Wide Web. Red mundial amplia, conocido también como W3 ó el web.

X

XHTML (eXtensible Hypertext Markup Language, Lenguaje Extensible de Marcas de Hipertexto): Versión XML más avanzada del lenguaje HTML que se utiliza para la creación y visualización de páginas web.

XML (eXtensible Markup Language, Lenguaje de Marcas Extensible): Metalenguaje de uso general que sirve para definir otros lenguajes de programación o formatos de intercambio de información según diversas necesidades. Es muy usado por su simplicidad y uso.

EL ESTUDIANTE DE DISEÑO GRÁFICO EN INTERNET

73

BIBLIOGRAFÍA

Posicionamiento web: el PageRank y el papel de los SEO, http://www.tecnologiapyme.

BIBLIOGRAFÍA

com/2008/09/13-posicionamiento-web-el-pagerank-y-el-papel-de-los-seo, 13 de septiembre de 2008 5 consejos a la hora de contratar un desarrollo web, http://www.tecnologiapyme.com/2008/09/075-consejos-a-la-hora-de-contratar-un-desarrollo-web, 07 de septiembre de 2008 Conceptos básicos en eBusiness, http://www.tecnologiapyme.com/2008/09/12-conceptos-basicos-en-ebusiness, 12 de septiembre de 2008 Mapa Web 2.0, www.internality.com/web20/, 19 de Junio de 2008 13 Free Online Tools That Helps You To Create And Host Your Website, www.smashingapps. com/2008/10/21/13-free-online-tools-that-helps-you-to-create-and-host-your-website.html, 21 de Octubre de 2008 Burdman, Jessica R. 1999. Collaborative Web development: Strategies and best practices for Web teams.

Reading, Mass.: Addison-Wesley. Dobson, Michael Singer. 1996.

Practical project management: Secrets of managing any project on time and on budget.

Mission, Kans.: SkillPath. Frenza, J. P, and Michelle Szabo.

Web and new media pricing guide: A business and pricing guide for Web sites and related digital media.

Indianapolis, Ind.: Hayden Books. Friedlein, Ashley. 2001.

Web project management: Delivering successful commercial Web sites.

San Francisco: Morgan Kaufmann. Graphic Artists Guild et al. 1997.

Graphic Artists Güila handbook: Pricing and ethical guidelines, 9th ed.

Web design: The complete reference. Berkeley, Calif.: McGraw-Hill, Spainhour, Steven, and Robert Eckstein. 1999.

Webmaster in a nutshell: A desktop quick reference, 2d ed. Sebastopol, Calif. O'Reilly.

EL ESTUDIANTE DE DISEÑO GRÁFICO EN INTERNET

75

El estudiante de diseño gráfico cuenta actualmente con una gran variedad de herramientas que le facilitan la producción, promoción y publicación de sus trabajos en un medio como el Internet con sus múltiples aplicaciones y herramientas colaborativas. Algunas de estas herramientas son aplicables y utilizadas debido al surgimiento del concepto aplicado de la Web 2.0, la cual nos ofrece una gran variedad de utilidades de manera colaborativa; y nos facilitan el comunicarnos con grandes grupos de usuarios en la red.

La problemática que se presenta actualmente consiste en que el estudiante de diseño gráfico conoce poco sobre el alcance de las herramientas que le ofrece el Internet.

Por lo tanto, este trabajo busca dar a conocer algunas utilidades y fuentes de publicación presentadas a través de este medio.

Este trabajo de investigación ofrece como producto final una guía práctica para el estudiante de diseño gráfico sobre el uso de herramientas basadas en aplicaciones de Internet para la presentación y gestión de sus trabajos; y adicionalmente los procedimientos que se deben tener en cuenta para la creación de páginas Web y multimedias.