Todo lo que tiene que ver con la informática evoluciona rápidamente y el diseño de paginas web es una prueba más de que nuestras páginas tienen que evolucionar adaptándose a las nuevas exigencias de los mercados.
Desde que Barnes Lee en 1990 pensó en un sistema de documentos relacionados entre sí a través hiperlinks (lo que hoy llamamos enlaces) ya han pasado unos pocos años y por tanto los cambios han sido enormes y las diferencias con las páginas web actuales, abismales.
La parte buena es que podemos ofrecer a nuestros visitantes nuevas e imaginativas experiencias en comunicación, aunque a costa de un esfuerzo constante en innovación, aprendizaje y adaptación a las nuevas posibilidades que los navegadores web nos ofrecen.
Índice de contenidos
La tecnología de maquetación de las webs
Las páginas web actuales pueden contener, además de texto, imágenes, sonidos, vídeos, animaciones en diferentes formatos. Las imágenes pueden ser JPG, GIF, PNG, los vídeos, FLV, MPG, AVI, sonidos en MP4, animaciones Flash que también proporciona interactividad con el usuario. Así que los lenguajes HTML, CSS y Javascript desarrollados en un principio para la creación de las páginas, han tenido que evolucionar para conseguir mostrar todos estos elementos con la mayor eficiencia posible, aportando una mejora en la experiencia del usuario cuando visualiza las páginas.
Todas las páginas están programadas utilizando estos tres lenguajes HTML, CSS y JavaScript y cada una de ellas se aplica en un área concreta. El HTML para definir la estructura de la página. EL CSS para adecuar su aspecto, colores y disposición de elementos y el JavaScript para añadir interactividad con el usuario.
El año 2012 ha supuesto el asentamiento de las últimas versiones de estos lenguajes ya que actualmente la mayoría de los ordenadores y dispositivos que se utilizan para navegar por la web son capaces de soportar HTML5, CSS3 y Javascript 1.5.
Es decir, ahora ya no hay tantos problemas para conseguir que una página web se visualice de forma correcta en todos los navegadores, ya que Internet Explorer 8 y 9, Firefox 4+, Chrome y Safari 5+ los soportan.
Resolución de pantalla y tamaño de la webs
Normalmente, lo que importa a la hora de diseñar una web es el ancho, ya que el scroll suele ser vertical y tratamos de conseguir que toda la página web quepa a lo ancho en la pantalla.
En el 2008 la resolución de la mayoría de los monitores era de 1024x768px, así que las páginas se creaban con un ancho de 960px, garantizando así que la mayoría de los ordenadores las presentaran sin problemas.
Sin embargo en 2012 la mayoría de pantallas tienen resoluciones superiores, así que se está produciendo un cambio en este sentido, ya que comienzan a verse diseños realizados con anchuras superiores a 960px que ya se había convertido en un standard.
Infografía sobre la evolución de la resolución de pantalla y los navegadores
Diseño web responsive o adaptativo
Otro nuevo avance de la tecnología con consecuencias directas en el diseño web son los dispositivos móviles cada vez más utilizados para navegar por Internet.
Traen consigo nuevas resoluciones de pantalla y nuevos comportamientos de usuario. Por ejemplo, el scroll en las tablets se hace deslizando el dedo por la pantalla y es más común hacerlo de derecha a izquierda (como si fueran las hojas de un libro) que con el típico scroll vertical).
La solución a este problema la proporciona CSS3 y lo que se conoce con el nombre de ‘responsive design’: el diseño adaptativo.
Esta nueva capacidad consiste en cambiar la apariencia de la página, tanto en colores como en disposición de sus componentes, según sea la resolución de pantalla del dispositivo con el que se está visualizando.
Teniendo en cuenta que según Emarketer, en 2013 habrá casi 130 millones de usuarios de dispositivos móviles, ahora mismo es prácticamente ‘obligatorio’ diseñar las webs con diseño adaptativo.
Fuente: Dot Com Infoway – Software and Mobile Application Development Company
Ejemplos de diseño web adaptativo:
Experiencia de usuario
Una parte fundamental en el diseño web es la usabilidad, la experiencia de usuario, conseguir que la visita del usuario a nuestra página se confortable y no un quebradero de cabeza, a parte, claro está, de que sea visualmente agradable e incluso que la información se muestre de forma original haciéndola destacar del resto de webs.
Estos efectos visuales que solemos ver en la mayoría de webs, como los menús desplegables, las imágenes que se amplían con efecto zoom, el envío de formularios sin cambiar de página, animaciones, galerías de imágenes, etc, se consiguen gracias a JavaScript.
La programación en JavaScript también es complicada debido a que los diferentes navegadores interpretan de forma distinta las instrucciones y pueden producir comportamientos no deseados, así que han aparecido librerías que consiguen solucionar este problema y facilitarle la vida al programador, como jQuery, Mootols y BlueMonkey,
Sin lugar a dudas, jQuery es la más utilizada de todas. La mayoría de componentes mostrados en las webs utilizan esta librería que poco a poco se está convirtiendo en otro estandard en el diseño web.
Por ejemplo, la mayoría de webs, ahora mismo, tienen en su cabecera unas imágenes que se van desplazando con diferentes tipos de animación. Se conocen como ‘sliders’ y se pueden incorporar fácilmente a cualquier web.
Estos son algunos de los componentes jQuery que se suelen ver en la mayoría de webs:
- Uno de los sliders más famosos es jQuery Nivo Slider
- La imaginación es el límite para diseñar sistemas de navegación como este Menú desplegable, o éste otro con efecto Acordeón.
- Otro efecto que está de moda es el Paralax Scrolling
- Representación gráfica de datos con arbor.js
- Distribución automática del contenido de las páginas con Mansory. Si en esta web cambias el tamaño de la ventana del navegador, podrás ver como las columnas se redistribuyen. Cada vez se ven más webs con este efecto.
Tipos de letra
Hasta hace poco tiempo, utilizar tipos de letra que no estaban instalados en el ordenador de quien visita nuestra página, era un problema, ya que no era posible visualizarlos correctamente. Sin embargo ya han aparecido tecnologías como @font-face y Cufon, basadas en CSS3 y Javascript, que nos permiten incorporar cualquier tipo de letra a nuestras webs.
También cabe destacar que podemos utilizar en nuestros diseños tipos de letra almacenados en Google Web Fonts de una forma muy sencilla con resultados excelentes.
Estos son algunos ejemplos de webs sin miedo a los tipos de letra:
Fondos de página con imágenes a pantalla completa y vídeos
La velocidad de la conexión cada vez es menos problema. No hace mucho había que tener mucho cuidado con los tamaños de las imágenes, ya que con una conexión lenta, éstas tardaban demasiado en mostrarse. Sin embargo, las velocidades de conexión actuales permiten que las imágenes sean mayores y de más resolución e incluso poder incorporar vídeos que se reproduzcan como fondo a pantalla completa.
El contenido es el rey
Una frase que últimamente se escucha por todas partes y que debemos tener en cuenta si queremos que nuestra web se posicione en los primeros puestos en los rankings de los motores de búsqueda.
En éste último año los cambios realizados por Google en sus algoritmos de búsqueda hacen que el contenido de texto de las páginas sea fundamental imponiéndose a la mayoría de trucos SEO para mejorar el posicionamiento de las webs.
Así que uno de los mayores esfuerzos que debemos realizar es mantener nuestras webs actualizadas con nuevos contenidos, para lo que nos será de gran utilidad incluir un blog que además proporciona un nuevo canal de comunicación con nuestros visitantes quienes podrán opinar sobre nuestras publicaciones y a su vez generar nuevos contenidos.
El sistema de blogs utilizado en la mayoría de webs es WordPress, que ya ha dejado de utilzarse sólamente para blogs. Actualmente constituye una potente herramienta de gestión de contenidos (CMS) extendible en forma de plugins y que se puede utilizar para prácticamente cualquier propósito, incluso tiendas virtuales, compitiendo con éxito contra plataformas específicas de comercio electrónico como Prestashop o Magento.
- Tienda virtual de productos de pesca realizada con Magento www.hobbybass.com
- Tienda virtual de regalos de empresa realizada con Prestashop www.regalonline.es
Resumiendo:
- Diseñar webs utlizando HTML5, CSS3 y jQuery mejorará la experiencia de nuestros visitantes.
- Incorporar el diseño adaptativo facilitará la visualización de las webs en los dispositivos actuales como tablets y smartphones.
- Gracias a jQuery y podemos incorporar efectos visuales atractivos que llamen la atención de nuestros visitantes.
- Es tendencia utilizar nuevos y originales tipos de letra incluso con tipografías enormes, creando diseños llamativos y originales.
- Con las altas velocidades de acceso a internet cada vez más páginas utilizan imágenes enormes y vídeos a pantalla completa.
- Utilizar blogs y mantener una web actualizada con nuevos contenidos, permitiendo la participación de los visitantes, nos permitirá aumentar los ratios de contenido para escalar posiciones en los rankings de Google.
