Cuando comienzas en el mundo del diseño o desarrollo web o simplemente te interesas por el, te das cuenta de la cantidad de palabras técnicas y frases de moda que tiene. Incluso en los comienzos del diseño web allá por los años 90 ya sucedía exactamente lo mismo, invasión de siglas y lenguajes técnicos, aun que por desgracia para muchos, el entorno actual del desarrollo web es cien veces más complicado que antes, como es lógico, las herramientas y frameworks, lenguajes y bibliotecas han avanzado considerablemente.
Los diseñadores, incluso los más profesionales, deben luchar para mantenerse en la cima e ir actualizándose constantemente, en cierto modo se puede comparar con algunas otras profesiones, como la de medicina, en la que jamas dejas de estudiar y si lo haces, estas perdido.
Puedes ponerte al día rápidamente con esta sencilla guía de conocimientos y términos obligados para todo diseñador web.
01. HTML5, CSS3 y JavaScript
HTML
HTML significa HyperText Markup Language, y es el idioma de las páginas web.
En pocas palabras, el HTML es una herramienta que proporciona a los diseñadores web una forma de decirle a su navegador como debe tratar o representar un objeto del contenido web. El HTML contiene diferentes etiquetas que permiten al diseñador marcar su contenido con significado semántico a fin de que los párrafos se identifiquen como texto, mientras que las imágenes se importan como imágenes y así sucesivamente.
CSS
El HTML no es suficiente por sí solo para crear buenas páginas web, sin embargo, el CSS (Hojas de Estilo en Cascada) proporciona un método para que los diseñadores creen un conjunto visual de reglas que determinan cómo se representarán diferentes elementos dentro de una página web en la pantalla del navegador. CSS permite cosas como el color del texto, el fondo, el tamaño, forma y posición de las diferentes partes de una página web.
JavaScript
Por último, JavaScript es (como su nombre indica) un lenguaje de scripting que permite a los diseñadores crear interacciones en una página web.
Históricamente JavaScript se utilizaba principalmente para la validación de formularios, y proporcionó los cuadros de alerta tan molestos que aparecen cuando se te olvida introducir tu número de teléfono en el campo correspondiente de un formulario. En estos días hay muchos usos más viables para JavaScript, incluyendo efectos visuales especiales, o la posibilidad de cargar el nuevo contenido sin tener que recargar toda la página.
Una cosa importante a destacar es que a pesar de su nombre, JavaScript no guarda relación con el lenguaje de programación Java.
02. Responsive design
Es imposible que un diseñador no haya oído hablar del diseño web responsive (diseño adaptativo), durante los últimos años este termino ha sido puesto en boca de todos, incluso de muchos clientes que aun sin saber exactamente que es, lo quieren para su web.
En términos simples, un diseño web responsive es aquel que se adapta al dispositivo del usuario, con independencia de cual sea este, ya sea un móvil grande o pequeño, una tablet, portátil o un sobremesa con un gran monitor.
En la práctica esto significa que una página web se reajusta automáticamente al tamaño de la pantalla, reduciéndose o aumentado, representando la web en varias columnas cuando se ve en un un ordenador de escritorio, pero sólo en una columna cuando se ve en un teléfono inteligente. Ten en cuenta que el concepto de diseño web responsive es mucho más que un simple cambio en el formato del contenido y en muchas ocasiones da dolores de cabeza ya que el fin de todo buen diseño responsive es que todas y cada unas de las partes de la web, cabeceras, contenidos, barras laterales, pies, galerías… se vean y sean usables en todos los tamaños.
03. El marcado semántico
El marcado semántico es una aproximación a la codificación HTML, donde las etiquetas de marcado usadas para describir el contenido también proporcionan metadatos relevantes sobre el contenido mismo. Por ejemplo, una pieza de información que es relevante para el contenido principal de una página, pero no directamente del tema principal del que trata la página, podría ser marcado como <aside>.
Aunque pueda sonar como una metodología obvia de buenas prácticas, el uso de este enfoque no siempre ha sido fácil. En los comienzos del diseño web el número de etiquetas HTML disponibles era limitado. Muchas de las etiquetas que existían eran puramente de naturaleza semántica: la etiqueta <p>, por ejemplo, se utiliza para etiquetar el contenido de un párrafo.
Con el tiempo, los diseñadores quisieron ir más allá, empujando los límites de lo posible, para crear diseños web más sofisticados que el idioma en su forma más pura les permitía, por lo que los usos de la etiqueta <table> y <td>, que estaban destinadas originalmente para marcar tabulaciones de datos, fueron reutilizadas para proporcionar una solución fiable a la creación de diseños web en columnas.
Al mismo tiempo, los diseñadores comenzaron a depender de las características visuales predeterminadas de una etiqueta en particular para definir la etiqueta que se utilizaba para el contenido, en lugar de la etiqueta remodelada semánticamente apropiada al diseño. Como resultado, el texto en negrita se rinde a menudo a las etiquetas de encabezado (<h1>, <h2>, <h3>, etc.), en lugar de una <strong> o <em>.
Como resultado de esto, gran parte de la naturaleza semántica del HTML se perdió durante una generación. La desventaja de una web no semántica es que se hace muy difícil de mantener o entender el código subyacente, y los motores de búsqueda no pueden definir mediante programación los elementos más importantes de una página con precisión.
Afortunadamente, con la llegada de CSS y la última versión del lenguaje HTML, el enfoque de la semántica más purista ha regresado. CSS facilita diseños más sofisticados de lo que era posible con la etiqueta <table>, y el lenguaje HTML se ha ampliado para incluir nuevas etiquetas semánticamente orientadas, tales como <header>, <footer> y <article>.
04. SaaS
No debe confundirse con SASS (Syntactically Awesome Stylesheets, que es un lenguaje de hoja de estilos). SaaS es un acrónimo de software de servicio. En términos simples esto significa, cualquier servicio que proporcione una plataforma de software, desde o a través de la nube. Los ejemplos más populares de SaaS son las últimas versiones de Microsoft Office, Google Docs y Photoshop Express.
Cada uno de estos servicios proporcionan una experiencia de escritorio al usuario, que se proporciona directamente desde la web sin necesidad de instalar ningún software adicional en el ordenador del usuario.
05. Pruebas A/B
Las pruebas A/B es una metodología para probar diferentes formas de lograr el mismo resultado final, con el objetivo de establecer a través de la experimentación que solución es la más efectiva. Normalmente las pruebas A/B se utiliza para los ensayos en diferentes diseños de páginas web, el seguimiento de cuántos usuarios se convierten en clientes de pago utilizando los diseños alternativos.
Al continuar un proceso iterativo de prototipos, evaluación y adaptación, las pruebas A/B puede proporcionar un aumento significativo de la tasa de conversión de páginas individuales. Es una herramienta muy útil, mejor conversión significa un balance mejor!
06. ARIA (Accessible Rich Internet Application)
ARIA es un acrónimo de Accessible Rich Internet Application, y se refiere a la idea de que las aplicaciones web son utilizadas por una variedad de personas con diferentes necesidades de tecnología y de diseño. ARIA se utiliza normalmente como un término para ayudar a describir las tecnologías empleadas, para ayudar a cerrar la brecha entre las necesidades del usuario y las de una App o web.
Esto puede referirse por ejemplo, a un software de lectura de pantalla para personas con problemas de visión, los enfoques de diseño estructural y metodologías de diseño, como el diseño de interfaz de usuario, con el objetivo de aumentar la accesibilidad de los contenidos y funcionalidades a todos los usuarios. Los patrocinadores del W3C han completado gran parte del trabajo en este campo, puedes encontrar más información en el sitio Web Accessibility Initiative ARIA.
07. Arquitectura de la Información
La arquitectura de la Información (IA) es un término genérico utilizado para describir la distribución semántica de los contenidos y la información en un sitio web. Se refiere a la organización de la información, se trata de qué páginas van donde, en la estructura de un sitio web, el contenido que está contenido en cada página, y cómo cada uno de ellos interactúan con otras páginas dentro del sitio.
Dicho de otro modo, la IA consiste en poner la información de la web lo más accesible posible para los usuarios, y que estos encuentren la información que están buscando rápidamente.,con el objetivo de aumentar la conversión, los ingresos y o la satisfacción del usuario.
08. Server-side scripting
Hay dos formas diferentes de proporcionar funcionalidad a las aplicaciones de un sitio web, por el lado del cliente, donde toda la lógica y la manipulación de los datos son tratados por el navegador web utilizando JavaScript, y del lado del servidor, donde se lleva a cabo la manipulación de datos en el servidor. La mayoría de las aplicaciones web combinan las dos tecnologías, todo lo que el usuario maneja en el navegador es enviado de vuelta al servidor para ser almacenado, manipulado o generado.
Server-side scripting es un término genérico para describir las lenguas utilizadas para programar esta manipulación de datos en el servidor. Los lenguajes de programación como PHP y ASP.NET proporcionan una manera sencilla a los desarrolladores web para crear sofisticadas formulas matemáticas que puede interactuar con una base de datos, realizar operaciones complejas de datos y proporcionar información de vuelta al navegador.
Debido a que el procesamiento se realiza en el servidor, el navegador web del usuario no tiene que trabajar tan duro, mejorando aparentemente el rendimiento, al menos desde la perspectiva del usuario.
09. Jerarquía visual
La jerarquía visual no se limita solo al diseño web, pero está siendo cada vez más utilizado para referirse a la concepción y el diseño de una página web. En pocas palabras, la jerarquía visual se refiere a la disposición de los elementos del diseño de una página para que los elementos más importantes parezcan tener más importancia dentro del conjunto.
Este énfasis se logra normalmente a través del uso del tamaño, color, fuente y efectos especiales como sombras. La jerarquía visual es a menudo una decisión consciente, como resultado de un proceso de la Arquitectura de la Información.
10. Desplazamiento Infinito/parallax
El desplazamiento Infinito y parallax son dos cosas distintas, pero a menudo se les ve juntos, por eso los hemos unido aquí.
Desplazamiento Infinito es actualmente un modo, que se ha puesto de moda, de presentar un sitio web para que en lugar de cargar las páginas separadas para poder ver el contenido, todo el contenido de la página se carga en una sola página que se desplaza para mostrar diferentes áreas de contenido.
La premisa es que a medida que el usuario se desplaza hacia el final del contenido de la página, el contenido se carga y se añade a la parte inferior de la página, se crea por tanto un desplazamiento “infinito”. Los ejemplos más populares son la vista de línea de tiempo de Facebook, Pinterest y Tumblr.
Parallax es el efecto observado cuando los objetos más cercanos a tu punto de vista parecen moverse más rápidamente que los elementos más lejanos. Esto se aprecia mejor desde un coche en movimiento o en tren, donde las cercas y los árboles cercanos al vehículo parecen quedarse atrás rápidamente, mientras que las montañas en la distancia parecen moverse más lentamente.
En diseño web, este mismo efecto se utiliza para crear una sensación de profundidad, a menudo proporcionando un movimiento en respuesta al desplazamiento del usuario.
Deja tu comentario