b3t8 - HTML5 Flashcards
Con qué etiqueta empiezan los archivos html 5?
< ! DOCTYPE html>
Dentro del bloque head, qué etiqueta sirve para añadir palabras clave para la indexación?
meta name=”keywords”
<meta name=”keywords” content=”palabra clave 1, palabra clave 2, palabra clave 3”/>
Qué etiqueta sirve para cargar una hoja de estilos a una página html 5? Qué dos atributos principales tiene?
<link rel=”stylesheet” href=”css/estilos.css” />
Con qué etiqueta se carga una hoja de estilos alternativa?
<link rel=”alternate stylesheet” media=”print” href=”impresion.css”>
Con qué etiqueta se establece el título de la pestaña del navegador? Dentro de qué nodo se coloca?
Título, dentro del nodo head
Qué atributo se usa en la etiqueta para indicar dónde se tiene que abrir el enlace? Qué opciones se usan para abrirlo en una pestaña nueva y en la misma ventana?
Se usa el atributo target
_blank: Abre el enlace en una nueva ventana o pestaña del navegador.
_self: Abre el enlace en la misma ventana o marco donde se encuentra el enlace (valor predeterminado si no se especifica).
_parent: Abre el enlace en el marco principal que contiene la página que contiene el enlace.
_top: Abre el enlace en la ventana completa del navegador, reemplazando cualquier marco existente.
Qué atributo y cómo se usa en la etiqueta para navegar a otra parte del documento?
href”#identificador”
Etiqueta: fragmento de texto enfatizado respecto a la frase que lo contiene
em:
<p>En el examen <em>no se puedeem> copiarp>
Etiqueta: Fragmento de texto importante o palabras clave
Strong:
<p>Texto con una palabra <strong>destacadastrong>p>
Etiqueta: Fragmento de texto resaltado, simulando estar marcado con rotulador amarillo
mark:
<p>A continuacion viene un <mark> texto resaltadomark>p>
Etiqueta: Fragmento de texto con voz o tono alternativo al resto o un elemento fuera de la prosa actual
i:
<p>There is a certain <i lang=”fr”>je ne sais quoii> in the air.p>
Etiqueta: Fragmento de texto que llama la atención pero sin importancia destacable (fines utilitarios)
b:
<p>The <b>frobonitorb> and <b>barbinatorb> components are fried.p>
Etiqueta: Fragmento de texto para nombres propios o escritura incorrecta intencionada
u:
<p>The <u>seau> is full of fish.p>
Etiqueta: Fragmento de texto inexacto o que ya no es relevante. (errores o inexactitudes)
s:
<s>Precio antiguo del producto: $3.99 per bottles>
Etiqueta: contenedor in-line sin significado especial (sirve para aplicar estilo al texto o agrupar elementos en línea)
span
Etiqueta: Fragmento de texto con el título de un trabajo creativo: obra, libro, autor, empresa, URL, tweet,…
cite:
<p>In the words of <cite class=”formato”>Charles Bukowskicite> - …
Etiqueta: Fragmento de texto in-line con una cita corta
Con qué atributo se tiene que apuntar a la URL de donde se saca la cita?
:
<p>El SEO es una disciplina que obsesiona a muchos expertos digitales sin embargo hay que tener en cuenta que <q cite=”https://francescricart.com/a-que-me-dedico-mejoro-webs-y-escribo-en-ellas/”>Es a tu audiencia a quien debes satisfacer y no a google.cite>.p>
Etiqueta: Subíndice y superíndice
sup:
<p>El resultado de 2<sup>10sup> es 1024
sub:
<p>Tenemos que hallar el valor de X<sub>asub> en la ecuacionp>
Etiqueta: Anotaciones menores pequeñas puntualizaciones
small:
<p><small>Information obtained from <a href=”https://example.com/about.html”>example.coma> home page.small>
Etiqueta: Termino definido en el texto circundante
dfn:
<p>El <dfn id=”muro-de-berlin”>muro de Berlindfn> fue parte de la frontera…p>
Etiqueta: Abreviatura o acrónimo
abbr:
<p>
El término <abbr title=”Kilómetro”>Kmabbr> es una unidad de longitud.
p>
Etiqueta: Salto de línea (nueva línea)
<br>
Etiqueta: Entrada de información del usuario (generalmente, combinación de teclado)
kbd:
<p>Pulsa las teclas <kbd>CTRLkbd>+<kbd>Tkbd>…p>
Etiqueta: Salida de información de un programa informático
samp:
<p>Cuando ingresé el comando, la computadora respondió <samp>Error: comando no encontradosamp>. Estoy perdido…p>
Etiqueta: Variable (contexto matemático o informático)
var:
<p>…donde <var>avar> representa la longitud de la hipotenusa, y <var>bvar> y <var>cvar> representan las
longitudes de los otros dos lados.p>
Etiqueta: Indica una fecha/hora legible para humanos, con formato para máquinas opcional
<time datetime=”2001-01-04”>4 de Enerotime>
Etiqueta: Información equivalente orientado a máquinas/programas
data:
<p>Producto: <data value=”21354860684”>TV LED Full HDdata>p>
Etiqueta: Fragmento de código de un lenguaje de programación
code:
con “pre” tiene la ventaja de que se respetará el formato: espacios, saltos de linea, etc
<p>Deberías declarar la función así: <code class=”formato”>function cambiarColor(elemento, evento) { … }code>, donde el
contenido de la función es representado por los puntos suspensivos.p>
Anotaciones Ruby. Se utilizan para añadir anotaciones foneticas para la pronunciación de caracteres de Asia Oriental. Se suelen colocar encima del texto anotado
ruby
rt
rp:
<ruby>
漢 <rt>Kanrt>
字 <rt>jirt>
漢 <rp>(rp>
<rt>Kanrt>
<rp>)rp>
字 <rp>(rp>
<rt>jirt>
<rp>)rp>
ruby>
Etiqueta: para dar un texto descriptivo a una tabla
Caption
Etiqueta: para agrupar visualmente varias celdas, por ejemplo con colores
colgroup, dentro del elemento table, hermano de thead o tbody
<colgroup>
<col span=”3” style=”background-color:#c4f2ff;”>
<col style=”background-color:yellow;”>
colgroup>
Etiqueta: para indicar que es la cabecera de una tabla
<thead>
<tr>
<th scope=”col”>Destinoth>
<th>En autoth>
<th>En trenth>
<th>En bicicletath>
tr>
thead>
Etiqueta: para indicar visualmente el pie de la tabla
<tfoot>
<tr>
<th scope=”row”>Promedioth>
<th>1 h 24 minth>
<th>1 h 22 minth>
<th>6 h 54 minth>
tr>
tfoot>
Etiqueta: para indicar el cuerpo de una tabla
tbody:
<tbody>
<tr>
<th>Nueva Yorkth>
<td>1 h 51 mintd>
<td>1 h 22 mintd>
<td>8 h 53 mintd>
tr>
<tr>
<th>Allentownth>
<td>1 h 11 mintd>
<td>-td>
<td>6 h 9 mintd>
tr>
<tr>
<th>Readingth>
<td>1 h 12 mintd>
<td>-td>
<td>5 h 40 mintd>
tr>
tbody>
Etiqueta: fila de una tabla
tr
<tr>
<th>Nueva Yorkth>
<td>1 h 51 mintd>
<td>1 h 22 mintd>
<td>8 h 53 mintd>
tr>
Etiqueta: celda de una tabla
td:
<tr>
<th>Nueva Yorkth>
<td>1 h 51 mintd>
<td>1 h 22 mintd>
<td>8 h 53 mintd>
tr>
Etiqueta: celda de una tabla pero con un formato resaltado, de cabecera ya esté en cabecera o no
th:
<tr>
<th>Allentownth>
<td>1 h 11 mintd>
<td>-td>
<td>6 h 9 mintd>
tr>
Con qué etiquetas se da información al usuario cuando la tabla es compleja
caption, figcaption si la tabla es un elemento figure
Qué atributos de td sirve para indicar cuántas celdas a la derecha o abajo debe ocupar la celda?
colspan
rowspan
Qué es el elemento header y en qué se diferencia del head
In general, it may be said as a container element which may contain an introductory or a navigational content.
header element has nothing to do with the head element. And, it does not introduce any new section, but it is the head of a section.
Etiqueta: zona con enlaces de navegacion en el ambito de nuestro site
Nav
Etiqueta: representa una agrupación del contenido del que se trata en la pagina
Primera sección de la web
<section>
Primera sección de la web
<article> Artículo 1 article>
<article> Artículo 2 article>
<article> etc article>
section>
Etiqueta: es un contenedor de bloques de contenido que se consideran independientes del sitio web y pueden, por lo tanto, ser vistos, reutilizados y distribuidos por separado, como por ejemplo, en la sindicación.
Primera sección de la web
Artículo 1
Artículo 2
etc
Etiqueta: Representa información tangencialmente/ligeramente relacionada con el contenedor section/main/article/…
aside:
<aside>
<p> Texto 1 del aside p>
<p> Texto 2 del aside p>
<p> etc p>
aside>
Etiqueta:
representa el pie de un documento o contenedor section/main/article/…
footer
<footer class=”formato”>
Todos los derechos reservados © 2020
footer>
- Etiqueta: para ejecutar un script js
- Un atributo para ejecutar el script tan pronto esté disponible pero sin bloquear la carga del documento
- Un atributo para ejecutar el script cuando la página se haya terminado de cargar
scritp:
- async (se ejecutará el script tan pronto como esté disponible pero sin bloquear la carga del documento)
- defer (se ejecutará el script cuando la pagina haya terminado de cargar)
Etiqueta: Es un bloque que tiene por defecto un comportamiento desplegable
Dentro, tiene una etiqueta para el título que se verá antes de desplegar
details:
<details>
<summary>Más informaciónsummary>
<h2>Nombre del sujetoh2>
<img src=”/images/foto.jpg” alt=”Foto del sujeto” />
details>
Etiqueta: para mostrar un mensaje emergente
dialog:
<dialog id=”ms” style=”position: fixed; left: 50%; width: 200px; height: 200px;”>
<p>¡Hola, soy un mensaje!p>
<button id=”close” onclick=”document.getElementById(‘ms’).close()”>Ok!button>
dialog>
Atributo: Permite hacer cambios al usuario, pero afectan únicamente al DOM generado en cliente
contenteditable
<p class=”formato” contenteditable>
Este contenido se puede editar por el usuario directamente en el browser
p>
Atributo: para ocultar un elemento
Similar al comportamiento de display:none, no deja ni el espacio que ocuparía el elemento
hidden
<div id=”info” hidden>
Texto que está oculto
div>
Etiqueta: Nos permite definir una zona de dibujo usada por el usuario o por algun(os) algortimos a traves de javascript+eventos
canvas:
<canvas id=”myCanvas” width=”200” height=”100” style=”border:1px solid #000000;”>
canvas>
Etiqueta: Existe un mecanismo interesante de reutilizacion llamado templates (hay que usar javascript para clonar la plantilla). Ej:
var plantilla = document.getElementById("plantillaCapa");
var clon = plantilla.cloneNode(true);
document.body.appendChild(clon);<template id=”plantillaCapa”>
<div>
<section>
<article>article>
section>
div>
template>
Indica qué tipos de elemento imput
text
date
pass
radio
color
range
Etiqueta: para definir lista de opciones predefinidas para aplicar a distintos elementos
datalist:
<datalist id=”listanivelescafeina”>
<option value=”0” value=”Alerta!”>
<option value=”50” value=”Bajo”>
<option value=”100” value=”Normal”>
datalist>
<p>
Nivel actual de cafeína en sangre: <input type=”range” name=”nivelcafeina” list=”listanivelescafeina”>
<input type=”submit” value=”Enviar datos”>
p>
Atributo para definir un atajo de teclado a un campo
<input id=”campo_correo” type=”email” name=”correo_electronico” accesskey=”C”>
Atributo: podemos forzar que avance de 2 en 2 por ejemplo (sirve para otros tipos de input como range, date, time, month, week, …
step:
<input id=”campo_cantidad” type=”number” name=”cantidad” value=”1” min=”1” max=”10” step=”2”>
Atributo: poder agrupar varias opciones en elementos de selección
optgroup
<select name=”deporte” >
<optgroup label=”De equipo”>
<option value=”1”>Fútboloption>
<option value=”2” selected>Hockeyoption>
optgroup>
<optgroup label=”Individuales”>
<option value=”3”>Tenisoption>
optgroup>
select>
Atributo: forzar al navegador a hacer una revisión de ortografía del contenido del elemento
spellcheck
<p><textarea name=”mensaje” placeholder=”Comparte tu opinión con el autor!” spellcheck=”true”>textarea>
p>
Atributos importantes de los imput
a) Nuevo de HTML5, para indicar el id del formulario al que pertenece. Util cuando hay formularios anidados, etc)
b) recoger el foco al cargar la página. solo lo puede tener un control
c) el usuario no puede editar y el usuario no puede editar y ademas no se envia
d) maxlength/minlength
e) obligatorio
f) autocompletar en base a valores insertados anteriormente
g) debe cumplir la expresión regular que se ponga
a) form
b) autofocus
c) readonly y disabled
d) maxlength/minlength=
e) required
f) autocomplete=”on”
g) pattern
NOTA: otras opciones que se le pueden añadir al submit en HTML5 son:
a) formaction
b) formmethod
c) formnovalidate
d) formtarget
NOTA: otras opciones que se le pueden añadir al submit en HTML5 son:
a) formaction=”url” -> indica la URL donde enviar la información del formulario
b) formmethod=”get/post”
c) formnovalidate -> (enviar sin validar)
d) formtarget=”_blank, _self, _parent, _top”
Etiqueta: Proporciona informacion de contacto de una persona, organizacion, etc
address
<address>
You can contact author at <a href=”http://www.somedomain.com/contact”>www.somedomain.coma>.<br>
If you see any bugs, please <a href=”mailto:webmaster@somedomain.com”>contact webmastera>.<br>
You may also want to visit us:<br>
Mozilla Foundation<br>
1981 Landings Drive<br>
Building K<br>
Mountain View, CA 94043-0801<br>
USA
address>
Etiqueta: Agrupador de bloque sin especial significado
div
Etiqueta: Representa contenido que se cita de otra fuente (etiqueta de bloque)
blockquote
<blockquote cite=”http://es.wikiquote.org/wiki/Fight_Club”>
<p>La primera regla del Club de la Lucha es: Nadie habla sobre el Club de la Lucha.p>
<footer>
<cite class=”author”>Tyler Durdencite> en
<cite class=”title”>El Club de la Luchacite>
footer>
blockquote>
Etiqueta: Texto preformateado: respeta espacios, saltos de linea, etc
pre:
<pre>
Las cosas que necesitarás están listadas aquí:
- Una linterna.
- Una caja de fósforos.
- Un cuchillo afilado.
pre>
Etiqueta: Lista ordenada
- Atributos interesantes:
- a) start=nº (por donde empieza a generar la secuencia)
- b) type -> I (numeros romanos mayusculas), 1 (enteros), a (letras minusculas)
<ol>
<p>Procedimiento para ingresar a la configuración:p>
<li>Encienda la computadora.li>
<li>Presione la tecla … cuando se le indique.li>
<li>Ingrese la contraseñali>
ol>
Etiqueta: Lista de definiciones (un termino y uno o varias descripciones)
<dl>
<dt>Gallinadt>
<dd>Ave doméstica del orden de las galliformes.dd>
<dd>Cobarde, pusilánime.dd>
<dl>
Etiqueta: Ilustraciones con informacion autocontenida: pueden servir para anotar imagenes, videos, tablas, texto, etc
figure:
<figure>
<img src=”/images/logo_html5.png” alt=”Logotipo de HTML5” />
<figcaption>Logotipo oficial del lenguaje de marcas HTML5.figcaption>
figure>
Etiqueta: Contenido principal de la pagina. Solo deber de existir uno (si hay mas de uno, los demas deben estar hidden)
<main>
<p>Contenido principal del documentop>
main>
Atributos etiqueta img para configurar imágenes reponsive en función de la anchura/resolución del dispoistivo
- Nuevo atributo srcset que sirve para configurar imagenes responsive en funcion de la anchura/resolucion del dispositivo en la carga inicial de la pagina
- Aqui src funciona como imagen por defecto si el browser no soporta srcset
<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”/>
Etiqueta: Para que el navegador solicite otra imagen en función del tamaño/resolución y el atributo que sirve para configurar cada una de esas imágenes
Con picture y los distintos sources el navegador puede, dinamicamente, solicitar otra imagen cuando cambie el tamaño de la visualizacion en el dispositivo
<picture>
<source media=”(max-width: 552px)” srcset=”../images/hero-small.jpg”>
<source media=”(max-width: 1062px)” srcset=”../images/hero-medium.jpg”>
<img class=”formato” style=”max-width: 20%;” src=”../images/hero-big.jpg” alt=”Hero”>
picture>
Etiqueta para gráficos vectoriales
Los graficos svg son vectoriales y basados en xml
<svg width=”20%”>
<text x=”10” y=”20” style=”font-size:14px;”>
Your browser support SVG.
text>
Sorry, your browser does not support SVG.
svg>
Atributos allow, srcdoc y sandbox de la etiqueta iframe
Con el atributo “srcdoc” podemos proporcionar codigo html directamente al frame
<iframe srcdoc=”<p>¡Hola! ¡Soy el <strong>texto del iframe</strong>!</p>”>iframe>
Con el atributo “allow” activamos una serie de Directivas de politica sobre distintos origenes
<iframe src=”https://example.com/pagina.html” width=”260” height=”115” allow=”camera ‘none’; microphone ‘https://example.com’; payment *”>iframe>
Si solo aparece el atributo sandbox sin valor se todas las características se deshabilitan por defecto
<iframe src=”https://www.google.es” width=”260” height=”115” sandbox=”allow-scripts allow-forms”>iframe>
Etiqueta: para incrustar contenido de recursos externos de aplicaciones no-html tenemos estas dos etiquetas…
embed
<embed src=”catgame.swf” width=”200” height=”100” />
object
<object type=”application/pdf”
data=”https://www.boe.es/boe/dias/2021/07/01/pdfs/BOE-B-2021-31639.pdf” width=”300” height=”200”>
object>
- Atributos interesantes de la etiqueta “video”:
- a) imagen de portada
- b) comienza a reproducir el video inmediatamente). Podemos empezar en un segundo concreto src=”video.mp4#t=15
- c) una vez acaba vuelve a reproducirlo
- d) sin sonido
- e) muestra controles de reproduccion
- f) con valor “auto” precarga el video y con valor “metadata” solo ciertas propiedades del video
- Atributos interesantes de la etiqueta “video”:
- a) poster=url
- b) autoplay
- c) loop
- d) muted
- e) controls
- f) preload (con valor “auto” y con valor “metadata”
<video src=”video.webm” poster=”presentacion.jpg” controls autoplay muted loop>video>
Otros valores para el atributo kind de la etiqueta track a parte de subtitles:
Otros valores para el atributo kind de subtitles:
a) chapters -> poner titulos a los capitulos
b) captions -> transcripcion del audio (incluir para sordos info no verbal por ej)
etc
<track kind=”subtitles” label=”Subtítulos en español” src=”subs-es.vtt” srclang=”es”>
Etiqueta: audio
La etiqueta de audio ofrece unas prestaciones similares a la de “video”
<audio controls>
<source src=”/assets/audio/Jahzzar_The_Flowers_Are_Still_Standing.ogg” type=”audio/ogg”>
<source src=”/assets/audio/Jahzzar_The_Flowers_Are_Still_Standing.mp3” type=”audio/mpeg”>
<track kind=”captions” label=”Captions” src=”Frankenstein_Chapter_5_EN.vtt” srclang=”en”>
audio>
Etiqueta para definir un mapa de zonas en base a unas coordenadas …
- … y luego usar esa definición de zonas sobre una imagen dada
<map name=”imagen-mapa”>
<area shape=”rect” coords=”34,44,270,350” alt=”Computer” href=”computer.htm”>
<area shape=”rect” coords=”290,172,333,250” alt=”Phone” href=”phone.htm”>
<area shape=”circle” coords=”337,300,44” alt=”Coffee” href=”coffee.htm”>
map>
<img class=”formato” src=”../images/imagen_mapa.jpg” usemap=”#imagen-mapa” alt=”Mapa de imagen de ejemplo”>
Qué librerías de javascript se usan o usaban antes de los frameworks js?
jquery
dojo
prototype
ExtJs
MooTools
Yui
Qué es un preprocesador CSS? Nombra 3. A qué lenguaje traducen su código?
Es una herramienta que permite definir pseudocódigo CSS, que se apoya luego en un compilador para traducir su código a CSS
LESS, SASS, STYLUS
Qué nuevos lenguajes han surgido a partir de javascript?
Typescript
Coffeescript
ES6 (ECMAScript 6)
Cómo se denominan los lenguajes como typescript, coffeescript o EC6 debido a cómo traducen el código a javascript?
Transpiladores
Qué significa MVVM? Nombra 4 frameworks MVVM.
Significa Model-View-View Model
- Angular
- ReactJs
- Ember.js
- Vue.js
Qué herramientas de gestión de dependencias se usan en los framework javascript? Nombra 2
- nmp
- yarn
- bower
Nombra 3 editores actuales de front-end
- Viual Studio Code (VS Code)
- ATOM
- Sublime
Nombra 5 navegadores web y qué motor de renderizado han usado alguna vez
- Chrome (viene de Chromium)
- Edge (ahora de Chromium)
- Firefox:
- Opera (viene de Chromium)
- Safari
- Chrome (viene de Chromium): Webkit → Blink
- Edge (ahora de Chromium): MS → Blink
- Firefox: Gecko → Quantum
- Opera (viene de Chromium): Presto → Blink
- Safari: Webkit
Qué dos técnicas de extensibilidad tiene HTML5? Para qué sirve cada una?
- Atributos personalizados: Se pueden usar atributos con la sintaxis “data-*” que luego se pueden manipular con el API DATASET del javascript:
→ objetotd.dataset.codigo - Microdatos para definir semántica para mejores indexaciones:
Se usa los atributos- itemscope para indicar que el conenedor tiene una semántica
- Itemtype para indicar con una url qué entidad de https//:schema.org se usa en el contenedor
- itemprop para indicar en cada elemento del contenedor qué propiedad de la entidad de https//:schema.org
Los atributos personalizados “data-*”, con qué API de javascript se puede explotar?
Con el API DATASET
objeto.dataset.atributoPersonalizado
por ej. objeto.dataset.data-categoría
En qué consisten los microdatos? Para qué se usa? En qué página están los itemtype y los itemprop que se pueden usar?
Son una forma de extensibilidad de HTML5 para dar más semántica y mejorar la indexación de las páginas HTML5
Las entidades itemtype están en https://schema.org, con sus itemprop
Qué es el árbol dom de hmtl5?
Es un árbol de objetos en memoria del navegador que representa la pantalla html y sus elementos
Qué tipos de elementos tiene el árbol dom y qué representan de una página html? de qué elemento heredan todos estos elementos?
- Document: nodo que engloba todos los demás
- Element: representa una etiqueta
- Attr: representa un atributo de una etiqueta
- Text: representa el contenido de una etiqueta
Todos heredan de Node
Nombra algunos métodos del elemento Document y para qué se usan
- .getElementById(id)
- .querySelector(selector)
- .getElementsByTagName(tagName)
- .getElementsByClassName (className)
- .createElement (…)
Nombra dos atributos y dos métodos del elemento DOM Node
Atributos:
- firstChild
- childNodes
Métodos
- appendChild
- hasAttributes → booleano
Qué librerías nos ayudan a detectar las características que soporta un navegador?
MODERNIZR → Ayuda a detectar las características del navegador
Para qué sirven los plugin Polyfills?
Son unos plugins para simular una determinada API cuando el navegador no la soporta.
A diferencia de las librerías MODERNIZR, que sólo detectan lo que soporta o no soporta el navegador, los PolyFills lo detectan y devuelven automáticamente la el plugin que lo simula
Nombra algunas APIs de html5 y para qué se usan
- WebStorage (sesion storage (se borra al cerrar pestaña) y local storage (no se borra))
- Geolocation
- IndexedDB
- Canvas
- File (controla más aspectos de la subida de un documento)
- WebWorker → crea tareas asíncronas para no bloquear el hilo principal
- WebSocket / Server Side Events (tecnica push)
- Drag and Drop
- Selector
- Microdata / DataSet
Cómo se puede INCRUSTAR en HTML (a secas) una imagen?
En la etiqueta img , en el atributo src en lugar de poner la url, se pone el mimetipe y el contenido en base64
Qué es javascript vanilla?
Es el javascript puro, sin ningún framework ni libería adicional
Es el que se usaba en HTML4
Qué es la antigua tecnología CGI?
Common Gateway Interface - Tecnología web que permitía al navegador obtener datos dinámicos del servidor, independientemente de la tecnología del servidor
La antigua tecnología AJAX, qué concepto introdujo?
Qué nuevo objeto introdujo en el entorno de ejecución del navegador
Recargar parcialmente las páginas html de forma asíncrona, cuando antes eran refrescos completos síncronos
Introduce el objeto XmlHttpRequest
En qué consiste a alto nivel el salto tecnológico que viene de la mano del mundo HTML5?
Mirar en el laboratorio cómo se visualizan las etiquetas html5, aunque en las tarjetas ya tengamos la semántica
Cuáles son las etiquetas HTML5, que son completamente nuevas y que sirven para estructurar SEMÁNTICAMENTE la página, y que no tienen ninguna representación visual?
Header → puede ser una para cada “contenedor” (main, section, article, …)
nav → área con enlaces de navegación
section - article → uno puede anidar a otro y viceversa, agrupación de información. Article está tan completa o auto-contextualizada, que se considera independiente del sitio web y se puede reutilizar y distribuir por separado, sigue teniendo sentido.
main → área con la información principal
aside → información tangencial, relacionado con
footer → puede ser una para cada “contenedor” (main, section, article, …)
En el área Head de html, qué dos tipo de etiquetas se incluyen?
- meta: keywords, author, charset, …
- link: stylesheet (para enlazar la css), alternate (para enlazar otras vistas de tu página como pdf, en otro idioma, para impresión ,…), prev, next, …
En HTML5, la etiqueta label tiene un atributo para indicar qué input describe, cuál es?
El atributo for, donde se pone el id del input que describe
La etiqueta label puede tener dentro además del texto a mostrar en pantalla, el campo imput al que se refiere.
También puede tener el imput fuera, y relacionarlo con el campo for
En HTML5, la etiqueta input de tipo submit tiene un atributo para indicar a qué dirección se enviará el formulario, y que sobreescribe la que haya en el atributo action del formulario?
El atributo formaction
Atributos de etiquetas input
mandar el foco al elemento al cargar la página
indicar a qué dirección se enviará el formulario
indica a qué form en está asociado el elemento
posición del elemento en el orden del foco
obligatorio
autofocus
formaction
form
tabindex
required
Para qué sirven los siguientes atributos de etiquetas en HTML5
id
class
title
sytle
dir
lang
contenteditable
tabindex
draggable
spellcheck
translate
hidden
id → id único
class → clase de estilos definida en la css
title → información al pasar el rat
sytle → estilos inline
dir → dirección/sentido en el que se lee el texto
lang → idioma
contenteditable → editar en arbol DOM y visualmente un campo
tabindex → índice de la navegación secuencial con tabulador
draggable → si es arrastrable
spellcheck → si aplica la corrección ortográfica
translate → si se puede traducir
hidden → oculto
Qué son Pug (antiguo Jade), Mustache o Handlebars?
Son superlenguajes para html, para facilitar el desarrollo
Qué son Gulp y Grunt?
Automatizadores de tareas
Qué son Parcel, Rollup o Webpack?
Sustituyen y mejoran lo que se hacía con Gulp y Grunt para automatizar tareas
Qué elemento del DOM hereda de Document?
HTMLDocument
Cómo se llama el API de HTML5 que sirve para lanzar eventos desde el backend para que los distintos clientes conectados puedan actualizar su información?
Server-Sent Events
Qué es la etiqueta bdi?
El elemento _HTML < bdi> _(o elemento de aislamiento Bi-Direccional)
Qué Codec y formato contenedor de audio son compatible en navegadores con html5
Qué Codec y formato contenedor de video son compatible en navegadores con html5
Codec(Contenedor):
H.264 (MP4), el Ogg Theora(Ogg) y el VP8,VP9 (WebM)
Qué atributos se usan en la etiqueta audio o video para lo siguiente?
Video a reproducir. Obligatoria si actua como etiqueta contenedora.
Muestra una imagen a modo de presentación. (sólo video)
Indica como realizar la precarga del video.
Establece un nombre para un grupo de contenidos multimedia.
Comienza a reproducir el video automáticamente.
Vuelve a iniciar el video cuando finaliza su reproducción (bucle).
Establece el video sin sonido (silenciado).
Muestra los controles de reproducción. Por defecto no se muestran.
Indica el tamaño de ancho del video. Si no se pone, se ajusta al video (sólo video)
Indica el tamaño de alto del video. Si no se pone, se ajusta al video (sólo video)
src
poster
preload -> auto | metadata | none
mediagroup
autoplay
loop
muted
controls
width
heigh
La etiqueta audio o video puede tener otras etiquetas dentro. Cuáles y para qué sirven?
Las etiquetas
source -> atributos src y type. Sirve para poner varias fuentes de audio o video. Si se ponen varias se intentan cargar en orden hasta que pueda cargar una. Si no puede ninguna y se pone un texto o una imagen después del último source, se mostrará ese texto o imagen
< video width=”640” height=”480”>
< source src=”video.mp4” type=”video/mp4” />
< source src=”video.webm” type=”video/webm” />
< source src=”video.ogv” type=”video/ogg” />
< img src=”imagen.png” alt=”Video no soportado” />
Su navegador no soporta contenido multimedia.
< /video>
track -> Establece un archivo de subtítulos o lo añade como alternativa.
La etiqueta track dentro de la etiqueta audio o video, qué atributos puede tener y para qué sirven?
Archivo o ruta del archivo de subtítulos WebVTT
idioma de los subtítulos.
Título que verá el usuario para elegir el canal de subtítulos.
Indica el tipo o género de subtítulos enlazados.
Utiliza este canal de subtítulos por defecto.
src
lang
label
kind -> subtitles | captions , descriptions, chapters | metadata
default
< video controls>
< source src=”video.mp4” />
< source src=”video.webm” />
< track src=”subs-es.vtt” srclang=”es” label=”Español” default />
< track src=”subs-en.vtt” srclang=”en” label=”English” />
< track src=”subs-fr.vtt” srclang=”fr” label=”Français” />
< /video>
< /pre>
Leer eventos típicos js en elementos html5
https://lenguajehtml.com/html/scripting/eventos-html/
Leer eventos típicos js en elementos html5
https://lenguajehtml.com/html/scripting/eventos-html/
Otros tipos de input
number (cajita con flechas arriba y abajo)
otras etiquetas
meter
progress
hr
Barras de progreso ->
meter
progress
hr -> separador visual
Distintos protocolos H.xXX
H.264: También conocido como MPEG-4 Parte 10 o AVC (Advanced Video Coding), es un estándar de compresión de video ampliamente utilizado que permite transmitir video de alta calidad a tasas de bits más bajas.
H.265: También conocido como MPEG-H Parte 2 o HEVC (High Efficiency Video Coding), es un estándar de compresión de video más reciente que proporciona una mayor eficiencia de compresión en comparación con H.264, lo que resulta en una mejor calidad de video a tasas de bits más bajas.
H.323: Es un estándar de comunicaciones multimedia para videoconferencias y comunicaciones en tiempo real sobre redes de paquetes. H.323 define protocolos para la señalización, establecimiento de llamadas, control de flujo y calidad de servicio en aplicaciones de comunicaciones multimedia, incluido el video.
H.239: Es un estándar que permite la transmisión de múltiples flujos de video en conferencias y colaboración en tiempo real. Permite compartir contenido visual, como presentaciones o pizarras electrónicas, en una conferencia junto con la transmisión de video en vivo.
algunos de los valores más comunes para el atributo list-style-type aplicados a una lista no ordenada (<ul>)
Viñeta redonda (por defecto).
Viñeta circular abierta.
Viñeta cuadrada.
Sin viñetas, los elementos se muestran sin marcadores.
Numeración decimal (1, 2, 3, …).
Numeración decimal con ceros principales (01, 02, 03, …).
Numeración romana en minúsculas (i, ii, iii, …).
Numeración romana en mayúsculas (I, II, III, …).
Numeración alfabética en minúsculas (a, b, c, …).
Numeración alfabética en mayúsculas (A, B, C, …).
disc: Viñeta redonda (por defecto).
circle: Viñeta circular abierta.
square: Viñeta cuadrada.
none: Sin viñetas, los elementos se muestran sin marcadores.
decimal: Numeración decimal (1, 2, 3, …).
decimal-leading-zero: Numeración decimal con ceros principales (01, 02, 03, …).
lower-roman: Numeración romana en minúsculas (i, ii, iii, …).
upper-roman: Numeración romana en mayúsculas (I, II, III, …).
lower-alpha: Numeración alfabética en minúsculas (a, b, c, …).
upper-alpha: Numeración alfabética en mayúsculas (A, B, C, …).
