Diccionario de diseño web para principiantes serios

El diseño web y las páginas web no es algo diferente a cualquier otra disciplina de conocimiento. En esta vida hay cosas que todos creemos saber sin que tengamos ni idea de qué son. El que más y el que menos es experto en “todología”, aunque después lo cierto sea que no tenemos ni la más remota idea de cuestiones técnicas muy concretas.

El campo del web design está plagado de outsiders y amateurs que saben bastante de diseño web, que conocen sus limitaciones y que quieren aprender más de modo serio y razonable. Pero también existe un amplio territorio donde el cuñadismo sabelotodo campa por sus respetos e ignorancia supina, y en páginas web esto a veces sucede demasiado con ambientadillos que han leído 4 cosas en internet o han visto 2 vídeos y se las dan en el bareto de su barrio de saber más que otros. Sucede en muchos ámbitos sociales.

Tampoco hay que rasgarse las vestiduras, pero por suerte la mayoría de las personas no es de tipo “ambientado” ni tienen complejo de inferioridad como para chulear con 3 palabras técnicas de las cuales ni siquiera comprenden su profundidad u origen. La mayoria quieren y desean aprender de lo que les gusta y quieren más.

DICCIONARIO DE DISEÑO WEB

Por todo ello, este artículo lo dedicamos a aquellas personas aficionadas al diseño web que desean ampliar sus conocimientos poquito a poco, a sorbos pequeños. Este somero diccionario (sin orden alfabético) lo hemos realizado pensando en ellas y ellos, los que saben medir sus conocimiento y realmente quieren aprender a ser profesionales. Comenzamos…

LANDING PAGE

• Es una página especial con un solo fin: conseguir ledas (datos) de potenciales clientes para incluirlos en tus bases de información particulares.
• Una eficaz landing page no contempla elementos superfluos que distraigan la atención de los usuarios.
• Debe incluir obligatoriamente un formulario de suscripción o contacto, contenidos altamente emocionales, características técnicas del servicio o producto promocionado y llamadas a la acción sutilmente imperativas.

SQUEEZE PAGE

• Es una landing page pero diseñada con un espíritu más provocador, directo y agresivo.
• Se ofrece en ellas descargas o artículos gratuitos a cambio de los datos personales facilitados por los usuarios (lead magnet).
• Su contenido es minimalista: título rompedor, imágenes espectaculares, un eslogan potente y un formulario de suscripción.

Z-INDEX

• Es una propiedad del lenguaje CSS para fijar el cómo y el cuándo se ejecutan distintas órdenes de programación.

DIRECCIÓN URL

• Es el nombre alfanumérico que nos lleva a un “domicilio” web y a sus contenidos multimedia individuales.
• El sistema más usado es HTTP, protocolo de transferencia de hipertextos.

NUEVA PESTAÑA

• Con el efecto o recurso target_blank cuando se hace clic en un hipervínculo, este se abre en una nueva pestaña, permaneciendo accesible y operativa también la de origen.
• El tag correspondiente hay que escribirlo en código HTML.

CARRUSEL

• El efecto slider permite que varios contenidos (sobre todo, imágenes),   seleccionados con anterioridad, pasen horizontalmente, de uno en uno, por la página web visualizada en esos precisos momentos.
• Dicen los expertos que este recurso de diseño web ralentiza bastante la velocidad de carga.

MAPA DE LA WEB

• El sitemap es un archivo en formato XML que realiza un mapa de navegación de tu blog o web con las rutas naturales a seguir entre secciones y categorías jerarquizadas.
• Facilita el trabajo de rastreo de las famosas arañas de Google.
• Yoast SEO de WordPress crea sitemaps automatizados (hay que activarlo previamente).

DISEÑO RESPONSIVE

• El concepto responsive se aplica a diseños webs compatibles con dispositivos móviles, es decir, las pequeñas pantallas de los teléfonos celulares o tablets.

TEXTO ANCLA

• Un anchor text es un trozo de texto incluido en un enlace, link o hipervínculo.
• Tiene relación directa con el contenido que enlaza.
• Puede ser genérico (“haz clic aquí”), de marca (“Pepe´s Cola”), natural (“bebida de cola”) o con inclusión de términos-clave o keywords (“el refresco más vendido”).
• El anchor text puede ser utilizado para conectar diferentes secciones, textos o módulos dentro de un mismo sitio web.

COPIA DE SEGURIDAD

• Es fundamental guardar backups (en la nube o en un pendrive, mejor más de uno) que prevengan contra ataques o robos de información de hackers.
• Si eres usuario de WordPress, el complemento UpdraftPlus te vendrá de maravilla.

MIGAS DE PAN

• Muchas veces, de tanto navegar sin rumbo fijo, nos perdemos irremisiblemente en el interior de una web cualquiera. Las breadcrumbs nos sirven de brújula para recuperar nuestro sentido del espacio.
• Los chatbots de Google siguen estos itinerarios marcados por las migas de pan para jerarquizar los contenidos de tu blog o web y orientar debidamente la experiencia de usuario.
• Una buena optimización de posicionamiento SEO requiere de excelentes y eficaces breadcrumbs.

MODELO HEX 

• El sistema hexadecimal es la paleta de colores más utilizada en internet (televisiones, ordenadores, teléfonos móviles y tablets).
• Se basa en el modelo RGB (rojo, verde y azul), con valores alfanuméricos que van del 0 al 9 y de la A a la F.
• Otro modelo de color a considerar es el CMYK (cyan, magenta, amarillo y negro).

HOJAS DE ESTILO

• El lenguaje CSS se usa para asignar diferentes valores y estilos a distintos objetos de tu blog o web (tamaños, márgenes, disposiciones espaciales, colores, tipografías…).
• HTML aporta la arquitectura o estructura formal a tu web empresarial o tu blog personal y CSS hace el trabajo práctico desde el punto de vista estético y funcional para ensamblar todos los elementos de manera coherente y armoniosa.

MENÚ DESPLEGABLE

• Estás harto de ver drop downs todos los días cuando haces clic en un menú estático y se despliega ante ti todo un abanico de opciones a elegir.

ENCABEZADOS

• Se clasifican mediante etiquetas (de H1 a H6) que sirven para organizar y ordenar por jerarquías las distintas categorías de tus contenidos.
• Son muy importantes para un correcto posicionamiento SEO en Google y otros motores de búsqueda.

¡ERROR 404!

• Es un código de estado en lenguaje HTML que nos informa de que una página web o no está disponible o simplemente no existe.

FAVICON

• Es un símbolo de reducidas dimensiones que identifica una determinada (y solo ella) página web.

IFRAME

• Se trata de un código HTML que facilita la inserción de links externos (webs, blogs, imágenes, vídeos, documentos…) en tu website o blog.

LENGUAJE JS

• Nos referimos a JavaScript, lenguaje sofisticado para crear efectos complejos en tu web comercial o blog profesional.
• Si dominas CSS, HTML y JavaScript ya eres casi un diseñador web de primera división.

REDIRECCIONAMIENTO 301

• Sucede en algunas ocasiones que una página de tu web o blog “se muere momentáneamente” por error aleatorio o porque hemos modificado su URL, queriendo o sin voluntad consciente de hacerlo.
• Con el recurso 301 podemos solucionar el desaguisado mediante una orden en formato de archivo .htaccess por la cual la vieja URL es sustituida por la nueva dirección.

EFECTO PARALAJE

• El recurso Parallax está muy de moda en todo el mundo mundial.
• Se coloca un fondo base y se mueve a continuación hacia arriba como si estuviese en otro plano visual. En esencia, eso es todo.
• Algunos diseñadores web abusan de Parallax. Úsalo con moderación.

¿NOINDEX O SÍINDEX?

• Si no se le dices lo contrario, los bots inteligentes de Google rastrean todas las páginas y contenidos de tu blog o web y las introducen en un registro de índices.
• Resulta aconsejable que no todas tus páginas o contenidos sean indexados, por ejemplo mejor es dejar fuera de ese registro de búsqueda el aviso legal, la política de privacidad y las landing pages dirigidas a targets muy concretos y grupos altamente segmentados.
• Existe una etiqueta en lenguaje HTML para poder activar este recurso a conveniencia.
• Si utilizas WordPress, con el complemento Yoast SEO lo activas al instante en pocos pasos.

NOFOLLOW

• Existe una opción que te permite que tus enlaces a terceras webs o blogs no sean tenidos en cuenta por Google, de esta manera, no diseminas tu reputación online de modo gratuito.

RELLENAR VACÍOS

• Un aspecto de maquetación especial se refiere al relleno de espacios en blanco entre varios módulos o secciones de la estructura web. Esta técnica es conocida por algunos en el argot profesional como masonry layout.

METADATOS

• Se escriben en lenguaje HTML.
• Son etiquetas de información muy descriptiva acerca de los contenidos de tu blog o web.
• No son visibles para los usuarios, pero sí para los bots de búsqueda y rastreo.
• Muy útiles en estrategias SEO On Page.
• Los metadatos de mayor relevancia o interés son: el titular, el resumen o metadescripción y las keywords.

Con este diccionario de términos o conceptos esenciales de diseño de páginas web ya te puedes mover con cierta prestancia o fundamento por el apasionante mundo del diseño web. Disfruta con lo aprendido y no dejes de aprender nunca.

¿Nos quieres aportar alguna palabra a este diccionario que iremos completando poco a poco?, déjanos tu comentario con la palabra que buscas y no encuentras; o si eres diseñadora o diseñador web crees que deba estar en este diccionario de términos de diseño de páginas web.