Diseño Web - Manuel Flashcards

1
Q

¿Qué es internet?

A

ES UNA ESTRUCTURA DE ORDENADORES.

y estas comparten información.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

¿Qué servicios ofrece la internet?

A

LA INTERNET OFRECE:

1) Correo electrónico
2) Transferencia de archivos
3) Paginas Web

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

¿Qué es la web?

A

UN SERVICIO DE LA INTERNET.

Sirve para difundir contenido.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

¿Cuál es la diferencia entre la web e internet?

A

LA INTERNET: UNA ESTRUCTURA

LA WEB: UN SERVICIO DE LA INTERNET.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

¿Qué es un Metadato?

A

DATOS ACERCA DE LOS DATOS. NO ES IMPORTANTE PARA EL USUARIO PERO SI PARA EL ORDENADOR.

Es la información interna de archivos/contenidos

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

¿Qué es Híper Texto?

A

ES TEXTO + ENLACE.

Es un texto con un enlace que te permite navegar entre varias páginas.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

¿Qué es HTML?

A

LENGUAJE DE ETIQUETADO DE HIPERTEXTO (HyperText Markup Language).

Es un lenguaje de etiquetado que se encarga de crear la ESTRUCTURA o esqueleto de nuestra página web.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

¿Qué es CSS?

A

HOJAS DE ESTILO EN CASCADA
(Cascading Style Sheets).

Hojas de estilo en cascada. Es un lenguaje de DISEÑO que nos permite aplicar estilos a nuestra estructura.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

¿Qué es un navegador?

A

ES UNA HERRAMIENTA QUE INTERPRETA CÓDIGO.

Esta la hacemos para mostrarlo de manera visual al usuario.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

¿Cuáles son los principales navegadores?

A

PRINCIPALES NAVEGADORES:

1) Chrome
2) Firefox
3) Safari.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

¿Qué significa URL?

A

LOCALIZADOR ÚNICO DE ARCHIVOS
(Uniform Resource Locator)

ES UNA HERRAMIENTA QUE NOS PERMITE LOCALIZAR UN ARCHIVO.

Es la barra de búsqueda en donde pondremos la ruta (una pagina web).

Solo tiene la capacidad de abrir 1 solo archivo a la vez.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

¿Quién es Tim Berners-Lee?

A

ES CONSIDERADO EL PADRE DE LA WEB.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

¿Qué año se conoce como el nacimiento de la web?

A

NOVIEMBRE DE 1990

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

¿Cuáles son los recursos necesarios para tener una página web online?

A

RECURSOS PARA UNA WEB:

1) Servidor / Hosting
2) Dominio
3) FTP.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

¿Qué es un Servidor o Hosting?

A

ORDENADOR QUE ALMACENA DATOS.

Estas se pueden acceder de forma online.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

¿Qué es un Dominio?

A

ES UNA RUTA AMIGABLE.

Se usa para poder entrar a un Hosting, forma parte de la URL.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

¿Qué es FTP?

A

PROTOCOLO DE TRANSFERENCIA DE ARCHIVOS.
(File transfer Protocol)

Es el protocolo para transferir archivos de un ordenador a otro.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

¿Qué es Front-End?

A

ES TODO LO QUE VE EL USUARIO.

Son los archivos que se descargan del servidor y son procesados por nuestro CPU.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

¿Qué es Back-End?

A

PARTE LÓGICA QUE NO VE EL USUARIO. (SQL- PHP)

Es la información que se procesa directamente al servidor y permite la conexión entre otros dispositivos y tecnologías.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

¿Qué es un IDE?

A

ENTORNO DE DESARROLLO INTEGRADO
(Integrated Development Environment)

Es un conjunto de herramientas que nos permite hacer un trabajo.

Tipos de IDE: Visual Studio, Adobe Dreamweaver.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

¿Qué es una etiqueta?

A

EL ELEMENTO MÁS PEQUEÑO DEL HTML.

Es el elemento más pequeño que nos sirve para crear la estructura de un documento HTML.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

¿Qué es un atributo?

A

HERRAMIENTA QUE MODIFICA CARACTERÍSTICAS DE UN ELEMENTO.

Los atributos siempre se escriben en la apertura.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
23
Q

¿Cuáles son los elementos de la estructura en un archivo HTML?

A

1) DOCTYPE (tipo de documento),
2) HTML (elemento raíz)
3) HEAD (meta charset, meta viewport, title)
4) BODY.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
24
Q

¿Qué es el contenido semántico?

A

IMPORTANCIA QUE TIENE UNA ETIQUETA PARA EL BUSCADOR.

Es aquel contenido que, tal vez, no tenga una importancia visual, pero es importante para los buscadores.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
25
Q

¿Qué es una ruta absoluta? (Como término general)

A

Como término general: es la RUTA COMPLETA que parte desde el almacenamiento desde el archivo.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
26
Q

¿Qué es una ruta absoluta? (Como término web)

A

Como término web: es aquella que se compone de:

1) “Protocolo” (HTTP)
2) “Dominio” (cei.es)
3) “Ruta relativa” (el resto de información que aparece detrás del dominio).

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
27
Q

¿Qué es una ruta relativa?

A

ES SOLO UNA PARTE DE UNA RUTA COMPLETA (ABSOLUTA)

En web el punto “A” es el archivo en el que estamos trabajando y el punto “B” es el archivo de destino.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
28
Q

¿Cuál es la diferencia entre una ruta relativa y una ruta absoluta?

A

La absoluta es la RUTA COMPLETA

La relativa es solo una PARTE DE LA RUTA.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
29
Q

¿Cuáles son las formas de incluir CSS en Html y cuál es su prioridad?

A

En el elemento a través del atributo style – Alta
En el head con la etiqueta - Media
En un documento externo - Baja - mayor recomendación

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
30
Q

¿Qué son los selectores?

A

HERRAMIENTAS QUE IDENTIFICAN AL ELEMENTO.

En el que queremos aplicar estilos.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
31
Q

Nombre los principales tipos de selectores.

A

Selector universal: Nos permite añadir propiedades a todos los elementos.

Selector de etiqueta: Nos permiten cambiar estilos a una etiqueta.

Selectores descendentes: Aplican estilos a etiquetas anidadas de otra etiqueta.

Selector de clase: Nos permite crear una clase y añadirla a diferentes elementos.

Selector de ID: Nos permiten aplicar un estilo etiquetas con id definido.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
32
Q

¿Qué son las unidades de medida?

A

HERRAMIENTAS QUE PERMITEN APLICAR DIMENSIONES A LOS ELEMENTOS.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
33
Q

¿Diferencia entre las unidades de medida absolutas y relativas?

A

MEDIDAS ABSOLUTAS: toman su valor en cuanto a sí mismas

MEDIDAS RELATIVAS: toman su valor según otro elemento.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
34
Q

Nombre las unidades de medida.

A

Absolutas: cm, mm, px, in (pulgada)

Relativas:

% > (toma el valor de su padre),

vh > (toma el valor del alto del viewport),

vw > (toma el valor del ancho del viewport),

em > (toma el valor como múltiplo de su padre), rem (toma el valor como múltiplo del elemento raíz).

<strong>: Pone el texto en negrita pero tiene más carga semántica que la b.</strong>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
35
Q

¿Qué son las unidades de color?

A

Son herramientas que nos permiten aplicar colores a los elementos.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
36
Q

Nombre las diferentes unidades de color.

A

1) Palabras del sistema,
2) Decimales: rgb(0,0,0);
3) Decimales con opacidad: rgba(0,0,0,1);
4) Porcentuales: hsl(0,0%,0%);
5) Hexadecimales. #000000;

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
37
Q

¿Para qué sirve la @import?

A

Nos sirve para incluir fuentes y otros códigos css.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
38
Q

¿Qué es DOCTYPE ?

A

Indica qué TIPO DE DOCUMENTO va a procesar el navegador.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
39
Q

¿Qué es Head?

A

ES UNA ETIQUETA LÓGICA

que contiene metadatos y otros tipos de códigos.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
40
Q

¿Qué es Charset?

A

Define el tipo de caracteres que procesa nuestra web.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
41
Q

¿Qué es Body ?

A

Es la ETIQUETA VISUAL

que mostrará todo el diseño de nuestra web.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
42
Q

¿Qué es H1?

A

son etiquetas que sirven para crear títulos. Los encabezados se enumeran desde el 1 hasta el 6 y se consideran etiquetas semánticas.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
43
Q

¿Qué es P?

A

PARRAFO

es la etiqueta genérica para bloques de texto.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
44
Q

¿Cuales son los listado de etiquetas HTML?

A
DIV
H1
A
P 
UL
OL
LI
DL
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
45
Q

¿Qué es UL? (unorganized lists)

A

LISTAS DESORDENADAS.

muestran el contenido con viñetas.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
46
Q

¿Qué es OL? (Organized lists)

A

LISTAS ORDENADAS

muestra el contenido numerado.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
47
Q

¿Qué es LI? (Item list)

A

ELEMENTO DE LA LISTA. PADRE DE TODAS LAS LISTAS.

Determina un elemento. Todas las listas están compuestas por esta etiqueta. No puede haber UL sin LI y viceversa.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
48
Q

¿Qué es DL? (Definition List)

A

LISTAS DE DEFINICION. CREA GLOSARIOS.

A diferencia de las otras listas necesita de dos etiquetas para funcionar.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
49
Q

¿Cuales son los listado de atributos HTML?

A

1) Href
2) Target
3) Src
4) Alt
5) Width
6) Height

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
50
Q

¿Qué es Href?

A

ATRIBUTO PARA PONER UN ENLACE.

En el que ponemos la ruta que ha de seguir el navegador para un enlace.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
51
Q

¿Qué es Src?

A

ATRIBUTO PARA PONER UNA IMAGEN.

en el que ponemos la ruta que ha de seguir el navegador para ver una imagen.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
52
Q

¿Qué es Width?

A

Ancho

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
53
Q

¿Qué es Height?

A

Alto

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
54
Q

Listado de Propiedades CSS

A

1) Margin
2) Padding
3) Border
4) Font-family
5) Font-size
6) Font-weight
7) Font-style
8) Color
9) Text-align
10) Text-decoration

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
55
Q

¿Qué es Margin? (css)

A

Es el espacio entre elementos

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
56
Q

¿Qué es Padding? (css)

A

Es el espacio entre content y border.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
57
Q

¿Qué es font-family? (css)

A

Cambia el estilo de letra

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
58
Q

¿Qué es font-size? (css)

A

Cambia el tamaño de la letra

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
59
Q

¿Qué es font-weight? (css)

A

Cambia el grosor de la letra (negrita)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
60
Q

¿Qué es font-style? (css)

A

Le añade cursiva

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
61
Q

¿Qué es Color?(css)

A

CAMBIA EL COLOR DE LAS LETRAS Y ELEMENTOS

62
Q

¿Qué es text-align? (css)

A

alinea el contenido (centro, izquierda, derecha, justificado)

63
Q

¿Qué es text-decoration? (css)

A

Cambia el decorado de la fuente (none, line-through, overline, underline)

64
Q

¿Qué es Border? (css)

A

ES PARA APLICAR BORDE AL ELEMENTO.

La propiedad border debe escribirse en el siguiente orden:

1) Tamaño
2) Tipo
3) Color.

65
Q

¿Cuál es la función de la propiedad display?

A

Es la propiedad que nos permite cambiar la naturaleza de nuestro elemento.

66
Q

¿Qué valores recibe comúnmente la propiedad display?

A

1) Inline
2) block
3) inline-block
4) flex
5) grid
6) none.

67
Q

¿Qué se conoce como flexbox?

A

Es un paradigma de maquetación que se basa principalmente en el uso de elementos flexibles.

68
Q

¿Cuál es el primer paso para convertir un elemento a tipo flexible?

A

Poner la propiedad display-flex

69
Q

¿Verdadero o Falso?

¿Se pueden aplicar las mismas propiedades de Flexbox tanto a elementos padres como hijos?

A

FALSO.

Cada uno tiene sus propiedades.

1) Aunque el hijo hereda del padre el nieto no.
2) El Width se ajusta al contenido pero el Height ocupa el 100%.

70
Q

¿Qué valores recibe la propiedad flex-direction?

A

Row; Row Reverse; Column, Column-Reverse

71
Q

¿Qué hace el Row?

A

SE ALINEA HORIZONTALMENTE

72
Q

¿Qué hace el Row-Reverse?

A

SE ALINEA HORIZONTALMENTE, cambiando el orden de los elemento

73
Q

¿Qué hace el Column?

A

SE ALINEA VERTICALMENTE

74
Q

¿Qué hace el Column-reverse?

A

SE ALINEA VERTICALMENTE, cambiando el orden de los elementos.

75
Q

¿Cuál es el eje principal y secundario de un elemento según el valor que reciba flex-direction?

A

FLEX-DIRECTION EN ROW:
El eje principal es el X y el secundario es el Y.

FLEX-DIRECTION EN COLUMN:
El eje principal es el Y y el secundario es el X.

76
Q

¿Qué hace el flex-wrap?

A

GESTIONA LA CANTIDAD DE ELEMENTOS POR LINEA. SI NO ENTRAN, PASAN A LA SIGUIENTE.

77
Q

¿Qué eje alinea la propiedad justify-content y que valores recibe?

A

ALINEA EL EJE PRINCIPAL.

Sus valores son:

1) Flex-start
2) Flex-end
3) Space-around
4) Space-between
5) Space-evenly
.

78
Q

¿Qué eje alinea la propiedad align-items y que valores recibe?

A

ALINEA EL EJE SECUNDARIO.

Sus valores son:

1) Flex-start
2) Flex-end
3) Center
4) Stretch
5) Baseline

79
Q

¿Cuándo debemos utilizar la propiedad align-content?

A

PARA USAR LOS MISMOS VALORES DE JUSTIFY-CONTENT EN VARIAS LINEAS DE CONTENIDO.

(cuando tenemos flex-wrap con el valor: wrap)

80
Q

¿Para que utilizamos las propiedades flex-grow y flex-shrink?

A

FLEX-GROW: es el índice de crecimiento de los elementos para abarcar el 100% del contenido.

FLEX-SHRINK: es el índice de reducción de los elementos para abarcar el 100% del contenedor.

81
Q

¿Qué valores recibe el atajo flex-flow?

A

FLEX-DIRECTION + FLEX WRAP.

Recibe los valores de flex-direction y flex-wrap.

82
Q

¿Para qué sirve la propiedad Order?

A

ORGANIZA ELEMENTOS SIN MODIFICAR EL DOM.

Permite organizar los elementos con un orden que nosotros establezcamos sin modificar el DOM.

83
Q

¿Para qué sirve la propiedad Align-self?

A

ALINEA EL EJE SECUNDARIO DE UN ELEMENTO POR SEPARADO.

Permite alinear un único elemento sin modificar la alineación de los demás.

84
Q

¿Qué conocemos como filosofía Mobile First y Desktop First?

A

MOBILE FIRST se construye la web iniciándose desde el MÓVIL.

DESKTOP FIRST se construye la web iniciándose desde el ORDENADOR.

85
Q

¿Qué es la etiqueta form y para qué sirve?

A

ETIQUETA PARA FORMULARIOS. HERRAMIENTA QUE NOS PERMITE PEDIR INFORMACIÓN AL USUARIO.

Es una etiqueta lógica por lo tanto no se le aplican estilos.

86
Q

¿Cuáles son los principales atributos de la etiqueta form?

A

ACTION, METHOD Y TYPE

Action: (DONDE) es la ruta a la que vamos a enviar los datos, suele ser un archivo PHP.

Method: (COMO) es el cómo vamos a enviar los datos.

Type: (QUE) nos permite indicar que tipo de campo de dato mostrará el navegador.

87
Q

¿Qué atributo debemos utilizar si queremos recibir archivos a través de un formulario y que valor recibe?

A

ENCTYPE lo utilizaremos cuando tengamos archivos de tipo FILE. (archivos PDF, JPG, ETC).

En este caso utilizaremos el valor “multipart/form-data”.

88
Q

¿Cuáles son las diferencias entre el método POST y el método GET al momento de enviar un formulario?

A

POST: ENVÍA POR PAQUETE DE DATOS. (más seguro).
CONTENIDO SENSIBLE.
(Ejemplo: Contraseña, dirección)

GET: ENVÍA DATOS A TRAVÉS DE LA URL.
CONTENIDO POCO RELEVANTE.
(Ejemplo: nombre, apellido)

89
Q

¿Qué es un input y que función cumple?

A

ETIQUETA GENÉRICA PARA CREAR CAMPOS DE FORMULARIO.

90
Q

¿A qué llamamos validación de entrada?

A

FUERZA AL USUARIO INTRODUCIENDO EL DATO CORRECTO.

91
Q

¿Cuál es la diferencia entre Radio y Checkbox?

A

Radio: Marcar solo una opción entra varias posibles.

Checkbox: CASILLAS DE VERIFICACIÓN DE SELECCIÓN MULTIPLE.

92
Q

¿Cómo debemos construir input de tipo radio?

A

CREAR INPUT TIPO RADIO, MISMO NAME Y DIFERENTE VALUE. USAR ETIQUETA LABEL,

Dándole a la etiqueta input un valor de tipo radio. Todos los inputs de tipo radio deben tener el mismo name y diferente value para que funcionen. Al ponerles a todos el mismo name te permite seleccionar un elemento y que no se queden todos los inputs marcados.

Con este input utilizaremos la etiqueta label que es una etiqueta visual para indicar que dato estamos pidiendo. Dentro de esta etiqueta tendremos el atributo for que nos permite vincular el labol al input. De esta forma si el usuario da click en la etiqueta labol en vez de en el input de tipo radio también se marcaría.

93
Q

¿Qué es un pseudo-elemento?

A

TIENE PARTE VISUAL PERO NO TIENE ETIQUETA.

Es todo aquello que tenga una parte visual pero no tenga etiqueta.

94
Q

¿Qué es un pseudo-selector?

A

SELECCIONA EL ESTADO DEL ELEMENTO.

95
Q

¿Define modelo de cajas?

A

FILOSOFÍA QUE INDICA QUE EN LA WEB TODOS SON CAJAS.

Todo lo que veamos tenga la forma que tenga, a nivel lógico, viene en una caja. Estas cajas están compuestas por PADDING, BORDER Y MARGIN y CONTENT

96
Q

¿Cuál es la función de max-width y max-height?

A

Límite de CRECIMIENTO de un elemento.

97
Q

¿Cuál es la función de min-width y min-height?

A

Límite de REDUCCIÓN de un elemento.

98
Q

¿Qué se conoce como Overflow?

A

CUANDO EL CONTENIDO ES MAYOR QUE EL CONTENEDOR.

99
Q

¿Qué valores recibe la propiedad Overflow?

A

Visible: Viene por defecto, cuando se SOBREPASA la página.

Hidden: Se OCULTA el contenido que está superando el contenedor.

Scroll: Utiliza una barra para los DOS EJES (vertical y horizontal).

Auto: Es el que más se utiliza, utiliza UNA BARRA de deslizar para bajar y subir y ver todo el contenido.

100
Q

¿Qué zonas posee un elemento?

A

Top, bottom, left, right y center.

101
Q

Nombre las características de la posición relativa.

A

1) Se posiciona en cuanto a sí misma.

2) No rompe el flujo de texto.

102
Q

Nombre las características de la posición absoluta.

A

1) Se posiciona con respecto al padre si tiene posición,
2) Si el padre no tiene posición se posiciona en cuanto al viewport.
3) Rompe el flujo de texto.

103
Q

Nombre las características de la posición fija.

position fixed

A

1) Se posiciona en cuanto al VIEWPORT.
2) ROMPE el flujo de texto.
3) Viene con nosotros cuando hacemos SCROLL

104
Q

¿Qué son los Snippets?

A

HERRAMIENTA QUE NOS COMPLETA EL CÓDIGO DE MANERA AUTOMATICA.

En marketing digital es un anuncio que pone google para acceder a la página web.

105
Q

¿Qué es la CPU?

A

UNIDAD CENTRAL DE PROCESAMIENTO
(Central Processing Unit)

ES EL HARDWARE DE UN ORDENADOR. INTERPRETA INSTRUCCIONES DE UN PROGRAMA INFORMÁTICO.

Todo mediante realización de las operaciones básica, aritméticas, lógicas y externas (provenientes de la unidad de entrada/salida).

106
Q

¿Qué es un editor de texto?

A

PROGRAMA INFORMÁTICO QUE PERMITE CREAR Y MODIFICAR ARCHIVOS.

Compuestos únicamente por:

1) Textos sin formato, conocidos comúnmente como archivos de texto o “texto plano”.

107
Q

¿Qué es un modelo de caja?

A

FILOSOFÍA QUE INDICA QUE EN LA WEB TODOS SON CAJAS.

Es el concepto que utiliza:

1) Contenido
2) Padding: (espacio entre el contenido y el Border.
3) Border: (lo que recubre la caja))
4) Margin: (espacio entre elementos diferentes).

108
Q

. Diferencias entre selectores de clase y de id.

A
  1. El ID TIENE PRIORIDAD sobre la clase.
  2. LA CLASE ES RESURSIVA, se puede aplicar a varios elementos en un documento. El id es único, solo podemos tener un id por documento.
  3. Podemos tener VARIAS CLASES EN EL MISMO ELEMENTO, mientras que solo podemos tener un id por elemento.
109
Q

¿Qué hace los elementos tipo línea?

A
  1. Se colocan uno al lado del otro.
  2. El contenedor se ajusta al contenido.
  3. No sigue el modelo de caja por completo.

Listado de elementos tipo línea: b, i, em, strong, a, br, img, map, script, span, button, input, label, select, textarea.

110
Q

¿Qué hace los elementos tipo bloque?

A
  1. Se colocan UNO DEBAJO DE OTRO.
  2. El contenedor OCUPA EL 100% del ancho disponible.
  3. Sigue el MODELO DE CAJAS por completo.
111
Q

¿Qué hace la A ?

A

ENLACE

Sirve para crear un enlace.

112
Q

¿Qué hace la BR? (html)

A

FUERZA UN SALTO DE LINEA

113
Q

¿Qué hace la HR? (html)

A

CREA UNA LINEA HORIZONTAL PARA SEPARAR ELEMENTOS.

114
Q

¿Qué significa las siglas WWW?

A

WORLD WIDE WEB

115
Q

¿Cuáles son las 3 tecnologías que requiere la web?

A

HTTP

URL

HTML

116
Q

¿Verdadero o Falso?

¿Puede haber HTML sin CSS?

A

VERDADERO.

Puede haber HTML sin CSS…

Pero CSS sin HTML NO.

117
Q

¿Diferencias entre lenguaje interpretado y compilado?

A

INTERPRETADO: NECESITA de un 3er programa.
(ejemplo: javascript, html, css)

COMPILADO: Se ejecuta SOLO.
(ejemplo: adobe XD)

118
Q

¿Qué significa las siglas DNS y qué hace?

A

DOMAIN NAME SYSTEM
(sistema de nombres de dominio)

Es el que se encarga de cambiar el dominio a ip y de ip a dominio.

119
Q

¿Qué hace el cliente FTP?

A

SIRVE PARA TRANSFERIR NUESTROS ARCHIVOS DE NUESTRO ORDENADOR A UN SERVIDOR.

120
Q

¿Qué significa las siglas UI?

A

UI: (User Interface)

Guía al usuario por la APP durante el tiempo que él la usa.

121
Q

¿Qué significa las siglas UX?

A

UX: ( User Experience)

Cómo una persona se siente mientras usa cualquier producto o servicio digital.

122
Q

¿Qué es el SQL?

A

Structured Query Language

LENGUAJE DE PROGRAMACIÓN que interactúa con la BASE DE DATOS.

123
Q

¿Qué es el PHP?

A

Hypertext Preprocessor

LENGUAJE DE PROGRAMACIÓN que interactúa con el SERVIDOR.

124
Q

Nombra el META CHARSET usado en el Occidente.

A

UTF - 8

Significado: Unicode Transformation Format

ASCII (era el anterior meta charset, descontinuado)

125
Q

¿Qué es la carga semántica?

A

JERARQUÍA DE ETIQUETAS.

Esto lo tomará en cuenta el navegador

126
Q

¿Para qué sirve BEFORE? (pseudo-elementos)

A

BEFORE:

Pone un texto ANTES del contenido de una etiqueta. Siempre hay que poner la propiedad content aunque no le demos ningún valor.

Ejemplo:

300 ; @ 300; $ 300

127
Q

¿Para qué sirve AFTER? (pseudo-elementos)

A

AFTER:

Pone un texto DESPUÉS del contenido de una etiqueta. Siempre hay que ponerle la propiedad content aunque no le demos ningún valor.

Ejemplo:

300# ; 300@ ; 300$

128
Q

¿Para qué sirve PLACEHOLDER? (pseudo-elementos)

A

PLACEHOLDER:

Muestra un texto que DESCRIBE BREVEMENTE lo que el usuario debe rellenar en el campo y que DESAPARECE cuando el usuario comienza a escribir en él.

Siempre trae opacity en 0.5, para que se vea el color sin opacidad tenemos que poner el valor en 1.

129
Q

¿Qué es el DIV?

A

ETIQUETA GENÉRICA DE TIPO BLOQUE

En un div no puedes poner texto.

130
Q

¿Qué es el SPAN?

A

ETIQUETA GENÉRICA DE TIPO LINEA

Se utiliza también como una Etiqueta de texto corto.

131
Q

¿Para qué sirve el botón SUBMIT?

A

ENVÍA EL FORMULARIO

132
Q

¿Para qué sirve el botón RESET?

A

VACÍA LOS INPUTS YA ESCRITOS DEL FORMULARIO.

Esta acción no borra, sino que vuelve a su valor por defecto.

133
Q

¿Para qué sirve el botón BUTTON?

A

MUESTRA UN BOTON.

Hay que ponerle JS para que funcione.

1) Si su padre es Form por defecto es de tipo SUBMIT.
2) Si su padre no es Form por defecto es de tipo BUTTON.

134
Q

Nombre los pseudo-selectores de tipo ACCIÓN.

A

HOVER , ACTIVE, CHECKED Y FOCUS.

HOVER: Aplica un estilo cuando le pasamos por encima del elemento.

ACTIVE: Aplica estilo cuando se le da click.

CHECKED: Cuando un input para hacer check.

FOCUS: Aplica estilo cuando enfocamos el elemento.

135
Q

Nombre los pseudo-selectores de tipo ENLACE.

A

LINK(para todos los enlaces que no se haya visitado).

VISIT(para el enlace que ya se ha visitado).

136
Q

¿Cuáles son las 3 reglas para hacer una composición con POSITIONS?

A

1) TODOS deben tener position.
2) TODOS deben tener Z-index.
3) Si usamos un position en Absolute, romper el flujo de texto, HAY QUE DEFINIR eje X y Eje Y.

137
Q

Nombre las características de la posición Sticky

A

UNA MEZCLA ENTRE POSITION RELATIVE Y FIXED.

Rompe el flujo de texto para solapar.

138
Q

¿Qué es el Overlay?

A

APLICA UN FILTRO PARA DIFERENCIAR EL TEXTO DEL FONDO.

Puede ser toda la pantalla o solo la parte de la letra, suele usarse para diferenciarlo de una imagen o video de fondo.

139
Q

¿De qué formato tiene que ser los logos de la web?

A

SVG.

Scalable Vector Graphics

140
Q

¿Qué es el iFrame?

A

ES COLOCAR EL CONTENIDO DE OTRO SITIO.

Siempre y cuando no tenga posicionamiento.

Ejemplo: Widgets de Google Maps, Youtube, Spotify.

141
Q

¿Qué son los Validadores?

A

SE UTILIZA PARA CORREGIR EL CODIGO DE LA WEB.

142
Q

¿Qué es el Layout/Wallframe?

A

SON BOCETOS / PROTOTIPOS DE LA ESTRUCTURA Y DISEÑO DE UNA PAGINA WEB.

143
Q

¿Qué es el Mockup?

A

PROTOTIPO MÁS CERCANO AL BOCETO FINAL DE UNA PAGINA WEB.

144
Q

Nombre los pseudo-selectores de tipo POSITION

A

FIRST CHILD: Primer hijo, se le aplica al primer hijo

LAST CHILD: Último hijo, se le aplica al último hijo

NTH-CHILD: Para seleccionar cualquier hijo individualmente, aunque está el odd(pares) o even(impares) o progresivas. (2n- 2)(múltiplos)

ONLY CHILD: Un solo hijo. se le aplica las propiedades.

FIRSTOFTYPE: Va a seleccionar el primero de cada nombre de etiqueta.

LASTOFTYPE: Va a seleccionar el último de cada nombre de etiqueta.

145
Q

¿Qué es el MEDIA QUERIES?

A

TÉCNICA DE MAQUETACIÓN.

para sobreescribir propiedades según el viewport.

146
Q

¿Qué es el Breackpoint?

A

ES CUANDO SE PASA EL VIEWPORT DE UN DISPOSITIVO A OTRO.

147
Q

¿Qué es el Flex-Order?

A

CAMBIA EL ORDEN DE LOS ELEMENTOS, SIN CAMBIAR EL FLUJO DE TEXTO.

148
Q

¿Qué es el CDN?

A

RED DE DISTRIBUCIÓN DE CONTENIDO.

content delivery network

149
Q

¿Diferencias entre una librería y un Framework?

A

LIBRERÍA: TIENE SOLO 1 LENGUAJE DE PROGRAMACIÓN.

FRAMEWORK: TIENE MÁS DE UN LENGUAJE DE PROGRAMACIÓN.

150
Q

¿Qué son los las estructuras de código?

A

CUANDO UNA ETIQUETA DEPENDE DE OTRA PARA FUNCIONAR.

151
Q

¿Qué es y que son las siglas el TCP/IP? (Dirección IP)

A

TCP: PROTOCOLO DE CONTROL DE TRANSMISIÓN
(Transmission Control Protocol).

IP: PROTOCOLO DE INTERNET
(Internet Protocol)

Permiten la transmisión de datos entre computadoras.