Elaboración De Documentos Web Mediante Lenguajes De Marca. Uf1841. E-Book

Beatriz Coronado García

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

Seitenzahl: 113

Veröffentlichungsjahr: 2025

Beschreibung

Puede solicitar gratuitamente las soluciones a todas las actividades y al examen final en el email [email protected] Capacidades que se adquieren con este Manual: Elaborar documentos utilizando lenguajes de marcas y estándares de desarrollo software: Determinar las diferentes partes de un documento creado con lenguaje de marcas utilizado para su implementación. Reconocer las diferentes técnicas de desarrollo de software existentes en el mercado para mejorar la integración en el sistema y elaboración de documentos según el diseño especificado. Utilizar marcas adecuadas para generar la documentación interna en el desarrollo según las especificaciones del diseño. Realizar documentos con un lenguaje de marcas que permitan la interacción con el usuario contando con especificaciones dadas. Enunciar características generales referentes a «hojas de estilo» para ser aplicados en los documentos a elaborar según el diseño especificado. Usar marcas para proporcionar diferentes estilos a los documentos desarrollados según el diseño especificado. Construir documentos utilizando lenguajes de marcas para permitir al usuario el uso de dispositivos móviles y medios específicos de accesibilidad.

Leseprobe

Elaboración de documentos web mediante lenguajes de marca. UF1841.

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-85-1

Depósito legal: LR 1074-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

Diseño web

1.Principios de diseño web.

1.1.Diseño orientado al usuario.

1.2.Diseño orientado a objetivos

1.3.Diseño orientado a la implementación.

2.El proceso de diseño web.

2.1.Estructura de un sitio web y navegabilidad.

2.2.Estructura y composición de páginas.

2.3.Compatibilidad con navegadores.

2.4.Diferencias entre diseño orientado a presentación e impresión.

3.Prueba de autoevaluación.

Lenguajes de marcado generales

1.Origen de los lenguajes de marcado generales: SGML y XML.

2.Características generales de los lenguajes de marcado.

3.Estructura general de un documento con lenguaje de marcado.

3.1.Metadatos e instrucciones de proceso.

3.2.Codificación de caracteres. Caracteres especiales.

3.3.Etiquetas o marcas.

3.4.Elementos.

3.5.Atributos.

3.6.Comentarios.

4.Documentos válidos y bien formados. Esquemas.

5.Prueba de autoevaluación.

Lenguajes de marcado para presentación de páginas web

1.Historia de HTML y XHTML. Diferencias entre versiones.

2.Estructura de un documento.

2.1.Versiones.

2.2.Elementos de la cabecera.

2.3.Elementos del cuerpo del documento.

3.Color.

3.1.Codificación de colores.

3.2.Colores tipo.

3.3.Colores seguros.

4.Texto.

4.1.Encabezados. Jerarquía y estructura del contenido de un documento.

4.2.Párrafos.

4.3.Alineación, espaciado y sangrado de texto.

4.4.Características de letra: tipos, tamaños y colores.

4.5.Separadores de texto.

4.6.Etiquetas específicas para el marcado de texto. Estilos lógicos.

5.Enlaces de hipertexto.

5.1.Estructura de un enlace: la dirección de internet o URL.

5.2.Estilos de enlaces.

5.3.Diferencias entre enlaces absolutos y relativos.

5.4.Enlaces internos.

5.5.Enlaces especiales: correo electrónico. Enlaces de descarga.

5.6.Atributos específicos: título, destino, atajos de teclado, etc.

6.Imágenes.

6.1.Formatos de imágenes.

6.2.Características de imágenes: tamaño, título, textos alternativos.

6.3.Enlaces en imágenes.

6.4.Imágenes de fondo.

7.Listas.

7.1.Características.

7.2.Ordenación de listas.

7.3.Anidamiento en listas.

7.4.Otros tipos de listas: listas de definición.

8.Tablas.

8.1.Estructura básica.

8.2.Formato de tablas: bordes, alineación, tamaño, etc.

8.3.Formato de contenido de celdas.

9.Marcos (frames).

9.1.Creación de marcos.

9.2.Ventajas e inconvenientes en el uso de marcos.

9.3.Soporte de navegadores.

9.4.Formateado de marcos.

9.5.Enlaces entre contenidos de marcos.

9.6.Marcos anidados.

9.7.Marcos incrustados (iFrames).

10.Formularios.

10.1.Descripción general y uso de formularios.

10.2.Elementos de un formulario: texto, botones, etc.

10.3.Procesamiento de formularios.

10.4.Formateado de formularios: atajos de teclado, orden de edición, grupos, etiquetas, etc.

11.Elementos específicos para tecnologías móviles.

11.1.Selección del lenguaje de marcas para tecnologías móviles.

11.2.Hojas de estilo en dispositivos móviles.

12.Elementos en desuso (deprecated).

12.1.Texto parpadeante.

12.2.Marquesinas.

12.3.Alineaciones.

12.4.Otros elementos en desuso.

13.Prueba de autoevaluación.

Hojas de Estilo web

1.Tipos de hojas de estilo: estáticas y dinámicas.

2.Elementos y estructura de una hoja de estilo.

2.1.Creación de hojas de estilo.

2.2.Aplicación de estilos.

2.3.Herencia de estilos y aplicación en cascada.

2.4.Formateado de páginas mediante estilos.

2.5.Formateado de páginas mediante estilos internos.

2.6.Formateado de páginas mediante estilos externos.

3.Hojas de estilo en dispositivos móviles.

4.Otras hojas de estilo.

4.1.Hojas de estilo impresas.

4.2.Hojas de estilo para la accesibilidad.

5.Prueba de autoevaluación.

Resumen

Prueba de evaluación final

Introducción

Este manual está diseñado para proporcionar una comprensión profunda y detallada de la elaboración de documentos web mediante lenguajes de marcado. A lo largo de sus páginas, se abordarán conceptos fundamentales y avanzados, que permitirán a los lectores adquirir las competencias necesarias para diseñar, estructurar y optimizar sitios web de manera eficiente.

Se inicia con una introducción al diseño web, donde se exploran los principios que guían la creación de sitios orientados al usuario, a los objetivos del proyecto, y a la implementación técnica. Posteriormente, se analiza el proceso de diseño, desglosando aspectos como la estructura del sitio, la navegabilidad, y la compatibilidad con diferentes navegadores.

El manual también dedica una sección extensa a los lenguajes de marcado generales, donde se explica su origen, características y estructura, así como la importancia de crear documentos válidos y bien formados. En particular, se presta atención a HTML, describiendo su evolución, estructura y los elementos que componen un documento web.

Además, se examinan en profundidad los aspectos relacionados con la presentación de páginas web, como la codificación de colores, el formato del texto, y el uso de imágenes, enlaces, listas, tablas, y formularios. Se incluye un análisis de los elementos específicos para tecnologías móviles, que cobran relevancia en el contexto actual de desarrollo web.

Por último, el manual explora el uso de hojas de estilo, esenciales para el formateado y la personalización del aspecto de las páginas web. Se analizan tanto las hojas de estilo estáticas como dinámicas, y se ofrece una guía sobre su aplicación en dispositivos móviles y su adaptación para accesibilidad y impresión.

Este documento servirá como guía completa para aquellas personas interesadas en desarrollar habilidades en la creación de sitios web efectivos y profesionales, proporcionando el conocimiento necesario para enfrentarse a los desafíos del diseño y desarrollo web moderno.

A continuación, se presenta un glosario de términos relacionados con la elaboración de documentos web mediante lenguajes de marcado:

BAccesibilidad: Práctica de diseñar sitios web que puedan ser utilizados por personas con discapacidades, garantizando que todo el contenido sea accesible para todos los usuarios.

BAJAX (Asynchronous JavaScript and XML): Técnica de desarrollo web que permite actualizar partes de una página web sin recargarla por completo, mejorando la interactividad y la experiencia del usuario.

BAPI (Application Programming Interface): Conjunto de reglas y protocolos que permiten la comunicación entre diferentes aplicaciones o servicios. En el contexto de la web, las APIs permiten la integración de servicios externos en un sitio web.

BAtributo: Información adicional proporcionada dentro de una etiqueta HTML para definir propiedades de un elemento, como href en enlaces o src en imágenes.

BBack-End: Parte de una aplicación web que se ejecuta en el servidor, gestionando la lógica de la aplicación, el almacenamiento de datos, y la interacción con las bases de datos.

BBootstrap: Framework front-end que facilita el diseño de sitios web responsivos y modernos mediante un conjunto de componentes y estilos predefinidos en HTML, CSS, y JavaScript.

BBreadcrumbs (Migas de pan): Elemento de navegación que muestra la ruta jerárquica de la ubicación actual del usuario en un sitio web, facilitando la navegación y el retorno a páginas anteriores.

BCache: Almacenamiento temporal de datos que permite a los navegadores cargar sitios web más rápidamente al guardar copias de recursos como imágenes y archivos CSS.

BCanvas: Elemento HTML que proporciona una superficie sobre la que se pueden dibujar gráficos, realizar animaciones o generar imágenes dinámicamente mediante JavaScript.

BCMS (Content Management System): Sistema de gestión de contenidos que permite a los usuarios crear, editar, organizar y publicar contenido digital sin necesidad de conocimientos técnicos avanzados en desarrollo web.

BCookies: Pequeños archivos de datos que los sitios web almacenan en el navegador del usuario para recordar información sobre su visita, como preferencias, carrito de compras, o sesión de usuario.

BCORS (Cross-Origin Resource Sharing): Mecanismo que permite a un servidor indicar a qué otros dominios pueden acceder sus recursos, ayudando a controlar la seguridad en aplicaciones web que realizan peticiones entre diferentes dominios.

BCSS (Cascading Style Sheets): Lenguaje utilizado para describir la presentación de un documento HTML. Define el estilo visual de elementos como fuentes, colores, márgenes y más.

BDNS (Domain Name System): Sistema que traduce nombres de dominio legibles para los humanos (como www.ejemplo.com) en direcciones IP que los navegadores utilizan para localizar servidores y cargar sitios web.

BDOCTYPE: Declaración que define la versión de HTML o XHTML que se está utilizando en un documento web, lo que ayuda a los navegadores a interpretar correctamente el contenido.

BDOM (Document Object Model): Representación estructurada de un documento HTML o XML como un árbol de nodos, que permite a los lenguajes de programación manipular la estructura, estilo y contenido de las páginas web.

BEncabezado (Header): Elemento HTML (<h1> a <h6>) que se utiliza para definir los títulos y subtítulos de un documento, estructurando jerárquicamente el contenido.

BEtiqueta (Tag): Componente fundamental de HTML utilizado para delimitar elementos y contenido dentro de un documento web, por ejemplo, <p> para párrafos o <a> para enlaces.

BFavicon: Pequeño icono asociado a un sitio web que se muestra en la pestaña del navegador, en la barra de direcciones, y en listas de marcadores, ayudando a identificar visualmente la página.

BFlexbox: Módulo de CSS que proporciona un modelo de diseño flexible para la disposición de elementos en un contenedor, permitiendo un control preciso sobre la alineación, dirección y distribución del espacio entre elementos.

BFormulario: Conjunto de elementos HTML que permite a los usuarios ingresar datos y enviarlos al servidor para su procesamiento. Los elementos incluyen campos de texto, botones, casillas de verificación, entre otros.

BFramework: Conjunto de herramientas, bibliotecas y convenciones que facilitan el desarrollo de aplicaciones web al proporcionar una estructura base sobre la cual trabajar.

BGit: Sistema de control de versiones distribuido que permite a los desarrolladores rastrear cambios en el código, colaborar en proyectos y revertir a versiones anteriores si es necesario.

BGzip: Método de compresión utilizado para reducir el tamaño de los archivos enviados desde un servidor web a un navegador, acelerando los tiempos de carga de las páginas.

BHTML (HyperText Markup Language): Lenguaje de marcado utilizado para crear y estructurar el contenido en la web. Es el estándar para la elaboración de páginas web.

BHTTPS (HyperText Transfer Protocol Secure): Protocolo de comunicación en la web que utiliza cifrado para proteger la transmisión de datos entre el navegador del usuario y el servidor, garantizando la seguridad y privacidad.

BiFrame (Inline Frame): Elemento HTML que permite incrustar otro documento HTML dentro de una página web. Se utiliza comúnmente para mostrar contenido de otros sitios sin salir de la página original.

BJavaScript: Lenguaje de programación interpretado utilizado para crear contenido interactivo en la web, como animaciones, formularios dinámicos, y manipulación del DOM.

BJSON (JavaScript Object Notation): Formato de intercambio de datos ligero y fácil de leer, utilizado comúnmente para transmitir datos entre un servidor y una aplicación web.

BLazy Loading: Técnica que retrasa la carga de imágenes y otros recursos no críticos hasta que son realmente necesarios, mejorando el rendimiento de la página al reducir el tiempo de carga inicial.

BMedia Queries: Funcionalidad de CSS que permite aplicar estilos específicos basados en las características del dispositivo, como su ancho, altura, o resolución, facilitando el diseño responsivo.

BMetaetiquetas (Meta Tags): Etiquetas HTML que proporcionan metadatos sobre la página web, como la descripción, palabras clave, y directrices para los motores de búsqueda.

BMicrodata: Conjunto de atributos que se pueden añadir a etiquetas HTML para mejorar la semántica de los datos y facilitar la extracción de información por parte de los motores de búsqueda.

BMinificación: Proceso de eliminar espacios en blanco, comentarios y otros caracteres innecesarios en los archivos de código (como CSS, JavaScript) para reducir su tamaño y acelerar la carga de la página.

BMVC (Model-View-Controller): Patrón de arquitectura de software que separa la lógica de la aplicación en tres componentes principales: el modelo (datos), la vista (interfaz de usuario) y el controlador (gestión de entradas del usuario).

BNavegabilidad: Capacidad de un usuario para moverse de manera intuitiva y eficiente a través de un sitio web, encontrando la información o los recursos que necesita.

BORM (Object-Relational Mapping): Técnica que permite a los desarrolladores trabajar con bases de datos relacionales utilizando lenguajes de programación orientados a objetos, simplificando la manipulación de datos.

BPHP: Lenguaje de programación de scripts del lado del servidor que se utiliza ampliamente para el desarrollo de aplicaciones web dinámicas y la generación de contenido HTML.

BPixel Perfect: Técnica de diseño web que busca replicar exactamente un diseño en pantalla, píxel por píxel, tal como fue concebido en la fase de diseño gráfico.

BProgressive Enhancement: Estrategia de diseño web que se enfoca en crear una experiencia básica y funcional para todos los usuarios, mejorando progresivamente el sitio con características avanzadas para aquellos con navegadores más capaces.

BQuery String: Parte de una URL que contiene datos de parámetros que se envían a la página web, a menudo usados en la personalización de contenido y en la transmisión de datos entre el navegador y el servidor.

B