Cómo crear un chatbot con Inteligencia Artificial

Usa la poderosa herramienta de aprendizaje de Google para crear un chatbot con Inteligencia Artificial.

Crear un chatbot con inteligencia artificial. La Inteligencia Artificial (IA) nos permite crear nuevas formas de ver los problemas existentes, desde replantearnos las estrategias del entorno hasta cómo aprendemos. Tus proyectos, ya sean aplicaciones, páginas web o juegos, pueden aprovechar la IA para hacerlos más atractivos, fáciles de usar y con resultados más valiosos. Uno de estos métodos consiste en crear un chatbot en lenguaje natural para ayudar a los usuarios a interactuar con tu sitio.

Para crear un chatbot con inteligencia artificial, utilizaremos el nuevo conjunto de herramientas Dialogflow de Google. Aprovecha el potente aprendizaje de la herramienta, así como la comunicación de voz a texto. Se puede incorporar directamente en tu sitio web como un widget o personalizarse según tus necesidades.

Comencemos este tutorial para crear un chatbot con Inteligencia Artificial:

01. Crear una cuenta

Dirígete a dialogflow.com y crea tu cuenta. Inicia sesión y acepta los permisos para que Dialogflow tenga acceso a tu cuenta.

02. Crear un agente

Dialogflow utiliza el término ‘agente’ para representar instancias de tu IA. Piensa en el agente como la inteligencia virtual que estás creando. Podrías tener muchos agentes trabajando para ti, cada uno con su propia personalidad y propósito.

Haz clic en el botón «Crear agente» e introduce un nombre para tu agente: Ejemplo: «HAL9000».

03. Crear una intención

Primero, necesitas crear una intención. Estamos definiendo la «intención» de las entradas del usuario. Haz clic en «Crear intención» y ponle el nombre, por ejemplo «Abrir puertas». Presiona ‘Guardar’.

04. Entrena a la IA para este propósito

Entrena a la IA para este propósito proporcionando frases que un usuario pueda usar. La IA PNL utilizará estas y otras variaciones derivadas para entrenar al agente. Añade las siguientes frases de formación en la ventana ‘Frases de formación’ y añade todas las que quieras:

«Abre las puertas de la bahía de la cápsula, Hal.
«Abre las puertas».
¡Déjame entrar, Hal!

05. Añadir respuestas

A continuación, debe añadir algunas respuestas con las que el agente responderá. Se introducen en la ventana `Respuestas’. Prueba algunas como esta:

Me temo que no puedo hacer eso.
No puedo hacer eso ahora mismo.
A continuación, pulsa `Añadir respuestas’ y `Guardar’ en la parte superior de la pantalla. Verás notificaciones de que el agente está siendo entrenado y entonces está listo.

06. Prueba el chatbot

En el lado derecho de la pantalla hay una herramienta de prueba. El chatbot utilizará el servicio de voz a texto de Google para traducir tu voz a texto si lo pruebas. Deberias ver los resultados de tu solicitud y la respuesta que el agente de AI seleccionó. ¡Muy bien!

07. Crear y utilizar una entidad

Las entidades son conceptos que pueden ser definidos y reutilizados en las respuestas del agente como variables. Vamos a entrenar a la IA para que entienda cuando un usuario está expresando una emoción y luego usarla en su respuesta al usuario.

En el menú de la izquierda, haga clic en ‘Entidades’. Escribe ‘emoción» para el nombre de tu nueva entidad. Mantén marcada la opción ‘Definir sinónimos’. Haz clic en la tabla de abajo y escribe «enojado» como primera emoción. Luego haz clic a la derecha y añade sinónimos como «loco», «molesto», etc. Luego añade otra entrada para «asustado» y usa los sinónimos «asustado», «aterrorizado», etc., que te gusten. Presiona ‘Guardar’ cuando termines.

Esto ha entrenado al Agente a entender que ‘enojado’ y ‘asustado’ son emociones que un usuario puede comunicar. Todos esos sinónimos son variaciones que pueden ocurrir. La IA también generará algunos.

08. Crear una nueva intención

Ahora vamos a crear una nueva intención para usar la entidad «emoción» que hemos creado. Llama a esta intención ‘emociones’ y haz clic en’Guardar’.

A continuación, añade nuevas frases de formación como «me estás asustando», «me estás volviendo loco» y «estoy muy enfadado», utilizando variaciones de palabras clave enfadado y asustado. Esto capacitará al agente para comprender las diversas formas en que un usuario puede expresar esta expresión emocional.

Notarás que el sistema resalta las palabras asustadas y enojadas para ti. Ya los está marcando como entidades. También ha añadido una entrada en la ventana `Acciones y parámetros’. Esto te permite usar estas entidades en tus respuestas del mismo modo.

09. Añade una respuesta usando la nueva entidad `emoción’.

En la ventana Respuestas, añade nuevas respuestas que utilicen esta nueva entidad. Fíjate en el ‘$’ para indicar la Entidad $emoción. Intenta añadir estas respuestas:

Lamento que sientas $emoción, Dave.
«Sentir $emoción es una respuesta humana, Dave».
Haz clic en «Añadir respuestas» y pulsa el botón «Guardar» en la parte superior de la pantalla para guardar la intención completa.

10. Prueba tu chatbot de nuevo

Intente decir o escribir las siguientes frases en la herramienta de prueba.

Me estás haciendo enojar mucho, Hal.
Me estás asustando.
¿Notan cómo respondió usando «asustado» con el segundo? Usó nuestro sinónimo ‘asustado’ para saber que queríamos decir asustado. Muy bien.

Siéntete libre de jugar con esto, así como de añadir más intentos y respuestas que te gusten y luego añadiremos esto a una página web.

11. Activar la integración web

Para añadirlo a tu página web, haz clic en ‘Integraciones’ en el menú de la izquierda. A continuación, haz clic en la casilla `Web Demo’ para activar esta opción.

Aparecerá una ventana emergente que te mostrará un enlace directo para que puedas probar tu integración de inmediato. También mostrará un fragmento de código que puedes usar para soltar el widget en tu propio sitio web. Copia ese fragmento al portapapeles para que puedas pegarlo en tu sitio.

12. Crear una página web básica y añadir el fragmento

Crea una página básica de HMTL e incluye ese fragmento de código a continuación. Prueba el siguiente código y súbelo a tu servidor o ejecútalo en tu servidor local. Reemplace el fragmento de abajo con el que ha copiado de su agente Dialogflow:

<!DOCTYPE html>
<html>
<head>
	<title>NET - AI Chatbot</title>
</head>
<body>
	<iframe
    allow=”microphone;” width=”350”height=”430” src=”https://console.dialogflow.com/api-client/demo/embedded/bbd27d04-5546-4b62-85a5-c373575a33aa”>
</iframe>
</body>
</html>

Acabas de crear un chatbot con inteligencia artificial

Con este último paso habrás integrado tu primer chatbot en tu página web, y por su puesto, si te ha parecido interesante este artículo, te recomiendo leer este otro, Cómo Diseñar Para La Web En 2019 / Nuevas Tendencias.

8 pasos para un diseño web accesible para todos

Descubre cómo crear un diseño web accesible con estos sencillos consejos

La accesibilidad es un derecho humano y, en algunos países, por ley. De hecho, en 2018 se produjo un gran aumento de las demandas de accesibilidad web. Ahora los diseñadores están empezando a darse cuenta de que un diseño web accesible es una necesidad. Con esto en mente, aquí te doy los ocho principales consejos para asegurar que tu diseño web esté optimizado para ser accesible y lo más inclusivo posible.

Si decides revisar los elementos accesibles de tu sitio web y te das cuenta de que tu diseño web necesita una actualización total, aquí te explico las principales tendencias del diseño web para 2019.

A continuación los 8 pasos para un diseño web accesible:

01. Definir la accesibilidad

La accesibilidad y el diseño inclusivo a veces se mencionan indistintamente, pero no reconocer la distinción entre ellos puede tener consecuencias drásticas. El diseño de accesibilidad consiste en eliminar obstáculos para que todos los usuarios puedan utilizar las aplicaciones y sitios web que diseñamos.

A continuación, recordemos que los tamaños de fuente más grandes reducen el obstáculo «no puede leer el texto», por lo que o bien permitimos que ciertos usuarios cambien a un «modo de accesibilidad» alternativo, o bien creamos una versión accesible, pero separada, a la que se puede acceder mediante un enlace en la navegación. Ahora, esto no sólo difumina la línea entre accesible e inaccesible (ya que los usuarios con discapacidad visual todavía lo tienen que localizar), sino que no es del todo inclusivo, porque hemos aislado a estos usuarios. Han sido segregados, se les ha hecho sentir diferentes, y para colmo, hemos tenido que diseñar y desarrollar dos versiones de nuestra interfaz, gastando tiempo y esfuerzos adicionales.

Una fuente más grande para todos

En su lugar, podríamos haber diseñado simplemente una interfaz singular, más inclusiva, donde la fuente sea más grande para todos. Después de todo, incluso los usuarios que no son discapacitados visuales se beneficiarán de poder leer el texto más fácilmente, y es por esto que el diseño inclusivo es un triunfo tanto para los usuarios discapacitados como para los no discapacitados. El diseño inclusivo no disminuye la experiencia de los que no están discapacitados. De hecho, la gran mayoría de las reglas de accesibilidad definidas por el WCAG – Web Content Accessibility Guidelines, se duplican como consejos de usabilidad que, si se implementan, beneficiarán a todos los usuarios.

02. Simplificar el lenguaje

Cuando se trata de la palabra escrita, hay una gran variedad de consideraciones a tener en cuenta si queremos diseñar experiencias que se adapten a todo el mundo. Está la simplicidad de las palabras mismas (que puede afectar a los que tienen dificultades para leer), está la tipografía (que puede afectar a los usuarios con discapacidad visual), y está la consistencia (que puede afectar a los que tienen discapacidades cognitivas). Y, por supuesto, el diseño subóptimo afecta tanto a los que no están discapacitados como a los que sí lo están.

Cómo mejorar la tipografía y, por tanto, la legibilidad:

Alinear el texto sólo a la izquierda o a la derecha
Enlaces subrayados para un mayor contraste visual
Aplicar el espaciado de línea por lo menos 1.5 veces el tamaño de la fuente
Espaciado entre párrafos: al menos 1,5 veces el espacio entre líneas
Ancho de párrafo: no más de 80 caracteres

Cómo reducir la carga cognitiva:

Usar un lenguaje sencillo
Definir abreviaturas en el primer uso
Asegurarse de que el texto del enlace se describa de forma eficaz
Coincidir URLs idénticas con texto de enlace idéntico
Estructurar el contenido de forma lógica utilizando encabezados claros.

03. Optimizar el contraste de color

El contraste de color es una medida de lo bien que se distinguen los colores de dos elementos de diseño. La unidad de esta medida es una proporción, y hay una proporción mínima a la que apuntar. Suponiendo que varios elementos de diseño cumplan con la relación mínima de contraste de color definida por el WCAG, no sólo estamos permitiendo la legibilidad a los usuarios con discapacidad visual, sino que la estamos potenciando para aquellos que no la tienen también. Esta es una de las muchas maneras en que diseñamos inclusivamente con un esfuerzo prácticamente nulo.

Entonces, ¿cuál es el requisito mínimo, y cómo lo comprobamos? En primer lugar, los analizadores de contraste de color como Stark pueden utilizarse para medir la relación de contraste de color. Sin embargo, la proporción mínima a la que debemos llegar depende del elemento en sí, es decir, si se trata o no de un elemento importante de la interfaz de usuario, como un icono o un campo de formulario, o, si el elemento es textual, si el tamaño de la fuente es pequeño o grande, ya que las fuentes más grandes son más legibles incluso antes de retocar el contraste.

Estos son los requisitos de la relación de contraste de color para el texto sobre el fondo, tal como lo define el WCAG:

14pt negrita o 18pt normal: 4.5:1 (7:1 es mejor)
Negrita de 14pt o normal de 18pt, y más: 3:1 (4.5:1 es mejor)

Estos son los requisitos para los elementos de la interfaz de usuario:

Objetos gráficos (como gráficos): 3:1
Concéntrate, desplaza el cursor y los estados activos: 3:1
Iconos y elementos de formulario en los que se puede hacer clic: 3:1

La aplicación Stark mencionada anteriormente también puede simular el aspecto de nuestro diseño para usuarios con diferentes tipos de daltonismo: después de todo, el 4,5% del mundo es un gran número de usuarios potenciales. Si te resulta difícil conseguir un contraste óptimo con los enlaces de un cuerpo de texto, subrayalos para que los enlaces sean más fáciles de detectar, porque algunos usuarios daltónicos no ven el contraste de color en absoluto.

04. Ayudar a los usuarios a corregir errores

Los errores a menudo resultan una nube de confusión, especialmente cuando el usuario no sabe exactamente lo que hizo, o cómo arreglarlo. Los errores son inevitables, especialmente para el usuario moderno que se apresura a interactuar con las interfaces, fuertemente armado con su modelo mental, y es por esto que ayudar a los usuarios (discapacitados o no) a superar sus errores es vital para la accesibilidad.

Naturalmente, el escenario más común en el que el usuario puede cometer un error es al rellenar un formulario, y a menudo como resultado de una variedad de discapacidades, es decir, dificultad de comprensión como resultado de una discapacidad cognitiva, introducción de datos incorrectos como resultado de una discapacidad motora, etc. En primer lugar, si podemos corregir el error del usuario de forma programada, entonces se evitará la crisis. Un ejemplo de esto en acción podría ser añadir https:// a su URL si aún no ha sido añadido, en lugar de forzar al usuario a arreglarlo por sí mismo.

Considera estos otros consejos para reducir los errores:

Utiliza siempre etiquetas de formulario para describir los campos.
Y marcadores de posición para mostrar un ejemplo de entrada aceptable
Habilitar la función de autollenado y autocompletar para reducir los requisitos de escritura

Y estos consejos para ayudar a los usuarios a corregir errores:

Mostrar los errores de formulario claramente en tiempo real
Permita que el usuario verifique sus datos antes de enviarlos.
Importante y a menudo se olvida: ¡no hagas que los usuarios se sientan estúpidos!

Saltar al contenido principal es una característica de accesibilidad relativamente oscura dirigida a aquellos que navegan por las interfaces de usuario con lectores de pantalla. Lo más probable es que nunca hayas oído hablar de esta función; así de inclusiva es. Los lectores de pantalla, o simplemente aquellos que en su mayoría navegan por las interfaces de usuario utilizando el teclado, tabulan a través de los destinos mediante la tecla de tabulación. Si no está desactivada, es probable que lo hayas experimentado de todas formas al saltar a través de los campos del formulario en un navegador web de escritorio, ya que es mucho más fácil que hacer clic.

Saltar al contenido principal es una mejora de la accesibilidad para ayudar a este subconjunto de usuarios a escapar de la repetitividad evitando la navegación principal; esto funciona al tener el primer elemento de la pestaña un enlace que salta al contenido principal. Es oscuro para aquellos que no usan lectores de pantalla porque este enlace sólo se muestra una vez con pestañas. Intenta buscar algo en Google y luego presiona la tecla de tabulación.

También es importante indicar visualmente qué elemento está actualmente enfocado, ya que el índice de pestañas puede cambiar a una ubicación inesperada (índices de pestañas y, por lo tanto, lectores de pantalla leídos de arriba hacia abajo). En términos de código CSS, esto a menudo aparece como si fuera una sombra azul, pero en realidad es un esquema, ¡así que asegúrate de no sobreescribir este estilo!

06. No crees presión (diseño web accesible)

A nadie le gusta sentirse presionado, pero para las personas con discapacidades motoras o cognitivas, la presión puede provocar ansiedad. Las interfaces se han vuelto mucho más dinámicas con el paso de los años, a medida que más y más tareas pueden ser completadas usando un dispositivo. Lamentablemente, demasiadas experiencias dinámicas son el resultado de que los diseñadores intentan hacer que las interfaces de usuario sean más imaginativas a costa de la usabilidad. Un consejo útil sería simplificar el diseño y eliminar elementos dinámicos innecesarios.

Esto incluye carruseles, ventanas emergentes, alertas y animaciones que distraen.

A continuación, veamos cómo podemos hacer que estos elementos, en caso de que los necesitemos, sean accesibles para las personas con discapacidades. En primer lugar, necesitamos añadir un nivel de control para la reproducción automática de medios que exija atención, ya que esto podría añadir una cantidad incómoda de carga cognitiva adicional para las personas con discapacidades cognitivas. La regla es, tal y como se define en la WCAG 2.0, que si el medio se ejecuta durante más de tres segundos, debe ser controlable. Cualquier otra cosa que se desplace, parpadee o se mueva automáticamente sin que el usuario tenga que interactuar con ella (es decir, animaciones y carruseles) también debería ser controlable si dura más de cinco segundos.

Los movimientos inesperados son desagradables

Por lo general, los movimientos de comunicación inesperados son desagradables para los usuarios y es mejor evitarlos. Ten en cuenta que una regla similar se aplica a los elementos que parpadean más de tres veces por segundo, especialmente si es de alto contraste y rojo, ya que esto puede provocar convulsiones.

En cuanto a los mensajes de chat, alertas, recordatorios, noticias, etc, los usuarios deben poder limitar su frecuencia para disponer de más tiempo para leer y comprender lo que se está comunicando, y también es aconsejable dejar que el usuario descarte fácilmente cualquier alerta u obstrucción visible con la tecla esc. La presión para llevar a cabo una tarea es a veces inevitable, ya que algunas interfaces (como las interfaces bancarias) pueden tener un tiempo de espera por razones de seguridad, y naturalmente estas alertas tienen que ser obvias. En este escenario, a los usuarios con discapacidad que necesiten más tiempo se les debe ofrecer la oportunidad de hacerlo, haciéndole saber a la interfaz que el usuario no la ha abandonado y que por error dejó sus datos expuestos.

07. Relevo con los desarrolladores

Cuando se trata de mejorar la accesibilidad, los desarrolladores deben compartir la mitad de la responsabilidad, especialmente cuando se trata de hacer que las interfaces de usuario sean fáciles de leer para el lector de pantalla. La optimización del diseño web accesible para lectores de pantalla se realiza principalmente entre bastidores y no afecta en absoluto a los usuarios no discapacitados, lo que hace que estos sitios web sean muy inclusivos para los usuarios de todas las capacidades.

Para aquellos que se lo pregunten, un lector de pantalla ayuda a los usuarios con discapacidad visual leyendo en voz alta lo que hay en la pantalla. ¿Pero qué hay de las imágenes? ¿Qué pasa con los iconos sin etiquetas de texto? ¿Cómo es que los lectores de pantalla transmiten exactamente elementos de diseño sin descripción de texto, y cómo estas tecnologías de asistencia cambian rápidamente el enfoque a puntos de referencia clave como la búsqueda y la navegación? Bueno, aquí es exactamente donde el desarrollador entra en escena.

Repasemos algunos de los aspectos clave en el diseño web accesible:

Utilizar elementos HTML semánticos como <nav> y <header>.
Utiliza las funciones de referencia de ARIA para añadir más contexto a los elementos HTML
Declarar el lenguaje (correcto) (guía WCAG aquí)
Formar siempre elementos
Utilice «texto alt» (Error! Nombre de archivo no especificado.) para alternativas de texto a las imágenes puedes revisar este artículo.
Proporcionar opciones sin JS y nunca utilizar scripts en línea.

08. Elige gestos sencillos

La elección de gestos sencillos en lugar de gestos complejos ganará a los usuarios no discapacitados, al tiempo que hará que las interfaces de usuario sean accesibles para los usuarios discapacitados. Los gestos tienden a diferir entre aplicaciones y sitios web. En primer lugar, está la cuestión de las expectativas del usuario; por ejemplo, es bastante normal que las interacciones en las aplicaciones de pantalla táctil se produzcan al pasar el dedo por la pantalla, pero los usuarios no suelen pensar en pasar el dedo por un sitio web (ni siquiera por un sitio web para móviles). Aparte de eso, ¿hay algo que vaya más allá de la simple pulsación y el clicteo para los usuarios discapacitados?

La respuesta es sí, pero también son un poco intimidantes para los usuarios no discapacitados, con la posibilidad de que el swiping sea una excepción, ya que se puede hacer sólo con el pulgar. Quiero decir, ¿alguna vez has intentado girar un mapa de Google? Es una experiencia muy quisquillosa, y para aquellos con alguna discapacidad motora sería una tarea casi imposible de llevar a cabo. Dado que Google Maps no ofrece una forma alternativa de rotar utilizando botones en los que se pueda hacer clic, esta funcionalidad no es accesible ni inclusiva.

¿Realmente necesitamos este gesto?

Así que tenemos que preguntarnos caso por caso, ¿realmente necesitamos este gesto complejo? Por ejemplo, ¿funcionaría una columna estática y vertical tan bien como un carrusel deslizante? En ambos escenarios tendríamos el contenido desbordando la vista de cualquier manera, así que ¿qué es lo que realmente consigue un carrusel de deslizamiento? ¿Podría ser el swiping una mejora progresiva para los usuarios no discapacitados? Más simple es mejor en este caso.

Mientras tanto, asegúrate de que los objetivos de las tomas sean al menos 44px2 (para que sean fáciles de tocar y hacer clic, y también para el diseño web accesible visualmente) y razonablemente espaciados (para reducir el número de clics de error).

Color en diseño web: todo lo que necesitas saber

El éxito de cualquier pieza de comunicación visual depende del color. La investigación sobre el impacto del color en el marketing nos dice que a una persona promedio le toma solo 90 segundos tomar una decisión subconsciente sobre un producto, y que alrededor del 70% de esas decisiones se basan solo en el color.

En consecuencia, aumentar tu conocimiento de la teoría del color y la psicología puede contribuir en gran medida a aumentar las conversiones y, en muchos casos, mejorar la usabilidad de tus interfaces.

Aquí hay algunos factores que debe tener en cuenta al tomar decisiones de color en tus diseños.

Entiende que significa el color en diseño web

Cuando se trata de color, una cosa que seguramente te encontrarás es la controversia. Ha habido múltiples intentos de mapear los sentimientos humanos y las emociones en relación con el color. En general, diferentes colores representan lo siguiente:

rojo

Connotaciones positivas: energía, pasión, fuerza, calidez, emoción.
Connotaciones negativas: ira, agresión, miedo, rebelión, maldad.
Se utiliza para: crear urgencia, estimular el apetito, detener la señal

Amarillo

Connotaciones positivas: felicidad, optimismo, calidez, alegría, diversión
Connotaciones negativas: críticas, cobardes, impacientes, pesimistas, impulsivas.
Se usa para: Iluminar el espíritu, demostrar alegría, mostrar calor.

Verde

Connotaciones positivas: Crecimiento, vitalidad, natural, terrenal, equilibrado.
Connotaciones negativas: codiciosas, materialistas, envidiosas, tortuosas, indiferentes.
Se utiliza para: demostrar el crecimiento, mostrar credenciales ecológicas, señal de marcha

Azul

Connotaciones positivas: confianza, estabilidad, calma, integridad, lealtad
Connotaciones negativas: tristeza, frialdad, previsibilidad, conservador, rigidez.
Se utiliza para: Promover la calma, ganar confianza, mostrar limpieza.

Negro

Connotaciones positivas: autoridad, control, fuerza, sofisticación, seducción.
Connotaciones negativas: secreto, negativo, oscuro, deprimente, distante.
Se utiliza para: crear misterio, afirmar confianza, demostrar sofisticación.

Antes de continuar te recomiendo este libro que a mi me ha ayudado mucho, Psicología del color de de Eva Heller y Chamorro Mielke, Joaquín, puedes comprarlo en el siguiente enlace: Psicología del color.

Si bien estos son grandes puntos de referencia, la investigación nos dice que nuestra percepción del color está muy influenciada por nuestros antecedentes personales, cultura, experiencias y preferencias.

En China, por ejemplo, el amarillo se ha convertido en sinónimo de publicaciones pornográficas, por lo que si bien la página de inicio de Mailchimp (arriba) significa felicidad, optimismo y la calidez para algunos, esos simpáticos monos pueden interpretarse de forma inesperada en el país más poblado del mundo.

Una vez que sepas para quién estás diseñando, ten en cuenta el impacto de tu uso del color para asegurarte de que no envías a los usuarios el mensaje equivocado suponiendo que todos reaccionarán de la misma manera.

La regla 60-30-10

Usado tradicionalmente para el diseño de interiores, la adopción de esta fórmula de tres colores le dará equilibrio y consistencia a tus interfaces. Si incluyes un color primario 60%, un color secundario 30% y un color de acento 10%, los usuarios podrán moverse cómodamente entre los puntos focales de tu interfaz sin sentirse abrumados por una paleta excesiva.

Haz que el color funcione para ti

¿En qué harías clic: rojo o verde?

Comprender que algunas secciones de tu público responderán de manera diferente a los colores elegidos que otras debe servir como un recordatorio de que el color tiene la capacidad de trabajar a favor y en contra de tu proyecto. Rojo y verde en el contexto de un sistema de semáforo físico significa dos cosas muy diferentes; detente y sigue. Sin embargo, esta lógica no siempre se traduce al mundo digital del diseño de interfaces.

En un experimento titulado The Button Color A / B Test: Red Beats Green, Joshua Porter probó un botón verde y un botón rojo uno contra el otro en una landing page para ver que botón conseguía convertir en su plataforma. Dadas las connotaciones mencionadas para cada color, uno podría predecir que el verde tendría mejor desempeño, pero un 21% más de personas hicieron clic en el botón rojo. Podemos suponer que esto se debió a la naturaleza que llama la atención del rojo, o quizás porque el rojo contrastó más con los reflejos verdes preexistentes en la interfaz.

No importa cómo lo mires, debemos tener en cuenta que, si bien los colores significan un significado, siempre vale la pena probarlos con los usuarios en el contexto del diseño de tu página. Esto asegurará que el color funcione en tu beneficio, en lugar de en detrimento de tu tasa de conversión.

Refuerza tu mensaje con color.

El fondo azul oscuro de Monzo significa estabilidad.

Para evitar socavar el mensaje de tu marca, elige colores para tu interfaz que refuercen sus valores o propuesta. Es fácil caer en la trampa de elegir colores llamativos y gradientes de moda, pero las opciones funcionales podrían ser mejores a largo plazo.

Aunque las tarjetas bancarias físicas de Monzo son un coral llamativo y muy práctico, el esquema de color del sitio web cuenta una historia de estabilidad y confiabilidad, utilizando un fondo azul oscuro combinado con reflejos azules claros que son lo suficientemente brillantes como para llamar tu atención, pero lo suficientemente silencioso para mantener un aire de integridad.

Al jugar con los valores CSS de la página de inicio, podemos hacer que el coral sea el color de fondo principal, creando una página de inicio juvenil y de aspecto energético. Es innegable que llama la atención, pero ¿es más probable que los clientes potenciales confíen en una organización financiera basada en estas cualidades? Tendrías que probarlo con los usuarios para estar seguro, pero la psicología del color sugeriría un gran no.

¿Confiarías en Monzo si su página de inicio fuera de este color?

Color en diseño web y accesibilidad.

Aproximadamente uno de cada 12 hombres y una de cada 200 mujeres se ven afectados por la ceguera al color. Esto, combinado con el hecho de que los lectores de pantalla no comunican el color a los usuarios con discapacidades visuales, significa que debemos tener en cuenta que el color solo no siempre es un medio apropiado para transmitir el significado dentro de nuestras interfaces.

Si por ejemplo necesitas comunicar un error en tu página, es posible que el color rojo no sea suficiente por sí solo. Se debe utilizar una buena redacción combinada con la jerarquía espacial y tipográfica para permitir que las personas con ceguera al color y las que usan lectores de pantalla comprendan mejor los errores que intentas mostrar. Al diseñar tu próxima interfaz, intenta ver tu archivo en escala de grises para comprobar si tus mensajes de error, llamadas a la acción y notificaciones aún tienen sentido sin depender del color.

Cómo diseñar para la web en 2019 / Nuevas tendencias

He escrito acerca de cómo diseñar para la web moderna antes de 2018, pero la web avanza rápidamente por lo que esas pautas ya están obsoletas y son obsoletas a medida que las convenciones más modernas se han generalizado.

Analicemos los principios de diseño más importantes para la web moderna en 2019

Deja que los usuarios sepan que tienes una aplicación móvil

Este sigue siendo el principio más importante y no deja de tener razón. Los grupos focales bien pagados han demostrado que lo primero que un usuario desea hacer cuando visita tu página web en su navegador es instalar una aplicación móvil.

La mejor manera de lograr esto es mostrar un diálogo que les solicite que la instalen.

Como paso opcional, puede agregar un botón o un hipervínculo para cerrar dicho cuadro de diálogo, pero es importante usar algún texto, preferiblemente que esté redactado de tal manera que avergüence al usuario para que cumpla con los requisitos.

Implementa una política de no seguimiento

Muchos navegadores modernos en estos días son compatibles con un encabezado HTTP llamado DNT que significa No rastrear. Este encabezado tiene la intención de indicar que un usuario no desea ser rastreado y, desafortunadamente, esto está habilitado de manera predeterminada en algunos navegadores.

Sin embargo, no te preocupes ya que no todo está perdido. Hemos encontrado que la mayoría de los usuarios eliminarán este encabezado cuando se le solicite hacerlo. Recomendamos que sirva una guía sobre cómo deshabilitarlo cuando el encabezado está presente.

Consejo : No sirvas el mensaje para deshabilitar DNT en la guía que muestra a los usuarios cómo deshabilitar DNT ya que la tasa de conversión termina siendo bastante pobre.

Implementando una Política de Cookies

El consentimiento de las cookies es confuso, mientras que en la mayoría de los casos no es necesario con un uso razonable de cookies, es mejor pedirle al usuario que lo autorice para que podamos rastrear todo sin temor a las repercusiones.

Consejo : No sirvas páginas sin cookies habilitadas, incluso cuando no las necesitamos, ya que significa que podemos rastrear menos información personal, por lo que tenemos menos información de usuario para vender.

Bloqueando los bloqueadores de anuncios

Los bloqueadores de anuncios están en todas partes y realmente pueden dañar tus márgenes, por lo que la precaución obvia a tomar es bloquear los bloqueadores de anuncios.

Chrome se está moviendo para bloquear los bloqueadores de anuncios, por lo que si el usuario usa un navegador como Brave, podremos decir que el navegador del usuario no es lo suficientemente moderno.

Consejo : No le cuente a nadie sobre Brave, el navegador de código abierto basado en Chromium con bloqueo de anuncios incorporado.

Maximizando tu diseño

Los días de 800 píxeles de ancho se acabaron. Las pantallas modernas tienden a ser de pantalla ancha, así que asegúrate de aprovechar todo el ancho del diseño.

Utilizar notificaciones

Los navegadores modernos admiten notificaciones, por lo que habilitarlas es una obligación, pero como alternativa también pueden también suscribir automáticamente al usuario a un boletín, notificaciones por SMS y / o notificaciones por correo electrónico.

Sugerencia : Usa estas notificaciones para avisar a los usuarios cuando tengas una nueva versión de la aplicación móvil disponible.

Preguntar al usuario

A veces, los usuarios olvidan que pueden registrarse, asegúrate de avisarles regularmente y presentar un enlace o botón de registro prominente.

Sugerencia : También puedes preguntar al usuario cuando esté a punto de abandonar tu página web o cuando el cursor del mouse lo abandone.

Permitir que el usuario opte por salir

Es muy importante que seamos amigables con el usuario y que no seamos intrusivos, lo que significa que debemos permitir que los usuarios desactiven nuestras solicitudes constantes y diálogos modales.

La mejor práctica aquí es colocar la configuración de exclusión voluntaria en un lugar donde el usuario la detecte fácilmente, ya que esto se encuentra dentro de una de las páginas de «preferencias de cuenta».

Usa JavaScript

Es un hecho conocido, todos los sitios web requieren de JavaScript.

Mientras podrías estar pensando, «Oh, es sólo texto sin formato». ¿Pero en el futuro? Para entonces, habrá muchos más, y te lo prometo ahora mismo. Cuando eso suceda, te arrepentirás de no haber convertido tu sitio web en una aplicación isomórfica utilizando el último marco que se ejecuta en una nube sin servidor.

Consejo : No renderices esta página con JavaScript.

Cómo usar fuentes variables en la web 2018

Las fuentes variables se desarrollaron como un esfuerzo conjunto de las cuatro compañías de tecnología más grandes involucradas en el diseño de tipos: Apple, Google, Microsoft y Adobe. Como sugiere su nombre, las fuentes variables permiten a los diseñadores derivar un número ilimitado de variantes de fuente del mismo archivo de fuente. De esta manera, es posible ajustar el tipo de letra a diferentes dispositivos, vistas, orientaciones y otras restricciones de diseño.

¿Por qué usar fuentes variables?

Las fuentes variables reducen significativamente las limitaciones de los formatos de fuente actuales. Las fuentes web de hoy son inflexibles y no se escalan muy bien; solo nos proporcionan algunos estilos fijos con nombres como «Light», «Bold» o «Extra Bold». Incluso hay tipos de letra que solo tienen una variante de inclinación o peso. Sin embargo, con las fuentes variables, tenemos acceso a una flexibilidad infinita de peso, inclinación, altura x, losas, redondeo y otros atributos tipográficos.

Mejor aún, las fuentes variables mejoran el rendimiento. Las fuentes web como las conocemos necesitan que cada variante de fuente se almacene en un archivo separado. Por ejemplo, así es como se ve la carpeta de la fuente web Roboto :

Entonces, aquí hay una breve comparación:

Roboto: doce archivos de fuentes, doce variantes.
Fuentes variables: un archivo de fuente, variantes ilimitadas.
Como ya puede imaginar, nuestras opciones tipográficas crecen increíblemente con fuentes variables.

El formato de fuente OpenType

Entonces, ¿qué formato de archivo utilizan las fuentes variables? Según los documentos oficiales :

«Las fuentes OpenType pueden tener la extensión .OTF o .TTF, dependiendo del tipo de contornos en la fuente y el deseo del creador de compatibilidad en sistemas sin soporte nativo de OpenType».

Para ser completamente precisos, las fuentes variables se introdujeron en la versión 1.8 de la especificación del archivo de fuentes OpenType. OpenType es una extensión del formato de fuente TrueType, por lo tanto, las fuentes variables están disponibles como archivos .otfo .ttf.

Ejes de diseño

La nueva especificación del archivo de fuente OpenType viene con una nueva tecnología llamada Variaciones de fuente OpenType que nos permite interpolar la fuente en numerosos ejes de diseño, hasta 64,000, según el blog Adobe Typekit .

La especificación OpenType 1.8 define cinco etiquetas de eje registradas:

peso
anchura
tamaño óptico
inclinación
itálico

Además, los diseñadores de tipos también pueden definir ejes personalizados junto con sus propias etiquetas de cuatro caracteres en la tabla de «nombre» del archivo de fuente.

A continuación, puede ver una gran ilustración de cómo funcionan los ejes de diseño ( del artículo de John Hudson en Medium.com , referido por Typekit como el anuncio no oficial de fuentes variables). Demuestra una fuente variable de tres ejes con peso, ancho y ejes de tamaño óptico:

El glifo rojo en el centro representa el conjunto de contornos almacenados en la fuente, los glifos verdes representan los extremos de los tres ejes y los glifos naranjas representan las posiciones de las esquinas.

Todo el cubo representa el espacio de diseño al que tenemos acceso si usamos esta fuente variable de tres ejes. Es un cubo solo porque la fuente tiene tres dimensiones (peso, ancho, tamaño óptico). Con menos ejes, nos moveríamos hacia abajo hacia un rectángulo (2 ejes) o una línea (1 eje) y con más ejes, nos moveríamos hacia arriba en un hiperespacio multidimensional.

Y, por supuesto, una fuente variable de 3 ejes de la vida real no sería necesariamente un cubo, sino más bien un cuboide rectangular, ya que en la mayoría de los casos los diferentes ejes no tienen la misma longitud.

Instancias nombradas

Las fuentes variables aún permiten a los diseñadores de tipos definir instancias con nombre, variantes de fuentes específicas entre el número ilimitado de opciones. Por ejemplo, el Prototipo de fuente variable de Adobe contiene dos ejes (peso y contraste) y ocho instancias con nombre (Luz extra, Luz, Regular, Semibold, Negrita, Negro, Contraste medio negro, Contraste alto negro).

Las instancias con nombre son más importantes si queremos usar una fuente variable con programas de diseño como Adobe Illustrator. En la web, podemos generar fácilmente cualquier instancia (con nombre o sin nombre) con CSS (por ejemplo, en la fuente variable de Adobe, la instancia con nombre Extra Light toma el valor mínimo de los ejes de peso y contraste).

Adición de fuentes variables a una página web

Podemos agregar fuentes variables a un sitio web usando la regla @ font-face en la parte superior del archivo CSS.

Por ejemplo, podemos agregar la fuente de la variable Avenir Next con la siguiente regla de CSS:

@font-face {
font-family: «Avenir Next Variable»;
src: url(«AvenirNext_Variable.ttf») format(«truetype»);
}

Puede encontrar más fuentes variables en el sitio web de Axis Praxis (también tiene un área de juegos para fuentes variables), en las páginas de GitHub de diferentes compañías de diseño de tipos (por ejemplo , MonoType , Type Network ), y Typekit también ha comenzado a publicar las versiones de fuentes variables. De sus familias más populares de Adobe Originals.

Nota: no todas las fuentes OpenType que encontrará en la web son fuentes variables (solo se introdujeron con la versión 1.8).

Configuración de variaciones de fuente con CSS

Para definir las variaciones de fuente, podemos usar la font-variation-settingspropiedad CSS introducida con el Nivel 4 del Módulo de fuente CSS . Esta es una propiedad de bajo nivel que nos permite controlar las fuentes variables al especificar un valor para cada eje.

Ejemplo 1: Avenir Next

La fuente de variable Avenir Next contiene dos ejes de diseño: peso y ancho, ambos son ejes registrados. Avenir Next también tiene ocho instancias con nombre (Regular, Mediana, Negrita, Pesada, Condensada, Mediana Condensada, Negrita Condensada, Pesada Condensada).

El CSS completo (que pertenece a una variación aleatoria de fuentes sin nombre) se ve así:

body {
font-family: «Avenir Next Variable»;
color: rgb(0, 0, 0);
font-size: 148px;
font-variation-settings: ‘wght’ 631.164, ‘wdth’ 88.6799;
}

Podemos usar cualquier valor (incluso números flotantes) para los ejes entre los valores mínimo y máximo. En el caso de Avenir Next, podemos usar el rango [400, 900] para el peso y el rango [75, 100] para el eje de ancho.

¿Dónde encontrar las gamas? Los archivos de fuentes contienen las tablas de variación de fuentes (fvar) que contienen los datos necesarios. Sin embargo, para acceder a esa información, necesitamos ver el contenido del archivo de fuente con una herramienta como FontView . A veces, la documentación de la fuente contiene los rangos, pero desafortunadamente esto no siempre es así. La buena noticia es que el sitio web de Axis Praxis contiene los valores mínimo-máximo para todas las fuentes variables que incluye.

Ejemplo 2: Decovar

Decovar es una de las fuentes variables más versátiles que existen actualmente. Lo puede encontrar en Axis Praxis , en GitHub , y también tiene una página de demostración en el sitio web de TypeNetwork. Decovar contiene uno registrado (peso) y catorce ejes personalizados, y también tiene diecisiete instancias con nombre.

De los documentos de GitHub de Decovar, aquí hay algunas variantes que podemos lograr con esta fuente variable de 15 ejes:

El CSS que necesitamos usar es similar al del ejemplo anterior. Aquí, tenemos que definir los quince ejes (en línea, esquilado, losa redondeada, rayas, terminal de lombriz, esqueleto en línea, abierto en línea, terminal en línea, gusano, peso, ensanchado, redondeado, esqueleto de lombriz, losa, bifurcado).

div {
font-family: Decovar;
color: white;
background-color: rgb(0, 162, 215);
font-size: 157.12px;
text-align: left;
padding-top: 20px;
font-variation-settings: ‘INLN’ 285.094, ‘TSHR’ 346.594,
‘TRSB’ 786.377, ‘SSTR’ 84.268, ‘TWRM’ 200, ‘SINL’ 84.268,
‘TOIL’ 0, ‘TINL’ 91.983, ‘WORM’ 0, ‘wght’ 400, ‘TFLR’ 0,
‘TRND’ 0, ‘SWRM’ 0, ‘TSLB’ 277.155, ‘TBIF’ 0;
}

Nota: tenemos que especificar un valor para todos los ejes de la font-variation-settingspropiedad, incluso aquellos que no queremos usar.

En el caso de Decovar, podemos usar 0como valor para los ejes que no nos interesan; estos serán procesados con el valor predeterminado. Sin embargo, esto no siempre es así, ya que depende de los rangos que usa la fuente para los diferentes ejes. Decovar es fácil, ya que utiliza un rango de 0-1000 para todos los ejes, y 0 es el valor predeterminado para todos.

Puede generar font-variation-settingsdeclaraciones similares con Axis Praxis , no tiene que calcular los valores por su cuenta. El CSS anterior genera la siguiente variante de fuente:

Propiedades CSS de alto nivel

La font-variation-settingspropiedad es una propiedad de bajo nivel y de acuerdo con las recomendaciones del W3C, solo debe usarse si no hay otros métodos disponibles. qué significa esto exactamente?

De acuerdo con las CSS 4 especificaciones , seremos capaces de controlar ejes registrados con propiedades CSS de nivel superior en el futuro, a saber:

font-weight(controlará el wghteje)
font-stretch(controlará el wdtheje)
font-style(controlará los ejes slnty ital)
font-optical-sizing(controlará el opszeje)

Las tres primeras propiedades existen desde CSS2, sin embargo, las especificaciones de CSS4 amplían su uso. Vamos a ser capaces de utilizarlos no solamente con palabras clave predefinidas (por ejemplo, normalo boldpara font-weight) o números redondos (por ejemplo 400, 600, 800, etc.), sino también con todos los números en una escala predefinida (por ejemplo, font-weightoscilarán entre 1 y 1000 y font-stretchse rango entre 50% y 200%).

Sin embargo, estas características todavía están en la fase experimental. Por ahora, lo razonable es seguir usando font-variation-settings, ya que actualmente esta es la propiedad más estable para acceder a los ejes de las fuentes variables.

Uso efectivo del espacio negativo en el diseño web

Muchos diseñadores cometen un gran error al crear páginas web demasiado complejas, ocupadas y coloridas. Si no es intencional, debes evitar crear interfaces complejas y usar más espacio en su lugar. El espacio es un enfoque básico en el diseño web, ya que puede aportar una gran diferencia a todos los elementos de la página. En esta publicación, aclaramos la importancia del espacio negativo y compartimos consejos sobre cómo usarlo correctamente en el diseño web.

¿Qué es el espacio negativo en diseño web?

Antes de comenzar, primero definamos exactamente qué es el espacio negativo. Espacio negativo, o espacio en blanco, significa cualquier espacio no utilizado en la página web. Cualquier cosa que no llame la atención del usuario en la página es un espacio negativo. Esto no significa que el espacio deba ser necesariamente blanco: puede ser cualquier color, una imagen o cualquier otro fondo.

El espacio en blanco debe considerarse como un elemento activo, no como un fondo pasivo. ”- Jan Tschichold

Hay dos niveles de espacio negativo: micro y macro. El espacio micro negativo se relaciona con el espacio entre elementos pequeños como líneas, palabras y letras, mientras que el espacio macro negativo es el espacio entre bloques o elementos más grandes. Ambos niveles son importantes para la efectividad general del diseño web.

Echemos un vistazo a los siguientes diseños de páginas web que usan bien el espacio negativo.

Página web de Apple

Apple siempre ha prestado gran atención al diseño, y su propio sitio web no es una excepción. Solo mire cuán magistralmente usan el espacio micro y macro negativo. El sitio web tiene un diseño limpio y una llamada a la acción extremadamente clara (CTA).

Su atención se centra en la función principal, el producto en sí, y nada distrae su atención en esta página. Tener un solo objeto para mirar en el centro de la página es una manera perfecta de llamar la atención del usuario.

Página web Google

Google es probablemente el abuelo del espacio negativo en la web. El gigante de la búsqueda utiliza mucho espacio negativo y un diseño limpio para dirigir nuestra atención a la barra de búsqueda.

Google simplemente guía al usuario hacia las áreas más útiles de la página, a saber, Gmail, imágenes y la barra de búsqueda. El diseño se mantiene claro y simple para evitar confusiones.

Página web Dropbox

La página de inicio de Dropbox combina un perfecto espacio micro y macro negativo, una paleta de colores naturales y una fuente armoniosa que crea una atmósfera de calma y proporciona una experiencia de usuario fluida. El sitio web parece sofisticado debido al uso adecuado del espacio negativo, que a su vez crea simplicidad y limpieza.

Cómo usarlo

1. Usa para dividir la página.

Dividir el espacio en una página web es uno de los componentes visuales más esenciales en el diseño. Cuando un sitio web tiene demasiada información y muy poco espacio, es extremadamente difícil para los visitantes centrarse en la información principal.

El espacio le da a los usuarios tiempo para absorber la información que ven en la página. Existen algunas reglas que ayudan a los diseñadores a crear composiciones simétricas en la página y garantizar que las personas puedan percibir la información. El espacio equitativo entre los componentes de la composición establece la estructura de diseño adecuada y ayuda a los usuarios a percibir claramente la información. De acuerdo con las reglas de composición del diseño web, el espacio entre estos microbloques debería ocupar un tercio del espacio entre los macrobloques.

2. Trabajos de comprensión de contenidos.

La legibilidad y legibilidad del contenido es un aspecto muy importante en el diseño web. El espacio puede optimizar ambos. El espacio utilizado correctamente entre líneas, palabras y letras aumenta la comprensión de lectura varias veces.

Los márgenes de los párrafos y el espacio entre líneas son dos cosas principales que se deben tener en cuenta al optimizar la comprensión del contenido. El espacio entre cada línea, o simplemente el espacio entre líneas, aumenta la legibilidad general del texto del cuerpo, como se muestra en el siguiente ejemplo:

estructura del texto diseño de espacio negativo

3. Crear jerarquía visual.

No solo es un espacio vacío entre los elementos de la página, sino que es una herramienta esencial para crear una jerarquía visual. El espacio negativo puede componer o separar los elementos de la interfaz de usuario para que creen un diseño de página efectivo.

Proporciona un diseño acogedor que mantiene a los visitantes en la página por más tiempo. Además, el espacio negativo dirige la atención del usuario hacia los elementos importantes y ofrece un descanso para los ojos.

4. Aclarar relaciones.

Los psicólogos de la Gestalt, mientras aprendían cómo las personas organizan la información visual, desarrollaron la Ley de Proximidad. Esta ley establece que todos los objetos visuales ubicados uno al lado del otro parecen similares al ojo humano.

En el diseño web, el espacio negativo adecuado es una forma efectiva de implementar el principio de proximidad y hacer que un diseño sea más atractivo a la vista. Por ejemplo, este principio funciona bien para la arquitectura de blogs. Al separar armónicamente la mayor parte del texto en párrafos y bloques, los diseñadores pueden lograr un diseño más fácil de digerir y agradable.

La línea de fondo.

Como puede ver, el espacio negativo es una de las herramientas más poderosas en diseño web. Al seguir algunas reglas simples que se dan en este artículo, los diseñadores pueden crear un diseño visualmente atractivo y perfecto que será apreciado por cualquier visitante.

Términos de Diseño Web que necesitarás saber

Una gran verdad universal es que hay más de un significado para cada palabra, por eso te presento esta guía de términos de diseño web. Esto es doblemente cierto para la jerga de la industria del diseño web. Si acabas de comenzar con el diseño web, necesitas saber qué significa realmente todo si quiere salir adelante.

Así que aquí está: esto es lo que el Illuminati del Diseño Web no quiere que sepas. Lee este artículo y podrás vacilar a tus enemigos con tu nueva jerga moderna.

Guía de términos de diseño web

.htaccess

Un archivo que se encuentra en tu servidor web que, si se toca alguna vez, es quizás la forma más rápida y sencilla de cargarte tu página web.

AJAX

La práctica de hacer que todo tu contenido dependa de JavaScript para cargar en primer lugar; esto nunca sale mal.

API

Un sistema mediante el cual los jóvenes desarrolladores emprendedores obtienen dinero de los datos de sus usuarios. Recuerda que siempre puede destruirlos «ajustando» la API para el «rendimiento» porque «odia las cronologías cronológicas».

Accesibilidad

La práctica de crear sitios web que cualquier persona pueda, en muy poco tiempo poder utilizar.

Agile

Una metodología de desarrollo que aboga por la autoorganización de los equipos y la flexibilidad, permitiendo a las nuevas empresas darse cuenta de que están construyendo algo que nadie quiere.

Back End

Tu panel de administración, la parte de un sitio web donde gestionar tus contenidos.

Bandwidth

Una medida de velocidad con la que Google puede acceder a sus datos personales.

Porcentaje de rebote

Una medida de velocidad con la que los usuarios se dan cuenta de que no tienen lo que quieren.

Bounce Rate

El patrón de navegación contextual preferido por nueve de cada diez patos.

CMS

El sistema que debe resolver todos tus problemas y llevarte a la cima de Google. Esto se logra dejándolo solo hasta que una actualización rompa un complemento, o algo así. Los más conocidos son: WordPress, Joomla, Drupal…

CSS

Esa cosa que quieren implementar con JavaScript, ahora.

Cache

Espacio en las computadoras de otras personas donde puedes almacenar temporalmente parte de esa mierda desde el Back End.

Llamada a la acción

Rogando al usuario por dinero y / o atención.

Código

Lo que muestran en las pantallas de las computadoras en las representaciones de piratería de Hollywood menos ofensivas.

Comentarios (en código)

Chistes e ideas inteligentes que solo los nerds totales verán alguna vez. Un día, alguien logrará la verdadera iluminación y el secreto se escribirá como un comentario de código y se perderá en un oscuro repositorio de GitHub.

Obsoleto

Todo lo que olvidamos como usar mientras aprendíamos Flexbox.

Design Research

Navegando por Pinterest durante unas horas para robar paletas de colores.

Doctype

Una forma innecesariamente compleja de decirle al navegador qué tipo de HTML está usando. En serio, hubiera funcionado bien.

E-commerce

Una forma más elegante de decir que estás vendiendo cosas que no quieres en Ebay.

Framework

Lo que se supone que debes aprender en lugar de los lenguajes de desarrollo, ahora … supongo.

Interfaz

La parte de un sitio web donde le dice a los usuarios lo que crees que quieren escuchar, en base a investigaciones, encuestas y adivinaciones indiscriminadas.

HTML

La forma más fácil de decirle a otras personas que eres un programador, ahora.

iframe

Pensarías que estos fueron obsoletos, pero no lo son.

Mapa de imagen

Una cosa más que nunca funcionará en un sitio web sensible sin un complemento de jQuery.

JavaScript

El todo y el fin de todo. El lenguaje de desarrollo definitivo. Reemplazará a HTML y CSS porque algunas personas no pueden molestarse en aprender los «lenguajes» más simples jamás inventados.

Landing Page

La página con la que los diseñadores dejan que los profesionales de marketing se salgan con la suya para no tocar la página de inicio real. Las landing page normalmente superan a las páginas de inicio cuidadosamente elaboradas, enfureciendo a los diseñadores.

Metadatos

Lo que tenemos que usar mientras esperamos que la inteligencia artificial se vuelva más inteligente.

Navegación

La forma más rápida y fácil para que un cliente se pierda.

Online Marketing

El negocio de las mentiras, las malditas mentiras y las estadísticas.

Open Source

Una forma socialmente aceptable de usar el código de otras personas. También lo mejor desde el pan rebanado.
Solo me gustaría intervenir por un momento. A lo que te refieres como Linux, es de hecho, GNU / Linux, o como recientemente lo he llamado, GNU más Linux. Linux no es un sistema operativo en sí mismo, sino más bien otro componente libre de un sistema GNU en pleno funcionamiento hecho de utilidad por los corelibs de GNU, utilidades de shell y componentes vitales del sistema que comprenden un sistema operativo completo según lo definido por POSIX.

Muchos usuarios de computadoras ejecutan una versión modificada del sistema GNU todos los días, sin darse cuenta. A través de un peculiar giro de los eventos, la versión de GNU que se usa ampliamente en la actualidad a menudo se llama «Linux», y muchos de sus usuarios no saben que es básicamente el sistema GNU, desarrollado por el Proyecto GNU. Realmente hay un Linux, y estas personas lo están usando, pero es solo una parte del sistema que usan.

Linux es el núcleo: el programa en el sistema que asigna los recursos de la máquina a los otros programas que ejecuta. El núcleo es una parte esencial de un sistema operativo, pero inútil por sí mismo; Sólo puede funcionar en el contexto de un sistema operativo completo. Linux se usa normalmente en combinación con el sistema operativo GNU: todo el sistema es básicamente GNU con Linux agregado, o GNU / Linux. Todas las distribuciones denominadas «Linux» son en realidad distribuciones de GNU / Linux.

Pixeles

Trabaja como diseñador el tiempo suficiente, y comenzarás a notar cuando incluso una de estas cosas está fuera de lugar. Te perseguirá.

Prototipo

El terrible código temporal que escribes que inevitablemente se usará en el proyecto final, y siempre estarás un poco avergonzado.

Responsive Design

La razón por la que los diseñadores web tienen que hacer tal vez tres veces más trabajo para cada proyecto que antes.

Semantic Markup

La práctica de escribir HTML de un ser humano con estudios, que en realidad puedes ser capaz de leer.

Lado del servidor

Cualquier cosa que sea oficialmente problema del desarrollador.

Tema

Una forma socialmente aceptable de utilizar los activos y el código gráfico de otras personas .

UX design

Todo el mundo es un experto en esto, ahora. Aparentemente, es simplemente la experiencia de un usuario en tu página web.

Usabilidad

Es como Accesibilidad, pero para las personas que se avergüenzan cuando ven rampas para sillas de ruedas.

Validación

Lo que todos deseamos desesperadamente de nuestros compañeros diseñadores.
Ver: Estándares Web.

Estándares web

Una buena idea que muchos de nosotros estamos ignorando.