Tema_8_HTML Flashcards
HTML
Di nombres de preprocesadores HTML:
PSHH
- PUG
- SLIM
- HANDLEBARS
- HAML
¿Qué es Webkit?
Motor de renderizado para navegadores.
Principalmente para Safari.
¿Que es un Atributo en HTML?
- Todos los elementos HTML pueden tener Atributos.
- Proporcionan info adicional sobre el elemento
- Siempre se ponen en la etiqueta de apertura.
- La sintaxis es (nombre=”valor”)
¿Qué es el API DATASET?
Se usa para acceder de forma dinámica, por JavaScript, a los atrivutos data- *
Nombra 4 gestores de dependencias:
- BOWER - Gestor de paquetes WEB. Contiene HTML, CSS, JavaScript, fuentes e imágenes.
- YARN (JAVASCRIPT)
- NPM (Para Node,js, Javascript)
- COMPOSER (PHP)
Librería para detectar qué API’s soporta un navegador:
Modernizr.
Es una biblioteca de Javascript, para HTML5 y CSS3.
Diferencia entre LINK ABSOLUTO y LINK RELATIVO.
En el enlace absoluto, hay que poner la URL completa, porque apuntamos a una web externa.
En el enlace relativo, se puede poner la dirección abreviada, porque apuntamos a una web local.
¿Con qué método puedes añadir un nuevo elemento de forma dinámica a un html?
document.createElement()
Elementos del API del DOM básico.
NODO
ELEMENT ATTR TEXT DOCUMENT
https://www.w3schools.com/jsref/dom_obj_document.asp
¿Que es DOM?
Document Object Model
- Es una API para documentos web validos (HTML) y bien construidos (XML).
- Define la estructura lógica de la web y la forma de acceder al documento y manipularlo.
- Todo HTML se representa como un árbol.
- Cada elemento del HTML es un nodo. Las etiquetas, los atributos, el texto dentro de las etiquetas…
¿Qué es CONTENTEDITABLE?
Es un atributo enumerado y global, que indica que el elemento debe ser editado por el usuario.
Enumerado, porque hay que poner “True” o “False”. Si se deja en blanco, el valor de default, es heredado de su padre.
Ejemplo:
//<p contenteditable="true">This is a paragraph. It is editable. Try to change this text.</p>
¿Que es WAI-ARIA?
Web Accessibility Initiative - Accesible Rich Internet Applications
Es una especificación técnica, publicada por el W3C, que intenta incrementar la accesibilidad de las páginas WEB. En particular, contenidos dinámicos, Ajax, HTML, JavaScript, etc..
¿Dí 4 FRAMEWORKS de javascript?
- Angular
- Vue.js
- Ember.js
- Reactjs
¿Que hace QuerySelector?
Utiliza SELECTORES CSS, para hacer una búsqueda. Es muy potente.
Es un método del DOM y se usa dentro de la etiqueta Script.
La sintaxis sería:
document.queryselector(selector);
¿Como se usan los métodos del DOM?
se pone por ejemplo:
document.getElementById(“nombredelelemento”)
Y todo esto dentro de la etiqueta Script
¿Qué es Ajax?
- Apareció en HTML 4.
- Asynchronous JavaScript And XML.
- Usa el objeto: XMLHttpRequest.
- Asíncrono.
- Actualiza partes de una web, sin recargarla toda por completo.
¿Que hace AppendChild?
Agrega un nuevo nodo al final de la lista de un elemento hijo de un elemento padre especificado.
Di 10 API’s de HTML 5..
1- Web Storage, proporciona mecanismos para que el navegador pueda almacenar datos de tipo CLAVE/VALOR. Pueden guardarse mientras no se cierre el navegador, con SessionStorage, o de forma persistente con LocalStorage.
2- IndexedDB, permite almacenamiento y recuperación de datos, en una BBDD local, en el equipo del usuario.
3- Geolocation, permite averiguar la posición del usuario, con su consentimiento.
4- File, permite cargar un documento en el navegador e interactuar con el. NO SE PUEDE HACER CON UN FICHERO LOCAL.
5- Canvas, nos permite dibujar.
6- Worker, permite ejecutar Scripts en segundo plano, sin interrumpir el hilo principal.
7- WebSocket (Bidireccional) / Server Send Events (De servidor a cliente) técnica push.
8- Drag and Drop, permite arrastrar y soltar elementos.
9- Selector (css)
10- Microdata/Dataset, son la parte de extensibilidad de HTML5.
Automatizadores HTML:
GULP
GRUNT
¿Qué es JavaScript Vanilla?
Es JavaScript puro, sin librerías ni nada externo.
Se usaba al principio.
¿Qué es una librería?
Un conjunto de Funciones/Clases
¿Qué es ECMASCRIPT?
Es el estandar de Javascript.
La última versión es la 12.
Editores de HTML
- Atom
- Sublime Text
- Visual Studio Code
- Notepad++
¿Que es una API?
- Conjunto de especificaciones funcionales que tienen que cumplir una serie de librerías.
- La utilidad de un API es poder cambiar de librería, sin cambiar de código.
- Es como un adaptador de interfaces., para software.
Si nuestro navegador no implementa de forma nativa una determinada API, se puede simular con unos plugins llamados….??
Polyfills.
Dí Frameworks de HTML:
- Bootstrap
- Foundation
- Skeleton
- Boilerplate
¿Qué es PLACEHOLDER?
Es una explicación que aparece dentro de la caja y que desaparece al empezar a escribir.
¿Qué es MVVM?
Marca la arquitectura que usan los Frameworks de HTML
Model View ViewModel
Aisla la parte visual, de la parte del modelo.
La vista modelo es la que hace de intermediaria entre Vista y modelo.
¿Como es el inicio de una página de HTML5?
Hay que poner
<!DOCTYPE html>
¿Que es BLINK?
Motor de renderizado desarrollado por Google, a partir de una bifurcación de Webkit. Es usado por Opera, Chrome y Edge, entre otros.
¿Objeto que al usar XHR, va a inicializarse al recibir los datos?
Onreadystatechange
¿En Ajax, donde se almacenan los datos recibidos?
- Responsetext
- Responsexml
Fichero de NPM donde se definen las dependencias.
package.json
¿Qué es node_modules?
Donde se instalan las dependencias que tenemos listadas en package.json
¿Donde está Queryselector?
Dentro de APISelector
Con la accesibilidad en mente, ¿ Qué atributo se coloca en una etiqueta, para describir su contenido y dotarlo de semántica, para un lector de pantalla, por ejemplo?
El atributo ALT.
Por ejemplo, si ponemos una imagen y no se carga por un fallo en la conexión o por que se está usando un lector de pantalla, se lee entonces el atributo alt y nos dice lo que hay.
El atributo alt, sería así:
img src=”foto.jpg” alt=”Esta foto es de una rana”
¿Qué tipos de atributos tenemos en HTML?
“GEROE”
* Atributos Globales - Son los que se pueden usar con todas las etiquetas.
* Atributos de Eventos - Provocan un comportamiento concreto bajo un disparador.
* Atributos Requeridos - Acompañan siempre a ciertas etiquetas, para que estas funcionen correctamente.
* Atributos Opcionales - Modifican la funcionalidad de ciertas etiquetas.
* Atributos Estandar - Soportados por la mayoría de elementos.
Title puede ser Atributo ó Etiqueta??
Si, existe de las dos maneras.
Como etiqueta tiene mucha importancia en el SEO (Search Engine Optimization), por que es lo que se usará para ordenar las webs.
Solo puede haber un Title por html.
Como Atributo, ofrece información adicional, al poner el cursor encima de un elemento.
Dí varias etiquetas de HTML que aparecen en el body:
¿Qué novedades incorpora HTML5?
- API’s
- Nuevas etiquetas de Semántica y Multimedia.
- Editores como Atom, Sublime, VSCode.
- Preprocesadores CSS
- Frameworks, que se ajustan a MVVM.
- Nuevos lenguajes de Scripting. (Que hay que traducir).
- Herramientas de gestión de dependencias, automatización de tareas, plantillas de proyectos.
- Etiquetas (Canvas 2D, 3D, audio y video), con codecs para mostrar contenidos multimedia. Los codecs pueden ser libres como, WebM+VP8 o privados como, H.264/MPEG-4 AVC.
- Etiquetas para Manejar grandes conjuntos de datos: Datagrid, Details, Menu y Command, aunque estas etiquetas no las he visto.
- Mejoras en los formularios.
- Visores con MathML (fórmulas matemáticas) y SVG (Gráficos Vectoriales).
- Drag & Drop.
Frameworks vs Preprocesadores
Los Frameworks, son como plantillas, que tienen como partes ya construidas de HTML, para ahorrarnos trabajo.
Los Preprocesadores le dan capacidades adicionales al HTML, que de forma nativa no tienen.
Los Frameworks, suelen tener interfaz de usuario.
¿Qué era CGI?
- Common Gateway Interface.
- Era una tecnología para generar páginas dinámicas.
- Con cualquier lenguaje que cumpliera una serie de normas.
Diferencia entre Librerías, API’s y Frameworks:
- Librería -> Conjunto de funciones/clases. El flujo de ejecución lo marca tu programa.
- API -> Conjunto de especificaciones funcionales que tienen que cumplir una serie de librerías. Así, se puede cambiar de librería, sin tener que cambiar tu código.
- FRAMEWORK -> Conjunto de clases que proporcionan una arquitectura base para generar aplicaciones. El flujo de ejecución es compartido.
Páginas para consultar las etiquetas de HTML5
https://www.htmlquick.com/es/reference/tags.html
https://html.spec.whatwg.org/multipage/
Cosas sobre las nuevas etiquetas de Semántica:
- header -> Puede aparecer al principio del HTML o también en mitad de otra etiqueta. NO CONFUNDIR CON “HEAD”.
- main -> Etiqueta de contenido principal. Puede haber más de uno, pero solo una visible, el resto “hidden”.
- nav -> Para agrupar los enlaces más importantes.
- section -> Representa una sección del documento.
- article -> Contenedor de bloques de contenido, que se consideran INDEPENDIENTES y pueden ser VISTOS, REUTILIZADOS Y DISTRIBUIDOS POR SEPARADO, por ejemplo en Sindicación.
- aside-> Es información adicional.
- footer -> También puede aparecer en mitad de otra etiqueta. Es un pie.
- figure -> Vale para ilustraciones, textos, etc.
- figcaption ->
Y más…..
Mirar etiquetas de Head
- meta name
- meta charset
- link rel= “alternate”
- link rel = “stylesheet” href=”estilo.css”
- link rel = “prev”
- link rel = “next”
¿Qué son en HTML5, los atributos “data - **”?
- Son atributos personalizados, es decir, que los podemos crear a nuestro antojo.
- Después, podemos buscarlos, con JavaScript, con el método “dataset”.
HTML5 también tiene su parte de extensibilidad. ¿Qué nos encontramos en esta parte?
- Atributos personalizados con “data -**”. Dataset, para buscarlos.
- Podemos definir semántica con “itemtype” e “itemprop”. Genera Microdata.
¿Qué es el “Document” en el DOM?
- Es el nodo que representa a todo el HTML o XML que forma la página.
- Se aplica tanto a HTML como a XML.
Dí 5 métodos de “Document”:
- getElementByID (…)
- getElementByTagName
- getElementByClassName
- querySelector (selector)
- createElement (…)
¿Qué es PUG/JADE?
Permite escribir un HTML, sin la sintaxis de HTML, para después con un comando de PUG/JADE, ya convertirlo a la sintaxis de HTML.
Se conoce también como Motor de plantillas.
