1

DISEÑO WEB 1

Tecnología Gráfica diciembre 2007

Inmaculada del Rosal

2

DISEÑO WEB

ARQUITECTURA DE LA INFORMACIÓNParte de supuestos gráficos relativos al mundo de la impresión

Se trabaja no sobre soporte materico ( papel) sino sobre soporte virtual ( píxeles de luz )

Los documentos se generan a partir de un leguaje de programación en código HTML( hiper text mark lenguaje- lenguaje de etiquetado de hipertexto)

La información no se presenta exclusivamente de una manera lineal. La posibilidad de generar hiperenlaces facilita la navegación multidirecciónal por el documento de hipertexto.

La ejecución de la producción de documentos digitales para la web es muy rápida en comparación con producciones gráficas impresasLos costos de difusión de la información generada son muy baratos: servidores gratuitos

Permite acceder a documentos impresos a traves de formatos de archivo digitales: documentos PDF

REGLAS BÁSICAS PARA PROGRAMAR HTMLTamaño de archivos pequeñosPaleta de colores debe adaptarse a los colores disponibles en pantalla finalTipografías limitadas

características1

3

DISEÑO WEB

IDENTIFICACIÓN DEL PUBLICO OBJETIVO- Mensaje básico que se quiere transmitir a los visitantes de la pg Web- A que público va dirigida: edad, intereses- Como se comporta la competencia para mostrar los contenidos- Que es lo que la va a hacer mas atractiva para mi publico objetivo

DEFINICIÓN DEL SITIO WEB- Modelo de definición de la página: dinámica, seria, entretenida- Como refuerza la imagen que el público visitante tiene de la empresa- Que elementos de la imagen corporativa de la empresa debe recoger*- Que grado de uniformidad debe mantener con los otros elementos de comunicación de la empresa- Que elementos de la competencia funcionan adecuadamente y como

CONTENIDO DEL SITIO WEB - De que secciones se va a componer, como se van a organizar los contenidos- Que materiales están a mi disposición

-imágenes, videos, animaciones, documentos y archivos- Quien y como se va a generar el material: producción externa o interna dentro de la empresa de

desarrollo- Quien valida la pertinencia de los contenidos

REGLAS BÁSICAS PARA PROGRAMAR HTMLTamaño de archivos pequeñosPaleta de colores debe adaptarse a los colores disponibles en pantalla finalTipografias limitadas

Planificación de un sitio Web

2

Serie de preguntas y aspectos que hay que plantearse y determinar antes de abordar el desarrollo de un sitio Web

4

DISEÑO WEB

DETALLES TÉCNICOS- Que plataformas se van a usar - Con que navegadores se va a abrir (www.w3c.org)para que la información sea accesible desde cualquier conexión a Internet- Incorpora una base de datos: especificar la base de datos y el sitio hosting donde se va a

alojar- Que transacciones se van a realizar: datos bancarios, datos personales…

ETRATEGIAS DE MARKETING-COMUNICACIÓN- Como se va a promocionar el sitio: promoción externa, promoción interna dentro de la

empresa- Como se va a financiar el sitio

DATOS ADMINISTRATIVOS- Cual va a ser el proceso de actualización del sito Web- Quien va a ser el responsable- Datos de contacto de los responsables- Registrar el nombre de dominio- Determinar la fecha de lanzamiento- De cuanto presupuesto se cuenta para desarrollar el sitio web

Planificación de un sitio Web

2

Serie de preguntas y aspectos que hay que plantearse y determinar antes de abordar el desarrollo de un sitio Web

5

DISEÑO WEB

2.2 PARTICIPANTES EN UN PROYECTO WEBNo son tareas exclusivas pero si interesa que los profesionales sean especializados. En el mundo de la edición digital las fronteras de la especialización están cada vez mas difusas, atendiendo al concepto de Renacimiento Digital

DIRECTOR DEL PROYECTO:

- Relación con el cliente y seguimiento del desarrollo de la página en todos sus pasos

- Solucionar los problemas en el desarrollo

- Coordinar los trabajos de los diferentes miembros del equipo

DIRECTOR DE ARTE / DISEÑADOR

- Diseñar la imagen gráfica de la página

- Generar los elementos gráficos que definirán la página adecuándolos a los condicionantes del medio

- Debe conocer teoría sobre plataformas de navegación y editores web, html y CCS ( hojas de estilo en cascada)

- Debe manejar conceptos relativos a Internet: hipertexto, usabilidad

EDITOR Y REDACTOR

- Encargado de ajustar los textos al formato de navegación: enlaces, motores, scrolls

- Adecuar el texto al formato de lectura: textos breves, de fácil visualización y lectura

Producción de un sitio Web

2

6

DISEÑO WEB

2.2 PARTICIPANTES EN UN PROYECTO WEBNo son tareas exclusivas pero si interesa que los profesionales sean especializados. En el mundo de la edición digital las fronteras de la especialización están cada vez mas difusas, atendiendo al concepto de Renacimiento Digital

CODIFICADOR HTML

- A partir del trabajo desarrollado por el director de arte llevará a cabo la programación en lenguajes HTML( programación HTML o Software específico de edición) y aplicación de estilos CSS para el desarrollo de la pagina

- Velará por una descarga rápida de las paginas del sitio

- Sean accesibles desde distintos accesos a Internet

PROGRAMADOR- INFORMATICO

- Se encargará de las tareas de interacción complejas: integración de bases de datos, transaciones electrónicas ( PHP o APS)

Producción de un sitio Web

2

7

DISEÑO WEB

2.3•MAPA DEL SITIO•CALENDARIO DE TRABAJO•ACTUALIZACIÓN DEL SITIO•COMPROBACIÓN DEL FUNCIONAMIENTO DEL SITIO

Pasos en Proceso de producción de un sitio

Web

2

8

DISEÑO WEB

3.1SOFTWARE DE EDICIÓN

- Código fundamental de creación de paginas web es HTML (hiper text mark lenguaje)( lenguaje

de etiquetado de hipertexto)

- Las aplicaciones comerciales para desarrollo son :

- Dreamweaver Macromedia: une funcionalidades de diseño y posibilidad de introducir elementos dinámicos.

- Genera Código html directamente

- Permite trabajar el código directamente

- Front-page Microsoft

- Softpress ( para Mac)

EDICIÓN DE IMÁGENES

- Las imágenes fotográficas deben ser tratadas con un programa de retoque de imagen:

Photoshop (Adobe) o Fireworks ( Macromedia) Permiten bajar la resolución y el tamaño del archivo necesario para poder editar imágenes en Internet con poco peso digital ( recomendamos formato GIF 72 ppp de resolución) o en JPEG de

baja resolución

Software de diseño web3

9

DISEÑO WEB

3.1CREACIÓN DE ANIMACIONES

Flash es el programa estándar

INTERACTIVIDAD

AUDIO Y VIDEO

Software de diseño web3

http://www.donquijotedelamancha2005.com/main.php?L=en

10

ESTRUCTURA DE DISEÑO WEB

ARQUITECTURA DE LA INFORMACIÓN-libro-aplicación de software-musica-exibición-sitio web ….

DISEÑO DE LA INFORMACIÓNHace referencia a la organización de los datos en estructuras informativa:-Mapa-Texto-Partitura-Diseño-Página web…

ORGANIZACIÓN ESTRUCTURADA DE DATOS-Frase-Esquema-Modelos numéricos-Gráfico-Sistemas de señales…

11

MODELOS DE ORGANIZACIÓN DE LA INFORMACIÓN I

LINEALUn item informativo es correlativo al anterior: ej. Presentación de obras de un museo

JERARQUICOInformaciónes secundarias dependen jerárquicamente de la primera : ej. Organigramas

RETICULARItems informativos están interrelacionados: ej. Juego interactivo

PARALELO

Las informaciones se presentan de forma simultanea y todas tienen la misma importancia informativa: parrilla televisiva

ESTRUCTURA DE DISEÑO WEB

12

MODELOS DE ORGANIZACIÓN DE LA INFORMACIÓN I I

MATRIZRetícula organizada de acceso a información

ZOOM JERARQUICO

A partir de una micro información contenida en una pagina pasamos al siguiente item de información que supondrá una ampliación de la previa

ESTRUCTURA DE DISEÑO WEB

13

ARQUITECTURA DE LA INFORMACIÓN EN UN SITIO WEBSe encarga de la planificación , análisis, estudio y selección //organización disposición y estructuración de espacios de información Se encarga de la presentación de los datos contenidos en los sistemas de información interactivos.

1 PAGINA DE INICIO O PORTADA

2 PAGINAS DE SECCION

3 PAGINAS DE CONTENIDOS:• CATALOGO• FORMULARIOS• FICHAS DE PRODUCTO

ESTRUCTURA DE DISEÑO WEB

14

PAGINA DE INICIO O PORTADAPagina de entradaProfusion de imágenesIncluye animaciones.

Debe ser atractiva para invitar a entrar en el sitio

Se debe proporcionar acceso a las paginas de secciones

ESTRUCTURA DE DISEÑO WEB

15

PAGINAS DE SEC CIONES O SUBSECCIONESda acceso a artículos relacionados

Se deben distinguir las distintas secciones : uso del color o esquemas gráficos.Deben ser de fácil actualización.

PAGINA DE CONTENIDOS O ARTICULOSClaridad expositivaTexto importante frente a imagen.Se debe evitar volver a paginas de nivel superior para avanzar en la navegación

Su diseño puede estar basado en Frames ( marcos)

ESTRUCTURA DE DISEÑO WEB