Un diseño HTML5 para una página personal científica

Desde hace tiempo acariciaba la idea de actualizar mi web personal con un diseño 100% HTML5 que fuera responsive, es decir, que se adaptara a diferentes tamaños de pantalla y dispositivos. Al final he implementado esa actualización y he empleado HTML5, CSS3 y Javascript. El resultado se puede ver en la página web que recoge mi labor científica como investigador en materias de interacción persona-máquina.

Diseño responsive de la web
Diseño responsive de la web

Lo que diferencia a una web con un diseño responsive (sensible, en español) de una web con un diseño adaptive (adaptado, en español) es que la primera responde a las medidas de la pantalla del dispositivo en la que se muestra para ajustarse a ella, mientras que la segunda hace lo mismo pero en base a unas plantillas prediseñadas que se cargan en función del dispositivo que se emplea. No son estrategias excluyentes, ni mucho menos. Tampoco es que la anterior sea una explicación exhaustiva (ni correcta al 100%) de sus diferencias. Sólo pretende ilustrar que ambas son metodologías que persiguen un mismo objetivo que, hasta la irrupción con fuerza de los dispositivos móviles con conectividad a Internet, no se tenía demasiado en cuenta: una web debe tener un diseño adecuado para que se visualice correctamente en distintos dispositivos, sean cuales sean las dimensiones de los mismos.

La combinación de HTML5, CSS3 y JavaScript es idónea para conseguir una web responsive, plenamente orientada a su contenido pero sin dejar de lado su forma. Es por eso que ellos son los tres pilares en los que se basa el diseño de esta web.

HTML5 + CSS3 + Javascript
HTML5 + CSS3 + Javascript

La web presenta diversas características. La principal es que no es una web compleja: su imagen es sencilla y limpia, en la que destaca el contenido por encima del continente. La segunda característica importante es que dicho contenido se muestra de manera adecuada en diferentes dispositivos haciéndolo accesible y fácilmente legible. Por otra parte, no presenta animaciones complejas ni recursos gráficos llamativos, pero sí dispone de elementos interactivos que permiten mejorar la experiencia del usuario. Así, por ejemplo, las páginas Software y  Publicaciones, las cuales contienen una gran cantidad de texto estructurado en diversas secciones, compactan dicho texto en bloques que pueden desplegarse (y volverse a ocultar) al hacer clic sobre ellos. Esto hace que la presentación sea más ligera y permite al usuario poder mostrar sólo aquella información que desea consultar.

Bloques de texto interactivos
Bloques de texto interactivos

Además, el código fuente utiliza el protocolo Open Graph e implementa Twitter Cards para adaptar los enlaces a las páginas del sitio en las redes sociales Facebook y Twitter, respectivamente. Al compartir las páginas en alguna de estas redes, se visualiza una breve descripción y una pequeña imagen que hacen más atractiva la publicación.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.