B3-T7 HTML

Etiquetas HTML

• <b>: En HTML 5, fragmento de texto que llama la atención pero sin importancia destacable.
• <strong>: Se utiliza para marcar el término o la frase que se está definiendo dentro de un contenido.
• <abbr>: Abreviatura o acrónimo.
• <aside>: Agrupar elementos visuales y sus descripciones, mejorando la comprensión del contenido.
• <audio>: Inserta un archivo de audio. Atributos comunes: src, controls, autoplay, loop.
• <canvas>: Proporciona un área de dibujo en 2D para gráficos o animaciones mediante JavaScript.
• <cite>: define una cita corta.
• <code>: Representa fragmentos de código o texto que corresponden a una sintaxis de programación o comandos específicos.
• <data>: Define parámetros para un elemento. Se utiliza para pasar datos como URL o configuraciones.
• <dfn>: Se utiliza para marcar el término o la frase que se está definiendo dentro de un contenido.
• <dl>: Lista descriptiva.
• <dt>: Especifica un término en una descripción o lista de definiciones.
• <em>: Fragmento de texto importante o palabras clave (Se visualiza en cursiva). Marca con especial énfasis las partes más importantes de un texto
• <figure>: Agrupar elementos visuales y sus descripciones, mejorando la comprensión del contenido.
• <figcaption>: Subtítulo o leyenda asociado al elemento figure.
• <h1> - <h6>: Títulos.
• <footer>: Pie del documento o sección.
• <form>: Contenedor genérico usado para crear secciones o agrupar contenidos.
• <i>: HTML 4:Texto en negrita. HTML 5: fragmento de texto que llama la atención pero sin importancia destacable. Se utiliza para marcar el término o la frase que se está definiendo dentro de un contenido.
• <input>: Entrada de información del usuario (generalmente, combinación de teclado)
• <kbd>: Entrada de información del usuario (generalmente, combinación de teclado)
• <label>: Marca con especial énfasis las partes más importantes de un texto.
• <li>: Define un elemento de una lista, ya sea la lista ordenada o desordenada.
• <mark>: Fragmento de texto resaltado, simulando estar marcado con rotulador amarillo.
• <main>: Indica el contenido principal del documento.
• <map>: Define un mapa de imágenes, que se utiliza junto con <img> para crear áreas activas en una imagen.
• <menu>: Representa una lista de opciones de menú.
• <meter>: Indica un valor numérico dentro de un rango.
• <blockquote>: se usa para representar citas en bloque, es decir, citas largas que generalmente ocupan más de una línea.
• <nav>: Define una sección de navegación que contiene enlaces a otras páginas o secciones dentro de la misma página.
• <ol>: Representa una lista ordenada (ordered list).
• <option>: Define un término en una lista descriptiva.
• <output>: Salida de información de un programa informático.
• <p>: parrafo
• <pre>: Indica que su contenido está preformateado y que este formato debe ser preservado.
• <sub>: Representa un subíndice.
• <sup>: Representa un superíndice.
• <strong>: Fragmento de texto importante o palabras clave (Se visualiza en cursiva). Marca con especial énfasis las partes más importantes de un texto.
• <samp> Salida de información de un programa informático.
• <script>: Inserta código JavaScript en el documento.
• <section>: Organizar el contenido en partes lógicas y temáticas.
• <small>: Representar un texto en un tamaño más pequeño que el texto circundante.
• <span>: contenedor genérico para agrupar y aplicar estilo a pequeñas porciones de texto o contenido
• <strong>: Fragmento de texto importante o palabras clave (Se visualiza en cursiva). Marca con especial énfasis las partes más importantes de un texto.
• <b> Fragmento de texto importante o palabras clave (Se visualiza en cursiva). Marca con especial énfasis las partes más importantes de un texto.
• <style>: Define estilos CSS para la página web.
• <summary>: Define un resumen plegable de un elemento details.
• <table>: Define una tabla HTML.
• <td>: Define una celda en una tabla.
• <th>: Define una celda de encabezado en una tabla.
• <time>: Indica una fecha/hora legible para humanos, con formato para máquinas opcional
• <title>: Define el título de la página web, mostrado en la barra de título del navegador.
• <tr>: Define una fila en una tabla.
• <ul>: Representa una lista no ordenada (unordered list).
• <var>: Variable de un programa. Se visualiza en cursiva.
• <video>: Inserta un video en el documento. Atributos comunes: src, controls (para mostrar controles de reproducción), autoplay, loop, muted
• <wbr>: Indica un punto de posible ruptura de línea dentro de una palabra larga, sin forzar un salto de línea.

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
• alt: Texto alternativo para imágenes, que se muestra si la imagen no carga.

Elementos HTML 5

• 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.
• details: Define un elemento plegable que se puede expandir o contraer para mostrar su contenido.
• dialog: Define un cuadro de diálogo modal.
• figure: Agrupar elementos visuales y sus descripciones, mejorando la comprensión del contenido.
• figcaption: Subtítulo o leyenda asociado al elemento figure.
• footer: Pie del documento o sección.
• header: Representa el encabezado de un documento o sección. Puede contener títulos, logotipos, menús de navegación, etc.
• main: Indica el contenido principal del documento.
• nav: Define una sección de navegación que contiene enlaces a otras páginas o secciones dentro de la misma página.
• section: Organizar el contenido en partes lógicas y temáticas.

HTML y Javascript

• data-*: 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 ( data-*).

Referencias de caracteres

• <: <
• >: >
• &: &
• ": “

Otros

• 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.
• 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

HTML5 API

• 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.
• MODERNIZR: Librería que ayudan a detectar las características que soportan nuestros navegadores (como flexbox, canvas, geolocation, etc.).
• Poly Fills: Si nuestro navegador no implementa de forma nativa una determinada API, se puede simular unos plug-in llamados Poly Fills.

Nuevas características de HTML5

• Forms 2.0:
• Nuevos elementos: , <dialog>, <details>, <meter>, <progress>``,
  `
• 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: Permite la comunicación bidireccional en tiempo real entre el cliente y el servidor.
• 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: Almacenamiento persistente en local.

Herramientas de desarrollo

• 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.

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 

Herramientas frontend:

• Angular, ReactJS, VUE.js, Ember.js, Bootstrap