Brainscape's Knowledge GenomeTM

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


See full index

DP_TAI COPY 2 > 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
“code” con “pre” tiene la ventaja de que se respetará el formato: espacios, saltos de linea, etc

A

code:

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

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)

47
Q

Etiqueta: Es un bloque que tiene por defecto un comportamiento desplegable

A

details:

<details>

<summary>Más informaciónsummary>

<h2>Nombre del sujetoh2>

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

details>

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>

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

Multiple

<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) form
b) autofocus
c) readonly y disabled
d) maxlength/minlength=
e) required
f) autocomplete=”on”
g) pattern

A

a) form=id (es nuevo de HTML5, para indicar el id del formulario al que pertenece. Util cuando hay formularios anidados, etc)
b) autofocus (solo lo puede tener un control y este obtendra el cursor al cargar la pagina)
c) readonly (el usuario no puede editar) y disabled (el usuario no puede editar y ademas no se envia)
d) maxlength/minlength=nº caracteres
e) required (obligatorio)
f) autocomplete=”on” (en base a valores insertados anteriormente por ej)
g) pattern=expresión regular que debe cumplir

60
Q

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

a) form action=
b) form method=
c) form novalidate
d) form target=

A

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

a) form action=”url”
b) form method=”get/post/dialog”
c) form novalidate (enviar sin validar)
d) form target=”_blank”

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) poster=url
    • b) autoplay
    • c) loop
    • d) muted
    • e) controls
    • f) preload (con valor “auto” y con valor “metadata”
A
  • Atributos interesantes de la etiqueta “video”:
    • a) poster=url (imagen de portada)
    • b) autoplay (comienza a reproducir el video inmediatamente). Podemos empezar en un segundo concreto src=”video.mp4#t=15
    • c) loop (una vez acaba vuelve a reproducirlo)
    • d) muted (sin sonido)
    • e) controls (muestra controles de reproduccion)
    • f) preload (con valor “auto” precarga el video y con valor “metadata” solo ciertas propiedades del video

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

a) chapters
b) captions

NOTA: Ejemplo de formato WebVTT

A

Otros valores para el atributo kind de :

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

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

106
Q

Para qué sirven los siguientes atributos de etiquetas en HTML5

id

class

title

sytle

dir

lang

contexteditable

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

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

107
Q

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

A

Son superlenguajes para html, para facilitar el desarrollo

108
Q

Qué son Gulp y Grunt?

A

Automatizadores de tareas

109
Q

Qué son Parcel, Rollup o Webpack?

A

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

110
Q

Qué elemento del DOM hereda de Document?

A

HTMLDocument

111
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

112
Q

Qué es la etiqueta bdi?

A

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

DP_TAI COPY 2 (56 decks)

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