MARKETING DIGITAL

TÉCNICO EN MARKETING Y PUBLICIDAD

Diseño y gestión
de una página web

08
 / 1. Introducción y contextualización práctica 3

/ 2. Estructura de una página web 4

/ 3. Experiencia de usuario 4

/ 4. Herramientas para hacer una página web 5

4.1. Editor de imágenes 6

/ 5. Caso práctico 1: “La tienda online de Alfredo” 6

/ 6. Lenguaje HTML. Conceptos básicos, normas elementales,

introducción a los elementos y etiquetas HTML 6

/ 7. Dar formato a un texto en HTML 7

/ 8. Etiquetas HTML para poner en un texto 8

/ 9. El lenguaje de las marcas 9

/ 10. Maquetación web y lenguaje de estilos en cascada: CSS 9

/ 11. Caso práctico 2: “Alfredo y el diseño de tu tienda online” 10

/ 12. Resumen y resolución del caso práctico de la unidad 11

/ 13. Bibliografía 12

© MEDAC ISBN: 978-84-18864-50-6

Reservados todos los derechos. Queda rigurosamente prohibida, sin la autorización escrita de los titulares del copyright,
bajo las sanciones establecidas en las leyes, la reproducción, transmisión y distribución total o parcial de esta obra por
cualquier medio o procedimiento, incluidos la reprografía y el tratamiento informático.
 Aprender a diseñar una estructura web aplicando conceptos de UX.

Conocer diferentes herramientas para diseñar una web.

Aprender conceptos básicos sobre HTML, etiquetas y edición de textos HTML.

El lenguaje de las marcas, maquetación web y CSS.

/ 1. Introducción y contextualización práctica

CTan importante es contar con una página web hoy en día como que esta página web esté bien estructurada,
maquetada, y optimizada para ofrecer a nuestros visitantes una excelente experiencia de usuario.

Conocer estos conceptos y saber aplicarlos, así como familiarizarnos con el lenguaje HTML, sus etiquetas y los CSS
nos facilitará el diseño y gestión de una página web en un futuro.

Planteamiento del caso práctico inicial

A continuación vamos a plantear un caso práctico a través del cual podremos

aproximarnos de forma práctica a la teoría de este tema.

Escucha el siguiente audio donde planteamos la contextualización práctica

de este tema, encontrarás su resolución en el apartado Resumen y Resolución
del caso práctico. Fig. 1. Lenguaje HTML

Audio intro. “¿Qué aspectos

deberíamos tener en cuenta?”
https://bit.ly/35cqJCw
 TEMA 8. DISEÑO Y GESTIÓN DE UNA PÁGINA WEB
Marketing digital /4

/ 2. Estructura de una página web

La estructura de una página web es la manera en la que mostramos el contenido de nuestra web a los visitantes
que llegan a ella. Una estructura web bien trabajada contribuye tanto al diseño y distribución del contenido como al
posicionamiento SEO, y a la experiencia de usuario.

Las páginas web se estructuran, normalmente, de la siguiente manera:

• Home o página de inicio. Es la página principal de tu web y la responsable en la mayoría de los casos de que
tus visitas se queden o se marchen, por tanto, debe ser lo más atractiva posible.

• Header o encabezado. Se encuentra en la parte superior de la página y contiene información relevante sobre
nuestra web: logotipo, y título o descripción sobre nuestro negocio.

• Navigation bar o menú de navegación. Se halla en la parte superior de la web o en la zona superior izquierda
y contiene los enlaces a las secciones principales del sitio web. Este contenido se suele mantener invariable en
las diferentes páginas del sitio.

• Main Content o contenido principal. Es la zona que contiene la mayor parte del contenido de nuestra web. La
organización de este contenido por encabezados hace que la web sea más fácil de leer, tanto para el usuario,
como para los buscadores como Google.

• Footer o pie de página. Es la parte inferior de la web que suele contener información menos relevante como
la información de contacto, políticas de privacidad, opciones de navegación secundarias, etc.

Por otro lado, los elementos más comunes de una página web y que componen esta estructura, son, principalmente:
el texto, las imágenes, los hiperenlaces, las tablas, las capas, los marcos, el contenido multimedia, las animaciones
flash y los sonidos.

Video 1. “Estructura de la web de

MEDAC”
https://bit.ly/2luO6mn

/ 3. Experiencia de usuario
La experiencia de usuario es el proceso resultante de crear un entorno que brinde una experiencia significativa y
relevante para el usuario. Este concepto está muy vinculado con el concepto de Experiencia de Marca.

No hay que confundir Experiencia de Usuario (UX) con la Interfaz de Usuario (IX).

• Ya que mientras el UX hace referencia a la experiencia y sensación que siente un usuario mientras usa tu web.

• El IX está más enfocado hacia un lado más racional de la navegación, guiando al usuario por el site, y
consiguiendo que lleve a cabo ciertas acciones de una forma natural.

Consejos que pueden contribuir al diseño UX de una web son:

• Adapta tu sitio web al perfil de tu usuario objetivo. Si tu web está dirigida a profesionales sanitarios debe
estar redactada con terminología científica y con un estilo formal y profesional.
 TÉCNICO EN MARKETING Y PUBLICIDAD
/5 MEDAC · Instituto Oficial de Formación Profesional

• Crea un menú de navegación preciso y accesible. Debes tener claro las páginas más relevantes de tu web para
incluirla en el menú principal. Estos enlaces deben ser lo más directos posibles y llevar incluidas las keywords
que tus usuarios esperan ver. Puedes usar submenús sin llegar a saturar ni confundir.

• No infravalores el poder de un buscador interno. Sobre todo, para sites con mucho contenido o tiendas online
con muchos productos, el buscador interno puede ser un gran aliado para tus usuarios, y, por tanto, también
para ti.

• No satures el espacio con contenido. Las personas quieren claridad cuando visitan una web. Por tanto, debes
reducir tu web a lo esencial y eliminar todo aquello que aporta poco valor al usuario.

• Facilita el medio de contacto y humanízalo. Esta información es el punto de conversión en una web, por
tanto, debe estar presente desde la portada.

Audio 1. “El diseño de experiencia de

usuario”
https://bit.ly/3eHg3Pg

Audio 2. “Principios fundamentales de

la UX y elementos de la experiencia de
usuario”
https://bit.ly/3kgPWQi

/ 4. Herramientas para hacer una página web

Existen innumerables herramientas que facilitan el diseño de páginas web sin tener conocimiento en programación.
Estas herramientas reciben el nombre de Content Management System (CMS), y las más utilizadas son:

• Wordpress. Es el rey de los CMS, y es que su gestión es muy sencilla, con una gran libertad para el diseño de
la página y con innumerables plugins para incluir cualquier función.

• Shopify. Es un CMS especializado en tiendas online. El diseño del e-commerce se hace muy intuitivo y eficaz y
su interfaz es muy flexible.

• Squarespace. Es el mejor CMS orientado a diseño. Con multitud de plantillas y con opciones de personalización.
Su uso puede resultar un poco más complejo que el resto de CMS, pero su resultado, sobre todo, para negocios
donde la imagen es lo más importante, es espectacular.

• Wix. Es un CMS cada día más utilizado en el mundo. Destaca por su editor de páginas drag & drop, y por la
gran personalización que permite en el diseño de tu página.

• Otras herramientas más enfocadas en HTML para la creación, diseño y edición de páginas web pueden ser
Dreamviewer o BlueGriffon.
 TEMA 8. DISEÑO Y GESTIÓN DE UNA PÁGINA WEB
Marketing digital /6

4.1. Editor de imágenes

Los programas de edición de imagen son software que permiten todo tipo de mejoras en archivos de imágenes, desde
la corrección de los desequilibrios de matiz y brillos de color hasta acciones más complejas. Dos de estos editores son:

• Photoshop. Es la herramienta de referencia para diseñadores profesionales, aunque puede resultar algo
compleja para un usuario principiante. Por eso, Adobe ha desarrollado Lightroom con una interfaz más intuitiva.

• Gimp. Es un editor gratuito de fácil instalación. Permite retocar fotos, componer imágenes, y administrador archivos.

Vídeo 2. “Cinco ejemplos de editores de

imagen online”
https://bit.ly/2jZ1IFU

/ 5. Caso práctico 1: “La tienda online de Alfredo”

Planteamiento: Alfredo está diseñando su nueva tienda online de productos ecológicos. En ella ha decidido hacer
hincapié en la mejora de la experiencia de sus usuarios.

Nudo: ¿Qué consejos debería seguir para contribuir al

diseño UX?

Desenlace: Alfredo debería:

• Adaptar su sitio web al perfil de su usuario objetivo.

• Crea un menú de navegación preciso y accesible.

• Incluir un buscador interno.

• No saturar el espacio con contenido.

• Facilitar el medio de contacto y humanizarlo. Fig. 2. UX vs UI

/ 6. Lenguaje HTML. Conceptos básicos, normas

elementales, introducción a los elementos y etiquetas
HTML
El Lenguaje de Marcado de Hipertexto (HTML) es el código que se utiliza para estructurar y desplegar una página
web y sus contenidos. Cada HTML es un archivo de texto sin formato, pero con una extensión de archivo .html en
lugar de .txt, y está compuesto por una gran variedad de etiquetas HTML. Una web contiene muchos archivos html
que se vinculan entre sí, y hacen referencia a otro tipo de archivos como imágenes, vídeos o documentos.

Las etiquetas HTML son las palabras ocultas dentro de una web que definen cómo un navegador debe mostrar
el contenido al usuario. Un elemento es un conjunto de etiquetas de apertura y cierre. Para marcar el comienzo
y el final de un elemento se usan los símbolos < (menor que) y > (mayor que). La diferencia entre una etiqueta
de apertura y una etiqueta de cierre es la barra diagonal “/”. Hay dos tipos de etiquetas: etiquetas emparejadas y
etiquetas no emparejadas.
 TÉCNICO EN MARKETING Y PUBLICIDAD
/7 MEDAC · Instituto Oficial de Formación Profesional

Dos etiquetas forman una etiqueta. La primera es la apertura y la segunda la de cierre. Estas etiquetas contienen el
texto en el que se aplicará el efecto de esa etiqueta.

Fig. 3. Ejemplo de etiqueta HTML emparejada

Una etiqueta no emparejada es una etiqueta única que no necesita otra complementaria. Se pueden escribir como
<> o </>.

Los atributos permiten personalizar una etiqueta y se definen dentro de la etiqueta de apertura. A los atributos, a
menudo, se les asigna un valor, que puede ser absoluto o porcentual, utilizando el signo igual, como ejemplo:

<p align = “center”> Esto es un texto centrado </p>: la etiqueta p indica que comienza un párrafo, el atributo align=
que vamos a indicar una alineación, en este caso centrada, “center”. A continuación, el texto que queremos centrar
y el cierre con </p>.

/ 7. Dar formato a un texto en HTML

Para dar formato a un texto en HTML se utilizan las etiquetas y los atributos. Con la etiqueta style es posible
modificar la alineación (text-align), el color (color), el tipo de fuente (font-family) y el tamaño (font-size). Además,
se puede formatear el texto en negrita (<b>), cursiva (<i>), subrayado (<u>), entre otros.

Fig. 4. Texto formateado con diferentes etiquetas y atributos

Vamos a ver algunos ejemplos de formatos:

• Para hacer que el texto esté en negrita, utilizamos la etiqueta <b>. Requiere etiqueta de apertura y cierre. El
texto que debe estar en negrita debe estar dentro de las etiquetas <b> y </b>.

• También podemos usar la etiqueta <strong> para hacer que el texto sea fuerte, con una importancia semántica
añadida. También se abre con <strong> y termina con la etiqueta </strong>.

• La etiqueta <i> se utiliza para poner el texto en cursiva. Se abre con <i> y termina con la etiqueta </i>.

• La etiqueta <em> se usa para enfatizar el texto, con una importancia semántica añadida. Se abre con <em>
y termina con la etiqueta </em>.

Fig. 5. Ejemplo de formatos a un texto en HTML

 TEMA 8. DISEÑO Y GESTIÓN DE UNA PÁGINA WEB
Marketing digital /8

Por otro lado, existen los editores de código, usados principalmente por desarrolladores y programadores
profesionales, para dar formato a un texto HTML. A la hora de crear documentos en este formato se podría utilizar
programas como el bloc de notas o el notepad ya que ambos lenguajes son escritos en formato ASCII. Sin embargo,
los programadores profesionales utilizan los editores de código que permiten editar el código, trabajar con él y
modificarlo desde una interfaz mucho más profesional. Estos editores de código se han convertido en herramientas
indispensables para cualquier desarrollador web.

Algunos de los editores de código más populares son: Visual Studio Code, Sublime Text 3, GNU Emacs, Brackets,
y Atom.

/ 8. Etiquetas HTML para poner en un texto

A continuación, se resumen los atributos y etiquetas para dar estilo y formato a un texto:

• style: atributo para dar estilo a elementos HTML.

• background-color: para definir el color de fondo (white, black, blue, red, yellow…).

• color: para definir el color del texto (white, black, blue, red, yellow…).

• font-family: para definir el tipo de fuente (verdana, courier, calibri, times, helvetica…).

• font-size: define el tamaño del texto en píxeles o porcentaje (15px, 120 …).

• text-align: para la alineación del texto (center, right, left, justify).

En este enlace podrás conocer más etiquetas HTML: https://lenguajehtml.com/p/html/semantica/etiquetas-

html-de-texto

<b> Texto en negrita Negrita

<strong> Texto importante semánticamente en negrita Negrita

<i> Texto en cursiva Cursiva

Cursiva
<em> Texto enfatizado semánticamente en cursiva
Resaltado
<mark> Texto resaltado
Pequeño
<small> Texto pequeño
Tachado
<del> Texto tachado
Subrayado
<ins> Texto subrayado

<seb> Texto como subíndice

A
subíndice

<suo> Texto como superíndice A

superíndice

Tabla 2. Lenguaje de marcas o Markdown

 TÉCNICO EN MARKETING Y PUBLICIDAD
/9 MEDAC · Instituto Oficial de Formación Profesional

/ 9. El lenguaje de las marcas

El lenguaje de marcas o Markdown es una forma muy simple de agregar formatos como encabezados, negrita,
listas con viñetas, etc., a un texto sin formato. Originalmente fue diseñado para ser una alternativa fácil al
HTML, ya que permite a los usuarios crear páginas web sin experiencia. La diferencia principal es que no hay
que preocuparse por abrir y cerrar etiquetas, y carece de todos los menús asociados con la mayoría de los
procesadores de texto. Para formatear el texto, Markdown usa signos de puntuación y caracteres con los que el
usuario ya suele estar familiarizado.

MARKDOWN RESULTADO
*cursiva* cursiva
**negrita** negrita
**cursiva y negrita** cursiva y negrita
Tabla 2. Lenguaje de marcas o Markdown

Desde el punto de vista de la productividad, el lenguaje de marcas es muy útil porque se centra en la escritura.
Se puede escribir Markdown en cualquier procesador de texto, pero existen opciones específicas para el lenguaje
de marcas.

• Hashify es un servicio web que muestra dos columnas, la izquierda en Markdown y lo formateado en el lado
derecho. Al ser una web, funciona correctamente en todos los sistemas operativos.

• Writemonkey y ResophNotes son dos programas de escritura minimilista para Windows, con los que tomar
notas y escribir en lenguaje de marcas.

• MultiMarkdown es la opción para usuarios de Mac y se compone de Composer, para escribir en lenguaje de
marcas, y Converter para convertir a Markdown un texto ya formateado.

• Drafts, disponible para iOS, ofrece soporte completo para Markdown y funciones de exportación, y toma
de notas.

• iA Writer es una aplicación para Android cuya función es tomar notas, pero además ofrece compatibilidad con
el lenguaje de marcas.

/ 10. Maquetación web y lenguaje de estilos en cascada:

CSS
La maquetación web no hay que confundirla con la estructura web, ya que mientras la estructura indica las distintas
partes que compone la web, la maquetación hace referencia al diseño de la apariencia de dicha web.

La maquetación web provee de estilo a los elementos de nuestra página web para que sean lo más atractivos
posible y cumplan con el objetivo para el que han sido creados. En este proceso se definen los colores, tamaños,
márgenes, bordes, etc.
 TEMA 8. DISEÑO Y GESTIÓN DE UNA PÁGINA WEB
Marketing digital / 10

Sin embargo, escribir el estilo de cada elemento de nuestra web en las etiquetas utilizando atributos podría resultar
muy tedioso. Para esto existe otro lenguaje de estilos llamado CSS que nos permite seleccionar elementos HTML, e
indicarle las características o estilo que estos elementos tendrán.

Fig. 8. Código CSS

Un conjunto de reglas CSS contenidas en una hoja de estilo determina cómo debe verse una web. Cuando un
navegador muestra una página debe combinar el contenido del documento HTML con la información proporcionada
en la hoja de estilo escrita en CSS.

Fig. 9. Ejemplo de texto CSS donde se

determina que todos los textos que aparezcan
etiquetados como h1 en los documentos HTML
sean de color azul, con fondo amarillo y un
borde alrededor de 1 píxel de ancho. Además,
se determina que el resto de los párrafos sean
de color rojo.

/ 11. Caso práctico 2: “Alfredo y el diseño de tu tienda

online”
Planteamiento: Alfredo ya tiene claro que recomendaciones debe seguir para contribuir al diseño UX de su web,
sin embargo, es el momento de comenzar a trabajar en la estructura web y su diseño y carece de conocimientos
en programación.

Nudo: ¿Qué partes de la web debería tener en cuenta y qué herramientas podría utilizar para su diseño?
 TÉCNICO EN MARKETING Y PUBLICIDAD
/ 11 MEDAC · Instituto Oficial de Formación Profesional

Desenlace: Alfredo debería tener en cuenta: el header, el menú de navegación, el contenido principal y el footer. Y
con respecto a las herramientas para el diseño de su web, al no tener conocimientos en programación, podría utilizar
gestores de contenido como Wordpress, Shopify, Squarespace, o Wix.

Fig. 10. CMS más populares

/ 12. Resumen y resolución del caso práctico de la

unidad
En esta unidad hemos aprendido a estructurar una página web conociendo las distintas partes que la componen.
Además, hemos aprendido algunos consejos para mejorar la experiencia de usuario de nuestra web, y principales
herramientas para diseñar una página web profesional sin tener conocimiento en programación.

Además, hemos conocido aspectos básicos sobre el lenguaje HTML, sus etiquetas, atributos y el lenguaje de estilos
en cascada CSS, así como a dar formato a textos HTML. Por último, hemos analizado lo que es el lenguaje de las
marcas, así como algunas herramientas muy útiles para escribir en Markdown.

• Escructura web

• Experiencia de usuario

• Herramientas para diseñar una web - editor de imágenes

• Conceptos básicos lenguaje HTML

• Dar fromato a un texto HTML

• Etiquetas HTML

• El lenguaje de las marcas o markdown

• Maquetación web y lenguaje de estilos en cascada: CSS

Resolución del caso práctico inicial

Al principio de esta unidad se planteaba el caso de un bufete de abogados en el que trabajamos y al que tenemos que
diseñar una nueva página web. Debemos identificar qué debemos tener en cuenta a la hora de su diseño.

Deberemos tener en cuenta, en primer lugar, la estructura de la página web (header, menú de navegación, contenido
principal y footer). Tras esto deberemos aplicar los consejos aprendidos para mejorar la experiencia de usuario, que
nos permita una óptima experiencia, y principalmente basada en una adecuada velocidad de carga, que permita
una fluida navegación y que el usuario en pocos clicks encuentre lo que busca, diseño claro sencillo y eficaz, páginas
y fichas de productos con contenido textual y visual de gran aportación, buscadores y asistentes que faciliten los
procesos de búsqueda. Por último, y dado que no tenemos conocimientos en programación, nos decantaremos por
herramientas de CMS como Wordpress, Squarespace, o Wix, editando, cuando sea necesario, el código HTML de la
plantilla de diseño seleccionada.
 TEMA 8. DISEÑO Y GESTIÓN DE UNA PÁGINA WEB
Marketing digital / 12

/ 13. Bibliografía
Estructura web y documentación. Recuperado de: https://developer.mozilla.org/es/docs/Learn/HTML/Introduccion_a_HTML/estructura
Diseño UI y UX: ¡descubre cuál es la diferencia entre ambos. Recuperado de: https://rockcontent.com/es/blog/ui-ux/
8 trucos de diseño UX-UI para que los usuarios se enamoren de tu web. Recuperado de: https://www.inboundcycle.com/blog-de-inbound-marketing/trucos-
dise%C3%B1o-ux-ui
Usage statistics of content management systems. Recuperado de: https://w3techs.com/technologies/overview/content_management
Manz (n.d.), Etiquetas HTML de texto. Recuperado de: https://lenguajehtml.com/html/semantica/etiquetas-html-de-texto/
Y el editor de código favorito de los programadores es… 8 profesionales nos dan su respuesta. Recuperado de: https://www.xataka.com/otros/editor-codigo-
favorito-programadores-profesionales-nos-dan-su-respuesta
Editores de código: las mejores aplicaciones para sistemas como Windows o Mac. Recuperado de:
https://www.ionos.es/digitalguide/paginas-web/desarrollo-web/editor-de-codigo/