Bloque3-Tema8-HTML Flashcards
Que motores de plantillas de HTMl conoces?
-Pug
-Jade
Usan diferentes sintaxis, mas facil para el desarrollador, que luego traducen a html normal
Motor de renderizado de EDGE?
EdgeHTML-> Blink
Motor de renderizado de Chrome?
Blink
Motor de renderizado de Firefox?
Quantum
Motor de renderizado de Opera?
Presto-> Blink
Motor de renderizado de Safari?
Webkit
Que es AJAX?
Acrónimo de Asynchronous JavaScript And XML, es una técnica de desarrollo web para crear aplicaciones web asíncronas
Que es XMLHttpRequest?
Es una clase existente en el navegador que está preparada para realizar las conexiones asíncronas para obtener datos de nuestro servidor web o de cualquier servicio web de Internet que trabaje por HTTP
Librerias de Ajax?
-jquery
-dojo
-yui
-ExtJS
-Prototype
-Mootools
Que son las DevTools?
Conjunto de herramientas para desarrolladores web integrado en el navegador.
Editores para HTML?
-Atom
-Sublime
-VSCODE
Preprocesadores CSS? (CSS3)
-LESS
-SASS
-STYLUS
Frameworks MVVM para desarrollo web?
-Angular
-ReactJS
-Vue.JS
-Ember.js
Que es MVVM?
El patrón modelo–vista–modelo de vista es un patrón de arquitectura de software. Se caracteriza por tratar de desacoplar lo máximo posible la interfaz de usuario de la lógica de la aplicación.
Que gestores de dependencias conoces?
-Bower
-Yarn
-NPM
Que herramientas de automatizacion de tareas conoces?
-Gulp
-Grunt
Que plantillas de proyecto conoces?
-Yeoman
Para que sirven los transpilers?
Traducen de un lenguaje a otro.
Que nuevos lenguajes de desarrollo web conoces que se compilen a Javascript.
Typescript
Coffeescript
ES6
Que se pone en el inicio de pagina de HTML5?
Para que se usa la etiqueta <body>?
para el contenido
Para que se usa la etiqueta <head>?
Para información sobre el documento
Para que se usa la etiqueta <div>?
división dentro del contenido
Para que se usa la etiqueta <a>?</a>
para enlaces
Para que se usa la etiqueta <strong>?</strong>
para poner el texto en negrita
Para que se usa la etiqueta <br></br>?
para saltos de línea
Para que se usa la etiqueta <H1>…<H6>?
para títulos dentro del contenido
Para que se usa la etiqueta <img></img>?
para añadir imágenes al documento
Para que se usa la etiqueta <ol>, <ul> , <li>?
<ol> para listas ordenadas, <ul> para listas desordenadas, <li> para elementos dentro de la lista
</li></ul></ol>
Para que se usa la etiqueta <p>?
para parrafos
Para que se usa la etiqueta <span>?</span>
para estilos de una parte del texto
Para que se usa la etiqueta <pre>?
Representa texto preformateado.
Nota: Conserva el formato.
Para que se usa la etiqueta Blockquote?
Crea citas en bloque, marca las citas a otros autores o documentos.
Para que se usan las etiquetas <embed></embed> y <object>?</object>
Para usar recursos externos.
Para que se usa la etiqueta <iframe>?
Permite insertar o incrustar un documento HTML dentro de un documento HTML principal.
Para que sirve la etiqueta <canvas>?</canvas>
Crea un lienzo para dibujar
Cual es la etiqueta para graficos vectoriales (xml)?
<svg>
</svg>
Para que se usa la etiqueta <track></track>?
se utiliza como elemento hijo de los elementos multimedia, <audio> y <video> se utiliza como elemento hijo de los elementos multimedia, <audio> y <video></video></audio></video></audio>
Para que se usan las etiquetas <video> y <audio>?</audio></video>
Video: Mostrar videos directamente desde nuestro navegador.
audio: se usa para insertar contenido de audio en un documento HTML
Que etiquetas estructurales de HTMl5 conoces?
header
nav
section
article
footer
aside
Para que se usa la etiqueta <time>?</time>
Representa un periodo específico en el tiempo.
PAra que se usa la etiqueta <figure>?</figure>
se utiliza para agrupar y etiquetar el contenido multimedia
Para que se usa la etiqueta <b> en html5?</b>
se utiliza cuando el texto enfatizado no tiene un significado adicional, es decir, se utiliza solo para hacer que el texto se destaque.
Para que se usa la etiqueta <i>?</i>
Fragmento de texto con voz o tono alternativo al resto o un elemento fuera de la prosa actual
Para que se usa <em>?</em>
Fragmento de texto enfatizado respecto a la frase que lo contiene
como enlazarias un documento externo CSS a un HTML?
<link></link>
Como definimos atributos personalizados en HTML5?
con data-*
Se usan itemtype para definir el tipo
y
itemprop: Etiquetar propiedades de un elemento.
Que son los microdatos de HTML5?
Es una característica HTML que se utiliza para anidar metadatos dentro del contenido existente en las páginas web.
Nota: Definir semantica en base a unos “tipos”
Para que se usa el atributo id en html?
Identificador de elemento. Tiene que ser unico.
Para que se usa el atributo class en html5?
clases de estilo definidos en Las CSS(Interna o externa)
Para que se usa el atributo title de HTML5?
Informacion al pasar el raton.
Para que usa el atributo style
estilos aplicados directamente a la etiqueta (inline)
Para que se usa el atributo dir
Indicar direccion del texto
Para que se usa el atributo translate
yes/no
traducir
para que se usa el atributo contenteditable
indica si el elemento debe de ser editable por el usuario
Para que se usa aria-* y role?
Para accesibilidad
Para quie se usa el atributo tabindex
Indica si su elemento puede ser enfocado
Para que se usa el atributo spellcheck?
que define si el elemento debe de ser verificado por errores de deletreado
Para que se usa el atributo draggable?
Atributo enumerado que indica si el elemento puede ser arrastrado
Para que se usa el atributo hidden
Se puede aplicar a un elemento para indicar que está oculto, que no se mostrará
Similar al comportamiento de display:none, no deja ni el espacio que ocuparía el elemento
Metodos de DOCUMENT del API del DOM?
-createElement(…)
-getElementbyID(…)
-getElementByTagName
-getElementByClassName
-querySelector(selector)
ejemplo: document.querySelector(FORM)
Hablando de las propiedades de DOCUMENT del api del DOM, con que propiedad se indica la raiz del documento?
.documentElement
Indica la primera etiqueta (<html>
Metodos de NODE del API del DOM?
-appendChild(…)
-hasAtributes(…)
Propiedades de NODE del API del DOM?
-firstChild
-childnodes
Que es MODERNIZR?
Modernizr es una biblioteca de JavaScript que detecta las funciones disponibles en el navegador de un usuario.
Que son los Polyfills?
Cuando nuestro navegador no implementa de forma nativa una determinada API, se puede simular con unos plug in llamados polyfills.
Para que se usa la API de HTML5 WebStorage (SessionStorage y LocalStorage)
API de almacenamiento
-Local: Sin tiempo de expiracion. Persisten mas haya de la sesion actual.
-Session: Si se cierra la ventana actual se borra.
Para que se usa la API de HTML5 IndexedDB?
Almacenamiento y recuperacion de informacion en una base de datos local.
Api Web Storage es similar pero mas simple.
Para que sirve la API HTML5 Geolocation?
Averiguar la posicion del usuario en coordenadas de latitud y longitud.
Para que sirve la API HTML5 File
Permite cargar un documento en el navegador, leerlo e interaccionar con el
Para que sirve la API HTML5 Canvas?
Rectangulo para dibujar usando JavaScript
Para que sirve la API HTMl5 WebWorker?
Permite ejecutar Script en segundo plano
Para que sirve la API HTML5 WebSocker y ServerSideEvents?
WebSocker: Hacer una app real-time (en tiempo real) . agregar comunicación bi-direccional en una conexión persistente para tu aplicación.
ServerSideEvents: Muy parecido al modelo de WebSockets pero solo para envio de mensajes desde el servidor al cliente (PUSH)
Para que sirve la API HTML Drag and drop
Arrastrar y soltar elementos.
Para que sirve la API HTMl5 Selector (css)
Selecting and testing elements based on whether or not they match a given selector.
Para que sirve la API HTML5 Microdata / Dataset?
Microdata Is used to nest metadata within existing content on web pages
DataSet provides read/write access to custom data attributes (data-*)
Que API de programacion HTML5 conoces?
-WebStorage
-IndexedDB
-Geolocation
-File
-Api Web Storage
-Canvas
-WebWorker
-WebSocket / ServerSideEvents
-Drag and Drop
-Selector
-Microdata / Dataset
Para que sirve la etiqueta <main>?
Representa el contenido principal del <body> de un documento o aplicación
Para que sirve la etiqueta <dl>?
Representa una lista descriptiva
Para que sirve la etiqueta <img></img>?
Insertar una imagen
Notas:
-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
Para que sirve la etiqueta <picture>?</picture>
Es un contenedor usado para especificar múltiples elementos <source></source> y un elemento <img></img>
Para que se usa la etiqueta <address>?
Proporciona informacion de contacto de una persona, organizacion, etc
Para que se usa la etiqueta
se utiliza para insertar o hacer referencia a un script ejecutable dentro de un documento HTML o XHTML
Nota:
-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)
Para que se usa la etiqueta details?
Es un bloque que tiene por defecto un comportamiento desplegable
Título del desplegable que aparece siempre, se encuentre desplegado o no
para que se usa la etiqueta dialog?
Representa una caja de diálogo u otro componente interactivo, como inspector o ventana
Para que sirve la etiqueta template?
es un mecanismo para mantener el contenido HTML del lado del cliente que no se renderiza cuando se carga una página, pero que posteriormente puede ser instanciado durante el tiempo de ejecución empleando JavaScript.
para que sirve la etiqueta header?
representa el encabezado de un documento o contenedor section/main/article/…
Para que sirve la etiqueta nav?
Zona con enlaces de navegacion en el ambito de nuestro site
Para que sirven las etiquetas section y article?
-“section” representa una agrupación del contenido del que se trata en la pagina
-“article” 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.
-Está permitido anidar articulos dentro de secciones y al reves
Para que sirve la etiqueta aside?
Representa información tangencialmente/ligeramente relacionada con el contenedor section/main/article/…
Para que sirve la etiqueta footer?
Representa el pie de un documento o contenedor section/main/article/…
Para que se usa la etiqueta mark?
Fragmento de texto resaltado, simulando estar marcado con rotulador amarillo
Para que se usa la etiquueta <u></u>
Fragmento de texto para nombres propios o escritura incorrecta intencionada
Para que se usa la etiqueta s?
Fragmento de texto inexacto o que ya no es relevante. (errores o inexactitudes)
Para que se usa la etiqueta span
Contenedor in-line sin significado especial (sirve para aplicar estilo al texto o agrupar elementos en línea)
Para que se usa la etiqueta cite?
Fragmento de texto con el título de un trabajo creativo: obra, libro, autor, empresa, URL, tweet,…
Para que se usa la etiqueta q?
Fragmento de texto in-line con una cita corta
Aqui el atributo “cite” tiene que apuntar a la URL de donde se saca la cita
Para que se usa la etiqueta sup
para mostrar exponentes, 2 elevado a 10 por ejemplo.
Para que se usa la etiqueta sub
como sup pero al reves, el numerito pequeño va abajo.
Para que se usa la etiqueta wbr?
Oportunidad de salto de línea (división silábica con guión)
Para que se usa la etiqueta code?
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
Para que se usa la etiqueta ruby?
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
Codigo de una tabla HTML.
El elemento básico de definición de tabla es <TABLE> </TABLE> y en su interior se disponen los sub elementos <TR> para definir una fila (Row) <TH> para definir una cabecera (Header) <TD> para definir una celda de datos (Data).
Ejemplo de codigo de tabla html
<table>
<caption>Tiempo necesario para viajar desde Philadelphia</caption>
<colgroup>
<col></col>
<col></col>
</colgroup>
<thead>
<tr>
<th>Destino</th>
<th>En auto</th>
<th>En tren</th>
<th>En bicicleta</th>
</tr>
</thead>
<tbody>
<tr>
<th>Nueva York</th>
<td>1 h 51 min</td>
<td>1 h 22 min</td>
<td>8 h 53 min</td>
</tr>
<tr>
<th>Allentown</th>
<td>1 h 11 min</td>
<td>-</td>
<td>6 h 9 min</td>
</tr>
<tr>
<th>Reading</th>
<td>1 h 12 min</td>
<td>-</td>
<td>5 h 40 min</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Promedio</th>
<th>1 h 24 min</th>
<th>1 h 22 min</th>
<th>6 h 54 min</th>
</tr>
</tfoot>
</table>
Como definirias un formulario?
<form>
</form>
Como harias un campo de tipo texto de un frmulario?
y de tipo submit?
<input></input>
<input></input>
