Banner para Web

¡Bienvenid@s a otra entrada!

A continuación, voy a hablar de tres páginas online en la que podrás crear banners, sin necesidad de utilizar Photoshop.

Bannersnack

Es una página  que permite comenzar el banner con unos tamaños preparados utilizando banners ya creados, o bien, empezar desde el principio. Además, se pueden agregar textos, formas y colores para el fondo.

HTML5

Esta es una página sencilla, únicamente te permite añadir imágenes o utilizar las de la página, textos, efectos y transiciones. Es necesario disponer de Adobe Flash para su uso.

Gifmaker

Es el programa más fácil de los tres de utilizar, tan sólo se necesitan las fotografías para generar el gif, la única pega es que no tiene opción a copiar el código HTML.



A continuación, os dejo unos ejemplos de cada programa para que elijáis el que más os guste, u os convenga según lo que deseéis.

1º Gifmaker.

2º Bannersnack.

3º HTML5 Maker.

Espero que os sirva de gran ayuda a la hora de crear vuestros gifs de manera rápida y sencilla.
Un saludo, y hasta la siguiente entrada.

Ejemplos de Banners

En esta entrada os muestro más tipos de banners creados en Photoshop:

He dinamizado este banner, porque previamente la profesora nos facilitó la siguiente imagen original y una final, con la que teníamos que conseguir movimiento:

ORIGINAL

IMAGEN FINAL

Para ello, he utilizado la tipografías y colores correspondientes, aplicándole los efectos deseados como bien explico en mi anterior entrada, es decir, para crear movimiento.

Su tamaño es 720 x 300 px

Para crear este banner, se siguen los mismos pasos que en el anterior, únicamente cambia el tamaño.

Su tamaño es 336 x 280 px.

Este banner, está creado desde cero por mi mismo, únicamente he escogido unas imágenes (en este caso de mi centro y su logotipo) siendo creativo, las he ido colocando, y aplicando el movimiento deseado, utilizando las opciones que explico en mi anterior entrada.

Su  tamaño es 728 x 90 px.

Un saludo, y hasta la próxima entrada.

Creación de Banners con Photoshop

Hoy hemos aprendido a crear banners animados mediante Photoshop, os voy a explicar como lograr hacer un banner similar:

1. Escoger una imagen y abrirla en Photoshop.

2. Abrir línea del tiempo (menú/ventana/línea del tiempo).

3. Aplicas el efecto deseado a través de capas, clicando después en la opción "duplicado de cuadros seleccionados", ubicado en la línea del tiempo que aparecerá en la parte inferior izquierda de la pantalla.

4. Le aplicas los segundos que deseas que haya de transición entre imágenes, y la cantidad de veces que quieres repetirlo.

5. Reproduces el video para observar que todo está correcto, y finalmente lo exportas para web utilizando GIF como formato de archivo, para que el movimiento sea posible y visible.

Quedando de esta forma:

En la siguiente entrada os explicaré más sobre los banners, si tenéis dudas o cualquier pregunta, podéis contactar conmigo. 

Un saludo.

Banners

¿Qué son los banners?

Son piezas publicitarias dentro de una página web. Su objetivo es atraer el tráfico hacia el sitio web del anunciante que paga por su inclusión. Su contenido puede  incluir imágenes, textos, animaciones, vídeos, audio, formularios...

Pueden ser:

• Estáticos: No tienen ningún tipo de animación, tienen un breve texto de información con enlace a la web, y pueden tener un logo.

• Animados o dinámicos: Tienen algún tipo de animación, ya sea corta o larga, efectos de texto e imagen que lo hacen más interesantes, enlace a la web, y estos pueden tener: logo, texto simple, eslogan, idea de venta, texto publicitario e imagen.

Existen zonas en las pantallas de los dispositivos que los usuarios visualizan más que otras, podemos decir que se denominan zonas calientes.

Os dejo un ejemplo en esta imagen de dichas zonas, en la que el color rojo representa la parte más visualizada, y la azul la menos.

Existen muchos formatos de banner, los principales son los siguientes:

Estáticos

Dimensiones: 600 x 500px 

Resolución:  ppp

Formato del archivo: JPEG 

Peso del archivo: 56 KB

Modo de color: RGB

Dimensiones: 300 x100 px

Resolución: 72 ppp

Formato del archivo: JPEG

Peso del archivo: 26 KB

Modo de color:  RGB

Dimensiones: 300 X 100 px

Resolución: 72 ppp

Formato del archivo: JPEG

Peso del archivo: 26 KB

Modo de color: RGB

Dimensiones: 300 x100 px

Resolución: 72 ppp

Formato del archivo: JPEG

Peso del archivo: 29 KB

Modo de color: RGB

Dimensiones: 728 x 90 px

Resolución: 72 ppp

Formato del archivo: JPEG

Peso del archivo: 38 KB

Modo de color: RGB

Dimensiones: 728 x90 px

Resolución: 72 ppp

Formato del archivo: JPEG

Peso del archivo: 51 KB

Modo de color:  RGB

Dinámicos

Dimensiones: 300 x 300 px

Resolución: 72 ppp

Formato del archivo: GIF

Peso del archivo: 28 KB

Modo de color: RGB

Dimensiones: 300 x 100 px

Resolución: 72 ppp

Formato del archivo: GIF

Peso del archivo: 19 KB

Modo de color: RGB

Dimensiones: 300 x 250 px

Resolución: 72 ppp

Formato del archivo: GIF

Peso del archivo: 84 KB

Modo de color: RGB

Dimensiones: 300 x 100 px

Resolución: 72 ppp

Formato del archivo: 

Peso del archivo: 19 KB

Modo de color: RGB

Dimensiones: 300 x 100 px

Resolución: 72 ppp

Formato del archivo: GIF

Peso del archivo: 28 KB

Modo de color: RGB

Dimensiones: 980 x 90 px

Resolución: 72 ppp

Formato del archivo: GIF

Peso del archivo: 59 KB

Modo de color: RGB

Espero que os guste esta entrada, un saludo y hasta la próxima.

Accesibilidad Web

¿Qué es accesibilidad web?

La accesibilidad web tiene como objetivo lograr que las páginas web sean utilizables por el máximo número de personas, independientemente de sus conocimientos o capacidades personales e independientemente de las características técnicas del equipo utilizado para acceder a la Web.

La World Wide Web Consortium (W3C), es una organización independiente y neutral cuya principal actividad es desarrollar protocolos y directrices que aseguran el crecimiento de la Web a largo plazo.

Para lograr la accesibilidad, se han desarrollado diferentes pautas o guías que explican cómo se tienen que crear las páginas web para que sean accesibles:

Perceptible

La información y los componentes de la interfaz de usuario deben ser presentados a los usuarios de modo que  ellos puedan percibirlos.

• Proporcionar alternativas textuales para contenido no textual (Braille, voz, símbolos, etc).
• Implementar alternativas textuales para contenido de audio y video. (Subtítulos).
• Crear contenido para presentarlo de diferentes formas sin perder información.
• Facilitar a los usuarios ver y oír el contenido. (Audio de una página reproducido automáticamente).

Operable

La información y los componentes de la interfaz de usuario y navegación deben ser operables.

• Proporcionar acceso a toda la funcionalidad mediante el teclado.
• Proporcionar a los usuarios el tiempo suficiente para leer y usar el contenido.
• No diseñar contenido de un modo que se sepa podría provocar ataques, espasmos o convulsiones. (Parpadeo  de página más de 3 veces por segundo).
• Proporcionar medios para ayudar a lo usuarios a navegar, encontrar contenido y determinar dónde se encuentran.

Comprensible

La información y el manejo de la interfaz de usuario deben ser comprensibles.

• Hacer que los contenidos textuales resulten legibles y comprensibles.
• Hacer que las páginas web aparezcan y operen de  manera predecible.
• Ayudar a los usuarios a evitar y corregir los errores.

Robusto

El contenido debe ser suficientemente robusto como para ser interpretado de forma fiable por una amplia variedad de aplicaciones de usuario, incluyendo técnicas.

• Maximizar la compatibilidad con las aplicaciones de usuario actuales y futuras, incluyendo las ayudas técnicas. (Que esté preparado para futuras actualizaciones)

A continuación, voy a realizar un análisis de accesibilidad, mostrando dos páginas web, la primera con Triple A, y la segunda con Doble A.

Análisis de accesibilidad

Marston Holdings.

Las páginas con este logotipo indican una declaración de conformidad del autor de la página o del proveedor de contenido con el Nivel AAA de conformidad con las Pautas de Accesibilidad al Contenido Web 2.0 del W3C , incluidos todos los criterios de éxito de Nivel A, AA y AAA definidos en las Directrices.

Clicando en la imagen, accederás a la página de la fotografía.  ⇧


I.E.S Puerta Bonita.







Las páginas que llevan este logo indican una declaración de conformidad por parte del autor o proveedor de contenido de ajustarse al nivel Doble-A de las Directrices de Accesibilidad para el Contenido Web 1.0 del W3C, incluyendo todos los puntos de verificación de Prioridad 1 y Prioridad 2 definidos en las Directrices.

Clicando en la imagen, accederás a la página de la fotografía.  ⇧


Espero que os guste esta entrada, un saludo y a hasta la próxima.

Diccionario PDF Interactivo

He creado este PDF interactivo,  en el que muestro un "diccionario" con las definiciones de las partes del diseño web y la creación de banners a través de flipsnack.



Un saludo, espero que os guste.