Optimización de CSS y Enlaces en HTML para Portafolios Web

¿Cómo solucionar problemas de diseño con CSS?

Ya tenemos nuestra página web casi lista, pero aún hay algunas mejoras y detalles que debemos afinar. Puedes encontrarte con que las proporciones de ciertos elementos no se presentan correctamente en todas las resoluciones. En este caso, vamos a trabajar con CSS para mantener nuestras imágenes dentro de sus proporciones deseadas. Te mostraré lo fácil que es corregir estas necesidades estilísticas para que tu página luzca impecable.

¿Cómo ajustar el ancho de los contenedores?

Es frustrante cuando una imagen, que debería ser circular, se convierte en un óvalo al cambiar el tamaño de la pantalla. Esto sucede porque CSS intenta calcular automáticamente el ancho de los elementos involucrados. Pero hay una solución sencilla para corregirlo.

/* Aquí se ajusta el ancho del contenedor restando el ancho de la imagen. */
.información {
    width: calc(100% - 200px); /* Ancho total menos el ancho de la imagen */
}

Con esta línea de código en CSS, utilizamos la función calc() para ajustar dinámicamente el ancho del contenedor. La imagen siempre tendrá 200 px de ancho, mientras que el contenedor de información ajustará su tamaño automáticamente, manteniendo la proporción y evitando que la imagen pierda su forma circular.

¿Cómo incluir enlaces a redes sociales?

Agregar enlaces a tus redes sociales puede resultar esencial para mostrar tu presencia en línea de forma profesional. Es un proceso simple que, al mismo tiempo, ofrece mayor funcionalidad a tu portafolio personal. Aquí te explicamos, paso a paso, cómo hacerlo de manera efectiva.

<!-- Enlaces a redes sociales con target para abrir en nueva pestaña -->
<a href="https://www.linkedin.com/in/tu-perfil-linkedin" target="_blank">LinkedIn</a>
<a href="https://github.com/tu-usuario-github" target="_blank">GitHub</a>
<a href="https://twitter.com/tu-usuario-twitter" target="_blank">Twitter</a>
<a href="https://www.youtube.com/channel/tu-canal-youtube" target="_blank">YouTube</a>
<a href="https://platzi.com/p/tu-perfil-platzi" target="_blank">Platzi</a>

Al utilizar el atributo target="_blank", aseguras que tus enlaces se abran en una nueva pestaña. Sin embargo, ten en cuenta que el uso de este atributo puede afectar ligeramente el SEO, ya que Google tiende a penalizar enlaces que se abren fuera del contexto original del navegador. No obstante, su utilidad en mejorar la experiencia del usuario al navegar justifica su uso cuando se hace con moderación.

¿Cómo mejorar la experiencia del usuario?

Una buena usabilidad es crucial para que nuestra página web sirva como carta de presentación. Recuerda que al proporcionar una experiencia fluida y profesional, tu sitio se convertirá en una poderosa herramienta para mostrar quién eres y qué puedes hacer.

• Responsive Design: Aunque no lo estamos implementando ahora, considera hacer tu diseño adaptable a diferentes dispositivos.
• Consistencia visual: Asegúrate de que los elementos de diseño se presenten de manera uniforme.
• Cuidar el SEO: Controla cómo los motores de búsqueda ven tu página, de ser necesario, ajusta tus atributos de enlaces.

¡Con estos pasos, habrás finalizado una parte crucial de tu portafolio web! Siempre podrás usar esta página web para presentarte y mostrar tus habilidades en diferentes escenarios. Mantente ajustado a las necesidades del proyecto y, sobre todo, no dejes de aprender a medida que avanzas en el camino del desarrollo web.