DAW1 LMSGI UD1. Reconocimiento características lenguajes de Marca_vf PDF

LENGUAJES DE MARCA Y SISTEMAS DE GESTIÓN DE INFORMACIÓN CICLO FORMATIVO DE GRADO SUPERIOR DESARROLLO DE APLICACIONES WEB Sara Martín Cuezva 2024-2025 UD1. introducción LMSGI Ejercicio 1: Con la ayuda del editor Online w3Schools Tryit Editor, vemos la estructura...

LENGUAJES DE MARCA Y SISTEMAS DE GESTIÓN DE INFORMACIÓN CICLO FORMATIVO DE GRADO SUPERIOR DESARROLLO DE APLICACIONES WEB Sara Martín Cuezva 2024-2025 UD1. introducción LMSGI Ejercicio 1: Con la ayuda del editor Online w3Schools Tryit Editor, vemos la estructura mínima de un código HTML y hacemos pruebas de cambio en el formato de texto: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_default_default UD1. introducción LMSGI Ejercicio 2: Escribe un texto a mano de “100 palabras” en un folio en blanco, donde incluyas un animal, una planta y el nombre de una persona de tu familia. Puedes hacerlo en el idioma que tú quieras. UD1. introducción LMSGI In the heart of the enchanted forest, Au cœur de la forêt enchantée, Pilar Zài mófǎ sēnlín de shēnchù, Pilar Pilar walked carefully, admiring the marchait prudemment, admirant la xiǎoxīn dì zǒu zhe, zànměi zhe beauty of the ferns that covered the beauté des fougères qui couvraient dìmiàn shàng de jué lèi zhī měilì. ground. Suddenly, a golden-furred le sol. Soudain, un renard au pelage Túrán, yī zhǐ jīnsè máo de húli fox appeared among the trees, doré apparut parmi les arbres, chūxiàn zài shù zhōng, hàoqí dì watching her curiously. Pilar, l’observant avec curiosité. Pilar, kànzhe tā. Pilar jīngyà ér xǐyuè, surprised but delighted, knelt down to surprise mais ravie, s’agenouilla pour xiàguì xiàng tā tígōng yī duǒ tā cǎi de offer it a lavender flower she had lui offrir une fleur de lavande qu’elle xiāngcǎo huā. Húli chōngmǎn xìnrèn picked. The fox, trusting, approached avait cueillie. Le renard, confiant, dì zǒu jìn, jiēshòu le zhè gè lǐwù, zài and accepted the gift, creating a s’approcha et accepta le cadeau, tāmen zhī jiān chuàngzào le yī gè magical bond between them. From créant un lien magique entre eux. mófǎ de bāng. Cóng nà tiān qǐ, Pilar that day on, Pilar and the golden fox Depuis ce jour, Pilar et le renard doré hé jīnsè húli chéngwéi le bùkě fēngē became inseparable companions, devinrent des compagnons de huǒbàn, yīqǐ tànsuǒ sēnlín de exploring the secrets of the forest inséparables, explorant ensemble les mìmì, xiǎngshòu zhǐyǒu dàzìrán together and enjoying the serenity secrets de la forêt et profitant de la nénggòu tígōng de níngjìng. that only nature could offer. sérénité que seule la nature pouvait offrir. UD1. introducción LMSGI In the heart of the enchanted forest, Au cœur de la forêt enchantée, Zài mófǎ sēnlín de shēnchù, Pilar walked Pilar marchait Pilar xiǎoxīn carefully, admiring the beauty of the prudemment, admirant la beauté des dì zǒu zhe, zànměi zhe dìmiàn shàng ferns that covered fougères qui de juélèi zhī the ground. Suddenly, a golden- couvraient le sol. Soudain, un měilì. Túrán, yī zhǐ jīnsè máo de furred fox renard au pelage húli chūxiàn zài appeared among the trees, watching doré apparut parmi les arbres, shù zhōng, hàoqí dì kànzhe tā. Pilar her curiously. Pilar, surprised but l’observant avec curiosité. Pilar, jīngyà ér xǐyuè, xiàguì xiàng tā tígōng delighted, knelt down to offer it a surprise mais ravie, s’agenouilla pour yī duǒ tā cǎi de xiāngcǎo huā. Húli lavender flower she had picked. The lui offrir une fleur de lavande qu’elle chōngmǎn xìnrèn dì zǒu jìn, jiēshòu fox, trusting, approached and avait cueillie. Le renard, confiant, le zhè gè lǐwù, zài tāmen zhī jiān accepted the gift, creating a magical s’approcha et accepta le cadeau, chuàngzào le yī gè mófǎ de bāng. bond between them. From that day créant un lien magique entre eux. Cóng nà tiān qǐ, Pilar hé jīnsè húli on, Pilar and the golden fox became Depuis ce jour, Pilar et le renard doré chéngwéi le bùkě fēngē de huǒbàn, inseparable companions, exploring devinrent des compagnons yīqǐ tànsuǒ sēnlín de mìmì, the secrets of the forest together and inséparables, explorant ensemble les xiǎngshòu zhǐyǒu dàzìrán nénggòu enjoying the serenity that only nature secrets de la forêt et profitant de la tígōng de níngjìng. could offer. sérénité que seule la nature pouvait offrir. UD1. introducción LMSGI En el corazón del bosque encantado, Pilar En el corazón del bosque encantado, caminaba con cuidado, admirando la belleza de Pilar caminaba con los helechos que cubrían el suelo. cuidado, admirando la belleza de los helechos que cubrían el suelo. De repente, un zorro de pelaje dorado apareció entre los árboles, observándola con curiosidad. De repente, un zorro de pelaje dorado apareció entre los árboles, Pilar, sorprendida pero encantada, se agachó observándola con curiosidad. para ofrecerle una flor de lavanda que había recogido. El zorro, confiado, se acercó y aceptó Pilar, sorprendida pero encantada, se agachó para el regalo, creando un vínculo mágico entre ofrecerle una flor de lavanda que había recogido. El ellos. Desde ese día, Pilar y el zorro dorado se zorro, confiado, se acercó y aceptó el regalo, convirtieron en compañeros inseparables, creando un vínculo mágico entre ellos. Desde ese explorando juntos los secretos del bosque y día, Pilar y el zorro dorado se convirtieron en disfrutando de la serenidad que solo la compañeros inseparables, explorando juntos los naturaleza podía ofrecer. secretos del bosque y disfrutando de la serenidad que solo la naturaleza podía ofrecer. UD1. introducción LMSGI Ejercicio 3: UD1. introducción LMSGI Ejercicio 4: ¿Qué se necesita para hacer una página Web? ¿Cuál sería el algoritmo que definirías?: Definir las instrucciones del algoritmo (*Estamos usando lo aprendido en programación en esta clase de LM) y luego vamos a unirlo con la planificación en diagrama de Gantt. UD1. introducción LMSGI UD1. introducción LMSGI Los lenguajes de marca tienen su origen en 1969 con GML - GML: Generalized Markup Language, utilizado por IBM para la Generalized producción de documentos internos. En 1986 se desarrolla la versión standarizada SGML, utilizada para la creación de SGML: manuales técnicos y documentación de productos. Standard Generalized Cuando llega al público el uso de Internet, surgen dos necesidades: ❑ La primera es visualizar información organizada y amigable en un ámbito global y para ese fin, surgen en 1993 HTML – HyperText Markup Languaje, HTML: XML: como programa de generación de páginas web. HyperText eXtensible ❑ La segunda, pasados los primeros años de abrirse al mundo, empiezan acuerdos y negociaciones entre empresas y/o entidades diferentes que tienen que buscar la manera de “entenderse” y es el lenguaje XML – eXtensible Markup Language, el que ofrece una solución para facilitar ese objetivo. HTML5: XHTML: En el año 2000 XHTML – eXtensible HyperText Markup Language, HyperText eXtensible HyperText aúna ambos objetivos en un único lenguaje.  UD1. introducción LMSGI GML SGML HTML XML XHTML :document :title "Sección 1" Sección 1 Sección 1 :para "párrafo en GML." párrafo en SGML. párrafo en XML. Sección 1 Ejemplo de XHTML párrafo en HTML. Sección 1 párrafo en XHTML. Alta estabilidad, Muy flexible y permite la creación Fácil de aprender y Flexible y adecuado para el Combina la estructura de XML con la portabilidad y de nuevos tipos de documentos. ampliamente soportado intercambio de datos simplicidad de HTML completa por navegadores. documentación. Alta complejidad y Complejo y difícil de Limitado en cuanto a la Intercambio de datos entre Estricto en cuanto a la sintaxis. costos elevados. implementar. semántica y estructura de sistemas empresariales. datos. ** Tabla configurada con detalle preguntado a herramientas IA UD1. introducción LMSGI Todo leguaje de Aunque en la práctica, en un mismo documento pueden combinarse varios marcas está definido en tipos diferentes de lenguajes de marca los lenguajes de marcas, éstos se un documento pueden clasificar como sigue: denominado DTD Presentación: El lenguaje de presentación es aquel que indica el (Document Type Definition). formato del texto. Este tipo de marcado es útil para maquetar la presentación de un documento para su lectura. En él se establecen las Procedimiento: A diferencia de los sistemas de tipo descriptivo, los marcas, los elementos lenguajes de procedimiento ofrecen instrucciones sobre cómo deben utilizados por dicho procesarse sus etiquetas. lenguaje y sus correspondientes Descriptivo/semántico: Se Transmiten el significado (o semántica) de su etiquetas y atributos, su contenido. Por ejemplo, al añadir etiquetas HTML semánticas a tus páginas, sintaxis y normas de proporcionas información adicional a los buscadores sobre la funcionalidad e importancia de las secciones de tus páginas uso. UD1. introducción LMSGI  ¿Qué es XML? Estructura y función de XML XML es el XML (eXtensible Markup Language). Para resolver estos problemas de HTML el W3C establece, en 1998, el estándar internacional XML, un lenguaje de marcas puramente estructural que no incluye ninguna información relativa al diseño. Está convirtiéndose con rapidez en estándar para el intercambio de datos en la Web. A diferencia de HTML las etiquetas indican el significado de los datos en lugar del formato con el que se van a visualizar los datos. XML es un metalenguaje caracterizado por: Permitir definir etiquetas propias. Permitir asignar atributos a las etiquetas. Utilizar un esquema para definir de forma exacta las etiquetas y los atributos. La estructura y el diseño son independientes. UD1. introducción LMSGI UD1. introducción LMSGI  ¿Qué es HTML? Estructura y función de HTML HTML es el lenguaje fundamental para la creación de páginas web, permitiendo la organización y presentación de contenido a través de etiquetas. Cada documento HTML se compone de secciones clave, como `` y ``, donde se definen metadatos y contenido visible, respectivamente. Elementos fundamentales Definición de elementos Uso de atributos Importancia de la semántica UD1. introducción LMSGI UD1. introducción LMSGI Declaración del tipo de documento Función de la declaración La declaración `` es crucial para que los navegadores reconozcan y procesen correctamente un documento HTML5, asegurando que se apliquen las reglas y características de esta versión, lo que impacta directamente en la representación visual y funcionalidad del contenido en la web. UD1. introducción LMSGI La etiqueta y su función Función de contenedor principal La etiqueta `` actúa como el contenedor principal de un documento HTML, asegurando que todos los elementos de la página, incluidos los metadatos y el contenido visible, estén correctamente organizados y estructurados, lo que permite a los navegadores interpretar y renderizar el contenido de manera efectiva. UD1. introducción LMSGI Importancia de la sección `` La sección `` es crucial para la optimización SEO y la experiencia del usuario, ya que permite definir metadatos que influyen en la indexación de la página por parte de los motores de búsqueda, así como establecer enlaces a recursos externos que mejoran la funcionalidad y el diseño del sitio web. Sección y su contenido UD1. introducción LMSGI Función central del contenido La sección `` es el núcleo donde se presenta todo el contenido visual y funcional de una página web, permitiendo la interacción del usuario a través de elementos como texto, imágenes y formularios, y es esencial para la correcta visualización y experiencia del usuario en el navegador. Sección y su importancia UD1. introducción LMSGI Ejercicio 5: Cuál es el código HTML y cuál XML. Justifica tu respuesta. HTML5 vs XHTML  UD1. introducción LMSGI IDIOMA CODIFICAICÓN DE CARACTERES Ejemplo HTML5 Ejemplo XHTML TÍTULO Bienvenido a HTML5 Bienvenido a XHTML CUERPO Párrafo HTML5. Párrafo en XHTML. XHTML: Todas las etiquetas deben ser cerradas correctamente. Por HTML5: Las etiquetas no siempre ejemplo, en lugar de. También requiere el cierre de todas las CIERRE DE ETIQUETAS necesitan ser cerradas explícitamente. etiquetas, incluso las vacías (). MINÚSCULAS - XHTML: Requiere que los nombres de las etiquetas estén en minúsculas. W3Schools HTML Style Guide: Practical Guide to XHTML GUIAS DE ESTILO https://www.w3schools.com/html/ W3Schools XHTML Tutorial: Https://www.w3schools.com/Html/html_xhtml.asp Google HTML/CSS Style Guide El HTML, especialmente en sus versiones más recientes como HTML5, también es adecuado para desarrollar sitios web compatibles con navegadores modernos y antiguos. Sin embargo, hay algunas diferencias clave entre HTML y XHTML que pueden influir en la compatibilidad y el comportamiento en diferentes navegadores. SINTAXIS COMPATIBILIDAD MANEJO ERRORES APLICACIONES REALES XHTML: Requiere una sintaxis XHTML: Debido a su sintaxis XHTML: Los navegadores XHTML: Utilizado en sitios web más estricta y bien formada, estricta, puede ser más tratan los documentos que requieren una mayor similar a XML. Esto incluye el predecible y consistente en su XHTML como XML. Si hay un consistencia y predictibilidad en cierre adecuado de todas las comportamiento a través de error de sintaxis, el su presentación a través de etiquetas, el uso de diferentes navegadores, tanto navegador puede dejar de diferentes navegadores. Ejemplo: minúsculas para los nombres modernos como antiguos. procesar el documento. Sitios web gubernamentales o de las etiquetas y la correcta corporativos que necesitan anidación de los elementos. cumplir con estrictos estándares de accesibilidad y compatibilidad. HTML5: Es más flexible con HTML5: Aunque HTML5 es HTML5: Los navegadores HTML5: Utilizado en la mayoría la sintaxis. Los navegadores ampliamente soportado por los son más tolerantes con los de los sitios web modernos modernos pueden interpretar navegadores modernos, los errores de sintaxis en HTML y debido a su flexibilidad y HTML con errores de sintaxis y navegadores más antiguos tratarán de renderizar el soporte para nuevas corregirlos automáticamente, pueden tener problemas con contenido lo mejor posible. tecnologías como multimedia, lo que puede llevar a algunas de las nuevas gráficos y APIs avanzadas. inconsistencias en características y APIs Ejemplo: YouTube, que utiliza navegadores más antiguos. introducidas en HTML5. HTML5 para la reproducción de videos.  * Tomar como referencia guía, no literal UD1. introducción LMSGI ¿Cuándo Usar HTML5?* 1. Desarrollo Web Moderno: o Aplicaciones: Sitios web y aplicaciones web modernas que requieren características avanzadas como multimedia, gráficos, y APIs. o Ventaja: HTML5 incluye soporte nativo para video y audio, gráficos con , y APIs como Web Storage, WebSockets, y Geolocation. 2. Interactividad y Dinamismo: o Aplicaciones: Aplicaciones web interactivas y dinámicas, como juegos en línea, aplicaciones de chat, y plataformas de redes sociales. o Ventaja: HTML5 proporciona herramientas y APIs que facilitan la creación de experiencias de usuario ricas e interactivas. 3. Compatibilidad con Dispositivos Móviles: o Aplicaciones: Sitios web y aplicaciones que deben ser accesibles desde dispositivos móviles. o Ventaja: HTML5 está diseñado para ser compatible con una amplia gama de dispositivos y tamaños de pantalla, y soporta características como el diseño responsivo. 4. Rendimiento y Eficiencia: o Aplicaciones: Proyectos que requieren un rendimiento optimizado y una carga rápida. o Ventaja: HTML5 está optimizado para un mejor rendimiento y eficiencia, lo que puede mejorar la experiencia del usuario.  UD1. introducción LMSGI. Noticias HTML5 Ejercicio 6: ¿Comprobamos si estas páginas Web están en HTML5?, ¿Cómo lo identificamos? Marca: Un sitio de noticias deportivas que utiliza El Mundo: Otro sitio de noticias que ha adoptado 20 Minutos: Un periódico digital que utiliza HTML5 HTML5 para ofrecer una experiencia moderna y HTML5 para mejorar la interactividad y el para ofrecer contenido multimedia y una responsiva: marca.com rendimiento: elmundo.es navegación fluida: 20minutos.es  UD1. introducción LMSGI. Música HTML5 Ejercicio 7: ¿Comprobamos si estas páginas Web están en HTML5?, ¿Cómo lo identificamos? Spoty: Utiliza HTML5 para ofrecer una experiencia Mariskal Rock: Un sitio de noticias y contenido Rockfm: Una emisora de radio que utiliza HTML5 de usuario moderna y responsiva: spotify.com relacionado con el rock que utiliza HTML5: para su sitio web: rockfm.fm mariskalrock.com  * Tomar como referencia guía, no literal UD1. introducción LMSGI ¿Cuándo Usar XHTML?* 1. Consistencia y Validación Estricta: o Aplicaciones: Sitios web que requieren una validación estricta y una estructura de código consistente, como sitios gubernamentales, educativos o corporativos. o Ventaja: La sintaxis estricta de XHTML asegura que el código sea bien formado y consistente, lo que puede reducir errores y mejorar la mantenibilidad. 2. Compatibilidad con XML: o Aplicaciones: Proyectos que necesitan integrar o intercambiar datos con sistemas basados en XML. o Ventaja: XHTML, al ser una aplicación de XML, facilita la integración con otros sistemas y tecnologías que utilizan XML. 3. Accesibilidad y Estándares: o Aplicaciones: Sitios que deben cumplir con estrictos estándares de accesibilidad y usabilidad. o Ventaja: La estructura bien definida de XHTML puede ayudar a cumplir con estándares como WCAG (Web Content Accessibility Guidelines).  UD1. introducción LMSGI. Noticias XHTML Ejercicio 8: ¿Comprobamos si estas páginas Web están en XHTML?, ¿Cómo lo identificamos? ElPais: Aunque muchos sitios han migrado a HTML5, RTVE: La radiotelevisión española puede tener algunos sitios más antiguos o con secciones secciones que aún utilizan XHTML para asegurar la específicas pueden seguir utilizando XHTML: compatibilidad y consistencia: rtve.es elpais.com  UD1. introducción LMSGI. Noticias XHTML Ejercicio 8: ¿Comprobamos si estas páginas Web están en XHTML?, ¿Cómo lo identificamos? Cadena SER: Aunque muchos sitios han migrado a COPE: Un sitio que puede tener secciones HTML5, algunas secciones de sitios más antiguos utilizando XHTML para asegurar la compatibilidad y pueden seguir utilizando XHTML: cadenaser.com consistencia: cope.es Gracias ☺ Si tienes dudas … ¡busca, intenta y pregunta!