a que etiqueta semantica corresponde:
*es un contenedor de bloques de contenido independientes del sitio web. Pueden ser vistos, reutilizados y distribuidos por separado. Está permitido anidar articulos dentro de secciones y al revés
*representa una agrupación del contenido del que se trata en la página
*representa información tangencial, ligeramente relacionada con el contenedor section/main/article/…
*representa el pie de un documento o contenedor section/main/article/…
representa el encabezado de un documento o contenedor section/main/article/…
* contenido principal del documento ()
* zona con enlaces de navegación en el ámbito de nuestro site
<article> es un contenedor de bloques de contenido independientes del sitio web. Pueden ser vistos, reutilizados y distribuidos por separado. Está permitido anidar articulos dentro de secciones y al revés
<section> representa una agrupación del contenido del que se trata en la página
<aside> representa información tangencial, ligeramente relacionada con el contenedor section/main/article/...
<footer> representa el pie de un documento o contenedor section/main/article/...
<header> representa el encabezado de un documento o contenedor section/main/article/...
<main> contenido principal del documento (*)
<nav> zona con enlaces de navegación en el ámbito de nuestro site
</nav></main></header></footer></aside></section></article>
6 etiquetas multimedia html
audio, video, svg, map, track, canvas
Atributos interesantes de la etiqueta “video”:
*imagen de portada
*comienza a reproducir inmediatamente. Podemos empezar en un segundo concreto src=”video.mp4#t=15
*una vez acaba, vuelve a reproducirlo
*sin sonido
*muestra controles de reproducción
*con valor “auto” precarga el video y con valor “metadata” solo ciertas propiedades del video
- poster=url: imagen de portada
- autoplay: comienza a reproducir inmediatamente. Podemos empezar en un segundo concreto src=”video.mp4#t=15
- loop: una vez acaba, vuelve a reproducirlo
- muted: sin sonido
- controls: muestra controles de reproducción
- preload: con valor “auto” precarga el video y con valor “metadata” solo ciertas propiedades del video
Atributos importantes html:
*identificador de elemento (tiene que ser único)
* clases de estilo definidas en las CSS (interna y externa)
* información al pasar el ratón por encima
* yes/no (indica si la información debe ser traducida)
* especificar estilos aplicados directamente a la etiqueta (inline)
id identificador de elemento (tiene que ser único)
class clases de estilo definidas en las CSS (interna y externa)
title información al pasar el ratón por encima
translate yes/no (indica si la información debe ser traducida)
style especificar estilos aplicados directamente a la etiqueta (inline)
Atributos importantes html:
- definir la dirección del texto (para idiomas que se leen de derecha a izquierda por ej)
- definir el idioma de la página/elemento
- indica si es editable de forma interativa/online
- define el orden del foco usando el tabulador
*dir definir la dirección del texto (para idiomas que se leen de derecha a izquierda por ej)
*lang definir el idioma de la página/elemento
*contenteditable indica si es editable de forma interativa/online
*tabindex define el orden del foco usando el tabulador
Atributos importantes html:
- indicar si el elemento se puede arrastrar
- indicar si es necesario verificar para detectar errores ortográficos
- indica que el elemento estará oculto porque ya no es relevante [aria-* y role] à Accesibilidad
- draggable indicar si el elemento se puede arrastrar
- spellcheck indicar si es necesario verificar para detectar errores ortográficos
- hidden indica que el elemento estará oculto porque ya no es relevante [aria-* y role] Accesibilidad
APIs HTML:
- Comunicación bidireccional entre la aplicación y el servidor.
- Similar a Indexed DB. Session Storage y Local Storage.
- Permite ejecutar scripts en background, sin interrupciones del usuario.
- WebSockets: Comunicación bidireccional entre la aplicación y el servidor.
- Web Storage: Similar a Indexed DB. Session Storage y Local Storage.
- WebWorkers: Permite ejecutar scripts en background, sin interrupciones del usuario.
APIs HTML:
- Muy parecido al modelo de WebSockets pero solo para envio de mensajes desde el servidor al cliente (PUSH).
- Esta API proporciona un rectángulo en nuestra web en el que podemos usando JavaScript. Proporciona animación e interactividad
- Permite el almacenamiento y recuperación de información en una base de datos local que reside en el equipo del usuario. Base de datos NoSQL.
- control para la subida de ficheros.
- Server-Sent Events: Muy parecido al modelo de WebSockets pero solo para envio de mensajes desde el servidor al cliente (PUSH).
- Canvas: Esta API proporciona un rectángulo en nuestra web en el que podemos usando JavaScript. Proporciona animación e interactividad
- Indexed DB: Permite el almacenamiento y recuperación de información en una base de datos local que reside en el equipo del usuario. Base de datos NoSQL.
- File: control para la subida de ficheros.
APIs HTML
- Permite que el usuario pueda arrastrar y soltar elementos. Por ejemplo, una imagen en la página web.
- Obtiene la posición del usuario si da su consentimiento. Objeto geolocation, propiedad del objeto navigator.
- CSS. Métodos .querySelector y .querySelectorAll.
- extensibilidad.
- Drag and Drop: Permite que el usuario pueda arrastrar y soltar elementos. Por ejemplo, una imagen en la página web.
- Geolocation: Obtiene la posición del usuario si da su consentimiento. Objeto geolocation, propiedad del objeto navigator.
- Selector: CSS. Métodos .querySelector y .querySelectorAll.
- Microdata / Data Set: extensibilidad.
Selector css
- aplica si b es hermano de a
- aplica si b es hermano directo de a
- que empieza por “algo”
- que termina en “algo”
- que contenga “algo”
- Ejemplo: <E atr = “val2 val1 val3”>
- que tenga definido el atributo
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 en “algo”
E [atr *=algo] {…} que contenga “algo”
E [atr ~=val1] Ejemplo: <E atr = “val2 val1 val3”>
E [atr] que tenga definido el atributo
Di 4 pseudo-elementos
::after
::before
::first-line
::first-letter
Propiedades de posicion css
*por defecto. Orden natural
*movimiento referido desde su posición static top/right/bottom/left:
*movimiento referido en base al contenedor padre z-index: altura de las “capas”
*movimiento referido en base al documento
*fixed pero no desde el principio
- static por defecto. Orden natural
- relative movimiento referido desde su posición static top/right/bottom/left:
- absolute movimiento referido en base al contenedor padre z-index: altura de las “capas”
- fixed movimiento referido en base al documento
- sticky fixed pero no desde el principio
Propiedad display en css y 2 nuevas:
*no renderiza ni el hueco
*horizontal(ignora dimensiones, solo tiene en cuenta el contenido)
*no ignora dimensiones
*vertical
*alinear elementos en una fila o columna
*gestiona filas y columnas simultáneamente
- none no renderiza ni el hueco
- inline horizontal(ignora dimensiones, solo tiene en cuenta el contenido)
- inline-block no ignora dimensiones
- block vertical
Nuevas:
flex: alinear elementos en una fila o columna
grid: gestiona filas y columnas simultáneamente
funciones importantes css
→ cálculo dinámico
→ valor menor
→ valor mayor
→ límite rango
→ redondeo
→ resto división
→ resto CSS
→ valor absoluto
→ signo número
→ potencia
→ raíz cuadrada
→ logaritmo
→ exponencial
→ seno
→ coseno
→ tangente
→ inclinación
calc() → cálculo dinámico
min() → valor menor
max() → valor mayor
clamp() → límite rango
round() → redondeo
mod() → resto división
rem() → resto CSS
abs() → valor absoluto
sign() → signo número
pow() → potencia
sqrt() → raíz cuadrada
log() → logaritmo
exp() → exponencial
sin() → seno
cos() → coseno
tan() → tangente
skew() → inclinación
Que son?
:hover, :not, :active, :valid, :required, :focus, :first-child, :has, :root
Selectores pseudo-clase
XML: Extensible Markup Language, estandar e ISO
XML es un estándar de la W3C
Deriva de SGML (definido en la ISO 8879)
a que se refiere?
- JAXP – Events
- JAXP – Tree
- Parser Java de tipo SAX y DOM
- API JAXP – Streaming
- API XML – Negocio
SAX API JAXP – Events
DOM API JAXP – Tree
Apache Xerces Parser Java de tipo SAX y DOM
StaX API JAXP – Streaming
JAXB API XML – Negocio
a que se refiere?
*Estandar W3C para definir Selectores
*Estandar W3C para consultas sobre bbdd XML
*Estandar W3C para definir una gramatica XML
*Estandar W3C para Transformacion XML a XML
XPath Estandar W3C para definir Selectores
XQuery Estandar W3C para consultas sobre bbdd XML
XSD o DTD Estandar W3C para definir una gramatica XML
XSLT Estandar W3C para Transformacion XML a XML
a que se refiere?
- HTML que sigue estrictamente las reglas XML
- Estandar W3C para Transformacion XML a PDF/Imagen
- Procesador java XSL-FO
XHTML HTML que sigue estrictamente las reglas XML
XSLFO Estandar W3C para Transformacion XML a PDF/Imagen
Apache FOP Procesador java XSL-FO
4 Lenguajes de marcas ligero
MediaWiki / AsciiDoc / ReStructuredText / Markdown
¿Cual es la herramienta para la gestión de los paquetes en Python?
Pip (lee un fichero denominado setup.pi)
3 Herramientas de gestión de dependencias JS
Npm / Yarn / Bower
5 Empaquetadores JS
Webpack / Esbuild / Parcel / Rollup
/ Vite
4 Propiedades de XHR (AJAX)
responseText, responseXML, readyState (0-4) y status (HTTP)
-
Tema1_Seccion1_ModeloConceptual_DFD15
-
T134
-
Tema2_Seccion1_DiseñoBBDD19
-
T215
-
Tema4_Seccion1_SQL33
-
T437
-
Tema5_Seccion1_UML28
-
T543
-
Tema6_Seccion2_LenguajeJava75
-
T666
-
Tema7_Seccion1_ServiciosWeb18
-
T719
-
Tema8_Seccion5_XML125
-
T847
-
Tema9_Seccion1_Accesibilidad30
-
T917
-
Tema10_Seccion2_Metodologias40
-
T1023
