Lectura No. 4. Contextualización. Nombre: Página web DISEÑO DIGITAL 1

Transcripción

1 Diseño Digital

2 DISEÑO DIGITAL 1 Lectura No. 4 Nombre: Página web Contextualización Las páginas web son una forma de dar a conocer cierta información que deseamos distribuir y compartir con otros usuarios. Este medio de comunicación proporciona muchísimas ventajas pero podemos destacar 2 de ellas, que hacen notorio su atractivo para una empresa: 1. El gran alcance que tiene una página web. Un sitio web puede ser visitado desde cualquier parte del mundo y todas las personas tienen acceso a éstos, es por ello que puedes llegar a ampliar tu mercado meta a través de estos sitios, ya que las personas pueden acceder a tu sitio web para conocer tu empresa y así convertirse en un nuevo cliente. 2. El costo. Realmente es un medio de comunicación muy barato para publicar anuncios y promociones, no implica un costo muy alto y puedes emplear el lenguaje visual a través de diseños digitales que ayuden a potenciar las imágenes con efectos para captar la atención de los usuarios. A través de esta sesión te daremos 3 instrumentos de diseño digital que puedes emplear para cautivar a las personas con tu página web y con la introducción de anuncios impactantes en otros sitios de uso popular para que las personas quieran saber de tu empresa, tus productos y/o tus servicios.

3 DISEÑO DIGITAL 2 Introducción al Tema La constante evolución de la tecnología nos permite contar con programas que nos facilitan la innovación y la creación del diseño de un sitio web, y si no fuera suficiente también contamos con que éstos programas y la forma de usarse están al alcance de todas aquellas personas que tienen acceso a Internet (las cuales son la mayoría). Así es, si tú eres una persona sin ningún conocimiento del diseño pero quieres hacer una página web para compartir información con otras personas, puedes ingresar a Internet y poner en un buscador lo que deseas encontrar o saber; e inmediatamente obtendrás múltiples resultados para escoger la mejor opción que resuelva el conflicto o la cuestión que planteaste. De tal forma tú puedes encontrar nuevas formas de crear un buen diseño para hacer visualmente atractiva una página web, un anuncio publicitario o una imagen promocional que incite a los espectadores a conocer más sobre tu empresa y ser parte de ella a través de la experiencia de compra, que finalmente es el objetivo que se busca lograr a través de la publicidad y la promoción.

4 DISEÑO DIGITAL 3 Explicación Página web 2.3 Creación de banners Los banners son anuncios con imágenes y texto que aparecen en las páginas web, estos suelen tener una forma rectangular o en ocasiones cuadrangular y pueden aparecer en la parte de arriba, de abajo y a los lados del contenido del sitio web. Con la tecnología de ahora se pueden realizar banners en el programa de Adobe Flash que contengan imágenes, texto y, por qué no, sonido. Para crear un banner en el programa de Adobe Flash puedes realizar los siguientes pasos: Paso 1: en Adobe Flash crear un nuevo archivo. Usted necesita tener Adobe Flash para crear un banner en flash (también se puede hacer uno en Photoshop y guardar las imágenes como una animación, pero esto requiere más tiempo). Paso 2: al panel Propiedades (el atajo es Ctrl y F3). A continuación, tendrás que configurar el tamaño del proyecto, establecer el valor de la velocidad de fotogramas y cambiar el color de fondo. Paso 3: guarda el archivo como un flashbanner.fla pulsando las teclas Ctrl y S al mismo tiempo en el teclado. Paso 4: escribe el texto de la pancarta. Tendrás que elegir la herramienta de texto desde el panel de herramientas y escribir el texto que deseas mostrar en tu banner en flash. A continuación puedes cambiar el tipo de letra a un estilo que se adapte a tus necesidades y cambiar la fuente y el tamaño del texto. Paso 5: crear un fotograma clave. Tendrás que elegir 90 en la línea de tiempo y seleccionar la tecla F6 para crear un fotograma clave. A continuación tienes que seleccionar el fotograma 1 y seleccionar el "movimiento" opción.

5 DISEÑO DIGITAL 4 Paso 6: generar el "SWF" archivo. Esto se puede hacer pulsando Ctrl y Enter. Paso 7: inserta el archivo SWF en tu página web. Esto se puede hacer mediante el uso de código flash genérico y cambiar el tamaño y número con el suyo propio. 2.4 Slides Se conoce como slides o slideshow a las presentaciones de imágenes que se van deslizando de una forma entretenida y con decoraciones. Las slides nos enseñan cómo se deslizan las diapositivas en un portaobjetos. Para crear un slideshow para implementarlo en tu página web o en un blog, puedes seguir los pasos que te muestro a continuación: Paso 1: crea tu cuenta en Paso 2: una vez que te registraste y estás dentro de Slide-Show crea tu presentación, dando clic en la parte que dice: Click here to make your first Slide Show! Paso 3: a continuación tendrás que agregar las fotos que deseas utilizar para tu presentación, para ello deberás hacer clic en el botón que dice Busca y después podrás elegir las imágenes que quieres usar de tu computadora. Se pueden subir hasta 50 imágenes y puedes subir más de una al mismo tiempo. Paso 4: una vez subidas las imágenes, éstas aparecerán en la parte de abajo de la página para que puedas darles el orden que tú prefieras y si así lo deseas podrás agregar un comentario o nombre a cada imagen. Paso 5: después tú podrás escoger la música y el tipo de presentación o estilo que quieras utilizar. Paso 6: finalmente le das en Guardar (obtener código). Paso 7: seleccionas el código para copiarlo, entras a tu página web y pegas este código para que aparezca en tu sitio.

6 DISEÑO DIGITAL 5 Tomado de: para fines educativos 2.5 Rollover Se le denomina rollover al efecto de las páginas web que consiste en desplegar o hacer un cambio de imagen de un pequeño aviso o mensaje cuando el puntero del mouse pasa por encima de una zona sensible, ya sea una imagen o un enlace. Al usar el rollover se obtienen páginas más compactas y lógicas, pues la información que se muestra por este efecto se mantiene oculta mientras el usuario no desplace el puntero por una zona de su interés. Una forma sencilla de realizar un rollover es a través del programa Adobe Dreamweaver. A continuación te daré sencillos pasos a seguir para crear un rollover: Antes de comenzar debes de asegurarte de tener 2 imágenes para este ejercicio, una que sea la imagen original y la otra imagen que será el rollover. Éstas pueden estar guardadas en formato JPEG o GIF.

7 DISEÑO DIGITAL 6 Paso 1: en nuestro programa de Dreamweaver nos dirigimos al Menú principal y buscamos la palabra INSERT, Ya lo encontraste? Ahora dale clic en donde dice Interactive Images, y enseguida selecciona la opción de Rollover Image. Paso 2: empezamos dándole nombre a nuestro rollover para llevar una organización en la elaboración de nuestro documento. Paso 3: en la zona de Original Image va a ir colocada la imagen inicial del rollover y ésta va a ser la imagen que se verá en el momento en que el usuario NO coloque el cursor del Mouse sobre ella. Paso 4: en la parte de rollover image tendremos la imagen a la que se cambiará cuando el usuario coloque su cursor sobre la imagen. Paso 5: para finalizar nos aseguramos de que esté marcado donde dice PRELOAD ROLLOVER IMAGE. Nota: si tú quieres puedes anexar un texto a tu rollover, pero ésta es una decisión, es optativa. Tomado de: para fines educativos

8 DISEÑO DIGITAL 7 Conclusión En esta sesión conocimos 3 elementos importantes para hacer más atractivo el diseño de un sitio web. El uso de estas herramientas nos va a ayudar mucho para llamar la atención de los usuarios y así lograr uno de nuestros objetivos que es despertar la curiosidad de los usuarios en nuestra página. Si hacemos un buen uso consciente de estos 3 elementos del diseño web podemos tener un resultado satisfactorio, el cual se verá reflejado en hechos tangibles como podrían ser el incremento de la audiencia en nuestro sitio, expandiendo nuestro mercado, clientes satisfechos por los servicios brindados, etc. A través de los banners podemos lograr expandir nuestro mercado, distribuyendo nuestros anuncios vía internet podemos lograr obtener grandes beneficios para la empresa como son: Mayor alcance. Promocionar productos/servicios optimizando nuestros recursos. Mejor segmentación de la audiencia. El uso de slides le brinda un toque decorativo y muy creativo a tu sitio, en el cual podrás implementar imágenes de la empresa para darte a conocer a través de fotografías que muestren el diseño de los productos, el diseño de la marca, la publicidad en medios visuales, entre muchas más. Y en cuanto a los rollover, puedes darle un gran uso en beneficio de la empresa para crear un impacto visual en el diseño del sitio web, pues el efecto que produce un botón rollover hace despertar la curiosidad del usuario y nos hace voltear a ver en dirección a la imagen que posee este efecto. Aparte sirve como un indicador de innovación y creatividad para la página y la marca que lo pone en práctica. Éstas sólo son unas cuantas de las herramientas que puedes utilizar para mejorar el diseño de tus páginas web para cautivar al público.

9 DISEÑO DIGITAL 8 Para aprender más Cómo crear un banner de manera fácil, rápida y profesional? Aura, Federico (2009). Creación de banners, Video de You Tube. Cómo hacer slides para páginas web? s/a (2010) Tutorial de Slideshow Video de You Tube. Cómo hacer slides para páginas web? David (2012) Botones rollover. Dreamweaver tutorial. Video de You Tube. Cómo hacer slides para páginas web? s/a (2013) Crear un titular Web con efectos rollover.

10 DISEÑO DIGITAL 9 Actividad de aprendizaje Instrucciones Supongamos que trabajas como creativo en una agencia de publicidad & mercadotecnia, y a ti y a otros compañeros creativos se les solicita realizar una propuesta de trabajo con la finalidad de expandir el mercado, optimizando los recursos de la empresa e innovando la publicidad a través de cualquier medio de comunicación. Se deben de utilizar los elementos aprendidos en esta sesión, banners slides y rollovers en diferentes tamaños, diferentes en cuanto a contenido y utilizando diseños propios. Las propuestas serán evaluadas conforme a los siguientes criterios: Creatividad Innovación Bajo costo Publicidad Contenido Al finalizar sube tu actividad a la plataforma en el lugar indicado.

11 DISEÑO DIGITAL 10 Referencias Adobe (2013) Crear un titular Web con efectos rollover. Obtenido de: Alan (2010) Como crear un slide show! Obtenido de: Aura, F. (2009). Crear banner gratis, Video obtenido de: bedded Bravo, C. (2012) Las 5 claves para diseñar un banner. Obtenido Tutor CEP (2010) Tutorial de Slideshow Obtenido de: de: Vázquez Rodríguez, J. (2008) Diseño Web Obtenido de: over.html