Está en la página 1de 7

Glosario de términos de Diseño Web

Diseño Web
Es una actividad considerada dentro del diseño multimedia , la cual consiste
en la planificación, diseño, desarrollo e implementación de páginas web
y sitios web. En el se involucran diversas habilidades y conocimientos,
como el diseño gráfico, la programación, la animación, y la arquitectura de
la información. El Diseño Web busca que un sitio web capte la atención de
los visitantes con un diseño gráfico profesional, y que así mismo sea
funcional, de fácil navegabilidad, y que sea localizable por los usuarios a
través de los motores de búsqueda.

Sitio Web
Un sitio web es en esencia una carta de presentación digital, que utilizan las
empresas para comunicar y transmitir su información, como parte de su
estrategia de mercadeo. Técnicamente, se trata de una localización en
la World Wide Web, compuesta por documentos (páginas web) organizados
jerárquicamente. Popularmente los términos 'página web' y 'sitio web' se
utilizan como sinónimos, aunque en realidad no lo son. Un sitio web puede
contener diversos materiales estáticos o dinámicos como: gráficos, textos,
audio, vídeo, etc.

Administrador de Contenido
Es un sistema de gestión de contenidos (CMS o Content Management
System), que consiste en una interfaz que controla una o varias bases de
datos donde se aloja el contenido de un sitio web. Esta herramienta le
permite al propietario del sitio: crear páginas estáticas, ordenar artículos y
páginas en categorías, sub-categorías y etiquetas; insertar imágenes, audio
o vídeo; y en general le permite añadir, modificar o eliminar cualquier
contenido de su sitio web sin necesidad de tener conocimientos de
programación.

Internet
HTML (HyperText Markup Language)
Significa 'Lenguaje de Marcado de Hipertexto', y se refiere al lenguaje de
marcado o codificación predominante para la elaboración de páginas web.
Se utiliza para describir la estructura y el contenido de la página web en
forma de texto, y para complementarlo con otros objetos (como imágenes).

W3C (World Wide Web Consortium)


Es una sociedad internacional que trabaja para desarrollar los estándares de
la World Wide Web, los cuáles contienen las especificaciones técnicas y
guías para mejorar la accesibilidad web, y enriquecer de este modo
la Internet las principales tecnologías sobre las que se basa (URL, HTTP, HTML).
World Wide Web (WWW)
Es un sistema de distribución de información basado en hipertexto, o
hipermedios enlazados y accesibles a través de Internet. Con un
navegador web, un usuario visualiza los sitios web compuesto por páginas
web, y navega a través de ellas usando hiperenlaces. La Web fue creada
alrededor de 1989, y publicada en 1992.

Dominio y Hospedaje

Dominio de Internet

Un dominio es el nombre único que se utiliza para identificar en Internet a


un sitio, un servidor web o un servidor de correo, sin necesidad de que el
usuario recuerde las direcciones numéricas, que son en realidad las que
localizan las computadoras o servicios en Internet..

Hospedaje (Hosting)

Es un servicio que consiste en alojar, servir y mantener los archivos para


su sitio web. Consiste en un servidor contectado a internet con una IP
pública fija. En esa máquina servidora se ha de instalar software servidor
HTTP, software servidor FTP, lenguajes de programación web, bases de
datos, servidores de correo electrónico, etc. El Hosting es un servicio muy
específico en cuanto a infraestructura física, y requiere de una seguridad
bastante elevada, pues expone la máquina que proporciona el hosting a
todo internet.

Servidor

En informática, un servidor es un ordenador remoto o un sistema de software


que, formando parte de una red, provee los datos solicitados por parte de los
navegadores de otras computadoras denominadas clientes.

DNS (Domain Name System)

Significa Sistema de Nombres de Dominio, y es un sistema de nomenclatura


jerárquica para computadoras, servicios o cualquier recurso conectado a
Internet o a una red privada. El DNS nació de la necesidad de recordar
fácilmente los nombres de todos los servidores conectados a Internet.

Posicionamiento Web
Motor de Búsqueda
Un motor de búsqueda, o buscador (como Google, Yahoo o Bing), es un
sistema de internet que indexa y organiza sitios web, y por medio del cual
es posible encontrar archivos o temas almacenados en servidores web,
gracias a su "araña" o web crawler. Hay 2 tipos de motor de búsqueda:
Índices, que realizan la búsqueda según las palabras clave que introduce el
usuario; y Directorios, que son guías de temas recopiladas y actualizadas
manualmente.

Posicionamiento Orgánico

Es el posicionamiento natural (y sin paga) de un sitio web en los motores


de búsqueda, llevado a cabo a través del tiempo y gracias a una estructura
adecuada en su desarrollo y programación, que lo hace localizable por los
distintos buscadores

Posicionamiento Pagado

Es un sistema de publicidad en buscadores, en el cual el anunciante aparece


en la lista de resultados como respuesta a una búsqueda por parte de un
usuario, usando una o varias palabras clave. Cuanto mayor sea el pago,
mejor será el posicionamiento.

Estadísticas del Sitio Web


Son herramientas que nos ayudan a obtener datos más detallados sobre los
usuarios que visitan nuestro sitio web, como su país de procedencia, tipo y
versión del navegador, idioma, sitios de referencia, resolución de pantalla,
etc.

Conociendo los términos avanzados de diseño Web podrás


expresarte con más seguridad con tu equipo de diseñadores y
desarrolladores de páginas Web.

Como emprendedor del Internet, e incluso como desarrollador, puedes sentirte


como que te hablan en otro idioma cuando te mencionan ciertos términos
de diseño de páginas Web.

Ancho fijo (Fixed width)


El diseño de ancho fijo es aquel que no contempla ninguna flexibilidad, lo que
puede causar problemas de visualización en dispositivos cuyas pantallas son de
menor tamaño que el ancho especificado. Actualmente no se usan diseños de
ancho fijo, o por lo menos no es recomendable.
Resumiendo, el diseño de ancho fijo, es eso, aquel que no contempla variaciones,
por ejemplo, el ancho es 500 px, sin opción a cambios.

Diseño fluido (Fluid layout)


Fíjate que aquí se aplica el principio de la proporcionalidad del que te hablaba
anteriormente. Los elementos son diseñados de tal manera que ocupen una
porción del ancho total de la pantalla, incluso se puede poner un límite máximo de
pantalla.
Este es un diseño que trabaja netamente en porcentajes y suele ser muy útil
porque se adapta a todos los tipos de pantallas.

Diseño responsivo (Responsive layout)


El diseño responsivo nace a partir del diseño fluido, pero introduce una variante
muy útil. Ya te había dicho que con el diseño fluido, la página se veía igual en
todos los dispositivos y que muchos elementos podrían no ser accesibles.

Resolución de imágenes
Este es un término que puede ser conocido por ti. La resolución no es más que
esas especificaciones de alto por ancho que muestran las imágenes, por ejemplo,
200x150px. Mientras mayor sean los números de la resolución, más nítida se verá
la imagen en grandes tamaños. Sé que te has dado cuenta que cuando alargas
una imagen suele verse borrosa o pixelada, eso es porque no tiene una buena
resolución.
Evidentemente, la resolución tiene un límite donde la imagen pierde la calidad, por
muy buena que sea la resolución. Por ejemplo, una imagen de 3000x3000px
puede verse muy bien en ordenadores, pero si la imprimes para un banner podría
verse pixelada.

Interface de usuario (UI)


La interface de usuarios es el conjunto de elementos que ve la persona que visita
tu página Web, desde los colores hasta los botones y el contenido. La idea es que
la interface sea amigable con el usuario, incluso que sea atractiva y que invite a
navegar. De la necesidad de una buena interface es que se genera la importancia
del trabajo de los diseñadores Web.

Experiencia de usuario (UX)


La experiencia del usuario es un concepto que ha ido ganando relevancia en los
últimos años. Ya no se trata de servir la información, sino de que ésta sea lo más
agradable para el usuario. Esta experiencia depende de muchas cosas, no
solamente del diseño, por ejemplo, depende de la velocidad de carga del sitio y de
la calidad de la información.

Diseño esqueumórfico (Skeuomophism design)


Este diseño apuesta por el falso realismo, es decir, está constituido por una serie
de elementos que cuentan con sombras, colores y texturas que dan la sensación
de realidad. En términos más sencillos, este tipo de diseño suele ser más
sobrecargado que el diseño plano o sencillo, muchas veces las páginas suelen
pesar más, pero también causan un mayor impacto visual al usuario.

Diseño plano o sencillo (Flat design)


El diseño plano o sencillo no ataca el impacto visual, sino más bien es diseño
pensado en la funcionalidad. Actualmente el Internet está tendiendo hacia el
diseño más sencillo, y aunque eso es bueno porque las páginas cargan más
rápidamente, muchos piensan que se pierden oportunidades de diferenciarse del
resto.

CSS

Hojas de estilo en cascada, así traduce en español, no es más que un documento


que incluye las reglas de estilo de un sitio Web. Cuando hablo de reglas de estilo
me refiero a cómo se ven los elementos que conforman cada página, por ejemplo,
el color de fondo, el tipo de fuente, incluso contempla el comportamiento de
elementos tras acciones específicas.
Por lo general, cuando clicas un botón y éste despliega un menú, es porque está
declarado de esa forma en el CSS.

Metadatos y Metaetiquetas
Son elementos que se usan para brindar información variada sobre un sitio Web.
En las metaetiquetas puedes colocar información acerca de todo, desde la
descripción del sitio Web, hasta el idioma en que está escrito el contenido.
Evidentemente, los metadatos son la información contenida en las metaetiquetas.
Estos elementos, las metaetiquetas, son muy útiles para la optimización del sitio
Web, pues es la primera información que lee el motor de búsqueda cuando rastrea
el sitio.
Mouseover
Es un tipo de condición usada en lenguajes de programación como JavaScript.
Básicamente, cuando se programa sobre la condición Mouseover, le estamos
dando instrucciones al elemento a que reaccione de una manera particular cuando
el puntero de mouse esta sobre él.
Así como existe mouseover, podemos programar acciones cuando el mouse ya no
está sobre el elemento o cuando clicamos dicho elemento. Por lo general, a nivel
de diseño, se usa el Mouseover para cambiar una condición estética del elemento,
por ejemplo, su color o su forma.

Dither
Es un proceso que se usa en edición de imagen y audio digital en el cual se
agrega ruido aleatorio para evitar que los elementos, audio o imagen, se
distorsione ante alguna condición establecida. Por ejemplo, con este proceso se
puede lograr que una imagen se adapte mejor cuando esta junto con otra imagen
con una paleta de color más limitada.

Favicon
Es la imagen que aparece en la pestaña del navegador de tu página Web. Según
el sistema con que trabajes, será posible cargar un Favicon en formato .jpeg, .png,
.gif o .ico.

Navegación Breadcrumb
Es un tipo de navegación que define un camino lógico para la exploración de un
sitio Web. La idea con este tipo de navegación es facilitar la experiencia del
usuario al proveer un camino que pueda recordar. De manera general, se va de lo
más general, a lo más específico, por ejemplo, pasas de productos a una
categoría de productos y de allí a los artículos en esa categoría.

Menú hamburguesa
¿Has visto el icono de las tres líneas horizontales en los menús de las versiones
móviles de páginas Web? Seguro que sí, a eso se refiere la navegación
hamburguesa. Simplemente es un elemento que guarda en su interior otros
elementos para que el diseño sea mucho más práctico en pantallas pequeñas.

JQuery slider

Es un elemento que te permite mostrar múltiples imágenes en un solo espacio; las


imágenes se muestran por transición entre ellas. Seguramente lo has visto en
páginas de inicio, pues es el lugar típico para este tipo de banner rotatorio. JQuery
es el lenguaje en que son programadas las acciones de transición de las
imágenes
Mapa de sitio (Sitemap)
Un mapa de sitio no es más que un documento que indica cómo está estructurado
un sitio Web. Su función es hacer más sencillo el rastreo del sitio.

CDN
Una red de distribución de contenido no es más que un servicio que te permite
alojar una versión de tu sitio Web en varios servidores para mejorar la velocidad
de carga de tu página Web. De manera sencilla, se almacena la información en
estos servidores y, dependido de dónde se haga la consulta, se redirige la petición
al servidor más cercano, esto ahorra recursos en el servidor original, porque
disminuye el número de solicitudes que se hacen en un mismo periodo de tiempo.

Tema padre/ tema hijo (Parente theme/ child theme)


Un tema hijo no es más que aquel que hereda ciertas características de un tema
padre. Por ende, el tema padre es aquel que da ciertas características a sus
temas hijos. Se usan con la finalidad de reciclar código y hacer el trabajo de
diseño y programación más sencillo.

Código de color hexadecimal (HEX color code)


Es un tipo de nomenclatura para definir los colores. Está constituido por 6 dígitos
que pueden ser letras o números, o una combinación de ellos, siendo ffffff la
representación del blanco y 000000 la representación del negro.

Código de color RGB


Este código muestra la proporción de rojo, verde y azul, en el color que estamos
usando, entendiendo que un color es el resultado de la mezcla de los primeros
tres. La ausencia de color está representada por el 0 y la presencia total del
mismo se representa con 255, así, el color blanco seria RGB (255, 255,255)

Kerning
Se refiere al espacio entre letras en una misma palabra; definirlo es especialmente
útil para lograr que el contenido logre una mejor estética y que sea más agradable
para la lectura.
bove the fold:
Representa la parte visible de una página Web.

Below the fold


Representa la parte que es invisible cuando se carga una página Web, es decir,
aquella que se comienza a ver cuándo bajamos