clase de edición de páginas web

tgd2012Rizoma, hipertexto e

interactividad

edición de páginas web

1. Desarrollo de contenidos hipermediales.

2. Diseño de la interfaz. Estética de la imagen buscada.

3. Diseño de la navegación. Interactividad.

4. Administración de la información. Estructura de Archivos y Base de Datos.

TPN2 Rizoma, interfaz e hipermedio

INTERFAZ

NAVEGACIÓN

ESPACIALIZACIÓN

BASE DE DATOS

“…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.

Documento digital hipertextual

Esquema de un sitio web

Contenidos onodos de información

Página WebPuede 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.

+

Hipertexto

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.”

Texto tradicional

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 (vinculados a web semántica)

HTML

Código

Cómo la muestra el Navegador...

Código

Cómo la muestra el Navegador...

Crear un Sitio Web...

Las tareas comprometidas en el desarrollo de un sitio web son:

1. 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.

2. Editar gráficos (imágenes, botones, etc.) que serán insertados.

3. Crear páginas, incorporando texto y gráficos.

4. Crear Hipervínculos (Links) que relacionen las distintas páginas.

5. Probar el sitio en un navegador.

6. Subir el sitio a la Web.

7. Agregar el sitio en los buscadores.

8. Estudio del perfil de usuarios. Actualización permanente.

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

Diseño de la interfaz

Barra de navegación de 1º Nivel

Barra de Menú

<< Barra de Navegación >>

Encabezado

Barra de navegación de 2º Nivel

Título <Nav. Horizontal >

Contenidos

< Nav. Horizontal >

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.

Arte Interactivo, Ecología https://www.ecotonoha.com/

Estructura de archivos

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

Estructura de Archivos

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

• Formatos.BMP / . TIFF /

.JPG / . GIF / .TGA.JPG / .GIF / . PNG / .SWF

• Modo ColorCYMK

(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)

Editar gráficos e imágenes2

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.

> Formatos

Ampliación (zoom) de imagen vectorial

Softwares de edición de mapas de bits o de retoque fotográfico.

Softwares de edición de gráficos vectoriales

> Softwares para la edición de imágenes

Definir siempre enPíxeles

> Medidas / Resolución

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.

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, 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.

Entre los editores de Html:

Crear las páginas3

> 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.

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ínculos4

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 sitio5

Existen sitios y empresas que ofrecen servicios de Hosting (alojamiento de sitios web), pagos o gratuitos.

Subir el sitio a la web6

http://www.freeservers.com/http://www.freeservers.com/

http://www.multimania.es/ http://www.multimania.es/

http://web.tgdfadu.com.ar/tp3.html http://web.tgdfadu.com.ar/tp3.html

Existen sitios y empresas que ofrecen servicios para suscribir el sitio en los buscadores. Pueden ser pagos o gratuitos.

Agregar el sitio en los buscadores7

http://www.google.es/webmasters/#utm_medium=et&utm_source=bizs

ols&utm_campaign=sitemapshttp://www.addme.com/

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ón8

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

Gráfico de visitas por ubicación

76.126 visitas de 47 países

24.943 usuarios únicos han realizado 76.126 visitas

Frecuencia y visitas recientes

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

Promedio de tiempo en el sitio

Páginas por visita

76.126 usuarios han utilizado 3 fuentes de tráfico

Fuentes de tráfico

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

Palabras claves

76.126 visitas han usado 12 sistemas operativos / 98% ha utilizado Windows

Sistema Operativo

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

Navegador

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

Dispositivos móviles

Se han usado 244 resoluciones de pantalla / 44% ha usado 1024 x 768 pixeles

Resolución de pantalla

“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

Monitor 14’ / Configuración de Pantalla 800 x 600

800 píxeles

600píxeles

8,50% de los usuarios

Monitor 17’ / Configuración de Pantalla 1024 x 768

1024 píxeles

768píxeles


Monitor 19’ / Configuración de Pantalla 1280 x 10241280 píxeles

1024píxeles


clase de edición de páginas web

Education