TALLER WEB PREPARACION PRIMER EJERCICIO LAYOUT WEB http://web450.wordpress.com Diseño Publicitario Multimedial · IP Santo Tomás · José Joo Villablanca DG & otras yerbas · http://web450.wordpress.com

Definiendo nuestra web TALLER WEB PREPARACION PRIMER EJERCICIO Definiendo nuestra web Antes de pasar horas armando nuestra web en los softwares que necesitemos, debemos crear un LAYOUT de lo que haremos. Un simple boceto en donde definamos la profundidad de nuestra web, la cantidad de páginas así como los recursos que ocuparemos. Esta simple acción de BOCETAJE, nos ayudará a presentar una maqueta a nuestro cliente y también a CUANTIFICAR en TIEMPO y DINERO. Diagrama de navegación Ejercicio 1 Boceto gráfico Diseño Publicitario Multimedial · IP Santo Tomás · José Joo Villablanca DG & otras yerbas · http://web450.wordpress.com

Diagrama de navegación TALLER WEB PREPARACION PRIMER EJERCICIO Diagrama de navegación Toda web tiene una página de inicio, que es la portada o INDICE de cualquier libro. Hacemos esta comparación para entender la importancia de ser la página principal. Generalmente aquí aparece una presentación acotada de el sitio, empresa o producto. Como es la página INICIAL y contendrá el INDICE, al momento de diseñar nuestro proyecto deberemos nombrarlo como INDEX – quedando de la siguiente forma: INDEX .HTML: Es el nombre que reconoce los navegadores por defecto para mostrarnos un sitio web. Entonces debemos empezar a proyectar desde el INDEX. Diseño Publicitario Multimedial · IP Santo Tomás · José Joo Villablanca DG & otras yerbas · http://web450.wordpress.com

Página inicial de nuestra web TALLER WEB PREPARACION PRIMER EJERCICIO Diagrama de navegación EL INDEX DEBE ENTREGAR: Contenido básico para seguir navegando Información corporativa Información de contacto Dar opción de conectar a otra web Página inicial de nuestra web NO ES UNA REGLA LOS PUNTOS DESCRITOS, PERO HAY QUE RECORDAR SIEMPRE QUE ESTAMOS DISEÑANDO UNA WEB PARA USUSARIOS ESPECIFICOS Y NO PARA NOSOTROS. INDEX.HTML Diseño Publicitario Multimedial · IP Santo Tomás · José Joo Villablanca DG & otras yerbas · http://web450.wordpress.com

Diagrama de navegación TALLER WEB PREPARACION PRIMER EJERCICIO Diagrama de navegación LAS PAGINAS DE CONTENIDO: Aquí debemos diseñar la información generando atención sobre lo que queremos comunicar. Siempre debemos llegar de manera directa a nuestro usuario. Para que dar mil vueltas a quién busca una solución a un par de cliks. Página de contenidos EL HECHO DE ENTREGAR UNA INFORMACIÓN DIRECTA, NO DICE QUE DEBA SER FOME. SIN DUDA ES NUSTRA MISIÓN SEDUCIR MEDIANTE LA IMAGEN, EL DISEÑO ATRACTIVO NORMADO POR UNA INTENCIÓN. CONTENIDO_1.HTML Diseño Publicitario Multimedial · IP Santo Tomás · José Joo Villablanca DG & otras yerbas · http://web450.wordpress.com

Contenidos ESPECÍFICO TALLER WEB PREPARACION PRIMER EJERCICIO Diagrama de navegación LAS PAGINAS DE CONTENIDO ESPECÍFICO: Podemos entregar una información detallada de el contenido agregando páginas especiales en donde se muestren más detalles. Contenidos ESPECÍFICO AQUÍ PODEMOS UTILIZAR GALERÍAS DE PRODUCTOS, APLICACIÓN DE FORMULARIOS DE CONTACTO. ES IMPORTANTE GENERAR UNA INTERACCION CON NUESTRO USUARIO. GALERIA.HTML Diseño Publicitario Multimedial · IP Santo Tomás · José Joo Villablanca DG & otras yerbas · http://web450.wordpress.com

FORMULARIO DE INSCRIPCION TALLER WEB PREPARACION PRIMER EJERCICIO Armando un diagrama de navegación INDICE · INTRO PRESENTACION PRODUCTOS INSTALACIONES CONTACTO PRODUCTOS 1 FORMULARIO DE INSCRIPCION GALERÍA DE PRODUCTOS 1 -2 PRODUCTOS 2

Armando un diagrama de navegación TALLER WEB PREPARACION PRIMER EJERCICIO Armando un diagrama de navegación VÍNCULOS DE NAVEGACIÓN INDICE · INTRO 1 NIVEL DE NAVEGACIÓN PRESENTACION PRODUCTOS INSTALACIONES CONTACTO 2 NIVEL DE NAVEGACIÓN PRODUCTOS 1 FORMULARIO DE INSCRIPCION PRODUCTOS 2 3 NIVEL DE NAVEGACIÓN GALERÍA DE PRODUCTOS 1 -2

TALLER WEB PREPARACION PRIMER EJERCICIO Boceto – línea gráfica En el desarrollo de la línea gráfica es importante que esta cumpla con los objetivos comunicacionales de la EMPRESA – PRODUCTO o SERVICIOS . UN SITIO WEB es una herramienta de comunicación y contacto hacia el mundo. DEBE comunicar en forma silenciosa: No hay vendedor que explique las bondades de el producto o servicio. No hay interacción externa que motive a la compra. El cliente- usuario YA LLEGO A NUESTRA WEB – debemos cerrar el círculo virtuoso. CIRCULO VIRTUOSO: Cuando un cliente-usuario llega a nuestra web, satisface su necesidad y recomienda a otro usuario-cliente a utilizar la web mediante la recomendación de la marca o producto. Diseño Publicitario Multimedial · IP Santo Tomás · José Joo Villablanca DG & otras yerbas · http://web450.wordpress.com

Boceto – línea gráfica TURISMO NORTE Bienvenidos TALLER WEB PREPARACION PRIMER EJERCICIO Boceto – línea gráfica TURISMO NORTE Bienvenidos La acción terminó a las 23:11:09: ISSetupFilesExtract. Valor devuelto: 1.La acción se inició a las 23:11:09: IsIntlInstall. La acción terminó a las 23:11:09: IsIntlInstall. Valor devuelto: 1.La acción se inició a las 23:11:09: AppSearch. La acción terminó a las 23:11:09: AppSearch. Valor devuelto: 1. La acción se inició a las 23:11:09: LaunchConditions.La acción terminó a las 23:11:09: LaunchConditions. Valor devuelto: 1. La acción se inició a las 23:11:09: FindRelatedProducts. La acción terminó a las 23:11:09: FindRelatedProducts. Valor devuelto: 1.La acción se inició a las 23:11:09: ValidateProductID. La La acción terminó a las 23:11:09: ISSetupFilesExtract. Valor devuelto: 1.La acción se inició a las 23:11:09: IsIntlInstall. La acción terminó a las 23:11:09: IsIntlInstall. Valor devuelto: 1.La acción se inició a las 23:11:09: AppSearch. La acción terminó a las 23:11:09: AppSearch. Valor devuelto: 1. La acción se inició a las 23:11:09: LaunchConditions.La acción terminó a las 23:11:09: LaunchConditions. Valor devuelto: 1. La acción se inició a las 23:11:09: FindRelatedProducts. La acción terminó a las 23:11:09: FindRelatedProducts. Valor devuelto: 1.La acción se inició a las 23:11:09: ValidateProductID. La La acción terminó a las 23:11:09: ISSetupFilesExtract. Valor devuelto: 1.La acción se inició a las 23:11:09: IsIntlInstall. La acción terminó a las 23:11:09: IsIntlInstall. Valor devuelto: 1.La acción se inició a las 23:11:09: AppSearch. Diseño Publicitario Multimedial · IP Santo Tomás · José Joo Villablanca DG & otras yerbas · http://web450.wordpress.com

Boceto – línea gráfica Boceto más acabado utilizando Photoshop TALLER WEB PREPARACION PRIMER EJERCICIO Boceto – línea gráfica Boceto más acabado utilizando Photoshop FUE REALIZADO CON ELEMENTOS NATIVOS DE WINDOWS Diseño Publicitario Multimedial · IP Santo Tomás · José Joo Villablanca DG & otras yerbas · http://web450.wordpress.com