PlanB Flashcards
Motor de renderizado de Safari
WebKit
Motor de renderizado de Opera
Blink (basado en Webkit), en el pasado usaba Presto
Motor de renderizado de Firefox
Quantum que es una mejora de Gecko
Motor de renderizado de Chrome
Blink (basado en WebKit) antes WebKit
Motor de renderizado de Edge
Blink (basado en webkit) antes EdgeHTML y antes Trident
Nombra 3 preprocesadores CSS
Less , SASS, Stylus
Nombra 3 editores
Atom, Sublime , VSCode
Novedades de HTML5 con respecto al 4
API’s, Semántica, multimedia
Nombra 5 librerías js
jquery, dojo, yui,prototype, mootools
Nombra 4 frameworks js
angular, react, vue,ember
Que interprete de js lleva chrome y firefox?
v8 y spidermonkey
Para que sirve modernizer?
Una librería js que permite detectar las capacidades del navegador
¿Qué es WebStorage y para qué se utiliza?
WebStorage proporciona almacenamiento local en el navegador del usuario que persiste incluso después de cerrar el navegador. Se utiliza para almacenar datos de sesión (sessionStorage) y datos que persisten más allá de la sesión (localStorage).
¿Qué es IndexedDB y cuándo se debería usar?
IndexedDB es una base de datos NoSQL en el navegador que permite almacenar grandes cantidades de datos estructurados y realizar búsquedas eficientes. Se debería usar para aplicaciones que necesitan almacenamiento de datos complejos y de gran tamaño.
¿Cómo funciona la API de Geolocation?
La API de Geolocation permite a las aplicaciones web acceder a la ubicación geográfica del usuario mediante el uso de GPS, Wi-Fi, y otras fuentes. Se usa comúnmente en aplicaciones de mapas y servicios basados en la ubicación.
¿Qué es la API File y cuál es su propósito?
La API File permite a las aplicaciones web manipular archivos locales del usuario. Permite leer y escribir archivos, proporcionando acceso directo a los archivos seleccionados por el usuario en su sistema de archivos
¿Qué es Canvas y para qué se utiliza?
Canvas es un elemento HTML5 que permite renderizar gráficos y animaciones en tiempo real utilizando JavaScript. Se utiliza para juegos, visualizaciones de datos, y gráficos interactivos.
¿Qué es un WebWorker y cuál es su beneficio principal?
Un WebWorker permite ejecutar scripts en segundo plano, sin afectar el rendimiento de la página principal. El beneficio principal es la capacidad de realizar tareas intensivas en cálculo sin bloquear la interfaz de usuario.
¿Qué es WebSocket y para qué se utiliza?
WebSocket es una API que proporciona comunicación bidireccional en tiempo real entre el navegador y el servidor. Se utiliza para aplicaciones que requieren actualizaciones instantáneas, como chats en línea y sistemas de notificación.
¿Cómo funciona Drag and Drop en HTML5?
La API de Drag and Drop permite a los usuarios arrastrar y soltar elementos dentro de una página web. Se usa para mejorar la interactividad de las aplicaciones, como en interfaces de gestión de archivos y organizadores visuales.
¿Qué es la API de Selector y para qué se usa?
La API de Selector, también conocida como querySelector y querySelectorAll, permite seleccionar y manipular elementos del DOM utilizando selectores CSS. Se utiliza para simplificar la manipulación del DOM en JavaScript.
¿Qué es Microdata y cómo se utiliza con dataset?
Microdata es una especificación HTML5 que permite incrustar datos estructurados en las páginas web. La propiedad dataset de un elemento HTML proporciona un acceso fácil a los atributos de datos personalizados (data-*), permitiendo la interacción con los microdatos.
Quien desarrollo html5?
Fue desarrollado por el WHATWG (Web Hypertext Application Technology Working Group), un grupo formado por representantes de Apple, Mozilla, y Opera en 2004, con el objetivo de avanzar en el desarrollo de estándares web. Posteriormente, el W3C (World Wide Web Consortium) también colaboró en el desarrollo y formalización de HTML5. El enfoque principal de HTML5 fue mejorar el soporte para multimedia y gráficos, así como proporcionar una mejor experiencia para aplicaciones web.
Quien desarrolló html4?
W3C (World Wide Web Consortium)
Cual es la etiqueta de inicio de documento html5?
<!DOCTYPE html>
Para que sirve la etiqueta blockquote de html4?
se utiliza para definir una sección que es citada de otra fuente. El contenido dentro de la etiqueta <blockquote> suele estar sangrado o presentado de una manera distinta para resaltar que es una cita.
La etiqueta puede incluir un atributo cite para proporcionar la URL de la fuente de la cita:x
<blockquote_cite=’http://www.example.com’ >
“This is the quoted material that you want to highlight for your readers. It should be a direct quote from a source.”
</blockquote>
Para que sirve la etiqueta <pre> de html4?
Conserva formato. La etiqueta <pre> en HTML4 se utiliza para definir texto preformateado. El texto dentro de un elemento <pre> se muestra en una fuente de ancho fijo (generalmente monospace) y conserva todos los espacios en blanco y saltos de línea como se han escrito en el código fuente. Esto es útil para mostrar código, poesía, o cualquier contenido donde el espaciado y el formato sean importantes.
Código para una lista ordenada como esta:
C. Elemento 3
D. Elemento 4
<ol_type=”A” start=”3”>
<li>Elemento 3</li>
<li>Elemento 4</li>
</ol>
Código para lista de definiciones que de este resultado:
Término 1
Definición del término 1
Término 2
Definición del término 2
<dl>
<dt>Término 1</dt>
<dd>Definición del término 1</dd>
<dt>Término 2</dt>
<dd>Definición del término 2</dd>
</dl>
Código para lista no ordenada
Elemento 1
Elemento 2
Elemento 3
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>
Codigo para una lista ordenada que empiece por 3
<ol_start=”3”>
<li>Elemento 3</li>
<li>Elemento 4</li>
<li>Elemento 5</li>
</ol>
Diferencia entre embed y object
<embed_>: Incrusta contenido externo en una página web de manera sencilla.
<object_>: Incrusta contenido externo y permite especificar contenido alternativo..
<embed_src="file.pdf" width="600" height="400">
<object_data="file.pdf" width="600" height="400">
<p>Tu navegador no soporta la visualización de este documento. <a>Descárgalo aquí</a>.</p>
</object>
</object_></embed_>
Háblame de las etiqueta audio
Reproduce archivos de audio como MP3, Ogg y WAV
<audio_controls>
<source_src="audio.mp3" type="audio/mpeg">
Tu navegador no soporta el elemento de audio.
</audio>
Atributos comunes: controls, autoplay, loop, muted, preload
</audio_controls>
Háblame de la etiqueta video
Reproduce archivos de video como MP4, WebM y Ogg.
<video_width=”640” height=”360” controls>
<source_src=”video.mp4” type=”video/mp4”>
Tu navegador no soporta el elemento de video.
</video>
Atributos comunes: controls, autoplay, loop, muted, preload, poster
Etiqueta track
se utiliza dentro de <video> o <audio> para especificar pistas de texto, como subtítulos, descripciones de audio y capítulos.</audio></video>
<video_width=”640” height=”360” controls>
<source_src=”video.mp4” type=”video/mp4”>
<track_src=”subtitles.vtt” kind=”subtitles” srclang=”en” label=”English”>
Tu navegador no soporta el elemento de video.
</video>
¿Para qué se utiliza la etiqueta <header> en HTML5?
se utiliza para definir el encabezado de una sección o página web, que generalmente incluye títulos, logotipos, y elementos de navegación. Puede haber varias, por ejemplo, cada <section> puede llevar su <header>
¿Cuál es el propósito de la etiqueta <nav> en HTML5?
se utiliza para definir un conjunto de enlaces de navegación que ayudan a los usuarios a navegar por el sitio web. Puede haber varias en una misma página.
¿Qué contenido debe incluir la etiqueta <main> en HTML5?
debe contener el contenido principal de la página, excluyendo encabezados, barras laterales y pies de página, y debe ser única por página.
¿Cómo se utiliza la etiqueta <section> en HTML5?
se utiliza para definir secciones temáticas en el contenido de la página, como capítulos o grupos de contenido relacionado.
Qué tipo de contenido debe ir dentro de la etiqueta <article> en HTML5?
La etiqueta <article> se utiliza para contenido independiente que puede ser distribuido o sindicado, como artículos de noticias, blogs o comentarios.
Para qué se utiliza la etiqueta <aside> en HTML5?
Se utiliza para contenido relacionado pero independiente del contenido principal, como barras laterales, citas o enlaces relacionados.
Qué se suele incluir en la etiqueta <footer> en HTML5?
se utiliza para definir el pie de página de una sección o página, que generalmente incluye información de contacto, derechos de autor y enlaces a términos de servicio.
¿Cuál es el propósito de la etiqueta <figure> en HTML5?</figure>
se utiliza para agrupar contenido de medios como imágenes, diagramas, ilustraciones, y su correspondiente descripción utilizando <figcaption>
<figure>
<img></img>
<figcaption>Esta es una descripción de la imagen.</figcaption>
</figure>
¿Para qué sirve la etiqueta <mark> en HTML5?</mark>
Se utiliza para resaltar o destacar texto importante dentro del contenido, indicando que tiene relevancia o interés especial.
¿Cómo se define el idioma del documento?
<html_lang=”es”>
¿Cómo se especifica la codificación del documento?
<!DOCTYPE html>
<html_lang=”es”>
<head>
<meta_charset="UTF-8">
</head>
Configura la vista para diseños responsivos.
<!DOCTYPE html>
<html>
<head>
<meta></meta>
<title>Título de la Página</title>
<meta></meta>
<link></link>
</head>
<body>
<!-- Contenido de la página -->
</body>
</html>
Vincula una hoja de estilo
<!DOCTYPE html>
<html>
<head>
<meta></meta>
<title>Título de la Página</title>
<meta></meta>
<link></link>
</head>
<body>
<!-- Contenido de la página -->
</body>
</html>
>
Vincula un js
<!DOCTYPE html>
<html>
<head>
<meta></meta>
<title>Título de la Página</title>
<meta></meta>
<link></link>
</head>
<body>
<!-- Contenido de la página -->
</body>
</html>
Para que sirve hreflang?
Se utiliza para indicar a los motores de búsqueda el idioma y la región del contenido de una página vinculada, ayudando a redirigir a los usuarios al contenido adecuado según su idioma y ubicación. Para redirigir a una página en inglés, puedes usar el atributo hreflang en una etiqueta <link></link> o <a>.</a>
<link_rel=”alternate” href=”https://www.example.com/en” hreflang=”en”>
<a_href=”https://www.example.com/en” hreflang=”en”>English Version</a>
Para que sirve <link rel=”alternate”?
<link_rel=”alternate” href=”https://www.example.com/en” hreflang=”en”>
<link_rel=”alternate” href=”https://www.example.com/es” hreflang=”es”>
<link_rel=”alternate” href=”https://www.example.com/fr” hreflang=”fr”>
se utiliza para especificar versiones alternativas de una página web, como versiones en diferentes idiomas. Esto ayuda a los motores de búsqueda y navegadores a identificar y servir la versión correcta de la página a los usuarios en función de su idioma preferido.
Para que sirve autocomplete en un formulario?
autocomplete=”on”: El navegador sugerirá valores basados en entradas anteriores.
autocomplete=”off”: El navegador no sugerirá valores, útil para campos sensibles como contraseñas o información confidencial.
¿Qué hace el atributo datalist en un campo de entrada?
El atributo list asocia el campo de entrada con un <datalist>, proporcionando una lista de opciones sugeridas al usuario.</datalist>
<input_type=”text” id=”browser” name=”browser” list=”browsers”>
<datalist_id=”browsers”>
<option_value=”Chrome”>
<option_value=”Firefox”>
</datalist><br></br>
¿Para qué sirve el atributo autofocus?
da automáticamente el enfoque al campo de entrada cuando la página se carga.
¿Cómo se usan los atributos min y max en un campo de entrada?
min y max especifican los valores mínimo y máximo permitidos en campos de entrada numéricos, de rango, fecha y hora.
<input_type=”date” id=”date” name=”date” min=”2023-01-01” max=”2024-12-31”>
¿Qué hace el atributo pattern en un campo de entrada?
utiliza una expresión regular para definir un formato que debe cumplir el valor del campo de entrada.
¿Para qué se utiliza el atributo multiple?
permite seleccionar múltiples archivos o valores en campos de entrada de tipo file o select.
¿Cuál es la función del atributo placeholder?
proporciona un texto de marcador de posición que se muestra en el campo de entrada cuando está vacío, ayudando al usuario a entender qué información debe ingresar.
¿Qué indica el atributo required en un campo de entrada?
marca el campo de entrada como obligatorio, impidiendo el envío del formulario si el campo está vacío.
Como se crea un atributo personalizado y como se captura su valor con javascript?
<div_id=”product” data-id=”12345” data-name=”Laptop” data-price=”999.99”>
Información del Producto
</div>
<script_>
const product = document.getElementById('product');
const productId = product.dataset.id;
const productName = product.dataset.name;
const productPrice = product.dataset.price;
</script_>
Cuando se usa # en un selector para cargar un id?
JavaScript (nativo): document.getElementById(‘id’) (sin #)
CSS y querySelector: #id (con #)
const element = document.querySelector(‘#myId’); // Correcto
¿Qué son los microdatos en HTML y cómo mejoran la visibilidad de un sitio web en los motores de búsqueda?
Los microdatos son un conjunto de atributos utilizados en HTML para añadir metadatos semánticos a tu contenido web, lo que permite a los motores de búsqueda entender mejor el contenido de tus páginas. Al usar microdatos, los motores de búsqueda pueden generar fragmentos enriquecidos (rich snippets) en los resultados de búsqueda, proporcionando información adicional y más detallada sobre tu página, como descripciones de productos, reseñas, eventos, y más. Esto mejora la visibilidad y el atractivo de tu sitio web, lo que puede aumentar el tráfico y la interacción del usuario.
<div
_itemscope_itemtype=’https://schema.org/Person”>
<h1><span_itemprop=”name”>John Doe</span></h1>
<p>Trabajo: <span_itemprop=”jobTitle”>Ingeniero de Software</span></p>
<p>Teléfono: <span_itemprop=”telephone”>(425) 123-4567</span></p>
<a href=”http://www.example.com”_itemprop=”url”>Perfil de John Doe</a>
</div>
lenguajehtml.com
repaso
Booleanos checked con “”, true o checked?
<input_type=”checkbox” checked />
<input_type=”checkbox” checked=”” />
<input_type=”checkbox” checked=”checked” />
Como se usa la etiqueta refresh en html
<meta_http-equiv=”refresh” content=”35”>
Si queremos que una lista ordenada empiece por 50 como es el código
<ol_start=”50”>
<li>Elemento 50</li>
<li>Elemento 51</li>
<li>Elemento 52</li>
</ol>
Que estilo deberemos usar para que una lista ordenada tenga a,b,c / A,B,C
list-style-type: lower-alpha; / upper-alpha
Que estilo deberemos usa para que una lista ordenada tenga I,II,III,IV / i,ii,iii,iv
list-style-type: upper-roman; / lower-roman
Que estilo deberemos usar para en una lista no ordenada empiece por un circulo o un cuadrado
list-style-type: circle / square
Para que sirve la etiqueta <dialog> y como se utiliza?</dialog>
Sirve para mostrar un cuadro de dialogo en html 5, con <dialog> se muestra, si no se pone open no se muestra.</dialog>
En js tambien se puede controlar con: document.getElementById(‘myDialog’).showModal();
document.getElementById(‘myDialog’).close();
p b {color: red;}
Aplica el color rojo a todos los elementos <b> que son descendientes de un elemento <p></b>
<p>Este es un <b>texto en rojo</b> dentro de un párrafo.</p>
<div>Este es un <b>texto en negrita</b> dentro de un div.</div>
p, b {color: red;}
Aplica el color rojo a todos los elementos <p> y <b>.</b>
<p>Texto en rojo.</p>
<b>Texto en rojo.</b>
p > b {color: red;}
Aplica el color rojo a todos los elementos <b> que son hijos directos de un elemento <p>.</b>
<p>Este es un <b>texto en rojo</b> dentro de un párrafo.</p>
<p>Este es un <span><b>texto en negrita</b> dentro de un span en un párrafo.</span></p>
p ~ b {color: red;}
Aplica el color rojo a todos los elementos <b> que son hermanos (siblings) de un elemento <p> y vienen después de él en el mismo nivel jerárquico.</b>
<p>Este es un párrafo.</p>
<b>Texto en rojo.</b> <div>Este es un div.</div> <b>Texto en rojo.</b>
p + b {color: red;}
El selector p + b aplica el estilo solo a los elementos <b> que son el siguiente hermano inmediato de un elemento <p>.</b>
<p>Este es un párrafo.</p>
<b>Texto en rojo porque es el siguiente hermano inmediato de un párrafo.</b>
<p>Este es otro párrafo.</p>
<span>Este es un span.</span>
<b>Este texto no es rojo porque hay un span en medio.</b>
<p>Este es un tercer párrafo.</p>
<b>Texto en rojo porque es el siguiente hermano inmediato de un párrafo.</b>
<div>
<b>Este texto no es rojo porque no es hermano inmediato de un párrafo.</b>
</div>
</body>
p:first-child {color: red;}
Aplica el color rojo a un elemento <p> que es el primer hijo de su padre.
<div>
<p>Texto en rojo porque es el primer hijo de su contenedor div.</p>
<p>Este párrafo no es el primer hijo.</p>
</div>
<div>
<span>Este no se verá afectado.</span>
<p>Este párrafo no es el primer hijo.</p>
</div>
p:first-of-type {color: red;}
Aplica el color rojo al primer <p> de su tipo dentro de su padre.
<div>
<p>Texto en rojo porque es el primer `<p>` dentro de su contenedor div.</p>
<p>Este es otro párrafo en el mismo div.</p>
<span>Este no se verá afectado.</span>
<p>Este es otro párrafo en el mismo div.</p>
</div>
</p></div>
p:last-child {color: red;}
<div>
<p>Este párrafo no es el último hijo de su contenedor div.</p>
<span>Este no se verá afectado.</span>
<p>Texto en rojo porque es el último hijo de su contenedor div.</p>
</div>
nombra frameworks de css
Bootstrap, Material, Tailwind, Bulma, Foundation y Yaml
que hace la etiqueta <progress_value=”70” max=”100”>
crea una barra de progreso que estará al 70%
th y thead son equivalentes?
<th> (Table Header Cell)
Define una celda de encabezado en una tabla.
<thead> (Table Header Group)
Agrupa el contenido del encabezado de una tabla, que usualmente incluye una o más filas de celdas de encabezado (<th>).
<table>
<thead>
<tr>
<th>Nombre</th>
<th>Edad</th>
<th>Ciudad</th>
</tr>
</thead>
<tbody>
<tr>
<td>Juan</td>
<td>25</td>
<td>Madrid</td>
</tr>
<tr>
<td>María</td>
<td>30</td>
<td>Barcelona</td>
</tr>
</tbody>
</table>
</th></thead></th>
Cual es el código para aplicar flexbox a un elemento
display: flex;
Como se pondría el foco en un campo de formulario automaticamente al cargar?
con autofocus en el <input type=”text” “ name=”nombre” autofocus>
o con
function ponerFoco() {
document.getElementById(‘nombre’).focus();
<input></input>
HTML5 Etiqueta texto enfatizado
<em></em>
HTML5 Etiqueta texto importante
<strong></strong>
HTML5 Etiqueta voz/tono alternativo
<i></i>
HTML5 Etiqueta texto resaltado
<mark></mark>
HTML5 Etiqueta palabra clave
<b></b>
HTML5 Etiqueta anotaciones
<u></u>
HTML5 Etiqueta superindice
<super>
</super>
HTML5 Etiqueta subíndice
<_sub></_sub>
HTML5 Etiqueta pequeñas aclaraciones
<small></small>
HTML5 Etiqueta variable o incógnita
<var></var>
HTML5 Etiqueta resultado de la operación
<samp></samp>
HTML5 Etiqueta entrada de usuario
<kbd></kbd>
HTML5 Etiqueta definición
<dfn>></dfn>
HTML5 Etiqueta abreviatura
<abbr></abbr>
HTML5 Etiqueta titulos de trabajos u obras
<cite></cite>
HTML5 Etiqueta citas (frases)
<q></q>
HTML5 Etiqueta oportunidad de salto de línea
<wbr></wbr>
HTML5 Etiqueta texto eliminado (inexacto) - tachado -
<s>
</s>
HTML5 Etiqueta de texto añadido / eliminado
<p>Este es un texto original.</p>
<p>Este es un <ins datetime="2023-07-25T10:00:00Z" cite="https://ejemplo.com/cambios">texto insertado se ve subrayado</ins> en el documento.</p> <p>Este es un <del datetime="2023-07-25T10:00:00Z" cite="https://ejemplo.com/cambios">texto eliminado se ve tachado</del> del documento.</p>
HTML5 Etiqueta de fecha
No pinta nada solo el texto, <time> es semántico</time>
<p>
El próximo evento tecnológico tendrá lugar el <time datetime="2024-09-01">1 de septiembre de 2024</time>.
</p>
<p>
La última actualización fue realizada el <time datetime="2024-07-20T14:00">20 de julio de 2024 a las 14:00</time>.
</p>
Para que sirve la etiqueta HTML5 <data_value=”29.99”>29,99 €</data>
Equivalencia para máquinas
HTML5 Fragmento de código
<code></code>
Como se puede hacer distintas partes de una imagen seleccionables
<map>
<area></area>
<area></area>
<area></area>
</map>
Para que sirve el atributo download y como se usa?
Dentro de <a_download> y <area_download> para que se descargue el contenido de los enlaces en vez de navegar por ellos</area_download></a_download>
Para que sirve el atributo rel y donde se utiliza?
Se utiliza en las etiquetas <a>, <link></link>, y <area></area> para definir la relación entre el documento actual y el recurso enlazado. Ayuda a mejorar la seguridad, la navegación, y la optimización para motores de búsqueda (SEO) al proporcionar información contextual sobre el enlace.</a>
Usos Comunes de rel
Seguridad y Privacidad:
noopener: Evita que la nueva página acceda al objeto window.opener.
noreferrer: No envía la referencia (referrer) al recurso enlazado.
SEO:
nofollow: Indica a los motores de búsqueda que no sigan el enlace.
ugc: Indica contenido generado por usuarios.
Navegación:
prev y next: Relaciona documentos en una secuencia, como capítulos de un libro.
alternate: Enlaces a recursos alternativos, como feeds RSS.
Otros:
license: Enlaces a información de licencia.
author: Enlaces a la página del autor del documento.
Ejemplos
<a href=”https://example.com” target=”_blank”_rel=”noopener”>Enlace Seguro</a>
Enlace con nofollow
html
<a href=”https://example.com”_rel=”nofollow”>Enlace NoFollow</a>
Enlace de Navegación
<a href=”chapter2.html”_rel=”next”>Siguiente Capítulo</a>
<a>Capítulo Anterior</a>
<link></link>
<link rel=”alternate” href=”https://example.com/rss” type=”application/rss+xml” title=”RSS
Etiqueta html5 para cargar plantilla html
<template>
</template>
