Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

DP_TAI COPY 4 > b3t8 - HTML5 > Flashcards

b3t8 - HTML5 Flashcards

1
Q

Con qué etiqueta empiezan los archivos html 5?

A

< ! DOCTYPE html>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

Dentro del bloque head, qué etiqueta sirve para añadir palabras clave para la indexación?

A

meta name=”keywords”

<meta name=”keywords” content=”palabra clave 1, palabra clave 2, palabra clave 3”/>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

Qué etiqueta sirve para cargar una hoja de estilos a una página html 5? Qué dos atributos principales tiene?

A

<link rel=”stylesheet” href=”css/estilos.css” />

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

Con qué etiqueta se carga una hoja de estilos alternativa?

A

<link rel=”alternate stylesheet” media=”print” href=”impresion.css”>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

Con qué etiqueta se establece el título de la pestaña del navegador? Dentro de qué nodo se coloca?

A

Título, dentro del nodo head

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

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?

A

Se usa el atributo target

  • _blank: para abrir en pestaña nueva
  • _self: en la propia pestaña
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

Qué atributo y cómo se usa en la etiqueta para navegar a otra parte del documento?

A

href”#identificador”

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

Etiqueta: fragmento de texto enfatizado respecto a la frase que lo contiene

A

em:

<p>En el examen <em>no se puedeem> copiarp>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

Etiqueta: Fragmento de texto importante o palabras clave

A

Strong:

<p>Texto con una palabra <strong>destacadastrong>p>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

Etiqueta: Fragmento de texto resaltado, simulando estar marcado con rotulador amarillo

A

mark:

<p>A continuacion viene un <mark> texto resaltadomark>p>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

Etiqueta: Fragmento de texto con voz o tono alternativo al resto o un elemento fuera de la prosa actual

A

i:

<p>There is a certain <i lang=”fr”>je ne sais quoii> in the air.p>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

Etiqueta: Fragmento de texto que llama la atención pero sin importancia destacable (fines utilitarios)

A

b:

<p>The <b>frobonitorb> and <b>barbinatorb> components are fried.p>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

Etiqueta: Fragmento de texto para nombres propios o escritura incorrecta intencionada

A

u:

<p>The <u>seau> is full of fish.p>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

Etiqueta: Fragmento de texto inexacto o que ya no es relevante. (errores o inexactitudes)

A

s:

<s>Precio antiguo del producto: $3.99 per bottles>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

Etiqueta: contenedor in-line sin significado especial (sirve para aplicar estilo al texto o agrupar elementos en línea)

A

span

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

Etiqueta: Fragmento de texto con el título de un trabajo creativo: obra, libro, autor, empresa, URL, tweet,…

A

cite:

<p>In the words of <cite class=”formato”>Charles Bukowskicite> - …

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

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?

A

:

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

Etiqueta: Subíndice y superíndice

A

sup:

<p>El resultado de 2<sup>10sup> es 1024

sub:

<p>Tenemos que hallar el valor de X<sub>asub> en la ecuacionp>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

Etiqueta: Anotaciones menores pequeñas puntualizaciones

A

small:

<p><small>Information obtained from <a href=”https://example.com/about.html”>example.coma> home page.small>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

Etiqueta: Termino definido en el texto circundante

A

dfn:

<p>El <dfn id=”muro-de-berlin”>muro de Berlindfn> fue parte de la frontera…p>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

Etiqueta: Abreviatura o acrónimo

A

abbr:

<p>

El término <abbr title=”Kilómetro”>Kmabbr> es una unidad de longitud.

p>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

Etiqueta: Salto de línea (nueva línea)

A

<br>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
23
Q

Etiqueta: Entrada de información del usuario (generalmente, combinación de teclado)

A

kbd:

<p>Pulsa las teclas <kbd>CTRLkbd>+<kbd>Tkbd>…p>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
24
Q

Etiqueta: Salida de información de un programa informático

A

samp:

<p>Cuando ingresé el comando, la computadora respondió <samp>Error: comando no encontradosamp>. Estoy perdido…p>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
25
Q

Etiqueta: Variable (contexto matemático o informático)

A

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>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
26
Q

Etiqueta: Indica una fecha/hora legible para humanos, con formato para máquinas opcional

A

<time datetime=”2001-01-04”>4 de Enerotime>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
27
Q

Etiqueta: Información equivalente orientado a máquinas/programas

A

data:

<p>Producto: <data value=”21354860684”>TV LED Full HDdata>p>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
28
Q

Etiqueta: Fragmento de código de un lenguaje de programación

A

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>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
29
Q

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

A

ruby
rt
rp:

<ruby>

漢 <rt>Kanrt>

字 <rt>jirt>

漢 <rp>(rp>

<rt>Kanrt>

<rp>)rp>

字 <rp>(rp>

<rt>jirt>

<rp>)rp>

ruby>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
30
Q

Etiqueta: para dar un texto descriptivo a una tabla

A

Caption

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
31
Q

Etiqueta: para agrupar visualmente varias celdas, por ejemplo con colores

A

colgroup, dentro del elemento table, hermano de thead o tbody

<colgroup>

<col span=”3” style=”background-color:#c4f2ff;”>

<col style=”background-color:yellow;”>

colgroup>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
32
Q

Etiqueta: para indicar que es la cabecera de una tabla

A

<thead>

<tr>

<th scope=”col”>Destinoth>

<th>En autoth>

<th>En trenth>

<th>En bicicletath>

tr>

thead>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
33
Q

Etiqueta: para indicar visualmente el pie de la tabla

A

<tfoot>

<tr>

<th scope=”row”>Promedioth>

<th>1 h 24 minth>

<th>1 h 22 minth>

<th>6 h 54 minth>

tr>

tfoot>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
34
Q

Etiqueta: para indicar el cuerpo de una tabla

A

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>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
35
Q

Etiqueta: fila de una tabla

A

tr

<tr>

<th>Nueva Yorkth>

<td>1 h 51 mintd>

<td>1 h 22 mintd>

<td>8 h 53 mintd>

tr>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
36
Q

Etiqueta: celda de una tabla

A

td:

<tr>

<th>Nueva Yorkth>

<td>1 h 51 mintd>

<td>1 h 22 mintd>

<td>8 h 53 mintd>

tr>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
37
Q

Etiqueta: celda de una tabla pero con un formato resaltado, de cabecera ya esté en cabecera o no

A

th:
<tr>

<th>Allentownth>

<td>1 h 11 mintd>

<td>-td>

<td>6 h 9 mintd>

tr>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
38
Q

Con qué etiquetas se da información al usuario cuando la tabla es compleja

A

caption, figcaption si la tabla es un elemento figure

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
39
Q

Qué atributos de td sirve para indicar cuántas celdas a la derecha o abajo debe ocupar la celda?

A

colspan
rowspan

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
40
Q

Qué es el elemento header y en qué se diferencia del head

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
41
Q

Etiqueta: zona con enlaces de navegacion en el ambito de nuestro site

A

Nav

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
42
Q

Etiqueta: representa una agrupación del contenido del que se trata en la pagina

A

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>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
43
Q

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.

A

Primera sección de la web
Artículo 1
Artículo 2
etc

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
44
Q

Etiqueta: Representa información tangencialmente/ligeramente relacionada con el contenedor section/main/article/…

A

aside:

<aside>

<p> Texto 1 del aside p>

<p> Texto 2 del aside p>

<p> etc p>

aside>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
45
Q

Etiqueta:
representa el pie de un documento o contenedor section/main/article/…

A

footer

<footer class=”formato”>

Todos los derechos reservados © 2020

footer>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
46
Q
  • 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
A

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)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
47
Q

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

A

details:

<details>

<summary>Más informaciónsummary>

<h2>Nombre del sujetoh2>

<img src=”/images/foto.jpg” alt=”Foto del sujeto” />

details>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
48
Q

Etiqueta: para mostrar un mensaje emergente

A

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>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
49
Q

Atributo: Permite hacer cambios al usuario, pero afectan únicamente al DOM generado en cliente

A

contenteditable

<p class=”formato” contenteditable>

Este contenido se puede editar por el usuario directamente en el browser

p>

50
Q

Atributo: para ocultar un elemento
Similar al comportamiento de display:none, no deja ni el espacio que ocuparía el elemento

A

hidden

<div id=”info” hidden>

Texto que está oculto

div>

51
Q

Etiqueta: Nos permite definir una zona de dibujo usada por el usuario o por algun(os) algortimos a traves de javascript+eventos

A

canvas:

<canvas id=”myCanvas” width=”200” height=”100” style=”border:1px solid #000000;”>

canvas>

52
Q 
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);
A

<template id=”plantillaCapa”>

<div>

<section>

<article>article>

section>

div>

template>

53
Q

Indica qué tipos de elemento imput

A

text

date

pass

radio

color

range

54
Q

Etiqueta: para definir lista de opciones predefinidas para aplicar a distintos elementos

A

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>

55
Q

Atributo para definir un atajo de teclado a un campo

A

<input id=”campo_correo” type=”email” name=”correo_electronico” accesskey=”C”>

56
Q

Atributo: podemos forzar que avance de 2 en 2 por ejemplo (sirve para otros tipos de input como range, date, time, month, week, …

A

step:

<input id=”campo_cantidad” type=”number” name=”cantidad” value=”1” min=”1” max=”10” step=”2”>

57
Q

Atributo: poder agrupar varias opciones en elementos de selección

A

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>

58
Q

Atributo: forzar al navegador a hacer una revisión de ortografía del contenido del elemento

A

spellcheck

<p><textarea name=”mensaje” placeholder=”Comparte tu opinión con el autor!” spellcheck=”true”>textarea>

p>

59
Q

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

a) form
b) autofocus
c) readonly y disabled
d) maxlength/minlength=
e) required
f) autocomplete=”on”
g) pattern

60
Q

NOTA: otras opciones que se le pueden añadir al submit en HTML5 son:

a) formaction
b) formmethod
c) formnovalidate
d) formtarget

A

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”

61
Q

Etiqueta: Proporciona informacion de contacto de una persona, organizacion, etc

A

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>

62
Q

Etiqueta: Agrupador de bloque sin especial significado

A

div

63
Q

Etiqueta: Representa contenido que se cita de otra fuente (etiqueta de bloque)

A

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>

64
Q

Etiqueta: Texto preformateado: respeta espacios, saltos de linea, etc

A

pre:

<pre>

Las cosas que necesitarás están listadas aquí:

  • Una linterna.
  • Una caja de fósforos.
  • Un cuchillo afilado.

pre>

65
Q

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)
A

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

66
Q

Etiqueta: Lista de definiciones (un termino y uno o varias descripciones)

A

<dl>

<dt>Gallinadt>

<dd>Ave doméstica del orden de las galliformes.dd>

<dd>Cobarde, pusilánime.dd>

<dl>

67
Q

Etiqueta: Ilustraciones con informacion autocontenida: pueden servir para anotar imagenes, videos, tablas, texto, etc

A

figure:

<figure>

<img src=”/images/logo_html5.png” alt=”Logotipo de HTML5” />

<figcaption>Logotipo oficial del lenguaje de marcas HTML5.figcaption>

figure>

68
Q

Etiqueta: Contenido principal de la pagina. Solo deber de existir uno (si hay mas de uno, los demas deben estar hidden)

A

<main>

<p>Contenido principal del documentop>

main>

69
Q

Atributos etiqueta img para configurar imágenes reponsive en función de la anchura/resolución del dispoistivo

A
  • 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”/>

70
Q

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

A

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>

71
Q

Etiqueta para gráficos vectoriales

A

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>

72
Q

Atributos allow, srcdoc y sandbox de la etiqueta iframe

A

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>

73
Q

Etiqueta: para incrustar contenido de recursos externos de aplicaciones no-html tenemos estas dos etiquetas…

A

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>

74
Q
  • 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
A
  • 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>

75
Q

Otros valores para el atributo kind de la etiqueta track a parte de subtitles:

A

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”>

76
Q

Etiqueta: audio

A

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>

77
Q

Etiqueta para definir un mapa de zonas en base a unas coordenadas …

  • … y luego usar esa definición de zonas sobre una imagen dada
A

<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”>

78
Q

Qué librerías de javascript se usan o usaban antes de los frameworks js?

A

jquery

dojo

prototype

ExtJs

MooTools

Yui

79
Q

Qué es un preprocesador CSS? Nombra 3. A qué lenguaje traducen su código?

A

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

80
Q

Qué nuevos lenguajes han surgido a partir de javascript?

A

Typescript

Coffeescript

ES6 (ECMAScript 6)

81
Q

Cómo se denominan los lenguajes como typescript, coffeescript o EC6 debido a cómo traducen el código a javascript?

A

Transpiladores

82
Q

Qué significa MVVM? Nombra 4 frameworks MVVM.

A

Significa Model-View-View Model

  • Angular
  • ReactJs
  • Ember.js
  • Vue.js
83
Q

Qué herramientas de gestión de dependencias se usan en los framework javascript? Nombra 2

A
  • nmp
  • yarn
  • bower
84
Q

Nombra 3 editores actuales de front-end

A
  • Viual Studio Code (VS Code)
  • ATOM
  • Sublime
85
Q

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
A
  • Chrome (viene de Chromium): Webkit → Blink
  • Edge (ahora de Chromium): MS → Blink
  • Firefox: Gecko → Quantum
  • Opera (viene de Chromium): Presto → Blink
  • Safari: Webkit
86
Q

Qué dos técnicas de extensibilidad tiene HTML5? Para qué sirve cada una?

A
  • 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
87
Q

Los atributos personalizados “data-*”, con qué API de javascript se puede explotar?

A

Con el API DATASET

objeto.dataset.atributoPersonalizado

por ej. objeto.dataset.data-categoría

88
Q

En qué consisten los microdatos? Para qué se usa? En qué página están los itemtype y los itemprop que se pueden usar?

A

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

89
Q

Qué es el árbol dom de hmtl5?

A

Es un árbol de objetos en memoria del navegador que representa la pantalla html y sus elementos

90
Q

Qué tipos de elementos tiene el árbol dom y qué representan de una página html? de qué elemento heredan todos estos elementos?

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

91
Q

Nombra algunos métodos del elemento Document y para qué se usan

A
  • .getElementById(id)
  • .querySelector(selector)
  • .getElementsByTagName(tagName)
  • .getElementsByClassName (className)
  • .createElement (…)
92
Q

Nombra dos atributos y dos métodos del elemento DOM Node

A

Atributos:

  • firstChild
  • childNodes

Métodos

  • appendChild
  • hasAttributes → booleano
93
Q

Qué librerías nos ayudan a detectar las características que soporta un navegador?

A

MODERNIZR → Ayuda a detectar las características del navegador

94
Q

Para qué sirven los plugin Polyfills?

A

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

95
Q

Nombra algunas APIs de html5 y para qué se usan

A
  • 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
96
Q

Cómo se puede INCRUSTAR en HTML (a secas) una imagen?

A

En la etiqueta img , en el atributo src en lugar de poner la url, se pone el mimetipe y el contenido en base64

97
Q

Qué es javascript vanilla?

A

Es el javascript puro, sin ningún framework ni libería adicional

Es el que se usaba en HTML4

98
Q

Qué es la antigua tecnología CGI?

A

Common Gateway Interface - Tecnología web que permitía al navegador obtener datos dinámicos del servidor, independientemente de la tecnología del servidor

99
Q

La antigua tecnología AJAX, qué concepto introdujo?

Qué nuevo objeto introdujo en el entorno de ejecución del navegador

A

Recargar parcialmente las páginas html de forma asíncrona, cuando antes eran refrescos completos síncronos

Introduce el objeto XmlHttpRequest

100
Q

En qué consiste a alto nivel el salto tecnológico que viene de la mano del mundo HTML5?

A
101
Q

Mirar en el laboratorio cómo se visualizan las etiquetas html5, aunque en las tarjetas ya tengamos la semántica

A
102
Q

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?

A

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, …)

103
Q

En el área Head de html, qué dos tipo de etiquetas se incluyen?

A
  • 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, …
104
Q

En HTML5, la etiqueta label tiene un atributo para indicar qué input describe, cuál es?

A

El atributo for, donde se pone el id del input que describe

105
Q

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

A
106
Q

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?

A

El atributo formaction

107
Q

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

A

autofocus
formaction
form
tabindex
required

108
Q

Para qué sirven los siguientes atributos de etiquetas en HTML5

id

class

title

sytle

dir

lang

contenteditable

tabindex

draggable

spellcheck

translate

hidden

A

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

109
Q

Qué son Pug (antiguo Jade), Mustache o Handlebars?

A

Son superlenguajes para html, para facilitar el desarrollo

110
Q

Qué son Gulp y Grunt?

A

Automatizadores de tareas

111
Q

Qué son Parcel, Rollup o Webpack?

A

Sustituyen y mejoran lo que se hacía con Gulp y Grunt para automatizar tareas

112
Q

Qué elemento del DOM hereda de Document?

A

HTMLDocument

113
Q

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?

A

Server-Sent Events

114
Q

Qué es la etiqueta bdi?

A

El elemento _HTML < bdi> _(o elemento de aislamiento Bi-Direccional)

115
Q

Qué Codec y formato contenedor de audio son compatible en navegadores con html5

A
116
Q

Qué Codec y formato contenedor de video son compatible en navegadores con html5

A

Codec(Contenedor):

H.264 (MP4), el Ogg Theora(Ogg) y el VP8,VP9 (WebM)

117
Q

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)

A

src
poster
preload -> auto | metadata | none
mediagroup
autoplay
loop
muted
controls
width
heigh

118
Q

La etiqueta audio o video puede tener otras etiquetas dentro. Cuáles y para qué sirven?

A

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.

119
Q

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.

A

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>

120
Q

Leer eventos típicos js en elementos html5

A

https://lenguajehtml.com/html/scripting/eventos-html/

121
Q

Leer eventos típicos js en elementos html5

A

https://lenguajehtml.com/html/scripting/eventos-html/

122
Q

Otros tipos de input
number (cajita con flechas arriba y abajo)

otras etiquetas
meter
progress
hr

A

Barras de progreso ->
meter
progress

hr -> separador visual

DP_TAI COPY 4 (60 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions