Métodos HTTP y JavaScript

Métodos HTTP

• Los métodos HTTP son acciones que le indican al servidor qué tipo de operación se quiere realizar sobre un recurso específico. Los más comunes son GET, POST, PUT y DELETE.
• Los métodos HTTP se utilizan principalmente en aplicaciones web que siguen el paradigma REST para la comunicación entre cliente y servidor.

Métodos de JavaScript

• forEach: método que se ejecuta una vez por cada elemento del array proporcionado. No devuelve un nuevo array.
• document.createElement('p'): crea un nuevo elemento HTML del tipo especificado.
• El método createElement(...) del objeto document sirve para crear un elemento (etiqueta) según el nombre especificado que puede ser añadido a la página mediante appendChild(...).
• getElementById es un método, mientras que innerHTML es una propiedad.

API y Manual de API

• Un API (Interfaz de Programación de Aplicaciones) es un conjunto de definiciones y protocolos que permiten que diferentes aplicaciones se comuniquen.
• En el Proyecto Final, el Manual del API sirve como referencia al momento de implementar los requerimientos.

Software de Control de Versiones: Git y GitHub

• Git y GitHub son software de control de versiones que permiten manejar diferentes versiones del código, utilizar ramas, compartir el repositorio en la nube y otras posibilidades para trabajar eficientemente en un equipo de programación.

UX/UI Diseño

• UX (Experiencia de Usuario): Se trata de cómo una persona se siente al usar una aplicación o sitio web. El diseño UX se enfoca en entender las necesidades y expectativas de los usuarios.
• Preguntas que guían el diseño UX: ¿Es fácil de encontrar lo que busca?, ¿El proceso es lógico y sin fricciones? Un sitio web fácil de navegar y entender tiene un buen diseño UX.
• UI (Interfaz de Usuario): Se refiere a cómo se ve y cómo interactúas con una aplicación o sitio web.

Eventos JavaScript

• addEventListener facilita la organización del código, la reutilización, el mantenimiento y evita posibles conflictos al manejar múltiples eventos en un mismo elemento.
• Otros eventos además de "click":
  • mouseover: Se dispara cuando el mouse pasa sobre un elemento.
  • keydown: Se activa cuando se presiona una tecla.
  • submit: Se desencadena cuando se envía un formulario.
• Para evitar que el evento "click" del div se dispare al hacer clic en el botón, usa el método stopPropagation() en el manejador del evento botón.

Notas del Cuestionario

• Cuando subimos un cambio desde el repositorio local a GitHub, decimos que hacemos un "push".
• Un evento es algo que sucede en el navegador, como mover el mouse, dar click a un botón, la carga de la página, etc.
• La función fetch solo sirve para traer archivos en formato JSON.
• Figma sirve para la creación de prototipos interactivos.

JSON (JavaScript Object Notation)

• Formato de texto para intercambiar datos.
• Fácil para humanos de leer y escribir, y fácil de analizar y generar para las máquinas.
• Contiene datos organizados en forma de "objetos" y "arrays".

fetch()

• Función en JavaScript que se utiliza para hacer solicitudes de red para descargar datos de un servidor.

Data en el contexto de JSON

• Se refiere a la información que obtenemos de un archivo JSON.

Evento DOMContentLoaded

• El script se ejecuta cuando el contenido del DOM ha sido completamente cargado, asegurando que todos los elementos necesarios están disponibles para la manipulación.

Convertir Objetos a Cadenas JSON

• Método JSON.stringify(): convierte un objeto a una cadena de texto en formato JSON.

Convertir Cadenas JSON a Objetos

• Método JSON.parse(): convierte una cadena en formato JSON en un objeto JavaScript.

Bootstrap y Diseño Responsivo

• Bootstrap es un framework de desarrollo web front-end.

Diseño Web Responsivo

• Un sitio web responsivo está diseñado para funcionar correctamente en diferentes tamaños de pantalla.
• El contenido y la disposición del sitio se ajustan automáticamente según el dispositivo que se esté utilizando.

Diseño Responsivo (Responsive Design)

• Técnicas y buenas prácticas para que los sitios web se visualicen adecuadamente en todos los dispositivos.
• Técnicas:
  • Incluir la meta etiqueta "viewport" en el HTML.
  • Usar unidades relativas (%, em, rem).
  • Adaptar el CSS completamente utilizando Media Queries.
  • Utilizar frameworks como Bootstrap.

Notas del cuestionario:

• El diseño responsivo garantiza una buena experiencia de usuario en distintos dispositivos sin importar el tamaño de la pantalla.
• Framework no es lo mismo que una librería.
• Un componente en Bootstrap se refiere a una pieza de código HTML que colocamos en nuestra página que cumple una función.
• Los contenedores flexibles nos permiten manejar adecuadamente el diseño en varias filas y varias columnas al mismo tiempo.
• Para manejar el diseño en muchas filas y columnas, utilizamos CSS Grid.

Arrays, Objetos y Operadores

• Un objeto en JavaScript es una colección de pares clave-valor. Las claves son cadenas (o símbolos) que sirven como identificadores únicos para los valores asociados.
  • Notación de punto: objeto.propiedad
  • Notación de corchetes: objeto["propiedad"]
• Un array en JavaScript es una lista ordenada de elementos, donde cada uno tiene un índice basado en su posición.
• Para recorrer un array, se utiliza un bucle for o el método forEach.

Tipos de Datos en JavaScript

• Una variable puede almacenar diferentes tipos de datos (número, texto, lista).
• El operador typeof identifica los tipos de datos almacenados en las variables.

Funciones de Arreglos (Arrays)

• filter: Crea una nueva lista con los elementos que cumplen con una condición específica.
• sort: Ordena los elementos de una lista (array) según un criterio específico.
• forEach: recorre cada elemento del array y ejecuta una función.

Funciones Flecha

• Forma concisa de escribir funciones en JavaScript.
• Sintaxis: (parámetros) => { cuerpo de la función }
• No tienen su propio this y son útiles para funciones pequeñas.

Local Storage

• Permite almacenar datos en el navegador del usuario.
• Los datos persisten incluso si el navegador se cierra y se vuelve a abrir.
• Métodos de Local Storage:
  • setItem('datoGuardado', inputText): Guarda un valor en Local Storage.
  • getItem('datoGuardado'): Recupera un valor del Local Storage
• JSON.parse(...): Convierte la cadena obtenida del Local Storage o el valor predeterminado en un objeto JavaScript.
• El Local Storage nos permite guardar pares clave/valor en nuestra página a pesar de que el navegador se cierre.

Este cuestionario explora los métodos HTTP que facilitan la comunicación entre el cliente y el servidor, así como los métodos clave de JavaScript para manipular elementos en la web. Aprenderás sobre acciones como GET, POST, y cómo crear elementos dinámicamente usando JavaScript. Ideal para estudiantes que buscan profundizar en programación web.