B3-T7 HTML PDF

1. Arquitectura Web 1.1. Introducción En el pasado, aplicaciones web basadas en: html4, css y Javascript html4: lenguaje de marcas/etiquetas css (cascade style sheet): lenguaje utilizado para describir la presentación y el diseño de un documento HTML javascript: un lenguaje...

1. Arquitectura Web 1.1. Introducción En el pasado, aplicaciones web basadas en: html4, css y Javascript html4: lenguaje de marcas/etiquetas css (cascade style sheet): lenguaje utilizado para describir la presentación y el diseño de un documento HTML javascript: un lenguaje de programación interpretado que se utiliza principalmente para crear contenido interactivo en páginas web ○ Nota Vanilla js: término coloquial que se refiere a la versión pura y sin bibliotecas adicionales de JavaScript CGI (Common Gateway Interface):estándar que permite a los servidores web ejecutar programas externos, llamados scripts CGI Entre medias html, css: evoluciona ajax(Asynchronous JavaScript and XML): técnica de desarrollo web que combina JavaScript y XML (o JSON) para crear aplicaciones web interactivas. Permite que las páginas web se actualicen de manera asíncrona, es decir, se pueden enviar y recibir datos del servidor sin tener que recargar la página completa librerías ya preparadas de javascript ○ jquery ○ dojo ○ yui ○ ExtIS ○ Prototype ○ Mootools Norma WAI Aria: para que los discapacitados también puedan interactuar con estas páginas web WCAG: normas de contenido de cómo hacer páginas web El gran salto: html5 APIs nuevas: Drag & Drop, manejar ficheros, geolocalización… ○ Antes con javascript no se podía tocar ficheros de usuario Semántica: etiquetas tienen un significado específico y claro sobre el contenido que encierran (ayuda a personas con discapacidad). Multimedia: Etiqueta nativa. Los navegadores ya llevan un reproductor Editores: Atom, Sublime, VSCode Preprocesadores css : herramientas que permiten escribir código CSS de una manera más avanzada y eficiente. Posteriormente, este código se compila (o transpila) en CSS estándar que puede ser interpretado por los navegadores web. ○ (Less, sass, stylus…): de convertir en CSS tal y como lo conocemos de forma habitual. ○ Nota Existen pre procesadores de html, como PUG, handlebars Herramientas de frontend: Angular, ReactJS, VUE.js, Ember.js, Bootstrap  Nuevos lenguajes que luego generan javascript ( NOTA: Javascript se ha transformado en el estándar (ECMAScript): typeScript CoffeeScript ES6: ECMAScript 6 o ECMAScript 2015 PUG o JADE: Permite escribir un css o html con menos azúcar sintáctica. Gestores de dependencia: Bower, yarn, npm Automatizador de tareas: Gulp: Automatizar tareas comunes de desarrollo web, como la compilación de archivos Sass/LESS a CSS, la minificación de archivos, la optimización de imágenes y la recarga automática del navegador. Grunt: Se configura mediante un archivo Gruntfile donde se especifican las tareas a realizar, como la concatenación de archivos, la minificación, la compilación de preprocesadores CSS, etc. Yeoman: ayuda a iniciar proyectos de manera rápida con una estructura de archivos organizada y configuraciones preestablecidas Ventajas nuevas ○ Forms 2.0 ○ Nuevos elementos , , , entre otros ○ Audio y vídeo sin necesidad de plugins, con etiquetas de códecs ○ Visores: MathML y SVG ○ Canvas: superficie dibujo 2D ○ Geolocalización: navigator.geolocation.getCurrentPosition ○ WebSocket ○ SSE, elementos enviados por el servidor ○ Novedades en API’s y Java Script ○ Nueva API para Drag&Drop para eventos ○ API para trabajar offline ○ API Storage, con almacenamiento persistente en local Nota Puntos que hay que tener muy claros Framework: conjunto de clases que proporcionan una arquitectura base para generar aplicaciones. API: Conjunto de especificaciones formales que tienen que cumplir una serie de librerías La utilidad viene en poder cambiar de librería sin cambiar de código Librería: Conjunto de funciones/clases  1.2. Motores de renderizado Un navegador necesita: html5 y javascript. Blink: es un motor de renderizado desarrollado por Google (Basado en chromium) Chromium, Chrome, Opera, Brave, Vivaldi, Maxthon, Microsoft Edge Webkit motor de renderizado inicialmente desarrollado por Apple: Safari y Epiphany Gecko es un motor de renderizado de código abierto desarrollado por Mozilla 2. Etiquetas y atributos 2.1. Introducción Como empieza una página web: Ojo, esto no es SGML Elementos de la sección de la cabecera title, meta, style, script Marcos: permiten dividir una ventana del navegador en varias secciones, cada una mostrando un documento HTML diferente  2.2. Estructura semántica HTML 5 Header Representa el encabezado de un documento o sección. Puede contener títulos, logotipos, menús de navegación, etc. Nav Define una sección de navegación que contiene enlaces a otras páginas o secciones dentro de la misma página. Main Indica el contenido principal del documento. Section Organizar el contenido en partes lógicas y temáticas Article Contenido independiente y autocontenido, como un artículo de blog o una entrada de noticias Aside Agrupar elementos visuales y sus descripciones, mejorando la comprensión del contenido. Footer Pie del documento o sección figure Agrupar elementos visuales y sus descripciones, mejorando la comprensión del contenido Figcaption Subtítulo o leyenda asociado al elemento  2.3. Referencia de caracteres &lt; < &gt; > &amp; & &quot; “ 2.4. Etiquetas de formato de texto Enlace a otras páginas de internet, archivos o ubicaciones dentro de la misma página, direcciones de correo, o cualquier otra URL. Atributos: href: url del destino o una parte específica de la misma página (#). download: indica la descarga en archivo local en lugar de navegar hacia la url. target: dónde abrir el recurso vinculado: ○ _self: misma pestaña/ventana (por defecto) ○ _blank: nueva pestaña/ventana ○ _parent: en pestaña/ventana padre ○ _top: en pestaña/ventana del mayor ancestro HTML 4:Texto en negrita. HTML 5: fragmento de texto que llama la atención pero sin importancia destacable (fines utilitarios). Si se quiere poner como en negrita usar , aunque también lo pone en negrita HTML 5 Fragmento de texto con voz o tono alternativo al resto o un elemento fuera de la prosa actual Se visualiza en cursiva HTML 4: Texto subrayado HTML 5: Fragmento de texto para nombres propios o escritura incorrecta intencionada Tipo de letra, color y tamaño Salto de línea Indica un punto de posible ruptura de línea dentro de una palabra larga, sin forzar un salto de línea Línea horizontal  Letra de máquina de escribir Texto centrado Indica que su contenido está preformateado y que este formato debe ser preservado. Texto como parpadeo párrafo... Títulos Fragmento de texto importante o palabras clave ( Se visualiza en cursiva). Marca con especial énfasis las partes más importantes de un texto Para indicar la forma de contacto con los autores de un texto Cita o referencia a otras fuentes para representar fragmentos de código o texto que corresponden a una sintaxis de programación o comandos específicos Definición Teclado. Texto que debe introducir el usuario en un programa Salida de información de un programa informático Variable de un programa. Se visualiza en cursiva Fragmento de texto resaltado, simulando estar marcado con rotulador amarillo Fragmento de texto inexacto o que ya no es relevante. (errores o inexactitudes) contenedor genérico para agrupar y aplicar estilo a pequeñas porciones de texto o contenido se usa para representar citas en bloque, es decir, citas largas que generalmente ocupan más de una línea Fragmento de texto con el título de un trabajo creativo: obra, libro, autor, empresa, URL, tweet,...  Define una cita corta Tiene que apuntar a la URL de donde se saca la cita Se usa para indicar contenido que tiene menor importancia, como avisos legales, aclaraciones o notas de derechos de autor. Representar un texto en un tamaño más pequeño que el texto circundante Se usa para resaltar el término que se va a definir. Se utiliza para marcar el término o la frase que se está definiendo dentro de un contenido Abreviatura o acrónimo para aislar una parte del texto que podría estar en una dirección diferente a la del texto que la rodea Fuerza o sobreescribe la direccionalidad del texto Entrada de información del usuario (generalmente, combinación de teclado) Indica una fecha/hora legible para humanos, con formato para máquinas opcional Información equivalente orientado a máquinas/programas Contenedor genérico usado para crear secciones o agrupar contenidos Representa un superíndice. Nota al pie 2 Representa un subíndice. Fórmula química agua: H2O Marca el texto como añadido o insertado, útil para resaltar cambios en un documento. Se visualiza con el texto subrayado  Texto suprimido. Se visualiza con el texto tachado. Inserta una imagen en el documento. Atributos comunes: src (ruta de la imagen), alt (texto alternativo), width, height Inserta otro documento HTML dentro de la página, como un sitio web o contenido externo. ¿¿?? Embebe contenido multimedia, como imágenes, documentos PDF o vídeos Define parámetros para un elemento. Se utiliza para pasar datos como URL o configuraciones. Define un mapa de imágenes, que se utiliza junto con para crear áreas activas en una imagen. Define una región dentro de un mapa de imágenes (), convirtiéndola en un enlace.  2.5. Etiquetas Multimedia Inserta un archivo de audio Atributos comunes: src, controls, autoplay, loop. Inserta un video en el documento Atributos comunes: src, controls (para mostrar controles de reproducción), autoplay, loop, muted Proporciona subtítulos o pistas de texto para los elementos o. Proporciona un área de dibujo en 2D para gráficos o animaciones mediante JavaScript. Gráfico vectorial (xml) - No pierde calidad Especifica múltiples fuentes para los elementos o , permitiendo distintos formatos  2.6. Listas Todos los elementos que pasamos a describir son elementos internos a Representa una lista ordenada (ordered list). Representa una lista no ordenada (unordered list). Define un elemento de una lista, ya sea la lista ordenada o desordenada Lista descriptiva. Especifica un término en una descripción o lista de definiciones. Debe utilizarse dentro de un elemento. Especifica la descripción de un término. 2.7. Etiquetas de tablas Representa una tabla. Leyenda, título de la tabla. Grupo de columnas (column group). Columna/s con un formato concreto. Cabecera de la tabla Columna o celda de cabecera.  Columna o celda Pie de la tabla. Fila 2.8. Etiquetas de formulario Crea un contenedor para un formulario y define el área donde se agrupan los controles de entrada del usuario action: URL donde se enviarán los datos del formulario. method: Método de envío (GET o POST). enctype: Tipo de codificación de los datos enviados, como multipart/form-data para subir archivos. Definición de un elemento de un formulario, como texto, contraseñas, botones, casillas de verificación, etc. Asocia un texto descriptivo a un control de formulario, mejorando la accesibilidad Crea un área de texto de varias líneas. Crea un botón interactivo Crea un menú desplegable.  Define una opción dentro de un. Agrupa visualmente elementos de un formulario, envolviéndolos en un cuadro con una línea alrededor Define un conjunto de valores para otros elementos. Representa el resultado de un cálculo o acción del formulario, normalmente usado con JavaScript. Muestra el progreso de una tarea en curso, como una barra de carga. Representa un valor dentro de un rango conocido, como la temperatura o el nivel de batería.  Representa un control generador de claves y el envío de la clave pública como parte de un formulario. Nota Etiqueta type Tipos: Color, date, datetime, email, month, number, range, search,tel, time, url Nuevos atributos: list, autofocus, autocomplete, min, max, pattern(regex), multiple, placeholder, required 2.9. Elementos interactivos Es un bloque que tiene por defecto un comportamiento desplegable Representa un título o leyenda para elemento details Representa una caja de diálogo. 2.10. Tipos de Almacenamiento  LocalStorage:Permite almacenar datos de forma persistente en el navegador SessionStorage: permite almacenar pares de clave/valor a nivel local y ligados a la ventana que el usuario tiene abierta en ese momento. ○ Una vez cerrada, los datos se perderán. IndexedDB storage: HTML5 permite también almacenar en una base de datos local NoSQL la información que necesitemos utilizando objetos de Javascript. Cache Storage: Permite a las aplicaciones web almacenar recursos (como archivos HTML, CSS y JavaScript) en caché, lo que mejora el rendimiento y permite el acceso offline. Data Atributos: permite almacenar en atributos "data" de nuestras etiquetas HTML pequeños bloques de información. 2.11. HTML 5 Extensibilidad Microdato HTML 5: capacidad de agregar atributos personalizados a los elementos HTML para almacenar información adicional que no está definida por el estándar Se pueden definir a los atributos personalizados como data-* Uso: Se utilizan para almacenar información que se puede acceder y manipular posteriormente mediante JavaScript, facilitando la gestión de datos adicionales sin necesidad de añadir clases o ids que podrían causar conflictos. Dataset API: api de javascript que te permite procesar esa información 2.12. API de DOM (w3c) No lo vamos a ver desde perspectiva B4 3. HTML 5 API MODERNIZR: Librería que ayudan a detectar las características que soportan nuestros navegadores (como flexbox, canvas, geolocation, etc.). Si nuestro navegador no implementa de forma nativa una determinada API ○ Se puede simular unos plug-in llamados Poly Fills. ○ Es un sw que se incrusta en la página. Listado de APIs: Si hay tiempo lo veremos en un repaso 4. DHTML Término que describe una técnica de desarrollo web que combina HTML, CSS y JavaScript para crear páginas web dinámicas y interactivas. Permite la creación de efectos visuales y animaciones, Modificación del contenido de una página sin necesidad de recargarla