Plantilla de perfil de usuario

En este artículo se puede observar una plantilla personalizada de perfil de usuario, en este template se observan los siguientes elementos que lo componen: una cabecera con el título y un breadcrumb. En la parte central se divide la información en dos columnas. En la columna izquierda se observa la foto de contacto, información del usuario, iconos de las redes sociales y un menú vertical. Finalmente en la columna central se observa el formulario y los botones de acciones. Se analizan estos bloques de código por partes y finalmente se puede observar una captura del resultado final (ordenadores y dispositivos móviles).

A lo largo del artículo se pueden observar diferentes ejemplos y sus códigos desarrollados, parte por parte, a través de imágenes ilustrativas. Adicionalmente para crear dicho contenido en la web, se crea un fichero de ejemplo, con los elementos que se explican en el artículo en una página completa de ejemplo de perfil de usuario. Además como en anteriores posts, se facilita al final del mismo un fichero de ejemplo y también se incluye un enlace para probar los ejemplos sin necesidad de descargar el contenido.

CABECERA

En esta sección del artículo se analiza la cabecera utilizada para la plantilla, como se puede apreciar en la siguiente captura, se crea un título con un subtitulo de forma más pequeña, separado con una línea horizontal, a continuación se crea un breadcrumb (recordar que los breadcrumbs son bastante útiles para el “SEO on page”).

En la siguiente captura se aprecia el código desarrollado para el ejemplo indicado en la anterior imagen:

Se crea un div con class=”col-md-12″ para especificar el ancho del contenido, dentro de este div se crea el tag h1 con el titular y si se desea un subtitulo se añaden las etiquetas small dentro del h1, a posteriori de la escritura del titular. A continuación se crea el breadcrumb (recordar que se puede consultar la estructura de los breadcrumbs en el artículo breadcrumbs en Bootstrap).

COLUMNA IZQUIERDA

En la columna de la izquierda se sitúa la información del usuario sobre su fotografía o avatar, su nombre y apellido/s, el título (profesión del usuario), varios iconos a las redes sociales y un menú vertical con diferentes elementos donde el usuario podrá navegar. En el ejemplo, estos elementos son estáticos, pero en futuros artículos se podrá observar, que estos elementos pueden venir heredados de formularios que previamente ha rellenado el usuario.

En la siguiente captura se dispone el código que se ha desarrollado para el ejemplo de la columna izquierda, a través de comentarios, insertados en código, se ha intentado delimitar cada sección para que se aprecie cada bloque. Además recordar que esta parte del código dispone de un div superior con clase del tipo col-md-3, donde se establece el ancho de la columna, en particular en este caso sería de 3 columnas de las 12 totales que se recuerdan que dispone Bootstrap.

PARTE CENTRAL (CABECERA)

En la parte central de la página de ejemplo o del “template” de perfil de usuario, se dispone de un pequeño título y una leyenda donde se le describe al usuario, que función debe realizar en el formulario situado en la parte inferior de este título.

El ancho estipulado para el título de este formulario es de 9 columnas con la clase col-md-9, posteriormente se crea otro div con class=”col-md-12, realizando esta acción se indica que dentro de esas 9 columnas que se han definido con anterioridad, una vez dentro de este div, la página va a ocupar las 12 columnas que ocupan el nuevo div. En este último div se ha aplicado un estilo en línea, aunque se recomienda que no apliquéis estilos en línea, ya que es aconsejable tener siempre una estructura de los ficheros y por este motivo es más correcto crear una clase nueva y esta clase incorporarla en el fichero de estilos personalizado. De esta manera el código queda mucho más organizado y cualquier desarrollador sabe donde puede consultar esa información en lugar de tener que buscar esa información a lo largo de todas las páginas.

También es muy importante que el título de esta sección sea un poco más pequeño que el de la cabecera, que suele ser una etiqueta h1 por temás de SEO on page. Por lo que se recomienda que sea una etiqueta h2 o h3.

PARTE CENTRAL (DATOS)

En la parte central se disponen dos bloques, el bloque de los datos que se explican a continuación y el bloque de los enlaces a las redes sociales que está disponible a continuación de éste. En la siguiente captura se puede observar un pequeño formulario de información básica donde se le requiere al usuario rellene los campos, indicando su nombre, apellidos, título (profesión), un email, una breve descripción de su biografía (referente a su carrera profesional, por ejemplo) y que escoja un idioma.

En la imagen que se aprecia en la parte inferior, se dispone del código desarrollado para el formulario observado en la anterior captura. Se puede observar que en algunos campos, los que se consideran obligatorios, los inputs están dentro de etiquetas span para poder avisar al usuario de algún error en esos campos (se recuerda el ejemplo de validación de campos en el artículo Validación de campos con jQuery).

El último campo del formulario de esta sección será un select, el cual se recalcan dos cosas importantes: para que el usuario pueda observar “Elija un idioma” por defecto, se debe crear un option con esta opción, pero el usuario (cliente), no debe poder escoger esta opción una vez abra el campo desplegable. Para que no tenga disponible esta opción y por defecto en la casilla aparezca ese texto, se debe incluir dentro del option las propiedades disabled selected.

PARTE CENTRAL (REDES SOCIALES)

Seguido de la parte de datos el usuario tendrá disponible los campos que se pueden apreciar en la siguiente imagen: campo para introducir su web personal/profesional, enlace para introducir el usuario de Google Plus, enlace para introducir el usuario de Twitter, enlace para introducir el usuario de Facebook y enlace para introducir el usuario de Linkedin. En este punto se pueden introducir los enlaces a las redes sociales que se deseen.

Como se puede apreciar en la captura anterior, los enlaces a las redes sociales aparecen con una parte en gris con la url de la red social y posteriormente, un campo donde el cliente/usuario final puede introducir su user. Esta función se crea a través de un div con class=”input-group” y dentro de este div un span con class=”input-group-addon”, la descripción del span (por ejemplo http://twitter.com) y sin cerrar el span, se inserta el input donde el usuario final podrá introducir los datos. Posteriormente se cierra la etiqueta de span y se cierra el div.

BOTONES FINALES

Para finalizar el formulario de perfil de usuario están disponibles los botones de acciones: botón de cancelar, de limpiar y de actualizar. El botón de Cancelar refresca toda la página, el botón de Limpiar pone en blanco todos los campos del formulario y el botón de Actualizar guarda los cambios que el usuario final a modificado en su formulario. 

En la siguiente captura se puede observar al estructura del grupo de botones, no se entra en detalles sobre este código ya que está disponible en anteriores artículos y se recomienda su lectura.

FORMULARIO COMPLETO

En la siguiente captura se puede observar el resultado final del ejemplo que se ha ido explicando a lo largo del artículo. La página de perfil de usuario dispone de una barra de navegación superior con el logotipo y las secciones de este ejemplo. A continuación se observa el breadcrumb. Posteriormente se puede observar que la web está estructurada en dos columnas. La columna izquierda dispone de la foto del perfil de usuario, nombre de usuario, título, enlaces a las redes sociales del usuario y un menú vertical. En la columna de la derecha se dispone de una nueva cabecera, datos de usuario y datos de las redes sociales más los botones de acciones.

Como en otros diseños si se abre la página con un dispositivo móvil o se modifica el tamaño de ventana del navegador, la web se convierte a este formato, siendo totalmente responsiva, como se puede apreciar en la siguiente captura:

 

EJEMPLO EN LÍNEA

Se crea el siguiente enlace para que se pueda probar en la web los ejemplos comentados en el artículo. Para ello simplemente pulsar sobre el siguiente botón y la página se redirige a la web del ejemplo, sin necesidad de tener que descargarlo.

VER EL EJEMPLO EN LÍNEA

Además también se adjunta el fichero comprimido con los ejemplos utilizados en el post, para los que prefieren practicar de manera local en sus pc’s: plantilla de perfil de usuario. En próximos artículos se añadirán otras plantillas de contacto, plantillas de identificación de usuarios y password, entre otras.

 

Se recuerdan los artículos relacionados sobre Bootstrap:

 
Un saludo.

2 comentarios sobre “Plantilla de perfil de usuario

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *