Elaboración De Hojas De Estilo. Uf1303. E-Book

Beatriz Coronado García

• Herausgeber: Clube de Autores
• Kategorie: Wissenschaft und neue Technologien
• Sprache: Spanisch

Seitenzahl: 88

Veröffentlichungsjahr: 2025

Beschreibung

Puede solicitar gratuitamente las soluciones a todas las actividades en el email [email protected] Capacidades que se adquieren con este Manual: - Describir las características de las hojas de estilo para dar formato a las páginas web, y crear ficheros de estilo de acuerdo a un diseño especificado. - Diseñar, ubicar y optimizar los contenidos de una página web, para adecuarla al formato de la misma, facilitar su manejo a los usuarios y optimizarla de acuerdo a un diseño especificado.

Leseprobe

Elaboración de hojas de estilo. UF1303.

Autora: Beatriz Coronado García.

© EDITORIAL TUTOR FORMACIÓN

C/ San Millán, 7, bajo 10

26004 Logroño (La Rioja)

Tlf. 610687276

Email: [email protected]

Web: https://tutorformacion.es   o  https://editorial.tutorformacion.es

Edición: agosto 2024

ISBN: 978-84-19189-79-0

Depósito legal: LR 1006-2024

Reservados todos los derechos de publicación en cualquier idioma.

Según el código penal vigente ninguna parte de este o cualquier otro libro puede ser reproducida, grabada en alguno de los sistemas de almacenamiento existentes o transmitida por cualquier procedimiento, ya sea electrónico, mecánico, reprográfico, magnético o cualquier otro, sin autorización previa y por escrito de D. Miguel Ángel Ladrón Jiménez; su contenido está protegido por la ley vigente que establece penas de prisión y/o multas a quienes intencionadamente reprodujeren o plagiaren, en todo o en parte, una obra literaria, artística o científica.

Foto de portada diseñada por FreePik.

Contenido

Introducción

Hojas de estilo en la construcción de páginas web

1.Funciones y características.

1.1.Descripción de estilos.

1.2.Utilización de estilos.

1.3.Los estilos en el lenguaje de marcas.

1.4.Los estilos con herramientas de edición web.

2.Hojas de estilo y accesibilidad.

2.1.Adecuación de las hojas de estilos.

3.Tipos de estilo: incrustados, enlazados, importados, en línea.

3.1.Descripción de los tipos de estilo.

3.2.Enlazar una hoja de estilo externa a un documento HTML (CSS Externo)

3.3.Insertar un estilo dentro de un documento HTML (CSS Interno y CSS Inline)

3.4.Importar una hoja de estilo desde un documento HTML (CSS Importado)

3.5.Importar una hoja de estilo, a través de un archivo con estilos.

3.6.Utilización y optimización de los tipos de estilos.

4.Selectores y reglas de estilo.

4.1.Estructura de los estilos.

4.2.Sintaxis básica de estilos.

4.3.Utilización de elementos y seudoelementos.

4.4.Utilización de clases y seudoclases.

5.Atributos de estilo para fuentes, color y fondo, texto y bloques (párrafos).

5.1.Descripción de los atributos de estilo.

5.2.Utilización de los atributos de estilo.

6.Creación de ficheros de estilo.

6.1.Creación de ficheros de estilo genéricos.

6.2.Adaptación de los ficheros de estilo para distintas páginas web.

7.Autoevaluación.

Diseño, ubicación y optimización de los contenidos de una página web.

1.Creación de un documento funcional.

1.1.Descripción de los objetivos de la página web.

1.2.Definición de los elementos funcionales de la página web.

1.3.Descripción de cada elemento.

2.Diseño de los contenidos.

3.Identificación de la información a ubicar en la página web.

4.Selección de contenidos para cada elemento de la página.

5.Utilización del documento funcional para las especificaciones del diseño.

6.Tipos de página para la ubicación de contenidos.

7.Definición de los tipos de página en base a los contenidos y funcionalidades.

8.Selección de los tipos de página para la página web.

9.Utilización del documento funcional para las especificaciones del tipo de página.

10.Especificaciones de navegación.

11.Utilización del documento funcional para integrar el mapa de navegación.

12.Elementos utilizados para la navegación.

12.1.Definición de los elementos utilizados para navegar.

12.2.Utilización del documento funcional para especificar los elementos de navegación.

13.Elaboración de una guía de usuario.

14.Autoevaluación

Evaluación final

Introducción

Este contenido didáctico ha sido elaborado con el objetivo de proporcionar una guía práctica y detallada para la elaboración de hojas de estilo en la construcción de páginas web. El contenido se centra en las funciones, características y tipos de hojas de estilo, así como en su utilización para mejorar la accesibilidad y optimización de sitios web.

La primera sección aborda la importancia de las hojas de estilo, describiendo sus diversas aplicaciones y cómo se integran con el lenguaje de marcas y herramientas de edición web. Se exploran los diferentes tipos de estilos, desde los incrustados y enlazados hasta los importados y en línea, con ejemplos prácticos que demuestran cómo implementar y optimizar cada uno de ellos.

La siguiente parte se enfoca en los selectores y reglas de estilo, proporcionando una comprensión detallada de su estructura y sintaxis básica. Además, se incluyen ejemplos sobre la utilización de elementos, seudoelementos, clases y seudoclases, esenciales para un diseño web eficiente y efectivo.

En el apartado de atributos de estilo, se describen y aplican los principales atributos relacionados con fuentes, color, fondo, texto y bloques, ofreciendo ejemplos prácticos y visuales para su correcta implementación. Asimismo, se detallan los pasos para la creación y adaptación de ficheros de estilo, asegurando su compatibilidad con diversas páginas web.

La segunda sección se dedica al diseño, ubicación y optimización de los contenidos de una página web. Se inicia con la creación de un documento funcional que define los objetivos y elementos esenciales de la página. Se continúa con el diseño y selección de contenidos, especificando cómo utilizar el documento funcional para orientar las decisiones de diseño y navegación.

Finalmente, se exploran las especificaciones de navegación, la creación de mapas de navegación y la definición de elementos utilizados para la navegación, proporcionando ejemplos prácticos y capturas de pantalla para ilustrar cada proceso. La guía concluye con la elaboración de una guía de usuario, diseñada para asistir en la correcta implementación y uso de los estilos y contenidos desarrollados.

A continuación, se expone un glosario que proporciona una comprensión básica de los términos clave relacionados con la elaboración de hojas de estilo y el diseño web:

@keyframes: Regla CSS utilizada para definir animaciones.

@media: Regla CSS utilizada para aplicar estilos condicionales basados en características del dispositivo, como el tamaño de la pantalla.

Accesibilidad Web: Prácticas de diseño y desarrollo web que aseguran que las personas con discapacidades puedan usar y navegar por los sitios web de manera efectiva.

Animation: Conjunto de reglas CSS que permiten animar elementos mediante la definición de cambios en el estilo en intervalos de tiempo específicos utilizando @keyframes.

Aspect Ratio: Relación proporcional entre el ancho y el alto de un elemento. Utilizada para mantener proporciones constantes en imágenes y vídeos.

Auto-Layout: Técnica de diseño CSS que permite que los elementos se distribuyan automáticamente dentro de un contenedor flexible.

BEM (Block Element Modifier): Metodología de nomenclatura de clases CSS que facilita la creación de componentes reutilizables y mantenibles.

Box Model: Modelo conceptual en CSS que describe cómo se calculan los elementos en una página web. Incluye el contenido, padding (relleno), border (borde) y margin (margen).

Breakpoints: Puntos definidos en CSS que indican cuándo deben aplicarse estilos específicos en función del tamaño de la pantalla.

Cascade: Mecanismo en CSS que determina cómo se aplican las reglas de estilo basadas en la especificidad, origen y orden de las reglas.

Critical CSS: Técnica para cargar solo el CSS necesario para la parte visible de una página web en el primer renderizado, mejorando el tiempo de carga.

CSS (Cascading Style Sheets): Lenguaje utilizado para describir la presentación de un documento HTML o XML, incluyendo colores, fuentes y disposición de los elementos en una página web.

CSS Grid: Sistema de diseño en CSS que permite la creación de interfaces complejas mediante la disposición de elementos en una cuadrícula de filas y columnas.

CSS Variables (Custom Properties): Variables definidas por el usuario en CSS que pueden ser reutilizadas a lo largo de un documento. Ejemplo: --main-color: #06c;.

Declaración CSS: Parte de una regla CSS que define una propiedad de estilo y su valor, como color: blue;.

Em (unidad): Unidad relativa en CSS que se basa en el tamaño de la fuente del elemento padre. Utilizada comúnmente para tamaños de texto y espaciado.

Estilo en Línea: Estilo CSS aplicado directamente a un elemento HTML mediante el atributo style.

Estilo Enlazado: Hoja de estilo externa vinculada a un documento HTML mediante la etiqueta <link> en el <head> del documento.

Estilo Importado: Estilo CSS importado desde otra hoja de estilo utilizando la regla @import en un archivo CSS.

Estilo Incrustado: Estilo CSS definido dentro de una etiqueta HTML utilizando el atributo style.

Fallback: Técnica para proporcionar alternativas en CSS para navegadores que no soportan ciertas propiedades o funciones.

Flex Container: Elemento que utiliza el modelo de diseño flexible CSS. Ejemplo: display: flex;.

Flexbox (Flexible Box Layout): Modelo de diseño CSS que permite una distribución flexible y eficiente de los elementos dentro de un contenedor, incluso cuando su tamaño es desconocido o dinámico.

Flexbox: Modelo de diseño en CSS que facilita la distribución de elementos dentro de un contenedor flexible, permitiendo una disposición más eficiente y adaptable.

Framework CSS: Conjunto de herramientas predefinidas para facilitar el desarrollo web. Ejemplos populares son Bootstrap y Foundation.

Gradientes: Técnica CSS para crear transiciones suaves entre dos o más colores. Pueden ser lineales (linear-gradient) o radiales (radial-gradient).

Grid Container: Elemento que utiliza el modelo de diseño de rejilla CSS. Ejemplo: display: grid;.

Grid Layout (Diseño de Rejilla): Sistema de diseño CSS que permite la creación de interfaces complejas y receptivas mediante una cuadrícula de filas y columnas.

Hexadecimal (color): Sistema de notación para definir colores en CSS utilizando valores hexadecimales. Ejemplo: #FFFFFF para blanco.

Hoja de Estilo: Archivo o bloque de código CSS que contiene las reglas de estilo aplicables a un documento HTML.

HSLA: Sistema de notación de color en CSS basado en matiz, saturación y luminosidad, también incluye un valor alfa para opacidad. Ejemplo: hsla(120, 100%, 50%, 0.5).

HTML (HyperText Markup Language): Lenguaje de marcado estándar utilizado para crear páginas web. Define la estructura del contenido web.

Inheritance: Propiedad de CSS por la cual algunos estilos aplicados a un elemento padre se transmiten a sus elementos hijos.

Linting: Herramienta de análisis de código que ayuda a encontrar y corregir errores en archivos CSS.

Media Queries: Técnica CSS utilizada en el diseño responsivo para aplicar estilos diferentes a dispositivos específicos según sus características, como el ancho de la pantalla.

Minification: Proceso de eliminar todos los caracteres innecesarios del código fuente sin cambiar su funcionalidad, para reducir el tamaño del archivo CSS.

Normalization: Técnica para asegurarse de que los estilos predeterminados de los navegadores sean consistentes, utilizando bibliotecas como normalize.css.

Polyfill: Código que proporciona funcionalidad moderna de CSS a navegadores que no la soportan de manera nativa.

