Vídeo: Caja de diálogo dinámica con Photoshop, CSS y jQuery

  • Por
Videotutorial en el que creamos una interfaz de usuario dinámica, desde el diseño con Photoshop, su maquetación CSS y los dinamismos con Javascript y jQuery.
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.

La verdad es que, la llamemos como la llamemos, lo más sencillo es que se acceda al ejemplo para ver exactamente lo que vamos a crear.

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.

Nota: Hemos subido los ejemplos realizados, así como el PSD de Photoshop creado a la red social de código fuente Github: https://github.com/deswebcom/Caja-de-di-logo-din-mica-con-Photoshop--CSS-y-jQuery

Autor

Miguel Angel Álvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

ruben cadagan

03/6/2010
solicitud
te comento que no tengo posibilidad de ver los videos de forma online debo descargarlos y verlos offline. Es que donde vivo no tengo acceso a internet. Existe algun link como para descargarlos y verlos despues sin conexion. Gracias

monica_aira_sanchez

05/6/2010
las tres imágenes
Antes que nada, agradecerte este trabajo tan estupendo que haces. yo estoy aprendiendo muchísimo con los manuales y los videos que publicas, eres una "máquina" ;).
Me ha quedado una duda respecto a la partición de la imagen. En el caso de que tuviésemos un texto fijo de partida, supiésemos ya el contenido concreto, no habría que hacer la partición, ¿no?. Supongo que se hace para que la capa de en medio pueda ir creciendo, ¿es así, verdad?
Felicidades..., y que sepas que lo haces es de gran ayuda -al menos para mi-.
Saludos

Fernando

30/6/2010
Videos de en la pagina
No se ven ni se pueden clikear

claudio_menares_alarcon

28/11/2011
Una pregunta
¿Cómo habría que modificar el código para que se muestre sólo el enlace de "Mostrar capa flotante" y una vez clikeado se reemplace por "Ocultar capa flotante"?

Encuentro que de esa manera sería mucho más práctico.

Saludos y muchas gracias por los videotutorials. Muy buenos.

André

31/8/2012
Agradecimiento
Interesantes tutoriales formales y en español, aprendo muchisimo. Aprendi Html, javascript y ahora estoy aprendiendo Jquery gracias a está página, gracias Miguel Angel Alvares.

Atte. André Rivera Vega.
Desde lima Perú.