Clase dictada en el marco del "Taller de Gráfica Digital" de la FADU UNL, [14/05/2012]

1. tgd2012
Rizoma, hipertexto e
interactividad
edición de páginas web

2. TPN2
Rizoma, interfaz e hipermedio
1. Desarrollo de contenidos hipermediales.
INTERFAZ
2. Diseño de la interfaz.
Estética de la imagen buscada.
3. Diseño de la navegación. Interactividad. NAVEGACIÓN
ESPACIALIZACIÓN
4. Administración de la información.
Estructura de Archivos y Base de Datos.
BASE DE DATOS

3. Hipertexto
“… estructura de información, conformando un documento
de naturaleza digital, asociado a un nombre y formalizado en un
archivo digital, integrado por información de distinta naturaleza
(predominantemente textual, visual y sonora), organizada en nodos
de información conceptualmente interconectados entre sí por
medio de nexos, estructurado de forma no lineal y no
secuencial, y vinculado a redes que son recorridas en
direcciones multilineales en el ciberespacio.”
Rodríguez Barros, Diana. 2004.
Hipermedios y Modelos Virtuales de Fragmentos Urbanos.

4. Hipertexto
Documento digital hipertextual
1. 2.
Contenidos o Estructura de
nodos de
información + enlaces entre los
nodos
Página Web Hipervínculos (links): Esquema de un
Puede contener elementos binarios, sitio web
textos, gráficos, bidireccionales, con
sonidos, imágenes... nombre y tipo
determinado.

5. Hipertexto
Red de nodos entre los cuales existen vínculos.
Texto tradicional En síntesis,
un hipertexto es,
a diferencia de un texto
escrito, un documento
no secuencial.
Lineal Multidireccional
Estático Dinámico
Secuencial Múltiples puntos de acceso
y enlace
(comienzo, desarrollo, fin)
Cada uno construye su
Construido por el emisor
propia información
“…disolución de la frontera escritor – lector entendida como
textualidad dinámica, por la fusión de la palabra y de la imagen…”
“…modificación en el modo de leer y también de producir sentido.”

6. HTML
El lenguaje más utilizado para
codificar las páginas web es el Código
"Lenguaje de marcación de
Hipertexto", conocido por sus
siglas HTML (Hypertext
Markup Language).
Éste serepresenta con
texto puro respetando una
estructura que define su
presentación y contenido.
Otros: XML – XHTML
(vinculados a web semántica) Cómo la muestra
el Navegador...

7. Código

8. Cómo la muestra
el Navegador...

9. Crear un Sitio Web...
Las tareas comprometidas en el desarrollo de un sitio web son:
• Estructurar el sitio. Dar algún tipo de estructura lógica a los
textos e imágenes. Organizar la Estructura de Archivos y el
Diseño del Entorno de navegación.
• Editar gráficos (imágenes, botones, etc.) que serán insertados.
• Crear páginas, incorporando texto y gráficos.
• Crear Hipervínculos (Links) que relacionen las distintas
páginas.
• Probar el sitio en un navegador.
• Subir el sitio a la Web.
• Agregar el sitio en los buscadores.
• Estudio del perfil de usuarios. Actualización permanente.

10. 1 Estructurar el Sitio
Será importante en primer lugar, la
organización de la información que
queremos mostrar, definir la estructura
de archivos, vínculos y jerarquías.....
http://www.fadu.unl.edu.ar/imd

11. Diseño de la interfaz
Simultáneamente a la organización de los archivos que se integrarán a nuestro
sitio, es importante definir el diseño del entorno de navegación que le
daremos al mismo.
Encabezado
Barra de navegación de 1º Nivel
Barra de Menú
Título <Nav. Horizontal >
Barra de
navegación Contenidos
de 2º Nivel
<< Barra de Navegación >> < Nav. Horizontal >
Debemos pensar, por ejemplo, si tendremos una barra de menús superior o
lateral, dónde se ubicarán los “botones” de los vínculos, dónde se mostrarán los
contenidos principales de la página, qué proporción tendrá cada una de estas
áreas, imágenes y diseños de fondo que utilizaremos, etc.

13. Arte Interactivo, Ecología
https://www.ecotonoha.com/
Estructura
de archivos

14. Estudio de Arquitectura, US.
http://www.asymptote-architecture.com/
Estructura de Archivos

15. Crear un Sitio Web...
Las tareas comprometidas en el desarrollo de un sitio web son:
• Estructurar el sitio. Dar algún tipo de estructura lógica a los
textos e imágenes. Organizar la Estructura de Archivos y el
Diseño del Entorno de navegación.
• Editar gráficos (imágenes, botones, etc.) que serán insertados.
• Crear páginas, incorporando texto y gráficos.
• Crear Hipervínculos (Links) que relacionen las distintas
páginas.
• Probar el sitio en un navegador.
• Subir el sitio a la Web.
• Agregar el sitio en los buscadores.
• Estudio del perfil de usuarios. Actualización permanente.

16. 2 Editar gráficos e imágenes
Existen numerosas diferencias en cuanto a la edición de
imágenes destinadas a ser impresas y aquellas que deseamos
publicar en la web....
Imágenes Publicación Impresa Publicación Web
.BMP / . TIFF /
• Formatos .JPG / .GIF / . PNG / .SWF
.JPG / . GIF / .TGA
CYMK
• Modo Color RGB (Red, Green, Blue)
(Cyan, Yellow, Magenta, Black)
• Resolución 250 / 300 dpi 72 / 96 dpi
• Medidas en... centímetros píxeles
GIF Animados
• Animación -----
SWF (películas de Flash)

17. > Formatos
Archivos GIF (Formato de Intercambio Gráfico)
• imágenes pixelares.
• máximo de 256 colores.
• buen formato para imágenes de colores planos,
(barras de navegación, botones, iconos, logotipos)
• permiten crear imágenes con fondos transparentes
• permiten crear imágenes animadas.
Archivos JPEG (Grupo Conjunto de Expertos Fotográficos)
• imágenes pixelares.
• pueden contener millones de colores.
• es el mejor formato para imágenes fotográficas
• suelen ser más grandes que los archivos GIF
• Cuando aumenta la calidad de un archivo JPEG, también
aumenta su tamaño y el tiempo que tarda en descargarse.
Archivos SWF
• gráficos vectoriales
• no pierden definición cuando se redimensionan
• alta calidad gráfica, bajo tamaño de archivo.
• permiten crear imágenes animadas
• permiten incluir música. Ampliación (zoom) de imagen
vectorial

18. > Softwares para la edición de imágenes
Softwares de edición de mapas de
bits o de retoque fotográfico.
Softwares de edición de
gráficos vectoriales

19. > Medidas / Resolución
Definir siempre en
Píxeles

20. Importante
!
Al insertar una imagen en un archivo HTML, el programa genera
automáticamente una referencia al archivo gráfico en el código HTML.
> La imagen en
sí NO es
ingresada en
el documento.
Siempre es aconsejable organizar los archivos de imágenes en una carpeta
“imagenes” dentro de nuestro sitio local, para facilitar su búsqueda y mantener
organizado el sitio.

21. Crear un Sitio Web...
Las tareas comprometidas en el desarrollo de un sitio web son:
• Estructurar el sitio. Dar algún tipo de estructura lógica a los
textos e imágenes. Organizar la Estructura de Archivos y el
Diseño del Entorno de navegación.
• Editar gráficos (imágenes, botones, etc.) que serán insertados.
• Crear páginas, incorporando texto y gráficos.
• Crear Hipervínculos (Links) que relacionen las distintas
páginas.
• Probar el sitio en un navegador.
• Subir el sitio a la Web.
• Agregar el sitio en los buscadores.
• Estudio del perfil de usuarios. Actualización permanente.

22. 3 Crear las páginas
Existen múltiples programas que nos permiten producir
presentaciones web, combinar y manipular textos, e insertar
gráficos, videos y animaciones, trabajando en entornos de edición
totalmente gráficos, sin la necesidad de escribir una sola línea de
código html.
Entre los editores de Html:
Microsoft Front Page fue
uno de los primeros editores
de Html en alcanzar gran
difusión debido a su
distribución como parte del
paquete de Microsoft Office.
En la actualidad, sin embargo,
Adobe Dreamweaver es el
editor de HTML profesional
más difundido para el diseño y
administración visual de
páginas y sitios Web.

23. > Otros softwares
Existen otros programas que nos permiten exportar
nuestros diseños como presentaciones web, trabajando
en entornos de edición totalmente gráficos (como ser
Corel), o bien en el mismo entorno de edición de texto
que utilizamos habitualmente, en el caso de Word.

24. Crear un Sitio Web...
Las tareas comprometidas en el desarrollo de un sitio web son:
• Estructurar el sitio. Dar algún tipo de estructura lógica a los
textos e imágenes. Organizar la Estructura de Archivos y el
Diseño del Entorno de navegación.
• Editar gráficos (imágenes, botones, etc.) que serán insertados.
• Crear páginas, incorporando texto y gráficos.
• Crear Hipervínculos (Links) que relacionen las distintas
páginas.
• Probar el sitio en un navegador.
• Subir el sitio a la Web.
• Agregar el sitio en los buscadores.
• Estudio del perfil de usuarios. Actualización permanente.

25. 4 Crear los hipervínculos
El objetivo de los HIPERVINCULOS es establecer conexiones desde su
documento hasta otro documento o tipo de archivo. Brindan el elemento
de navegación.
DESDE: HACIA:
• texto • páginas web
• imágenes • imágenes
• partes de imágenes • todo tipo de documentos
Es fundamental conocer la ruta de archivo entre el documento de origen
del enlace y el documento de destino.
Cada página Web tiene una dirección exclusiva, denominada URL
(Localizador Uniforme de Recursos), a donde podemos hacer el link:
• Rutas absolutas (como http://www.yahoo.com.ar).
Si se crea un enlace local (un enlace desde un documento hasta otro
documento del mismo sitio), se especifica una ruta relativa desde el
documento actual.
• Rutas relativas al documento (como imd/tutorial.htm).

26. Crear un Sitio Web...
Las tareas comprometidas en el desarrollo de un sitio web son:
• Estructurar el sitio. Dar algún tipo de estructura lógica a los
textos e imágenes. Organizar la Estructura de Archivos y el
Diseño del Entorno de navegación.
• Editar gráficos (imágenes, botones, etc.) que serán insertados.
• Crear páginas, incorporando texto y gráficos.
• Crear Hipervínculos (Links) que relacionen las distintas
páginas.
• Probar el sitio en un navegador.
• Subir el sitio a la Web.
• Agregar el sitio en los buscadores.
• Estudio del perfil de usuarios. Actualización permanente.

27. 5 Probar el sitio
Debemos establecer como regla básica el
ir probando y verificando que el sitio funcione
correctamente.
• No debemos esperar al final del diseño del sitio para
probarlo con más de un navegador
o más de una resolución gráfica de monitor.
verificar que la
• Por otra parte hay que
estructura del sitio es efectiva y la
navegación brinda el servicio esperado, es aconsejable
hacerlo con otra persona que nunca haya navegado el sitio.
• Comprobar que los vínculos

28. Crear un Sitio Web...
Las tareas comprometidas en el desarrollo de un sitio web son:
• Estructurar el sitio. Dar algún tipo de estructura lógica a los
textos e imágenes. Organizar la Estructura de Archivos y el
Diseño del Entorno de navegación.
• Editar gráficos (imágenes, botones, etc.) que serán insertados.
• Crear páginas, incorporando texto y gráficos.
• Crear Hipervínculos (Links) que relacionen las distintas
páginas.
• Probar el sitio en un navegador.
• Subir el sitio a la Web.
• Agregar el sitio en los buscadores.
• Estudio del perfil de usuarios. Actualización permanente.

29. 6 Subir el sitio a la web
Existen sitios y empresas que ofrecen servicios de Hosting
(alojamiento de sitios web), pagos o gratuitos.
http://web.tgdfadu.com.ar/tp3.html
http://www.freeservers.com/
http://www.multimania.es/

30. Crear un Sitio Web...
Las tareas comprometidas en el desarrollo de un sitio web son:
• Estructurar el sitio. Dar algún tipo de estructura lógica a los
textos e imágenes. Organizar la Estructura de Archivos y el
Diseño del Entorno de navegación.
• Editar gráficos (imágenes, botones, etc.) que serán insertados.
• Crear páginas, incorporando texto y gráficos.
• Crear Hipervínculos (Links) que relacionen las distintas
páginas.
• Probar el sitio en un navegador.
• Subir el sitio a la Web.
• Agregar el sitio en los buscadores.
• Estudio del perfil de usuarios. Actualización permanente.

31. 7 Agregar el sitio en los buscadores
Existen sitios y empresas que ofrecen servicios
para suscribir el sitio en los buscadores.
Pueden ser pagos o gratuitos.
http://www.google.es/webmasters/#
utm_medium=et&utm_source=bizso
ls&utm_campaign=sitemaps
http://www.addme.com/

32. Crear un Sitio Web...
Las tareas comprometidas en el desarrollo de un sitio web son:
• Estructurar el sitio. Dar algún tipo de estructura lógica a los
textos e imágenes. Organizar la Estructura de Archivos y el
Diseño del Entorno de navegación.
• Editar gráficos (imágenes, botones, etc.) que serán insertados.
• Crear páginas, incorporando texto y gráficos.
• Crear Hipervínculos (Links) que relacionen las distintas
páginas.
• Probar el sitio en un navegador.
• Subir el sitio a la Web.
• Agregar el sitio en los buscadores.
• Estudio del perfil de usuarios. Actualización permanente.

33. 8 Estudio de los usuarios. Actualización
Una herramienta muy importante para definir las modificaciones y
actualizaciones necesarias en el sitio es el estudio del perfil de los usuarios.
https://www.google.com/analytics/home/login?reset=1

34. http://www.fadu.unl.edu.ar/imd

37. Gráfico de visitas
por ubicación
76.126 visitas de 47 países

38. Frecuencia y visitas recientes
24.943 usuarios únicos han realizado 76.126 visitas

39. 51.063 usuarios recurrentes (67%) han visitado el sitio más de 2 veces

40. Promedio de tiempo en el sitio
Páginas por visita

41. Fuentes de tráfico
76.126 usuarios han utilizado 3 fuentes de tráfico

42. Palabras claves
La búsqueda ha enviado 24.370 visitas a través de 2.057 palabras clave

43. Sistema Operativo
76.126 visitas han usado 12 sistemas operativos / 98% ha utilizado Windows

44. Navegador
76.126 visitas han usado 17 navegadores / 51,5% ha usado Internet Explorer

45. Dispositivos móviles
68 visitas por dispositivos móviles (0,09%) / 47% con sist. operativo Android

46. Resolución de pantalla
Se han usado 244 resoluciones de pantalla / 44% ha usado 1024 x 768 pixeles

47. Importante
!
“DISEÑAR el entorno de navegación significa SUGERIR
la forma en que deseamos que se vea"
Es una de las grandes diferencias con otras ramas del diseño. La
web fue pensada para la transmisión de contenidos en una estructura
estándar que pueda ser visualizada en todas las computadoras con
un navegador web.
Por lo tanto, el producto final puede DIFERIR de usuario a
usuario. Depende de:
• los sistemas operativos,
• software de navegación,
• capacidades gráficas de las computadoras,
• tamaño del monitor o configuración de la pantalla....

48. Monitor 14’ / Configuración de Pantalla 800 x 600
800 píxeles
600
píxeles
8,50% de los usuarios

49. Monitor 17’ / Configuración de Pantalla 1024 x 768
1024 píxeles
768
píxeles
47,71% de los usuarios

50. Monitor 19’ / Configuración de Pantalla 1280 x 1024
1280 píxeles
1024
píxeles
43,79% de los usuarios

51. Crear un Sitio Web...
Las tareas comprometidas en el desarrollo de un sitio web son:
• Estructurar el sitio. Dar algún tipo de estructura lógica a los
textos e imágenes. Organizar la Estructura de Archivos y el
Diseño del Entorno de navegación.
• Editar gráficos (imágenes, botones, etc.) que serán insertados.
• Crear páginas, incorporando texto y gráficos.
• Crear Hipervínculos (Links) que relacionen las distintas
páginas.
• Probar el sitio en un navegador.
• Subir el sitio a la Web.
• Agregar el sitio en los buscadores.
• Estudio del perfil de usuarios. Actualización permanente.