HTML/CSS Flashcards
Resumen del tema html css
Motor de renderizado Microsoft Edge
Trident -> EdgeHTML -> Blink
Motor de renderizado Chrome
Webkit -> Blink
Motor de renderizado Firefox
Gecko <- Quantum (antiguo)
Motor de renderizado Opera
Presto-> Blink
Motor de renderizado Safari
Webkit
¿Que tipo de etiquetas existen en HTML 5?
APIs
Semantica
Multimedia
¿Qué elementos conforman una arquitectura web?
HTML
CSS
JAVASCRIPT
¿Qué preprocesadores de CSS conoces?
LESS
SASS
STYLUS
Qué es un lenguaje transpilado
El proceso convierte de código a código
Typescript, Coffescritp, ES6
¿Cómo harias una lista enlazada ordenada en html?
- Deportes de equipo
- Fútbol
- Baloncesto
- Balonmano
- Deportes individuales
- Tenis
- Boxeo
<ol> <li>Deportes de equipo</li> <ol> <li>Fútbol</li> <li>Baloncesto</li> <li>Balonmano</li> </ol> <li>Deportes individuales</li> <ol> <li>Tenis</li> <li>Boxeo</li> </ol> </ol>
¿Cómo harias una lista enlazada NO ordenada en html?
- Deportes de equipo
- Fútbol
- Baloncesto
- Balonmano
- Deportes individuales
- Tenis
- Boxeo
<ul> <li>Deportes de equipo</li> <ul> <li>Fútbol</li> <li>Baloncesto</li> <li>Balonmano</li> </ul> <li>Deportes individuales</li> <ul> <li>Tenis</li> <li>Boxeo</li> </ul> </ul>
4 Frameworks MVVM
Angular
ReactJS
VUE
Ember
Puedes nombrar 3 lenguajes transpilados
Typescript
Coffeescript
ES6
Dos herramientas de automatización
Gulp
Grunt
Tres herramientas de gestión de dependencias
Bower
Yarn
Rpm
Conoces algún editor de html/css
ATOM
Sublime
VSCode
APIs html5
Geolocation
Canvas
WebSocket / Server side events
Drag and Drop
IndexedDB
Web Storage (Local, session)
File (control de uploads)
WebWorker
Selector (css)
Microdata/Dataset
Etiquetas semanticas html
secction
article
nav
aside
header
footer
Etiquetas básicas html
< div> -> Bloque
< span> -> Inline
< table> -> tabla
< pre> -> texto con formato
< blockquote> -> citas
< ul> / < ol> / < dl> -> Desordenadas / ordenadas / definición
< a> -> Enlaces
< img> -> Imagenes
< iframe> ->
< embed> / < object> -> recursos externos
Etiquetas multimedia html
< audio [controls/autoplay] >
< video [controls/autoplay]>
< track> -> hijo de audio y video, subtitulos / karaoke
< canva> -> lienzo para dibujar
< svg> -> dibujo vectorial en xml
Etiquetas de encabezado
< meta name=”keyword / author” charset=”utf-8” >
< link rel=”alternate / stylesheet / prev / next” href=”url enlazada” hreflang=”en / es / fr” media=”only screen and …–para impresion–”
Etiquetas de Formulario
< label > < input min/max="10" pattern="{a-z}" multiple placeholder="texto alt" autofocus autocomplete required type =" text number range search tel radio checkbox selection time email pwd color date datetime submit " > < textarea > < button type ="submit / button / reset">
¿Que atributos para elementos de formulario conoces y que uso tienen?
- autofocus -> se posa el cursor a cargar la pagina
- autocomplete-> activa la opción de autocompletado del navegador
- min / max -> Minimo valor / Maximo valor
- pattern (regex) -> formato del campo
- multiple -> selección multiple
- placeholder-> Texto explicativo que desaparece al hacer focus
- required -> campo obligatorio
¿Cómo se definen atributos personalizados en html ?
data-XXXX
Ej.:
< td data-catergoria=”unaCategoria”
A través de DATASET API de javascript-> objetotd.dataset.categoria
¿Podemos definir semantica de tipos de datos? ¿Cómo?
https://schema.org
Ej.:
< secction itemscope itemtype:”http://schema.org/peson” >
<p>
< img itemprop="image" src="foto.gif">
< span itemprop="email" />
< span itemprop="name" />
</p>
Atributos html 5 globales
id -> Identificador de elemento
class -> Estilo que se le aplica al elemento
title -> Información al pasar al ratón
translate -> yes/no, si debe ser traducido
sytle -> Se aplican los estilos directmanete al elemento
dir -> Dirección del texto. ltr-> derecha a izquierda. rtl ->
lang -> idioma del elemento
contenteditable
tabindex -> Orden de profundidad del elemento
draggable -> Se puede arrastrar. Hay que poner true/false
spellcheck -> corrección ortografica.. Hay que poner true/false
hidden -> elemento oculto
¿Existen atributos para accesibilidad?
Si, role y aria-*
Commonly used examples include aria-describedby, aria-haspopup, aria-hidden, aria-label, and aria-labelledby
DOM: dos propiedades
Firstchild
childnodes
DOM: métodos
NODE -> appendChild()
NODE -> hasAttributes()
DOC -> getElementByName()
DOC -> createElement()
DOC -> getElementById()
DOC -> getElementByTagName()
DOC -> getElementByClassName()
DOC -> querySelector(selector)
DOC -> querySelectorAll(selector)
Diagrama DOM
¿Qué es polyfills?
Cuando un navegador no implementa de forma nativa un API se puede simular con unos pug-in js llamados polyfills
En que versión está CSS y como ha sido su evolución
CSS1 -> Modelo de cajas, estilo de Fuentes, Colores, Texto, Cascada, Psudoclases
CSS2.x -> Posicionamiento: Absoluto, Relativo + float / clear
Tipos de media: @media print / @media screen
Capas: z-Index
Selectores avanzados
Efectos -> sombras, transformaciones
CSS3 -> Media Querys (responsive) FlexBox / Grid
Modules (IMP)
Animaciones / Efectos / Nuevos Selectores
Frameworks CSS
Conjunto de estilos y funcionalidades ya creados para ser usados
Bootstrap
Foundation
Bulma
Materialize
Cómo funciona un preprocesador como SASS
Con un ejemplo:
mixin card($ancho, $alto, $bg, $borde){
with: $ancho;
height: $alto;
background: $bg;
border: $borde
}
.card1 {
@include card(300px, 200px, yellow, red 2px solid);
}
.card2 {
@include card(400px, 300px, blue, black 1px dotted);
}
¿En qué tres ubicaciones es posible definir estilos css?
- Fichero: Los estilos están contenidos en un ‘fichero.css’.
- HTML: Los estilos están definidos en el propio fichero html. < style> </ style>
- TAG: Los estilos están definidos en la propia etiqueta con el atributo ‘style’. <p style=""></p>
Cómo se resuelve un estilo si un elemento html tiene varios estilos definidos
Se resuelve en cascada desde menos prioritario a más prioritario
Estilos predefinidos Navegador
Estilos definidos por el Usuario
Estilos definidos por la Página
Estilos definidos por la Página !important
Estilos definidos por el Usuario !important
*Hay que tener en cuenta, si tenemos hoja de estilos y definimos en la propria página con se resolverá por orden, es decir, si importo la hoja.css antes de los estilos en style serán más prioritarios. Si por el contrario importo la hoja.css despues de la etiqueta <style> los estilos de la hoja serán más prioitarios si hay conflicto.
En el caso de añadir el estilo directamente en el elemento (<p style="..........." >), este será el prioritario</style>
¿Qué selectores existen en CSS?
etiqueta {….}
#identificador {….}
.clase {….} —> <h1 class="XXXX"></h1>
etiqueta.clase {….} —> la clase se aplica a la etiqueta
etiqueta1, etiqueta2 {….} —> Agrupamiento, selectores independientes mismo estilo
etiqueta1 etiqueta2 {….} —> contextuales, aplica a etiqueta2 dentro de etiqueta1 a cualquier nivel
etiqueta1 > etiqueta2 {….} —> etiqueta2 dentro de etiqueta1 directamente
a ~ b {….} —> Aplica si b es hermano de a
a + b {….} —> Aplica si b es hermano ‘directo’ de a
E[ atr^ = algo ] —> que empieza por ‘algo’
E[ atr$ = algo ] —> que termina por ‘algo’
E[ atr* = algo ] —> que contenga ‘algo’
E[ atr~ = val1 ] —> que contenga en la lista ‘val1’ =>
E[ atr ] —> que tenga definido el atributo
Qué significa el selector: etiqueta {….}
Aplica el estilo al elemento/s con etiqueta ‘etiqueta’
Qué significa el selector: #identificador {….}
Aplica el estilo al elemento con identificador ‘#identificador’
Qué significa el selector: .clase {….}
Se selecciona la clase en el elemento < h1 class=”clase clase2 clase3”></h1>
Qué significa el selector: etiqueta.clase {….}
La clase se aplica a la etiqueta que quiera aplicar esa clase
Qué significa el selector: etiqueta1, etiqueta2 {….}
Agrupamiento, selectores independientes mismo estilo
Qué significa el selector: etiqueta1 etiqueta2 {….}
Contextuales, aplica a etiqueta2 dentro de etiqueta1 a cualquier nivel
Qué significa el selector: etiqueta1 > etiqueta2 {….}
Etiqueta2 dentro de etiqueta1 directamente
Qué significa el selector: a ~ b {….}
Aplica si b es hermano de a
Qué significa el selector: a + b {….}
Aplica si b es hermano ‘directo’ de a
Qué significa el selector: E[ atr^ = algo ]
Que el atributo empiece por ‘algo’
Qué significa el selector: E[ atr$ = algo ]
Que el atributo termine por ‘algo’
Qué significa el selector: E[ atr* = algo ]
Que el atributo contenga ‘algo’
Qué significa el selector: E[ atr~ = val1 ]
Que el atributo sea una lista y que este en ella ‘val1’ => ATR=”val1 val2 val3….”
Qué significa el selector: E[ atr ]
Que tenga definido el atributo ‘atr’
¿Que es una pseudo-clase?
Parte del selector que hace referencia a una acción/propiedad sobre el selector
selector:pseudoClase {………}
Ej.:
:active
:hover
:visited
:invalid
:empty
:required
:first-child
:nth-child()
:not(selector)
:lang()
Qué significa la pseudo-clase :active
The :active CSS pseudo-class represents an element (such as a button) that is being activated by the user. When using a mouse, “activation” typically starts when the user presses down the primary mouse button.
Qué significa la pseudo-clase :hover
The :hover CSS pseudo-class matches when the user interacts with an element with a pointing device, but does not necessarily activate it. It is generally triggered when the user hovers over an element with the cursor (mouse pointer).
Qué significa la pseudo-clase :visited
The :visited CSS pseudo-class applies once the link has been visited by the user. For privacy reasons, the styles that can be modified using this selector are very limited. The :visited pseudo-class applies only to <a> and elements that have an href attribute.</a>
Qué significa la pseudo-clase :invalid
The :invalid CSS pseudo-class represents any < form>, < fieldset>, < input> or other < form> element whose contents fail to validate.
Qué significa la pseudo-clase :empty
The :empty CSS pseudo-class represents any element that has no children. Children can be either element nodes or text (including whitespace). Comments, processing instructions, and CSS content do not affect whether an element is considered empty.
Qué significa la pseudo-clase :required
The :required CSS pseudo-class represents any < input>, < select>, or < textarea> element that has the required attribute set on it.
Qué significa la pseudo-clase :first-child
The :first-child CSS pseudo-class represents the first element among a group of sibling elements.
Qué significa la pseudo-clase :nth-child()
The :nth-child() CSS pseudo-class matches elements based on the indexes of the elements in the child list of their parents. In other words, the :nth-child() selector selects child elements according to their position among all the sibling elements within a parent element.
Qué significa la pseudo-clase :not(selector)
The :not() CSS pseudo-class represents elements that do not match a list of selectors. Since it prevents specific items from being selected, it is known as the negation pseudo-class.
Qué significa la pseudo-clase :lang()
The :lang() CSS pseudo-class matches elements based on the language they are determined to be in.
¿Qué es un psudo-elemento?
Un pseudoelemento CSS es una palabra clave agregada a un selector que le permite dar estilo a una parte específica de los elementos seleccionados.
Ej.:
::after
::before
::first-line
::first-letter
Qué significa el pseudo-elemento ::after
In CSS, ::after creates a pseudo-element that is the last child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.
Qué significa el pseudo-elemento ::before
In CSS, ::before creates a pseudo-element that is the first child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.
Qué significa el pseudo-elemento ::first-line
The ::first-line CSS pseudo-element applies styles to the first line of a block container.
Qué significa el pseudo-elemento ::first-letter
The ::first-letter CSS pseudo-element applies styles to the first letter of the first line of a block container, but only when not preceded by other content (such as images or inline tables).
Herencia y prioridad de CSS. Cuentame cosas.
Cuando dos o más reglas coinciden en el mismo elemento. De menos a más:
Estilos por defecto del navegador
Estilos especificados or el usuario
Estilos relacionados con el documento
+ archivo externo
+ al principio del documento
+ en un elemento especifico
En CSS, ¿Se transmiten las propiedades de padres a hijos?
Algunas propiedades se transmiten de padres a hijos
color
font-*
text-*
line-height
…
Si queremos forzar la herencia lo podemos hacer con ‘inherit’ si el atributo no se hereda:
p{
background: inherit;
}
¿Que propiedades de position tenemos?
Podemos posicionar los elementos en la página:
- static (defecto) –> orden natural. Normal flow, ocupa lugar, no tiene efecto TRBL
- relative –> movimiento referido desde la posición static. Ocupa el lugar y se desplaza desde ahi
- absolute –> movimiento referido en base al contenedor padre. No ocupa lugar
- fixed –> movimiento referido en base al documento. No ocupa lugar
- sticky –> como relative pero se queda pegado a la parte superior cuando se hace scroll
top, bottom, left, right, z-index = para establecer las coordenadas del elemento. TRBL
¿Qué hace la propiedad float?
La propiedad CSS coloca un elemento en el lado izquierdo o derecho de su contenedor, lo que permite que el texto y los elementos en línea se adapten a él. El elemento se elimina del flujo normal de la página, aunque sigue siendo parte del flujo (a diferencia del posicionamiento absoluto ).float
left / right
¿Qué hace la propiedad clear?
La propiedad CSS clear especifica si un elemento puede estar al lado de elementos flotantes que lo preceden o si debe ser movido (cleared) debajo de ellos. La propiedad clear aplica a ambos elementos flotantes y no flotantes.
left / right / both
¿Qué propiedades de posicion hay para mostrar elementos con la propiedad display?
La propiedad CSS display especifica si un elemento es tratado como block or inline element y el diseño usado por sus hijos, como flow layout(Diseño de Flujo), grid(Cuadricula) o flex(Flexible).
none (no renderiza, con hidden si renderiza)
inline (horizontal)
inline-block
block (vertical)
flex Nuevo modelo
grid Nuevo modelo
Propiedades de fuentes
@font-face{
font-size: 1.5em;
font- family: “font-family”;
font-style: normal/italic/bold;
font-weight: 400;
src: local () // url()
}
Propiedades de textos
letter-spacing
text-indent
line-height
hyphens
word-break
text-align
text-overflow
text-transform
text-decoration
Qué unidades tenemos en CSS
Absolutas:
in –> pulgadas
cm –> centimetros
pc –> picas
mm –> milimetros
pt –> puntos
px –> pixeles
q –> cuarto de mm
Relativas
em –> ‘M’ tamaño fuente del navegador, elemento padre
ex –> ‘x’ mitad de em
ch –> ancho del 0
rem –> Tamaño del elemento raíz
% –> en porcentaje
vw –> Viewport ancho
vh –> Viewport alto
Cuál es el motor web desarrollado por The Mozilla Foundation?
a) WebKit
b) Firefox
c) Gecko
d) Edge
c) Gecko
Señale la respuesta correcta en relación a las tecnologías y herramientas de desarrollo front-end:
a) Sass, Less y Stylus, son preprocesadores de CSS.
b) Postman es una herramienta que sirve para probar la parte de front-end, no permitiendo validar los servicios REST.
c) Nodejs fue construido con el motor de java jre 1.9
d) Bootstrap es una hemamienta de desarrollo que permite realizar test de los servicios REST, aislando al programador del
front-end.
a) Sass, Less y Stylus, son preprocesadores de CSS.
Se necesita presentar una estadística utilizando HTML5 mediante una tabla en la que una de sus columnas contendrá la descripción de cada Proceso Selectivo. Suponiendo que a dicha columna la denominamos “Proceso”, ¿qué etiqueta
deberá usar para definir la celda de encabezado de la tabla para dicha columna, con un formato de
a) <th>Proceso</th>
b) <tableheader>Proceso</tableheader>
c) <theader>Proceso</theader>
d) <tableh>Proceso</tableh>
a) < th>Proceso</ th>
Le indican que debe presentar también una lista de opositores con las notas correspondientes a los dos primeros
ejercicios. Las notas se representarán como una lista anidada para cada opositor, debiendo ser el resultado a obtener:
- Opositor
* Nota 1
* Nota2
¿Cuál es el código HTML5 correcto si presentamos un solo opositor?
a) < ul>< li>Opositor< ul>< li>Nota 1</ li>< li>Nota 2</li></ul></li></ul>
b) < ul>< li>Opositor></li></ul>< ul>< li>Nota 1 </li>< li>Nota 2</li></ul>
c) < ul>Opositor< li>Nota 1Nota 2</ul>
d) < li>Opositor</li>< li>Nota 1</li>< li>Nota 2</li><li>
a) < ul><li>Opositor<ul>< li>Nota 1</ li><li>Nota 2</li></ul></li></ul>
En el formulario web de inscripción se le pide forzar a la introducción del nombre del opositor como campo obligatorio.
Para dosarrollr esa petición. de entre las sigulentes opciones de código, ¿cuál debería ulizar para incorporario en el
fragmento de código marcado como [——————————————]?
< form>
< label for=”username”>Nombre de Opositor:</label>
[——————————————]
< input type=”submit” value=”Confirmar”/>
</ form>
a) < input type=”text” name=”username” required/>
b) < input type=”text” name=”username” enforced/>
c) < input type=”text” name=”username” mandatory/>
d) < input type=”text” name=”username” compulsory/>
a) <input></input>
En la página web a la que accederán los aspirantes, se quiere aplicar el color verde a todos los elementos que tengan
etiqueta <a> que sean hijos de un elemento con etiqueta <li> ¿Cuál es el cdigo CSS adecuado?</a>
a) li.a (color: green;)
b) li>a (color: green;)
c) li#a (color: green;}
d) li_a {color: green;}</li></a>
b) li>a (color: green;)
Un compañero le consulta la forma de aplicar el modelo de Diseño de Caja Flexible (Flexbox) a un elemento div con id=”principal”. De entre los siguientes, ¿cuál es el codigo CSS correcto que debería proponer?
a) div#principal {display:flex;}
b) div#principal {display:flexbox;}
c) div#principal {display: flex-container;}
d) div#principal {display: flexible;}
a) div#principal {display:flex;}
Se ha realizado un vídeo explicativo para los opositores y se ha publicado en una página web. ¿Qué mostrará el
siguiente fragmento de código en un navegador que soporte HTML5:
<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> No soportado </video>
a) Se mostrarán los dos vídeos “movie.mp4” y “movie.ogg”.
b) Se mostrará el mensaje “No soportado” en todos los casos.
c) Se mostrará el vídeo “movie.mp4” si el navegador soporta el formato mp4.
d) No se mostrará nada porque el código no está bien formado.
c) Se mostrará el vídeo “movie.mp4” si el navegador soporta el formato mp4.
También se requiere definir en el informe un hipervínculo en HTML5. ¿Qué etiqueta deberia utilizar?
a) <link></link>
b) <a>
c) <goto>
d) <hlink></hlink></goto></a>
b) <a></a>
¿Cuál de las siguientes opciones representa una de las nuevas etiquetas introducidas por HTML5?
a) < progress>
b) < socialmedia>
c) < blog>
d) < navigation>
a) < progress>
Considerando como premisa la existencia del archivo foto.ipg en la misma ubicación que el archivo que contiene el
código HTML indicado a continuación, ¿qué mostraría en pantalla el siguiente código?
< a href=”https://www.boe.es” >< img src=”foto.ipg” alt=”Acceso al BOE” / >< /a>
a) Mostraría la imagen foto.ipg siendo esta un hipervínculo a la página hitps://www.boe.es
b) Mostraría el texto “Acceso al BOE” siendo este un hipervínculo a la página hitps:/Mwww.boe.es
C) Mostraría la imagen folojpg y a continuación el texto “Acceso al BOE”, siendo este un hipervinculo a la página
hitps://ww.boe.es
d) Mostraría el texto “Acceso al BOE” como hipervínculo a la página https://www.boe.es y a continuación la imagen foto.jpg
a) Mostraría la imagen foto.ipg siendo esta un hipervínculo a la página hitps://www.boe.es
En el formulario de inscripción a las acciones formativas se pretende que al cargar la página, el foco del ratón se posicione automáticamente en el campo NIF. En HTMLS indique con cuál de las siguientes expresiones lograría dicho
comportamiento:
a) < label for=”value”>NIF < /label>< input id=”nif” type=”text” placeholder=”123456789-Letra” focus=”on”>< br>
b) < label for=“value”>NIF < label>< input id=”nif” type=”text” placeholder=”123456789-Letra” autofocus>< br>
c) < label for=“value”>NIF < label>< input id=”nif” type=”text” placeholder=”123456789-Letra” onLoad()=”focus”>< br>
d) Automáticamente, el foco pasa al primer elemento del formulario, por lo que no es necesario establecerlo explicitamente
b) < label for=“value”>NIF < label>< input id=”nif” type=”text” placeholder=”123456789-Letra” autofocus>< br>
Se le pide la personalización del área privada de cada persona inscrita, ¿qué control de HTML5 permite mostrar un
selector de color?
a)
b)
c)
d)
a)
Se le pide la personalización del área privada de cada persona inscrita, ¿qué control de HTML5 permite mostrar un
selector de color?
a) < input type=”color” name=”favcolor”>
b) < input type=”uipicker” name=”favcolor”>
c) < input type=”range” name=”favcolor”>
d) < input type=”selector” name=”favcolor”>
a) < input type=”color” name=”favcolor”>
Dentro de la hoja de estilos del organismo está incluida la siguiente declaración:
ul { list-style-type: lower-alpha; )
Indique el objetivo de la declaración
a) Aplica a las listas un tipo de viñeta basado en números romanos en minúscula.
b) Aplica a las listas un tipo de viñeta basado en letras ascii en minúscula.
c) Aplica a las listas un tipo de viñeta basado en letras arábigas en minúscula.
d) Aplica a las listas un tipo de viñeta basado en letras griegas en minúscula.
b) Aplica a las listas un tipo de viñeta basado en letras ascii en minúscula.
Si quiero aplicar un estilo a todos los elementos con atributo class=”titulo” en varias páginas HTML, definiré en
la hoja de estilos CSS3 asociada el selector:
a) #titulo
b) :titulo
e) .titulo
d) título
e) .titulo
En una hoja de estilos CSS3, el estilo definido en el selector div + p se aplicaría a todos los elementos:
a) <p> situados dentro de elementos <div>
b) <p> situados justo después de un elemento<div>.
c) <div> y todos los elementos <p>
d) <p> cuyo padre sea un elemento <div>
b) <p> situados justo después de un elemento <div>
Delos siguientes, ¿cuál es un preprocesador de CSS?
a) kotin
b) Stylus
c) Babel
d) Flexbox
b) Stylus
En la nueva aplicación se utilizará HTML5 para la parte de presentación, se quiere mostrar una figura con dos
imágenes, ¿qué expresiones de las siguientes habría que utilizar?
a) < figure src=”imagen.ipg” alt=”descripción imagen1”/>
< figure src=”imagen2.jpg” alt=”descripción imagen2”/>
b) < figcaption caption=”Mis dos imágenes”>
< fig src=”imagen1.jpg”a lt=”descripción imagen1”>
< fig src=”imagen2.pg”a lt=”descripción imagen2”>
</ figcaption>
c) figure { src: “imagenl.ipg”; src: “imagen2.ipg”; }
d) < figure>
< figcaption>Mis dos imágenes</figcaption>
< img src=”imagen1.jpg” alt=’descripción imagen1”>
< img src=”imagen1.jpg” alt=’descripción imagen2”>
</ figure>
d) < figure>
< figcaption>Mis dos imágenes</ figcaption>
< img src=”imagen1.jpg” alt=’descripción imagen1”>
< img src=”imagen1.jpg” alt=’descripción imagen2”>
</ figure>
Para un párrafo <p> de la aplicación web dado, señale cuál es la respuesta correcta en base a las siguientes opciones de estilos CSS que aplican a dicha etiqueta:
Opción 1:
En las hojas de estilo de autor se ha definido el estilo: P {color: black;}
En las hojas de estilo de usuario se ha definido el estilo: P {color : red;}
Opción 2:
En las hojas de estilo de autor se ha definido el estilo: P {color: black;>
En las hojas de estilo de usuario se ha definido el estilo: P {color : red !important;}
a) Según la opción 1, el párrafo aparecería en rojo y según la opción 2 en rojo
b) Según la opción 1, el párrafo aparecería en negro y según la opción 2 en negro.
c) Según la opción 1, el párrafo aparecería en negro y según la opción 2 en rojo.
d) Según la opción 1, el párrafo aparecería en rojo y según la opción 2 en negro.</p>
c) Segun la opción 1, el párrafo aparecería en negro y según la opción 2 en rojo.
En la nueva aplicación, en la parte del desarrollo con HTML5, se desea usar la caché para especificar los recursos que el navegador debería guardar y tener disponibles para los usuarios cuando no estén conectados, para habilitar la caché de aplicaciones, debe incluir el siguiente atributo:
a) <? manifest appcahe = “ejemplo.appcache”>
b) < html5 appcache=”manifest.appcache”>
c) < html text/cache=”manifest=”ejemplo.appcache”/>
d) < html manifest=”ejemplo.appcache”>
d) <html manifest="ejemplo.appcache">
¿Cómo se inicia una página en HTML?
<!DOCTYPE html>
¿Cómo incluirias metadatos en una página html?
< meta>
< meta name=”copyright” content=”© 2006 MDC”>
< meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
¿Cómo incluirias un hoja CSS externa en una pagina html?
< link rel=”stylesheet” href=”css/hoja.css”>
Enlazar al documento html una página alternativa en pdf y en idioma francés
< link type=”application/pdf” rel=”alternate” hreflang=”fr” href=”doc.pdf” />
¿Qúe etiquetas de formulario conoces?
< form action=”” method=”get” class=”form-example”>
< input type=”button”>
< input type=”checkbox”>
< input type=”color”>
< input type=”date”>
< input type=”datetime-local”>
< input type=”email”>
< input type=”file”>
< input type=”hidden”>
< input type=”image”>
< input type=”month”>
< input type=”number”>
< input type=”password”>
< input type=”radio”>
< input type=”range”>
< input type=”reset”>
< input type=”search”>
< input type=”submit”>
< input type=”tel”>
< input type=”text”>
< input type=”time”>
< input type=”url”>
< input type=”week”>
< /form>
Le piden que al cargar el formulario se inicie automaticamente un audio, y que se posibilite al usuario controlar la reproduccién del mismo. ¿Qué etiqueta utilizaría para ello?
a) < audio controls autoplay> < source src=”audio.mp3” type=”audio/mpeg”>< /audio>
b) < audio controls=”on” autorun=”on”> < source src=”audio.mp3” type=”audio/mpeg”>< /audio>
c) < audio controls autorun> < source sre=”audio.mp3” type=”audio/mpeg”>< /audio>
d) < audio controls=”yes” played> < source src=”audio.mp3” type=”audio/mpeg”>< /audio>
a) < audio controls autoplay> < source src=”audio.mp3” type=”audio/mpeg”>< /audio>
Atributos principales de la etiqueta form
- action: url o servicio/programa que procesará los datos del formulario
- method: metodo de envio segun el protocolo HTTP, tipicamente get o post
Uso de la etiqueta <header> y <head>
- head: etiqueta que nos sirve para especificar metadatos, enlazar css etc.
- header: etiqueta semantica que indica la cabecera en un, documento, main, section
Uso de la etiqueta < pre> y < code>
- pre: conserva el formato de un texto (parrafo)
- code: para especificar que un texto es un bloque de código (programación)
Uso del atributo placeholder
Texto que ponemos en la caja como ayuda contextual, desaparece cuando se pone el foco en el campo
Enumera 6 posibles valores de ‘type’ del < input> nuevos en la version HTML5
tel, email, number, color, date, month,
¿Cómo se especifica que un < input> es obligatorio?
Atributo required
NOTA: ojo con la sintaxis de los atributos boolean
NOTA: tiene mucha relación con la pseudoclase :valid e :invalid de css
¿Cuando usamos el atributo “style” o “class”?
- style lo usamos para dar estilo (inline) a un elemnto particular
- class cuando queremos definir unos estilos “reutilizables” y asignables a un conjunto de elementos
Etiquetas para crear una tabla
TÍPICAS: < table> < tr>< td>|<th>
OTRAS: < caption> < theader>< tfoot>
¿Cómo se especifica que al cargar la página el foco se situe sobre un < input> especifico?
autofocus
NOTA: recordar también el atributo tabindex
NOTA: relacionado con la pseudoclase :focus
NOTA: en javascript (onfocus, onblur)
Formas de añadir una imagen a una página
- < img src=”url/gif….”>
- < img src”data:image/base64;” -> imagen embebida a en la propia pagina
- < picture>
- < svg>
- < figure>
Funcion del API WebWorker
Lanzar tareas asincronas y así no bloquear el hilo principal del navegador. No van al servidor.
NOTA: AJAX y FETCH valen para lanzar peticiones de datos asincronas al servidor para recupeperar info.
Función del API WebStorage
Capacidad desde javascript para guardar datos “clave-valor” en una pestaña o en el navegador
NOTA: Los objetos que se unsan en este API se llama sesionStorage y localStorage
Función del API Server-Sent Events
Envio de notificaciones desde el servidor al cliente (PUSH)
Uso de la etiqueta <ul>
Lista no ordenada (hijos del tipo li)
NOTA: La alternativa más semantica sería la etiqueta <menu> con hijos <li>
Propiedades que definen al “modelo de caja”
- margin
- border => tamaño estilo color (ej 2px dashed red)
- padding
*TRBL para asignacion de propiedades si no van las cuatro (TRBL= Top Right Bottom Left)
¿Cómo se define el selectyor para un elemento cuyo valor del atributo “id” es “abc”?
#abc{ estilos... }
¿Cómo podemos poner el color rojo en todos los párrafos que haya directametne dentro de un div?
div > p { color: red; }
¿En que consiste el mecanismo de la herencia?
Se heredan atributos de padres a hijos de manera automatica, pero solo ciertos de ellos, si queremos forzar algún atributo que no se herede por defecto, hay que indicarlo.
NOTA de opinion del profe: font-size de las más importantes que se heredan (con esto se entiende bien “em”)
¿En que consite el posicionamiento “sticky”?
Es un posicionamiento de un bloque que “sobrevive” al posible scroll de la página, se queda arriba. Cómo ‘relative’ hasta que se pega
¿Cuál es la utilidad de un preprocesador CSS? ¿y de un framework CSS? Pon ejemplos
- Ayudar al desarrollador a confeccionar hojas de estilo con una sintaxis más potente que css.
NOTA: tenemos que realizar un proces de “traducción a css” porque el navegador no los entiende. Transpiler/compiler
Ej.: less/sass/stylus
- Conjunto de clases ya predefinidas (posicionamiento, botones, componentes…)
Ej.: Bootstrap (twitter), Material(google), TailWind, Foundation, Bulma
¿Cómo se especifica que queremos en cursiva una fuente en css?
font-style: italic;
¿Cómo podemos hacer para 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?
<elemento class=”clase1 clase2….”
¿Podemos importar dentro de una css el contenido de otra?
@import url(“……./estilos.css”)
¿Cómo se podrian definir unos estilos que unicamente tengan efecto a partir de una cierta resolución?
@media screen and (min-width: 900px){
}
¿Cómo se pueden aplicar estilos a los enlaces cuando pasas el ratón por encima?
a:hover{
}
Si tenemos dos selecctores que afectan a un <button> (uno en estilos1.css y otro en estilos2.css) ¿Cuál tendrá más preferencia?</button>
Sin más datos, tendría más preferencia el último que se haya enlazado (link)
¿Para que usamos la declaración !important?
Para aumentar la prioridad de ese estilo dentro de la “cascada” de prioridades
Significado de las unidades rem, em, vw, vh
rem: unidad relativva a la raiz (etiqueta <html>)
em: unidad relativa al tamaño que hereda del padre
section{ font-size:40px;}
p{ font-size: 0.5em;}
<div>
<secction>
<p> <!-- E p tendraá fuente 20px= 40px*0.5--></secction>
vw y vh: unidades relativas al “viewport” (vmax, vmin)
Como se inicia una página HTML5
<!DOCTYPE html>