Please enable JavaScript.

Coggle requires JavaScript to display documents.

Desarrollo Web - Coggle Diagram

- - - - Etiquetas de encabezado: Se utilizan para definir los niveles de encabezado en una página web, desde <h1> hasta <h6>. <h1> es el encabezado más grande y <h6> es el más pequeño.
      - Etiqueta de párrafo: <p> se utiliza para definir un párrafo de texto.
      - Etiquetas de lista: Se utilizan para crear listas ordenadas (<ol>) y listas desordenadas (<ul>). Cada elemento de la lista se marca con la etiqueta <li>.
      - Etiqueta de imagen: <img> se utiliza para insertar imágenes en una página web. Se utiliza junto con el atributo src para especificar la ubicación de la imagen
      - Etiqueta de enlace: <a> se utiliza para crear enlaces a otras páginas web o a diferentes secciones de la misma página
      - Etiqueta de división: <div> se utiliza para agrupar elementos HTML en bloques o secciones. Se utiliza comúnmente para aplicar estilos o manipular grupos de elementos con CSS o JavaScript.
      - Etiqueta de formulario: <form> se utiliza para crear formularios interactivos en una página web.
      - Etiqueta de tabla: <table> se utiliza para crear tablas en una página web. Se compone de filas (<tr>), celdas de encabezado (<th>) y celdas regulares (<td>).
  - - - Etiquetas de formato de texto: HTML proporciona etiquetas para dar formato al texto, como negrita (<strong> o <b>), cursiva (<em> o <i>), subrayado (<u>), tachado (<s> o <strike>), resaltado (<mark>), etc.
      - Etiquetas de encabezado y párrafo: Las etiquetas de encabezado (<h1> a <h6>) y la etiqueta de párrafo (<p>) también afectan el formato del texto
      - Etiquetas de lista: Las etiquetas <ul> y <ol> se utilizan para crear listas desordenadas y ordenadas, respectivamente. Estas etiquetas se combinan con la etiqueta <li> para definir los elementos de la lista
      - Etiquetas de estilo: HTML incluye la etiqueta <style> que se puede colocar dentro de la sección <head> para definir estilos CSS en línea
      - Atributos de estilo: Las etiquetas HTML también admiten atributos de estilo, como style, que se utilizan para aplicar estilos directamente a un elemento específico
  - - - Listas
        
        Listas desordenadas (<ul>): Se utilizan para crear una lista sin un orden específico. Los elementos de la lista se definen mediante la etiqueta <li>.
        
        Listas ordenadas (<ol>): Se utilizan para crear una lista con un orden numérico o alfabético. Al igual que con las listas desordenadas, los elementos de la lista se definen mediante la etiqueta <li>.
      - Imágenes
        
        Etiqueta <img>: Se utiliza para insertar imágenes en una página web. El atributo src se utiliza para especificar la URL o ruta de la imagen, y el atributo alt se utiliza para proporcionar un texto alternativo que se muestra si la imagen no se carga o si se accede a la página web utilizando tecnologías asistivas.
      - Vínculos
        
        Etiqueta <a>: Se utiliza para crear un enlace o vínculo a otra página web o recurso. El atributo href se utiliza para especificar la URL de destino.
  - - - <table>: Esta etiqueta se utiliza para crear la tabla en sí. Contiene todas las filas y columnas de la tabla.
      - <tr>: Esta etiqueta se utiliza para crear una fila en la tabla. Debe colocarse dentro de la etiqueta <table>.
      - <th>: Esta etiqueta se utiliza para crear los encabezados de columna de la tabla. Debe colocarse dentro de la etiqueta <tr>.
      - <td>: Esta etiqueta se utiliza para crear las celdas de datos en la tabla. Debe colocarse dentro de la etiqueta <tr>.
  - - - <form>: Esta etiqueta se utiliza para crear el formulario en sí. Contiene todos los elementos del formulario.
      - <label>: Esta etiqueta se utiliza para asociar una etiqueta de texto con un campo de entrada. El atributo for se utiliza para establecer la relación entre la etiqueta y el campo de entrada correspondiente
      - <input>: Esta etiqueta se utiliza para crear campos de entrada en el formulario. El atributo type se utiliza para especificar el tipo de campo (como texto, correo electrónico, número, etc.).
      - <textarea>: Esta etiqueta se utiliza para crear un campo de entrada de texto más grande, que permite a los usuarios escribir múltiples líneas de texto.
      - <input type="submit">: Esta etiqueta se utiliza para crear un botón de envío que los usuarios pueden hacer clic para enviar el formulario
- - - - Cliente: El cliente es el navegador web utilizado por los usuarios para acceder y utilizar la aplicación web. Puede ser cualquier navegador web moderno como Chrome, Firefox, Safari, etc.
      - Servidor web: El servidor web es el componente que aloja y entrega la aplicación web al cliente. Recibe las solicitudes del cliente, procesa las solicitudes, realiza las acciones requeridas y envía las respuestas al cliente
      - Lógica de aplicación: La lógica de la aplicación es el código que se ejecuta en el servidor web y se encarga de procesar las solicitudes del cliente y realizar las acciones necesarias
      - Base de datos: La base de datos es donde se almacenan y recuperan los datos necesarios para la aplicación web. Puede ser una base de datos relacional como MySQL o PostgreSQL, o una base de datos NoSQL como MongoDB o Firebase
      - Interfaz de usuario: La interfaz de usuario es lo que los usuarios ven y con lo que interactúan en el navegador. Puede incluir elementos HTML, CSS y JavaScript que definen la apariencia y el comportamiento de la aplicación web
  - - - Servidores web
        
        Apache HTTP Server: Es uno de los servidores web más populares y ampliamente utilizados. Es de código abierto y compatible con una amplia gama de sistemas operativos
        
        Nginx: Es un servidor web y proxy inverso que destaca por su alto rendimiento y capacidad para manejar grandes cargas de tráfico
        
        Microsoft Internet Information Services (IIS): Es el servidor web desarrollado por Microsoft para sistemas operativos Windows
      - Servidores de bases de datos
        
        MySQL: Es un sistema de gestión de bases de datos relacional de código abierto ampliamente utilizado. Ofrece una gran velocidad y escalabilidad.
        
        PostgreSQL: Es otro sistema de gestión de bases de datos relacional de código abierto que destaca por su robustez y capacidad de extensión.
        
        MongoDB: Es una base de datos NoSQL orientada a documentos que permite el almacenamiento y recuperación eficiente de datos JSON-like.
      - Servidores de correo electrónico
        
        Postfix: Es un popular servidor de transferencia de correo (MTA) utilizado para enviar, recibir y enrutar correos electrónicos en sistemas UNIX
        
        Microsoft Exchange Server: Es una solución de servidor de correo electrónico y colaboración desarrollada por Microsoft que se integra con otros servicios de Microsoft.
      - Servidores de aplicaciones
        
        Apache Tomcat: Es un servidor de aplicaciones web y contenedor de servlets y JSP (JavaServer Pages) que se utiliza para ejecutar aplicaciones Java
        
        Node.js: No es propiamente un servidor, sino un entorno de tiempo de ejecución de JavaScript en el servidor
      - Servidores de almacenamiento en la nube
        
        Amazon S3: Es un servicio de almacenamiento en la nube de Amazon Web Services (AWS) que permite almacenar y recuperar grandes cantidades de datos.
        
        Google Cloud Storage: Es un servicio de almacenamiento en la nube de Google Cloud que ofrece almacenamiento escalable y duradero para aplicaciones y sitios web.
  - - - Identificación de sesión: Para mantener una sesión web, se asigna un identificador único a cada usuario que visita el sitio web
      - Almacenamiento de datos de sesión: Los datos específicos de la sesión, como la información del usuario, las preferencias, el carrito de compras o cualquier otro dato relevante, se almacenan en el servidor asociados con el identificador de sesión.
      - Gestión del ciclo de vida de la sesión: La sesión web tiene un ciclo de vida que incluye su creación, actualización y eventual cierre.
      - Seguridad de la sesión: La seguridad de la sesión es crucial para proteger la información y evitar ataques como la suplantación de identidad (session hijacking) o el acceso no autorizado a las sesiones
  - - - Creación y almacenamiento de cookies: Cuando un usuario visita un sitio web, el servidor puede enviar una o varias cookies al navegador del usuario.
      - Acceso y envío de cookies: Cuando el usuario realiza solicitudes adicionales al mismo sitio web, el navegador adjunta automáticamente las cookies relevantes al encabezado de la solicitud HTTP
    - - Mantener el estado de la sesión: Las cookies se utilizan para rastrear la sesión de un usuario y mantener su estado mientras navega por un sitio web.
      - Personalización del sitio web: Las cookies se utilizan para almacenar preferencias y configuraciones específicas del usuario, como el idioma preferido, el tema de la interfaz o las preferencias de visualización
      - Rastreo y análisis de usuarios: Las cookies también se pueden utilizar para rastrear el comportamiento de los usuarios en un sitio web y recopilar datos para análisis y estadísticas
      - Seguridad y privacidad de las cookies: Las cookies pueden plantear preocupaciones de seguridad y privacidad si se utilizan de manera incorrecta
      - Cookies seguras: Las cookies seguras se envían a través de conexiones cifradas (HTTPS) para proteger los datos sensibles durante la transmisión
      - Consentimiento del usuario: En muchos casos, se requiere el consentimiento del usuario antes de almacenar ciertos tipos de cookies, especialmente aquellas relacionadas con el seguimiento y la publicidad
  - - - Preparación de la aplicación: Antes de desplegar la aplicación, es necesario asegurarse de que esté lista y funcionando correctamente en un entorno de desarrollo local.
      - Selección del servidor o servicio de alojamiento: El siguiente paso es seleccionar un servidor o servicio de alojamiento web que se ajuste a los requisitos de la aplicación
      - Configuración del servidor o servicio de alojamiento: Una vez seleccionado el servidor o servicio de alojamiento, se deben realizar las configuraciones necesarias.
      - Transferencia de archivos: La siguiente etapa es transferir los archivos de la aplicación desde el entorno de desarrollo local al servidor o servicio de alojamiento.
      - Configuración del entorno de ejecución: Una vez que los archivos están en el servidor, es necesario configurar el entorno de ejecución de la aplicación
      - Pruebas y verificación: Después de configurar el entorno de ejecución, es importante realizar pruebas exhaustivas para asegurarse de que la aplicación funcione correctamente en el entorno de producción
      - Puesta en marcha y monitorización: Una vez que la aplicación ha pasado las pruebas y verificaciones, se puede poner en marcha y hacer accesible a los usuarios.
  - - - Asincronía: La asincronía es el aspecto fundamental de AJAX. En lugar de enviar una solicitud al servidor y esperar una respuesta antes de actualizar la página, AJAX permite enviar solicitudes asíncronas en segundo plano y manejar las respuestas en consecuencia
      - Tecnologías involucradas
        
        JavaScript: Es el lenguaje principal utilizado para implementar la lógica de AJAX en el lado del cliente
        
        XML o JSON: XML y JSON son formatos comunes utilizados para estructurar y transportar datos entre el servidor y el cliente.
        
        XMLHttpRequest (XHR): Es una API de JavaScript que permite realizar solicitudes HTTP asíncronas desde el cliente.
        
        Actualización dinámica del contenido: Con AJAX, es posible actualizar partes específicas de una página web sin recargarla por completo.
        
        Interacciones y respuestas en tiempo real: AJAX permite una variedad de interacciones y respuestas en tiempo real en una página web, como la validación de formularios sin recargar la página,
        
        Mejora de la experiencia de usuario: Al evitar la recarga completa de la página, AJAX mejora la experiencia de usuario al hacer que las interacciones sean más rápidas y fluidas.
- - - - Variables: En JavaScript, se utilizan variables para almacenar y manipular datos. Puedes declarar una variable utilizando la palabra clave var, let o const, seguida del nombre de la variable y, opcionalmente, un valor inicial.
      - Tipos de datos: JavaScript tiene varios tipos de datos, incluyendo cadenas de texto, números, booleanos, objetos, arreglos y valores especiales como null y undefined.
      - Operadores: JavaScript tiene operadores aritméticos (+, -, , /), operadores de asignación (=, +=, -=, =, /=), operadores de comparación (==, ===, !=, !==, >, <, >=, <=), operadores lógicos (&&, ||, !) y más.
      - Estructuras de control: JavaScript proporciona estructuras de control para tomar decisiones y repetir acciones. Algunas de estas estructuras incluyen instrucciones if, else if, else, bucles for, while y do-while.
      - Funciones: Las funciones en JavaScript permiten agrupar un conjunto de instrucciones y ejecutarlas en cualquier momento. Pueden recibir parámetros y devolver resultados
  - - - Sintaxis de las expresiones regulares
        
        Delimitadores: Las expresiones regulares se escriben entre dos barras diagonales (/).
        Patrones: Los patrones son una secuencia de caracteres que definen la coincidencia que se busca.
        Modificadores: Se pueden agregar modificadores después de la segunda barra diagonal para realizar coincidencias de manera global (g), sin distinción entre mayúsculas y minúsculas (i), y más.
      - Métodos de las expresiones regulares en JavaScript
        
        test(): Verifica si una cadena cumple con el patrón de la expresión regular y devuelve true o false.
        exec(): Busca la primera coincidencia del patrón en una cadena y devuelve un array con información sobre la coincidencia.
        match(): Busca todas las coincidencias del patrón en una cadena y devuelve un array con las coincidencias.
        replace(): Reemplaza una o todas las coincidencias del patrón en una cadena con otro texto.
        search(): Busca la posición de la primera coincidencia del patrón en una cadena y devuelve el índice.
      - Patrones y caracteres especiales:
        
        Caracteres literales: Los caracteres dentro de la expresión regular se tratan como literales, es decir, se buscan tal cual.
        Caracteres especiales: Algunos caracteres tienen un significado especial en las expresiones regulares, como . (cualquier caracter), ^ (inicio de línea), $ (fin de línea), * (cero o más repeticiones), + (una o más repeticiones), ? (cero o una repetición),
      - Nodos del DOM
        
        Nodo de elemento (Element): Representa un elemento HTML en el árbol del DOM, como un <div>, <p>, <a>, etc.
        Nodo de texto (Text): Representa el contenido de texto dentro de un elemento HTML.
        Nodo de atributo (Attribute): Representa un atributo de un elemento HTML
      - Acceso a los elementos del DOM
        
        Nodo de atributo (Attribute): Representa un atributo de un elemento HTML.
        Acceso a los elementos del DOM:
        document.getElementById(id): Retorna el elemento con el ID especificado.
        document.querySelector(selector): Retorna el primer elemento que coincida con el selector CSS especificado.
        document.querySelectorAll(selector): Retorna todos los elementos que coincidan con el selector CSS especificado.
      - Manipulación de los elementos del DOM
        
        Modificación de contenido: Se pueden modificar el contenido de un elemento, como texto, HTML interno, atributos, etc.
        Modificación de estilos: Se pueden cambiar los estilos CSS de un elemento.
        Manipulación de clases: Se pueden agregar, remover o cambiar clases de un elemento.
        Creación y eliminación de elementos: Se pueden crear nuevos elementos y agregarlos al árbol del DOM, o eliminar elementos existentes.
  - - - Creación de elementos dinámicamente: Se pueden crear nuevos elementos HTML y agregarlos al DOM utilizando métodos como createElement() y appendChild().
      - Cambio de contenido de elementos existentes: Se pueden modificar el contenido de elementos HTML existentes, como cambiar el texto o el atributo src de una imagen.
      - Manipulación de clases y estilos: Se pueden agregar, eliminar o cambiar clases de elementos HTML para aplicar estilos o cambiar su apariencia
      - Eventos y manipulación basada en interacción: Se pueden vincular eventos a elementos HTML y realizar cambios dinámicos en respuesta a la interacción del usuario.
  - - - Angular: Desarrollado por Google, Angular es un framework de código abierto que permite crear aplicaciones web de una sola página (SPA, por sus siglas en inglés).
      - React: Desarrollado por Facebook, React es una biblioteca JavaScript de código abierto para crear interfaces de usuario. Se utiliza ampliamente en el desarrollo de aplicaciones web de una sola página
      - Vue.js: Vue.js es otro framework JavaScript de código abierto utilizado para construir interfaces de usuario interactivas
      - Django: Django es un framework de desarrollo web de alto nivel escrito en Python. Proporciona una arquitectura MVC (Modelo-Vista-Controlador) para crear aplicaciones web robustas y seguras
      - Ruby on Rails: Ruby on Rails, también conocido como Rails, es un framework de desarrollo web escrito en Ruby. Rails sigue la convención sobre configuración y favorece la simplicidad y la productividad.
- - - - Selector: El selector es utilizado para seleccionar los elementos HTML a los cuales se aplicará el estilo. Puede ser el nombre del elemento, una clase o un identificador único.
      - Propiedad: La propiedad es el aspecto o característica del elemento que deseamos estilizar.
      - Valor: El valor es el valor asignado a la propiedad. El valor puede ser una palabra clave, un número, una unidad de medida o un código de color, dependiendo de la propiedad.
  - - - La cascada en CSS se refiere a la forma en que se aplican y resuelven los estilos cuando hay múltiples reglas que se aplican a un mismo elemento. Cuando varios estilos se aplican a un elemento, la cascada determina el orden de prioridad y cómo se resuelven los conflictos entre las reglas
      - Reglas
        
        Importancia: Algunas reglas tienen una mayor importancia que otras. Por ejemplo, un estilo en línea (definido directamente en el elemento HTML mediante el atributo style) tiene más prioridad que un estilo en un archivo CSS externo.
        
        Especificidad: Las reglas con selectores más específicos tienen mayor prioridad que las reglas con selectores más generales.
        
        Orden: Si dos reglas tienen la misma importancia y especificidad, el orden en que aparecen en el código determina cuál prevalece. La última regla definida tiene mayor prioridad
  - - - color: Define el color del texto.
        font-family: Especifica la fuente del texto.
        font-size: Establece el tamaño de la fuente.
        font-weight: Controla el grosor de la fuente (normal, negrita, etc.). text-decoration: Aplica una decoración al texto, como subrayado o tachado.
        text-align: Alinea el texto a la izquierda, derecha, centrado o justificado.
    - - margin: Define los márgenes exteriores del párrafo.
        padding: Especifica los márgenes internos del párrafo.
        background-color: Establece el color de fondo del párrafo.
        border: Agrega un borde alrededor del párrafo.
    - - list-style-type: Define el tipo de viñeta o numeración de la lista (círculo, cuadrado, decimal, etc.).
        list-style-image: Permite utilizar una imagen personalizada como viñeta de la lista.
        list-style-position: Controla la posición de las viñetas o numeración (dentro o fuera del contenido).
  - - - display: Controla el tipo de visualización de un elemento (bloque, en línea, en línea-bloque, etc.).
        position: Establece el tipo de posicionamiento de un elemento (estático, relativo, absoluto, fijo, etc.).
        width y height: Especifican el ancho y la altura de un elemento.
        margin y padding: Controlan los márgenes externos e internos de un elemento.
    - - Selectores de elemento (element): Seleccionan elementos específicos por su nombre de etiqueta. Por ejemplo, body, header, section, nav, etc.
        Selectores de clase (.clase): Seleccionan elementos que tienen asignada una clase específica. Se utilizan con la clase definida en el atributo class del elemento.
        Selectores de ID (#id): Seleccionan un elemento específico que tiene un identificador único. Se utilizan con el ID definido en el atributo id del elemento.
        Selectores de atributo ([atributo]): Seleccionan elementos que tienen un atributo específico definido. Por ejemplo, [target], [href], etc.