UNIDAD 4

Diseño web HTML5 + CSS

Temas
1 ¿Qué es un tema?

Un tema es el aspecto general que tiene tu sitio. Los temas definen el lugar de tu sitio en el que se
muestran los menús y widgets, además de la combinación de colores y el diseño por defecto de las
páginas y entradas.

Como vimos anteriormente debemos elegir el tema de acuerdo con la estética que queremos darle
a nuestro sitio. Para ello debemos ingresar al expositor de temas con 200 distintos diseños,
distribuciones y combinaciones de colores que se ajustan a las necesidades de tu sitio.

Para visualizarlo:

1. Hacé clic en Mis sitios web.

2. Desplázate hacia abajo y ampliá la sección Diseño.

3. Hacé clic en el botón Temas.

Diseño web HTML5 + CSS O1

 Versión de demostración – Un sitio especialmente diseñado
para mostrar todas las características de un tema en
particular.

- Activar – Activa el tema inmediatamente en tu sitio.

- Información – Aprende las características de un tema y como
replicar la versión de demostración.
- Ayuda y Soporte – Ponte en contacto con nosotros para
obtener ayuda con el tema.

O2 Diseño web HTML5 + CSS

Búsqueda de temas
Los temas predeterminados en el repositorio de temas están diseñados para funcionar mejor con el
editor de bloques, habilitando características como bloques de ancho completo. También están
diseñados para simplificar el proceso de configuración de su página de inicio y sitio.

Sin embargo, hay 200 temas disponibles, y es posible que quieras un tema más avanzado para tu
sitio. En Mi sitio → Diseño → Temas, ve hacia abajo de la página para Ver todos los temas.

https://developer.mozilla.org/es/docs/Web/HTML/Element/p

Diseño web HTML5 + CSS O3

 ¿Buscás un tema o una función en concreto? Introducí la palabra clave en el cuadro de
búsqueda y verás solo los temas que coincidan con ella.

Hacé clic en Gratis para filtrar por los temas disponibles en todos los sitios, o hacé clic en
Premium para filtrar por los temas incluidos en el plan premium o uno superior. Los temas
premium también se pueden adquirir en un sitio que no tenga un plan premium o superior.

Podéshttps://developer.mozilla.org/es/docs/Web/HTML/Element/p
limitar aún más los resultados de búsqueda por características, diseño, columnas,
asunto y estilo.

O4 Diseño web HTML5 + CSS

 - Destacar: características de los temas, como menú fijo, encabezados personalizados, tiendas

- Diseño: diseños fijos, fluidos, en cuadrícula o adaptables

- Columnas: el número de columnas del tema o si hay una barra lateral a la derecha o izquierda

- Asunto: algunos ejemplos son Arte, Negocios, Anuncios o Fotografía

- Estilo: filtra por estilo claro, alegre, sencillo, moderno o sofisticado, entre otros

Previsualizar un Tema

Diseño web HTML5 + CSS O5

 La opción de Versión de demostración en el menú del Tema abrirá un sitio de demostración con el
tema aplicado. Puede usar esta opción para ver el estilo de diferentes páginas antes de
seleccionar un tema para su sitio.

1. Desde el menú Mis Sitios web, hacé clic en Diseño y en la opción Temas.

2. Cada tema tiene un menú al lado del nombre del tema justo debajo de la vista miniatura del
https:/ develtema.
oper.mozil a.org/es/docs/Learn/CSS/Building_blocks/Selectors
3. Hacé clic en los tres puntos para expandir el menú.

4. Del listado selecciona Versión de demostración.

O6 Diseño web HTML5 + CSS

 https://fonts.google.com/

En la Versión de demostración, Podés probar cómo se ve el tema en una computadora de escritorio,

tableta o dispositivo móvil.
https://developer.mozilla.org/es/docs/Web/HTML/Element/meta

Podés hacer clic en Probar y personalizar para abrir el tema en el Personalizador con
el contenido de tu sitio cargado.

Diseño web HTML5 + CSS O7

 El uso de la opción Probar y personalizar no cambiará tu sitio inmediatamente, solo cuando
decidas hacer clic en el botón Activar y publicar.

Si querés probar otro tema, hacé clic en la X de la esquina superior izquierda de la ventana del
personalizador para volver atrás y seguir buscando por el expositor de temas uno que se adecúe
mejor.
Activación de temas
Al activar un tema, este se aplica al sitio que tienes publicado. No cambia nada de tu
contenido, solo la forma en que está distribuido.

O8 Diseño web HTML5 + CSS

1. En el menú Mi sitio, accede a Diseño → Temas.
2. Todos los temas tienen un menú al lado del nombre, justo debajo de la
miniatura del tema.
3. Hacé clic en los tres puntos para ampliar el menú.
4. Hacé clic en Activar para activar el tema.

Son ciegos o tienen deficiencias visuales. Los usuarios con impedimentos visuales
usualmente utilizan herramientas llamadas Lectores de pantalla, los cuales les leen el
texto contenido en el atributo alt.

Se produjo algún error en el código que impide que la imagen sea cargada.

Diseño web HTML5 + CSS O9

 2 Personalización del tema

Una vez que tenemos en el tema podremos personalizarlo con la herramienta Personalizador.

Para acceder al Personalizador:

1. Hacé clic en Mi sitio

2. Accede a Diseño

https:/ developer.mozil a.org/es/docs/Web/HTML/El

3.emento/h1 https:/ developer.mozil aPersonalizar.
Selecciona .org/es/docs/Web/HTML/Element/Heading_Elements

10 Diseño web HTML5 + CSS

Controles del Personalizador
Los controles del Personalizador son botones en los que podés hacer clic para ocultar
el Personalizador y ver previamente tu sitio/blog como aparecería en un escritorio,
una tableta o un dispositivo móvil.

Icono del lápiz

Algunos elementos en la vista previa del personalizador tendrán al lado un icono de

un lápiz. Se trata de un atajo a los controles del personalizador para editar ese
elemento específico.

Diseño web HTML5 + CSS 11

 Vínculos
Tus visitantes no verán estos iconos. Solo se muestran a los propietarios o administradores del sitio.

Crear un borrador, programar y compartir una vista previa

El Personalizador también permite al administrador hacer cambios y guardarlos como borradores

antes de publicarlos en el sitio. Es una buena función si se utiliza junto con la función para programar
los borradores del Personalizador.

Cuando hayas realizado los cambios en la configuración del Personalizador, aparecerá el icono de un
engranaje al lado del botón Publicar.
Guardar cambios: es la opción por defecto. Elígela para publicar los
cambios en tu sitio.

Guardar borrador: esta opción cambiará el botón azul Publicar por el de Guardar borrador.
Elegila para guardar los cambios del Personalizador sin publicarlos en el sitio. El botón
cambiará a Borrador guardado en letras oscurecidas.

Programar: te permite programar los cambios para que se publiquen

en la fecha y hora que quieras.

Enlace para compartir la vista previa: tras guardar los cambios del Personalizador en un bo-
rrador o programarlos, podrás https://developer.mozilla.org/es/docs/Web/HTML/Element/a
mostrar una vista previa de los cambios con los colabora-
dores compartiendo el enlace en la parte inferior del panel de acciones.

12 Diseño web HTML5 + CSS

Identidad del sitio
Logotipo: añadilo una vez y se mostrará automáticamente en todos los temas que admitan logotipos.

Título del sitio: aparece en la parte superior de tu sitio, en el encabezado. Es un

espacio fantástico para poner el nombre de tu negocio o blog.

Descripción corta: se muestra con un estilo más suave cerca del título del sitio. Es útil
para poner una cita o una breve declaración de la misión (de una frase).

Icono del sitio: es lo que ves en las pestañas del navegador, las barras de favoritos y
en las aplicaciones móviles de WordPress.

Diseño web HTML5 + CSS 13

 Los iconos del sitio deben ser:

cuadrados y de al menos 512 × 512 píxeles.

Crédito del pie de página : es un enlace para volver a WordPress.com. Podés elegir
cómo se muestra.

14 Diseño web HTML5 + CSS

Colores y fondos
Cada tema tiene distintas opciones de color. Algunos tienen opciones muy básicas para cambiar
el color primario y otros proporcionan paletas de colores y opciones de imágenes de fondo.
Como no todos los temas son iguales, la sección Colores y fondos puede tener opciones de
configuración distintas a las que se muestran aquí.

Diseño web HTML5 + CSS 15

 Fuentes e imágenes de cabecera
Algunos temas también incluyen distintas opciones de fuentes e imágenes de cabecera.
Fuentes.

Si una opción del menú de fuentes está en el Personalizador, podés usarla para
cambiar los encabezados y la fuente base.

Podés cambiar el tamaño, el grosor y el tipo de letra de los encabezados.

La fuente base es la que se utiliza para el cuerpo del sitio. Podés cambiar el tamaño y
el tipo de letra de la fuente base.

16 Diseño web HTML5 + CSS

Si no ves el menú de fuentes, significa que el tema que has elegido no incluye la
opción de cambiar la fuente por defecto.

Imágenes de cabecera

Si tienes un tema que te permita añadir una imagen en la cabecera de tu sitio, podés elegir una imagen
desde Diseño → Personalizar → Imagen de cabecera.

Los temas que admiten cabeceras suelen incluir información en esta sección sobre eltamaño adecuado
para que tu cabecera encaje perfectamente con el tema.

Diseño web HTML5 + CSS 17

 Menús
Esta opción del Personalizador se utiliza para gestionar los menús de navegación del contenido
publicado en tu sitio. Podés crear menús y añadir elementos relacionados con el contenido existente,
como páginas, entradas, categorías, etiquetas, formatos o enlaces personalizados.

Los menús se pueden mostrar en lugares definidos por el tema o en áreas de widgets añadiendo el
widget “Menú de navegación”.

18 Diseño web HTML5 + CSS