DISEÑO WEB

DISEÑO WEB 1 Tecnología Gráfica diciembre 2007 Inmaculada del Rosal

DISEÑO WEB ARQUITECTURA DE LA INFORMACIÓN Parte 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 impresas Los 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 HTML Tamaño de archivos pequeños Paleta de colores debe adaptarse a los colores disponibles en pantalla final Tipografías limitadas características 1

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 HTML Tamaño de archivos pequeños Paleta de colores debe adaptarse a los colores disponibles en pantalla final Tipografias 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

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

DISEÑO WEB 2.2 PARTICIPANTES EN UN PROYECTO WEB No 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

DISEÑO WEB 2.2 PARTICIPANTES EN UN PROYECTO WEB No 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

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

DISEÑO WEB 3.1 SOFTWARE 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 web 3

DISEÑO WEB 3.1 CREACIÓN DE ANIMACIONES Flash es el programa estándar INTERACTIVIDAD AUDIO Y VIDEO Software de diseño web 3 http://www.donquijotedelamancha2005.com/main.php?L=en

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ÓN
Hace 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…

MODELOS DE ORGANIZACIÓN DE LA INFORMACIÓN I LINEAL Un item informativo es correlativo al anterior: ej. Presentación de obras de un museo JERARQUICO Informaciónes secundarias dependen jerárquicamente de la primera : ej. Organigramas RETICULAR Items 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

MODELOS DE ORGANIZACIÓN DE LA INFORMACIÓN I I MATRIZ Retí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

ARQUITECTURA DE LA INFORMACIÓN EN UN SITIO WEB
Se 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

PAGINA DE INICIO O PORTADA Pagina de entrada Profusion de imágenes Incluye 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

PAGINAS DE SEC CIONES O SUBSECCIONES da 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 ARTICULOS Claridad expositiva Texto 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

http://www.slideshare.net	7
http://blogsdocentes.blogspot.com	5
http://integraldeproyectos.blogspot.com	4
http://blogsdocentes.blogspot.com.es	3
http://www.integraldeproyectos.blogspot.com	2

DISEÑO WEB

by Macu del Rosal

Accessibility

Categories

Upload Details

Usage Rights

5 Embeds 21

Statistics

DISEÑO WEB Presentation Transcript

DISEÑO WEB

by Macu del Rosal

Accessibility

Categories

Upload Details

Usage Rights

5 Embeds 21

Statistics

DISEÑO WEB Presentation Transcript

Let LinkedIn power your SlideShare experience

Let LinkedIn power your SlideShare experience

Customize SlideShare content based on your interests

Keep up to date when your LinkedIn contacts post on SlideShare