BLOQUE III - T8 APP WEB (HTML5) Flashcards by Raquel P

Características de HTML4

CSS más avanzado
Vanilla JavaScript
Tecnología AJAX (XHR): enviar y recibir datos del servidor sin recargar la página.
Librerías JS (ej. jQuery): colecciones de funciones que simplifican el uso de JavaScript.
Manejo del DOM directo: modificación manual de los elementos HTML desde JavaScript.

How well did you know this?

Not at all

Perfectly

¿En qué mejora HTML5?

Semántica y api’s
CSS3 con RWD (Responsive Web Design)
Preporocesadores CSS (LESS, SASS, STYLUS…)
**Frameworks JS (MVMV)

How well did you know this?

Not at all

Perfectly

¿Para que sirven los Frameworks JS (MVMV)?

Para estructurar aplicaciones web, separando
- la lógica de negocio (Modelo)
- la presentación (Vista)
- la interacción (ViewModel o Controlador)

facilitando el desarrollo, mantenimiento y escalabilidad.

How well did you know this?

Not at all

Perfectly

Ejemplos de Frameworks JS (MVMV)

Angular (Google)
React (Facebook)
Vue
Ember

How well did you know this?

Not at all

Perfectly

¿Qué es la transpilación? ¿Qué tipos hay?

Es el proceso de convertir código fuente de un lenguaje de programación a otro, manteniendo la misma funcionalidad.

Ejemplos:
- TypeScript
- CoffeeScript
- ES6 / ECMAScript 2015

How well did you know this?

Not at all

Perfectly

¿Por qué 3 elementos fundamentales está formado un navegador web?

Intérprete o motor de renderizado
Un intérprete de JS (JavaScript)
Funcionalidades predefindas

How well did you know this?

Not at all

Perfectly

¿Qué es un motor de renderizado? Da ejemplos:

Es un software que interpreta y dibuja el contenido de una página web (HTML, CSS, JavaScript) en la pantalla del usuario.

Chrome, Edge y Ópera: Blink
Firefox: Gecko
Safari: Webkit

How well did you know this?

Not at all

Perfectly

¿Cómo se renderiza una página WEB en el modo de compatibilidad para que no se producan errores con HTML?

Con la instrucción: <!DOCTYPE html>

How well did you know this?

Not at all

Perfectly

¿Quién se encargaba en el pasado de la estandarización de HTML?

W3C aunque quedó obsoleto por su lentitud

How well did you know this?

Not at all

Perfectly

¿Quién se encarga en el actualidad de la estandarización de HTML?

WHATWG: Web Hypertext Application Technology Working Group

How well did you know this?

Not at all

Perfectly

¿Cómo se define HTML (HyperText Markup Language)?

Es un lenguaje de marcado o de etiquetas que permite incluir o hacer referencia a todo tipo de información.

How well did you know this?

Not at all

Perfectly

¿Cómo se accede al código HTML de una página web?

Con la combinación de teclas CTRL + U.
Botón derecho inspeccionar.
CTRL + SHIFT + I y accediendo a la pestaña Elements

How well did you know this?

Not at all

Perfectly

¿Cómo es la estructura de una etiqueta de HTML?

<etiqueta>**contenido**</etiqueta>

How well did you know this?

Not at all

Perfectly

¿Qué es la semántica de HTML?

La semántica en HTML5 se refiere a usar etiquetas que describan el significado del contenido, separando la estructura (HTML) de la presentación (CSS), para mejorar la comprensión y accesibilidad de la página.

How well did you know this?

Not at all

Perfectly

Estructura de una etiqueta en HTML

[< etiqueta atributo = “valor” > contenido </etiqueta>]

Ejemplo:
[< p class=”texto-rojo” > Hola Mundo< / p >]

Etiqueta: < p >
Atributo: class
Valor: “texto-rojo”
Contenido: Hola Mundo

How well did you know this?

Not at all

Perfectly

¿Qué es una etiqueta?

Etiqueta: Es el contenedor de todo, como < p >

¿Qué es un atributo?

Atributo: información adicional sobre la etiqueta, como class

¿Qué es un valor?

Valor: Especifica el valor del atributo, como “texto-rojo”.

¿Qué es el contenido?

Contenido: Es lo que aparece dentro de la etiqueta, como el texto mostrado en la página, como Hola Mundo.

¿Qué 3 tipos de atributos existen en HTML?

Existen 3 tipos de atributos dependiendo de sus valores:

Conjunto de valores: sólo se permiten unos valores concretos. Cualquier otro valor diferente, no será válido.
Valores libres: Son los atributos en los que puedes especificar un valor libremente, como una dirección URL o un texto.
Valores booleanos: Son los atributos que deben tener un valor verdadero (true) o un valor falso (false).

En HTML5 un atributo sin valor (solo el atributo) significa verdadero y

Atributos IMPORTANTES

id: identificador de elemento (tiene que ser único)
class: clases de estilo definidas en las CSS (interna y externa)
title: información al pasar el ratón por encima
translate àyes/no (indica si la información debe ser traducida)
style àespecificar estilos aplicados directamente a la etiqueta (inline)
dir definir la dirección del texto (para idiomas que se leen de derecha a izquierda por ej)
lang definir el idioma de la página/elemento
tabindex define el orden del foco usando el tabulador

Etiquetas de HTML4 importantes.

< figure > ilustraciones con información autocontenida.
Pueden servir para anotar imagenes, vídeos, tablas,
texto, etc.
< figcaption> Define un pie de foto o descripción para un < figure>
< b> texto en negrita
< i> texto en cursiva
< strong> resaltar (ej negrita)
< mark> resaltar (ej subrayado)
< time> contenido de fecha y hora con formato
< details> y < summary> zona colapsable de información
< dialog> cuadros de dialogo
< search> indicar zona de busqueda
< progress> progreso de un proceso
< meter> representa una medida
< output> la salida de un proceso/calculo
< embed> incrustar recursos externos

Etiquetas de HTML5 importantes.

< div> agrupación de tipo bloque/caja/capa “genérico”
< span> agrupación en línea “genérico”
< table> < th> < tr> < td> < tfoot> < thead> < tbody>
< p> Párrafo
< pre> conserva formato
< blockquote> citas
< ul> y < ol> listas.
< li> elementos
< dl> lista.
< dt> términos.
< dd> descripciones
< a> enlace a recursos (html, pdf, …)
< img> imágenes
< iframe> incrustar contenido navegable de web externa
< object> incrustar recursos externos
< h1> < h2> < h3> < h4> < h5> < h6> Encabezados tipo < form> < input>
< code> trozos de código fuente (ej. Java)
< kbd> representa una combinación de teclado
< var> variable de un trozo de un programa
< hr> Línea horizontal de separación de párrafos por ej
< br> Salto de línea

< form>: Define un formulario en HTML, que se usa para recoger datos del usuario.

< input>: Es un campo dentro del formulario donde el usuario puede introducir datos. Se usa para diferentes tipos de entradas, como texto, botones, contraseñas, etc.

Etiquetas semánticas ¿Qué són? Da ejemplos:

Son aquellas que definen claramente el propósito de un bloque de contenido dentro de una página, lo que mejora la accesibilidad y la comprensión

< article> es un contenedor de bloques de contenido independientes del sitio web. Pueden ser vistos, reutilizados y distribuidos por separado. Está permitido anidar artículos dentro de secciones y al revés.
< section> representa una agrupación del contenido del que se trata en la página.
< aside> representa información tangencial, ligeramente relacionada con el contenedor.
< footer> representa el pie de un documento o contenedor.
< header> representa el encabezado de un documento o contenedor.
< main> contenido principal del documento (*).
< nav> zona con enlaces de navegación en el ámbito de nuestro site.

Etiquetas **multimedia**

**< audio>** **< video src="video.webm" poster="presentacion.jpg" controls autoplay muted loop>** **< svg>**: etiqueta para gráficos vectoriales en XML **< 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>** **< track>** **< canvas>** lienzo para dibujar a través de una API.

Atributos interesantes de la etiqueta **MULTIMEDIA** de **"video"**:

* **poster="url"**: imagen de portada * **autoplay**: comienza inmediatamente, se puede especificar un segundo con `src="video.mp4#t=15"` * **loop**: reproduce nuevamente cuando termina * **muted**: sin sonido * **controls**: muestra los controles de reproducción * **preload="auto"**: precarga el video, **"metadata"** carga solo propiedades

¿Qué es la **extensibilidad** en HTML?

A la capacidad de **ampliar el lenguaje** para adaptarlo a nuevas necesidades, sin modificar su estructura básica. Podemos: * definir atributos * definir semántica en base a "unos tipos"

La **extensibilidad** en HTML. *DEFINIR ATRIBUTOS PERSONALIZADOS*

**data-xxx** *< data-categoria="articuloenoferta">*

¿Para qué sirve la API **dataset**?

Sirve para **poder leer** los atributos personalizados por **JavaScript** *< data-categoria="articuloenoferta">* pasará a ser *objecthold.dataset.categoria*

La **extensibilidad** en HTML. ¿Cuáles son las **3 etiqetas** para *DEFINIR SEMÁNTICA EN BASE A UNOS "TIPOS"*?

* item**scop** = indica que empieza un objeto con datos estructurados. * item**type** = especifica el tipo de objeto, usando una URL de schema.org → < section itemscope itemtype=”http://schema.org/Person”> (Person es la categoría) * item**prop**= Especifica qué propiedad del objeto se está describiendo (nombre, precio, autor, etc.). < section itemscope itemtype="https://schema.org/Book"> < h1 itemprop=**"name"**>El Principito< /h1> < p itemprop=**"author"**>Antoine de Saint-Exupéry< /p>< /section>

¿Para qué sirven las **etiquetas de *CABECERA*** < meta >?

* < meta name=**"keywords"** content="...">: palabras clave para buscadores (hoy en día casi no se usa). * < meta name=**"author"** content="...">: autor del documento. * < meta name=**"title"** content="...">: título del contenido (poco común, se usa más ). * < meta name=**"description"** content="...">: resumen del contenido, lo que muestra Google. * < meta name=**"viewport"** content="width=device-width, initial-scale=1">: **diseño responsive** (adaptado a móviles). * < meta **charset**="utf-8" >: **codificación de caracteres** (para que se vean bien tildes, ñ, etc.). </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":32,"qSoundUrl":null,"resources":{"deckId":18565038,"packId":22779092,"cardId":587567855},"returnTo":"/packs/22779092/subscribe"}' id='card-587567855'> <div class='header'> 32 </div> <div class='card-face question'> <div class='question-content'> ¿Para qué sirven las **etiquetas de *CABECERA*** < link >? </div> </div> <div class='card-face answer'> <div class='answer-content'> * < link rel=**"alternate"** **href=**"..." media=**"print"**>: versión para imprimir. * < link rel=**"alternate"** **hreflang=**"en" href="...">: versión en otro idioma (ej. inglés). * < link rel=**"stylesheet"** href=**"doc.css"**>: enlaza un archivo CSS externo. * < link rel=**"prev"** href="...">: página anterior (navegación por partes). * * < link rel=**"next"** href="...">: página siguiente. </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":33,"qSoundUrl":null,"resources":{"deckId":18565038,"packId":22779092,"cardId":587568637},"returnTo":"/packs/22779092/subscribe"}' id='card-587568637'> <div class='header'> 33 </div> <div class='card-face question'> <div class='question-content'> ¿Para qué sirven las **etiquetas de *CABECERA*** < style >? </div> </div> <div class='card-face answer'> <div class='answer-content'> < style> ... < /style>: **CSS interno**, solo para esa página. </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":34,"qSoundUrl":null,"resources":{"deckId":18565038,"packId":22779092,"cardId":587571089},"returnTo":"/packs/22779092/subscribe"}' id='card-587571089'> <div class='header'> 34 </div> <div class='card-face question'> <div class='question-content'> ¿Qué son las **Etiquetas de formularios** en HTML? </div> </div> <div class='card-face answer'> <div class='answer-content'> Permiten crear **formularios interactivos** para que el usuario introduzca datos: * **< form>:** contenedor del formulario. * **< input>:** campo de entrada (texto, fecha, etc.). * **< label>:** etiqueta asociada a un campo (mejora accesibilidad). * **< select>:** lista desplegable. * **< button>:** botón (enviar, resetear, etc.). * **< textarea>:** campo de texto largo (multi-línea). * **< datalist>:** lista de sugerencias para un **< input>**. </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":35,"qSoundUrl":null,"resources":{"deckId":18565038,"packId":22779092,"cardId":587571790},"returnTo":"/packs/22779092/subscribe"}' id='card-587571790'> <div class='header'> 35 </div> <div class='card-face question'> <div class='question-content'> Datos de tipo **< input** en formularios: </div> </div> <div class='card-face answer'> <div class='answer-content'> **Semántica**: < input type="..."> color, date, datetime, time, email, month, number, range, search, tel, url... </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":36,"qSoundUrl":null,"resources":{"deckId":18565038,"packId":22779092,"cardId":587572356},"returnTo":"/packs/22779092/subscribe"}' id='card-587572356'> <div class='header'> 36 </div> <div class='card-face question'> <div class='question-content'> Nuevos atributos para las **etiquetas** de formularios: </div> </div> <div class='card-face answer'> <div class='answer-content'> * **list:** asocia un <datalist> para sugerencias. * **autofocus:** enfoca automáticamente al cargar la página. * **autocomplete:** activa o desactiva sugerencias del navegador. * **min / max:** valores mínimo y máximo para number, date, etc. * **pattern:** expresión regular para validar el formato del texto. * **multiple:** permite seleccionar varios elementos (ej. múltiples archivos o correos). * **placeholder:** texto guía dentro del campo. * **required:** campo obligatorio. </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":37,"qSoundUrl":null,"resources":{"deckId":18565038,"packId":22779092,"cardId":587572818},"returnTo":"/packs/22779092/subscribe"}' id='card-587572818'> <div class='header'> 37 </div> <div class='card-face question'> <div class='question-content'> ¿Qué son las **APis**? </div> </div> <div class='card-face answer'> <div class='answer-content'> Una API **(Application Programming Interface)** es una interfaz que permite que dos programas se comuniquen entre sí. </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":38,"qSoundUrl":null,"resources":{"deckId":18565038,"packId":22779092,"cardId":587573143},"returnTo":"/packs/22779092/subscribe"}' id='card-587573143'> <div class='header'> 38 </div> <div class='card-face question'> <div class='question-content'> ¿Qué nuevas **APis** existen? </div> </div> <div class='card-face answer'> <div class='answer-content'> * **WebSockets**: Comunicación bidireccional entre la aplicación y el servidor. * **Server-Sent Events**: Muy parecido al modelo de WebSockets pero solo para envio de mensajes desde el servidor al cliente (PUSH). * **Canvas**: Esta API proporciona un rectángulo en nuestra web en el que podemos usando JavaScript. Proporciona animación e interactividad. * **Indexed DB**: Permite el almacenamiento y recuperación de información en una base de datos local que reside en el equipo del usuario. Base de datos NoSQL. * **Web Storage**: Similar a Indexed DB. Session Storage y Local Storage. * **File**: control para la subida de ficheros. * **Web Workers**: Permite ejecutar scripts en background, sin interrupciones del usuario. * **Drag and Drop**: Permite que el usuario pueda arrastrar y soltar elementos. Por ejemplo, una imagen en la página web. * **Geolocation**: Obtiene la posición del usuario si da su consentimiento. Objeto geolocation, propiedad del objeto navigator. * **Selector**: CSS. Métodos .querySelector y .querySelectorAll. * **Microdata / Data Set**: extensibilidad. </div> </div> </div> </div> </div> </div> <div class='flashcards-sidebar'> <div class='sidebar-header'> <div class='react-component' id='flashcards-search-bar'> <div class='placeholder market-search-bar' id='flashcards-search-bar-placeholder'></div> </div> </div> <div class='sidebar-content'> <p class='deck-subject-heading'> <a class="decks-in-subject-link" href="/packs/tai-raquel-22779092"><span class="pack-name">TAI Raquel</span> (7 decks) </a></p> <ul class='deck-list-items'> <a class='deck-link ' href='/flashcards/bloque-iv-t7-modelo-tcp-ip-osi-18485408/packs/22779092'> <li class='deck-list-item'>BLOQUE IV - T7 MODELO TCP/IP OSI</li> </a> <a class='deck-link selected' href='/flashcards/bloque-iii-t8-app-web-html5-18565038/packs/22779092'> <li class='deck-list-item'>BLOQUE III - T8 APP WEB (HTML5)</li> </a> <a class='deck-link ' href='/flashcards/bloque-iii-t8-app-web-css-18623223/packs/22779092'> <li class='deck-list-item'>BLOQUE III - T8 APP WEB (CSS)</li> </a> <a class='deck-link ' href='/flashcards/bloque-iv-linux-18665883/packs/22779092'> <li class='deck-list-item'>BLOQUE IV - LINUX</li> </a> <a class='deck-link ' href='/flashcards/bloque-ii-linux-comandos-18705249/packs/22779092'> <li class='deck-list-item'>BLOQUE II - LINUX COMANDOS</li> </a> <a class='deck-link ' href='/flashcards/bloque-iv-t8-http-18718734/packs/22779092'> <li class='deck-list-item'>BLOQUE IV - T8 HTTP</li> </a> </ul> </div> </div> </div> <div id='tooltip-controller'></div> <div data='{"packId":22779092,"source":"spaced-repetition-modal","subject":"TAI Raquel","resources":{"deckId":18565038,"packId":22779092},"returnTo":"/packs/22779092/subscribe"}' id='spaced-repetition-modal-controller'></div> <div id='banner-controller'></div> <div id='dialog-modal-controller'></div> <div class='band band-footer'> <div class='footer-main'> <ul class='sections'> <li class='section key-links'> <p class='section-heading'> Key Links </p> <ul class='options-list'> <li class='option'> <a id="footer-pricing-link" class="option-link" href="/pricing?paywall=upgrade">Pricing</a> </li> <li class='option'> <a class="option-link" href="/companies">Corporate Training</a> </li> <li class='option'> <a class="option-link" href="/teachers">Teachers & Schools</a> </li> <li class='option'> <a class="option-link" target="_blank" rel="nofollow noopener noreferrer" href="https://itunes.apple.com/us/app/brainscape-smart-flashcards/id442415567?mt=8">iOS App</a> </li> <li class='option'> <a class="option-link" target="_blank" rel="nofollow noopener noreferrer" href="https://play.google.com/store/apps/details?id=com.brainscape.mobile.portal">Android App</a> </li> <li class='option'> <a class="option-link" target="_blank" rel="noopener" href="https://www.brainscape.com/faq">Help Center</a> </li> </ul> </li> <li class='section subjects'> <p class='section-heading'> Subjects </p> <ul class='options-list'> <li class='option'> <a class="option-link" href="/subjects/medical-nursing">Medical & Nursing</a> </li> <li class='option'> <a class="option-link" href="/subjects/law">Law Education</a> </li> <li class='option'> <a class="option-link" href="/subjects/foreign-languages">Foreign Languages</a> </li> <li class='option'> <a class="option-link" href="/subjects-directory/a">All Subjects A-Z</a> </li> <li class='option certified-classes'> <a class="option-link" href="/learn">All Certified Classes</a> </li> </ul> </li> <li class='section company'> <p class='section-heading'> Company </p> <ul class='options-list'> <li class='option'> <a class="option-link" href="/about">About Us</a> </li> <li class='option'> <a target="_blank" class="option-link" rel="nofollow noopener noreferrer" href="https://brainscape.zendesk.com/hc/en-us/articles/115002370011-Can-I-earn-money-from-my-flashcards-">Earn Money!</a> </li> <li class='option'> <a target="_blank" class="option-link" href="https://www.brainscape.com/academy">Academy</a> </li> <li class='option'> <a target="_blank" class="option-link" href="https://brainscapeshop.myspreadshop.com/all">Swag Shop</a> </li> <li class='option'> <a target="_blank" rel="nofollow noopener" class="option-link" href="/contact">Contact</a> </li> <li class='option'> <a target="_blank" rel="nofollow noopener" class="option-link" href="/terms">Terms</a> </li> <li class='option'> <a target="_blank" class="option-link" href="https://www.brainscape.com/academy/brainscape-podcasts/">Podcasts</a> </li> <li class='option'> <a target="_blank" class="option-link" href="/careers">Careers</a> </li> </ul> </li> <li class='section find-us'> <p class='section-heading'> Find Us </p> <ul class='social-media-list'> <li class='option twitter-badge group'> <a rel="nofollow noopener noreferrer" target="_blank" class="option-link" href="https://twitter.com/Brainscape"><img data-src="/pks/images/shared/twitterx-af917e8b474ed7c95a19.svg" alt="twitter badge" class="lazy-load" src="/pks/images/shared/placeholder-2f8e0834f3c4456dc1cc.jpg" width="24" height="24" /></a> </li> <li class='option linkedin-badge group'> <a rel="nofollow noopener noreferrer" target="_blank" class="option-link" href="https://www.linkedin.com/company/brainscape/"><img data-src="/pks/images/shared/linkedin-2f15819658f768056cef.svg" alt="linkedin badge" class="lazy-load" src="/pks/images/shared/placeholder-2f8e0834f3c4456dc1cc.jpg" width="24" height="24" /></a> </li> <li class='option facebook-badge group'> <a rel="nofollow noopener noreferrer" target="_blank" class="option-link" href="https://www.facebook.com/Brainscape"><img data-src="/pks/images/shared/facebook-1598a44227eabc411188.svg" alt="facebook badge" class="lazy-load" src="/pks/images/shared/placeholder-2f8e0834f3c4456dc1cc.jpg" width="24" height="24" /></a> </li> <li class='option youtube-badge group'> <a rel="nofollow noopener noreferrer" target="_blank" class="option-link" href="https://www.youtube.com/c/BrainscapeNY"><img data-src="/pks/images/shared/youtube-7f2994b2dc1891582524.svg" alt="youtube badge" class="lazy-load" src="/pks/images/shared/placeholder-2f8e0834f3c4456dc1cc.jpg" width="24" height="24" /></a> </li> <li class='option pinterest-badge group'> <a rel="nofollow noopener noreferrer" target="_blank" class="option-link" href="https://www.pinterest.com/brainscape/"><img data-src="/pks/images/shared/pinterest-04f51aa292161075437b.svg" alt="pinterest badge" class="lazy-load" src="/pks/images/shared/placeholder-2f8e0834f3c4456dc1cc.jpg" width="24" height="24" /></a> </li> <li class='option tiktok-badge group'> <a rel="nofollow noopener noreferrer" target="_blank" class="option-link" href="https://www.tiktok.com/@brainscapeu"><img data-src="/pks/images/shared/tiktok-644cf4608bd73fbbb24f.svg" alt="tiktok badge" class="lazy-load" src="/pks/images/shared/placeholder-2f8e0834f3c4456dc1cc.jpg" width="24" height="24" /></a> </li> <li class='option insta-badge group'> <a rel="nofollow noopener noreferrer" target="_blank" class="option-link" href="https://www.instagram.com/brainscape/"><img data-src="/pks/images/shared/insta-210cc2d059ae807961d2.svg" alt="insta badge" class="lazy-load" src="/pks/images/shared/placeholder-2f8e0834f3c4456dc1cc.jpg" width="24" height="24" /></a> </li> </ul> <div class='get-the-app'> <div class='qr-code'> <img data-src="https://www.brainscape.com/assets/cms/public-views/shared/shortio-from-homepage.png" alt="QR code" class="lazy-load" src="/pks/images/shared/placeholder-2f8e0834f3c4456dc1cc.jpg" width="130" height="130" /> </div> <div class='app-badges'> <div class='badge apple-badge'> <a rel="nofollow noopener noreferrer" target="_blank" class="option-link" href="https://apps.apple.com/us/app/brainscape-smart-flashcards/id442415567"><img data-src="/pks/images/shared/apple-badge-b6e4f380fb879821d601.svg" alt="apple badge" class="lazy-load" src="/pks/images/shared/placeholder-2f8e0834f3c4456dc1cc.jpg" width="124" height="50" /></a> </div> <div class='badge android-badge'> <a rel="nofollow noopener noreferrer" target="_blank" class="option-link" href="https://play.google.com/store/apps/details?id=com.brainscape.mobile.portal&utm_source=global_co&utm_medium=prtnr&utm_content=Mar2515&utm_campaign=PartBadge&pcampaignid=MKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1"><img data-src="/pks/images/shared/android-badge-a2251833dc7f6ca8879c.svg" alt="android badge" class="lazy-load" src="/pks/images/shared/placeholder-2f8e0834f3c4456dc1cc.jpg" width="124" height="50" /></a> </div> </div> </div> </li> </ul> </div> <div class='footer-blurb'> Brainscape helps you reach your goals faster, through stronger study habits. <br> © 2025 Bold Learning Solutions. <a class="option-link" href="/terms">Terms and Conditions</a> </div> </div> <script> if (typeof window.__REACT_DEVTOOLS_GLOBAL_HOOK__ === 'object') { __REACT_DEVTOOLS_GLOBAL_HOOK__.inject = function() {}; } </script> <script> window.addEventListener('load', () => { setTimeout(() => { const script = document.createElement('script'); script.src = "/pks/js/public-flashcards-page-9140413b5150ce9700f9.js"; script.defer = true; document.body.appendChild(script); }, 0); }); </script> <script src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js" defer="defer"></script> <script> document.addEventListener("mainSharedready", () => { GaHelper.setGaDimension("dimension1","No"); }); </script> <script type='application/ld+json'> {"@context":"https://schema.org/","@type":"Quiz","about":{"@type":"Thing","name":"BLOQUE III - T8 APP WEB (HTML5)"},"hasPart":[{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"Características de HTML4","acceptedAnswer":{"@type":"Answer","text":"- CSS más avanzado - Vanilla JavaScript - Tecnología AJAX (XHR): enviar y recibir datos del servidor sin recargar la página. - Librerías JS (ej. jQuery): colecciones de funciones que simplifican el uso de JavaScript. - Manejo del DOM directo: modificación manual de los elementos HTML desde JavaScript."}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"¿En qué mejora HTML5?","acceptedAnswer":{"@type":"Answer","text":"- Semántica y api’s - CSS3 con RWD (Responsive Web Design) - Preporocesadores CSS (LESS, SASS, STYLUS…) - Frameworks JS (MVMV)"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"¿Para que sirven los Frameworks JS (MVMV)?","acceptedAnswer":{"@type":"Answer","text":"Para estructurar aplicaciones web, separando - la lógica de negocio (Modelo) - la presentación (Vista) - la interacción (ViewModel o Controlador) facilitando el desarrollo, mantenimiento y escalabilidad."}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"Ejemplos de Frameworks JS (MVMV)","acceptedAnswer":{"@type":"Answer","text":"- Angular (Google) - React (Facebook) - Vue - Ember"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"¿Qué es la transpilación? ¿Qué tipos hay?","acceptedAnswer":{"@type":"Answer","text":"Es el proceso de convertir código fuente de un lenguaje de programación a otro, manteniendo la misma funcionalidad. Ejemplos: - TypeScript - CoffeeScript - ES6 / ECMAScript 2015"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"¿Por qué 3 elementos fundamentales está formado un navegador web?","acceptedAnswer":{"@type":"Answer","text":"- Intérprete o motor de renderizado - Un intérprete de JS (JavaScript) - Funcionalidades predefindas"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"¿Qué es un motor de renderizado? Da ejemplos:","acceptedAnswer":{"@type":"Answer","text":"Es un software que interpreta y dibuja el contenido de una página web ( HTML, CSS, JavaScript ) en la pantalla del usuario. - Chrome, Edge y Ópera: Blink - Firefox: Gecko - Safari: Webkit"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"¿Cómo se renderiza una página WEB en el modo de compatibilidad para que no se producan errores con HTML?","acceptedAnswer":{"@type":"Answer","text":"Con la instrucción: "}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"¿Quién se encargaba en el pasado de la estandarización de HTML?","acceptedAnswer":{"@type":"Answer","text":"W3C aunque quedó obsoleto por su lentitud"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"¿Quién se encarga en el actualidad de la estandarización de HTML?","acceptedAnswer":{"@type":"Answer","text":"WHATWG: Web Hypertext Application Technology Working Group"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"¿Cómo se define HTML (HyperText Markup Language )?","acceptedAnswer":{"@type":"Answer","text":"Es un lenguaje de marcado o de etiquetas que permite incluir o hacer referencia a todo tipo de información."}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"¿Cómo se accede al código HTML de una página web?","acceptedAnswer":{"@type":"Answer","text":"- Con la combinación de teclas CTRL + U. - Botón derecho inspeccionar. - CTRL + SHIFT + I y accediendo a la pestaña Elements"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"¿Cómo es la estructura de una etiqueta de HTML?","acceptedAnswer":{"@type":"Answer","text":"contenido"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"¿Qué es la semántica de HTML?","acceptedAnswer":{"@type":"Answer","text":"La semántica en HTML5 se refiere a usar etiquetas que describan el significado del contenido, separando la estructura (HTML) de la presentación (CSS), para mejorar la comprensión y accesibilidad de la página."}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"Estructura de una etiqueta en HTML","acceptedAnswer":{"@type":"Answer","text":"[\u003c etiqueta atributo = \"valor\" \u003e contenido ] Ejemplo: [\u003c p class=\"texto-rojo\" \u003e Hola Mundo\u003c / p \u003e] - Etiqueta: \u003c p \u003e - Atributo: class - Valor: \"texto-rojo\" - Contenido: Hola Mundo"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"¿Qué es una etiqueta?","acceptedAnswer":{"@type":"Answer","text":"- Etiqueta: Es el contenedor de todo, como \u003c p \u003e"}}],"educationalAlignment":[{"@type":"AlignmentObject","alignmentType":"educationalSubject","targetName":"BLOQUE III - T8 APP WEB (HTML5)"}]} </script> </body> </html>