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 --><ahref="https://www.linkedin.com/in/tu-perfil-linkedin"target="_blank">LinkedIn</a><ahref="https://github.com/tu-usuario-github"target="_blank">GitHub</a><ahref="https://twitter.com/tu-usuario-twitter"target="_blank">Twitter</a><ahref="https://www.youtube.com/channel/tu-canal-youtube"target="_blank">YouTube</a><ahref="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.
target: "_blank" → para hacer que un enlace abra una nueva pestaña. DIOS PORQUE GOOGLE LO BAJA EN SEO es literalmente la mejor opción para los links.
css calc() → para hacer cálculos y operaciones en css
gracias
Profesor, como analista SEO, le puedo decir que el target=_blank no es determinante para que Google nos baje el crawl budget.
Buen dato gracias. Me pregunte eso porque es muy molesto esas que cualquier link te toca darle atrás para volver.
Pero lo que sí indican es que NO es seguro.
Primer video que entiendo como usar correctamente la función de css calc() , excelente !
La etiqueta targeten HTML se utiliza para especificar cómo se abrirá el enlace. El valor "_blank" se utiliza para indicar que el enlace debe abrirse en una nueva ventana del navegador.
El uso de target=_blank puede tener un impacto negativo en el "crawling budget" de un sitio web. El "crawling budget" se refiere al número de páginas que un motor de búsqueda puede rastrear e indexar en un sitio web dentro de un período de tiempo determinado. Si un sitio web tiene muchos enlaces con target=_blank, esto puede hacer que el motor de búsqueda tenga dificultades para rastrear todas las páginas del sitio, lo que puede tener un impacto negativo en la clasificación del sitio en los resultados de búsqueda.
Por otro lado, la propiedad calcen CSS se utiliza para realizar cálculos matemáticos en línea con los valores de las propiedades CSS. Esto permite crear diseños responsivos y dinámicos sin tener que depender de valores fijos.
No entendí por qué blank no es buena práctica para google.
Si mal no recuerdo, el target="_blank" puede generar algún tipo de vulnerabilidad de seguridad. En estos casos, cuando redireccionas a un sitio externo, es recomendable acompañarlo con rel="noopener noreferrer" para evitar algunos problemas.
Te comparto algo de documentación al respecto, tal vez la clase se refiero a esto.
Saludos!
no sabía que existía calc()
la clase que estaba esperando para saber como solucionar que la foto se distorciones ,
Estoy de acuerdo, no tenia idea de esto.
otra opción es ponerle un height a la imagen como fit content
Este curso es tan específico y detallado, que me siento Dummie! jejeje
tengo un problema con el fondo de imagen de la section: la imagen es mas grande que la página y las propiedades que le doy con css no los aplica.
alguien por fa me puede ayudar.
Hola sebcobe22, asegúrate de que estas seleccionando la etiqueta correcta.
Si es posible, puedes compartir tu código y te ayudamos.
Yo ya tengo un poco de conocimiento en los temas mencionados y quise hacerlo un poco diferente, en los iconos tiene un :hover que al pasar sobre ellos toma el color de la red social y se agranda un poquito.
Algo que aprendí recientemente! Cuando colocas el atributo target="_blank" en un <a>, es recomendable colocar además un atributo de tipo rel="noopener" (o rel="noreferrer"). Por ejemplo:
<a href="https://sitio-web-de-ejemplo/" target="_blank" rel="noopener">Texto del enlace</a>
Esto es porque cuando un enlace se abre en una nueva pestaña o ventana con target="_blank", se crea un nuevo contexto de navegación y esa nueva pestaña puede tener acceso al objeto window del documento que la abrió, lo que se conoce como "window.opener" y podría ser utilizado para ataques de phishing o redirecciones maliciosas.
Espero sirva el aporte! 💪🏻
tengo años trabajando en web y es la primera vez que me explican tan vien lo de calc() en CSS,
GROSSO!!!
mmmm
GRACIAS POR ESTE VIDEO CRACK!!
¡Excelente clase! Es la primera vez que trabajo con código y me emociona ver los resultados de seguir paso a paso su explicación 🙌
y que alternativa hay para el target="_blank" si google pone problema por esto? creo que no quedo aclarada esta afirmación realizada sobre el final del video.
Nuestro compañero lo explica muy bien aquí => Explicación
Hola!
como puedo puedo hacer que la imagen que use (utilice una diferente) ocupe el 100% de la pantalla?
Creo que con esto deberías poder solucionarlo, debes de cambiar el id (wallpaper) por el que hayas usado en tu caso.
A mí me pasa que se sigue deformando T.T
No, usartarget="_blank"no arruina tu SEO. Pero sí hay algunos matices que deberías tener en cuenta:
✅ Lo que sí es cierto:
Usar target="_blank" hace que el enlace se abra en una nueva pestaña, lo cual no tiene un impacto directo negativo en el posicionamiento SEO.
Es una práctica común para enlaces externos, ya que mantiene a los usuarios en tu sitio web.
⚠️ Lo que puede afectar si no se maneja bien:
Seguridad y experiencia de usuario:
Siempre que uses target="_blank", deberías incluir también:htmlCopyEditrel="noopener noreferrer"
Esto previene vulnerabilidades de seguridad como el ataque dewindow.opener, que puede ser usado para manipular la página original desde la nueva pestaña.
Relación de autoridad (PageRank):
Si enlazas a sitios externos y no quieres transferir autoridad SEO, puedes usar rel="nofollow":htmlCopyEdit<a href="https://ejemplo.com" target="_blank" rel="noopener noreferrer nofollow">
✅ Buenas prácticas SEO al usar target="_blank":
Para enlaces internos: puedes evitarlo para no dificultar la navegación.
Para enlaces externos: úsalo junto con rel="noopener noreferrer".
🧠 En resumen:
No afecta directamente al SEO.
Sí puede afectar indirectamente si no cuidas la seguridad (rel="noopener") o si manejas mal la transferencia de autoridad (rel="nofollow").
He realizado todas las revisiones pertinentes de mi código y no entiendo por qué mi página tiene este texto en la parte superior.
pasa el codigo
Quizás porque escribiste la línea de código dentro del "body" y no dentro del "head".
