10 términos básicos del diseño web que debes conocer

En el mundo del diseño web juega un papel muy importante el nivel de conocimientos que tengamos de diseño gráfico.

Hacer una página web uno mismo puede parecer algo sencillo o que cualquiera puede llevar a cabo. En este post te explicamos las implicaciones que tiene y las diferencias que hay con la contratación de una agencia profesional.

En este mundo existe una terminología que no todos conocen y no saben cómo utilizar, cuyo conocimiento marcará la diferencia entre un diseño del montón y un diseño bien planificado.

A continuación te queremos mostrar un glosario de términos sobre diseño web de los que seguramente ya has oído hablar pero que nadie se ha parado a explicarte de manera sencilla.Para ponernos en contexto, hoy en día existen más de 25 conceptos o terminologías que hacen referencia al desarrollo web  hoy te explicaremos los 10 más importantes que debes tener en cuenta a la hora de desarrollar tu sitio web o el del vecino, tu primo, tu tía, etc.

Anchor text: 

El anchor text o texto ancla es una porción de texto que contiene un link, enlace o hipervínculo ¡Que viene siendo lo mismo, realmente!

A la hora de asociar un texto a un link es importante que tengamos en cuenta lo que Google pone en valor. Es importante que el link sea lo más natural posible y que tenga relación con el contenido del enlace al que hace referencia, si no lo interpreta como una mala práctica.

Por ejemplo, si ponemos un enlace en el texto diseño de páginas web que dirige a una página que habla sobre autos, pues cómo que no queda muy bien ahí y Google podrá penalizarte.

EJEMPLO

Para poner un link a un texto, podemos hacerlo de diferentes maneras:

• Texto sin ancla: Este texto muestra el link al natural.

 Ejemplo: https://88bag.com.mx

• Texto de marca: Texto que vincula una marca al enlace de la web. 

Ejemplo: bolsas ecológicas.

• Texto genérico: Son los textos ancla que no dicen nada sobre lo que hay detrás. Ejemplo: «este enlace«, «haz clic aquí«, «en este post«…
• Texto con palabras clave: Puedes colocar un link en un texto que te interesa posicionar como palabra clave. 
• Ejemplo: diseñador web freelance o diseño de páginas web con WordPress.

Backup: 

Un backup es un término anglosajón para denominar una copia de seguridad.

En todos los ámbitos de la tecnología es necesario contar con una o varias copias de seguridad o backups de todos nuestros trabajos, pues en cualquier momento se puede quemar nuestro ordenador, puede venir un hacker a tocarnos la moral o simplemente metemos la mano en algo que no debemos  y se nos va todo nuestro esfuerzo a tomar viento.

CSS: 

Si eres diseñador web habrás oído hablar millones de veces de los estilos CSS (Cascade Style Sheets o, en castellano, Hojas de Estilo en Cascada).

El CSS es un lenguaje que vino a darle vida al diseño y desarrollo web, facilitando en gran medida el poder asignar diferentes estilos a objetos de manera más o menos sencilla: colores, espacios, tamaños, etc.

Se llaman estilos en cascada porque tienen diferentes niveles jerárquicos. Un objeto puede tener su apariencia desde diferentes niveles hasta configurar su aspecto final. 

Podría, por ejemplo, tener un color desde el nivel 1, su tamaño (height y width) desde el nivel 2 y sus márgenes (padding) desde el nivel 3.

El HTML y el CSS tienen funciones diferentes, pero siempre van de la mano y ahora mismo no podrían vivir el uno sin el otro en el mundo del diseño de páginas web. 

El HTML es el que da forma y aporta la estructura a nuestra web y el CSS, el que le asigna la parte más gráfica y de estilos a los diferentes objetos.

Aquí te dejo un ejemplo de código CSS que nos está diciendo que los textos de párrafo (p) tienen que ir con tipografía ‘Verdana’ y tamaño 20px:

p {

font-family: Verdana;

font-size: 20px;

}

Encabezados (Headings)

Los encabezados HTML, comúnmente conocidos como H1, H2, H3, etc. son unas etiquetas que se utilizan para organizar y categorizar jerárquicamente los contenidos de una página web.

Estos encabezados están formados por la letra H (Heading en inglés) y tienen una jerarquía de hasta 6 niveles (H1 – H6).

Además de ser útiles para que el lector interprete mejor el contenido de lo que está leyendo, también es muy útil a nivel SEO para que Google también lo interprete de la mejor manera.

En WordPress, los encabezados HTML pueden ser utilizados directamente desde el editor.

Error 404

El Error 404 es quizá el error relacionado con el estado de una página web que más nos suena a todos. 

Este estado de página está íntimamente relacionado con un estado de horror cuando se planta frente a nosotros en la pantalla del ordenador. Cuando ocurre en nuestra propia página, se entiende ¿No?  Es un código de estado HTTP que nos está diciendo que la página que queremos abrir no existe o no está disponible.

Para evitar en la medida de lo posible los Errores 404 debemos extremar las precauciones y comprobar bien todos los enlaces de nuestra web.

Favicon

El Favicon es un icono de pequeñas dimensiones que sirve para identificar fácilmente una página web cuando tenemos varias pestañas abiertas o cuando la guardamos en favoritos. De hecho, el Favicon es el acrónimo de “Favorite Icon”

El favicon, además, sirve para aportar a la pestaña de nuestra web un pequeño toque corporativo o de marca. Queda muy feo ver que la pestaña de una web tiene el icono por defecto de un folio blanco.

Iframe

Un Iframe es un recurso de código HTML que nos permite insertar en una página un documento externo, una página web, etc., para que forme parte del contenido de nuestra página.

El código básico para insertar un Iframe es el siguiente:

<iframe src=”CONTENIDO AQUÍ” </iframe>

Además, como es un recurso HTML, se le pueden asignar ciertos parámetros para adaptarlo a nuestras necesidades, como son ancho, alto, etc.

IMPORTANTE: un Iframe en sí mismo no es responsive, por lo que te recomiendo que eches un ojo por Google en busca de una solución para hacerlo ¡Es con código, aviso!

Landing Page

Una landing page (‘Página de aterrizaje’ en castellano de Castilla) es una página creada únicamente con un fin: la captación de leads o potenciales clientes.

Al contrario que una página normal de una web, en la que tenemos muchos objetos e información con la que podemos interactuar, una landing page tiene un objetivo único, y es que el usuario nos deje sus datos para una posible venta de productos o servicios.

En una landing page no debe haber distracciones. Debemos eliminar menús, footers y enlaces de todo tipo e incluir SOLO el contenido que es relevante para el fin que se quiere conseguir.

Si quieres saber cómo crear una landing page exitosa te esperamos en nuestro artículo anterior en donde te explicamos cómo desarrollarla.

Metadatos

En código HTML existen unas etiquetas muy importantes para facilitar información sobre nuestras páginas a los buscadores.

Estas etiquetas son los metadatos. Pequeñas porciones de datos no visibles para los usuarios en nuestra propia página, pero que repercutirán en nuestro SEO On Page y, por ende, en lo que la gente ve en los resultados de Google.

¿Pero cuales son los más importantes? 

• Meta title: Etiqueta que define el título de cada página.

Estructura: <title> TÍTULO AQUÍ </title>

• Meta description: Etiqueta con la que resumimos el contenido de la página.

Estructura: <meta name=”description” content=”DESCRIPCIÓN AQUÍ” />

• Meta keywords: Etiqueta con la que enumeramos algunas palabras clave relacionadas con el contenido de la página.

Estructura: <meta name=”keywords” content=”KEYWORD 1, KEYWORD 2…” />

Nota: aunque otros buscadores sí tienen en cuenta las meta keywords, Google ya no puntúa su uso para el SEO, por lo que no te mates demasiado en este punto.

Responsive

Si ya tienes algunas nociones sobre diseño web, eres un emprendedor digital o simplemente te gusta leer sobre temas tecnológicos relacionados con Internet, estarás cansado/a de escuchar el término “responsive”

Pues bien, el término responsive hace referencia a un concepto relativamente novedoso de diseño web, surgido con el boom de tablets y móviles, que busca la adaptabilidad de las páginas web a los diferentes tipos de dispositivos existentes en el mercado: ordenadores de sobremesa, portátiles, tablets, móviles e incluso televisores.

Sitemap

El Sitemap es el conjunto de URL’s que quieres que sean indexadas por los robots de los buscadores para que luego aparezcan en las búsquedas.

Digamos que es un listado en el que le facilitas el trabajo a las arañitas simpáticas que vienen en busca de tus contenidos, poniéndoles todas las rutas a mano para que no se cansen buscando. Con este listado también les indicamos cuál es la jerarquía de nuestras páginas, entradas, etc.

Ese listado es un archivo de formato XML que tenemos que tener alojado en la raíz de nuestro sitio.

Conclusión:

Esperamos nuestro nuevo artículo te haya dado una idea de los términos esenciales que deberás conocer para comenzar el el mundo del diseño web, recuerda que siempre habrá personas o agencias expertas en el rubro que pueden ayudarte a solucionar tus problemas digitales.