B3T8 HTML Flashcards
Indica tres motores de plantillas para HTML
- Pug (antes llamado Jade)
- Handlebars
- Mustache
¿Qué elementos tiene cada nodo dentro de la API de DOM
[EA,DOTE]
NODE –>
1. ELEMENT
2. ATTR
3. TEXT
4. DOCUMENT –>HTML Document
Indica las APIs de HTML5
- Web Storage
- Indexed DB (bbdd NoSQL)
- File: controla subida de ficheros
- Geolocation
- Canvas: lienzo
- Drag and Drop
- Microdata / DataSet: extensibilidad
- Web Notification
- Selectors: métodos .queryselector y .queryselectorAll
- Web Worker: hilos en segundo plano
- Web Socket / Server Sent Events (SEE): nos ofrecen una conexión bidireccional entre el servidor y el navegador
¿Cual es el motor de renderizado del navegador Edge, Chrome y Opera?
Blink
¿Cual es el motor de renderizado del navegador Firefox?
Gecko -> Quantum
¿Cual es el motor de renderizado del navegador Safari?
Webkit
¿Cual es el motor de JS del navegador Edge, Chrome y Opera?
V8
¿Cual es el motor de JS del navegador Mozilla?
SpiderMonkey
¿Cual es el motor de JS del navegador Safari?
Nitro
¿Para que sirve la etiqueta FIGURE de HTML5?
La <figure>etiqueta especifica contenido autónomo, como ilustraciones, diagramas, fotografías, listados de códigos, etc
Suele ir acompañada de la etiqueta <figcaption> se utiliza para agregar un título al <figure>elemento.</figure></figure>
¿Para que sirve la etiqueta srcset de una img?
Sirve para configurar imágenes responsive en función de la anchura/resolución del dispositivo en la carga inicial de la página
EJ.
< img style=”max-width: 20%;” class=”formato” src=”../images/hero-big.jpg” srcset=”../images/hero-small.jpg 450w, ../images/hero-medium.jpg 960w, ../images/hero-big.jpg 1500w” sizes=”(max-width: 552px) 450px, (max-width: 1062px) 960px, 1500px” alt=”Learnedia Hero”>
¿Qué diferencia principal hay entre la etiqueta srcset de img y la etiqueta source de picture?
Con picture y los distintos sources el navegador puede, dinámicamente, solicitar otra imagen cuando cambie el tamaño de la visualización en el dispositivo. –>source media
También nos puede servir para cargar una imagen en función del formato que entienda el browser –> source type
–> Con srcset sólo coge la imagen que mejor le viene en la carga de la página
EJ. DE ETIQUETA PICTURE
<picture>
<**source media**="(max-width: 552px)" srcset="../images/hero-small.jpg">
<img></img> <!-- Opcion por defecto -->
</picture>
EJ DE ETIQUETA PICTURE DEPENDIENDO DEL FORMATO QUE ENTIENDE EL BROWSER
<picture>
<**source type**="image/svg+xml" srcset="../images/pyramid.svg" width="20%">
<img></img> <!-- Opcion por defecto-->
</picture>
¿Que ocurre si en un iframe si solo aparece el atributo sandbox sin valor asignado?
Se aplican todas las restricciones posibles.
Posibles opciones para configurar:
-allow-forms
-allow-pointer-lock
-allow-top-navigation
-allow-same-origin
-allow-popups
-allow-scripts
¿Para que sirve el atributo allow de un iframe?
<–iframe src=”https://example.com/pagina.html” width=”260” height=”115” allow=”camera ‘none’; microphone ‘https://example.com’; payment *”></iframe>
Comentario
Con el atributo “allow” activamos una serie de Directivas de politica sobre distintos origenes
¿Para que sirve el atributo srcdoc en un iframe?
Con el atributo “srcdoc” podemos proporcionar codigo html directamente al frame.
En caso de que el navegador no soporte el atributo recientemente introducido srcdoc, src actúa como respaldo