Clase de edicion de sitios web. Taller de Grafica Digital 2011. FADU UNL

1. tgd taller de grafica digital Rizoma, hipertexto e interactividad edición de páginas web

3. “… 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 .” Hipertexto Rodríguez Barros, Diana. 2004. Hipermedios y Modelos Virtuales de Fragmentos Urbanos.

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

5. Red de nodos entre los cuales existen vínculos . En síntesis, un hipertexto es, a diferencia de un texto escrito, un documento no secuencial . Lineal Estático Secuencial (comienzo, desarrollo, fin) Construido por el emisor Multidireccional Dinámico Múltiples puntos de acceso y enlace Cada uno construye su propia información Hipertexto “… 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. El lenguaje más utilizado para codificar las páginas web es el "Lenguaje de marcación de Hipertexto", conocido por sus siglas HTML (Hypertext Markup Language). Éste se representa con texto puro respetando una estructura que define su presentación y contenido. Otros: XML - XHTML HTML Código Cómo la muestra el Navegador...

7. Código

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

9. Sitios Web recomendados

11. 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..... 1 http:// www.fadu.unl.edu.ar/imd

12. Diseño de la interfaz Barra de navegación de 1º Nivel << Barra de Navegación >> Barra de navegación de 2º Nivel 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. 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. Barra de Menú Encabezado Título <Nav. Horizontal > Contenidos < Nav. Horizontal >

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

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

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

18. Archivos GIF (Formato de Intercambio Gráfico) • imágenes pixelares . • máximo de 256 colores . • es el mejor 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 . > Formatos Ampliación ( zoom ) de imagen vectorial

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

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

21. 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 . > ! Importante 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.

23. 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. 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, Macromedia Dreamweaver se ha convertido en el editor de HTML profesional más difundido para el diseño y administración visual de páginas y sitios Web. Los editores de Html más utilizados son FrontPage y Dreamweaver . Crear las páginas 3

24. 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 . > Otros softwares

26. El objetivo de los HIPERVINCULOS es establecer conexiones desde su documento hasta otro documento o tipo de archivo. Brindan el elemento de navegación. 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 ). DESDE: • texto • imágenes • partes de imágenes HACIA: • páginas web • imágenes • todo tipo de documentos Crear los hipervínculos 4

28. 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. Por otra parte hay que verificar que la 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 funcionen correctamente. Probar el sitio 5

30. Existen sitios y empresas que ofrecen servicios de Hosting (alojamiento de sitios web), pagos o gratuitos. http://www.tripod.lycos.es/ Subir el sitio a la web 6 http://www.freeservers.com/

32. Existen sitios y empresas que ofrecen servicios para suscribir el sitio en los buscadores . Pueden ser pagos o gratuitos. http://www.google.com.ar/addurl/?hl=es&continue=/addurl http://www.addme.com/ Agregar el sitio en los buscadores 7

34. 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 Estudio de los usuarios. Actualización 8

38. “ 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.... ! Importante

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

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

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