Brainscape's Knowledge GenomeTM

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


See full index

Tarjetas MBH > B3-T8_HTML > Flashcards

B3-T8_HTML Flashcards

1
Q

¿Qué es HTML?

A

(HyperText Markup Language) Es un lenguaje de ESTRUCTURA para crear paginas web por medio de etiquetas (tags) y atributos.

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

¿Cuál es el motor de renderizado de Microsoft Edge?

A

Webkit: hasta 2020.
Blink: desde 2020.

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

¿Qué navegadores trabajan con el motor de renderizado (Browser Engine) Blink?

A

Chrome, Opera, M. Edge (desde 2020), Brave y Maxthon.

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

¿Qué navegadores trabajan con el motor de renderizado (Browser Engine) Gecko?

A

Mozilla Firefox y Galeon.

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

¿Qué navegadores trabajan con el motor de renderizado (Browser Engine) Webkit?

A

M. Edge (hasta 2020), Safari y Epiphany.

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

¿Qué es Chromium ?

A

Versión de código abierto de Google Chrome. Ha servido de base para los navegadores: Opera, M. Edge y Chrome.

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

¿Qué es RIA?

A

Rich Internet Aplication o aplicación de internet enriquecida. Son aplicaciones web que tienen la mayoria de las caracteristicas de las aplicaciones de escritorio. Lleva asociado: WAI-ARIA: para ayudar a los discapacitados.

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

¿Qué es CGI?

A

Common Gateway Interface o interfaz de entrada común. Primera tecnología para hacer páginas web y la usaba cualquier lenguaje que cumpliera sus normas.

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

¿Qué es JavaScript Vanilla?

A

Es como se conoce al lenguaje JavaScript cuando se utiliza sin ninguna librería o framework, es decir, JavaScript a pelo.

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

¿Qué son las DEVTOOLS de los web Browsers?

A

Son las herramientas que incorporan los navegadores para desarrollo. Ej: menú de herramientas para el navegador.

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

¿Qué son los Browser Engine o Motores de Renderizado?

A

Componente del software de los navegadores, que transforma el documento HTML en una representación visual e interactiva en el dispositivo del usuario = REDERIZADO.

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

En 1999 se creó HTML 4.1, ¿cómo se conocía?

A

XHTML (XML+HTML)

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

Con HTML 4.1 (XHTML) vino AJAX (JavaScript Asincrono y XML), ¿qué es?

A

Mejora la velocidad e interactividad de la navegación, al evitar la carga completa de la página=>permite que las aplicaciones funcionen de manera asincrona, procesando cualquier solicitud al servidor en segundo plano (sólo se recarga el trozo en el que estemos trabajando).

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

¿Cuál es el objeto principal de AJAX?

A

XMLHttpRequest (XHR)

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

AJAX, es un conjunto de 4 técnicas de desarrollo web, ¿cuáles?

A

1.- XHTML y CSS (para el diseño).
2.- DOM: para manipular los elementos del documento HTML.
3.- XMLHttprequest: es el objeto para la comunicación asíncrona.
4.- XML: formato para el intercambio de datos con el servidor. Aunque también se usan JSON (basado en JS, pero diferente. Es una sintaxis para serializar objetos, arreglos, números, cadenas, booleanos y nulos) y XSLT (lenguaje para transformar un documento XML en: HTML, texto plano u otro XML)

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

Nombra algunas librerías que aparecieron con HTML 4.1 (XHTML)

A

jquery
dojo
yui
ExtJS

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

¿Qué son las etiquetas (tags) en el mundo HTML?

A

Pequeños bloques de código (suelen ir en pareja), que indican al navegador como debe interpretar el contenido recogido entre ambas.
NOTA: no todas se cierran en HTML5. Ej: input o br, que no sigue las reglas XML de abrir y cerrrar.

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

¿Qué es un atributo de HTML?

A

Es un valor que añades a una etiqueta, aportandole una propiedad o comportamiento especifico.
Ej: <div id="Oliver"></div> “div” es la etiqueta e “id” es el atributo.

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

¿Qué es CSS?

A

(Cascading Style Sheets) Lenguaje de DISEÑO para dar estilo o presentación a la pagina: colores, tamaños, fuentes, …

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

¿Qué es JavaScript?

A

Lenguaje de PROGRAMACIÓN para añadir caracteristicas interactivas a la web y permite la interacción dinámica del usuario.

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

¿Qué es la W3C y en que 3 tecnologías divide la web?

A

(WWW Consorcio) Consorcio que define los estandares de la web y divide el lenguaje de la web en:
1.- HTML: contenido y estructura.
2.- CSS: estilo y presentación.
3.- JavaScript: lenguaje para darle dinamismo.

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

¿Qué es XML?

A

(eXtensible Markup Languaje) Es un metalenguaje de etiquetas, que usan otros lenguajes para extenderse. Permite definir y almacenar datos de forma compartible. XML admite el intercambio de información entre sistemas de computación, como sitios web, bases de datos y aplicaciones de terceros.

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

¿Cuáles son los nuevos editores que aparecen con HTML 5?

A

Atom, Sublime y VSCode.

NOTA: los editores son mas rapidos que los IDE, porque tienen menos caracteristicas que estos y sólo trabajan con archivos, en lugar de con proyectos como los IDEs.

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

¿En qué dos partes se divide la programación web?

A

FRONTEND: es la parte de la programación ejecutada en el navegador del usuario.
BACKEND: es la parte del servidor, procesa la información que alimenta los datos del FrontEnd.

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

Los Framework de HTML5 sustituyen las librerias, pero ¿cuáles son?

A
  • Angular (crear y mantener aplicaciones web en una sola página).
  • ReactJS (biblioteca Javascript de código abierto).
  • Vue.js
  • Ember.js
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
26
Q

¿Cuáles son los transpiladores para los nuevos lenguajes introducidos en HTML5?

A
  • BABEL
  • TRACEURT
  • TSC
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
27
Q

¿Qué es un “transpilador” y en que se diferencia de un “compilador”?

A

Transpilador es un tipo especial de compilador que traduce de un lenguaje fuente a otro fuente.
Se diferencia de los compiladores en que estos transforman código fuente en código máquina.

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

¿Cuáles son los nuevos lenguajes introducidos con HTML5?

A
  • Typescript
  • Coffescript
  • ES6
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
29
Q

¿Cuáles son los Preprocesadores CSS3 introducidos con HTML5?

A
  • LESS
  • SASS
  • STYLUS
30
Q

Mejoras de HTML 4.1 (XHTML) respecto a su antecesor HTML 4:

A
  • AJAX (Javascripr Asincrono y XML)
  • Librerias: jquery, dojo, yui, …
31
Q

Mejoras de HTML5 respecto a su antecesor HTML 4.1 (XHTML) :

A
  • Más etiquetas, incluyendo las multimedia (audio y video).
  • Ya no se usan librerias ni pluggins.
  • Nuevos APIs (canvas, geolocalización, …)
  • Preprocesadores CSS3
  • Framework
  • Nuevos lenguajes de programación
  • Editores (Atom, Sublime y VSC).
  • Gestores de Dependencias (Bower de JSON, o Yarn o
    y Npm de JS).
  • Automatizadores de tareas (Gulp y Grunt).
  • Plantillas de proyecto (Yeoman).
32
Q

¿Qué es MVVM?

A

(Modelo Vista Vista Modelo) patrón de arquitectura softaware, que separa la interfaz de usuario de la lógica de la aplicación.

33
Q

Nombra 3 gestores de dependencias (librerias):

A
  • Bower (FrontEnd: JSON -> bower.json)
  • Yum (redhat, fedora o centos).
  • Npm y Yarn (JavaScript)

Ej: npm install jquery
yum add jquery
bower install jquery

34
Q

¿Cuáles son los dos atributos para dar estilo a una etiqueta?

A
  • Class
  • Style (estilo en linea)
35
Q

¿Cómo se inicia toda página HTML5?

A

<!DOCTYPE html>

36
Q

¿Sigue utilizandose los “frames” en HTML5?

A

Sólo el “iframe”.

37
Q

Define la etiqueta <header></header>:

A

Representa un grupo de ayudas introductorias o de navegación: encabezados, links, logos, introducciones,…
Indica el encabezado de un bloque (section, main, article, …).

38
Q

Define la etiqueta <nav></nav>:

A

Contendría los enlaces hacia nuestro documento u otros.

39
Q

Define la etiqueta <section></section>:

A

Define las secciones o clasificaciones de UNA página. A diferencia de ARTICLE, que especifica un contenido concreto e independiente de la página, que, incluso se pueden introducir dentro de las secciones (<section>) y al revés.

40
Q

Define la etiqueta <article></article>:

A

Especifica un contenido independiente y autónomo de la página (si lo llevamos a otra página también tendría sentido), es decir, puede ser tratado por separado y reutilizado. Incluso, se pueden añadir artículos dentro de las secciones y al revés.
A diferencia de la etiqueta <section>, pues esta define secciones de UNA misma página.

41
Q

Define la etiqueta <aside></aside>:

A

Información adicional que quiero poner en la página (widgets).
NOTA: aside = a parte.

42
Q

Define la etiqueta <main></main>:

A

Agrupa la zona principal o principales de la página.

43
Q

Define la etiqueta <footer></footer>:

A

Pie de página con la información que queramos (firmas, información del autor, licencias, …). Puede ir con section, article, main, …

44
Q

Nombra algunas etiquetas estructurales:

A
  • header
  • nav
  • section
  • article
  • aside
  • main
  • footer
45
Q

Define las etiquetas <figure y <figcaption:

A

Para definir información de una imagen, esquema, tabla, video, …

46
Q

Explica la controversia entre las etiquetas <strong y <b, y <em e <i:

A
  • <strong> sustituye a <b> para resaltar un texto que tiene gran importancia o urgencia. Quedando <b> relegado para producir un efecto visual mas pronunciado.</b></b></strong>
  • <em> sustituye a <i> para poner en cursivar un texto que tiene gran importancia o urgencia. Quedando <i> relegado para enfatizar algo o distinguir otro idioma.</i></i></em>
47
Q

¿Para que sirven las etiquetas <u></u> y <s></s>?

A
  • <u> underline = subrayado.</u>
  • <s> para tachar.
    </s>
48
Q

<var></var>

A

Declara una variable.

49
Q

<kbd></kbd>

A

Rpresenta una entrada del usuario: teclado, mouse, …

50
Q

<code></code>

A

Inserta código de computadora.

51
Q

<time>
</time>

A

Defina la hora

52
Q

Diferencias entre <div y <span:

A

Ambas dividen en bloques a los que podremos aplicarles diferentes estilos, pero <span> lo hace EN LINEA.</span>

53
Q

<pre>
</pre>

A

Para conservar el formato, es decir, muestra el texto identico al del archivo (espacios, tabulaciones, …), para mostrar código de computadora.

54
Q

¿Cómo creamos una lista ordenada numéricamente de forma ascendente: 1.CAFÉ 2.TÉ 3.LECHE?

A

<ol>
<li>CAFÉ<li>
<li>TÉ<li>
<li>LECHE<li>
<ol>

NOTA: <ul>sería para lista desordenada</ul>
</ol></li></li></li></li></li></li></ol>

55
Q

¿Para qué sirve la etiqueta <meta></meta> y pon algún ejemplo?

A

Etiqueta de cabecera que sirve para APORTAR INFORMACIÓN del documento.

  1. <meta name = “keywords” => indica las keywords o palabras clave a los que responde un buscador para ofrecerle al usuario páginas HTML como respuesta, donde tales palabras clave son parte de los meta tags.
  2. <meta name = “autor” => informa del autor de la página
  3. <meta charset = “utf-8” => indica que la página esta definida con el conjunto de caracteres utf-8 (caracteres universales, que incluyen la “ñ”).
56
Q

¿Para qué sirve la etiqueta link> y pon algún ejemplo?

A

Especifica la relación entre el documento actual y un RECURSO EXTERNO.

  1. Con <link rel = “alternate => damos una visión alternativa a la pagina (pdf, salida por pantalla de móvil, otro idioma, …)
  2. Con <link rel = “stylesheet” => enlaza tú página HTML con el documento CSS correspondiente y poder obtener un resultado visual.
57
Q

¿Qué utilidades tiene la sintaxis: <link rel = “alternate” …?

A

Con link rel = “alternate”, damos una VISIÓN ALTERNATIVA a la página. Por ejemplo, podemos tener la misma web en pantalla de movil, en inglés o pdf.

  1. PANTALLA DE MOVIL: link rel = “alternate” href = “url” media = “screen and …
  2. EN INGLÉS: <link rel = “alternate” href lang = “en” Href = “url en inglés”
  3. EN PDF: <link rel = “alternate” href = “url/doc.pdf”

NOTA: su función + importante es la de enlazar tú página con el documento CSS, pero en lugar de “alternate” usaríamos “stylesheet”:

<link rel = “stylesheet” = enlaza tú página HTML con el documento CSS

*href: atributo para hacer referencia a otro formato.

58
Q

Expón alguna utilidad de la etiqueta <label>:</label>

A

<lavel for= …
<etiqueta para=…

<label> Enter your telephone number </label>
=> con esta sintaxis indicas que este texto (Enter your …) va en la ID de la caja “phone”, es decir, te saca una ventana con el texto indicado (Enter …) y un recuadro para introducir el teléfono.

NOTA: lo puedes complementar con 2 atributos:
*PATTERN: crearías el patrón con el que introducir el número de tlf.
*PLACEHOLDER: podrías poner un ejemplo de una numeración, que siga dicho patrón, en el recuadro, que se borraría cuando se escriba en el mismo.

59
Q

¿Cómo funciona la etiqueta <input type= “?

A

Es una etiqueta para mostrar formularios (desplegables), donde puedes definir el color, fecha, email, …

<input type= “color” => te muestra un desplegable de gama de colores a seleccionar.

<input type= “datetime” además de la fecha, puedes seleccionar la hora.

<input type= “range” permite que el usuario pueda elegir un valor numérico entre un mínimo y un máximo.

<input type= “search” muestra un campo de texto de una linea para búsquedas.

<input type= “tel” campo para un número telefónico.

<input type= “text” muestra una caja para introducir texto.

url, time, number, month, email, list, …

60
Q

¿A qué se refiere la expresión “Inversión de Control”?

A

Se produce INVERSIÓN DE CONTROL cuando no es el programa (código) el que define la secuencia o flujo de operaciones, sino que se encarga el FRAMEWORK de llamar a nuestro código cuando toca y luego volvemos a tomar el control.
Es lo contrario a trabajar con LIBRERÍAS, pues a estas si la llamamos nosotros.

61
Q

En HTML5 (es extensible) se pueden definir nuevos atributos de 2 maneras: “data -“ y con “shema.org (microdatos)”, explica la primera:

A

Con “data -“ crear atributos personalizados, que podremos usar dentro del documento HTML, a través del API “dataset” en JS.

Por EJEMPLO, si creamos el atributo: categoría (<td meta - categoria =”ArticulosEnOferte”), con el DataSet API podemos acceder ha dicha invención a través del objeto: objetotd.dataset.categoria.

*<td> lo usamos para añadir la nueva categoría a una columna.

62
Q

En HTML5 (es extensible) se pueden definir nuevos atributos de 2 maneras: “data -“ y con “shema.org (microdatos)”, explica la segunda:

A

Podemos definir unos atributos o MICRODATOS dentro de la web estándar: HTTP://shema.org

Crearíamos una sección en la web estandar (shema.org) para un tipo de ENTIDAD (itemtype), en cuyo interior iríamos definiendo las propiedades (itemprop) que queramos.

<section itemscope ITEMTYPE = “http://shema.org/Persona” => la información de la sección hace referencia a datos de la ENTIDAD “Persona”

<p>
<img ITEMPROP = "image" src = "foto.gif" => la foto de la entidad persona.

<span itemprop = "email" Oliver@gmail.com </span> => contiene la propiedad "email" de la persona

<span itemprop = "name" Oliver </span => contiene la propiedad =nombre" de la persona

</p>

<section

NOTA: se crea en la página web estándar: “http://shema.org”, porque al haberlo inventado, para que GOOGLE (navegador) pueda reconocerlo. Es decir, si creo una sección con RECETAS inventadas, si queremos que corra en la web, habría que indicarselo:
http://shema.org/RECETAS

63
Q

Define los atributos de HTML5: id, title, class y style:

A

*id: identificador único, es decir, sólo puede haber un elemento con ese valor de ID en la PÁGINA.

*title: muestra información al pasar el ratón por encima.

*class: para dar estilos (color, fuente, …) a una clase o grupo de etiquetas.

*style: para dar estilos (color, fuente, …) a una etiqueta (inline).

64
Q

¿Qué función tienen los atributos booleanos: translate y contenteditable?

A

*translate: especifica si: SI o NO hay que TRADUCIR la página al localizarla.

*contenteditable: especifica si: SI o NO es EDITABLE un atributo (ej: un párrafo) por el usuario de manera online.

65
Q

¿Qué manejamos con la tecnología “aria” y como se implementa?

A

Atributos para mejorar la ACCESIBILIDAD. Informan sobre los elementos gráficos de la página, para ayudar a un lector o a un interprete de páginas orientadas a personas discapacitadas.

aria - * => se aplicaría a TODOS los atributos.

aria role => se aplica a un ROL concreto.

NOTA: normalmente se implementa por medio de “scripts”.

66
Q

Define algunos métodos para manejar el árbol DOM:

A

createElement(..) => crear elementos nuevos.

getElementByID(…) => conseguir un elemento por su ID.

getElementsByTagName(…) => conseguir elementos por el nombre de la etiqueta.

querySelector(selector) => le das un selector y te da los elementos que coincidan.

67
Q

Define el API del DOM:

A

Cada vez que cargamos una página HTML, en memoria se genera un árbol de objetos llamado “Árbol DOM”, que la representa.

Este árbol tiene una interfaz llamada “NODE”, con sus propiedades y métodos”, para programar documentos HTML/XML con JavaScript.

Además del mencionado NODO principal, hay 4 nodos que heredan de este: ELEMENT (etiquetas), ATTR (atributos), TEXT (contiene el texto de la página) y DOCUMENT (representa a TODO el documento y sólo hay uno).

68
Q

¿Para qué sirve la librería MODERNIZR?

A

Detecta dinámicamente las características que soporta nuestro navegador o si le falta algún API.

Si no la tiene, puedes instalar POLYFILLS, que es un software (pluggins) de JS, que la emularía.

Algunas de esas API´s son:
*WebStorage: SessionStorage y LocalStorage => son BBDD (clave/valor) para guardar información en el navegador, de forma permanente o hasta fin de sesión.

*IndexedDB: para tener una pequeña BD en el “front” a la que acceder por medio de índices.

*FILE: para controlar la subida de archivos.

*WebWorker, WebSocket, Canvas, Selector, …

69
Q

Describe algunas API´s de HTML5:

A

*WebWorker: tareas en 2º plano para no bloquear el hilo principal.

*Server-sent events: tecnología de inserción del servidor que permite a un cliente recibir actualizaciones automáticas de un servidor.

*WebSocket: comunicación punto a punto entre cliente y servidor, que queda abierta tras el HandShake, así el servidor puede enviar información nueva al cliente sin que este la solicitase. Ej: publicidad.

*Drag and Drop: para arrastrar y soltar elementos.

O los métodos para la “extensibilidad”: MICRODATA (permite definir grupos anidados de datos y anunciandolos en “shema.org”) y DATASET (para inventar/modificar valores con “data -”)

70
Q

Cómo se cierran las etiquetas “input” y “br” en XHTML y HTML?

A

XHTML: es obligatorio el cierre => <input xxxx / > y <br xxxx / >

HTML: el cierre es opcional, a diferencia de en XML.

Comprobar foto.

NOTA: <br produce un salto de línea en el texto (retorno de carro)

71
Q

¿Para qué sirve la etiqueta “br” de HTML?

A

El elemento HTML line break <br produce un salto de línea en el texto (retorno de carro).
Es útil para escribir un poema o una dirección, donde la división de las líneas es significante.
No utilices <br para incrementar el espacio entre líneas de texto; para ello utiliza la propiedad margin de CSS o el elemento <p> .

NOTA: En documentos XHTML este elemento se escribe como <
br />.

72
Q

Expón algunos IDE para programar HTML en una Interfaz de Usuario Gráfica (GUI):

A

*Block de notas (Notepad).

*Web Matrix: Microsoft WebMatrix es un creador de sitios web y editor HTML conectado a la nube para Windows, con soporte completo para ASP.NET, PHP, Node.js y HTML5.

*Dream Weaber: Adobe Dreamweaver es una aplicación destinada a la construcción, diseño y edición de sitios y aplicaciones Web (HTML, CSS, JS y PHP).

*VSC

*Atom

*Sublime

*Apache NetBeans

Tarjetas MBH (29 decks)

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