Esta práctica que vamos a mostrar en vídeo toca tantas partes del desarrollo de páginas que es difícil resumirla en pocas palabras. Podríamos decir, en líneas generales, que vamos a crear una interfaz de usuario parecida a una caja de diálogo, donde mostrar mensajes como respuesta a las acciones del usuario. También podríamos ser más concretos y decir que vamos a realizar una capa flotante con esquinas redondeadas y borde semitransparente, maquetada con CSS y dinámica por medio de Javascript y jQuery.

Se trata, como decimos, de una práctica donde vamos a tocar diversos programas, lenguajes y tecnologías, como son Photoshop, HTML, CSS, Javascript y jQuery. Por eso requerirá para entenderla por completo conocimientos de varios ámbitos del desarrollo de páginas web. No obstante, esperamos que sea útil a un gran número de personas, pues aunque no se dominen del todo las materias, al menos sirva para ilustrar cómo se puede trabajar para crear interfaces de usuario personalizadas, que respondan a las acciones de los visitantes.

El videotutorial está dividido en tres partes, para crear vídeos de menos de 10 minutos que poder subir a YouTube. Cada una de las partes trata sobre una etapa de desarrollo, como el diseño, la maquetación y la programación de dinamismos en el cliente. Son los siguientes:

Vídeo 1: Diseño con Photoshop de la caja de diálogo

En este primer videotutorial estamos creando simplemente una serie de imágenes para poder luego construir la caja de diálogo. Empezamos creando una selección a la que le suavizamos los bordes para crear el fondo de la capa y luego un efecto de trazo por fuera de la capa al que le bajamos la opacidad para hacerlo semitransparente. Esa caja de diálogo luego la rompemos y extraemos tres imágenes para poder maquetarla en HTML y CSS. Las imágenes serán archivos png de 24 bit, para que nos guarde esa transparencia por canal alpha.

El primer vídeo acaba cuando tenemos las tres imágenes, de igual tamaño, listas para ser utilizadas. Y recuerda que si no dominas Photoshop, puedes aprender a través del Manual y los talleres de Photoshop que tenemos publicados en DesarrolloWeb.com.

Vídeo 2: Maquetación de la capa flotante con HTML y CSS

La segunda parte de esta práctica es la creación de la capa flotante en una página web. Ayudados de las imágenes que hemos creado en el anterior artículo, se definen una serie de etiquetas DIV donde albergar el contenido de la capa. Además a cada DIV le aplicamos estilos con CSS, principalmente para asignarle tamaños y los fondos de imagen, para la capa de arriba, de en medio y debajo. La segunda parte del videotutorial acaba asignando con el atributo position: absolute, top y left un lugar para la capa flotante. Una vez que la capa está encima de otros elementos de la página, podemos apreciar que el borde es semitransparente.

Para entender los pasos de este vídeo bastará con conocer un poco de CSS.

Videotutorial 3: Última parte para animar con Javascript y jQuery

La tercera parte de este vídeo es un poco más complicada que las anteriores y requiere por tanto unos conocimientos un poco mayores, en relación a programación del lado del cliente con Javascript. Para las personas que conozcan un poco de jQuery les parecerá algo extremadamente sencillo, pero puede que a los demás no tanto. No obstante, el ejemplo realmente puede mostrar a todos lo fácil que es crear unas sencillas instrucciones en Javascript para definir la interacción del usuario con la página.

En concreto veremos cómo hacer que la capa inicialmente esté oculta y luego por medio de unos enlaces que se muestre la capa, o que se oculte. Para ello, en el vídeo se mostrará cómo, mediante el framework Javascript jQuery, se pueden definir eventos para un par de enlaces, que tengan el código necesario para realizar acciones cuando se hace clic sobre ellos.

Para las personas que no dominen estos pasos recomendamos aprender un poco de Javascript y si ya lo conocen, aprender jQuery, del que además tenemos varios vídeos interesantes para aprender a dar los primeros pasos con jQuery.