Los que estáis más metidos en esto del desarrollo web, ya estaréis hartos de escuchar hablar sobre este tema. Es como una lucha que dura casi desde los inicios del desarrollo web. Los desarrolladores tradicionales creen que al pulsar los enlaces, estos deben llevar a una nueva página, pero en la misma ventana. De esta forma el usuario no se llevara sorpresas inesperadas. Además creen que por razones históricas esto no debe cambiar.
Como pasa con todo en la vida, todo esto depende de muchos factores. Hacer esto tiene muchos inconvenientes, el principal es que puedes incomodar a tu visitante. Podrías hacer que el visitante tuviera numerosas ventanas abiertas y no es una practica recomendable. Esta practica tiende a confundir a personas con poco conocimiento de informática. Hay personas que cuando se abre un enlace en una nueva ventana o pestaña no saben donde ir o como retroceder, se pierden en el sitio web y terminan abandonando tu web. Aunque hay excepciones como por ejemplo, cuando el enlace te lleva a una página externa. Esta si sería una buena practica.
También aquellos enlaces que contienen información vital, deberían abrirse en una nueva ventana o pestaña. Si por ejemplo esta comprando en nuestra web y quiere leer las políticas de envió y sale de esa página a leerlas, prácticamente estas perdiendo la venta. Esta es una practica frecuente hoy día en el comercio online. En webs como periódicos, webs de contenidos o redes sociales, donde la audiencia y tiempos de permanencia son importantes, el usuario sigue contabilizando tiempo de visita aunque esté en otra ventana. Por eso en este tipo de webs, se usa la nueva ventana. Si buscas patrocinadores o empresas que quiera poner publicidad en tu web, te van a pedir estadísticas de visitas, tiempo que permanece el usuario, etc.
No quiero hacer de esta clase un discurso o un articulo, pero creo que era necesario comentar todo esto para llegar a entenderlo 100%. Ahora si, vamos a ir al grano, vamos a aprender que atributo soporta la etiqueta <a> para que se abra una nueva pestaña o una nueva ventana.
Para hacer que un enlace se abra en una nueva pestaña agregamos un nuevo atributo, target. Los valores que soporta el atributo target son los siguientes:
_blank: Abra el documento en una nueva ventana o pestaña (según configuración por defecto del navegador)_self: Abra el documento en el mismo marco en el que se ha hecho clic (esto es por defecto)_parent: Abra el documento en el marco padre (según configuración por defecto del navegador)._top: Abre el documento en la misma pestaña donde esta el enlace (según configuración por defecto del navegador).framename: Abre el documento en un marco con nombre (según configuración por defecto del navegador).
Ejemplos de uso de la etiqueta <a>
A continuación vamos a ver una serie de ejemplos que nos van a ser muy útiles a la hora de crear un enlace en nuestro sitio web.
Una imágen
<p>Tu puedes enlazar<a href="images/restaurante.jpg"></a>una foto de restaurante</p>
Un mp3
<p>Se encuentra disponible<a href="audio/actual-fantasy.mp3"></a>esta intro de Ayreon. (mp3 1,60 MB)</p>
Un vídeo
<p>Este es un vídeo muy gracioso de<a href="video/hermano.mp4"></a>mi hermano. (mp4 21,7 MB)</p>
Dirección de Email
NOTA: Es importante recordar que antes de la dirección de Email debemos escribir "mailto:"
<p>Escríbeme a esta dirección<a href="mailto:emaildeejemplo@gmail.com"></a>emaildeejemplo@gmail.com</p>
Ultimas recomendaciones
A la hora de crear enlaces tenemos que pararnos a pensar un segundo en que debemos dar nombres con significado al texto del enlace.
<p>infórmate más sobre<a href="https://www.ejemplo.com"></a>nuestros productos</p> <p>Vea nuestros<a href="https://www.ejemplo.com"></a>productos para el cabello</p>
<p>Para ver nuestros servicios<a href="https://www.ejemplo.com"></a>click aquí</p> <p>Vea nuestros productos<a href="https://www.ejemplo.com"></a>desde aquí</p>También demos nombres con significado a nuestros identificadores:
- #servicios
- #portafolio
- #pag34
- #seccion449
Aunque todas estas recomendaciones no nos parezcan importantes, a la hora de obtener un buen posicionamiento en los buscadores, pueden ser claves. El fin de este curso es crear sitios web profesionales y de calidad, así que tenemos que tener todo esto muy en cuenta.
Conclusiones
Hemos aprendido los atributos que debemos usar a la hora de abrir enlaces en nuevas ventanas o pestañas. Os he mostrado unos ejemplos que os van a venir muy bien a la hora de crear enlaces en vuestro sitio web. Y unas recomendaciones finales sobre el significado de los nombres que ponemos a los enlaces e identificadores. No he puesto ejemplos con imágenes de como quedarían los enlaces, es porque quiero que copies los códigos y lo veas por ti mismo en el navegador. Si tienes alguna duda sobre esto que te comento, puedes preguntarme lo que necesites. Creo que la de a sido una clase muy completa y con esto no vas a necesitar saber más sobre crear enlaces en nuestra página web.
Me despido hasta la próxima clase que además abrirá lo que va a ser el tercer modulo del curso de HTML5 desde cero.. Nada más por ahora y os recuerdo que justo debajo, tenéis el listado de las clases que llevamos hasta la fecha. Me gustaría que compartieses esta publicación con tus amigos, nos regales un me gusta en la página de Facebook y si te apetece únete a la comunidad de Facebook.
0 Comentarios