Unidad 1

Introducción
LENGUAJE DE MARCAS
MONICA PEREZ
Contenido
1. Introducción ................................................................................................................................... 3
2. Los lenguajes de marcado .............................................................................................................. 4
Características .................................................................................................................................... 5
Clasificación de los lenguajes de marcas ............................................................................................ 5
Ámbitos de aplicación ........................................................................................................................ 5
Algunos lenguajes de marcas ............................................................................................................. 5
Herramientas de ediciónNotepad ...................................................................................................... 8
3. Interfaz de usuario ......................................................................................................................... 8
Percepción visual ................................................................................................................................ 8
Color, tipografía e iconos ................................................................................................................... 9
Color ................................................................................................................................................... 9
Tipografía ......................................................................................................................................... 10
Iconos ............................................................................................................................................... 10
4. Interfaz web ................................................................................................................................. 11
Interacción persona-ordenador ....................................................................................................... 11
Objetivos .......................................................................................................................................... 12
Características .................................................................................................................................. 12
Componentes ................................................................................................................................... 12
5. Maquetación web ........................................................................................................................ 14
Layouts ............................................................................................................................................. 15
6. Guías de estilo .............................................................................................................................. 17
7. Bibliografía.................................................................................................................................... 19

2
 1. Introducción
Los lenguajes de marcas o lenguajes de marcado son aquellos que permiten representar
información que contiene, en conjunto con los datos propiamente dichos, marcas o etiquetas
que indican cómo se estructurarán estos datos, su significado o cómo se tienen que representar
desde un punto de vista gráfico o visual.

Los lenguajes de marcas no son lenguajes de programación. Contienen reglas que organizan
la información para dar una estructura uniforme y facilitar su procesamiento automático.
¿Qué es Internet?
Antes de la creación de Internet, la única forma de comunicarse digitalmente era por medio
del telégrafo El telégrafo se inventó en 1840, emitía señales eléctricas que viajaban por cables
conectados entre un origen y un destino. Utilizaba el código Morse para interpretar la
información.
Es difícil definir quiénes fueron los “padres de la Internet” pero recordamos a aquellos
personajes que marcaron la historia con sus aportes específicos que ayudaron a construir el
gigante cibernético que conecta a casi dos mil millones y medio de personas a nivel global en la
actualidad.
Comúnmente se le conoce a Vint Cerf como “El padre de internet”. Él se encargó de la
creación —junto con Robert Kahn— de los protocolos TCP/IP y la arquitectura de lo que
conocemos hoy como Internet.
El Dr. Lawrence Roberts diseñó y gestionó ARPANET, la primera red de paquetes que fue
precursora de Internet. En 1967 se convirtió en el científico líder de ARPA asumiendo la tarea de
diseñar, financiar y dirigir el nuevo concepto de red de comunicaciones de conmutación de
paquetes. Desde entonces, el Dr. Roberts fundó cinco nuevas empresas: Telenet, NetExpress,
ATM Systems, Caspian Networks, y Anagran.
World Wide Web
El primer trabajo de Tim Berners-Lee en el CERN fue diseñar Enquire, una base de datos que
con la que intentaba sistematizar las montañas de información inconexa que empezaban a
acumularse en aquella época. Enquire funcionaba a base de un sistema de tarjetas de
información, que podían relacionarse unas con otras. Se implantó en el CERN, pero no era un
3
 sistema muy flexible, sobre todo porque cada introducción de nueva información resultaba
complicada.
Berners-Lee dejó el CERN a finales de 1980, estuvo unos años trabajando en la industria y
regresó en 1989, cuando el CERN era ya uno de los mayores nodos de Internet a este lado del
Atlántico. Es entonces cuando -con la colaboración de Robert Caillau- presentó una propuesta
para establecer un sistema de archivo de documentación mediante el uso de conexiones entre
documentos de una forma más simple. Para añadir un enlace a Enquire, había que modificar la
ficha del documento referenciado; el nuevo sistema permitía acceder a él simplemente indicando
su "dirección" en la red. Era el germen de la Web.
La propuesta original -de la que ahora se cumple el cuarto de siglo- tenía solo 20 páginas,
incluyendo unos pocos diagramas y ejemplos. Hacia el final se estimaba que bastarían dos
personas para completar el proyecto inicial en un plazo de entre seis y 12 meses.
El primer servidor de la Web fue un ordenador NeXT -un extraordinario diseño de Steve Jobs,
posterior a su salida de Apple. Era una máquina adelantada a su época y que quizá por eso nunca
tuvo mucho éxito comercial. Estaba instalado en el propio CERN y su dirección era
http://info.cern.ch.
La página principal de este sitio era un simple menú de nueve puntos, que explicaba el
alcance del proyecto, la forma de utilizar los enlaces y cómo instalar nuevos servidores. No
faltaba un apartado de bibliografía, referencias de software y una lista hasta veinte de
colaboradores. Todo, por supuesto, en simple texto, sin ni un solo gráfico ni adorno.
¿Por qué WWW? El propio Berners-Lee estuvo barajando varios nombres para su proyecto.
Entre ellos, Mine Of Information (descartado porque sus siglas deletraban "moi", en francés, que
se consideró un poco egocéntrico) y The Information Mine (igualmente descargado por la misma
razón: "TIM" era el nombre del propio inventor...). Al final, quedó en las tres W (World Wide
Web), que, aparte de definir muy bien su alcance global e interconectado, tenían cierto atractivo
desde el punto de vista gráfico.

2. Los lenguajes de marcado

El origen de los lenguajes de marcas viene del lenguaje de marcado generalizado estándar,
SGML.
Se trata de un lenguaje de marcado que nos permite definir otros lenguajes de marcado, es por
lo tanto un metalenguaje. Desciende de GML de IBM, creado por un equipo liderado por Charles
Goldfarb.
El uso de la web y las aplicaciones desarrolladas sobre la tecnología de internet en las últimas
décadas ha dado lugar al incremento del uso de lenguajes de marcas, tanto para expresar
información (HTML, XHTML…), como para su intercambio (JSON, XML…), también se utilizan en
configuración de aplicaciones o en la definición de interfaces gráficas de usuario.

4
Características
• Almacenados en texto plano: se trata de documentos almacenados únicamente con letras,
números, caracteres especiales y de control, sin formato. Su extensión suele ser .txt.
• Independencia: al trabajar con texto plano, no se depende de ninguna plataforma
web/hardware concreta.
• Flexibilidad: se pueden utilizar en diferentes contextos o para diferentes fines, e incluso es
posible combinar algunos lenguajes para obtener mayores funcionalidades.
• Compactabilidad: el contenido y las marcas están en el mismo archivo.

Clasificación de los lenguajes de marcas

• De procedimiento: se suelen utilizar para la presentación del texto, siendo visible para el
usuario. Por ejemplo LaTeX.
• De presentación: para definir el formato del texto, las etiquetas de marcado no son visibles
para los usuarios, definen el formato del texto. Por ejemplo RTF.
• Descriptivos o semánticos: marcado flexible que utiliza etiquetas o marcas para dar
información estructural y descripción del contenido. Por ejemplo HTML.

Ámbitos de aplicación
• Intercambio de datos entre diferentes aplicaciones.
• Especificar datos de configuración.
• Presentar información.
• Definición de interfaces gráficas de usuario.
• …

Algunos lenguajes de marcas

• HTML

• XHTML
XHTML ha sido diseñado para extender HTML y permitir la compatibilidad con nuevos
formatos de datos como videos, imágenes o lenguajes de scripting. Dado que HTML siempre
se basó en SGML y, por lo tanto, era relativamente complejo, se encontró que un lenguaje
meta de marcado limitado, como XML, era adecuado para definir la estructura básica y las
posibilidades sintácticas del XHTML.

5
• XML

• JSON

• YAML

6
• SVG

• MATHML

7
Herramientas de edición
• Notepad
• Windows o Sublime
o Notepad++ o Kate
• Linux: • IDEs:
o Gedit o Geany
o Vi o Eclipse
o Nano o Netbeans
• Otros: o Visual Studio Code
o Atom o VSCodium

3. Interfaz de usuario

La interfaz de usuario se define como "la apariencia y el comportamiento de un sistema de

información", o como "la parte del sistema del ordenador con la que el usuario está en contacto
directo" (CMS).
Todas y cada una de estas páginas webs son diseñadas con alguna finalidad. Lograr nuestro
objetivo dependerá en gran medida del diseño que hagamos. Para ello deberemos tener en cuenta
ciertos factores y características que nos permitan realizar un diseño óptimo para lograr dicho
objetivo.

Percepción visual
La percepción visual es el proceso mediante el cual el cerebro capta la información en forma de
luz del exterior y la transforma en una recreación propia. Cada cerebro hace su propia interpretación
de la realidad, aunque en general suele ser similar.
A la hora de diseñar interfaces hemos de considerar:

• Qué tipo de estímulos son interpretados de forma similar por todos.

• Qué tipo de realidad es interpretada de forma diferente por diferentes grupos.

Don't make me think!: "No me hagas pensar" es el principio más importante que toda página
debería seguir en cuanto a usabilidad. El objetivo principal de toda página web debería ser que fuera
evidente, auto explicativa. El usuario debería ser capaz de ver de un vistazo lo que la página propone
sin emplear mucho tiempo pensando sobre ello.

Para realizar un buen diseño una persona debe comunicar las ideas y conceptos de una forma
clara y directa, por medio de los elementos gráficos.

8
Color, tipografía e iconos
Son elementos muy importantes en el diseño, las combinaciones posibles son infinitas, pero
debemos de ser cuidadosos a la hora de escogerlas.

Color
Propiedad que poseen los objetos y que percibimos gracias a la luz.

Propiedades de los colores:

• Tono: hace que los colores sean distintos.
• Saturación: intensidad o pureza de un color.
• Luminosidad: cantidad de luz que refleja un color (oscuro-claro).

Colores primarios
El ojo humano solo es capaz de percibir los denominados colores aditivos, y, a través de su
combinación, le es posible obtener el resto de los colores. Los colores aditivos son el rojo (R), el
verde (G) y el azul (B).

Los ordenadores emplean estos tres colores para

representar cualquier color de la escala cromática.
Podemos representar cualquier color con el modelo RGB o
con el sistema de numeración hexadecimal

9
Colores seguros
Los colores seguros son los que se forman con las combinaciones de los tres colores rojo,
verde y azul pero sólo con los valores hexadecimales: 00, 33, 66, 99, CC y FF. Son seis grados
distintos de cada color y por eso hay 216 colores en total ya que 216 es el resultado de multiplicar 6
x 6 x 6.

Algunos colores seguros

Tipografía
La tipografía es el arte y la técnica de crear y combinar tipos de fuentes para comunicar un
mensaje.
La elección de la fuente que se usará en la web es vital, ya que la mayor parte de contenido se
expresa mediante texto. Se ha de tener en cuenta que en general, los usuarios no leen todo el
contenido, suelen hacer una lectura rápida o simplemente un barrido visual, por lo tanto es
necesario que la elección de tipografía sea la adecuada para que el mensaje llegue al usuario, sin
importar el dispositivo en el que se encuentre, la resolución de pantalla, etc.
A la hora de elegir la tipografía más adecuada hay que tener en cuenta algunas características:
fuentes, tamaño, contraste del color de la fuente con el fondo…
Lo más conveniente es elegir una sola fuente (o dos) y luego modificar sus atributos para poder
establecer diferencias entre los distintos tipos de texto: títulos, subtítulos, párrafos, etc... En algunas
ocasiones, por requisitos del diseño, es posible establecer más tipos de letras, pero siempre
limitando al mínimo la cantidad de fuentes utilizadas.

Iconos
Un icono es una aplicación del elemento Representación porque es una forma representativa
de algo del mundo real; es una aplicación del elemento Significado porque el mensaje transmitido
por el icono genera en nuestra mente una imagen conceptual y, es una aplicación del elemento
Función porque logra atraer la atención del usuario que percibe de forma más rápida el mensaje que
se intenta transmitir y, de esta forma no tiene necesidad de leer el texto al que acompañan.
10
 Los iconos se suelen emplear para complementar los textos de los enlaces en la página de
portada. Un icono debe contener la menor cantidad de detalle posible sin perder significado.

4. Interfaz web
Como ya adelantábamos al principio del tema la interfaz web es el conjunto gráfico que permite
la navegación del sitio web. Es decir, la interfaz es el conjunto de elementos de la pantalla que
permiten al usuario realizar acciones sobre el Sitio Web que está visitando. Por lo mismo, se
considera parte de la interfaz a sus elementos de identificación, de navegación, de contenidos y de
acción.

Para conseguir una buena web, no basta con tener contenidos de calidad si la interfaz no es
amigable con el usuario, si no permite un uso rápido, lo más probable es que la web fracase. Sin
embargo, con un buen diseño, aunque los contenidos tengan menor calidad, si la interfaz permite
una navegación sencilla y un acceso cómodo, de tal forma que la interacción con el usuario sea
sencilla, es más probable que la web tenga éxito. El objetivo, por lo tanto, será conseguir que
nuestra web sea simple y tenga coherencia.

Es vital que dada la interfaz se diseñe pensando en las necesidades del usuario, ya que la
mayoría de los sistemas son interactivos, por lo que, como comentábamos, el diseño será definitivo
para que la web capte la atención de los usuarios. De aquí la importancia del siguiente punto:
interacción persona-ordenador.

Interacción persona-ordenador
La interacción persona-ordenador (IPO) o Human-Computer Interaction (HCI), es la disciplina
dedicada a estudiar cómo se produce la interacción entre las personas y los sistemas informáticos
para tratar de mejorar esta relación por medio del diseño gráfico.
Su objetivo principal es incrementar la productividad de los equipos y minimizar los errores al
tiempo que se dota a los usuarios de una experiencia segura, confortable y satisfactoria.
Los actores principales en esta materia son:

• El usuario (posee capacidades y limitaciones a la hora de procesar información).

• El ordenador y sus periféricos.
• El proceso que se lleva a cabo.
Algunos principios para mejorar la HCI:

• Es necesario conocer al usuario.

• Se ha de ofrecer la información de forma rápida.
• Se reorganizará la estructura de la información en función del uso, optimizando las
operaciones y consiguiendo así una web consistente.
• Intentar minimizar el número de errores y en caso de que se produzcan, proporcionar
buenos mensajes, claros y concisos.

11
Objetivos
Antes de comenzar el diseño de una web, es importante tener claro qué queremos diseñar y
para quién lo queremos diseñar. Hay que tener claro el público al que queremos llegar, de otra
manera, es muy probable que nuestra web fracase, ya que no estará orientada a llamar la atención
de los usuarios potenciales, por no haber realizado un mínimo estudio previo.

Para que un diseño Web sea efectivo debemos diseñar una interfaz que cubra todos nuestros
objetivos. Este diseño debe lograr que los usuarios de nuestro sitio puedan acceder con facilidad a
sus contenidos, puedan interactuar con eficacia con todos sus componentes y, se sientan cómodos
haciéndolo.

Características
Al diseñar un sitio web, lo que se pretende es que los usuarios se queden en la misma, para lo
que debemos tener en cuenta tanto los sentimientos, como la percepción que tendrán al acceder a
la web. Hemos de ser conscientes de los procesos que se llevan a cabo en nuestra mente
(aprendizaje, recuerdo, memorización, procesamiento de la información…)
¿Es lo mismo diseñar una web sobre viajes que una web educativa para estudiantes de primaria?
Dependiendo del sitio web, habrá características imprescindibles y características deseables,
todo dependerá del objetivo que queramos alcanzar: usabilidad, simplicidad, que sea visual,
coherencia, consistencia, calidad, funcionalidad, precisión, accesibilidad, que se educativa…

Componentes
Llegados a este punto, ya tenemos claro que un buen diseño requiere de un análisis y estudio
previos, hemos de tener claras las consideraciones funcionales, estéticas, tipo de usuario, etc.
Se necesitan numerosas fases de investigación, análisis, modelado, ajustes y adaptaciones
previas a la producción definitiva de cualquier objeto. Además, comprende multitud de disciplinas y
oficios dependiendo del objeto a diseñar y del número de participantes en el diseño. Dado que la
interfaz Web es el medio de comunicación entre los usuarios que acceden a un sitio Web y todas las
páginas que forman parte del sitio, deberemos tener en cuenta los elementos que compondrán
nuestra interfaz. Todos estos elementos deberán permitir al usuario identificar la función que
desempeñan de forma que pueda acceder a todos los contenidos sin necesidad de realizar
complicados razonamientos.

Dependiendo del sitio web que diseñemos, podemos tener multitud de elementos, algunos
destacables son:
• Elementos de Identificación.
o El nombre de la web.
o El logotipo.
o La imagen de la cabecera.

12
 • Elementos de Navegación.
o Menú principal
o Widgets.
o Aside de navegación.
o Menú de navegación del footer.
o Elemento de regreso a la página de inicio o home.
o Menú principal situado en la parte superior de la página.
o Información sobre la ubicación del usuario dentro del sitio.
• Elementos de Contenidos: zonas de la web en las que se muestra la información
destacada como las áreas de texto de un artículo de un blog, el formulario de una
página de contacto, etc.
• Elementos de Interacción.
o Cambiar el idioma.
o Utilizar el buscador.
o Consultar el carrito de compra.
o Suscripción en la newsletter.

Zona de navegación
Si queremos que nuestra página sea usable, el usuario debe conseguir navegar por la página sin
perderse y sin tener la sensación de perderse. Para conseguirlo, el sistema de navegación debería
constar de una serie de elementos:

• Elemento de regreso a la portada.

• Menú de secciones y/o áreas de interés.
• Información sobre la ubicación del usuario dentro del sitio web.

Zona de contenido e interacción

El contenido es la parte esencial de una página Web. Es importante que los contenidos estén
expresados en un lenguaje claro y conciso y, presentados en un formato agradable y de fácil lectura.
Además, si el sitio Web está formado por muchas páginas, el contenido debe situarse siempre en la
misma ubicación. También es importante evitar que el usuario tenga que hacer grandes
desplazamientos durante la lectura de los contenidos. Siempre es mejor dividir el contenido en más
de una página y enlazar unas con otras
Algunos elementos que permiten la interacción:

• Botón.
• Áreas de texto.
• Botones de opción.
• Casillas de verificación.
• …

13
 5. Maquetación web
Cuando comenzamos un proyecto web debemos realizar una maqueta del sitio web. La
maquetación es un proceso que consiste en la organización de los elementos que componen la web,
como:

• Texto, títulos, párrafos.

• Tablas y listas.
• Menús estáticos o desplegables.
• Imágenes, iconos, fondos, dibujo vectorial.
• Botones y elementos de formularios.
• Elementos multimedia: vídeos, audio y animaciones.
A la hora de realizar la maquetación, deberemos pensar previamente:

• Cuáles son los elementos que va a contener cada una de nuestras páginas.
• Cómo irán colocados cada uno de esos elementos dentro de las páginas teniendo en
cuenta siempre el espacio disponible.
Si hemos hablado con el cliente, tendremos los datos suficientes para realizar una serie de
bocetos preliminares de lo que será nuestro sitio. Un boceto debe reflejar la interactividad y la
funcionalidad del sitio web.
En prácticamente todas las páginas web hay elementos que son comunes. Algunos ejemplos son:

FUENTE: HTTPS://WWW.ENIUN.COM/WP-CONTENT/UPLOADS/COMPONENTES-INTERFAZ-WEB-764X600.PNG

la cabecera, el menú de navegación, el cuerpo o el pie de página.

14
 Para maquetar una web contamos con diferentes elementos:

• Elementos de ordenación: su función es la de ayudar a distribuir los grandes bloques de

los que consta cada página web, teniendo en cuenta el espacio de la ventana del
navegador.
o BLOQUE ENCABEZADO: se coloca al inicio de la web, donde se suelen situar los
elementos identificativos: logotipo, nombre de la empresa… Así como algunos
elementos de acción: cambio de idioma, realización de búsquedas… Se repite en
todas las páginas del sitio web.
o BLOQUE DE NAVEGACIÓN: donde se colocan las zonas de navegación.
o BLOQUE DE CONTENIDO: donde se colocan los contenido e interacción. Es muy
importante que en este bloque los usuarios no necesiten realizar movimientos
horizontales para acceder al contenido.
o BLOQUE DE PIE: situado al final de la web, se repite en todas las páginas del sitio web.
Se emplea como zona de navegación complementaria a la zona superior situada
en el encabezado. En ellas se repiten algunos enlaces que se suelen colocar en el
encabezado como el enlace al mapa del sitio o el enlace a la información de
contacto y, además, se colocan algunos enlaces nuevos como los enlaces a la
información relativa a los derechos de autor, privacidad e información legal.

Layouts
Cuando hablamos de layaouts nos referimos a la disposición de los elementos en una página
web. Son elementos de diseño que nos permiten organizar los componentes para que aparezcan en
un lugar determinado de la interfaz web.
La reutilización de código es una técnica común que intenta ahorrar tiempo y energía,
reduciendo el trabajo redundante. Las plantillas de diseño web son sitios web prediseñados que se
pueden usar como base en un diseño web y que permiten adaptarlo a las necesidades del diseñador
de forma rápida y fácil, ahorrando una gran cantidad de tiempo y dinero.

Single Column Layout

15
Split Screen

Content Focused Layout

Magazine Layout

16
A grid of cards

…
(Tenéis más tipos y ejemplos en la presentación de clase)

6. Guías de estilo
Las guías de estilo recogen los criterios y normas que deben seguir los desarrolladores de un sitio
web para que tenga una apariencia uniforme y atractiva para el usuario. Son imprescindibles,
especialmente si el sitio web va a ser desarrollado por un grupo de personas.
La guía de estilo está dirigida las personas encargadas del diseño y programación de la interfaz
web. Esta guía debe recoger todos los aspectos relacionados con el diseño de la interfaz propia del
sitio y, servir de ayuda eficaz en la toma de decisiones, tanto en el proceso de diseño como en la fase
posterior de mantenimiento de un sitio web.
Una guía de estilo incluye aspectos relacionados en la inclusión en la interfaz de fotografías, logos,
imágenes, iconos, los colores, los tipos de letra y, aquellos relacionados con la maquetación

17
18
7. Bibliografía
Lenguaje de marcas y sistemas de gestión de la información (2021). Fernando Paniagua
Martín. Ed: Paraninfo.
Lenguaje de marcas y sistemas de gestión de la información (2018). J. Moreno y S. Luis
González. Ed: Síntesis.
Diseño de interfaces web (2016). Pérez Martínez, Eugenia y Altadill Izura, Pello Xabier. Ed:
Garceta.
Diseño de interfaces web (2019). Diseño de interfaces web. Diana García-Miguel López. Ed:
Síntesis.
Apuntes de Diseño de interfaces web. Comesaña, Jose Luis.
https://www.eniun.com
https://www.w3schools.com/
https://www.lawebera.es
https://karlacaloca.com/clasificacion-de-las-tipografias/
Guía de estilos canva
https://www.canva.com/es_mx/aprende/aprende-a-crear-una-guia-de-estilo-visual-para-tu-
marca/
https://www.redhat.com/es/topics/integration/whats-the-difference-between-soap-rest
https://www.staffcreativa.pe/blog/crear-una-guia-de-estilo-de-diseno-web/
https://ikastaroak.birt.eus/edu/
https://websitesetup.org/website-layouts/
https://www.canva.com/learn/web-layout/
https://www.toptal.com/designers/ui/web-layout-best-practices

FUENTE:
HTTPS://WWW.FREDDELACOMPTA.COM/

19