WEB Flashcards

1
Q

¿Cuáles son los Componentes de una aplicación web?

A

Cliente (usan los navegadores)
Servidor Web (retorna las páginas solicitadas por el navegador)
Red (comunicar a los clientes y servidores).

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

¿Cuáles son los Tipos de Arquitecturas de internet (Red)?

A

LAN. Red de área local. WAN. Red de área amplia.

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

¿Qué es IXP?

A

Punto de Intercambio de tráfico de internet.

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

¿Qué es ISP?

A

Proveedor de servicio de internet.

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

¿En qué consiste el internet?

A

Consiste en muchas WANs que han sido conectadas con IXP.

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

¿Cómo procesa un servidor WEB una página WEB Estática?

A

El navegador solicita los archivos al servidor con el HTTP (Protocolo de transferencia de hipertexto) y el servidor web los envía con el navegador del usuario con HTML (Lenguaje de marcas de hiper texto).

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

¿Cómo procesa un servidor web una página web Dinámica?

A

El usuario va al servidor HTTP, el servidor ejecuta scripts para obtener datos de la base de datos y los combina con archivos HTML, envía la página generada dinámicamente al navegador del usuario.

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

¿Cuáles son los Protocolos de internet?

A

FTP (File Transfer Protocol).
SMTP (Simple Mail Transfer Protocol).
POP3 (Post Office Protocol) e IMAP (Internet Message Access Protocol).
TCP/IP.
TCP (Transmission Control Protocol).
IP (Internet Protocol).

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

¿Qué es el lenguaje HTML?

A

Es un lenguaje que describe el contenido y estructura de un documento marcando o etiquetando diferentes elementos del documento.

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

¿Cuáles son los Elementos de un documento?

A

Título, encabezado principal, párrafos, listas, tablas, etc.

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

¿Cuáles son Herramientas para trabajar con HTML?

A

Visual Studio Code con la extensión Live Server y Prettier.

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

Atajos de teclado VSCODE para cortar (sin seleccionar)

A

Ctrl+X Cortar.

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

Atajos de teclado VSCODE para Copiar (sin seleccionar)

A

Ctrl+C.

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

Atajos de teclado VSCODE para Mostrar Paleta de comandos

A

Ctrl+Shift+P, F1.

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

Atajos de teclado VSCODE para arriba/abajo Mueve línea

A

Alt+Fecha.

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

Atajos de teclado VSCODE para copiar línea

A

Shift+Alt+Fecha arriba/abajo.

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

Atajos de teclado VSCODE para borrar la línea

A

Ctrl+Shift-K.

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

Atajos de teclado VSCODE para Agregar/eliminar comentarios

A

Shift+Alt+a.

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

Atajos de teclado VSCODE para agregar a la selección

A

Ctrl+D.

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

Atajos de teclado VSCODE para insertar un nuevo cursor

A

Alt+click.

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

Atajos de teclado VSCODE para seleccionar una línea

A

Ctrl+L.

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

Atajos de teclado VSCODE para seleccionar todas las ocurrencias seleccionadas

A

Ctrl+Shift+L.

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

Atajos de teclado VSCODE para seleccionar en modo columna

A

Shift+Alt+arrastrar mouse.

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

¿Cuáles son los elementos de construcción elementales en cada documento HTML?

A

Los tags.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
25
¿Cuáles son los Tipos de elementos o etiquetas?
Elementos con contenido y Elementos vacíos.
26
¿Cuál es la Estructura de un documento HTML?
Tiene dos secciones principales: Head (contiene información acerca del documento) y Body (contiene información desplegada por el browser).
27
¿Cómo subir una página a GitHub Pages?
1. La carpeta que contenga nuestro proyecto web debemos hacer que sea controlado por git. 2. Crear un repositorio en GitHub donde subiremos el proyecto. 3. En la terminal de git escribir el código para enlazar el repositorio local con el remote: git remote add origin urlrepositorio. 4. Confirmar los cambios que se tengan en local. 5. Subir el repositorio a GitHub: git push -u origin master. 6. Una vez terminada la operación de subida, ingresar a la configuración del repositorio en GitHub.
28
¿Cuáles son los Atributos principales de HTML?
class = "texto": Define una clasificación (clase) general del elemento. hidden: Indica que el elemento debe estar oculto. id = "text": Proporciona un identificador único para el elemento. long="text": Especifica el lenguaje del contenido del elemento. style="definición": Define el estilo o apariencia del elemento. tabindex="entero": Especifica el orden del elemento al presionar tab.
29
¿Qué se considera un espacio en blanco?
El espacio, tabulador o cambio de línea.
30
¿Cuándo HTML ignora la presencia de espacios en blanco que usa?

Hola HTML

Hola

31
¿Qué elementos son parte del encabezado del documento (head)?
title: Título del documento. meta: Proporciona una lista de valores de metadatos tales como: keywords, descripción, autor, viewport. También se puede especificar la codificación de caracteres. link: Especifica recursos externos del documento. script: Se utiliza para especificar código de programación. style: Define estilos que serán aplicados al documento.
32
¿Cómo se agregan comentarios a HTML?
Presionar Shift+Alt+a para agregar o quitar comentarios.
33
¿Cuáles son los Elementos de la página WEB?
address: Marca información de contacto. article: Marca un bloque de contenido un artículo de revista, noticia, entrada de un blog. HTML5. aside: contenido que está indirectamente relacionado con el contenido principal del documento. body: Cuerpo del documento. footer: Pie para una sección, artículo o página. HTML5. h1, h2, h3, h4, h5, h6: Encabezados se utilizan para definir la estructura del documento. header: Define el encabezado del documento, artículo o sección. HTML5. nav: Se utiliza para colocar los links de navegación. HTML5. section: Representa una sección genérica de un documento. Sirve para determinar qué contenido corresponde a qué parte de un esquema. HTML5.
34
¿Cómo validas una Semántica HTML?
Utilizar https://validator.w3.org/
35
¿Qué función tiene un Elemento de agrupación?
Organiza contenido similar en un distinto grupo.
36
¿Cuáles son los Elementos de agrupación?
blockquote: citar contenido que se obtiene de una fuente externa. div: agrupación genérica dentro del documento. dl: crear listas de descripciones. dt: Contiene la descripción de un término o concepto que formará parte de una lista de definiciones. dd: definición asociada a un término en una lista de descripciones. figure: Define una imagen, ilustración, diagrama, bloque de código, el cual es referenciado en el documento. HTML5. figcaption: Contiene una descripción asociada a una figura. HTML5. hr: Regla horizontal que marca una transición a otro tema. main: Marca el contenido principal del documento. HTML5. ol: Se utiliza para definir una lista ordenada. ul: Se utiliza para definir una lista desordenada. li: Se utiliza para definir un simple elemento que forma parte de una lista ordenada o desordenada. p: Marca un párrafo de texto. pre: Contiene un bloque de texto preformateado.
37
¿Cuáles son Elementos de texto?
a: Se utiliza para crear un hiperlink. abbr: Marca una abreviación. b, i: b se utiliza para negrita y el elemento i cursiva. strong: Se utiliza para marcar texto importante. em: Marca texto enfatizado. br: Se utiliza para aplicar un cambio de línea. cite: Se utiliza para referenciar un trabajo creativo. Puede ser un libro, película o programa. mark: Se utiliza para marcar el texto. small: Marca comentarios, derechos de autor, texto legal. span: Contenedor genérico en línea. Se utiliza para dar estilo a un texto. sub: Subíndice. sup: Superíndice. time: Marca un valor de tiempo. HTML5.
38
¿Cómo insertamos caracteres especiales en HTML?
Se puede hacer uso de entidades. Las entidades son un texto que comienza con el símbolo & y termina con ;. Ejemplos: ©   ♥ Se pueden agregar caracteres UNICODE. Para esto se escribe el símbolo & seguido de # así como el código del carácter y termina con ; ㈄
39
¿Qué etiquetas usamos para incrustar diferentes elementos?
audio: Se utiliza para agregar contenido de audio al documento. HTML5. embed: Permite incrustar contenido externo de otras aplicaciones. iframe: Permite incrustar contenido externo de otra página o recurso de internet. img: Permite incrustar una imagen en el documento. video: Se utiliza para agregar un video al documento. HTML5.
40
¿Qué etiquetas usamos para TABLAS en HTML?
La etiqueta table. tr define los renglones y td marcan las celdas. th encabezado de la tabla.
41
¿Son Etiquetas utilizadas en tablas?
tbody, tfoot, thead, colgroup.
42
¿Qué es CSS?
Es un lenguaje para definir la apariencia o estilo de las páginas web, escritas en HTML. Son hojas en estilo cascada.
43
¿Cómo se usa CSS?
Estilos en línea, Bloques de estilo, Hojas de estilo externas.
44
¿Qué selectores básicos hay de CSS?
Selectores Universal, Selectores de tipo, Selectores por ID, Selectores de Clase, Selector de atributo, Selectores de clase de un tag en particular, Selectores de lista, Selectores compuestos, Selector de descendientes, Selector de descendientes hijos directos, Selector hermano general, Selector hermano adyacente.
45
¿Cuáles son las Reglas CSS?
Estructura básica: ```css selector { propiedad: valor; } ```
46
¿Cuáles son los Selectores Básicos?
Selectores Universales: `*` (selecciona todos los elementos). Selectores de Tipo: `h1`, `p`, `div` (selecciona elementos por su etiqueta). Selectores por ID: `#id` (selecciona un elemento por su atributo `id`). Selectores de Clase: `.clase` (selecciona elementos por su atributo `class`). Selectores de Atributo: `[nombre]`, `[nombre="valor"]`, etc. Selectores Compuestos: Combinación de selectores (ej: `h1.clase`).
47
¿Qué hacen las Pseudo-clases y Pseudo-elementos?
Permiten seleccionar elementos basados en su estado. ```css a:hover { color: red; } ```
48
¿Qué hacen los Pseudo-elementos?
Permiten seleccionar parte de un elemento. ```css p::first-letter { font-size: 2em; } ```
49
¿Cuál es la jerarquía de Especificidad?
1. Estilos en línea. 2. Selectores por ID. 3. Selectores de clase, pseudo-clases, atributos. 4. Selectores de elemento, pseudo-elementos. **`!important`**: Sobrescribe cualquier otra regla de estilo.
50
¿Cuáles son los Modelos de Caja?
Box Sizing: `content-box`: El tamaño de la caja se calcula sumando el contenido, padding y borde. `border-box`: El tamaño de la caja incluye el contenido, padding y borde.
51
¿Cuáles son los Elementos HTML en Bloque vs. en Línea?
Bloque: Ocupan todo el ancho del contenedor (ej: `div`, `p`). Línea: Ocupan solo el espacio necesario (ej: `span`, `a`). Inline-block: Combinación de ambos (ej: `button`).
52
¿Cuáles son las Unidades de Medida?
Absolutas: `px`, `cm`, `mm`, `in`, `pt`. Relativas: `em` (relativo al tamaño de fuente del elemento), `rem` (relativo al tamaño de fuente de la página), `%` (relativo al tamaño del contenedor). Viewport: `vw` (ancho del viewport), `vh` (alto del viewport).
53
¿Qué es Overflow?
En la caja rectangular se usa para especificar el alto y ancho. hidden: Oculta el contenido que se desborda. scroll: Muestra barras de desplazamiento. auto: Muestra barras de desplazamiento solo si es necesario.
54
¿Qué es Flexbox?
Es un Modelo unidimensional para distribuir el espacio entre los ítems de una interfaz.
55
¿Cuáles son las Propiedades del Contenedor en Flexbox?
flex-direction: Define la dirección de los elementos (row, column). justify-content: Alinea los elementos en el eje principal. align-items: Alinea los elementos en el eje secundario.
56
¿Cuáles son las Propiedades de los Elementos en Flexbox?
flex-grow: Define cuánto crecerá un elemento. flex-shrink: Define cuánto se contraerá un elemento.
57
¿Qué es Flexbox?
Es un sistema de diseño que permite distribuir espacio entre los ítems de una interfaz.
58
¿Cuáles son las Propiedades del Contenedor en Flexbox?
- flex-direction: Define la dirección de los elementos (row, column). - justify-content: Alinea los elementos en el eje principal. - align-items: Alinea los elementos en el eje secundario.
59
¿Cuáles son las Propiedades de los Elementos en Flexbox?
- flex-grow: Define cuánto crecerá un elemento. - flex-shrink: Define cuánto se contraerá un elemento. - align-self: Alinea un elemento individualmente.
60
¿Qué es Grid CSS?
Es un sistema de rejilla bidimensional para diseñar layouts, compuesto de filas y columnas facilitando el diseño de la web.
61
¿Cuáles son las Propiedades del Contenedor en Grid CSS?
- grid-template-columns: Define el ancho de las columnas. - grid-template-rows: Define el alto de las filas. - grid-gap: Define el espacio entre celdas.
62
¿Cuáles son las Propiedades de los Elementos en Grid CSS?
- grid-column: Define cuántas columnas abarca un elemento. - grid-row: Define cuántas filas abarca un elemento.
63
¿Qué es HTML?
Define la estructura y el contenido.
64
¿Qué es CSS?
Define el estilo y la apariencia.