El diseño web ya existe desde hace un tiempo, y no se pierde tiempo en desarrollar un lenguaje complejo y lleno de jerga. Tan pronto como das el paso más pequeño en el mundo del diseño web, comienzas a escuchar «¿Qué CMS quieres usar?», «¿Quieres que esté en la mitad superior o inferior de la página?», «¿Quieres un CMS fijo?» diseño?”, “¿Qué alojamiento web desea utilizar?” y te quedas preguntándote qué significa todo esto. Sabemos que puede ser bastante abrumador tratar de descubrir todas las definiciones y términos clave del diseño web, especialmente si todo es nuevo.
El diseño web cubre una amplia gama de trabajos, desde desarrolladores web que escriben código, diseñadores de UI y UX que trabajan en interfaces, hasta diseñadores web que cuidan la apariencia de su sitio. Hay muchas personas involucradas en el diseño web .
Aprender lo que significan solo algunos de los acrónimos y palabras de la jerga en el diseño web puede facilitar mucho el trabajo con su diseñador y desarrollador, y también puede ayudarlo a comprender cómo funciona realmente su propio sitio web. Entonces, ya sea que esté contratando ayuda o haciéndolo usted mismo, conocer los términos más utilizados y más comúnmente confusos en el diseño y desarrollo web puede ser útil:
-
- Definiciones de diseño web
- Anatomía del sitio web front-end
- Anatomía del sitio web back-end
- Términos técnicos web e internet
- terminología de desarrollo web
Definiciones de diseño web
Accesibilidad
La accesibilidad es un gran problema en el diseño web hoy en día. Significa, esencialmente, qué tan accesible es su sitio web para las personas, incluidas las personas con problemas de audición o visibilidad. Es importante tener esto en cuenta antes y durante la creación de su sitio web. Eche un vistazo a estos seis pasos para hacer que su diseño web sea accesible si no está seguro de por dónde empezar.
Debajo del pliegue (y arriba del pliegue)
Debajo del pliegue y arriba del pliegue son dos términos que tienen su origen en los periódicos . El “pliegue” es donde se dobla el periódico Arriba y abajo describen si la información aparece en la mitad superior o inferior del pliegue. Para las páginas web, el «pliegue» generalmente se define como el punto en el que debe comenzar a desplazarse, pero el principio es el mismo: la información que está arriba del pliegue (ATF) es más accesible y visible que la que está debajo del pliegue (BTF) .
Elástico (diseño)
Un diseño elástico es un enfoque para el diseño de páginas web que describe las relaciones entre los elementos y sus posiciones en la página como porcentajes en lugar de distancias y tamaños diseñados específicamente. Esto significa que las páginas web son más adaptables, tanto para las preferencias establecidas por sus visitantes en términos de tamaño de letra y espaciado, como para optimizar la página para verla en un teléfono inteligente o tableta.
Hoy en día, los diseños elásticos son una parte clave de los enfoques de diseño receptivo, pero antes de que existiera la idea del diseño receptivo, los diseños elásticos brindaban una forma simple de hacer que los sitios web se adaptaran.
Ex
Un Ex es una unidad de medida que utiliza la «x» minúscula en una fuente como medida estándar.
Ancho fijo (diseño)
Un diseño de ancho fijo es un método de diseño de páginas web en el que un diseñador especificará qué tan grande es una página web y exactamente dónde aparecerán los elementos en ella. Esto brinda a los diseñadores mucho más control sobre el diseño de una página web que un diseño elástico, pero hace que las páginas se adapten menos a los diferentes tamaños de pantalla.
hexadecimal
Los números hexadecimales, también conocidos como números «hexadecimales», son un sistema numérico de base 16, lo que significa que utilizan 16 símbolos para definir los colores. Los números hexadecimales utilizan números del 0 al 9 y letras de la A a la F. Cada color se define con tres pares de números hexadecimales. El primer par de números o letras está relacionado con el tono rojo, el segundo par con el tono verde y el tercer par con el tono azul.
Desplazamiento infinito
El desplazamiento infinito es cuando el nuevo contenido se carga a medida que continúa desplazándose. Esto crea un desplazamiento «infinito» sin fin. Algunos ejemplos populares de esto son las líneas de tiempo de Facebook, Pinterest o los feeds de Twitter.
Desplazamiento de paralaje
Este método de desplazamiento crea una sensación de profundidad en el diseño del sitio. A medida que el usuario se desplaza, los elementos del sitio web parecen estar a diferentes distancias y moverse a diferentes velocidades a medida que el usuario se desplaza. Esto crea la ilusión de profundidad y distancias en un sitio web plano.
Resolución
La resolución es el número de píxeles que se muestran en una pantalla. Es el método estándar utilizado en el diseño web para especificar el tamaño de las imágenes. La calidad de una imagen generalmente se describe en términos de píxeles por pulgada, y un mayor número de píxeles da como resultado una imagen de mayor calidad.
Responsivo / compatible con dispositivos móviles / optimizado para dispositivos móviles
A partir de 2020, más de la mitad del tráfico web tiene lugar en teléfonos inteligentes. Esto significa que cada vez es más importante que un sitio web se vea lo mejor posible en dispositivos móviles, así como en computadoras de escritorio. Hacer que los sitios web respondan / sean compatibles con dispositivos móviles / estén optimizados para dispositivos móviles significa diseñar y desarrollar un sitio web que se adapte al dispositivo o la pantalla en la que se visualizan.
Usabilidad
La usabilidad es un concepto en el diseño web que describe qué tan usable es su sitio para los visitantes para los que fue diseñado. Idealmente, un visitante podrá usar su sitio con facilidad cuando lo encuentre por primera vez, con obstáculos mínimos, frustraciones y necesidad de pedir ayuda. Comprender los principios de la usabilidad es un paso clave en la construcción de un gran sitio web.
UX (investigación de usuarios) / UI (interfaz de usuario)
El diseño de UX y UI es un trabajo que mejora la experiencia del usuario. Es importante conocer las diferencias de UX y UI para saber cómo funcionan juntos.
UX, investigación de usuarios, involucra todos los aspectos de la interacción del usuario con el sitio web, de principio a fin. El objetivo es mejorar la calidad de la interacción entre un usuario y el sitio web.
UI, interfaz de usuario, se centra en los elementos visuales e interactivos de un sitio web, como botones, iconos, tipografía. El objetivo es mejorar el aspecto y la función del sitio web.
Anatomía del sitio web front-end
Migaja de pan
Cuando las páginas web muestran a los usuarios cómo han navegado por una página web y cómo volver a la página principal, a menudo se hace a través de una ruta de navegación. Esto generalmente se muestra como una serie de categorías anidadas, como Inicio > Categoría > Año > Mes > Publicación.
icono de favoritos
Un favicon es un pequeño icono que se muestra en la barra de pestañas de su navegador. Por lo general, tienen 16 × 16 píxeles (que es realmente muy pequeño) y se guardan como una imagen .ico, .gif o .png. Puede usar casi cualquier imagen que desee como favicon, siempre que tenga el tamaño correcto y se guarde en el formato correcto.
Punto focal
Un punto focal en una página web es la parte de una página hacia la que se dirige su atención. Los diseñadores pasarán mucho tiempo asegurándose de diseñar un punto focal que realmente atraiga la atención del espectador , y luego colocarán lo más importante en la página en el punto focal. Esto asegura que sea visto por la mayor cantidad de personas posible.
Interfaz
Estos son todos los elementos como imágenes, texto, páginas que las personas verán cuando visiten su sitio por primera vez. Es esencialmente lo que la gente interactuará y se relacionará en un sitio web.
icono de hamburguesa
Un ícono de hamburguesa se refiere al ícono de menú que se encuentra comúnmente en los programas más recientes. Tiene tres barras horizontales (de ahí “hamburguesa”) y oculta el menú de navegación tradicional detrás de un único icono.
Página de destino
Esta es la primera página que verán los visitantes de su sitio. En muchos sitios web, se utiliza una página de destino especial para obtener algo de un visitante (por ejemplo, compartir su dirección de correo electrónico o una página especializada para un producto). Su página de destino es una de las páginas más importantes de su sitio web y debe dedicar mucho tiempo a optimizarla .
Navegación
La navegación es el sistema que se utiliza para moverse entre los elementos de su página web y es uno de los elementos más importantes de cualquier página web. Por eso es importante conocer los principios clave de la navegación en un sitio web . El ejemplo más claro de navegación son los menús que aparecen en la mayoría de las páginas web. Pero también preste mucha atención a cómo se organizan las páginas y los enlaces entre ellas. Estos también pueden hacer que la navegación por una página web sea mucho más fácil para los visitantes.
Anatomía del sitio web back-end
back-end
Esta es la parte de su sistema que ejecuta efectivamente su sitio web, pero está oculta para los visitantes. Hay muchos back-end diferentes disponibles, pero generalmente todos contienen las mismas cosas: aplicaciones, estructura de información y su CMS.
CMS
Sistema de administración de contenido: esta es una herramienta de back-end para ejecutar el contenido de su sitio, agregar usuarios, administrar comentarios y potencialmente mucho más. Si alguna vez ha utilizado WordPress para crear un sitio web, ha utilizado un CMS. Un CMS facilita mucho el diseño y la creación de una página web porque oculta gran parte del código sin formato en el que se ejecuta el sitio web.
Comercio electrónico
Comercio electrónico significa «comercio electrónico». de la misma manera que «email» significa «correo electrónico». Por lo general, agregará una tienda de comercio electrónico a su sitio web que manejará descripciones de productos, compra y venta, y también datos de clientes.
HTTP/HTTPS
Este es el sistema que maneja el intercambio de datos entre navegadores, servidores y aplicaciones web. Define cómo se deben empaquetar y enviar los datos.
HTTPS es una extensión de HTTP que puede realizar conexiones sobre SSL (Secure Socket Layer). Esta es una forma mucho más segura de intercambiar datos en línea. Muchos navegadores web modernos le advertirán si un sitio web utiliza HTTP estándar en lugar de HTTPS.
Como propietario de un sitio web, puede comprar certificados SSL (necesarios para usar HTTPS) de una variedad de proveedores. Una vez agregado, esto hará que su sitio sea más seguro y generará confianza con sus clientes.
Enchufar
Una pequeña pieza de software que se ubica en la parte superior de su sitio básico para proporcionar una funcionalidad adicional de seguridad. Los complementos están disponibles para las plataformas CMS más populares y se pueden usar para una gran variedad de funciones, desde la automatización de publicaciones de blogs hasta la gestión de clientes potenciales.
Plantilla
Las plantillas se utilizan en el diseño web de la misma manera que se utilizan para documentos e imágenes, para proporcionar una coherencia de diseño en muchas páginas diferentes. La mayoría de las plataformas de CMS le proporcionarán un conjunto de plantillas para su sitio web que ayudarán a mantener la coherencia entre sus páginas y su diseño.
Términos técnicos de web e internet
Texto de anclaje
El texto ancla es una frase, o unas pocas palabras, que contiene un hipervínculo. Como este: Texto de anclaje explicado . Usar el texto de anclaje correcto puede marcar una gran diferencia en el desempeño de su página en las clasificaciones de los motores de búsqueda.
Vínculo de retroceso
Estos son enlaces a su sitio web desde otros sitios web. Cuando otro sitio se vincula al tuyo para dirigir a sus lectores a un recurso, por ejemplo, has recibido un vínculo de retroceso. Los vínculos de retroceso son muy importantes cuando se trata de mejorar su clasificación de búsqueda, porque varios vínculos de retroceso de sitios confiables aumentarán la visibilidad de su sitio.
Banda ancha
Ancho de banda es un término utilizado en muchos contextos diferentes, pero esencialmente significa la cantidad de datos que se envían o reciben durante un período determinado. Se puede usar para describir su velocidad de Internet, por ejemplo, donde generalmente se cotiza en kilobits por segundo (kbs). A veces, sin embargo, se usa para describir la cantidad de datos que puede usar por mes como parte de su paquete de alojamiento web.
Cache
Un caché es una colección de datos que un navegador web guarda. Esto significa que la próxima vez que un usuario visite el sitio, la página se cargará más rápido porque se carga desde la memoria local.
DNS
DNS significa «Servicio de nombres de dominio». Este es el sistema a través del cual su navegador web busca dónde están las páginas web. Cuando escribe 99designs.com , su navegador verá una «tabla de DNS», que convierte esta dirección amigable para humanos en una dirección amigable para computadora (es decir, hecha de números). El sistema DNS realiza un seguimiento de dónde están todas las páginas web del mundo, para que su navegador pueda encontrarlas.
Dominio
Este es el nombre de su sitio web. Puede comprar dominios de muchas empresas. Pueden tener 63 caracteres como máximo.
FTP
FTP significa «protocolo de transferencia de archivos» y es un sistema para transferir archivos y datos desde el almacenamiento local (en, por ejemplo, su computadora) a su servidor web. Para usar FTP, necesitará descargar una pequeña pieza de software llamada cliente FTP.
Enlace permanente
Un enlace permanente que le permite especificar una dirección que siempre apuntará hacia una publicación o página de blog en particular, sin importar cómo cambie la estructura de su sitio a su alrededor. Esto es muy útil si está utilizando publicaciones de blog para mejorar el tráfico a su sitio porque no tiene que cambiar manualmente docenas (o cientos) de enlaces si decide rediseñar su sitio o cambiar su nombre de dominio.
URL
Una dirección que especifica dónde se puede encontrar una página en particular u otro recurso.
Alojamiento web
Un proveedor de alojamiento web es una empresa que ejecuta los servidores en los que se almacena su sitio web. Como explicamos en nuestro artículo sobre qué es el alojamiento web, los servidores web pueden variar ampliamente en el nivel de servicio que ofrecen. Un buen servidor web podrá asegurarle que su sitio estará accesible el 99,9% del tiempo y también le proporcionará herramientas para mantenerlo seguro y efectivo.
Servidor web
Un servidor web es la computadora en la que se almacena realmente su página web. Es probable que esté ubicado en una instalación de servidor propiedad de su servidor web, aunque también es posible ejecutar sus propios servidores.
Terminología de desarrollo web
CSS
CSS significa Hojas de estilo en cascada y, junto con HTML, estas hojas son la parte más fundamental de cualquier página web. Hace una década, el formato utilizado en una página web, por ejemplo, qué tan grandes eran los títulos o si las imágenes tenían bordes, se definía dentro del propio código HTML. Esto significaba que cambiar el formato era un proceso laborioso de revisar cada elemento de una página y cambiar el código.
Con CSS, las cosas son mucho más fáciles. El estilo de una página está contenido en uno (o más) archivos CSS, que definen cómo se ven los títulos, cómo se muestran las imágenes y muchos otros elementos. Estos le dicen a un navegador cómo representar un sitio web. De esta manera, el formato de sitios web completos se puede ajustar cambiando solo una pieza de código.
DHTML
DHTML significa Lenguaje de marcado de hipertexto dinámico. Este es un término para un lenguaje que fusiona varios lenguajes de diseño web (HTML, JavaScript y CSS) en un súper lenguaje para el desarrollo web. Esto es generalmente lo que los desarrolladores web modernos usarán para crear un sitio web para usted.
Tipo de documento
En HTML, un tipo de documento es una descripción de qué tipo de HTML y qué versión está utilizando una página web. Los navegadores lo utilizan para verificar la integridad de una página y pueden arrojar errores de seguridad si es incorrecto.
EM
Em se utiliza para describir el tamaño de una fuente en relación con la fuente «principal» utilizada en una página. Em significa que una fuente (o, a veces, otros elementos) tienen el mismo tamaño que su elemento principal, 2em significa que tienen el doble de tamaño, y así sucesivamente.
Estilo incrustado
Aunque CSS (ver arriba) se puede usar para describir el formato de páginas enteras a la vez, a veces necesita cambiar un estilo en una sola página. Esto es cuando se usa un estilo incrustado. Un estilo incrustado es un fragmento de código CSS escrito en el encabezado de una página web que afecta solo a los elementos de esa página en lugar de a todo el sitio web.
Familia de fuentes/estilo/peso
Los diseñadores y desarrolladores web a menudo no trabajan con fuentes específicas porque los diferentes navegadores no siempre comparten exactamente las mismas fuentes. Es por eso que en un documento CSS verá que la fuente que se usará se define como una familia de fuentes: un grupo de fuentes que se pueden usar, en lugar de una en particular. Junto a esta definición, el documento CSS también definirá el estilo de fuente (cursiva, subrayado, etc.) y el peso (negrita, ligero, etc.).
HTML
Lenguaje de marcado de hipertexto: esta es la base de Internet. Todas las páginas web están escritas, al menos hasta cierto punto, en HTML, que fue desarrollado para ser lo más fácil de escribir posible. Puede ser muy gratificante, de hecho, puede encontrar tutoriales de codificación HTML en línea. ¡Se sorprenderá de lo que puede lograr en unas pocas horas!
Metadatos
Los metadatos son datos contenidos en el encabezado de las páginas web. Estos datos están disponibles para su navegador, pero no se muestran como parte de la página web que está viendo; tendrá que mirar el código fuente para acceder a ellos.
Fuente abierta
El software de código abierto es mantenido por los usuarios y es libre de usar y modificar. Esto contrasta con el software propietario, que es propiedad y está mantenido por una empresa en particular. La mayoría de los desarrolladores web usarán software de código abierto, al menos una parte del tiempo, porque no solo es menos costoso, sino que también puede ser más seguro. Hoy en día, la mayoría de los desarrolladores web minimizarán las brechas de seguridad mediante el uso de contenedores codificados en lenguajes de código abierto.
Puesta en escena
Preparar un sitio web es el proceso de hacer una copia casi final del mismo y luego probarlo antes de implementar la versión en vivo del sitio. La mayoría de los desarrolladores web «organizarán» un sitio web antes de su lanzamiento para comprobar que todo funciona correctamente. Y muchas veces, los cambios importantes en un sitio web ocurrirán en el sitio provisional en lugar del sitio en vivo.
Válido
En diseño web, las páginas web válidas son aquellas que no contienen errores. En la práctica, esto significa páginas web que cumplen con los estándares establecidos en las especificaciones HTML publicadas por W3C, la comunidad que establece los estándares para el desarrollo web.
XML
XML significa Lenguaje de marcado extensible. XML es una parte fundamental del diseño web, ya que actúa como un “metalenguaje” que traduce los elementos de un idioma a otro. Esto significa que las páginas web se pueden construir utilizando muchos lenguajes diferentes, cada uno de los cuales se comunica a través de XML.
Una palabra final
Por supuesto, no es necesario conocer todas estas definiciones y términos de diseño web para comenzar a diseñar un sitio web, ya sea por su cuenta o con ayuda. En última instancia, el diseño web es un proceso de aprendizaje, y los mejores diseños son obras de arte iterativas que se mejoran constantemente a medida que aprende cosas nuevas.
Dicho esto, puede ser muy útil tener una guía sobre el, a veces, complejo mundo del diseño web, especialmente cuando recién comienza. Nuestros diseñadores web profesionales pueden ayudarlo a iniciarse en el apasionante mundo del diseño web.
FAQ’s
1. ¿Qué es el diseño web?
El diseño web se refiere al proceso de planificar, conceptualizar y crear la estructura, apariencia y funcionalidad de un sitio web. Incluye el diseño visual, la disposición de los elementos, la navegación, la experiencia del usuario (UX), y cómo el contenido es presentado en diferentes dispositivos.
2. ¿Qué significa “responsiveness” en el diseño web?
La responsividad o diseño responsive es una técnica que asegura que un sitio web se adapte y funcione correctamente en diferentes dispositivos y tamaños de pantalla, como computadoras, tabletas y smartphones, proporcionando una experiencia de usuario óptima en cualquier dispositivo.
3. ¿Qué es una “interfaz de usuario” (UI) y cómo se relaciona con el diseño web?
La interfaz de usuario (UI) se refiere al diseño visual y la interacción de los elementos de un sitio web o aplicación con los usuarios, como botones, menús, formularios y otros componentes gráficos. El objetivo del UI en el diseño web es hacer que la interacción sea fácil e intuitiva.
4. ¿Qué es la “experiencia del usuario” (UX) en el contexto del diseño web?
La experiencia del usuario (UX) se refiere a cómo se siente y se comporta un usuario al interactuar con un sitio web. Incluye factores como la facilidad de navegación, la velocidad de carga, la accesibilidad y cómo la estructura del contenido responde a las necesidades del usuario. El diseño UX busca mejorar la satisfacción y la eficiencia del usuario.
5. ¿Qué significa “SEO” y por qué es importante en el diseño web?
SEO significa Search Engine Optimization (optimización para motores de búsqueda) y es el proceso de mejorar la visibilidad de un sitio web en los resultados orgánicos de los motores de búsqueda como Google. Un buen diseño web debe tener en cuenta el SEO para asegurar que el sitio sea fácilmente rastreado e indexado, lo que puede aumentar el tráfico orgánico.
