clase de edición de páginas web
DESCRIPTION
Clase dictada en el marco del "Taller de Gráfica Digital" de la FADU UNL, [14/05/2012]TRANSCRIPT
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
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.
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.
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.
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.
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.
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
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.
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
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.
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
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.
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/
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.
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
47,71% de los usuarios
Monitor 19’ / Configuración de Pantalla 1280 x 10241280 píxeles
1024píxeles
43,79% de los usuarios
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.