El uso de carteras en línea se ha convertido en una opción popular por muchos artistas digitales. El objetivo sería mostrarte a ti mismo y tus habilidades a cualquier persona curiosa, tal vez contratar empresas o clientes potenciales. Otra forma más sencilla de realizar esta tarea es crear su propia página de vCard digital. Por lo general, es una sola página que contiene un breve resumen, su experiencia laboral y algunos datos interesantes sobre usted.
En este tutorial, quiero demostrar cómo crear un diseño de página web con pestañas simple al estilo de una cartera simplista. Podemos incorporar los efectos de desvanecimiento de jQuery para cambiar entre las pestañas, apegándonos a un diseño de respuesta formal. Eche un vistazo a mi demostración de muestra en vivo para ver cómo se ve el producto final.
Demo en vivo - Descargar código fuente
Configuración del diseño
Aparte del archivo de índice único, también estoy creando una hoja de estilo separada llamada estilos.css. También necesitamos una copia de la biblioteca jQuery, ya sea local o alojada externamente.
La propia página se mantiene dentro de un envoltorio fijo en el ancho máximo de 700 px. Dentro de esta envoltura estoy usando un div contenedor secundario que agrega el fondo blanco y los efectos de cuerpo de página natural.
Notará que cada valor HREF de navegación apunta hacia el ID de un elemento de página. Esto podría actualizarse para vincularse a páginas separadas, y luego anularlo usando jQuery para mantener los efectos dinámicos. Si no le importa mucho la indexación de páginas separadas, Google aún puede rastrear todo su contenido con facilidad.
Las partes internas se dividen en elementos de sección y cada una utiliza un valor de ID específico. El ejemplo HTML anterior es de la vista de perfil predeterminada que se carga inmediatamente en la página. Quiero revisar el jQuery primero porque es rápido y simple de entender. Hay un poco para la navegación junto con otra pequeña sección para manejar el formulario de contacto que no funciona.
Efectos dinámicos de jQuery
Abajo hacia la parte inferior de la página notará un bloque de script. No hay nada demasiado complejo, pero vale la pena explicarlo. He copiado la sección completa del código a continuación:
Cada vez que un usuario hace clic en cualquiera de los enlaces de navegación, estoy usando event.preventDefault () para detener la acción. Así es como puede incluir enlaces a páginas externas para Google que no son accesibles para la mayoría de los usuarios.
También defino 3 variables que son útiles a lo largo de la función. corriente representa el enlace de la página seleccionada actualmente, y el .sel la clase debe eliminarse de ese enlace al cambiar a contenido nuevo. Las otras dos variables newpg y oldpg representa la nueva página a la que estamos cambiando y la página anterior que debe ocultarse fuera de la vista. Esto se logra utilizando los métodos fadeOut () / fadeIn () junto con removeClass () / addClass ().
En la parte inferior estoy apuntando #Formulario de contacto como un selector. Cuando alguien envíe el formulario de contacto, quiero detener el envío porque no hay ningún código para enviar un correo electrónico. Si planea implementar un formulario de contacto real, asegúrese de eliminar esas 3 líneas de código.
Diseños de contenido interno
No todo en este diseño de vCard es emocionante, pero hay algunas características interesantes de CSS. Específicamente, me gustaría explicar las características de diseño de las barras de habilidades junto con los elementos básicos de la cartera receptiva.
Al buscar en CodePen encontré estas barras animadas geniales que tenían un diseño muy pulido. Elegí omitir la animación y simplificar aún más el diseño. Estas habilidades se encuentran en la segunda pestaña de "Reanudar".
Cada .skillbar es un elemento único con un fondo de largo completo detrás de otra barra alargada. Un elemento de intervalo interno contiene texto que etiqueta la habilidad, junto con el total de años de experiencia. Los colores y los valores de ancho se aplican en CSS al seleccionar clases especiales para cada habilidad.
Al mantener todo el ancho fluido, todo se envolverá naturalmente en función de la resolución del dispositivo. Esta es otra razón por la que evité la animación en las barras de habilidades, aunque sí escribí un tutorial muy similar sobre esa técnica.
El diseño de la cartera es un poco simplista, aunque funciona muy bien para esta demostración. Las imágenes están vinculadas a tomas Dribbble utilizando dimensiones de 800? 600. Las imágenes se redimensionarán en función del ancho total del contenedor. Cada elemento de la lista tiene el 45% del ancho de la página, y las imágenes secundarias flotan hacia la derecha para crear la ilusión de un margen medio.
Actualizaciones responsivas
En la parte inferior de mi archivo CSS hay algunas consultas de medios para manejar dispositivos sensibles. Estoy trabajando en puntos de interrupción de 550px y 450px. Al alcanzar el primer salto a 550, cada elemento de la cartera se divide en longitud completa en lugar de apilarse como miniaturas.
Para 450px necesito manejar los elementos de navegación que comienzan a caer en nuevas líneas. Los enlaces de navegación se adaptan al 100% de ancho. Además, los encabezados h1 / h2 se redimensionan para que parezcan más naturales en las pantallas de los teléfonos inteligentes. La imagen del retrato de la página de inicio también se redimensiona, y las entradas del formulario de contacto se acortan en longitud.
Algunos de estos ejemplos son pequeños retoques estéticos, mientras que la navegación es una característica necesaria. Si agrega más elementos de página, la cantidad de estilos de respuesta podría aumentar, junto con la posibilidad de escribir nuevos puntos de interrupción.
Demo en vivo - Descargar código fuente
Clausura
Desde esta plantilla básica debería poder reescribir el contenido o incluso codificar las secciones de su propia página. Hay muchas maneras de cambiar el estilo de esta aplicación web a tu gusto. Siéntase libre de descargar una copia de mis códigos fuente y construir sobre esta base para ver qué más es posible.