HTML Flashcards
AJAX SIGLAS?
Asynchronous JavaScript And XML
PREPROCESADORES CSS
LESS
SASS
STYLUS
¿CUAL ES EL STANDARD DE JAVASCRIPT? «EXAMEN»
ES 6
ECMAScript 6
GESTORES DE DEPENDENCIAS
BOWER, YARN, NPM
ITEXT JAVA
iText permite generar documentos PDF, XML, HTML o RTF
«AL VUELO»_space; controlando de forma precisa el aspecto del documento obtenido. Del mismo modo, se permite parsear documentos XML y convertirlos en cualquiera de los formatos mencionados anteriormente.
JPA JAVA
GUARDAR OBJETOS EN UNA BASE RELACIONAL
DIFERENCIA LIBRERIA/API/FRAMEWORK
LIBRERIA
Conjunto de funciones/clases (JQuery js / iText JAVA)
«FLUJO LO MARCA TU PROGRAMA»
Desde mi “MAIN” llamo a una función y vuelve a mi “MAIN”, si encontrará otra función mejor tendría que cambiarlo en todas las llamadas de mi código la nueva función.
(iText permite generar documentos PDF, XML, HTML o RTF
«AL VUELO»_space;)
API (ABSTRACCIÓN)
JPA API DE JAVA PARA Hibernate u OpenJPA
Especificaciones funcionales que deben cumplir una libreria
«PUEDES CAMBIAR DE LIBRERIA SIN CAMBIAR LAS LLAMADAS EN TU “MAIN”, A TRAVÉS DE UN ARCHIVO DE CONFIGURACIÓN, en él eliges cual usas si Hibernate u OpenJPA
(JPA GUARDAR OBJETOS EN UNA BASE RELACIONAL)
FRAMEWORK
Flujo ES COMPARTIDO, él y tu “MAIN”.
Los servicios comunes los lleva él:
SEGURIDAD/VALIDACION/CACHE
El Framework trabaja antes y después de tu código y coge y devuelve el control.
INICIO PÁGINA HTML5 (EXAMEN)
<!DOCTYPE html>
OJO MAYUSCULAS Y ADMIRACIÓN
<b> en HTML5</b>
<b> Fragmento de texto que llama la atención pero sin importancia destacable</b>
NEGRITA AHORA
<strong></strong>
<i> en HTML5</i>
<i> Fragmento de texto con voz o tono ALTERNATIVO fuera de la prosa actual (Destacar otro idioma)</i>
ITALIAN (CURSIVA) ahora
<em></em>
HEADER donde se usa?
Al incio de la web, como encabezado, pero también en el cuerpo en secciones también como encabezado
También en footer se puede usar así
Se usan para dar estructura para seo y para accesibilidad
ETIQUETAS SEMANTICAS EN HTML 5
Estructura general:
HEADER, ARTICLE, SECTION, ASIDE, FOOTER, NAV
Elementos concretos
FIGURE, para imágenes y gráficos
FIGCAPTION, que es un pie de imagen
TIME para definir fechas y horas
MAIN, MARK, SUMARY Y DETAILS
<nav> HTML5
</nav>
HIPERVINCULOS A PÁGINAS IMPORTANTES
NO, “TONTERIAS”
SEO SEM
SEO significa search engine optimization
SEM se refiere a search engine marketing (PAGO)
ARTICULOS Y SECCIONES QUIEN PUEDE CONTENER A QUIEN?
AMBOS, UN ARTICULO TIENE SECCIONES Y UNA SECCIÓN PUEDE TENER ARTICULOS
<aside> HTML5 (EXAMEN)
</aside>
INFORMACIÓN ADICIONAL
<main> HTML5 <<NUEVA>>
</NUEVA></main>
Zona de contenido principal
PUEDE HABER MAS DE UNA
<article> HTML5 (EXAMEN)
</article>
CONTENEDOR INDEPENDIENTE
PUEDE SER REUTILIZADOS Y DISTRIBUIDOS EN OTRAS WEB.
<figure> HTML5 QUE CONTIENE?
</figure>
CONTENEDOR PARA IMAGEN, PARRAFO, VIDEO…
<CANVAS> HTML5
</CANVAS>
ZONA PINTAR
<SVG> HTML5 NUEVO
</SVG>
GRAFICOS VECTORIALES XML
ES EL CONTENEDOR
<pre> HTML5
</pre>
El Elemento HTML <pre> (o Texto HTML Preformateado) representa texto preformateado. El texto en este elemento típicamente se muestra en una fuente fija, no proporcional, exactamente como es mostrado en el archivo.
Los ESPACIOS dentro de este elemento también son mostrados como están escrito
Como se llama una hoja de estilos ?
<link></link>
Como se llama a páginas alternativas (ingles, imprimible, pdf…)?
<link></link>
<link></link>
<link></link>
<label> asociado a un <input></input> como se hace?</label>
<label>Pon Telefono</label>
<input></input>
placeholder HTML5
AYUDA CONTEXTUAL DE QUE PONER EN UN input
(letra gris que desparece al escribir)
<input></input>
pattern HTML5
EXPRESION REGULAR
<input></input>
bootstrap
CSS ya hecha «framework»
¿Como se pueden crear atributos personalizados en HTML5?
<td>
acceder desde js:
td.dataset.datanombre (sin guión)
</td>
Como se dan metadatos semánticos a GOOGLE
MICRODATOS
de esta web =http://schema.org
http://schema.org/Person
http://schema.org/Product…
itemscope
itemtype
itemprop
<section>
<img></img>
<span>
DEBE EXISTIR EN itemtype Y itemprop
itemtype= PRODUCT / NUTRICIONALINFORMATION /
itemprop=FechaPublicacion, cooktime....
</span></section>
<ELEMENT> HTML
</ELEMENT>
ETIQUETA TAG
QUE HACE MODERNIZR HTML5?
detectar si el navegar del cliente es compatible con las caracteristicas de nuestra web (API)
POLYFILLS HTML5?
DESCARGAR SOFTWARE javascript INCRUSTA EN LA PÁGINA simular las API´s de nuestra web
APIS HTML5
WEB STORAGE
INDEXED DB
GEOLOCATION
FILE
CANVAS
WEBWORKER
WEBSOCKET
DRAG AND DROP
SELECTOR
MICRODATA / DATASET
WEB STORAGE
GUARDAR EN EL NAVEGADOR
INFORMACIÓN BBDD CLAVE-VALOR
LOCAL SE MANTIENE
SESION SE BORRA
«NUEVAS COOKIES»
INDEXED DB
GUARDAR EN EL NAVEGADOR INFORMACIÓN
BBDD NO SQL
FILE
SUBIDA CONTROLADA DE ARCHIVOS
WEBWORKER
HILOS EN SEGUNDO PLANO (ASINCRONAS)
PARA EVITAR SATURAR EL HILO PRINCIPAL
WEBSOCKET
SERVER SENT EVENTS
PARA MOSTRAR MENSAJES AL CLIENTE DESDE EL NAVEGADOR AUNQUE NO LO PIDA… (PUSH)
SELECTOR
CSS
MOTORES DE RENDERIZADO
PARA QUE SIRVE Y CUALES SON
PARTE DEL NAVEGADOR QUE INTERPRETA EL HTML Y CSS Y LAS
IMAGENES Y TE LO MUESTRA.
EDJE-CHROME-OPERA = BLINK
SAFARI=WEBKIT
FIREFOX= GECKO/ QUANTUM
PUG O JADE
MOTOR DE PLANTILLAS DE HTML
SE USA PARA AHORRAR ABRIR Y CERRAR ETIQUETAS EN HTML
EL LAS PONE POR TI.
INSTALACION npm i -g pug-cli
BUCLE PUG UL/LI
ul
each employee in employees
li=employee
<ul>
<li>Pepe</li>
<li>Juan</li>
<li>Luis</li>
</ul>
atributo spellcheck html5?
spellcheck=”true”
Sirve para que el navegador haga una revision de ortografia/gramatica subrayando en rojo lo incorrecto
<ol> HTML
</ol>
LISTAS ORDENADAS
¿Qué archivo es VTT? / WEBVTT
Para proporcionar leyendas o subtítulos contenido visual, capítulos para la navegación dentro del contenido, descripciones textuales del vídeo, y cualquier otro metadato alineado con el contenido audio o vídeo.
¿Qué archivo es VTT? / WEBVTT
Para proporcionar leyendas o subtítulos contenido visual, capítulos para la navegación dentro del contenido, descripciones textuales del vídeo, y cualquier otro metadato alineado con el contenido audio o vídeo.
etiqueta DETAILS HTML?
Es un bloque que tiene por defecto un comportamiento desplegable
etiqueta TEMPLATE HTML?
CREAR PLANTILLAS EN HTML5 PARA UNA SECCIÓN
etiqueta mark html?
Fragmento de texto resaltado, simulando estar marcado con rotulador amarillo
Etiqueta u: HTML
Fragmento de texto para nombres propios o escritura incorrecta intencionada
“subrayar”
Etiqueta s: HTML
Fragmento de texto inexacto o que ya no es relevante. (errores o inexactitudes)
“tachar”
Etiqueta cite: HTML
Fragmento de texto con el título de un trabajo creativo: obra, libro, autor, empresa, URL, tweet,…
Etiqueta q: HTML
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
<q>Es a tu audiencia a quien debes satisfacer y no a google..</q>
diferencia etiqueta “cite” y “q” en HTML
LAS DOS SE EMPLEAN PARA REFERIRSE A “CITAS”, LIBRO, OBRA, TWEET
PERO “Q” CONTIENE “CITE” QUE APUNTA A LA URL DE LA CITA
etiquetas BDI Y BDO en HTML?
PARA TEXTO AL REVES (ARABE), BDI TROZO Y BDO TODO
DIR=”RTL”
- LTR: Texto de izquierda a derecha (Left-to-right).
- RTL: Texto de derecha a izquierda (Right-to-left)
ETIQUETA kbd html?
Combinación teclado
