HTML y CSS Flashcards
¿Que puerto usa Mysql?
3306
¿Que hace el sniffer de red?
Captura el trafico de la red
¿ Que atributo de HTML5 se encarga de identificar un elemento?
id. Tiene que ser unico
¿Que es IANA?
Internet asigned numbers authority. Supervisa la asignacion global de direcciones IP.
¿Que es la ICANN?
Corporacion de internet para la asignacion de nombres y números
¿Cuál es el motor de renderizado de Edge?
Blink
¿Cuál es el motor de renderizado de Chrome?
Blink
¿Cuál es el motor de renderizado de Firefox?
Quantum
¿Cuál es el motor de renderizado de Opera?
Blink
¿Cuál es el motor de renderizado de Safari?
Webkit
¿Qué es Chromium?
base de código abierto para crear un navegador web
¿Qué frameworks JS de desarrollo web modelo vista modelo de vista (MVVM) conoces?
Angular, React, Vue.js, Ember.JS
¿Qué es XmlHttpRequest ?
es una interface empleada para realizar peticiones HTTP y HTTPS a servidores web
¿Qué son librerías/bibliotecas JS?
jquery, dojo, yui, EXTJS, Prototype y Mootools
¿Cómo trabaja AJAX?
En segundo plano y asíncrona
¿Cuáles son algunos preprocesadores de CSS?
LESS, SASS y STYLUS
Lenguajes de alto nivel que usa JS
Typescript, Coffeescript, ES6
Herramientas de gestores de dependencias
Bower, Yarn, npm
Herramientas de automatización de tareas
Gulp y Grunt
Herramientas de plantillas de proyecto
yeoman
Inicio de pagina de HTML5
<!DOCTYPE html>
Etiquetas de estructura semántica en HTML5
<header> <nav> <section> <article> <asider> <footer>
</footer></asider></article></section></nav></header>
¿Para que se usa la etiqueta <main>?
para añadir contenido principal
Definición de etiqueta <section>
agrupación del contenido del que trata la pagina
Definición de etiqueta <article>
Contenedor de bloques de contenido que se consideran independientes del sitio web y pueden ser vistos, reutilizados y distribuidos por separado
Definición de <asider></asider>
información tangencial que tenga que ver con la información principal.
Definición de <figure></figure>
agrupar y etiquetar el contenido multimedia
Definición de <b></b>
Trozo de texto para recalcar atención sobre él, con fines utilitarios
Definición de etiqueta <i></i>
fragmento de texto con voz o tono alternativo al resto o un elemento fuera de la prosa actual (cursiva resaltado visual)
Definición de etiqueta <strong></strong>
fragmento de texto importante
Definición de etiqueta de HTML4 <Div>
etiqueta genérica de bloque
Definición de etiqueta de HTML4 <span></span>
Contenedor generico en linea
Definicion de etiqueta de HTML4 <pre>
conservar el formato
Definición de etiqueta de HTML4 <table>
Para hacer una tabla
Definición de etiqueta de HTML4 <blockquote>
Añadir citas
Definición de etiqueta de HTML4 <ul>
para añadir listas sin ordenar
Definición de etiqueta de HTML4 <ol>
Para añadir listas ordenadas
Definición de etiqueta de HTML4 <dl>
añadir listas de definición
Definición de etiqueta de HTML4 <a></a>
Para enlaces e hipervinculos
Definición de etiqueta de HTML4 <iframe>
Dentro de una pagina meter el contenido de otra
Definición de etiqueta de HTML4 <embed></embed>/<object></object>
Para añadir recursos externos, ej. insertar pdf
Definición de etiqueta multimedia de HTML4 <canvas></canvas>
Para añadir lienzo para dibujar
Definición de etiqueta multimedia de HTML4 <svg></svg>
para añadir grafico vectorial ( manera de generar grafico y que no se pixele al cambiar de tamaño)
Definición de etiqueta multimedia de HTML4 <track></track>
Añadir subtitulos a nuestros videos o audios
¿Puede haber mas de una etiqueta <main>?
Si, pero todas las etiquetas menos 1 tienen que tener el apellido hidden
¿A qué se refieren estos productos: WebKit, Blink, Gecko?
Motor de renderización
¿Mediante que API podemos manipular los elementos de un documento HTML?
DOM (Document Object Model)
¿Cúal es la declaración de un documento HTML5?
‹!DOCTYPE html›
Cuando vemos un texto inicial dentro de una caja de texto (que se elimina en cuanto hacemos click sobre ella) en un formulario, ¿que atributo se ha utilizado?
placeholder
¿Como se llama a la técnica mediante la cual podemos realizar peticiones al servidor para traernos información (en formato JSON, XML,…) y realizar una actualización exclusivamente de una parte del documento HTML?
AJAX. El objeto principal se llama xmlHttpRequest
Nombre tres frameworks MVVM
Angular
ReactJS
VUE
Nombre dos herramientas de gestión de dependencias asociadas con el desarrollo web
bower
npm
¿Cómo se llama al tipo de producto que convierte un lenguaje de script como TypeScript (que no entiende el navegador) a uno que si entiende, como es el caso de JavaScript?
transpiler
Nombre dos herramientas de automatización de tareas asociadas al desarrollo web
gulp
grunt
Si tenemos un texto con saltos de linea, etc y queremos conservar exactamente ese formato, ¿qué etiqueta hay que utilizar?
pre
Nombre 4 etiquetas semánticas estructurales
section
article
nav
aside
¿Para que sirve el atributo “dir” ?
Para especificar la dirección del texto. Para idiomas como el arabe, etc
Nombre 9 API’s de HTML5
Geolocation
Canvas
WebSockets
Server Sent Events
File
Web Storage
WebWorker
IndexedDB
Drag and Drop
¿Cual es la etiqueta que representa a un contenedor en linea?
span
¿Para que sirve la etiqueta svg?
Para insertar graficos vectoriales
¿Cual es la declaración para asociarle al documento una hoja de estilos?
‹link rel=”stylesheet” href=”estilos.css”›
¿Como podría especificar una versión alternativa de su pagina, como por ejemplo una versión en PDF en frances?
‹link rel=”alternate” hreflang=”fr” type=”application/pdf” href=”pagina.pdf”›
¿Existe alguna forma de utilizar atributos personalizados dentro del documento HTML?
Los atributos data-*
¿Existen algun(os) atributos específicos para mejorar la accesibilidad de nuestras páginas?
Si, se denominan aria-* y el atributo role
Nombre tres funciones del API del DOM para poder seleccionar elementos dentro de la página
document.getElementById(id)
document.getElementByTagName(tag)
document.querySelector(selector)
¿Que es un polyfill ?
Es un plugin (libreria js) para poder simular una determinada feature (API de HTML5) que no está implementada de forma nativa en ese navegador que estamos utilizando
Si queremos poner un texto en negrita, ¿que etiqueta deberiamos de utilizar?
Con ‹strong›
recordar que ‹b› ha cambiado su signifcado por algo mas semantico como “Bring Attention”
¿Cuales son los dos atributos que nos permiten asociarle estilos a una etiqueta?
class (clase de estilos definida en un css externo o en el bloque style del head de la pagina)
style (estilo inline)
En HTML5, ¿se pueden seguir utilizando frames?
Si, pero solo el ‹iframe›
¿Con que atributo se puede editar de forma online un parrafo por ej?
Con el atributo contenteditable=”true”
¿Como se puede incrustar un video(reproductor) en una pagina html?
‹video src=”movie.ogg” controls=”controls”›‹/video›
¿Qué tres parámetros (atributos) se relacionan con el “Modelo de Caja” ?
margin
border
padding
¿Qué tipo MIME representa a una hoja de estilos?
text/css
¿Para qué sirve el siguiente selector? [title] { … }
selecciona todas las etiquetas a que tengan definido el atributo title
¿Para que sirve el siguiente selector?
[lang] { … }
selecciona todas las etiquetas que tengan definido el atributo Lang
¿Cómo se definen reglas específicas para adaptarse a un dispositivo móvil por ej.?
@media only screen and (max-width:640px) { … }
¿Qué se toma como referencia cuando decimos position:fixed?
La referencia es el documento siendo (0,0) la esquina superior izquierda
¿Qué se toma como referencia cuando decimos position:absolute?
La referencia es el contenedor en el que este definida la etiqueta afectada por este estilo
Nombre dos preprocesadores CSS
less
sass
Nombre tres frameworks CSS
bootstrap
foundation
materialize
Nombre dos at-rules
@charset
@font-face
¿Para qué sirve el siguiente selector?
table , a { … }
Se aplicarán los estilos sobre las etiquetas table y sobre a
¿Para qué sirve el siguiente selector?
table a { … }
Se aplicarán los estilos sobre las etiquetas a que estén dentro de una table (en cualquier nivel de profundidad)
¿Para que sirve el siguiente selector?
.texto { … }
Se aplicarán los estilos sobre todas las etiquetas que hayan declarado su atributo class de esta forma:
‹etiqueta class=”texto”› …
¿Cuál es es selector que se refiere a un elemento en base a su identificador?
identificador { … }
¿Para qué sirve este selector y comó se le denomina?
a:hover { … }
Se le denomina pseudo-clase y en este caso el significado es: se aplicarán estilos sobre los enlaces al pasar el raton por encima
¿Para qué sirve este selector y cómo se le denomina?
p::first-letter { … }
Se le denomina pseudo-elemento y en este caso el significado es: se aplicarán estilos sobre la primera letra de los párrafos
¿Para qué sirve la siguiente declaración en un archivo css externo por ej?
p { color:red !important; }
Para forzar a que los parrafos tengan texto en color rojo aunque haya cualquier otra regla (por ej. en el bloque con mayor prioridad/especificidad que intente cambiarlo
¿A que elementos se le aplica la “especificidad”?
A los selectores
https://specificity.keegan.st/ (buenísimo)
¿Qué propiedad(es) de las siguientes no se herendan entre etiquetas padre e hijos sin tener que forzarlo?
color
font-family
margin
text-align
El margin no se hereda por defecto, el resto si
¿Cómo se fuerza a heredar de tu etiqueta padre el valor que tuviera su propiedad float?
selector { float:inherit; }
¿Qué diferencia fundamental tienen estas dos declaraciones?
display:none
visibility:hidden
Aunque las dos provocan que se oculte el elemento, display:none no deja el hueco que ocuparia el elemento y visibility:hidden si deja ese espacio “en blanco”
¿Cómo podríamos preparar el contenido de una pagina para que se imprimiera lo mejor posible?
Modificando todo tipo de estilos de los elementos de la pagina de cara a imprimirse y usando por ej la regla @page para definir todo lo relativo al comportamiento de las paginas en impresión
Con @media print { … } dentro del bloque de la pagina
‹link rel=”stylesheet” type=”text/css” href=”/estilos-impresion.css” media=”print”/›
¿Con que etiqueta podríamos hacer uso de fuentes tipográficas externas?
@font-face
¿Qué tipo de unidad de media es “em” y que significa?
Es una unidad de medida relativa respecto de la fuente actual (contando con la herencia !ojo! )
¿Cuál de las siguiente medidas es relativa?
px
cm
rem
pt
rem es una unidad de medida relativa a la fuente definida en la raiz (etiqueta html)
¿Qué representa la propiedad z-index?
Con z-index, que acepta valores numéricos, podemos definir la altura/profundidad de nuestras capas (div por ej). Es decir, pasamos de ver una página en 2D a 3D
¿Para que se utiliza el atributo class?
Son clases de estilos definidas en las CSS
¿Que hace el atributo title?
te da informacion al pasar el raton por encima
¿Que nos dice el atributo translate?
Si es traducible o no
¿Que dice el atributo style?
Nos habla de estilos aplicados directamente en la etiqueta (inline)
¿Que hace el atributo tabindex?
establece el orden de movimiento cuando usamos el tabulador
¿Para que se utiliza la API File?
Para subir ficheros
¿Para que se usa la API Webworker?
Para lanzar una tarea en segundo plano
¿Para que se utiliza la API Websocket o Server Sent Events?
información que se manda sin que el cliente refresque una pagina. ej: estas cogiendo un hotel y te mandan un mensaje que te dice que el hotel ya no tiene habitaciones.
¿Cual es el tipo mime de CSS?
text/css
Nombra 4 frameworks de CSS
Bootstrap, Foundation, Bulma y Materialize
Cascada de importancia cuando dos o mas reglas coinciden en el mismo elemento, ordenados de mas importante a menos.
- Estilos relacionados con el documento.
- Estilos especificados por el usuario
- Estilos por defecto del navegador.
Todo esto cambia si en algun caso se ha puesto la etiqueta !important, que pasaria a ser el numero uno en importancia.
Atributos principales de la etiqueta form
- action (url del servicio/programa que procesara los datos del formulario)
- method (metodo segun el protocolo HTTP de envio, tipicamente en un form tendriamos GET o POST)
¿Que tipo de producto es Blink?
Motor de renderizado (procesa HTML + CSS)
* es un componente del navegador chromium y derivados y fue el sustituto de Webkit.
Uso de la etiqueta <header> y <head>
head: etiqueta que sirve para especificar metadatos, enlazar css…
header: etiqueta semantica que indica zonas de cabecera en un documento main, section…
Uso de la etiqueta <pre> y <code></code>
- pre: conservar el formato (saltos de linea, etc) de un parrafo
- code: para especificar que un texto es un bloque de lenguaje de programacion
¿Como se enlaza una hoja de estilos con una pagina HTML?
<link></link>
Enumera 6 posibles valores para el atributo “type” de <input></input>
Password, tel, email, number, time, color
Uso del atributo placeholder
texto que ponemos dentro de la caja como ayuda contextual, desaparece cuando el usuario escribe dentro
¿Como se especifica que un <input></input> es obligatorio?
atributo required
*ojo con la sintaxis de los atributos boolean, tiene mucha relacion con la pseudoclase: invalid :valid
¿Cuando usamos el atributo “style” o “class”?
- Style lo usamos para dar estilo a un elemento (inline) particular
- Class cuando queremos definir un estilo “reutilizables” y asignables a un conjunto de elementos
Etiquetas utilizadas para crear una tabla
“<table> <tr> <td> <th>
otras: <caption> <thead> <tfoot>”
¿Como se especifica que al cargar la pagina el foco se situe sobre un <input></input> especifico?
autofocus
Formas de añadir una imagen a una pagina HTML
<img></img>
<picture>
<svg>
<figure>
</figure></svg></picture>
Funcion del API Web Worker, Web Storage y Server-Sent Events
WW - lanzar tareas asincronas y no bloquear el hilo principal del navegador.
WS - capacidad desde javascript para guardar datos “clave-valor” en una pestaña o en el navegador.
NOTA: los objetos que se usan en este API se llama sesionstorage y localstorage
SSE: Envio de notificaciones desde al servidor al cliente (PUSH)
Uso de la etiqueta <ul> ¿Alguna alternativa?
Lista no ordenada
* la alternativa mas semantica seria la etiqueta <menu> (hijos de tipo li…)
Uso de la etiqueta <search> y <h7></h7></search>
<search> define una zona de busqueda (semantica)
<h7> no existe
</h7></search>
Propiedades que definene el “modelo de caja”
margin (TRBL), border (tamaño estilo y color ;ej. 2px dashed red) y padding (
¿Como se define el selector para un elemento cuyo valor de atributo “id” es “abc”?
”
#abc {
estilos;
}
“
¿Como podemos poner en color rojo todos los parrafos que haya directamente dentro de un div?
div>p {
color: red;
}
¿En que consiste el mecanismo de la herencia?
Que los hijos heredan de forma automatica ciertas properties del padre
* font-size es de las properties mas importantes que se heredan
¿En que consiste el posicionamiento “sticky”?
Es un posicionamiento de un bloque que “sobrevive” al posible scroll de la pagina
¿Cual es la utilidad de un preprocesador CSS? ¿y de un framework CSS? ejemplos
Preprocesador: Ayudar al desarrollador a confeccionar hojas de estilo con una sintaxis mas potente que CSS
* tenemos que realizar un proceso de traduccion a css porque el navegador no entiende estos lenguajes.
Ejemplos: less sass stylus.
Frameworks: conjunto de clases de estilos predefinidas (posicionamiento, botones, componentes…)
Ej: Bootstrap, TailWind, Material, Foundation….
¿Como se especifica que queremos en cursiva una fuente en CSS?
font-style: italic;
¿Como podemos hacer pata que los parrafos empiecen por mayuscula?
p {
text- transform: capitalize;
}
p::first-letter {
text-transform:uppercase;
}
¿Podemos asignarle dos clases de estilos diferentes a un cierto elemento?
“si <elemento class=’‘clase1 clase2’’>
“
¿Podemos importat dentro de una css el contenido de otra?
@import url(“…/estilos.css”)
¿Como se podrian definir unos estilos que unicamente tengan efecto a partir de una cierta resolucion?
“@media screen and (min-width:900px){
}
¿Como se pueden aplicar estilos a los enlaces cuando pasas el raton por encima?
a:hover {
}
Si tenemos dos selectores que afectan a un <button> uno en estilos1.cc y otro en estilos2.css) ¿Cuál tendrá mas preferencia?</button>
Sin mas datos, tendría mas preferencia el ultimo que haya “enlazado” (link rel=… href=…)
¿Para que usamos la declaración !important?
Para aumentar la prioridad de ese estilo dentro de la cascada
Significado de las unidades rem, em, vw, vh
rem: unidad relativa a la raíz (etiqueta <html>)
em: unidad relativa al tamaño que heredas del padre
