[{"content":"Introduction to Funval # ","date":"14 noviembre 2024","permalink":"/platform/","section":"","summary":"Introduction to Funval # ","title":""},{"content":"","date":"14 noviembre 2024","permalink":"/platform/html/","section":"Htmls","summary":"","title":"Htmls"},{"content":"Un wireframe es una representación visual simplificada de una página web o aplicación. Funciona como un boceto que define la estructura y los elementos fundamentales del diseño, como botones, menús, texto, imágenes y enlaces, sin enfocarse en los detalles estéticos o gráficos. Los wireframes permiten a los diseñadores y desarrolladores visualizar el contenido y la funcionalidad de la interfaz antes de comenzar a escribir código.\n¿Por qué usar un wireframe antes de escribir código? # El uso de wireframes en la fase de planificación es crucial porque permite:\nClaridad de ideas: Ayuda a comunicar claramente la disposición y la estructura de la página tanto al equipo de diseño como al cliente. Ahorrar tiempo y recursos: Detecta problemas de diseño y usabilidad antes de que se escriba una sola línea de código, lo que evita cambios costosos en etapas avanzadas del desarrollo. Facilitar la iteración: Permite realizar cambios rápidos y obtener retroalimentación temprana, agilizando el proceso de desarrollo. Mejores prácticas para crear un wireframe # Para elaborar un wireframe efectivo, es recomendable seguir estas mejores prácticas:\nSimplicidad: No es necesario incluir colores, imágenes detalladas ni tipografía específica. Enfócate en la estructura y la colocación de los elementos. Enfoque en la funcionalidad: Piensa en la experiencia del usuario (UX) y en cómo interactuarán con los elementos de la página. Uso de anotaciones: Agrega notas para explicar la funcionalidad de ciertos componentes o para indicar comportamientos específicos. Considera diferentes dispositivos: Crea wireframes tanto para mobile como para desktop, teniendo en cuenta el diseño responsive. Obtener retroalimentación: Comparte el wireframe con otros para recibir comentarios y ajustar antes de avanzar al diseño detallado. Aquí tienes la lista actualizada con Moqups incluido:\nHerramientas online para crear wireframes # Figma Wireframe.cc Mockflow Moqups Estas herramientas son una excelente opción para diseñar y planificar la estructura de tu proyecto, pero recuerda que también puedes optar por hacerlo a mano con papel y lápiz en etapas iniciales.\nEjemplos de wireframes # Aquí tienes algunos ejemplos de wireframes que puedes utilizar como referencia: Tarea # Crea el wireframe para el proyecto de clase que has elegido. Debes incluir las versiones mobile y desktop de tu diseño. Puedes usar herramientas online o hacerlo a mano con papel y lápiz. Una vez finalizado, sube tu wireframe en un archivo PDF con ambas versiones (mobile y desktop).\nEste es un ejemplo del contenido que debe tener tu archivo PDF: ","date":"14 noviembre 2024","permalink":"/platform/html/wireframe/","section":"Htmls","summary":"Un wireframe es una representación visual simplificada de una página web o aplicación.","title":"Wireframe"},{"content":"","date":"12 noviembre 2024","permalink":"/platform/nextjs/","section":"Nextjs","summary":"","title":"Nextjs"},{"content":"\u0026ldquo;Travel Explorer\u0026rdquo; es una aplicación web frontend creada con Next.js y TailwindCSS que permite a los usuarios buscar vuelos y hoteles en tiempo real utilizando la API gratuita de Amadeus. La aplicación está diseñada para ayudar a los viajeros a planificar sus viajes de manera eficiente, brindándoles acceso a información detallada sobre vuelos y opciones de alojamiento. Con una interfaz intuitiva y moderna, la aplicación facilita la búsqueda, comparación y visualización de resultados para que los usuarios encuentren la mejor opción para sus necesidades.\nTecnologías Utilizadas # Framework: Next.js (para estructura, rutas y optimización de carga). Estilo: TailwindCSS (para diseño responsive y estilizado). Fetch API o Axios: Para realizar las peticiones HTTP a la API de Amadeus. No Backend Adicional: Todas las peticiones se manejarán directamente desde el frontend. API Utilizada # La aplicación utilizará la API de Amadeus, aprovechando los endpoints gratuitos disponibles en el plan de prueba:\nFlight Offers Search Endpoint:\nURL: https://test.api.amadeus.com/v2/shopping/flight-offers Permite buscar ofertas de vuelos en tiempo real. Parámetros relevantes: originLocationCode: Código del aeropuerto de origen (ejemplo: JFK, LIM). destinationLocationCode: Código del aeropuerto de destino. departureDate: Fecha de salida (formato: YYYY-MM-DD). adults: Número de pasajeros adultos. max: Número máximo de resultados a devolver. apiKey: Clave de API gratuita (requerida). Hotel Search Endpoint:\nURL: https://test.api.amadeus.com/v2/shopping/hotel-offers Permite buscar ofertas de hoteles en una ubicación específica. Parámetros relevantes: cityCode: Código de la ciudad (ejemplo: NYC, MAD, PAR). checkInDate: Fecha de check-in (formato: YYYY-MM-DD). checkOutDate: Fecha de check-out. adults: Número de adultos para la reserva. radius: Radio de búsqueda desde el centro de la ciudad. apiKey: Clave de API gratuita (requerida). Airport \u0026amp; City Search Endpoint:\nURL: https://test.api.amadeus.com/v1/reference-data/locations Permite buscar códigos de aeropuerto y ciudad. Parámetros relevantes: keyword: Palabra clave para búsqueda (ejemplo: nombre de ciudad o aeropuerto). subType: Tipo de búsqueda (AIRPORT, CITY). apiKey: Clave de API gratuita (requerida). Funcionalidades Detalladas # Búsqueda de Vuelos\nFormulario para que los usuarios ingresen: Aeropuerto de origen y aeropuerto de destino. Fecha de salida y número de pasajeros. Mostrar resultados de búsqueda en una tabla o lista con información relevante: Aerolínea. Hora de salida y llegada. Duración del vuelo. Precio total. Botón para \u0026ldquo;Ver Detalles\u0026rdquo;, que muestra información adicional del vuelo y un enlace para completar la reserva en una nueva pestaña. Búsqueda de Hoteles\nFormulario para buscar hoteles por: Código de ciudad (por ejemplo, NYC para Nueva York). Fechas de check-in y check-out. Número de adultos. Mostrar resultados con información de los hoteles: Nombre del hotel. Dirección. Precio por noche. Imagen destacada del hotel. Botón para \u0026ldquo;Reservar\u0026rdquo;, que redirige al sitio web del hotel para completar la reserva. Búsqueda de Códigos de Aeropuertos y Ciudades\nBarra de búsqueda para ayudar a los usuarios a encontrar códigos de aeropuerto o ciudad mientras escriben. Mostrar sugerencias dinámicas basadas en la entrada del usuario utilizando el endpoint Locations. Modo Oscuro/Claro\nBotón para alternar entre modo oscuro y claro usando TailwindCSS. Guardar la preferencia del usuario en localStorage. Paginación y Filtrado Avanzado\nImplementar paginación para mostrar un máximo de 10 resultados por página, evitando sobrecargar la API. Permitir filtrar los resultados por: Precio (de menor a mayor o viceversa). Duración del vuelo (solo para la búsqueda de vuelos). Número de estrellas del hotel (solo para la búsqueda de hoteles). Manejo de Errores y Mensajes al Usuario\nMostrar mensajes de error claros si ocurre un problema con la API (por ejemplo, límite de peticiones alcanzado). Validar todos los campos de los formularios antes de hacer las peticiones a la API. Optimización con Next.js\nImplementar la carga optimizada de imágenes utilizando el componente Image de Next.js. Consideraciones # El plan gratuito de Amadeus API permite hasta 200 solicitudes por mes, por lo que es importante manejar eficientemente las peticiones y evitar consultas innecesarias. La clave de API debe protegerse utilizando variables de entorno (.env.local) para evitar exponerla en el código fuente al desplegar la aplicación. La aplicación debe ser 100% responsive, proporcionando una experiencia óptima en dispositivos móviles y desktop. Milla Extra # Implementar un componente de Loading para indicar al usuario que los resultados están siendo cargados. Añadir gráficos de precios para visualizar la variación del costo de los vuelos durante diferentes días. Crear un mapa interactivo que muestre la ubicación del hotel utilizando la API de Google Maps. Añadir una funcionalidad de notificaciones para alertar a los usuarios sobre ofertas especiales o cambios en los precios. ","date":"12 noviembre 2024","permalink":"/platform/nextjs/travelapp/","section":"Nextjs","summary":"\u0026ldquo;Travel Explorer\u0026rdquo; es una aplicación web frontend creada con Next.","title":"Travel Explorer"},{"content":"\u0026ldquo;News App\u0026rdquo; es una aplicación web frontend desarrollada con Next.js y TailwindCSS que permite a los usuarios estar al tanto de las noticias y eventos más recientes a nivel mundial. La aplicación consume la API gratuita de News API para obtener datos en tiempo real sobre titulares, noticias populares y artículos de búsqueda. Los usuarios pueden explorar noticias filtradas por país, categoría, y realizar búsquedas personalizadas para encontrar artículos de interés. La interfaz está diseñada para ser moderna, responsive y fácil de usar, adaptándose a diferentes dispositivos y resoluciones.\nTecnologías Utilizadas # Framework: Next.js (para estructura del proyecto, rutas, y optimización de carga). Estilo: TailwindCSS (para diseño responsive y estilizado). Fetch API o Axios: Para realizar las peticiones HTTP. No Backend Adicional: Todas las peticiones se realizan directamente desde el frontend. API Utilizada # La aplicación hará uso de News API. Se utilizarán los siguientes endpoints:\nTop Headlines Endpoint:\nURL: https://newsapi.org/v2/top-headlines Parámetros relevantes: country: Filtra titulares por país (ejemplo: us, ar, mx). category: Filtra titulares por categoría (ejemplo: business, technology, sports). apiKey: Clave de API gratuita (requerida). Everything Endpoint:\nURL: https://newsapi.org/v2/everything Parámetros relevantes: q: Palabra clave para búsqueda (ejemplo: climate change, AI). sortBy: Ordena resultados (relevancy, popularity, publishedAt). apiKey: Clave de API gratuita (requerida). Sources Endpoint:\nURL: https://newsapi.org/v2/sources Parámetros relevantes: language: Filtra fuentes por idioma (en, es, fr). country: Filtra fuentes por país. apiKey: Clave de API gratuita (requerida). Funcionalidades Detalladas # Página de Inicio - Titulares Recientes\nMostrar una lista de titulares utilizando el endpoint Top Headlines. Mostrar cada noticia en un componente tipo card que incluya: Imagen destacada. Título del artículo. Breve descripción. Fuente y fecha de publicación. Botón para \u0026ldquo;Leer Más\u0026rdquo; que redirige al artículo original en una nueva pestaña. Barra de Búsqueda de Noticias\nPermitir búsqueda dinámica de noticias utilizando el endpoint Everything. Mostrar resultados mientras el usuario escribe. Filtrar los resultados por relevancia o fecha de publicación. Filtrado Avanzado de Noticias\nFiltrar por País: Dropdown con una lista de países (ejemplo: us, ar, gb, es). Utilizar el parámetro country en el endpoint Top Headlines para mostrar noticias del país seleccionado. Filtrar por Categoría: Dropdown o botones para seleccionar categorías como business, health, technology, sports. Filtrar por Fuente: Dropdown dinámico que se llena utilizando el endpoint Sources, mostrando fuentes disponibles según el idioma y país seleccionado. Vista Detallada de Noticias\nAl hacer clic en una noticia, se mostrará una vista ampliada con:\nImagen en tamaño completo. Título, subtítulo, y descripción completa del artículo. Fecha de publicación, autor (si está disponible), y enlace al artículo completo. Modo Oscuro/Claro\nImplementar un toggle para alternar entre modo oscuro y claro usando TailwindCSS. Guardar la preferencia del usuario en localStorage. Paginación\nMostrar un máximo de 10 noticias por página para evitar sobrecargar la API. Implementar paginación utilizando el parámetro page en las llamadas a la API. Manejo de Errores y Validaciones\nMostrar mensajes claros al usuario en caso de error al realizar la petición (por ejemplo, si se supera el límite de peticiones diarias). Validar entradas en el campo de búsqueda para evitar consultas vacías. Mostrar un mensaje amigable si no se encuentran resultados. Optimización de Carga con Next.js\nImplementar Image de Next.js para manejar imágenes de forma optimizada. Lista de Países Disponibles para Filtrado # Estados Unidos (us) Argentina (ar) México (mx) España (es) Reino Unido (gb) Francia (fr) Alemania (de) Italia (it) Consideraciones # La versión gratuita de News API permite hasta 100 solicitudes por día, así que es fundamental gestionar las peticiones de manera eficiente. La clave de API no debe estar expuesta en el código fuente al desplegar la aplicación. Utilizar variables de entorno (.env.local) en Next.js para almacenar la clave. La aplicación debe ser completamente responsive, proporcionando una experiencia fluida tanto en dispositivos móviles como de escritorio. Ideas para Milla Extra # Implementar un componente de Loading mientras se cargan las noticias. Añadir un botón de Guardar Noticias que permita marcar artículos como favoritos utilizando localStorage. ","date":"12 noviembre 2024","permalink":"/platform/nextjs/newsapp/","section":"Nextjs","summary":"\u0026ldquo;News App\u0026rdquo; es una aplicación web frontend desarrollada con Next.","title":"News App"},{"content":"La Aplicación de Registro de Horas de Servicio es una plataforma que permite a los alumnos registrar sus horas de servicio y someterlas para su aprobación. Los diferentes roles dentro de la plataforma tienen acceso a funcionalidades específicas para gestionar usuarios, visualizar y aprobar reportes. El frontend será desarrollado utilizando Next.js, y la API ya está disponible con su respectiva documentación en este enlace.\nRoles de Usuario # La plataforma contará con los siguientes roles:\nAdministrador Alumno Controller Reclutador Cada usuario debe iniciar sesión en la plataforma utilizando su correo electrónico y tendrá acceso a funcionalidades según su rol.\nAdministrador # Los usuarios con el rol de Administrador tendrán acceso completo a la gestión de usuarios, reportes y otras entidades de la plataforma, como escuelas y países:\nGestión de Escuelas y Países:\nCrear nueva escuela: Registrar una nueva institución educativa. Crear nuevo país: Agregar un nuevo país a la base de datos. Gestión de Usuarios:\nMostrar: Ver la lista de usuarios registrados. Crear: Registrar nuevos usuarios (controllers, alumnos, reclutadores). Modificar: Editar la información de los usuarios existentes. Vista de Reportes:\nAcceso a todos los reportes de horas de servicio enviados por los alumnos. Aprobación de Reportes:\nAprobar o rechazar los reportes enviados. Definir la cantidad exacta de horas aprobadas en cada reporte antes de aprobarlo. Controller # El Controller tendrá acceso a:\nVisualización de Reportes: Podrá ver los reportes enviados, pero no tendrá permisos para aprobarlos o editarlos. Reclutador # El Reclutador también tendrá acceso a:\nVisualización de Reportes: Podrá ver los reportes enviados, pero no tendrá permisos para aprobarlos o editarlos. Alumno # El Alumno es el principal usuario para el envío de reportes. Tendrá acceso a:\nVer Estado de Reportes:\nRevisar el estado de sus reportes anteriores, ya sea que hayan sido aprobados o rechazados. Editar Reportes Pendientes:\nModificar reportes siempre y cuando no hayan sido revisados. Crear Nuevos Reportes:\nEnviar nuevos reportes que incluyan los siguientes datos: Cantidad de horas de servicio realizadas. Descripción del servicio. Categoría del servicio (predefinida en la API). Evidencia adjunta del servicio (PDF, imagen, etc.). Funcionalidades Detalladas # 1. Autenticación # Todos los usuarios inician sesión con su correo electrónico y una contraseña. Las rutas protegidas se habilitarán según el rol del usuario autenticado. El token de autenticación exitosa tiene una duración de 24 horas. 2. Gestión de Usuarios (Administrador) # Panel de Administración:\nLos Administradores tendrán acceso a una lista de usuarios, con opciones para filtrar, buscar, crear, y modificar usuarios. Gestión de Escuelas y Países:\nCrear nueva escuela: Desde el panel de administración, los Administradores podrán registrar nuevas escuelas. Crear nuevo país: También tendrán la opción de agregar nuevos países que estarán disponibles como parte de la información del sistema. 3. Envío de Reportes (Alumno) # Formulario de Envío de Reportes: Los alumnos podrán:\nSeleccionar la categoría del servicio. Ingresar la cantidad de horas trabajadas. Añadir una descripción del servicio. Adjuntar evidencias del trabajo realizado. Edición de Reportes: Los alumnos podrán editar reportes que aún no han sido revisados.\nHistorial de Reportes: Los alumnos tendrán acceso a un historial de sus reportes, donde podrán ver el estado (aprobado, rechazado, pendiente) y la cantidad de horas aprobadas.\n4. Aprobación de Reportes (Administrador) # Panel de Revisión: Los Administradores podrán revisar los detalles de los reportes enviados, incluyendo la evidencia adjunta. Al aprobar un reporte, deberán especificar cuántas horas de servicio se aprueban. 5. Notificaciones # Opcionalmente, se pueden implementar notificaciones para informar a los alumnos cuando su reporte haya sido aprobado o rechazado. Frontend con Next.js # El frontend será desarrollado con Next.js y contará con las siguientes características:\nSSR (Server-Side Rendering): Para una carga más rápida y mejor optimización SEO. API Routes: Para manejar la autenticación, envío y gestión de reportes. Uso de CSS Modules o TailwindCSS para un diseño modular y responsive. Integración con la API # La aplicación se conectará a la API existente cuya documentación puede encontrarse aquí. Esta API ya gestiona la autenticación de usuarios, creación de reportes, visualización y aprobación. Las rutas y endpoints necesarios se configurarán en el frontend de Next.js para interactuar con la API de manera eficiente.\nResumen # La aplicación permitirá a los alumnos registrar y gestionar sus horas de servicio, mientras que los Administradores podrán revisar y aprobar los reportes, así como gestionar usuarios, escuelas y países. El frontend basado en Next.js garantizará una experiencia de usuario ágil y eficiente, mientras que la integración con la API ya existente permitirá un desarrollo rápido y escalable.\n","date":"22 octubre 2024","permalink":"/platform/nextjs/horas_servicio/","section":"Nextjs","summary":"La Aplicación de Registro de Horas de Servicio es una plataforma que permite a los alumnos registrar sus horas de servicio y someterlas para su aprobación.","title":"Registro de Horas de Servicio"},{"content":"En esta práctica, deberás replicar la aplicación de clima proporcionada utilizando Next.js y TailwindCSS. La aplicación debe incluir rutas específicas y una estructura de diseño basada en las funcionalidades solicitadas.\nInstrucciones: # Configuración inicial:\nCrea una nueva aplicación con create-next-app. Instala y configura TailwindCSS para el diseño. Analiza el funcionamiento de la demo proporcionada: Weather App Demo. API pública para obtener los datos meteorológicos: OpenWeather API pública para obtener la dirección del usuario basado en su IP: ipinfo.io Descarga el siguiente archivo .zip que contienen los archivos del diseño: Click aquí Estilos:\nUsa TailwindCSS para estilizar las páginas. Asegúrate de que la aplicación sea completamente responsiva. Aplica un esquema de colores y fuentes que haga la aplicación visualmente atractiva y clara para los usuarios. Extras (Opcional):\nImplementa Dark Mode con TailwindCSS. Incluye animaciones para la carga de datos o transiciones al hacer hover en los elementos interactivos. Criterios de Evaluación: # Funcionalidad:\nLa aplicación muestra correctamente el clima actual para una ciudad predeterminada. La búsqueda por ciudad funciona adecuadamente, mostrando los datos correctos. Estilo y Responsividad:\nEl diseño es fiel a la demo proporcionada y utiliza adecuadamente TailwindCSS. La aplicación es completamente responsiva y se adapta a diferentes tamaños de pantalla. Código:\nEl código está bien estructurado y es fácil de leer. Uso adecuado de Next.js y TailwindCSS. Extras (Opcional):\nSi se implementan funciones extra como el pronóstico extendido o el Dark Mode, se otorgarán puntos adicionales. Entregables: # Link de tu repositorio de GitHub, el cual debe contener:\nEl código de tu proyecto. El link a la página desplegada en el apartado \u0026ldquo;About\u0026rdquo; del repositorio (puedes usar Vercel para el despliegue). ","date":"10 octubre 2024","permalink":"/platform/nextjs/weatherapp/","section":"Nextjs","summary":"En esta práctica, deberás replicar la aplicación de clima proporcionada utilizando Next.","title":"Weather App"},{"content":"","date":"5 octubre 2024","permalink":"/platform/jsvanilla/","section":"Jsvanillas","summary":"","title":"Jsvanillas"},{"content":"Desarrollar una aplicación web responsive que simule una plataforma de búsqueda de estancias estilo AirBnB, basada en el desafío \u0026ldquo;Windbnb\u0026rdquo; de DevChallenges. La aplicación deberá permitir a los usuarios buscar estancias filtradas por ciudad y número de huéspedes, y mostrar los resultados de manera dinámica. 🌐\nRequisitos del proyecto: ✅ # Interfaz responsiva:\nLa aplicación debe adaptarse perfectamente a todos los tamaños de pantalla, desde móviles hasta escritorio, utilizando HTML, CSS (incluyendo TailwindCSS) para el diseño y estilos. 📱💻\nTecnologías:\nJavaScript Vanilla: Para implementar la lógica de la aplicación. ⚙️ HTML: Para estructurar la interfaz de usuario. 🧱 TailwindCSS: Para diseñar la interfaz principal. 🎨 CSS adicional: Para estilos que no puedan ser aplicados con TailwindCSS. ✂️ Características:\nFiltrado dinámico: Los usuarios deben poder filtrar las estancias por: Ciudad. 🏙️ Número de huéspedes. 👥 Listado de estancias: Mostrar un listado de las estancias disponibles basadas en los filtros seleccionados. 📋 Separación de lógica: Organizar el código utilizando módulos de JavaScript con import y export para mantener una estructura clara y modular. 🗂️ Puntos clave:\nArchivo stays.js: Úsalo localmente para consumir los datos para la aplicación. 📂 Optimización de búsqueda: El sistema debe poder actualizar los resultados en tiempo real cuando los filtros de búsqueda cambien. 🔄 Recursos adicionales: 📚 # Link del template: Repositorio base Entregables 📤 # Link a tu repositorio de GitHub, el cual debe contener el código del proyecto. Además, debe incluir el link a la página desplegada en el apartado \u0026ldquo;About\u0026rdquo; del repositorio. Como se muestra a continuación:\nMétrica de Evaluación 🏆 # El proyecto será evaluado con base en una puntuación total de 100 puntos, distribuidos de la siguiente manera:\nInterfaz responsiva (25 puntos):\nAdaptación correcta a diferentes tamaños de pantalla (10 puntos). 📏 Uso adecuado de TailwindCSS y estilos adicionales (15 puntos). 🎨 Nota: El diseño debe ser fiel al original proporcionado en el desafío. La creatividad no debe alterar el diseño propuesto. Funcionalidad (40 puntos):\nImplementación del filtrado dinámico por ciudad y número de huéspedes (20 puntos). 🔍 Actualización en tiempo real de los resultados de búsqueda (10 puntos). ⏱️ Correcta separación de lógica utilizando módulos de JavaScript (10 puntos). 🗂️ Código y estructura (20 puntos):\nOrganización y modularidad del código (10 puntos). 🛠️ Uso adecuado de stays.js para consumir datos (10 puntos). 📂 Entrega y despliegue (15 puntos):\nRepositorio en GitHub con código limpio y documentado (10 puntos). 📑 Link funcional a la página desplegada en el apartado \u0026ldquo;About\u0026rdquo; del repositorio (5 puntos). 🌐 Nota adicional: Cualquier funcionalidad o mejora adicional que no esté especificada en los requisitos debe ser detallada en el archivo README.md del proyecto. Se otorgarán puntos adicionales por creatividad y mejoras hasta un máximo de 5 puntos extra. ✨\n","date":"5 octubre 2024","permalink":"/platform/jsvanilla/pf-windbnd-vanilla/","section":"Jsvanillas","summary":"Desarrollar una aplicación web responsive que simule una plataforma de búsqueda de estancias estilo AirBnB, basada en el desafío \u0026ldquo;Windbnb\u0026rdquo; de DevChallenges.","title":"Proyecto: Windbnb 🏡"},{"content":"En esta práctica, deberás desarrollar una aplicación web basada en la prueba técnica proporcionada. El objetivo es replicar las funcionalidades de la prueba técnica utilizando Next.js y TailwindCSS, dentro del plazo de 2 días.\nRequerimientos: # Configuración inicial:\nCrea una nueva aplicación con create-next-app. Instala y configura TailwindCSS para estilizar tu proyecto. Implementación de la Prueba Técnica:\nSigue las instrucciones especificadas en el repositorio de la prueba técnica: Prueba Técnica. Asegúrate de cumplir con todas las funcionalidades solicitadas, como la gestión de usuarios, el listado de datos y cualquier otra funcionalidad adicional. Estilización con TailwindCSS:\nUsa TailwindCSS para implementar el diseño de la interfaz. Sigue los principios de diseño y asegúrate de que la aplicación sea completamente responsiva. Criterios de Evaluación: # Funcionalidad:\nLa aplicación cumple con todos los requerimientos de la prueba técnica. La interacción con la interfaz es fluida y funcional. Estilo y Responsividad:\nLa interfaz está correctamente estilizada con TailwindCSS y sigue los principios de diseño de la prueba técnica. La aplicación es completamente responsiva. Código:\nEl código está bien estructurado y organizado. Uso eficiente de Next.js y TailwindCSS. Entregables: # Link de tu repositorio de GitHub, el cual debe contener:\nEl código de tu proyecto El link a la página desplegada en el apartado \u0026ldquo;About\u0026rdquo; del repositorio (puedes usar Vercel para el despliegue). ","date":"4 octubre 2024","permalink":"/platform/pcs/pc-demo-streaming/","section":"Pcs","summary":"En esta práctica, deberás desarrollar una aplicación web basada en la prueba técnica proporcionada.","title":"Demo Streaming"},{"content":"","date":"4 octubre 2024","permalink":"/platform/pcs/","section":"Pcs","summary":"","title":"Pcs"},{"content":"En esta práctica, deberás replicar el diseño de la página proporcionada utilizando Next.js y TailwindCSS. La aplicación debe estar estructurada en rutas específicas, cada una con su correspondiente diseño, basado en la barra de navegación.\nInstrucciones: # Configuración inicial:\nCrea una nueva aplicación con npm create vite@latest. Instala y configura TailwindCSS. Analiza el diseño del Figma: Click aquí Descarga el siguiente archivo .zip que contienen los archivos del diseño: Click aquí Barra de navegación y rutas:\nCrea las siguientes rutas en la barra de navegación de tu sitio web: /: Página de inicio (Home) /services /details /features /projects /team /contact Encontrarás una carpeta para cada una de las rutas mencionadas en el archivo .zip que te pedimos que descargues previamente. De todas maneras, te dejamos el link aquí para que lo descargues nuevamente. Estilos:\nUsa TailwindCSS para estilizar las páginas. Sigue los colores, fuentes y espaciados definidos en el diseño. Asegúrate de que cada página sea completamente responsiva. Extras (Opcional):\nImplementa animaciones o transiciones al hacer hover en los elementos de la barra de navegación. Agrega efectos visuales a los botones según el diseño del Figma. Criterios de Evaluación: # Funcionalidad:\nLa navegación entre rutas funciona correctamente. Cada ruta muestra la sección correspondiente según el diseño de Figma. Estilo y Responsividad:\nEl diseño sigue fielmente los estilos indicados en el Figma. La aplicación es completamente responsiva. Código:\nEl código está bien estructurado y es fácil de leer. Uso adecuado de TailwindCSS para los estilos. Entregables: # Link de tu repositorio de GitHub, el cual debe contener:\nEl código de tu proyecto El link a la página desplegada en el apartado \u0026ldquo;About\u0026rdquo; del repositorio (puedes usar Vercel para el despliegue). ","date":"4 octubre 2024","permalink":"/platform/pcs/pc-themewagon/","section":"Pcs","summary":"En esta práctica, deberás replicar el diseño de la página proporcionada utilizando Next.","title":"ThemeWagon: Implementación de Rutas y Diseño"},{"content":"La validación de formularios es una parte crucial en cualquier aplicación web. En Next.js, podemos mejorar la experiencia del usuario combinando dos herramientas poderosas: Zod para definir esquemas de validación y React Hook Form para manejar la gestión del estado de los formularios de manera eficiente.\nEn este artículo, exploraremos cómo integrar Zod con React Hook Form en una aplicación de Next.js para validar formularios, centrándonos exclusivamente en el frontend.\n¿Qué es React Hook Form? # React Hook Form es una biblioteca que facilita la gestión de formularios en React. Al aprovechar los hooks de React, esta herramienta minimiza el uso innecesario de renderizados y proporciona una API simple para manejar la entrada de datos de formularios, haciendo que la validación y el manejo de formularios sea más eficiente.\nInstalación de Zod y React Hook Form # Primero, instalemos ambas bibliotecas en nuestro proyecto:\nnpm install zod react-hook-form @hookform/resolvers O, si usas yarn:\nyarn add zod react-hook-form @hookform/resolvers ¿Qué es @hookform/resolvers? # Es un paquete que nos permite integrar diferentes esquemas de validación (como Zod) con React Hook Form, proporcionando una solución perfecta para combinar ambas herramientas.\nDefiniendo un Esquema de Validación con Zod # Vamos a crear un esquema de validación usando Zod para un formulario de registro. El esquema validará un nombre de usuario, correo electrónico y contraseña.\nimport { z } from \u0026#39;zod\u0026#39;; const registerSchema = z.object({ username: z .string() .min(3, \u0026#39;El nombre de usuario debe tener al menos 3 caracteres\u0026#39;), email: z.string().email(\u0026#39;Debe ser un correo electrónico válido\u0026#39;), password: z.string().min(6, \u0026#39;La contraseña debe tener al menos 6 caracteres\u0026#39;), }); Esquema Explicado: # username: Debe tener al menos 3 caracteres. email: Debe ser un correo electrónico válido. password: Debe tener al menos 6 caracteres. Integrando Zod con React Hook Form # Ahora que tenemos nuestro esquema, lo combinaremos con React Hook Form para manejar el formulario y su validación.\nConfiguración del Formulario # import { useForm } from \u0026#39;react-hook-form\u0026#39;; import { zodResolver } from \u0026#39;@hookform/resolvers/zod\u0026#39;; import { z } from \u0026#39;zod\u0026#39;; const registerSchema = z.object({ username: z .string() .min(3, \u0026#39;El nombre de usuario debe tener al menos 3 caracteres\u0026#39;), email: z.string().email(\u0026#39;Debe ser un correo electrónico válido\u0026#39;), password: z.string().min(6, \u0026#39;La contraseña debe tener al menos 6 caracteres\u0026#39;), }); export default function RegisterForm() { const { register, handleSubmit, formState: { errors }, } = useForm({ resolver: zodResolver(registerSchema), }); const onSubmit = data =\u0026gt; { console.log(\u0026#39;Datos del formulario:\u0026#39;, data); }; return ( \u0026lt;form onSubmit={handleSubmit(onSubmit)}\u0026gt; \u0026lt;div\u0026gt; \u0026lt;label\u0026gt;Nombre de usuario\u0026lt;/label\u0026gt; \u0026lt;input type=\u0026#39;text\u0026#39; {...register(\u0026#39;username\u0026#39;)} /\u0026gt; {errors.username \u0026amp;\u0026amp; \u0026lt;p\u0026gt;{errors.username.message}\u0026lt;/p\u0026gt;} \u0026lt;/div\u0026gt; \u0026lt;div\u0026gt; \u0026lt;label\u0026gt;Email\u0026lt;/label\u0026gt; \u0026lt;input type=\u0026#39;email\u0026#39; {...register(\u0026#39;email\u0026#39;)} /\u0026gt; {errors.email \u0026amp;\u0026amp; \u0026lt;p\u0026gt;{errors.email.message}\u0026lt;/p\u0026gt;} \u0026lt;/div\u0026gt; \u0026lt;div\u0026gt; \u0026lt;label\u0026gt;Contraseña\u0026lt;/label\u0026gt; \u0026lt;input type=\u0026#39;password\u0026#39; {...register(\u0026#39;password\u0026#39;)} /\u0026gt; {errors.password \u0026amp;\u0026amp; \u0026lt;p\u0026gt;{errors.password.message}\u0026lt;/p\u0026gt;} \u0026lt;/div\u0026gt; \u0026lt;button type=\u0026#39;submit\u0026#39;\u0026gt;Registrarse\u0026lt;/button\u0026gt; \u0026lt;/form\u0026gt; ); } Explicación: # useForm: Este hook es el núcleo de React Hook Form. En su configuración, utilizamos el resolver proporcionado por @hookform/resolvers/zod para integrar Zod y aplicar la validación. register: Se utiliza para vincular los inputs del formulario con React Hook Form. handleSubmit: Se encarga de manejar el envío del formulario, invocando la función de validación y llamando a onSubmit si los datos son válidos. errors: Contiene los errores de validación devueltos por Zod, que se muestran en la interfaz cuando corresponda. Ventajas de Usar React Hook Form y Zod Juntos # 1. Eficiencia en el Renderizado # React Hook Form optimiza la cantidad de renderizados que se producen durante la interacción con los formularios, lo que mejora el rendimiento de la aplicación.\n2. Validación Simplificada # Zod permite definir las reglas de validación de manera declarativa y concisa. Al usar el resolver de @hookform/resolvers, los errores de validación de Zod se integran sin esfuerzo en React Hook Form, lo que reduce la complejidad del manejo de errores.\n3. Mensajes de Error Personalizados # Gracias a Zod, es posible definir mensajes de error personalizados para cada regla de validación, lo que permite una experiencia de usuario más intuitiva.\nValidación en Tiempo Real # React Hook Form permite habilitar la validación en tiempo real para proporcionar una retroalimentación inmediata al usuario a medida que ingresa los datos.\nPara habilitar esta funcionalidad, basta con agregar la propiedad mode al hook useForm:\nconst { register, handleSubmit, formState: { errors }, } = useForm({ resolver: zodResolver(registerSchema), mode: \u0026#39;onChange\u0026#39;, }); Con mode: 'onChange', la validación se activará cada vez que el usuario modifique el valor de un campo, proporcionando retroalimentación instantánea.\nResumen # En este artículo, hemos visto cómo combinar Zod y React Hook Form para gestionar y validar formularios en el frontend de una aplicación Next.js. La combinación de estas herramientas proporciona una solución poderosa, eficiente y flexible para manejar la validación de datos de manera declarativa y fluida.\n","date":"2 octubre 2024","permalink":"/platform/nextjs/zod/","section":"Nextjs","summary":"La validación de formularios es una parte crucial en cualquier aplicación web.","title":"Zod y React Hook Form en Next.js"},{"content":"En el desarrollo web, las fuentes son un aspecto crucial del diseño que influye en la legibilidad y estética de una aplicación. Sin embargo, la carga de fuentes personalizadas puede afectar el rendimiento si no se gestiona adecuadamente. Para abordar este desafío, Next.js introdujo el módulo next/font, que proporciona una forma fácil y eficiente de cargar y optimizar fuentes personalizadas, tanto locales como de Google Fonts.\nEste módulo ofrece varias ventajas como la optimización automática, eliminación de estilos innecesarios y control sobre la carga de las fuentes, mejorando tanto el rendimiento como la experiencia de usuario.\n¿Qué es next/font? # next/font es una API integrada en Next.js que facilita la gestión de fuentes optimizadas para aplicaciones web. Con esta API, las fuentes se pueden cargar de forma eficiente y segura, asegurando un rendimiento mejorado sin depender de JavaScript en el cliente para las fuentes.\nLas principales características de next/font incluyen:\nCarga optimizada: las fuentes se cargan solo cuando son necesarias y con estrategias de optimización. Control de la visualización: se puede controlar cómo y cuándo las fuentes se cargan y muestran. Compatibilidad con fuentes locales y de Google Fonts. Reducción de tamaño del bundle: solo se incluyen los estilos de fuente necesarios para el proyecto. Tipos de Fuentes en next/font # Next.js soporta dos tipos principales de fuentes a través de next/font:\nFuentes de Google Fonts. Fuentes locales. Instalación # No es necesario instalar ningún paquete adicional para usar next/font ya que viene integrado con Next.js a partir de la versión 13.\nUso de Google Fonts # Para usar fuentes de Google, puedes importar y configurar la fuente directamente utilizando la función Google de next/font/google.\nEjemplo básico: # import { Roboto } from \u0026#39;next/font/google\u0026#39;; const roboto = Roboto({ weight: [\u0026#39;400\u0026#39;, \u0026#39;700\u0026#39;], // Pesos deseados de la fuente subsets: [\u0026#39;latin\u0026#39;], // Conjuntos de caracteres (latin, cyrillic, etc.) }); export default function HomePage() { return ( \u0026lt;div\u0026gt; \u0026lt;h1 className={roboto.className}\u0026gt;Bienvenidos a mi sitio web\u0026lt;/h1\u0026gt; \u0026lt;p className={roboto.className}\u0026gt; Este es un texto con la fuente Roboto cargada desde Google Fonts. \u0026lt;/p\u0026gt; \u0026lt;/div\u0026gt; ); } Explicación del ejemplo: # Roboto: Esta función importa la fuente desde Google Fonts. weight: Define los pesos que deseas usar (por ejemplo, 400 para normal y 700 para negrita). subsets: Especifica los subconjuntos de caracteres que necesitas para tu aplicación, como latin, cyrillic, etc. className: El objeto generado por la función de la fuente contiene la clase CSS que debes aplicar a los elementos de texto. Uso de Fuentes Locales # Además de las fuentes de Google, next/font soporta fuentes locales almacenadas en el proyecto. Para esto, se utiliza la función local.\nEjemplo básico de una fuente local: # import { Local } from \u0026#39;next/font/local\u0026#39;; const miFuentePersonalizada = Local({ src: \u0026#39;./fuentes/MiFuente.woff2\u0026#39;, weight: \u0026#39;400\u0026#39;, style: \u0026#39;normal\u0026#39;, }); export default function HomePage() { return ( \u0026lt;div\u0026gt; \u0026lt;h1 className={miFuentePersonalizada.className}\u0026gt; Bienvenidos a mi sitio web \u0026lt;/h1\u0026gt; \u0026lt;p className={miFuentePersonalizada.className}\u0026gt; Este es un texto con una fuente personalizada local. \u0026lt;/p\u0026gt; \u0026lt;/div\u0026gt; ); } Explicación del ejemplo: # src: Es la ruta local de la fuente que estás importando. weight: Define el peso de la fuente. style: Especifica si la fuente es normal, cursiva, etc. className: Similar al ejemplo anterior, se usa la clase CSS generada para aplicar la fuente. Optimización Automática # Una de las principales ventajas de next/font es la optimización automática. Cuando usas esta API:\nLas fuentes se cargan sin JavaScript en el cliente: Esto reduce el tamaño del bundle y mejora el rendimiento de la aplicación. Carga diferida: Las fuentes se optimizan para cargar de manera diferida (lazy loading), lo que ayuda a mejorar los tiempos de carga inicial. Subconjuntos optimizados: Next.js solo incluye los subconjuntos de caracteres que tu aplicación necesita, reduciendo el tamaño de la fuente. Control de la Visualización de Fuentes # Puedes controlar cómo se muestra la fuente en la página antes de que la fuente personalizada se cargue por completo mediante la propiedad display. Las opciones disponibles incluyen:\nauto: el navegador decide la estrategia de visualización. block: el texto es invisible hasta que se cargue la fuente. swap: el texto se muestra con una fuente de reserva hasta que la fuente personalizada esté disponible. fallback: muestra el texto con una fuente de reserva si la fuente no se carga rápidamente. optional: utiliza la fuente personalizada solo si se carga de inmediato. Ejemplo: # const roboto = Roboto({ weight: [\u0026#39;400\u0026#39;, \u0026#39;700\u0026#39;], subsets: [\u0026#39;latin\u0026#39;], display: \u0026#39;swap\u0026#39;, // Usa swap para cargar una fuente de reserva mientras se carga la fuente principal }); En este ejemplo, la fuente de reserva se utilizará temporalmente mientras la fuente principal se está cargando, mejorando la experiencia del usuario.\nIntegración con TailwindCSS # Si estás utilizando TailwindCSS en tu proyecto Next.js, puedes combinar next/font con Tailwind agregando la clase generada a tu configuración de Tailwind para que se utilice globalmente.\nEjemplo de integración con TailwindCSS: # import { Inter } from \u0026#39;next/font/google\u0026#39;; const inter = Inter({ subsets: [\u0026#39;latin\u0026#39;], }); export default function MyApp({ Component, pageProps }) { return ( \u0026lt;main className={inter.className}\u0026gt; \u0026lt;Component {...pageProps} /\u0026gt; \u0026lt;/main\u0026gt; ); } En este ejemplo, la fuente Inter se aplica globalmente a toda la aplicación, garantizando que todo el texto utilice esta fuente sin tener que añadir clases manualmente a cada elemento.\nVentajas de Usar next/font # Rendimiento: Las fuentes se optimizan automáticamente, mejorando el rendimiento general de la aplicación. Facilidad de uso: Cargar fuentes personalizadas o de Google Fonts se convierte en una tarea sencilla sin necesidad de configuraciones adicionales. Tamaño del bundle: Solo se incluye el código necesario en el bundle final, lo que reduce el peso total de la aplicación. Control completo: Puedes gestionar cómo y cuándo se cargan las fuentes, optimizando la experiencia de usuario. Conclusión # El módulo next/font de Next.js facilita la tarea de gestionar y optimizar fuentes personalizadas en tu aplicación. Ofrece integración perfecta tanto con fuentes locales como con Google Fonts, optimizando la carga de fuentes para mejorar el rendimiento sin esfuerzo adicional. Al utilizar next/font, puedes controlar completamente cómo se muestran las fuentes, reduciendo los tiempos de carga inicial y asegurando una experiencia de usuario más rápida y fluida.\nRecursos # Mira este video desde 25:47 hasta 31:24 minutos. (Ya está marcado)\n","date":"2 octubre 2024","permalink":"/platform/nextjs/font/","section":"Nextjs","summary":"En el desarrollo web, las fuentes son un aspecto crucial del diseño que influye en la legibilidad y estética de una aplicación.","title":"Optimización y Gestión de Fuentes en Next.js"},{"content":"El componente Image en Next.js es una herramienta poderosa introducida para optimizar el manejo de imágenes en aplicaciones web. Gestionar correctamente las imágenes es crucial para mejorar el rendimiento, ya que las imágenes son uno de los recursos más pesados en términos de carga en una página web. Next.js facilita la tarea de manipular y optimizar imágenes con su componente Image, que ofrece características como carga diferida (lazy loading), optimización automática y soporte para varios formatos de imágenes.\nIntroducción al Componente Image # El componente Image se introdujo en Next.js para abordar los problemas comunes relacionados con la optimización de imágenes. A diferencia de las etiquetas HTML tradicionales \u0026lt;img\u0026gt;, Image gestiona de manera inteligente el tamaño, el formato y la carga de imágenes para asegurar una experiencia de usuario fluida y mejorar la puntuación de rendimiento en herramientas como Lighthouse.\nImportación # Antes de usar el componente Image, es necesario importarlo desde el paquete next/image.\nimport Image from \u0026#39;next/image\u0026#39;; Características Principales # 1. Optimización Automática de Imágenes # El componente Image optimiza automáticamente las imágenes bajo demanda, generando versiones adaptadas al tamaño de la pantalla del dispositivo del usuario. Esto significa que las imágenes se entregan en la mejor resolución posible, pero sin exceder el tamaño necesario.\n2. Carga Diferida (Lazy Loading) # Por defecto, Image utiliza la carga diferida, lo que significa que las imágenes solo se cargan cuando están a punto de ser visibles en la pantalla del usuario. Esto reduce el tiempo de carga inicial de la página y mejora el rendimiento.\n3. Soporte para Varios Formatos # Next.js convierte automáticamente las imágenes a formatos más eficientes como WebP, siempre que el navegador lo soporte, lo que reduce el tamaño del archivo sin comprometer la calidad.\n4. Tamaño Adaptable # Image permite definir tamaños específicos o automáticos, adaptando la imagen al diseño de la página mientras mantiene las proporciones correctas.\nUso Básico del Componente Image # El uso básico de Image es muy similar a la etiqueta HTML \u0026lt;img\u0026gt;, pero con más opciones y optimización automática.\nimport Image from \u0026#39;next/image\u0026#39;; export default function HomePage() { return ( \u0026lt;div\u0026gt; \u0026lt;h1\u0026gt;Bienvenidos a mi sitio web\u0026lt;/h1\u0026gt; \u0026lt;Image src=\u0026#39;/images/mi-imagen.jpg\u0026#39; // Ruta de la imagen alt=\u0026#39;Descripción de la imagen\u0026#39; width={500} // Ancho en píxeles height={300} // Alto en píxeles /\u0026gt; \u0026lt;/div\u0026gt; ); } Explicación del ejemplo # src: La propiedad src es obligatoria y define la ruta de la imagen. Puede ser una imagen local (como en este caso) o una URL externa. alt: La propiedad alt es importante para la accesibilidad, proporcionando una descripción de la imagen. width y height: Estas propiedades son obligatorias para que el componente Image pueda definir correctamente el espacio para la imagen antes de que se cargue. Esto evita el cambio de diseño repentino (layout shift). Imágenes externas # Si quieres usar imágenes externas que no están en tu directorio local, debes configurar el archivo next.config.js para permitir dominios externos.\n// next.config.js module.exports = { images: { domains: [\u0026#39;example.com\u0026#39;], }, }; Luego, puedes utilizar la URL externa en el componente Image:\n\u0026lt;Image src=\u0026#39;https://example.com/imagen.jpg\u0026#39; alt=\u0026#39;Imagen externa\u0026#39; width={800} height={600} /\u0026gt; Optimización Avanzada # 1. Carga Diferida Automática # El componente Image realiza la carga diferida automáticamente para cualquier imagen que esté fuera de la ventana visible. Sin embargo, también puedes controlar este comportamiento con la propiedad loading.\n\u0026lt;Image src=\u0026#39;/images/mi-imagen.jpg\u0026#39; alt=\u0026#39;Descripción de la imagen\u0026#39; width={500} height={300} loading=\u0026#39;lazy\u0026#39; // Carga diferida manual /\u0026gt; 2. Tamaños Responsivos # En lugar de especificar un tamaño fijo, puedes usar la propiedad layout=\u0026quot;responsive\u0026quot; para hacer que la imagen sea responsiva y se ajuste al tamaño del contenedor.\n\u0026lt;Image src=\u0026#39;/images/mi-imagen.jpg\u0026#39; alt=\u0026#39;Descripción de la imagen\u0026#39; width={700} height={400} layout=\u0026#39;responsive\u0026#39; // Hace que la imagen sea responsiva /\u0026gt; 3. Optimización de Calidad # Puedes ajustar la calidad de la imagen con la propiedad quality, lo que te permite encontrar un equilibrio entre la calidad visual y el tamaño del archivo. La calidad se define en un valor de 1 a 100.\n\u0026lt;Image src=\u0026#39;/images/mi-imagen.jpg\u0026#39; alt=\u0026#39;Descripción de la imagen\u0026#39; width={700} height={400} quality={75} // Reduce la calidad al 75% /\u0026gt; Esto es útil cuando deseas reducir el peso de las imágenes para mejorar los tiempos de carga, pero manteniendo una buena calidad visual.\n4. Prioridad en la Carga # Si tienes imágenes críticas que deben cargarse inmediatamente, como el logotipo del sitio o una imagen de fondo importante, puedes usar la propiedad priority.\n\u0026lt;Image src=\u0026#39;/images/logo.png\u0026#39; alt=\u0026#39;Logotipo del sitio\u0026#39; width={100} height={50} priority={true} // Carga prioritaria /\u0026gt; 5. Placerholders y Efecto de Desenfoque # Next.js permite mostrar un marcador de posición (placeholder) mientras la imagen se carga. Esto puede ser útil para mejorar la experiencia del usuario cuando se utilizan imágenes grandes. Puedes generar un efecto de desenfoque con el marcador de posición.\n\u0026lt;Image src=\u0026#39;/images/mi-imagen.jpg\u0026#39; alt=\u0026#39;Imagen con placeholder\u0026#39; width={500} height={300} placeholder=\u0026#39;blur\u0026#39; // Muestra un desenfoque antes de cargar blurDataURL=\u0026#39;/images/blur-placeholder.jpg\u0026#39; // Imagen de baja resolución como placeholder /\u0026gt; Comparación con la etiqueta \u0026lt;img\u0026gt; # Característica \u0026lt;img\u0026gt; tradicional Componente Image de Next.js Optimización automática No Sí Carga diferida Manual (con loading=\u0026quot;lazy\u0026quot;) Automática Soporte para WebP No Sí Responsividad Manual (CSS) Automática (layout=\u0026quot;responsive\u0026quot;) Prioridad en carga No Sí (priority={true}) Marcador de posición No Sí (placeholder=\u0026quot;blur\u0026quot;) Conclusión # El componente Image en Next.js ofrece una solución integral para manejar imágenes de manera eficiente y optimizada, mejorando tanto el rendimiento de la página como la experiencia del usuario. Al utilizar Image, se reduce el tamaño de las imágenes servidas, se asegura una carga fluida y se aprovechan las características modernas de los navegadores como WebP y la carga diferida. Si estás desarrollando una aplicación en Next.js, el uso de este componente es altamente recomendable para maximizar la velocidad y la eficiencia de tu sitio web.\nRecursos # Mira este video desde 31:24 hasta 38:33 minutos. (Ya está marcado)\n","date":"2 octubre 2024","permalink":"/platform/nextjs/image/","section":"Nextjs","summary":"El componente Image en Next.","title":"Componente `Image`"},{"content":"Next.js es un framework para React que facilita la creación de aplicaciones optimizadas con funcionalidades como el renderizado del lado del servidor (SSR) y la generación estática de páginas. Dos de sus métodos más importantes son getStaticProps y getServerSideProps, que permiten controlar cómo se obtienen y procesan los datos para la creación de páginas. Sin embargo, cabe resaltar que estos métodos se utilizan con Pages Router de Next.js, no confundir con App Router.\n¿Qué es getStaticProps? # getStaticProps es una función que Next.js utiliza para generar páginas estáticas en el momento de la compilación (build time). Esto significa que la página se genera una vez durante la compilación y se reutiliza para todas las solicitudes, lo que puede mejorar el rendimiento y el tiempo de carga, especialmente en sitios con contenido que no cambia frecuentemente.\n¿Cuándo usar getStaticProps? # getStaticProps es ideal para:\nPáginas con contenido que no cambia frecuentemente. Contenido que se puede obtener durante el build time, como archivos locales o datos de una API que no cambia a menudo. Optimizar la velocidad de carga del sitio, ya que las páginas estáticas son rápidas de servir. Ejemplo básico de getStaticProps # // pages/index.js export async function getStaticProps() { // Llamada a una API o cargar datos desde el sistema de archivos const res = await fetch(\u0026#39;https://jsonplaceholder.typicode.com/posts\u0026#39;); const posts = await res.json(); return { props: { posts, // se pasa como propiedad a la página }, }; } function Home({ posts }) { return ( \u0026lt;div\u0026gt; \u0026lt;h1\u0026gt;Lista de Posts\u0026lt;/h1\u0026gt; \u0026lt;ul\u0026gt; {posts.map(post =\u0026gt; ( \u0026lt;li key={post.id}\u0026gt;{post.title}\u0026lt;/li\u0026gt; ))} \u0026lt;/ul\u0026gt; \u0026lt;/div\u0026gt; ); } export default Home; Explicación del ejemplo # En el ejemplo, getStaticProps realiza una llamada a una API externa (jsonplaceholder.typicode.com) para obtener datos. La función retorna un objeto con una propiedad props, que contiene los datos de los posts. Estos datos se pasan como props al componente Home, lo que permite mostrar la lista de posts en la página. Como la página se genera en el momento de la compilación, se reutiliza la misma versión estática en cada solicitud. Regeneración Incremental # Next.js ofrece una funcionalidad llamada Regeneración Incremental (Incremental Static Regeneration - ISR), que permite actualizar una página estática después de su compilación sin necesidad de hacer un redeploy. Esto se consigue añadiendo una opción llamada revalidate a getStaticProps, que indica el número de segundos después del cual se regenerará la página.\nexport async function getStaticProps() { const res = await fetch(\u0026#39;https://jsonplaceholder.typicode.com/posts\u0026#39;); const posts = await res.json(); return { props: { posts, }, revalidate: 10, // la página se regenerará cada 10 segundos }; } Con esto, la página se actualizará cada 10 segundos cuando reciba una solicitud, manteniendo los beneficios de la generación estática, pero con la capacidad de mostrar contenido más actualizado.\n¿Qué es getServerSideProps? # getServerSideProps se ejecuta en cada solicitud y permite generar una página del lado del servidor (SSR). A diferencia de getStaticProps, no se genera durante el build time, sino en el momento en que el usuario solicita la página. Esto es útil cuando los datos que necesita la página cambian frecuentemente o dependen de la solicitud del usuario.\n¿Cuándo usar getServerSideProps? # getServerSideProps es adecuado para:\nPáginas que necesitan datos actualizados en tiempo real en cada solicitud. Páginas que dependen de la autenticación o de parámetros dinámicos del usuario. Casos donde el SEO es importante y los motores de búsqueda deben ver contenido actualizado. Ejemplo básico de getServerSideProps # // pages/profile.js export async function getServerSideProps() { // Obtener datos desde una API o base de datos const res = await fetch(\u0026#39;https://api.example.com/user\u0026#39;); const user = await res.json(); return { props: { user, // se pasa como prop a la página }, }; } function Profile({ user }) { return ( \u0026lt;div\u0026gt; \u0026lt;h1\u0026gt;Perfil del Usuario\u0026lt;/h1\u0026gt; \u0026lt;p\u0026gt;Nombre: {user.name}\u0026lt;/p\u0026gt; \u0026lt;p\u0026gt;Email: {user.email}\u0026lt;/p\u0026gt; \u0026lt;/div\u0026gt; ); } export default Profile; Explicación del ejemplo # getServerSideProps realiza una solicitud a una API cada vez que el usuario accede a la página. Los datos devueltos por la API se pasan como props al componente Profile. A diferencia de getStaticProps, esta página se genera en el servidor cada vez que se solicita, lo que garantiza que los datos siempre estén actualizados. Ventajas y desventajas de getServerSideProps # Ventajas:\nSiempre muestra datos actualizados. Perfecto para aplicaciones que requieren autenticación o personalización basada en el usuario. Desventajas:\nEl tiempo de respuesta es más lento en comparación con getStaticProps, ya que la página se debe generar para cada solicitud. Puede incrementar la carga del servidor, ya que se requiere realizar operaciones en cada petición. Comparación entre getStaticProps y getServerSideProps # Característica getStaticProps getServerSideProps Renderización En tiempo de compilación En tiempo de solicitud (en cada petición) Actualización de datos Durante la compilación o mediante ISR En cada solicitud Velocidad Muy rápido (página estática) Más lento (página dinámica) Uso Páginas con contenido estático o que cambia poco Páginas con datos dinámicos Conclusión # getStaticProps y getServerSideProps son herramientas poderosas en Next.js que permiten optimizar el rendimiento de las aplicaciones dependiendo de las necesidades de los datos. Mientras que getStaticProps es ideal para generar páginas rápidas y estáticas, getServerSideProps asegura que los datos estén siempre actualizados en cada solicitud. La elección entre uno y otro dependerá del caso de uso específico y la frecuencia con la que los datos deben actualizarse en la página.\n","date":"2 octubre 2024","permalink":"/platform/nextjs/get_static_server_props/","section":"Nextjs","summary":"Next.js es un framework para React que facilita la creación de aplicaciones optimizadas con funcionalidades como el renderizado del lado del servidor (SSR) y la generación estática de páginas.","title":"getStaticProps y getServerSideProps en Next.js"},{"content":"Desarrollar una aplicación web responsive que simule una plataforma de búsqueda de estancias estilo AirBnB, basada en el desafío \u0026ldquo;Windbnb\u0026rdquo; de DevChallenges. La aplicación deberá permitir a los usuarios buscar estancias filtradas por ciudad y número de huéspedes, y mostrar los resultados de manera dinámica.\nRequisitos del proyecto: # Interfaz responsiva:\nLa aplicación debe adaptarse perfectamente a todos los tamaños de pantalla, desde móviles hasta escritorio, utilizando TailwindCSS para el diseño y estilos.\nTecnologías:\nReact: Construir la interfaz de usuario. TailwindCSS: Para crear una interfaz atractiva y moderna. Axios: Para realizar peticiones HTTP a una API simulada o servidor externo. React Query: Para la gestión eficiente de datos obtenidos mediante peticiones y manejo de estados de carga. Custom Hooks: Implementar hooks personalizados para lógica reutilizable (ej. peticiones de datos o manejo de filtros). useContext (si es necesario): Para gestionar de manera global ciertos estados o configuraciones de la aplicación, como filtros de búsqueda. Características:\nFiltrado dinámico: Los usuarios deben poder filtrar las estancias por: Ciudad. Número de huéspedes. Listado de estancias: Mostrar un listado de las estancias disponibles basadas en los filtros seleccionados. Diseño modular: Implementar componentes reutilizables y un diseño que facilite la escalabilidad del proyecto. Puntos clave:\nArchivo stays.json: Úsalo localmente para consumir los datos para la aplicación. Optimización de búsqueda: El sistema debe poder actualizar los resultados en tiempo real cuando los filtros de búsqueda cambien. Recursos adicionales: # Link del desafío: Windbnb - DevChallenges Entregables # Link a tu repositorio de GitHub, el cual debe contener el código del proyecto. Además, debe incluir el link a la página desplegada en el apartado \u0026ldquo;About\u0026rdquo; del repositorio. Como se muestra a continuación: ","date":"26 septiembre 2024","permalink":"/platform/react/p-windbnb/","section":"Reacts","summary":"Desarrollar una aplicación web responsive que simule una plataforma de búsqueda de estancias estilo AirBnB, basada en el desafío \u0026ldquo;Windbnb\u0026rdquo; de DevChallenges.","title":"Proyecto: Windbnb"},{"content":"","date":"26 septiembre 2024","permalink":"/platform/react/","section":"Reacts","summary":"","title":"Reacts"},{"content":"En el desarrollo con React, la gestión del estado es esencial para construir interfaces dinámicas y reactivas. Hasta ahora, seguramente has trabajado con useState para manejar el estado local en tus componentes, y useEffect para manejar efectos secundarios como peticiones a APIs o actualizaciones del DOM. Aunque useState es poderoso, puede volverse limitado cuando el estado crece en complejidad, ya que múltiples valores o acciones pueden requerir una estructura más organizada. Aquí es donde entra en juego useReducer.\nEn este artículo, exploraremos useReducer, una alternativa a useState que es ideal para manejar estados más complejos o situaciones donde el flujo de acciones sea importante.\n¿Qué es useReducer? # useReducer es un hook de React que proporciona una forma de gestionar el estado cuando se requiere una lógica de actualización más compleja. A diferencia de useState, que se centra en actualizar un valor directamente, useReducer utiliza un patrón de tipo \u0026ldquo;acción\u0026rdquo; para manejar las actualizaciones de estado. Este patrón es similar al que se utiliza en bibliotecas como Redux.\nLa idea detrás de useReducer es separar las actualizaciones de estado en una función \u0026ldquo;reducer\u0026rdquo;, donde cada acción describe explícitamente cómo debe cambiar el estado.\nSintaxis de useReducer # const [state, dispatch] = useReducer(reducer, initialState); state: El estado actual, que es un objeto o valor gestionado por el reducer. dispatch: Una función que se usa para enviar acciones que modificarán el estado. reducer: Una función que toma dos argumentos: el estado actual y una acción. Devuelve un nuevo estado basado en la acción. initialState: El estado inicial que se pasará al reducer. ¿Cuándo usar useReducer en lugar de useState? # Aunque useState es excelente para manejar estados simples, useReducer es más apropiado en situaciones donde:\nEl estado tiene múltiples subvalores que cambian de diferentes formas. Se requiere lógica de actualización más avanzada, como cálculos condicionales o dependientes de múltiples factores. El flujo de acciones necesita ser más predecible y centralizado. Un ejemplo típico sería un formulario con múltiples campos, donde cada campo debe actualizarse de forma separada y posiblemente desencadenar validaciones o transformaciones.\nEjemplo básico de useReducer # Para entender mejor su funcionamiento, vamos a construir un ejemplo sencillo que simula un contador, pero en lugar de utilizar useState, emplearemos useReducer para gestionar sus acciones (increment, decrement y reset).\nimport React, { useReducer } from \u0026#39;react\u0026#39;; // Definir el estado inicial const initialState = { count: 0 }; // Reducer que maneja las acciones function reducer(state, action) { switch (action.type) { case \u0026#39;increment\u0026#39;: return { count: state.count + 1 }; case \u0026#39;decrement\u0026#39;: return { count: state.count - 1 }; case \u0026#39;reset\u0026#39;: return { count: 0 }; default: throw new Error(\u0026#39;Acción no soportada\u0026#39;); } } function Counter() { const [state, dispatch] = useReducer(reducer, initialState); return ( \u0026lt;div\u0026gt; \u0026lt;p\u0026gt;Contador: {state.count}\u0026lt;/p\u0026gt; \u0026lt;button onClick={() =\u0026gt; dispatch({ type: \u0026#39;increment\u0026#39; })}\u0026gt; Incrementar \u0026lt;/button\u0026gt; \u0026lt;button onClick={() =\u0026gt; dispatch({ type: \u0026#39;decrement\u0026#39; })}\u0026gt; Decrementar \u0026lt;/button\u0026gt; \u0026lt;button onClick={() =\u0026gt; dispatch({ type: \u0026#39;reset\u0026#39; })}\u0026gt;Reiniciar\u0026lt;/button\u0026gt; \u0026lt;/div\u0026gt; ); } export default Counter; En este ejemplo:\nEl reducer recibe el estado actual y una acción (con un tipo, como 'increment', 'decrement', o 'reset'). Según el tipo de acción, el estado se actualiza y el nuevo estado es devuelto. Este patrón es particularmente útil cuando queremos manejar varios tipos de acciones que pueden alterar el estado de diferentes formas, como en sistemas de control más complejos o formularios extensos.\nEjemplo avanzado: Gestión de formularios # Veamos un caso más avanzado donde useReducer es extremadamente útil: la gestión de formularios. En formularios con múltiples campos, validar y actualizar cada campo con useState puede volverse complicado rápidamente. Aquí, useReducer ofrece una estructura más clara y modular.\nimport React, { useReducer } from \u0026#39;react\u0026#39;; // Estado inicial del formulario const initialState = { username: \u0026#39;\u0026#39;, email: \u0026#39;\u0026#39;, password: \u0026#39;\u0026#39;, confirmPassword: \u0026#39;\u0026#39;, errors: {}, }; // Reducer para manejar el formulario function formReducer(state, action) { switch (action.type) { case \u0026#39;SET_FIELD\u0026#39;: return { ...state, [action.field]: action.value, }; case \u0026#39;SET_ERRORS\u0026#39;: return { ...state, errors: action.errors, }; case \u0026#39;RESET_FORM\u0026#39;: return initialState; default: return state; } } function RegistrationForm() { const [state, dispatch] = useReducer(formReducer, initialState); const handleChange = e =\u0026gt; { const { name, value } = e.target; dispatch({ type: \u0026#39;SET_FIELD\u0026#39;, field: name, value }); }; const handleSubmit = e =\u0026gt; { e.preventDefault(); // Validación simple const errors = {}; if (!state.username) errors.username = \u0026#39;El nombre de usuario es obligatorio\u0026#39;; if (!state.email) errors.email = \u0026#39;El correo electrónico es obligatorio\u0026#39;; if (state.password !== state.confirmPassword) errors.password = \u0026#39;Las contraseñas no coinciden\u0026#39;; if (Object.keys(errors).length \u0026gt; 0) { dispatch({ type: \u0026#39;SET_ERRORS\u0026#39;, errors }); } else { console.log(\u0026#39;Formulario enviado\u0026#39;, state); dispatch({ type: \u0026#39;RESET_FORM\u0026#39; }); } }; return ( \u0026lt;form onSubmit={handleSubmit}\u0026gt; \u0026lt;input type=\u0026#39;text\u0026#39; name=\u0026#39;username\u0026#39; value={state.username} onChange={handleChange} placeholder=\u0026#39;Nombre de usuario\u0026#39; /\u0026gt; {state.errors.username \u0026amp;\u0026amp; \u0026lt;p\u0026gt;{state.errors.username}\u0026lt;/p\u0026gt;} \u0026lt;input type=\u0026#39;email\u0026#39; name=\u0026#39;email\u0026#39; value={state.email} onChange={handleChange} placeholder=\u0026#39;Correo electrónico\u0026#39; /\u0026gt; {state.errors.email \u0026amp;\u0026amp; \u0026lt;p\u0026gt;{state.errors.email}\u0026lt;/p\u0026gt;} \u0026lt;input type=\u0026#39;password\u0026#39; name=\u0026#39;password\u0026#39; value={state.password} onChange={handleChange} placeholder=\u0026#39;Contraseña\u0026#39; /\u0026gt; {state.errors.password \u0026amp;\u0026amp; \u0026lt;p\u0026gt;{state.errors.password}\u0026lt;/p\u0026gt;} \u0026lt;input type=\u0026#39;password\u0026#39; name=\u0026#39;confirmPassword\u0026#39; value={state.confirmPassword} onChange={handleChange} placeholder=\u0026#39;Confirmar contraseña\u0026#39; /\u0026gt; \u0026lt;button type=\u0026#39;submit\u0026#39;\u0026gt;Registrarse\u0026lt;/button\u0026gt; \u0026lt;/form\u0026gt; ); } export default RegistrationForm; En este ejemplo:\nCada campo del formulario se gestiona mediante dispatch y se valida con lógica personalizada. El reducer se encarga de actualizar el estado de los campos y de manejar los errores de validación. Conclusión # useReducer ofrece una manera más robusta de manejar el estado complejo en React. Si trabajas con estructuras de estado que requieren varias operaciones o múltiples subvalores, puede ser una opción más clara y eficiente en comparación con useState. Este patrón también facilita la separación de la lógica de actualización en un solo lugar, haciendo que tu código sea más fácil de mantener y escalar.\nSi ya dominas useState y useEffect, comenzar a usar useReducer es el siguiente paso para gestionar aplicaciones React más avanzadas y dinámicas.\nRecursos # ","date":"26 septiembre 2024","permalink":"/platform/react/usereducer/","section":"Reacts","summary":"En el desarrollo con React, la gestión del estado es esencial para construir interfaces dinámicas y reactivas.","title":"useReducer"},{"content":"En esta práctica calificada, desarrollarás desde cero una aplicación de galería de fotos utilizando React y la API de Flickr. El objetivo es crear una aplicación donde los usuarios puedan buscar imágenes según diferentes categorías o términos de búsqueda. Como referencia, puedes utilizar la demo de la aplicación SnapShot.\nObjetivo # Crear una aplicación de galería de fotos donde los usuarios puedan buscar imágenes en categorías predefinidas o a través de términos de búsqueda personalizados, utilizando React y TailwindCSS.\nInstrucciones # Crea la estructura básica de tu proyecto:\nInicia un proyecto de React usando Vite. Configura TailwindCSS para el estilo de la aplicación. Interfaz de Usuario:\nImplementa una barra de búsqueda donde los usuarios puedan ingresar términos específicos para buscar imágenes. Crea botones para categorías predefinidas (ej.: Mountain, Beaches, Birds, Food). Diseña la Interfaz de Usuario utilizando TailwindCSS para que las imágenes se muestren como en la demo. Funcionalidad de la API:\nUsa la API de Flickr para obtener las imágenes según el término de búsqueda o la categoría seleccionada. Puedes consultar la documentación de la API aquí: Flickr API Documentation. También puedes guiarte del repositorio de la aplicación, pero evita copiar el código que allí se encuentra: Repositorio Implementa el diseño responsivo:\nAsegúrate de que tu aplicación funcione correctamente en diferentes dispositivos (móviles, tablets y computadoras). Demostración de la Aplicación:\nLa aplicación debe permitir al usuario hacer búsquedas dinámicas y mostrar imágenes relacionadas sin necesidad de recargar la página. Incluye un mensaje o indicador de carga mientras las imágenes están siendo obtenidas. Entregables # Tienes 2 días para realizar esta práctica calificada. Link a tu repositorio de GitHub, el cual debe contener el código del proyecto. Además, debe incluir el link a la página desplegada en el apartado \u0026ldquo;About\u0026rdquo; del repositorio. Como se muestra a continuación: ","date":"25 septiembre 2024","permalink":"/platform/pcs/pc-snapshot/","section":"Pcs","summary":"En esta práctica calificada, desarrollarás desde cero una aplicación de galería de fotos utilizando React y la API de Flickr.","title":"Galería de Fotos con React y Flickr"},{"content":"En esta práctica calificada, trabajarás en el desarrollo de una página de equipo (Team Page) utilizando React y TailwindCSS. El objetivo es que la página muestre un listado de miembros del equipo, sus roles y otra información relevante.\nInstrucciones # Recursos: Descarga el archivo .zip con los recursos iniciales aquí\nCarpeta design:\nContiene capturas del diseño esperado para la página. Úsalo como referencia para implementar la estructura y estilos.\nCarpeta images:\nIncluye imágenes de cada miembro del equipo que puedes utilizar en las tarjetas o secciones individuales.\nDiseño de la Página:\nCrea una página en React que muestre la información de un equipo (nombre, foto, rol, descripción, etc.) tal como en las capturas del diseño proporcionado. Diseña una estructura ordenada, donde cada miembro del equipo esté representado con una card o sección individual. Estilos con TailwindCSS:\nUtiliza TailwindCSS para aplicar estilos a la página. Asegúrate de que la página sea responsive, ajustándose correctamente a distintos tamaños de pantalla. Funcionalidad Dinámica (Opcional):\nSi es posible, utiliza un archivo JSON o un array en tu estado para listar dinámicamente a los miembros del equipo, en lugar de hardcodearlos en el JSX. Observaciones # Requisitos Adicionales # Modo Oscuro (Opcional):\nPuedes implementar el diseño en modo oscuro o claro, según prefieras. Si decides incluir ambos modos, asegúrate de que el cambio entre ellos sea funcional y fluido.\nUso de Props:\nEs obligatorio utilizar props para pasar información entre componentes. Esto ayudará a mantener el código modular y reutilizable.\nUso de Componentes:\nDivide tu proyecto en múltiples componentes. No concentres todo el código en el archivo App.jsx. Por ejemplo:\nUn componente para las cards de los miembros del equipo. Agrega cualquier otro componente que consideres conveniente. Buenas Prácticas:\nMantén el código limpio y organizado. Utiliza nombres descriptivos para tus componentes y variables. Incluye comentarios donde sea necesario para explicar partes importantes del código. Entregables # Tienes 2 días para realizar esta práctica calificada. Link a tu repositorio de GitHub, el cual debe contener el código del proyecto. Además, debe incluir el link a la página desplegada en el apartado \u0026ldquo;About\u0026rdquo; del repositorio. Como se muestra a continuación: ","date":"25 septiembre 2024","permalink":"/platform/pcs/pc-teampage/","section":"Pcs","summary":"En esta práctica calificada, trabajarás en el desarrollo de una página de equipo (Team Page) utilizando React y TailwindCSS.","title":"My team page"},{"content":"En esta práctica vas a realizar un ejercicio en el que simularás el funcionamiento básico de una cuenta bancaria. Podrás ingresar dinero, retirar dinero, y consultar el saldo disponible.\nObjetivos # Crear una simulación de una cuenta bancaria con tres funcionalidades principales: ingresar dinero, retirar dinero y consultar el saldo. Utilizar conceptos que has aprendido, como variables, condicionales, y bucles. Instrucciones # Funcionalidad básica:\nImplementa las funciones necesarias para que el usuario pueda: Ingresar dinero en la cuenta. Retirar dinero si el saldo es suficiente. Consultar el saldo actual de la cuenta. Validación:\nAsegúrate de que no se permita retirar dinero si el saldo no es suficiente. Debes mostrar mensajes adecuados para cada operación (como \u0026ldquo;Depósito exitoso\u0026rdquo;, \u0026ldquo;Saldo insuficiente\u0026rdquo;, etc.). Extensiones (opcional):\nSi lo consideras conveniente, puedes agregar funcionalidades adicionales, como un límite de retiro diario o un historial de transacciones. Demostración # Aquí tienes un video que muestra el funcionamiento que se espera de la práctica: Click aquí.\nEntregables: # Crea un archivo .zip que contenga lo siguiente: index.html (estructura HTML) styles.css (estilos personalizados) script.js (archivo JavaScript con la funcionalidad) Sube el archivo comprimido .zip como entrega de la práctica.\n","date":"18 septiembre 2024","permalink":"/platform/pcs/pc-cuentabancaria/","section":"Pcs","summary":"En esta práctica vas a realizar un ejercicio en el que simularás el funcionamiento básico de una cuenta bancaria.","title":"Cuenta Bancaria"},{"content":"El objetivo de esta práctica es desarrollar y agregar funcionalidad a una calculadora similar a la que se muestra en la imagen proporcionada. Utilizarás HTML, CSS, Bootstrap 5 y JavaScript.\nParte 1: Diseño # En esta primera parte, crearás únicamente el diseño de la calculadora.\nInstrucciones: # Estructura básica:\nUtiliza HTML para crear la estructura de la calculadora, que debe incluir un campo de entrada y botones para los números y operadores. Organiza los botones en una cuadrícula similar a una calculadora. Ejemplo: Estilos y diseño:\nUtiliza CSS y Bootstrap 5 para darle estilo a la calculadora. Asegúrate de que los botones tengan bordes redondeados y un espaciado adecuado. La calculadora debe ser responsiva y adaptarse correctamente a diferentes tamaños de pantalla (móviles, tabletas y escritorio). Puedes agregarle más estilos como colores, tamaños de fuente, etc. Parte 2: Funcionalidad # En esta segunda parte, agregarás la funcionalidad a la calculadora que diseñaste en la Parte 1 utilizando JavaScript.\nInstrucciones: # Agregar la funcionalidad:\nImplementa la lógica para que los botones numéricos y de operación actualicen el campo de entrada al hacer clic. Debes implementar las operaciones básicas: suma, resta, multiplicación, división y un botón AC para limpiar el campo de entrada. Implementa la funcionalidad para que el botón = realice la operación y muestre el resultado en la pantalla. Manejo de errores:\nSi hay una operación inválida o un error en el cálculo, muestra un mensaje adecuado en el campo de entrada. Ejemplo de funcionalidad:\nClick aquí para ver video de funcionalidad Entregables: # Tienes 2 días para realizar esta práctica calificada. Sube un archivo .zip que contenga los siguientes archivos: index.html (estructura HTML) styles.css (estilos personalizados) script.js (archivo JavaScript con la funcionalidad) ","date":"18 septiembre 2024","permalink":"/platform/pcs/pc-calculadora/","section":"Pcs","summary":"El objetivo de esta práctica es desarrollar y agregar funcionalidad a una calculadora similar a la que se muestra en la imagen proporcionada.","title":"Calculadora Completa"},{"content":"El objetivo de esta práctica es recrear el componente de tarjeta de vista previa de producto utilizando HTML, CSS, y Bootstrap 5 para crear un diseño atractivo y responsivo.\nInstrucciones # Accede al reto: Dirígete a la página Product Preview Card Component de Frontend Mentor donde encontrarás el prototipo y los recursos visuales del diseño que vas a replicar.\nCrea tu propia página web:\nDiseña y estructura la tarjeta utilizando HTML para la estructura y CSS para los estilos. Usa Bootstrap 5 para agilizar el diseño y asegurar que sea completamente responsivo, adaptándose a diferentes tamaños de pantalla. Implementa los siguientes elementos en la tarjeta:\nUna imagen del producto que se muestre en la parte superior o izquierda (según el diseño). Un título descriptivo del producto. Una breve descripción del producto en texto. El precio actual y el precio anterior. Un botón de \u0026ldquo;Añadir al carrito\u0026rdquo;. Estilos adicionales:\nAplica un diseño limpio y minimalista que respete el esquema de colores del prototipo. Utiliza clases de Bootstrap para garantizar una correcta alineación, espaciado y responsividad. Contenido de prueba: No es necesario que utilices imágenes ni contenido real, puedes emplear contenido de ejemplo o imágenes proporcionadas en el recurso de Frontend Mentor.\nEntregables # Tendrás 2 días para hacer esta práctica calificada.\nCrea un archivo .zip que contenga lo siguiente:\nindex.html (el código HTML de la tarjeta) styles.css (si has añadido estilos adicionales o personalizados) Los recursos de imágenes utilizados (si es necesario) Sube el archivo comprimido .zip como entrega de la práctica.\n","date":"18 septiembre 2024","permalink":"/platform/pcs/pc-productcard/","section":"Pcs","summary":"El objetivo de esta práctica es recrear el componente de tarjeta de vista previa de producto utilizando HTML, CSS, y Bootstrap 5 para crear un diseño atractivo y responsivo.","title":"Product Preview Card Component"},{"content":"El objetivo de esta práctica es aplicar tus conocimientos de Bootstrap 5 para crear una página web estructurada y estilizada utilizando varios componentes de Bootstrap.\nInstrucciones # Accede a la página del ejercicio: Dirígete a la página Ejercicio 2 de Bootstrap 5 donde encontrarás instrucciones detalladas sobre cómo construir la página web. Crea tu propia página web: Basándote en las instrucciones proporcionadas, diseña y estructura una página web utilizando Bootstrap 5. Asegúrate de incluir los componentes solicitados, como una barra de navegación, una card y un footer. Implementa el diseño: Utiliza las clases de Bootstrap para darle estilo a cada componente de tu página web. No agregues contenido a las cajas; basta con que ocupen el espacio y sean del color que se indica en el ejercicio. Hazla responsiva: Asegúrate de que tu página web sea adaptativa y funcione correctamente en diferentes tamaños de pantalla, desde móviles hasta escritorios, tal y como se muestra en el ejercicio. Entregables # Crea un archivo .zip que contenga lo siguiente: index.html (el código HTML de tu página web) styles.css (si has añadido estilos adicionales, súbelos en un archivo separado) Sube el archivo comprimido .zip como entrega de la práctica.\n","date":"17 septiembre 2024","permalink":"/platform/pcs/pc-boostrap2/","section":"Pcs","summary":"El objetivo de esta práctica es aplicar tus conocimientos de Bootstrap 5 para crear una página web estructurada y estilizada utilizando varios componentes de Bootstrap.","title":"Bootstrap 2"},{"content":"El objetivo de esta práctica es aplicar tus conocimientos de Bootstrap 5 para crear una página web estructurada y estilizada utilizando varios componentes de Bootstrap.\nInstrucciones # Accede a la página del ejercicio: Dirígete a la página Ejercicio 1 de Bootstrap 5 donde encontrarás instrucciones detalladas sobre cómo construir la página web. Crea tu propia página web: Basándote en las instrucciones proporcionadas, diseña y estructura una página web utilizando Bootstrap 5. Asegúrate de incluir los componentes solicitados, como una barra de navegación, una card y un footer. Implementa el diseño: Utiliza las clases de Bootstrap para darle estilo a cada componente de tu página web. No agregues contenido a las cajas; basta con que ocupen el espacio y sean del color que se indica en el ejercicio. Hazla responsiva: Asegúrate de que tu página web sea adaptativa y funcione correctamente en diferentes tamaños de pantalla, desde móviles hasta escritorios, tal y como se muestra en el ejercicio. Entregables # Crea un archivo .zip que contenga lo siguiente: index.html (el código HTML de tu página web) styles.css (si has añadido estilos adicionales, súbelos en un archivo separado) Sube el archivo comprimido .zip como entrega de la práctica.\n","date":"17 septiembre 2024","permalink":"/platform/pcs/pc-boostrap1/","section":"Pcs","summary":"El objetivo de esta práctica es aplicar tus conocimientos de Bootstrap 5 para crear una página web estructurada y estilizada utilizando varios componentes de Bootstrap.","title":"Bootstrap 1"},{"content":"En esta práctica calificada, tendrás que utilizar Flexbox para recrear una interfaz basada en una imagen que te proporcionaremos.\nInstrucciones # Analiza la imagen: Aquí se te muestra la interfaz que debes recrear. Analiza la estructura: Identifica los diferentes elementos que componen la interfaz en la imagen y cómo se relacionan entre sí. Crea el HTML: Estructura tu HTML utilizando etiquetas semánticas para representar los elementos de la interfaz. Aplica Flexbox: Utiliza las propiedades de Flexbox para posicionar y alinear los elementos de acuerdo al diseño en la imagen. Añade estilos adicionales: Personaliza el diseño con colores, tipografías y otros estilos CSS según lo que se muestra en la imagen. Milla extra # Animaciones: Agrega animaciones simples a tu diseño utilizando CSS. Interactividad: Haz que algunos elementos de tu diseño sean interactivos. Optimización para dispositivos móviles: Tu diseño podría funcionar en dispositivos móviles. Entregables # Crea un archivo .zip que contenga lo siguiente: index.html (el código HTML de tu página) styles.css (los estilos CSS aplicados) Sube el archivo comprimido .zip como entrega de la práctica.\n","date":"17 septiembre 2024","permalink":"/platform/pcs/pc-flexbox/","section":"Pcs","summary":"En esta práctica calificada, tendrás que utilizar Flexbox para recrear una interfaz basada en una imagen que te proporcionaremos.","title":"Flexbox"},{"content":"El objetivo de esta práctica es clonar la barra de navegación de un sitio web de tu elección. Reconocerás las cajas que componen la barra de navegación y las maquetarás en tu propio código utilizando HTML y CSS.\nInstrucciones # 1. Toma una captura de pantalla # Selecciona un sitio web que te guste y toma una captura de pantalla de su barra de navegación. Guarda la imagen de la captura en la misma carpeta donde trabajarás en tu proyecto. 2. Reconoce las cajas de la barra de navegación # Observa la barra de navegación y trata de identificar las diferentes \u0026ldquo;cajas\u0026rdquo; o áreas que la componen, como el logo, enlaces de navegación, íconos, etc. Utiliza cualquier software de edición de imágenes (como Paint, Excalidraw o Photoshop) para dibujar cuadros de color sobre la captura de pantalla, delimitando las diferentes áreas que reconoces. Esto te ayudará a planificar cómo maquetar la barra de navegación en tu código HTML y CSS. Ejemplo: 3. Crea tu propio código # Crea un archivo index.html donde estructurarás la barra de navegación utilizando HTML. Crea un archivo styles.css para aplicar estilos básicos y replicar el diseño de la barra de navegación que seleccionaste. Asegúrate de que tu barra de navegación se vea similar a la del sitio original. Entregables # Crea un archivo .zip que contenga lo siguiente: index.html (el código HTML de la barra de navegación) styles.css (los estilos CSS aplicados a la barra de navegación) La imagen de la captura de pantalla con las cajas o áreas de la barra de navegación maquetadas (cuadros de color delimitando las áreas que identificaste). Sube el archivo comprimido .zip como entrega de la práctica.\n","date":"17 septiembre 2024","permalink":"/platform/pcs/pc-clonarbarra/","section":"Pcs","summary":"El objetivo de esta práctica es clonar la barra de navegación de un sitio web de tu elección.","title":"Clonando una Barra de Navegación"},{"content":"Propósito: # Este ejercicio tiene como objetivo practicar lo que hemos aprendido acerca de box-model, table y form.\nCrearás un formulario para registrar productos, y al enviarlo, los datos se agregarán dinámicamente a una tabla sin recargar la página.\nEstructura del Proyecto # 📁 ejercicio-formulario/ ├── 📄 index.html (Estructura del formulario y la tabla) └── 📁 src/ ├── 📁 styles/ | └──📄 styles.css (Aplicación del Box Model) └── 📁 scripts/ └── 📄 script.js (Captura y muestra los datos en la tabla) Este archivo te lo encontraras en los recursos Instrucciones # Crea un formulario con los siguientes campos: Nombre del producto - id: name Precio - id: price Categoria - \u0026lt;select\u0026gt; - agrega diferentes opciones. - id: category Descripción - id: description Nota: El formulario debe tener el id: productForm\nCrea una tabla con las siguientes columnas: Nombre del producto Precio Categoria Descripción Nota: Agrega un id: productTableBody al Agrega un botón al formulario que, al ser presionado, capture los datos ingresados y los muestre en la tabla sin recargar la página.\nAplica estilos al formulario y a la tabla utilizando CSS para mejorar su apariencia. No olvides enlazar el archivo styles.css utilizando la etiqueta \u0026lt;Link\u0026gt;.\nCopia y pega esta linea de codigo antes de la etiqueta \u0026lt;/head\u0026gt;\n\u0026lt;script src=\u0026#34;./src/scripts/script.js\u0026#34; defer\u0026gt;\u0026lt;/script\u0026gt; Prueba el formulario y la tabla para asegurarte de que funcionan correctamente y que los datos se muestran como se espera. (El archivo script que te hemos proporcionado te ayudara con la captura de datos siempre y cuando hayas seguido todas las instrucciones.) Recursos # Descarga el archivo de JavaScrip Aqui\nEste es un ejemplo del resultado esperado: # Entregables # Enlace del despliegue del proyecto en Netlify ","date":"17 septiembre 2024","permalink":"/platform/pcs/pc-product-form/","section":"Pcs","summary":"Propósito: # Este ejercicio tiene como objetivo practicar lo que hemos aprendido acerca de box-model, table y form.","title":"Formulario de Registro de Productos"},{"content":"El propósito de este sitio es practicar lo que has aprendido hoy sobre HTML y CSS. Aquí podrás aplicar los conceptos aprendidos y mejorar tus habilidades de desarrollo web mediante la creación de una página web simple.\nObjetivos # Practicar la estructura básica de un documento HTML. Aplicar estilos CSS para mejorar la presentación visual. Entender la relación entre HTML y CSS. Requerimientos # Header con un título. Nav con una lista de al menos 3 elementos. Main con al menos 2 secciones. Sección hero con un título, un párrafo, un botón y una imagen. La imagen debe tener un ancho de 200px y estar alineada en el centro verticalmente y a la derecha horizontalmente. (Pista: usa position: absolute). Sección con un título, un párrafo, una lista y otro párrafo. Footer con un mensaje de derechos reservados. Este es un ejemplo del resultado esperado: # Entregables # Enlace del despliegue del proyecto en Netlify ","date":"17 septiembre 2024","permalink":"/platform/pcs/pc-landing-simple/","section":"Pcs","summary":"El propósito de este sitio es practicar lo que has aprendido hoy sobre HTML y CSS.","title":"Landing Page Simple"},{"content":"Descripción del Proyecto # Crearás una página web básica con HTML y CSS en la que te presentarás, incluyendo tu nombre, una breve descripción sobre ti, tus intereses y enlaces a tus redes sociales.\nEstructura del Proyecto # 1. HTML # Usarás encabezados \u0026lt;h1\u0026gt; a \u0026lt;h6\u0026gt; para organizar el contenido. Párrafos \u0026lt;p\u0026gt; para describirte. Listas \u0026lt;ul\u0026gt; o \u0026lt;ol\u0026gt; para enumerar tus hobbies o habilidades. Etiqueta \u0026lt;a\u0026gt; para enlazar redes sociales. Negritas \u0026lt;strong\u0026gt; y cursivas \u0026lt;em\u0026gt; para resaltar texto. Saltos de línea \u0026lt;br\u0026gt; donde sea necesario. 2. CSS # Aplicarás un background usando el atributo style a la etiqueta \u0026lt;body\u0026gt;, la etiqueta \u0026lt;style\u0026gt; dentro de \u0026lt;head\u0026gt; la usaras ara aplicar estilos a las etiquetas \u0026lt;h1\u0026gt; y \u0026lt;p\u0026gt;, y en un archivo externo enlazado con \u0026lt;link\u0026gt; aplicaras el resto de los estilos. Cambiarás colores con color y background-color. Ajustarás tamaños de fuente con font-size. Utiliza los atributos width y height para definir el tamaño de la image. Este es un ejemplo del resultado esperado: # Entregables # Enlace del despliegue del proyecto en Netlify ","date":"17 septiembre 2024","permalink":"/platform/pcs/pc-web-simple/","section":"Pcs","summary":"Descripción del Proyecto # Crearás una página web básica con HTML y CSS en la que te presentarás, incluyendo tu nombre, una breve descripción sobre ti, tus intereses y enlaces a tus redes sociales.","title":"Pagina Web Simple"},{"content":"🚀 Ejercicios de Métodos de Arrays en JavaScript # 📌 Contexto # Eres el encargado de manejar los datos de una tienda en línea. La tienda tiene una lista de productos disponibles y una lista de pedidos realizados por los clientes.\nconst productos = [ { nombre: \u0026#34;Laptop\u0026#34;, precio: 1200 }, { nombre: \u0026#34;Mouse\u0026#34;, precio: 25 }, { nombre: \u0026#34;Teclado\u0026#34;, precio: 50 }, { nombre: \u0026#34;Monitor\u0026#34;, precio: 300 }, { nombre: \u0026#34;Silla Gamer\u0026#34;, precio: 450 }, { nombre: \u0026#34;Audífonos\u0026#34;, precio: 80 }, { nombre: \u0026#34;Webcam\u0026#34;, precio: 60 }, { nombre: \u0026#34;USB 128GB\u0026#34;, precio: 30 }, { nombre: \u0026#34;Impresora\u0026#34;, precio: 200 }, { nombre: \u0026#34;Tablet\u0026#34;, precio: 500 } ]; 1️⃣ Recorrer y mostrar productos (forEach) # 📢 Recorre el array de productos y muestra en la consola el nombre y el precio de cada uno.\n2️⃣ Crear un array de nombres de productos y verificar disponibilidad (map + includes) # ✅ Parte 1: Usa map para generar un array productosDisponibles que contenga solo los nombres de los productos a partir del array productos.\n🔎 Parte 2: Luego, verifica si un producto buscado está disponible utilizando includes.\n3️⃣ Aplicar un descuento a los productos (map) # 💰 Crea un nuevo array con los productos, aplicando un 10% de descuento a los precios.\n4️⃣ Filtrar productos por precio (filter) # 🎯 Crea un array con los productos cuyo precio sea menor a $100.\n5️⃣ Obtener los primeros productos (slice) # 📋 Muestra los primeros 2 productos de la lista.\n6️⃣ Ordenar productos por precio (sort) # 📌 Instrucción: Investiga cómo funciona el método sort en JavaScript y úsalo para ordenar los productos de menor a mayor precio.\n7️⃣ Invertir el orden de los productos (reverse) # 🔄 Instrucción: Investiga cómo funciona el método reverse en JavaScript y utilízalo para mostrar los productos en orden inverso.\n","date":"17 septiembre 2024","permalink":"/platform/pcs/pc-arrays-methods/","section":"Pcs","summary":"🚀 Ejercicios de Métodos de Arrays en JavaScript # 📌 Contexto # Eres el encargado de manejar los datos de una tienda en línea.","title":"PC-7"},{"content":"El objetivo de esta práctica es crear tu primera página web utilizando HTML y un poco de CSS. En esta página, hablarás sobre ti mismo, tus hobbies, tu familia, o cualquier tema personal que prefieras.\nInstrucciones # 1. Estructura básica de la página # Abre tu editor de texto (como VSCode) y crea un archivo llamado index.html. Añade la estructura básica de HTML. Tu página debe tener: Un título principal donde pongas tu nombre. Tres subtítulos para hablar sobre ti mismo, tus hobbies y tu familia (o cualquier otro tema de tu elección). Una lista ordenada con tres cosas importantes sobre ti. Una lista desordenada con tus tres hobbies favoritos. Una imagen que te guste (puede ser una foto tuya o algo relacionado a tus hobbies). Usa la etiqueta \u0026lt;img\u0026gt; y asegúrate de que la imagen esté guardada en la misma carpeta que tu archivo HTML. 2. Añade algo de estilo # Crea un archivo llamado styles.css en la misma carpeta que tu index.html. En tu archivo HTML, enlaza el archivo CSS utilizando \u0026lt;link rel=\u0026quot;stylesheet\u0026quot; href=\u0026quot;styles.css\u0026quot;\u0026gt; dentro de la etiqueta \u0026lt;head\u0026gt;. Aplica algunos estilos sencillos a tu página: Cambia el color del fondo usando CSS (elige tu color favorito). Cambia el tamaño y color del texto de tu título principal. Añade un margen o padding a las listas para que no queden tan juntas. Entregables # Crea un archivo .zip que contenga los siguientes archivos: index.html (la estructura de la página) styles.css (los estilos de la página) La imagen que usaste para mostrar en tu página. Sube el archivo comprimido .zip como entrega de la práctica.\n","date":"17 septiembre 2024","permalink":"/platform/pcs/pc-primeraweb/","section":"Pcs","summary":"El objetivo de esta práctica es crear tu primera página web utilizando HTML y un poco de CSS.","title":"Mi Primera Página Web"},{"content":"Funcionalidad (JavaScript) # En esta segunda parte de la práctica, debes agregar la funcionalidad al juego \u0026ldquo;Tic Tac Toe\u0026rdquo; que previamente diseñaste en la Parte 1. Utiliza JavaScript para implementar todas las reglas y dinámicas del juego, haciendo que sea completamente interactivo. Asegúrate de mantener el diseño responsivo que desarrollaste en la primera parte, adaptando la funcionalidad sin afectar la apariencia visual del juego.\nPuedes encontrar el reto en el siguiente enlace:\nFrontend Mentor - Tic Tac Toe Game.\nRequisitos: # El juego debe permitir a dos jugadores jugar alternadamente, actualizando el tablero dinámicamente con cada movimiento. Implementa la lógica para detectar un ganador o un empate y muestra un mensaje correspondiente al finalizar cada partida. Incluye la funcionalidad de reiniciar el juego, restableciendo el tablero y los estados de turno cuando se desee comenzar una nueva partida. Utiliza eventos de JavaScript y manipulación del DOM para manejar todas las interacciones del usuario con el juego. Mantén el diseño responsivo realizado en la Parte 1, asegurando que la funcionalidad no afecte la adaptabilidad del diseño a diferentes dispositivos. Entregables # Para la entrega de esta parte, deberán subir el link a su repositorio de GitHub, el cual debe contener el código del proyecto. Además, deben incluir el link a la página desplegada en el apartado \u0026ldquo;About\u0026rdquo; del repositorio. Como se muestra a continuación:\n","date":"17 septiembre 2024","permalink":"/platform/pcs/pc-tictactoe/part2/","section":"Pcs","summary":"Funcionalidad (JavaScript) # En esta segunda parte de la práctica, debes agregar la funcionalidad al juego \u0026ldquo;Tic Tac Toe\u0026rdquo; que previamente diseñaste en la Parte 1.","title":"Tic Tac Toe - Parte 2"},{"content":"Diseño (HTML, CSS y Bootstrap) # Debes desarrollar el diseño completo del juego \u0026ldquo;Tic Tac Toe\u0026rdquo; basándote en el prototipo proporcionado en el siguiente enlace:\nFrontend Mentor - Tic Tac Toe Game.\nUtiliza HTML para crear la estructura básica del juego, CSS para definir los estilos y Bootstrap para asegurar la responsividad y utilizar componentes predefinidos.\nRequisitos: # El diseño debe ser completamente responsivo, adaptándose a diferentes tamaños de pantalla (móvil, tablet y escritorio). Debes incluir todos los elementos visuales del juego: tablero, botones de control, indicadores de turno y cualquier otro componente visual del prototipo. No se requiere ninguna funcionalidad en esta parte; solo la presentación visual debe estar completa. Entregables # Para la entrega de esta práctica calificada, deberás subir el link a tu repositorio de GitHub, el cual debe contener el código del proyecto. Además, debe incluir el link a la página desplegada en el apartado \u0026ldquo;About\u0026rdquo; del repositorio. Como se muestra a continuación:\n","date":"17 septiembre 2024","permalink":"/platform/pcs/pc-tictactoe/part1/","section":"Pcs","summary":"Diseño (HTML, CSS y Bootstrap) # Debes desarrollar el diseño completo del juego \u0026ldquo;Tic Tac Toe\u0026rdquo; basándote en el prototipo proporcionado en el siguiente enlace:","title":"Tic Tac Toe - Parte 1"},{"content":"El objetivo de esta práctica es comprender y aplicar los conceptos de funciones asíncronas, async y await, en JavaScript. Utilizarás la API pública de JSONPlaceholder para obtener datos de usuarios y mostrarlos dinámicamente en una card.\nInstrucciones # Lee el siguiente artículo sobre async y await en FreeCodeCamp: Explicación de async y await en JavaScript\nUtiliza la API pública de JSONPlaceholder para obtener los usuarios:\nURL de la API: https://jsonplaceholder.typicode.com/users\nParte 1: Fetch de Usuarios y Renderizado en Cards # Crea una función asíncrona llamada fetchUsers() que haga un fetch a la URL https://jsonplaceholder.typicode.com/users para obtener la lista de usuarios. Utiliza async y await para esperar a que los datos se obtengan y luego procesarlos. Por cada usuario obtenido, crea dinámicamente una card utilizando JavaScript. La card debe incluir al menos los siguientes datos del usuario: Nombre (name) Nombre de usuario (username) Correo electrónico (email) Empresa (company.name) Muestra todas las cards en el DOM (por ejemplo, en una sección con la clase .users-container). Ejemplo de Estructura de la Card: # \u0026lt;div class=\u0026#34;card\u0026#34;\u0026gt; \u0026lt;h3\u0026gt;Nombre: John Doe\u0026lt;/h3\u0026gt; \u0026lt;p\u0026gt;Usuario: johndoe\u0026lt;/p\u0026gt; \u0026lt;p\u0026gt;Email: johndoe@example.com\u0026lt;/p\u0026gt; \u0026lt;p\u0026gt;Empresa: Doe Inc.\u0026lt;/p\u0026gt; \u0026lt;/div\u0026gt; Parte 2: Manejo de Errores # Asegúrate de manejar los posibles errores de la API utilizando un bloque try/catch. Si ocurre un error al obtener los datos, muestra un mensaje de error en el DOM, indicando que no se pudieron cargar los usuarios. El mensaje de error debe ser claro, por ejemplo: \u0026ldquo;Error al cargar los usuarios. Inténtalo de nuevo más tarde.\u0026rdquo; Parte 3: Estilizado con CSS y Bootstrap # Utiliza Bootstrap para diseñar las cards de manera responsiva. Cada card debe tener un diseño limpio y estructurado, utilizando las clases de Bootstrap. Asegúrate de que el diseño sea responsivo, adaptándose correctamente a diferentes tamaños de pantalla. Recursos Utilizables # URL de la API de usuarios: https://jsonplaceholder.typicode.com/users Artículo de referencia: Explicación de async y await en FreeCodeCamp Documentación de JSONPlaceholder Entregables # Para la entrega de esta práctica calificada, deberás subir el link a tu repositorio de GitHub, el cual debe contener el código del proyecto. Además, debe incluir el link a la página desplegada en el apartado \u0026ldquo;About\u0026rdquo; del repositorio. Como se muestra a continuación:\n","date":"17 septiembre 2024","permalink":"/platform/pcs/pc-asyncawait/","section":"Pcs","summary":"El objetivo de esta práctica es comprender y aplicar los conceptos de funciones asíncronas, async y await, en JavaScript.","title":"Implementación de async/await"},{"content":"🎯 Propósito del Proyecto # El objetivo de este proyecto es transformar un portafolio web estático, construido con HTML y CSS, en una aplicación web dinámica e interactiva utilizando JavaScript.\n📌 Lo que aprenderás:\nManipulación del DOM para modificar dinámicamente la estructura y el contenido. Gestión de eventos para agregar interactividad (menús, botones, animaciones, etc.). Uso de arrays y objetos para almacenar y gestionar información. Creación de funciones para organizar mejor el código. Implementación de carga dinámica de contenido para mejorar la experiencia del usuario. Aplicación de diseño responsivo para que la web funcione en cualquier dispositivo. 🚀 Conocimientos en Práctica # ✅ HTML y CSS: Reforzar la estructura y los estilos básicos de la página.\n✅ JavaScript (DOM): Manipular el contenido de la página dinámicamente.\n✅ JavaScript (Eventos): Gestionar acciones como clics y cambios en la interfaz.\n✅ JavaScript (Arrays y Objetos): Almacenar y gestionar información de habilidades y proyectos.\n✅ JavaScript (Funciones): Modularizar el código para hacerlo reutilizable.\n✅ JavaScript (Carga Dinámica): Optimizar el rendimiento al cargar contenido de forma eficiente.\n✅ Diseño Responsivo: Adaptar la web a distintos dispositivos y pantallas.\n📌 Especificaciones del Proyecto # 1️⃣ Carga Dinámica de Habilidades # 🛠️ Las habilidades del desarrollador deben cargarse dinámicamente desde un archivo habilidades.js.\n📌 Cada habilidad se representará como un objeto con propiedades como nombre y nivel de habilidad.\n🔹 Se debe crear una función en JavaScript que genere el HTML necesario para mostrar las habilidades.\n⚡ Esta función se ejecutará al cargar la página.\n2️⃣ Menú con Toggle # 📌 Se debe agregar un menú de navegación en la página.\n📱 En dispositivos móviles, el menú debe poder abrirse y cerrarse mediante un botón de toggle.\n🔹 La funcionalidad del toggle se implementará con JavaScript, agregando o eliminando una clase CSS para mostrar u ocultar el menú.\n3️⃣ Página de Proyectos Separada # 📂 Se debe crear una página separada (proyectos.html) para mostrar los proyectos del desarrollador.\n📌 Los proyectos deben cargarse dinámicamente desde un archivo proyectos.js.\n🔹 Cada proyecto será un objeto con propiedades como título, descripción e imagen.\n⚡ Se creará una función en JavaScript para generar el HTML necesario y mostrar los proyectos en proyectos.html.\n🔗 Se añadirá un enlace en el menú de navegación de index.html que dirija a la página de proyectos.\n4️⃣ Mejora de la Interacción # ✨ Agregar interactividad a los elementos de la página:\n🔹 Efectos hover en los proyectos.\n🔹 Animaciones sutiles al cargar las habilidades.\n📩 Formulario de contacto:\n✅ Validar que los campos no estén vacíos.\n📧 Implementar el envío del formulario a un correo electrónico.\n💡 ¡Con este proyecto, tu portafolio será más atractivo, dinámico e interactivo! 🚀\nNota: Los estilos deben ser los proporcionados en la siguiente imagen.\n","date":"17 septiembre 2024","permalink":"/platform/pcs/mp-portfolio-js/","section":"Pcs","summary":"🎯 Propósito del Proyecto # El objetivo de este proyecto es transformar un portafolio web estático, construido con HTML y CSS, en una aplicación web dinámica e interactiva utilizando JavaScript.","title":"Proyecto: 🌟 Portafolio Web Dinámico  "},{"content":"Proyecto: Portafolio Web para Desarrollador Full Stack # Descripción # Este proyecto consiste en la creación de un portafolio web personal para un desarrollador Full Stack. El objetivo es presentar habilidades, experiencia y proyectos de una manera profesional y atractiva. Los alumnos aprenderán a construir una página web moderna con tecnologías web populares.\nObjetivos del Proyecto # Diseñar una página web moderna utilizando HTML y CSS. Implementar una sección de habilidades y experiencia con iconos representativos. Crear una galería de proyectos con imágenes y descripciones. Incorporar un formulario de contacto para que clientes o empleadores puedan comunicarse. Optimizar el diseño para distintos dispositivos utilizando estilos responsivos. Tecnologías Utilizadas # HTML CSS (TailwindCSS recomendado) Estructura del Proyecto # Encabezado (Header)\nLogo y navegación (Inicio, Habilidades, Proyectos, Contacto) Botón de contacto destacado Sección Principal (Hero Section)\nFoto del desarrollador Nombre y especialidad destacada Enlace a proyectos ¿Quién soy?\nBreve descripción del desarrollador y su pasión por la programación Imagen decorativa o tarjetas con información Sección de Habilidades\nÍconos de tecnologías dominadas (HTML, CSS, etc.) Años de experiencia Botón para descargar CV Proyectos Destacados\nImágenes y descripciones de proyectos realizados Enlace a más detalles o repositorio en GitHub Formulario de Contacto\nCampos para nombre, correo y mensaje Botón de envío con estilo llamativo Paleta de Colores # Para mantener coherencia con el diseño, se debe utilizar la siguiente paleta de colores:\nColores principales: # Fondo oscuro: #0D1117 Texto principal: #FFFFFF Amarillo destacado: #E3FF6A Verde neón: #A4FF7A Azul oscuro: #1E293B Gris suave: #8892B0 Gradiente principal: # background: linear-gradient(135deg, #1E293B 0%, #0D1117 100%); Configuración en TailwindCSS # En el archivo tailwind.config.js:\nmodule.exports = { theme: { extend: { colors: { dark: \u0026#34;#0D1117\u0026#34;, light: \u0026#34;#FFFFFF\u0026#34;, highlight: \u0026#34;#E3FF6A\u0026#34;, neonGreen: \u0026#34;#A4FF7A\u0026#34;, deepBlue: \u0026#34;#1E293B\u0026#34;, softGray: \u0026#34;#8892B0\u0026#34;, }, backgroundImage: { \u0026#34;gradient-main\u0026#34;: \u0026#34;linear-gradient(135deg, #1E293B 0%, #0D1117 100%)\u0026#34;, }, }, }, plugins: [], }; Uso en CSS estándar # :root { --color-dark: #0D1117; --color-light: #FFFFFF; --color-highlight: #E3FF6A; --color-neon-green: #A4FF7A; --color-deep-blue: #1E293B; --color-soft-gray: #8892B0; --gradient-main: linear-gradient(135deg, #1E293B 0%, #0D1117 100%); } body { background: var(--color-dark); color: var(--color-light); } .button { background: var(--color-highlight); color: var(--color-dark); } .section { background: var(--gradient-main); } Pasos para Implementarlo # Configurar el proyecto\nCrear una carpeta para el proyecto Instalar TailwindCSS si se desea estilizar con esta herramienta Estructurar el HTML\nCrear los componentes o secciones necesarias Usar etiquetas semánticas para una mejor accesibilidad Estilizar la Página\nAplicar estilos base con CSS o TailwindCSS Definir un esquema de colores atractivo Optimización y Despliegue\nProbar en diferentes dispositivos y navegadores Subir el proyecto a GitHub y desplegar en Vercel o Netlify Recursos Adicionales # Guía de TailwindCSS ¡Con esto, los alumnos podrán crear su propio portafolio y mostrar sus habilidades al mundo!\nNota: Los estilos deben ser los proporcionados en la siguiente imagen.\n","date":"17 septiembre 2024","permalink":"/platform/pcs/mp-portfolio/","section":"Pcs","summary":"Proyecto: Portafolio Web para Desarrollador Full Stack # Descripción # Este proyecto consiste en la creación de un portafolio web personal para un desarrollador Full Stack.","title":"Proyecto: Portafolio Web para Desarrollador Frontend"},{"content":"","date":"10 septiembre 2024","permalink":"/platform/bootstrap/","section":"Bootstraps","summary":"","title":"Bootstraps"},{"content":"Este proyecto consiste en crear una calculadora de reembolso de hipoteca que permita a los usuarios calcular el pago mensual de su hipoteca utilizando HTML, CSS, JavaScript, y Bootstrap.\nObjetivos # Diseñar una interfaz intuitiva que incluya campos de entrada para el monto del préstamo, la tasa de interés, y el plazo de la hipoteca. Implementar la lógica de cálculo del pago mensual de la hipoteca utilizando JavaScript. Mostrar el resultado del cálculo de forma clara y fácil de entender para el usuario. Asegurar que la calculadora sea completamente responsiva utilizando Bootstrap para garantizar una buena experiencia en diferentes dispositivos. Requisitos # HTML: Estructura la calculadora con campos de entrada para los datos necesarios (monto del préstamo, tasa de interés anual y plazo en años) y un botón para calcular. CSS: Aplica estilos adicionales con CSS para mejorar la presentación visual que no se pueda conseguir solo con Bootstrap. JavaScript: Implementa la lógica que realice los cálculos del pago mensual basados en la entrada del usuario. Bootstrap: Utiliza clases de Bootstrap para diseñar una interfaz moderna y responsiva. Fórmula de Cálculo # Para calcular el pago mensual de la hipoteca, utiliza la siguiente fórmula:\nDonde:\nM = Pago mensual. P = Monto del préstamo. r = Tasa de interés mensual (tasa de interés anual dividida por 12). n = Número total de pagos (número de años multiplicado por 12). Instrucciones # Ingresa al siguiente link y haz clic en \u0026ldquo;START CHALLENGE\u0026rdquo; para descargar el archivo .zip que te permitirá iniciar con el proyecto.\nLink Crea un nuevo archivo HTML (index.html) para la calculadora de hipoteca.\nIncluye la biblioteca de Bootstrap en tu proyecto (puedes usar un CDN).\nDiseña la interfaz de usuario con los campos de entrada necesarios, un botón de cálculo, y un área para mostrar el resultado.\nAñade la lógica de JavaScript para calcular el pago mensual de la hipoteca utilizando la fórmula proporcionada.\nAsegúrate de que el diseño sea responsivo en todos los dispositivos.\nSube tu solución a GitHub.\nEntregables # Link a tu repositorio de GitHub con el código de tu aplicación. Link a tu página desplegada. Este texto proporciona una explicación clara de cómo calcular el pago mensual de la hipoteca utilizando la fórmula adecuada, junto con todos los detalles necesarios para completar el proyecto.\n","date":"10 septiembre 2024","permalink":"/platform/bootstrap/calculator/","section":"Bootstraps","summary":"Este proyecto consiste en crear una calculadora de reembolso de hipoteca que permita a los usuarios calcular el pago mensual de su hipoteca utilizando HTML, CSS, JavaScript, y Bootstrap.","title":"Mortgage Calculator"},{"content":"Este proyecto consiste en crear un formulario de suscripción al boletín de noticias con un mensaje de éxito utilizando HTML, CSS, JavaScript, y Bootstrap.\nObjetivos # Diseñar un formulario de registro que incluya un campo para el correo electrónico y un botón de suscripción. Validar la entrada del correo electrónico con JavaScript para asegurarse de que tenga un formato válido. Mostrar un mensaje de éxito personalizado una vez que el usuario haya ingresado un correo electrónico válido y presionado el botón de suscripción. Estilizar el formulario y el mensaje de éxito usando Bootstrap para garantizar una apariencia profesional y receptiva. Requisitos # HTML: Crea la estructura básica del formulario de suscripción, incluyendo los campos requeridos. CSS: Utiliza CSS puro para los estilos que no se puedan lograr con Bootstrap. JavaScript: Implementa la lógica de validación del correo electrónico y muestra el mensaje de éxito dinámicamente. Bootstrap: Aplica estilos utilizando clases de Bootstrap para darle un diseño moderno y responsive al formulario. Instrucciones # Ingresa al siguiente link y dale click a \u0026ldquo;START CHALLENGE\u0026rdquo; para descargar el archivo .zip que te permitirá iniciar con el proyecto.\nLink Crea un nuevo archivo HTML (index.html) para el formulario de suscripción.\nIncluye la biblioteca de Bootstrap en tu proyecto (puedes usar un CDN).\nDiseña el formulario con los campos necesarios, el botón de suscripción y que todo sea responsive.\nAñade validación de JavaScript para el campo de correo electrónico.\nMuestra un mensaje de éxito cuando el usuario se haya suscrito correctamente.\nSube tu solución a GitHub.\nRecursos # Bootstrap Documentation Guía de Validación de Formularios con JavaScript Entregables # Link a tu repositorio de GitHub con el código de tu aplicación. Link a tu página desplegada. ","date":"3 septiembre 2024","permalink":"/platform/bootstrap/newsletter/","section":"Bootstraps","summary":"Este proyecto consiste en crear un formulario de suscripción al boletín de noticias con un mensaje de éxito utilizando HTML, CSS, JavaScript, y Bootstrap.","title":"Formulario de Suscripción"},{"content":"🚀 Manejo de Estados de Carga y Error en React (para Principiantes) # El manejo de estados de carga y error es crucial en React para crear aplicaciones con una buena experiencia de usuario. Aquí te presento una explicación sencilla para principiantes:\n❓ ¿Qué son los estados de carga y error? # ⏳ Estado de carga (loading state): Indica que una operación asíncrona (como obtener datos de una API) está en curso. Se muestra un indicador de carga (spinner, mensaje) para informar al usuario. ⚠️ Estado de error (error state): Indica que una operación asíncrona falló. Se muestra un mensaje de error claro para informar al usuario y, si es posible, ofrecer soluciones. 🛠️ Implementación básica en React # 📌 Estados con useState: Utiliza useState para crear estados que almacenen: Si la operación está en curso (isLoading). Si ocurrió un error (error). Los datos obtenidos (si la operación fue exitosa). 🔄 Manejo de la operación asíncrona: Dentro de un efecto (useEffect o similar), realiza la operación asíncrona (por ejemplo, con fetch). Antes de iniciar la operación, establece isLoading en true. Si la operación tiene éxito, almacena los datos y establece isLoading en false. Si la operación falla, almacena el error y establece isLoading en false. 🎨 Renderizado condicional: Utiliza el valor de los estados para renderizar diferentes partes de la interfaz de usuario: Si isLoading es true, muestra un indicador de carga. Si error tiene un valor, muestra un mensaje de error. Si no hay error y los datos están disponibles, muestra los datos. 💡 Ejemplo simplificado # import React, { useState, useEffect } from \u0026#39;react\u0026#39;; function DatosDesdeApi() { const [datos, setDatos] = useState(null); const [error, setError] = useState(null); const [isLoading, setIsLoading] = useState(false); useEffect(() =\u0026gt; { const obtenerDatos = async () =\u0026gt; { setIsLoading(true); setError(null); try { const respuesta = await fetch(\u0026#39;https://api.ejemplo.com/datos\u0026#39;); if (!respuesta.ok) { throw new Error(\u0026#39;Error al obtener datos\u0026#39;); } const resultado = await respuesta.json(); setDatos(resultado); } catch (e) { setError(e.message); } finally { setIsLoading(false); } }; obtenerDatos(); }, []); if (isLoading) { return \u0026lt;p\u0026gt;⏳ Cargando...\u0026lt;/p\u0026gt;; } if (error) { return \u0026lt;p\u0026gt;⚠️ Error: {error}\u0026lt;/p\u0026gt;; } if (datos) { return ( \u0026lt;div\u0026gt; {/* Renderiza los datos */} \u0026lt;pre\u0026gt;{JSON.stringify(datos, null, 2)}\u0026lt;/pre\u0026gt; \u0026lt;/div\u0026gt; ); } return \u0026lt;p\u0026gt;ℹ️ No hay datos disponibles.\u0026lt;/p\u0026gt;; } export default DatosDesdeApi; 📌 Puntos clave # ✅ Claridad: Muestra mensajes claros al usuario sobre el estado de la aplicación. ⚙️ Manejo de errores: Proporciona información útil sobre los errores y, si es posible, sugiere soluciones. 🌟 Experiencia de usuario: Evita que la aplicación se congele o muestre pantallas en blanco durante las operaciones asíncronas. ","date":"29 agosto 2024","permalink":"/platform/react/error_loading_states/","section":"Reacts","summary":"🚀 Manejo de Estados de Carga y Error en React (para Principiantes) # El manejo de estados de carga y error es crucial en React para crear aplicaciones con una buena experiencia de usuario.","title":"🌟 Estados de Carga y Error en Reac"},{"content":"Recursos # Mira los siguientes videos (en 1.5x o más si lo deseas):\n","date":"26 agosto 2024","permalink":"/platform/bootstrap/avanzado/","section":"Bootstraps","summary":"Recursos # Mira los siguientes videos (en 1.","title":"Conceptos más avanzados en Bootstrap"},{"content":"Bootstrap es un framework de código abierto que facilita el desarrollo de sitios web responsivos y modernos. Fue creado por Twitter y lanzado en 2011, ganando popularidad rápidamente gracias a su facilidad de uso y a la amplia gama de componentes prediseñados que ofrece. Este artículo introduce los conceptos básicos de Bootstrap, explorando sus características principales y su estructura.\n¿Qué es Bootstrap? # Bootstrap es un conjunto de herramientas de desarrollo front-end que permite a los desarrolladores crear páginas web rápidamente sin necesidad de diseñar cada elemento desde cero. Incluye plantillas de diseño basadas en HTML y CSS, así como componentes JavaScript que mejoran la interactividad del sitio. La mayor ventaja de Bootstrap es su enfoque en el diseño responsivo, lo que significa que los sitios web se ajustan automáticamente a diferentes tamaños de pantalla y dispositivos.\nEstructura de Bootstrap # Bootstrap se organiza en tres componentes principales: CSS, Componentes y JavaScript.\nCSS: La parte central de Bootstrap es su hoja de estilo CSS, que proporciona una base sólida para la tipografía, los botones, los formularios, las tablas y otros elementos HTML. Además, Bootstrap incluye un sistema de cuadrícula (grid system) que facilita la creación de diseños flexibles y adaptables.\nComponentes: Bootstrap ofrece una variedad de componentes reutilizables, como menús de navegación, tarjetas, modales, y alertas, entre otros. Estos componentes están diseñados para ser integrados fácilmente en cualquier proyecto web, ahorrando tiempo y esfuerzo en el desarrollo.\nJavaScript: Bootstrap incluye plugins de JavaScript que añaden interactividad a los componentes, como menús desplegables, carruseles y ventanas modales. Estos scripts son ligeros y están optimizados para un rendimiento eficiente.\nSistema de Cuadrícula # Uno de los aspectos más destacados de Bootstrap es su sistema de cuadrícula, que se basa en una estructura de 12 columnas. Este sistema permite dividir la página en diferentes secciones, facilitando la creación de diseños complejos que se adaptan automáticamente a diferentes tamaños de pantalla.\nEl sistema de cuadrícula utiliza clases predefinidas, como .col-md-4 o .col-lg-6, para definir cuántas columnas debe ocupar un elemento en dispositivos de distintos tamaños (por ejemplo, medianos o grandes). Esto hace que sea sencillo crear diseños responsivos sin necesidad de escribir CSS adicional.\nUso de Bootstrap # Para utilizar Bootstrap en un proyecto, se puede incluir la hoja de estilo CSS y los scripts de JavaScript directamente desde una red de distribución de contenido (CDN) o descargando los archivos y hospedándolos localmente. Una vez integrados, se pueden utilizar las clases y componentes de Bootstrap en el HTML del proyecto.\nEjemplo básico de un botón en Bootstrap:\n\u0026lt;button class=\u0026#34;btn btn-primary\u0026#34;\u0026gt;Haz clic aquí\u0026lt;/button\u0026gt; En este ejemplo, la clase btn define el estilo básico del botón, mientras que btn-primary añade un color específico según el tema predeterminado de Bootstrap.\nConclusión # Bootstrap es una herramienta poderosa para desarrolladores web, ofreciendo una amplia gama de componentes y un sistema de cuadrícula que facilita la creación de sitios responsivos. Su popularidad se debe a su facilidad de uso y a la capacidad de crear sitios visualmente atractivos y funcionales sin necesidad de un diseño desde cero. Con un entendimiento básico de sus componentes y estructura, cualquier desarrollador puede aprovechar al máximo las capacidades de Bootstrap en sus proyectos.\nRecursos # Mira los siguientes videos:\n","date":"26 agosto 2024","permalink":"/platform/bootstrap/intro/","section":"Bootstraps","summary":"Bootstrap es un framework de código abierto que facilita el desarrollo de sitios web responsivos y modernos.","title":"Introducción a Bootstrap"},{"content":"Introducción 🌟 # En aplicaciones React grandes, es común tener componentes que no se necesitan cargar inmediatamente. Para mejorar el rendimiento y la experiencia del usuario, podemos usar la carga diferida (lazy loading). React proporciona React.lazy y Suspense para facilitar esta tarea.\nReact.lazy: Permite cargar componentes de forma diferida, es decir, solo cuando son necesarios. Suspense: Permite mostrar un contenido de reserva (fallback) mientras se carga el componente diferido. Requisitos previos ✅ # Node.js y npm instalados. Conocimientos básicos de React. Pasos 🛠️ # 1. Crear una aplicación React 🖥️ # Si no tienes una aplicación React existente, puedes crear una nueva con Create React App:\nnpx create-react-app mi-app-lazy cd mi-app-lazy 2. Crear un componente para carga diferida 🧩 # Crea un componente que se cargará de forma diferida. Por ejemplo, un componente llamado ComponenteDiferido.js:\n// src/ComponenteDiferido.js function ComponenteDiferido() { return \u0026lt;h1\u0026gt;Componente cargado de forma diferida! 🎉\u0026lt;/h1\u0026gt;; } export default ComponenteDiferido; 3. Cargar el componente de forma diferida con React.lazy ⏳ # En el componente principal de tu aplicación (por ejemplo, App.js), importa el componente de forma diferida usando React.lazy:\n// src/App.js import React, { lazy, Suspense } from \u0026#39;react\u0026#39;; const ComponenteDiferido = lazy(() =\u0026gt; import(\u0026#39;./ComponenteDiferido.js\u0026#39;)); function App() { return ( \u0026lt;div\u0026gt; \u0026lt;h1\u0026gt;Aplicación con carga diferida 🚀\u0026lt;/h1\u0026gt; \u0026lt;Suspense fallback={\u0026lt;div\u0026gt;Cargando... ⏳\u0026lt;/div\u0026gt;}\u0026gt; \u0026lt;ComponenteDiferido /\u0026gt; \u0026lt;/Suspense\u0026gt; \u0026lt;/div\u0026gt; ); } export default App; 4. Usar Suspense para mostrar un fallback 🔄 # El componente Suspense envuelve el componente cargado de forma diferida y recibe una prop fallback. Esta prop define el contenido que se mostrará mientras se carga el componente diferido. En este ejemplo, se muestra \u0026ldquo;Cargando\u0026hellip;\u0026rdquo;.\n5. Probar la aplicación 🧪 # Ejecuta la aplicación:\nnpm start Abre tu navegador y ve a http://localhost:3000. Verás el mensaje \u0026ldquo;Cargando\u0026hellip; ⏳\u0026rdquo; mientras se carga el componente diferido y luego el contenido del componente.\nEjemplo más complejo 🌐 # Es posible tener varios componentes cargados de forma diferida dentro del mismo componente Suspense, y también es posible crear fallbacks más complejos, como por ejemplo componentes que simulen la carga de la página que se quiere cargar.\nimport React, { lazy, Suspense } from \u0026#39;react\u0026#39;; const ComponenteA = lazy(() =\u0026gt; import(\u0026#39;./ComponenteA.js\u0026#39;)); const ComponenteB = lazy(() =\u0026gt; import(\u0026#39;./ComponenteB.js\u0026#39;)); function App() { return ( \u0026lt;div\u0026gt; \u0026lt;h1\u0026gt;Aplicación con múltiples componentes diferidos 🚀\u0026lt;/h1\u0026gt; \u0026lt;Suspense fallback={\u0026lt;div\u0026gt;Cargando componentes... 🔄\u0026lt;/div\u0026gt;}\u0026gt; \u0026lt;ComponenteA /\u0026gt; \u0026lt;ComponenteB /\u0026gt; \u0026lt;/Suspense\u0026gt; \u0026lt;/div\u0026gt; ); } export default App; Conclusión 🎯 # React.lazy y Suspense son herramientas poderosas para mejorar el rendimiento de aplicaciones React grandes. Al cargar componentes de forma diferida, reducimos el tamaño inicial del paquete y mejoramos la experiencia del usuario. Es importante recordar que Suspense solo funciona con componentes cargados de forma diferida usando React.lazy o con componentes que resuelven una promesa, como cuando se utiliza la API use.\nRecursos # ","date":"14 julio 2024","permalink":"/platform/react/lazy_suspense/","section":"Reacts","summary":"Introducción 🌟 # En aplicaciones React grandes, es común tener componentes que no se necesitan cargar inmediatamente.","title":"Carga diferida con React.lazy y Suspense 🚀"},{"content":"useRef (Hook de Referencia) # useRef es un hook que permite crear una referencia mutable que persiste entre renderizados sin causar re-renderizaciones cuando cambia su valor. Se usa comúnmente para:\n🔗 Referenciar elementos del DOM (como inputs o botones). 📦 Almacenar valores persistentes sin provocar re-renderizados. Ejemplo 1: Acceder a un input sin estado # import { useRef } from \u0026#34;react\u0026#34;; function FocusInput() { const inputRef = useRef(null); const handleFocus = () =\u0026gt; { inputRef.current.focus(); }; return ( \u0026lt;div\u0026gt; \u0026lt;input ref={inputRef} type=\u0026#34;text\u0026#34; placeholder=\u0026#34;Escribe algo...\u0026#34; /\u0026gt; \u0026lt;button onClick={handleFocus}\u0026gt;Enfocar Input\u0026lt;/button\u0026gt; \u0026lt;/div\u0026gt; ); } export default FocusInput; 📌 Explicación:\nuseRef se usa para referenciar el input. inputRef.current.focus() permite enfocar el input sin necesidad de actualizar el estado. Ejemplo 2: Almacenar valores sin causar re-render # import { useRef, useState } from \u0026#34;react\u0026#34;; function Counter() { const countRef = useRef(0); const [renderCount, setRenderCount] = useState(0); const increment = () =\u0026gt; { countRef.current += 1; console.log(\u0026#34;Valor de countRef:\u0026#34;, countRef.current); }; return ( \u0026lt;div\u0026gt; \u0026lt;p\u0026gt;Renders: {renderCount}\u0026lt;/p\u0026gt; \u0026lt;button onClick={() =\u0026gt; setRenderCount((prev) =\u0026gt; prev + 1)}\u0026gt; Re-renderizar \u0026lt;/button\u0026gt; \u0026lt;button onClick={increment}\u0026gt;Incrementar Ref\u0026lt;/button\u0026gt; \u0026lt;/div\u0026gt; ); } export default Counter; 📌 Explicación:\ncountRef.current almacena un número que persiste entre renderizados. Al presionar \u0026ldquo;Incrementar Ref\u0026rdquo;, el valor de countRef cambia, pero no provoca un re-render. use (API de React 19 en adelante) # El hook use es una nueva API introducida en React 19 para manejar promesas de manera más sencilla dentro de componentes de servidor o React Server Components (RSC). Su principal uso es esperar datos asincrónicos sin usar useEffect ni useState.\nEjemplo 1: Fetch de datos en un Server Component # import { use } from \u0026#34;react\u0026#34;; async function fetchUserData() { const res = await fetch(\u0026#34;https://jsonplaceholder.typicode.com/users/1\u0026#34;); return res.json(); } export default function UserComponent() { const user = use(fetchUserData()); return ( \u0026lt;div\u0026gt; \u0026lt;h2\u0026gt;{user.name}\u0026lt;/h2\u0026gt; \u0026lt;p\u0026gt;{user.email}\u0026lt;/p\u0026gt; \u0026lt;/div\u0026gt; ); } 📌 Explicación:\nuse(fetchUserData()) espera la promesa y devuelve el resultado directamente en el render. Funciona en componentes de servidor (app directory en Next.js). Ejemplo 2: Uso con Suspense # Cuando use se usa en componentes de cliente, es necesario envolverlo en Suspense.\nimport { use, Suspense } from \u0026#34;react\u0026#34;; async function fetchData() { const res = await fetch(\u0026#34;https://jsonplaceholder.typicode.com/todos/1\u0026#34;); return res.json(); } function Todo() { const todo = use(fetchData()); return \u0026lt;p\u0026gt;{todo.title}\u0026lt;/p\u0026gt;; } export default function App() { return ( \u0026lt;Suspense fallback={\u0026lt;p\u0026gt;Cargando...\u0026lt;/p\u0026gt;}\u0026gt; \u0026lt;Todo /\u0026gt; \u0026lt;/Suspense\u0026gt; ); } 📌 Explicación:\nSuspense evita que la aplicación se rompa mientras la promesa se resuelve. use(fetchData()) devuelve directamente el valor cuando está disponible. 🔍 Diferencias Claves # Característica useRef use ¿Provoca re-render? ❌ No ✅ Sí (cuando la promesa se resuelve) ¿Se usa en el servidor? ❌ No ✅ Sí (React Server Components) Propósito principal Referencias mutables (DOM, valores persistentes) Esperar promesas directamente en la renderización Si estás en Next.js 14 con la estructura /app, use es una opción poderosa para manejar datos en Server Components sin necesidad de useEffect.\n📌 Conclusión:\n✅ Usa useRef cuando necesites acceder a elementos del DOM o almacenar valores sin causar re-renderizados. ✅ Usa use cuando trabajes con React Server Components para manejar datos asincrónicos de manera más sencilla. ","date":"14 julio 2024","permalink":"/platform/react/use_useref/","section":"Reacts","summary":"useRef (Hook de Referencia) # useRef es un hook que permite crear una referencia mutable que persiste entre renderizados sin causar re-renderizaciones cuando cambia su valor.","title":"Hook `useRef` y API  `use`"},{"content":"","date":"24 mayo 2024","permalink":"/platform/express/","section":"Expresses","summary":"","title":"Expresses"},{"content":"Desarrollar una plataforma web completa que permita a los usuarios registrarse, iniciar sesión, grabar videos directamente desde la página web, y subirlos. Cada video podrá ser almacenado y categorizado por título, descripción y etiquetas. Los videos deberán estar disponibles para streaming, y los usuarios podrán gestionar su biblioteca de videos, incluyendo la edición de metadatos, eliminación y visualización de estadísticas de visualización. Además, la plataforma debe incluir funcionalidades de moderación y administración. Todo el proyecto se desarrollará y ejecutará de manera local.\nRequisitos del Proyecto: # Backend # Autenticación y Autorización:\nImplementar registro de usuarios y login utilizando JWT. Roles de usuario: Usuario estándar y Administrador. Middleware para proteger rutas según roles. Gestión de Videos:\nCRUD de videos (Crear, Leer, Actualizar, Eliminar). Almacenamiento seguro de videos en el sistema de archivos local. Metadatos del video: título, descripción, etiquetas, fecha de subida, duración, miniatura. Streaming de Videos:\nEndpoint para la entrega de videos con autenticación. Estadísticas y Métricas:\nRegistro de vistas de cada video. Estadísticas por video como número de vistas, etc (OPCIONAL). Generación de informes de uso para administradores. Moderación y Administración:\nPanel de administración para moderar videos (aprobar/rechazar videos subidos por usuarios). Herramientas para reportar contenido inapropiado y gestionar denuncias (OPCIONAL). Frontend # Interfaz de Usuario (UI):\nRegistro y Login con validación. Dashboard del usuario con su biblioteca de videos. Formulario de subida de videos con previsualización de la miniatura. Páginas de edición de metadatos de videos (título, desripcion, etiquetas, miniatura). Grabación y Subida de Videos:\nGrabar videos directamente en la página web. Funcionalidad para previsualizar el video grabado antes de subirlo. Manejo de errores y validaciones para asegurar la calidad de los videos grabados. Visualización y Streaming:\nReproductor de video embebido con controles (play, pause, fullscreen, etc.). Páginas de detalle del video con metadatos y estadísticas (OPCIONAL). Listas de reproducción y recomendaciones basadas en etiquetas (OPCIONAL). Panel de Administración:\nSección para moderadores con listas de videos pendientes de revisión (OPCIONAL). Herramientas para editar o eliminar videos reportados (OPCIONAL). Dashboard de estadísticas globales y de usuarios específicos (OPCIONAL). Interacciones Sociales:\nSistema de comentarios para cada video (OPCIONAL). Funcionalidades de “Me gusta” y “No me gusta” (OPCIONAL). Sistema de suscripción a otros usuarios y notificaciones (OPCIONAL). Tecnologías # Backend: Node.js, Express.js, MongoDB, JWT, etc. Frontend: React, React Router, etc. Desafíos Técnicos: # Seguridad: Cifrado de contraseñas y datos sensibles. Optimización: Optimización del rendimiento del frontend para una carga rápida y experiencia fluida. Grabación de Videos: Grabar videos en el navegador. Manejo eficiente del almacenamiento temporal de videos hasta su subida. Entregables: # Código fuente del frontend y backend en repositorios separados. Documentación de la API con Swagger. Este proyecto proporciona una experiencia integral de desarrollo web full stack, abordando aspectos avanzados de autenticación, gestión de contenido multimedia, administración de usuarios y streaming de video, incluyendo la capacidad de grabar videos directamente desde el navegador, todo ello en un entorno local.\n","date":"24 mayo 2024","permalink":"/platform/express/streaming/","section":"Expresses","summary":"Desarrollar una plataforma web completa que permita a los usuarios registrarse, iniciar sesión, grabar videos directamente desde la página web, y subirlos.","title":"Plataforma de Gestión y Streaming de Videos"},{"content":"🎯 Objetivo # El desafío consiste en crear una plataforma web que facilite la gestión de incidencias en un edificio, permitiendo a los residentes reportar problemas y comunicarse eficientemente con el equipo administrativo.\n📃 Descripción del Desafío # Imagina una aplicación web que simplifique el proceso de reportar incidencias para los residentes de un edificio. Desde problemas de fontanería hasta desperfectos en las áreas comunes, la plataforma debe permitir a los usuarios reportar detalles específicos como la ubicación precisa, tipo de problema, una descripción detallada e incluso imágenes relevantes. Además, el equipo administrativo debe visualizar las incidencias de manera clara y marcarlas como resueltas una vez solucionadas.\n☑ Requerimientos Funcionales # Implementar un sistema de registro y autenticación de usuarios para diferenciar entre residentes y administradores. Implementar un sistema completo de Crear, Leer, Actualizar y Eliminar (CRUD) de incidencias para los residentes, incluyendo detalles esenciales como asunto, tipo de incidencia, descripción, imágenes y estado actual. Ofrecer capacidades avanzadas de filtrado y búsqueda para las incidencias, permitiendo a los usuarios encontrar rápidamente información relevante basada en criterios como estado o fecha. Facilitar una comunicación fluida entre residentes y administradores, posiblemente a través de comentarios directamente en las incidencias (opcional). Integrar notificaciones instantáneas para que el equipo administrativo sea alertado en tiempo real ante nuevos reportes de incidencias (opcional). ✔ Requerimientos No Funcionales # La interfaz de usuario debe ser intuitiva y atractiva, priorizando la experiencia del usuario. Garantizar una respuesta rápida a las solicitudes de los usuarios para una experiencia fluida y eficiente. Considerar la escalabilidad del sistema, asegurando que pueda manejar un volumen considerable de incidencias y usuarios sin comprometer el rendimiento. Mantener un código limpio y bien estructurado para facilitar futuras actualizaciones y mejoras. 🧭 Pautas # Diseñar un diagrama Entidad-Relación (ERD) que modele la estructura de la base de datos para una gestión eficiente de datos. Utilizar las últimas versiones de bibliotecas y dependencias para garantizar la seguridad y eficacia del sistema. La estructura organizativa del código y la adhesión a las buenas prácticas de desarrollo serán evaluadas positivamente. ➕ Requerimientos Extra (Opcionales) # Además de los requisitos básicos, se pueden implementar funcionalidades adicionales según las necesidades y preferencias del equipo de desarrollo:\nVisualización en tiempo real de las incidencias en la plataforma. Integración con servicios externos para notificaciones por correo electrónico o mensajes SMS. Generación de informes y estadísticas detalladas sobre las incidencias para análisis y mejora continua. Posibilidad de internacionalización y localización de la aplicación para adaptarse a diferentes idiomas y regiones. 👨🏻‍💻 Tecnologías a utilizar # FRONTEND: React.js con Vite Utilización de React Hooks para gestionar el estado de manera efectiva Consumo de API REST utilizando Axios para comunicarse con el backend Formato de fechas y horas con Day.js Manejo de rutas con Wouter para una navegación fluida BACKEND: NodeJS y Express MySQL Implementación de una API RESTful para permitir la comunicación eficiente entre el frontend y el backend Opcionalmente, se puede implementar Jobs/Queues para el envío de notificaciones de forma asíncrona. 👀 Ejemplos de Interfaz de Usuario # Diseño UX/UI - Gestor de Incidencias de Parkia Sistema Gestor de Incidencias Tecnológicas - BURIA 🤗 ¡Recuerda que el objetivo principal es evaluar tu capacidad actual! # Entregables: Repositorios públicos en GitHub con el código del frontend. Repositorios públicos en GitHub con el código del backend y el ERD (imagen). Opcionalmente, proporcionar una URL para pruebas, lo que facilitará la revisión del proyecto mediante un despliegue funcional. ","date":"10 mayo 2024","permalink":"/platform/express/group-incidencias/","section":"Expresses","summary":"🎯 Objetivo # El desafío consiste en crear una plataforma web que facilite la gestión de incidencias en un edificio, permitiendo a los residentes reportar problemas y comunicarse eficientemente con el equipo administrativo.","title":"Plataforma de Gestión de Incidencias"},{"content":"Descripción # Desarrolla un sistema de autenticación completo que permita a los usuarios registrarse, iniciar sesión y acceder de manera segura a su perfil. El proyecto se enfoca en implementar un proceso de autenticación robusto y seguro utilizando JWT y bcrypt, junto con una interfaz de usuario intuitiva construida con React.\nCaracterísticas Principales # Registro de Usuarios: Los usuarios pueden crear cuentas proporcionando un correo válido, y una contraseña segura. La contraseña debe ser de 8 caracteres como mínimo y tener al menos una letra mayúscula. El correo electrónico de cada usuario debe ser único. Inicio de Sesión: Los usuarios registrados pueden iniciar sesión utilizando su correo y contraseña. Seguridad de Contraseñas: Las contraseñas deben cifrarse utilizando bcrypt antes de almacenarse en la base de datos para garantizar la seguridad de los datos del usuario. Tokens JWT: Utiliza JSON Web Tokens (JWT) para autenticar las solicitudes del usuario y mantener su sesión activa de manera segura. Los tokens deben tener un tiempo de vida de 1 hora. Integración con Base de Datos: Utiliza MySQL para almacenar de manera persistente la información de los usuarios y sus credenciales. La contraseña guardada en la base de datos debe estar cifrada. Usar mysql2 para la conexión a la base de datos. Interfaz de Usuario Intuitiva: Realiza el diseño del frontend tal cual y como te lo proporcionaremos en el Figma: Click aquí Gestión de Estado: Utiliza la Context API de React (useContext) para gestionar el estado de la aplicación de manera eficiente. También usa localStorage para la persistencia de información. Seguridad de Rutas: Implementa middleware en Express para proteger las rutas privadas de la aplicación y garantizar que solo los usuarios autenticados con JWT puedan acceder a ellas. Manejo de Errores: Gestiona adecuadamente los errores durante el proceso de autenticación y proporciona retroalimentación clara al usuario en caso de problemas. Requisitos # Backend (API) # Lenguaje a usar: JavaScript con NodeJS. Framework: Express Encriptado de contraseñas: npm bcrypt JWT: npm jsonwebtoken Base de datos: MySQL Seguir las mejores prácticas de diseño REST. Documentación con Swagger en una ruta de tu API: /api-docs. No está permitido utilizar dependencias o librerías que no se han enseñado en clase. Frontend # Librería a usar: React Utilizar Axios y React Query para realizar solicitudes HTTP al backend de forma eficiente. Utilizar useContext y localStorage para manejar la persistencia del token brindado por el backend al hacer el login. Utilizar el token proporcionado en cada solicitud al backend para autenticarse. Diseño - Figma: Click aquí Entregables # Envía un documento PDF con lo siguiente:\nLink a tu repositorio en GitHub que contenga el código fuente del backend (Express) y tu base de datos exportada con datos de prueba. Link a tu repositorio en GitHub que contenga el código fuente del frontend (React). Un diagrama Entidad-Relación (ERD) que represente la estructura de la base de datos. Criterios de Evaluación # Funcionalidad: ¿El sistema de autenticación cumple con todas las características requeridas? Seguridad: ¿Se implementan prácticas sólidas de seguridad, como cifrado de contraseñas y uso de tokens JWT? Interfaz de Usuario: ¿La interfaz de usuario es como la del Figma? Nota # Este proyecto proporciona una oportunidad para demostrar tus habilidades en el desarrollo full stack y la implementación de sistemas de autenticación seguros. Asegúrate de seguir las mejores prácticas y de proporcionar una aplicación funcional y bien documentada. ¡Buena suerte!\n","date":"7 mayo 2024","permalink":"/platform/express/mp-login/","section":"Expresses","summary":"Descripción # Desarrolla un sistema de autenticación completo que permita a los usuarios registrarse, iniciar sesión y acceder de manera segura a su perfil.","title":"Sistema de Autenticación Full Stack"},{"content":"Amazon Web Services (AWS) es una plataforma de servicios en la nube ofrecida por Amazon.com que proporciona una amplia variedad de servicios de infraestructura informática a través de Internet. Desde su lanzamiento en 2006, AWS ha crecido rápidamente para convertirse en la plataforma líder en computación en la nube, utilizada por millones de clientes en todo el mundo. En este artículo, ofreceremos una breve introducción a AWS, explorando sus servicios clave y su impacto en la industria de la tecnología.\n¿Qué es Amazon Web Services (AWS)? # AWS es una plataforma de computación en la nube que ofrece servicios de infraestructura informática, almacenamiento de datos, análisis, inteligencia artificial, aprendizaje automático, desarrollo de aplicaciones y más. Estos servicios se proporcionan a través de centros de datos distribuidos globalmente, permitiendo a los usuarios acceder a recursos informáticos de manera remota según sea necesario.\nServicios Clave de AWS # AWS ofrece una amplia gama de servicios, incluyendo:\nAmazon EC2 (Elastic Compute Cloud): Ofrece capacidad informática escalable en la nube, permitiendo a los usuarios ejecutar aplicaciones en servidores virtuales.\nAmazon S3 (Simple Storage Service): Proporciona almacenamiento de objetos escalable y duradero en la nube para datos y archivos.\nAmazon RDS (Relational Database Service): Ofrece bases de datos relacionales en la nube, gestionadas y escalables.\nAmazon Lambda: Permite ejecutar código sin aprovisionar ni administrar servidores, en respuesta a eventos en tiempo real.\nAmazon SNS (Simple Notification Service): Facilita la entrega de mensajes a través de una variedad de canales, incluyendo correo electrónico, SMS y notificaciones push.\nImportancia de AWS # AWS ha transformado la forma en que las empresas diseñan, implementan y gestionan sus aplicaciones. Ofrece una alternativa rentable a la infraestructura física tradicional, permitiendo a las organizaciones escalar según sus necesidades y reducir los costos operativos. Además, AWS proporciona una amplia variedad de servicios y herramientas que permiten a los desarrolladores innovar más rápidamente y llevar sus productos al mercado con mayor rapidez.\nConclusiones # Amazon Web Services (AWS) ha revolucionado la industria de la tecnología al proporcionar una plataforma escalable, confiable y rentable para la computación en la nube. Con una amplia gama de servicios y una presencia global, AWS permite a individuos y organizaciones desarrollar, implementar y administrar aplicaciones de manera más eficiente y efectiva. A medida que la adopción de la nube continúa creciendo, AWS seguirá desempeñando un papel fundamental en la evolución de la tecnología y los negocios en el siglo XXI.\nRecursos # Mira todo este video tutorial:\n","date":"17 abril 2024","permalink":"/platform/aws/","section":"","summary":"Amazon Web Services (AWS) es una plataforma de servicios en la nube ofrecida por Amazon.","title":"Amazon Web Services (AWS)"},{"content":"Este artículo proporciona una guía completa sobre cómo implementar Cron Jobs en Express utilizando la biblioteca node-cron con módulos ES. Los Cron Jobs son esenciales para la automatización de tareas en el desarrollo de software, y node-cron ofrece una forma sencilla de integrar esta funcionalidad en aplicaciones Express utilizando módulos ES. A través de ejemplos prácticos y explicaciones detalladas, exploraremos cómo funcionan los Cron Jobs con node-cron, cómo configurarlos y utilizarlos eficientemente para simplificar y optimizar las tareas repetitivas en el desarrollo de software.\nIntroducción: La automatización de tareas repetitivas es fundamental en el desarrollo de software para mejorar la eficiencia y la productividad del equipo de desarrollo. Los Cron Jobs, junto con node-cron, proporcionan una solución eficiente para programar y ejecutar tareas en intervalos regulares en aplicaciones Express. En este artículo, nos enfocaremos en cómo implementar Cron Jobs en Express utilizando módulos ES y la biblioteca node-cron, explorando su funcionamiento, configuración y aplicaciones en el desarrollo de software.\n¿Qué son los Cron Jobs y node-cron? # Los Cron Jobs son programas que se ejecutan automáticamente en un sistema operativo según un horario predefinido. node-cron es una biblioteca de cron para Node.js que proporciona una interfaz sencilla para programar tareas en JavaScript utilizando módulos ES. Permite definir tareas cronológicas utilizando una sintaxis similar a la de los archivos crontab en sistemas Unix.\nFuncionamiento de node-cron: # node-cron utiliza una sintaxis de programación simple y flexible para definir el momento y la frecuencia de ejecución de las tareas. Por ejemplo, la siguiente línea de código programaría una tarea para que se ejecute todos los días a las 2:00 AM:\nimport cron from \u0026#39;node-cron\u0026#39;; cron.schedule(\u0026#39;0 2 * * *\u0026#39;, () =\u0026gt; { // Lógica de la tarea a ejecutar }); Configuración de Cron Jobs con node-cron en Express: # Para integrar Cron Jobs en una aplicación Express con node-cron, primero instalamos la biblioteca a través de npm:\nnpm install node-cron Luego, en el archivo de configuración de nuestra aplicación Express, importamos node-cron y definimos las tareas programadas:\n// app.mjs import express from \u0026#39;express\u0026#39;; import cron from \u0026#39;node-cron\u0026#39;; const app = express(); // Configuración de las tareas cron cron.schedule(\u0026#39;0 2 * * *\u0026#39;, () =\u0026gt; { console.log(\u0026#39;Tarea programada ejecutada a las 2:00 AM\u0026#39;); // Lógica de la tarea a ejecutar }); // Resto de la configuración de Express... Utilizando Cron Jobs en el Desarrollo de Software con Express: # Los Cron Jobs son útiles en una variedad de escenarios en el desarrollo de software con Express. Algunas aplicaciones comunes incluyen la ejecución de tareas de mantenimiento, la generación de informes automáticos, la limpieza de archivos temporales y la gestión de procesos en segundo plano.\nConsideraciones de Seguridad y Mejores Prácticas: # Es importante tener en cuenta la seguridad al configurar Cron Jobs en Express, especialmente si involucran la ejecución de tareas sensibles o privilegiadas. Se recomienda restringir el acceso a las rutas que ejecutan las tareas cron y utilizar autenticación y autorización para limitar el acceso a funciones críticas.\nConclusiones: # La integración de Cron Jobs en aplicaciones Express utilizando node-cron y módulos ES permite automatizar tareas repetitivas y mejorar la eficiencia en el desarrollo de software. Al comprender cómo funcionan los Cron Jobs con node-cron y cómo integrarlos en Express utilizando módulos ES, los desarrolladores pueden simplificar y optimizar sus procesos de desarrollo, liberando tiempo y recursos para actividades más productivas. La implementación adecuada de Cron Jobs con node-cron en Express puede llevar a una mejora significativa en la eficiencia y la calidad del desarrollo de software.\nRecursos # Mira este video completo: Puedes acudir a la documentación en busca de más guía: node-cron documentación\n","date":"17 abril 2024","permalink":"/platform/express/cronjobs/","section":"Expresses","summary":"Este artículo proporciona una guía completa sobre cómo implementar Cron Jobs en Express utilizando la biblioteca node-cron con módulos ES.","title":"Cronjobs"},{"content":"La comunicación en tiempo real entre clientes y servidores es esencial en el desarrollo de aplicaciones web modernas. Los sockets proporcionan una solución eficiente para esta comunicación bidireccional. En este artículo, nos enfocaremos en cómo integrar sockets en aplicaciones React en el lado del cliente y Express en el lado del servidor para construir aplicaciones web dinámicas y colaborativas.\nFundamentos de Sockets en Express y React: # Los sockets permiten una comunicación bidireccional en tiempo real entre clientes y servidores. En el lado del servidor, utilizaremos Express como nuestro marco web, mientras que en el lado del cliente, emplearemos React como nuestra biblioteca de interfaz de usuario. Utilizaremos la biblioteca Socket.io tanto en el cliente como en el servidor para facilitar la implementación de sockets.\nConfiguración Básica con Socket.io: # Para empezar, necesitamos instalar Socket.io tanto en el lado del cliente como en el servidor. En el servidor Express, configuramos Socket.io de la siguiente manera:\n// server.mjs import express from \u0026#39;express\u0026#39;; import { createServer } from \u0026#39;http\u0026#39;; import { Server } from \u0026#39;socket.io\u0026#39;; const app = express(); const server = createServer(app); const io = new Server(server); // Resto del código de configuración... Y en el cliente React, configuramos Socket.io-client:\n// App.js import React, { useEffect } from \u0026#39;react\u0026#39;; import { io } from \u0026#39;socket.io-client\u0026#39;; const socket = io(\u0026#39;http://localhost:3000\u0026#39;); const App = () =\u0026gt; { useEffect(() =\u0026gt; { socket.on(\u0026#39;connect\u0026#39;, () =\u0026gt; { console.log(\u0026#39;Conectado al servidor de sockets\u0026#39;); }); // Manejo de eventos adicionales aquí... return () =\u0026gt; { socket.disconnect(); }; }, []); return \u0026lt;div\u0026gt;{/* Contenido de la aplicación */}\u0026lt;/div\u0026gt;; }; export default App; Comunicación Bidireccional en Tiempo Real: # Una vez configurados, podemos establecer una comunicación bidireccional entre el cliente y el servidor. Por ejemplo, para enviar y recibir mensajes:\n// En el servidor io.on(\u0026#39;connection\u0026#39;, socket =\u0026gt; { console.log(\u0026#39;Cliente conectado\u0026#39;); socket.emit(\u0026#39;mensajeDesdeServidor\u0026#39;, \u0026#39;¡Hola, cliente!\u0026#39;); socket.on(\u0026#39;mensajeDesdeCliente\u0026#39;, mensaje =\u0026gt; { console.log(\u0026#39;Mensaje del cliente:\u0026#39;, mensaje); }); }); // En el cliente socket.emit(\u0026#39;mensajeDesdeCliente\u0026#39;, \u0026#39;¡Hola, servidor!\u0026#39;); socket.on(\u0026#39;mensajeDesdeServidor\u0026#39;, mensaje =\u0026gt; { console.log(\u0026#39;Mensaje del servidor:\u0026#39;, mensaje); }); Recursos # Sigue este video tutorial:\n","date":"17 abril 2024","permalink":"/platform/react/sockets/","section":"Reacts","summary":"La comunicación en tiempo real entre clientes y servidores es esencial en el desarrollo de aplicaciones web modernas.","title":"Integración de Sockets en Aplicaciones React y Express"},{"content":"En el panorama actual del desarrollo web, las aplicaciones en tiempo real están en alta demanda. Los sockets proporcionan una solución eficiente para la comunicación bidireccional entre clientes y servidores en tiempo real. En este artículo, nos enfocaremos en cómo integrar sockets en aplicaciones Express utilizando la biblioteca Socket.io, aprovechando los beneficios de los módulos ES para una mejor estructura de código y mantenibilidad.\nFundamentos de Sockets en Express: # Los sockets permiten una comunicación bidireccional entre clientes y servidores en tiempo real. Socket.io es una biblioteca JavaScript que simplifica la implementación de sockets, proporcionando una capa de abstracción sobre los WebSockets nativos del navegador. En el contexto de Express, podemos utilizar Socket.io para integrar fácilmente la funcionalidad de sockets en nuestras aplicaciones web.\nConfiguración Básica con Módulos ES: # La configuración inicial con módulos ES es sencilla. Primero, instalamos las dependencias necesarias a través de npm:\nnpm install socket.io Luego, en el servidor Express, importamos y configuramos Socket.io:\n// server.mjs import express from \u0026#39;express\u0026#39;; import { createServer } from \u0026#39;http\u0026#39;; import { Server } from \u0026#39;socket.io\u0026#39;; const app = express(); const server = createServer(app); const io = new Server(server); // Resto del código de configuración... Comunicación Bidireccional en Tiempo Real: # Una vez configurado, podemos establecer una comunicación bidireccional entre el cliente y el servidor. Por ejemplo, para enviar y recibir mensajes entre el cliente y el servidor:\n// server.mjs io.on(\u0026#39;connection\u0026#39;, socket =\u0026gt; { console.log(\u0026#39;Cliente conectado\u0026#39;); socket.emit(\u0026#39;mensajeDesdeServidor\u0026#39;, \u0026#39;¡Hola, cliente!\u0026#39;); socket.on(\u0026#39;mensajeDesdeCliente\u0026#39;, mensaje =\u0026gt; { console.log(\u0026#39;Mensaje del cliente:\u0026#39;, mensaje); socket.emit(\u0026#39;mensajeDesdeServidor\u0026#39;, \u0026#39;Mensaje recibido por el servidor\u0026#39;); }); }); // client.mjs import { io } from \u0026#39;socket.io-client\u0026#39;; const socket = io(); socket.on(\u0026#39;mensajeDesdeServidor\u0026#39;, mensaje =\u0026gt; { console.log(\u0026#39;Mensaje del servidor:\u0026#39;, mensaje); socket.emit(\u0026#39;mensajeDesdeCliente\u0026#39;, \u0026#39;¡Hola, servidor!\u0026#39;); }); Recursos # Sigue el siguiente tutorial de inicio a fin:\n","date":"17 abril 2024","permalink":"/platform/express/sockets/","section":"Expresses","summary":"En el panorama actual del desarrollo web, las aplicaciones en tiempo real están en alta demanda.","title":"Sockets en Express"},{"content":"MongoDB Compass es una herramienta gráfica oficial proporcionada por MongoDB Inc. que permite a los usuarios interactuar con bases de datos MongoDB de una manera intuitiva y eficiente. Desde su lanzamiento inicial, ha ganado popularidad entre los desarrolladores y administradores de bases de datos debido a su facilidad de uso y su amplio conjunto de características. En este artículo, exploraremos las diversas capacidades de MongoDB Compass y cómo puede ayudar a mejorar la productividad y eficiencia en el desarrollo y administración de bases de datos NoSQL.\nCaracterísticas Principales de MongoDB Compass # Interfaz Gráfica Intuitiva: MongoDB Compass proporciona una interfaz gráfica fácil de usar que permite a los usuarios explorar y manipular datos de manera visual. Con herramientas de navegación intuitivas y controles de arrastrar y soltar, facilita la tarea de interactuar con bases de datos MongoDB sin necesidad de conocimientos avanzados de consulta.\nVisualización de Datos: Una de las características destacadas de MongoDB Compass es su capacidad para visualizar datos de manera clara y comprensible. Los usuarios pueden crear visualizaciones de datos personalizadas, como gráficos de barras, gráficos circulares y mapas de calor, que facilitan la comprensión de la estructura y distribución de los datos almacenados en la base de datos.\nExploración de Esquemas: MongoDB Compass permite a los usuarios explorar la estructura de sus bases de datos y colecciones mediante la visualización de esquemas dinámicos. Esta característica es especialmente útil para comprender la relación entre diferentes documentos y campos, lo que facilita el diseño y la optimización de esquemas de base de datos.\nCreación de Consultas Avanzadas: Con MongoDB Compass, los usuarios pueden crear consultas avanzadas utilizando un editor de consultas integrado. La herramienta ofrece resaltado de sintaxis y sugerencias inteligentes, lo que facilita la creación de consultas complejas sin necesidad de recordar la sintaxis exacta de MongoDB.\nAdministración de Índices: MongoDB Compass ofrece herramientas para administrar índices, lo que permite a los usuarios crear, modificar y eliminar índices de manera sencilla. Los índices son fundamentales para mejorar el rendimiento de las consultas en bases de datos MongoDB, y MongoDB Compass simplifica su gestión.\nMigración de Datos: Otra característica útil de MongoDB Compass es su capacidad para facilitar la migración de datos entre diferentes bases de datos o colecciones. Los usuarios pueden utilizar la herramienta para importar y exportar datos en una variedad de formatos, lo que simplifica el proceso de transferencia de datos entre entornos de desarrollo, pruebas y producción.\nRecursos # Mira este video desde 01:14:15 hasta 01:21:44 minutos (ya está marcado).\n","date":"16 abril 2024","permalink":"/platform/mongodb/compass/","section":"Mongodbs","summary":"MongoDB Compass es una herramienta gráfica oficial proporcionada por MongoDB Inc.","title":"MongoDB Compass"},{"content":"","date":"16 abril 2024","permalink":"/platform/mongodb/","section":"Mongodbs","summary":"","title":"Mongodbs"},{"content":"MongoDB es una base de datos NoSQL ampliamente utilizada en aplicaciones modernas debido a su flexibilidad y escalabilidad. Entre las numerosas operaciones que ofrece MongoDB para manipular datos, deleteOne y deleteMany son funciones clave que permiten a los desarrolladores eliminar documentos de una colección. Este artículo universitario se sumerge en ambas funciones, explorando su sintaxis, su uso en diferentes escenarios y su impacto en el rendimiento de la base de datos.\nIntroducción # En el panorama actual de desarrollo de aplicaciones, la gestión eficiente de datos es fundamental. MongoDB, como una de las principales bases de datos NoSQL, ofrece una amplia gama de herramientas para manipular datos de manera efectiva. Entre estas herramientas se encuentran las funciones deleteOne y deleteMany, que permiten eliminar uno o varios documentos de una colección, respectivamente. Este artículo explora en detalle ambas funciones, proporcionando información sobre su sintaxis, aplicación práctica y consideraciones importantes para su implementación.\nSintaxis de deleteOne en MongoDB # La función deleteOne en MongoDB se utiliza para eliminar un solo documento que cumple con ciertos criterios de selección. Su sintaxis básica es la siguiente:\ndb.collection.deleteOne( \u0026lt;filter\u0026gt;, { writeConcern: \u0026lt;document\u0026gt;, collation: \u0026lt;document\u0026gt;, hint: \u0026lt;document|string\u0026gt;, comment: \u0026lt;string\u0026gt; } ) Donde:\n\u0026lt;filter\u0026gt; especifica los criterios de selección para identificar el documento a eliminar. writeConcern (opcional) especifica el nivel de confirmación de escritura para la operación. collation (opcional) especifica las reglas de collation a aplicar. hint (opcional) proporciona una sugerencia al optimizador de consultas sobre el índice a utilizar. comment (opcional) permite añadir un comentario a la operación. Sintaxis de deleteMany en MongoDB # La función deleteMany en MongoDB se utiliza para eliminar múltiples documentos que cumplen con ciertos criterios de selección. Su sintaxis básica es similar a deleteOne:\ndb.collection.deleteMany( \u0026lt;filter\u0026gt;, { writeConcern: \u0026lt;document\u0026gt;, collation: \u0026lt;document\u0026gt;, hint: \u0026lt;document|string\u0026gt;, comment: \u0026lt;string\u0026gt; } ) Donde los parámetros son similares a deleteOne, pero deleteMany elimina todos los documentos que cumplen con los criterios de selección especificados.\nUso Práctico de deleteOne y deleteMany # Ambas funciones son útiles en diferentes escenarios. Por ejemplo, deleteOne es útil cuando se necesita eliminar un único documento de una colección basado en ciertos criterios, mientras que deleteMany es adecuado para eliminar múltiples documentos que cumplen con los mismos criterios. Por ejemplo:\n// Eliminar un usuario específico db.users.deleteOne({ _id: ObjectId(\u0026#39;user_id\u0026#39;) }); // Eliminar todos los usuarios con un determinado estado db.users.deleteMany({ status: \u0026#39;inactive\u0026#39; }); Consideraciones Importantes # Al utilizar deleteOne y deleteMany en MongoDB, es importante considerar el impacto en el rendimiento de la base de datos, especialmente cuando se trabaja con grandes conjuntos de datos. Eliminar documentos puede afectar la distribución de los datos y el rendimiento de las consultas futuras. Además, es crucial asegurarse de que los criterios de selección sean lo suficientemente específicos para evitar la eliminación accidental de datos importantes.\nConclusión # Las funciones deleteOne y deleteMany en MongoDB ofrecen formas eficaces de eliminar documentos de una colección, proporcionando flexibilidad y control sobre la gestión de datos. Sin embargo, su uso debe ser cuidadosamente considerado para garantizar un rendimiento óptimo y la integridad de los datos. Al comprender la sintaxis y las mejores prácticas para su aplicación, los desarrolladores pueden aprovechar al máximo estas funciones en sus aplicaciones MongoDB.\nRecursos # Lee la siguiente documentación oficial: Eliminar documentos\nMira este video completo ","date":"15 abril 2024","permalink":"/platform/mongodb/documentos/delete/","section":"Mongodbs","summary":"MongoDB es una base de datos NoSQL ampliamente utilizada en aplicaciones modernas debido a su flexibilidad y escalabilidad.","title":"deleteOne y deleteMany en MongoDB"},{"content":"MongoDB, una base de datos NoSQL ampliamente utilizada, ofrece potentes capacidades para actualizar documentos de manera eficiente. En este artículo, exploraremos diversas estrategias y prácticas para actualizar documentos en MongoDB, desde actualizaciones simples hasta operaciones más complejas que involucran múltiples documentos y campos.\nOperadores de Actualización y Métodos # MongoDB proporciona una variedad de operadores de actualización que pueden ser utilizados dentro de las operaciones de actualización, así como métodos específicos para diferentes casos de actualización. Algunos de los operadores más comunes son:\n$set: Establece el valor de un campo en un documento. $unset: Elimina un campo de un documento. $inc: Incrementa el valor de un campo numérico en un valor específico. $push: Agrega un valor a un campo de tipo array. $addToSet: Agrega un valor a un campo de tipo array si aún no está presente. $pull: Elimina todos los elementos de un campo de tipo array que coincidan con un valor o una condición específica. Y algunos métodos importantes para actualizar documentos son:\nupdateOne(): Actualiza un solo documento que cumple con los criterios de búsqueda especificados. updateMany(): Actualiza varios documentos que cumplen con los criterios de búsqueda especificados. replaceOne(): Reemplaza un solo documento que cumple con los criterios de búsqueda especificados por completo. Ejemplos de Actualización en Código # Actualizar un Documento Único con updateOne(): // Actualizar el nombre de un usuario con el ID especificado db.usuarios.updateOne( { _id: ObjectId(\u0026#39;id_del_usuario\u0026#39;) }, { $set: { nombre: \u0026#39;Nuevo Nombre\u0026#39; } } ); Actualizar Múltiples Documentos con updateMany(): // Incrementar la puntuación de todos los usuarios en 10 db.usuarios.updateMany({}, { $inc: { puntuacion: 10 } }); Reemplazar un Documento con replaceOne(): // Reemplazar un documento con el ID especificado por completo db.coleccion.replaceOne( { _id: ObjectId(\u0026#39;id_del_documento\u0026#39;) }, { nuevo_documento } ); Ejemplos de Operadores de Actualización # $set: Establece el valor de un campo en un documento. // Establecer la edad de un usuario con el ID especificado en 25 db.usuarios.updateOne( { _id: ObjectId(\u0026#39;id_del_usuario\u0026#39;) }, { $set: { edad: 25 } } ); $unset: Elimina un campo de un documento. // Eliminar el campo \u0026#34;telefono\u0026#34; de un usuario con el ID especificado db.usuarios.updateOne( { _id: ObjectId(\u0026#39;id_del_usuario\u0026#39;) }, { $unset: { telefono: \u0026#39;\u0026#39; } } ); $inc: Incrementa el valor de un campo numérico en un valor específico. // Incrementar la cantidad de productos en stock en 5 para un producto específico db.productos.updateOne( { _id: ObjectId(\u0026#39;id_del_producto\u0026#39;) }, { $inc: { stock: 5 } } ); $push: Agrega un valor a un campo de tipo array. // Agregar un nuevo comentario al array de comentarios de un post específico db.posts.updateOne( { _id: ObjectId(\u0026#39;id_del_post\u0026#39;) }, { $push: { comentarios: { texto: \u0026#39;¡Gran publicación!\u0026#39;, usuario: \u0026#39;usuario123\u0026#39; }, }, } ); $addToSet: Agrega un valor a un campo de tipo array si aún no está presente. // Agregar un nuevo tag a un artículo específico solo si el tag no existe aún db.articulos.updateOne( { _id: ObjectId(\u0026#39;id_del_articulo\u0026#39;) }, { $addToSet: { tags: \u0026#39;nuevo_tag\u0026#39; } } ); $pull: Elimina todos los elementos de un campo de tipo array que coincidan con un valor o una condición específica. // Eliminar todos los comentarios de un post específico hechos por un usuario en particular db.posts.updateOne( { _id: ObjectId(\u0026#39;id_del_post\u0026#39;) }, { $pull: { comentarios: { usuario: \u0026#39;usuario123\u0026#39; } } } ); Conclusiones # La actualización de documentos en MongoDB es una tarea fundamental en el desarrollo de aplicaciones que utilizan esta base de datos NoSQL. Con métodos como updateOne(), updateMany() y replaceOne() junto con una variedad de operadores de actualización, los desarrolladores pueden realizar actualizaciones eficientes y precisas en sus bases de datos MongoDB. Al comprender las mejores prácticas y las capacidades avanzadas de actualización que ofrece MongoDB, los desarrolladores pueden optimizar el rendimiento y la seguridad de sus aplicaciones.\nRecursos # Mira este video desde 00:55:29 hasta 01:11:57 minutos (ya está marcado).\nMira estos videos de inicio a fin: Lee la siguiente documentación oficial: Actualizar documentos\n","date":"12 abril 2024","permalink":"/platform/mongodb/documentos/update/","section":"Mongodbs","summary":"MongoDB, una base de datos NoSQL ampliamente utilizada, ofrece potentes capacidades para actualizar documentos de manera eficiente.","title":"Update en MongoDB"},{"content":"MongoDB, un sistema de base de datos NoSQL, ofrece diversas formas de recuperar registros de manera eficiente. En este artículo, exploraremos los diferentes operadores de consulta que MongoDB proporciona, acompañados de ejemplos para comprender mejor su uso en la práctica.\nOperadores de Consulta y Ejemplos # $eq: Para igualdad # Este operador se utiliza para buscar documentos donde el valor de un campo sea igual a un valor específico.\nEjemplo:\n// Buscar todos los documentos donde el campo \u0026#34;edad\u0026#34; sea igual a 30 db.collection.find({ edad: { $eq: 30 } }); $ne: Para no igualdad # Se utiliza para buscar documentos donde el valor de un campo no sea igual a un valor específico.\nEjemplo:\n// Buscar todos los documentos donde el campo \u0026#34;genero\u0026#34; no sea igual a \u0026#34;masculino\u0026#34; db.collection.find({ genero: { $ne: \u0026#39;masculino\u0026#39; } }); $gt, $gte: Para mayor que y mayor o igual que # Estos operadores se utilizan para buscar documentos donde el valor de un campo sea mayor que un valor específico ($gt) o mayor o igual que un valor específico ($gte).\nEjemplos:\n// Buscar todos los documentos donde el campo \u0026#34;puntuacion\u0026#34; sea mayor que 80 db.collection.find({ puntuacion: { $gt: 80 } }); // Buscar todos los documentos donde el campo \u0026#34;edad\u0026#34; sea mayor o igual que 25 db.collection.find({ edad: { $gte: 25 } }); $lt, $lte: Para menor que y menor o igual que # Estos operadores se utilizan para buscar documentos donde el valor de un campo sea menor que un valor específico ($lt) o menor o igual que un valor específico ($lte).\nEjemplos:\n// Buscar todos los documentos donde el campo \u0026#34;precio\u0026#34; sea menor que 50 db.collection.find({ precio: { $lt: 50 } }); // Buscar todos los documentos donde el campo \u0026#34;cantidad\u0026#34; sea menor o igual que 10 db.collection.find({ cantidad: { $lte: 10 } }); $in: Para buscar valores dentro de un conjunto # Se utiliza para buscar documentos donde el valor de un campo esté contenido dentro de un conjunto de valores.\nEjemplo:\n// Buscar todos los documentos donde el campo \u0026#34;categoria\u0026#34; sea uno de los valores: \u0026#34;electrónica\u0026#34;, \u0026#34;ropa\u0026#34;, \u0026#34;hogar\u0026#34; db.collection.find({ categoria: { $in: [\u0026#39;electrónica\u0026#39;, \u0026#39;ropa\u0026#39;, \u0026#39;hogar\u0026#39;] } }); $regex: Para realizar búsquedas basadas en expresiones regulares # Este operador se utiliza para buscar documentos donde un campo coincida con una expresión regular.\nEjemplo:\n// Buscar todos los documentos donde el campo \u0026#34;nombre\u0026#34; empiece con \u0026#34;J\u0026#34; db.collection.find({ nombre: { $regex: /^J/ } }); Conclusión # Los operadores de consulta en MongoDB proporcionan una amplia gama de herramientas para recuperar registros de manera eficiente y precisa. Al comprender y utilizar estos operadores en combinación con el lenguaje de consulta estructurado de MongoDB, los desarrolladores pueden realizar consultas avanzadas y satisfacer las necesidades específicas de sus aplicaciones.\nRecursos # Lee la documentación oficial de MongoDB: Click aquí\nNota: La documentación se encuentra en inglés, por lo que tendrás que traducirlo al español con tu navegador y colocar el \u0026ldquo;Select your language\u0026rdquo; para ver el código como MongoDB Shell en lugar de Compass (esquina superior derecha). Mira este video desde 00:39:30 hasta 01:00:56 minutos (ya está marcado).\nMira estos videos de principio a fin. ","date":"12 abril 2024","permalink":"/platform/mongodb/documentos/find/","section":"Mongodbs","summary":"MongoDB, un sistema de base de datos NoSQL, ofrece diversas formas de recuperar registros de manera eficiente.","title":"Find en MongoDB"},{"content":"Mongoose, una librería de modelado de datos para MongoDB en Node.js, ha emergido como una herramienta vital en el desarrollo de aplicaciones web modernas. Este artículo universitario explora la relevancia y la importancia de Mongoose en el ecosistema de npm, destacando sus características principales, su integración con MongoDB, su flexibilidad y su papel en la creación de aplicaciones escalables y robustas. A través de ejemplos prácticos y análisis en profundidad, se demuestra cómo Mongoose simplifica la interacción con MongoDB y facilita el desarrollo ágil de aplicaciones, convirtiéndolo en una herramienta indispensable para los desarrolladores de Node.js.\nIntroducción # El ecosistema de Node.js ha experimentado un crecimiento vertiginoso en los últimos años, impulsado por la necesidad de desarrollar aplicaciones web rápidas, escalables y eficientes. En este contexto, MongoDB se ha consolidado como una base de datos NoSQL popular debido a su flexibilidad y escalabilidad. Sin embargo, trabajar directamente con MongoDB en Node.js puede ser complejo y propenso a errores, lo que ha generado la necesidad de herramientas que simplifiquen este proceso. Es aquí donde entra en juego Mongoose, una librería que proporciona un modelo de datos elegante y una interfaz sencilla para interactuar con MongoDB, convirtiéndose en un componente esencial del ecosistema de npm para los desarrolladores de Node.js.\nCaracterísticas Principales de Mongoose # Mongoose ofrece una amplia gama de características que lo hacen invaluable para el desarrollo de aplicaciones Node.js. Estas incluyen:\nModelado de Datos: Mongoose permite definir modelos de datos mediante esquemas, lo que proporciona una estructura coherente y fácilmente comprensible para los documentos de MongoDB. Los esquemas permiten especificar tipos de datos, validaciones, opciones de configuración y relaciones entre documentos.\nValidación Integrada: La validación integrada en Mongoose simplifica la tarea de garantizar la integridad de los datos, permitiendo especificar reglas de validación para cada campo en el esquema. Esto ayuda a prevenir errores y asegura la consistencia de los datos almacenados en MongoDB.\nMiddleware: Mongoose ofrece un sistema de middleware que permite ejecutar funciones antes o después de ciertas operaciones, como la validación, la búsqueda o la actualización de documentos. Esto proporciona un alto grado de flexibilidad y extensibilidad en el manejo de la lógica de negocio.\nConsultas Fluentes: La API de consulta de Mongoose ofrece una sintaxis fluida y expresiva para realizar consultas a la base de datos, lo que facilita la construcción de consultas complejas y la recuperación eficiente de datos.\nPopulate y Referencias: Mongoose soporta referencias entre documentos y la población automática de estos referenciados, lo que facilita la implementación de relaciones entre colecciones y la navegación entre documentos relacionados.\nAplicaciones en el Desarrollo Ágil # La simplicidad y la flexibilidad de Mongoose lo convierten en una herramienta ideal para el desarrollo ágil de aplicaciones. Permite a los desarrolladores iterar rápidamente en el diseño de datos, adaptándose fácilmente a los cambios en los requisitos del proyecto. Además, su enfoque en la validación y la consistencia de datos contribuye a la robustez y fiabilidad de las aplicaciones desarrolladas con Node.js y MongoDB.\nIntegración con MongoDB # Mongoose se integra estrechamente con MongoDB, aprovechando las características y funcionalidades de esta base de datos NoSQL. Utiliza el controlador oficial de MongoDB para Node.js (mongodb) bajo el capó, lo que garantiza un rendimiento óptimo y una compatibilidad total con las últimas versiones de MongoDB. Además, Mongoose facilita la gestión de conexiones, la configuración de índices y otras tareas administrativas, simplificando así el proceso de desarrollo y despliegue de aplicaciones.\nPara utilizar Mongoose en una aplicación Node.js, primero necesitas asegurarte de tener Node.js y npm instalados en tu sistema. Una vez que hayas configurado tu entorno de Node.js, puedes instalar Mongoose y otras dependencias de la siguiente manera:\nInstalar Mongoose: Puedes instalar Mongoose utilizando npm. Ejecuta el siguiente comando en tu terminal:\nnpm install mongoose Esto instalará Mongoose y todas sus dependencias en tu proyecto.\nConfigurar MongoDB: Asegúrate de tener un servidor MongoDB en ejecución en tu máquina local o en algún otro lugar accesible. Puedes instalar MongoDB localmente o utilizar un servicio en la nube como MongoDB Atlas.\nConexión a la base de datos: En tu aplicación Node.js, necesitarás conectar Mongoose a tu base de datos MongoDB. Puedes hacerlo utilizando la URL de conexión de MongoDB en tu código. Por ejemplo:\n// db.js import mongoose from \u0026#39;mongoose\u0026#39;; mongoose .connect(\u0026#39;mongodb://localhost:27017/mi_base_de_datos\u0026#39;) .then(() =\u0026gt; { console.log(\u0026#39;Conexión a la base de datos exitosa\u0026#39;); }) .catch(error =\u0026gt; { console.error(\u0026#39;Error al conectar a la base de datos:\u0026#39;, error); }); Asegúrate de reemplazar 'mongodb://localhost:27017/mi_base_de_datos' con la URL de conexión correcta de tu base de datos MongoDB.\nUtilizar Mongoose en tu aplicación: Con Mongoose instalado y conectado a tu base de datos MongoDB, puedes comenzar a definir modelos, realizar consultas y otras operaciones de base de datos en tu aplicación Node.js.\nPor ejemplo, podrías crear un archivo models/user.js para definir un modelo de usuario utilizando Mongoose, como se mostró en los ejemplos anteriores.\nEjemplos de uso en código # 1. Definir un esquema y un modelo:\n// models/user.js import mongoose from \u0026#39;mongoose\u0026#39;; // Definir el esquema del documento const { Schema, model } = mongoose; const userSchema = new Schema({ username: { type: String, required: true }, email: { type: String, required: true }, age: { type: Number, min: 18 }, }); // Crear el modelo basado en el esquema const User = model(\u0026#39;User\u0026#39;, userSchema); export default User; 2. Crear un nuevo documento:\n// create.js import User from \u0026#39;./models/user.js\u0026#39;; const newUser = new User({ username: \u0026#39;usuario_prueba\u0026#39;, email: \u0026#39;usuario@example.com\u0026#39;, age: 25, }); newUser .save() .then(() =\u0026gt; { console.log(\u0026#39;Usuario creado exitosamente\u0026#39;); }) .catch(error =\u0026gt; { console.error(\u0026#39;Error al crear usuario:\u0026#39;, error); }); 3. Consultar documentos:\n// find.js import User from \u0026#39;./models/user.js\u0026#39;; User.find({ age: { $gte: 18 } }) .then(users =\u0026gt; { console.log(\u0026#39;Usuarios mayores de 18 años:\u0026#39;, users); }) .catch(error =\u0026gt; { console.error(\u0026#39;Error al buscar usuarios:\u0026#39;, error); }); 4. Actualizar un documento:\n// update.js import User from \u0026#39;./models/user.js\u0026#39;; User.updateOne({ username: \u0026#39;usuario_prueba\u0026#39; }, { age: 30 }) .then(() =\u0026gt; { console.log(\u0026#39;Usuario actualizado exitosamente\u0026#39;); }) .catch(error =\u0026gt; { console.error(\u0026#39;Error al actualizar usuario:\u0026#39;, error); }); 5. Eliminar un documento:\n// delete.js import User from \u0026#39;./models/user.js\u0026#39;; User.deleteOne({ username: \u0026#39;usuario_prueba\u0026#39; }) .then(() =\u0026gt; { console.log(\u0026#39;Usuario eliminado exitosamente\u0026#39;); }) .catch(error =\u0026gt; { console.error(\u0026#39;Error al eliminar usuario:\u0026#39;, error); }); Estos ejemplos utilizan el formato de módulos de ECMAScript (ES Modules) para importar y exportar los distintos componentes de la aplicación.\nConclusiones # En conclusión, Mongoose se ha convertido en una piedra angular del ecosistema de npm para el desarrollo de aplicaciones Node.js que utilizan MongoDB como su base de datos. Su capacidad para simplificar el modelado de datos, facilitar la integración con MongoDB y mejorar la productividad de los desarrolladores lo convierte en una herramienta invaluable en la caja de herramientas de cualquier desarrollador de Node.js. Al explorar las profundidades de Mongoose, los desarrolladores pueden descubrir nuevas formas de optimizar el desarrollo de aplicaciones web modernas y construir soluciones escalables y robustas.\nRecursos # Documentación oficial de Mongoose: https://mongoosejs.com/docs/ ","date":"11 abril 2024","permalink":"/platform/mongodb/mongoose/","section":"Mongodbs","summary":"Mongoose, una librería de modelado de datos para MongoDB en Node.","title":"npm: mongoose"},{"content":"Este artículo describe el método insertMany en MongoDB, una base de datos NoSQL orientada a documentos. Se analiza en profundidad su funcionalidad, sintaxis, opciones y casos de uso, proporcionando una comprensión completa de su utilidad para la gestión eficiente de datos.\nIntroducción # insertMany es un método fundamental en MongoDB que permite insertar múltiples documentos en una colección de forma simultánea. Su eficiencia lo convierte en una herramienta indispensable para la carga masiva de datos, optimizando el tiempo y los recursos del sistema.\nSintaxis y Funcionalidad # La sintaxis básica de insertMany es la siguiente:\ndb.collection.insertMany([document1, document2, ...]) Donde:\ndb es la base de datos objetivo. collection es la colección donde se insertarán los documentos. [document1, document2, ...] es un array que contiene los documentos que se desean insertar. insertMany devuelve un objeto que describe el resultado de la operación, incluyendo el número de documentos insertados y cualquier error que haya ocurrido.\nCasos de Uso # insertMany se utiliza en una amplia variedad de escenarios, incluyendo:\nCarga masiva de datos en una colección. Importación de datos desde archivos externos. Creación de conjuntos de datos de prueba. Rendimiento # insertMany es una operación altamente eficiente que puede insertar miles de documentos por segundo. El rendimiento puede verse afectado por el tamaño de los documentos, la complejidad del esquema y la carga del servidor.\nConsideraciones # Es importante tener en cuenta que insertMany puede generar errores si alguno de los documentos no cumple con las reglas de validación o si hay un problema con la conexión a la base de datos. Se recomienda revisar la documentación oficial para comprender las posibles excepciones y sus soluciones.\nConclusión # insertMany es una herramienta poderosa para la carga eficiente de datos en MongoDB. Su flexibilidad y rendimiento la convierten en una opción ideal para una amplia variedad de casos de uso.\nRecursos # Lee la siguiente documentación oficial: Insertar varios documentos\nMira este video de principio a fin. Nota: En estos video se está utilizando una interfaz gráfica para interactuar con la base de datos. No te preocupes, no hace falta que lo instales ni nada por el estilo. Procura prestar especial atención al código que muestran. Mira este video desde 06:40 hasta 14:45 minutos (ya está marcado).\n","date":"10 abril 2024","permalink":"/platform/mongodb/documentos/insertmany/","section":"Mongodbs","summary":"Este artículo describe el método insertMany en MongoDB, una base de datos NoSQL orientada a documentos.","title":"InsertMany en MongoDB"},{"content":"Este artículo presenta un análisis detallado del método insertOne en MongoDB, una base de datos NoSQL orientada a documentos. Abordaremos su funcionalidad, sintaxis, opciones y casos de uso, brindando una comprensión completa de su utilidad para la gestión de datos.\nIntroducción # insertOne es un método fundamental en MongoDB que permite insertar un único documento en una colección. Su simplicidad y eficacia lo convierten en una herramienta indispensable para el desarrollo de aplicaciones.\nSintaxis y Funcionalidad # La sintaxis básica de insertOne es la siguiente:\ndb.collection.insertOne(document) Donde:\ndb es la base de datos objetivo. collection es la colección donde se insertará el documento. document es el documento que se desea insertar. insertOne devuelve un objeto que describe el resultado de la operación, incluyendo el _id del documento insertado, si se generó uno automáticamente.\nCasos de Uso # insertOne se utiliza en una amplia variedad de escenarios, incluyendo:\nInsertar nuevos datos en una colección. Reemplazar un documento existente por uno nuevo. Insertar un documento con un _id específico. Validación y Errores # MongoDB valida los documentos antes de insertarlos. Si la validación falla, se produce un error. Los tipos de errores más comunes son:\nErrores de sintaxis: El documento no tiene un formato JSON válido. Errores de tipo de dato: Los valores de los campos no coinciden con el tipo de dato especificado. Errores de validación de esquema: El documento no cumple con las reglas del esquema de la colección. Rendimiento # insertOne es una operación eficiente que generalmente se ejecuta en milisegundos. El rendimiento puede verse afectado por el tamaño del documento, la complejidad del esquema y la carga del servidor.\nConclusión # insertOne es una herramienta poderosa para insertar documentos en MongoDB. Su simplicidad, flexibilidad y opciones la convierten en una opción ideal para una amplia variedad de casos de uso.\nRecursos # Lee la siguiente documentación oficial: Insertar un documento\nMira este video desde 07:37 hasta 12:56 minutos. (Ya está marcado)\nNota: En este video se está utilizando una interfaz gráfica para interactuar con la base de datos. No te preocupes, no hace falta que lo instales ni nada por el estilo. Procura prestar especial atención al código que muestran. ","date":"10 abril 2024","permalink":"/platform/mongodb/documentos/insertone/","section":"Mongodbs","summary":"Este artículo presenta un análisis detallado del método insertOne en MongoDB, una base de datos NoSQL orientada a documentos.","title":"InsertOne en MongoDB"},{"content":"Este artículo presenta una introducción formal a los documentos en MongoDB, una base de datos NoSQL de naturaleza documental. Se analizará la estructura de los documentos, las ventajas de un modelo de datos flexible y las metodologías para trabajar con documentos en el contexto de MongoDB.\nIntroducción # Las bases de datos NoSQL han experimentado un notable crecimiento en popularidad durante los últimos años, principalmente debido a su flexibilidad y escalabilidad. Entre las opciones disponibles, MongoDB se destaca como una de las bases de datos NoSQL más populares, caracterizada por un modelo de datos orientado a documentos.\nLos Documentos en MongoDB # Los documentos en MongoDB se definen como estructuras de datos análogas a JSON que albergan información. Cada documento constituye un registro independiente y posee la capacidad de presentar una estructura individual. Esta particularidad implica la ausencia de la necesidad de predefinir un esquema rígido, lo que se traduce en una notable flexibilidad.\nEl formato de almacenamiento utilizado para los documentos es BSON (Binary JSON), una versión binaria de JSON optimizada para la gestión eficiente de datos, tanto en su almacenamiento como en su recuperación.\nVentajas de los Documentos # Flexibilidad: La capacidad de los documentos de poseer diferentes estructuras permite el almacenamiento de datos de forma natural, sin la necesidad de adaptarlos a un esquema predefinido. Escalabilidad: Las bases de datos orientadas a documentos, como MongoDB, exhiben una alta escalabilidad, convirtiéndolas en una opción ideal para conjuntos de datos de gran magnitud. Facilidad de Uso: La familiaridad con la estructura JSON facilita tanto la lectura como la escritura de documentos, simplificando el desarrollo de aplicaciones. Operaciones con Documentos # MongoDB ofrece un conjunto de comandos específicos para la gestión de documentos. Estos comandos permiten realizar las siguientes operaciones:\nInserción: Incorporación de nuevos documentos a la base de datos. Actualización: Modificación de la información contenida en documentos existentes. Eliminación: Remoción de documentos de la base de datos. Búsqueda: Localización de documentos específicos mediante la aplicación de criterios de búsqueda. Modificación de la Estructura: Adición o eliminación de campos en la estructura de los documentos. Conclusión # Los documentos en MongoDB constituyen una alternativa flexible y escalable para el almacenamiento de datos. Su estructura flexible los convierte en una herramienta ideal para una amplia variedad de aplicaciones. Si se busca una base de datos NoSQL que combine facilidad de uso y escalabilidad, MongoDB se posiciona como una excelente opción.\nRecursos # Mira este video desde 00:00 hasta 03:37 minutos. (Ya está marcado)\nMira este video desde 35:17 hasta 52:40 minutos. (Ya está marcado)\nLee el siguiente artículo (tendrás que traducirlo a español en tu navegador): MongoDB: Documentos\n","date":"10 abril 2024","permalink":"/platform/mongodb/documentos/intro/","section":"Mongodbs","summary":"Este artículo presenta una introducción formal a los documentos en MongoDB, una base de datos NoSQL de naturaleza documental.","title":"Documentos en MongoDB"},{"content":"En el ámbito de la gestión de datos no relacionales, MongoDB emerge como una herramienta poderosa y flexible. Una de las características fundamentales de MongoDB es su capacidad para almacenar datos en colecciones, proporcionando un mecanismo eficiente para organizar y acceder a la información. Este artículo explora en detalle el concepto de colecciones en MongoDB, su importancia en el diseño de bases de datos no relacionales, así como las mejores prácticas para su utilización y gestión.\nIntroducción # MongoDB es una base de datos NoSQL (Not Only SQL) de código abierto, diseñada para manejar grandes volúmenes de datos de manera eficiente y escalable. En MongoDB, los datos se organizan en colecciones, que son conjuntos de documentos almacenados en formato BSON (Binary JSON). A diferencia de las tablas en bases de datos relacionales, las colecciones en MongoDB no imponen un esquema fijo, lo que permite una mayor flexibilidad en el manejo de datos semi-estructurados o no estructurados.\nDefinición y Características de las Colecciones en MongoDB # Una colección en MongoDB es un conjunto de documentos que se almacenan de forma independiente en la base de datos. Cada documento es una entidad de datos compuesta por pares clave-valor, donde los valores pueden ser de diversos tipos, incluyendo strings, números, arrays, e incluso documentos anidados. Las colecciones pueden contener documentos heterogéneos, es decir, cada documento puede tener un esquema diferente, lo que facilita la adaptación a cambios en los requisitos de la aplicación.\nImportancia de las Colecciones en el Diseño de Bases de Datos No Relacionales # Las colecciones desempeñan un papel fundamental en el diseño de bases de datos no relacionales en MongoDB. Al organizar los datos en colecciones, se facilita la gestión y el acceso a la información de manera eficiente. Además, la flexibilidad que ofrecen las colecciones permite modelar datos de forma más natural, sin necesidad de definir un esquema rígido de antemano. Esto resulta especialmente útil en entornos donde los requisitos de la aplicación pueden evolucionar con el tiempo.\nOperaciones Básicas en Colecciones # MongoDB proporciona un conjunto de operaciones para la gestión de colecciones, que incluyen la inserción, la consulta, la actualización y la eliminación de documentos. Estas operaciones se pueden realizar de forma eficiente utilizando el lenguaje de consulta de MongoDB (Mongo Query Language), que proporciona una sintaxis intuitiva para interactuar con la base de datos. Además, MongoDB ofrece índices para mejorar el rendimiento de las consultas, permitiendo la rápida recuperación de datos basada en criterios específicos.\nMejores Prácticas para la Utilización y Gestión de Colecciones # Para maximizar el rendimiento y la escalabilidad de una base de datos MongoDB, es importante seguir algunas mejores prácticas en la utilización y gestión de colecciones. Esto incluye la indexación adecuada de campos relevantes para consultas frecuentes, el monitoreo del tamaño y la distribución de las colecciones para evitar problemas de rendimiento, y la implementación de estrategias de respaldo y recuperación de datos para garantizar la integridad y disponibilidad de la información.\nConclusiones # En resumen, las colecciones en MongoDB son una pieza fundamental en el diseño y la gestión de bases de datos no relacionales. Proporcionan un mecanismo flexible y eficiente para organizar y acceder a los datos, permitiendo adaptarse fácilmente a los cambios en los requisitos de la aplicación. Al seguir las mejores prácticas recomendadas, los desarrolladores pueden aprovechar al máximo las capacidades de MongoDB para construir sistemas robustos y escalables en entornos de datos no relacionales.\nRecursos # Mira este video desde 16:37 hasta 35:00 minutos. (Ya está marcado)\n","date":"10 abril 2024","permalink":"/platform/mongodb/colecciones/","section":"Mongodbs","summary":"En el ámbito de la gestión de datos no relacionales, MongoDB emerge como una herramienta poderosa y flexible.","title":"Colecciones en MongoDB"},{"content":"MongoDB Shell, también conocido como \u0026ldquo;mongo\u0026rdquo;, es una interfaz de línea de comandos (CLI) fundamental para interactuar con las bases de datos MongoDB. En este artículo, exploramos la importancia y funcionalidades de MongoDB Shell en el contexto de la gestión de bases de datos NoSQL. Desde su sintaxis básica hasta operaciones avanzadas de consulta y administración, MongoDB Shell proporciona a los usuarios una forma poderosa y flexible de interactuar con sus datos en entornos MongoDB. Este artículo examina detalladamente su uso, características y mejores prácticas para aprovechar al máximo esta herramienta esencial.\nIntroducción # En el panorama de las bases de datos NoSQL, MongoDB se ha establecido como una opción popular debido a su flexibilidad, escalabilidad y rendimiento. Una parte fundamental de trabajar con MongoDB es la capacidad de interactuar con las bases de datos de manera eficiente y efectiva. Aquí es donde entra en juego MongoDB Shell, proporcionando a los usuarios una interfaz directa y poderosa para realizar una variedad de tareas relacionadas con la gestión de datos. En este artículo, exploramos MongoDB Shell en profundidad, desde sus conceptos básicos hasta su aplicación en escenarios prácticos.\nConceptos Básicos de MongoDB Shell # MongoDB Shell es una interfaz de línea de comandos que permite a los usuarios interactuar con una instancia de MongoDB. Se ejecuta mediante el comando \u0026ldquo;mongo\u0026rdquo; en la terminal o símbolo del sistema, lo que abre una sesión interactiva donde los usuarios pueden escribir y ejecutar comandos de MongoDB. MongoDB Shell utiliza JavaScript como su lenguaje de scripting, lo que facilita su aprendizaje y uso para aquellos familiarizados con este lenguaje de programación.\nFuncionalidades Principales # MongoDB Shell proporciona una amplia gama de funcionalidades para la gestión de bases de datos MongoDB, incluyendo:\nConsulta de Datos: Permite realizar consultas para recuperar datos de las colecciones de la base de datos. Inserción y Actualización de Documentos: Facilita la inserción y actualización de documentos en las colecciones. Índices y Optimización: Permite crear y administrar índices para mejorar el rendimiento de las consultas. Administración de Usuarios y Roles: Permite la gestión de usuarios y roles para controlar el acceso a la base de datos. Configuración del Sistema: Facilita la configuración y administración de parámetros del sistema y opciones de despliegue. Uso Avanzado de MongoDB Shell # Además de las operaciones básicas de consulta y manipulación de datos, MongoDB Shell también admite funciones avanzadas, como:\nAggregation Framework: Permite realizar operaciones de agregación para realizar análisis complejos en los datos. Scripting: Facilita la automatización de tareas mediante la escritura de scripts en JavaScript. Administración de Replica Sets y Sharding: Permite administrar configuraciones avanzadas de alta disponibilidad y escalabilidad. Mejores Prácticas y Consideraciones de Seguridad # Al utilizar MongoDB Shell, es importante seguir algunas mejores prácticas y consideraciones de seguridad, como:\nAutenticación y Autorización: Configurar la autenticación y autorización para restringir el acceso no autorizado a la base de datos. Auditoría: Habilitar el registro de auditoría para realizar un seguimiento de las actividades de los usuarios. Actualizaciones de Seguridad: Mantener MongoDB Shell y la base de datos actualizados con las últimas correcciones de seguridad. Pruebas en Entornos de Desarrollo: Realizar pruebas y experimentos en entornos de desarrollo antes de implementar cambios en entornos de producción. Conclusiones # MongoDB Shell es una herramienta esencial para la gestión de bases de datos MongoDB, ofreciendo a los usuarios una forma poderosa y flexible de interactuar con sus datos. Desde operaciones básicas de consulta hasta tareas avanzadas de administración, MongoDB Shell proporciona una interfaz intuitiva y eficiente para trabajar con bases de datos NoSQL. Al seguir mejores prácticas y consideraciones de seguridad, los usuarios pueden aprovechar al máximo esta herramienta para satisfacer sus necesidades de gestión de datos en entornos MongoDB.\n","date":"9 abril 2024","permalink":"/platform/mongodb/mongoshell/","section":"Mongodbs","summary":"MongoDB Shell, también conocido como \u0026ldquo;mongo\u0026rdquo;, es una interfaz de línea de comandos (CLI) fundamental para interactuar con las bases de datos MongoDB.","title":"MongoDB Shell"},{"content":"En el mundo de la gestión de bases de datos, MongoDB ha emergido como una herramienta innovadora que desafía los paradigmas tradicionales de almacenamiento y recuperación de datos. Este artículo busca proporcionar una introducción exhaustiva a MongoDB desde una perspectiva universitaria, explorando sus fundamentos, características distintivas y su relevancia en el contexto de la tecnología de bases de datos moderna.\n¿Qué es MongoDB? # MongoDB es un sistema de gestión de bases de datos NoSQL (Not Only SQL) que se destaca por su capacidad para almacenar datos en forma de documentos JSON (JavaScript Object Notation). Fue desarrollado por MongoDB Inc. y lanzado por primera vez en 2009. A diferencia de los sistemas de bases de datos relacionales tradicionales, como MySQL o PostgreSQL, que almacenan datos en filas y columnas en tablas, MongoDB adopta un enfoque basado en documentos, lo que lo hace altamente flexible y escalable.\nPrincipales Características # Modelo de Datos Basado en Documentos: En MongoDB, los datos se organizan en documentos BSON (Binary JSON), que son estructuras de datos flexibles y jerárquicas similares a los objetos JSON. Esto permite a los desarrolladores almacenar datos de manera más natural y coherente con la estructura de los objetos utilizados en sus aplicaciones.\nEscalabilidad Horizontal: MongoDB está diseñado para escalar horizontalmente de manera eficiente, lo que significa que puede manejar grandes volúmenes de datos distribuyendo la carga entre múltiples servidores. Esto se logra a través de la fragmentación (sharding), donde los datos se distribuyen en clústeres o shards, lo que permite un crecimiento lineal de la capacidad de almacenamiento y rendimiento.\nAlto Rendimiento: Gracias a su diseño sin esquema fijo y su capacidad para realizar consultas ad hoc de forma eficiente, MongoDB ofrece un alto rendimiento en operaciones de lectura y escritura. Además, su capacidad para indexar datos facilita la búsqueda y recuperación rápida de información, incluso en entornos con grandes conjuntos de datos.\nFlexibilidad y Agilidad: MongoDB se adapta bien a entornos de desarrollo ágil, donde los requisitos de las aplicaciones pueden cambiar con frecuencia. Su esquema dinámico permite a los desarrolladores modificar la estructura de los datos sobre la marcha, lo que facilita la iteración rápida y la experimentación en el desarrollo de software.\nSoporte para Consultas Avanzadas: MongoDB ofrece un potente sistema de consultas que incluye capacidades para realizar consultas complejas, agregaciones, búsquedas geoespaciales y textuales, entre otras funcionalidades avanzadas. Esto permite a los desarrolladores aprovechar al máximo los datos almacenados y obtener información significativa de manera eficiente.\nCasos de Uso # MongoDB se ha utilizado en una amplia gama de aplicaciones y escenarios, algunos de los cuales incluyen:\nAplicaciones Web y Móviles: Debido a su capacidad para manejar grandes volúmenes de datos no estructurados y su escalabilidad horizontal, MongoDB es una opción popular para aplicaciones web y móviles que requieren un almacenamiento flexible y de alto rendimiento.\nAnálisis de Datos: Muchas organizaciones utilizan MongoDB para almacenar y analizar grandes conjuntos de datos, incluidos datos de registros, datos de sensores, datos de redes sociales y más. Su capacidad para realizar consultas complejas y su integración con herramientas de análisis como Hadoop lo hacen adecuado para escenarios de análisis de big data.\nGestión de Contenido: MongoDB se utiliza en sistemas de gestión de contenido (CMS) y sistemas de gestión de datos de productos (PDM) debido a su capacidad para manejar datos no estructurados y semiestructurados de manera eficiente.\nIoT (Internet de las cosas): Con la proliferación de dispositivos conectados, MongoDB se utiliza cada vez más en aplicaciones IoT para almacenar y procesar datos generados por sensores y dispositivos distribuidos.\nConclusión # En resumen, MongoDB ha revolucionado el panorama de las bases de datos con su enfoque innovador y flexible para el almacenamiento y la recuperación de datos. Su modelo de datos basado en documentos, su escalabilidad horizontal y su alto rendimiento lo convierten en una opción atractiva para una amplia gama de aplicaciones y escenarios. A medida que las organizaciones continúan enfrentando desafíos relacionados con el manejo de grandes volúmenes de datos no estructurados, MongoDB seguirá desempeñando un papel crucial en el desarrollo de soluciones tecnológicas avanzadas. Este artículo proporciona una sólida introducción a MongoDB desde una perspectiva universitaria, sentando las bases para exploraciones más profundas en su implementación y uso en entornos reales.\nRecursos # Mira este video desde 00:00 hasta 4:48 minutos.\nNo olvides instalar MongoDB y MongoDB Shell. Debes descargar la versión que dice \u0026ldquo;current\u0026rdquo;:\nInstalar MongoDB Instalar MongoDB Shell ","date":"9 abril 2024","permalink":"/platform/mongodb/intro/","section":"Mongodbs","summary":"En el mundo de la gestión de bases de datos, MongoDB ha emergido como una herramienta innovadora que desafía los paradigmas tradicionales de almacenamiento y recuperación de datos.","title":"Introducción a MongoDB"},{"content":"En el mundo del desarrollo web moderno, la eficiencia en la gestión del estado y la optimización de las solicitudes de red son aspectos críticos para ofrecer una experiencia de usuario fluida y receptiva. React Query emerge como una solución poderosa para abordar estos desafíos al proporcionar un sistema de gestión de caché y una forma elegante de realizar solicitudes de red en aplicaciones React. Este artículo explora en profundidad los conceptos fundamentales de React Query, su implementación práctica y los beneficios que ofrece en el desarrollo de aplicaciones web.\nIntroducción # La complejidad de las aplicaciones web modernas ha aumentado exponencialmente en los últimos años, lo que ha generado la necesidad de herramientas y bibliotecas que simplifiquen el manejo del estado y la gestión de datos. React Query, una biblioteca desarrollada por Tanner Linsley, se ha destacado como una solución robusta y eficiente para abordar estos desafíos. En este artículo, exploraremos en detalle qué es React Query, cómo se implementa en aplicaciones React y cuáles son sus beneficios clave.\n¿Qué es React Query? # React Query es una biblioteca diseñada específicamente para gestionar los datos en aplicaciones React mediante la gestión del estado y la sincronización de los datos entre la interfaz de usuario y el servidor. Su enfoque principal se centra en la gestión de solicitudes de red y en la creación de una capa de caché que optimice el rendimiento de la aplicación.\nImplementación de React Query # La implementación de React Query en una aplicación React es sencilla y se puede dividir en varios pasos:\nInstalación: React Query se instala fácilmente a través de npm o yarn, lo que permite agregarlo a un proyecto React existente con facilidad.\nConfiguración inicial: Se establece una instancia de React Query en el nivel superior de la aplicación, proporcionando opciones de configuración como el tiempo de expiración de la caché y las estrategias de revalidación de datos.\nDefinición de consultas: Las consultas se definen utilizando el hook useQuery, que acepta una clave única para identificar la consulta y una función que devuelve los datos solicitados.\nManejo de mutaciones: Para modificar datos en el servidor, React Query proporciona el hook useMutation, que facilita el envío de solicitudes de mutación y la actualización de la caché en consecuencia.\nRefresco de datos: React Query ofrece mecanismos integrados para refrescar los datos de forma automática en función de ciertos eventos, como la expiración de la caché o las interacciones del usuario.\nBeneficios de usar React Query: La adopción de React Query conlleva una serie de beneficios significativos para el desarrollo de aplicaciones web:\nGestión eficiente del estado: React Query simplifica la gestión del estado al proporcionar una capa de caché centralizada y una forma declarativa de realizar solicitudes de red.\nOptimización de las solicitudes de red: Al utilizar estrategias inteligentes de revalidación de datos y la caché incorporada, React Query minimiza el número de solicitudes de red, mejorando así el rendimiento y la velocidad de carga de la aplicación.\nFacilidad de integración: La sintaxis clara y concisa de React Query lo hace fácil de integrar en aplicaciones React existentes, lo que permite una transición suave y una curva de aprendizaje mínima para los desarrolladores.\nManejo robusto de errores: React Query proporciona mecanismos robustos para manejar errores de red, incluyendo la posibilidad de repetir automáticamente las solicitudes fallidas y mostrar mensajes de error al usuario de manera intuitiva.\nConclusión: # En resumen, React Query ofrece una solución completa y eficiente para la gestión del estado y las solicitudes de red en aplicaciones web desarrolladas con React. Su enfoque centrado en la caché, la optimización de solicitudes y la facilidad de integración lo convierten en una herramienta invaluable para los desarrolladores que buscan mejorar el rendimiento y la experiencia del usuario en sus aplicaciones web. Al adoptar React Query, los equipos de desarrollo pueden aprovechar al máximo las últimas tecnologías y prácticas recomendadas en el desarrollo de aplicaciones web modernas.\nRecursos # ","date":"8 abril 2024","permalink":"/platform/react/react_query/","section":"Reacts","summary":"En el mundo del desarrollo web moderno, la eficiencia en la gestión del estado y la optimización de las solicitudes de red son aspectos críticos para ofrecer una experiencia de usuario fluida y receptiva.","title":"React Query"},{"content":"En el desarrollo de aplicaciones web modernas, la comunicación con servidores remotos es una parte fundamental. Para simplificar esta tarea, se han desarrollado diversas bibliotecas que facilitan el manejo de solicitudes HTTP desde el cliente. Una de las más populares y ampliamente utilizadas es Axios.\n¿Qué es Axios? # Axios es una biblioteca de JavaScript que permite realizar solicitudes HTTP desde el navegador o desde Node.js. Es una herramienta poderosa y fácil de usar que proporciona una API simple y consistente para trabajar con solicitudes y respuestas HTTP. Axios es compatible con todos los navegadores modernos y ofrece características como el manejo de promesas y la transformación automática de datos JSON.\nInstalación de Axios en React # Integrar Axios en una aplicación React es un proceso sencillo que solo requiere unos pocos pasos. Primero, necesitamos instalar Axios como una dependencia de nuestro proyecto. Esto se puede hacer utilizando npm o yarn, dos administradores de paquetes populares en el ecosistema de JavaScript.\nnpm install axios Una vez que Axios está instalado, podemos comenzar a usarlo en nuestros componentes de React importándolo como un módulo:\nimport axios from \u0026#39;axios\u0026#39;; Con Axios correctamente instalado y configurado, estamos listos para comenzar a realizar solicitudes HTTP en nuestra aplicación React. Podemos utilizar los métodos proporcionados por Axios, como axios.get(), axios.post(), etc., para interactuar con nuestros servidores y recuperar o enviar datos según sea necesario.\nRecursos # Axios Docs ","date":"8 abril 2024","permalink":"/platform/react/axios/","section":"Reacts","summary":"En el desarrollo de aplicaciones web modernas, la comunicación con servidores remotos es una parte fundamental.","title":"Axios"},{"content":"En el mundo del desarrollo de aplicaciones web, React.js se ha establecido como una de las bibliotecas de JavaScript más populares y ampliamente utilizadas. Su enfoque en la construcción de interfaces de usuario interactivas y reactivas ha revolucionado la forma en que se desarrollan las aplicaciones web modernas. Sin embargo, a medida que los proyectos crecen en tamaño y complejidad, surge la necesidad de una gestión eficiente del enrutamiento y la navegación. Es aquí donde entra en juego Wouter, una biblioteca de enrutamiento minimalista pero potente para aplicaciones React. En este artículo, exploraremos las capacidades de Wouter y cómo puede mejorar el desarrollo de aplicaciones React.\nIntroducción # El enrutamiento es un aspecto fundamental en el desarrollo de aplicaciones web modernas. Permite a los usuarios navegar entre diferentes vistas y estados de la aplicación de manera intuitiva. React, con su enfoque en la construcción de interfaces de usuario modulares y reactivas, ofrece una excelente base para desarrollar aplicaciones web. Sin embargo, la gestión del enrutamiento en React ha sido un área de debate y exploración.\nWouter: Una Introducción # Wouter es una biblioteca de enrutamiento para React que ofrece una solución simple y elegante para la gestión del enrutamiento en aplicaciones web. A diferencia de otras bibliotecas de enrutamiento más complejas, como React Router, Wouter adopta un enfoque minimalista y basado en hooks. Esto significa que se integra perfectamente con el modelo de desarrollo funcional de React y no introduce una sobrecarga excesiva en la aplicación.\nCaracterísticas Clave de Wouter # Simplicidad: Wouter se centra en proporcionar una API simple y fácil de entender para gestionar el enrutamiento en aplicaciones React. Con solo un par de líneas de código, los desarrolladores pueden configurar rutas y gestionar la navegación de manera eficiente.\nPerformance: Al ser una biblioteca liviana y centrada en hooks, Wouter ofrece un rendimiento óptimo incluso en aplicaciones de gran escala. Minimiza el tiempo de carga y garantiza una experiencia de usuario fluida.\nHooks-centric: Wouter aprovecha el poder de los hooks de React para proporcionar una integración perfecta con el flujo de trabajo de desarrollo moderno de React. Esto permite a los desarrolladores aprovechar las características más recientes de React, como el estado local y los efectos secundarios.\nTamaño Pequeño: Con un tamaño de solo unos pocos kilobytes, Wouter es una opción ideal para proyectos donde la optimización del tamaño es crucial. Su tamaño pequeño no compromete su funcionalidad, lo que lo convierte en una opción atractiva para una amplia gama de aplicaciones.\nCómo Empezar con Wouter # Para comenzar a utilizar Wouter en un proyecto React, simplemente podemos instalarlo a través de npm o yarn:\nnpm install wouter Una vez instalado, podemos importar los ganchos necesarios de Wouter en nuestros componentes y comenzar a configurar las rutas de nuestra aplicación.\nimport { Route, Link, Switch } from \u0026#39;wouter\u0026#39;; function App() { return ( \u0026lt;div\u0026gt; \u0026lt;nav\u0026gt; \u0026lt;Link href=\u0026#39;/\u0026#39;\u0026gt;Inicio\u0026lt;/Link\u0026gt; \u0026lt;Link href=\u0026#39;/acerca\u0026#39;\u0026gt;Acerca\u0026lt;/Link\u0026gt; \u0026lt;/nav\u0026gt; \u0026lt;Switch\u0026gt; \u0026lt;Route path=\u0026#39;/\u0026#39;\u0026gt; \u0026lt;Inicio /\u0026gt; \u0026lt;/Route\u0026gt; \u0026lt;Route path=\u0026#39;/acerca\u0026#39;\u0026gt; \u0026lt;Acerca /\u0026gt; \u0026lt;/Route\u0026gt; \u0026lt;/Switch\u0026gt; \u0026lt;/div\u0026gt; ); } Conclusiones # Wouter ofrece una solución elegante y minimalista para la gestión del enrutamiento en aplicaciones React. Su enfoque centrado en hooks, su rendimiento óptimo y su simplicidad de uso lo convierten en una herramienta poderosa para el desarrollo de aplicaciones web modernas. Al explorar las capacidades de Wouter, los desarrolladores pueden mejorar la estructura y la navegación de sus aplicaciones React de manera significativa. Con su tamaño pequeño y su integración perfecta con el ecosistema React, Wouter se presenta como una opción atractiva para proyectos de cualquier tamaño y complejidad.\nRecursos # Lee los siguientes apartados de la documentación oficial. Está en inglés así que puedes traducir la página al español.\n\u0026lt;Route path={pattern} /\u0026gt; \u0026lt;Link href={path} /\u0026gt; \u0026lt;Switch /\u0026gt; \u0026lt;Redirect to={path} /\u0026gt; ","date":"8 abril 2024","permalink":"/platform/react/wouter/","section":"Reacts","summary":"En el mundo del desarrollo de aplicaciones web, React.","title":"Wouter"},{"content":"Introducción: # La seguridad de las contraseñas es una preocupación fundamental en el desarrollo de aplicaciones web. La encriptación de contraseñas es un paso crítico para proteger la información confidencial de los usuarios. En este artículo, exploraremos la implementación de la encriptación de contraseñas utilizando el paquete npm bcrypt en una aplicación Express. Además, discutiremos cómo funciona bcrypt y por qué es importante encriptar las contraseñas.\n¿Qué es npm bcrypt? # Bcrypt es un algoritmo de encriptación de contraseñas diseñado para ser resistente a los ataques de fuerza bruta y de diccionario. npm bcrypt es una biblioteca de Node.js que implementa este algoritmo, lo que permite a los desarrolladores generar y verificar contraseñas de forma segura en aplicaciones web.\n¿Cómo funciona bcrypt? # Bcrypt utiliza un algoritmo de hashing para convertir las contraseñas en una cadena de caracteres encriptada. Este proceso consta de varias etapas:\nGeneración de un hash aleatorio (salt): Bcrypt genera un valor aleatorio único, conocido como \u0026ldquo;salt\u0026rdquo;, que se combina con la contraseña antes de ser encriptada. Esto ayuda a prevenir ataques de fuerza bruta al garantizar que incluso contraseñas idénticas generen hashes diferentes.\nEncriptación de la contraseña: Una vez que se genera el salt, bcrypt utiliza una función de hash (normalmente bcrypt utiliza Blowfish) para encriptar la contraseña junto con el salt. El resultado es un hash encriptado que consta de una cadena de caracteres.\nAlmacenamiento del hash en la base de datos: El hash encriptado se almacena en la base de datos, en lugar de la contraseña en texto plano. Esto garantiza que incluso si la base de datos es comprometida, las contraseñas de los usuarios permanezcan seguras.\nVerificación de la contraseña: Cuando un usuario intenta iniciar sesión, bcrypt realiza el proceso de encriptación nuevamente utilizando el salt almacenado en la base de datos y la contraseña proporcionada por el usuario. Luego, compara el hash resultante con el hash almacenado en la base de datos. Si coinciden, la contraseña es válida.\nImportancia de encriptar contraseñas: # La encriptación de contraseñas es crucial por varias razones:\nProtección contra ataques de fuerza bruta: Sin encriptación, las contraseñas almacenadas en la base de datos son vulnerables a ataques de fuerza bruta, donde un atacante intenta adivinar contraseñas probando diferentes combinaciones. La encriptación con bcrypt hace que este proceso sea extremadamente difícil y costoso en términos computacionales.\nPrivacidad del usuario: Las contraseñas a menudo son compartidas entre múltiples servicios en línea. Almacenar contraseñas en texto plano aumenta el riesgo de que un atacante pueda acceder a otras cuentas del usuario si obtiene acceso a una sola contraseña. La encriptación de contraseñas protege la privacidad del usuario al garantizar que incluso los administradores del sistema no tengan acceso directo a las contraseñas.\nCumplimiento normativo: Muchas regulaciones y estándares de seguridad, como el Reglamento General de Protección de Datos (GDPR) en la Unión Europea, exigen que las empresas protejan adecuadamente la información confidencial de los usuarios, incluidas las contraseñas. La encriptación de contraseñas con bcrypt ayuda a cumplir con estos requisitos regulatorios.\nInstalación de bcrypt # Primero, asegúrate de tener Node.js y npm instalados en tu sistema. Luego, crea un nuevo directorio para tu proyecto y ejecuta los siguientes comandos en tu terminal:\nnpm init -y npm install express bcrypt Configuración de Express # Crea un archivo server.js para configurar tu servidor Express:\n// Importa los módulos necesarios import express from \u0026#39;express\u0026#39;; import bcrypt from \u0026#39;bcrypt\u0026#39;; // Crea una instancia de Express const app = express(); const PORT = 3000; // Middleware para el análisis del cuerpo de las solicitudes app.use(express.json()); // Ruta para encriptar una contraseña app.post(\u0026#39;/encriptar\u0026#39;, async (req, res) =\u0026gt; { const { contraseña } = req.body; try { // Genera un salt (valor de hashing aleatorio) const saltRounds = 10; const hash = await bcrypt.hash(contraseña, saltRounds); res.json({ hash }); } catch (error) { console.error(error); res.status(500).json({ mensaje: \u0026#39;Error al encriptar la contraseña\u0026#39; }); } }); // Ruta para verificar una contraseña app.post(\u0026#39;/verificar\u0026#39;, async (req, res) =\u0026gt; { const { contraseña, hash } = req.body; try { // Compara la contraseña con el hash almacenado const resultado = await bcrypt.compare(contraseña, hash); res.json({ resultado }); } catch (error) { console.error(error); res.status(500).json({ mensaje: \u0026#39;Error al verificar la contraseña\u0026#39; }); } }); // Inicia el servidor app.listen(PORT, () =\u0026gt; { console.log(`Servidor Express escuchando en el puerto ${PORT}`); }); Uso de las rutas # Puedes usar herramientas como Postman o escribir código en el lado del cliente para interactuar con las rutas /encriptar y /verificar.\nConclusiones # La combinación de npm bcrypt y Express proporciona una forma segura y eficiente de implementar la encriptación de contraseñas en aplicaciones web. Al utilizar estas herramientas, puedes proteger la información confidencial de los usuarios y cumplir con los estándares de seguridad necesarios en tus proyectos.\n","date":"3 abril 2024","permalink":"/platform/express/bcrypt/","section":"Expresses","summary":"Introducción: # La seguridad de las contraseñas es una preocupación fundamental en el desarrollo de aplicaciones web.","title":"npm: bcrypt"},{"content":"Este artículo explora el uso de la biblioteca Jose para manejar JSON Web Tokens (JWT) en aplicaciones Express utilizando ES Modules. Proporciona una guía paso a paso, desde la instalación de la dependencia hasta su implementación en una aplicación Express. JWT es fundamental para la autenticación y autorización en aplicaciones web y móviles, y entender cómo integrarla adecuadamente en una aplicación Express es crucial para los desarrolladores.\nIntroducción: # JSON Web Tokens (JWT) es un estándar abierto (RFC 7519) que define un formato compacto y autónomo para la transmisión de información de forma segura entre partes, en forma de un objeto JSON. JWT se utiliza comúnmente para la autenticación y la autorización en aplicaciones web y móviles. Una de las bibliotecas populares para manejar JWT en aplicaciones Express es Jose. En este artículo, exploraremos cómo utilizar Jose para integrar JWT en una aplicación Express utilizando ES Modules.\nInstalación: # Para comenzar, necesitaremos instalar la biblioteca Jose en nuestro proyecto Node.js. Asegúrese de tener Node.js y npm instalados en su sistema. Puede instalar Jose ejecutando el siguiente comando en la terminal:\nnpm install jose Configuración: # Una vez que hemos instalado la biblioteca Jose, necesitaremos configurar nuestra aplicación Express para usarla. En el video de este material encontrarás más detalle de cómo hacerlo.\nUso: # Una vez configurada nuestra aplicación Express con Jose, podemos comenzar a utilizar JWT para la autenticación y autorización en nuestras rutas.\nReferencias:\nnpm jose: Enlace Recursos # ","date":"2 abril 2024","permalink":"/platform/express/jwt/jose/","section":"Expresses","summary":"Este artículo explora el uso de la biblioteca Jose para manejar JSON Web Tokens (JWT) en aplicaciones Express utilizando ES Modules.","title":"npm: jose"},{"content":"En el desarrollo de aplicaciones web modernas, la seguridad es un aspecto crítico a tener en cuenta. La autenticación y la autorización son componentes esenciales para proteger los recursos de una aplicación. En este tutorial, exploraremos cómo implementar la autenticación basada en JSON Web Tokens (JWT) en una aplicación Node.js utilizando Express, una de las bibliotecas web más populares, y aprovecharemos las características de los ES Modules para una modularidad y claridad de código superior.\nPaso 1: Configuración de Express y Middleware # Abre el archivo index.js en tu editor de código y agrega el siguiente código para configurar Express y definir un punto final de prueba: // index.js import express from \u0026#39;express\u0026#39;; const app = express(); app.get(\u0026#39;/\u0026#39;, (req, res) =\u0026gt; { res.send(\u0026#39;¡Bienvenido a mi aplicación Express con JWT!\u0026#39;); }); const PORT = process.env.PORT || 3000; app.listen(PORT, () =\u0026gt; { console.log(`Servidor iniciado en el puerto ${PORT}`); }); Paso 2: Integración de JSON Web Tokens # Ahora vamos a agregar la funcionalidad de autenticación basada en JWT a nuestra aplicación.\nInstala la dependencia jsonwebtoken: npm install jsonwebtoken Crea un nuevo archivo auth.js para manejar la generación y verificación de JWT: touch auth.js Agrega el siguiente código al archivo auth.js: // auth.js import jwt from \u0026#39;jsonwebtoken\u0026#39;; const secretKey = \u0026#39;tu_clave_secreta\u0026#39;; export const generateToken = payload =\u0026gt; { return jwt.sign(payload, secretKey, { expiresIn: \u0026#39;1h\u0026#39; }); }; export const verifyToken = token =\u0026gt; { return jwt.verify(token, secretKey); }; Paso 3: Implementación de la Autenticación en Express # Vamos a integrar el middleware de autenticación en nuestra aplicación Express.\nAbre el archivo index.js y modifícalo para integrar el middleware de autenticación: // index.js import express from \u0026#39;express\u0026#39;; import { generateToken, verifyToken } from \u0026#39;./auth.js\u0026#39;; const app = express(); app.use(express.json()); app.post(\u0026#39;/login\u0026#39;, (req, res) =\u0026gt; { // Aquí verificarías las credenciales del usuario, por simplicidad, omitiremos este paso const { username, password } = req.body; // Supongamos que la autenticación es exitosa const token = generateToken({ username }); res.json({ token }); }); app.get(\u0026#39;/protected\u0026#39;, (req, res) =\u0026gt; { const token = req.headers.authorization; if (!token) { return res.status(401).json({ error: \u0026#39;Token no proporcionado\u0026#39; }); } try { const decoded = verifyToken(token.split(\u0026#39; \u0026#39;)[1]); res.json({ message: `Bienvenido, ${decoded.username}!` }); } catch (error) { res.status(401).json({ error: \u0026#39;Token inválido\u0026#39; }); } }); const PORT = process.env.PORT || 3000; app.listen(PORT, () =\u0026gt; { console.log(`Servidor iniciado en el puerto ${PORT}`); }); Paso 4: Probando la Aplicación # Inicia tu servidor ejecutando el siguiente comando en tu terminal: node index.js Abre tu navegador web o utiliza una herramienta como Postman para enviar solicitudes a tu servidor. Puedes probar los siguientes endpoints: GET /: Deberías ver un mensaje de bienvenida. POST /login: Deberías recibir un token JWT después de enviar las credenciales (por simplicidad, estas no se verifican realmente en este ejemplo). GET /protected: Deberías recibir un mensaje de bienvenida si proporcionas el token JWT en la cabecera de autorización. Conclusión # En este tutorial, hemos explorado cómo implementar la autenticación basada en JSON Web Tokens (JWT) en una aplicación Node.js utilizando Express y ES Modules. Hemos creado un servidor Express simple, integrado con middleware para manejar la autenticación con JWT, y hemos probado nuestra aplicación para asegurarnos de que funcione correctamente. Este es solo el comienzo, y hay muchas más características de seguridad y escalabilidad que se pueden agregar a esta base.\nRecursos # ","date":"2 abril 2024","permalink":"/platform/express/jwt/jsonwebtoken/","section":"Expresses","summary":"En el desarrollo de aplicaciones web modernas, la seguridad es un aspecto crítico a tener en cuenta.","title":"npm: jsonwebtoken"},{"content":"","date":"2 abril 2024","permalink":"/platform/backend/","section":"Backends","summary":"","title":"Backends"},{"content":"En el mundo contemporáneo de la informática, la seguridad de la información es un aspecto crítico en cualquier sistema distribuido. La autenticación y la autorización son dos pilares fundamentales en el diseño de sistemas seguros. Una tecnología que ha ganado popularidad en los últimos años en el contexto de la autenticación es el JSON Web Token (JWT). Este artículo se propone explorar en profundidad la teoría detrás de los JWT, examinando su estructura, funcionamiento y aplicaciones en diferentes entornos.\nDefinición y Estructura # Un JSON Web Token (JWT) es un estándar abierto (RFC 7519) que define un formato compacto y seguro para transmitir información de manera segura entre dos partes como un objeto JSON. Consiste en tres secciones separadas por puntos: el encabezado (header), la carga útil (payload) y la firma (signature).\nEncabezado (Header) # El encabezado de un JWT contiene metadatos sobre el tipo de token y el algoritmo de firma utilizado. Normalmente, el tipo de token es \u0026ldquo;JWT\u0026rdquo; y el algoritmo de firma puede ser, por ejemplo, HMAC SHA256 o RSA.\nCarga Útil (Payload) # La carga útil del JWT contiene la información que se quiere transmitir. Puede incluir datos de usuario, como el identificador del usuario o los roles, así como cualquier otra información relevante para la aplicación.\nFirma (Signature) # La firma del JWT se utiliza para verificar que el token no ha sido alterado durante la transmisión y que proviene de una fuente confiable. Se calcula utilizando el encabezado codificado, la carga útil codificada, una clave secreta y el algoritmo de firma especificado en el encabezado.\nFuncionamiento # El funcionamiento de un JWT se basa en el intercambio seguro de información entre dos partes. El proceso típico de utilización de un JWT es el siguiente:\nAutenticación: El usuario se autentica ante el servidor utilizando sus credenciales. Generación del JWT: Una vez autenticado, el servidor genera un JWT que contiene la información de autenticación del usuario. Transmisión del JWT: El JWT es transmitido al cliente, que lo almacenará de forma segura (por ejemplo, en local storage o en una cookie). Inclusión del JWT en las solicitudes: En las solicitudes subsiguientes, el cliente incluye el JWT en la cabecera de autorización para demostrar su identidad. Verificación del JWT: El servidor verifica la validez del JWT recibido, comprobando su firma y su integridad. Autorización: Si el JWT es válido, el servidor autoriza al usuario a acceder a los recursos protegidos. Ventajas y Desventajas # Ventajas # Simplicidad: Los JWT son fáciles de implementar y utilizar en comparación con otros mecanismos de autenticación. Portabilidad: Los JWT son independientes del lenguaje de programación y pueden ser utilizados en una amplia variedad de plataformas. Escalabilidad: Los JWT son útiles en entornos distribuidos y escalables, ya que no requieren almacenamiento en el servidor. Desventajas # Tamaño: A medida que se añaden más información a la carga útil del JWT, su tamaño puede aumentar, lo que puede afectar la eficiencia de la transmisión. Seguridad: Si la clave secreta utilizada para firmar los JWT es comprometida, todos los tokens emitidos con esa clave pueden ser falsificados. Persistencia: Aunque los JWT tienen un tiempo de vida (expiración), una vez emitidos, no pueden ser invalidados antes de que expiren sin recurrir a técnicas adicionales como listas negras. Aplicaciones # Los JWT tienen una amplia gama de aplicaciones en el mundo de la informática, incluyendo:\nAutenticación de usuarios en aplicaciones web y móviles Autorización de acceso a recursos protegidos en APIs Sistemas de federación de identidad Implementación de sistemas de SSO (Single Sign-On) Conclusiones # Los JSON Web Tokens (JWT) representan una herramienta poderosa y versátil en el arsenal de seguridad de la información. Su simplicidad, portabilidad y escalabilidad los hacen atractivos en una variedad de contextos de aplicación. Sin embargo, es crucial entender sus limitaciones y aplicar las mejores prácticas de seguridad al utilizarlos en entornos de producción. Con un conocimiento sólido de la teoría detrás de los JWT, los desarrolladores pueden aprovechar al máximo esta tecnología para garantizar la seguridad y la integridad de sus sistemas distribuidos.\nRecursos # ","date":"2 abril 2024","permalink":"/platform/backend/jwt/","section":"Backends","summary":"En el mundo contemporáneo de la informática, la seguridad de la información es un aspecto crítico en cualquier sistema distribuido.","title":"JSON Web Token (JWT)"},{"content":"Express.js es un popular marco de desarrollo de aplicaciones web para Node.js que ofrece un sistema flexible de middlewares. Estos middlewares permiten la manipulación y el procesamiento de las solicitudes HTTP entrantes y salientes. Este artículo explora en detalle los conceptos fundamentales de los middlewares en Express, su implementación, funcionamiento y las mejores prácticas asociadas para su uso eficaz en el desarrollo de aplicaciones web.\nIntroducción # Los middlewares son una parte integral de Express.js, un marco web minimalista y flexible para Node.js. En Express, los middlewares son funciones que tienen acceso al objeto req (solicitud HTTP), al objeto res (respuesta HTTP) y a la función next que representa el siguiente middleware en la cadena de ejecución. Este artículo profundiza en los middlewares en Express, desde su implementación básica hasta las mejores prácticas para su uso efectivo en el desarrollo de aplicaciones web.\nImplementación Básica de Middlewares en Express # En Express, los middlewares se pueden implementar de varias maneras, incluidas las funciones de middleware, los middlewares de terceros y los middlewares personalizados. A continuación se muestra un ejemplo básico de una función de middleware en Express:\nimport express from \u0026#39;express\u0026#39;; const app = express(); // Middleware de registro de solicitudes app.use((req, res, next) =\u0026gt; { console.log(`[${new Date().toISOString()}] ${req.method} ${req.url}`); next(); }); // Ruta principal app.get(\u0026#39;/\u0026#39;, (req, res) =\u0026gt; { res.send(\u0026#39;¡Hola Mundo!\u0026#39;); }); app.listen(3000, () =\u0026gt; { console.log(\u0026#39;Servidor Express en funcionamiento en el puerto 3000\u0026#39;); }); En este ejemplo, el middleware de registro de solicitudes registra cada solicitud HTTP entrante junto con la marca de tiempo en la consola antes de pasar la solicitud al siguiente middleware en la cadena de ejecución.\nFuncionamiento de los Middlewares en Express # Los middlewares en Express se ejecutan en orden secuencial según el orden en que se definen en la aplicación. Cuando se recibe una solicitud HTTP, Express pasa la solicitud a través de cada middleware en la cadena de ejecución hasta que uno de los middlewares envía una respuesta o la solicitud se completa. El middleware next se utiliza para pasar la solicitud al siguiente middleware en la cadena de ejecución. Si un middleware no llama a next, la ejecución de la cadena de middlewares se detiene.\nEjemplos Adicionales de Middlewares en Express # Además del middleware de registro de solicitudes, Express admite una variedad de otros middlewares útiles. A continuación se presentan algunos ejemplos adicionales:\nMiddleware de Autenticación # const authMiddleware = (req, res, next) =\u0026gt; { if (req.headers.authorization === \u0026#39;Bearer token\u0026#39;) { next(); // Usuario autenticado, continuar con la solicitud } else { res.status(401).send(\u0026#39;No autorizado\u0026#39;); // Usuario no autenticado } }; app.use(\u0026#39;/secure\u0026#39;, authMiddleware); Este middleware verifica la presencia de un token de autenticación en la cabecera de la solicitud y permite el acceso solo a usuarios autenticados.\nMiddleware de Compresión # import compression from \u0026#39;compression\u0026#39;; app.use(compression()); Este middleware comprime la respuesta HTTP antes de enviarla al cliente, lo que reduce el tamaño de la carga útil y mejora el rendimiento de la aplicación.\nMiddleware de Registro de Errores # const errorLoggerMiddleware = (err, req, res, next) =\u0026gt; { console.error(err.stack); res.status(500).send(\u0026#39;Error interno del servidor\u0026#39;); }; app.use(errorLoggerMiddleware); Este middleware registra cualquier error interno del servidor y devuelve una respuesta de error HTTP 500 al cliente.\nMejores Prácticas y Consideraciones # Al trabajar con middlewares en Express, es importante seguir algunas mejores prácticas:\nOrden de Definición: Definir los middlewares en el orden apropiado para garantizar que se ejecuten en el momento adecuado durante el ciclo de vida de la solicitud. Manejo de Errores: Utilizar middlewares de manejo de errores para capturar y gestionar errores de manera centralizada en la aplicación. Middlewares Reutilizables: Modularizar y reutilizar middlewares en toda la aplicación para mejorar la mantenibilidad y la legibilidad del código. Conclusiones # Los middlewares son una parte fundamental de Express.js que permite la personalización y el control del flujo de las solicitudes HTTP en una aplicación web. Al comprender los conceptos fundamentales de los middlewares, su implementación y las mejores prácticas asociadas, los desarrolladores pueden aprovechar al máximo el potencial de Express para crear aplicaciones web robustas y escalables.\nRecursos # Mira este video desde 01:40:15 hasta 02:04:21 minutos (ya está marcado).\n","date":"27 marzo 2024","permalink":"/platform/express/middleware/","section":"Expresses","summary":"Express.js es un popular marco de desarrollo de aplicaciones web para Node.","title":"Middlewares en Express"},{"content":"La arquitectura de microservicios se ha convertido en un enfoque popular en el desarrollo de software debido a su capacidad para crear sistemas escalables, flexibles y resilientes. Este artículo ofrece una visión integral de la arquitectura de microservicios, explorando sus fundamentos, principios de diseño y los desafíos asociados. Se analizan las ventajas y desventajas de esta arquitectura, así como las mejores prácticas para su implementación exitosa en proyectos de desarrollo de software.\nIntroducción # La arquitectura de microservicios es un enfoque de diseño de sistemas de software que ha ganado popularidad en los últimos años. A diferencia de las arquitecturas monolíticas, donde toda la funcionalidad se desarrolla y despliega como una sola unidad, los microservicios dividen una aplicación en componentes independientes y autónomos, cada uno centrado en una única función empresarial. Este artículo examina los aspectos fundamentales, los principios de diseño y los desafíos inherentes a la arquitectura de microservicios en el desarrollo de software contemporáneo.\nFundamentos de la Arquitectura de Microservicios # 1. Independencia y Descentralización # En una arquitectura de microservicios, cada microservicio es una entidad independiente que se desarrolla, despliega y escala de manera independiente. Esto permite a los equipos de desarrollo trabajar de manera autónoma en diferentes partes de la aplicación, lo que mejora la velocidad y la flexibilidad del desarrollo.\n2. Acoplamiento Reducido # Los microservicios se comunican entre sí a través de interfaces bien definidas, generalmente a través de API RESTful o mensajes. Esto reduce el acoplamiento entre los componentes del sistema, lo que facilita la evolución y el mantenimiento de la aplicación a lo largo del tiempo.\n3. Escalabilidad y Tolerancia a Fallos # La arquitectura de microservicios facilita la escalabilidad horizontal, lo que permite agregar o eliminar instancias de microservicios según la demanda. Además, la naturaleza distribuida de esta arquitectura mejora la tolerancia a fallos, ya que un fallo en un microservicio no afecta necesariamente al funcionamiento del sistema en su conjunto.\nPrincipios de Diseño de Microservicios # 1. Principio de Responsabilidad Única # Cada microservicio debe tener una única responsabilidad empresarial claramente definida. Esto garantiza que cada componente sea cohesivo y se centre en una funcionalidad específica, lo que facilita su desarrollo, mantenimiento y evolución.\n2. Separación de Datos # Cada microservicio debe tener su propia base de datos, lo que favorece la independencia y la escalabilidad. Sin embargo, también puede haber casos donde se compartan bases de datos entre microservicios, pero esto debe hacerse con precaución para evitar el acoplamiento no deseado.\n3. Comunicación Asíncrona # La comunicación entre microservicios suele ser asíncrona y basada en mensajes. Esto permite que los componentes del sistema operen de manera independiente y tolerante a fallos, ya que no están directamente acoplados a la disponibilidad de otros servicios.\nDesafíos de la Arquitectura de Microservicios # 1. Complejidad Operativa # La gestión de un gran número de microservicios distribuidos puede aumentar la complejidad operativa, especialmente en lo que respecta al monitoreo, la depuración y la implementación de actualizaciones.\n2. Coordinación entre Microservicios # La coordinación entre los microservicios puede ser un desafío, especialmente en lo que respecta a la transaccionalidad y la consistencia de los datos distribuidos.\n3. Pruebas y Depuración # Las pruebas y la depuración en un entorno de microservicios pueden ser más complejas que en una arquitectura monolítica, ya que involucran múltiples componentes distribuidos que deben probarse y depurarse de manera independiente.\nMejores Prácticas y Consideraciones # Al implementar una arquitectura de microservicios, es importante seguir algunas mejores prácticas:\nAutomatización de la Infraestructura: Utilizar herramientas de automatización para la implementación, escalado y gestión de la infraestructura subyacente.\nDiseño de API Robusto: Diseñar interfaces de API robustas y claras para facilitar la comunicación entre microservicios y promover la evolución independiente de cada componente.\nMonitoreo y Registro: Implementar una sólida infraestructura de monitoreo y registro para supervisar el rendimiento y la salud de los microservicios en tiempo real.\nConclusiones # La arquitectura de microservicios ofrece numerosos beneficios en términos de escalabilidad, flexibilidad y resistencia, pero también presenta desafíos únicos en términos de complejidad operativa y coordinación entre componentes distribuidos. Al comprender los fundamentos, los principios de diseño y los desafíos asociados con esta arquitectura, los equipos de desarrollo pueden aprovechar al máximo su potencial y crear sistemas de software robustos y adaptables que satisfagan las necesidades del negocio en un entorno digital en constante evolución.\nReferencias # Fowler, M. (2014). \u0026ldquo;Microservices: Decomposing Applications for Deployability and Scalability.\u0026rdquo; Retrieved from: https://martinfowler.com/articles/microservices.html Newman, S. (2015). \u0026ldquo;Building Microservices: Designing Fine-Grained Systems.\u0026rdquo; O\u0026rsquo;Reilly Media. Richardson, C. (2018). \u0026ldquo;Microservice Patterns: With examples in Java.\u0026rdquo; Manning Publications. ","date":"27 marzo 2024","permalink":"/platform/backend/microservicios/","section":"Backends","summary":"La arquitectura de microservicios se ha convertido en un enfoque popular en el desarrollo de software debido a su capacidad para crear sistemas escalables, flexibles y resilientes.","title":"Arquitectura de Microservicios"},{"content":"El Modelo-Vista-Controlador (MVC) es un patrón de diseño arquitectónico fundamental en el desarrollo de software que separa las preocupaciones de una aplicación en tres componentes principales: Modelo, Vista y Controlador. Este artículo proporciona una visión exhaustiva del patrón MVC, explorando sus conceptos fundamentales, su aplicación en el desarrollo de software y las mejores prácticas asociadas. Además, se examinan ejemplos de uso del patrón MVC en diferentes contextos de desarrollo de software.\nIntroducción # El Patrón de Diseño Modelo-Vista-Controlador (MVC) es un enfoque arquitectónico ampliamente utilizado en el desarrollo de software para crear aplicaciones bien estructuradas y mantenibles. Este patrón promueve la separación de responsabilidades y la modularidad del código, lo que facilita la escalabilidad y la colaboración en equipos de desarrollo. En este artículo, se explorarán en detalle los componentes del patrón MVC, sus beneficios y cómo se aplica en la práctica.\nComponentes del Patrón MVC # El patrón MVC consta de tres componentes principales:\n1. Modelo (Model) # El Modelo representa los datos y la lógica empresarial de la aplicación. Esta capa se encarga de almacenar, manipular y procesar la información. El Modelo no depende de la Vista ni del Controlador, lo que permite una mayor independencia y reutilización del código. Además, el Modelo suele notificar a la Vista sobre los cambios en los datos mediante un mecanismo de observación o eventos.\n2. Vista (View) # La Vista es la interfaz de usuario que presenta los datos al usuario final. Es responsable de la presentación de la información y la interacción con el usuario. La Vista obtiene los datos del Modelo y los muestra de manera adecuada para su visualización. En el patrón MVC, la Vista no realiza operaciones de lógica empresarial; simplemente muestra los datos proporcionados por el Modelo.\n3. Controlador (Controller) # El Controlador actúa como intermediario entre la Vista y el Modelo. Responde a las interacciones del usuario y actualiza el Modelo en consecuencia. Además, el Controlador actualiza la Vista en función de los cambios en el Modelo. Esta capa se encarga de manejar eventos, como clics de botones o solicitudes de información, y coordina las acciones necesarias entre el Modelo y la Vista.\nAplicación del Patrón MVC # El patrón MVC se aplica en una amplia variedad de entornos de desarrollo de software, incluidas aplicaciones web, de escritorio y móviles. A continuación, se presentan algunas áreas donde se utiliza este patrón:\n1. Desarrollo Web # En el desarrollo web, el MVC se utiliza para separar la lógica del negocio de la interfaz de usuario. Los frameworks web populares, como Django (para Python), Ruby on Rails (para Ruby) y Laravel (para PHP), implementan el patrón MVC para estructurar aplicaciones web de manera eficiente y escalable.\n2. Aplicaciones de Escritorio # En el desarrollo de aplicaciones de escritorio, el MVC se utiliza para separar la lógica de presentación de los datos y la interacción del usuario. Frameworks como JavaFX para Java y Cocoa para Swift/Objective-C en el desarrollo de aplicaciones macOS/iOS, ofrecen soporte para implementar el patrón MVC de manera efectiva.\n3. Desarrollo Móvil # En el desarrollo móvil, el MVC se utiliza para separar la lógica del negocio de la interfaz de usuario en aplicaciones para dispositivos móviles. Los frameworks como React Native y Flutter permiten implementar el patrón MVC en aplicaciones móviles multiplataforma de manera eficiente.\nMejores Prácticas y Consideraciones # Al aplicar el patrón MVC en el desarrollo de software, es importante seguir algunas mejores prácticas y consideraciones:\nSeparación de Responsabilidades: Asegurarse de que cada componente (Modelo, Vista, Controlador) tenga una responsabilidad clara y esté lo más desacoplado posible.\nReutilización del Código: Buscar oportunidades para reutilizar componentes en toda la aplicación, lo que facilita el mantenimiento y la escalabilidad.\nTesting: Facilitar la escritura de pruebas unitarias al tener componentes bien definidos y desacoplados.\nEscalabilidad: Diseñar la aplicación de manera que pueda crecer y adaptarse fácilmente a medida que cambian los requisitos y la complejidad del sistema.\nConclusiones # El Patrón de Diseño Modelo-Vista-Controlador (MVC) es una herramienta invaluable en el desarrollo de software, ya que promueve la modularidad, la escalabilidad y el mantenimiento del código. Al separar las preocupaciones en Modelos, Vistas y Controladores, el MVC permite un desarrollo más eficiente y colaborativo. Al comprender los fundamentos y las mejores prácticas asociadas con el patrón MVC, los desarrolladores pueden crear aplicaciones robustas y bien estructuradas que satisfagan las necesidades de los usuarios y los clientes.\nReferencias # Gamma, E., Helm, R., Johnson, R., \u0026amp; Vlissides, J. (1994). Design Patterns: Elements of Reusable Object-Oriented Software. Addison-Wesley. Fowler, M. (2002). Patterns of Enterprise Application Architecture. Addison-Wesley. Freeman, E., \u0026amp; Robson, E. (2004). Head First Design Patterns. O\u0026rsquo;Reilly Media. Recursos # ","date":"27 marzo 2024","permalink":"/platform/backend/mvc/intro/","section":"Backends","summary":"El Modelo-Vista-Controlador (MVC) es un patrón de diseño arquitectónico fundamental en el desarrollo de software que separa las preocupaciones de una aplicación en tres componentes principales: Modelo, Vista y Controlador.","title":"Patrón de Diseño MVC"},{"content":"El Patrón de Diseño Modelo-Vista-Controlador (MVC) sigue siendo relevante incluso en arquitecturas modernas de microservicios, donde el backend y el frontend están separados y se comunican a través de una API. Este artículo explora cómo el MVC se adapta a esta arquitectura, con énfasis en la separación de responsabilidades, la escalabilidad y las mejores prácticas para desarrollar sistemas distribuidos y eficientes.\nIntroducción # En la era de las arquitecturas de microservicios, donde la modularidad y la escalabilidad son cruciales, el Patrón de Diseño Modelo-Vista-Controlador (MVC) sigue siendo una herramienta valiosa. Cuando el backend y el frontend están separados y se comunican a través de una API, el MVC puede aplicarse de manera efectiva para estructurar y organizar el código en ambos lados de la aplicación. Este artículo explora cómo se implementa el patrón MVC en este contexto específico y las consideraciones clave que los desarrolladores deben tener en cuenta.\nComponentes del Patrón MVC en una Arquitectura de Microservicios # El patrón MVC en una arquitectura de microservicios con comunicación API sigue manteniendo sus tres componentes principales, pero con algunas adaptaciones:\n1. Modelo (Model) # En esta arquitectura, el Modelo sigue siendo responsable de la lógica empresarial y el acceso a los datos. Sin embargo, en lugar de acceder directamente a una base de datos, el Modelo puede interactuar con otros microservicios a través de sus propias API. Esto promueve la independencia y la escalabilidad de cada microservicio.\n2. Vista (View) # La Vista en el contexto de una arquitectura de microservicios se refiere a la interfaz de usuario del frontend. Este puede ser un cliente web, una aplicación móvil o cualquier otra interfaz de usuario. La Vista consume datos proporcionados por el backend a través de la API y se encarga de la presentación y la interacción con el usuario.\n3. Controlador (Controller) # El Controlador actúa como intermediario entre la Vista y el Modelo, pero en este caso, también puede servir como un punto de entrada para las solicitudes del frontend a través de la API del backend. El Controlador maneja las solicitudes del cliente, realiza validaciones y coordina las operaciones necesarias entre la Vista y el Modelo. Además, puede ser responsable de la transformación de datos entre el formato requerido por el frontend y el almacenado en el backend.\nAplicación del Patrón MVC en una Arquitectura de Microservicios # El MVC se aplica en ambos lados de la arquitectura de microservicios:\n1. Backend # En el backend, cada microservicio puede seguir el patrón MVC para estructurar su código. El Controlador se encarga de manejar las solicitudes de API entrantes, validar datos, llamar al Modelo correspondiente y enviar una respuesta adecuada al cliente. El Modelo maneja la lógica empresarial y la interacción con otros microservicios, mientras que la Vista se omite, ya que el backend no se ocupa de la presentación directa al usuario.\n2. Frontend # En el frontend, el MVC también se aplica para estructurar la lógica de la aplicación. El Controlador (o componentes equivalentes en el framework utilizado, como controladores de rutas en Angular o controladores de estado en React) maneja las interacciones del usuario y las solicitudes a la API del backend. La Vista es responsable de mostrar los datos recibidos del backend y de interactuar con el usuario, mientras que el Modelo, en este contexto, puede ser opcional y limitado a la gestión del estado de la interfaz de usuario.\nMejores Prácticas y Consideraciones # Al aplicar el patrón MVC en una arquitectura de microservicios con comunicación API, es importante considerar algunas mejores prácticas:\nAPI Design First: Diseñar la API del backend antes de implementar el frontend para garantizar una comunicación clara y eficiente entre los microservicios y el cliente.\nSeparación de Responsabilidades: Mantener una clara separación de responsabilidades entre los componentes del MVC en el frontend y el backend para promover la modularidad y la reutilización del código.\nGestión de Errores y Tolerancia a Fallos: Implementar estrategias de manejo de errores y recuperación para garantizar la robustez del sistema en un entorno distribuido.\nSeguridad: Implementar medidas de seguridad adecuadas, como autenticación y autorización, en la API del backend para proteger los datos y prevenir ataques malintencionados.\nConclusiones # El Patrón de Diseño Modelo-Vista-Controlador (MVC) es una herramienta efectiva incluso en arquitecturas de microservicios con comunicación API, donde el backend y el frontend están separados. Al seguir las mejores prácticas y consideraciones específicas de esta arquitectura, los desarrolladores pueden crear sistemas distribuidos escalables, modulares y fáciles de mantener. El MVC proporciona una estructura clara y organizada que facilita el desarrollo y la colaboración en equipos de desarrollo distribuidos.\nRecursos # Mira este tutorial de cómo hacer una API con Express usando MVC. Primero debes acceder al repositorio de GitHub del proyecto que están utilizando, clónalo o descárgalo en tu computadora, así podrás seguir lo que se está explicando.\nClick aquí para acceder al repositorio\n","date":"27 marzo 2024","permalink":"/platform/backend/mvc/microservicios/","section":"Backends","summary":"El Patrón de Diseño Modelo-Vista-Controlador (MVC) sigue siendo relevante incluso en arquitecturas modernas de microservicios, donde el backend y el frontend están separados y se comunican a través de una API.","title":"Patrón MVC en una Arquitectura de Microservicios con Comunicación API"},{"content":"Descripción # El propósito de este proyecto es desarrollar una API RESTful utilizando Express.js y MySQL para crear una plataforma de blogging interactiva. Esta plataforma permitirá a los usuarios registrar cuentas, crear publicaciones, comentar en publicaciones de otros usuarios, explorar publicaciones por categorías y buscar publicaciones por título.\nRequisitos Funcionales # Gestión de Usuarios:\nLos usuarios podrán registrarse en la plataforma (crearse un perfil). Los usuarios podrán actualizar sus datos personales. Los usuarios podrán eliminar sus cuentas. El administrador podrá ver todos los usuarios registrados en la plataforma. Roles:\nSe establecerán roles de usuario y administrador. El administrador tendrá acceso completo a todas las funcionalidades de la API. Los usuarios tendrán permisos limitados según sus roles. Gestión de Publicaciones:\nLos usuarios podrán: Crear nuevas publicaciones. Actualizar sus propias publicaciones. Eliminar sus propias publicaciones. Ver sus propias publicaciones y las de otros usuarios. Filtrar las publicaciones por categorías. Buscar publicaciones por título. Gestión de Categorías:\nEl administrador tendrá acceso completo para crear, leer, actualizar y eliminar categorías (CRUD). Cada publicación estará asociada a una o más categorías. Gestión de Comentarios:\nLos usuarios podrán Comentar en las publicaciones. Actualizar sus propios comentarios. Eliminar sus propios comentarios. Los comentarios solo serán visibles a través de la publicación a la que pertenecen. Requisitos # La API deberá seguir las mejores prácticas de diseño REST. Se deberá utilizar mysql2 como dependencia para interactuar con la base de datos MySQL. Se proporcionará documentación completa de la API. NO ES NECESARIO REALIZAR FRONTEND (HTM, CSS, JavaScript), SOLO LA API. No está permitido utilizar dependencias o librerías que no se han enseñado en clase. Documentación con Swagger en una ruta de tu API: /api-docs. Entregables # Envía un documento PDF con lo siguiente:\nLink a tu repositorio en GitHub que contenga el código fuente de la API. Un diagrama Entidad-Relación (ERD) que represente la estructura de la base de datos. Nota: La evaluación del proyecto se basará en la funcionalidad, la calidad del código, la organización del proyecto, y el cumplimiento de los requisitos establecidos. Se espera una implementación robusta y escalable de la API de blogging.\n","date":"15 marzo 2024","permalink":"/platform/express/pf-blogging/","section":"Expresses","summary":"Descripción # El propósito de este proyecto es desarrollar una API RESTful utilizando Express.","title":"Sistema de Blogging"},{"content":"Mini Proyecto: API de Usuarios con Node.js y MySQL # El objetivo de este mini proyecto es crear una API en Node.js que sirva datos de usuarios en formato JSON, utilizando el módulo http. La API también debe ser capaz de exportar los datos de usuarios a un archivo CSV y de importar datos de usuarios desde un archivo CSV a una base de datos MySQL.\nEspecificaciones # Ruta /:\nEsta ruta muestra un archivo html con una interfaz sencilla al usuario: Ejemplo: Ver imagen Ruta /api/usuarios:\nEsta ruta devolverá una lista de usuarios en formato JSON. Cada usuario debe contener los siguientes campos: id (identificador único del usuario) nombres apellidos dirección correo electrónico dni (Documento Nacional de Identidad) edad fecha_creacion (fecha de creación del usuario) telefono (otros campos pueden ser agregados según necesidad) Ruta /api/usuarios/export:\nEsta ruta se encargará de exportar los datos de usuarios a un archivo CSV llamado \u0026ldquo;usuarios.csv\u0026rdquo;.\nEl archivo CSV debe contener una fila de encabezados con los nombres de los campos: id, nombres, apellidos, direccion, correo, dni, edad, fecha_creacion, telefono.\nCada fila subsiguiente del archivo CSV debe contener los datos de un usuario.\nEjemplo de Archivo CSV Exportado (\u0026ldquo;usuarios.csv\u0026rdquo;):\nid,nombres,apellidos,direccion,correo,dni,edad,fecha_creacion,telefono 1,John,Doe,Calle Falsa 123,john@example.com,12345678,30,2024-03-01,123-456-7890 2,Jane,Smith,Avenida Principal 456,jane@example.com,87654321,25,2024-03-01,987-654-3210 3,Alice,Johnson,Plaza Central 789,alice@example.com,13579246,35,2024-03-01,456-789-0123 Ruta /api/usuarios/import:\nEsta ruta se encargará de leer el archivo \u0026ldquo;usuarios.csv\u0026rdquo; y guardar los datos en la base de datos MySQL. Se debe comprobar que los datos que se están guardando no estén repetidos en cuanto al id y al correo electrónico. No se deben subir filas repetidas. Se pueden manejar errores como archivos no encontrados, formatos incorrectos, etc. Además, se implementará una validación de datos para asegurar que los campos requeridos estén presentes y que tengan el formato adecuado (por ejemplo, validar el formato del correo electrónico). Se implementarán medidas de seguridad para proteger la API contra ataques comunes como inyecciones SQL. Se utilizarán consultas preparadas o consultas parametrizadas para evitar este tipo de ataques. Ejemplo: try { // Definir la consulta preparada const sql = \u0026#34;SELECT * FROM usuarios WHERE nombre = ?\u0026#34;; // Ejecutar la consulta preparada con el parámetro proporcionado const nombre = \u0026#34;Juan\u0026#34;; const result = await pool.execute(sql, [nombre]); // Obtener las filas resultantes de la consulta const rows = result[0]; // Liberar la conexión connection.release(); } catch (error) { // Manejar cualquier error que pueda ocurrir durante la consulta console.error(\u0026#34;Error al consultar usuario:\u0026#34;, error); throw error; } Se mejorará el manejo de errores para proporcionar mensajes de error descriptivos y útiles en caso de que ocurran problemas durante la exportación o importación de datos. Duración del Proyecto # El proyecto tiene una duración estimada de 1 semana, durante las cuales se espera que trabajes en la implementación de las funcionalidades descritas anteriormente, así como en la integración de mejoras de tu propia iniciativa. Se te recomienda utilizar el tiempo dedicado para esto, y aún más de ser necesario.\n","date":"1 marzo 2024","permalink":"/platform/nodejs/mp/","section":"Nodejs","summary":"Mini Proyecto: API de Usuarios con Node.","title":"Mini proyecto NodeJS"},{"content":"","date":"1 marzo 2024","permalink":"/platform/nodejs/","section":"Nodejs","summary":"","title":"Nodejs"},{"content":"Antes de poder utilizar Swagger-autogen en tu proyecto, primero debes instalarlo a través de npm, el gestor de paquetes de Node.js. Puedes hacerlo ejecutando el siguiente comando en tu terminal:\nnpm install --save-dev swagger-autogen Una vez instalado, podrás utilizar la funcionalidad de Swagger-autogen para generar automáticamente la documentación Swagger para tu API.\nConfiguración del script swagger.js # El script swagger.js es una herramienta poderosa que utiliza Swagger-autogen para generar automáticamente la documentación Swagger basada en las rutas de nuestra API y la información proporcionada. A continuación, detallamos cómo configurar y ejecutar este script en tu proyecto:\n// swagger.js const swaggerAutogen = require(\u0026#34;swagger-autogen\u0026#34;)(); // Información básica de la API const doc = { info: { title: \u0026#34;My API\u0026#34;, description: \u0026#34;Descripción de mi API\u0026#34;, }, host: \u0026#34;localhost:3000\u0026#34;, // El host donde se sirve la API }; // Rutas de la API que se documentarán const outputFile = \u0026#34;./swagger-output.json\u0026#34;; // Ubicación del archivo de salida const routes = [\u0026#34;./path/userRoutes.js\u0026#34;, \u0026#34;./path/bookRoutes.js\u0026#34;]; // Rutas de los archivos de la API /* NOTA: Si estás utilizando el enrutador express Router, debes pasar en el array \u0026#39;routes\u0026#39; solo el archivo raíz donde comienza la ruta, como index.js, app.js, routes.js, etc. */ // Generación de la documentación Swagger swaggerAutogen(outputFile, routes, doc); Ejecución del Script # Para ejecutar el script y generar la documentación Swagger, necesitamos agregar un script personalizado en el archivo package.json de nuestro proyecto. Aquí te mostramos cómo hacerlo:\n// package.json { ... \u0026#34;scripts\u0026#34;: { ... \u0026#34;swagger\u0026#34;: \u0026#34;node ./swagger.js\u0026#34; } } Una vez que hayamos configurado el script en el archivo package.json, podemos ejecutar el siguiente comando en nuestra terminal:\nnpm run swagger Resultado # Después de ejecutar el comando anterior, el script swagger.js analizará las rutas de tu API, generará la documentación Swagger y la guardará en el archivo especificado (swagger-output.json en este caso). Ahora puedes acceder a este archivo para ver la documentación Swagger generada para tu API.\nConclusiones # Mediante el uso de Swagger-autogen y el script swagger.js, hemos simplificado el proceso de generación de documentación Swagger para nuestras APIs desarrolladas en Express.js y Node.js. Ahora, con solo ejecutar un comando, podemos obtener una documentación Swagger completa y precisa, lo que facilita la comprensión y el uso de nuestra API por parte de otros desarrolladores. Este enfoque mejora la colaboración y la eficiencia en el desarrollo de software, lo que resulta en productos de mayor calidad y mejor documentados.\nAquí puedes leer cómo empezar a usarlo:\nhttps://swagger-autogen.github.io/docs/getting-started/quick-start\n","date":"9 febrero 2024","permalink":"/platform/express/swagger-autogen/","section":"Expresses","summary":"Antes de poder utilizar Swagger-autogen en tu proyecto, primero debes instalarlo a través de npm, el gestor de paquetes de Node.","title":"Swagger Autogen"},{"content":"En el mundo de la programación de aplicaciones web, el diseño y la documentación de APIs (Interfaces de Programación de Aplicaciones) son fundamentales para la comunicación efectiva entre desarrolladores y la creación de aplicaciones robustas e interoperables. Entre las numerosas herramientas disponibles para facilitar este proceso, Swagger UI se destaca como una solución popular y poderosa. En este artículo, exploraremos en detalle qué es Swagger UI, cómo funciona y por qué es una herramienta invaluable para desarrolladores de APIs.\n¿Qué es Swagger UI? # Swagger UI es una herramienta de código abierto que permite a los desarrolladores describir, documentar y probar APIs de forma interactiva. Utiliza la especificación OpenAPI (anteriormente conocida como Swagger), que define un formato estándar para describir y documentar APIs RESTful. Swagger UI genera una interfaz gráfica interactiva basada en esta especificación, lo que facilita a los desarrolladores comprender rápidamente la estructura y funcionalidades de una API.\nCaracterísticas Principales: # 1. Documentación Interactiva: # Swagger UI genera una documentación interactiva basada en la especificación OpenAPI, que incluye detalles sobre los puntos finales de la API, los parámetros esperados, los métodos HTTP admitidos y las respuestas esperadas.\n2. Exploración de Endpoints: # Los desarrolladores pueden explorar fácilmente todos los endpoints disponibles en la API, así como probarlos directamente desde la interfaz de Swagger UI.\n3. Generación de Clientes: # Swagger UI facilita la generación de clientes para consumir la API en una variedad de lenguajes de programación. Esto permite a los desarrolladores comenzar a interactuar con la API rápidamente sin tener que escribir manualmente las llamadas HTTP.\n4. Personalización: # Swagger UI es altamente personalizable, lo que permite a los desarrolladores adaptar la apariencia y el comportamiento de la interfaz según sus necesidades específicas.\nCómo Funciona: # Especificación OpenAPI: El primer paso para utilizar Swagger UI es crear una especificación OpenAPI para describir la API que se va a documentar. Esta especificación se escribe en formato YAML o JSON y contiene información detallada sobre los endpoints, parámetros, tipos de datos y más.\nIntegración con la Aplicación: Una vez que se ha creado la especificación OpenAPI, se integra con Swagger UI dentro de la aplicación web. Esto puede hacerse agregando el archivo de especificación a la configuración de Swagger UI o utilizando herramientas específicas de integración.\nGeneración Automática de Documentación: Swagger UI utiliza la especificación OpenAPI para generar automáticamente una interfaz gráfica interactiva que documenta la API. Esta interfaz incluye una lista de endpoints, detalles sobre cada endpoint y opciones para probarlos directamente desde la interfaz.\nBeneficios de Swagger UI: # 1. Mejora de la Comunicación: # Swagger UI proporciona una forma clara y estructurada de documentar APIs, lo que facilita la comunicación entre equipos de desarrollo y usuarios de la API.\n2. Aumento de la Productividad: # Al proporcionar una interfaz interactiva para explorar y probar la API, Swagger UI ayuda a los desarrolladores a comprender rápidamente cómo interactuar con la API y a desarrollar aplicaciones de manera más eficiente.\n3. Mantenibilidad y Escalabilidad: # Al mantener la documentación de la API actualizada con la especificación OpenAPI, Swagger UI facilita la mantenibilidad y escalabilidad de las aplicaciones, ya que todos los cambios en la API se reflejan automáticamente en la documentación.\nConclusiones: # Swagger UI es una herramienta invaluable para desarrolladores de APIs que buscan simplificar el proceso de documentación y pruebas de APIs. Su capacidad para generar documentación interactiva basada en la especificación OpenAPI facilita la comprensión y el uso de APIs, mejorando así la productividad y la colaboración entre equipos de desarrollo. Con su amplia gama de características y su facilidad de uso, Swagger UI se ha convertido en una opción popular para empresas y desarrolladores individuales que buscan crear APIs potentes y bien documentadas.\nVideos # Esta es la página que usan en el video:\nhttps://www.freecodecamp.org/news/rest-api-design-best-practices-build-a-rest-api/\n","date":"9 febrero 2024","permalink":"/platform/express/swaggerui/","section":"Expresses","summary":"En el mundo de la programación de aplicaciones web, el diseño y la documentación de APIs (Interfaces de Programación de Aplicaciones) son fundamentales para la comunicación efectiva entre desarrolladores y la creación de aplicaciones robustas e interoperables.","title":"Swagger UI"},{"content":"Regresar a ver los ejercicios\nAquí tienes una implementación básica para cada uno de los ejercicios propuestos. Ten en cuenta que estas soluciones son simples y pueden mejorarse o modificarse según los requisitos específicos.\nAdemás, es recomendable que tú, como estudiante, intentes resolver los ejercicios por ti mismo antes de revisar esta solución debido a que así lograrás una comprensión más profunda de los conceptos.\nEjercicio 1: API para cargar imágenes de perfil de usuario # // app.js import express from \u0026#34;express\u0026#34;; import multer from \u0026#34;multer\u0026#34;; import path from \u0026#34;path\u0026#34;; const app = express(); // Configuración de Multer const storage = multer.diskStorage({ destination: function (req, file, cb) { cb(null, \u0026#34;uploads/profiles/\u0026#34;); // Directorio para imágenes de perfil }, filename: function (req, file, cb) { cb(null, file.originalname); // Nombre original del archivo }, }); const upload = multer({ storage: storage, fileFilter: (req, file, cb) =\u0026gt; { const filetypes = /jpeg|jpg|png/; const mimetype = filetypes.test(file.mimetype); const extname = filetypes.test( path.extname(file.originalname).toLowerCase() ); if (mimetype \u0026amp;\u0026amp; extname) { return cb(null, true); } else { cb(new Error(\u0026#34;Solo se permiten imágenes JPEG, JPG o PNG\u0026#34;)); } }, limits: { fileSize: 1024 * 1024, // 1 MB (tamaño máximo del archivo) }, }); // Ruta para cargar una imagen de perfil app.post(\u0026#34;/uploadProfile\u0026#34;, upload.single(\u0026#34;profileImage\u0026#34;), (req, res) =\u0026gt; { res.send(\u0026#34;Imagen de perfil subida exitosamente\u0026#34;); }); app.listen(3000, () =\u0026gt; { console.log(\u0026#34;Servidor corriendo en el puerto 3000\u0026#34;); }); Ejercicio 2: API para cargar archivos de documentos # // app.js import express from \u0026#34;express\u0026#34;; import multer from \u0026#34;multer\u0026#34;; import path from \u0026#34;path\u0026#34;; const app = express(); // Configuración de Multer const storage = multer.diskStorage({ destination: function (req, file, cb) { cb(null, \u0026#34;uploads/documents/\u0026#34;); // Directorio para documentos }, filename: function (req, file, cb) { cb(null, file.originalname); // Nombre original del archivo }, }); const upload = multer({ storage: storage, fileFilter: (req, file, cb) =\u0026gt; { const filetypes = /pdf|doc|docx/; const mimetype = filetypes.test(file.mimetype); const extname = filetypes.test( path.extname(file.originalname).toLowerCase() ); if (mimetype \u0026amp;\u0026amp; extname) { return cb(null, true); } else { cb(new Error(\u0026#34;Solo se permiten documentos PDF, DOC o DOCX\u0026#34;)); } }, limits: { fileSize: 5 * 1024 * 1024, // 5 MB (tamaño máximo del archivo) }, }); // Ruta para cargar un documento app.post(\u0026#34;/uploadDocument\u0026#34;, upload.single(\u0026#34;documentFile\u0026#34;), (req, res) =\u0026gt; { res.send(\u0026#34;Documento subido exitosamente\u0026#34;); }); app.listen(3000, () =\u0026gt; { console.log(\u0026#34;Servidor corriendo en el puerto 3000\u0026#34;); }); Recuerda ajustar los directorios de almacenamiento y los tipos de archivos permitidos según tus necesidades específicas. Además, asegúrate de manejar adecuadamente los errores y agregar lógica adicional según los requisitos de tu aplicación.\n","date":"9 febrero 2024","permalink":"/platform/express/archivos/solucion/","section":"Expresses","summary":"Regresar a ver los ejercicios","title":"Solución: Carga de archivos"},{"content":"¡Claro! Aquí tienes dos ejercicios detallados para crear una API que cargue archivos usando Express y Multer. Estos ejercicios están diseñados para ser implementados en un entorno de desarrollo Node.js y se pueden probar fácilmente utilizando Postman para enviar solicitudes a la API.\nEjercicio 1: Crear una API para cargar imágenes de perfil de usuario # Especificaciones: # Crear una API utilizando Express que permita a los usuarios cargar imágenes de perfil. Utilizar Multer como middleware para manejar la carga de archivos en la ruta \u0026lsquo;/uploadProfile\u0026rsquo;. Almacenar las imágenes de perfil en un directorio local en el servidor. Implementar validaciones para asegurar que solo se puedan cargar archivos de imagen (por ejemplo, JPEG, PNG) y que no excedan un tamaño máximo especificado. Devolver una respuesta adecuada después de que se haya cargado la imagen, indicando el éxito o el fallo de la carga. Puntos a considerar: # Configurar Multer para almacenar los archivos en un directorio específico en el servidor. Utilizar las opciones de Multer para filtrar y validar los archivos subidos. Implementar manejo de errores para casos donde la carga de archivos falle debido a diversas razones, como el tipo de archivo incorrecto o el tamaño excedido. Ejercicio 2: Crear una API para cargar archivos de documentos # Especificaciones: # Desarrollar una API utilizando Express que permita a los usuarios cargar archivos de documentos. Utilizar Multer como middleware para manejar la carga de archivos en la ruta \u0026lsquo;/uploadDocument\u0026rsquo;. Almacenar los archivos de documentos en un directorio local en el servidor. Implementar restricciones de seguridad para evitar la carga de archivos maliciosos, como la ejecución de scripts o la carga de archivos de gran tamaño que puedan causar una denegación de servicio (DoS). Devolver una respuesta adecuada después de que se haya cargado el archivo de documento, indicando el éxito o el fallo de la carga. Puntos a considerar: # Configurar Multer para almacenar los archivos en un directorio específico en el servidor. Implementar validaciones de seguridad, como la comprobación del tipo MIME y la limitación del tamaño máximo de archivo. Manejar adecuadamente los errores y devolver respuestas JSON claras y descriptivas en caso de fallos durante la carga de archivos. Notas adicionales: # Asegúrate de instalar y configurar correctamente Multer en tu proyecto antes de comenzar a implementar los ejercicios. Utiliza Postman para enviar solicitudes POST a las rutas de carga de archivos y prueba la funcionalidad de la API cargando varios tipos de archivos. Realiza pruebas exhaustivas para garantizar que la API maneje correctamente diferentes escenarios, como archivos grandes, tipos de archivo no permitidos y situaciones de error. Si estas luchando mucho tiempo con estos ejercicios, aquí te dejaré una posible solución, pero recuerda que no debes ver la solución hasta que hayas hecho tu mejor esfuerzo. Además, puede que tú hayas pensado una solución ligeramente diferente a la que te propondremos. Esto es debido a que existen muchas formas de resolver un mismo asunto. Sin embargo, esto te puede servir de guía.\nVer solución\n","date":"9 febrero 2024","permalink":"/platform/express/archivos/ejercicios/","section":"Expresses","summary":"¡Claro! Aquí tienes dos ejercicios detallados para crear una API que cargue archivos usando Express y Multer.","title":"Ejercicios: Carga de archivos"},{"content":"La carga de archivos es una funcionalidad esencial en las aplicaciones web modernas, permitiendo a los usuarios subir imágenes, documentos y otros tipos de archivos al servidor. En el contexto de Node.js, Express.js es una de las opciones más populares para construir servidores web. En este artículo, exploraremos tanto la teoría como la práctica detrás de la carga de archivos en Express y Node.js, y también discutiremos algunos servidores de carga de archivos disponibles.\nFundamentos de la Carga de Archivos: # 1. Modelo Cliente-Servidor: # La carga de archivos sigue el modelo cliente-servidor, donde el cliente (navegador web) envía archivos al servidor (aplicación Express) para su procesamiento y almacenamiento.\n2. Protocolo HTTP: # Para la carga de archivos, se utilizan solicitudes HTTP POST, que permiten a los clientes enviar datos, incluidos archivos, al servidor.\nHerramientas en Node.js y Express: # 1. Multer: # Multer es un middleware de Express que simplifica el manejo de la carga de archivos. Permite configurar cómo se procesan y almacenan los archivos subidos en el servidor.\n2. Gestión de Archivos en Node.js: # Node.js proporciona el módulo fs (file system) para interactuar con el sistema de archivos del servidor. Esto facilita la manipulación de archivos subidos, como mover, eliminar o leer archivos.\nImplementación Práctica con Multer: # 1. Configuración Básica: # Para utilizar Multer, primero debemos instalarlo en nuestro proyecto mediante npm. Luego, configuramos Multer en nuestra aplicación Express para especificar el destino de almacenamiento y otras opciones de manejo de archivos.\n2. Integración con Rutas: # Multer se integra fácilmente con las rutas de Express. Definimos rutas específicas para manejar las solicitudes de carga de archivos, utilizando los middleware de Multer para procesar los archivos subidos y realizar acciones correspondientes.\n3. Validación y Seguridad: # Es esencial implementar medidas de validación y seguridad al cargar archivos en el servidor. Esto puede incluir la comprobación del tipo de archivo, el tamaño máximo permitido y la prevención de ataques de denegación de servicio (DoS).\nServidores de Carga de Archivos: # 1. Amazon S3: # Amazon Simple Storage Service (S3) es un servicio de almacenamiento en la nube altamente escalable y confiable. Es común utilizar Multer junto con la biblioteca multer-s3 para cargar archivos directamente en Amazon S3.\n2. Google Cloud Storage: # Google Cloud Storage ofrece un almacenamiento seguro y escalable en la nube. Al igual que con Amazon S3, podemos utilizar Multer con la biblioteca multer-google-storage para cargar archivos en Google Cloud Storage.\nConclusiones y Recomendaciones: # La carga de archivos en Express y Node.js es una tarea esencial en el desarrollo de aplicaciones web. Con el uso de herramientas como Multer y la comprensión de los principios subyacentes, los desarrolladores pueden implementar soluciones robustas y seguras para gestionar la carga de archivos de manera eficiente. Además, la integración con servicios de almacenamiento en la nube como Amazon S3 y Google Cloud Storage puede mejorar la escalabilidad y la disponibilidad de la aplicación. Al considerar aspectos como la validación, la seguridad y las opciones de almacenamiento, los desarrolladores pueden garantizar un funcionamiento óptimo de la funcionalidad de carga de archivos en sus aplicaciones web.\n","date":"9 febrero 2024","permalink":"/platform/express/archivos/intro/","section":"Expresses","summary":"La carga de archivos es una funcionalidad esencial en las aplicaciones web modernas, permitiendo a los usuarios subir imágenes, documentos y otros tipos de archivos al servidor.","title":"Carga de Archivos en Express y Node.js"},{"content":"La gestión de archivos es esencial en muchas aplicaciones web modernas, y Express.js, junto con Multer, ofrece una solución poderosa para esta tarea. En este artículo, exploraremos cómo utilizar Multer con Express.js para manejar la carga de archivos de manera eficiente. Nos enfocaremos en la configuración básica y proporcionaremos ejemplos prácticos para comprender su implementación.\nConfiguración Básica de Multer: # Antes de comenzar, asegúrate de haber instalado Multer en tu proyecto utilizando npm:\nnpm install multer Luego, en tu archivo de aplicación, importa los módulos necesarios y configura Multer:\n// Importación de módulos import express from \u0026#34;express\u0026#34;; import multer from \u0026#34;multer\u0026#34;; // Creación de instancia de Express const app = express(); // Configuración de Multer const storage = multer.diskStorage({ destination: (req, file, cb) =\u0026gt; { cb(null, \u0026#34;uploads/\u0026#34;); // Directorio donde se guardarán los archivos }, filename: (req, file, cb) =\u0026gt; { cb(null, file.originalname); // Nombre original del archivo }, }); const upload = multer({ storage: storage }); // Ruta para manejar la carga de archivos app.post(\u0026#34;/upload\u0026#34;, upload.single(\u0026#34;archivo\u0026#34;), (req, res) =\u0026gt; { res.send(\u0026#34;Archivo subido exitosamente\u0026#34;); }); // Inicio del servidor app.listen(3000, () =\u0026gt; { console.log(\u0026#34;Servidor corriendo en el puerto 3000\u0026#34;); }); En este ejemplo, configuramos Multer para guardar los archivos en el directorio \u0026lsquo;uploads/\u0026rsquo; con su nombre original. La función upload.single() se utiliza para manejar la carga de un solo archivo en la ruta \u0026lsquo;/upload\u0026rsquo;.\nIntegración con Rutas de Express: # Multer se puede integrar fácilmente con las rutas de Express para manejar la carga de archivos en puntos específicos de la aplicación. Aquí hay un ejemplo más detallado:\n// Importación de módulos import express from \u0026#34;express\u0026#34;; import multer from \u0026#34;multer\u0026#34;; // Creación de instancia de Express const app = express(); // Configuración de Multer const storage = multer.diskStorage({ destination: (req, file, cb) =\u0026gt; { cb(null, \u0026#34;uploads/profiles/\u0026#34;); // Directorio para imágenes de perfil }, filename: (req, file, cb) =\u0026gt; { cb(null, req.body.username + \u0026#34;-\u0026#34; + Date.now() + \u0026#34;.jpg\u0026#34;); // Nombre personalizado del archivo }, }); const upload = multer({ storage: storage }); // Ruta para cargar una imagen de perfil app.post(\u0026#34;/uploadProfile\u0026#34;, upload.single(\u0026#34;profileImage\u0026#34;), (req, res) =\u0026gt; { res.send(\u0026#34;Imagen de perfil subida exitosamente\u0026#34;); }); // Inicio del servidor app.listen(3000, () =\u0026gt; { console.log(\u0026#34;Servidor corriendo en el puerto 3000\u0026#34;); }); En este ejemplo, al cargar una imagen de perfil a través de la ruta \u0026lsquo;/uploadProfile\u0026rsquo;, Multer guarda la imagen en el directorio \u0026lsquo;uploads/profiles/\u0026rsquo; con un nombre único generado a partir del nombre de usuario y la marca de tiempo.\nConclusión: # Multer simplifica la gestión de archivos en Express.js, permitiendo una manipulación eficiente de la carga de archivos en aplicaciones web. Con la configuración adecuada y su integración con las rutas de Express, Multer se convierte en una herramienta esencial para cualquier proyecto que requiera trabajar con archivos de manera efectiva. Esperamos que este artículo te ayude a comprender cómo implementar Multer en tus aplicaciones Express.js.\nVideo # Sigue este tutorial.\n","date":"9 febrero 2024","permalink":"/platform/express/multer/","section":"Expresses","summary":"La gestión de archivos es esencial en muchas aplicaciones web modernas, y Express.","title":"Multer"},{"content":"En el desarrollo de aplicaciones web con Express.js, la organización eficiente del código es crucial. Uno de los patrones de diseño que facilita esta tarea es el Patrón de Diseño Module. En este artículo, exploraremos qué es el Patrón de Diseño Module y cómo se puede implementar en Express para mejorar la organización y la escalabilidad del código.\n¿Qué es el Patrón de Diseño Module? # El Patrón de Diseño Module es una técnica de diseño que permite encapsular funcionalidades relacionadas en módulos independientes y reutilizables. Este enfoque promueve la cohesión y el bajo acoplamiento al dividir el código en unidades más pequeñas y manejables.\nEn el contexto de Express, este patrón se emplea para dividir la lógica de la aplicación en módulos separados, cada uno encargado de una funcionalidad específica. Esto facilita la organización del código, mejora la legibilidad y promueve la reutilización de componentes.\nImplementación del Patrón de Diseño Module en Express # Estructura del Proyecto # Para implementar el Patrón de Diseño Module en Express, es esencial estructurar el proyecto adecuadamente. Una forma común de organizar el código es dividirlo en diferentes directorios según su funcionalidad. Por ejemplo:\nproyecto-express/ ├── controllers/ │ ├── usuarioController.js │ └── productoController.js ├── models/ │ ├── usuario.js │ └── producto.js ├── routes/ │ ├── usuarioRoutes.js │ └── productoRoutes.js └── app.js En este ejemplo, se tienen directorios separados para controladores, modelos y rutas. Cada archivo dentro de estos directorios representa un módulo independiente que maneja una parte específica de la aplicación.\nUso de los Módulos en Express # Una vez que se ha estructurado el proyecto, se pueden utilizar los módulos en Express importándolos y utilizando sus funcionalidades en el archivo principal (app.js) o en otros módulos según sea necesario. Por ejemplo:\n// app.js import express from \u0026#34;express\u0026#34;; import usuarioRoutes from \u0026#34;./routes/usuarioRoutes.js\u0026#34;; import productoRoutes from \u0026#34;./routes/productoRoutes.js\u0026#34;; const app = express(); app.use(\u0026#34;/usuarios\u0026#34;, usuarioRoutes); app.use(\u0026#34;/productos\u0026#34;, productoRoutes); // Otro código de configuración y middleware... app.listen(3000, () =\u0026gt; { console.log(\u0026#34;Servidor Express en ejecución en el puerto 3000\u0026#34;); }); En este ejemplo, se importan y utilizan los módulos de rutas usuarioRoutes y productoRoutes en el archivo principal de la aplicación. Cada módulo maneja las solicitudes relacionadas con usuarios y productos, respectivamente.\nVentajas del Patrón de Diseño Module en Express # El uso del Patrón de Diseño Module en Express ofrece varias ventajas:\nOrganización del Código: Permite dividir la lógica de la aplicación en módulos independientes, facilitando su mantenimiento y escalabilidad. Reutilización de Código: Los módulos pueden ser reutilizados en diferentes partes de la aplicación o incluso en otros proyectos. Legibilidad Mejorada: Al separar la funcionalidad en módulos específicos, el código se vuelve más legible y fácil de entender. Bajo Acoplamiento: Los módulos son independientes entre sí, lo que reduce el acoplamiento y hace que la aplicación sea más flexible y fácil de modificar. Conclusión # El Patrón de Diseño Module es una herramienta poderosa para organizar y estructurar aplicaciones web construidas con Express.js. Al dividir la funcionalidad en módulos independientes, podemos mejorar la organización del código, promover la reutilización y mantener una base de código más limpia y mantenible. Al incorporar este patrón en nuestros proyectos de Express, podemos construir aplicaciones web robustas y escalables que satisfagan las necesidades de nuestros usuarios de manera eficiente.\nVideos # Mira este video desde 03:00:31 hasta 03:09:46 minutos (ya está marcado).\nMira este video y sigue el tutorial desde 00:00 hasta 45:54 minutos (ya está marcado). Como te habrás dado cuenta, no se te indica que veas todo el video, pero si gustas hacerlo, bienvenido sea, mas no es obligatorio.\n","date":"8 febrero 2024","permalink":"/platform/express/module/","section":"Expresses","summary":"En el desarrollo de aplicaciones web con Express.","title":"Patrón de Diseño Module en Express"},{"content":"En el desarrollo de aplicaciones web con Express.js, es común encontrarse con la necesidad de manejar parámetros en las solicitudes HTTP para realizar operaciones específicas. Uno de los tipos de parámetros más utilizados son los \u0026ldquo;query params\u0026rdquo;, que permiten enviar datos adicionales a través de la URL. En este artículo, exploraremos en detalle qué son los query params en Express, cómo funcionan y cómo se pueden utilizar para construir aplicaciones web robustas y flexibles.\n¿Qué son los Query Params? # Los query params, también conocidos como parámetros de consulta o query strings, son pares clave-valor que se incluyen en la URL de una solicitud HTTP después del signo de interrogación (?). Estos parámetros se utilizan para enviar datos adicionales al servidor y pueden ser utilizados para filtrar, ordenar o paginar resultados, entre otras operaciones.\nPor ejemplo, en la URL /productos?categoria=electronica\u0026amp;precioMax=500, los query params son categoria y precioMax, y sus valores son electronica y 500 respectivamente.\nCómo Funcionan los Query Params en Express # En Express, los query params se pueden acceder a través del objeto req.query en las funciones de middleware que manejan las solicitudes HTTP. Este objeto contiene un conjunto de pares clave-valor que representan los query params de la solicitud.\nPor ejemplo, para acceder al query param categoria en la URL /productos?categoria=electronica, podemos hacer lo siguiente:\napp.get(\u0026#34;/productos\u0026#34;, (req, res) =\u0026gt; { const categoria = req.query.categoria; // Lógica para manejar la solicitud utilizando el parámetro categoria... }); En este ejemplo, req.query.categoria nos dará el valor del query param categoria, que es \u0026quot;electronica\u0026quot; en este caso.\nDiferencia entre Query Params y URL Params en Express # Es importante distinguir entre query params y URL params (también conocidos como route params) en Express. Los URL params se especifican en la ruta de la URL y se utilizan para identificar recursos específicos, mientras que los query params se especifican después del signo de interrogación y se utilizan para enviar datos adicionales.\nPor ejemplo, en la ruta /productos/:id, :id es un URL param que se utiliza para identificar un producto específico, mientras que en la URL /productos?categoria=electronica, categoria es un query param que se utiliza para filtrar los productos por categoría.\nVentajas de Utilizar Query Params en Express # El uso de query params en Express ofrece varias ventajas:\nFlexibilidad: Los query params permiten enviar datos adicionales de manera flexible y sin afectar la estructura de la URL. Facilidad de Uso: Acceder a los query params en Express es sencillo utilizando el objeto req.query. Interoperabilidad: Los query params son compatibles con diferentes clientes HTTP y pueden ser utilizados fácilmente en combinación con otros tipos de parámetros, como URL params y body params. Seguridad: Los query params no afectan la seguridad de la aplicación de la misma manera que los URL params, ya que no revelan información confidencial en la URL. Ejemplos de Uso de Query Params en Express # Filtrado de Resultados # app.get(\u0026#34;/productos\u0026#34;, (req, res) =\u0026gt; { const categoria = req.query.categoria; // Lógica para manejar la solicitud utilizando el parámetro categoria... res.send(`Filtrando productos por la categoría: ${categoria}`); }); URL recibida: GET /productos?categoria=electronica\nPaginación de Resultados # app.get(\u0026#34;/productos\u0026#34;, (req, res) =\u0026gt; { const pagina = req.query.pagina || 1; const limite = req.query.limite || 10; // Lógica para manejar la solicitud utilizando los parámetros de paginación... res.send( `Mostrando productos de la página ${pagina}, con un límite de ${limite} productos por página.` ); }); URL recibida: GET /productos?pagina=2\u0026amp;limite=20\nOrdenamiento de Resultados # app.get(\u0026#34;/productos\u0026#34;, (req, res) =\u0026gt; { const orden = req.query.orden || \u0026#34;nombre\u0026#34;; // Lógica para manejar la solicitud utilizando el parámetro de ordenamiento... res.send(`Mostrando productos ordenados por: ${orden}`); }); URL recibida: GET /productos?orden=precio_descendente\nRutas Dinámicas con URL Params # Además de los query params, Express también permite definir rutas con parámetros dinámicos, conocidos como URL params. Estos parámetros se definen en la ruta utilizando dos puntos seguidos del nombre del parámetro.\nPor ejemplo:\napp.get(\u0026#34;/producto/:id\u0026#34;, (req, res) =\u0026gt; { const productId = req.params.id; // Lógica para manejar la solicitud utilizando el parámetro de la URL... res.send(`Mostrando información del producto con ID: ${productId}`); }); URL recibida: GET /producto/123\nEn este ejemplo, req.params.id contiene el valor del parámetro de la URL id.\nConclusión # Los query params son una herramienta poderosa para enviar datos adicionales a través de las solicitudes HTTP en Express.js. Al permitir la flexibilidad y la interoperabilidad, los query params facilitan la construcción de aplicaciones web robustas y flexibles que pueden adaptarse a una amplia gama de necesidades. Al comprender cómo funcionan y cómo utilizarlos efectivamente en Express, los desarrolladores pueden aprovechar al máximo esta característica y crear aplicaciones web altamente funcionales y eficientes.\nVideos # Mira este video desde 01:12:12 hasta 01:40:15 minutos (ya está marcado).\n","date":"8 febrero 2024","permalink":"/platform/express/query-params/","section":"Expresses","summary":"En el desarrollo de aplicaciones web con Express.","title":"Query Params en Express"},{"content":"Express.js es un framework web para Node.js que simplifica el proceso de construir aplicaciones web y APIs. Una de las características fundamentales de Express es su sistema de enrutamiento, que permite definir cómo se manejan las solicitudes HTTP entrantes. En este artículo, exploraremos en detalle cómo funciona el enrutamiento en Express, centrándonos en los métodos HTTP y las rutas.\nMétodos HTTP # Los métodos HTTP, también conocidos como verbos HTTP, especifican la acción que se debe realizar en un recurso determinado. En Express, podemos manejar diferentes métodos HTTP utilizando métodos específicos proporcionados por el enrutador.\nGET # El método GET se utiliza para solicitar datos de un recurso específico. En Express, podemos manejar las solicitudes GET utilizando el método get() del enrutador. Por ejemplo:\napp.get(\u0026#34;/usuarios\u0026#34;, (req, res) =\u0026gt; { // Lógica para recuperar y enviar datos de usuarios res.send(\u0026#34;Lista de usuarios\u0026#34;); }); En este ejemplo, cuando se recibe una solicitud GET en la ruta /usuarios, Express ejecutará la función de devolución de llamada proporcionada y enviará la respuesta \u0026ldquo;Lista de usuarios\u0026rdquo; al cliente.\nPOST # El método POST se utiliza para enviar datos a un servidor para crear un nuevo recurso. En Express, podemos manejar las solicitudes POST utilizando el método post() del enrutador. Por ejemplo:\napp.post(\u0026#34;/usuarios\u0026#34;, (req, res) =\u0026gt; { // Lógica para crear un nuevo usuario res.status(201).send(\u0026#34;Usuario creado correctamente\u0026#34;); }); En este ejemplo, cuando se recibe una solicitud POST en la ruta /usuarios, Express ejecutará la función de devolución de llamada proporcionada y enviará la respuesta \u0026ldquo;Usuario creado correctamente\u0026rdquo; al cliente con un código de estado 201 que indica que el recurso se ha creado con éxito.\nPUT # El método PUT se utiliza para actualizar un recurso existente en el servidor. En Express, podemos manejar las solicitudes PUT utilizando el método put() del enrutador. Por ejemplo:\napp.put(\u0026#34;/usuarios/:id\u0026#34;, (req, res) =\u0026gt; { const userId = req.params.id; // Lógica para actualizar el usuario con el ID proporcionado res.send(`Usuario con ID ${userId} actualizado correctamente`); }); En este ejemplo, cuando se recibe una solicitud PUT en la ruta /usuarios/:id, Express ejecutará la función de devolución de llamada proporcionada y enviará la respuesta indicando que el usuario con el ID especificado se ha actualizado correctamente.\nDELETE # El método DELETE se utiliza para eliminar un recurso existente en el servidor. En Express, podemos manejar las solicitudes DELETE utilizando el método delete() del enrutador. Por ejemplo:\napp.delete(\u0026#34;/usuarios/:id\u0026#34;, (req, res) =\u0026gt; { const userId = req.params.id; // Lógica para eliminar el usuario con el ID proporcionado res.send(`Usuario con ID ${userId} eliminado correctamente`); }); En este ejemplo, cuando se recibe una solicitud DELETE en la ruta /usuarios/:id, Express ejecutará la función de devolución de llamada proporcionada y enviará la respuesta indicando que el usuario con el ID especificado se ha eliminado correctamente.\nRutas # Las rutas en Express definen cómo se procesan las solicitudes entrantes. Una ruta puede contener una combinación de texto y parámetros variables que coincidan con la URL solicitada.\nRutas Básicas # Las rutas básicas en Express son cadenas de texto que coinciden exactamente con la URL solicitada. Por ejemplo:\napp.get(\u0026#34;/\u0026#34;, (req, res) =\u0026gt; { res.send(\u0026#34;¡Bienvenido a mi aplicación!\u0026#34;); }); En este ejemplo, cuando se recibe una solicitud GET en la ruta raíz (/), Express enviará la respuesta \u0026ldquo;¡Bienvenido a mi aplicación!\u0026rdquo; al cliente.\nRutas con Parámetros # Las rutas pueden contener parámetros variables que se capturan y pueden ser utilizados en la lógica de la aplicación. Por ejemplo:\napp.get(\u0026#34;/usuarios/:id\u0026#34;, (req, res) =\u0026gt; { const userId = req.params.id; // Lógica para recuperar y enviar datos del usuario con el ID proporcionado res.send(`Detalles del usuario con ID ${userId}`); }); En este ejemplo, la ruta /usuarios/:id captura el ID del usuario de la URL solicitada, que luego puede ser utilizado para recuperar los datos del usuario correspondiente.\nMétodos de Respuesta # Express proporciona varios métodos de respuesta para enviar datos al cliente, incluyendo res.send(), res.status(), y res.json().\nres.send(): Este método envía una respuesta de cualquier tipo (texto, HTML, JSON, etc.) al cliente. res.status(): Este método establece el código de estado de la respuesta HTTP. res.json(): Este método envía una respuesta JSON al cliente. Conclusión # El enrutamiento en Express es una parte fundamental para manejar las solicitudes HTTP entrantes en una aplicación Node.js. Mediante el uso de métodos HTTP y rutas, podemos crear APIs robustas y flexibles que respondan a las necesidades de nuestros usuarios de manera eficiente. Además, los métodos de respuesta proporcionados por Express nos permiten enviar datos al cliente de forma clara y estructurada. Esperamos que este artículo haya proporcionado una comprensión sólida del enrutamiento en Express y cómo utilizarlo efectivamente en nuestras aplicaciones.\nVideos # Mira este video desde 00:21:22 hasta 01:12:12 minutos (ya está marcado).\nMira este video desde 01:04:35 hasta 01:10:16 minutos (ya está marcado).\n","date":"8 febrero 2024","permalink":"/platform/express/enrutado/","section":"Expresses","summary":"Express.js es un framework web para Node.","title":"Enrutamiento en Express"},{"content":"Express es un marco de aplicación web minimalista y flexible para Node.js, diseñado para facilitar el desarrollo de aplicaciones web y APIs de manera rápida y sencilla. En este artículo, exploraremos los conceptos básicos de Express y cómo se puede utilizar para crear aplicaciones web escalables y eficientes.\nIntroducción # Node.js ha ganado una gran popularidad en el desarrollo de aplicaciones web gracias a su capacidad para manejar un gran número de conexiones de manera eficiente y su enfoque basado en eventos. Sin embargo, construir una aplicación web completamente funcional desde cero en Node.js puede ser una tarea desafiante debido a la falta de herramientas y estructura predeterminadas. Es aquí donde Express entra en juego.\n¿Qué es Express? # Express es un marco de aplicación web minimalista y flexible para Node.js. Proporciona una capa de abstracción sobre el servidor HTTP de Node.js, lo que simplifica el manejo de rutas, peticiones y respuestas. Express no es un marco de \u0026ldquo;baterías incluidas\u0026rdquo; como algunos otros marcos de aplicación web, como Ruby on Rails o Django, sino más bien un conjunto de funcionalidades básicas sobre las cuales se pueden construir aplicaciones web robustas y personalizadas.\nConceptos Básicos de Express # Instalación de Express: Express se puede instalar fácilmente a través de npm (Node Package Manager), que es el administrador de paquetes de Node.js. Simplemente ejecutando el comando npm install express en la terminal, se instalará Express en el proyecto.\nCreación de una aplicación Express: Una vez instalado, se puede crear una aplicación Express mínima con solo unas pocas líneas de código:\nimport express from \u0026#34;express\u0026#34;; const app = express(); Definición de rutas: Express proporciona métodos para definir diferentes rutas en la aplicación, junto con las funciones de devolución de llamada que se ejecutarán cuando se acceda a esas rutas. Por ejemplo: app.get(\u0026#34;/\u0026#34;, (req, res) =\u0026gt; { res.send(\u0026#34;¡Hola, mundo!\u0026#34;); }); En este ejemplo, cuando se accede a la ruta raíz (\u0026rsquo;/\u0026rsquo;), Express responderá con el mensaje \u0026ldquo;¡Hola, mundo!\u0026rdquo;.\nMiddleware: Una de las características más poderosas de Express es su sistema de middleware. El middleware son funciones que se ejecutan en el medio del proceso de manejo de una solicitud. Esto permite realizar tareas como el registro, la autenticación, la validación de datos, entre otros. Por ejemplo: app.use(express.json()); Este middleware analiza el cuerpo de las solicitudes entrantes con formato JSON y los convierte en objetos JavaScript accesibles a través de req.body.\nManejo de errores: Express proporciona mecanismos para manejar errores de manera efectiva, tanto errores síncronos como asíncronos. Se pueden utilizar middleware especiales para capturar y manejar errores en la aplicación. Conclusiones # Express es un marco ligero y flexible que proporciona las herramientas necesarias para construir aplicaciones web robustas en Node.js. Al proporcionar una estructura y abstracción sobre el servidor HTTP de Node.js, Express simplifica el proceso de desarrollo y permite a los desarrolladores centrarse en la lógica de la aplicación en lugar de en los detalles de bajo nivel del manejo de solicitudes y respuestas HTTP. Con su amplia comunidad de usuarios y su ecosistema de complementos, Express sigue siendo una opción popular para el desarrollo de aplicaciones web en Node.js.\nVideos # Mira este video desde 00:00 hasta 21:22 minutos (ya está marcado).\nMira este video desde 00:58:29 hasta 01:03:11 minutos (ya está marcado).\n","date":"8 febrero 2024","permalink":"/platform/express/intro/","section":"Expresses","summary":"Express es un marco de aplicación web minimalista y flexible para Node.","title":"Introducción a Express"},{"content":"","date":"7 febrero 2024","permalink":"/platform/nodejs/cors/","section":"Nodejs","summary":"","title":"Cors"},{"content":"1. Leer un archivo de texto y mostrar su contenido: # Escribe un programa en Node.js llamado readFile.js que lea un archivo de texto dado por el usuario y muestre su contenido por consola.\nEspecificaciones:\nEl programa debe tomar el nombre del archivo como argumento de línea de comandos o mediante una pregunta interactiva al usuario. Utiliza el módulo fs de Node.js para leer el archivo de texto. Implementa una función de callback llamada displayContent para manejar el contenido leído del archivo y mostrarlo por consola. 2. Copiar un archivo: # Escribe un programa en Node.js llamado copyFile.js que copie un archivo de origen a un destino especificado por el usuario.\nEspecificaciones:\nEl programa debe tomar el nombre del archivo de origen y el nombre del archivo de destino como argumentos de línea de comandos o mediante preguntas interactivas al usuario. Utiliza el módulo fs de Node.js para copiar el archivo. Implementa una función de callback llamada copyCallback para manejar el proceso de copia y mostrar un mensaje al usuario indicando si la operación fue exitosa o no. 3. Crear un directorio y archivos dentro: # Escribe un programa en Node.js llamado createDirectory.js que cree un directorio llamado myDirectory y dentro de ese directorio cree varios archivos con contenido específico.\nEspecificaciones:\nUtiliza el módulo fs de Node.js para realizar las operaciones de creación de directorios y archivos. Dentro del directorio myDirectory, crea tres archivos llamados file1.txt, file2.txt y file3.txt, con contenido predefinido. Implementa una función de callback llamada createCallback para manejar el proceso de creación y mostrar un mensaje al usuario indicando si la operación fue exitosa o no. 4. Eliminar archivos y directorios: # Escribe un programa en Node.js llamado deleteFiles.js que elimine un archivo llamado toBeDeleted.txt y un directorio llamado toBeDeleted especificados por el usuario.\nEspecificaciones:\nUtiliza el módulo fs de Node.js para eliminar el archivo y el directorio. Implementa una función de callback llamada deleteCallback para manejar el proceso de eliminación y mostrar un mensaje al usuario indicando si la operación fue exitosa o no. 5. Leer directorio y mostrar contenido: # Escribe un programa en Node.js llamado readDirectory.js que lea un directorio llamado myDirectory y muestre su contenido (archivos y subdirectorios) por consola.\nEspecificaciones:\nUtiliza el módulo fs de Node.js para leer el directorio y su contenido. Implementa una función de callback llamada readCallback para manejar el contenido leído y mostrarlo por consola. 6. Escribir en un archivo: # Escribe un programa en Node.js llamado writeFile.js que cree un archivo llamado output.txt y escriba en él un mensaje especificado por el usuario.\nEspecificaciones:\nEl programa debe tomar el mensaje a escribir como argumento de línea de comandos o mediante preguntas interactivas al usuario. Utiliza el módulo fs de Node.js para crear el archivo y escribir en él. Implementa una función de callback llamada writeCallback para manejar el proceso de escritura y mostrar un mensaje al usuario indicando si la operación fue exitosa o no. Estas especificaciones detalladas junto con los nombres de los archivos te ayudarán a completar cada ejercicio con éxito y te guiarán a través del proceso de aprendizaje del uso del módulo fs y callbacks en Node.js.\nRecomendación: Primero intenta resolver estos ejercicios por tu cuenta, y luego consulta las soluciones disponibles para cada uno. Ver las soluciones\n","date":"7 febrero 2024","permalink":"/platform/nodejs/fs/repaso/ejercicios/","section":"Nodejs","summary":"1. Leer un archivo de texto y mostrar su contenido: # Escribe un programa en Node.","title":"Ejercicios: Módulo fs"},{"content":"Regresar a ver los ejercicios\n1. Leer un archivo de texto y mostrar su contenido (readFile.js): # Solución en readFile.js:\n// readFile.js import fs from \u0026#34;fs\u0026#34;; const fileName = process.argv[2]; fs.readFile(fileName, \u0026#34;utf8\u0026#34;, (err, data) =\u0026gt; { if (err) { console.error(\u0026#34;Error al leer el archivo:\u0026#34;, err); return; } console.log(\u0026#34;Contenido del archivo:\u0026#34;); console.log(data); }); Comando en consola:\nnode readFile.js nombre_archivo.txt 2. Copiar un archivo (copyFile.js): # Solución en copyFile.js:\n// copyFile.js import fs from \u0026#34;fs\u0026#34;; const sourceFile = process.argv[2]; const destinationFile = process.argv[3]; fs.copyFile(sourceFile, destinationFile, (err) =\u0026gt; { if (err) { console.error(\u0026#34;Error al copiar el archivo:\u0026#34;, err); return; } console.log(\u0026#34;¡Archivo copiado exitosamente!\u0026#34;); }); Comando en consola:\nnode copyFile.js archivo_origen.txt archivo_destino.txt 3. Crear un directorio y archivos dentro (createDirectory.js): # Solución en createDirectory.js:\n// createDirectory.js import fs from \u0026#34;fs\u0026#34;; fs.mkdir(\u0026#34;myDirectory\u0026#34;, (err) =\u0026gt; { if (err) { console.error(\u0026#34;Error al crear el directorio:\u0026#34;, err); return; } console.log(\u0026#34;Directorio creado exitosamente.\u0026#34;); const filesToCreate = [\u0026#34;file1.txt\u0026#34;, \u0026#34;file2.txt\u0026#34;, \u0026#34;file3.txt\u0026#34;]; filesToCreate.forEach((file) =\u0026gt; { fs.writeFile(`myDirectory/${file}`, \u0026#34;Contenido del archivo\u0026#34;, (err) =\u0026gt; { if (err) { console.error(`Error al crear el archivo ${file}:`, err); return; } console.log(`Archivo ${file} creado exitosamente.`); }); }); }); Comando en consola:\nnode createDirectory.js 4. Eliminar archivos y directorios (deleteFiles.js): # Solución en deleteFiles.js:\n// deleteFiles.js import fs from \u0026#34;fs\u0026#34;; fs.unlink(\u0026#34;toBeDeleted.txt\u0026#34;, (err) =\u0026gt; { if (err) { console.error(\u0026#34;Error al eliminar el archivo:\u0026#34;, err); return; } console.log(\u0026#34;Archivo eliminado exitosamente.\u0026#34;); fs.rmdir(\u0026#34;toBeDeleted\u0026#34;, (err) =\u0026gt; { if (err) { console.error(\u0026#34;Error al eliminar el directorio:\u0026#34;, err); return; } console.log(\u0026#34;Directorio eliminado exitosamente.\u0026#34;); }); }); Comando en consola:\nnode deleteFiles.js 5. Leer directorio y mostrar contenido (readDirectory.js): # Solución en readDirectory.js:\n// readDirectory.js import fs from \u0026#34;fs\u0026#34;; fs.readdir(\u0026#34;myDirectory\u0026#34;, (err, files) =\u0026gt; { if (err) { console.error(\u0026#34;Error al leer el directorio:\u0026#34;, err); return; } console.log(\u0026#34;Contenido del directorio:\u0026#34;); files.forEach((file) =\u0026gt; { console.log(file); }); }); Comando en consola:\nnode readDirectory.js 6. Escribir en un archivo (writeFile.js): # Solución en writeFile.js:\n// writeFile.js import fs from \u0026#34;fs\u0026#34;; const content = process.argv[2]; fs.writeFile(\u0026#34;output.txt\u0026#34;, content, (err) =\u0026gt; { if (err) { console.error(\u0026#34;Error al escribir en el archivo:\u0026#34;, err); return; } console.log(\u0026#34;¡Contenido escrito en el archivo exitosamente!\u0026#34;); }); Comando en consola:\nnode writeFile.js \u0026#34;Este es el contenido que se escribirá en el archivo.\u0026#34; Estos comandos de consola corresponden a la ejecución de cada uno de los scripts en Node.js y te permitirán probar cada uno de los ejercicios.\n","date":"7 febrero 2024","permalink":"/platform/nodejs/fs/repaso/solucion/","section":"Nodejs","summary":"Regresar a ver los ejercicios","title":"Solución: Módulo fs"},{"content":"En el ecosistema de desarrollo de Node.js, el archivo package.json juega un papel fundamental. Este archivo no solo proporciona metadatos sobre un proyecto, sino que también sirve como una descripción detallada de sus dependencias, scripts de ejecución, y más. El comando npm init es una herramienta esencial para inicializar un nuevo proyecto Node.js y crear el archivo package.json. En este artículo, exploraremos en detalle el comando npm init, sus opciones, y el significado de los campos más comunes en el archivo package.json generado.\nIntroducción: # El archivo package.json es una parte esencial de cualquier proyecto Node.js. Contiene metadatos importantes sobre el proyecto, como el nombre, la versión, las dependencias, los scripts de ejecución y las configuraciones del proyecto. El proceso de creación de este archivo es simplificado gracias al comando npm init, que guía al usuario a través de una serie de preguntas interactivas para configurar su proyecto.\nUso de npm init: # El comando npm init se utiliza para inicializar un nuevo proyecto Node.js y crear un archivo package.json. Al ejecutar este comando en la raíz de un directorio de proyecto vacío o existente, el usuario es guiado a través de una serie de preguntas interactivas para configurar las propiedades del archivo package.json.\nPara iniciar el proceso de inicialización, simplemente ejecuta el siguiente comando en tu terminal:\nnpm init Opciones interactivas de npm init: # Al ejecutar npm init, el usuario es guiado a través de una serie de preguntas interactivas para configurar las propiedades del archivo package.json. Estas preguntas incluyen:\nPackage name: Nombre del paquete (por defecto, el nombre del directorio actual). Version: Versión del paquete (por defecto, 1.0.0). Description: Breve descripción del proyecto. Entry point: Punto de entrada principal del proyecto (archivo JavaScript principal). Test command: Comando para ejecutar las pruebas del proyecto. Git repository: URL del repositorio Git asociado con el proyecto. Keywords: Palabras clave relacionadas con el proyecto. Author: Nombre del autor del proyecto. License: Licencia del proyecto (por defecto, ISC). El usuario puede optar por utilizar los valores predeterminados presionando Enter en cada pregunta, o puede proporcionar sus propias respuestas.\nCreación de package.json y su contenido: # Después de completar las preguntas interactivas, npm init generará un archivo package.json con la estructura y las propiedades definidas durante el proceso de inicialización. El archivo package.json incluirá información importante, como el nombre del paquete, la versión, la descripción, las dependencias, los scripts de ejecución y más.\nA continuación, se muestra un ejemplo de un archivo package.json generado por npm init:\n{ \u0026#34;name\u0026#34;: \u0026#34;mi-proyecto\u0026#34;, \u0026#34;version\u0026#34;: \u0026#34;1.0.0\u0026#34;, \u0026#34;description\u0026#34;: \u0026#34;Una descripción de mi proyecto\u0026#34;, \u0026#34;main\u0026#34;: \u0026#34;index.js\u0026#34;, \u0026#34;scripts\u0026#34;: { \u0026#34;test\u0026#34;: \u0026#34;echo \\\u0026#34;Error: no test specified\\\u0026#34; \u0026amp;\u0026amp; exit 1\u0026#34; }, \u0026#34;repository\u0026#34;: { \u0026#34;type\u0026#34;: \u0026#34;git\u0026#34;, \u0026#34;url\u0026#34;: \u0026#34;https://github.com/usuario/mi-proyecto.git\u0026#34; }, \u0026#34;author\u0026#34;: \u0026#34;Nombre del Autor\u0026#34;, \u0026#34;license\u0026#34;: \u0026#34;ISC\u0026#34; } Este package.json contiene los campos básicos generados durante la inicialización. Sin embargo, puede ser modificado y extendido según las necesidades del proyecto.\nConclusión: # El comando npm init es una herramienta fundamental en el kit de herramientas de cualquier desarrollador de Node.js. Facilita la creación de un archivo package.json detallado y bien configurado para un proyecto. Comprender cómo utilizar npm init y la estructura resultante del archivo package.json es esencial para cualquier desarrollador que trabaje con Node.js. Con esta guía, deberías estar listo para empezar a trabajar en tus proyectos Node.js de manera más eficiente y organizada.\nVideo # Mira este video desde 02:23:46 hasta 02:41:19 minutos (ya está marcado).\n","date":"7 febrero 2024","permalink":"/platform/nodejs/init/","section":"Nodejs","summary":"En el ecosistema de desarrollo de Node.","title":"npm init"},{"content":"Node.js es conocido por su flexibilidad y potencia en el desarrollo de aplicaciones backend. En este artículo, exploramos un aspecto fundamental pero a menudo pasado por alto en el desarrollo de aplicaciones Node.js: las variables de entorno. Estas variables proporcionan una forma eficiente y segura de configurar y gestionar la información sensible o específica del entorno en nuestras aplicaciones. Discutiremos qué son las variables de entorno, cómo se utilizan en Node.js, y las mejores prácticas para su gestión.\nIntroducción: # Node.js es un entorno de tiempo de ejecución de JavaScript que permite a los desarrolladores crear aplicaciones de servidor altamente escalables y eficientes. En el desarrollo de aplicaciones Node.js, es común encontrarse con la necesidad de manejar configuraciones específicas del entorno, como credenciales de bases de datos, claves de API, configuraciones de seguridad, entre otros. Para abordar este requisito de manera efectiva y segura, Node.js proporciona un mecanismo integrado para el manejo de variables de entorno.\n¿Qué son las variables de entorno en Node.js? # Las variables de entorno son variables globales que están disponibles en todo el sistema operativo y pueden ser accedidas por cualquier proceso en ejecución, incluidas nuestras aplicaciones Node.js. Estas variables contienen información específica del entorno, como configuraciones de red, rutas de acceso, tokens de autenticación, etc. En Node.js, podemos acceder a estas variables utilizando el objeto process.env.\nUso de Variables de Entorno en Node.js: # En Node.js, las variables de entorno se utilizan comúnmente para configurar parámetros de aplicación, como puertos de escucha, conexiones a bases de datos, claves de API y otros ajustes específicos del entorno. Por ejemplo:\n// Utilizando ESModules import { config } from \u0026#34;dotenv\u0026#34;; config(); const PORT = process.env.DB_PORT || 4000; const DB_USER = process.env.DB_USER || \u0026#34;root\u0026#34;; const DB_PASSWORD = process.env.DB_PASSWORD || \u0026#34;\u0026#34;; const DB_DATABASE = process.env.DB_DATABASE || \u0026#34;database\u0026#34;; const DB_PORT = process.env.DB_PORT || 3306; const DB_HOST = process.env.DB_HOST || \u0026#34;localhost\u0026#34;; Cómo usar dotenv: # Para cargar las variables de entorno desde un archivo .env, podemos utilizar la biblioteca dotenv. Primero, debemos instalarla en nuestro proyecto utilizando npm o yarn:\nnpm install dotenv Luego, en nuestro archivo de entrada principal, podemos cargar las variables de entorno utilizando config() como se muestra en el ejemplo anterior. Asegúrate de tener un archivo .env en la raíz de tu proyecto con las variables definidas. Por ejemplo:\nPORT=4000 DB_USER=root DB_PASSWORD=passwordtest DB_DATABASE=dbtest DB_HOST=localhost DB_PORT=3306 Gestión de Variables de Entorno: # Es crucial gestionar correctamente las variables de entorno en nuestras aplicaciones Node.js para garantizar su seguridad, portabilidad y mantenibilidad. Aquí hay algunas mejores prácticas a tener en cuenta:\nUtilizar archivos de configuración separados: En lugar de configurar las variables de entorno directamente en el sistema operativo, es recomendable utilizar archivos de configuración específicos para cada entorno (desarrollo, pruebas, producción, etc.).\nNo incluir información sensible en el repositorio de código: Evite incluir valores sensibles (como contraseñas, claves API) en el código fuente o en archivos de configuración que se almacenen en repositorios de código. En su lugar, utilice variables de entorno y asegúrese de no incluirlas en el control de versiones.\nEstablecer valores predeterminados: Proporcione valores predeterminados para las variables de entorno cuando sea posible, para garantizar que la aplicación siga funcionando correctamente incluso si algunas variables no están definidas.\nValidar las variables de entorno: Antes de utilizar una variable de entorno en la aplicación, valide su presencia y valide su formato según sea necesario. Esto ayuda a prevenir errores y aumenta la robustez de la aplicación.\nConclusión: # En resumen, las variables de entorno desempeñan un papel fundamental en el desarrollo de aplicaciones Node.js al permitirnos configurar y gestionar la información específica del entorno de manera segura y eficiente. Al seguir las mejores prácticas de gestión de variables de entorno, podemos garantizar la seguridad, portabilidad y mantenibilidad de nuestras aplicaciones Node.js en diversos entornos. El uso de bibliotecas como dotenv facilita enormemente la gestión de estas variables, permitiéndonos cargarlas fácilmente desde archivos de configuración y mantener nuestras aplicaciones limpias y seguras.\nVideos # Mira este video desde 01:37:21 hasta 01:50:35 minutos (ya está marcado). Ten en cuenta que en algunas partes se mostrará código que tal vez no entiendas del todo. No te preocupes, solo enfócate en entender las variables de entorno.\n","date":"7 febrero 2024","permalink":"/platform/nodejs/env/","section":"Nodejs","summary":"Node.js es conocido por su flexibilidad y potencia en el desarrollo de aplicaciones backend.","title":"Variables de entorno en NodeJS"},{"content":"Empecemos por los headers:\nLos headers HTTP son componentes fundamentales en las comunicaciones entre clientes y servidores web. Proporcionan información adicional sobre una solicitud o una respuesta HTTP, lo que permite a los servidores y clientes comunicarse de manera efectiva. En este artículo, exploraremos qué son los headers HTTP, por qué son importantes y cómo podemos manipularlos en aplicaciones Node.js.\n¿Qué son los Headers HTTP? # Los headers HTTP son metadatos adicionales que se envían junto con una solicitud o una respuesta HTTP. Estos headers contienen información importante que describe y controla el comportamiento de la solicitud o respuesta. Algunos ejemplos comunes de headers HTTP incluyen:\nContent-Type: Este header indica el tipo de contenido que se envía o se espera recibir en una solicitud o respuesta HTTP. Es crucial para que los clientes y servidores comprendan cómo interpretar los datos intercambiados. Algunos valores comunes de Content-Type son:\ntext/html: Para documentos HTML. application/json: Para datos en formato JSON. image/jpeg: Para imágenes en formato JPEG. application/pdf: Para documentos en formato PDF. application/xml: Para datos en formato XML. multipart/form-data: Usado en formularios que contienen archivos adjuntos. Content-Length: Indica la longitud en bytes del cuerpo del mensaje en una solicitud o respuesta HTTP. Esto es útil para determinar la cantidad de datos que se enviarán o recibirán.\nUser-Agent: Este header identifica el agente de usuario (navegador web, aplicación, bot, etc.) que realiza la solicitud. Es útil para los servidores web para adaptar la respuesta según el cliente que realiza la solicitud.\nAuthorization: Se utiliza para enviar credenciales de autenticación al servidor. Puede contener tokens de acceso, nombres de usuario y contraseñas encriptadas, u otros datos de autenticación.\nImportancia de los Headers HTTP # Los headers HTTP son esenciales para una variedad de propósitos en la comunicación cliente-servidor:\nNegociación de Contenido: Los headers como Accept y Content-Type permiten a los clientes y servidores negociar el tipo de contenido que se enviará o recibirá.\nControl de Caché: Headers como Cache-Control y Expires permiten a los servidores controlar cómo se almacenan en caché las respuestas en el lado del cliente y en los intermediarios.\nSeguridad: Headers como Authorization y X-Frame-Options permiten la autenticación y protección contra ataques de seguridad como la inyección de scripts.\nSeguimiento de Sesiones: Headers como Set-Cookie y Cookie permiten el seguimiento de sesiones de usuario y la gestión de cookies.\nManipulación de Headers en Node.js # Node.js ofrece una variedad de formas para manipular headers HTTP en aplicaciones web. Puedes manipular los headers directamente utilizando el módulo http de Node.js. Por ejemplo, para establecer un nuevo header en una respuesta:\nimport http from \u0026#34;http\u0026#34;; const server = http.createServer((req, res) =\u0026gt; { res.setHeader(\u0026#34;Custom-Header\u0026#34;, \u0026#34;ValorPersonalizado\u0026#34;); res.end(\u0026#34;Hola Mundo\u0026#34;); }); Para leer headers de las solicitudes entrantes, puedes acceder al objeto headers proporcionado por la solicitud (req). Por ejemplo:\nimport http from \u0026#34;http\u0026#34;; const server = http.createServer((req, res) =\u0026gt; { const customHeader = req.headers[\u0026#34;custom-header\u0026#34;]; console.log(\u0026#34;Valor del Custom-Header:\u0026#34;, customHeader); res.end(\u0026#34;Hola Mundo\u0026#34;); }); En estos ejemplos, estamos utilizando el módulo http de Node.js para manejar solicitudes y respuestas HTTP de manera directa, sin un framework externo. Esta es una forma común de manipular headers HTTP en aplicaciones Node.js puras.\nConclusión # Los headers HTTP son elementos esenciales en la comunicación cliente-servidor en la web. Proporcionan información adicional y control sobre las solicitudes y respuestas HTTP, lo que permite una comunicación efectiva y segura entre clientes y servidores. En aplicaciones Node.js, podemos manipular estos headers fácilmente utilizando el módulo http nativo de Node.js. Con un buen entendimiento de los headers HTTP y cómo manipularlos en Node.js, podemos construir aplicaciones web robustas y eficientes.\nVideo # Mira este video desde 03:12 hasta 58:29 minutos (ya está marcado en el video).\n","date":"6 febrero 2024","permalink":"/platform/nodejs/node-api/","section":"Nodejs","summary":"Empecemos por los headers:","title":"API con NodeJS"},{"content":"MySQL2 es una biblioteca esencial para interactuar con bases de datos MySQL o MariaDB en aplicaciones Node.js. En este artículo, exploraremos dos formas de gestionar las conexiones a bases de datos utilizando MySQL2: la conexión simple y el pool de conexiones. Analizaremos cómo configurar y utilizar cada uno, así como las diferencias clave entre ellos.\nIntroducción a MySQL2 # MySQL2 es una biblioteca de Node.js que facilita la interacción con bases de datos relacionales MySQL o MariaDB. Ofrece una variedad de funciones para realizar consultas, administrar conexiones y manejar resultados de manera eficiente. Al trabajar con bases de datos en Node.js, MySQL2 se convierte en una herramienta invaluable para desarrolladores que desean optimizar el rendimiento y la eficiencia de sus aplicaciones.\nInstalación de MySQL2 # Para comenzar a utilizar MySQL2 en tu proyecto Node.js, primero debes instalarlo. Puedes hacerlo fácilmente utilizando npm, el administrador de paquetes de Node.js. Ejecuta el siguiente comando en tu terminal para instalar MySQL2 y agregarlo como una dependencia a tu proyecto:\nnpm install mysql2 --save Este comando descargará e instalará MySQL2 en tu proyecto Node.js y agregará la dependencia al archivo package.json. Una vez instalado, estarás listo para configurar y utilizar MySQL2 para interactuar con tu base de datos MySQL o MariaDB desde tu aplicación Node.js.\nConexión Simple a la Base de Datos # La conexión simple implica establecer y cerrar conexiones individuales cada vez que se necesite interactuar con la base de datos. Aquí hay un ejemplo de cómo configurar una conexión simple con MySQL2:\n// Importar el módulo MySQL2 import mysql from \u0026#34;mysql2\u0026#34;; // Configurar la conexión a la base de datos const connection = mysql.createConnection({ host: \u0026#34;localhost\u0026#34;, user: \u0026#34;usuario\u0026#34;, password: \u0026#34;contraseña\u0026#34;, database: \u0026#34;nombre_de_la_base_de_datos\u0026#34;, }); // Conectar a la base de datos connection.connect((err) =\u0026gt; { if (err) { console.error(\u0026#34;Error al conectar a la base de datos:\u0026#34;, err); return; } console.log(\u0026#34;Conexión exitosa a la base de datos\u0026#34;); }); // Realizar una consulta connection.query(\u0026#34;SELECT * FROM usuarios\u0026#34;, (err, results) =\u0026gt; { if (err) { console.error(\u0026#34;Error al realizar la consulta:\u0026#34;, err); return; } console.log(\u0026#34;Resultados de la consulta:\u0026#34;, results); }); // Cerrar la conexión connection.end((err) =\u0026gt; { if (err) { console.error(\u0026#34;Error al cerrar la conexión:\u0026#34;, err); return; } console.log(\u0026#34;Conexión cerrada correctamente\u0026#34;); }); Pool de Conexiones # El pool de conexiones administra un conjunto de conexiones reutilizables y ofrece un rendimiento superior al reutilizar conexiones existentes en lugar de abrir y cerrar conexiones individuales cada vez. Veamos cómo configurar y utilizar un pool de conexiones con MySQL2:\n// Importar el módulo MySQL2 import mysql from \u0026#34;mysql2\u0026#34;; // Configurar el pool de conexiones const pool = mysql.createPool({ host: \u0026#34;localhost\u0026#34;, user: \u0026#34;usuario\u0026#34;, password: \u0026#34;contraseña\u0026#34;, database: \u0026#34;nombre_de_la_base_de_datos\u0026#34;, connectionLimit: 10, // Establecer el límite de conexiones }); // Obtener una conexión del pool pool.getConnection((err, connection) =\u0026gt; { if (err) { console.error(\u0026#34;Error al obtener la conexión:\u0026#34;, err); return; } // Realizar una consulta utilizando la conexión obtenida connection.query(\u0026#34;SELECT * FROM usuarios\u0026#34;, (err, results) =\u0026gt; { // Liberar la conexión de vuelta al pool connection.release(); if (err) { console.error(\u0026#34;Error al realizar la consulta:\u0026#34;, err); return; } console.log(\u0026#34;Resultados de la consulta:\u0026#34;, results); }); }); Diferencias y Consideraciones # Conexión Simple: Es adecuada para aplicaciones con un bajo volumen de tráfico y consultas ocasionales. Cada vez que se realiza una operación en la base de datos, se abre y cierra una conexión individual. Esto puede ser menos eficiente en aplicaciones con múltiples operaciones concurrentes.\nPool de Conexiones: Es más adecuado para aplicaciones con un alto volumen de tráfico y consultas frecuentes. El pool de conexiones administra un conjunto de conexiones reutilizables, lo que mejora el rendimiento y la eficiencia al reutilizar conexiones existentes. Es especialmente útil en entornos con múltiples operaciones concurrentes.\nConclusión # MySQL2 ofrece dos formas de gestionar las conexiones a bases de datos en aplicaciones Node.js: la conexión simple y el pool de conexiones. La elección entre ambas depende de los requisitos específicos de tu aplicación, incluido el volumen de tráfico, la cantidad de consultas y la concurrencia. Al comprender las diferencias y consideraciones entre ambas, puedes elegir la opción más adecuada para tu proyecto y optimizar el rendimiento de tu aplicación al interactuar con bases de datos relacionales.\nVideo # Mira este video completo.\n","date":"6 febrero 2024","permalink":"/platform/nodejs/mysql2/","section":"Nodejs","summary":"MySQL2 es una biblioteca esencial para interactuar con bases de datos MySQL o MariaDB en aplicaciones Node.","title":"mysql2: Conexiones a Bases de Datos"},{"content":"Node Package Manager (NPM) es una herramienta fundamental en el ecosistema de Node.js que facilita la gestión de dependencias, la instalación de paquetes y la configuración de proyectos. En este artículo, profundizaremos en el uso de NPM, desde la inicialización de un proyecto con npm init -y hasta la comprensión del archivo package.json.\nIntroducción a NPM # NPM es el administrador de paquetes predeterminado para Node.js y se instala automáticamente cuando instalas Node.js en tu sistema. Además de ser un repositorio de paquetes, NPM también proporciona una interfaz de línea de comandos (CLI) que te permite interactuar con esos paquetes y administrar proyectos de Node.js de manera efectiva.\nEl Archivo package.json # El archivo package.json es un archivo de metadatos para tu proyecto Node.js. Contiene información sobre el nombre del proyecto, la versión, las dependencias, los scripts de ejecución y más. Aquí hay un ejemplo simple de un archivo package.json:\n{ \u0026#34;dependencies\u0026#34;: { \u0026#34;colors\u0026#34;: \u0026#34;^1.4.0\u0026#34; } } dependencies: Las dependencias del proyecto, junto con las versiones requeridas. El archivo package.json es crucial para la gestión de dependencias y la ejecución de scripts en tu proyecto Node.js. Además, al compartir tu proyecto con otros desarrolladores, pueden utilizar este archivo para instalar las dependencias necesarias y ejecutar los scripts definidos.\nConclusión # NPM es una herramienta esencial para cualquier proyecto Node.js. Desde la inicialización de un proyecto hasta la gestión de dependencias con el archivo package.json, NPM simplifica el proceso de desarrollo de aplicaciones Node.js y hace que sea más fácil compartir y colaborar en proyectos. Espero que este artículo te haya proporcionado una comprensión sólida de cómo comenzar un nuevo proyecto Node.js y cómo utilizar el archivo package.json para gestionar tu proyecto de manera efectiva.\nVideo # Mira este video desde 00:29:54 hasta 00:35:31 minutos (ya está marcado).\nMira este video desde 02:09:03 hasta 02:23:46 minutos (ya está marcado).\n","date":"6 febrero 2024","permalink":"/platform/nodejs/npm/","section":"Nodejs","summary":"Node Package Manager (NPM) es una herramienta fundamental en el ecosistema de Node.","title":"NPM: Gestión de Paquetes en Node.js"},{"content":"Node.js es reconocido por su capacidad para crear servidores web eficientes y escalables. En su núcleo, el módulo HTTP es una parte esencial de esto, ya que permite manejar solicitudes y respuestas HTTP. En este artículo, exploraremos el módulo HTTP de Node.js con un enfoque en el uso de ES Modules para la importación y explicaremos cómo crear un servidor HTTP básico.\n¿Qué es el módulo HTTP en Node.js? # El módulo HTTP en Node.js proporciona funcionalidades para trabajar con protocolos HTTP. Con él, podemos crear tanto servidores HTTP como realizar solicitudes HTTP a otros servidores. Es una herramienta fundamental para construir aplicaciones web y API en Node.js.\nCreación de un servidor HTTP con ES Modules # Para empezar, necesitamos tener Node.js instalado en nuestro sistema. Luego, podemos crear un servidor HTTP básico utilizando el módulo HTTP y la sintaxis de ES Modules. Aquí tienes un ejemplo:\n// server.js import http from \u0026#34;http\u0026#34;; const server = http.createServer((req, res) =\u0026gt; { res.writeHead(200, { \u0026#34;Content-Type\u0026#34;: \u0026#34;text/plain\u0026#34; }); res.end(\u0026#34;¡Hola, mundo!\\n\u0026#34;); }); const PORT = 3000; server.listen(PORT, () =\u0026gt; { console.log(`Servidor corriendo en http://localhost:${PORT}`); }); En este código, importamos el módulo HTTP utilizando la sintaxis de ES Modules. Luego, creamos un servidor utilizando el método createServer, que toma una función de devolución de llamada que se ejecuta cada vez que se recibe una solicitud HTTP. En esta función, configuramos la respuesta con un código de estado 200 y un tipo de contenido de texto plano, y luego enviamos el mensaje \u0026ldquo;¡Hola, mundo!\u0026rdquo; como cuerpo de la respuesta utilizando el método end.\nFinalmente, especificamos el puerto en el que queremos que el servidor escuche las solicitudes utilizando el método listen, y mostramos un mensaje en la consola indicando que el servidor está en funcionamiento.\nEjecución del servidor # Para ejecutar el servidor, guarda el código en un archivo llamado server.js y ejecuta el siguiente comando en tu terminal:\nnode server.js Esto iniciará el servidor y mostrará un mensaje indicando que está corriendo en http://localhost:3000. Ahora puedes abrir tu navegador web y visitar esa dirección para ver el mensaje \u0026ldquo;¡Hola, mundo!\u0026rdquo;.\nConclusión # En resumen, el módulo HTTP de Node.js es una herramienta poderosa para construir servidores web y manejar solicitudes HTTP. Con la integración de ES Modules, podemos importar y utilizar este módulo de manera moderna y eficiente. Espero que este artículo te haya proporcionado una comprensión más profunda de cómo funciona el módulo HTTP en Node.js y cómo puedes utilizarlo en tus propios proyectos.\nVideo # Mira este video desde 01:50:35 hasta 02:09:03 minutos\nMira este video desde 02:00:34 hasta 02:07:00 minutos\n","date":"6 febrero 2024","permalink":"/platform/nodejs/http/","section":"Nodejs","summary":"Node.js es reconocido por su capacidad para crear servidores web eficientes y escalables.","title":"Módulo HTTP"},{"content":"La asincronía es un concepto fundamental en el mundo de la programación moderna, especialmente en lenguajes como JavaScript. En este artículo, exploraremos qué es la asincronía, por qué es importante y cómo se implementa en JavaScript, junto con ejemplos prácticos para comprender mejor su funcionamiento.\n¿Qué es la Asincronía? # La asincronía se refiere a la capacidad de ejecutar múltiples tareas de manera independiente y no bloqueante. En lugar de esperar a que una tarea se complete antes de pasar a la siguiente, las tareas asincrónicas pueden ejecutarse en paralelo o en un orden no determinado. Esto permite que un programa continúe funcionando mientras espera que ciertas operaciones se completen, lo que mejora la eficiencia y la capacidad de respuesta de las aplicaciones.\nImportancia de la Asincronía # La asincronía es crucial en el desarrollo de aplicaciones web modernas, donde las interacciones del usuario, las solicitudes de red y las operaciones de E/S pueden ser impredecibles y potencialmente lentas. Al utilizar la asincronía, los desarrolladores pueden crear aplicaciones más receptivas y escalables, evitando bloqueos y maximizando la utilización de los recursos del sistema.\nImplementación de Asincronía en JavaScript # JavaScript es conocido por su naturaleza asincrónica, impulsada en gran parte por el modelo de ejecución de un solo hilo y el bucle de eventos del navegador. Las operaciones asincrónicas en JavaScript se gestionan mediante callbacks, promesas y async/await.\nCallbacks # Los callbacks son funciones que se pasan como argumentos a otras funciones y se ejecutan después de que se completa una operación asincrónica. Aunque son efectivos, los callbacks pueden conducir a un código complejo y propenso a errores debido al fenómeno conocido como \u0026ldquo;callback hell\u0026rdquo;.\n// Ejemplo de callback setTimeout(() =\u0026gt; { console.log(\u0026#34;¡Hola, mundo!\u0026#34;); }, 2000); Promesas # Las promesas son objetos que representan el resultado eventual de una operación asincrónica. Permiten encadenar operaciones y gestionar errores de manera más elegante que los callbacks.\n// Ejemplo de promesa const miPromesa = new Promise((resolve, reject) =\u0026gt; { setTimeout(() =\u0026gt; { resolve(\u0026#34;¡Hola, mundo!\u0026#34;); }, 2000); }); miPromesa.then((resultado) =\u0026gt; { console.log(resultado); }); Async/Await # Async/Await es una sintaxis más moderna para trabajar con operaciones asincrónicas en JavaScript. Permite escribir código asincrónico de manera síncrona, lo que mejora la legibilidad y la mantenibilidad del código.\n// Ejemplo de async/await const esperarDosSegundos = () =\u0026gt; { return new Promise((resolve) =\u0026gt; { setTimeout(() =\u0026gt; { resolve(\u0026#34;¡Hola, mundo!\u0026#34;); }, 2000); }); }; const imprimirMensaje = async () =\u0026gt; { const mensaje = await esperarDosSegundos(); console.log(mensaje); }; imprimirMensaje(); Ejemplos Prácticos # A continuación, presentamos algunos ejemplos prácticos de asincronía en JavaScript:\nSolicitud de API utilizando Fetch: fetch(\u0026#34;https://api.example.com/data\u0026#34;) .then((response) =\u0026gt; response.json()) .then((data) =\u0026gt; console.log(data)) .catch((error) =\u0026gt; console.error(\u0026#34;Error:\u0026#34;, error)); Lectura de un archivo utilizando Node.js: import { readFile } from \u0026#34;node:fs\u0026#34;; async function leerArchivo() { try { const data = await readFile(\u0026#34;archivo.txt\u0026#34;, \u0026#34;utf8\u0026#34;); console.log(data); } catch (error) { console.error(\u0026#34;Error:\u0026#34;, error); } } leerArchivo(); Esperar múltiples promesas con Promise.all: const promesa1 = Promise.resolve(\u0026#34;Uno\u0026#34;); const promesa2 = Promise.resolve(\u0026#34;Dos\u0026#34;); Promise.all([promesa1, promesa2]) .then((resultados) =\u0026gt; console.log(resultados)) .catch((error) =\u0026gt; console.error(\u0026#34;Error:\u0026#34;, error)); Conclusión # La asincronía es un aspecto fundamental en el desarrollo de aplicaciones modernas, permitiendo la ejecución eficiente de operaciones no bloqueantes. En JavaScript, la asincronía se gestiona mediante callbacks, promesas y async/await, proporcionando herramientas poderosas para trabajar con operaciones asincrónicas de manera clara y concisa. Con una comprensión sólida de estos conceptos y prácticas, los desarrolladores pueden crear aplicaciones más robustas y responsivas.\nVideos # Mira este video desde 01:37:21 hasta 01:50:35 minutos (ya está marcado).\nMira este video desde 00:45:31 hasta 01:15:41 minutos (ya está marcado).\n","date":"6 febrero 2024","permalink":"/platform/nodejs/asincronia/","section":"Nodejs","summary":"La asincronía es un concepto fundamental en el mundo de la programación moderna, especialmente en lenguajes como JavaScript.","title":"Asincronía"},{"content":"En el vasto mundo de la programación, la sincronización y la asincronía son conceptos fundamentales. El código síncrono, en particular, ha sido una piedra angular en el desarrollo de software, especialmente en lenguajes de programación populares como JavaScript. Este artículo se sumerge en la historia del código síncrono y proporciona ejemplos prácticos en JavaScript para ilustrar su funcionamiento.\nHistoria del Código Síncrono # El código síncrono se refiere a la ejecución de instrucciones en secuencia, una tras otra, de manera ordenada y predecible. Este enfoque tradicional de programación ha existido desde los primeros días de la informática. Los primeros lenguajes de programación, como Fortran y COBOL, se basaban en la ejecución síncrona de instrucciones. En ese entonces, los programas se ejecutaban línea por línea, de arriba a abajo, y el flujo de control seguía un camino lineal.\nCon el advenimiento de los lenguajes de programación de alto nivel, como C y Pascal, el código síncrono se convirtió en la norma. Estos lenguajes proporcionaban estructuras de control de flujo más sofisticadas, como bucles y condicionales, pero aún mantenían un enfoque síncrono en la ejecución de instrucciones.\nJavaScript, lanzado por primera vez en 1995, inicialmente se ejecutaba de manera síncrona en los navegadores web. Las acciones del usuario, como hacer clic en un botón o enviar un formulario, desencadenaban eventos que se manejaban de manera secuencial. Sin embargo, con el tiempo, el aumento de la complejidad de las aplicaciones web llevó a la necesidad de realizar operaciones no bloqueantes y asíncronas.\nEjemplos de Código Síncrono en JavaScript # A continuación, se presentan algunos ejemplos de código síncrono en JavaScript para ilustrar su funcionamiento:\nEjemplo de operaciones matemáticas síncronas: // Suma de dos números const suma = (a, b) =\u0026gt; { return a + b; }; // Multiplicación de dos números const multiplicacion = (a, b) =\u0026gt; { return a * b; }; // Uso de las funciones const resultadoSuma = suma(5, 3); const resultadoMultiplicacion = multiplicacion(4, 6); console.log(resultadoSuma); // Output: 8 console.log(resultadoMultiplicacion); // Output: 24 Ejemplo de manipulación de arrays de forma síncrona: // Función para encontrar el máximo en un array const encontrarMaximo = (arr) =\u0026gt; { let max = arr[0]; for (let i = 1; i \u0026lt; arr.length; i++) { if (arr[i] \u0026gt; max) { max = arr[i]; } } return max; }; // Array de números const numeros = [4, 7, 2, 9, 1, 6]; // Encontrar el máximo de los números const maximo = encontrarMaximo(numeros); console.log(maximo); // Output: 9 Ejemplo de manipulación de cadenas de forma síncrona: // Función para invertir una cadena const invertirCadena = (cadena) =\u0026gt; { return cadena.split(\u0026#34;\u0026#34;).reverse().join(\u0026#34;\u0026#34;); }; // Cadena de texto const texto = \u0026#34;¡Hola, mundo!\u0026#34;; // Invertir la cadena const cadenaInvertida = invertirCadena(texto); console.log(cadenaInvertida); // Output: \u0026#34;!odnum ,aloH¡\u0026#34; Estos ejemplos ilustran cómo el código síncrono en JavaScript se ejecuta de manera secuencial, lo que permite realizar operaciones en un orden predecible y controlado.\nConclusión # El código síncrono ha sido fundamental en el desarrollo de software durante décadas. Aunque los enfoques asíncronos han ganado popularidad con la evolución de las aplicaciones modernas, comprender y dominar el código síncrono sigue siendo esencial para todo desarrollador. A través de ejemplos prácticos en JavaScript, hemos explorado cómo el código síncrono se ejecuta en secuencia, ofreciendo un flujo de control claro y predecible en la programación.\n","date":"6 febrero 2024","permalink":"/platform/nodejs/sincronia/","section":"Nodejs","summary":"En el vasto mundo de la programación, la sincronización y la asincronía son conceptos fundamentales.","title":"Sincronía"},{"content":"Título: Explorando las Callback Functions en JavaScript: Una Guía Integral\nResumen: Este artículo se centra en las Callback Functions en JavaScript, sin abordar operaciones asíncronas ni entornos específicos como Node.js. Desde los fundamentos hasta la aplicación práctica, exploraremos cómo las callbacks mejoran la modularidad del código y manejan eventos, sin introducir complejidades asociadas con la asincronía.\nIntroducción: # Las Callback Functions en JavaScript son herramientas versátiles que van más allá de la asincronía y los entornos específicos como Node.js. Este artículo se enfoca en los conceptos fundamentales de las callbacks, su utilidad en la modularidad del código y el manejo de eventos, proporcionando una comprensión integral de esta característica esencial de JavaScript.\nI. Definición de Callback Function: # Una Callback Function es una función que se pasa como argumento a otra función y se ejecuta después de que la función principal ha completado su ejecución.\nEjemplo Básico: # function saludar(nombre, callback) { console.log(\u0026#34;Hola, \u0026#34; + nombre + \u0026#34;!\u0026#34;); callback(); } function despedirse() { console.log(\u0026#34;Hasta luego.\u0026#34;); } saludar(\u0026#34;Carlos\u0026#34;, despedirse); En este ejemplo, la función despedirse es una callback que se ejecuta después de imprimir el saludo.\nII. Utilidad de las Callbacks: # 1. Modularidad del Código: # Las Callback Functions permiten la modularidad, facilitando la reutilización y el mantenimiento independiente de porciones específicas de código.\nEjemplo de Modularidad: # function tareaA(callback) { console.log(\u0026#34;Tarea A completada.\u0026#34;); callback(); } function tareaB() { console.log(\u0026#34;Tarea B completada.\u0026#34;); } tareaA(tareaB); En este caso, tareaA y tareaB pueden modificarse o utilizarse de forma independiente.\n2. Manejo de Eventos: # Las callbacks son esenciales para el manejo de eventos en el desarrollo de interfaces de usuario y aplicaciones web.\ndocument.getElementById(\u0026#34;boton\u0026#34;).addEventListener(\u0026#34;click\u0026#34;, function () { console.log(\u0026#34;Botón clickeado.\u0026#34;); }); Aquí, la función que maneja el evento de clic es una callback que se ejecuta cuando ocurre el evento.\nIII. Evitar Callback Hell: # En situaciones donde múltiples callbacks anidadas pueden volverse difíciles de leer, conocido como \u0026ldquo;Callback Hell\u0026rdquo;, otras estructuras pueden ser preferibles.\nfunction tareaAsincrona(callback) { setTimeout(function () { console.log(\u0026#34;Tarea asíncrona completada.\u0026#34;); callback(); }, 2000); } tareaAsincrona(function () { console.log(\u0026#34;Callback de la tarea asíncrona.\u0026#34;); }); Este ejemplo ilustra cómo evitar el anidamiento excesivo de callbacks.\nConclusión: # Las Callback Functions en JavaScript son esenciales para mejorar la modularidad del código y manejar eventos. Este artículo ha proporcionado una guía integral, desde los fundamentos hasta ejemplos prácticos, sin adentrarse en la complejidad de las operaciones asíncronas. Al comprender cómo y cuándo utilizar callbacks, los desarrolladores pueden fortalecer la estructura y la claridad de su código en cualquier contexto JavaScript.\nVideo # ","date":"5 febrero 2024","permalink":"/platform/nodejs/callback/","section":"Nodejs","summary":"Título: Explorando las Callback Functions en JavaScript: Una Guía Integral","title":"Callback en JavaScript"},{"content":"Este artículo se sumerge en el módulo fs de Node.js, un componente esencial que facilita la interacción con el sistema de archivos. Desde los conceptos básicos hasta ejemplos de código práctico utilizando la sintaxis de importación y exportación de ESModules, exploraremos las funciones clave de este módulo. Esto permitirá a los desarrolladores comprender cómo trabajar eficientemente con archivos y directorios en sus aplicaciones Node.js.\nIntroducción: # El módulo fs en Node.js es una herramienta crucial para interactuar con el sistema de archivos subyacente. Con la adopción de ESModules, la sintaxis de importación y exportación se integra perfectamente, brindando una experiencia más moderna. Este artículo proporcionará una guía completa, desde los fundamentos hasta la aplicación práctica, permitiendo a los desarrolladores aprovechar al máximo las funciones del módulo fs en sus proyectos.\nI. Fundamentos del Módulo fs con ESModules: # 1. Lectura y Escritura de Archivos: # import fs from \u0026#34;fs\u0026#34;; // Lectura de un archivo fs.readFile(\u0026#34;archivo.txt\u0026#34;, \u0026#34;utf8\u0026#34;, (err, data) =\u0026gt; { if (err) throw err; console.log(\u0026#34;Contenido del Archivo:\u0026#34;, data); }); // Escritura en un archivo const contenido = \u0026#34;Hola, este es un nuevo contenido.\u0026#34;; fs.writeFile(\u0026#34;nuevoArchivo.txt\u0026#34;, contenido, \u0026#34;utf8\u0026#34;, (err) =\u0026gt; { if (err) throw err; console.log(\u0026#34;Archivo creado y contenido escrito con éxito.\u0026#34;); }); 2. Operaciones con Directorios: # // Creación de un nuevo directorio fs.mkdir(\u0026#34;nuevoDirectorio\u0026#34;, (err) =\u0026gt; { if (err) throw err; console.log(\u0026#34;Directorio creado exitosamente.\u0026#34;); }); // Listado de archivos en un directorio fs.readdir(\u0026#34;nuevoDirectorio\u0026#34;, (err, files) =\u0026gt; { if (err) throw err; console.log(\u0026#34;Archivos en el Directorio:\u0026#34;, files); }); 3. Eliminación de Archivos y Directorios: # // Eliminación de un archivo fs.unlink(\u0026#34;archivoAEliminar.txt\u0026#34;, (err) =\u0026gt; { if (err) throw err; console.log(\u0026#34;Archivo eliminado exitosamente.\u0026#34;); }); // Eliminación de un directorio fs.rmdir(\u0026#34;directorioAEliminar\u0026#34;, { recursive: true }, (err) =\u0026gt; { if (err) throw err; console.log(\u0026#34;Directorio eliminado exitosamente.\u0026#34;); }); II. Funciones Avanzadas del Módulo fs con ESModules: # 1. Copia de Archivos: # // Copia de un archivo fs.copyFile(\u0026#34;archivoOriginal.txt\u0026#34;, \u0026#34;copiaArchivo.txt\u0026#34;, (err) =\u0026gt; { if (err) throw err; console.log(\u0026#34;Archivo copiado exitosamente.\u0026#34;); }); 2. Obtención de Estadísticas de Archivos: # // Obtención de estadísticas de un archivo fs.stat(\u0026#34;archivo.txt\u0026#34;, (err, stats) =\u0026gt; { if (err) throw err; console.log(\u0026#34;Tamaño del Archivo:\u0026#34;, stats.size, \u0026#34;bytes\u0026#34;); console.log(\u0026#34;Fecha de Creación:\u0026#34;, stats.birthtime); }); III. Aplicaciones Prácticas del Módulo fs con ESModules: # 1. Lectura y Escritura Asíncrona: # // Lectura y escritura asíncrona de archivos const contenidoArchivo = fs.readFileSync(\u0026#34;archivo.txt\u0026#34;, \u0026#34;utf8\u0026#34;); fs.writeFileSync(\u0026#34;nuevoArchivoAsync.txt\u0026#34;, contenidoArchivo, \u0026#34;utf8\u0026#34;); console.log(\u0026#34;Operaciones asíncronas completadas.\u0026#34;); 2. Creación de Estructuras de Directorios: # // Creación de una estructura de directorios const estructuraDirectorios = [\u0026#34;docs\u0026#34;, \u0026#34;img\u0026#34;, \u0026#34;css\u0026#34;, \u0026#34;js\u0026#34;]; estructuraDirectorios.forEach((dir) =\u0026gt; { fs.mkdir(dir, (err) =\u0026gt; { if (err) throw err; console.log(`Directorio \u0026#39;${dir}\u0026#39; creado exitosamente.`); }); }); Conclusiones: # Este artículo ha explorado el módulo fs de Node.js utilizando la sintaxis de importación y exportación de ESModules. Al aprovechar las funciones del módulo fs con esta nueva sintaxis, los desarrolladores pueden realizar operaciones avanzadas con archivos y directorios de manera más concisa y moderna. Con una comprensión sólida y ejemplos\nVideo # Mira este video desde 01:30:12 hasta 01:37:21 minutos\n","date":"5 febrero 2024","permalink":"/platform/nodejs/fs/intro/","section":"Nodejs","summary":"Este artículo se sumerge en el módulo fs de Node.","title":"Módulo FS"},{"content":"Este artículo se sumerge en el módulo os de Node.js, una herramienta crucial que proporciona información detallada sobre el sistema operativo subyacente. Desde conceptos fundamentales hasta ejemplos de código práctico, exploraremos las funciones esenciales de este módulo utilizando la sintaxis de importación y exportación de ESModules. Esto permitirá a los desarrolladores aprovechar al máximo las capacidades del módulo os en aplicaciones del mundo real.\nIntroducción: # Con la adopción de ESModules en Node.js, el módulo os se integra perfectamente con la nueva sintaxis de importación y exportación. En este artículo, nos sumergiremos en los fundamentos de este módulo utilizando ESModules y proporcionaremos ejemplos de código práctico. Esto permitirá a los desarrolladores comprender y aplicar eficazmente las capacidades del módulo os en sus proyectos, mejorando la optimización y la eficiencia.\nI. Fundamentos del Módulo OS con ESModules: # 1. Obtener Información Básica del Sistema: # import os from \u0026#34;os\u0026#34;; console.log(\u0026#34;Sistema Operativo:\u0026#34;, os.platform()); console.log(\u0026#34;Arquitectura de la CPU:\u0026#34;, os.arch()); console.log(\u0026#34;Versión del Sistema:\u0026#34;, os.version()); 2. Gestión de la Memoria: # console.log(\u0026#34;Memoria Libre:\u0026#34;, os.freemem() / 1024 / 1024, \u0026#34;MB\u0026#34;); console.log(\u0026#34;Memoria Total:\u0026#34;, os.totalmem() / 1024 / 1024, \u0026#34;MB\u0026#34;); console.log( \u0026#34;Memoria Utilizada:\u0026#34;, (os.totalmem() - os.freemem()) / 1024 / 1024, \u0026#34;MB\u0026#34; ); 3. Información sobre el Usuario: # console.log(\u0026#34;Usuario:\u0026#34;, os.userInfo().username); console.log(\u0026#34;Directorio de Inicio:\u0026#34;, os.homedir()); II. Funciones Avanzadas del Módulo OS con ESModules: # 1. Métodos para la Gestión de Procesos: # console.log(\u0026#34;Carga Promedio del Sistema:\u0026#34;, os.loadavg()); console.log(\u0026#34;Identificación del Proceso Actual:\u0026#34;, process.pid); 2. Utilización de CPU: # console.log(\u0026#34;Información de la CPU:\u0026#34;, os.cpus()); III. Aplicaciones Prácticas del Módulo OS con ESModules: # 1. Gestión de Recursos en Aplicaciones: # const availableMemory = (os.freemem() / os.totalmem()) * 100; if (availableMemory \u0026lt; 10) { console.log(\u0026#34;¡Advertencia! Poca memoria disponible.\u0026#34;); } else { console.log(\u0026#34;Memoria suficiente disponible.\u0026#34;); } 2. Implementación de Estrategias de Escalabilidad: # const cpuCores = os.cpus().length; if (cpuCores \u0026lt; 4) { console.log( \u0026#34;Considere escalar la aplicación para aprovechar mejor los recursos de la CPU.\u0026#34; ); } else { console.log( \u0026#34;La aplicación está optimizada para la cantidad actual de núcleos de CPU.\u0026#34; ); } Conclusiones: # Este artículo ha explorado el módulo os de Node.js utilizando la sintaxis de importación y exportación de ESModules. Al aprovechar las funciones del módulo os con esta nueva sintaxis, los desarrolladores pueden no solo obtener información sobre el sistema operativo sino también aplicar decisiones informadas en la gestión de recursos y estrategias de escalabilidad. Este conocimiento práctico capacitará a los desarrolladores para optimizar sus aplicaciones y mejorar la eficiencia en situaciones del mundo real.\nVideo # Mira este video desde 35:31 hasta 45:31 minutos\n","date":"5 febrero 2024","permalink":"/platform/nodejs/os/","section":"Nodejs","summary":"Este artículo se sumerge en el módulo os de Node.","title":"Módulo OS"},{"content":"Este artículo proporciona una introducción detallada a Node.js, una plataforma de desarrollo basada en JavaScript que permite la creación de aplicaciones del lado del servidor eficientes y escalables. Desde sus fundamentos básicos hasta conceptos más avanzados, se explorarán las características clave de Node.js, su arquitectura, y cómo aprovechar su capacidad para construir aplicaciones web modernas.\nIntroducción: # Node.js ha transformado el panorama del desarrollo web al permitir a los programadores utilizar JavaScript tanto en el lado del cliente como en el servidor. Este artículo pretende sumergirse en los fundamentos de Node.js, proporcionando una guía detallada para aquellos que ya están familiarizados con JavaScript.\nI. Fundamentos Básicos: # 1. ¿Qué es Node.js? # Node.js es un entorno de ejecución de JavaScript del lado del servidor construido sobre el motor V8 de Google Chrome. Permite a los desarrolladores crear aplicaciones escalables y eficientes al utilizar un modelo de operaciones no bloqueantes y orientado a eventos.\n2. Características Clave: # No Bloqueante y Orientado a Eventos: Node.js utiliza un modelo de E/S no bloqueante que permite manejar múltiples operaciones concurrentemente, ideal para aplicaciones de alto rendimiento. Motor V8 de Google Chrome: La velocidad de ejecución de JavaScript se debe al potente motor V8 de Google Chrome, que compila el código directamente a código de máquina. NPM (Node Package Manager): Node.js incluye NPM, un sistema de gestión de paquetes que facilita la instalación y gestión de dependencias. II. Creación de Aplicaciones con Node.js: # 1. Instalación de Node.js: # El primer paso es instalar Node.js en el sistema. Se explorarán los métodos de instalación para diferentes sistemas operativos y cómo verificar la instalación.\n2. Hola Mundo en Node.js: # A través de un simple ejemplo de \u0026ldquo;Hola Mundo\u0026rdquo;, se introducirá la sintaxis básica de Node.js y se ejecutará el primer script en el servidor.\n3. Módulos en Node.js: # Node.js permite la modularidad mediante el uso de módulos. Se explicará cómo crear, importar y utilizar módulos para organizar el código de manera eficiente.\nIII. Construcción de Servidores y Manejo de Eventos: # 1. Creación de un Servidor HTTP: # Se guiará a los lectores en la creación de un servidor HTTP básico utilizando Node.js, resaltando el manejo de eventos y la capacidad de respuesta no bloqueante.\n2. Gestión de Eventos con EventEmitter: # Node.js se basa en el patrón de diseño de EventEmitter. Se explorará cómo utilizar este patrón para manejar eventos y crear aplicaciones altamente interactivas.\nIV. Aplicaciones Web con Express.js: # 1. Introducción a Express.js: # Express.js es un marco minimalista para construir aplicaciones web con Node.js. Se explicará cómo instalar Express.js y crear una aplicación web simple.\n2. Enrutamiento en Express.js: # Se explorará el enrutamiento en Express.js, permitiendo a los desarrolladores definir cómo la aplicación responde a las solicitudes del cliente.\nV. Manejo de Asincronía y Promesas: # 1. Programación Asíncrona: # Node.js se destaca por su capacidad para manejar operaciones asincrónicas. Se abordará la programación asincrónica y cómo trabajar con devoluciones de llamada.\n2. Introducción a las Promesas: # Las promesas son una forma más avanzada de manejar operaciones asincrónicas. Se introducirán las promesas y cómo facilitan la escritura de código más limpio y estructurado.\nConclusiones: # Node.js ha revolucionado la forma en que se desarrollan las aplicaciones del lado del servidor, brindando a los programadores una herramienta poderosa y eficiente. Este artículo ha proporcionado una base sólida para aquellos familiarizados con JavaScript, desde los conceptos fundamentales hasta una introducción completa a la construcción de aplicaciones web modernas con Node.js. Al aprovechar su capacidad para manejar operaciones no bloqueantes y orientadas a eventos, los desarrolladores pueden construir aplicaciones escalables y de alto rendimiento en el fascinante mundo de Node.js.\nVideo # Mira este video desde 00:00 hasta 28:19 minutos\n","date":"5 febrero 2024","permalink":"/platform/nodejs/intro/","section":"Nodejs","summary":"Este artículo proporciona una introducción detallada a Node.","title":"Introducción a NodeJS"},{"content":"Veremos de manera exhaustiva el tema de los servidores, desde sus conceptos fundamentales hasta los desafíos avanzados que enfrentan en la actualidad. Se examinan los diferentes tipos de servidores, su arquitectura, funciones, seguridad y las tendencias emergentes en el ámbito de la tecnología de servidores.\nIntroducción: # Los servidores son elementos fundamentales en la infraestructura de tecnologías de la información, proporcionando recursos computacionales y servicios esenciales para empresas y usuarios individuales. Este artículo busca proporcionar una visión integral de los servidores, comenzando desde sus principios básicos y avanzando hacia aspectos más complejos.\nI. Fundamentos Básicos: # 1. Definición y Propósito: # Un servidor, en el contexto de las redes informáticas, se define como una máquina diseñada para proporcionar servicios, recursos o datos a otras computadoras, conocidas como clientes. El propósito principal de un servidor es facilitar la comunicación y el intercambio de información en una red.\n2. Tipos de Servidores: # Existen varios tipos de servidores, cada uno con funciones específicas. Los servidores web gestionan la entrega de páginas web, los servidores de correo se encargan de la gestión de correos electrónicos, los servidores de archivos administran el almacenamiento compartido y los servidores de aplicaciones proporcionan servicios específicos a las aplicaciones.\n3. Arquitectura Básica: # La arquitectura básica de un servidor incluye una unidad central de procesamiento (CPU), memoria, almacenamiento y una interfaz de red. Estos componentes trabajan en conjunto para procesar solicitudes, almacenar datos y garantizar la conectividad en la red. El rendimiento del servidor depende en gran medida de la eficiencia de estos elementos.\nII. Funciones y Operación: # 1. Servidores Web: # Los servidores web desempeñan un papel crucial en la entrega de contenido web. Utilizan protocolos como HTTP y HTTPS para transferir datos entre el servidor y los clientes. La escalabilidad es esencial para manejar múltiples solicitudes simultáneas y garantizar un rendimiento óptimo.\n2. Servidores de Correo: # Los servidores de correo gestionan la recepción, almacenamiento y envío de correos electrónicos. Protocolos como SMTP e IMAP facilitan la transmisión segura de mensajes. La seguridad es fundamental para proteger la privacidad y la integridad de la información transmitida.\n3. Servidores de Archivos: # Los servidores de archivos se centran en el almacenamiento y la gestión de archivos compartidos en una red. Protocolos como FTP y SMB permiten el intercambio eficiente de archivos entre clientes y el servidor.\nIII. Aspectos Avanzados: # 1. Virtualización: # La virtualización de servidores ha revolucionado la forma en que se gestionan los recursos. Permite la ejecución de múltiples sistemas operativos en una única máquina física, mejorando la eficiencia, la flexibilidad y la utilización de recursos.\n2. Seguridad de Servidores: # La seguridad de los servidores es esencial para proteger los datos y servicios. Medidas como cortafuegos, cifrado de datos y una gestión adecuada de accesos ayudan a mitigar riesgos y garantizar la integridad de la información almacenada.\n3. Desafíos Emergentes: # Los servidores enfrentan desafíos avanzados en la actualidad, como la gestión de grandes volúmenes de datos, la integración de tecnologías emergentes como la inteligencia artificial y la necesidad de mayor eficiencia energética. La capacidad de adaptación y la innovación son clave para abordar estos desafíos en constante evolución.\nConclusiones: # Este artículo ha proporcionado una visión completa de los servidores, desde sus fundamentos hasta los desafíos más avanzados. En un mundo digital en constante cambio, la comprensión de estos principios es esencial para aquellos que buscan gestionar eficazmente los recursos informáticos y aprovechar las oportunidades que ofrece la tecnología de servidores en la actualidad. La evolución continua de los servidores refleja su importancia en la transformación y el progreso continuo de la infraestructura digital.\nVideos # ","date":"5 febrero 2024","permalink":"/platform/backend/servidores/","section":"Backends","summary":"Veremos de manera exhaustiva el tema de los servidores, desde sus conceptos fundamentales hasta los desafíos avanzados que enfrentan en la actualidad.","title":"Servidores"},{"content":"Diseño # Este es el diseño final: API # Link de la API JSONPlaceholder:\nhttps://jsonplaceholder.typicode.com/users Link para las imágenes:\nhttps://picsum.photos/seed/1/300/300 Instrucciones # Diseña una aplicación web utilizando React para mostrar tarjetas de usuarios obtenidos de la API JSONPlaceholder. Cada tarjeta debe representar un usuario y contener su nombre, nombre de usuario, correo electrónico y una imagen de demostración.\nRequerimientos # La aplicación debe utilizar React para la creación de componentes y la gestión del estado.\nLa aplicación debe realizar una solicitud a la API JSONPlaceholder para obtener datos de usuarios. Utiliza fetch o alguna biblioteca como axios para realizar la petición a la API.\nDeberás diseñar un componente UserCard que acepte propiedades (props) para el nombre, nombre de usuario, correo electrónico e imagen del usuario. Este componente debe renderizar una tarjeta estilizada con la información proporcionada.\nUtiliza el componente UserCard para representar cada usuario obtenido de la API.\nPuntos Adicionales (Opcionales): # Agrega funcionalidades de navegación para ver detalles adicionales de cada usuario al hacer clic en una tarjeta.\nImplementa una barra de búsqueda que permita filtrar los usuarios según su nombre o nombre de usuario.\nMejora el diseño de las tarjetas agregando más detalles o información adicional.\nRecuerda que la calidad del código, la estructura de componentes y la experiencia del usuario serán evaluadas. ¡Buena suerte!\nNota: Este ejercicio será evaluado y deberás presentarlo al finalizar el tiempo de la práctica calificada de hoy.\nConsideraciones\nSi el ejercicio está igual a lo solicitado, tendrás un 100% de la nota. Para la revisión, debes subir un archivo PDF con las capturas de pantalla de tu código y de tu página renderizada. ","date":"6 diciembre 2023","permalink":"/platform/react/practicas/api/","section":"Reacts","summary":"Diseño # Este es el diseño final: API # Link de la API JSONPlaceholder:","title":"Práctica - Tarjetas de usuarios"},{"content":"Diseño # El diseño es el siguiente:\nSin interacción # Al dar click en \u0026lsquo;Incrementar\u0026rsquo; # Al dar click en \u0026lsquo;Decrementar\u0026rsquo; # Al dar click en \u0026lsquo;Decrementar\u0026rsquo; cuando el contador ya está en 0 # Al dar click en \u0026lsquo;Resetear\u0026rsquo; # Nótese que primero se incrementó el contador hasta el número 2, y luego se reseteó a 0. Al dar click en \u0026lsquo;Resetear historial\u0026rsquo; # Nótese que primero se incrementó el contador hasta el número 2, y luego se reseteó solo el historial, no se reseteó el contador. Al dar click en \u0026lsquo;Cambiar manualmente\u0026rsquo; # Escribimos 100 en el input y luego damos click al boton \u0026ldquo;Cambiar manualmente\u0026rdquo;. Intentar colocar un número negativo # Instrucciones # Este ejercicio tiene como objetivo brindarte práctica en el desarrollo de componentes interactivos utilizando React. Crearemos una aplicación de contador que incluya características avanzadas, como la capacidad de deshacer acciones y mantener un historial de las operaciones realizadas.\nCreación de Componentes:\nUtiliza React para estructurar tu aplicación en componentes. Crea al menos los siguientes componentes: Contador: Representa el componente principal que mostrará el valor actual del contador. Boton: Componente reutilizable que representará un botón con una función específica. Puede ser utilizado para incrementar, decrementar o resetear el contador. EntradaManual: Proporcionará una entrada numérica para cambiar el valor del contador manualmente. MensajesError: Mostrará mensajes de error en caso de que se ingresen valores incorrectos. Estilo Visual:\nImplementa animaciones o transiciones para resaltar la interactividad de los elementos. Contador y Botones:\nEl componente Contador deberá mostrar el valor actual del contador. Utiliza el componente reutilizable Boton para crear botones que realicen las siguientes acciones: Incrementar el contador en 1. Decrementar el contador en 1 (con la restricción de no permitir números negativos). Resetear el contador a 0. Entrada Manual y Validación:\nEl componente EntradaManual deberá proporcionar una entrada numérica que permita al usuario cambiar el valor del contador manualmente. Implementa la validación en EntradaManual para asegurar que el valor sea mayor o igual a 0. Manejo de Errores:\nUtiliza el componente MensajesError para mostrar mensajes de error cuando se ingresan valores incorrectos o se intenta decrementar por debajo de 0. Historial de Acciones con UseState:\nUtiliza el hook useState para mantener un estado local que almacene el historial de acciones realizadas en el contador. Muestra el historial de acciones en un componente dedicado. Resetear Historial:\nAgrega un botón que permita al usuario resetear completamente el historial de acciones. Desafío Adicional:\nImplementa una nueva funcionalidad que permita al usuario cambiar el color del contador y de los botones dinámicamente. Crea un nuevo componente llamado SelectorColor que contenga una lista desplegable con opciones de colores. Al seleccionar un color, cambia dinámicamente el fondo del contador y el color del texto, así como el fondo de los botones. Asegúrate de que la elección del color persista incluso después de realizar acciones como incrementar, decrementar o resetear el contador. Implementa la funcionalidad de deshacer utilizando el hook useState para rastrear el estado anterior del contador. Permite al usuario deshacer la última acción realizada. Conclusión: Este ejercicio te proporcionará experiencia práctica en la creación y gestión de componentes interactivos en una aplicación React. Asegúrate de comprender cómo los diferentes componentes interactúan entre sí y cómo se gestionan los estados para brindar una experiencia de usuario fluida. ¡Éxito en tu práctica!\nNota: Este ejercicio será evaluado y deberás presentarlo al finalizar el tiempo de la práctica calificada de mañana.\nConsideraciones\nSi el ejercicio está igual a lo solicitado, tendrás un 100% de la nota. Tu proyecto de React debe tener como mínimo 4 componentes (Contador, Boton, EntradaManual, MensajesError). Para la revisión, debes subir un archivo PDF con las capturas de pantalla de tu código y de tu página renderizada. ","date":"6 diciembre 2023","permalink":"/platform/react/practicas/contador/","section":"Reacts","summary":"Diseño # El diseño es el siguiente:","title":"Práctica - Contador"},{"content":"Crea una aplicación React para mostrar información sobre diferentes lenguajes de programación. La aplicación debe utilizar componentes y props para representar cada lenguaje de programación de manera dinámica.\nDiseño # El diseño es el siguiente: Para las imágenes puedes usar:\nhttps://img.icons8.com/color/144/000000/javascript.png https://img.icons8.com/color/144/000000/python.png Instrucciones # Componente Card:\nCrea un componente funcional llamado ProgrammingLanguageCard que acepta propiedades (props) para representar la información de un lenguaje de programación específico. Este componente debe renderizar la imagen del logo del lenguaje, el título, una descripción y dos botones: uno para \u0026ldquo;Aprender más\u0026rdquo; y otro para \u0026ldquo;Ver código\u0026rdquo;. Utiliza el componente ProgrammingLanguageCard para representar la información de JavaScript y Python. Asegúrate de que la información se pase a través de props. Renderización Dinámica:\nModifica el código React para que pueda manejar la renderización dinámica de múltiples lenguajes de programación. Crea un array de objetos, donde cada objeto representa la información de un lenguaje de programación diferente. Puedes agregar más lenguajes si lo deseas. Utiliza un bucle o la función map para renderizar las tarjetas de lenguaje de programación de manera dinámica. Funciones de Botones (Opcional):\nAgrega funciones a los botones \u0026ldquo;Aprender más\u0026rdquo; y \u0026ldquo;Ver código\u0026rdquo; dentro del componente ProgrammingLanguageCard. Estas funciones pueden ser simples alertas por ahora, pero si lo deseas, puedes expandirlas para realizar acciones más significativas. Estilo Adicional (Opcional):\nSi lo deseas, experimenta con estilos adicionales para mejorar la apariencia de las tarjetas de lenguajes de programación. Puedes ajustar colores, fuentes, tamaños y márgenes según tus preferencias. Al completar este ejercicio, tendrás una aplicación React que muestra información sobre diferentes lenguajes de programación de manera dinámica y estilizada.\nNota: Este ejercicio será evaluado y deberás presentarlo al finalizar el tiempo de la práctica calificada de hoy.\nConsideraciones\nSi el ejercicio está igual que en la imagen, tendrás un 90% de la nota, el otro 10% tiene que ver con tu creatividad al agregarle más detalles. Tu proyecto de React debe tener como mínimo 4 cards (sí, tienes que agregarle 2 más al diseño de la imagen). Para la revisión, debes subir un archivo PDF con las capturas de pantalla de tu código y de tu página renderizada. ","date":"6 diciembre 2023","permalink":"/platform/react/practicas/props/","section":"Reacts","summary":"Crea una aplicación React para mostrar información sobre diferentes lenguajes de programación.","title":"Práctica - Props"},{"content":"Para esta práctica deberás replicar el siguiente diseño utilizando componentes de React.\nPara la imagen puedes utilizar el siguiente link:\nhttps://source.unsplash.com/800x400/?city\nNota: Este ejercicio será evaluado y deberás presentarlo al finalizar el tiempo de la práctica calificada de hoy.\nConsideraciones\nSi el ejercicio está igual que en la imagen, tendrás un 90% de la nota, el otro 10% tiene que ver con tu creatividad al agregarle más detalles. Tu proyecto de React debe tener más de dos componentes. Para la revisión, debes subir un archivo PDF con las capturas de pantalla de tu código y de tu página renderizada. ","date":"6 diciembre 2023","permalink":"/platform/react/practicas/componentes/","section":"Reacts","summary":"Para esta práctica deberás replicar el siguiente diseño utilizando componentes de React.","title":"Práctica - Componentes"},{"content":"Hoy haremos una aplicación web completa usando React, Tailwind CSS, y consumiendo una API.\nUtilizarás el tiempo de estudio de la tarde y el de la práctica calificada de hoy. Esto te da un total de 4 horas para terminar este ejercicio. Además, siéntete libre de colocar el reproductor de video a mayor velocidad, si gustas.\n¡Éxitos!\nLink de la API:\nhttps://pokeapi.co/ Video tutorial # Nota: Este ejercicio será evaluado y deberás presentarlo al finalizar el tiempo de la práctica calificada de hoy.\nConsideraciones\nSi el ejercicio está igual a lo solicitado en los tutoriales, tendrás un 100% de la nota. Para la revisión, debes subir un archivo PDF con las capturas de pantalla de tu código y de tu página renderizada. ","date":"5 diciembre 2023","permalink":"/platform/react/practicas/pokeapi/","section":"Reacts","summary":"Hoy haremos una aplicación web completa usando React, Tailwind CSS, y consumiendo una API.","title":"Práctica - Pokeapi"},{"content":"Hoy haremos una página web completa usando React y Tailwind CSS.\nUtilizarás el tiempo de estudio de la tarde y el de la práctica calificada de hoy. Esto te da un total de 4 horas para terminar este ejercicio. Además, siéntete libre de colocar el reproductor de video a mayor velocidad, si gustas.\n¡Éxitos!\nLink del reto en frontendmentor:\nhttps://www.frontendmentor.io/challenges/news-homepage-H6SWTa1MFl\nVideos tutoriales # Nota: Este ejercicio será evaluado y deberás presentarlo al finalizar el tiempo de la práctica calificada de hoy.\nConsideraciones\nSi el ejercicio está igual a lo solicitado en los tutoriales, tendrás un 100% de la nota. Para la revisión, debes subir un archivo PDF con las capturas de pantalla de tu código y de tu página renderizada. ","date":"5 diciembre 2023","permalink":"/platform/react/practicas/news/","section":"Reacts","summary":"Hoy haremos una página web completa usando React y Tailwind CSS.","title":"Práctica - News homepage"},{"content":"Hoy empezaremos a hacer una página web completa usando React y Tailwind CSS.\nUtilizarás el tiempo de estudio de la tarde y el de la práctica calificada, de hoy y mañana. Esto te da un total de 8 horas para terminar este ejercicio. Además, siéntete libre de colocar el reproductor de video a mayor velocidad, si gustas.\n¡Éxitos!\nLink del reto en frontendmentor:\nhttps://www.frontendmentor.io/challenges/sunnyside-agency-landing-page-7yVs3B6ef\nVideos tutoriales # Nota: Este ejercicio será evaluado y deberás presentarlo al finalizar el tiempo de la práctica calificada de mañana.\nConsideraciones\nSi el ejercicio está igual a lo solicitado en los tutoriales, tendrás un 100% de la nota. Para la revisión, debes subir un archivo PDF con las capturas de pantalla de tu código y de tu página renderizada. ","date":"5 diciembre 2023","permalink":"/platform/react/practicas/sunnyside/","section":"Reacts","summary":"Hoy empezaremos a hacer una página web completa usando React y Tailwind CSS.","title":"Práctica - Sunnyside"},{"content":"Para esta práctica calificada debes seguir el siguiente tutorial, y aprenderás a implementar useContext en un proyecto.\nNota: En lugar de pnpm run dev o pnpm install puedes usar npm run dev y npm install. Funciona de igual forma.\nNota: Este ejercicio será evaluado y deberás presentarlo al finalizar el tiempo de la práctica calificada de mañana.\nConsideraciones\nSi el ejercicio está igual que en el tutorial, tendrás un 90% de la nota, el otro 10% tiene que ver con tu creatividad al agregarle más detalles. Debes subir un archivo PDF con las imágenes de tu código y de tu página renderizada para su revisión. ","date":"5 diciembre 2023","permalink":"/platform/react/practicas/usecontext/","section":"Reacts","summary":"Para esta práctica calificada debes seguir el siguiente tutorial, y aprenderás a implementar useContext en un proyecto.","title":"Práctica - useContext"},{"content":"Para el repaso del día de hoy debes seguir los siguiente tutoriales. En el primero verás el inicio de la aplicación, y en el segundo verás la implementación de un custom hook.\nUtilizarás todo el tiempo de estudio de hoy más el de la práctica calificada, lo cual te da un total de 5 horas para terminar esta práctica.\nVideos # Primero:\nSegundo:\nNota: Este ejercicio será evaluado y deberás presentarlo al finalizar el tiempo de la práctica calificada de hoy.\nConsideraciones\nSi el ejercicio está igual que en el tutorial, tendrás un 90% de la nota, el otro 10% tiene que ver con tu creatividad al agregarle más detalles. Debes subir un archivo PDF con las imágenes de tu código y de tu página renderizada para su revisión. ","date":"5 diciembre 2023","permalink":"/platform/react/practicas/custom_hooks/","section":"Reacts","summary":"Para el repaso del día de hoy debes seguir los siguiente tutoriales.","title":"Práctica - custom hooks"},{"content":"Para el repaso de hoy, debes ver el siguiente video e intentar imitar las formas en las que está consumiendo una API.\nVideo # ","date":"5 diciembre 2023","permalink":"/platform/react/fetch_api/repaso/","section":"Reacts","summary":"Para el repaso de hoy, debes ver el siguiente video e intentar imitar las formas en las que está consumiendo una API.","title":"Repaso API"},{"content":"Objetivo del día: # El objetivo de este día es agregar funciones de búsqueda y filtrado a la aplicación de lista de pokemons para permitir a los usuarios buscar pokemons por nombre y filtrarlos por tipo, habilidades u otros criterios.\nTemas a cubrir: # Búsqueda de Pokemons:\nImplementar una función de búsqueda para encontrar pokemons por nombre. Actualizar la lista mostrada en tiempo real mientras se escribe en el campo de búsqueda. Filtrado de Pokemons:\nCrear filtros para clasificar los pokemons por tipo, habilidades, etc. Actualizar la lista de pokemons según los filtros seleccionados. Estilización y Mejoras de la Aplicación:\nAñadir estilos y mejorar la apariencia de la aplicación utilizando CSS o bibliotecas de estilos como Material-UI. Añadir interacciones y animaciones para mejorar la experiencia del usuario. Actividades prácticas: # Implementar la Búsqueda de Pokemons:\nAgrega un campo de búsqueda en la interfaz de usuario. Implementa una función para buscar pokemons por nombre utilizando el valor ingresado en el campo de búsqueda. Actualiza la lista mostrada en tiempo real a medida que se escribe en el campo de búsqueda. Agregar Filtros para el Filtrado de Pokemons:\nCrea controles de selección o cajas de verificación para filtrar pokemons por tipo, habilidades u otros criterios. Implementa una función para aplicar los filtros seleccionados a la lista de pokemons. Estilizar la Aplicación:\nAgrega estilos CSS para mejorar la apariencia de la aplicación. Utiliza técnicas de diseño responsivo para que la aplicación se vea bien en diferentes dispositivos. Añadir Interacciones y Animaciones:\nAgrega efectos de transición o animaciones para mejorar la experiencia del usuario al navegar y filtrar los pokemons. Desafíos opcionales para repaso: # Implementar Ordenamiento de Pokemons:\nAgrega controles para ordenar la lista de pokemons por nombre, número u otros atributos. Implementa una función para ordenar los pokemons según el criterio seleccionado. Añadir Paginación Avanzada:\nMejora la paginación para mostrar un número limitado de pokemons por página y permitir al usuario navegar entre páginas. Resumen del día: # En el día 3, hemos agregado funciones de búsqueda y filtrado a la aplicación de lista de pokemons. Los usuarios ahora pueden buscar pokemons por nombre y filtrarlos por tipo, habilidades u otros criterios. Hemos mejorado la apariencia de la aplicación con estilos CSS y hemos añadido interacciones y animaciones para mejorar la experiencia del usuario. Además, hemos explorado desafíos opcionales para seguir expandiendo la funcionalidad de la aplicación. ¡La aplicación ahora está completa y lista para que los usuarios disfruten explorando el mundo de los pokemons! Con estos tres días de desarrollo, has aprendido a trabajar con la Poke API, manejar estado con React Hooks, y mejorar la experiencia de usuario mediante la búsqueda, filtrado y estilización de la aplicación. ¡Felicidades por completar este proyecto!\nRecursos # https://keepcoding.io/blog/crear-un-filtro-de-busqueda-en-react/\n","date":"5 diciembre 2023","permalink":"/platform/react/pokeapi/","section":"Reacts","summary":"Objetivo del día: # El objetivo de este día es agregar funciones de búsqueda y filtrado a la aplicación de lista de pokemons para permitir a los usuarios buscar pokemons por nombre y filtrarlos por tipo, habilidades u otros criterios.","title":"Búsqueda y Filtrado de Pokemons"},{"content":"En este artículo, nos sumergiremos en la personalización de estilos con Tailwind CSS, un marco de trabajo que ha ganado popularidad gracias a su enfoque de \u0026ldquo;clases de utilidad\u0026rdquo;. Veremos cómo ajustar colores, tamaños de fuente y dimensiones específicas, como el ancho de un elemento. Además, exploraremos la creación de estilos personalizados para adaptar proyectos de manera única y eficiente.\n1. Introducción: # Tailwind CSS destaca por su filosofía de \u0026ldquo;no asumir nada\u0026rdquo;. Proporciona clases de bajo nivel para construir interfaces sin imponer estilos predeterminados. Veamos cómo aprovechar esta flexibilidad para personalizar nuestros estilos de manera efectiva.\n2. Modificando Colores y Tipografía: # Tailwind CSS facilita la personalización de colores y tamaños de fuente. Ejemplos prácticos incluyen:\n\u0026lt;button class=\u0026#34;bg-teal-500 text-gray-800 font-semibold py-3 px-6 rounded-md\u0026#34;\u0026gt; Botón Teal \u0026lt;/button\u0026gt; Aquí, bg-teal-500 establece el color de fondo teal, text-gray-800 define el color del texto como gris oscuro, y font-semibold establece la seminegrita.\n3. Personalización Avanzada: # Para ajustes más específicos, Tailwind CSS permite utilizar valores arbitrarios, como colores hexadecimales o dimensiones específicas. Ejemplos:\n\u0026lt;div class=\u0026#34;bg-[#3498db] text-white p-4\u0026#34;\u0026gt;Caja Azul con Texto Blanco\u0026lt;/div\u0026gt; \u0026lt;div class=\u0026#34;w-[500px] mx-auto\u0026#34;\u0026gt;Contenido con Ancho de 500px centrado\u0026lt;/div\u0026gt; Aquí, bg-[#3498db] establece el color de fondo a un azul específico, y w-[500px] define el ancho del elemento como 500 píxeles.\n4. Creando Estilos Personalizados: # Tailwind CSS facilita la creación de estilos personalizados mediante la extensión de clases. Puedes definir tus propias utilidades en tu archivo de configuración. Por ejemplo:\n// En tailwind.config.js module.exports = { theme: { extend: { colors: { primary: \u0026#34;#ff5733\u0026#34;, // Naranja arbitrario }, width: { \u0026#34;300px\u0026#34;: \u0026#34;300px\u0026#34;, // Ancho arbitrario de 300 píxeles }, }, }, variants: {}, plugins: [], }; Ahora, puedes usar estas personalizaciones en tu HTML:\n\u0026lt;div class=\u0026#34;bg-primary text-white p-4\u0026#34;\u0026gt;Caja Naranja con Texto Blanco\u0026lt;/div\u0026gt; \u0026lt;div class=\u0026#34;w-300px mx-auto\u0026#34;\u0026gt;Contenido con Ancho de 300px centrado\u0026lt;/div\u0026gt; 5. Optimización y Rendimiento: # Tailwind CSS proporciona herramientas para purgar clases no utilizadas y minimizar el tamaño de los archivos CSS, mejorando así la velocidad de carga de nuestra aplicación.\nTailwind CSS ofrece una forma sencilla y poderosa de personalizar estilos. Aprovecha valores arbitrarios para adaptar cada proyecto de manera única. Experimenta, ajusta y descubre cómo Tailwind CSS puede mejorar la eficiencia de tu flujo de trabajo y dar vida a tus diseños de manera rápida y personalizada.\nRecursos # Para más información, te recomiendo leer las siguientes páginas. Si necesitas leerlo en español puedes hacerlo traduciendo la página.\nhttps://tailwindcss.com/docs/adding-custom-styles#adding-base-syles https://tailwindcss.com/docs/font-family#customizing-your-theme https://tailwindcss.com/docs/adding-custom-styles#using-arbitrary-values Aquí te dejaré algunos otros videos.\n","date":"4 diciembre 2023","permalink":"/platform/tailwindcss/customstyles/","section":"Tailwindcsses","summary":"En este artículo, nos sumergiremos en la personalización de estilos con Tailwind CSS, un marco de trabajo que ha ganado popularidad gracias a su enfoque de \u0026ldquo;clases de utilidad\u0026rdquo;.","title":"Personalización de Estilos con Tailwind CSS"},{"content":"","date":"4 diciembre 2023","permalink":"/platform/tailwindcss/","section":"Tailwindcsses","summary":"","title":"Tailwindcsses"},{"content":"Durante el tiempo de lectura del día de hoy te dedicarás a seguir el siguiente tutorial. Recuerda ponerle pausa en los minutos en los que se te complique entender lo que se está haciendo. Además, la finalidad de este ejercicio es que te familiarices mucho más con el hook useState.\n¡Éxitos!\nVideo tutorial # El tutorial empieza a partir del minuto 58:20\n","date":"4 diciembre 2023","permalink":"/platform/react/usestate/practico/","section":"Reacts","summary":"Durante el tiempo de lectura del día de hoy te dedicarás a seguir el siguiente tutorial.","title":"useState - Práctico"},{"content":"Durante el tiempo de lectura del día de hoy te dedicarás a seguir el siguiente tutorial. Recuerda ponerle pausa en los minutos en los que se te complique entender lo que se está haciendo. Además, la finalidad de estos ejercicio es que te familiarices mucho más con el hook useEffect.\n¡Éxitos!\nVideo tutorial # ","date":"4 diciembre 2023","permalink":"/platform/react/useeffect/practico/","section":"Reacts","summary":"Durante el tiempo de lectura del día de hoy te dedicarás a seguir el siguiente tutorial.","title":"useEffect - Práctico"},{"content":"React, la biblioteca de JavaScript desarrollada por Facebook, ha revolucionado la forma en que construimos interfaces de usuario. Una de las características fundamentales que distingue a React es su enfoque en la creación de componentes reutilizables. Pero, ¿alguna vez te has preguntado cómo funcionan estos componentes bajo el capó a medida que interactúan con el entorno y los datos? Aquí es donde entra en juego el ciclo de vida de los componentes en React.\n1. Montaje: La Creación Inicial # El primer paso en el ciclo de vida de un componente en React es el montaje. Durante este proceso, el componente se crea e inserta en el DOM. Dos métodos clave se ejecutan en esta fase: constructor y componentDidMount. El constructor se utiliza para la inicialización del estado y la vinculación de eventos, mientras que componentDidMount se ejecuta después de que el componente ha sido renderizado en el DOM, permitiendo realizar acciones como llamadas a API o configuraciones de suscripciones.\nclass MiComponente extends React.Component { constructor(props) { super(props); this.state = { // Inicialización del estado }; } componentDidMount() { // Lógica después del montaje } render() { // Renderizado del componente } } 2. Actualización: Cambios y Re-renderizado # Cuando los datos cambian o el estado del componente se actualiza, se inicia la fase de actualización. En esta etapa, se ejecutan métodos como shouldComponentUpdate, componentDidUpdate, y, por supuesto, render. shouldComponentUpdate permite optimizar el rendimiento al decidir si el componente debe volver a renderizarse en función de cambios específicos en las propiedades o el estado.\nshouldComponentUpdate(nextProps, nextState) { // Lógica para determinar si se debe actualizar return true; // Actualizar siempre } 3. Desmontaje: Adiós al DOM # Cuando un componente ya no es necesario, se desmonta. El método componentWillUnmount se ejecuta antes de que el componente sea eliminado del DOM, brindando la oportunidad de limpiar recursos o cancelar suscripciones.\ncomponentWillUnmount() { // Lógica de limpieza antes de desmontar } 4. Manejo de Errores: ¡Algo Salió Mal! # React introduce una fase adicional para manejar errores llamada \u0026ldquo;Manejo de Errores\u0026rdquo;. Los métodos static getDerivedStateFromError y componentDidCatch se utilizan para gestionar errores en componentes secundarios y proporcionar una experiencia de usuario más robusta.\nstatic getDerivedStateFromError(error) { // Actualizar el estado en caso de error return { hasError: true }; } componentDidCatch(error, errorInfo) { // Lógica para registrar el error } Conclusión # Entender el ciclo de vida de los componentes en React es esencial para construir aplicaciones eficientes y fiables. Cada fase ofrece oportunidades para realizar acciones específicas y optimizar el rendimiento. Al dominar estos conceptos, los desarrolladores pueden aprovechar al máximo el poder de React y crear experiencias de usuario fluidas y receptivas. ¡Así que adelante, sumérgete en el fascinante viaje del ciclo de vida de los componentes en React!\nRecursos # ","date":"27 noviembre 2023","permalink":"/platform/react/ciclo_vida/","section":"Reacts","summary":"React, la biblioteca de JavaScript desarrollada por Facebook, ha revolucionado la forma en que construimos interfaces de usuario.","title":"Ciclo de vida de los componentes en React"},{"content":"Los Namespaces en PHP son una característica esencial para estructurar y organizar el código en aplicaciones modernas. Este artículo explora en profundidad el concepto de Namespaces, su implementación en PHP y cómo pueden ser utilizados para mejorar la legibilidad, modularidad y mantenibilidad del código fuente.\nIntroducción # En el desarrollo de software, la gestión efectiva de la complejidad del código es crucial. Los Namespaces en PHP proporcionan una solución elegante para evitar conflictos de nombres y organizar el código de manera eficiente. Este artículo aborda los conceptos fundamentales de Namespaces y su aplicación práctica en el contexto de PHP.\n1. Concepto de Namespaces # Los Namespaces son una forma de encapsular elementos, como clases, interfaces, funciones y constantes, evitando así posibles colisiones de nombres en el código. En PHP, los Namespaces permiten definir un ámbito único para los identificadores, mejorando la modularidad del código y facilitando la reutilización de componentes.\n\u0026lt;?php // Definición de un Namespace namespace MiProyecto; // Definición de una clase dentro del Namespace class MiClase { // ... } ?\u0026gt; 2. Sintaxis y Uso de Namespaces en PHP # Se analizará la sintaxis básica para la declaración y uso de Namespaces en PHP. Esto incluirá cómo asignar un Namespace a un archivo, cómo anidar Namespaces y cómo importar o utilizar elementos dentro de un Namespace.\n\u0026lt;?php // Declaración de un Namespace namespace MiProyecto; // Uso de la clase dentro del Namespace $obj = new MiClase(); // Importar un Namespace para simplificar el código use MiProyecto\\MiClase as ClaseSimplificada; $objSimplificado = new ClaseSimplificada(); ?\u0026gt; 3. Evitando Conflictos de Nombres # Un aspecto esencial de los Namespaces es su capacidad para prevenir conflictos de nombres. Este segmento explorará casos prácticos donde los Namespaces son especialmente útiles, como al integrar bibliotecas de terceros o al trabajar en proyectos colaborativos.\n\u0026lt;?php // Evitando conflictos de nombres con un Namespace namespace MiProyecto; // Uso de una clase de una biblioteca externa use BibliotecaExterna\\Clase; // Evitar conflictos al importar con un alias use BibliotecaExterna\\Clase as OtraClase; // ... ?\u0026gt; 4. Autocarga de Clases y Namespaces # La autocarga de clases es una práctica común en PHP para optimizar el rendimiento al cargar clases dinámicamente cuando se necesitan. Este apartado destacará cómo los Namespaces y la autocarga de clases están interconectados, brindando una visión detallada de las mejores prácticas para implementar esta técnica.\n\u0026lt;?php // Configuración de la autocarga de clases con Composer y PSR-4 require \u0026#39;vendor/autoload.php\u0026#39;; // Uso de una clase autocargada en un Namespace use MiProyecto\\ClaseAutocargada; $obj = new ClaseAutocargada(); ?\u0026gt; 5. Namespaces en el Contexto de Aplicaciones Web # Se discutirá la aplicación práctica de Namespaces en el desarrollo de aplicaciones web con PHP. Esto incluirá cómo estructurar Namespaces para controladores, modelos y vistas, así como cómo mejorar la mantenibilidad y escalabilidad del código.\n\u0026lt;?php // Estructura de Namespaces para una aplicación web namespace MiApp\\Controllers; class HomeController { // ... } namespace MiApp\\Models; class UsuarioModel { // ... } ?\u0026gt; Conclusiones # Los Namespaces en PHP son una herramienta fundamental para la gestión efectiva de la complejidad en el desarrollo de software. Este artículo ha proporcionado una visión completa de los conceptos clave, la sintaxis y las prácticas recomendadas al trabajar con Namespaces en PHP. Al implementar Namespaces de manera inteligente, los desarrolladores pueden mejorar la estructura y la mantenibilidad del código, contribuyendo así a un desarrollo de software más eficiente y sostenible.\nRecursos # ","date":"14 noviembre 2023","permalink":"/platform/php/namespace/","section":"Phps","summary":"Los Namespaces en PHP son una característica esencial para estructurar y organizar el código en aplicaciones modernas.","title":"Namespaces en PHP"},{"content":"","date":"14 noviembre 2023","permalink":"/platform/php/","section":"Phps","summary":"","title":"Phps"},{"content":"GitHub Pages ofrece una plataforma fácil y accesible para publicar contenido web, ya sea para proyectos personales, sitios estáticos o documentación técnica. Este artículo proporciona una guía paso a paso sobre cómo aprovechar GitHub Pages, desde la configuración inicial hasta la personalización avanzada, destacando las mejores prácticas y herramientas disponibles.\n1. Introducción # GitHub Pages es un servicio gratuito que permite a los desarrolladores alojar sitios web directamente desde sus repositorios de GitHub. Este artículo explora las diversas aplicaciones de GitHub Pages y cómo puede ser utilizado como una herramienta versátil para compartir información en línea.\n2. Configuración Inicial # Creación de Repositorio: Inicia creando un repositorio en GitHub que contendrá tu proyecto web. Configuración de GitHub Pages: Explora las opciones de configuración para activar GitHub Pages en tu repositorio. 3. Estructura del Proyecto # Sitio Estático vs. Dinámico: Comprende la diferencia entre sitios estáticos y dinámicos y cómo GitHub Pages se adapta mejor a sitios estáticos. Estructura de Carpetas: Organiza tu proyecto de manera eficiente para facilitar la navegación y el mantenimiento. 4. Personalización del Dominio # Dominio Propio: Aprende a configurar un dominio personalizado para tu sitio, brindando una apariencia más profesional. Configuración de DNS: Explora los pasos necesarios para vincular tu dominio personalizado con GitHub Pages. 5. Automatización con GitHub Actions # Despliegue Continuo: Configura GitHub Actions para implementar automáticamente los cambios en tu sitio cada vez que se realiza una actualización en el repositorio. Pruebas Automáticas: Implementa pruebas automatizadas para garantizar la integridad de tu sitio. 6. Colaboración y Contribuciones # Gestión de Colaboradores: Explora cómo agregar colaboradores y gestionar permisos para fomentar la colaboración en tu proyecto. Flujo de Trabajo: Proporciona pautas sobre cómo gestionar las solicitudes de extracción y realizar fusiones efectivas. 7. Optimización y Mejoras de Rendimiento # Optimización de Imágenes y Recursos: Aprende estrategias para optimizar el rendimiento de tu sitio mediante la reducción del tamaño de imágenes y la carga eficiente de recursos. Integración de Herramientas de Rendimiento: Explora herramientas como Lighthouse para evaluar y mejorar el rendimiento de tu sitio. 8. Temas y Personalización Avanzada # Temas de Jekyll: Si estás utilizando Jekyll, la herramienta predeterminada de GitHub Pages, explora cómo aplicar y personalizar temas para mejorar el diseño de tu sitio. CSS y HTML Personalizado: Descubre cómo personalizar directamente el código HTML y CSS de tu sitio. 9. Seguridad y Buenas Prácticas # SSL y HTTPS: Configura SSL para garantizar una conexión segura a tu sitio. Protección contra Ataques: Implementa medidas de seguridad como la protección contra ataques DDoS y la validación de entrada de datos. 10. Conclusiones # GitHub Pages no solo ofrece una plataforma sencilla para la publicación web, sino que también proporciona herramientas poderosas para la colaboración y la mejora continua. Al seguir esta guía, los desarrolladores pueden aprovechar al máximo GitHub Pages para compartir su trabajo de manera efectiva en línea.\nRecursos # ","date":"14 noviembre 2023","permalink":"/platform/github/ghpages/","section":"Githubs","summary":"GitHub Pages ofrece una plataforma fácil y accesible para publicar contenido web, ya sea para proyectos personales, sitios estáticos o documentación técnica.","title":"Aprovechando GitHub Pages"},{"content":"","date":"14 noviembre 2023","permalink":"/platform/github/","section":"Githubs","summary":"","title":"Githubs"},{"content":"Regresar a ver el ejercicio\nAquí tienes una implementación básica para el ejercicio propuesto. Ten en cuenta que esta solución es simple y puede mejorarse o modificarse según los requisitos específicos.\nAdemás, es recomendable que tú, como estudiante, intentes resolver el ejercicio por ti mismo antes de revisar esta solución debido a que así lograrás una comprensión más profunda del concepto.\nMétodo create($data) # Este método permite la creación de un nuevo usuario en la base de datos. Recibe como parámetro un array $data que debe contener la información del nuevo usuario, incluyendo campos como nombre, correo electrónico y contraseña. La información se utiliza para construir y ejecutar una consulta SQL de inserción, añadiendo el nuevo usuario a la tabla correspondiente en la base de datos.\npublic function create($data) { $name = $data[\u0026#39;name\u0026#39;]; $email = $data[\u0026#39;email\u0026#39;]; $password = $data[\u0026#39;password\u0026#39;]; // Utilizar sentencias preparadas para evitar inyecciones SQL $stmt = $this-\u0026gt;db-\u0026gt;prepare(\u0026#34;INSERT INTO users (name, email, password) VALUES (?, ?, ?)\u0026#34;); $stmt-\u0026gt;execute([$name, $email, $password]); // Obtener el ID del nuevo registro creado directamente desde la conexión $newUserId = $this-\u0026gt;db-\u0026gt;lastInsertId(); // Consultar y devolver los datos del nuevo usuario $stmt = $this-\u0026gt;db-\u0026gt;prepare(\u0026#34;SELECT * FROM users WHERE id=?\u0026#34;); $stmt-\u0026gt;execute([$newUserId]); return $stmt-\u0026gt;fetch(PDO::FETCH_ASSOC); } Método update($id, $data) # El método update se encarga de actualizar los datos de un usuario existente en la base de datos. Recibe dos parámetros: $id, que es el identificador único del usuario que se desea actualizar, y $data, que contiene los nuevos datos a asignar al usuario. Utiliza estos datos para construir y ejecutar una consulta SQL de actualización.\npublic function update($id, $data) { $name = $data[\u0026#39;name\u0026#39;]; $email = $data[\u0026#39;email\u0026#39;]; $password = $data[\u0026#39;password\u0026#39;]; // Utilizar sentencias preparadas para evitar inyecciones SQL $stmt = $this-\u0026gt;db-\u0026gt;prepare(\u0026#34;UPDATE users SET name=?, email=?, password=? WHERE id=?\u0026#34;); $stmt-\u0026gt;execute([$name, $email, $password, $id]); // Consultar y devolver los datos del usuario actualizado $stmt = $this-\u0026gt;db-\u0026gt;prepare(\u0026#34;SELECT * FROM users WHERE id=?\u0026#34;); $stmt-\u0026gt;execute([$id]); return $stmt-\u0026gt;fetch(PDO::FETCH_ASSOC); } Método find($id) # El método find busca y recupera los datos de un usuario específico en la base de datos según su identificador único $id. Construye y ejecuta una consulta SQL de selección para obtener la información del usuario y devuelve los resultados como un array asociativo.\npublic function find($id) { // Utilizar sentencias preparadas para evitar inyecciones SQL $stmt = $this-\u0026gt;db-\u0026gt;prepare(\u0026#34;SELECT * FROM users WHERE id=?\u0026#34;); $stmt-\u0026gt;execute([$id]); return $stmt-\u0026gt;fetch(PDO::FETCH_ASSOC); } Método all() # Este método devuelve todos los usuarios almacenados en la base de datos. Construye y ejecuta una consulta SQL de selección para obtener la lista completa de usuarios y retorna los resultados como un array asociativo.\npublic function all() { // Utilizar sentencias preparadas para evitar inyecciones SQL $stmt = $this-\u0026gt;db-\u0026gt;query(\u0026#34;SELECT * FROM users\u0026#34;); return $stmt-\u0026gt;fetchAll(PDO::FETCH_ASSOC); } Método destroy($id) # El método destroy elimina un usuario de la base de datos según su identificador único $id. Construye y ejecuta una consulta SQL de eliminación para borrar el usuario correspondiente.\npublic function destroy($id) { // Utilizar sentencias preparadas para evitar inyecciones SQL $stmt = $this-\u0026gt;db-\u0026gt;prepare(\u0026#34;DELETE FROM users WHERE id=?\u0026#34;); $stmt-\u0026gt;execute([$id]); } Estos métodos forman un conjunto completo de operaciones CRUD para el modelo de usuario en PHP, permitiéndote realizar tareas esenciales como crear, actualizar, buscar, listar y eliminar usuarios en la base de datos.\nCódigo final # \u0026lt;?php class User { private $db; // Objeto de conexión a la base de datos public function __construct() { // Incluye la configuración de la base de datos $config = include(\u0026#39;config.php\u0026#39;); // Intenta realizar la conexión a la base de datos try { $dsn = \u0026#34;mysql:host={$config[\u0026#39;host\u0026#39;]};dbname={$config[\u0026#39;nombre_db\u0026#39;]}\u0026#34;; $this-\u0026gt;db = new PDO($dsn, $config[\u0026#39;usuario\u0026#39;], $config[\u0026#39;contraseña\u0026#39;]); // Configurar PDO para lanzar excepciones en caso de errores $this-\u0026gt;db-\u0026gt;setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); } catch (PDOException $e) { // Manejo de la excepción die(\u0026#34;Error de conexión a la base de datos: \u0026#34; . $e-\u0026gt;getMessage()); } } public function create($data) { $name = $data[\u0026#39;name\u0026#39;]; $email = $data[\u0026#39;email\u0026#39;]; $password = $data[\u0026#39;password\u0026#39;]; // Utilizar sentencias preparadas para evitar inyecciones SQL $stmt = $this-\u0026gt;db-\u0026gt;prepare(\u0026#34;INSERT INTO users (name, email, password) VALUES (?, ?, ?)\u0026#34;); $stmt-\u0026gt;execute([$name, $email, $password]); // Obtener el ID del nuevo registro creado directamente desde la conexión $newUserId = $this-\u0026gt;db-\u0026gt;lastInsertId(); // Consultar y devolver los datos del nuevo usuario $stmt = $this-\u0026gt;db-\u0026gt;prepare(\u0026#34;SELECT * FROM users WHERE id=?\u0026#34;); $stmt-\u0026gt;execute([$newUserId]); return $stmt-\u0026gt;fetch(PDO::FETCH_ASSOC); } public function update($id, $data) { $name = $data[\u0026#39;name\u0026#39;]; $email = $data[\u0026#39;email\u0026#39;]; $password = $data[\u0026#39;password\u0026#39;]; // Utilizar sentencias preparadas para evitar inyecciones SQL $stmt = $this-\u0026gt;db-\u0026gt;prepare(\u0026#34;UPDATE users SET name=?, email=?, password=? WHERE id=?\u0026#34;); $stmt-\u0026gt;execute([$name, $email, $password, $id]); // Consultar y devolver los datos del usuario actualizado $stmt = $this-\u0026gt;db-\u0026gt;prepare(\u0026#34;SELECT * FROM users WHERE id=?\u0026#34;); $stmt-\u0026gt;execute([$id]); return $stmt-\u0026gt;fetch(PDO::FETCH_ASSOC); } public function find($id) { // Utilizar sentencias preparadas para evitar inyecciones SQL $stmt = $this-\u0026gt;db-\u0026gt;prepare(\u0026#34;SELECT * FROM users WHERE id=?\u0026#34;); $stmt-\u0026gt;execute([$id]); return $stmt-\u0026gt;fetch(PDO::FETCH_ASSOC); } public function all() { // Utilizar sentencias preparadas para evitar inyecciones SQL $stmt = $this-\u0026gt;db-\u0026gt;query(\u0026#34;SELECT * FROM users\u0026#34;); return $stmt-\u0026gt;fetchAll(PDO::FETCH_ASSOC); } public function destroy($id) { // Utilizar sentencias preparadas para evitar inyecciones SQL $stmt = $this-\u0026gt;db-\u0026gt;prepare(\u0026#34;DELETE FROM users WHERE id=?\u0026#34;); $stmt-\u0026gt;execute([$id]); } } // Ejemplo de uso: // $userModel = new User(); // ...continuar con la interacción del modelo... Esta versión utiliza sentencias preparadas con PDO en lugar de consultas SQL directas, proporcionando una capa adicional de seguridad contra inyecciones SQL.\n","date":"14 noviembre 2023","permalink":"/platform/php/mvc/models/repaso/solucion/","section":"Phps","summary":"Regresar a ver el ejercicio","title":"Models: Solución"},{"content":"Te presentaremos un ejercicio para que pongas en práctica lo aprendido en cuanto a modelos.\nEnfócate principalmente en crear la lógica del sistema en tu mente, luego crea las clases con los respectivos atributos y métodos. No te limites a lo que el ejercicio te indica, puedes agregar más atributos, métodos, o aplicar otros conceptos que conozcas en cuanto a Programación Orientada a Objetos.\nEjercicio # Crea una clase llamada User en PHP que represente un modelo para gestionar usuarios. Sigue las convenciones de nombres de Laravel y asegúrate de implementar los siguientes métodos:\ncreate($data): Crea un nuevo usuario a partir de un array de datos (nombre, correo electrónico y contraseña).\nupdate($id, $data): Actualiza los datos de un usuario existente proporcionando su ID y un array con la nueva información.\nfind($id): Recupera los datos de un usuario dado su ID.\nall(): Devuelve todos los usuarios almacenados.\ndestroy($id): Elimina un usuario según su ID.\nEstructura de la Base de Datos: # Para este ejercicio, supongamos una estructura de base de datos simple para almacenar usuarios. Utilicemos una tabla llamada users con las columnas id, name, email, y password. Aquí está la estructura de la base de datos y el statement actualizado:\nCREATE TABLE users ( id INT PRIMARY KEY AUTO_INCREMENT, name VARCHAR(255) NOT NULL, email VARCHAR(255) NOT NULL, password VARCHAR(255) NOT NULL ); Sugerencia de código base # Archivo config.php: # \u0026lt;?php return [ \u0026#39;host\u0026#39; =\u0026gt; \u0026#39;tu_host\u0026#39;, \u0026#39;usuario\u0026#39; =\u0026gt; \u0026#39;tu_usuario\u0026#39;, \u0026#39;contrasena\u0026#39; =\u0026gt; \u0026#39;tu_contraseña\u0026#39;, \u0026#39;nombre_db\u0026#39; =\u0026gt; \u0026#39;tu_nombre_de_base_de_datos\u0026#39; ]; Archivo User.php (modelo): # \u0026lt;?php class User { private $db; // Objeto de conexión a la base de datos public function __construct() { // Incluye la configuración de la base de datos $config = include(\u0026#39;config.php\u0026#39;); // Intenta realizar la conexión a la base de datos try { $dsn = \u0026#34;mysql:host={$config[\u0026#39;host\u0026#39;]};dbname={$config[\u0026#39;nombre_db\u0026#39;]}\u0026#34;; $this-\u0026gt;db = new PDO($dsn, $config[\u0026#39;usuario\u0026#39;], $config[\u0026#39;contrasena\u0026#39;]); // Configurar PDO para lanzar excepciones en caso de errores $this-\u0026gt;db-\u0026gt;setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); } catch (PDOException $e) { // Manejo de la excepción die(\u0026#34;Error de conexión a la base de datos: \u0026#34; . $e-\u0026gt;getMessage()); } } /** * Crea un nuevo usuario con los datos proporcionados. * @param array $data - Datos del usuario (nombre, correo electrónico y contraseña). */ public function create($data) { // Implementar: Insertar un nuevo usuario en la base de datos. } /** * Actualiza los datos de un usuario existente. * @param int $id - ID del usuario a actualizar. * @param array $data - Nuevos datos del usuario. */ public function update($id, $data) { // Implementar: Actualizar los datos de un usuario en la base de datos. } /** * Recupera los datos de un usuario por su ID. * @param int $id - ID del usuario a buscar. * @return array - Datos del usuario encontrado. */ public function find($id) { // Implementar: Obtener y devolver los datos de un usuario por su ID. } /** * Devuelve todos los usuarios almacenados. * @return array - Lista de todos los usuarios. */ public function all() { // Implementar: Obtener y devolver todos los usuarios de la base de datos. } /** * Elimina un usuario según su ID. * @param int $id - ID del usuario a eliminar. */ public function destroy($id) { // Implementar: Eliminar un usuario de la base de datos por su ID. } } // Ejemplo de uso: // $userModel = new User(); // ...continuar con la interacción del modelo... Este código separa las credenciales de la base de datos en el archivo config.php, lo que facilita la gestión de la configuración.\nSi estas luchando mucho tiempo con este ejercicio, aquí te dejaré una posible solución, pero recuerda que no debes ver la solución hasta que hayas hecho tu mejor esfuerzo. Además, puede que tú hayas pensado una solución ligeramente diferente a la que te propondremos. Esto es debido a que existen muchas formas de resolver un mismo asunto. Sin embargo, esto te puede servir de guía.\nVer solución\n","date":"14 noviembre 2023","permalink":"/platform/php/mvc/models/repaso/ejercicio/","section":"Phps","summary":"Te presentaremos un ejercicio para que pongas en práctica lo aprendido en cuanto a modelos.","title":"Models: Ejercicio"},{"content":"Introducción a Controladores en PHP # En el vasto mundo del desarrollo web en PHP, los controladores destacan como piezas cruciales para la implementación del patrón Modelo-Vista-Controlador (MVC). Estos actúan como mediadores entre la interfaz del usuario y la lógica de la aplicación, brindando una estructura organizada para manejar las solicitudes del usuario. En este repaso, nos sumergiremos en la esencia de los controladores y exploraremos cómo la inyección de dependencias mejora significativamente la modularidad y la testabilidad de nuestro código.\n¿Qué es un Controlador? # En términos sencillos, un controlador en PHP es una clase que agrupa lógica relacionada y maneja las solicitudes HTTP. Su objetivo principal es interpretar las acciones del usuario y coordinar las interacciones entre el modelo de datos y la vista.\nCreación de un Controlador Básico # class UserController { public function index() { // Lógica para mostrar la lista de usuarios } public function show($id) { // Lógica para mostrar los detalles de un usuario específico } // ... Métodos adicionales para otras acciones ... } Aquí, cada método del controlador representa una acción específica relacionada con la gestión de usuarios, siguiendo el patrón REST.\nEl Ciclo de Vida de un Controlador # Cuando un usuario realiza una solicitud HTTP, el controlador correspondiente se activa para manejarla. El ciclo de vida típico de un controlador abarca desde la recepción de la solicitud hasta la preparación y envío de la respuesta.\nRecepción de la Solicitud: El controlador captura la solicitud entrante. Procesamiento: Se realiza la lógica de negocio necesaria. Interacción con el Modelo: Si es necesario, se interactúa con el modelo para recuperar o actualizar datos. Preparación de la Respuesta: Se preparan los datos para la vista. Envío de la Respuesta: La respuesta se devuelve al usuario, ya sea renderizando una vista o proporcionando datos en formato JSON. Uso de Parámetros en Controladores # Los controladores a menudo necesitan acceder a parámetros de la solicitud, como datos de formularios o segmentos de URL. En PHP, estos parámetros se pueden acceder fácilmente mediante las variables superglobales $_GET y $_POST.\nclass UserController { public function show($id) { // $id se obtiene de la URL, por ejemplo, /user/show/1 $user = $this-\u0026gt;getUserById($id); // Resto de la lógica para mostrar los detalles del usuario } } Problemas de Acoplamiento y Solución: Inyección de Dependencias # Una práctica común al construir aplicaciones más grandes es la inyección de dependencias (DI). En términos simples, la DI consiste en proporcionar a un objeto las dependencias que necesita en lugar de que el objeto las cree internamente. Esto promueve la modularidad y facilita las pruebas unitarias.\nSin Inyección de Dependencias # Supongamos que nuestro controlador necesita interactuar con un servicio de usuarios. Sin usar inyección de dependencias, podríamos instanciar directamente el servicio dentro del controlador.\nclass UserController { protected $userService; public function __construct() { $this-\u0026gt;userService = new UserService(); } public function index() { $users = $this-\u0026gt;userService-\u0026gt;getAllUsers(); // Resto de la lógica para mostrar la lista de usuarios } } Con Inyección de Dependencias # En cambio, con inyección de dependencias, el servicio se pasa como parámetro al constructor, lo que facilita la modificación y prueba del código.\nclass UserController { protected $userService; public function __construct(UserService $userService) { $this-\u0026gt;userService = $userService; } public function index() { $users = $this-\u0026gt;userService-\u0026gt;getAllUsers(); // Resto de la lógica para mostrar la lista de usuarios } } La inyección de dependencias reduce el acoplamiento entre las clases y hace que el código sea más flexible y mantenible. También mejora la capacidad de prueba, ya que podemos proporcionar fácilmente simulacros (mocks) de dependencias durante las pruebas unitarias.\nConclusiones # En conclusión, los controladores en PHP son componentes fundamentales para estructurar aplicaciones web de manera eficiente. Al abrazar prácticas sólidas, como la organización modular, la gestión adecuada de parámetros y, especialmente, la inyección de dependencias, podemos construir aplicaciones más sólidas y mantenibles. La inyección de dependencias emerge como una herramienta valiosa para mejorar la modularidad, la testabilidad y la flexibilidad de nuestro código, allanando el camino hacia un desarrollo más robusto y escalable.\nRecursos # ","date":"14 noviembre 2023","permalink":"/platform/php/mvc/controllers/repaso/","section":"Phps","summary":"Introducción a Controladores en PHP # En el vasto mundo del desarrollo web en PHP, los controladores destacan como piezas cruciales para la implementación del patrón Modelo-Vista-Controlador (MVC).","title":"Controladores en PHP: Inyección de Dependencias"},{"content":"Introducción # La gestión eficiente de versiones es esencial en el desarrollo de software, y Git se ha convertido en una herramienta fundamental para este propósito. En este artículo, exploraremos tres comandos clave de Git: git log, git reset y git diff. Estas herramientas son esenciales para comprender el historial de cambios, deshacer modificaciones y analizar diferencias en un proyecto.\ngit log: Explorando el Historial de Cambios # Funcionamiento Básico # El comando git log muestra el historial de cambios del repositorio. Proporciona información detallada sobre cada commit, como el autor, la fecha y la descripción del commit.\ngit log Este comando presenta una lista de commits con el commit más reciente en la parte superior. Además, se pueden agregar opciones para personalizar la salida, como --oneline para mostrar cada commit en una sola línea.\nExplorando Ramas y Autores # git log --graph --all --decorate Esta variante de git log muestra un gráfico ASCII que representa la relación entre las ramas, y --decorate agrega información sobre las ramas y las etiquetas. Es especialmente útil en proyectos con varias ramas activas.\ngit log --author=\u0026#34;Nombre del Autor\u0026#34; Este comando filtra el historial para mostrar solo los commits realizados por un autor específico.\ngit reset: Deshaciendo Cambios # Tres Modos de git reset # El comando git reset es esencial para deshacer cambios en Git. Hay tres modos principales: soft, mixed y hard.\nModo soft # git reset --soft HEAD~1 Este modo deshace el último commit, pero mantiene los cambios en el área de preparación (staging). Esto permite realizar ajustes antes de realizar un nuevo commit.\nModo mixed # git reset --mixed HEAD~1 Este modo es el predeterminado si no se especifica un modo. Deshace el último commit y coloca los cambios en el directorio de trabajo sin afectar el área de preparación. Esto permite realizar cambios y luego preparar un nuevo commit.\nModo hard # git reset --hard HEAD~1 Este modo deshace el último commit y descarta todos los cambios, tanto en el área de preparación como en el directorio de trabajo. Cuidado, ya que los cambios no se pueden recuperar después de un reset en modo hard.\ngit diff: Analizando Diferencias # Comparación entre Áreas # git diff Este comando muestra las diferencias entre el directorio de trabajo y el área de preparación (staging). Es útil para revisar los cambios antes de confirmarlos.\ngit diff --staged Esta variante de git diff compara los cambios entre el área de preparación y el último commit.\nComparación entre Commits # git diff commit1 commit2 Este comando compara dos commits específicos. Puede ser útil para analizar cambios entre versiones específicas.\ngit diff branch1..branch2 Comparar diferencias entre dos ramas. Este comando ayuda a identificar cambios entre versiones ramificadas del proyecto.\nConclusiones y Buenas Prácticas # El uso efectivo de git log, git reset y git diff es esencial para una gestión de versiones eficiente con Git. Al comprender el historial de cambios, deshacer modificaciones y analizar diferencias, los desarrolladores pueden mantener un control preciso sobre el desarrollo del software.\nBuenas Prácticas # Comentarios Descriptivos en Commits: Proporcionar descripciones claras y descriptivas en cada commit facilita la comprensión del historial de cambios.\nUso Cauteloso de git reset --hard: El modo hard de git reset descarta cambios de manera irreversible, así que úsalo con precaución.\nRevisión Regular del Historial de Commits: Mantenerse al tanto del historial de commits ayuda a comprender la evolución del proyecto y facilita la colaboración en equipo.\nEn resumen, dominar estas herramientas de Git es crucial para un flujo de trabajo eficiente y una gestión de versiones exitosa en el desarrollo de software.\nRecursos # ","date":"13 noviembre 2023","permalink":"/platform/git/log_reset_diff/","section":"Gits","summary":"Introducción # La gestión eficiente de versiones es esencial en el desarrollo de software, y Git se ha convertido en una herramienta fundamental para este propósito.","title":"Git Log, Git Reset, y Git Diff: Herramientas Esenciales para la Gestión de Versiones"},{"content":"","date":"13 noviembre 2023","permalink":"/platform/git/","section":"Gits","summary":"","title":"Gits"},{"content":"Introducción # La carga automática de clases, también conocida como autoload, es una característica esencial en PHP que facilita la gestión de clases en proyectos grandes y complejos. En lugar de requerir manualmente cada archivo de clase, el autoload permite cargar automáticamente las clases necesarias cuando se utilizan por primera vez. En este artículo, exploraremos en profundidad el autoload en PHP, su importancia y cómo implementarlo de manera efectiva.\nLa Necesidad del Autoload # En proyectos PHP extensos, la cantidad de clases puede ser abrumadora. Requerir manualmente cada archivo de clase en el momento adecuado puede ser propenso a errores y dificulta la mantenibilidad del código. Aquí es donde entra en juego el autoload.\nFuncionamiento del Autoload # El autoload en PHP busca automáticamente y carga las clases cuando se utilizan por primera vez. Esto se logra mediante la función spl_autoload_register(), que permite registrar funciones de autoload personalizadas. Cuando se intenta utilizar una clase que aún no se ha cargado, PHP invoca estas funciones de autoload registradas, buscando y cargando automáticamente el archivo de la clase correspondiente.\nImplementación del Autoload # Función de Autoload Simple # function miAutoload($nombreClase) { include \u0026#39;clases/\u0026#39; . $nombreClase . \u0026#39;.php\u0026#39;; } spl_autoload_register(\u0026#39;miAutoload\u0026#39;); En este ejemplo, la función miAutoload busca automáticamente la clase en la carpeta clases/ y la incluye. La función se registra con spl_autoload_register para que se llame automáticamente cuando sea necesario.\nUso de Autoload con Composer # Composer es una herramienta de gestión de dependencias para PHP que también proporciona una solución robusta para el autoload. Al definir un archivo composer.json con información sobre las dependencias del proyecto, Composer puede generar automáticamente un archivo de autoload.\n{ \u0026#34;autoload\u0026#34;: { \u0026#34;psr-4\u0026#34;: { \u0026#34;MiProyecto\\\\\u0026#34;: \u0026#34;src/\u0026#34; } } } En este ejemplo, el código bajo el namespace MiProyecto se ubicaría en la carpeta src/. Composer generará automáticamente un archivo de autoload que mapea los namespaces a las ubicaciones de los archivos.\nEjemplo Práctico # Supongamos que tenemos las siguientes clases en nuestro proyecto:\n// Archivo: src/MiProyecto/Model/Usuario.php namespace MiProyecto\\Model; class Usuario { // Implementación de la clase Usuario } // Archivo: src/MiProyecto/Model/Producto.php namespace MiProyecto\\Model; class Producto { // Implementación de la clase Producto } Podemos utilizar estas clases en otro archivo de la siguiente manera:\n// Archivo: index.php require_once \u0026#39;vendor/autoload.php\u0026#39;; // Incluye el archivo de autoload generado por Composer use MiProyecto\\Model\\Usuario; use MiProyecto\\Model\\Producto; $usuario = new Usuario(); $producto = new Producto(); // Resto del código... En este ejemplo, las clases Usuario y Producto se cargan automáticamente gracias al autoload proporcionado por Composer.\nVentajas del Autoload # Reducción de Errores Manuales # La carga automática de clases reduce la posibilidad de errores manuales al requerir archivos de clase. Esto mejora la estabilidad y la calidad del código.\nFacilita la Organización del Proyecto # Al utilizar autoload, la organización del proyecto se simplifica. Las clases se pueden distribuir en carpetas lógicas sin preocuparse de cargar manualmente cada archivo.\nMejora la Mantenibilidad # La implementación efectiva del autoload mejora la mantenibilidad del código. Agregar o modificar clases es más sencillo, ya que no es necesario ajustar manualmente las llamadas a include o require.\nDesafíos y Mejores Prácticas # Cuidado con la Sobrecarga # Es importante evitar la sobrecarga de autoloaders. Tener múltiples funciones de autoload o dependencias excesivas puede ralentizar el rendimiento del sistema.\nCumplir con Estándares PSR # Seguir los estándares de PSR-4 de PHP-FIG para la estructura de directorios y la nomenclatura de clases facilita la implementación del autoload y mejora la interoperabilidad entre proyectos.\nConclusiones y Futuras Tendencias # En conclusión, el autoload en PHP es una herramienta fundamental para simplificar la gestión de clases en proyectos grandes y complejos. La carga automática mejora la eficiencia, reduce errores manuales y facilita la organización del código.\nCon el crecimiento de herramientas como Composer, el autoload se ha vuelto aún más accesible y eficiente. A medida que PHP evoluciona, es probable que las prácticas de autoload también se mejoren, proporcionando soluciones más avanzadas y eficaces para el desarrollo de proyectos PHP.\nEn resumen, aprovechar al máximo las capacidades del autoload no solo mejora la calidad y la estabilidad del código, sino que también facilita el desarrollo y la mantenibilidad de proyectos PHP de cualquier escala.\nRecursos # ","date":"13 noviembre 2023","permalink":"/platform/php/autoload/","section":"Phps","summary":"Introducción # La carga automática de clases, también conocida como autoload, es una característica esencial en PHP que facilita la gestión de clases en proyectos grandes y complejos.","title":"Autoload en PHP: Simplificando la Gestión de Clases"},{"content":"Introducción # En la arquitectura Modelo-Vista-Controlador (MVC) para el desarrollo web, los modelos desempeñan un papel fundamental al representar y gestionar la lógica de datos y la interacción con la base de datos. En este artículo, exploraremos las buenas prácticas al diseñar modelos en PHP, proporcionando ejemplos completos y sencillos.\n¿Qué es un Modelo? # En el patrón MVC, el modelo representa los datos y la lógica de negocio de la aplicación. Es responsable de interactuar con la base de datos, realizar operaciones CRUD (Create, Read, Update, Delete) y proporcionar datos estructurados a los controladores y vistas. Un diseño eficiente de modelos es crucial para crear aplicaciones robustas y mantenibles.\nBuenas Prácticas al Nombrar Modelos # Nombrar adecuadamente los modelos es crucial para la claridad del código. Algunas buenas prácticas incluyen:\nSingular y en PascalCase: Nombra tus modelos en singular y utilizando el estilo PascalCase. Por ejemplo, si estás manejando usuarios, el modelo podría llamarse Usuario.\nUtiliza Métodos Descriptivos en Inglés: Utiliza métodos descriptivos en inglés, reflejando las acciones que realiza el modelo. Por ejemplo, en lugar de getAllUsers, podrías usar all para obtener todos los registros.\nCoherencia en la Nomenclatura: Mantén una nomenclatura coherente en toda tu aplicación.\nEstructura Básica de un Modelo # Un modelo básico podría tener la siguiente estructura:\n\u0026lt;?php class Usuario { public function all() { // Lógica para obtener todos los usuarios de la base de datos } public function find($id) { // Lógica para obtener un usuario específico por ID } public function create($data) { // Lógica para crear un nuevo usuario en la base de datos } public function update($id, $data) { // Lógica para actualizar un usuario en la base de datos } public function delete($id) { // Lógica para eliminar un usuario de la base de datos } } ?\u0026gt; En este ejemplo, el modelo Usuario tiene métodos que reflejan las acciones típicas de un modelo en Laravel: all para obtener todos los registros, find para buscar un registro por ID, create para crear un nuevo registro, update para actualizar un registro existente y delete para eliminar un registro.\nImplementación en un Entorno MVC # Siguiendo la estructura de carpetas de una aplicación MVC, la organización de modelos podría ser similar a la siguiente:\n- /proyecto - /app - /controladores - UsuarioController.php - /modelos - Usuario.php - /vistas - usuario - index.php - show.php - create.php - edit.php - /public - index.php En esta estructura, el controlador interactuaría con el modelo para obtener o manipular datos y luego pasaría esos datos a la vista correspondiente.\nConclusión # Los modelos desempeñan un papel crucial en la arquitectura MVC al gestionar la lógica de datos y la interacción con la base de datos. Al seguir buenas prácticas, como la nomenclatura consistente y la separación clara de responsabilidades, podemos construir aplicaciones web más mantenibles y escalables.\nEn este artículo, hemos explorado la estructura básica de un modelo en PHP, así como su implementación dentro de una arquitectura MVC. Los ejemplos proporcionados son simples pero completos, ofreciendo una base sólida para desarrollar aplicaciones web robustas.\n","date":"13 noviembre 2023","permalink":"/platform/php/mvc/models/principal/","section":"Phps","summary":"Introducción # En la arquitectura Modelo-Vista-Controlador (MVC) para el desarrollo web, los modelos desempeñan un papel fundamental al representar y gestionar la lógica de datos y la interacción con la base de datos.","title":"MVC: Models"},{"content":"Introducción # En el desarrollo web, la arquitectura Modelo-Vista-Controlador (MVC) es una metodología comúnmente utilizada para organizar el código y mejorar la mantenibilidad de las aplicaciones. Uno de los componentes clave en esta arquitectura es el controlador. En este artículo, exploraremos a fondo los controladores en PHP, destacando buenas prácticas, convenciones de nomenclatura y proporcionando ejemplos completos y sencillos.\n¿Qué es un Controlador? # En el patrón MVC, el controlador maneja las solicitudes del usuario y gestiona la lógica de la aplicación. Se encarga de recibir la entrada del usuario, procesarla y coordinar con el modelo y la vista para producir la salida adecuada. Los controladores son esenciales para separar la lógica del negocio de la interfaz de usuario, lo que facilita la escalabilidad y el mantenimiento del código.\nBuenas Prácticas al Nombrar Controladores # Nombrar adecuadamente los controladores es crucial para mantener un código limpio y comprensible. Algunas buenas prácticas incluyen:\nSingular y en PascalCase: Nombra tus controladores en singular y utilizando el estilo PascalCase. Por ejemplo, si estás manejando usuarios, el controlador podría llamarse UsuarioController.\nUtiliza el sufijo \u0026ldquo;Controller\u0026rdquo;: Esto ayuda a identificar claramente que el archivo o clase es un controlador. Siguiendo el ejemplo anterior, el nombre del archivo podría ser UsuarioController.php.\nCoherencia en la Nomenclatura: Mantén una nomenclatura coherente en toda tu aplicación. Si decides utilizar singular para un controlador, sigue esa convención en todos los controladores.\nEstructura Básica de un Controlador # Un controlador básico podría tener la siguiente estructura:\n\u0026lt;?php class UsuarioController { public function index() { // Lógica para mostrar la lista de usuarios } public function show($id) { // Lógica para mostrar un usuario específico } public function create() { // Lógica para mostrar el formulario de creación } public function store() { // Lógica para procesar el formulario de creación } public function edit($id) { // Lógica para mostrar el formulario de edición } public function update($id) { // Lógica para procesar el formulario de edición } public function destroy($id) { // Lógica para eliminar un usuario } } ?\u0026gt; En este ejemplo, el controlador UsuarioController tiene métodos para listar, mostrar, crear, guardar, editar, actualizar y eliminar usuarios. Estos métodos reflejan las operaciones típicas que realizarías en una aplicación CRUD (Create, Read, Update, Delete).\nImplementación en un Entorno MVC # Supongamos que estamos construyendo una aplicación web utilizando una estructura MVC. Tendríamos una estructura de carpetas similar a la siguiente:\n- /proyecto - /app - /controladores - UsuarioController.php - /modelos - UsuarioModel.php - /vistas - usuario - index.php - show.php - create.php - edit.php - /public - index.php Aquí, el archivo index.php en la carpeta public actuaría como punto de entrada único para todas las solicitudes. Este archivo podría inicializar el enrutador y enviar la solicitud al controlador correspondiente, según la URL.\nSupongamos que una solicitud se hace a http://miapp.com/usuario/index. El enrutador podría analizar la URL y dirigirla al método index del controlador UsuarioController. Este método, a su vez, podría interactuar con el modelo UsuarioModel para obtener datos y cargar la vista index.php.\nConclusión # Los controladores desempeñan un papel fundamental en la arquitectura MVC, proporcionando un lugar centralizado para gestionar la lógica de la aplicación. Al seguir buenas prácticas, como la nomenclatura consistente y la separación clara de responsabilidades, podemos construir aplicaciones web más mantenibles y escalables.\nEn este artículo, hemos explorado la estructura básica de un controlador en PHP, así como su implementación dentro de una arquitectura MVC. Los ejemplos proporcionados son simples pero completos, ofreciendo una base sólida para desarrollar aplicaciones web robustas.\n","date":"13 noviembre 2023","permalink":"/platform/php/mvc/controllers/principal/","section":"Phps","summary":"Introducción # En el desarrollo web, la arquitectura Modelo-Vista-Controlador (MVC) es una metodología comúnmente utilizada para organizar el código y mejorar la mantenibilidad de las aplicaciones.","title":"MVC: Controllers"},{"content":"Regresar a ver los ejercicios\nAquí tienes una implementación básica para cada uno de los ejercicios propuestos. Ten en cuenta que estas soluciones son simples y pueden mejorarse o modificarse según los requisitos específicos.\nAdemás, es recomendable que tú, como estudiante, intentes resolver los ejercicios por ti mismo antes de revisar esta solución debido a que así lograrás una comprensión más profunda de los conceptos.\nEjercicio 1: Sencillo # Crea una clase llamada Persona con dos propiedades privadas, nombre y edad. La clase debe tener métodos públicos para establecer y obtener el nombre y la edad.\n\u0026lt;?php class Persona { // Propiedades privadas private $nombre; private $edad; // Constructor public function __construct($nombre, $edad) { $this-\u0026gt;nombre = $nombre; $this-\u0026gt;edad = $edad; } // Métodos para obtener y establecer el nombre public function getNombre() { return $this-\u0026gt;nombre; } public function setNombre($nombre) { $this-\u0026gt;nombre = $nombre; } // Métodos para obtener y establecer la edad public function getEdad() { return $this-\u0026gt;edad; } public function setEdad($edad) { $this-\u0026gt;edad = $edad; } } // Uso de la clase Persona $persona = new Persona(\u0026#34;Juan\u0026#34;, 25); echo \u0026#34;Nombre: \u0026#34; . $persona-\u0026gt;getNombre() . \u0026#34;, Edad: \u0026#34; . $persona-\u0026gt;getEdad(); ?\u0026gt; Ejercicio 2: Encapsulamiento en Tienda de Libros: # Crea dos clases: Libro y Biblioteca.\nLa clase Libro debe tener propiedades privadas para el título, el autor y el año de publicación. Implementa métodos para obtener y establecer estos atributos, asegurándote de encapsular adecuadamente el acceso a las propiedades. La clase Biblioteca debe tener una lista privada de libros disponibles. Implementa métodos públicos para agregar un libro, eliminar un libro y obtener la lista de libros. Asegúrate de que los libros no puedan ser accedidos directamente desde fuera de la clase. \u0026lt;?php class Libro { // Propiedades privadas private $titulo; private $autor; private $anioPublicacion; // Constructor public function __construct($titulo, $autor, $anioPublicacion) { $this-\u0026gt;titulo = $titulo; $this-\u0026gt;autor = $autor; $this-\u0026gt;anioPublicacion = $anioPublicacion; } // Métodos para obtener y establecer el título public function getTitulo() { return $this-\u0026gt;titulo; } public function setTitulo($titulo) { $this-\u0026gt;titulo = $titulo; } // Métodos para obtener y establecer el autor public function getAutor() { return $this-\u0026gt;autor; } public function setAutor($autor) { $this-\u0026gt;autor = $autor; } // Métodos para obtener y establecer el año de publicación public function getAnioPublicacion() { return $this-\u0026gt;anioPublicacion; } public function setAnioPublicacion($anioPublicacion) { $this-\u0026gt;anioPublicacion = $anioPublicacion; } } class Biblioteca { // Lista privada de libros private $libros = []; // Método para agregar un libro. // \u0026#34;Libro $libro\u0026#34;: Se está haciendo una instancia de la clase Libro al momento de recibir el parámetro. public function agregarLibro(Libro $libro) { $this-\u0026gt;libros[] = $libro; } // Método para eliminar un libro public function eliminarLibro($titulo) { foreach ($this-\u0026gt;libros as $index =\u0026gt; $libro) { if ($libro-\u0026gt;getTitulo() === $titulo) { unset($this-\u0026gt;libros[$index]); return true; } } return false; } // Método para obtener la lista de libros public function obtenerListaLibros() { return $this-\u0026gt;libros; } } // Uso de las clases $libro1 = new Libro(\u0026#34;La Sombra del Viento\u0026#34;, \u0026#34;Carlos Ruiz Zafón\u0026#34;, 2001); $libro2 = new Libro(\u0026#34;1984\u0026#34;, \u0026#34;George Orwell\u0026#34;, 1949); $biblioteca = new Biblioteca(); $biblioteca-\u0026gt;agregarLibro($libro1); $biblioteca-\u0026gt;agregarLibro($libro2); $listaLibros = $biblioteca-\u0026gt;obtenerListaLibros(); foreach ($listaLibros as $libro) { echo \u0026#34;Libro: \u0026#34; . $libro-\u0026gt;getTitulo() . \u0026#34;, Autor: \u0026#34; . $libro-\u0026gt;getAutor() . \u0026#34;, Año de Publicación: \u0026#34; . $libro-\u0026gt;getAnioPublicacion() . \u0026#34;\\n\u0026#34;; } ?\u0026gt; ","date":"13 noviembre 2023","permalink":"/platform/php/poo/practico/encapsulamiento/solucion/","section":"Phps","summary":"Regresar a ver los ejercicios","title":"Encapsulamiento - solución"},{"content":"En esta sección nos dedicaremos a resolver algunos ejercicios que están pensados para aplicar lo que hemos aprendido. Ten en cuenta que no necesitas crear un sistema muy grande o complejo. En realidad, el objetivo de estos ejercicios es que desarrolles la capacidad de analizar la situación y crear un sistema que permita resolver o gestionar los recursos.\nEnfócate principalmente en crear la lógica del sistema en tu mente, luego crea las clases con los respectivos atributos y métodos. No te limites a lo que el ejercicio te indica, puedes agregar más atributos, métodos, o aplicar otros conceptos que conozcas en cuanto a Programación Orientada a Objetos.\n¡Te deseo mucho éxito! Espero estos ejercicios te ayuden a reforzar tu lógica de programación en este paradigma orientado a objetos.\nEjercicio 1: Sencillo # Crea una clase llamada Persona con dos propiedades privadas, nombre y edad. La clase debe tener métodos públicos para establecer y obtener el nombre y la edad.\nEjercicio 2: Encapsulamiento en Tienda de Libros: # Crea dos clases: Libro y Biblioteca.\nLa clase Libro debe tener propiedades privadas para el título, el autor y el año de publicación. Implementa métodos para obtener y establecer estos atributos, asegurándote de encapsular adecuadamente el acceso a las propiedades. La clase Biblioteca debe tener una lista privada de libros disponibles. Implementa métodos públicos para agregar un libro, eliminar un libro y obtener la lista de libros. Asegúrate de que los libros no puedan ser accedidos directamente desde fuera de la clase. Si estas luchando mucho tiempo con estos ejercicios, aquí te dejaré una posible solución a estos ejercicios, pero recuerda que no debes ver la solución hasta que hayas hecho tu mejor esfuerzo. Además, puede que tú hayas pensado una solución ligeramente diferente a la que te propondremos. Esto es debido a que existen muchas formas de resolver un mismo asunto. Sin embargo, esto te puede servir de guía.\nVer solución\n","date":"13 noviembre 2023","permalink":"/platform/php/poo/practico/encapsulamiento/ejercicios/","section":"Phps","summary":"En esta sección nos dedicaremos a resolver algunos ejercicios que están pensados para aplicar lo que hemos aprendido.","title":"Encapsulamiento - práctico"},{"content":"Introducción # El encapsulamiento es uno de los cuatro pilares fundamentales de la Programación Orientada a Objetos (POO), junto con la herencia, la abstracción y el polimorfismo. En términos sencillos, el encapsulamiento se refiere a la práctica de ocultar los detalles de implementación de un objeto y exponer solo las funcionalidades necesarias.\n¿Qué es el encapsulamiento? # El encapsulamiento es un mecanismo que permite restringir el acceso a algunos componentes de un objeto. Es una forma de proteger los datos del objeto de ser modificados directamente. En PHP, esto se logra mediante el uso de modificadores de acceso en las propiedades y métodos de la clase.\nModificadores de acceso en PHP # PHP proporciona tres modificadores de acceso:\nPublic: Las propiedades y métodos declarados como públicos pueden ser accedidos desde cualquier parte del código.\nPrivate: Las propiedades y métodos declarados como privados solo pueden ser accedidos dentro de la clase donde fueron declarados.\nProtected: Las propiedades y métodos declarados como protegidos pueden ser accedidos dentro de la clase donde fueron declarados y por las clases que heredan de esta clase.\nEjemplo de encapsulamiento en PHP # Ejemplo 1: Cuenta Bancaria # class CuentaBancaria { private $balance; public function __construct($balanceInicial) { $this-\u0026gt;balance = $balanceInicial; } public function depositar($cantidad) { if ($cantidad \u0026gt; 0) { $this-\u0026gt;balance += $cantidad; return true; } else { return false; } } public function retirar($cantidad) { if ($cantidad \u0026gt; 0 \u0026amp;\u0026amp; $this-\u0026gt;balance \u0026gt;= $cantidad) { $this-\u0026gt;balance -= $cantidad; return true; } else { return false; } } public function getBalance() { return $this-\u0026gt;balance; } } $cuenta = new CuentaBancaria(1000); $cuenta-\u0026gt;depositar(500); echo $cuenta-\u0026gt;getBalance(); // Imprime: 1500 $cuenta-\u0026gt;retirar(200); echo $cuenta-\u0026gt;getBalance(); // Imprime: 1300 Ejemplo 2: Libro # class Libro { private $titulo; private $autor; private $paginasLeidas; public function __construct($titulo, $autor) { $this-\u0026gt;titulo = $titulo; $this-\u0026gt;autor = $autor; $this-\u0026gt;paginasLeidas = 0; } public function leerPaginas($numeroPaginas) { $this-\u0026gt;paginasLeidas += $numeroPaginas; } public function getPaginasLeidas() { return $this-\u0026gt;paginasLeidas; } } $libro = new Libro(\u0026#34;Don Quijote de la Mancha\u0026#34;, \u0026#34;Miguel de Cervantes\u0026#34;); $libro-\u0026gt;leerPaginas(42); echo $libro-\u0026gt;getPaginasLeidas(); // Imprime: 42 Beneficios del encapsulamiento # El encapsulamiento ofrece varios beneficios:\nControl del acceso a los datos: Al ocultar los detalles de implementación, podemos controlar cómo se accede o se modifica el estado interno de un objeto.\nFlexibilidad y mantenibilidad del código: Al encapsular los detalles de implementación, podemos cambiar la implementación interna de una clase sin afectar a otras partes del código que usan esa clase.\nPrevención de errores: Al restringir el acceso directo a las propiedades de un objeto, podemos prevenir que se asignen valores no válidos o inesperados.\nConclusión # El encapsulamiento es una técnica poderosa que nos permite ocultar los detalles de implementación de un objeto y exponer solo las operaciones que son seguras y necesarias. Esto nos permite construir código más seguro, más flexible y más fácil de mantener. En PHP, el encapsulamiento se logra mediante el uso de modificadores de acceso en las propiedades y métodos de una clase. Aunque puede parecer un concepto simple, el encapsulamiento es fundamental para la Programación Orientada a Objetos y es esencial para el diseño de software eficaz.\nRecursos # Videos # ","date":"10 noviembre 2023","permalink":"/platform/php/poo/encapsulamiento/","section":"Phps","summary":"Introducción # El encapsulamiento es uno de los cuatro pilares fundamentales de la Programación Orientada a Objetos (POO), junto con la herencia, la abstracción y el polimorfismo.","title":"Encapsulamiento en la Programación Orientada a Objetos (POO) con PHP"},{"content":"Introducción # La Programación Orientada a Objetos (POO) ofrece un enfoque poderoso y estructurado para el desarrollo de software, y uno de los conceptos fundamentales que la sustenta es el método constructor. En este artículo, exploraremos en detalle el método constructor en el contexto de PHP, analizando su importancia, aplicación práctica y su contribución al diseño eficiente de clases y objetos.\nConceptos Básicos # El método constructor, comúnmente conocido como __construct en PHP, es un tipo especial de método dentro de una clase que se ejecuta automáticamente cuando se crea una nueva instancia de la clase. Su propósito principal es inicializar las propiedades del objeto y realizar cualquier configuración necesaria antes de que el objeto esté disponible para su uso.\nSintaxis del Método Constructor en PHP # En PHP, la declaración del método constructor es sencilla y sigue una convención establecida. Aquí está la sintaxis básica:\nclass MiClase { public function __construct() { // Código de inicialización } } La palabra clave __construct es clave y debe coincidir exactamente con el nombre de la clase. PHP automáticamente invoca este método cada vez que se crea un nuevo objeto de esa clase.\nParámetros del Constructor # El método constructor puede aceptar parámetros, permitiendo una mayor flexibilidad en la inicialización de objetos. Esto es especialmente útil cuando se desea pasar información específica al objeto durante su creación.\nclass Persona { private $nombre; private $edad; public function __construct($nombre, $edad) { $this-\u0026gt;nombre = $nombre; $this-\u0026gt;edad = $edad; } public function obtenerInformacion() { return \u0026#34;Nombre: $this-\u0026gt;nombre, Edad: $this-\u0026gt;edad\u0026#34;; } } // Uso del constructor con parámetros $persona = new Persona(\u0026#34;Juan\u0026#34;, 25); echo $persona-\u0026gt;obtenerInformacion(); En este ejemplo, el constructor acepta dos parámetros, $nombre y $edad, y los utiliza para inicializar las propiedades de la clase Persona.\nMúltiples Constructores (Sobrecarga) # PHP no admite la sobrecarga de métodos de la misma manera que algunos otros lenguajes de programación. Sin embargo, se puede lograr cierta flexibilidad mediante la asignación de valores predeterminados a los parámetros del constructor.\nclass Persona { private $nombre; private $edad; public function __construct($nombre = \u0026#34;\u0026#34;, $edad = 0) { $this-\u0026gt;nombre = $nombre; $this-\u0026gt;edad = $edad; } public function obtenerInformacion() { return \u0026#34;Nombre: $this-\u0026gt;nombre, Edad: $this-\u0026gt;edad\u0026#34;; } } // Uso del constructor con parámetros $persona1 = new Persona(\u0026#34;Juan\u0026#34;, 25); $persona2 = new Persona(); // No se proporcionan parámetros, se usan los valores predeterminados Importancia del Método Constructor # Inicialización de Propiedades: El constructor proporciona un lugar centralizado para inicializar las propiedades de un objeto, asegurando que el objeto esté en un estado coherente desde el principio.\nConfiguración Inicial: Permite realizar configuraciones iniciales, como la conexión a una base de datos, la carga de archivos de configuración o cualquier tarea necesaria antes de que el objeto esté listo para su uso.\nFlexibilidad y Reusabilidad: Al aceptar parámetros, el constructor facilita la creación de objetos con configuraciones específicas, lo que aumenta la flexibilidad y reusabilidad del código.\nClaridad en el Código: Hace que el código sea más legible y mantenible al agrupar la lógica de inicialización en un lugar específico.\nConsideraciones Avanzadas:\nHerencia y Constructores: Cuando se utiliza la herencia, es importante entender cómo los constructores se heredan. En una clase derivada, el constructor puede llamar al constructor de la clase base usando parent::__construct().\nDestructor: A menudo, se utiliza en conjunto con el destructor (__destruct) para realizar tareas de limpieza o liberación de recursos cuando el objeto ya no es necesario.\nConclusiones # El método constructor en PHP es una herramienta esencial en la caja de herramientas de todo programador orientado a objetos. Su capacidad para inicializar objetos y configurarlos de manera eficiente contribuye a la creación de código limpio, modular y fácilmente mantenible. Al comprender la importancia y la aplicación práctica del método constructor, los programadores pueden aprovechar al máximo la Programación Orientada a Objetos en PHP, construyendo sistemas robustos y flexibles. Este conocimiento es esencial para aquellos que buscan no solo escribir código funcional sino también desarrollar software de calidad que sea escalable y fácil de mantener en el tiempo.\nRecursos # Videos # Este video empieza en el minuto 2:35.\nMás lectura # Esta página está en inglés pero puedes traducirla en tu navegador.\nhttps://www.w3schools.com/php/php_oop_inheritance.asp\n","date":"10 noviembre 2023","permalink":"/platform/php/poo/constructor/","section":"Phps","summary":"Introducción # La Programación Orientada a Objetos (POO) ofrece un enfoque poderoso y estructurado para el desarrollo de software, y uno de los conceptos fundamentales que la sustenta es el método constructor.","title":"Método Constructor en Programación Orientada a Objetos (POO) con PHP"},{"content":"Introducción # Los modificadores de acceso son una característica fundamental de la Programación Orientada a Objetos (POO). Estos modificadores definen el nivel de visibilidad de las propiedades y métodos de una clase. En PHP, existen tres tipos de modificadores de acceso: public, protected y private.\nModificadores de Acceso # Public # El modificador public es el más simple de los tres. Cuando una propiedad o método se declara como public, significa que puede ser accedido desde cualquier parte del código, incluso fuera de la clase en la que se declaró.\nclass Ejemplo { public $propiedadPublica = \u0026#34;Soy una propiedad pública\u0026#34;; public function metodoPublico() { echo $this-\u0026gt;propiedadPublica; } } $objeto = new Ejemplo(); echo $objeto-\u0026gt;propiedadPublica; // Salida: Soy una propiedad pública $objeto-\u0026gt;metodoPublico(); // Salida: Soy una propiedad pública En este ejemplo, tanto $propiedadPublica como metodoPublico() pueden ser accedidos desde cualquier parte del código.\nProtected # El modificador protected es un poco más restrictivo. Cuando una propiedad o método se declara como protected, significa que solo puede ser accedido desde la clase en la que se declaró, o desde cualquier clase que herede de ella.\nclass Ejemplo { protected $propiedadProtegida = \u0026#34;Soy una propiedad protegida\u0026#34;; public function metodoPublico() { echo $this-\u0026gt;propiedadProtegida; } } class Hija extends Ejemplo { public function metodoHija() { echo $this-\u0026gt;propiedadProtegida; } } $objeto = new Hija(); $objeto-\u0026gt;metodoPublico(); // Salida: Soy una propiedad protegida $objeto-\u0026gt;metodoHija(); // Salida: Soy una propiedad protegida En este ejemplo, $propiedadProtegida solo puede ser accedida desde la clase Ejemplo o desde cualquier clase que herede de Ejemplo.\nPrivate # El modificador private es el más restrictivo de los tres. Cuando una propiedad o método se declara como private, significa que solo puede ser accedido desde la clase en la que se declaró.\nclass Ejemplo { private $propiedadPrivada = \u0026#34;Soy una propiedad privada\u0026#34;; public function metodoPublico() { echo $this-\u0026gt;propiedadPrivada; } } class Hija extends Ejemplo { public function metodoHija() { echo $this-\u0026gt;propiedadPrivada; // Error: Cannot access private property Ejemplo::$propiedadPrivada } } $objeto = new Ejemplo(); $objeto-\u0026gt;metodoPublico(); // Salida: Soy una propiedad privada En este ejemplo, $propiedadPrivada solo puede ser accedida desde la clase Ejemplo.\nConclusión # Los modificadores de acceso son una herramienta poderosa en la programación orientada a objetos que permite a los desarrolladores controlar el nivel de visibilidad de las propiedades y métodos de una clase. PHP, como lenguaje de programación orientado a objetos, proporciona tres modificadores de acceso: public, protected y private, cada uno con su propio nivel de visibilidad.\nRecursos # Más lectura # Esta página está en inglés pero puedes traducirla en tu navegador.\nhttps://www.w3schools.com/php/php_oop_access_modifiers.asp\n","date":"10 noviembre 2023","permalink":"/platform/php/poo/modificadores_acceso/","section":"Phps","summary":"Introducción # Los modificadores de acceso son una característica fundamental de la Programación Orientada a Objetos (POO).","title":"Modificadores de Acceso en Programación Orientada a Objetos (POO) con PHP"},{"content":"Introducción # El polimorfismo es uno de los cuatro pilares fundamentales de la Programación Orientada a Objetos (POO), junto con la encapsulación, la herencia y la abstracción. El término \u0026ldquo;polimorfismo\u0026rdquo; proviene del griego \u0026ldquo;poly\u0026rdquo; que significa \u0026ldquo;muchos\u0026rdquo; y \u0026ldquo;morphos\u0026rdquo; que significa \u0026ldquo;formas\u0026rdquo;. En el contexto de la programación, se refiere a la capacidad de un objeto para tomar muchas formas.\n¿Qué es el Polimorfismo? # En POO, el polimorfismo permite que los objetos de diferentes clases se utilicen como si fueran objetos de una misma clase. Esto se logra mediante la implementación de métodos que se comportan de manera diferente en diferentes clases, pero que pueden ser llamados de la misma manera. En otras palabras, diferentes objetos pueden responder a la misma interacción de diferentes maneras.\nPolimorfismo en PHP # PHP es un lenguaje de programación de alto nivel que admite el paradigma de la POO, incluyendo el polimorfismo. Aunque PHP es un lenguaje de tipado dinámico y no requiere la declaración explícita de tipos de datos, aún así puede implementar el polimorfismo a través de interfaces y clases abstractas.\nInterfaces # Las interfaces en PHP proporcionan una forma de implementar el polimorfismo. Una interfaz define un contrato para qué métodos debe tener una clase. Cualquier clase que implemente esa interfaz debe proporcionar implementaciones para todos los métodos definidos en la interfaz.\ninterface Animal { public function hacerSonido(); } class Perro implements Animal { public function hacerSonido() { echo \u0026#34;Guau!\u0026#34;; } } class Gato implements Animal { public function hacerSonido() { echo \u0026#34;Miau!\u0026#34;; } } En este ejemplo, tanto la clase Perro como la clase Gato implementan la interfaz Animal. Ambas clases tienen un método hacerSonido, pero cada una lo implementa de manera diferente.\nClases Abstractas # Las clases abstractas son otra forma de implementar el polimorfismo en PHP. Una clase abstracta es una clase que no puede ser instanciada por sí misma y que está destinada a ser extendida por otras clases. Una clase abstracta puede tener métodos abstractos, que son métodos que se declaran pero no se implementan en la clase abstracta.\nabstract class Animal { abstract public function hacerSonido(); } class Perro extends Animal { public function hacerSonido() { echo \u0026#34;Guau!\u0026#34;; } } class Gato extends Animal { public function hacerSonido() { echo \u0026#34;Miau!\u0026#34;; } } En este ejemplo, tanto la clase Perro como la clase Gato extienden la clase abstracta Animal. Ambas clases tienen un método hacerSonido, pero cada una lo implementa de manera diferente.\nConclusión # El polimorfismo es un concepto poderoso en la programación orientada a objetos que permite a los programadores escribir código más flexible y reutilizable. PHP, a pesar de ser un lenguaje de tipado dinámico, ofrece varias formas de implementar el polimorfismo, lo que permite a los desarrolladores aprovechar este importante concepto.\nRecursos # ","date":"10 noviembre 2023","permalink":"/platform/php/poo/polimorfismo/","section":"Phps","summary":"Introducción # El polimorfismo es uno de los cuatro pilares fundamentales de la Programación Orientada a Objetos (POO), junto con la encapsulación, la herencia y la abstracción.","title":"Polimorfismo en Programación Orientada a Objetos (POO) con PHP"},{"content":"Regresar a ver los ejercicios\nAquí tienes una implementación básica para cada uno de los ejercicios propuestos. Ten en cuenta que estas soluciones son simples y pueden mejorarse o modificarse según los requisitos específicos.\nAdemás, es recomendable que tú, como estudiante, intentes resolver los ejercicios por ti mismo antes de revisar esta solución debido a que así lograrás una comprensión más profunda de los conceptos.\nEjercicio 1: Biblioteca Virtual # Crea un sistema de biblioteca virtual en PHP utilizando programación orientada a objetos. Debes diseñar al menos tres clases: Libro, Autor y Biblioteca. Los libros deben tener atributos como título, autor, año de publicación, y disponibilidad. La biblioteca debe permitir agregar libros, mostrar la información de un libro específico y listar todos los libros disponibles.\n\u0026lt;?php class Autor { public $nombre; public function __construct($nombre) { $this-\u0026gt;nombre = $nombre; } } class Libro { public $titulo; public $autor; public $anoPublicacion; public $disponibilidad; public function __construct($titulo, $autor, $anoPublicacion, $disponibilidad) { $this-\u0026gt;titulo = $titulo; $this-\u0026gt;autor = $autor; $this-\u0026gt;anoPublicacion = $anoPublicacion; $this-\u0026gt;disponibilidad = $disponibilidad; } public function obtenerInformacion() { return \u0026#34;Título: $this-\u0026gt;titulo, Autor: $this-\u0026gt;autor-\u0026gt;nombre, Año de Publicación: $this-\u0026gt;anoPublicacion, Disponibilidad: $this-\u0026gt;disponibilidad\u0026#34;; } } class Biblioteca { public $libros = []; public function agregarLibro($libro) { $this-\u0026gt;libros[] = $libro; } public function mostrarInformacionLibro($indice) { if (isset($this-\u0026gt;libros[$indice])) { return $this-\u0026gt;libros[$indice]-\u0026gt;obtenerInformacion(); } else { return \u0026#34;Libro no encontrado\u0026#34;; } } public function listarLibrosDisponibles() { $librosDisponibles = []; foreach ($this-\u0026gt;libros as $libro) { if ($libro-\u0026gt;disponibilidad) { $librosDisponibles[] = $libro-\u0026gt;titulo; } } return $librosDisponibles; } } // Uso del sistema $autor1 = new Autor(\u0026#34;Autor 1\u0026#34;); $autor2 = new Autor(\u0026#34;Autor 2\u0026#34;); $libro1 = new Libro(\u0026#34;Libro 1\u0026#34;, $autor1, 2000, true); $libro2 = new Libro(\u0026#34;Libro 2\u0026#34;, $autor2, 2010, false); $biblioteca = new Biblioteca(); $biblioteca-\u0026gt;agregarLibro($libro1); $biblioteca-\u0026gt;agregarLibro($libro2); echo $biblioteca-\u0026gt;mostrarInformacionLibro(0) . PHP_EOL; echo \u0026#34;Libros disponibles: \u0026#34; . implode(\u0026#34;, \u0026#34;, $biblioteca-\u0026gt;listarLibrosDisponibles()) . PHP_EOL; ?\u0026gt; Ejercicio 2: Tienda en Línea # Desarrolla un sistema básico para una tienda en línea utilizando programación orientada a objetos en PHP. Crea las clases Producto, Carrito y Cliente. Los productos deben tener atributos como nombre, precio y cantidad disponible. El carrito debe permitir agregar productos, calcular el total de la compra y finalizar la compra, disminuyendo la cantidad de productos disponibles.\n\u0026lt;?php class Producto { public $nombre; public $precio; public $cantidadDisponible; public function __construct($nombre, $precio, $cantidadDisponible) { $this-\u0026gt;nombre = $nombre; $this-\u0026gt;precio = $precio; $this-\u0026gt;cantidadDisponible = $cantidadDisponible; } } class Carrito { public $productos = []; public function agregarProducto($producto) { $this-\u0026gt;productos[] = $producto; } public function calcularTotal() { $total = 0; foreach ($this-\u0026gt;productos as $producto) { $total += $producto-\u0026gt;precio; } return $total; } public function finalizarCompra() { foreach ($this-\u0026gt;productos as $producto) { $producto-\u0026gt;cantidadDisponible--; } $this-\u0026gt;productos = []; return \u0026#34;Compra realizada con éxito\u0026#34;; } } class Cliente { public $nombre; public function __construct($nombre) { $this-\u0026gt;nombre = $nombre; } } // Uso del sistema $producto1 = new Producto(\u0026#34;Producto 1\u0026#34;, 50, 10); $producto2 = new Producto(\u0026#34;Producto 2\u0026#34;, 30, 5); $carrito = new Carrito(); $carrito-\u0026gt;agregarProducto($producto1); $carrito-\u0026gt;agregarProducto($producto2); echo \u0026#34;Total de la compra: $\u0026#34; . $carrito-\u0026gt;calcularTotal() . PHP_EOL; echo $carrito-\u0026gt;finalizarCompra() . PHP_EOL; ?\u0026gt; Ejercicio 3: Gestión de Empleados # Diseña un sistema de gestión de empleados en PHP. Crea las clases Empleado, Departamento y Empresa. Los empleados deben tener atributos como nombre, salario y departamento al que pertenecen. La empresa debe permitir agregar empleados, asignarlos a departamentos y calcular el salario total de la empresa.\n\u0026lt;?php class Departamento { public $nombre; public function __construct($nombre) { $this-\u0026gt;nombre = $nombre; } } class Empleado { public $nombre; public $salario; public $departamento; public function __construct($nombre, $salario, $departamento) { $this-\u0026gt;nombre = $nombre; $this-\u0026gt;salario = $salario; $this-\u0026gt;departamento = $departamento; } } class Empresa { public $empleados = []; public function agregarEmpleado($empleado) { $this-\u0026gt;empleados[] = $empleado; } public function asignarDepartamento($empleado, $departamento) { $empleado-\u0026gt;departamento = $departamento; } public function calcularSalarioTotal() { $total = 0; foreach ($this-\u0026gt;empleados as $empleado) { $total += $empleado-\u0026gt;salario; } return $total; } } // Uso del sistema $departamento1 = new Departamento(\u0026#34;Departamento 1\u0026#34;); $departamento2 = new Departamento(\u0026#34;Departamento 2\u0026#34;); $empleado1 = new Empleado(\u0026#34;Empleado 1\u0026#34;, 50000, $departamento1); $empleado2 = new Empleado(\u0026#34;Empleado 2\u0026#34;, 60000, $departamento2); $empresa = new Empresa(); $empresa-\u0026gt;agregarEmpleado($empleado1); $empresa-\u0026gt;agregarEmpleado($empleado2); $empresa-\u0026gt;asignarDepartamento($empleado1, $departamento2); echo \u0026#34;Salario total de la empresa: $\u0026#34; . $empresa-\u0026gt;calcularSalarioTotal() . PHP_EOL; ?\u0026gt; ","date":"10 noviembre 2023","permalink":"/platform/php/poo/practico/atributos_metodos/solucion/","section":"Phps","summary":"Regresar a ver los ejercicios","title":"Atributos y métodos - solución"},{"content":"En esta sección nos dedicaremos a resolver algunos ejercicios que están pensados para aplicar lo que hemos aprendido. Ten en cuenta que no necesitas crear un sistema muy grande o complejo. En realidad, el objetivo de estos ejercicios es que desarrolles la capacidad de analizar la situación y crear un sistema que permita resolver o gestionar los recursos.\nEnfócate principalmente en crear la lógica del sistema en tu mente, luego crea las clases con los respectivos atributos y métodos. No te limites a lo que el ejercicio te indica, puedes agregar más atributos, métodos, o aplicar otros conceptos que conozcas en cuanto a Programación Orientada a Objetos.\n¡Te deseo mucho éxito! Espero estos ejercicios te ayuden a reforzar tu lógica de programación en este paradigma orientado a objetos.\nEjercicio 1: Biblioteca Virtual # Crea un sistema de biblioteca virtual en PHP utilizando programación orientada a objetos. Debes diseñar al menos tres clases: Libro, Autor y Biblioteca. Los libros deben tener atributos como título, autor, año de publicación, y disponibilidad. La biblioteca debe permitir agregar libros, mostrar la información de un libro específico y listar todos los libros disponibles.\nEjercicio 2: Tienda en Línea # Desarrolla un sistema básico para una tienda en línea utilizando programación orientada a objetos en PHP. Crea las clases Producto, Carrito y Cliente. Los productos deben tener atributos como nombre, precio y cantidad disponible. El carrito debe permitir agregar productos, calcular el total de la compra y finalizar la compra, disminuyendo la cantidad de productos disponibles.\nEjercicio 3: Gestión de Empleados # Diseña un sistema de gestión de empleados en PHP. Crea las clases Empleado, Departamento y Empresa. Los empleados deben tener atributos como nombre, salario y departamento al que pertenecen. La empresa debe permitir agregar empleados, asignarlos a departamentos y calcular el salario total de la empresa.\nSi estas luchando mucho tiempo con estos ejercicios, aquí te dejaré una posible solución, pero recuerda que no debes ver la solución hasta que hayas hecho tu mejor esfuerzo. Además, puede que tú hayas pensado una solución ligeramente diferente a la que te propondremos. Esto es debido a que existen muchas formas de resolver un mismo asunto. Sin embargo, esto te puede servir de guía.\nVer solución\n","date":"10 noviembre 2023","permalink":"/platform/php/poo/practico/atributos_metodos/ejercicios/","section":"Phps","summary":"En esta sección nos dedicaremos a resolver algunos ejercicios que están pensados para aplicar lo que hemos aprendido.","title":"Atributos y métodos - práctico "},{"content":"Resumen # La herencia es un concepto fundamental en la Programación Orientada a Objetos (POO) que permite la creación de jerarquías de clases, facilitando la reutilización de código y la estructuración de software de manera más eficiente. En este extenso artículo, exploraremos en detalle la herencia en el contexto de PHP, con explicaciones teóricas, ejemplos prácticos y su impacto en el desarrollo de aplicaciones robustas y flexibles.\nIntroducción # La Programación Orientada a Objetos (POO) se basa en el paradigma de objetos, donde las entidades del mundo real se representan como clases y objetos. La herencia es un principio clave de la POO que permite la creación de nuevas clases basadas en clases existentes, fomentando la reutilización de código y la organización lógica del software.\nFundamentos de la Herencia en PHP # 1. Definición de Herencia # En PHP, la herencia permite que una clase (llamada clase derivada o subclase) herede propiedades y métodos de otra clase (llamada clase base o superclase). La clase derivada puede extender o modificar la funcionalidad heredada, proporcionando así una forma de reutilizar y especializar el código.\n2. Jerarquía de Clases # La herencia facilita la creación de jerarquías de clases, donde clases más específicas (subclases) heredan de clases más generales (superclases). Esta jerarquía refleja la relación \u0026ldquo;es un\u0026rdquo; entre las clases, lo que significa que una subclase es una versión más específica de su superclase.\nclass Animal { public function comer() { echo \u0026#34;El animal está comiendo.\u0026#34;; } } class Mamifero extends Animal { // Clase que hereda de Animal } class Perro extends Mamifero { public function ladrar() { echo \u0026#34;Guau guau\u0026#34;; } } Beneficios de la Herencia en PHP # 1. Reutilización de Código # La herencia permite la reutilización de código al heredar propiedades y métodos de una clase base. Esto evita la duplicación de código y facilita la mantenibilidad del programa.\n2. Estructuración del Código # La herencia contribuye a una estructuración lógica del código al organizar clases en una jerarquía coherente. Las clases más generales proporcionan una base común, mientras que las clases más específicas agregan o modifican funcionalidades según sea necesario.\n3. Polimorfismo # El polimorfismo es otro concepto asociado a la herencia que permite que objetos de diferentes clases se utilicen de manera uniforme. Esto mejora la flexibilidad y extensibilidad del código.\nclass Gato extends Mamifero { public function maullar() { echo \u0026#34;Miau\u0026#34;; } } function hacerSonido(Mamifero $animal) { $animal-\u0026gt;maullar(); // Funciona tanto para Gato como para Perro } $hachiko = new Perro(); $garfield = new Gato(); hacerSonido($hachiko); // Salida: Guau guau hacerSonido($garfield); // Salida: Miau 4. Sobrescritura de Métodos # Una subclase puede sobrescribir (o redefinir) métodos heredados de su superclase para adaptarlos a sus necesidades específicas.\nclass Felino extends Mamifero { public function comer() { echo \u0026#34;El felino está cazando y comiendo.\u0026#34;; } } Implementación de la Herencia en PHP # 1. Palabra Clave extends # En PHP, la herencia se implementa mediante la palabra clave extends. La clase derivada utiliza esta palabra clave para indicar de qué clase hereda.\nclass Mamifero extends Animal { // Implementación de la clase derivada } 2. Llamada a Métodos de la Clase Base # Para llamar a métodos de la clase base desde la clase derivada, se utiliza la palabra clave parent.\nclass Felino extends Mamifero { public function comer() { parent::comer(); // Llama al método comer de la clase base echo \u0026#34;El felino está cazando y comiendo.\u0026#34;; } } 3. Constructor de la Clase Base # El constructor de la clase base se puede invocar desde la clase derivada utilizando la palabra clave parent.\nclass Mamifero extends Animal { public function __construct() { parent::__construct(); // Llama al constructor de la clase base // Otras inicializaciones específicas de Mamifero } } Ejemplos Prácticos en PHP # 1. Sistema de Gestión de Empleados # Supongamos un sistema de gestión de empleados en PHP. Podemos utilizar la herencia para representar diferentes tipos de empleados, como gerentes y desarrolladores, que comparten características comunes con los empleados en general.\nclass Empleado { public $nombre; public $salario; public function __construct($nombre, $salario) { $this-\u0026gt;nombre = $nombre; $this-\u0026gt;salario = $salario; } public function trabajar() { echo \u0026#34;{$this-\u0026gt;nombre} está trabajando.\u0026#34;; } } class Gerente extends Empleado { public $departamento; public function __construct($nombre, $salario, $departamento) { parent::__construct($nombre, $salario); $this-\u0026gt;departamento = $departamento; } public function coordinar() { echo \u0026#34;{$this-\u0026gt;nombre} está coordinando en el departamento de {$this-\u0026gt;departamento}.\u0026#34;; } } class Desarrollador extends Empleado { public $lenguaje; public function __construct($nombre, $salario, $lenguaje) { parent::__construct($nombre, $salario); $this-\u0026gt;lenguaje = $lenguaje; } public function codificar() { echo \u0026#34;{$this-\u0026gt;nombre} está codificando en {$this-\u0026gt;lenguaje}.\u0026#34;; } } 2. Sistema de Manejo de Figuras Geométricas # En un sistema que maneja figuras geométricas, la herencia puede utilizarse para representar diferentes tipos de figuras, como círculos y rectángulos, que comparten propiedades y comportamientos comunes.\nclass Figura { public function area() { // Implementación del cálculo de área genérico } } class Circulo extends Figura { private $radio; public function __construct($radio) { $this-\u0026gt;radio = $radio; } public function area() { return 3.14 * $this-\u0026gt;radio * $this-\u0026gt;radio; } } class Rectangulo extends Figura { private $base; private $altura; public function __construct($base, $altura) { $this-\u0026gt;base = $base; $this-\u0026gt;altura = $altura; } public function area() { return $this-\u0026gt;base * $this-\u0026gt;altura; } } Conclusiones # La herencia en Programación Orientada a Objetos en PHP es una herramienta poderosa que facilita la creación de software flexible y reutilizable. Al organizar clases en jerarquías lógicas, la herencia permite la reutilización eficiente de código y la representación de relaciones entre entidades del mundo real. Entender y aplicar adecuadamente la herencia es esencial para los desarrolladores que buscan construir sistemas robustos y escalables en el mundo de la programación orientada a objetos en PHP. Con ejemplos prácticos y una comprensión profunda de los fundamentos teóricos, la herencia en PHP se convierte en una herramienta valiosa en el kit de herramientas del desarrollador.\nRecursos # Videos # Más lectura # Esta página está en inglés pero puedes traducirla en tu navegador.\nhttps://www.w3schools.com/php/php_oop_inheritance.asp\n","date":"10 noviembre 2023","permalink":"/platform/php/poo/herencia/","section":"Phps","summary":"Resumen # La herencia es un concepto fundamental en la Programación Orientada a Objetos (POO) que permite la creación de jerarquías de clases, facilitando la reutilización de código y la estructuración de software de manera más eficiente.","title":"La Herencia en Programación Orientada a Objetos (POO) en PHP"},{"content":"Introducción # La abstracción es uno de los cuatro pilares fundamentales de la Programación Orientada a Objetos (POO), junto con la encapsulación, la herencia y el polimorfismo. La abstracción se refiere al proceso de ocultar los detalles de implementación y mostrar solo la funcionalidad al usuario.\n¿Qué es la Abstracción? # En términos simples, la abstracción es el proceso de identificar las características y comportamientos esenciales de un objeto, ignorando los detalles menos relevantes. En el contexto de la POO, la abstracción a menudo se logra mediante el uso de clases y objetos.\nPor ejemplo, si consideramos un objeto Coche, las características esenciales podrían ser la marca, el modelo y el color del coche, y los comportamientos podrían ser arrancar, acelerar y frenar. Los detalles menos relevantes, como cómo se fabrica el coche o qué tipo de tornillos se utilizan en su construcción, se ignoran.\n¿Cómo se Implementa la Abstracción en POO con PHP? # La abstracción se implementa en POO mediante el uso de clases y métodos abstractos.\nClases Abstractas # Una clase abstracta es una que no puede ser instanciada por sí misma, sino que debe ser extendida por otras clases. Una clase abstracta puede contener tanto métodos concretos (métodos con una implementación) como métodos abstractos (métodos sin implementación).\nabstract class Animal { abstract public function mover(); } Métodos Abstractos # Un método abstracto es un método que se declara en una clase abstracta pero no se implementa. La implementación de estos métodos se proporciona en las clases que extienden la clase abstracta.\nclass Perro extends Animal { public function mover() { echo \u0026#34;El perro corre\u0026#34;; } } Beneficios de la Abstracción # La abstracción ofrece varios beneficios en la programación orientada a objetos:\nSimplicidad: Al ocultar los detalles de implementación y mostrar solo la funcionalidad al usuario, la abstracción hace que el sistema sea más fácil de entender y utilizar.\nReutilización de código: Las clases abstractas y los métodos abstractos permiten la reutilización de código, ya que una clase abstracta puede proporcionar una implementación predeterminada que las subclases pueden heredar.\nSeguridad: Al ocultar los detalles de implementación, la abstracción también mejora la seguridad del código, ya que los usuarios no pueden modificar los datos internos de un objeto directamente.\nConclusión # La abstracción es un concepto fundamental en la programación orientada a objetos que permite a los programadores ocultar los detalles de implementación y mostrar solo la funcionalidad al usuario. Aunque este artículo proporciona una introducción a la abstracción, hay muchos otros aspectos de la POO, como la encapsulación, la herencia y el polimorfismo, que también son importantes para escribir código eficiente y mantenible.\nRecursos # Videos # Más lectura # Esta página está en inglés pero puedes traducirla en tu navegador.\nhttps://www.w3schools.com/php/php_oop_classes_abstract.asp\n","date":"10 noviembre 2023","permalink":"/platform/php/poo/abstraccion/","section":"Phps","summary":"Introducción # La abstracción es uno de los cuatro pilares fundamentales de la Programación Orientada a Objetos (POO), junto con la encapsulación, la herencia y el polimorfismo.","title":"Abstracción en la Programación Orientada a Objetos (POO) con PHP"},{"content":"Introducción # PHP es un lenguaje de programación de scripts del lado del servidor que se utiliza principalmente para el desarrollo web. Aunque originalmente no fue diseñado con la Programación Orientada a Objetos (POO) en mente, PHP ha evolucionado para incluir un conjunto completo de características de POO. En este artículo, exploraremos tres conceptos fundamentales de la POO en PHP: clases, atributos y métodos.\nClases # Una clase es una plantilla o un plano que define qué datos y comportamientos puede tener un objeto. En PHP, definimos una clase usando la palabra clave class, seguida del nombre de la clase.\nclass Coche { // Atributos y métodos } Atributos # Los atributos, también conocidos como propiedades, son las variables que se definen dentro de una clase. Estos representan el estado o los datos de un objeto. En PHP, los atributos se definen utilizando una de las palabras clave public, protected o private, seguida del nombre del atributo.\nclass Coche { public $color; private $velocidad; protected $motor; } Métodos # Los métodos son funciones que se definen dentro de una clase. Estos representan el comportamiento de un objeto. Al igual que los atributos, los métodos también pueden ser public, protected o private.\nclass Coche { // Atributos... public function acelerar() { // Código para acelerar } private function encenderMotor() { // Código para encender el motor } } Creando Objetos # Para crear un objeto de una clase, usamos la palabra clave new seguida del nombre de la clase.\n$miCoche = new Coche(); Accediendo a Atributos y Métodos # Para acceder a los atributos y métodos de un objeto, usamos el operador -\u0026gt;.\n$miCoche-\u0026gt;color = \u0026#39;rojo\u0026#39;; $miCoche-\u0026gt;acelerar(); Conclusión # Las clases, atributos y métodos son conceptos fundamentales de la Programación Orientada a Objetos en PHP. Aunque este artículo proporciona una introducción, hay muchos otros aspectos de la POO en PHP, como la herencia, el polimorfismo y el encapsulamiento, que también son importantes para escribir código eficiente y mantenible.\nRecursos # Videos # Más lectura # Esta página está en inglés pero puedes traducirla en tu navegador.\nhttps://www.w3schools.com/php/php_oop_classes_objects.asp\n","date":"10 noviembre 2023","permalink":"/platform/php/poo/clases_atributos_metodos/","section":"Phps","summary":"Introducción # PHP es un lenguaje de programación de scripts del lado del servidor que se utiliza principalmente para el desarrollo web.","title":"Clases, Atributos y Métodos en PHP"},{"content":"La Programación Orientada a Objetos (POO) es un paradigma de programación que utiliza objetos y sus interacciones para diseñar aplicaciones y programas de software. Es una forma de programación más cercana a cómo expresaríamos las cosas en la vida real en comparación con otros paradigmas, como la programación procedural o funcional.\n¿Qué es un Objeto? # En POO, un objeto es una entidad que tiene estado, comportamiento y identidad. El estado se refiere a los datos o atributos que el objeto mantiene, el comportamiento se refiere a lo que puede hacer o las operaciones que puede realizar, y la identidad es una propiedad que diferencia a cada objeto de los demás.\n¿Qué es una Clase? # Una clase es un plano o plantilla a partir de la cual se crean los objetos. Define las características y comportamientos que tendrán los objetos de esa clase. Por ejemplo, podríamos tener una clase Coche que tiene características como color, marca y modelo, y comportamientos como acelerar y frenar.\nVentajas de la POO # La POO ofrece varias ventajas, entre las que se incluyen:\nModularidad: El código se divide en varias piezas o módulos, cada uno de los cuales se ocupa de una parte específica de la funcionalidad general del software. Esto facilita la comprensión, el mantenimiento y la reutilización del código.\nOcultamiento de información: Los detalles de implementación de una clase están ocultos y solo se expone una interfaz pública. Esto se conoce como encapsulamiento y ayuda a proteger los datos.\nReutilización de código: A través de la herencia, una clase puede heredar características de otra clase, lo que permite reutilizar el código existente.\nFlexibilidad a través del polimorfismo: El polimorfismo permite que una sola interfaz represente a una clase general de acciones. Esto proporciona flexibilidad al código y facilita su expansión y mantenimiento.\nConclusión # La Programación Orientada a Objetos es un poderoso paradigma de programación que proporciona una forma estructurada y flexible de crear programas. Aunque este artículo solo proporciona una introducción, los conceptos de abstracción, herencia, polimorfismo y encapsulamiento son fundamentales para entender y utilizar eficazmente la POO. Estos conceptos se tratarán en detalle en los próximos artículos.\nRecursos # Videos # Más lectura # https://www.w3schools.com/php/php_oop_what_is.asp\n","date":"10 noviembre 2023","permalink":"/platform/php/poo/intro/","section":"Phps","summary":"La Programación Orientada a Objetos (POO) es un paradigma de programación que utiliza objetos y sus interacciones para diseñar aplicaciones y programas de software.","title":"Introducción a la Programación Orientada a Objetos (POO)"},{"content":"Introducción # Los paradigmas de programación son una forma de clasificar los lenguajes de programación según sus características. Los lenguajes pueden ser clasificados en múltiples paradigmas. Cada paradigma tiene sus propias ventajas y desventajas, y la elección de un paradigma puede depender de varios factores, como el problema que se está tratando de resolver, el entorno en el que se está trabajando, y las preferencias personales del programador.\nParadigma Imperativo # El paradigma imperativo es probablemente el más común. En este paradigma, un programa se ve como una serie de comandos que se ejecutan en orden. Los lenguajes imperativos son excelentes para tareas que requieren un control detallado del estado del programa y la máquina, como los sistemas operativos y los controladores de dispositivos. Ejemplos de lenguajes imperativos incluyen C, C++, y Java.\nParadigma Declarativo # En el paradigma declarativo, un programa se ve como una serie de afirmaciones que describen el problema a resolver, pero no necesariamente cómo resolverlo. Este paradigma es útil para tareas que requieren una descripción de alto nivel de un problema, como las consultas de bases de datos y la generación de páginas web. Ejemplos de lenguajes declarativos incluyen SQL y HTML.\nParadigma Funcional # En el paradigma funcional, un programa se ve como una serie de funciones matemáticas. Este paradigma es útil para tareas que requieren un alto grado de abstracción y que pueden beneficiarse de características como la evaluación perezosa y la transparencia referencial. Ejemplos de lenguajes funcionales incluyen Lisp y Haskell.\nParadigma Orientado a Objetos # En el paradigma orientado a objetos, un programa se ve como una serie de objetos que interactúan entre sí. Este paradigma es útil para tareas que requieren una representación natural de las entidades del mundo real y sus interacciones. Ejemplos de lenguajes orientados a objetos incluyen Java y Python.\nParadigma Lógico # En el paradigma lógico, un programa se ve como una serie de afirmaciones lógicas. Este paradigma es útil para tareas que requieren una descripción lógica de un problema, como la inteligencia artificial y la programación de bases de datos. Un ejemplo de un lenguaje lógico es Prolog.\nConclusión # Es importante tener en cuenta que muchos lenguajes de programación modernos son multiparadigma, lo que significa que pueden soportar varios paradigmas de programación diferentes. La elección del paradigma de programación puede tener un impacto significativo en la eficiencia, la legibilidad y la mantenibilidad del código, por lo que es una decisión importante en el desarrollo de software.\nRecursos # ","date":"10 noviembre 2023","permalink":"/platform/backend/paradigmas/","section":"Backends","summary":"Introducción # Los paradigmas de programación son una forma de clasificar los lenguajes de programación según sus características.","title":"Paradigmas de Programación: Una Mirada Más Profunda"},{"content":"Un aspecto fundamental de Git es el concepto de \u0026ldquo;commit\u0026rdquo;, que es esencialmente una instantánea de tu código en un punto específico del tiempo.\n¿Qué es un commit? # Un commit en Git es un cambio que se ha guardado o \u0026ldquo;comprometido\u0026rdquo; en tu repositorio. Cada commit tiene un identificador único (llamado hash SHA), y contiene información sobre los cambios realizados, quién los hizo, y cuándo se hicieron.\nCreación de un commit # Para crear un commit, primero debes hacer cambios en tu repositorio. Estos cambios pueden ser cualquier cosa, desde agregar un nuevo archivo hasta modificar una línea de código. Una vez que hayas hecho tus cambios, puedes usar el comando git add para agregar estos cambios al \u0026ldquo;área de preparación\u0026rdquo; (también conocida como \u0026ldquo;índice\u0026rdquo;).\ngit add . Una vez que tus cambios están en el área de preparación, puedes usar el comando git commit para crear un nuevo commit. Este comando abrirá un editor de texto donde puedes escribir un mensaje de commit, que es una descripción breve de los cambios que has hecho.\ngit commit -m \u0026#34;Tu mensaje de commit\u0026#34; Visualización de commits # Puedes ver la historia de commits de tu repositorio utilizando el comando git log. Este comando mostrará una lista de todos los commits en tu repositorio, empezando por el más reciente. Cada entrada en el log incluye el hash SHA del commit, el autor del commit, la fecha del commit y el mensaje del commit.\ngit log Commits en GitHub # Cuando trabajas con GitHub, los commits que haces localmente pueden ser \u0026ldquo;empujados\u0026rdquo; a tu repositorio de GitHub con el comando git push. Esto permite que otros vean y colaboren en tus cambios. Del mismo modo, puedes \u0026ldquo;jalar\u0026rdquo; los cambios de otros a tu repositorio local con el comando git pull.\ngit push origin main git pull origin main Conclusión # Los commits son una parte esencial del flujo de trabajo en Git y GitHub. Permiten un seguimiento detallado de los cambios, facilitan la colaboración y ayudan a prevenir la pérdida de trabajo. Al entender cómo funcionan los commits, puedes utilizar GitHub de manera más efectiva para gestionar y colaborar en proyectos de desarrollo de software.\nRecursos # ","date":"9 noviembre 2023","permalink":"/platform/git/commit/","section":"Gits","summary":"Un aspecto fundamental de Git es el concepto de \u0026ldquo;commit\u0026rdquo;, que es esencialmente una instantánea de tu código en un punto específico del tiempo.","title":"Cómo funcionan los commits"},{"content":"Creación del formulario # Primero, necesitamos crear un formulario HTML que permita al usuario seleccionar la imagen que desea subir. Aquí hay un ejemplo de cómo podría verse:\n\u0026lt;form action=\u0026#34;upload.php\u0026#34; method=\u0026#34;post\u0026#34; enctype=\u0026#34;multipart/form-data\u0026#34;\u0026gt; Selecciona la imagen para subir: \u0026lt;input type=\u0026#34;file\u0026#34; name=\u0026#34;fileToUpload\u0026#34; id=\u0026#34;fileToUpload\u0026#34; /\u0026gt; \u0026lt;button type=\u0026#34;submit\u0026#34;\u0026gt;Subir imagen\u0026lt;/button\u0026gt; \u0026lt;/form\u0026gt; El atributo enctype=\u0026quot;multipart/form-data\u0026quot; es importante porque asegura que el archivo se envíe correctamente.\nSubida de la imagen al servidor # En el archivo upload.php, puedes usar la superglobal $_FILES para acceder al archivo cargado. Aquí hay un ejemplo de cómo manejar la subida del archivo:\n\u0026lt;?php $target_dir = \u0026#34;uploads/\u0026#34;; $target_file = $target_dir . $_FILES[\u0026#34;fileToUpload\u0026#34;][\u0026#34;name\u0026#34;]; if (move_uploaded_file($_FILES[\u0026#34;fileToUpload\u0026#34;][\u0026#34;tmp_name\u0026#34;], $target_file)) { echo \u0026#34;El archivo \u0026#34;. $_FILES[\u0026#34;fileToUpload\u0026#34;][\u0026#34;name\u0026#34;] . \u0026#34; ha sido subido.\u0026#34;; } else { echo \u0026#34;Lo siento, hubo un error al subir tu archivo.\u0026#34;; } ?\u0026gt; En este código, $_FILES[\u0026quot;fileToUpload\u0026quot;][\u0026quot;tmp_name\u0026quot;] contiene la ruta al archivo subido en el servidor, y $_FILES[\u0026quot;fileToUpload\u0026quot;][\u0026quot;name\u0026quot;] contiene el nombre original del archivo¹¹. move_uploaded_file() mueve el archivo subido, a la carpeta uploads/.\nAlmacenamiento de la imagen en la base de datos # ¿Cómo hacerlo? # Para subir una imagen a una base de datos con PHP, también necesitamos un formulario HTML⁶. Sin embargo, en lugar de mover el archivo subido a una carpeta en el servidor, vamos a insertar los datos del archivo en una tabla de la base de datos.\nPara almacenar la imagen en la base de datos, puedes usar el tipo de dato BLOB (Binary Large Object). Aquí hay un ejemplo de cómo hacerlo con mysqli:\n\u0026lt;?php $conexion = new mysqli(\u0026#34;localhost\u0026#34;, \u0026#34;username\u0026#34;, \u0026#34;password\u0026#34;, \u0026#34;database\u0026#34;); $image = addslashes(file_get_contents($_FILES[\u0026#39;image\u0026#39;][\u0026#39;tmp_name\u0026#39;])); $query = \u0026#34;INSERT INTO images_tabla (imagenes) VALUES (\u0026#39;$image\u0026#39;)\u0026#34;; $response = $conexion-\u0026gt;query($query); if ($response) { echo \u0026#34;Imagen subida correctamente.\u0026#34;; } else { echo \u0026#34;Lo siento, hubo un error al subir tu imagen.\u0026#34;; } ?\u0026gt; En este código, file_get_contents($_FILES['image']['tmp_name']) lee el contenido del archivo subido. addslashes() escapa caracteres especiales en el contenido del archivo para usarlo en una sentencia SQL⁶. Luego, insertamos el contenido del archivo en la tabla images_tabla con una sentencia SQL INSERT.\nCabe resaltar que el tipo de dato que se utiliza en la columna imagenes de la tabla images_tabla es de tipo LONGLOB.\nMostrar la imagen en la interfaz del usuario # Para mostrar la imagen en la interfaz del usuario, puedes usar la función base64_encode() para codificar la imagen en una cadena que puede ser utilizada en una etiqueta \u0026lt;img\u0026gt;:\n\u0026lt;?php $query = \u0026#34;SELECT image FROM images WHERE id = $id\u0026#34;; $stmt = $mysqli-\u0026gt;query($query); $row = $result-\u0026gt;fetch_assoc(); echo \u0026#39;\u0026lt;img src=\u0026#34;data:image/jpeg;base64,\u0026#39;. base64_encode( $row[\u0026#39;image\u0026#39;] ).\u0026#39;\u0026#34;/\u0026gt;\u0026#39;; ?\u0026gt; Para mostrar la imagen que se encuentra en el servidor, simplemente puedes referenciar la ubicación del archivo en una etiqueta \u0026lt;img\u0026gt;:\n\u0026lt;img src=\u0026#34;/path/to/image.jpg\u0026#34; alt=\u0026#34;Imagen\u0026#34; /\u0026gt; Conclusión # Subir una imagen desde un formulario con PHP es una tarea común en el desarrollo web. Ya sea que estés subiendo la imagen a un servidor o a una base de datos, PHP proporciona las funciones necesarias para hacer el trabajo. Con un entendimiento sólido de estas funciones y cómo usarlas, puedes manejar la subida de imágenes de manera efectiva en tus aplicaciones web.\nRecursos # Videos # Más lectura # https://www.srcodigofuente.es/aprender-php/subir-imagenes-html-php\nhttps://www.baulphp.com/cargar-y-almacenar-imagen-en-mysql-php/\n","date":"9 noviembre 2023","permalink":"/platform/php/subir_imagenes/","section":"Phps","summary":"Creación del formulario # Primero, necesitamos crear un formulario HTML que permita al usuario seleccionar la imagen que desea subir.","title":"Subir una imagen desde un formulario con PHP"},{"content":"Introducción # En PHP, las funciones password_hash() y password_verify() son esenciales para la seguridad de las contraseñas en las aplicaciones web¹². Estas funciones permiten crear un hash seguro de una contraseña y luego verificar esa contraseña contra el hash¹².\n¿Qué es password_hash()? # La función password_hash() en PHP se utiliza para crear un nuevo hash de contraseña utilizando un algoritmo de hash fuerte¹. La sintaxis de password_hash() es la siguiente¹:\npassword_hash (string $password, int $algo, array $options = []): string|false Aquí, $password es la contraseña del usuario, $algo es un algoritmo de hash constante definido por PHP, y $options es un array asociativo que puede contener opciones específicas del algoritmo¹.\nEjemplo de password_hash() # Aquí hay un ejemplo de cómo usar password_hash()¹:\n$hash = password_hash(\u0026#34;mi_contraseña_secreta\u0026#34;, PASSWORD_DEFAULT); En este ejemplo, mi_contraseña_secreta es la contraseña del usuario y PASSWORD_DEFAULT es una constante de PHP que indica el algoritmo de hash a utilizar¹.\n¿Qué es password_verify()? # La función password_verify() en PHP se utiliza para verificar que una contraseña coincide con un hash¹. La sintaxis de password_verify() es la siguiente¹:\npassword_verify (string $password, string $hash): bool Aquí, $password es la contraseña del usuario y $hash es el hash contra el cual verificar la contraseña¹.\nEjemplo de password_verify() # Aquí hay un ejemplo de cómo usar password_verify()¹:\nif (password_verify(\u0026#39;mi_contraseña_secreta\u0026#39;, $hash)) { echo \u0026#39;¡La contraseña es válida!\u0026#39;; } else { echo \u0026#39;La contraseña no es válida.\u0026#39;; } En este ejemplo, mi_contraseña_secreta es la contraseña del usuario y $hash es el hash de la contraseña¹. Si la contraseña coincide con el hash, password_verify() devuelve true y se imprime \u0026lsquo;¡La contraseña es válida!\u0026rsquo;. Si la contraseña no coincide con el hash, password_verify() devuelve false y se imprime \u0026lsquo;La contraseña no es válida.\u0026lsquo;¹.\nConclusión # Las funciones password_hash() y password_verify() en PHP son herramientas poderosas para la gestión segura de contraseñas en las aplicaciones web. Permiten crear hashes seguros de contraseñas y verificar contraseñas contra esos hashes de una manera que sería difícil o imposible sin ellas. A medida que continuamos construyendo y utilizando aplicaciones web, es esencial entender y utilizar eficazmente estas funciones.\nSource: Conversation with Bing, 11/9/2023 (1) PHP: password_verify - Manual. https://www.php.net/manual/en/function.password-verify.php. (2) mysql - PHP login with hashed passwords - Stack Overflow. https://stackoverflow.com/questions/32149397/php-login-with-hashed-passwords. (3) PHP: password_verify. https://prototype.php.net/manual/en/function.password-verify.php. (4) PHP password_verify - PHP Tutorial. https://www.phptutorial.net/php-tutorial/php-password_verify/.\nRecursos # Videos # Más lectura # https://www.php.net/manual/es/function.password-hash\nhttps://www.php.net/manual/es/function.password-verify.php\nhttps://www.phptutorial.net/php-tutorial/php-password_verify/\n","date":"9 noviembre 2023","permalink":"/platform/php/hash_verify/","section":"Phps","summary":"Introducción # En PHP, las funciones password_hash() y password_verify() son esenciales para la seguridad de las contraseñas en las aplicaciones web¹².","title":"password_hash() y password_verify() en PHP"},{"content":"Introducción # El comando SELECT en SQL es uno de los comandos más utilizados y esenciales en el lenguaje SQL¹. Se utiliza para seleccionar (recuperar) datos de una tabla de base de datos².\n¿Qué es SELECT? # El comando SELECT en SQL se utiliza para seleccionar datos de una tabla. La sintaxis básica del comando SELECT es la siguiente³:\nSELECT column1, column2, ... FROM table; Aquí, column1, column2, \u0026hellip; son las columnas de la tabla y table es el nombre de la tabla desde donde seleccionamos los datos².\nEjemplo de SELECT # Por ejemplo, si queremos seleccionar las columnas first_name y last_name de la tabla Customers, usaríamos el siguiente comando²:\nSELECT first_name, last_name FROM Customers; Este comando selecciona las columnas first_name y last_name de todos los clientes en la tabla Customers².\nSELECT ALL # Para seleccionar todas las columnas de una tabla de base de datos, utilizamos el carácter *. Por ejemplo²:\nSELECT * FROM Customers; Este comando selecciona todas las columnas de la tabla Customers².\nSELECT con WHERE # Un comando SELECT puede tener una cláusula WHERE opcional. La cláusula WHERE nos permite seleccionar registros de una tabla de base de datos que coinciden con condiciones específicas². Por ejemplo²:\nSELECT * FROM Customers WHERE last_name = \u0026#39;Doe\u0026#39;; Este comando selecciona todos los clientes de la tabla Customers con el apellido \u0026lsquo;Doe\u0026rsquo;².\nOperadores SQL # La cláusula WHERE utiliza operadores para construir condiciones. Algunos de los operadores más utilizados son²:\nOperador igual a (=) Mayor que (\u0026gt;) Operador AND (AND) Por ejemplo, para seleccionar todos los clientes de la tabla Customers con un nombre de \u0026lsquo;John\u0026rsquo;, usaríamos el siguiente comando²:\nSELECT * FROM Customers WHERE first_name = \u0026#39;John\u0026#39;; Conclusión # El comando SELECT en SQL es una herramienta poderosa que nos permite interactuar con las bases de datos de manera efectiva. Nos permite seleccionar, filtrar y ordenar los datos de una manera que sería difícil o imposible sin él. A medida que continuamos construyendo y utilizando aplicaciones de base de datos, es esencial entender y utilizar eficazmente el comando SELECT en SQL.\nRecursos # Video # Más lectura # https://www.tutorialspoint.com/sql/sql-select-query.htm\n","date":"9 noviembre 2023","permalink":"/platform/sql/select/","section":"Sqls","summary":"Introducción # El comando SELECT en SQL es uno de los comandos más utilizados y esenciales en el lenguaje SQL¹.","title":"SELECT en SQL: Una Guía Completa"},{"content":"","date":"9 noviembre 2023","permalink":"/platform/sql/","section":"Sqls","summary":"","title":"Sqls"},{"content":"Introducción # Los parámetros de consulta, también conocidos como Query Params, son una parte integral de las URL que usamos en nuestra vida diaria. Son parámetros que se adjuntan al final de una URL y se separan de la URL por un signo de interrogación (?)¹.\n¿Qué son los Parámetros de Consulta? # Los parámetros de consulta son parámetros que se adjuntan al final de una URL y se separan de la URL por un signo de interrogación (?). La sección antes del signo de interrogación es el parámetro de ruta, y la sección después del signo de interrogación es la consulta. El parámetro de ruta define la ubicación del recurso, mientras que el parámetro de consulta define operaciones de clasificación, paginación o filtrado¹.\nEjemplo de Parámetro de Consulta # Por ejemplo, en https://www.google.com/search?q=abstract%20api, tenemos una búsqueda estándar de Google, con la entrada del usuario abstract%20api que se pasa como una variable a través del parámetro de consulta q=¹. Podemos pasar múltiples variables con el símbolo \u0026amp; separando los parámetros, formando una cadena de consulta¹.\n¿Qué puedo hacer con los Parámetros de Consulta? # Los parámetros de consulta se pueden utilizar en nuestras solicitudes de API REST a los puntos finales¹. Por ejemplo, si queremos llamar a una API de clima para nuestro informe de surf diario¹:\ncurl GET /surfreport/beachId?days=3\u0026amp;units=metric\u0026amp;time=1400 En esta solicitud GET, /surfreport/beachID es el punto final, y beachID es el parámetro de ruta. Los parámetros de ruta son parte del punto final y son requeridos¹. ? es donde comienza nuestra cadena de consulta. days=3 es un parámetro de consulta (days) que está tomando el argumento 3 para ordenar el informe de surf obtenido de la API en resultados de los próximos tres días¹. units=metric es un parámetro de consulta que muestra nuestros resultados en unidades métricas¹. time=1400 es un parámetro de consulta que muestra los resultados a las 14:00¹. \u0026amp; está uniendo nuestros parámetros de consulta individuales en una cadena de consulta¹.\nConclusión # Los parámetros de consulta son una herramienta poderosa que nos permite interactuar con las API y los recursos web de manera más efectiva. Nos permiten filtrar, ordenar y paginar los recursos de una manera que sería difícil o imposible sin ellos. A medida que continuamos construyendo y utilizando aplicaciones web, es esencial entender y utilizar eficazmente los parámetros de consulta.\nRecursos # Ejemplo en imagen # Más lectura # https://www.abstractapi.com/api-glossary/query-parameters\n","date":"9 noviembre 2023","permalink":"/platform/backend/http/query_params/","section":"Backends","summary":"Introducción # Los parámetros de consulta, también conocidos como Query Params, son una parte integral de las URL que usamos en nuestra vida diaria.","title":"Parámetros de Consulta (Query Params): Una Guía Completa"},{"content":"Título: Exploración Integral de la Arquitectura Cliente-Servidor: Fundamentos, Evolución y Desafíos Actuales\nLa arquitectura cliente-servidor es un modelo de diseño de software que se utiliza en la web para permitir la comunicación entre los clientes (navegadores web) y los servidores. En este modelo, el cliente envía una solicitud al servidor, que procesa la solicitud y envía una respuesta al cliente. La arquitectura cliente-servidor se utiliza en la mayoría de las aplicaciones web modernas, incluyendo aplicaciones de comercio electrónico, redes sociales y servicios de correo electrónico.\n1. Introducción: La arquitectura cliente-servidor establece la base para la comunicación eficiente entre sistemas distribuidos. Este segmento proporciona una visión general del concepto, destacando su importancia en el desarrollo de aplicaciones y servicios modernos.\n2. Fundamentos Teóricos: Se explora la base teórica de la arquitectura cliente-servidor, incluyendo los principios de cliente, servidor y la comunicación entre ellos. Se profundiza en los modelos de interacción y la distribución de tareas para lograr un rendimiento óptimo.\n3. Evolución Histórica: Desde sus inicios hasta la actualidad, la arquitectura cliente-servidor ha experimentado transformaciones significativas. Este apartado examina la evolución temporal, destacando hitos tecnológicos, cambios de paradigma y la influencia de las tendencias emergentes.\n4. Componentes Esenciales: Se detallan los elementos cruciales de la arquitectura cliente-servidor, incluyendo el cliente, servidor, protocolos de comunicación y middleware. Se analiza cómo estos componentes interactúan para facilitar la transmisión eficiente de datos y solicitudes.\n5. Modelos de Implementación: Dentro de este apartado, se describen los modelos de implementación más comunes, como el modelo de dos capas, tres capas y n capas. Se destacan las ventajas y desventajas de cada modelo en diferentes contextos de desarrollo.\n6. Tecnologías Emergentes: La arquitectura cliente-servidor se adapta constantemente a las nuevas tecnologías. En este apartado, se discuten las tendencias actuales, como la computación en la nube, la virtualización y la computación sin servidor, y su impacto en la evolución de la arquitectura.\n7. Desafíos Actuales y Futuros: Los sistemas cliente-servidor enfrentan desafíos contemporáneos, como la seguridad, la escalabilidad y la gestión eficiente de recursos. Se examinan estos desafíos y se proponen posibles soluciones, anticipando las tendencias futuras.\n8. Estudios de Caso: Para ilustrar la aplicación práctica de la arquitectura cliente-servidor, se presentan estudios de caso de proyectos emblemáticos. Estos ejemplos proporcionan una comprensión concreta de cómo esta arquitectura se implementa en entornos del mundo real.\n9. Conclusiones: El artículo concluye recapitulando los puntos clave y destacando la importancia continua de la arquitectura cliente-servidor en el panorama tecnológico. Se invita a la reflexión sobre posibles direcciones futuras y áreas de investigación.\nPalabras clave: Arquitectura cliente-servidor, sistemas distribuidos, evolución histórica, modelos de implementación, desafíos actuales, tecnologías emergentes.\nRecursos # Video # Más lectura # https://developer.mozilla.org/es/docs/Learn/Server-side/First_steps/Client-Server_overview\nhttps://www.yarquitectura.com/arquitectura-cliente-servidor-concepto/\n","date":"9 noviembre 2023","permalink":"/platform/backend/cliente_servidor/","section":"Backends","summary":"Título: Exploración Integral de la Arquitectura Cliente-Servidor: Fundamentos, Evolución y Desafíos Actuales","title":"Arquitectura Cliente-Servidor"},{"content":"Para el día de hoy, vamos a crear una aplicación que manipule el DOM y agregue párrafos. Aprenderás a usar diversos conceptos de JavaScript. Ten en cuenta que, aunque esta practica no es calificada, te servirá bastante para que ganes experiencia en el lenguaje de programación y puedas aplicar lo aprendido en futuros proyectos.\nLink a la página a diseñar # https://vannilla-js-basic-project-13-lorem-ipsum.netlify.app/\nVideo de cómo se hace (Opcional) # El video está en inglés pero puedes activar los subtítulos. O en su defecto, puedes guiarte únicamente del diseño de la página.\n","date":"20 octubre 2023","permalink":"/platform/jsvanilla/app-lorem/","section":"Jsvanillas","summary":"Para el día de hoy, vamos a crear una aplicación que manipule el DOM y agregue párrafos.","title":"App Lorem Ipsum"},{"content":"Para esta práctica calificada debes replicar el siguiente diseño utilizando Material UI o Prime React. Aprenderás a implementar estos componentes en tu proyecto.\nhttps://www.frontendmentor.io/challenges/ecommerce-product-page-UPsZ9MJp6\nNo importa si los componentes lucen ligeramente diferentes a los que salen en esta página. Solo enfócate en usar todos los que puedas para crear una interfaz similar a la que se muestra en el link.\nNota: Este ejercicio será evaluado y deberás presentarlo al finalizar el tiempo de la práctica calificada de mañana.\nConsideraciones\nSi el ejercicio está igual que en el diseño y es responsive (sí, el diseño responsive es necesario), tendrás el 100% de la nota.. Debes subir un archivo PDF con las imágenes de tu código y de tu página renderizada para su revisión. ","date":"9 octubre 2023","permalink":"/platform/react/practicas/librerias_componentes/","section":"Reacts","summary":"Para esta práctica calificada debes replicar el siguiente diseño utilizando Material UI o Prime React.","title":"Práctica - Liberías de componentes"},{"content":"PrimeReact es una biblioteca de componentes de interfaz de usuario (UI) de código abierto diseñada para el popular framework de desarrollo frontend React. Esta biblioteca ha ganado una gran popularidad en la comunidad de desarrolladores gracias a su conjunto completo de componentes altamente personalizables y fáciles de usar. En este artículo universitario, exploraremos en profundidad PrimeReact, sus características, ventajas, casos de uso y cómo puede impulsar el desarrollo frontend en proyectos web y aplicaciones.\nFundamentos de React # Para comprender completamente PrimeReact, es crucial tener un conocimiento básico de React. React es una biblioteca de JavaScript desarrollada por Facebook que se utiliza para crear interfaces de usuario (UI) interactivas y reactivas. Se basa en la idea de dividir la interfaz de usuario en componentes reutilizables, lo que facilita la construcción y el mantenimiento de aplicaciones web complejas.\n¿Qué es PrimeReact? # PrimeReact es una extensión de PrimeFaces, una biblioteca de componentes para JavaServer Faces (JSF), que se ha adaptado para su uso con React. PrimeReact ofrece una amplia variedad de componentes de UI, desde elementos básicos como botones y formularios hasta componentes avanzados como gráficos y calendarios. Estos componentes son altamente personalizables y están diseñados para adaptarse a una amplia variedad de estilos de diseño y necesidades de desarrollo.\nCaracterísticas Clave de PrimeReact # 1. Componentes Rica Variedad # PrimeReact ofrece más de 70 componentes diferentes, incluyendo elementos de interfaz de usuario esenciales como botones, tablas, formularios, cuadros de diálogo y menús desplegables. Además, incluye componentes avanzados como gráficos, mapas de Google y calendarios.\n2. Estilo Personalizable # Cada componente en PrimeReact es altamente personalizable a través de CSS y clases de estilo. Esto permite a los desarrolladores adaptar fácilmente la apariencia de los componentes para que coincidan con la identidad visual de su proyecto.\n3. Compatibilidad con Temas # PrimeReact es compatible con temas y estilos predefinidos que facilitan la creación de aplicaciones con una apariencia profesional sin necesidad de escribir CSS personalizado desde cero.\n4. Integración con React # PrimeReact se integra perfectamente con React y sigue las mejores prácticas de desarrollo de React, lo que facilita su uso en aplicaciones React existentes o en nuevos proyectos.\n5. Documentación Extensa # PrimeReact ofrece una documentación completa y ejemplos detallados que facilitan el aprendizaje y la implementación de sus componentes en proyectos de desarrollo frontend.\nVentajas de PrimeReact # 1. Ahorro de Tiempo # PrimeReact acelera el desarrollo al proporcionar componentes listos para usar que abordan las necesidades comunes de la interfaz de usuario. Esto reduce significativamente el tiempo de desarrollo y permite que los equipos se centren en la lógica de la aplicación en lugar de la creación de componentes personalizados.\n2. Reutilización de Código # Los componentes de PrimeReact son altamente reutilizables, lo que significa que pueden utilizarse en toda la aplicación, lo que reduce la duplicación de código y mejora la consistencia de la interfaz de usuario.\n3. Diseño Profesional # PrimeReact proporciona una amplia variedad de componentes y estilos predefinidos que ayudan a los desarrolladores a crear interfaces de usuario profesionales y modernas sin necesidad de ser diseñadores de UI expertos.\n4. Compatibilidad con Múltiples Plataformas # PrimeReact es una biblioteca versátil que es compatible con múltiples navegadores y dispositivos, lo que garantiza que las aplicaciones sean accesibles para una audiencia más amplia.\nCasos de Uso de PrimeReact # PrimeReact se utiliza en una variedad de aplicaciones y proyectos, incluyendo:\nAplicaciones Empresariales: PrimeReact es ideal para desarrollar aplicaciones empresariales que requieren una interfaz de usuario sofisticada y funcionalidad avanzada.\nAplicaciones de Gestión de Datos: Sus componentes de tabla avanzados hacen que PrimeReact sea una elección sólida para aplicaciones que manejan grandes conjuntos de datos.\nAplicaciones Web de Consumo: Puede utilizarse en aplicaciones de consumo, como tiendas en línea, blogs y foros, para crear interfaces de usuario atractivas y fáciles de usar.\nPaneles de Administración y Tableros de Control: PrimeReact es adecuado para desarrollar paneles de administración y tableros de control que requieren una amplia variedad de componentes para visualizar y administrar datos.\nPrimeReact es una biblioteca de componentes de interfaz de usuario sólida y versátil que puede acelerar significativamente el desarrollo frontend en proyectos web y aplicaciones React. Ofrece una amplia variedad de componentes personalizables, estilos predefinidos y una documentación completa que facilita su uso y aprendizaje. Ya sea que esté desarrollando aplicaciones empresariales, sitios web de consumo o paneles de administración, PrimeReact puede ser una valiosa adición a su conjunto de herramientas de desarrollo frontend, permitiéndole crear interfaces de usuario profesionales y funcionales de manera eficiente. Con su enfoque en la reutilización de código y la personalización, PrimeReact es una elección sólida para cualquier desarrollador React que busque mejorar la productividad y la calidad de las interfaces de usuario en sus proyectos.\nRecursos # ","date":"9 octubre 2023","permalink":"/platform/react/librerias_componentes/prime_react/","section":"Reacts","summary":"PrimeReact es una biblioteca de componentes de interfaz de usuario (UI) de código abierto diseñada para el popular framework de desarrollo frontend React.","title":"PrimeReact: Ampliando las Posibilidades en el Desarrollo Frontend con Componentes"},{"content":"Material-UI es una popular biblioteca de componentes de interfaz de usuario (UI) para React, basada en el diseño de Material Design desarrollado por Google. Esta biblioteca ha transformado la forma en que los desarrolladores construyen aplicaciones web modernas al proporcionar una gama completa de componentes de diseño de alta calidad, fáciles de usar y altamente personalizables. En este artículo universitario, exploraremos Material-UI en profundidad, analizando su historia, características, ventajas y cómo se ha convertido en una herramienta esencial para el desarrollo frontend en la comunidad de React.\nFundamentos de React # Para comprender completamente la importancia de Material-UI en el desarrollo frontend, es esencial tener una comprensión sólida de React. React es una biblioteca de JavaScript desarrollada por Facebook que se utiliza para crear interfaces de usuario (UI) interactivas y reactivas. React se basa en la creación de componentes reutilizables, que encapsulan la lógica y la presentación de una parte específica de una aplicación web.\n¿Qué es Material-UI? # Material-UI es una biblioteca de componentes de UI para React que sigue las pautas de diseño de Material Design, un conjunto de principios y directrices de diseño desarrollados por Google. Material Design se centra en la usabilidad, la coherencia y la belleza en el diseño de interfaces de usuario. Material-UI adopta estos principios y los lleva al mundo de React, ofreciendo un conjunto de componentes que siguen el diseño Material y permiten a los desarrolladores crear aplicaciones web modernas y atractivas.\nCaracterísticas Clave de Material-UI # Material-UI se destaca por varias características clave que lo han convertido en una opción preferida para el desarrollo frontend:\n1. Componentes Rica Variedad # Material-UI ofrece una amplia variedad de componentes que abarcan desde elementos de interfaz de usuario esenciales, como botones, formularios y barras de navegación, hasta componentes avanzados como gráficos, mapas de Google y tablas de datos. Esta diversidad permite a los desarrolladores crear aplicaciones completas sin necesidad de codificar componentes personalizados desde cero.\n2. Estilo Personalizable # Cada componente de Material-UI es altamente personalizable. Los desarrolladores pueden aplicar estilos personalizados utilizando CSS o las capacidades de temas incorporadas en Material-UI. Esto permite que las aplicaciones tengan una apariencia única y coincidan con la identidad visual de la marca.\n3. Compatibilidad con Temas # Material-UI facilita la gestión de temas y estilos predefinidos, lo que permite a los desarrolladores crear aplicaciones con una apariencia coherente y profesional sin tener que preocuparse por la gestión manual de estilos.\n4. Integración con React # Material-UI se integra perfectamente con React y sigue las mejores prácticas de desarrollo de React. Esto significa que los desarrolladores pueden utilizar Material-UI en proyectos React existentes o en nuevos proyectos de React sin problemas.\n5. Comunidad Activa # Material-UI cuenta con una comunidad activa de desarrolladores que contribuyen constantemente con mejoras, correcciones de errores y nuevos componentes. Esto garantiza que la biblioteca esté actualizada y siga siendo relevante en un entorno de desarrollo web en constante evolución.\n6. Documentación Completa # Material-UI ofrece una documentación completa y ejemplos detallados que facilitan el aprendizaje y la implementación de sus componentes en proyectos de desarrollo frontend.\nVentajas de Material-UI # Material-UI ofrece varias ventajas que lo convierten en una elección sólida para el desarrollo frontend:\n1. Ahorro de Tiempo # Material-UI acelera el proceso de desarrollo al proporcionar componentes de alta calidad listos para usar que cumplen con los estándares de diseño Material. Esto reduce significativamente el tiempo necesario para crear interfaces de usuario complejas y funcionales.\n2. Reutilización de Código # Los componentes de Material-UI son altamente reutilizables y pueden utilizarse en toda la aplicación, lo que reduce la duplicación de código y mejora la consistencia de la interfaz de usuario.\n3. Diseño Profesional # Material-UI permite a los desarrolladores crear aplicaciones web con un diseño moderno y atractivo, siguiendo las mejores prácticas de diseño de Material Design.\n4. Mantenimiento Sencillo # Gracias a la documentación exhaustiva y la comunidad activa, el mantenimiento de aplicaciones construidas con Material-UI es más sencillo y menos propenso a errores.\nCasos de Uso de Material-UI # Material-UI se utiliza en una amplia variedad de proyectos y aplicaciones, incluyendo:\nAplicaciones Empresariales: Material-UI es ideal para desarrollar aplicaciones empresariales que requieren una interfaz de usuario profesional y funcional.\nAplicaciones de Consumo: Puede utilizarse en aplicaciones de consumo, como redes sociales, blogs y foros, para crear interfaces de usuario atractivas y fáciles de usar.\nAplicaciones Móviles: Material-UI es una elección sólida para crear aplicaciones web progresivas (PWAs) que funcionan bien en dispositivos móviles.\nSitios Web Corporativos: Es adecuado para crear sitios web corporativos y de marketing con un diseño moderno y atractivo.\nRecursos # Completa el siguiente curso en Youtube (lista de videos) acerca de Material UI.\nhttps://www.youtube.com/playlist?list=PLPl81lqbj-4J2xx_YAb97dpCG1rxl2wv-\n","date":"9 octubre 2023","permalink":"/platform/react/librerias_componentes/material_ui/segunda_parte/","section":"Reacts","summary":"Material-UI es una popular biblioteca de componentes de interfaz de usuario (UI) para React, basada en el diseño de Material Design desarrollado por Google.","title":"Material-UI: Elevando el Diseño de Interfaces con React"},{"content":"React, una de las bibliotecas JavaScript más populares para el desarrollo frontend, ha revolucionado la forma en que los desarrolladores crean aplicaciones web interactivas y dinámicas. Una de las razones fundamentales de su éxito es su capacidad para crear componentes reutilizables que simplifican el desarrollo y mejoran la mantenibilidad del código. En este artículo universitario, exploraremos en profundidad las bibliotecas de componentes en React, su importancia, cómo funcionan y algunas de las bibliotecas más destacadas en el ecosistema React.\nFundamentos de React # Antes de profundizar en las bibliotecas de componentes en React, es esencial comprender los conceptos fundamentales de React. React es una biblioteca de JavaScript que se utiliza para construir interfaces de usuario (UI) reactivas y componentes reutilizables. Los componentes en React son bloques de construcción fundamentales que encapsulan la lógica y la interfaz de usuario de una parte específica de una aplicación web.\nEl Rol de las Bibliotecas de Componentes # Las bibliotecas de componentes en React tienen un rol crucial en el desarrollo frontend moderno. Simplifican el proceso de construcción de interfaces de usuario al proporcionar componentes predefinidos que abordan las necesidades comunes de diseño y funcionalidad. Estas bibliotecas permiten a los desarrolladores:\nReutilización de código: Los componentes pueden ser compartidos y reutilizados en toda la aplicación, lo que reduce la duplicación de código y mejora la coherencia.\nDesarrollo rápido: Las bibliotecas de componentes ofrecen soluciones listas para usar, lo que acelera el proceso de desarrollo y reduce el tiempo de comercialización.\nMantenibilidad: Los componentes de la biblioteca se prueban y actualizan regularmente, lo que facilita la mantenibilidad a largo plazo.\nCómo Funcionan las Bibliotecas de Componentes en React # Las bibliotecas de componentes en React generalmente proporcionan un conjunto de componentes que se pueden importar y utilizar en una aplicación React. Estos componentes se construyen de manera modular y están diseñados para ser personalizables. A menudo, las bibliotecas también ofrecen una amplia documentación y ejemplos de uso.\nPara usar una biblioteca de componentes en React, los desarrolladores deben seguir estos pasos:\nInstalación: Normalmente, se instala la biblioteca de componentes utilizando un administrador de paquetes como npm o yarn.\nImportación: Se importan los componentes necesarios desde la biblioteca en los archivos de código de la aplicación.\nUtilización: Los componentes importados se utilizan como cualquier otro componente React dentro de la aplicación.\nBibliotecas Destacadas en el Ecosistema React # El ecosistema React está repleto de bibliotecas de componentes de alta calidad. A continuación, se mencionan algunas de las más destacadas:\n1. Material-UI # Material-UI es una biblioteca de componentes basada en el diseño de Material Design de Google. Ofrece una amplia variedad de componentes que siguen las pautas de diseño de Material, lo que facilita la creación de interfaces de usuario modernas y atractivas.\n2. Ant Design # Ant Design es una biblioteca de componentes con un enfoque en la construcción de aplicaciones empresariales. Proporciona componentes que son altamente personalizables y adecuados para aplicaciones complejas.\n3. Bootstrap # Bootstrap, aunque no es específicamente una biblioteca de React, ofrece una versión de React llamada \u0026ldquo;react-bootstrap\u0026rdquo;. Proporciona una amplia gama de componentes y estilos listos para usar que son ampliamente reconocidos en la comunidad web.\n4. Chakra UI # Chakra UI es una biblioteca de componentes diseñada para la construcción rápida de aplicaciones con un énfasis en la accesibilidad y la personalización. Es conocida por su diseño altamente adaptable y su facilidad de uso.\n5. Semantic UI React # Semantic UI React es una versión de React de la biblioteca Semantic UI. Ofrece una amplia variedad de componentes semánticos que facilitan la creación de interfaces de usuario claras y comprensibles.\nConsideraciones Finales # Las bibliotecas de componentes en React son una parte esencial del arsenal de cualquier desarrollador frontend. Facilitan el desarrollo, mejoran la reutilización del código y permiten crear aplicaciones web modernas y atractivas. Al elegir una biblioteca de componentes, es importante considerar las necesidades específicas de su proyecto y cómo se integra con el flujo de trabajo de desarrollo. Con el uso adecuado de estas bibliotecas, los desarrolladores pueden acelerar el proceso de desarrollo y ofrecer experiencias de usuario excepcionales en sus aplicaciones web basadas en React.\nRecursos # ","date":"9 octubre 2023","permalink":"/platform/react/librerias_componentes/material_ui/primera_parte/","section":"Reacts","summary":"React, una de las bibliotecas JavaScript más populares para el desarrollo frontend, ha revolucionado la forma en que los desarrolladores crean aplicaciones web interactivas y dinámicas.","title":"Bibliotecas de Componentes en React: Potenciando el Desarrollo Frontend"},{"content":"","date":"9 octubre 2023","permalink":"/platform/css/","section":"Csses","summary":"","title":"Csses"},{"content":"El diseño web es un campo en constante evolución, y los desarrolladores front-end se esfuerzan por crear diseños que sean flexibles y adaptables a diferentes dispositivos y tamaños de pantalla. Para lograr esto, es fundamental comprender y utilizar correctamente las unidades de medida en CSS. En este artículo universitario, exploraremos en profundidad las unidades EM y REM en CSS, su significado, diferencias y las mejores prácticas para su uso en el diseño web.\nFundamentos de CSS # Antes de profundizar en las unidades EM y REM, es importante recordar los conceptos básicos de CSS. CSS (Cascading Style Sheets) se utiliza para controlar la presentación y el diseño de un documento HTML. Una parte crucial del diseño web es especificar las dimensiones y el espaciado de los elementos, y es aquí donde entran en juego las unidades de medida.\nUnidades de Medida en CSS # CSS ofrece varias unidades de medida para dimensionar elementos en una página web. Algunas de las unidades más comunes incluyen píxeles (px), porcentaje (%), puntos (pt), picas (pc), y las unidades EM y REM. Nos centraremos en estas últimas dos debido a su importancia en el diseño web moderno.\nUnidades EM # La unidad EM es relativa al tamaño de fuente del elemento padre. Cuando se especifica un valor en EM, se toma como referencia el tamaño de fuente del elemento contenedor más cercano. Por ejemplo, si el tamaño de fuente de un párrafo es de 16px y se establece un margen de 1em, el margen será igual a 16px. Si un elemento secundario dentro de ese párrafo tiene un tamaño de fuente de 1.5em, su tamaño de fuente será de 24px (1.5 * 16px).\nVentajas de EM: # Escalabilidad: Los valores en EM son relativos y se escalan automáticamente cuando se cambia el tamaño de fuente del elemento padre. Esto facilita la creación de diseños flexibles y adaptables.\nAccesibilidad: EM permite a los usuarios ajustar el tamaño de fuente en su navegador según sus preferencias de lectura, lo que mejora la accesibilidad.\nUnidades REM # La unidad REM, que significa \u0026ldquo;Root EM\u0026rdquo; (EM raíz), es similar a EM, pero toma como referencia el tamaño de fuente del elemento raíz del documento HTML en lugar del elemento padre. Por defecto, el tamaño de fuente raíz es de 16px en la mayoría de los navegadores. Si se establece un margen de 1rem en un elemento, será igual a 16px. Si se cambia el tamaño de fuente raíz a 20px, todos los elementos con unidades REM se ajustarán en consecuencia.\nVentajas de REM: # Consistencia: REM ofrece una forma más predecible de gestionar tamaños en relación con el tamaño de fuente raíz, lo que facilita la creación de diseños coherentes.\nFacilita el Cambio Global: Cambiar el tamaño de fuente raíz afecta a todos los elementos que utilizan REM en la página, lo que facilita la adaptación global del diseño.\nMejores Prácticas y Uso Responsable # El uso de unidades EM y REM es una parte crucial del diseño web, pero su uso inadecuado puede llevar a diseños inconsistentes y difíciles de mantener. Aquí hay algunas mejores prácticas:\nElija Sabiamente: Considere cuidadosamente si debe utilizar EM o REM. REM es una elección sólida para dimensiones globales como márgenes y rellenos, mientras que EM puede ser útil para tamaños de fuente en elementos específicos.\nEvite Anidamiento Excesivo: Evite anidar unidades EM en exceso, ya que puede llevar a cálculos complicados y errores.\nUse Variables CSS: Utilice variables CSS para definir tamaños de fuente y valores de unidades para facilitar la gestión y la consistencia en todo el sitio.\nPruebas en Diferentes Dispositivos: Siempre pruebe su diseño en diferentes dispositivos y tamaños de pantalla para asegurarse de que las unidades de medida se escalen correctamente.\nLas unidades EM y REM en CSS son herramientas esenciales para crear diseños web flexibles y adaptables. Comprender la diferencia entre ellas y saber cuándo utilizar cada una es fundamental para un diseño web eficiente. El uso adecuado de estas unidades de medida contribuye a la coherencia, la accesibilidad y la facilidad de mantenimiento en proyectos web modernos. Como desarrollador front-end, dominar estas unidades es esencial para crear sitios web atractivos y funcionales en un entorno digital en constante cambio.\nRecursos # ","date":"9 octubre 2023","permalink":"/platform/css/unidades_em_rem/","section":"Csses","summary":"El diseño web es un campo en constante evolución, y los desarrolladores front-end se esfuerzan por crear diseños que sean flexibles y adaptables a diferentes dispositivos y tamaños de pantalla.","title":"Unidades EM y REM en CSS: Un Enfoque Profundo"},{"content":"Realiza el siguiente ejercicio práctico.\nRecursos # ","date":"9 octubre 2023","permalink":"/platform/css/responsive_design_ejercicio/","section":"Csses","summary":"Realiza el siguiente ejercicio práctico.","title":"Diseño Responsive: Ejercicio práctico"},{"content":"En el mundo del desarrollo de software colaborativo, GitHub ha surgido como una plataforma esencial para el trabajo en equipo, la gestión de versiones y el control de calidad del código. Una de las características clave que facilita la colaboración y la revisión de código es el Pull Request (PR). En este artículo universitario, exploraremos qué son los Pull Requests, qué hacen, por qué utilizarlos, cuándo utilizarlos, cómo utilizarlos y proporcionaremos un ejemplo guiado para crear uno desde cero utilizando comandos de Git.\n¿Qué son los Pull Requests? # Un Pull Request, también conocido como PR, es una solicitud que un colaborador de un repositorio hace a los mantenedores del mismo con el propósito de fusionar cambios en el código. En otras palabras, es una propuesta de cambios que se pueden revisar, discutir y, finalmente, incorporar al código base.\n¿Qué hacen los Pull Requests? # Los Pull Requests desempeñan varios roles esenciales en el desarrollo de software colaborativo:\nFacilitan la revisión de código: Los PR proporcionan un entorno donde otros colaboradores pueden revisar y comentar los cambios propuestos. Esto mejora la calidad del código, identifica errores y garantiza que el código cumpla con los estándares del proyecto.\nDocumentación y seguimiento: Cada PR incluye una descripción detallada de los cambios realizados, lo que facilita el seguimiento y la documentación de las actualizaciones del proyecto.\nIntegración continua: Los PR suelen estar vinculados a servicios de integración continua, lo que significa que se ejecutan pruebas automáticas en los cambios propuestos para garantizar que no rompan la funcionalidad existente.\nControl de acceso: Los mantenedores del repositorio tienen el control final sobre la aceptación o rechazo de un PR, lo que garantiza que solo se fusionen cambios confiables y bien revisados.\n¿Por qué utilizar Pull Requests? # Utilizar Pull Requests aporta una serie de beneficios significativos en el desarrollo de software colaborativo:\nRevisión de código efectiva: Facilita la revisión y colaboración entre equipos de desarrollo, lo que resulta en código de mayor calidad.\nControl de calidad: Permite realizar pruebas automáticas y manuales antes de incorporar cambios al código base, lo que reduce la posibilidad de errores.\nTransparencia: Cada PR incluye una conversación documentada sobre los cambios, lo que proporciona un registro de decisiones y discusiones importantes.\nSeguimiento del progreso: Los PR permiten realizar un seguimiento detallado del estado de los cambios propuestos y su implementación.\n¿Cuándo utilizar Pull Requests? # Los Pull Requests son ideales en las siguientes situaciones:\nCuando se trabaja en un proyecto de código abierto o en equipo, donde varios colaboradores pueden contribuir al repositorio.\nAntes de incorporar cambios significativos en el código base, para que sean revisados y probados por otros miembros del equipo.\nCuando se desea mantener un registro claro de las contribuciones y discusiones en torno a los cambios realizados en el proyecto.\nCómo utilizar Pull Requests: Un ejemplo guiado # A continuación, se proporciona un ejemplo paso a paso para crear un Pull Request desde cero utilizando comandos de Git:\nInicializar un repositorio: Si aún no tienes un repositorio, crea uno utilizando el comando git init.\nRealizar cambios: Agrega, modifica o elimina archivos en tu repositorio local.\nAgregar cambios al área de preparación: Utiliza git add . para agregar los cambios realizados al área de preparación.\nRealizar un commit: Usa git commit -m \u0026quot;Mensaje del commit\u0026quot; para crear un commit con una descripción clara de los cambios.\nConectar a un repositorio remoto: Conecta tu repositorio local a un repositorio remoto en GitHub con git remote add origin \u0026lt;URL_del_repositorio\u0026gt;.\nEmpujar cambios: Ejecuta git push origin \u0026lt;nombre_de_la_rama\u0026gt; para subir tus cambios al repositorio remoto en GitHub.\nCrear una nueva rama: Si trabajas en una nueva característica, crea una nueva rama con git branch \u0026lt;nombre_de_la_nueva_rama\u0026gt; y cambia a ella usando git switch \u0026lt;nombre_de_la_nueva_rama\u0026gt;.\nRealizar cambios: Agrega, modifica o elimina archivos en tu nueva rama.\nAgregar cambios al área de preparación: Utiliza git add . para agregar los cambios realizados al área de preparación.\nRealizar un commit: Usa git commit -m \u0026quot;Mensaje del commit\u0026quot; para crear un commit con una descripción clara de los cambios.\nEmpujar cambios: Ejecuta git push origin \u0026lt;nombre_de_la_rama\u0026gt; para subir tus cambios al repositorio remoto en GitHub.\nCrear el Pull Request: Ve a la página de GitHub del repositorio y haz clic en la pestaña \u0026ldquo;Pull Requests\u0026rdquo;. Luego, haz clic en \u0026ldquo;New Pull Request\u0026rdquo;. Selecciona la rama que contiene tus cambios y la rama de destino. Completa la descripción del PR y crea la solicitud.\nRevisión y discusión: Los colaboradores pueden revisar tus cambios, hacer comentarios y discutir cualquier aspecto del PR.\nAceptar el Pull Request: Una vez que los revisores estén satisfechos con los cambios, el mantenedor del repositorio puede fusionar el PR en la rama principal.\nConclusión # Los Pull Requests en GitHub son una herramienta esencial para la colaboración y el control de calidad en el desarrollo de software colaborativo. Facilitan la revisión de código, la documentación, el seguimiento del progreso y el control de calidad. Utilizar Pull Requests en tu proyecto te ayudará a mantener un código de alta calidad y a fomentar una cultura de colaboración efectiva en tu equipo de desarrollo.\nRecursos # ","date":"6 octubre 2023","permalink":"/platform/github/pull_request/","section":"Githubs","summary":"En el mundo del desarrollo de software colaborativo, GitHub ha surgido como una plataforma esencial para el trabajo en equipo, la gestión de versiones y el control de calidad del código.","title":"Los Pull Requests en GitHub: Colaboración y Control de Calidad en Desarrollo de Software"},{"content":"En el mundo de React, la gestión del estado es fundamental. Sin embargo, a medida que las aplicaciones crecen en complejidad, la propensión a tener un código desordenado aumenta. Aquí es donde useContext entra en juego. Este artículo aborda en profundidad el concepto de useContext en React, explicando qué es, por qué se debe usar, cuándo aplicarlo y cómo aprovecharlo al máximo. Además, proporciona dos ejemplos prácticos que hacen uso de useContext para consumir datos de una API.\nIntroducción # React es una biblioteca de JavaScript que se ha destacado por su capacidad para construir interfaces de usuario interactivas y reactivas. A medida que las aplicaciones React crecen, se vuelve esencial una gestión eficiente del estado. useContext es una característica fundamental de React que ayuda a gestionar el estado de manera limpia y eficiente al proporcionar un contexto global accesible desde cualquier parte de la aplicación.\n¿Qué es useContext? # useContext es un hook de React que permite acceder al contexto de la aplicación desde cualquier componente, sin importar su profundidad en el árbol de componentes. El contexto es una forma de pasar datos a través del árbol de componentes sin tener que pasar propiedades manualmente a cada nivel.\n¿Por qué utilizar useContext? # Evita la \u0026ldquo;prop drilling\u0026rdquo; # En aplicaciones de React, es común pasar datos desde un componente principal a través de múltiples niveles de componentes secundarios. Esto se conoce como \u0026ldquo;prop drilling\u0026rdquo;, y puede volverse engorroso y propenso a errores a medida que la aplicación crece. useContext resuelve este problema al permitir el acceso directo a los datos necesarios sin pasarlos explícitamente a través de props.\nSimplifica la gestión del estado global # Para aplicaciones que requieren un estado global, como la autenticación del usuario o la configuración de la aplicación, useContext proporciona una forma sencilla de compartir y actualizar ese estado en cualquier parte de la aplicación. Esto mejora la mantenibilidad y la claridad del código.\nMejora la legibilidad del código # Al eliminar la necesidad de pasar datos de manera explícita a través de props, el código se vuelve más limpio y legible. Los componentes pueden centrarse en su función principal en lugar de preocuparse por la transferencia de datos.\n¿Cuándo utilizar useContext? # useContext es útil en varias situaciones:\nAplicaciones con un estado global # Cuando necesitas acceder o modificar datos en múltiples componentes a lo largo de la aplicación, como la autenticación, las preferencias del usuario o la gestión del carrito de compras.\nReducción del \u0026ldquo;prop drilling\u0026rdquo; # Cuando encuentras que la transferencia de datos a través de props se vuelve confusa o incómoda debido a la profundidad del árbol de componentes.\nClaridad y simplicidad # Cuando deseas mejorar la legibilidad y el mantenimiento del código al evitar la propagación innecesaria de datos.\nCómo utilizar useContext # Creación de un contexto # Primero, debes crear un contexto utilizando la función createContext. Este contexto contendrá los datos globales que deseas compartir.\nimport { createContext } from \u0026#34;react\u0026#34;; const MiContexto = createContext(); Proveer datos al contexto # A continuación, debes utilizar un componente proveedor para suministrar los datos al contexto. Esto se hace utilizando el componente \u0026lt;MiContexto.Provider\u0026gt; y pasándole un valor.\nimport { createContext, useState } from \u0026#34;react\u0026#34;; const MiContexto = createContext(); function MiContextoProvider(props) { const [miDato, setMiDato] = useState(\u0026#34;Valor inicial\u0026#34;); return ( \u0026lt;MiContexto.Provider value={{ miDato, setMiDato }}\u0026gt; {props.children} \u0026lt;/MiContexto.Provider\u0026gt; ); } Consumir datos del contexto # Por último, en cualquier componente que necesite acceder a los datos del contexto, puedes utilizar el hook useContext para hacerlo.\nimport React, { useContext } from \u0026#34;react\u0026#34;; import MiContexto from \u0026#34;./MiContexto\u0026#34;; function ComponenteConsumidor() { const { miDato, setMiDato } = useContext(MiContexto); return ( \u0026lt;div\u0026gt; \u0026lt;p\u0026gt;Mi dato global: {miDato}\u0026lt;/p\u0026gt; \u0026lt;button onClick={() =\u0026gt; setMiDato(\u0026#34;Nuevo valor\u0026#34;)}\u0026gt;Cambiar Dato\u0026lt;/button\u0026gt; \u0026lt;/div\u0026gt; ); } Ejemplo 1: Consumiendo datos de una API con useContext # Supongamos que deseamos crear un contexto que almacene los datos de una API. Aquí está el código:\nimport React, { createContext, useEffect, useState } from \u0026#34;react\u0026#34;; const ApiContext = createContext(); function ApiContextProvider(props) { const [data, setData] = useState([]); const apiUrl = \u0026#34;https://api.example.com/data\u0026#34;; useEffect(() =\u0026gt; { async function fetchData() { try { const response = await fetch(apiUrl); const jsonData = await response.json(); setData(jsonData); } catch (error) { console.error(\u0026#34;Error fetching data:\u0026#34;, error); } } fetchData(); }, []); return ( \u0026lt;ApiContext.Provider value={data}\u0026gt;{props.children}\u0026lt;/ApiContext.Provider\u0026gt; ); } export { ApiContext, ApiContextProvider }; Luego, en cualquier componente de la aplicación, podemos consumir los datos de la API utilizando useContext:\nimport React, { useContext } from \u0026#34;react\u0026#34;; import { ApiContext } from \u0026#34;./ApiContextProvider\u0026#34;; function DataDisplay() { const data = useContext(ApiContext); return ( \u0026lt;div\u0026gt; \u0026lt;h2\u0026gt;Data from API\u0026lt;/h2\u0026gt; \u0026lt;ul\u0026gt; {data.map((item) =\u0026gt; ( \u0026lt;li key={item.id}\u0026gt;{item.name}\u0026lt;/li\u0026gt; ))} \u0026lt;/ul\u0026gt; \u0026lt;/div\u0026gt; ); } export default DataDisplay; Ejemplo 2: Cambio de tema con useContext # Supongamos que deseamos permitir a los usuarios cambiar el tema de la aplicación. Aquí está el código:\nimport React, { createContext, useContext, useState } from \u0026#34;react\u0026#34;; const ThemeContext = createContext(); function ThemeContextProvider(props) { const [theme, setTheme] = useState(\u0026#34;light\u0026#34;); const toggleTheme = () =\u0026gt; { setTheme((prevTheme) =\u0026gt; (prevTheme === \u0026#34;light\u0026#34; ? \u0026#34;dark\u0026#34; : \u0026#34;light\u0026#34;)); }; return ( \u0026lt;ThemeContext.Provider value={{ theme, toggleTheme }}\u0026gt; {props.children} \u0026lt;/ThemeContext.Provider\u0026gt; ); } export { ThemeContext, ThemeContextProvider }; Luego, en cualquier componente de la aplicación, podemos consumir y cambiar\nRecursos # ","date":"5 octubre 2023","permalink":"/platform/react/usecontext/","section":"Reacts","summary":"En el mundo de React, la gestión del estado es fundamental.","title":"Utilizando useContext en React para una Gestión de Estado más Eficiente y Limpia"},{"content":"Los Custom Hooks en React han revolucionado la forma en que los desarrolladores estructuran sus aplicaciones y comparten lógica entre componentes. Este artículo explorará en detalle qué son los Custom Hooks, por qué y cuándo se deben utilizar, y cómo crear y aplicar dos ejemplos prácticos. Al dominar esta poderosa característica de React, los desarrolladores pueden mejorar la reutilización del código, la legibilidad y la mantenibilidad de sus aplicaciones.\nIntroducción # React es una biblioteca de JavaScript que se destaca por su capacidad para construir interfaces de usuario interactivas y reactivas. Uno de los conceptos clave en React es el componente, que encapsula la lógica y la interfaz de usuario de una parte de la aplicación. Sin embargo, a medida que las aplicaciones crecen en complejidad, es común encontrarse con lógica compartida entre componentes. Ahí es donde entran en juego los Custom Hooks.\n¿Qué es un Custom Hook? # Un Custom Hook en React es una función JavaScript que encapsula lógica compartida entre componentes. Los Custom Hooks se pueden utilizar para extraer la lógica de un componente y reutilizarla en otros componentes. Estas funciones personalizadas se nombran comúnmente con el prefijo \u0026ldquo;use\u0026rdquo; para indicar su relación con los Hooks de React.\n¿Por qué utilizar Custom Hooks? # Reutilización de código # Uno de los principales beneficios de los Custom Hooks es la reutilización de código. Cuando varias partes de la aplicación necesitan la misma funcionalidad, como la gestión del estado local, la llamada a una API o la suscripción a eventos, es más eficiente y limpio encapsular esa lógica en un Custom Hook y reutilizarlo en lugar de duplicar código en múltiples componentes.\nLegibilidad del código # Los Custom Hooks también mejoran la legibilidad del código. Al separar la lógica del componente, los componentes principales se vuelven más simples y fáciles de entender. Esto facilita la colaboración entre desarrolladores y el mantenimiento a largo plazo de la aplicación.\nComposición y separación de preocupaciones # Los Custom Hooks permiten separar las preocupaciones en una aplicación. Cada Hook puede centrarse en una tarea específica, lo que facilita la comprensión y el mantenimiento del código. Esto fomenta la composición de componentes más pequeños y especializados en lugar de componentes enormes y difíciles de gestionar.\n¿Cuándo utilizar Custom Hooks? # Los Custom Hooks son útiles en varias situaciones, incluyendo:\nLógica compartida # Cuando múltiples componentes necesitan realizar la misma tarea o contienen la misma lógica, como la validación de formularios o la gestión de sesiones de usuario.\nAbstracción de componentes # Cuando se desea abstraer la lógica de un componente para que pueda ser reutilizada con diferentes interfaces de usuario o en diferentes partes de la aplicación.\nSimplificación de componentes # Cuando un componente se vuelve demasiado grande y complejo, los Custom Hooks permiten dividirlo en funciones más pequeñas y manejables.\nCómo crear y utilizar Custom Hooks # Creación de un Custom Hook # Crear un Custom Hook es sencillo. Solo tienes que seguir estas pautas:\nCrea una función JavaScript que contenga la lógica que deseas reutilizar.\nUsa el prefijo \u0026ldquo;use\u0026rdquo; en el nombre del Hook para seguir la convención de nombres de React.\nPuedes utilizar otros Hooks de React dentro de tu Custom Hook si es necesario.\nExporta la función para que esté disponible para otros componentes.\nEjemplo 1: Custom Hook para el manejo del estado # Supongamos que deseamos crear un Custom Hook para gestionar el estado de un componente de formulario. Aquí hay un ejemplo:\nimport { useState } from \u0026#34;react\u0026#34;; function useForm(initialState) { const [values, setValues] = useState(initialState); function handleChange(event) { const { name, value } = event.target; setValues({ ...values, [name]: value, }); } return [values, handleChange]; } export default useForm; Ejemplo 2: Custom Hook para la gestión de efectos secundarios # Supongamos que queremos encapsular la lógica para cargar datos desde una API en un Custom Hook. Aquí tienes un ejemplo:\nimport { useState, useEffect } from \u0026#34;react\u0026#34;; function useFetchData(url) { const [data, setData] = useState(null); useEffect(() =\u0026gt; { async function fetchData() { try { const response = await fetch(url); const jsonData = await response.json(); setData(jsonData); } catch (error) { console.error(\u0026#34;Error fetching data:\u0026#34;, error); } } fetchData(); }, [url]); return data; } export default useFetchData; Utilización de los Custom Hooks # Para utilizar los Custom Hooks en tus componentes, simplemente importa la función del Hook y utilízala como cualquier otro Hook de React.\nimport React from \u0026#34;react\u0026#34;; import useForm from \u0026#34;./useForm\u0026#34;; function MyForm() { const [values, handleChange] = useForm({ name: \u0026#34;\u0026#34;, email: \u0026#34;\u0026#34; }); return ( \u0026lt;form\u0026gt; \u0026lt;input type=\u0026#34;text\u0026#34; name=\u0026#34;name\u0026#34; value={values.name} onChange={handleChange} /\u0026gt; \u0026lt;input type=\u0026#34;text\u0026#34; name=\u0026#34;email\u0026#34; value={values.email} onChange={handleChange} /\u0026gt; \u0026lt;/form\u0026gt; ); } export default MyForm; Los Custom Hooks son una característica poderosa de React que facilita la reutilización de código, mejora la legibilidad y promueve la separación de preocupaciones en una aplicación. Al comprender qué son, por qué utilizarlos y cómo crearlos, los desarrolladores pueden aprovechar al máximo esta herramienta para construir aplicaciones más mantenibles y escalables. Al aplicar los ejemplos proporcionados, podrás empezar a utilizar Custom Hooks de manera efectiva en tus proyectos de React.\nRecursos # ","date":"5 octubre 2023","permalink":"/platform/react/custom_hooks/","section":"Reacts","summary":"Los Custom Hooks en React han revolucionado la forma en que los desarrolladores estructuran sus aplicaciones y comparten lógica entre componentes.","title":"Custom Hooks en React: Potenciando la Reutilización y la Legibilidad del Código"},{"content":"En el mundo del desarrollo de software, la colaboración eficiente y la gestión de versiones son aspectos cruciales para el éxito de cualquier proyecto. En este contexto, GitHub se ha destacado como una herramienta fundamental que permite a los desarrolladores trabajar en equipo de manera efectiva, rastrear cambios en el código y mantener un control riguroso sobre las versiones de sus proyectos. En este artículo, exploraremos en detalle qué es GitHub, las ventajas de su uso, cómo se integra con Git a través de la terminal, sus competidores y proporcionaremos un ejemplo práctico de cómo subir un proyecto creado desde cero a GitHub mediante la línea de comandos.\n¿Qué es GitHub? # GitHub es una plataforma de desarrollo de software basada en la web que ofrece servicios de alojamiento de repositorios de control de versiones. Fundada en 2008 por Chris Wanstrath, PJ Hyett y Tom Preston-Werner, GitHub se ha convertido en la plataforma líder para la gestión colaborativa de proyectos de desarrollo de software. La plataforma utiliza el sistema de control de versiones Git, creado por Linus Torvalds en 2005, como su base, lo que permite a los desarrolladores trabajar en equipo, realizar seguimiento de cambios en el código y gestionar el flujo de trabajo de desarrollo de manera efectiva.\nVentajas de GitHub # El uso de GitHub ofrece una serie de ventajas significativas para los desarrolladores y equipos de desarrollo de software:\n1. Colaboración Efectiva: # GitHub facilita la colaboración entre desarrolladores al proporcionar herramientas para realizar contribuciones, revisar y comentar el código de otros, y coordinar esfuerzos en proyectos compartidos.\n2. Control de Versiones Robusto: # GitHub se basa en Git, un sistema de control de versiones altamente eficiente. Esto permite a los equipos mantener un registro completo y detallado de los cambios realizados en el código, lo que facilita la identificación de errores y la recuperación de versiones anteriores.\n3. Gestión de Problemas: # La plataforma GitHub incluye funciones de seguimiento de problemas (issues) que permiten a los equipos crear, asignar y dar seguimiento a problemas y tareas específicas en un proyecto. Esto mejora la organización y la comunicación en el equipo.\n4. Integración con Herramientas: # GitHub se integra fácilmente con una amplia variedad de herramientas de desarrollo, como sistemas de compilación automática, pruebas unitarias y servicios de implementación continua (CI/CD), lo que facilita la automatización de tareas y la mejora de la eficiencia del flujo de trabajo.\nUso de GitHub junto con Git en la Terminal # Para utilizar GitHub junto con Git a través de la terminal, sigue estos pasos esenciales:\n1. Clonar un Repositorio Remoto: # Para comenzar a trabajar en un proyecto de GitHub, primero debes clonar el repositorio remoto en tu máquina local utilizando el comando git clone seguido de la URL del repositorio.\ngit clone https://github.com/tu_usuario/tu_proyecto.git 2. Crear un Nuevo Proyecto y Hacer Cambios: # Crea o copia los archivos de tu proyecto en el directorio local clonado. Realiza las modificaciones necesarias en los archivos.\n3. Agregar y Confirmar Cambios: # Utiliza los siguientes comandos de Git para agregar los cambios realizados y confirmarlos con un mensaje descriptivo:\ngit add . git commit -m \u0026#34;Añadir cambios al proyecto\u0026#34; 4. Configurar un Repositorio Remoto en GitHub: # En GitHub, crea un nuevo repositorio vacío en tu cuenta. Luego, vincula el repositorio local con el remoto utilizando los comandos git remote:\ngit remote add origin https://github.com/tu_usuario/tu_proyecto.git 5. Subir Cambios al Repositorio Remoto: # Finalmente, sube los cambios al repositorio remoto en GitHub utilizando el comando git push:\ngit push -u origin main Esto cargará tus cambios en la rama principal (main) del repositorio en GitHub.\nCompetidores de GitHub # Aunque GitHub es líder en su categoría, existen competidores notables en la gestión de repositorios de control de versiones. Algunos de los competidores más destacados incluyen:\nGitLab: GitLab es una plataforma similar a GitHub que ofrece tanto una versión en la nube como una versión de código abierto que se puede alojar en servidores propios. Ofrece una amplia gama de características, incluyendo integración continua y entrega continua (CI/CD).\nBitbucket: Bitbucket, propiedad de Atlassian, es otra plataforma de control de versiones que se integra estrechamente con otras herramientas de Atlassian, como Jira y Confluence. También ofrece capacidades de alojamiento de repositorios Git y Mercurial.\nGitKraken: GitKraken es un cliente de Git con una interfaz gráfica intuitiva que facilita el uso de Git y GitHub. Es especialmente popular entre los desarrolladores que prefieren una experiencia visual.\nEjemplo de Subir un Proyecto a GitHub # Supongamos que deseas subir un proyecto nuevo a GitHub:\nCrea un nuevo repositorio vacío en GitHub.\nEn tu terminal, navega al directorio del proyecto y ejecuta los siguientes comandos:\ngit init git add . git commit -m \u0026#34;Primer commit\u0026#34; git remote add origin https://github.com/tu_usuario/tu_proyecto.git git push -u origin main Estos pasos inician un nuevo repositorio Git local, agregan y confirman los cambios, establecen un repositorio remoto en GitHub y suben los archivos al repositorio en la rama principal (main).\nEn resumen, GitHub se ha convertido en una herramienta esencial para la colaboración y el control de versiones en el desarrollo de software. Ofrece una amplia gama de ventajas, desde la colaboración efectiva hasta la integración con herramientas de desarrollo y un control de versiones sólido. Integrar GitHub con Git a través de la terminal es una habilidad esencial para los desarrolladores, y esta guía proporciona los pasos básicos para comenzar a utilizar GitHub de manera efectiva. Aunque GitHub es líder en su espacio, es importante estar al tanto de sus competidores y evaluar cuál es la mejor opción para las necesidades específicas de tu proyecto.\nRecursos # ","date":"4 septiembre 2023","permalink":"/platform/github/intro/","section":"Githubs","summary":"En el mundo del desarrollo de software, la colaboración eficiente y la gestión de versiones son aspectos cruciales para el éxito de cualquier proyecto.","title":"GitHub"},{"content":"En el mundo del desarrollo de aplicaciones web con React, la gestión de dependencias es un aspecto esencial para asegurar que tu proyecto funcione de manera eficiente y se mantenga actualizado. Las dependencias en React se refieren a las bibliotecas, paquetes y módulos externos que se utilizan para extender la funcionalidad de tu aplicación. En este artículo, exploraremos en profundidad qué son las dependencias, cuándo y por qué debes usarlas, cómo funcionan con npm (Node Package Manager), y proporcionaremos ejemplos claros de cómo instalar dependencias en tu proyecto de React.\n¿Qué son las Dependencias en React? # Las dependencias en React son recursos externos que tu proyecto necesita para funcionar correctamente. Estas pueden incluir librerías de gestión de estado, enrutamiento, manejo de solicitudes HTTP, estilización y muchas otras funcionalidades. En lugar de reinventar la rueda, los desarrolladores de React utilizan estas dependencias para aprovechar soluciones probadas y comunes.\nCuándo y Por Qué Usar Dependencias # Cuándo Usar Dependencias: # Funcionalidad Específica: Utiliza dependencias cuando necesitas funcionalidades específicas que no están disponibles en React por defecto, como el enrutamiento o la gestión del estado.\nAhorro de Tiempo: Las dependencias te permiten ahorrar tiempo y esfuerzo, ya que no tienes que escribir todo desde cero. Puedes aprovechar el trabajo realizado por otros desarrolladores.\nCompatibilidad: Las dependencias a menudo se mantienen y actualizan para garantizar la compatibilidad con las últimas versiones de React y los navegadores web.\nPor Qué Usar Dependencias: # Eficiencia: Las dependencias te ayudan a escribir código más eficiente y a evitar errores comunes, ya que han sido probadas y optimizadas.\nMantenimiento Simplificado: Utilizar dependencias bien establecidas facilita el mantenimiento a largo plazo de tu proyecto, ya que las actualizaciones y correcciones de seguridad suelen ser manejadas por la comunidad de desarrolladores.\nnpm (Node Package Manager) # npm es una herramienta que se utiliza para instalar, gestionar y compartir paquetes de código en JavaScript, incluyendo las dependencias de React. npm es ampliamente utilizado en el ecosistema de desarrollo de JavaScript y es fundamental para trabajar con dependencias en React.\nInstalación de Dependencias con npm # Para instalar dependencias en tu proyecto de React utilizando npm, sigue estos pasos:\nInicia tu proyecto de React si aún no lo has hecho. Puedes utilizar create-react-app u otro método para configurar tu proyecto inicial.\nAbre la Terminal: Accede a la terminal o línea de comandos de tu sistema operativo.\nNavega hasta la Carpeta de tu Proyecto: Utiliza el comando cd para moverte al directorio de tu proyecto.\nInstala la Dependencia: Utiliza el comando npm install nombre-de-la-dependencia para instalar la dependencia deseada. Por ejemplo, si deseas instalar React Router, puedes ejecutar npm install react-router-dom.\nAñade la Dependencia a tu Código: Después de la instalación, puedes importar y utilizar la dependencia en tu código de React según sea necesario.\nEjemplos de Instalación de Dependencias # A continuación, se presentan tres ejemplos sencillos de cómo instalar dependencias comunes en un proyecto de React utilizando npm:\n1. Instalación de React Router # npm install react-router-dom Una vez instalado, puedes importar y utilizar las rutas de React Router en tu aplicación.\n2. Instalación de Axios para Solicitudes HTTP # npm install axios Después de la instalación, puedes importar Axios y utilizarlo para realizar solicitudes HTTP desde tu aplicación de React.\n3. Instalación de Styled-components para Estilización # npm install styled-components Luego, puedes importar y usar Styled-components para aplicar estilos a tus componentes de React de una manera elegante y mantenible.\nLa gestión de dependencias en proyectos de React es una habilidad esencial para cualquier desarrollador. Utilizar dependencias adecuadas puede acelerar tu desarrollo, mejorar la eficiencia y mantener tu proyecto actualizado y seguro. Al comprender cómo funcionan las dependencias, cómo instalarlas con npm y cuándo utilizarlas, estarás mejor preparado para crear aplicaciones de React robustas y funcionales. La elección y gestión cuidadosa de las dependencias son pasos clave en el proceso de desarrollo de software.\nBuenas Prácticas al Usar Dependencias # Al trabajar con dependencias en React, es importante seguir ciertas buenas prácticas para garantizar que tu proyecto sea eficiente, seguro y fácil de mantener:\nRevisar la Documentación Oficial: Antes de instalar una dependencia, consulta siempre la documentación oficial para asegurarte de que estás utilizando la versión más reciente y siguiendo las mejores prácticas de implementación.\nEvaluar la Popularidad y Mantenimiento: Opta por dependencias que tengan una comunidad activa, actualizaciones frecuentes y una buena reputación en plataformas como npm o GitHub.\nEvitar Sobrecargar el Proyecto: Instala solo las dependencias que realmente necesitas. Agregar demasiadas dependencias puede aumentar el tamaño de tu proyecto y complicar su mantenimiento.\nMantener las Dependencias Actualizadas: Utiliza herramientas como npm outdated y npm update para identificar y actualizar dependencias obsoletas. Esto ayuda a mantener tu proyecto seguro y compatible con las últimas versiones de React.\nVerificar Licencias: Asegúrate de que las dependencias que utilizas tienen licencias compatibles con tu proyecto, especialmente si planeas distribuirlo o comercializarlo.\nUsar Versiones Específicas: Siempre que sea posible, especifica versiones exactas o utiliza rangos de versiones en tu archivo package.json para evitar problemas de compatibilidad.\nSiguiendo estas prácticas, podrás gestionar las dependencias de tu proyecto de React de manera más efectiva y profesional.\nRecursos # ","date":"1 septiembre 2023","permalink":"/platform/react/dependencies/","section":"Reacts","summary":"En el mundo del desarrollo de aplicaciones web con React, la gestión de dependencias es un aspecto esencial para asegurar que tu proyecto funcione de manera eficiente y se mantenga actualizado.","title":"Gestión de Dependencias en React"},{"content":"En el mundo del desarrollo de software colaborativo, GitHub se ha convertido en una herramienta fundamental para trabajar en equipo y compartir código. Una de las funciones más importantes de GitHub es la bifurcación o forkeo de un proyecto. ¿Pero qué es exactamente la bifurcación en GitHub y por qué es importante para los desarrolladores? En este artículo, te explicaremos todo lo que necesitas saber sobre la bifurcación en GitHub, cómo hacerlo y cómo contribuir al proyecto original a través de tu bifurcación.\nForks en GitHub # Antes de Leer un poco mas de este tema, mira este video donde resume el proceso de Fork en GitHub.\nProceso de Bifurcación (Fork) # La bifurcación o \u0026ldquo;fork\u0026rdquo; en GitHub es una manera de crear una copia de un repositorio existente en tu cuenta de GitHub. Una bifurcación te permite experimentar con un proyecto sin afectar el proyecto original y es especialmente útil cuando deseas contribuir a un proyecto existente.\nAquí te muestro los pasos para hacer una bifurcación y contribuir al proyecto original:\nHaz una bifurcación del proyecto original: Ve al repositorio del proyecto en GitHub y haz clic en el botón \u0026ldquo;Fork\u0026rdquo; en la parte superior derecha de la página. Esto creará una copia del repositorio en tu cuenta de GitHub.\nClona tu bifurcación: Ahora, debes clonar tu bifurcación en tu computadora local usando el comando git clone. Para ello, ve a tu cuenta de GitHub y busca la bifurcación que acabas de crear. Haz clic en el botón \u0026ldquo;Code\u0026rdquo; y copia la URL que se muestra.\nLuego, en tu terminal, ejecuta el siguiente comando:\ngit clone \u0026lt;URL de tu bifurcación\u0026gt; Crea una nueva rama: Después de clonar el repositorio, debes crear una nueva rama en la que trabajarás en tu contribución. Para ello, ejecuta el siguiente comando en tu terminal: git checkout -b \u0026lt;nombre-de-la-rama\u0026gt; Haz los cambios necesarios: Ahora, puedes hacer los cambios necesarios en tu código. En este punto, puedes agregar, eliminar o modificar archivos según la contribución que desees realizar.\nConfirma los cambios: Una vez que hayas hecho los cambios necesarios, debes confirmarlos. Para ello, ejecuta los siguientes comandos en tu terminal:\ngit add . git commit -m \u0026#34;Mensaje de confirmación que describe los cambios realizados\u0026#34; Envía los cambios a tu bifurcación: Ahora, debes enviar los cambios a tu bifurcación. Para ello, ejecuta el siguiente comando en tu terminal: git push origin \u0026lt;nombre-de-la-rama\u0026gt; Crea una solicitud de extracción: Una vez que hayas enviado los cambios a tu bifurcación, ve a tu cuenta de GitHub y busca la rama que acabas de crear. Haz clic en el botón \u0026ldquo;Compare \u0026amp; pull request\u0026rdquo; para crear una solicitud de extracción (pull request) al proyecto original.\nEspera la revisión: Ahora, los propietarios del proyecto original revisarán tu solicitud de extracción y te darán retroalimentación si es necesario. Si todo está bien, tus cambios se fusionarán con el proyecto original.\nExplicación de GitHub # Dentro de la documentación de github, podemos encontrar informacion de la forma en la que podemos realizar sus procesos. A continuación tenemos dos lecturas sobre la bifurcación y la contribución a un proyecto. Lee ambas secciones y realiza lo siguiente:\nRealiza la Bifurcación de un repositorio de tu gusto, puedes buscar y elegir el que desees. Realiza una copia local de ese repositorio. Realiza la contribucion a ese proyecto, no importa si es pequeña o grande, lo importante es que lo hagas. Realiza un Pull Request a ese proyecto. Envía un pantallazo de tu contribución a DISCORD. Este ultimo paso es importante y no es opcional, tienes que enviar esta evidencia por el canal de Discord. 👉 Bifurcación de un repositorio\n👉 Contribuir a un proyecto\n","date":"1 septiembre 2023","permalink":"/platform/git/fork/","section":"Gits","summary":"En el mundo del desarrollo de software colaborativo, GitHub se ha convertido en una herramienta fundamental para trabajar en equipo y compartir código.","title":"Fork"},{"content":"En el mundo del desarrollo de software colaborativo, Git es la piedra angular del control de versiones. A pesar de su poder y versatilidad, a menudo los desarrolladores se enfrentan a un desafío común: los conflictos en Git. Estos conflictos surgen cuando dos o más ramas del repositorio realizan cambios en la misma parte de un archivo, lo que puede generar confusión y problemas en el proceso de fusión. Este artículo se sumergirá en el mundo de los conflictos en Git, analizando qué son, cuándo y por qué suceden, cómo solucionarlos y proporcionando ejemplos claros de conflictos comunes.\n¿Qué son los Conflictos en Git? # Los conflictos en Git ocurren cuando el sistema no puede determinar automáticamente cómo combinar los cambios realizados en diferentes ramas o commits. Esto suele suceder cuando dos o más personas trabajan simultáneamente en el mismo archivo y modifican la misma línea o sección del código. En lugar de sobrescribir uno de los cambios, Git detiene la fusión y marca el conflicto para que el usuario lo resuelva.\n¿Cuándo y por qué suceden los Conflictos? # Los conflictos en Git pueden ocurrir en diversas situaciones, pero generalmente se desencadenan por las siguientes razones:\nCambios Simultáneos: Cuando dos o más desarrolladores realizan cambios en la misma parte del código en diferentes ramas o commits.\nFusiones de Ramas: Al fusionar ramas con cambios conflictivos, Git detecta diferencias en el mismo archivo y señala el conflicto.\nCambios Conflictivos en Historial: Si se modifican archivos en una rama después de que se haya bifurcado desde otra rama, pueden surgir conflictos al intentar fusionar las dos ramas nuevamente.\nConflictos en Archivos Binarios: Git también puede experimentar conflictos en archivos binarios, como imágenes, cuando dos personas intentan modificarlos simultáneamente.\nCómo Solucionar Conflictos en Git # Resolver conflictos en Git es un proceso esencial para mantener un flujo de trabajo colaborativo sin problemas. Aquí hay una guía paso a paso sobre cómo hacerlo:\nIdentificar el conflicto: Git mostrará un mensaje que indica qué archivos tienen conflictos. Utiliza el comando git status para ver la lista de archivos en conflicto.\nEditar el archivo en conflicto: Abre el archivo en conflicto con un editor de texto y busca las marcas de conflicto. Estas marcas indican las diferencias entre las versiones en conflicto y deben eliminarse o ajustarse manualmente.\nResolver el conflicto: Edita el archivo para seleccionar qué cambios deseas conservar y cómo deben combinarse. Esto implica eliminar las marcas de conflicto \u0026lt;\u0026lt;\u0026lt;\u0026lt;\u0026lt;\u0026lt;\u0026lt;, =======, \u0026gt;\u0026gt;\u0026gt;\u0026gt;\u0026gt;\u0026gt;\u0026gt; y ajustar el código según tus necesidades.\nGuardar los cambios: Después de resolver el conflicto, guarda el archivo y ciérralo.\nAgregar y confirmar los cambios: Utiliza git add para marcar el archivo como resuelto y luego git commit para confirmar los cambios. En el mensaje de confirmación, es recomendable explicar cómo se resolvió el conflicto.\nContinuar con la fusión o el flujo de trabajo: Ahora que has resuelto el conflicto, puedes continuar con la fusión de ramas o el flujo de trabajo habitual.\nEjemplos de Conflictos Comunes # 1. Conflicto de Línea # Supongamos que dos desarrolladores modifican la misma línea en un archivo. Git detectará el conflicto y señalará las diferencias. Para resolverlo, el desarrollador debe elegir cuál de las dos versiones mantener o realizar ajustes.\n2. Conflicto de Fusión # Cuando se fusionan dos ramas con cambios conflictivos en el mismo archivo, Git genera un conflicto de fusión. Las marcas de conflicto indican las diferencias, y el desarrollador debe editar el archivo para decidir qué cambios deben mantenerse.\n3. Conflicto de Historial # Si una rama se bifurca de otra y se realizan cambios conflictivos en el mismo archivo, Git no puede fusionar automáticamente. Debes resolver el conflicto como se describe anteriormente.\nLos conflictos en Git son un desafío común en el desarrollo de software colaborativo. Sin embargo, con una comprensión sólida de cómo funcionan y cómo resolverlos, los equipos pueden mantener un flujo de trabajo suave y asegurar que los cambios se integren sin problemas. A medida que los proyectos crecen en complejidad, la capacidad de manejar conflictos se convierte en una habilidad esencial para los desarrolladores que buscan mantener la integridad del código y la eficiencia del equipo.\nRecursos # Este video está configurado para iniciar y terminar en minutos ya configurados.\nEn ocasiones, los conflictos en nuestro repositorio de GitHub pueden ser resueltos directamente desde la interfaz de GitHub. Aquí veremos un ejemplo de como sería un caso de conflicto en GitHub.\n","date":"1 septiembre 2023","permalink":"/platform/git/conflictos/","section":"Gits","summary":"En el mundo del desarrollo de software colaborativo, Git es la piedra angular del control de versiones.","title":"Conflictos en Git"},{"content":"En el mundo del desarrollo de software, Git es ampliamente conocido como el sistema de control de versiones líder. Su flexibilidad y potencia lo hacen esencial en la gestión de proyectos de código fuente. Dentro de Git, uno de los conceptos clave que hacen que la colaboración y la organización sean más efectivas es el uso de ramas.\n¿Qué son las Ramas en Git? # En Git, una rama es una línea de desarrollo independiente que deriva de la rama principal (comúnmente denominada \u0026ldquo;master\u0026rdquo; o \u0026ldquo;main\u0026rdquo;). Cada rama tiene su propio historial de cambios, lo que permite a los desarrolladores trabajar en tareas específicas sin afectar directamente el código en la rama principal.\nCuando se crea una rama, se parte de un punto dado en la rama principal. Los cambios realizados en una rama no impactan en otras ramas hasta que se fusionen de nuevo en la rama principal o en otra rama. Las ramas en Git son ligeras y no consumen mucho espacio en disco, lo que las hace ideales para experimentar y desarrollar nuevas características de manera segura.\nVideos # Cada video está configurado para empezar y terminar en minutos determinados, por lo cual te recomiendo que solo les des play y los veas y estudies. No es necesario adelantarlo, se detendrán automáticamente en los minutos que ya hemos configurado.\ngit branch y git switch # git merge # .gitignore # Curso GIT y GitHub # Hasta ahora hemos visto a detalle como funciona cada uno de los comandos. En general, en el día a día, esto suele ser mas sencillo de aplicar. Para ello, veremos el siguiente tutorial de Fazt en el que se explica como crear un repositorio en GitHub y como subirlo a la nube. Comandos # Hasta el momento, hemos aprendido varios comandos de GIT, así que haré una lista de los comandos que hemos aprendido hasta ahora.\ngit init: Inicializa un repositorio GIT en el directorio actual. git status: Muestra el estado actual del repositorio. git add: Agrega archivos al área de preparación. git commit: Crea un nuevo commit con los archivos del área de preparación. git log: Muestra el historial de commits. git branch: Muestra las ramas del repositorio. git switch: Cambia de rama. git merge: Une dos ramas. git checkout: Cambia de rama o restaura un archivo. git tree: Muestra el árbol de commits. ","date":"1 septiembre 2023","permalink":"/platform/git/ramas/","section":"Gits","summary":"En el mundo del desarrollo de software, Git es ampliamente conocido como el sistema de control de versiones líder.","title":"Ramas en Git"},{"content":"En el ámbito del desarrollo de software, la gestión efectiva de versiones es fundamental para mantener el orden y la colaboración en los proyectos. Git, un sistema de control de versiones distribuido, ha transformado la forma en que los equipos de desarrollo gestionan cambios, colaboran y mantienen un historial coherente de sus proyectos. En este artículo, exploraremos en detalle qué es Git, su historia, su funcionamiento, su utilidad y el flujo básico que se sigue al iniciar un nuevo proyecto.\nDesglosando Git: Concepto y Significado # ¿Qué es Git? # Git es un sistema de control de versiones de código abierto desarrollado por Linus Torvalds en 2005. Su objetivo principal es rastrear cambios en archivos de código fuente y otros contenidos, permitiendo a los equipos colaborar de manera eficiente en el desarrollo de software.\nHistoria de Git # La creación de Git se originó en la necesidad de gestionar el desarrollo del kernel de Linux de manera más efectiva. Linus Torvalds diseñó Git como una solución descentralizada y eficiente para el control de versiones, evitando problemas de otros sistemas existentes en ese momento.\nFuncionamiento de Git # Git opera en tres etapas principales:\nDirectorio de Trabajo: Aquí es donde realizas cambios en tus archivos.\nÁrea de Staging (Índice): Antes de confirmar los cambios, los añades al área de staging. Esto te permite seleccionar qué cambios deseas incluir en el próximo commit.\nRepositorio Local: Una vez que realizas un commit, los cambios se almacenan en el repositorio local, creando un historial de versiones.\nImportancia de Git en el Desarrollo # Historial de Cambios # Git mantiene un registro detallado de todos los cambios realizados en el proyecto, lo que facilita la revisión y resolución de problemas.\nColaboración Sin Conflictos # Permite que varios desarrolladores trabajen en paralelo en diferentes ramas, fusionando sus cambios de manera eficiente.\nControl de Versiones # Te permite crear múltiples versiones de un proyecto y revertir a versiones anteriores si es necesario.\nEl Flujo Básico de Git al Iniciar un Proyecto # Inicializar un Nuevo Repositorio: Desde la línea de comandos, utiliza git init en el directorio de tu proyecto para crear un nuevo repositorio Git.\nAgregar Cambios al Área de Staging: Utiliza git add \u0026lt;nombre del archivo\u0026gt; para añadir cambios específicos al área de staging.\nRealizar un Commit: Utiliza git commit -m \u0026quot;Mensaje del commit\u0026quot; para confirmar los cambios en el área de staging y crear un nuevo commit en el repositorio local.\nConectar a un Repositorio Remoto: Utiliza git remote add origin \u0026lt;URL del repositorio\u0026gt; para vincular tu repositorio local con un repositorio remoto en plataformas como GitHub.\nSubir Cambios: Utiliza git push origin \u0026lt;nombre de la rama\u0026gt; para subir tus commits al repositorio remoto y compartir tu trabajo con otros.\nEjemplo Sencillo del Flujo de Git # Supongamos que estás iniciando un proyecto nuevo:\nInicializa el repositorio:\ngit init Agrega archivos al área de staging:\ngit add archivo1.txt archivo2.js Realiza un commit:\ngit commit -m \u0026#34;Añadidos archivos iniciales\u0026#34; Conecta a un repositorio remoto:\ngit remote add origin https://github.com/tu-usuario/tu-proyecto.git Sube tus cambios al repositorio remoto:\ngit push origin master Git ha revolucionado la forma en que los desarrolladores colaboran y gestionan el desarrollo de software. Su enfoque descentralizado, su habilidad para rastrear cambios y su flujo de trabajo bien definido lo convierten en una herramienta esencial para cualquier proyecto. Al comprender su funcionamiento y seguir sus principios, los equipos de desarrollo pueden beneficiarse de una gestión de versiones eficiente y una colaboración fluida en cualquier proyecto.\nRecursos # ","date":"31 agosto 2023","permalink":"/platform/git/intro/","section":"Gits","summary":"En el ámbito del desarrollo de software, la gestión efectiva de versiones es fundamental para mantener el orden y la colaboración en los proyectos.","title":"Git: La Herramienta Esencial para el Control de Versiones"},{"content":"En un mundo donde las pantallas varían en tamaño desde dispositivos móviles hasta monitores de alta resolución, garantizar que tu sitio web se vea y funcione bien en todas ellas es esencial. Aquí es donde entra en juego el Diseño Web Responsivo. En este artículo, exploraremos a fondo el concepto de Diseño Web Responsivo, su importancia, su funcionamiento y cómo se logra mediante el uso de media queries.\nEntendiendo el Diseño Web Responsivo # ¿Qué es el Diseño Web Responsivo? # El Diseño Web Responsivo es un enfoque de diseño que busca adaptar una página web a diferentes dispositivos y tamaños de pantalla. En lugar de crear versiones separadas del sitio para cada dispositivo, el diseño responsivo utiliza técnicas y estilos que permiten que el contenido se reorganice y redimensione de manera fluida.\nHistoria del Diseño Web Responsivo # El término \u0026ldquo;Diseño Web Responsivo\u0026rdquo; fue acuñado por Ethan Marcotte en 2010, pero sus principios se remontan a los primeros días de la web móvil. La necesidad de crear experiencias consistentes en múltiples dispositivos llevó al desarrollo de esta técnica.\nFuncionamiento del Diseño Web Responsivo # El Diseño Web Responsivo se basa en el uso de CSS (Cascading Style Sheets) y HTML (Hypertext Markup Language) para adaptar la presentación de una página web según el tamaño de la pantalla. Utiliza media queries para aplicar estilos específicos en función de ciertos rangos de tamaño.\nImportancia del Diseño Web Responsivo # Adaptabilidad # El Diseño Web Responsivo permite que tu sitio web se vea y funcione bien en cualquier dispositivo, brindando una experiencia consistente y satisfactoria para los usuarios.\nSEO Mejorado # Los motores de búsqueda favorecen los sitios web responsivos, lo que puede mejorar el posicionamiento en los resultados de búsqueda.\nMayor Audiencia # Con más personas navegando en dispositivos móviles, un diseño responsivo garantiza que puedas llegar a una audiencia más amplia.\nMedia Queries: La Clave del Diseño Responsivo # ¿Qué son las Media Queries? # Las Media Queries son reglas en CSS que permiten aplicar estilos específicos en función de las características del dispositivo, como su tamaño de pantalla, orientación y resolución.\nSintaxis Básica de Media Queries # /* Aplicar estilos cuando el ancho de la pantalla sea menor a 600px */ @media (max-width: 600px) { /* Estilos para dispositivos móviles */ } Ejemplos Sencillos del Diseño Web Responsivo # Ejemplo 1: Ajuste de Tamaño de Fuente # body { font-size: 16px; } /* Cambiar tamaño de fuente en pantallas pequeñas */ @media (max-width: 600px) { body { font-size: 14px; } } Ejemplo 2: Cambio de Disposición # /* Cambiar diseño a columnas en pantallas pequeñas */ @media (max-width: 600px) { .container { display: flex; flex-direction: column; } } Ejemplo 3: Ocultar Elementos # /* Ocultar imagen en pantallas pequeñas */ @media (max-width: 600px) { .imagen { display: none; } } El Diseño Web Responsivo se ha vuelto fundamental en un mundo en el que la diversidad de dispositivos es la norma. Mediante el uso de media queries y técnicas de diseño adaptativo, los sitios web pueden brindar una experiencia óptima a los usuarios sin importar el dispositivo que utilicen. Al abrazar este enfoque, los diseñadores y desarrolladores web pueden asegurarse de que sus creaciones se vean y funcionen excepcionalmente en todas las pantallas, proporcionando una experiencia de usuario coherente y atractiva.\nRecursos # ","date":"31 agosto 2023","permalink":"/platform/css/responsive_design/","section":"Csses","summary":"En un mundo donde las pantallas varían en tamaño desde dispositivos móviles hasta monitores de alta resolución, garantizar que tu sitio web se vea y funcione bien en todas ellas es esencial.","title":"Diseño Web Responsivo"},{"content":"En el vasto y siempre conectado mundo de la web, las interacciones entre aplicaciones y servidores son fundamentales para la transmisión de información. Aquí es donde entra en juego el Protocolo de Transferencia de Hipertexto (HTTP), un protocolo esencial que permite la comunicación entre los navegadores, aplicaciones y servidores. En este artículo, sumérgete en el mundo del HTTP, explora los verbos HTTP y los códigos de estado, y descubre cómo se entrelazan para formar la columna vertebral de la web moderna.\nEntendiendo el Protocolo HTTP # ¿Qué es HTTP? # El Protocolo de Transferencia de Hipertexto (HTTP) es un protocolo de aplicación que define cómo los navegadores web, las aplicaciones y los servidores se comunican entre sí. Establece las reglas para solicitar y enviar información a través de la World Wide Web.\nHistoria de HTTP # HTTP fue introducido por Tim Berners-Lee en 1989 y se convirtió en la base de la World Wide Web. La primera versión, HTTP/0.9, permitía solo solicitudes GET para transferir documentos HTML. Desde entonces, ha evolucionado a través de varias versiones hasta llegar a HTTP/2, que ofrece mejoras significativas en la velocidad y el rendimiento.\nFuncionamiento de HTTP # HTTP se basa en el modelo cliente-servidor. Cuando un cliente (navegador o aplicación) realiza una solicitud a un servidor, la solicitud es procesada y el servidor devuelve una respuesta. Las solicitudes y respuestas están formateadas en mensajes HTTP y se transmiten a través de la web.\nLos Verbos HTTP: Acciones en la Web # ¿Qué son los Verbos en HTTP? # Los verbos en HTTP son métodos que indican qué acción se debe realizar en un recurso determinado. Cada verbo tiene un propósito específico y define la operación que se llevará a cabo en el recurso solicitado.\nUso de los Verbos en HTTP # GET: Obtiene datos de un recurso específico. POST: Crea un nuevo recurso. PUT: Actualiza un recurso existente. DELETE: Elimina un recurso. Los Códigos de Estado HTTP: Comunicación de Resultados # ¿Qué son los Códigos de Estado? # Los códigos de estado son números de tres dígitos que indican el resultado de una solicitud HTTP. Proporcionan información sobre si la solicitud se realizó con éxito, si hubo un error o si se necesita tomar una acción adicional.\nCódigos de Estado Más Conocidos # 200 OK: Indica que la solicitud se realizó con éxito y que la respuesta contiene los datos solicitados. 404 Not Found: Significa que el recurso solicitado no fue encontrado en el servidor. 500 Internal Server Error: Indica un error en el servidor que impide que se complete la solicitud. Ejemplos Sencillos de Verbos y Códigos de Estado en Acción # Ejemplo 1: Obtener Datos (GET) # Un cliente solicita información sobre un artículo:\nGET /api/articulos/123 El servidor responde:\n200 OK { \u0026#34;id\u0026#34;: 123, \u0026#34;titulo\u0026#34;: \u0026#34;Introducción a HTTP\u0026#34;, \u0026#34;contenido\u0026#34;: \u0026#34;...\u0026#34; } Ejemplo 2: Crear un Nuevo Recurso (POST) # Un cliente agrega un nuevo usuario:\nPOST /api/usuarios { \u0026#34;nombre\u0026#34;: \u0026#34;Ana\u0026#34;, \u0026#34;edad\u0026#34;: 30 } El servidor responde:\n201 Created Ejemplo 3: Actualizar un Recurso Existente (PUT) # Un cliente modifica los datos de un artículo:\nPUT /api/articulos/123 { \u0026#34;titulo\u0026#34;: \u0026#34;Introducción a HTTP y sus Verbos\u0026#34;, \u0026#34;contenido\u0026#34;: \u0026#34;...\u0026#34; } El servidor responde:\n204 No Content HTTP, con sus verbos y códigos de estado, forma el tejido conectivo de la web moderna. Los verbos permiten que las aplicaciones interactúen con recursos web, mientras que los códigos de estado comunican los resultados de esas interacciones. Comprender cómo funcionan los verbos y los códigos de estado es esencial para cualquier desarrollador y usuario de la web, ya que se encuentran en el corazón de cada clic, cada solicitud y cada respuesta en línea.\nRecursos # ","date":"30 agosto 2023","permalink":"/platform/backend/http/protocolo/","section":"Backends","summary":"En el vasto y siempre conectado mundo de la web, las interacciones entre aplicaciones y servidores son fundamentales para la transmisión de información.","title":"Introducción, Verbos y Códigos de Estado en HTTP"},{"content":"","date":"30 agosto 2023","permalink":"/platform/api/","section":"Apis","summary":"","title":"Apis"},{"content":"En el mundo actual de la tecnología, las APIs REST se han convertido en la piedra angular de la interconexión digital, permitiendo que las aplicaciones interactúen y compartan datos de manera eficiente. Con su arquitectura simple y enfoque en los estándares web, las APIs REST han revolucionado la forma en que los sistemas se comunican en línea. En este artículo, exploraremos en profundidad qué son las APIs REST, su funcionamiento, ventajas y ejemplos prácticos.\nEntendiendo el Concepto \u0026ldquo;REST\u0026rdquo; # ¿Qué es REST? # REST, por sus siglas en inglés, significa \u0026ldquo;Representational State Transfer\u0026rdquo; (Transferencia de Estado Representacional). Es un conjunto de principios y restricciones arquitecturales que definen cómo se deben diseñar y construir las APIs web. Las APIs que siguen estas directrices se conocen como APIs REST.\nHistoria de REST # El término REST fue introducido por Roy Fielding en su tesis doctoral en 2000. Fielding fue uno de los coautores de la especificación HTTP (Hypertext Transfer Protocol) y jugó un papel fundamental en la evolución de la World Wide Web. La tesis de Fielding definió los principios de REST como un enfoque para diseñar sistemas web eficientes y escalables.\nFuncionamiento de las APIs REST # Las APIs REST operan en el contexto de la arquitectura cliente-servidor. Utilizan los métodos HTTP, como GET, POST, PUT y DELETE, para realizar operaciones en los recursos, que pueden ser representados por URL (Uniform Resource Locators). Estos recursos se manipulan a través de las solicitudes HTTP, y las respuestas se devuelven en formato de datos, a menudo en JSON o XML.\nDiferencias Entre una API Normal y una REST # A diferencia de las APIs tradicionales, que pueden usar diferentes protocolos y no siguen una estructura uniforme, las APIs REST se adhieren a un conjunto de principios coherentes que simplifican la comunicación entre sistemas. Esto incluye la representación de recursos a través de URLs y el uso consistente de los métodos HTTP para realizar operaciones.\nVentajas de Usar APIs REST # Simplicidad: La arquitectura REST es simple y fácil de entender, lo que facilita la creación y el mantenimiento de APIs.\nEscalabilidad: Las APIs REST permiten la escalabilidad eficiente, ya que los recursos son accesibles a través de URLs y pueden distribuirse en servidores múltiples.\nIndependencia de Plataforma: Las APIs REST pueden ser consumidas por cualquier cliente que pueda hacer solicitudes HTTP, independientemente de la plataforma o el lenguaje de programación.\nEjemplos Sencillos del Funcionamiento de una API REST # Obtener Datos (GET) # Para obtener información de un recurso, como una lista de usuarios:\nGET /api/usuarios Crear un Nuevo Registro (POST) # Para agregar un nuevo usuario:\nPOST /api/usuarios { \u0026#34;nombre\u0026#34;: \u0026#34;Ana\u0026#34;, \u0026#34;edad\u0026#34;: 30 } Actualizar un Registro Existente (PUT) # Para modificar los datos de un usuario existente:\nPUT /api/usuarios/1 { \u0026#34;nombre\u0026#34;: \u0026#34;Ana Rodríguez\u0026#34;, \u0026#34;edad\u0026#34;: 31 } Eliminar un Registro (DELETE) # Para eliminar un usuario:\nDELETE /api/usuarios/1 Las APIs REST han revolucionado la forma en que los sistemas se comunican en la era digital. Al adherirse a principios arquitecturales coherentes y estandarizados, las APIs REST ofrecen simplicidad, escalabilidad y independencia de plataforma. A medida que continuamos construyendo aplicaciones interconectadas y servicios web, comprender y aprovechar las capacidades de las APIs REST se convierte en una habilidad esencial para los desarrolladores modernos.\nVideos # Mira este video desde 06:04 hasta 15:01 minutos (ya está marcado).\n","date":"30 agosto 2023","permalink":"/platform/api/rest/","section":"Apis","summary":"En el mundo actual de la tecnología, las APIs REST se han convertido en la piedra angular de la interconexión digital, permitiendo que las aplicaciones interactúen y compartan datos de manera eficiente.","title":"Explorando las APIs REST"},{"content":"En el vasto mundo de la tecnología y el desarrollo de software, las API (Interfaces de Programación de Aplicaciones) se alzan como un pilar fundamental que permite a las aplicaciones comunicarse, compartir datos y funcionar en conjunto. A medida que nuestra vida digital se vuelve cada vez más interconectada, comprender qué es una API y cómo funciona se vuelve crucial para todos los involucrados en la creación y utilización de software. En este artículo, profundizaremos en los conceptos esenciales de las APIs, exploraremos su historia, su funcionamiento y su importancia en el panorama tecnológico actual.\nDesglosando las APIs: Definición y Concepto # ¿Qué es una API? # En su esencia, una API es un conjunto de reglas y protocolos que permite que dos aplicaciones se comuniquen entre sí. En otras palabras, es un intermediario que permite que distintos programas interactúen y compartan datos sin la necesidad de comprender cada detalle interno del otro.\nHistoria de las APIs # El concepto de las APIs tiene sus raíces en las décadas anteriores al auge de la web. Con la llegada de la programación orientada a objetos, se volvió esencial proporcionar interfaces estandarizadas para interactuar con software. Con el tiempo, la proliferación de la web y la necesidad de compartir información entre aplicaciones condujo al desarrollo de las APIs web.\nFuncionamiento de las APIs # Las APIs actúan como un conjunto de contratos que define cómo las aplicaciones pueden solicitar o enviar datos. Una aplicación que utiliza una API sabe qué solicitudes hacer y qué respuestas esperar. Las APIs permiten a los desarrolladores crear aplicaciones que se integran con otros servicios y sistemas de manera eficiente.\nPor Qué son Necesarias las APIs # Interoperabilidad # Las APIs permiten que diferentes aplicaciones, independientemente de su lenguaje o plataforma, trabajen juntas. Esto es fundamental para crear un ecosistema digital en el que las aplicaciones pueden colaborar y compartir información.\nReutilización # Las APIs facilitan la reutilización de funciones y servicios. En lugar de reinventar la rueda, los desarrolladores pueden aprovechar las capacidades existentes a través de APIs.\nEscalabilidad # Las APIs permiten a las empresas expandir sus servicios sin tener que rediseñar todo su sistema. Esto facilita la adición de nuevas funcionalidades y la adaptación a las demandas cambiantes.\nVentajas de Utilizar APIs # Aceleración del Desarrollo: Las APIs permiten a los desarrolladores construir aplicaciones más rápido al aprovechar las capacidades ya existentes.\nInnovación: Al utilizar APIs, los desarrolladores pueden combinar diferentes servicios para crear experiencias nuevas e innovadoras.\nSeguridad: Las APIs pueden limitar la cantidad de datos expuestos, proporcionando un control más preciso sobre qué datos se comparten y cómo se accede a ellos.\nFormato de Respuesta de las APIs # El formato de respuesta más común en las APIs modernas es JSON (JavaScript Object Notation) debido a su estructura liviana y fácil de leer. También se utilizan otros formatos como XML, pero JSON es ampliamente preferido debido a su simplicidad y su compatibilidad con múltiples lenguajes.\nLas APIs son las piedras angulares que permiten la interconexión de aplicaciones y sistemas en el mundo digital. Desde sus orígenes hasta el presente, las APIs han evolucionado para impulsar la innovación, la colaboración y la eficiencia en el desarrollo de software. Con un profundo impacto en la manera en que interactuamos con la tecnología, las APIs seguirán desempeñando un papel esencial en el panorama tecnológico en constante cambio.\nEjemplos de datos en formato JSON: # Objeto Simple: { \u0026#34;nombre\u0026#34;: \u0026#34;Juan\u0026#34;, \u0026#34;edad\u0026#34;: 28, \u0026#34;ciudad\u0026#34;: \u0026#34;Lima\u0026#34; } Arreglo de Objetos: [ { \u0026#34;nombre\u0026#34;: \u0026#34;Ana\u0026#34;, \u0026#34;edad\u0026#34;: 35, \u0026#34;ciudad\u0026#34;: \u0026#34;Bogotá\u0026#34; }, { \u0026#34;nombre\u0026#34;: \u0026#34;Carlos\u0026#34;, \u0026#34;edad\u0026#34;: 22, \u0026#34;ciudad\u0026#34;: \u0026#34;Ciudad de México\u0026#34; } ] Anidación de Objetos: { \u0026#34;persona\u0026#34;: { \u0026#34;nombre\u0026#34;: \u0026#34;María\u0026#34;, \u0026#34;edad\u0026#34;: 42, \u0026#34;ciudad\u0026#34;: \u0026#34;Santiago\u0026#34; }, \u0026#34;intereses\u0026#34;: [\u0026#34;música\u0026#34;, \u0026#34;viajes\u0026#34;, \u0026#34;lectura\u0026#34;] } Datos con Valores Nulos: { \u0026#34;producto\u0026#34;: \u0026#34;Smartphone\u0026#34;, \u0026#34;precio\u0026#34;: 599.99, \u0026#34;descuento\u0026#34;: null } Formato de Fecha: { \u0026#34;fecha\u0026#34;: \u0026#34;2023-08-15\u0026#34;, \u0026#34;evento\u0026#34;: \u0026#34;Conferencia de Desarrollo\u0026#34; } Formato de Booleanos: { \u0026#34;activo\u0026#34;: true, \u0026#34;notificado\u0026#34;: false } Datos Geoespaciales: { \u0026#34;ubicacion\u0026#34;: { \u0026#34;latitud\u0026#34;: 37.7749, \u0026#34;longitud\u0026#34;: -122.4194 }, \u0026#34;nombre\u0026#34;: \u0026#34;San Francisco\u0026#34; } Uso de Propiedades con Guiones: { \u0026#34;nombre-completo\u0026#34;: \u0026#34;Ana Rodríguez\u0026#34;, \u0026#34;edad\u0026#34;: 29 } Datos Anidados con Arrays: { \u0026#34;alumnos\u0026#34;: [ { \u0026#34;nombre\u0026#34;: \u0026#34;Juan\u0026#34;, \u0026#34;notas\u0026#34;: [95, 87, 92] }, { \u0026#34;nombre\u0026#34;: \u0026#34;María\u0026#34;, \u0026#34;notas\u0026#34;: [78, 88, 76] } ] } Respuesta API con Metadatos: { \u0026#34;datos\u0026#34;: [ { \u0026#34;nombre\u0026#34;: \u0026#34;Producto A\u0026#34;, \u0026#34;precio\u0026#34;: 49.99 }, { \u0026#34;nombre\u0026#34;: \u0026#34;Producto B\u0026#34;, \u0026#34;precio\u0026#34;: 74.99 } ], \u0026#34;total_productos\u0026#34;: 2, \u0026#34;pagina_actual\u0026#34;: 1, \u0026#34;por_pagina\u0026#34;: 10 } Estos ejemplos ilustran la diversidad de estructuras que se pueden representar en formato JSON. JSON es ampliamente utilizado debido a su simplicidad y facilidad de lectura tanto por humanos como por máquinas, lo que lo convierte en un formato de elección para la transferencia y almacenamiento de datos en la web.\nRecursos # ","date":"30 agosto 2023","permalink":"/platform/api/intro/","section":"Apis","summary":"En el vasto mundo de la tecnología y el desarrollo de software, las API (Interfaces de Programación de Aplicaciones) se alzan como un pilar fundamental que permite a las aplicaciones comunicarse, compartir datos y funcionar en conjunto.","title":"Explorando las API"},{"content":"En el ecosistema de desarrollo web moderno, interactuar con APIs externas es esencial para construir aplicaciones ricas en datos y funcionalidad. React, siendo una de las bibliotecas más populares para crear interfaces de usuario, ofrece una forma poderosa de hacer solicitudes a APIs externas mediante la Fetch API. En este artículo, exploraremos en detalle cómo realizar solicitudes a APIs externas en React, desde conceptos básicos hasta buenas prácticas y ejemplos prácticos.\nComprendiendo las APIs y Fetch # ¿Qué es una API? # Una API (Interfaz de Programación de Aplicaciones) es un conjunto de reglas y protocolos que permite que diferentes aplicaciones se comuniquen entre sí. Proporciona una forma estandarizada para que las aplicaciones accedan y compartan datos y funcionalidades.\n¿Qué es Fetch en JavaScript? # Fetch es una API nativa de JavaScript que permite realizar solicitudes HTTP a recursos en línea, como APIs. Fetch proporciona una interfaz más moderna y versátil para realizar solicitudes que las alternativas anteriores, como XMLHttpRequest.\nPor Qué Hacer Fetch a una API # Realizar solicitudes a APIs externas en React es fundamental para:\nObtener datos en tiempo real desde fuentes externas. Integrar contenido dinámico en las aplicaciones. Acceder a recursos y servicios de terceros. Sincronizar y actualizar información en aplicaciones. Ventajas de Hacer Fetch a una API # Dinamismo: Las APIs externas permiten que tus aplicaciones se mantengan actualizadas y ricas en contenido dinámico.\nReutilización: Puedes aprovechar los datos y recursos proporcionados por APIs existentes en lugar de recrearlos desde cero.\nEconomía de Recursos: Al utilizar servicios de terceros, ahorras tiempo y recursos al no tener que desarrollar todas las funcionalidades internamente.\nSintaxis Básica de Fetch en React # fetch(\u0026#34;https://api.example.com/data\u0026#34;) .then((response) =\u0026gt; response.json()) .then((data) =\u0026gt; { console.log(\u0026#34;Data from API:\u0026#34;, data); }) .catch((error) =\u0026gt; { console.error(\u0026#34;Error fetching data:\u0026#34;, error); }); En este ejemplo, fetch se utiliza para realizar una solicitud GET a la URL proporcionada. Luego, los métodos .then() se encadenan para procesar la respuesta y los datos.\nEjemplos Prácticos # Uso de fetch con then # import React, { useState, useEffect } from \u0026#34;react\u0026#34;; function FetchWithThenExample() { const [data, setData] = useState([]); useEffect(() =\u0026gt; { fetch(\u0026#34;https://api.example.com/posts\u0026#34;) .then((response) =\u0026gt; response.json()) .then((jsonData) =\u0026gt; setData(jsonData)) .catch((error) =\u0026gt; { console.error(\u0026#34;Error fetching data:\u0026#34;, error); }); }, []); return ( \u0026lt;div\u0026gt; \u0026lt;h2\u0026gt;Posts from API:\u0026lt;/h2\u0026gt; \u0026lt;ul\u0026gt; {data.map((post) =\u0026gt; ( \u0026lt;li key={post.id}\u0026gt;{post.title}\u0026lt;/li\u0026gt; ))} \u0026lt;/ul\u0026gt; \u0026lt;/div\u0026gt; ); } export default FetchWithThenExample; Uso de fetch con async/await # import React, { useState, useEffect } from \u0026#34;react\u0026#34;; function FetchWithAsyncAwaitExample() { const [data, setData] = useState([]); async function fetchData() { try { const response = await fetch(\u0026#34;https://api.example.com/comments\u0026#34;); const jsonData = await response.json(); setData(jsonData); } catch (error) { console.error(\u0026#34;Error fetching data:\u0026#34;, error); } } useEffect(() =\u0026gt; { fetchData(); }, []); return ( \u0026lt;div\u0026gt; \u0026lt;h2\u0026gt;Comments from API:\u0026lt;/h2\u0026gt; \u0026lt;ul\u0026gt; {data.map((comment) =\u0026gt; ( \u0026lt;li key={comment.id}\u0026gt;{comment.body}\u0026lt;/li\u0026gt; ))} \u0026lt;/ul\u0026gt; \u0026lt;/div\u0026gt; ); } export default FetchWithAsyncAwaitExample; Buenas Prácticas: Custom Hooks para Fetch # Un enfoque limpio y reutilizable para hacer Fetch a una API es crear un custom hook. Aquí hay un ejemplo de cómo podrías hacerlo:\nimport { useState, useEffect } from \u0026#34;react\u0026#34;; function useFetch(url) { const [data, setData] = useState([]); const [loading, setLoading] = useState(true); async function fetchData() { try { const response = await fetch(url); const jsonData = await response.json(); setData(jsonData); setLoading(false); } catch (error) { console.error(\u0026#34;Error fetching data:\u0026#34;, error); setLoading(false); } } useEffect(() =\u0026gt; { fetchData(); }, []); return { data, loading }; } export default useFetch; Puedes usar este custom hook en tus componentes:\nimport React from \u0026#34;react\u0026#34;; import useFetch from \u0026#34;./useFetch\u0026#34;; function CustomHookExample() { const { data, loading } = useFetch(\u0026#34;https://api.example.com/data\u0026#34;); return ( \u0026lt;div\u0026gt; {loading ? ( \u0026lt;p\u0026gt;Loading...\u0026lt;/p\u0026gt; ) : ( \u0026lt;ul\u0026gt; {data.map((item) =\u0026gt; ( \u0026lt;li key={item.id}\u0026gt;{item.name}\u0026lt;/li\u0026gt; ))} \u0026lt;/ul\u0026gt; )} \u0026lt;/div\u0026gt; ); } export default CustomHookExample; Hacer Fetch a APIs externas en React es una habilidad esencial para crear aplicaciones interactivas y dinámicas que se conectan con el mundo exterior. La Fetch API proporciona una forma sencilla y poderosa de realizar solicitudes HTTP y obtener datos en tiempo real. A través de ejemplos prácticos, hemos explorado cómo usar fetch con then y async/await, así como cómo implementar un custom hook reutilizable para manejar solicitudes a APIs de manera eficiente. Con esta capacidad en tu caja de herramientas, estarás listo para construir aplicaciones que se comunican con el mundo y ofrecen experiencias enriquecedoras a los usuarios.\n","date":"30 agosto 2023","permalink":"/platform/react/fetch_api/intro/","section":"Reacts","summary":"En el ecosistema de desarrollo web moderno, interactuar con APIs externas es esencial para construir aplicaciones ricas en datos y funcionalidad.","title":"Explorando Fetch API en React"},{"content":"Introducción # En el emocionante mundo de la programación frontend, ReactJS se destaca como una biblioteca líder que permite construir interfaces de usuario dinámicas y eficientes. A medida que avanzamos en nuestras habilidades, es esencial profundizar en conceptos clave como los eventos JSX y los Hooks. En este artículo, no solo recordaremos qué son los eventos JSX y los Hooks, sino que también exploraremos cómo combinarlos para crear componentes más interactivos y potentes en ReactJS.\nRecordatorio: Eventos JSX y Hooks # Eventos JSX # Los eventos JSX son una parte esencial de ReactJS que nos permiten responder a la interacción del usuario, como clics de botones, entradas de teclado y más. Estos eventos son declarados directamente en los elementos JSX usando sintaxis similar a HTML, pero con algunas diferencias clave. Por ejemplo, en lugar de usar onclick, usamos onClick, y en lugar de pasar una cadena de JavaScript como valor, pasamos una función.\nHooks # Los Hooks son funciones especiales proporcionadas por React para interactuar con el estado y el ciclo de vida en componentes funcionales. Introducidos en React 16.8, los Hooks nos permiten agregar características como el estado local, efectos secundarios y más a componentes que no son clases.\nUso Combinado de Eventos JSX y Hooks # Por Qué Usarlos Juntos # Combinar eventos JSX y Hooks es una estrategia poderosa para crear componentes interactivos y funcionales. Al utilizar Hooks, podemos manejar el estado local y los efectos secundarios, mientras que los eventos JSX nos permiten detectar y responder a la interacción del usuario. Esta combinación abre la puerta a experiencias de usuario más ricas y a la creación de componentes altamente reutilizables.\nVentajas de Combinar Eventos JSX y Hooks # Claridad del Código: Al separar la lógica de los eventos JSX y los efectos secundarios en Hooks, nuestro código se vuelve más claro y modular.\nInteracción Dinámica: Combinar eventos JSX y Hooks nos permite crear interfaces interactivas que responden de manera fluida a la interacción del usuario.\nReutilización: Los componentes construidos con esta combinación son más reutilizables, ya que los Hooks encapsulan la lógica subyacente.\nCuándo Usarlos # Usa eventos JSX y Hooks en situaciones donde quieras que tu interfaz de usuario sea altamente interactiva, pero también quieras mantener un código limpio y modular. Algunos casos de uso incluyen:\nFormularios Interactivos: Utiliza eventos JSX para manejar la entrada del usuario en formularios y Hooks para administrar el estado.\nComponentes Dinámicos: Combina eventos JSX y Hooks para construir componentes que cambian su estado o presentación en respuesta a la interacción del usuario.\nEfectos Visuales: Utiliza eventos JSX para activar cambios visuales, como animaciones, y Hooks para gestionar la lógica detrás de ellos.\nSintaxis Básica de Eventos JSX y Hooks # Eventos JSX # import React, { useState } from \u0026#34;react\u0026#34;; function EventExample() { const [counter, setCounter] = useState(0); const handleIncrement = () =\u0026gt; { setCounter(counter + 1); }; return ( \u0026lt;div\u0026gt; \u0026lt;p\u0026gt;Contador: {counter}\u0026lt;/p\u0026gt; \u0026lt;button onClick={handleIncrement}\u0026gt;Incrementar\u0026lt;/button\u0026gt; \u0026lt;/div\u0026gt; ); } Hooks # import React, { useState, useEffect } from \u0026#34;react\u0026#34;; function HookExample() { const [data, setData] = useState([]); useEffect(() =\u0026gt; { fetchData().then((response) =\u0026gt; { setData(response); }); }, []); return ( \u0026lt;div\u0026gt; \u0026lt;ul\u0026gt; {data.map((item, index) =\u0026gt; ( \u0026lt;li key={index}\u0026gt;{item.name}\u0026lt;/li\u0026gt; ))} \u0026lt;/ul\u0026gt; \u0026lt;/div\u0026gt; ); } Ejemplos de Uso Combinado de Eventos JSX y Hooks # Ejemplo 1: Interacción con Formularios # import React, { useState } from \u0026#34;react\u0026#34;; function FormExample() { const [inputValue, setInputValue] = useState(\u0026#34;\u0026#34;); const [submittedValue, setSubmittedValue] = useState(\u0026#34;\u0026#34;); const handleSubmit = (event) =\u0026gt; { event.preventDefault(); setSubmittedValue(inputValue); }; return ( \u0026lt;div\u0026gt; \u0026lt;form onSubmit={handleSubmit}\u0026gt; \u0026lt;input type=\u0026#34;text\u0026#34; value={inputValue} onChange={(e) =\u0026gt; setInputValue(e.target.value)} /\u0026gt; \u0026lt;button type=\u0026#34;submit\u0026#34;\u0026gt;Enviar\u0026lt;/button\u0026gt; \u0026lt;/form\u0026gt; \u0026lt;p\u0026gt;Valor enviado: {submittedValue}\u0026lt;/p\u0026gt; \u0026lt;/div\u0026gt; ); } Ejemplo 2: Cambio de Estilo Dinámico # import React, { useState } from \u0026#34;react\u0026#34;; function StyleExample() { const [isHighlighted, setIsHighlighted] = useState(false); const handleToggleHighlight = () =\u0026gt; { setIsHighlighted(!isHighlighted); }; const dynamicStyle = { backgroundColor: isHighlighted ? \u0026#34;yellow\u0026#34; : \u0026#34;white\u0026#34;, padding: \u0026#34;10px\u0026#34;, borderRadius: \u0026#34;4px\u0026#34;, }; return ( \u0026lt;div style={dynamicStyle} onClick={handleToggleHighlight}\u0026gt; \u0026lt;p\u0026gt;Haz clic para resaltar\u0026lt;/p\u0026gt; \u0026lt;/div\u0026gt; ); } Ejemplo 3: Uso de Efectos Secundarios # import React, { useState, useEffect } from \u0026#34;react\u0026#34;; function EffectExample() { const [windowWidth, setWindowWidth] = useState(window.innerWidth); const handleResize = () =\u0026gt; { setWindowWidth(window.innerWidth); }; useEffect(() =\u0026gt; { window.addEventListener(\u0026#34;resize\u0026#34;, handleResize); return () =\u0026gt; { window.removeEventListener(\u0026#34;resize\u0026#34;, handleResize); }; }, []); return ( \u0026lt;div\u0026gt; \u0026lt;p\u0026gt;Ancho de la ventana: {windowWidth}px\u0026lt;/p\u0026gt; \u0026lt;/div\u0026gt; ); } La combinación de eventos JSX y Hooks es una habilidad valiosa en el arsenal de cualquier desarrollador React. Al usar estos dos conceptos juntos, podemos crear componentes interactivos, dinámicos y fáciles de mantener. Los eventos JSX nos permiten detectar la interacción del usuario, mientras que los Hooks nos brindan la capacidad de manejar el estado local y los efectos secundarios. A medida que te adentres en el mundo de ReactJS, dominar esta combinación te permitirá construir interfaces de usuario sofisticadas y ricas en funcionalidades.\nRecursos # Mira las siguientes secciones de este video:\nEvent Handlers (Empieza en el minuto: 1:54:34) Fetch API (Minuto: 2:08:51) React Hooks (Minuto: 2:36:05) UseState (Minuto: 2:38:52) UseEffect (Minuto: 2:55:19) ","date":"30 agosto 2023","permalink":"/platform/react/events_hooks/","section":"Reacts","summary":"Introducción # En el emocionante mundo de la programación frontend, ReactJS se destaca como una biblioteca líder que permite construir interfaces de usuario dinámicas y eficientes.","title":"Eventos JSX y Hooks"},{"content":"En el vasto mundo de la programación JavaScript, trabajar con operaciones asíncronas ha sido históricamente un desafío. La introducción de async/await ha revolucionado la forma en que manejamos la asincronía en nuestro código, haciendo que sea más legible, comprensible y eficiente. En este artículo, exploraremos en profundidad el concepto de async/await, su utilidad, ventajas, ejemplos prácticos y cómo puede mejorar la calidad y mantenibilidad de nuestro código JavaScript.\n¿Qué es async/await? # async/await es una sintaxis introducida en ECMAScript 2017 (ES8) que proporciona una forma más concisa y legible de trabajar con operaciones asíncronas en JavaScript. Permite que las funciones asíncronas se escriban de manera secuencial, similar a cómo escribiríamos código síncrono, sin bloquear el hilo de ejecución.\n¿Por qué usar async/await? # La necesidad de manejar operaciones asíncronas surge en situaciones donde las tareas pueden demorar, como solicitudes a APIs, lectura de archivos o acceso a bases de datos. async/await se ha convertido en la elección preferida para abordar la asincronía por varias razones:\nLegibilidad: La sintaxis async/await hace que el código asíncrono sea más similar al código síncrono, lo que facilita la comprensión y el mantenimiento del código.\nGestión de Errores: async/await simplifica la captura de errores al permitir el uso de bloques try/catch alrededor de operaciones asincrónicas.\nFlujo Secuencial: A diferencia de las devoluciones de llamada (callbacks) y las promesas anidadas, async/await permite que el flujo del programa se mantenga secuencial, lo que mejora la legibilidad.\nVentajas de usar async/await # Claridad: La sintaxis async/await facilita la comprensión de la lógica asíncrona y mejora la legibilidad del código.\nManejo de Errores: Puedes usar bloques try/catch para manejar errores de manera más eficiente y capturar problemas en operaciones asíncronas.\nSecuencialidad: async/await permite escribir código en un estilo más secuencial, evitando la pirámide de devoluciones de llamada anidadas.\nCuándo usar async/await # async/await es especialmente útil en situaciones donde se realizan operaciones asincrónicas que dependen del resultado de otras operaciones. Puedes usarlo en:\nLlamadas a APIs: Realiza solicitudes a APIs y maneja los datos de respuesta de manera más sencilla.\nLectura/Escritura de Archivos: Lee y escribe archivos de manera más concisa y legible.\nAcceso a Bases de Datos: Maneja operaciones de base de datos sin anidar múltiples niveles de promesas.\nSintaxis Básica de async/await # async function fetchData() { try { const response = await fetch(\u0026#34;https://api.example.com/data\u0026#34;); const data = await response.json(); return data; } catch (error) { console.error(\u0026#34;Error fetching data:\u0026#34;, error); throw error; } } En este ejemplo, la función fetchData es asíncrona (async) y utiliza await para esperar la respuesta de la solicitud y luego transformarla en formato JSON.\nEjemplo de uso: Llamada sencilla a API # async function getUserInfo(userId) { try { const response = await fetch(`https://api.example.com/users/${userId}`); const userData = await response.json(); return userData; } catch (error) { console.error(\u0026#34;Error fetching user data:\u0026#34;, error); throw error; } } En este ejemplo, la función getUserInfo realiza una llamada a una API para obtener información de usuario.\nAplicación en React # En este ejemplo, utilizaremos async/await para cargar datos de una API y mostrarlos en un componente React.\nimport React, { useState, useEffect } from \u0026#34;react\u0026#34;; function DataFetchingComponent() { const [data, setData] = useState([]); useEffect(() =\u0026gt; { async function fetchData() { try { const response = await fetch(\u0026#34;https://api.example.com/data\u0026#34;); const jsonData = await response.json(); setData(jsonData); } catch (error) { console.error(\u0026#34;Error fetching data:\u0026#34;, error); } } fetchData(); }, []); return ( \u0026lt;div\u0026gt; \u0026lt;h2\u0026gt;Data from API:\u0026lt;/h2\u0026gt; \u0026lt;ul\u0026gt; {data.map((item, index) =\u0026gt; ( \u0026lt;li key={index}\u0026gt;{item.name}\u0026lt;/li\u0026gt; ))} \u0026lt;/ul\u0026gt; \u0026lt;/div\u0026gt; ); } export default DataFetchingComponent; En este ejemplo, la función fetchData se ejecuta dentro del useEffect utilizando async/await para cargar los datos de una API. Una vez que los datos se cargan, se actualiza el estado data con el resultado.\nasync/await ha revolucionado la forma en que manejamos la asincronía en JavaScript. Su sintaxis clara y concisa, junto con su capacidad para simplificar el manejo de errores y secuenciar operaciones asíncronas, lo convierten en una herramienta esencial en el kit de cualquier desarrollador moderno. A medida que profundices en su uso, estarás mejor preparado para crear aplicaciones más efectivas y de alta calidad, enriqueciendo la experiencia tanto para los desarrolladores como para los usuarios.\nRecursos # ","date":"29 agosto 2023","permalink":"/platform/react/async_await/","section":"Reacts","summary":"En el vasto mundo de la programación JavaScript, trabajar con operaciones asíncronas ha sido históricamente un desafío.","title":"async/await en JavaScript y React"},{"content":"En el mundo del desarrollo web moderno, las aplicaciones de una sola página (Single Page Applications, SPAs) han ganado popularidad debido a su capacidad para ofrecer experiencias de usuario fluidas y receptivas. Sin embargo, la gestión de la navegación en una SPA puede ser un desafío. Es aquí donde entra en juego React Router, una biblioteca que proporciona un enfoque declarativo y eficiente para manejar la navegación en aplicaciones web construidas con React.\n¿Qué es React Router? # React Router es una biblioteca de enrutamiento diseñada específicamente para aplicaciones web construidas con React. Permite la creación de aplicaciones de una sola página que pueden cambiar dinámicamente de contenido sin tener que recargar completamente la página. React Router ofrece un conjunto de componentes que facilitan la definición de rutas y la navegación entre diferentes vistas de la aplicación.\nRazones para usar React Router # Declarativo y Componente-Centrico: React Router permite definir las rutas y la navegación utilizando componentes de React. Esto sigue el enfoque declarativo de React en el que se describe cómo debería lucir la interfaz de usuario en función del estado y los datos, lo que facilita la comprensión y el mantenimiento del código.\nNavegación Sin Recarga de Página: React Router permite la navegación entre diferentes vistas de la aplicación sin necesidad de recargar completamente la página. Esto resulta en una experiencia de usuario más fluida y rápida, ya que solo el contenido relevante se actualiza en función de la ruta seleccionada.\nGestión de Historial: React Router maneja automáticamente el historial del navegador, lo que permite a los usuarios utilizar los botones \u0026ldquo;Atrás\u0026rdquo; y \u0026ldquo;Adelante\u0026rdquo; del navegador para navegar entre las vistas previas y siguientes en la aplicación.\nManejo de Rutas Anidadas: Las aplicaciones web modernas suelen tener rutas anidadas, es decir, rutas que dependen de la jerarquía de componentes. React Router ofrece una forma intuitiva de manejar estas rutas anidadas y mantener el enrutamiento limpio y organizado.\nVentajas de usar React Router # Legibilidad y Organización: Al definir las rutas como componentes de React, el enrutamiento se integra de manera más natural con el código de la aplicación. Esto hace que el código sea más legible y fácil de mantener, especialmente en aplicaciones con rutas complejas.\nGestión Centralizada: React Router centraliza la lógica de enrutamiento, lo que facilita el seguimiento y la gestión de todas las rutas en un solo lugar.\nIntegración con React: Al estar diseñado específicamente para integrarse con React, React Router se integra sin problemas en el flujo de trabajo de desarrollo de React y se aprovecha de sus características, como el estado y los componentes.\nCuándo usar React Router # React Router es ideal cuando estás construyendo aplicaciones web de una sola página que requieren una navegación fluida y una experiencia de usuario enriquecida. Algunos casos comunes en los que React Router es una excelente elección incluyen:\nAplicaciones web y paneles de administración. Plataformas de comercio electrónico con múltiples páginas y vistas. Sitios de noticias y blogs con artículos y categorías. Plataformas de redes sociales con perfiles de usuarios y flujos de noticias. Sintaxis Básica de React Router # React Router proporciona tres componentes principales para la configuración básica de enrutamiento: BrowserRouter, Route y Link. A continuación, se presenta una descripción general de su uso:\nBrowserRouter: Es el componente que debe envolver toda la aplicación. Proporciona la funcionalidad de manejo de historial del navegador y asegura que las rutas funcionen correctamente.\nRoute: Se utiliza para definir cómo se debe renderizar un componente cuando la ruta coincide con la URL actual. Puede aceptar propiedades como path para la ruta y component para el componente que debe renderizarse.\nLink: Proporciona una forma declarativa de crear enlaces entre diferentes rutas. Al hacer clic en un enlace creado con Link, React Router navegará a la nueva ruta sin recargar la página.\nInstalación # Una vez que tienes tu proyecto de React, instala React Router utilizando npm. Puedes elegir entre tres paquetes diferentes de React Router, según tus necesidades:\nreact-router-dom: Paquete para la web, que incluye enrutamiento y navegación para aplicaciones en el navegador. react-router-native: Paquete para aplicaciones React Native. react-router: Paquete base que proporciona la lógica central de enrutamiento (generalmente no se usa directamente). En este ejemplo, usaremos react-router-dom, que es el paquete para aplicaciones web. Ejecuta uno de los siguientes comandos en tu terminal:\nnpm install react-router-dom Ejemplos de Uso de React Router # A continuación, se presentan tres ejemplos de cómo se puede utilizar React Router en una aplicación de React:\nEjemplo 1: Navegación Básica # Supongamos que estamos construyendo un sitio web de noticias con dos páginas: una página de inicio y una página de artículos. El componente App podría lucir así:\nimport React from \u0026#34;react\u0026#34;; import { BrowserRouter, Routes, Route, Link } from \u0026#34;react-router-dom\u0026#34;; import HomePage from \u0026#34;./HomePage\u0026#34;; import ArticlePage from \u0026#34;./ArticlePage\u0026#34;; function App() { return ( \u0026lt;BrowserRouter\u0026gt; \u0026lt;nav\u0026gt; \u0026lt;Link to=\u0026#34;/\u0026#34;\u0026gt;Inicio\u0026lt;/Link\u0026gt; \u0026lt;Link to=\u0026#34;/articulos\u0026#34;\u0026gt;Artículos\u0026lt;/Link\u0026gt; \u0026lt;/nav\u0026gt; \u0026lt;Routes\u0026gt; \u0026lt;Route path=\u0026#34;/\u0026#34; element={\u0026lt;HomePage /\u0026gt;} /\u0026gt; \u0026lt;Route path=\u0026#34;/articulos\u0026#34; element={\u0026lt;ArticlePage /\u0026gt;} /\u0026gt; \u0026lt;/Routes\u0026gt; \u0026lt;/BrowserRouter\u0026gt; ); } export default App; Ejemplo 2: Rutas Anidadas # Imagina que estamos construyendo una aplicación de administración con rutas anidadas para usuarios y configuración. El enrutamiento podría tener la siguiente estructura:\nimport React from \u0026#34;react\u0026#34;; import { BrowserRouter, Routes, Route, Link } from \u0026#34;react-router-dom\u0026#34;; import Dashboard from \u0026#34;./Dashboard\u0026#34;; import UserProfile from \u0026#34;./UserProfile\u0026#34;; import Settings from \u0026#34;./Settings\u0026#34;; function App() { return ( \u0026lt;BrowserRouter\u0026gt; \u0026lt;nav\u0026gt; \u0026lt;Link to=\u0026#34;/\u0026#34;\u0026gt;Tablero\u0026lt;/Link\u0026gt; \u0026lt;Link to=\u0026#34;/usuario\u0026#34;\u0026gt;Usuario\u0026lt;/Link\u0026gt; \u0026lt;Link to=\u0026#34;/configuracion\u0026#34;\u0026gt;Configuración\u0026lt;/Link\u0026gt; \u0026lt;/nav\u0026gt; \u0026lt;Routes\u0026gt; \u0026lt;Route path=\u0026#34;/\u0026#34; element={\u0026lt;Dashboard /\u0026gt;} /\u0026gt; \u0026lt;Route path=\u0026#34;/usuario\u0026#34; element={\u0026lt;UserProfile /\u0026gt;} /\u0026gt; \u0026lt;Route path=\u0026#34;/configuracion\u0026#34; element={\u0026lt;Settings /\u0026gt;} /\u0026gt; \u0026lt;/Routes\u0026gt; \u0026lt;/BrowserRouter\u0026gt; ); } export default App; Ejemplo 3: Paso de Parámetros # En una aplicación de comercio electrónico, podríamos querer mostrar detalles de productos individuales. Para lograrlo, podríamos usar parámetros en las rutas para identificar productos específicos:\nimport React from \u0026#34;react\u0026#34;; import { BrowserRouter, Routes, Route, Link, useParams, } from \u0026#34;react-router-dom\u0026#34;; import ProductList from \u0026#34;./ProductList\u0026#34;; import ProductDetail from \u0026#34;./ProductDetail\u0026#34;; function App() { return ( \u0026lt;BrowserRouter\u0026gt; \u0026lt;nav\u0026gt; \u0026lt;Link to=\u0026#34;/\u0026#34;\u0026gt;Productos\u0026lt;/Link\u0026gt; \u0026lt;/nav\u0026gt; \u0026lt;Routes\u0026gt; \u0026lt;Route path=\u0026#34;/\u0026#34; element={\u0026lt;ProductList /\u0026gt;} /\u0026gt; \u0026lt;Route path=\u0026#34;/producto/:id\u0026#34; element={\u0026lt;ProductDetail /\u0026gt;} /\u0026gt; \u0026lt;/Routes\u0026gt; \u0026lt;/BrowserRouter\u0026gt; ); } export default App; Recursos # Por el momento solo mira el primer video desde el minuto 3:26 hasta el 14:31. El segundo puedes verlo completo.\n","date":"29 agosto 2023","permalink":"/platform/react/react_router/","section":"Reacts","summary":"En el mundo del desarrollo web moderno, las aplicaciones de una sola página (Single Page Applications, SPAs) han ganado popularidad debido a su capacidad para ofrecer experiencias de usuario fluidas y receptivas.","title":"React Router"},{"content":"En el ecosistema de desarrollo web actual, React se destaca como una de las bibliotecas más populares y versátiles para construir interfaces de usuario dinámicas y efectivas. Uno de los conceptos fundamentales en React es el uso de \u0026ldquo;props\u0026rdquo; (abreviatura de \u0026ldquo;properties\u0026rdquo; o propiedades en español), que permite pasar y compartir datos entre componentes de manera eficiente. En este artículo, exploraremos en detalle qué son las props en React, cómo se utilizan y proporcionaremos ejemplos prácticos para ilustrar su aplicación.\nIntroducción a las Props # Las props son un mecanismo esencial para comunicar datos entre componentes en una aplicación React. Permiten que un componente padre pase información a sus componentes hijos, lo que fomenta la reutilización y la modularidad en el diseño de la interfaz de usuario. A diferencia del estado interno de un componente, las props son inmutables, lo que significa que no se pueden modificar directamente desde el componente hijo.\nUso de Props # La sintaxis básica para pasar props a un componente funcional es la siguiente:\nfunction MiComponente(props) { return \u0026lt;p\u0026gt;{props.mensaje}\u0026lt;/p\u0026gt;; } En este ejemplo, mensaje es una prop que se pasa desde el componente padre cuando se instancia MiComponente.\nLo que Puedes Hacer con Props # Pasar Datos: Las props son utilizadas para enviar información desde un componente padre a un componente hijo. Esto puede incluir cualquier tipo de dato, como cadenas de texto, números, objetos e incluso funciones.\nConfigurar Componentes: Las props permiten configurar el comportamiento y la apariencia de los componentes hijos. Por ejemplo, puedes ajustar el contenido de un componente botón o la información que se muestra en una tarjeta.\nComunicación Componente a Componente: Las props son la base para establecer una comunicación efectiva entre componentes en la jerarquía. Los cambios en las props de un componente pueden provocar actualizaciones en el rendimiento de sus componentes hijos.\nLo que No Puedes Hacer con Props # Modificar Props Directamente: Las props son de solo lectura y no pueden modificarse directamente desde el componente hijo. Esto se debe a que React maneja la administración y el flujo de datos de manera unidireccional, desde el componente padre al hijo.\nUsar Props como Estado Interno: Las props son ideales para pasar datos, pero no deben utilizarse como estado interno de un componente. Si un componente necesita almacenar y administrar datos que pueden cambiar con el tiempo, debe usar el estado local (por ejemplo, el Hook useState()).\nCompartir Datos entre Componentes no Relacionados: Las props son una herramienta para comunicar datos entre componentes en una jerarquía padre-hijo. No deben utilizarse para compartir datos entre componentes que no tienen relación directa.\nEjemplos Prácticos de Uso de Props # Ejemplo 1: Pasando un Mensaje # import React from \u0026#34;react\u0026#34;; function Mensaje(props) { return \u0026lt;p\u0026gt;{props.texto}\u0026lt;/p\u0026gt;; } function App() { return \u0026lt;Mensaje texto=\u0026#34;¡Hola, React!\u0026#34; /\u0026gt;; } export default App; En este ejemplo, tenemos dos componentes. El componente Mensaje es un componente funcional que acepta una prop llamada texto. Dentro de su cuerpo, utiliza esta prop para mostrar un mensaje en un elemento p (párrafo). El componente App es el componente principal que utiliza el componente Mensaje, pasándole la prop texto con el valor \u0026quot;¡Hola, React!\u0026quot;. Como resultado, cuando App se renderiza, se muestra el mensaje \u0026quot;¡Hola, React!\u0026quot; en el componente Mensaje.\nEjemplo 2: Configurando un Botón # import React from \u0026#34;react\u0026#34;; function Boton(props) { return ( \u0026lt;button style={{ backgroundColor: props.color }}\u0026gt;{props.label}\u0026lt;/button\u0026gt; ); } function App() { return ( \u0026lt;div\u0026gt; \u0026lt;Boton color=\u0026#34;blue\u0026#34; label=\u0026#34;Aceptar\u0026#34; /\u0026gt; \u0026lt;Boton color=\u0026#34;red\u0026#34; label=\u0026#34;Cancelar\u0026#34; /\u0026gt; \u0026lt;/div\u0026gt; ); } export default App; En este ejemplo, creamos el componente Boton, que acepta dos props: color y label. El componente renderiza un botón con el estilo de fondo configurado según la prop color, y muestra el texto de la prop label en el botón. Luego, en el componente App, utilizamos dos instancias de Boton para crear botones \u0026ldquo;Aceptar\u0026rdquo; y \u0026ldquo;Cancelar\u0026rdquo; con diferentes colores de fondo y etiquetas. Esto ilustra cómo las props pueden configurar la apariencia y el contenido de los componentes.\nEjemplo 3: Lista de Elementos # import React from \u0026#34;react\u0026#34;; function Lista(props) { return ( \u0026lt;ul\u0026gt; {props.elementos.map((elemento, index) =\u0026gt; ( \u0026lt;li key={index}\u0026gt;{elemento}\u0026lt;/li\u0026gt; ))} \u0026lt;/ul\u0026gt; ); } function App() { const elementos = [\u0026#34;Manzana\u0026#34;, \u0026#34;Banana\u0026#34;, \u0026#34;Naranja\u0026#34;]; return \u0026lt;Lista elementos={elementos} /\u0026gt;; } export default App; En este último ejemplo, creamos el componente Lista que acepta una prop llamada elementos, que es una matriz de elementos. Dentro de su cuerpo, utilizamos map() para recorrer cada elemento en la matriz y renderizar un elemento li (elemento de lista) para cada uno. El componente App define una matriz llamada elementos con tres frutas y luego pasa esta matriz como la prop elementos al componente Lista. Como resultado, se renderiza una lista con los elementos \u0026ldquo;Manzana\u0026rdquo;, \u0026ldquo;Banana\u0026rdquo; y \u0026ldquo;Naranja\u0026rdquo;.\nLas props son una parte fundamental del enfoque de React para construir interfaces de usuario modulares y reutilizables. Permiten a los componentes comunicarse entre sí de manera eficiente, pasando datos y configurando comportamientos. Sin embargo, es importante tener en cuenta sus limitaciones, como su naturaleza de solo lectura y su uso adecuado en la jerarquía de componentes. Al comprender cómo funcionan las props y cómo se integran en el flujo de datos de React, los desarrolladores pueden crear aplicaciones más estructuradas y mantenibles.\nRecursos # Este video tiene marcado el inicio y el final específico.\n","date":"25 agosto 2023","permalink":"/platform/react/props/","section":"Reacts","summary":"En el ecosistema de desarrollo web actual, React se destaca como una de las bibliotecas más populares y versátiles para construir interfaces de usuario dinámicas y efectivas.","title":"Props en React"},{"content":"JavaScript puede enviar peticiones de red al servidor y cargar nueva información siempre que se necesite.\nPor ejemplo, podemos utilizar una petición de red para:\nCrear una orden, Cargar información de usuario, Recibir las últimas actualizaciones desde un servidor, …etc. …Y todo esto sin la necesidad de refrescar la página.\nSe utiliza el término global “AJAX” (abreviado Asynchronous JavaScript And XML, en español: “JavaScript y XML Asincrónico”) para referirse a las peticiones de red originadas desde JavaScript. Sin embargo, no estamos necesariamente condicionados a utilizar XML dado que el término es antiguo y es por esto que el acrónimo XML se encuentra aquí. Probablemente lo hayáis visto anteriormente.\nExisten múltiples maneras de enviar peticiones de red y obtener información de un servidor.\nComenzaremos con el el método fetch() que es moderno y versátil. Este método no es soportado por navegadores antiguos (sin embargo se puede incluir un polyfill), pero es perfectamente soportado por los navegadores actuales y modernos.\nLa sintaxis básica es la siguiente:\nlet promise = fetch(url, [options]) url – representa la dirección URL a la que deseamos acceder. options – representa los parámetros opcionales, como puede ser un método o los encabezados de nuestra petición, etc. Este método puede parece confuso, debido a que usa un concepto llamado “promesas” y asincronía. Pero no te preocupes, en los siguientes ejemplos veremos cómo funciona.\nEn este video entenderemos de manera sencilla como funciona el método fetch().\nEjercicio de Consumo de API\u0026rsquo;s # En el siguiente video de Fazt aprenderás a consumir una API de forma sencilla.\n","date":"14 agosto 2023","permalink":"/platform/jsvanilla/fetch/","section":"Jsvanillas","summary":"JavaScript puede enviar peticiones de red al servidor y cargar nueva información siempre que se necesite.","title":"Fetch"},{"content":"La integración de bases de datos es una parte fundamental en el desarrollo de aplicaciones web modernas. Laravel, un popular marco de desarrollo web en PHP, ofrece una integración fluida con diferentes sistemas de gestión de bases de datos, siendo MySQL una opción destacada. En este artículo, exploramos en detalle la integración de MySQL en Laravel, desde la configuración hasta la interacción con la base de datos utilizando el potente ORM Eloquent. También examinamos las mejores prácticas y ventajas de aprovechar esta combinación en el desarrollo de aplicaciones robustas y escalables.\n1. Introducción a la Integración con MySQL en Laravel # La elección del sistema de gestión de bases de datos adecuado es esencial para garantizar la persistencia de datos en una aplicación web. MySQL, un sistema de gestión de bases de datos relacional, es ampliamente utilizado y conocido por su rendimiento y confiabilidad. Laravel simplifica la interacción con MySQL a través de su ORM Eloquent, lo que permite a los desarrolladores manipular datos de manera eficiente y elegante.\n2. Configuración de MySQL en Laravel # La configuración de MySQL en Laravel es sencilla y se realiza en el archivo .env. Los parámetros de configuración, como el nombre de la base de datos, el nombre de usuario y la contraseña, se definen aquí. Laravel utiliza la información proporcionada en este archivo para establecer la conexión con la base de datos.\n3. ORM Eloquent: Simplificando la Interacción con MySQL # Eloquent es el ORM incorporado en Laravel que simplifica enormemente la interacción con MySQL. Los modelos Eloquent representan tablas de la base de datos y permiten a los desarrolladores realizar operaciones de consulta y manipulación de datos utilizando una sintaxis de alto nivel, en lugar de escribir consultas SQL directamente. Algunas características clave de Eloquent incluyen:\n3.1. Definición de Modelos # Los modelos Eloquent se crean como clases PHP que extienden la clase base Illuminate\\Database\\Eloquent\\Model. Cada modelo se relaciona con una tabla en la base de datos y define propiedades y métodos para interactuar con ella.\n3.2. Consultas Fluentes # Laravel ofrece una serie de métodos encadenados que permiten construir consultas de manera legible y eficiente. Por ejemplo, -\u0026gt;select(), -\u0026gt;where(), -\u0026gt;orderBy(), entre otros, se pueden encadenar para construir consultas complejas.\n3.3. Relaciones # Eloquent facilita el establecimiento de relaciones entre diferentes tablas de la base de datos. Las relaciones como \u0026ldquo;uno a uno\u0026rdquo;, \u0026ldquo;uno a muchos\u0026rdquo; y \u0026ldquo;muchos a muchos\u0026rdquo; se definen mediante métodos en los modelos y permiten acceder a los datos relacionados de manera intuitiva.\n3.4. CRUD Sencillo # Eloquent simplifica las operaciones CRUD (Crear, Leer, Actualizar, Eliminar) mediante métodos como create(), find(), update() y delete(). Estas operaciones se realizan de manera segura y eficiente, manteniendo la integridad de la base de datos.\n4. Ventajas de la Integración con MySQL en Laravel # La integración de MySQL en Laravel aporta varias ventajas significativas a los desarrolladores y a las aplicaciones web en general:\n4.1. Productividad Mejorada # Eloquent y las consultas fluentes permiten a los desarrolladores escribir código más limpio y conciso, lo que resulta en un flujo de trabajo más productivo. La abstracción de la base de datos reduce la necesidad de escribir consultas SQL complejas.\n4.2. Mantenibilidad # La separación de la lógica de la base de datos en modelos Eloquent mejora la mantenibilidad del código. Los cambios en la estructura de la base de datos se pueden realizar en los modelos, minimizando el impacto en otras partes de la aplicación.\n4.3. Seguridad # Laravel incluye protecciones contra ataques de inyección SQL y otras vulnerabilidades comunes, lo que garantiza un nivel adicional de seguridad al interactuar con MySQL.\n4.4. Flexibilidad # La combinación de Laravel y MySQL permite a los desarrolladores aprovechar las características avanzadas de ambas tecnologías, creando aplicaciones web flexibles y escalables.\nLa integración de MySQL en Laravel a través de su ORM Eloquent simplifica y optimiza la interacción con bases de datos en aplicaciones web modernas. Esta combinación proporciona una forma elegante de realizar operaciones de bases de datos, mejora la productividad del desarrollo y garantiza la seguridad y escalabilidad de las aplicaciones. Los desarrolladores que aprovechan esta integración pueden crear aplicaciones web robustas y eficientes que aprovechan al máximo las ventajas de ambas tecnologías.\n","date":"11 agosto 2023","permalink":"/platform/laravel/integracion_mysql/","section":"Laravels","summary":"La integración de bases de datos es una parte fundamental en el desarrollo de aplicaciones web modernas.","title":"Integración con MySQL en Laravel"},{"content":"","date":"11 agosto 2023","permalink":"/platform/laravel/","section":"Laravels","summary":"","title":"Laravels"},{"content":"Async/await en JavaScript: # Async/await es una forma más moderna y legible de trabajar con operaciones asíncronas en JavaScript. Es una combinación de las palabras clave async y await. La declaración async se coloca antes de una función para indicar que dicha función contiene operaciones asíncronas y, por lo tanto, puede pausarse con await.\nAxios: # Axios es una biblioteca de JavaScript basada en promesas que facilita el envío de solicitudes HTTP desde el cliente al servidor y el manejo de las respuestas. Es muy popular debido a su facilidad de uso y su capacidad para funcionar tanto en navegadores como en entornos de servidor.\nAhora, veamos cómo utilizar async/await con Axios para realizar solicitudes HTTP:\nPaso 1: Instalar Axios # Para comenzar, debemos instalar Axios en nuestro proyecto. Puedes hacer esto a través de npm (Node Package Manager) si estás trabajando en un entorno de Node.js o utilizando una herramienta de construcción de módulos como webpack o parcel si estás trabajando en un entorno de navegador.\n# Si estás utilizando npm (Node.js) npm install axios # Si estás utilizando yarn (Node.js) yarn add axios Paso 2: Importar Axios # Una vez que hayas instalado Axios, puedes importarlo en tu código para comenzar a utilizarlo.\n// Si estás utilizando ES6 modules import axios from \u0026#39;axios\u0026#39;; // Si estás trabajando con CommonJS (Node.js) const axios = require(\u0026#39;axios\u0026#39;); Paso 3: Crear una función asincrónica con async/await # Vamos a crear una función asincrónica que utilizará Axios para hacer una solicitud GET a una API pública como ejemplo.\nasync function getDataFromAPI() { try { const response = await axios.get(\u0026#39;https://ejemplo.com/api/data\u0026#39;); return response.data; } catch (error) { // Manejar errores aquí, como mostrar un mensaje de error o registrarlos console.error(\u0026#39;Error al obtener los datos:\u0026#39;, error); throw error; // Opcional: lanzar el error para que lo maneje la función que llame a esta } } Paso 4: Llamar a la función asincrónica # Ahora, puedes llamar a la función getDataFromAPI() en cualquier lugar de tu código, ya que está marcada como async. Cuando hagas esta llamada, la función pausará su ejecución en la línea que contiene await, esperando a que la solicitud HTTP se resuelva. Una vez que la solicitud esté completa, la función continuará su ejecución y devolverá los datos.\nasync function fetchData() { try { const data = await getDataFromAPI(); console.log(\u0026#39;Datos obtenidos:\u0026#39;, data); } catch (error) { // Manejar errores aquí, como mostrar un mensaje de error o registrarlos console.error(\u0026#39;Error al obtener los datos:\u0026#39;, error); } } fetchData(); Puedes seguir profundizando en este tema consultando la documentación oficial de Axios y explorando más sobre las capacidades de async/await en JavaScript.\nReferencias:\nDocumentación oficial de Axios: https://axios-http.com/docs/intro Asynchronous programming in JavaScript (MDN Web Docs): https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous Exploring async/await in JavaScript (MDN Web Docs): https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Async_await ","date":"3 agosto 2023","permalink":"/platform/jssincronia/","section":"","summary":"Async/await en JavaScript: # Async/await es una forma más moderna y legible de trabajar con operaciones asíncronas en JavaScript.","title":"ASYNC AWAIT AXIOS"},{"content":"Cuando trabajamos con arrays y objetos, nos damos cuenta que podemos comenzar a manejar grandes cantidades de datos de una manera más eficiente. En esta sección aprenderemos a trabajar con estos dos tipos de estructuras de datos, y como puedes combinarlos para crear estructuras de datos más complejas.\nPartiremos tomando como base el apartado de estructuras de datos del curso de FreeCodeCamp, y lo complementaremos con otros recursos. Dentro de este curso hay 20 lecciónes así que te invito a revisarlas de manera detallada, tambien te recomiendo que, si no terminaste el apartado de javascript básico puedas completar almenos la mayoria de esas lecciones que son la base para continuar aprendiendo de estos tipos de datos :D.\nBases de Estructuras de Datos - FreeCodeCamp Así mismo te dejo otros recursos que serán utiles para complementar esa sección junto con videos de apoyo sobre el tema.\nPracticar es importante Si bien es cierto muchos de los temas pueden parecer complicados y en programación siempre habrá más información para aprender, te recomendamos que tomes pausas para realizar ejecicios en plataformas como LeetCode, CodeWars o Edabit. La práctica te permitirá asimilar mejor los temas que estás aprendiendo. Tutoriales # Referencia de objetos y copia ","date":"1 agosto 2023","permalink":"/platform/jsvanilla/data-structure/","section":"Jsvanillas","summary":"Cuando trabajamos con arrays y objetos, nos damos cuenta que podemos comenzar a manejar grandes cantidades de datos de una manera más eficiente.","title":"Estructura de Datos"},{"content":"El patrón Modelo-Vista-Controlador (MVC) es una arquitectura de diseño comúnmente utilizada en el desarrollo de aplicaciones web. En el contexto de Laravel, los controladores son la pieza fundamental del patrón MVC.\nConcepto de Controladores en Laravel: # Los controladores en Laravel son clases PHP que gestionan la lógica de la aplicación y actúan como intermediarios entre las rutas y las vistas. Se utilizan para procesar y responder a las solicitudes HTTP, interactuar con los modelos y enviar datos a las vistas para su presentación. Los controladores permiten separar claramente las responsabilidades en el desarrollo, lo que facilita la modularidad y el mantenimiento del código.\nCreación de Controladores: # En Laravel, se pueden crear controladores fácilmente utilizando el comando Artisan. Por ejemplo, para crear un controlador llamado ProductoController, ejecutamos:\nphp artisan make:controller ProductoController Esto generará automáticamente un controlador en el directorio app/Http/Controllers.\nMétodos de Acción en Controladores: # Los controladores en Laravel contienen métodos de acción que representan las distintas funcionalidades de la aplicación. Estos métodos pueden responder a diferentes tipos de solicitudes HTTP, como GET, POST, PUT, DELETE, entre otros. Por ejemplo:\n// app/Http/Controllers/ProductoController.php public function index() { // Lógica para mostrar la lista de productos } public function show($id) { // Lógica para mostrar un producto específico } public function store(Request $request) { // Lógica para guardar un nuevo producto } Rutas y Controladores: # Las rutas se pueden conectar a los controladores para definir qué método de acción se ejecutará cuando un usuario acceda a una URL específica. Esto ayuda a mantener el código organizado y facilita el enrutamiento de las solicitudes a la lógica adecuada del controlador.\nControladores de Recursos: # Los controladores de recursos son una característica poderosa de Laravel que proporciona una forma rápida de definir una variedad de rutas CRUD (Crear, Leer, Actualizar, Eliminar) para un recurso específico en la aplicación. Al utilizar controladores de recursos, Laravel automáticamente crea las rutas y métodos de acción necesarios para interactuar con los datos.\nLos controladores en Laravel son una parte esencial del patrón MVC y juegan un papel fundamental en el desarrollo web. En este artículo, hemos explorado qué son los controladores en Laravel, cómo se crean y cómo se utilizan para separar la lógica de la aplicación de la presentación de datos. Además, hemos abordado características avanzadas como la inyección de dependencias, el uso de controladores de recursos y el empleo de middleware. Al aprovechar al máximo los controladores en Laravel, los desarrolladores pueden construir aplicaciones web más estructuradas, flexibles y mantenibles, lo que facilita el desarrollo y mejora la calidad del producto final.\nVideos de refuerzo # ","date":"1 agosto 2023","permalink":"/platform/laravel/controllers/","section":"Laravels","summary":"El patrón Modelo-Vista-Controlador (MVC) es una arquitectura de diseño comúnmente utilizada en el desarrollo de aplicaciones web.","title":"Controllers en Laravel: La Piedra Angular del Patrón MVC en el Desarrollo Web"},{"content":"El enrutamiento es una parte esencial de cualquier aplicación web, ya que permite a los desarrolladores dirigir las solicitudes entrantes a las acciones correspondientes del controlador. Laravel, un framework de PHP ampliamente utilizado, ofrece un sistema de enrutamiento flexible y potente conocido como \u0026ldquo;rutas\u0026rdquo;.\nConcepto de Rutas en Laravel # Las rutas en Laravel son una forma de asociar una URL específica con una acción o función dentro de la aplicación web. Cuando un usuario realiza una solicitud HTTP (GET, POST, PUT, DELETE, etc.) a una URL específica, el sistema de enrutamiento de Laravel determina qué acción del controlador debe ejecutarse para manejar esa solicitud. Esto permite separar la lógica del enrutamiento de la lógica de la aplicación y facilita la organización y el mantenimiento del código.\nDefinición de Rutas: # En Laravel, las rutas se definen principalmente en dos archivos: routes/web.php y routes/api.php. El archivo web.php se utiliza para definir rutas que responden a solicitudes HTTP enviadas por navegadores web, mientras que api.php se utiliza para definir rutas que responden a solicitudes de API.\nPara definir una ruta básica en Laravel, se utiliza el método Route:: seguido del verbo HTTP correspondiente (por ejemplo, get, post, put, delete, etc.) y el URI que debe responder. A continuación, se proporciona un ejemplo simple:\n// routes/web.php Route::get(\u0026#39;/inicio\u0026#39;, function () { return view(\u0026#39;welcome\u0026#39;); }); En este ejemplo, cuando un usuario accede a /inicio en su navegador, se ejecutará la función anónima que devuelve la vista welcome.blade.php.\nParámetros en las Rutas # Las rutas en Laravel pueden contener parámetros para capturar valores variables de la URL. Estos parámetros se especifican entre llaves {} en la definición de la ruta. Los valores capturados se pasarán como argumentos a la función de la ruta. Aquí hay un ejemplo de ruta con parámetro:\n// routes/web.php Route::get(\u0026#39;/usuario/{id}\u0026#39;, function ($id) { return \u0026#34;ID del usuario: \u0026#34; . $id; }); Cuando un usuario accede a /usuario/123, el valor 123 será capturado y pasado como argumento a la función anónima. La respuesta será \u0026ldquo;ID del usuario: 123\u0026rdquo;.\nAgrupación de Rutas # La agrupación de rutas en Laravel permite aplicar filtros y middleware a un conjunto de rutas relacionadas. Esto ayuda a mantener un código más organizado y a reutilizar lógica en varias rutas. Para agrupar rutas, se utiliza el método Route::group(). Un ejemplo de agrupación de rutas con middleware sería el siguiente:\n// routes/web.php Route::group([\u0026#39;middleware\u0026#39; =\u0026gt; \u0026#39;auth\u0026#39;], function () { Route::get(\u0026#39;/dashboard\u0026#39;, \u0026#39;DashboardController@index\u0026#39;); Route::get(\u0026#39;/perfil\u0026#39;, \u0026#39;PerfilController@index\u0026#39;); // Otras rutas que requieran autenticación }); En este caso, todas las rutas dentro del grupo requerirán que el usuario esté autenticado, ya que el middleware auth se ejecutará antes de manejar la solicitud en cada ruta.\nRutas con Nombre y URL Amigables # Las rutas en Laravel se pueden nombrar para facilitar su referencia en diferentes partes de la aplicación, como en la generación de enlaces. Para asignar un nombre a una ruta, se utiliza el método name(). Un ejemplo sería:\n// routes/web.php Route::get(\u0026#39;/articulo/{id}\u0026#39;, function ($id) { return \u0026#34;Mostrar artículo con ID: \u0026#34; . $id; })-\u0026gt;name(\u0026#39;articulo.show\u0026#39;); Luego, en otras partes del código, se puede hacer referencia a esta ruta utilizando el nombre:\n\u0026lt;a href=\u0026#34;{{ route(\u0026#39;articulo.show\u0026#39;, [\u0026#39;id\u0026#39; =\u0026gt; 123]) }}\u0026#34;\u0026gt;Ver artículo\u0026lt;/a Además, Laravel permite generar URLs amigables y flexibles utilizando rutas con parámetros opcionales y restricciones. Esto se puede lograr utilizando expresiones regulares o claves que definen el formato del parámetro.\nRutas y Seguridad # Para garantizar la seguridad en las rutas, Laravel ofrece una variedad de herramientas, como protección contra CSRF (Cross-Site Request Forgery) y autenticación integrada. Laravel incluye middleware de autenticación y autorización que se pueden aplicar a rutas específicas para asegurarse de que solo los usuarios autorizados puedan acceder a determinadas partes de la aplicación.\nVideo de refuerzo # ","date":"1 agosto 2023","permalink":"/platform/laravel/routes/","section":"Laravels","summary":"El enrutamiento es una parte esencial de cualquier aplicación web, ya que permite a los desarrolladores dirigir las solicitudes entrantes a las acciones correspondientes del controlador.","title":"Routes (rutas) en Laravel"},{"content":"Las migraciones en Laravel ofrecen una poderosa herramienta para gestionar la estructura de la base de datos de manera eficiente y colaborativa. Este artículo universitario explora en profundidad el concepto de migraciones en Laravel, su importancia en el desarrollo de aplicaciones web, sus características principales y cómo pueden facilitar el proceso de desarrollo y mantenimiento del proyecto. Además, se abordan técnicas avanzadas para manejar relaciones entre tablas, manipulación de datos y migraciones en equipos colaborativos. Al final del artículo, los lectores obtendrán una comprensión sólida de cómo usar migraciones en Laravel para construir bases de datos sólidas y escalables en sus proyectos.\nEn el desarrollo de aplicaciones web, la gestión de la base de datos es un aspecto crítico que afecta directamente la eficiencia, la escalabilidad y el mantenimiento del proyecto. Laravel, un popular framework de PHP, proporciona un enfoque elegante y eficiente para gestionar la base de datos a través de las \u0026ldquo;migraciones\u0026rdquo;. Las migraciones permiten a los desarrolladores definir la estructura de la base de datos de forma programática y versionar los cambios para que sean fáciles de rastrear, compartir y desplegar.\nConcepto de Migraciones en Laravel # Las migraciones son archivos de código de PHP que definen la estructura de la base de datos y permiten a los desarrolladores modificarla de manera controlada y coherente. Laravel proporciona una sintaxis sencilla para crear y modificar tablas, definir relaciones, agregar índices y realizar cambios en la base de datos sin necesidad de escribir SQL directamente.\nCreando y Ejecutando Migraciones # 1: Configuración de la base de datos # Antes de crear migraciones, asegúrate de configurar la conexión de la base de datos en el archivo .env. Este archivo se encuentra en la raíz de tu proyecto Laravel y contiene la configuración de variables de entorno.\nAbre el archivo .env y asegúrate de configurar las siguientes variables para que coincidan con tu base de datos:\nDB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=tu_base_de_datos DB_USERNAME=tu_usuario DB_PASSWORD=tu_contraseña 2: Crear una migración # Para crear una nueva migración, abre una terminal o línea de comandos, navega hasta la raíz de tu proyecto Laravel y ejecuta el siguiente comando:\nphp artisan make:migration nombre_de_la_migracion Reemplaza nombre_de_la_migracion con un nombre descriptivo para tu migración. Por ejemplo, si quieres crear una tabla de usuarios, podrías usar algo como create_users_table como nombre de migración.\nEste comando creará un archivo en el directorio database/migrations con el nombre de la migración y una marca de tiempo. Dentro de ese archivo, encontrarás dos métodos: up() y down(). En el método up(), definirás la estructura de la tabla que deseas crear, y en el método down(), especificarás cómo revertir la migración (es decir, eliminar la tabla).\n3: Definir la estructura de la tabla en el método up() # Dentro del método up() de la migración recién creada, utiliza el esquema de Laravel para definir la estructura de la tabla que deseas crear. Por ejemplo, para crear una tabla de usuarios con campos como id, name, email y password, podrías hacer lo siguiente:\npublic function up() { Schema::create(\u0026#39;users\u0026#39;, function (Blueprint $table) { $table-\u0026gt;id(); $table-\u0026gt;string(\u0026#39;name\u0026#39;); $table-\u0026gt;string(\u0026#39;email\u0026#39;)-\u0026gt;unique(); $table-\u0026gt;string(\u0026#39;password\u0026#39;); $table-\u0026gt;timestamps(); }); } En este ejemplo, estamos utilizando el método create() del objeto Schema para definir la tabla \u0026lsquo;users\u0026rsquo; con varios campos. id() crea un campo autoincremental para la clave primaria, string() define campos de tipo cadena y timestamps() agrega automáticamente las columnas created_at y updated_at para registrar las fechas de creación y actualización de los registros.\n4: Ejecutar las migraciones # Una vez que has definido la estructura de la tabla en tu migración, estás listo para ejecutar la migración y crear la tabla en la base de datos. Ejecuta el siguiente comando:\nphp artisan migrate Laravel ejecutará todas las migraciones que aún no se hayan ejecutado en el orden en que fueron creadas. La tabla migrations de la base de datos se utilizará para mantener un registro de qué migraciones ya se han ejecutado, evitando así que se repitan.\nSi en algún momento deseas deshacer la última migración (es decir, eliminar la tabla que se creó), puedes utilizar el siguiente comando:\nphp artisan migrate:rollback Videos de refuerzo # Te recomiendo que veas los siguientes videos en el respectivo orden en el que están colocados.\n","date":"1 agosto 2023","permalink":"/platform/laravel/migrations/","section":"Laravels","summary":"Las migraciones en Laravel ofrecen una poderosa herramienta para gestionar la estructura de la base de datos de manera eficiente y colaborativa.","title":"Migrations en Laravel: Un Enfoque Eficaz para la Gestión de la Base de Datos"},{"content":"Laravel es un popular framework de desarrollo web de código abierto basado en PHP que ha ganado gran popularidad por su facilidad de uso y su enfoque en la creación rápida de aplicaciones web robustas. Una de las características distintivas de Laravel es su organizada y bien pensada estructura de carpetas, que proporciona una clara separación de preocupaciones y facilita la escalabilidad y mantenimiento del proyecto.\nLa estructura de carpetas de un proyecto Laravel es fundamental para su desarrollo y mantenimiento efectivo. Cuando se crea un nuevo proyecto Laravel, se genera automáticamente una serie de carpetas que contienen diferentes partes del framework y componentes relacionados.\nLa carpeta raíz # La carpeta raíz del proyecto contiene los archivos principales y la mayoría de las subcarpetas, que se describirán más adelante. Algunos de los archivos más importantes en esta carpeta son:\napp: Contiene la lógica central de la aplicación, como los modelos, controladores y clases de servicio. bootstrap: Aquí se encuentra el código que inicializa la aplicación y carga las dependencias. config: Contiene los archivos de configuración de la aplicación, como las conexiones de bases de datos, servicios, etc. database: En esta carpeta se encuentran las migraciones de la base de datos y las semillas para poblar datos iniciales. public: Es la carpeta accesible desde el servidor web y contiene el archivo index.php, punto de entrada de la aplicación. resources: Aquí se almacenan las vistas, archivos de lenguaje y activos (como CSS, JS e imágenes). routes: Contiene los archivos de rutas que definen las URL y controladores asociados. storage: Es el lugar donde Laravel almacena archivos generados, como logs, caché, sesiones, etc. tests: Aquí se encuentran las pruebas de la aplicación. Estructura de Carpetas Detallada # A continuación, detallaremos algunas de las carpetas más importantes dentro de la estructura de un proyecto Laravel:\n1. Carpeta app # Dentro de esta carpeta, se encuentra la esencia de la aplicación. Aquí se definen los modelos, que representan las tablas de la base de datos y se encargan de interactuar con ellas. También encontramos los controladores, que gestionan las solicitudes entrantes y dirigen la lógica de la aplicación. Adicionalmente, se ubican las clases de servicio, que contienen la lógica de negocio independiente de la interfaz de usuario.\n2. Carpeta config # Esta carpeta almacena todos los archivos de configuración de la aplicación. Los archivos de configuración permiten personalizar diversos aspectos de Laravel, como las conexiones de bases de datos, los servicios disponibles y otros parámetros de la aplicación.\n3. Carpeta database # En esta carpeta se encuentran las migraciones y las semillas. Las migraciones son archivos que definen los cambios en la estructura de la base de datos a lo largo del tiempo, permitiendo mantenerla actualizada. Las semillas, por otro lado, son archivos que permiten poblar la base de datos con datos iniciales para pruebas y desarrollo.\n4. Carpeta public # La carpeta public es el punto de entrada de la aplicación y el único directorio accesible públicamente desde el servidor web. Aquí se encuentran los activos públicos, como imágenes, archivos CSS y JavaScript. El archivo index.php en esta carpeta es el primer archivo que se ejecuta cuando se realiza una solicitud a la aplicación.\n5. Carpeta resources # La carpeta resources contiene todas las vistas de la aplicación, archivos de lenguaje y activos no públicos (archivos CSS, JavaScript, etc.). Las vistas son plantillas que definen cómo se muestra la interfaz de usuario.\n6. Carpeta routes # En esta carpeta se encuentran los archivos de rutas, que definen las URL y las acciones que se deben ejecutar para cada solicitud. Aquí se configuran las rutas para cada recurso y se asocian con sus respectivos controladores.\n7. Carpeta storage # La carpeta storage es utilizada por Laravel para almacenar archivos generados dinámicamente, como logs, sesiones y caché. Además, contiene subcarpetas para almacenar archivos subidos por los usuarios y otros recursos generados durante el funcionamiento de la aplicación.\nLa estructura de carpetas de Laravel está diseñada para proporcionar una separación clara de responsabilidades y permitir un desarrollo más estructurado y escalable. Cada carpeta cumple un propósito específico y contribuye a la organización general del proyecto. Comprender esta estructura es esencial para cualquier desarrollador que trabaje con Laravel, ya que facilita la navegación y el mantenimiento del código.\nEn este artículo, hemos explorado la estructura de carpetas de Laravel y hemos descrito brevemente el propósito de cada una de ellas. Con esta información, los desarrolladores pueden aprovechar al máximo el framework y crear aplicaciones web robustas y mantenibles.\n","date":"31 julio 2023","permalink":"/platform/laravel/estructura_carpetas/","section":"Laravels","summary":"Laravel es un popular framework de desarrollo web de código abierto basado en PHP que ha ganado gran popularidad por su facilidad de uso y su enfoque en la creación rápida de aplicaciones web robustas.","title":"Estructura de Carpetas en Laravel: Organización y Funcionalidad"},{"content":"Laravel es un popular marco de desarrollo web de código abierto basado en el lenguaje de programación PHP. En este artículo, proporcionaremos una introducción a Laravel, explicando sus características clave y ventajas, su arquitectura MVC (Modelo-Vista-Controlador), su enfoque en la elegancia del código y la facilidad de uso. También se discutirán algunos conceptos básicos de Laravel, como el enrutamiento, las vistas, las migraciones y las relaciones de base de datos. Al final del artículo, los lectores tendrán una comprensión fundamental de Laravel y estarán listos para comenzar a desarrollar aplicaciones web utilizando este marco.\n1. Introducción # El desarrollo web ha evolucionado significativamente en las últimas décadas, y con él, la demanda de marcos de desarrollo eficientes y robustos. Laravel, creado por Taylor Otwell en 2011, ha ganado popularidad rápidamente debido a su elegancia y facilidad de uso. Es conocido por su sintaxis clara y concisa, lo que permite a los desarrolladores crear aplicaciones web complejas con menos código. Laravel sigue el patrón de arquitectura Modelo-Vista-Controlador (MVC), que ayuda a mantener el código organizado y separado en diferentes capas.\n2. Características Clave de Laravel # a) Sistema de Enrutamiento # El sistema de enrutamiento en Laravel permite mapear las URL a acciones específicas dentro de la aplicación. Esto facilita la definición de rutas para diferentes páginas o recursos y mejora la legibilidad del código. Además, Laravel permite el uso de enrutamiento basado en RESTful para construir APIs potentes y fáciles de mantener.\nb) Plantillas Blade # Blade es el motor de plantillas de Laravel. Permite a los desarrolladores escribir código PHP en las vistas, lo que simplifica la presentación de datos y la lógica de visualización. Blade también proporciona directivas útiles, como bucles y condicionales, para facilitar la generación de HTML dinámico.\nc) Migraciones de Base de Datos # Laravel ofrece un enfoque elegante para gestionar esquemas de base de datos mediante migraciones. Las migraciones son clases de PHP que representan cambios en la estructura de la base de datos. Con las migraciones, los desarrolladores pueden versionar y compartir fácilmente los cambios en la base de datos en lugar de modificarla directamente. Esto garantiza que todo el equipo de desarrollo esté en sincronía y facilite el despliegue en diferentes entornos.\nd) Eloquent ORM # Eloquent es el ORM (Object-Relational Mapping) incorporado en Laravel. Proporciona una interfaz sencilla y expresiva para interactuar con la base de datos. Con Eloquent, los desarrolladores pueden trabajar con bases de datos de manera orientada a objetos, lo que facilita las operaciones CRUD (Crear, Leer, Actualizar, Eliminar) y el manejo de relaciones entre tablas.\ne) Seguridad y Autenticación # Laravel se preocupa por la seguridad y proporciona herramientas para proteger la aplicación contra ataques comunes, como la protección contra ataques XSS y CSRF. Además, Laravel incluye un sistema de autenticación listo para usar que simplifica la implementación de la funcionalidad de registro, inicio de sesión y recuperación de contraseña.\n3. Arquitectura MVC en Laravel # La arquitectura Modelo-Vista-Controlador (MVC) es un patrón de diseño ampliamente utilizado en el desarrollo web para separar la lógica de negocio, la presentación y la interacción con el usuario. En Laravel, el patrón MVC se sigue de cerca:\nModelo: Representa la capa de acceso a datos y define cómo interactuar con la base de datos. Eloquent ORM es comúnmente utilizado para modelar las tablas de la base de datos como clases PHP.\nVista: Es responsable de mostrar los datos al usuario final. En Laravel, las vistas generalmente se crean utilizando el motor de plantillas Blade.\nControlador: Maneja las solicitudes del usuario y actúa como intermediario entre el Modelo y la Vista. Los controladores en Laravel contienen métodos que responden a diferentes rutas y acciones del usuario.\nLa arquitectura MVC proporciona una estructura organizada para el desarrollo de aplicaciones web, lo que facilita la colaboración entre equipos y el mantenimiento a largo plazo.\n4. Migraciones y Semillas # Laravel ofrece un sistema de migraciones que permite a los desarrolladores definir y modificar la estructura de la base de datos utilizando código en lugar de SQL. Las semillas permiten poblar la base de datos con datos de prueba, lo que resulta útil para el desarrollo y las pruebas.\nLaravel ha demostrado ser una opción sólida para el desarrollo web moderno debido a su sintaxis elegante, su conjunto integral de características y su sólida arquitectura. Los desarrolladores encuentran en Laravel una plataforma que les permite crear aplicaciones web escalables y de alto rendimiento de manera eficiente. Con su comunidad activa y su enfoque en la programación ágil, Laravel continúa siendo una elección popular en el panorama del desarrollo web.\nVideo de refuerzo # ","date":"31 julio 2023","permalink":"/platform/laravel/intro/","section":"Laravels","summary":"Laravel es un popular marco de desarrollo web de código abierto basado en el lenguaje de programación PHP.","title":"Intro"},{"content":"Los Arrays y Objetos son estructuras de datos que nos permiten almacenar y acceder a la información de una manera sencilla y eficiente, sobre todo cuando tenemos que manejar grandes cantidades de datos. Este material lo abarcaremos gran parte de esta semana, por lo que no te sientas obligado a entenderlo todo de una vez. Lo importante es que entiendas los conceptos básicos y que puedas aplicarlos en tus proyectos. Si tienes dudas, no dudes en preguntar.\nTutoriales # FreeCodeCamp # Arrays (10 lecciones a partir de la indicada) 30 Days of JavaScript # Arreglos (arrays) Objetos (objects) aprendejavascript.dev # Estos links abren la primera lección de cada tema. Para avanzar a la siguiente lección, haz click en el botón de siguiente lección en la parte inferior de la página.\nArrays Objects Objetos # Como aprendimos en clases anteriores, hay ocho tipos de datos en JavaScript. Siete de ellos se denominan \u0026ldquo;primitivos\u0026rdquo;, porque sus valores contienen solo un dato (sea un string, un número o lo que sea).\nEn contraste, los objetos son usados para almacenar colecciones de varios datos y entidades más complejas asociados con un nombre clave. En JavaScript, los objetos penetran casi todos los aspectos del lenguaje. Por lo tanto, debemos comprenderlos primero antes de profundizar en cualquier otro lugar.\nPodemos crear un objeto usando las llaves {…} con una lista opcional de propiedades. Una propiedad es un par \u0026ldquo;key:value\u0026rdquo;, donde key es un string (también llamado \u0026ldquo;nombre clave\u0026rdquo;), y value puede ser cualquier cosa. P.D. Para fines prácticos de la lección, nos referiremos a este par de conceptos como \u0026ldquo;clave:valor\u0026rdquo;.\nPodemos imaginar un objeto como un gabinete con archivos firmados. Cada pieza de datos es almacenada en su archivo por la clave. Es fácil encontrar un archivo por su nombre o agregar/eliminar un archivo.\nSe puede crear un objeto vacío (\u0026ldquo;gabinete vacío\u0026rdquo;) utilizando una de estas dos sintaxis:\nlet user = new Object(); // sintaxis de \u0026#34;constructor de objetos\u0026#34; let user = {}; // sintaxis de \u0026#34;objeto literal\u0026#34; Normalmente se utilizan las llaves {...}. Esa declaración se llama objeto literal.\nLiterales y propiedades # Podemos poner inmediatamente algunas propiedades dentro de {...} como pares \u0026ldquo;clave:valor\u0026rdquo;:\nlet user = { // un objeto name: \u0026#34;John\u0026#34;, // En la clave \u0026#34;name\u0026#34; se almacena el valor \u0026#34;John\u0026#34; age: 30 // En la clave \u0026#34;age\u0026#34; se almacena el valor 30 }; Una propiedad tiene una clave (también conocida como \u0026ldquo;nombre\u0026rdquo; o \u0026ldquo;identificador\u0026rdquo;) antes de los dos puntos \u0026quot;:\u0026quot; y un valor a la derecha.\nEn el objeto user hay dos propiedades:\nLa primera propiedad tiene la clave \u0026quot;name\u0026quot; y el valor \u0026quot;John\u0026quot;. La segunda tienen la clave \u0026quot;age\u0026quot; y el valor 30. Podemos imaginar al objeto user resultante como un gabinete con dos archivos firmados con las etiquetas \u0026ldquo;name\u0026rdquo; y \u0026ldquo;age\u0026rdquo;.\nPodemos agregar, eliminar y leer archivos de él en cualquier momento.\nSe puede acceder a los valores de las propiedades utilizando la notación de punto:\n// Obteniendo los valores de las propiedades del objeto: alert( user.name ); // John alert( user.age ); // 30 El valor puede ser de cualquier tipo. Agreguemos uno booleano:\nuser.isAdmin = true; Para eliminar una propiedad podemos usar el operador delete:\ndelete user.age; También podemos nombrar propiedades con más de una palabra. Pero, de ser así, debemos colocar la clave entre comillas \u0026quot;...\u0026quot;:\nlet user = { name: \u0026#34;John\u0026#34;, age: 30, \u0026#34;likes birds\u0026#34;: true // Las claves con más de una palabra deben ir entre comillas }; La última propiedad en la lista puede terminar con una coma:\nlet user = { name: \u0026#34;John\u0026#34;, age: 30, // termina con una \u0026#34;,\u0026#34; } Eso se llama una coma \u0026ldquo;final\u0026rdquo; o \u0026ldquo;colgante\u0026rdquo;. Facilita agregar, eliminar y mover propiedades, porque todas las líneas se vuelven similares.\nArrays # Los objetos te permiten almacenar colecciones de datos a través de nombres. Eso está bien.\nPero a menudo necesitamos una colección ordenada, donde tenemos un 1ro, un 2do, un 3er elemento y así sucesivamente. Por ejemplo, necesitamos almacenar una lista de algo: usuarios, bienes, elementos HTML, etc.\nNo es conveniente usar objetos aquí, porque no proveen métodos para manejar el orden de los elementos. No podemos insertar una nueva propiedad “entre” los existentes. Los objetos no están hechos para eso.\nExiste una estructura llamada Array (llamada en español arreglo o matriz/vector) para almacenar colecciones ordenadas.\nDeclaración # Hay dos sintaxis para crear un array vacío:\nlet arr = new Array(); let arr = []; Casi siempre se usa la segunda. Podemos suministrar elementos iniciales entre los corchetes:\nlet fruits = [\u0026#34;Apple\u0026#34;, \u0026#34;Orange\u0026#34;, \u0026#34;Plum\u0026#34;]; Los elementos del array están numerados comenzando desde cero.\nPodemos obtener un elemento por su número entre corchetes:\nlet fruits = [\u0026#34;Apple\u0026#34;, \u0026#34;Orange\u0026#34;, \u0026#34;Plum\u0026#34;]; alert( fruits[0] ); // Apple alert( fruits[1] ); // Orange alert( fruits[2] ); // Plum Podemos reemplazar un elemento:\nfruits[2] = \u0026#39;Pear\u0026#39;; // ahora [\u0026#34;Apple\u0026#34;, \u0026#34;Orange\u0026#34;, \u0026#34;Pear\u0026#34;] \u0026hellip;o agregar uno nuevo al array:\nfruits[3] = \u0026#39;Lemon\u0026#39;; // ahora [\u0026#34;Apple\u0026#34;, \u0026#34;Orange\u0026#34;, \u0026#34;Pear\u0026#34;, \u0026#34;Lemon\u0026#34;] La cuenta total de elementos en el array es su longitud length:\nlet fruits = [\u0026#34;Apple\u0026#34;, \u0026#34;Orange\u0026#34;, \u0026#34;Plum\u0026#34;]; alert( fruits.length ); // 3 También podemos usar alert para mostrar el array completo.\nlet fruits = [\u0026#34;Apple\u0026#34;, \u0026#34;Orange\u0026#34;, \u0026#34;Plum\u0026#34;]; alert( fruits ); // Apple,Orange,Plum Un array puede almacenar elementos de cualquier tipo.\nPor ejemplo:\n// mezcla de valores let arr = [ \u0026#39;Apple\u0026#39;, { name: \u0026#39;John\u0026#39; }, true, function() { alert(\u0026#39;hello\u0026#39;); } ]; // obtener el objeto del índice 1 y mostrar su nombre alert( arr[1].name ); // John // obtener la función del índice 3 y ejecutarla arr[3](); // hello Recursos en video # ","date":"30 julio 2023","permalink":"/platform/jsvanilla/arr-obj/","section":"Jsvanillas","summary":"Los Arrays y Objetos son estructuras de datos que nos permiten almacenar y acceder a la información de una manera sencilla y eficiente, sobre todo cuando tenemos que manejar grandes cantidades de datos.","title":"Arrays y Objetos"},{"content":"Git Fork # En Git, el comando fork se refiere a la acción de crear una copia independiente de un repositorio de Git en tu cuenta de usuario, generalmente en una plataforma de alojamiento como GitHub, GitLab o Bitbucket. Esta copia te permite trabajar libremente en el proyecto sin afectar el repositorio original, lo que es especialmente útil cuando deseas contribuir a un proyecto de código abierto o colaborar en un proyecto de otra persona.\nHacer Fork # Iniciar sesión en la plataforma: Accede a la plataforma de alojamiento (por ejemplo, GitHub) e inicia sesión en tu cuenta de usuario. Si no tienes una cuenta, deberás crear una antes de continuar.\nEncuentra el repositorio: Busca el repositorio que deseas forkear. Por lo general, puedes encontrarlo a través de la función de búsqueda en la plataforma o si tienes el enlace directo al repositorio.\nHacer el fork: En la página del repositorio, busca el botón o enlace que te permita hacer el fork. En GitHub, por ejemplo, encontrarás el botón \u0026ldquo;Fork\u0026rdquo; en la esquina superior derecha de la página. Al hacer clic en él, se creará una copia del repositorio en tu cuenta.\nClonar el repositorio fork: Una vez que hayas hecho el fork, ahora puedes clonar tu repositorio fork en tu máquina local para comenzar a trabajar en él. Abre tu terminal y utiliza el siguiente comando:\ngit clone \u0026lt;URL-del-repositorio-fork\u0026gt; Sustituye \u0026lt;URL-del-repositorio-fork\u0026gt; por la URL del repositorio fork que obtuviste al hacer el fork.\nConfigurar el repositorio remoto: Por defecto, el repositorio clonado apuntará al repositorio fork en tu cuenta. Para configurar el repositorio remoto original (el repositorio del que hiciste el fork) como \u0026ldquo;upstream\u0026rdquo; y mantenerlo actualizado, utiliza el siguiente comando:\ngit remote add upstream \u0026lt;URL-del-repositorio-original\u0026gt; Sustituye \u0026lt;URL-del-repositorio-original\u0026gt; por la URL del repositorio original.\nTrabajar en tu repositorio fork: Ahora puedes realizar cambios en tu repositorio fork como lo harías en cualquier otro repositorio local. Agrega, modifica y elimina archivos según sea necesario para tu contribución.\nMantener tu repositorio actualizado: A medida que otros colaboradores realicen cambios en el repositorio original, es recomendable mantener tu repositorio fork actualizado para evitar conflictos innecesarios. Para hacerlo, utiliza los siguientes comandos:\ngit fetch upstream git merge upstream/master # O la rama principal del repositorio original Estos comandos traen los cambios del repositorio original y los fusionan con tu rama principal local.\nContribuir mediante pull requests: Cuando hayas realizado cambios significativos en tu repositorio fork y desees contribuir con esos cambios al repositorio original, puedes hacerlo mediante un \u0026ldquo;pull request\u0026rdquo; (solicitud de extracción) en la plataforma de alojamiento. Esto permitirá que los propietarios del repositorio original revisen tus cambios y, si todo está en orden, los fusionen en su repositorio principal.\nRecuerda que hacer un fork es una excelente forma de colaborar en proyectos de código abierto o trabajar en equipo sin afectar el repositorio original. Asegúrate de seguir las directrices del proyecto y contribuir de manera positiva a la comunidad.\nRecursos # https://desarrolloweb.com/articulos/fork-git\n","date":"28 julio 2023","permalink":"/platform/nivel2/14/","section":"Nivel2s","summary":"Git Fork # En Git, el comando fork se refiere a la acción de crear una copia independiente de un repositorio de Git en tu cuenta de usuario, generalmente en una plataforma de alojamiento como GitHub, GitLab o Bitbucket.","title":"FORK"},{"content":"","date":"28 julio 2023","permalink":"/platform/nivel2/","section":"Nivel2s","summary":"","title":"Nivel2s"},{"content":"Conceptos básicos de Git # Git es un sistema de control de versiones distribuido que te permite rastrear los cambios en tus proyectos y colaborar con otros desarrolladores de manera eficiente. Aquí tienes algunos conceptos esenciales: Repositorio # Un repositorio es un lugar donde se almacenan todos los archivos y la historia de cambios de tu proyecto. Puede ser local (en tu máquina) o remoto (en un servidor, como GitHub o GitLab).\nCommit # Un commit representa un punto en el tiempo en la historia de tu proyecto. Es una instantánea de los cambios realizados en los archivos desde el último commit. Cada commit tiene un mensaje que describe los cambios realizados.\nBranch (Rama) # Una rama es una versión paralela del repositorio que permite trabajar en nuevas funcionalidades o correcciones sin afectar la rama principal (generalmente llamada main o master). Es útil para el desarrollo colaborativo y la gestión de cambios.\nMerge (Fusión) # La fusión es el proceso de combinar los cambios de una rama en otra. Se utiliza para integrar el trabajo realizado en una rama secundaria de vuelta a la rama principal.\nClone (Clonar) # Clonar un repositorio significa copiarlo desde un repositorio remoto a tu máquina local. Esto te permite trabajar en tu propia copia del proyecto.\nPull (Tirar) y Push (Empujar) # Pull: Descargar los cambios realizados en un repositorio remoto y fusionarlos con tu versión local. Push: Subir tus cambios locales a un repositorio remoto para compartirlos con otros colaboradores.\nStatus (Estado) # El comando git status te muestra el estado actual de tu repositorio, incluyendo los archivos modificados, los archivos que se han añadido al área de preparación (staging area) y los que están listos para hacer commit.\nAdd (Agregar) # El comando git add añade los cambios de los archivos al área de preparación, lo que los prepara para ser incluidos en el próximo commit.\nCommit (Confirmar) # El comando git commit guarda los cambios en el repositorio como un nuevo commit con un mensaje que describe los cambios realizados.\nPush (Empujar) # El comando git push envía los commits locales al repositorio remoto, actualizando la versión remota con tus cambios.\nPull (Tirar) # El comando git pull descarga los cambios desde el repositorio remoto y los fusiona automáticamente con tu versión local.\nEstos son solo los conceptos básicos para empezar a utilizar Git. Hay muchos más comandos y funcionalidades que puedes aprender a medida que profundices en el control de versiones y el trabajo colaborativo.\nComandos adicionales # Existen mas formas de usar git.\nRecuerda que practicar y experimentar con Git te ayudará a familiarizarte con su uso y te permitirá aprovechar al máximo todas sus capacidades. ¡Buena suerte!\nHomework # Terminar la seccion 1, los ejercicios 1 y 2\nhttps://learngitbranching.js.org/\nTerminar hasta la seccion git branch\nhttps://www.w3schools.com/git/git_exercises.asp\n","date":"27 julio 2023","permalink":"/platform/git/comandos/","section":"Gits","summary":"Conceptos básicos de Git # Git es un sistema de control de versiones distribuido que te permite rastrear los cambios en tus proyectos y colaborar con otros desarrolladores de manera eficiente.","title":"Comandos básicos GIT"},{"content":"Conceptos básicos de Git # Git es un sistema de control de versiones distribuido que te permite rastrear los cambios en tus proyectos y colaborar con otros desarrolladores de manera eficiente. Aquí tienes algunos conceptos esenciales: Repositorio # Un repositorio es un lugar donde se almacenan todos los archivos y la historia de cambios de tu proyecto. Puede ser local (en tu máquina) o remoto (en un servidor, como GitHub o GitLab).\nCommit # Un commit representa un punto en el tiempo en la historia de tu proyecto. Es una instantánea de los cambios realizados en los archivos desde el último commit. Cada commit tiene un mensaje que describe los cambios realizados.\nBranch (Rama) # Una rama es una versión paralela del repositorio que permite trabajar en nuevas funcionalidades o correcciones sin afectar la rama principal (generalmente llamada main o master). Es útil para el desarrollo colaborativo y la gestión de cambios.\nMerge (Fusión) # La fusión es el proceso de combinar los cambios de una rama en otra. Se utiliza para integrar el trabajo realizado en una rama secundaria de vuelta a la rama principal.\nClone (Clonar) # Clonar un repositorio significa copiarlo desde un repositorio remoto a tu máquina local. Esto te permite trabajar en tu propia copia del proyecto.\nPull (Tirar) y Push (Empujar) # Pull: Descargar los cambios realizados en un repositorio remoto y fusionarlos con tu versión local. Push: Subir tus cambios locales a un repositorio remoto para compartirlos con otros colaboradores.\nStatus (Estado) # El comando git status te muestra el estado actual de tu repositorio, incluyendo los archivos modificados, los archivos que se han añadido al área de preparación (staging area) y los que están listos para hacer commit.\nAdd (Agregar) # El comando git add añade los cambios de los archivos al área de preparación, lo que los prepara para ser incluidos en el próximo commit.\nCommit (Confirmar) # El comando git commit guarda los cambios en el repositorio como un nuevo commit con un mensaje que describe los cambios realizados.\nPush (Empujar) # El comando git push envía los commits locales al repositorio remoto, actualizando la versión remota con tus cambios.\nPull (Tirar) # El comando git pull descarga los cambios desde el repositorio remoto y los fusiona automáticamente con tu versión local.\nEstos son solo los conceptos básicos para empezar a utilizar Git. Hay muchos más comandos y funcionalidades que puedes aprender a medida que profundices en el control de versiones y el trabajo colaborativo.\nComandos adicionales # Existen mas formas de usar git.\nRecuerda que practicar y experimentar con Git te ayudará a familiarizarte con su uso y te permitirá aprovechar al máximo todas sus capacidades. ¡Buena suerte!\nHomework # Terminar la seccion 1, los ejercicios 1 y 2\nhttps://learngitbranching.js.org/\nTerminar hasta la seccion git branch\nhttps://www.w3schools.com/git/git_exercises.asp\n","date":"27 julio 2023","permalink":"/platform/nivel2/11/","section":"Nivel2s","summary":"Conceptos básicos de Git # Git es un sistema de control de versiones distribuido que te permite rastrear los cambios en tus proyectos y colaborar con otros desarrolladores de manera eficiente.","title":"GIT INICIO RAPIDO"},{"content":"GitFlow # GitFlow es un flujo de trabajo (workflow) para Git que proporciona una estructura organizada para el desarrollo de proyectos de software. Fue popularizado por Vincent Driessen y se basa en el uso de diferentes ramas para facilitar la colaboración y el manejo de versiones. A continuación se describen las ramas principales utilizadas en GitFlow:\nBranches Principales # master o main # La rama master o main representa la rama principal del proyecto. Contiene el código estable y funcional que ha sido revisado y probado. En esta rama, los commits representan versiones del software listas para ser desplegadas en producción.\ndevelop # La rama develop es la rama de integración para nuevas características y cambios. Cuando una característica o mejora está completa, se fusiona en esta rama para ser probada en conjunto con otras funcionalidades antes de llegar a la rama master o main.\nBranches de Soporte # feature/\u0026lt; nombre-de-la-caracteristica\u0026gt; # Las ramas feature se utilizan para desarrollar nuevas características o mejoras. Se crean a partir de la rama develop y se fusionan nuevamente en develop cuando la característica está completa.\nrelease/\u0026lt; nombre-de-la-version\u0026gt; # Las ramas release se utilizan para preparar una nueva versión del software para su despliegue en producción. Aquí se corrigen los errores menores y se realizan las últimas pruebas antes de fusionarla en master o main y etiquetarla con una versión.\nhotfix/\u0026lt; nombre-del-hotfix\u0026gt; # Las ramas hotfix se utilizan para corregir rápidamente errores críticos en producción. Se crean a partir de la rama master o main, se aplican los cambios necesarios y se fusionan nuevamente en master o main, así como en develop.\nFlujo de Trabajo # El flujo de trabajo con GitFlow suele seguir estos pasos:\nCrear la rama develop a partir de master o main. Crear ramas feature a partir de develop para desarrollar nuevas características. Cuando una característica está lista, fusionarla en develop. Cuando se ha acumulado suficiente funcionalidad en develop, crear una rama release. Realizar pruebas y correcciones en la rama release. Fusionar la rama release en master o main y etiquetarla con una versión. Fusionar la rama release en develop. Si se encuentra un error en producción, crear una rama hotfix a partir de master o main. Realizar la corrección en la rama hotfix. Fusionar la rama hotfix en master o main y etiquetarla con una nueva versión. Fusionar la rama hotfix en develop. Este flujo de trabajo estructurado ayuda a mantener un historial de versiones claro y a facilitar la colaboración entre desarrolladores en proyectos de software. Homework # Seguir la estructura con git flow.\nhttps://www.atlassian.com/git/tutorials/comparing-workflows/gitflow-workflow\n","date":"27 julio 2023","permalink":"/platform/nivel2/12/","section":"Nivel2s","summary":"GitFlow # GitFlow es un flujo de trabajo (workflow) para Git que proporciona una estructura organizada para el desarrollo de proyectos de software.","title":"GitFlow"},{"content":"Las API REST (Representational State Transfer) y JSON (JavaScript Object Notation) son dos conceptos fundamentales en el desarrollo de aplicaciones web y servicios en línea. A continuación, te presento una breve introducción a ambos:\nAPI REST (Representational State Transfer) # Una API REST es un conjunto de reglas y convenciones que permite a diferentes sistemas comunicarse entre sí a través del protocolo HTTP (o HTTPS) de manera sencilla y eficiente. Estas API se basan en el concepto de recursos (objetos o datos) a los que se puede acceder mediante URLs específicas. Cada recurso puede tener operaciones estándar (GET, POST, PUT, DELETE) asociadas que permiten realizar diferentes acciones sobre ellos.\nPrincipales características de una API REST:\nArquitectura Cliente-Servidor: Las API REST siguen una arquitectura cliente-servidor, donde el cliente realiza solicitudes a través de HTTP y el servidor responde con los datos solicitados o realiza las acciones requeridas.\nSin estado (Stateless): Cada solicitud del cliente al servidor debe contener toda la información necesaria para comprender y procesar la solicitud. El servidor no debe almacenar información sobre el estado del cliente entre solicitudes.\nUso de Métodos HTTP: Las API REST utilizan los métodos HTTP (GET, POST, PUT, DELETE, etc.) para indicar la acción que se debe realizar sobre un recurso.\nRecursos y URLs: Los recursos son objetos o datos a los que se accede mediante URLs (Uniform Resource Locators) específicas. Por ejemplo, /usuarios podría ser una URL para acceder a una lista de usuarios.\nRespuestas en formato JSON o XML: Normalmente, las respuestas de una API REST se envían en formatos ligeros como JSON (JavaScript Object Notation) o XML (eXtensible Markup Language).\nJSON (JavaScript Object Notation) # JSON es un formato ligero de intercambio de datos que se utiliza comúnmente en el desarrollo web. Es fácil de leer y escribir para los humanos, y también es fácil de parsear y generar para las máquinas. Se basa en dos estructuras de datos:\nObjetos: Son colecciones no ordenadas de pares clave-valor. Cada clave debe ser una cadena (cadena de caracteres), y el valor puede ser cualquier tipo de dato válido en JSON (números, booleanos, cadenas, arrays u otros objetos).\n{ \u0026#34;nombre\u0026#34;: \u0026#34;Juan\u0026#34;, \u0026#34;edad\u0026#34;: 30, \u0026#34;activo\u0026#34;: true } Arrays: Son listas ordenadas de valores. Cada valor puede ser cualquier tipo de dato válido en JSON, incluyendo objetos y arrays.\n[ \u0026#34;manzana\u0026#34;, \u0026#34;naranja\u0026#34;, \u0026#34;plátano\u0026#34; ] JSON se ha convertido en un formato muy popular para intercambiar datos entre el cliente y el servidor en aplicaciones web y API REST debido a su simplicidad, eficiencia y facilidad de uso.\n¿Qué es Postman? # Postman es una plataforma de colaboración que te permite enviar solicitudes HTTP a diferentes API y servicios web, además de recibir las respuestas. Proporciona una interfaz gráfica de usuario que facilita la creación, prueba y visualización de las solicitudes y respuestas en una forma más intuitiva y amigable.\nCaracterísticas principales de Postman: # Interfaz de usuario amigable: Postman cuenta con una interfaz de usuario intuitiva que permite crear y organizar solicitudes HTTP fácilmente. Puedes configurar cabeceras, parámetros, cuerpo de la solicitud y más.\nEntornos y variables: Postman te permite crear y administrar diferentes entornos (por ejemplo, desarrollo, producción) y utilizar variables para simplificar el proceso de prueba en diferentes contextos.\nHistorial y colecciones: Postman guarda un historial de tus solicitudes y respuestas, lo que facilita la reutilización y la referencia en el futuro. También puedes organizar solicitudes relacionadas en colecciones para una mejor gestión.\nPruebas automatizadas: Puedes agregar scripts de pruebas automatizadas para verificar las respuestas recibidas y asegurarte de que los servicios funcionen correctamente.\nDocumentación de la API: Postman te permite crear y compartir documentación interactiva de tu API, lo que facilita la colaboración y el entendimiento de otros desarrolladores.\nColaboración en equipo: Postman ofrece funcionalidades para compartir tus colecciones y colaborar en equipo, lo que es útil para proyectos con múltiples desarrolladores.\nIntegraciones: Postman se integra con otras herramientas y servicios, como Git, Newman (CLI de Postman), CI/CD, lo que permite incorporarlo fácilmente en tu flujo de trabajo.\nPostman Cloud: Ofrece una plataforma en la nube donde puedes sincronizar tus datos, compartir colecciones y colaborar con otros miembros del equipo.\nPartes de una API/REST # Una API REST (Representational State Transfer) consta de varias partes esenciales que definen su estructura y funcionalidad. A continuación, se describen las principales partes de una API REST:\nRecursos (Resources): Los recursos son objetos o datos que están disponibles a través de la API. Cada recurso tiene una URL única que lo identifica. Por ejemplo, en una API REST para gestionar usuarios, el recurso \u0026ldquo;usuarios\u0026rdquo; podría tener la URL \u0026ldquo;/usuarios\u0026rdquo;.\nMétodos HTTP (HTTP Methods): Los métodos HTTP definen las operaciones que se pueden realizar sobre los recursos. Los cuatro métodos más comunes utilizados en una API REST son:\nGET: Obtener información o datos de un recurso. POST: Crear un nuevo recurso. PUT: Actualizar un recurso existente. DELETE: Eliminar un recurso. URL (Uniform Resource Locator): La URL es una cadena que identifica de manera única un recurso en la API. Es la dirección que se utiliza para acceder a los recursos a través de las operaciones HTTP. Por ejemplo, la URL \u0026ldquo;/usuarios/1\u0026rdquo; podría ser utilizada para obtener los detalles del usuario con el ID 1.\nCabeceras (Headers): Las cabeceras son parte de una solicitud o respuesta HTTP que proporciona información adicional sobre la solicitud o la respuesta. Las cabeceras pueden contener metadatos, autorización, formato de datos, entre otros.\nCuerpo (Body): El cuerpo de una solicitud o respuesta HTTP contiene los datos enviados o recibidos. En una solicitud POST o PUT, el cuerpo suele contener los datos que se utilizarán para crear o actualizar un recurso. En una respuesta, el cuerpo contiene los datos solicitados.\nCódigos de estado HTTP (HTTP Status Codes): Los códigos de estado HTTP son códigos numéricos que se utilizan para indicar el resultado de una solicitud. Algunos códigos de estado comunes incluyen 200 (Éxito), 201 (Creado), 400 (Solicitud incorrecta) y 404 (Recurso no encontrado).\nAutenticación y Autorización: La autenticación es el proceso de verificar la identidad de un usuario o sistema, mientras que la autorización se refiere a los permisos otorgados a un usuario o sistema para acceder a recursos específicos. Las API REST pueden requerir autenticación para acceder a ciertos recursos y pueden usar diferentes métodos de autenticación, como tokens de acceso o claves API.\nVersionado de la API (API Versioning): El versionado de la API es importante para garantizar la compatibilidad y evitar romper la funcionalidad existente cuando se realizan cambios en la API. Al versionar la API, se permite a los clientes utilizar una versión específica de la API incluso si se lanzan nuevas versiones en el futuro.\nEstas son las partes fundamentales de una API REST. La adopción de estas prácticas y convenciones facilita la construcción de una API coherente, bien documentada y fácil de consumir por parte de los desarrolladores y aplicaciones clientes.\nRecursos # https://www.ibm.com/es-es/topics/rest-apis\n","date":"27 julio 2023","permalink":"/platform/nivel2/10/","section":"Nivel2s","summary":"Las API REST (Representational State Transfer) y JSON (JavaScript Object Notation) son dos conceptos fundamentales en el desarrollo de aplicaciones web y servicios en línea.","title":"Introducción a las API REST y JSON"},{"content":"Resolver conflictos # Resolver conflictos es una parte importante del trabajo con Git, especialmente cuando se trabaja en colaboración con otros desarrolladores en un mismo proyecto. Los conflictos ocurren cuando dos o más personas hacen cambios en el mismo archivo o en líneas cercanas dentro de un archivo y esos cambios no pueden fusionarse automáticamente.\nPasos para resolver conflictos # Obtener los cambios más recientes: Antes de hacer cambios en tu rama, asegúrate de obtener los cambios más recientes de la rama remota para evitar conflictos innecesarios. Puedes hacer esto con el comando git pull:\nbashCopy code\ngit pull origin \u0026lt;nombre-de-tu-rama\u0026gt;\nIdentificar conflictos: Al hacer git pull o git merge, Git detectará los conflictos y los marcará en los archivos donde ocurrieron. Estos conflictos se presentan de la siguiente manera en el archivo:\n\u0026lt;\u0026lt;\u0026lt;\u0026lt;\u0026lt;\u0026lt;\u0026lt; HEAD Código en tu rama actual ======= Código en la otra rama (rama remota o de otro colaborador) \u0026gt;\u0026gt;\u0026gt;\u0026gt;\u0026gt;\u0026gt;\u0026gt; branch-name Aquí, `HEAD` representa tu rama actual y `branch-name` es el nombre de la otra rama que está causando el conflicto. Editar el archivo: Abre el archivo en conflicto en un editor de código y resuelve los conflictos manualmente. Decide qué cambios quieres mantener y cómo quieres combinarlos. Elimina las marcas de conflictos \u0026lt;\u0026lt;\u0026lt;\u0026lt;\u0026lt;\u0026lt;\u0026lt;, ======= y \u0026gt;\u0026gt;\u0026gt;\u0026gt;\u0026gt;\u0026gt;\u0026gt; después de tomar las decisiones necesarias.\nAgregar los cambios resueltos: Una vez que hayas resuelto todos los conflictos en el archivo, agrega el archivo modificado a la zona de preparación (staging area) usando el comando git add:\ngit add \u0026lt;nombre-del-archivo\u0026gt;\nSi has resuelto múltiples conflictos y quieres agregar todos los archivos modificados a la zona de preparación, puedes usar:\ngit add .\nHacer commit de los cambios: Ahora que has resuelto los conflictos y agregado los archivos a la zona de preparación, puedes hacer el commit para finalizar el proceso de fusión:\ngit commit -m \u0026quot;Resolver conflictos\u0026quot;\nFinalizar la fusión: Si estás realizando una fusión, después de resolver los conflictos y hacer el commit, la fusión estará completa. Si estás realizando un rebase o cualquier otra operación que haya generado conflictos, sigue los pasos necesarios para completar esa operación.\nSubir los cambios resueltos: Si estás trabajando con un repositorio remoto, ahora puedes subir tus cambios resueltos a la rama remota con el comando git push:\ngit push origin \u0026lt;nombre-de-tu-rama\u0026gt;\nRecuerda que resolver conflictos puede ser un proceso delicado, y es importante comunicarse con los otros colaboradores para garantizar una integración adecuada de los cambios. Es recomendable revisar los cambios de los demás antes de hacer tus propias modificaciones y actualizar regularmente tu rama para mantenerla al día con la rama principal o remota.\nRecursos # https://www.atlassian.com/es/git/tutorials/using-branches/merge-conflicts\n","date":"27 julio 2023","permalink":"/platform/nivel2/13/","section":"Nivel2s","summary":"Resolver conflictos # Resolver conflictos es una parte importante del trabajo con Git, especialmente cuando se trabaja en colaboración con otros desarrolladores en un mismo proyecto.","title":"Resolver conflictos"},{"content":"Patrón MVC # El patrón Modelo-Vista-Controlador (MVC) es una arquitectura de diseño de software que se utiliza comúnmente en el desarrollo de aplicaciones web y de escritorio. Su objetivo principal es separar las preocupaciones y responsabilidades del código en tres componentes principales:\nModelo (Model): # El modelo representa los datos y las reglas de negocio de la aplicación. Es responsable de acceder a la base de datos, realizar consultas, procesar la información y mantener el estado de la aplicación. En resumen, el modelo maneja la lógica detrás de los datos y asegura que estén en un estado válido.\nVista (View): # La vista es la interfaz de usuario de la aplicación. Se encarga de mostrar los datos al usuario y de presentar la información de manera comprensible. La vista no realiza operaciones lógicas; simplemente muestra la información proporcionada por el modelo.\nControlador (Controller): # El controlador actúa como intermediario entre el modelo y la vista. Recibe las solicitudes del usuario desde la interfaz de usuario (generalmente a través de la URL) y decide cómo responder a esas solicitudes. Luego, el controlador interactúa con el modelo para obtener los datos necesarios y los pasa a la vista adecuada para que se muestren al usuario.\nRelación con PHP # PHP es un lenguaje de programación ampliamente utilizado para desarrollar aplicaciones web, y MVC es un patrón arquitectónico popular en el desarrollo de aplicaciones web. Aquí te explico cómo se relaciona PHP con el patrón MVC:\nModelo (Model) en PHP: # En PHP, el modelo representa la capa de acceso a datos y la lógica empresarial. Se encarga de interactuar con la base de datos y manejar todas las operaciones relacionadas con la persistencia de datos. Aquí puedes definir clases que representen las entidades de tu aplicación, como usuarios, productos, pedidos, etc. Además, el modelo puede incluir lógica para validar datos antes de guardarlos en la base de datos y para procesar la información recibida del controlador.\nVista (View) en PHP: # En PHP, la vista corresponde a la presentación de la información al usuario. Las vistas en PHP son archivos que contienen código HTML y pueden incluir código PHP incrustado para mostrar datos dinámicos provenientes del modelo. Las vistas son responsables de presentar la información de manera clara y atractiva para el usuario.\nControlador (Controller) en PHP: # En PHP, el controlador es el encargado de recibir las solicitudes del usuario y tomar decisiones sobre cómo responder a esas solicitudes. El controlador puede recibir parámetros de la URL (como enrutamiento) para determinar qué acción tomar. Luego, el controlador interactúa con el modelo para obtener los datos necesarios y selecciona la vista adecuada para mostrar los resultados.\nPara implementar el patrón MVC en PHP, generalmente se organiza el código en diferentes carpetas o directorios para cada componente. Por ejemplo:\nCarpeta \u0026ldquo;models\u0026rdquo;: Contiene las clases del modelo para interactuar con la base de datos y gestionar la lógica de la aplicación. Carpeta \u0026ldquo;views\u0026rdquo;: Contiene los archivos que representan la interfaz de usuario y utilizan código PHP para mostrar los datos proporcionados por el controlador. Carpeta \u0026ldquo;controllers\u0026rdquo;: Contiene las clases que manejan las solicitudes del usuario, interactúan con el modelo y seleccionan las vistas apropiadas para mostrar los datos. Es importante destacar que existen muchos marcos de trabajo (frameworks) de PHP, como Laravel, Symfony o CodeIgniter, que facilitan la implementación del patrón MVC y proporcionan estructuras y herramientas para desarrollar aplicaciones de manera más eficiente y organizada. Estos frameworks ya incorporan la estructura MVC y ofrecen funcionalidades adicionales para simplificar el desarrollo web.\n","date":"27 julio 2023","permalink":"/platform/php/mvc/intro/","section":"Phps","summary":"Patrón MVC # El patrón Modelo-Vista-Controlador (MVC) es una arquitectura de diseño de software que se utiliza comúnmente en el desarrollo de aplicaciones web y de escritorio.","title":"Modelo, Vista, Controlador"},{"content":"Te daré varios ejemplos. Sé que pueden ser muchos, y si gustas, puedes solo analizar aquellos que te ayuden a repasar conceptos nuevos.\nStored procedures # Crear un procedimiento almacenado que devuelva todos los registros de una tabla específica. DELIMITER // CREATE PROCEDURE ObtenerRegistrosTabla(IN NombreTabla VARCHAR(100)) BEGIN SELECT * FROM NombreTabla; END // DELIMITER ; Crear un procedimiento almacenado que inserte un nuevo registro en una tabla. DELIMITER // CREATE PROCEDURE InsertarNuevoRegistro(IN Nombre VARCHAR(50), IN Edad INT, IN Email VARCHAR(100)) BEGIN INSERT INTO Personas (Nombre, Edad, Email) VALUES (Nombre, Edad, Email); END // DELIMITER ; Crear un procedimiento almacenado que actualice el salario de un empleado en función de su identificador. DELIMITER // CREATE PROCEDURE ActualizarSalarioEmpleado(IN EmpleadoID INT, IN NuevoSalario DECIMAL(10, 2)) BEGIN UPDATE Empleados SET Salario = NuevoSalario WHERE EmpleadoID = EmpleadoID; END // DELIMITER ; Crear un procedimiento almacenado que calcule la suma de dos números y devuelva el resultado. DELIMITER // CREATE PROCEDURE SumarDosNumeros(IN Numero1 INT, IN Numero2 INT, OUT Resultado INT) BEGIN SET Resultado = Numero1 + Numero2; END // DELIMITER ; Crear un procedimiento almacenado que calcule el promedio de salarios de los empleados y lo actualice en una tabla de resumen. -- Crear el procedimiento almacenado DELIMITER // CREATE PROCEDURE ActualizarPromedioSalarios() BEGIN DECLARE avgSalario DECIMAL(10, 2); SELECT AVG(Salario) INTO avgSalario FROM Empleados; -- Actualizar el promedio en la tabla de resumen UPDATE TablaResumen SET PromedioSalario = avgSalario WHERE ID = 1; END // DELIMITER ; Stored procedures # Crear un trigger que actualice la fecha de modificación cada vez que se inserte o actualice un registro en una tabla. CREATE TRIGGER ActualizarFechaModificacion BEFORE INSERT OR UPDATE ON MiTabla FOR EACH ROW BEGIN SET NEW.FechaModificacion = NOW(); END; Crear un trigger que impida la eliminación de registros de una tabla en ciertas condiciones. CREATE TRIGGER ImpedirEliminacion BEFORE DELETE ON MiTabla FOR EACH ROW BEGIN IF OLD.CondicionProhibida = 1 THEN SIGNAL SQLSTATE \u0026#39;45000\u0026#39; SET MESSAGE_TEXT = \u0026#39;No se permite eliminar este registro.\u0026#39;; END IF; END; Crear un trigger que actualice el stock de un producto automáticamente cuando se registre una venta. CREATE TRIGGER ActualizarStockDespuesDeVenta AFTER INSERT ON Ventas FOR EACH ROW BEGIN UPDATE Productos SET Stock = Stock - NEW.Cantidad WHERE ProductoID = NEW.ProductoID; END; Crear un trigger que registre los cambios de precio de un producto en una tabla de historial de precios. -- Crear la tabla de historial de precios (si aún no existe) CREATE TABLE IF NOT EXISTS HistorialPrecios ( HistorialID INT AUTO_INCREMENT PRIMARY KEY, ProductoID INT, PrecioAnterior DECIMAL(10, 2), PrecioNuevo DECIMAL(10, 2), FechaCambio TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); -- Crear el trigger CREATE TRIGGER RegistrarCambioPrecio AFTER UPDATE ON Productos FOR EACH ROW BEGIN IF NEW.Precio \u0026lt;\u0026gt; OLD.Precio THEN INSERT INTO HistorialPrecios (ProductoID, PrecioAnterior, PrecioNuevo) VALUES (NEW.ProductoID, OLD.Precio, NEW.Precio); END IF; END; Crear un trigger que restrinja la inserción de registros en una tabla en función de una condición específica. CREATE TRIGGER ImpedirInsercion BEFORE INSERT ON MiTabla FOR EACH ROW BEGIN IF NEW.CondicionProhibida = 1 THEN SIGNAL SQLSTATE \u0026#39;45000\u0026#39; SET MESSAGE_TEXT = \u0026#39;No se permite la inserción con esta condición.\u0026#39;; END IF; END; Functions # Crear una función que calcule el área de un círculo dado su radio. DELIMITER // CREATE FUNCTION CalcularAreaCirculo(Radio DECIMAL(10, 2)) RETURNS DECIMAL(10, 2) BEGIN DECLARE Area DECIMAL(10, 2); SET Area = 3.14159 * Radio * Radio; RETURN Area; END // DELIMITER ; Crear una función que convierta una cantidad de dólares a euros utilizando un tipo de cambio dado. DELIMITER // CREATE FUNCTION ConvertirDolaresAEuros(Dolares DECIMAL(10, 2), TipoCambio DECIMAL(10, 2)) RETURNS DECIMAL(10, 2) BEGIN DECLARE Euros DECIMAL(10, 2); SET Euros = Dolares * TipoCambio; RETURN Euros; END // DELIMITER ; Crear una función que devuelva el nombre completo (nombre y apellido) de un empleado en base a su ID. DELIMITER // CREATE FUNCTION ObtenerNombreCompletoEmpleado(EmpleadoID INT) RETURNS NVARCHAR(100) BEGIN DECLARE NombreCompleto NVARCHAR(100); SELECT CONCAT(Nombre, \u0026#39; \u0026#39;, Apellido) INTO NombreCompleto FROM Empleados WHERE EmpleadoID = EmpleadoID; RETURN NombreCompleto; END // DELIMITER ; Crear una función que devuelva el total de ventas realizadas por un cliente específico en un rango de fechas. DELIMITER // CREATE FUNCTION CalcularTotalVentasPorCliente(ClienteID INT, FechaInicio DATE, FechaFin DATE) RETURNS DECIMAL(10, 2) BEGIN DECLARE TotalVentas DECIMAL(10, 2); SELECT COALESCE(SUM(Importe), 0) INTO TotalVentas FROM Ventas WHERE ClienteID = ClienteID AND FechaVenta BETWEEN FechaInicio AND FechaFin; RETURN TotalVentas; END // DELIMITER ; Crear una función que cuente el número de productos en una categoría determinada. DELIMITER // CREATE FUNCTION ContarProductosPorCategoria(CategoriaID INT) RETURNS INT BEGIN DECLARE Contador INT; SELECT COUNT(*) INTO Contador FROM Productos WHERE CategoriaID = CategoriaID; RETURN Contador; END // DELIMITER ; ","date":"26 julio 2023","permalink":"/platform/sql/repaso_sp_triggers_functions/","section":"Sqls","summary":"Te daré varios ejemplos.","title":"Repaso: Stored Procedures, Triggers y Functions"},{"content":"Tailwind CSS es un framework de diseño moderno y altamente personalizable que ha ganado popularidad en el desarrollo web por su enfoque de \u0026ldquo;utility-first\u0026rdquo;. Permite a los desarrolladores crear interfaces web de manera eficiente mediante la combinación de clases utilitarias para diseñar componentes. Una de las características destacadas de Tailwind CSS es su capacidad para implementar fácilmente un modo oscuro o \u0026ldquo;Dark Mode\u0026rdquo; en una aplicación web, lo que permite a los usuarios cambiar el aspecto visual del sitio para reducir la fatiga visual en entornos de poca luz y mejorar la experiencia del usuario.\nSintaxis básica para habilitar el Dark Mode en Tailwind # Tailwind CSS ofrece un modo oscuro incorporado que se puede habilitar agregando algunas configuraciones al archivo de configuración. Por lo general, el modo oscuro se controla mediante la clase dark. Aquí hay un ejemplo básico de cómo habilitar el modo oscuro en Tailwind:\nPrimero, asegúrate de que esté habilitado el modo oscuro en el archivo de configuración tailwind.config.js: module.exports = { darkMode: \u0026#34;class\u0026#34;, // Alternativas: \u0026#39;media\u0026#39;, \u0026#39;false\u0026#39; // Resto de la configuración... }; Ahora, puedes usar la clase dark en cualquier lugar de tu HTML para aplicar estilos específicos para el modo oscuro: \u0026lt;div class=\u0026#34;bg-white dark:bg-black\u0026#34;\u0026gt; \u0026lt;p class=\u0026#34;text-gray-800 dark:text-white\u0026#34;\u0026gt; Este es un ejemplo de texto que cambiará su apariencia en el modo oscuro. \u0026lt;/p\u0026gt; \u0026lt;/div\u0026gt; Ventajas del Dark Mode en Tailwind # Mejora la experiencia del usuario: El modo oscuro puede ayudar a reducir la fatiga visual y el estrés ocular, especialmente en entornos con poca luz o durante largas sesiones nocturnas.\nEstilo moderno: El modo oscuro se ha vuelto muy popular en la última década debido a su atractivo estético y apariencia moderna.\nAccesibilidad: Implementar un modo oscuro puede mejorar la accesibilidad para usuarios con sensibilidad a la luz o problemas visuales.\nDiferenciación del sitio web: Ofrecer un modo oscuro puede ser una forma de destacar entre la competencia y brindar una experiencia única a los usuarios.\nDesventajas del Dark Mode en Tailwind # Compatibilidad del navegador: Algunos navegadores más antiguos pueden no ser totalmente compatibles con el modo oscuro, lo que puede afectar la experiencia del usuario.\nDiseño adicional: Implementar un modo oscuro puede requerir tiempo y esfuerzo adicionales para diseñar estilos específicos y garantizar una apariencia coherente en ambos modos.\nAumento del tamaño del archivo: La adición de estilos adicionales para el modo oscuro puede aumentar el tamaño total del archivo CSS, lo que afecta el tiempo de carga de la página.\nEjemplos de código con Tailwind Dark Mode # Cambiar el esquema de color de un botón en modo oscuro: \u0026lt;button class=\u0026#34;px-4 py-2 bg-blue-500 text-white dark:bg-gray-700 dark:text-yellow-300\u0026#34; \u0026gt; Enviar \u0026lt;/button\u0026gt; Cambiar el tamaño del texto según el modo oscuro: \u0026lt;p class=\u0026#34;text-xl dark:text-2xl\u0026#34;\u0026gt; Este es un texto de tamaño normal, pero más grande en modo oscuro. \u0026lt;/p\u0026gt; Personalización del Dark Mode en Tailwind # Tailwind CSS permite personalizar completamente el modo oscuro según tus preferencias de diseño. Puedes modificar los colores, tamaños de fuente, espaciado y cualquier otro atributo que desees. Para personalizar el modo oscuro, puedes agregar o modificar las propiedades correspondientes en el archivo tailwind.config.js.\nPor ejemplo, para cambiar los colores predeterminados del modo oscuro:\nmodule.exports = { darkMode: \u0026#34;class\u0026#34;, theme: { extend: { colors: { darkModeBackground: \u0026#34;#121212\u0026#34;, darkModeText: \u0026#34;#f1f1f1\u0026#34;, darkModeAccent: \u0026#34;#4a90e2\u0026#34;, }, }, }, // Resto de la configuración... }; Luego, en tu HTML, puedes usar estas clases personalizadas:\n\u0026lt;div class=\u0026#34;bg-white dark:bg-darkModeBackground\u0026#34;\u0026gt; \u0026lt;p class=\u0026#34;text-gray-800 dark:text-darkModeText\u0026#34;\u0026gt; Este es un ejemplo de texto personalizado en modo oscuro. \u0026lt;/p\u0026gt; \u0026lt;button class=\u0026#34;px-4 py-2 bg-darkModeAccent text-white dark:bg-gray-700 dark:text-yellow-300\u0026#34; \u0026gt; Enviar \u0026lt;/button\u0026gt; \u0026lt;/div\u0026gt; Con esta configuración, puedes ajustar completamente el aspecto del modo oscuro para que se adapte al diseño de tu sitio web y cumpla con tus preferencias visuales.\nEl modo oscuro en Tailwind CSS es una característica poderosa que permite a los desarrolladores crear interfaces web modernas y atractivas con facilidad. Ofrece ventajas en términos de experiencia del usuario y accesibilidad, pero también presenta desafíos relacionados con la compatibilidad del navegador y el diseño adicional necesario. Afortunadamente, Tailwind CSS proporciona herramientas para personalizar completamente el modo oscuro y adaptarlo al estilo único de cada sitio web.\n","date":"26 julio 2023","permalink":"/platform/tailwindcss/dark_mode/","section":"Tailwindcsses","summary":"Tailwind CSS es un framework de diseño moderno y altamente personalizable que ha ganado popularidad en el desarrollo web por su enfoque de \u0026ldquo;utility-first\u0026rdquo;.","title":"Dark Mode en Tailwind CSS"},{"content":"En SQL (Structured Query Language), una función es un conjunto de instrucciones predefinidas o definidas por el usuario que realizan una tarea específica y devuelven un valor. Las funciones en SQL son similares a las funciones en otros lenguajes de programación, ya que aceptan parámetros de entrada, realizan cálculos o manipulaciones en los datos y devuelven un resultado.\nTipos de Funciones en SQL # Hay varios tipos de funciones en SQL, pero los tres tipos principales son:\nFunciones de Agregación: Estas funciones realizan cálculos sobre un conjunto de filas y devuelven un único valor como resultado. Algunos ejemplos de funciones de agregación incluyen SUM, AVG, COUNT, MIN y MAX.\nFunciones Escalares: Estas funciones operan fila por fila y devuelven un valor por cada fila procesada. Pueden ser utilizadas para realizar cálculos, manipular cadenas de texto, fechas u otros tipos de datos. Algunas funciones escalares comunes son CONCAT, LEN, UPPER, LOWER, DATEPART, entre otras.\nFunciones de Tabla: Estas funciones devuelven una tabla como resultado. Pueden ser utilizadas en consultas SQL como si fueran tablas reales. Las funciones de tabla son especialmente útiles cuando necesitas realizar cálculos complejos o manipulaciones en un conjunto de datos y deseas reutilizar esa lógica en diferentes consultas.\nSintaxis de Creación de Funciones en SQL # La sintaxis para crear una función en SQL varía según el sistema de gestión de bases de datos (DBMS) que estés utilizando. Sin embargo, a continuación se presenta una sintaxis general para crear una función escalara en SQL:\nDELIMITER // CREATE FUNCTION calcular_promedio(num1 INT, num2 INT) RETURNS DECIMAL(10, 2) BEGIN DECLARE promedio DECIMAL(10, 2); SET promedio = (num1 + num2) / 2; RETURN promedio; END // DELIMITER ; DELIMITER //: Esta línea es una instrucción específica de PHPMyAdmin. Cambia el delimitador predeterminado de las sentencias SQL de ; a //. Es necesario hacer esto para que PHPMyAdmin pueda reconocer el bloque completo de código de la función, ya que las funciones almacenadas pueden contener varias sentencias SQL.\nCREATE FUNCTION: Es una declaración SQL que se utiliza para crear una función almacenada en la base de datos.\nnombre_funcion: Es el nombre que le asignas a la función almacenada. Debe ser único dentro de la base de datos y seguir las reglas de nomenclatura de identificadores válidos (por ejemplo, no puede comenzar con un número y no debe contener caracteres especiales).\n(parametro1 tipo_dato1, parametro2 tipo_dato2, ...): Aquí defines los parámetros de entrada que aceptará la función. Los parámetros son valores que se pasan a la función cuando se llama. Debes especificar el nombre del parámetro seguido del tipo de dato que aceptará. Puedes tener cero o más parámetros separados por comas.\nRETURNS tipo_retorno: Especifica el tipo de dato que la función devolverá como resultado. Es el valor que se obtiene como resultado cuando se llama a la función.\nBEGIN y END: Estas palabras clave marcan el inicio y el final del cuerpo de la función. Todo el código de la función estará entre estas dos palabras clave. Dentro del cuerpo de la función, se define la lógica de la función y las operaciones que realizará.\n-- Lógica de la función: Es un comentario que se utiliza para explicar o documentar la lógica de la función. Es opcional y no afecta la ejecución del código.\nDECLARE promedio DECIMAL(10, 2);: Es una declaración que se utiliza para declarar variables locales dentro de la función. En este ejemplo, hemos declarado una variable llamada promedio de tipo DECIMAL(10, 2). Las variables locales se utilizan para almacenar valores temporales dentro de la función.\nSET promedio = (num1 + num2) / 2;: Es una sentencia que se utiliza para asignar un valor a la variable promedio. En este ejemplo, hemos calculado el promedio de dos números num1 y num2 y lo hemos almacenado en la variable promedio.\nRETURN promedio;: Es una sentencia que devuelve el valor de la variable promedio como resultado de la función. La función finalizará y devolverá este valor cuando se llame.\n//: Es el delimitador que cierra el bloque de código de la función. Como hemos cambiado el delimitador con DELIMITER //, ahora utilizamos // para indicar el final del bloque de código de la función.\nDELIMITER ;: Es una instrucción que restaura el delimitador predeterminado (;) después de haber definido la función. Esto es necesario para que las sentencias SQL posteriores en PHPMyAdmin se ejecuten correctamente sin necesidad de cambiar el delimitador nuevamente.\nEn PHPMyAdmin, al crear funciones almacenadas, procedimientos almacenados o desencadenadores (triggers) que contengan múltiples sentencias SQL, es necesario especificar un delimitador diferente al punto y coma (;). Esto se debe a que PHPMyAdmin utiliza el punto y coma para separar las sentencias individuales, por lo que necesitas cambiar el delimitador para que pueda reconocer el bloque completo de código de la función, procedimiento o desencadenador.\nPara cambiar el delimitador en PHPMyAdmin, utiliza la sentencia DELIMITER seguida del delimitador deseado (por ejemplo, $$, //, ||, etc.). Luego, escribes el bloque de código de la función, procedimiento o desencadenador y finalmente, cierras con el delimitador especificado.\nEjemplo # En este caso, crearemos una función llamada calcular_promedio.\nDELIMITER // CREATE FUNCTION calcular_promedio(num1 INT, num2 INT) RETURNS DECIMAL(10, 2) BEGIN DECLARE promedio DECIMAL(10, 2); SET promedio = (num1 + num2) / 2; RETURN promedio; END // DELIMITER ; En este ejemplo, hemos creado una función llamada calcular_promedio que acepta dos parámetros de tipo INT (números enteros) y devuelve un valor de tipo DECIMAL(10, 2) (número decimal con dos decimales). La lógica de la función calcula el promedio de los dos números y lo devuelve como resultado.\nPodemos llamar a esta función de la siguiente manera:\nSELECT calcular_promedio(10, 5); Ventajas de Utilizar Funciones en SQL # Reusabilidad: Las funciones permiten encapsular lógica de negocio compleja en unidades reutilizables, lo que facilita el mantenimiento y evita la repetición de código. Modularidad: Al dividir la lógica en funciones más pequeñas, el código se vuelve más fácil de entender y de depurar. Mejora el Rendimiento: Al utilizar funciones de agregación y funciones de tabla, se puede mejorar el rendimiento al realizar cálculos y manipulaciones en el lado del servidor de la base de datos. Las funciones en SQL son una herramienta poderosa que permite realizar cálculos, manipulaciones y consultas complejas en los datos almacenados en una base de datos. Al utilizar funciones de manera efectiva, puedes mejorar la organización, reusabilidad y rendimiento de tus consultas SQL. Los diferentes tipos de funciones en SQL (de agregación, escalares y de tabla) brindan la flexibilidad necesaria para abordar una amplia variedad de escenarios y operaciones en bases de datos.\n","date":"25 julio 2023","permalink":"/platform/sql/functions/","section":"Sqls","summary":"En SQL (Structured Query Language), una función es un conjunto de instrucciones predefinidas o definidas por el usuario que realizan una tarea específica y devuelven un valor.","title":"Funciones en SQL"},{"content":"¿Qué es Responsive Design? # Responsive Design (Diseño Responsivo) es una técnica de diseño web que busca adaptar y optimizar la apariencia y la experiencia de usuario de un sitio web en diferentes dispositivos y tamaños de pantalla. El objetivo principal es garantizar que el contenido y el diseño se vean bien y sean fáciles de usar en computadoras de escritorio, tablets, smartphones y otros dispositivos.\nTailwind CSS y Responsive Design # Tailwind CSS es un framework de CSS utility-first que proporciona una forma eficiente de construir interfaces responsive y personalizables. El enfoque utility-first de Tailwind CSS facilita la creación de diseños responsive, ya que ofrece un conjunto completo de clases utilitarias que permiten ajustar el diseño en función de las necesidades de diferentes dispositivos.\nClases Responsive en Tailwind CSS # Tailwind CSS ofrece clases especiales para trabajar con diseños responsive. Estas clases utilizan el prefijo \u0026ldquo;sm:\u0026rdquo;, \u0026ldquo;md:\u0026rdquo;, \u0026ldquo;lg:\u0026rdquo;, \u0026ldquo;xl:\u0026rdquo;, y \u0026ldquo;2xl:\u0026rdquo; para definir diferentes tamaños de pantalla. Cuando se usan, los estilos asociados se aplicarán solo a las pantallas con el tamaño especificado o superior.\nEjemplos con Código # Ocultar un elemento en pantallas pequeñas y mostrarlo en pantallas medianas y superiores: \u0026lt;div class=\u0026#34;hidden sm:block\u0026#34;\u0026gt; Este contenido estará oculto en pantallas pequeñas pero visible en pantallas medianas y superiores. \u0026lt;/div\u0026gt; Cambiar el tamaño del texto en diferentes tamaños de pantalla: \u0026lt;h1 class=\u0026#34;text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl\u0026#34;\u0026gt; Título Responsive \u0026lt;/h1\u0026gt; Alineación de elementos en diferentes tamaños de pantalla: \u0026lt;div class=\u0026#34;flex justify-center sm:justify-start md:justify-between lg:justify-end xl:justify-around\u0026#34; \u0026gt; \u0026lt;div\u0026gt;Elemento 1\u0026lt;/div\u0026gt; \u0026lt;div\u0026gt;Elemento 2\u0026lt;/div\u0026gt; \u0026lt;div\u0026gt;Elemento 3\u0026lt;/div\u0026gt; \u0026lt;/div\u0026gt; Trabajando móvil primero # De forma predeterminada, Tailwind utiliza un sistema de punto de interrupción de prioridad móvil, similar al que podría estar acostumbrado en otros marcos como Bootstrap.\nOrientación a pantallas móviles # Donde este enfoque sorprende a la gente con mayor frecuencia que, para diseñar algo para dispositivos móviles, debe usar la versión sin prefijo de una utilidad, no la versión con el prefijo sm. No pienses que sm significa \u0026ldquo;en pantallas pequeñas\u0026rdquo;, piensa que es \u0026ldquo;en el punto de interrupción pequeño \u0026ldquo;.\nNo utilizar sm para segmentar dispositivos móviles \u0026lt;!-- Esto solo centrará el texto en pantallas de 640 px y más anchas, no en pantallas pequeñas --\u0026gt; \u0026lt;div class=\u0026#34;sm:text-center\u0026#34;\u0026gt;\u0026lt;/div\u0026gt; Use utilidades sin prefijo para apuntar a dispositivos móviles y anúlelas en puntos de interrupción más grandes. \u0026lt;!-- Esto centrará el texto en el móvil y lo alineará a la izquierda en pantallas de 640 px y más anchas. --\u0026gt; \u0026lt;div class=\u0026#34;text-center sm:text-left\u0026#34;\u0026gt;\u0026lt;/div\u0026gt; Por esta razón, a menudo es una buena idea implementar primero el diseño móvil para un diseño, luego superponer cualquier cambio que tenga sentido para las pantallas sm, seguido de pantallas md, etc.\nPersonalización de Breakpoints en Tailwind CSS # Además de los breakpoints predefinidos, Tailwind CSS permite personalizar los puntos de quiebre según tus necesidades. En el archivo \u0026ldquo;tailwind.config.js\u0026rdquo;, puedes modificar la propiedad \u0026ldquo;breakpoints\u0026rdquo; para agregar o ajustar los tamaños de pantalla:\nmodule.exports = { theme: { screens: { \u0026#39;tablet\u0026#39;: \u0026#39;640px\u0026#39;, // =\u0026gt; @media (min-width: 640px) { ... } \u0026#39;laptop\u0026#39;: \u0026#39;1024px\u0026#39;, // =\u0026gt; @media (min-width: 1024px) { ... } \u0026#39;desktop\u0026#39;: \u0026#39;1280px\u0026#39;, // =\u0026gt; @media (min-width: 1280px) { ... } }, } } Luego, puedes usar estos breakpoints personalizados en tu código:\n\u0026lt;div class=\u0026#34;hidden tablet:block\u0026#34;\u0026gt; Este contenido estará oculto en pantallas más pequeñas que \u0026#39;tablet\u0026#39; y visible en \u0026#39;tablet\u0026#39; y superiores. \u0026lt;/div\u0026gt; Valores arbitrarios # Si necesita usar un punto de interrupción único que no tiene sentido incluir en su tema, use los modificadores min o max para generar un punto de interrupción personalizado sobre la marcha usando cualquier valor arbitrario.\n\u0026lt;div class=\u0026#34;min-[320px]:text-center max-[600px]:bg-sky-300\u0026#34;\u0026gt; \u0026lt;!-- ... --\u0026gt; \u0026lt;/div\u0026gt; Ventajas del Responsive Design en Tailwind CSS # Facilidad de uso: Tailwind CSS facilita la creación de interfaces responsive al proporcionar clases utilitarias y breakpoints predefinidos. Flexibilidad: Con la personalización de breakpoints, puedes adaptar el diseño de manera más precisa a las necesidades de tu proyecto. Eficiencia: Utilizar clases utilitarias reduce la necesidad de escribir CSS personalizado, lo que puede resultar en hojas de estilo más livianas y un mejor rendimiento del sitio. Consistencia: Tailwind CSS proporciona una metodología coherente para trabajar con estilos responsive, lo que facilita el mantenimiento y la colaboración en proyectos. ","date":"25 julio 2023","permalink":"/platform/tailwindcss/responsive_design/","section":"Tailwindcsses","summary":"¿Qué es Responsive Design?","title":"Responsive Design en Tailwind CSS"},{"content":"Los triggers en SQL son un componente esencial para la programación de bases de datos. Son objetos que se asocian a tablas y se activan automáticamente cuando ocurren ciertos eventos en la base de datos, como insertar, actualizar o eliminar datos en una tabla específica. Su objetivo principal es ejecutar una secuencia de comandos o instrucciones SQL en respuesta a estos eventos, permitiendo automatizar acciones o asegurar la integridad de los datos.\nA continuación, te proporcionaré información completa y extendida sobre triggers en SQL, abordando su funcionamiento, tipos, ventajas, desventajas y mejores prácticas:\nFuncionamiento de Triggers en SQL # Eventos desencadenantes: Los triggers se activan en respuesta a ciertos eventos que ocurren en las tablas. Los eventos comunes que pueden activar un trigger son:\nINSERT: Cuando se inserta un nuevo registro en la tabla. UPDATE: Cuando se actualiza un registro existente en la tabla. DELETE: Cuando se elimina un registro de la tabla. Acciones del trigger: Un trigger está asociado a una o varias acciones específicas, que son un conjunto de comandos SQL que se ejecutan cuando el trigger se activa. Estas acciones pueden ser cualquier operación válida en SQL, como realizar consultas, insertar registros en otras tablas, actualizar datos o lanzar errores.\nMomento de ejecución: Los triggers pueden ser de dos tipos en función del momento en que se ejecutan:\nTriggers \u0026ldquo;Before\u0026rdquo; (Antes): Se activan antes de que ocurra la acción que desencadenó el evento. Permiten modificar los datos antes de que sean insertados, actualizados o eliminados. Triggers \u0026ldquo;After\u0026rdquo; (Después): Se activan después de que ocurra la acción que desencadenó el evento. Útiles para auditar o registrar cambios realizados en la tabla. Disparadores de fila y de tabla: Los triggers pueden ser de fila o de tabla.\nTrigger de fila: Se activa para cada fila afectada por el evento desencadenante. Trigger de tabla: Se activa una sola vez para la operación completa, sin importar el número de filas afectadas. Creación de Triggers: # La sintaxis para crear un trigger varía según la base de datos, pero aquí hay una representación general de cómo se crea un trigger en SQL:\nDELIMITER // CREATE [OR REPLACE] TRIGGER nombre_trigger {BEFORE | AFTER} {INSERT | UPDATE | DELETE} ON nombre_tabla [FOR EACH ROW] [WHEN (condición)] BEGIN -- Código del trigger (acciones a realizar) END; // DELIMITER ; DELIMITER //: Establece // como el delimitador temporal. Esto es necesario para permitir el uso de ; dentro del bloque del trigger, ya que el delimitador predeterminado ; finalizaría el trigger antes de tiempo.\nCREATE [OR REPLACE] TRIGGER: Comando para crear un trigger en la base de datos.\nnombre_trigger: Es el nombre que le das al trigger.\n{BEFORE | AFTER}: Indica cuándo se activará el trigger en relación con el evento que lo dispara.\n{INSERT | UPDATE | DELETE}: Indica el tipo de evento que activará el trigger.\nON nombre_tabla: Especifica la tabla a la que está asociado el trigger.\n[FOR EACH ROW]: Es una cláusula opcional para crear un trigger de fila.\n[WHEN (condición)]: Es otra cláusula opcional que establece una condición para que el trigger se active.\nBEGIN: Marca el inicio del bloque de código del trigger.\n\u0026ndash; Código del trigger (acciones a realizar): Aquí se deben colocar las acciones que deseas que el trigger realice cuando se active.\nEND;: Marca el final del bloque de código del trigger.\n//: Este // indica el final del trigger y reemplaza al delimitador temporal // que se estableció al principio.\nDELIMITER ;: Restaura el delimitador predeterminado ; para otros comandos SQL fuera del trigger.\nVentajas de los Triggers en SQL: # Automatización: Los triggers permiten automatizar tareas, como mantener registros de auditoría, validar datos antes de insertarlos o mantener consistencia entre tablas relacionadas.\nIntegridad de datos: Ayudan a mantener la integridad de los datos al aplicar restricciones o validaciones adicionales en el nivel de base de datos.\nRegistro de cambios: Los triggers \u0026ldquo;After\u0026rdquo; pueden utilizarse para registrar cambios históricos, lo que facilita la auditoría y el seguimiento de eventos.\nDesacoplamiento de aplicaciones: Algunas lógicas de negocio pueden implementarse mediante triggers, lo que permite mantener la lógica de la base de datos separada de la lógica de la aplicación.\nDesventajas de los Triggers en SQL: # Complejidad y mantenimiento: Los triggers pueden aumentar la complejidad de la base de datos, lo que puede dificultar el mantenimiento y la depuración.\nRendimiento: Los triggers pueden afectar el rendimiento de las operaciones de la base de datos, especialmente si involucran operaciones costosas o tienen un diseño ineficiente.\nFalta de visibilidad: Algunas acciones realizadas a través de triggers pueden no ser evidentes para los desarrolladores, lo que dificulta la comprensión completa del flujo de datos.\nDesencadenar anidación: La anidación excesiva de triggers puede hacer que el comportamiento de la base de datos sea difícil de predecir y mantener.\nMejores prácticas al utilizar Triggers en SQL: # Utilizar triggers de forma moderada: Evitar el uso excesivo de triggers para no complicar innecesariamente la lógica de la base de datos.\nDocumentar los triggers: Proporcionar una documentación clara y detallada para cada trigger, explicando su propósito y funcionamiento.\nPruebas exhaustivas: Realizar pruebas exhaustivas de los triggers para asegurar que funcionen como se espera y no causen problemas en el entorno de producción.\nEvitar lógica compleja: Mantener los triggers lo más simples y directos posible, evitando lógicas complejas que puedan dificultar su mantenimiento.\nMonitoreo y rendimiento: Monitorear el rendimiento de la base de datos, prestando atención a cómo los triggers afectan las operaciones para optimizarlos si es necesario.\nRecuerda que la sintaxis y funcionalidad exacta de los triggers pueden variar según la base de datos específica que estés utilizando, ya que cada sistema de gestión de bases de datos (DBMS) puede tener sus particularidades.\n","date":"25 julio 2023","permalink":"/platform/sql/triggers/","section":"Sqls","summary":"Los triggers en SQL son un componente esencial para la programación de bases de datos.","title":"Triggers"},{"content":"Hover # En Tailwind CSS, la pseudo-clase hover se utiliza para aplicar estilos a un elemento cuando el puntero del mouse se encuentra sobre él. Es una forma sencilla y poderosa de agregar interactividad y mejorar la experiencia del usuario al resaltar elementos en respuesta a la interacción del usuario.\nLa sintaxis básica para aplicar estilos hover en Tailwind CSS es agregar el prefijo hover: antes de la clase que deseas aplicar cuando el puntero está sobre el elemento. A continuación, se muestra un ejemplo simple de cómo usar la pseudo-clase hover:\n\u0026lt;button class=\u0026#34;bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded\u0026#34; \u0026gt; Hover me \u0026lt;/button\u0026gt; En este ejemplo, el botón tendrá un fondo azul cuando el puntero del mouse no esté sobre él (bg-blue-500), pero cuando el puntero se coloque sobre el botón, cambiará a un fondo azul más oscuro (bg-blue-700) debido al uso de hover:bg-blue-700.\nPuedes aplicar hover a cualquier clase de Tailwind CSS, lo que te permite agregar interactividad a diversos elementos como botones, enlaces, íconos, tarjetas y más. A continuación, te mostraré cómo puedes utilizar hover con diferentes propiedades de estilo en Tailwind CSS:\nCambiar el color de texto al pasar el puntero sobre un enlace: \u0026lt;a href=\u0026#34;#\u0026#34; class=\u0026#34;text-blue-500 hover:text-blue-700\u0026#34;\u0026gt;Enlace\u0026lt;/a\u0026gt; Aumentar el tamaño de un ícono cuando se pasa el puntero sobre él: \u0026lt;i class=\u0026#34;fas fa-heart text-red-500 hover:text-red-700 text-xl\u0026#34;\u0026gt;\u0026lt;/i\u0026gt; Mostrar una transición de opacidad al pasar el puntero sobre una imagen: \u0026lt;img src=\u0026#34;imagen.jpg\u0026#34; class=\u0026#34;hover:opacity-75\u0026#34; alt=\u0026#34;Imagen\u0026#34; /\u0026gt; Aplicar una sombra al pasar el puntero sobre una tarjeta: \u0026lt;div class=\u0026#34;bg-white shadow-lg p-4 rounded-md hover:shadow-xl\u0026#34;\u0026gt; Contenido de la tarjeta \u0026lt;/div\u0026gt; Cambiar el color de fondo de una celda de tabla cuando se pasa el puntero sobre ella: \u0026lt;table class=\u0026#34;border-collapse\u0026#34;\u0026gt; \u0026lt;tr\u0026gt; \u0026lt;td class=\u0026#34;border px-4 py-2 hover:bg-gray-100\u0026#34;\u0026gt;Celda 1\u0026lt;/td\u0026gt; \u0026lt;td class=\u0026#34;border px-4 py-2 hover:bg-gray-100\u0026#34;\u0026gt;Celda 2\u0026lt;/td\u0026gt; \u0026lt;/tr\u0026gt; \u0026lt;/table\u0026gt; Focus # En CSS, la pseudo-clase :focus se utiliza para aplicar estilos a un elemento cuando este tiene el enfoque. Esto sucede cuando un elemento (como un campo de entrada o un enlace) recibe el enfoque del usuario, generalmente mediante un clic o al navegar mediante teclado (usando la tecla Tab, por ejemplo). El uso de estilos :focus es fundamental para mejorar la accesibilidad y la experiencia del usuario, ya que indica claramente qué elemento está siendo seleccionado o activo.\nEn Tailwind CSS, la sintaxis para aplicar estilos :focus es similar a la de :hover. Simplemente agrega el prefijo focus: antes de la clase que deseas aplicar cuando el elemento tiene el enfoque.\nAquí tienes algunos ejemplos de cómo utilizar :focus en Tailwind CSS:\nCambiar el color de borde de un campo de entrada cuando está enfocado: \u0026lt;input type=\u0026#34;text\u0026#34; class=\u0026#34;border focus:border-blue-500\u0026#34; /\u0026gt; Resaltar un enlace con un color de fondo cuando está enfocado: \u0026lt;a href=\u0026#34;#\u0026#34; class=\u0026#34;bg-blue-500 text-white px-4 py-2 rounded focus:bg-blue-700\u0026#34;\u0026gt; Enlace \u0026lt;/a\u0026gt; Aumentar el tamaño de un botón cuando está enfocado: \u0026lt;button class=\u0026#34;bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded focus:scale-110\u0026#34; \u0026gt; Hacer clic \u0026lt;/button\u0026gt; Cambiar el color de fondo de una tarjeta cuando está enfocada: \u0026lt;div class=\u0026#34;bg-white shadow-lg p-4 rounded-md hover:shadow-xl focus:bg-gray-100\u0026#34; \u0026gt; Contenido de la tarjeta \u0026lt;/div\u0026gt; Es importante tener en cuenta que para que los estilos :focus sean aplicados, el elemento debe ser capaz de recibir el enfoque. Por ejemplo, enlaces (\u0026lt;a\u0026gt;), campos de entrada (\u0026lt;input\u0026gt;), áreas de texto (\u0026lt;textarea\u0026gt;) y elementos interactivos como botones (\u0026lt;button\u0026gt;) son elementos por defecto que pueden recibir el enfoque. Si deseas aplicar estilos :focus a otros elementos, como divs o párrafos, es posible que necesites agregar el atributo tabindex para permitir que el elemento reciba el enfoque de manera accesible.\nActive # En Tailwind CSS, manejar el estado active se refiere a aplicar estilos a un elemento cuando está activado o presionado por el usuario. Esto ocurre generalmente cuando un usuario hace clic o toca un elemento interactivo, como un botón o un enlace. Al aplicar estilos active, puedes proporcionar retroalimentación visual instantánea al usuario para indicar que su interacción ha sido reconocida.\nLa sintaxis básica para aplicar estilos active en Tailwind CSS es agregar el prefijo active: antes de la clase que deseas aplicar cuando el elemento está activo. Es similar a cómo se utiliza hover y focus en Tailwind CSS.\nAquí tienes algunos ejemplos de cómo manejar el estado active en Tailwind CSS:\nCambiar el color de fondo de un botón cuando está activo: \u0026lt;button class=\u0026#34;bg-blue-500 hover:bg-blue-700 active:bg-blue-800 text-white font-bold py-2 px-4 rounded\u0026#34; \u0026gt; Clic aquí \u0026lt;/button\u0026gt; En este ejemplo, el botón tendrá un fondo azul oscuro cuando está activo debido al uso de active:bg-blue-800. Esta clase se aplicará cuando el botón está presionado por el usuario.\nCambiar el color de texto de un enlace cuando está activo: \u0026lt;a href=\u0026#34;#\u0026#34; class=\u0026#34;text-blue-500 hover:text-blue-700 active:text-blue-800\u0026#34;\u0026gt; Enlace \u0026lt;/a\u0026gt; En este caso, el enlace tendrá un color de texto azul oscuro cuando está activo debido al uso de active:text-blue-800.\nAumentar el tamaño de un botón cuando está activo: \u0026lt;button class=\u0026#34;bg-green-500 hover:bg-green-700 active:scale-110 text-white font-bold py-2 px-4 rounded\u0026#34; \u0026gt; Clic aquí \u0026lt;/button\u0026gt; Este botón se escalará ligeramente cuando está activo debido al uso de active:scale-110.\nAl igual que con hover y focus, puedes combinar active con otras clases de Tailwind CSS para crear efectos más complejos y personalizados en respuesta a las interacciones del usuario. Además, también puedes personalizar tus propias variantes active y agregarlas al archivo de configuración (tailwind.config.js) para definir estilos activos personalizados para tu proyecto específico.\n","date":"24 julio 2023","permalink":"/platform/tailwindcss/states/","section":"Tailwindcsses","summary":"Hover # En Tailwind CSS, la pseudo-clase hover se utiliza para aplicar estilos a un elemento cuando el puntero del mouse se encuentra sobre él.","title":"Hover, Focus y otros estados en Tailwind CSS"},{"content":"Los Procedimientos Almacenados son un componente esencial de SQL (Structured Query Language) que permite a los desarrolladores y administradores de bases de datos almacenar un conjunto de instrucciones SQL para su posterior reutilización y ejecución. Estas instrucciones SQL se guardan en el servidor de bases de datos como un objeto, lo que facilita su llamada y ejecución desde diversas aplicaciones y consultas, proporcionando así una forma eficiente de trabajar con datos y mejorar la seguridad de las operaciones.\nVentajas de los Procedimientos Almacenados: # Mejora del rendimiento: Almacenar instrucciones SQL en el servidor de bases de datos reduce la cantidad de datos que deben transferirse entre el cliente y el servidor, lo que mejora el rendimiento y disminuye la latencia, especialmente en aplicaciones con altas demandas de acceso a la base de datos.\nReutilización de código: Los procedimientos almacenados permiten a los desarrolladores escribir una vez y usar varias veces. Esto ahorra tiempo y evita la duplicación de código, lo que mejora la eficiencia y la mantenibilidad del sistema.\nSeguridad: Los procedimientos almacenados pueden restringir el acceso directo a las tablas, lo que reduce el riesgo de ataques de inyección SQL y protege los datos sensibles. Los permisos de acceso a los procedimientos almacenados se pueden otorgar con precisión a roles y usuarios específicos, garantizando una gestión segura de la información.\nAbstracción de datos: Al usar procedimientos almacenados, los desarrolladores pueden ocultar la estructura interna de las tablas y proporcionar una interfaz coherente para acceder a los datos. Esto facilita los cambios en la base de datos sin afectar las aplicaciones que utilizan el procedimiento almacenado.\nTransacciones: Los procedimientos almacenados pueden agrupar múltiples instrucciones SQL en una transacción única, lo que garantiza que todas las operaciones se completen correctamente o se deshagan en caso de error, manteniendo así la integridad de los datos.\nCreación y Uso de Procedimientos Almacenados # La creación de procedimientos almacenados implica escribir bloques de código SQL dentro de una función específica y guardarla en el servidor de bases de datos. A continuación, se presenta un ejemplo básico de creación y uso de un procedimiento almacenado en SQL:\nDELIMITER // CREATE PROCEDURE nombre_del_procedimiento ([parámetros]) BEGIN -- Cuerpo del procedimiento (instrucciones SQL) END; // DELIMITER ; Ejemplo # Aquí tienes un ejemplo básico de un Stored Procedure que inserta un nuevo registro en una tabla de empleados en MySQL:\nSupongamos que tenemos una tabla llamada employees con los siguientes campos: id, name, age y department.\nCreación de la tabla employees: CREATE TABLE employees ( id INT AUTO_INCREMENT PRIMARY KEY, name VARCHAR(50) NOT NULL, age INT, department VARCHAR(50) ); Creación de la tabla employees: El siguiente Stored Procedure se llama sp_InsertEmployee y acepta tres parámetros de entrada: employee_name, employee_age y employee_department. El procedimiento insertará un nuevo empleado en la tabla employees con los valores proporcionados.\nDELIMITER // CREATE PROCEDURE sp_InsertEmployee( IN employee_name VARCHAR(50), IN employee_age INT, IN employee_department VARCHAR(50) ) BEGIN INSERT INTO employees (name, age, department) VALUES (employee_name, employee_age, employee_department); END; // DELIMITER ; En este ejemplo, hemos utilizado DELIMITER // para cambiar el delimitador predeterminado ; a //, ya que necesitamos definir varias instrucciones SQL dentro del procedimiento.\nUso del Stored Procedure: Para utilizar el Stored Procedure sp_InsertEmployee, podemos llamarlo utilizando la sentencia CALL y proporcionando los valores para los parámetros de entrada.\nCALL sp_InsertEmployee(\u0026#39;John Doe\u0026#39;, 30, \u0026#39;IT\u0026#39;); Esta llamada ejecutará el Stored Procedure, insertando un nuevo registro en la tabla employees con el nombre \u0026ldquo;John Doe\u0026rdquo;, edad de 30 años y departamento \u0026ldquo;IT\u0026rdquo;.\nExplicación de la sintaxis: # CREATE PROCEDURE: Declaración para crear un nuevo Stored Procedure. sp_InsertEmployee: Nombre del Stored Procedure. IN employee_name VARCHAR(50): Parámetros de entrada del procedimiento. El IN indica que son parámetros de entrada. Los parámetros especificados son employee_name, employee_age y employee_department, todos con sus respectivos tipos de datos (VARCHAR(50) y INT). BEGIN y END: Delimitadores que definen el cuerpo del procedimiento, donde se colocan las instrucciones SQL a ejecutar. INSERT INTO employees: Instrucción SQL para insertar un nuevo registro en la tabla employees. VALUES: Especifica los valores que se insertarán en las columnas name, age y department. Recuerda que los Stored Procedures son una herramienta poderosa en las bases de datos, ya que permiten encapsular lógica de negocio compleja y reutilizable, mejorando la eficiencia y la seguridad de las operaciones con datos.\n","date":"24 julio 2023","permalink":"/platform/sql/stored_procedures/","section":"Sqls","summary":"Los Procedimientos Almacenados son un componente esencial de SQL (Structured Query Language) que permite a los desarrolladores y administradores de bases de datos almacenar un conjunto de instrucciones SQL para su posterior reutilización y ejecución.","title":"Procedimientos almacenados (Stored Procedures) - Mejorando la eficiencia y seguridad en la gestión de bases de datos"},{"content":"El respaldo de datos es una práctica fundamental en la gestión de bases de datos que implica crear copias de seguridad periódicas para proteger la información crítica almacenada en ellas. Este artículo explora la importancia de realizar copias de seguridad en bases de datos, destacando los riesgos potenciales de no hacerlo y los beneficios que aporta esta práctica para garantizar la integridad y continuidad de los datos. Además, se discuten diferentes tipos de copias de seguridad y las mejores prácticas para implementar un sistema de respaldo efectivo.\nIntroducción # En el mundo digital actual, los datos son uno de los activos más valiosos para organizaciones e individuos. Las bases de datos juegan un papel central en la recopilación y almacenamiento de información crítica. Sin embargo, los datos están expuestos a diversas amenazas, como fallas de hardware, errores humanos, ataques cibernéticos y desastres naturales. El respaldo adecuado de una base de datos se convierte en una salvaguardia vital para proteger la integridad de los datos y asegurar la continuidad del negocio.\nRiesgos de no hacer backup # La falta de copias de seguridad regulares puede llevar a graves consecuencias. Cuando una base de datos sufre una pérdida catastrófica, pueden ocurrir pérdidas de datos irreparables y una interrupción significativa en la operatividad del sistema. Esto puede resultar en la pérdida de ingresos, daño a la reputación de la organización y posibles implicaciones legales. Sin un respaldo adecuado, se compromete la confidencialidad, integridad y disponibilidad de la información almacenada.\nBeneficios de realizar copias de seguridad # Hacer copias de seguridad de una base de datos proporciona varios beneficios, entre los cuales se destacan:\nRecuperación ante desastres: Las copias de seguridad permiten restaurar rápidamente la base de datos en caso de una pérdida de datos o un desastre, reduciendo el tiempo de inactividad y minimizando las pérdidas.\nProtección contra errores humanos: Los errores humanos son comunes y pueden provocar la eliminación accidental de datos importantes. El respaldo garantiza que se puedan revertir estos cambios no deseados.\nSeguridad frente a ataques cibernéticos: Los ciberataques, como ransomware y ataques de denegación de servicio, pueden corromper o eliminar datos valiosos. Con copias de seguridad, es posible recuperar los datos sin tener que ceder ante las demandas de los ciberdelincuentes.\nPruebas y desarrollo: Las copias de seguridad también son útiles para realizar pruebas y experimentos en entornos de desarrollo sin afectar los datos en producción.\nMejores prácticas para el respaldo de bases de datos # Algunas recomendaciones para implementar un sistema de respaldo efectivo incluyen:\nProgramación regular: Establecer una programación adecuada de copias de seguridad, según la criticidad de los datos y la frecuencia de cambios.\nAlmacenamiento seguro: Mantener las copias de seguridad en ubicaciones seguras y fuera del sitio para protegerse contra robos y desastres naturales.\nPruebas de restauración: Realizar periódicamente pruebas para asegurarse de que las copias de seguridad sean efectivas y se puedan restaurar correctamente.\nMantenimiento de registros: Mantener un registro detallado de las copias de seguridad realizadas y las fechas correspondientes.\nPodemos clasificar las copias de seguridad en función de la manera de copiar los datos o el dispositivo o ubicación de la copia.\nCopias de seguridad según la ubicación # Un backup puede hacerse de diferentes maneras, todo dependerá del tipo de empresa, sector, tamaño… Lo principal es que las copias de seguridad nunca se almacenen en un mismo lugar sino en, al menos, dos soportes distintos o diferente ubicación. Por ejemplo, una copia en la nube y otra en local o dos copias en local pero en ubicaciones distintas (Ej. Alicante y Valencia).\nLas copias de seguridad pueden almacenarse:\nEn la nube (Backup Cloud) # Consiste en hacer una copia de seguridad de los datos o archivos que elijamos (de nuestros ordenadores, servidores, móvil…) en un almacenamiento seguro en la nube.\nEl objetivo es que siempre tengamos acceso a la información, desde cualquier lugar y dispositivo, para poder recuperarla en caso de que suframos un ciberataque, fallos de hardware o software, robos…\nEn local # La copia de seguridad local es cuando el almacenamiento está en el hadware de la propia empresa (cabinas de discos duros o racks, cintas magnética de almacenamiento de datos…)\nEntre sus ventajas encontramos la capacidad de restauración, ya que obtendremos todos nuestros datos sin tener que enviar una solicitud al servidor remoto que gestione nuestras copias de seguridad ni tener que conectarnos a internet.\nCopias de seguridad según la forma de copiar los datos # Completa (Full Backup) # Este tipo de copia es la más importante ya que almacena todos los datos o archivos guardados de la empresa. Se suele realizar una vez a la semana. Los datos se recuperan de forma sencilla, pero ocupa más espacio y el proceso es más lento.\nDiferencial (Backup diferencial) # Este tipo podríamos decir que se encuentra entre la copia completa y la incremental, ya que el proceso es más rápido que en un backup completo pero requiere más espacio que un backup incremental.\nGuarda solo los datos nuevos o modificados desde la última copia completa.\nIncremental (Backup incremental) # Este tipo de backup es el más completo ya que solo realiza la copia de los archivos que han sido modificados desde la última copia. El software comparará las fechas de modificación de archivos, copiando solamente aquellos con fecha más reciente.\nAl requerir menos espacio que una copia completa, permite ahorrar almacenamiento y ofrece mayor rapidez.\nBuenas prácticas para hacer una copia de seguridad # Ahora que, esperemos, ya confías en la importancia de los backups vamos a darte una serie de consejos para llevar a cabo este proceso:\nNo esperes a que ocurra el problema # Si piensas que a ti nunca te pasará nada… ¡estás equivocado! Como bien dice el dicho, “mejor prevenir que curar”. Contar con un con un sistema de respaldo de tu información como Veeam Backup for Office 365, Azure Backup o NetApp SaaS Backup for Microsoft Office 365, te ayudará a poner a salvo tu negocio.\nSigue la regla del 3-2-1 # Realiza 3 copias de seguridad de tus datos. Guarda esas copias en, al menos, 2 tipos de soportes diferentes Asegúrate de tener 1 copia en otro site (como almacenamiento en la nube) Asegúrate que las copias de seguridad realmente funcionan # Imagina que necesitas recuperar algún archivo y cuando vas a utilizar la copia de seguridad no responde o no está disponible…\nEs muy importante realizar pruebas con los backups para comprobar que realmente ese proceso se está haciendo correctamente.\nExportar una base de datos MySQL o MariaDB # Para realizar la exportación de la base de datos se utiliza el comando mysqldump desde la consola. Una vez realizado el backup, el archivo generado se puede mover fácilmente. Para empezar a exportar la base de datos hay que ejecutar lo siguiente:\nmysqldump -u nombre_usuario -p nombre_bbdd \u0026gt; nombre_archivo_dump.sql nombre_usuario hace referencia al nombre del usuario de la base de datos. nombre_bbdd hay que sustituirlo por el nombre de la base de datos que quieres exportar. nombre_archivo_dump.sql es el archivo que se generará con toda la información de la base de datos. Si el comando te genera el error mysqldump is not recognized as an internal or external command, puedes ver el siguiente video: ","date":"20 julio 2023","permalink":"/platform/sql/backup_bd/","section":"Sqls","summary":"El respaldo de datos es una práctica fundamental en la gestión de bases de datos que implica crear copias de seguridad periódicas para proteger la información crítica almacenada en ellas.","title":" La Importancia de Hacer Backup a una Base de Datos: Garantizando la Integridad y Continuidad de los Datos"},{"content":"Buenas prácticas # Las llaves foráneas son un componente crucial en el diseño de bases de datos relacionales, y su uso adecuado es fundamental para mantener la integridad referencial y garantizar la consistencia de los datos. Aquí te presento algunas buenas prácticas para trabajar con llaves foráneas en SQL:\nUtilizar restricciones de integridad referencial: Siempre debes usar restricciones de integridad referencial para todas las llaves foráneas en tu base de datos. Esto evita datos huérfanos o referencias inválidas y mantiene la consistencia de los datos.\nEspecificar acciones ON DELETE y ON UPDATE: Al definir una llave foránea, es importante especificar las acciones que se llevarán a cabo en la tabla con la llave foránea cuando ocurra una operación de eliminación o actualización en la tabla relacionada. Las acciones más comunes son CASCADE, RESTRICT, SET NULL y SET DEFAULT. Elige la acción adecuada según la lógica de negocio para mantener la integridad referencial.\nDocumentar las relaciones entre tablas: Es importante documentar las relaciones entre tablas, incluyendo las llaves primarias y foráneas, para que otros desarrolladores o administradores de la base de datos comprendan cómo se relacionan los datos en la base de datos.\nRealizar pruebas exhaustivas: Antes de implementar las llaves foráneas en producción, asegúrate de realizar pruebas exhaustivas para garantizar que las relaciones entre tablas funcionen correctamente y que no haya conflictos en las operaciones de inserción, actualización o eliminación.\nConsiderar el impacto de las operaciones en cascada: Si utilizas operaciones en cascada en las llaves foráneas, ten en cuenta que las operaciones de eliminación o actualización pueden tener un impacto significativo en las tablas relacionadas. Asegúrate de comprender cómo funcionarán estas operaciones en cascada antes de implementarlas.\nRevisar el rendimiento regularmente: A medida que la base de datos crece y cambia con el tiempo, es importante revisar periódicamente el rendimiento de las consultas y operaciones relacionadas con las llaves foráneas. Si es necesario, ajusta los índices o realiza optimizaciones para mantener un rendimiento óptimo.\nSiguiendo estas buenas prácticas, podrás utilizar llaves foráneas de manera efectiva y garantizar la integridad y consistencia de los datos en tu base de datos relacional.\nCada ejemplo presenta una descripción del problema y la solución correspondiente. Recuerda que los ejemplos se basan en el esquema de las tablas presentado previamente.\nEjemplo 1 # Tienes las siguientes tablas que representan una tienda en línea:\nCREATE TABLE Clientes ( ID_Cliente INT PRIMARY KEY, Nombre VARCHAR(50), -- otras columnas ); CREATE TABLE Pedidos ( ID_Pedido INT PRIMARY KEY, ID_Cliente INT, FechaPedido DATE, -- otras columnas FOREIGN KEY (ID_Cliente) REFERENCES Clientes(ID_Cliente) ); CREATE TABLE Productos ( ID_Producto INT PRIMARY KEY, NombreProducto VARCHAR(100), Precio DECIMAL(10, 2) -- otras columnas ); CREATE TABLE DetallesPedido ( ID_DetallePedido INT PRIMARY KEY, ID_Pedido INT, ID_Producto INT, Cantidad INT, -- otras columnas FOREIGN KEY (ID_Pedido) REFERENCES Pedidos(ID_Pedido), FOREIGN KEY (ID_Producto) REFERENCES Productos(ID_Producto) ); Encuentra el nombre de los clientes que han realizado pedidos de productos con un precio superior a $100.\nSELECT Clientes.Nombre FROM Clientes JOIN Pedidos ON Clientes.ID_Cliente = Pedidos.ID_Cliente JOIN DetallesPedido ON Pedidos.ID_Pedido = DetallesPedido.ID_Pedido JOIN Productos ON DetallesPedido.ID_Producto = Productos.ID_Producto WHERE Productos.Precio \u0026gt; 100; Ejemplo 2 # Tienes las siguientes tablas que representan una empresa con empleados y departamentos:\nCREATE TABLE Departamentos ( ID_Departamento INT PRIMARY KEY, NombreDepartamento VARCHAR(50) -- otras columnas ); CREATE TABLE Empleados ( ID_Empleado INT PRIMARY KEY, NombreEmpleado VARCHAR(100), ID_Departamento INT, JefeID INT, -- otras columnas FOREIGN KEY (ID_Departamento) REFERENCES Departamentos(ID_Departamento), FOREIGN KEY (JefeID) REFERENCES Empleados(ID_Empleado) ); Encuentra los nombres de los empleados que trabajan en el departamento con ID_Departamento = 1 y tienen a otro empleado como su jefe.\nSELECT Empleados.NombreEmpleado FROM Empleados JOIN Departamentos ON Empleados.ID_Departamento = Departamentos.ID_Departamento WHERE Empleados.ID_Departamento = 1 AND Empleados.JefeID IS NOT NULL; Estos ejercicios demuestran cómo puedes utilizar llaves foráneas para relacionar datos en varias tablas y resolver consultas más complejas. Las llaves foráneas permiten realizar operaciones que abarcan múltiples tablas de una manera eficiente y coherente.\n","date":"19 julio 2023","permalink":"/platform/sql/llaves_foraneas/segunda_parte/","section":"Sqls","summary":"Buenas prácticas # Las llaves foráneas son un componente crucial en el diseño de bases de datos relacionales, y su uso adecuado es fundamental para mantener la integridad referencial y garantizar la consistencia de los datos.","title":"Relaciones y llaves foráneas en SQL (segunda parte)"},{"content":"¿Qué son las Llaves Foráneas? # Las llaves foráneas, también conocidas como \u0026ldquo;claves foráneas\u0026rdquo; o \u0026ldquo;foreign keys\u0026rdquo; en inglés, son un concepto fundamental en las bases de datos relacionales. Representan una relación entre dos tablas y se utilizan para mantener la integridad referencial de los datos.\nEn una base de datos relacional, los datos se organizan en tablas que contienen filas y columnas. Cada tabla tiene una o más columnas que se denominan \u0026ldquo;llaves primarias\u0026rdquo; (primary keys). Una llave primaria es un campo o conjunto de campos que identifican de manera única cada fila en la tabla. Sirve como un identificador único para cada registro.\nLa función de las llaves foráneas es establecer una relación entre dos tablas utilizando la llave primaria de una tabla como referencia en otra tabla. En otras palabras, una llave foránea es una columna o conjunto de columnas en una tabla que hace referencia a la llave primaria de otra tabla. Esto permite vincular datos relacionados entre diferentes tablas de la base de datos.\nUn ejemplo simple sería considerar dos tablas: \u0026ldquo;Clientes\u0026rdquo; y \u0026ldquo;Pedidos\u0026rdquo;. En la tabla \u0026ldquo;Clientes\u0026rdquo;, la llave primaria podría ser un campo llamado \u0026ldquo;ID_Cliente\u0026rdquo;. En la tabla \u0026ldquo;Pedidos\u0026rdquo;, podría haber una llave foránea llamada \u0026ldquo;ID_Cliente\u0026rdquo;, que se refiere al campo \u0026ldquo;ID_Cliente\u0026rdquo; de la tabla \u0026ldquo;Clientes\u0026rdquo;. De esta manera, cada pedido estaría asociado a un cliente específico a través de la llave foránea.\nEl uso de llaves foráneas ayuda a garantizar la integridad referencial de la base de datos, lo que significa que los datos relacionados están vinculados de manera coherente y no existen registros huérfanos (registros en una tabla que no tienen un correspondiente en la tabla relacionada). Además, las llaves foráneas son fundamentales para establecer relaciones entre tablas y realizar consultas que combinen datos de varias tablas para obtener información más completa y relevante.\nDefinición de Llave Foránea en SQL # En SQL, una llave foránea (foreign key) es una restricción que se define en una tabla para establecer una relación entre los datos de esa tabla y los datos de otra tabla en la base de datos. La llave foránea se utiliza para mantener la integridad referencial entre las tablas, asegurando que los datos relacionados sean consistentes y precisos.\nLa definición de una llave foránea implica especificar una o más columnas de la tabla actual que se relacionarán con la llave primaria de otra tabla. Esto significa que los valores en esas columnas deben coincidir con los valores de la llave primaria de la tabla relacionada.\nLa sintaxis para definir una llave foránea en SQL puede variar ligeramente según el sistema de gestión de bases de datos (DBMS) que se esté utilizando, pero en general, la estructura es la siguiente:\nCREATE TABLE TablaActual ( columna1 tipo_dato, columna2 tipo_dato, ..., FOREIGN KEY (columna_relacionada) REFERENCES TablaRelacionada (llave_primaria) ); Donde:\nTablaActual: es el nombre de la tabla actual en la que se está definiendo la llave foránea. columna1, columna2, etc.: son las columnas que pertenecen a la tabla actual. columna_relacionada: es la columna o conjunto de columnas de la tabla actual que se relacionarán con la llave primaria de la tabla relacionada. TablaRelacionada: es el nombre de la tabla con la que se establecerá la relación. llave_primaria: es la llave primaria de la tabla relacionada que se vinculará con la columna_relacionada de la tabla actual. Es importante destacar que la tabla relacionada debe existir antes de definir la llave foránea que haga referencia a su llave primaria. Además, dependiendo del DBMS (Sistema de Gestión de Bases de Datos, en inglés), pueden existir opciones adicionales para definir comportamientos de actualización o eliminación en cascada, lo que significa que las acciones realizadas en una tabla se propagarán automáticamente a la tabla relacionada. Esto puede ser útil para mantener la integridad referencial y evitar datos huérfanos en la base de datos.\nImportancia de las Llaves Foráneas # Las llaves foráneas son de gran importancia en el diseño y la gestión de bases de datos relacionales. Aquí están algunas de las razones clave por las que las llaves foráneas son importantes:\nIntegridad referencial: La integridad referencial garantiza que los datos relacionados entre diferentes tablas sean precisos y consistentes. Al establecer una llave foránea que enlace una tabla con otra, se asegura que no existan registros huérfanos o referencias a datos inexistentes. Esto mantiene la integridad de la base de datos y evita inconsistencias que podrían surgir si los datos relacionados no estuvieran bien vinculados.\nMantenimiento de la consistencia: Las llaves foráneas ayudan a mantener la consistencia de los datos al garantizar que solo se puedan agregar o modificar datos relacionados válidos. Si un registro con una llave foránea vinculada a otra tabla se modifica o elimina, el DBMS puede manejar automáticamente la actualización o eliminación en cascada para mantener la coherencia en todas las tablas relacionadas.\nConsultas y análisis de datos: Las llaves foráneas facilitan la realización de consultas que combinan datos de varias tablas para obtener información más completa y significativa. Esto permite a los usuarios obtener información detallada a partir de múltiples tablas mediante la utilización de cláusulas JOIN y otras operaciones relacionales.\nOptimización de rendimiento: Con el uso adecuado de llaves foráneas, el DBMS puede mejorar el rendimiento de las consultas al optimizar las operaciones de búsqueda y acceso a los datos. Al tener índices en las llaves foráneas, el motor de la base de datos puede acelerar la recuperación de datos relacionados, evitando exploraciones innecesarias de la tabla.\nEvitar la redundancia de datos: Las llaves foráneas permiten la normalización de la base de datos, lo que implica dividir los datos en tablas más pequeñas y relacionarlas de manera adecuada. Esto evita la duplicación de información, lo que a su vez reduce la redundancia de datos y ayuda a mantener una base de datos más eficiente y fácil de mantener.\nMantenimiento y evolución del esquema: Al utilizar llaves foráneas, se puede modificar el esquema de la base de datos más fácilmente sin afectar negativamente a las aplicaciones que utilizan la base de datos. Las llaves foráneas proporcionan una forma estructurada y consistente de relacionar las tablas, lo que facilita el mantenimiento y evolución del diseño de la base de datos a medida que los requisitos cambian con el tiempo.\nEn resumen, las llaves foráneas son fundamentales para garantizar la integridad y la coherencia de los datos en una base de datos relacional. Facilitan la gestión de datos relacionados, mejoran el rendimiento de las consultas y ayudan a mantener una base de datos organizada y eficiente a lo largo del tiempo.\nRestricciones en Llaves Foráneas # Las llaves foráneas, al ser un elemento importante para mantener la integridad referencial en una base de datos relacional, pueden tener diferentes restricciones que se aplican para garantizar la consistencia y precisión de los datos. Estas restricciones aseguran que las relaciones establecidas entre las tablas sean válidas y que no se produzcan operaciones que puedan afectar negativamente la integridad de la base de datos. Algunas de las restricciones comunes en llaves foráneas son las siguientes:\nUnicidad de la relación: Una llave foránea debe apuntar a una llave primaria única en la tabla relacionada. Esto garantiza que cada fila en la tabla que contiene la llave foránea esté vinculada a una sola fila en la tabla relacionada.\nAcción en cascada (ON DELETE y ON UPDATE): Estas restricciones definen qué sucede en la tabla con llaves foráneas cuando se realiza una operación de eliminación o actualización en la tabla relacionada. Las opciones típicas son:\nON DELETE CASCADE: Si se elimina una fila en la tabla relacionada, todas las filas relacionadas en la tabla con la llave foránea también se eliminan automáticamente en cascada. ON UPDATE CASCADE: Si se actualiza el valor de la llave primaria en la tabla relacionada, la llave foránea en la tabla actual también se actualiza en cascada para mantener la relación. Acción restringida (ON DELETE y ON UPDATE): Con estas restricciones, se evita que ciertas operaciones se realicen si existen registros relacionados en la tabla con la llave foránea. Las opciones comunes son:\nON DELETE RESTRICT: No se permite la eliminación de una fila en la tabla relacionada si hay registros relacionados en la tabla actual. ON UPDATE RESTRICT: No se permite la actualización de la llave primaria en la tabla relacionada si hay registros relacionados en la tabla actual. Nulo permitido (ON DELETE y ON UPDATE): Al utilizar estas restricciones, se permite establecer los valores de la llave foránea en nulo si se elimina o actualiza la fila correspondiente en la tabla relacionada.\nON DELETE SET NULL: Cuando se elimina la fila relacionada en la tabla, la llave foránea en la tabla actual se establece en nulo. ON UPDATE SET NULL: Cuando se actualiza la llave primaria en la tabla relacionada, la llave foránea en la tabla actual se establece en nulo. Estas restricciones permiten establecer reglas para mantener la integridad referencial y evitar acciones que puedan afectar negativamente la coherencia de los datos en la base de datos. Las opciones disponibles pueden variar según el sistema de gestión de bases de datos (DBMS) utilizado, pero generalmente proporcionan mecanismos flexibles para garantizar la consistencia de los datos en el contexto de las relaciones entre tablas.\nEjemplos # A continuación te mostraré algunos ejemplos de cómo crear llaves foráneas con diferentes restricciones utilizando sentencias SQL. Para estos ejemplos, asumiremos que tenemos dos tablas: \u0026ldquo;Clientes\u0026rdquo; y \u0026ldquo;Pedidos\u0026rdquo;, donde la tabla \u0026ldquo;Pedidos\u0026rdquo; tiene una llave foránea que hace referencia al campo \u0026ldquo;ID_Cliente\u0026rdquo; en la tabla \u0026ldquo;Clientes\u0026rdquo;.\nAcción en cascada (ON DELETE y ON UPDATE): # CREATE TABLE Clientes ( ID_Cliente INT PRIMARY KEY, Nombre VARCHAR(50), -- otras columnas ); CREATE TABLE Pedidos ( ID_Pedido INT PRIMARY KEY, ID_Cliente INT, -- otras columnas FOREIGN KEY (ID_Cliente) REFERENCES Clientes(ID_Cliente) ON DELETE CASCADE ON UPDATE CASCADE ); Acción restringida (ON DELETE y ON UPDATE): # CREATE TABLE Clientes ( ID_Cliente INT PRIMARY KEY, Nombre VARCHAR(50), -- otras columnas ); CREATE TABLE Pedidos ( ID_Pedido INT PRIMARY KEY, ID_Cliente INT, -- otras columnas FOREIGN KEY (ID_Cliente) REFERENCES Clientes(ID_Cliente) ON DELETE RESTRICT ON UPDATE RESTRICT ); Nulo permitido (ON DELETE y ON UPDATE): # CREATE TABLE Clientes ( ID_Cliente INT PRIMARY KEY, Nombre VARCHAR(50), -- otras columnas ); CREATE TABLE Pedidos ( ID_Pedido INT PRIMARY KEY, ID_Cliente INT NULL, -- otras columnas FOREIGN KEY (ID_Cliente) REFERENCES Clientes(ID_Cliente) ON DELETE SET NULL ON UPDATE SET NULL ); Estos ejemplos ilustran cómo se pueden utilizar diferentes restricciones al crear una llave foránea en una tabla. Es importante recordar que las restricciones específicas disponibles pueden variar según el DBMS que se esté utilizando, ya que algunos sistemas de gestión de bases de datos pueden proporcionar opciones adicionales o diferentes formas de especificar las restricciones en las llaves foráneas.\nBuenas prácticas # Nombres Descriptivos: Utilizar nombres descriptivos para las llaves foráneas y las columnas relacionadas para facilitar la comprensión del esquema de la base de datos.\nMantenimiento y Actualización: Asegurarse de mantener las llaves foráneas actualizadas cuando se realicen cambios en el esquema de la base de datos, y realizar copias de seguridad periódicas para garantizar la integridad de los datos.\n","date":"19 julio 2023","permalink":"/platform/sql/llaves_foraneas/primera_parte/","section":"Sqls","summary":"¿Qué son las Llaves Foráneas?","title":"Relaciones y llaves foráneas en SQL (primera parte)"},{"content":"Funciones y métodos para trabajar con arrays # En PHP, hay una variedad de funciones y métodos incorporados que te permiten realizar diversas operaciones y manipulaciones con arrays. Aquí tienes algunas de las funciones y métodos más comunes para trabajar con arrays:\nFunciones básicas # count($array): Devuelve el número de elementos en un array. empty($array): Verifica si un array está vacío. isset($array[$indice]): Verifica si un índice o clave específica existe en un array. in_array($valor, $array): Verifica si un valor está presente en un array. array_keys($array): Devuelve un array con todas las claves de un array. Funciones de manipulación # array_push($array, $elemento1, $elemento2, ...): Añade uno o más elementos al final de un array. array_pop($array): Extrae y devuelve el último elemento de un array. array_shift($array): Extrae y devuelve el primer elemento de un array. array_unshift($array, $elemento1, $elemento2, ...): Añade uno o más elementos al principio de un array. array_merge($array1, $array2): Combina dos o más arrays en uno solo. Funciones de búsqueda y filtrado # array_search($valor, $array): Busca un valor y devuelve la clave correspondiente en un array. array_filter($array, $callback): Filtra los elementos de un array según una función de callback. array_slice($array, $inicio, $longitud): Extrae una porción de un array especificando el índice de inicio y la longitud. Funciones de ordenamiento # sort($array): Ordena un array en orden ascendente. rsort($array): Ordena un array en orden descendente. asort($array): Ordena un array asociativo en orden ascendente según los valores. arsort($array): Ordena un array asociativo en orden descendente según los valores. ksort($array): Ordena un array asociativo en orden ascendente según las claves. krsort($array): Ordena un array asociativo en orden descendente según las claves. Estas son solo algunas de las funciones y métodos disponibles para trabajar con arrays en PHP. Puedes consultar la documentación oficial de PHP para obtener una lista completa y conocer más detalles sobre cada función y método.\nMejores prácticas y consideraciones # Cuando trabajas con arrays en PHP, es importante seguir algunas mejores prácticas y consideraciones para garantizar un código limpio, eficiente y fácil de mantener. Aquí tienes algunas recomendaciones:\nNombramiento descriptivo: Elige nombres descriptivos y significativos para tus arrays. Utiliza nombres que reflejen claramente la información que se almacena en ellos. Esto ayuda a mejorar la legibilidad y comprensión del código.\nValidación de existencia: Antes de acceder a un elemento en un array, asegúrate de validar su existencia utilizando la función isset() o array_key_exists(). Esto evita errores si intentas acceder a un índice inexistente o una clave no definida.\nComprobación de tipo de datos: Verifica los tipos de datos de los elementos en un array si es necesario. Puedes usar funciones como is_int(), is_string(), is_array(), etc., para realizar comprobaciones de tipo antes de realizar operaciones específicas en los elementos.\nUso de funciones y métodos de arrays: Familiarízate con las diversas funciones y métodos de arrays que PHP proporciona. Utiliza las funciones y métodos apropiados para realizar operaciones comunes, como ordenar, buscar, filtrar y transformar elementos en lugar de implementar soluciones personalizadas.\nEvitar referencias confusas: Ten en cuenta que cuando asignas un array existente a una nueva variable, ambas variables apuntarán al mismo array en la memoria. Esto significa que cualquier modificación en una variable afectará a la otra. Si deseas crear una copia independiente del array, utiliza la función array_copy() o asigna los valores manualmente.\nEvitar anidaciones excesivas: Aunque los arrays multidimensionales son útiles, evita anidar demasiados niveles de arrays si no es necesario. Demasiadas anidaciones pueden complicar la legibilidad y dificultar el mantenimiento del código. Considera otras estructuras de datos si la anidación se vuelve excesiva.\nDocumentación y comentarios: Siempre es útil documentar el propósito y la estructura de los arrays en tu código. Agrega comentarios que expliquen qué tipo de datos se espera, la finalidad\n","date":"18 julio 2023","permalink":"/platform/php/estructura_de_datos/segunda_parte/","section":"Phps","summary":"Funciones y métodos para trabajar con arrays # En PHP, hay una variedad de funciones y métodos incorporados que te permiten realizar diversas operaciones y manipulaciones con arrays.","title":"Estructura de datos en PHP - array - (segunda parte)"},{"content":"En PHP, un array es una estructura de datos que permite almacenar múltiples valores en una sola variable. Puedes pensar en un array como una lista o contenedor que puede contener diferentes elementos, como números, cadenas de texto u otros arrays. Los arrays en PHP se utilizan ampliamente para almacenar y manipular conjuntos de datos relacionados.\nTipos # Un array en PHP puede ser de varios tipos, incluyendo numérico, asociativo y multidimensional:\nArray numérico # Es el tipo más básico de array en PHP. Los elementos se almacenan en orden secuencial y se acceden a través de un índice numérico. El índice inicial por defecto es 0, y luego los índices se incrementan en uno para cada elemento adicional. Por ejemplo:\n$numeros = array(1, 2, 3, 4, 5); Array asociativo # En este tipo de array, los elementos se almacenan como pares clave-valor, donde cada elemento tiene una clave única asociada que se utiliza para acceder al valor correspondiente. Las claves pueden ser cadenas de texto o números. Por ejemplo:\n$persona = array( \u0026#34;nombre\u0026#34; =\u0026gt; \u0026#34;Juan\u0026#34;, \u0026#34;edad\u0026#34; =\u0026gt; 25, \u0026#34;ciudad\u0026#34; =\u0026gt; \u0026#34;Madrid\u0026#34; ); Array multidimensional # Un array multidimensional es un array que contiene otros arrays como elementos. Esto permite crear estructuras de datos más complejas, como matrices o tablas. Por ejemplo:\n$matriz = array( array(1, 2, 3), array(4, 5, 6), array(7, 8, 9) ); Para acceder a los elementos de un array, se utiliza la sintaxis de corchetes ([]). Puedes acceder a un elemento individual utilizando su índice (para arrays numéricos) o su clave (para arrays asociativos). Por ejemplo:\necho $numeros[0]; // Imprime 1 echo $persona[\u0026#34;nombre\u0026#34;]; // Imprime \u0026#34;Juan\u0026#34; echo $matriz[1][2]; // Imprime 6 En PHP, los arrays son flexibles y permiten agregar, modificar y eliminar elementos de forma dinámica. También hay muchas funciones y métodos incorporados para trabajar con arrays, como count(), array_push(), array_pop(), array_merge(), entre otros.\nOperaciones básicas con arrays # En PHP, los arrays ofrecen una variedad de operaciones básicas que te permiten manipular y trabajar con los datos almacenados en ellos. A continuación, se presentan algunas de las operaciones más comunes con arrays:\nCrear un array # Puedes crear un array asignando valores a una variable utilizando la sintaxis de corchetes ([]). Aquí hay algunos ejemplos:\n$array = []; // Array vacío $numeros = [1, 2, 3, 4, 5]; // Array numérico $frutas = [\u0026#39;manzana\u0026#39;, \u0026#39;plátano\u0026#39;, \u0026#39;naranja\u0026#39;]; // Array de cadenas $datos = [10, \u0026#39;texto\u0026#39;, true]; // Array mixto con diferentes tipos de datos Acceder a elementos # Puedes acceder a elementos individuales de un array utilizando su índice numérico dentro de corchetes ([]). El índice numérico comienza desde 0 para el primer elemento. Aquí hay un ejemplo:\n$numeros = [1, 2, 3, 4, 5]; echo $numeros[0]; // Imprime el primer elemento: 1 Modificar elementos # Puedes modificar el valor de un elemento existente en un array asignándole un nuevo valor utilizando su índice. Aquí hay un ejemplo:\n$frutas = [\u0026#39;manzana\u0026#39;, \u0026#39;plátano\u0026#39;, \u0026#39;naranja\u0026#39;]; $frutas[1] = \u0026#39;pera\u0026#39;; // Modifica el segundo elemento a \u0026#39;pera\u0026#39; Añadir elementos # Puedes añadir elementos nuevos a un array utilizando la función array_push() o asignando un nuevo valor a un índice específico. Aquí hay ejemplos de ambas formas:\n$numeros = [1, 2, 3]; array_push($numeros, 4); // Añade el valor 4 al final del array $numeros[3] = 5; // Asigna el valor 5 al índice 3 del array Eliminar elementos: # Puedes eliminar elementos de un array utilizando la función unset() y especificando el índice del elemento que deseas eliminar. Aquí hay un ejemplo:\n$frutas = [\u0026#39;manzana\u0026#39;, \u0026#39;plátano\u0026#39;, \u0026#39;naranja\u0026#39;]; unset($frutas[1]); // Elimina el segundo elemento del array (plátano) Contar elementos: # Puedes contar el número de elementos en un array utilizando la función count(). Aquí hay un ejemplo:\n$frutas = [\u0026#39;manzana\u0026#39;, \u0026#39;plátano\u0026#39;, \u0026#39;naranja\u0026#39;]; $numero_elementos = count($frutas); // Devuelve 3 Estas son solo algunas de las operaciones básicas que puedes realizar con los arrays en PHP. Existen muchas otras funciones y métodos útiles para manipular y trabajar con arrays, como ordenar, buscar, filtrar y más.\nUso de arrays en diferentes contextos # Los arrays en PHP son extremadamente versátiles y se pueden utilizar en una amplia variedad de contextos. Aquí hay algunos ejemplos de cómo se pueden usar los arrays en diferentes situaciones:\nAlmacenamiento y manipulación de datos: Los arrays son comúnmente utilizados para almacenar y manipular conjuntos de datos relacionados. Puedes usar un array para almacenar información de clientes, productos, mensajes, registros de usuarios, entre otros. Esto facilita la organización y el acceso a los datos de manera estructurada.\nFormularios y datos de entrada: Cuando se trabaja con formularios web, los datos enviados por el usuario pueden almacenarse en un array. Cada campo del formulario puede ser un elemento del array, lo que facilita el manejo de los datos enviados.\nBucles y estructuras de control: Los arrays se utilizan a menudo en combinación con bucles para procesar y realizar operaciones repetitivas en conjuntos de datos. Por ejemplo, puedes utilizar un bucle foreach para recorrer todos los elementos de un array y realizar una acción en cada uno de ellos.\nCreación de tablas y matrices: Los arrays multidimensionales son útiles para crear estructuras de datos más complejas, como tablas y matrices. Puedes utilizar arrays multidimensionales para almacenar información en forma de filas y columnas, lo que es especialmente útil para el manejo de datos tabulares.\nAlmacenamiento de opciones y configuraciones: Los arrays son convenientes para almacenar opciones y configuraciones en una sola variable. Puedes usar un array asociativo para almacenar diferentes configuraciones de tu aplicación, como configuraciones de base de datos, ajustes de visualización o preferencias del usuario.\nAlmacenamiento de resultados de consultas de base de datos: Cuando realizas consultas a una base de datos, los resultados pueden almacenarse en un array. Cada fila de resultados se puede representar como un elemento del array, lo que facilita el acceso y la manipulación de los datos recuperados.\nImplementación de estructuras de datos personalizadas: Puedes usar arrays para implementar estructuras de datos personalizadas según tus necesidades. Por ejemplo, puedes usar un array como una pila (stack) o una cola (queue), donde los elementos se agregan y eliminan según el principio LIFO (último en entrar, primero en salir) o FIFO (primero en entrar, primero en salir), respectivamente.\nEstos son solo algunos ejemplos de cómo se pueden utilizar los arrays en diferentes contextos. La flexibilidad y la variedad de operaciones que se pueden realizar con los arrays los convierten en una herramienta esencial en la programación en PHP\n","date":"18 julio 2023","permalink":"/platform/php/estructura_de_datos/primera_parte/","section":"Phps","summary":"En PHP, un array es una estructura de datos que permite almacenar múltiples valores en una sola variable.","title":"Estructura de datos en PHP - array - (primera parte)"},{"content":"Para este repaso te presentaré varios ejercicios que servirán de repaso:\n1. Ejercicio de selección (SELECT): # Supongamos que tienes dos tablas llamadas \u0026ldquo;Customers\u0026rdquo; y \u0026ldquo;Orders\u0026rdquo;. La tabla \u0026ldquo;Customers\u0026rdquo; tiene las siguientes columnas: CustomerID (entero), Name (cadena) y Age (entero). La tabla \u0026ldquo;Orders\u0026rdquo; tiene las siguientes columnas: OrderID (entero), CustomerID (entero), Product (cadena) y Quantity (entero).\nEscribe una consulta SELECT para obtener los nombres de los clientes que han realizado pedidos más de una vez.\n2. Ejercicio de inserción (INSERT): # Supongamos que tienes una tabla llamada \u0026ldquo;Employees\u0026rdquo; con las siguientes columnas: EmployeeID (entero), Name (cadena) y Salary (decimal). Escribe una consulta INSERT para insertar un nuevo empleado llamado \u0026ldquo;John Smith\u0026rdquo; con un salario de 5000.\n3. Ejercicio de actualización (UPDATE): # Supongamos que tienes una tabla llamada \u0026ldquo;Products\u0026rdquo; con las siguientes columnas: ProductID (entero), Name (cadena) y Price (decimal). Escribe una consulta UPDATE para aumentar el precio de todos los productos en un 10%.\n4. Ejercicio de eliminación (DELETE): # Supongamos que tienes una tabla llamada \u0026ldquo;Orders\u0026rdquo; con las siguientes columnas: OrderID (entero), CustomerName (cadena) y OrderDate (fecha). Escribe una consulta DELETE para eliminar todas las órdenes realizadas antes del 1 de enero de 2022.\n5. SELECT con JOIN # Supongamos que tienes las siguientes tablas:\nCREATE TABLE clientes ( cliente_id INT, cliente_nombre VARCHAR(50), direccion VARCHAR(100) ); CREATE TABLE pedidos ( pedido_id INT, cliente_id INT, fecha_pedido DATE ); CREATE TABLE productos ( producto_id INT, producto_nombre VARCHAR(50), precio DECIMAL(10, 2) ); CREATE TABLE detalles_pedido ( detalle_id INT, pedido_id INT, producto_id INT, cantidad INT ); Y se te solicita obtener la siguiente información para todos los pedidos:\nNombre del cliente. Fecha del pedido. Nombre de los productos en el pedido. Cantidad de cada producto en el pedido. Esta consulta combina las tablas clientes, pedidos, productos y detalles_pedido a través de condiciones de igualdad entre los campos relacionados. Esto permitirá obtener la información solicitada para cada pedido, incluyendo el nombre del cliente, la fecha del pedido, el nombre de los productos en el pedido y la cantidad de cada producto.\n6. SELECT con JOIN # Supongamos que tienes las siguientes tablas:\nCREATE TABLE empleados ( empleado_id INT, empleado_nombre VARCHAR(50), departamento_id INT, salario DECIMAL(10, 2) ); CREATE TABLE departamentos ( departamento_id INT, departamento_nombre VARCHAR(50), ubicacion VARCHAR(100) ); CREATE TABLE proyectos ( proyecto_id INT, proyecto_nombre VARCHAR(100), departamento_id INT, fecha_inicio DATE, fecha_fin DATE ); El ejercicio consiste en obtener el nombre del empleado, el nombre del departamento y el nombre del proyecto para aquellos empleados que trabajan en un departamento cuya ubicación es \u0026ldquo;New York\u0026rdquo; (agrega dicho registro a la tabla) y están asignados a proyectos que iniciaron después del 1 de enero de 2023 (agrega este dato a la tabla).\nEn este ejemplo, se realizan múltiples JOINs para relacionar las tablas empleados, departamentos y proyectos. La condición WHERE se utiliza para filtrar los empleados que trabajan en un departamento de ubicación \u0026ldquo;New York\u0026rdquo; y están asignados a proyectos que iniciaron después del 1 de enero de 2023.\n","date":"18 julio 2023","permalink":"/platform/sql/repaso_select_insert_update_delete/","section":"Sqls","summary":"Para este repaso te presentaré varios ejercicios que servirán de repaso:","title":"Repaso: SELECT, INSERT, UPDATE y DELETE"},{"content":"Definición y propósito # El comando ALTER TABLE es una instrucción utilizada en lenguajes de consulta estructurados (SQL) para realizar modificaciones en la estructura de una tabla existente en una base de datos relacional. Permite agregar, modificar o eliminar columnas, establecer restricciones, cambiar propiedades y realizar otras alteraciones en la definición de una tabla sin tener que recrearla por completo.\nEl propósito principal del comando ALTER TABLE es permitir a los administradores y desarrolladores de bases de datos realizar cambios y ajustes en la estructura de una tabla existente para adaptarla a los requisitos cambiantes de la aplicación. Algunos de los propósitos comunes del comando ALTER TABLE son:\nAgregar columnas # ALTER TABLE se utiliza para agregar nuevas columnas a una tabla existente. Esto permite ampliar la estructura de la tabla y agregar nuevos atributos o campos para almacenar información adicional.\nEjemplo:\nALTER TABLE nombre_tabla ADD COLUMN nombre_columna tipo_dato; Para agregar varias columnas a la vez:\nALTER TABLE nombre_tabla ADD COLUMN nombre_columna1 tipo_de_dato1, ADD COLUMN nombre_columna2 tipo_de_dato2, ..., ADD COLUMN nombre_columnaN tipo_de_datoN; Eliminar columnas # Para eliminar una columna de una tabla existente utilizando la sentencia ALTER TABLE en SQL, puedes utilizar la siguiente sintaxis:\nALTER TABLE nombre_tabla DROP COLUMN nombre_columna; Para eliminar varias columnas a la vez:\nALTER TABLE nombre_tabla DROP COLUMN nombre_columna1, DROP COLUMN nombre_columna2, ..., DROP COLUMN nombre_columnaN; Modificar columnas # Para modificar las características de una columna existente en una tabla utilizando la sentencia ALTER TABLE en SQL, puedes seguir estos pasos:\nALTER TABLE nombre_tabla MODIFY COLUMN nombre_columna tipo_de_dato [atributos]; Ejemplo:\nALTER TABLE mi_tabla MODIFY COLUMN mi_columna INT NOT NULL; Plus: Renombrar una tabla # En phpMyAdmin, también puedes cambiar el nombre de una tabla utilizando una sentencia SQL directamente. Aquí tienes un ejemplo:\nRENAME TABLE empleados TO empleados2; Video de refuerzo # ","date":"17 julio 2023","permalink":"/platform/sql/repaso_crear_bd_tablas/","section":"Sqls","summary":"Definición y propósito # El comando ALTER TABLE es una instrucción utilizada en lenguajes de consulta estructurados (SQL) para realizar modificaciones en la estructura de una tabla existente en una base de datos relacional.","title":"ALTER TABLE"},{"content":"Almacenamiento de datos en variables de sesión # Las variables de sesión en PHP pueden contener cualquier tipo de dato, incluyendo cadenas de texto, números, arreglos y objetos serializados. Para guardar datos en una variable de sesión, simplemente se asigna un valor a un elemento del array $_SESSION, como se mostró en el ejemplo anterior.\nEjemplo 1 # Aquí tienes un ejemplo sencillo de cómo utilizar variables de sesión en PHP:\n\u0026lt;?php // Iniciar la sesión session_start(); // Almacenar datos en variables de sesión $_SESSION[\u0026#39;nombre\u0026#39;] = \u0026#39;Juan\u0026#39;; $_SESSION[\u0026#39;edad\u0026#39;] = 25; // Acceder a los valores de sesión $nombre = $_SESSION[\u0026#39;nombre\u0026#39;]; $edad = $_SESSION[\u0026#39;edad\u0026#39;]; // Mostrar los valores de sesión echo \u0026#34;Nombre: \u0026#34; . $nombre . \u0026#34;\u0026lt;br\u0026gt;\u0026#34;; echo \u0026#34;Edad: \u0026#34; . $edad . \u0026#34;\u0026lt;br\u0026gt;\u0026#34;; // Eliminar una variable de sesión específica unset($_SESSION[\u0026#39;edad\u0026#39;]); // Mostrar los valores actualizados de sesión echo \u0026#34;Nombre: \u0026#34; . $nombre . \u0026#34;\u0026lt;br\u0026gt;\u0026#34;; echo \u0026#34;Edad: \u0026#34; . $_SESSION[\u0026#39;edad\u0026#39;] . \u0026#34;\u0026lt;br\u0026gt;\u0026#34;; // Destruir la sesión session_destroy(); ?\u0026gt; En este ejemplo, se inicia la sesión utilizando session_start(). Luego, se almacenan datos en variables de sesión utilizando el array $_SESSION. Se guarda el nombre \u0026lsquo;Juan\u0026rsquo; en $_SESSION['nombre'] y la edad 25 en $_SESSION['edad'].\nDespués, se accede a los valores de sesión asignándolos a variables locales. En este caso, se asigna $_SESSION['nombre'] a la variable $nombre y $_SESSION['edad'] a la variable $edad.\nA continuación, se muestran los valores de sesión utilizando echo.\nLuego, se elimina la variable de sesión \u0026rsquo;edad\u0026rsquo; utilizando unset($_SESSION['edad']). Si intentas acceder a $_SESSION['edad'] nuevamente, verás que ahora está vacía.\nFinalmente, se destruye la sesión con session_destroy(). Esto elimina todos los datos de sesión almacenados y finaliza la sesión.\nEjemplo 2 # Aquí tienes un ejemplo más complejo que muestra cómo utilizar variables de sesión en PHP para crear un sistema de inicio de sesión básico:\nArchivo: login.php\n\u0026lt;?php session_start(); // Verificar si el usuario ya ha iniciado sesión if (isset($_SESSION[\u0026#39;usuario\u0026#39;])) { // Si el usuario ya está logueado, redirigirlo a la página de inicio header(\u0026#34;Location: inicio.php\u0026#34;); exit(); } // Verificar si se envió el formulario de inicio de sesión if ($_SERVER[\u0026#39;REQUEST_METHOD\u0026#39;] === \u0026#39;POST\u0026#39;) { // Verificar las credenciales del usuario (se pueden consultar en una base de datos) $usuario = $_POST[\u0026#39;usuario\u0026#39;]; $contrasena = $_POST[\u0026#39;contrasena\u0026#39;]; // Validar las credenciales (ejemplo simplificado) if ($usuario === \u0026#39;admin\u0026#39; \u0026amp;\u0026amp; $contrasena === \u0026#39;password\u0026#39;) { // Iniciar sesión y almacenar el nombre de usuario en la variable de sesión $_SESSION[\u0026#39;usuario\u0026#39;] = $usuario; // Redirigir al usuario a la página de inicio header(\u0026#34;Location: inicio.php\u0026#34;); exit(); } else { // Credenciales incorrectas, mostrar un mensaje de error $mensajeError = \u0026#34;Usuario o contraseña incorrectos\u0026#34;; } } ?\u0026gt; \u0026lt;!DOCTYPE html\u0026gt; \u0026lt;html\u0026gt; \u0026lt;head\u0026gt; \u0026lt;title\u0026gt;Iniciar sesión\u0026lt;/title\u0026gt; \u0026lt;/head\u0026gt; \u0026lt;body\u0026gt; \u0026lt;h1\u0026gt;Iniciar sesión\u0026lt;/h1\u0026gt; \u0026lt;?php if (isset($mensajeError)): ?\u0026gt; \u0026lt;p\u0026gt;\u0026lt;?php echo $mensajeError; ?\u0026gt;\u0026lt;/p\u0026gt; \u0026lt;?php endif; ?\u0026gt; \u0026lt;form method=\u0026#34;POST\u0026#34; action=\u0026#34;login.php\u0026#34;\u0026gt; \u0026lt;label for=\u0026#34;usuario\u0026#34;\u0026gt;Usuario:\u0026lt;/label\u0026gt; \u0026lt;input type=\u0026#34;text\u0026#34; id=\u0026#34;usuario\u0026#34; name=\u0026#34;usuario\u0026#34; required\u0026gt;\u0026lt;br\u0026gt; \u0026lt;label for=\u0026#34;contrasena\u0026#34;\u0026gt;Contraseña:\u0026lt;/label\u0026gt; \u0026lt;input type=\u0026#34;password\u0026#34; id=\u0026#34;contrasena\u0026#34; name=\u0026#34;contrasena\u0026#34; required\u0026gt;\u0026lt;br\u0026gt; \u0026lt;button type=\u0026#34;submit\u0026#34;\u0026gt;Iniciar sesión\u0026lt;/button\u0026gt; \u0026lt;/form\u0026gt; \u0026lt;/body\u0026gt; \u0026lt;/html\u0026gt; Archivo: inicio.php\n\u0026lt;?php session_start(); // Verificar si el usuario ha iniciado sesión if (!isset($_SESSION[\u0026#39;usuario\u0026#39;])) { // Si el usuario no ha iniciado sesión, redirigirlo a la página de inicio de sesión header(\u0026#34;Location: login.php\u0026#34;); exit(); } // Obtener el nombre de usuario de la variable de sesión $usuario = $_SESSION[\u0026#39;usuario\u0026#39;]; ?\u0026gt; \u0026lt;!DOCTYPE html\u0026gt; \u0026lt;html\u0026gt; \u0026lt;head\u0026gt; \u0026lt;title\u0026gt;Página de inicio\u0026lt;/title\u0026gt; \u0026lt;/head\u0026gt; \u0026lt;body\u0026gt; \u0026lt;h1\u0026gt;Bienvenido, \u0026lt;?php echo $usuario; ?\u0026gt;!\u0026lt;/h1\u0026gt; \u0026lt;p\u0026gt;Esta es la página de inicio.\u0026lt;/p\u0026gt; \u0026lt;a href=\u0026#34;logout.php\u0026#34;\u0026gt;Cerrar sesión\u0026lt;/a\u0026gt; \u0026lt;/body\u0026gt; \u0026lt;/html\u0026gt; En este ejemplo, el archivo login.php es la página de inicio de sesión. Cuando el usuario envía el formulario de inicio de sesión, se verifican las credenciales proporcionadas. Si las credenciales son válidas, se inicia la sesión y se almacena el nombre de usuario en la variable de sesión $_SESSION['usuario']. Luego, el usuario es redirigido a la página de inicio inicio.php.\nEl archivo inicio.php es la página de inicio, a la cual solo se puede acceder si el usuario ha iniciado sesión. En esta página, se verifica si existe la variable de sesión $_SESSION['usuario']. Si no existe, significa que el usuario no ha iniciado sesión y se redirige automáticamente a la página de inicio de sesión.\nSi el usuario ha iniciado sesión correctamente, se muestra un mensaje de bienvenida junto con el nombre de usuario almacenado en $_SESSION['usuario']. Además, se proporciona un enlace para cerrar sesión, el cual dirige al archivo logout.php.\nTen en cuenta que este ejemplo es una implementación básica y simplificada de un sistema de inicio de sesión. En un entorno de producción, se deben tomar precauciones adicionales para garantizar la seguridad, como la encriptación de contraseñas y la protección contra ataques de fuerza bruta.\nConsideraciones de seguridad # Las variables de sesión deben manejarse con precaución, ya que pueden ser manipuladas por usuarios maliciosos para comprometer la seguridad de una aplicación. Es importante validar y filtrar los datos ingresados por el usuario antes de almacenarlos en variables de sesión, para evitar posibles ataques de inyección de código o cross-site scripting (XSS). Además, se deben implementar medidas de seguridad como la regeneración de ID de sesión después de que un usuario inicie sesión correctamente o realice ciertas acciones importantes. Video de refuerzo # ","date":"15 julio 2023","permalink":"/platform/php/variables_sesion/segunda_parte/","section":"Phps","summary":"Almacenamiento de datos en variables de sesión # Las variables de sesión en PHP pueden contener cualquier tipo de dato, incluyendo cadenas de texto, números, arreglos y objetos serializados.","title":"Variables de sesión en PHP (segunda parte)"},{"content":"Por qué necesitamos variables de sesión en PHP # En los programas que hemos visto hasta ahora, hemos utilizado variables que sólo existían en el archivo que era ejecutado. Cuando cargábamos otra página distinta, los valores de estas variables se perdían a menos que nos tomásemos la molestia de pasarlos por la URL o inscribirlos en las cookies o en un formulario para su posterior explotación. Estos métodos, aunque útiles, no son todo lo prácticos que podrían en determinados casos en los que la variable que queremos conservar ha de ser utilizada en varias páginas diferentes y distantes los unos de los otros.\nPodríamos pensar que ese problema puede quedar resuelto con las cookies ya que se trata de variables que pueden ser invocadas en cualquier momento. El problema, ya lo hemos dicho, es que las cookies no son aceptadas ni por la totalidad de los usuarios ni por la totalidad de los navegadores lo cual implica que una aplicación que se sirviera de las cookies para pasar variables de un archivo a otro no sería 100% infalible. Es importante a veces pensar en \u0026ldquo;la inmensa minoría\u0026rdquo;, sobre todo en aplicaciones de comercio electrónico donde debemos captar la mayor cantidad de clientes posibles y nuestros scripts deben estar preparados ante cualquier eventual deficiencia del navegador del cliente.\nNos resulta pues necesario el poder declarar ciertas variables que puedan ser reutilizadas tantas veces como queramos dentro de una misma sesión. Imaginemos un sitio multilingüe en el que cada vez que queremos imprimir un mensaje en cualquier página necesitamos saber en qué idioma debe hacerse. Podríamos introducir un script identificador de la lengua del navegador en cada uno de los archivos o bien declarar una variable que fuese valida para toda la sesión y que tuviese como valor el idioma reconocido en un primer momento.\nPensemos también en un carrito de la compra de una tienda virtual donde el cliente va navegando por las páginas del sitio y añadiendo los artículos que quiere comprar a un carrito. Este carrito podría ser perfectamente una variable de tipo array (tabla) que almacena para cada referencia la cantidad de artículos contenidos en el carrito. Esta variable debería ser obviamente conservada continuamente a lo largo de todos los scripts.\nAunque ya queda muy lejos, en PHP3 no existía un mecanismo de trabajo con sesiones y por tanto la diferencia mayor es que los desarrolladores estaban obligados a gestionar ellos mismos las sesiones definir sus propios identificadores de sesión. La sesión en PHP # Las sesiones, en aplicaciones web realizadas con PHP y en el desarrollo de páginas web en general, nos sirven para almacenar información que se memorizará durante toda la visita de un usuario a una página web. Dicho de otra forma, un usuario puede ver varias páginas durante su paso por un sitio web y con sesiones podemos almacenar variables que podremos acceder en cualquiera de esas páginas.\nDigamos que las sesiones son una manera de guardar información, específica para cada usuario, durante toda su visita. Cada usuario que entra en un sitio abre una sesión, que es independiente de la sesión de otros usuarios. En la sesión de un usuario podemos almacenar todo tipo de datos, como su nombre, productos de un hipotético carrito de la compra, preferencias de visualización o trabajo, páginas por las que ha pasado, etc. Todas estas informaciones se guardan en lo que denominamos variables de sesión.\nPHP dispone de un método bastante cómodo de guardar datos en variables de sesión, y de un juego de funciones para el trabajo con sesiones y variables de sesión.\nPara cada usuario PHP internamente genera un identificador de sesión único, que sirve para saber las variables de sesión que pertenecen a cada usuario. Para conservar el identificador de sesión durante toda la visita de un usuario a una página PHP almacena la variable de sesión en una cookie, o bien la propaga a través de la URL.\nEn otras palabras, una sesión es considerada como el intervalo de tiempo empleado por un usuario en recorrer nuestras páginas hasta que abandona nuestro sitio o deja de actuar sobre él durante un tiempo prolongado o bien, sencillamente, cierra el navegador.\nTrabajo con sesiones en PHP # Cuando queremos utilizar variables de sesión en una página tenemos que iniciar la sesión con la siguiente función:\nsession_start () # Inicia una sesión para el usuario o continúa la sesión que pudiera tener abierta en otras páginas. Al hacer session_start() PHP internamente recibe el identificador de sesión almacenado en la cookie o el que se envíe a través de la URL. Si no existe tal identificador se sesión, simplemente lo crea.\nUna vez inicializada la sesión con session_start() podemos a partir de ahora utilizar variables de sesión, es decir, almacenar datos para ese usuario, que se conserven durante toda su visita o recuperar datos almacenados en páginas que haya podido visitar.\nLa sesión se tiene que inicializar antes de escribir cualquier texto en la página. Esto es importante y de no hacerlo así corremos el riesgo de recibir un error, porque al iniciar la sesión se deben leer las cookies del usuario, algo que no se puede hacer si ya se han enviado las cabeceras del HTTP.\nUna vez iniciada la sesión podemos utilizar variables de sesión a través de $_SESSION, que es un array asociativo, donde se accede a cada variable a partir de su nombre, de este modo:\n$_SESSION[\u0026#34;nombre_de_variable\u0026#34;] Nota: $_SESSION es una variable global que existe a partir de PHP 4.1.0. Lo normal es que podamos acceder a esa variable normalmente, pero si nuestra versión de PHP no está actualizada podemos intentarlo con $HTTP_SESSION_VARS, que es también un array asociativo, aunque no es de ámbito global. Si $HTTP_SESSION_VARS tampoco funciona tendremos que registrar cada variable por separado con la función session_register(), enviándo por parámetro los nombres de las variables de sesión que desea utilizar desde PHP. Ejemplo de código para definir una variable de sesión # \u0026lt;?php session_start(); $_SESSION[\u0026#34;mivariabledesesion\u0026#34;] = \u0026#34;Hola este es el valor de la variable de sesión\u0026#34;; ?\u0026gt; Como se puede ver, es importante inicializar la sesión antes de hacer otra cosa en la página. Luego podremos definir variables de sesión en culquier lugar del código PHP de la página.\nPara leer una variable de sesión se hace a través del mismo array asociativo $_SESSION. Es tan sencillo como haríamos para utilizar cualquier otra variable, lo único es que tenemos que haber inicializado la sesión previamente. Y por supuesto, que la variable que deseamos acceder exista previamente.\n\u0026lt;php session_start(); echo $_SESSION[\u0026#34;mivariabledesesion\u0026#34;]; ?\u0026gt; Como se puede ver, al inicio del código hemos inicializado la sesión y luego en cualquier parte del código podríamos acceder a las variables de sesión que tuviésemos creadas.\nNota: si intentamos acceder a una variable de sesión con $_SESSION que no ha sido creada obtendremos otro mensaje de error: Notice: Undefined index: mivariabledesesion, que es el mismo que si intentamos acceder a cualquier elemento de un array que no existe. Más sobre sesiones en PHP # Las variables de sesión se diferencian de las variables clásicas en que éstas residen en el servidor, son especificas de un solo usuario definido por un identificador y pueden ser utilizadas en la globalidad de nuestras páginas.\nLas sesiones han de ser iniciadas al principio de nuestro script. Antes de abrir cualquier etiqueta o de imprimir cualquier cosa. En caso contrario recibiremos un error.\nLa siguiente información sobre sesiones de PHP también puede ser de útil lectura. No obstante lo expresado hasta aquí es una información mucho más actualizada. En las próximas líneas se explican mecanismos para sesiones pero todos los que se comentan, aunque son válidos, no son actuales por tratarse de explicaciones para versiones de PHP más antiguas.\nPara iniciar una sesión podemos hacerlo de dos formas distintas:\nDeclaramos abiertamente la apertura de sesión por medio de la función session_start(). Esta función crea una nueva sesión para un nuevo visitante o bien recupera la que está siendo llevada a cabo.\nDeclaramos una variable de sesión por medio de la función session_register('variable'). Esta función, además de crear o recuperar la sesión para la página en la que se incluye también sirve para introducir una nueva variable de tipo sesión.\nCon lo visto, vamos a proponer el ejemplo clásico de utilización de una sesión: un contador. Este contador deberá aumentar de una unidad cada vez que recargamos la página o apretamos al enlace:\n\u0026lt;?php session_register(\u0026#39;contador\u0026#39;); ?\u0026gt; \u0026lt;HTML\u0026gt; \u0026lt;HEAD\u0026gt; \u0026lt;TITLE\u0026gt;contador.php\u0026lt;/TITLE\u0026gt; \u0026lt;/HEAD\u0026gt; \u0026lt;BODY\u0026gt; \u0026lt;?php if (isset($contador)==0) { $contador=0; } ++$contador; echo \u0026#34;\u0026lt;a href=\u0026#34;contador.php\u0026#34;\u0026gt;Has recargado esta página $contador veces\u0026lt;/a\u0026gt;\u0026#34;; ?\u0026gt; \u0026lt;/BODY\u0026gt; \u0026lt;/HTML\u0026gt; La condición if tiene en cuenta la posibilidad de que la variable $contador no haya sido todavía inicializada. La función isset se encarga de dar un valor cero cuando una variable no ha sido inicializada.\nOtras funciones útiles para la gestión de sesiones son:\nVideo de refuerzo # ","date":"15 julio 2023","permalink":"/platform/php/variables_sesion/primera_parte/","section":"Phps","summary":"Por qué necesitamos variables de sesión en PHP # En los programas que hemos visto hasta ahora, hemos utilizado variables que sólo existían en el archivo que era ejecutado.","title":"Variables de sesión en PHP (primera parte)"},{"content":"Describir la UI # La UI se construye a partir de pequeñas unidades como botones, texto e imágenes. React te permite combinarlas en componentes reutilizables y anidables. Desde sitios web hasta aplicaciones de teléfonos, todo en la pantalla se puede descomponer en componentes.\nTu primer componente # Las aplicaciones de React se construyen a partir de piezas independientes de UI llamadas componentes. Un componente de React es una función de JavaScript a la que le puedes agregar un poco de marcado (markup). Los componentes pueden ser tan pequeños como un botón, o tan grandes como una página entera. Aquí vemos un componente Gallery que renderiza tres components Profile:\nfunction Profile() { return ( \u0026lt;img src=\u0026#34;https://i.imgur.com/MK3eW3As.jpg\u0026#34; alt=\u0026#34;Katherine Johnson\u0026#34; /\u0026gt; ); } export default function Gallery() { return ( \u0026lt;section\u0026gt; \u0026lt;h1\u0026gt;Científicos increíbles\u0026lt;/h1\u0026gt; \u0026lt;Profile /\u0026gt; \u0026lt;Profile /\u0026gt; \u0026lt;Profile /\u0026gt; \u0026lt;/section\u0026gt; ); } Importar y exportar componentes # Es posible declarar muchos componentes en un archivo, pero los archivos grandes pueden resultar difíciles de navegar. Como solución, puedes exportar un componente a su propio archivo, y luego importar ese componente desde otro archivo:\n//Profile.js export default function Profile() { return ( \u0026lt;img src=\u0026#34;https://i.imgur.com/QIrZWGIs.jpg\u0026#34; alt=\u0026#34;Alan L. Hart\u0026#34; /\u0026gt; ); } //Gallery.js import Profile from \u0026#39;./Profile.js\u0026#39;; export default function Gallery() { return ( \u0026lt;section\u0026gt; \u0026lt;h1\u0026gt;Científicos increíbles\u0026lt;/h1\u0026gt; \u0026lt;Profile /\u0026gt; \u0026lt;Profile /\u0026gt; \u0026lt;Profile /\u0026gt; \u0026lt;/section\u0026gt; ); } Escribir marcado(HTML) con JSX # Cada componente de React es una función de JavaScript que puede contener algo de marcado que React renderiza en el navegador. Los componentes de React utilizan una sintaxis extendida que se llama JSX para representar ese marcado. JSX se parece muchísimo a HTML, pero es un poco más estricto y puede mostrar información dinámica.\nJavaScript en JSX con llaves # JSX te permite escribir marcado similar a HTML dentro de un archivo JavaScript, manteniendo la lógica de renderizado y el contenido en el mismo lugar. En ocasiones será deseable añadir un poco de lógica en JavaScript o referenciar una propiedad dinámica dentro del marcado. En esta situación, puedes utilizar llaves en tu JSX para «abrir una ventana» hacia JavaScript:\nconst person = { name: \u0026#34;Gregorio Y. Zara\u0026#34;, theme: { backgroundColor: \u0026#34;black\u0026#34;, color: \u0026#34;pink\u0026#34;, }, }; export default function TodoList() { return ( \u0026lt;div style={person.theme}\u0026gt; \u0026lt;h1\u0026gt;Tareas Pendientes de {person.name}\u0026lt;/h1\u0026gt; \u0026lt;img className=\u0026#34;avatar\u0026#34; src=\u0026#34;https://i.imgur.com/7vQD0fPs.jpg\u0026#34; alt=\u0026#34;Gregorio Y. Zara\u0026#34; /\u0026gt; \u0026lt;ul\u0026gt; \u0026lt;li\u0026gt;Mejorar el videoteléfono\u0026lt;/li\u0026gt; \u0026lt;li\u0026gt;Preparar clases de aeronáutica\u0026lt;/li\u0026gt; \u0026lt;li\u0026gt;Trabajar en el motor de alcohol\u0026lt;/li\u0026gt; \u0026lt;/ul\u0026gt; \u0026lt;/div\u0026gt; ); } Recursos # Este video tiene marcado el inicio y el final específico.\n","date":"14 julio 2023","permalink":"/platform/react/componentes/","section":"Reacts","summary":"Describir la UI # La UI se construye a partir de pequeñas unidades como botones, texto e imágenes.","title":"Componentes en React"},{"content":"Crear y anidar componentes # Las aplicaciones de React están hechas a partir de componentes. Un componente es una pieza de UI (siglas en inglés de interfaz de usuario) que tiene su propia lógica y apariencia. Un componente puede ser tan pequeño como un botón, o tan grande como toda una página.\nLos componentes de React son funciones de JavaScript que retornan marcado (markup):\nfunction MyButton() { return ( \u0026lt;button\u0026gt;Soy un botón\u0026lt;/button\u0026gt; ); } Ahora que has declarado MyButton, puedes anidarlo en otro componente:\nexport default function MyApp() { return ( \u0026lt;div\u0026gt; \u0026lt;h1\u0026gt;Bienvenido a mi aplicación\u0026lt;/h1\u0026gt; \u0026lt;MyButton /\u0026gt; \u0026lt;/div\u0026gt; ); } Nota que \u0026lt; MyButton /\u0026gt; empieza con mayúscula. Así es como sabes que es un componente de React. Los nombres de los componentes de React siempre deben comenzar con mayúscula, mientras las etiquetas HTML deben estar minúsculas.\nLas palabras clave export default especifican el componente principal en el archivo. Si no estás familiarizado con alguna parte de la sintaxis de JavaScript, MDN y javascript.info tienen magníficas referencias.\nEscribir marcado con JSX # La sintaxis de marcado que viste arriba se llama JSX. Es totalmente opcional, pero la mayoría de los proyectos de React usan JSX por la comodidad que ofrece. Todas las herramientas que recomendamos para el desarrollo local son compatibles con JSX sin ningún tipo de configuración.\nJSX es más estricto que HTML. Tienes que cerrar etiquetas como \u0026lt; br /\u0026gt;. Tu componente tampoco puede devolver múltiples etiquetas de JSX. Debes envolverlas en un padre compartido, como \u0026lt; div\u0026gt;\u0026hellip;\u0026lt; /div\u0026gt; o en un envoltorio vacío \u0026lt;\u0026gt;\u0026hellip;\u0026lt;/\u0026gt;:\nAñadir estilos # En React, especificas una clase de CSS con className. Funciona de la misma forma que el atributo class de HTML:\n\u0026lt;img className=\u0026#34;avatar\u0026#34; /\u0026gt; Luego escribes las reglas CSS para esa clase en un archivo CSS aparte:\n/* In your CSS */ .avatar { border-radius: 50%; } React no prescribe como debes añadir tus archivos CSS. En el caso más simple, añades una etiqueta a tu HTML. Si utilizas una herramienta de construcción o un framework, consulta su documentación para saber como añadir un archivo CSS a tu proyecto.\nMostrar datos # JSX te permite poner marcado dentro de JavaScript. Las llaves te permiten «escapar de nuevo» hacia JavaScript de forma tal que puedas incrustar una variable de tu código y mostrársela al usuario. Por ejemplo, esto mostrará user.name:\nreturn ( \u0026lt;h1\u0026gt; {user.name} \u0026lt;/h1\u0026gt; ); También puedes «escaparte hacia JavaScript» en los atributos JSX, pero tienes que utilizar llaves en lugar de comillas. Por ejemplo, className=\u0026ldquo;avatar\u0026rdquo; pasa la cadena \u0026ldquo;avatar\u0026rdquo; como la clase CSS, pero src={user.imageUrl} lee el valor de la variable de JavaScript user.imageUrl y luego pasa el valor como el atributo src:\nreturn ( \u0026lt;img className=\u0026#34;avatar\u0026#34; src={user.imageUrl} /\u0026gt; ); Renderizado condicional # En React, no hay una sintaxis especial para escribir condicionales. En cambio, usarás las mismas técnicas que usas al escribir código regular de JavaScript. Por ejemplo, puedes usar una sentencia if para incluir JSX condicionalmente:\nlet content; if (isLoggedIn) { content = \u0026lt;AdminPanel /\u0026gt;; } else { content = \u0026lt;LoginForm /\u0026gt;; } return ( \u0026lt;div\u0026gt; {content} \u0026lt;/div\u0026gt; ); Renderizado de listas # Dependerás de funcionalidades de JavaScript como los bucles for y la función map() de los arreglos para renderizar listas de componentes.\nPor ejemplo, digamos que tienes un arreglo de productos:\nconst products = [ { title: \u0026#39;Repollo\u0026#39;, id: 1 }, { title: \u0026#39;Ajo\u0026#39;, id: 2 }, { title: \u0026#39;Manzana\u0026#39;, id: 3 }, ]; Dentro de tu componente, utiliza la función map() para transformar el arreglo de productos en un arreglo de elementos \u0026lt; li\u0026gt;:\nconst listItems = products.map(product =\u0026gt; \u0026lt;li key={product.id}\u0026gt; {product.title} \u0026lt;/li\u0026gt; ); return ( \u0026lt;ul\u0026gt;{listItems}\u0026lt;/ul\u0026gt; ); Recursos # https://es.react.dev/learn/rendering-lists\n","date":"14 julio 2023","permalink":"/platform/nivel2/2/","section":"Nivel2s","summary":"Crear y anidar componentes # Las aplicaciones de React están hechas a partir de componentes.","title":"Componentes y props"},{"content":"En el ámbito del desarrollo de aplicaciones web, el envío de datos de forma segura es de vital importancia para garantizar la integridad y privacidad de la información. En PHP, el método POST es ampliamente utilizado para este propósito, permitiendo el envío de datos de manera oculta y segura. Este artículo explora en detalle el método POST, su funcionamiento y las consideraciones clave a tener en cuenta al implementarlo en aplicaciones web.\n1. El método POST y su uso en el envío seguro de datos: # El método POST es una alternativa segura al método GET para enviar datos desde un formulario HTML a un script PHP. A diferencia del método GET, que expone los datos en la URL, el método POST envía los datos de forma oculta en el cuerpo de la solicitud HTTP. Esto garantiza que los datos no sean visibles para los usuarios o en los registros del servidor, lo que mejora la seguridad y la privacidad de la información transmitida.\n2. Envío de datos mediante el método POST en PHP: # En un formulario HTML, se especifica el método POST utilizando el atributo method=\u0026quot;post\u0026quot; en la etiqueta \u0026lt;form\u0026gt;. Los datos ingresados en el formulario son enviados al servidor en el cuerpo de la solicitud HTTP, lo que los hace invisibles para el usuario. Estos datos pueden ser tanto variables simples como matrices, al igual que con el método GET.\n3. Acceso a los datos enviados mediante POST en PHP: # En el script PHP que recibe los datos, se puede acceder a ellos utilizando la variable superglobal $\\_POST. Esta variable es un array asociativo donde las claves son los nombres de las variables enviadas y los valores son los datos correspondientes. Al acceder a los valores específicos en $\\_POST, se pueden realizar operaciones de validación, manipulación y almacenamiento de los datos según sea necesario.\n4. Validación y manipulación de datos: # La validación adecuada de los datos enviados mediante POST es fundamental para garantizar la seguridad y la integridad de la aplicación. PHP proporciona varias funciones y técnicas para validar y filtrar los datos, como filter_input(), filter_var(), htmlspecialchars(), entre otras. Estas herramientas permiten asegurar que los datos cumplan con los requisitos esperados y proteger la aplicación contra posibles ataques, como la inyección de código o el cross-site scripting (XSS). Además, se pueden realizar manipulaciones y transformaciones en los datos enviados mediante POST, según las necesidades específicas de la aplicación.\n5. Consideraciones de seguridad y privacidad: # Aunque el método POST mejora la seguridad en comparación con GET, no proporciona una protección absoluta. Es importante aplicar medidas adicionales de seguridad, como validar la autenticidad de la solicitud y proteger la aplicación contra ataques comunes, como la inyección de SQL o el cross-site scripting (XSS). Además, se recomienda utilizar conexiones seguras (HTTPS) al enviar datos sensibles a través de formularios POST, para proteger la información durante su transmisión.\nEjemplo: Envío de datos mediante un formulario HTML: # Supongamos que tienes un formulario HTML simple con campos para el nombre y el correo electrónico del usuario. Cuando el usuario envía el formulario, los datos se enviarán al script PHP utilizando el método POST.\n\u0026lt;!-- formulario.html --\u0026gt; \u0026lt;form action=\u0026#34;procesar.php\u0026#34; method=\u0026#34;post\u0026#34;\u0026gt; \u0026lt;label for=\u0026#34;nombre\u0026#34;\u0026gt;Nombre:\u0026lt;/label\u0026gt; \u0026lt;input type=\u0026#34;text\u0026#34; id=\u0026#34;nombre\u0026#34; name=\u0026#34;nombre\u0026#34; /\u0026gt; \u0026lt;label for=\u0026#34;email\u0026#34;\u0026gt;Correo electrónico:\u0026lt;/label\u0026gt; \u0026lt;input type=\u0026#34;email\u0026#34; id=\u0026#34;email\u0026#34; name=\u0026#34;email\u0026#34; /\u0026gt; \u0026lt;input type=\u0026#34;submit\u0026#34; value=\u0026#34;Enviar\u0026#34; /\u0026gt; \u0026lt;/form\u0026gt; En el archivo procesar.php, puedes acceder a los datos enviados mediante POST y realizar alguna acción, como mostrar un mensaje de confirmación con el nombre y el correo electrónico del usuario:\n// procesar.php $nombre = $_POST[\u0026#39;nombre\u0026#39;]; $email = $_POST[\u0026#39;email\u0026#39;]; echo \u0026#34;¡Gracias por tu registro, $nombre! Hemos enviado un correo de confirmación a $email.\u0026#34;; Este es solo un ejemplo básico para ilustrar el uso del método POST en PHP. Recuerda que es importante validar y filtrar los datos recibidos antes de utilizarlos en tu aplicación, para garantizar la seguridad y evitar problemas de seguridad, como la inyección de código.\nConclusiones: # El método POST en PHP es una herramienta esencial para el envío seguro de datos en aplicaciones web. Al utilizar este método, se protege la privacidad y la integridad de la información transmitida, evitando que los datos sean visibles en la URL o en los registros del servidor. Al implementar técnicas adecuadas de validación y manipulación de datos, se garantiza la seguridad de la aplicación y se previenen posibles vulnerabilidades. Sin embargo, es importante tener en cuenta que ninguna solución es infalible, por lo que se deben aplicar medidas de seguridad adicionales para proteger completamente la aplicación.\n","date":"14 julio 2023","permalink":"/platform/php/metodo_post/","section":"Phps","summary":"En el ámbito del desarrollo de aplicaciones web, el envío de datos de forma segura es de vital importancia para garantizar la integridad y privacidad de la información.","title":"El método POST en PHP: Envío seguro de datos en aplicaciones web"},{"content":"Responder a eventos # Puedes responder a eventos declarando funciones controladoras de eventos dentro de tus componentes:\nfunction MyButton() { function handleClick() { alert(\u0026#39;¡Me presionaste!\u0026#39;); } return ( \u0026lt;button onClick={handleClick}\u0026gt; Presióname \u0026lt;/button\u0026gt; ); } ¡Nota que onClick={handleClick} no tiene paréntesis al final! No llames a la función controladora de evento: solamente necesitas pasarla hacia abajo. React llamará a tu controlador de evento cuando el usuario haga clic en el botón.\nActualizar la pantalla # A menudo, querrás que tu componente «recuerde» alguna información y la muestre. Por ejemplo, quizá quieras contar el número de veces que se hace clic en un botón. Para lograrlo, añade estado a tu componente.\nPrimero, importa useState de React:\nimport { useState } from \u0026#39;react\u0026#39;; Ahora puedes declarar una variable de estado dentro de tu componente:\nfunction MyButton() { const [count, setCount] = useState(0); // ... } Obtendrás dos cosas de useState: el estado actual (count), y la función que te permite actualizarlo (setCount). Puedes nombrarlos de cualquier forma, pero la convención es llamarlos algo como [something, setSomething].\nLa primera vez que se muestra el botón, count será 0 porque pasaste 0 a useState(). Cuando quieras cambiar el estado llama a setCount() y pásale el nuevo valor. Al hacer clic en este botón se incrementará el contador:\nfunction MyButton() { const [count, setCount] = useState(0); function handleClick() { setCount(count + 1); } return ( \u0026lt;button onClick={handleClick}\u0026gt; Presionado {count} veces \u0026lt;/button\u0026gt; ); } React llamará de nuevo a la función del componente. Esta vez, count será 1. Luego será 2. Y así sucesivamente.\nSi renderizas el mismo componente varias veces, cada uno obtendrá su propio estado. Intenta hacer clic independientemente en cada botón:\nimport { useState } from \u0026#39;react\u0026#39;; export default function MyApp() { return ( \u0026lt;div\u0026gt; \u0026lt;h1\u0026gt;Contadores que se actualizan separadamente\u0026lt;/h1\u0026gt; \u0026lt;MyButton /\u0026gt; \u0026lt;MyButton /\u0026gt; \u0026lt;/div\u0026gt; ); } function MyButton() { const [count, setCount] = useState(0); function handleClick() { setCount(count + 1); } return ( \u0026lt;button onClick={handleClick}\u0026gt; Presionado {count} veces \u0026lt;/button\u0026gt; ); } Nota que cada botón «recuerda» su propio estado count y que no afecta a otros botones.\nEl uso de los Hooks # Las funciones que comienzan con use se llaman Hooks. useState es un Hook nativo dentro de React. Puedes encontrar otros Hooks nativos en la referencia de la API de React. También puedes escribir tus propios Hooks mediante la combinación de otros existentes.\nLos Hooks son más restrictivos que las funciones regulares. Solo puedes llamar a los Hooks en el primer nivel de tus componentes (u otros Hooks). Si quisieras utilizar useState en una condicional o en un bucle, extrae un nuevo componente y ponlo ahí.\nCompartir datos entre componentes # En el ejemplo anterior, cada MyButton tenía su propio count independiente, y cuando se hacía clic en cada botón, solo el count del botón cliqueado cambiaba: Inicialmente, cada estado count de MyButton es 0. El primer MyButton actualiza su count a 1.\nSin embargo, a menudo necesitas que los componentes compartan datos y se actualicen siempre en conjunto.\nPara hacer que ambos componentes MyButton muestren el mismo count y se actualicen juntos, necesitas mover el estado de los botones individuales «hacia arriba» al componente más cercano que los contiene a todos.\nEn este ejemplo, es MyApp: Inicialmente, el estado count en MyApp es 0 y se pasa hacia abajo a los dos hijos. Al hacer clic, MyApp actualiza su estado count a 1 y se lo pasa hacia abajo a ambos hijos.\nAhora cuando haces clic en cualquiera de los botones, count en MyApp cambiará, lo que causará que cambien ambos counts en MyButton. Aquí está como puedes expresarlo con código.\nPrimero, mueve el estado hacia arriba desde MyButton hacia MyApp:\nexport default function MyApp() { const [count, setCount] = useState(0); function handleClick() { setCount(count + 1); } return ( \u0026lt;div\u0026gt; \u0026lt;h1\u0026gt;Contadores que se actualizan separadamente\u0026lt;/h1\u0026gt; \u0026lt;MyButton /\u0026gt; \u0026lt;MyButton /\u0026gt; \u0026lt;/div\u0026gt; ); } function MyButton() { // ... estamos moviendo el código de aquí ... } Luego, pasa el estado hacia abajo desde MyApp hacia cada MyButton, junto con la función compartida para controlar el evento de clic. Puedes pasar la información a MyButton usando las llaves de JSX, de la misma forma como lo hiciste anteriormente con las etiquetas nativas \u0026lt; img\u0026gt;:\nexport default function MyApp() { const [count, setCount] = useState(0); function handleClick() { setCount(count + 1); } return ( \u0026lt;div\u0026gt; \u0026lt;h1\u0026gt;Contadores que se actualizan juntos\u0026lt;/h1\u0026gt; \u0026lt;MyButton count={count} onClick={handleClick} /\u0026gt; \u0026lt;MyButton count={count} onClick={handleClick} /\u0026gt; \u0026lt;/div\u0026gt; ); } La información que pasas hacia abajo se llaman props. Ahora el componente MyApp contiene el estado count y el controlador de evento handleClick, y pasa ambos hacia abajo como props a cada uno de los botones.\nFinalmente, cambia MyButton para que lea las props que le pasaste desde el componente padre:\nfunction MyButton({ count, onClick }) { return ( \u0026lt;button onClick={onClick}\u0026gt; Presionado {count} veces \u0026lt;/button\u0026gt; ); } Cuando haces clic en el botón, el controlador onClick se dispara. A la prop onClick de cada botón se le asignó la función handleClick dentro de MyApp, de forma que el código dentro de ella se ejecuta. Ese código llama a setCount(count + 1), que incremente la variable de estado count. El nuevo valor de count se pasa como prop a cada botón, y así todos muestran el nuevo valor.\nEsto se llama «levantar el estado». Al mover el estado hacia arriba, lo compartimos entre componentes.\nimport { useState } from \u0026#39;react\u0026#39;; export default function MyApp() { const [count, setCount] = useState(0); function handleClick() { setCount(count + 1); } return ( \u0026lt;div\u0026gt; \u0026lt;h1\u0026gt;Contadores que se actualizan juntos\u0026lt;/h1\u0026gt; \u0026lt;MyButton count={count} onClick={handleClick} /\u0026gt; \u0026lt;MyButton count={count} onClick={handleClick} /\u0026gt; \u0026lt;/div\u0026gt; ); } function MyButton({ count, onClick }) { return ( \u0026lt;button onClick={onClick}\u0026gt; Presionado {count} veces \u0026lt;/button\u0026gt; ); } ","date":"14 julio 2023","permalink":"/platform/react/events/","section":"Reacts","summary":"Responder a eventos # Puedes responder a eventos declarando funciones controladoras de eventos dentro de tus componentes:","title":"EVENTOS"},{"content":"Crear y anidar componentes # Las aplicaciones de React están hechas a partir de componentes. Un componente es una pieza de UI (siglas en inglés de interfaz de usuario) que tiene su propia lógica y apariencia. Un componente puede ser tan pequeño como un botón, o tan grande como toda una página.\nLos componentes de React son funciones de JavaScript que retornan marcado (markup):\nfunction MyButton() { return \u0026lt;button\u0026gt;Soy un botón\u0026lt;/button\u0026gt;; } Ahora que has declarado MyButton, puedes anidarlo en otro componente:\nexport default function MyApp() { return ( \u0026lt;div\u0026gt; \u0026lt;h1\u0026gt;Bienvenido a mi aplicación\u0026lt;/h1\u0026gt; \u0026lt;MyButton /\u0026gt; \u0026lt;/div\u0026gt; ); } Nota que \u0026lt; MyButton /\u0026gt; empieza con mayúscula. Así es como sabes que es un componente de React. Los nombres de los componentes de React siempre deben comenzar con mayúscula, mientras las etiquetas HTML deben estar minúsculas.\nLas palabras clave export default especifican el componente principal en el archivo. Si no estás familiarizado con alguna parte de la sintaxis de JavaScript, MDN y javascript.info tienen magníficas referencias.\nEscribir marcado con JSX # La sintaxis de marcado que viste arriba se llama JSX. Es totalmente opcional, pero la mayoría de los proyectos de React usan JSX por la comodidad que ofrece. Todas las herramientas que recomendamos para el desarrollo local son compatibles con JSX sin ningún tipo de configuración.\nJSX es más estricto que HTML. Tienes que cerrar etiquetas como \u0026lt; br /\u0026gt;. Tu componente tampoco puede devolver múltiples etiquetas de JSX. Debes envolverlas en un padre compartido, como \u0026lt; div\u0026gt;\u0026hellip;\u0026lt; /div\u0026gt; o en un envoltorio vacío \u0026lt;\u0026gt;\u0026hellip;\u0026lt;/\u0026gt;:\nAñadir estilos # En React, especificas una clase de CSS con className. Funciona de la misma forma que el atributo class de HTML:\n\u0026lt;img className=\u0026#34;avatar\u0026#34; /\u0026gt; Luego escribes las reglas CSS para esa clase en un archivo CSS aparte:\n/* In your CSS */ .avatar { border-radius: 50%; } React no prescribe como debes añadir tus archivos CSS. En el caso más simple, añades una etiqueta a tu HTML. Si utilizas una herramienta de construcción o un framework, consulta su documentación para saber como añadir un archivo CSS a tu proyecto.\nMostrar datos # JSX te permite poner marcado dentro de JavaScript. Las llaves te permiten «escapar de nuevo» hacia JavaScript de forma tal que puedas incrustar una variable de tu código y mostrársela al usuario. Por ejemplo, esto mostrará user.name:\nreturn \u0026lt;h1\u0026gt;{user.name}\u0026lt;/h1\u0026gt;; También puedes «escaparte hacia JavaScript» en los atributos JSX, pero tienes que utilizar llaves en lugar de comillas. Por ejemplo, className=\u0026ldquo;avatar\u0026rdquo; pasa la cadena \u0026ldquo;avatar\u0026rdquo; como la clase CSS, pero src={user.imageUrl} lee el valor de la variable de JavaScript user.imageUrl y luego pasa el valor como el atributo src:\nreturn \u0026lt;img className=\u0026#34;avatar\u0026#34; src={user.imageUrl} /\u0026gt;; Renderizado condicional # En React, no hay una sintaxis especial para escribir condicionales. En cambio, usarás las mismas técnicas que usas al escribir código regular de JavaScript. Por ejemplo, puedes usar una sentencia if para incluir JSX condicionalmente:\nlet content; if (isLoggedIn) { content = \u0026lt;AdminPanel /\u0026gt;; } else { content = \u0026lt;LoginForm /\u0026gt;; } return \u0026lt;div\u0026gt;{content}\u0026lt;/div\u0026gt;; Renderizado de listas # Dependerás de funcionalidades de JavaScript como los bucles for y la función map() de los arreglos para renderizar listas de componentes.\nPor ejemplo, digamos que tienes un arreglo de productos:\nconst products = [ { title: \u0026#34;Repollo\u0026#34;, id: 1 }, { title: \u0026#34;Ajo\u0026#34;, id: 2 }, { title: \u0026#34;Manzana\u0026#34;, id: 3 }, ]; Dentro de tu componente, utiliza la función map() para transformar el arreglo de productos en un arreglo de elementos \u0026lt; li\u0026gt;:\nconst listItems = products.map((product) =\u0026gt; ( \u0026lt;li key={product.id}\u0026gt;{product.title}\u0026lt;/li\u0026gt; )); return \u0026lt;ul\u0026gt;{listItems}\u0026lt;/ul\u0026gt;; Recursos # Este video tiene marcado el inicio y el final específico.\n","date":"14 julio 2023","permalink":"/platform/react/intro/","section":"Reacts","summary":"Crear y anidar componentes # Las aplicaciones de React están hechas a partir de componentes.","title":"Introducción a React"},{"content":"El desarrollo de aplicaciones web ha revolucionado la forma en que interactuamos en línea. Una parte fundamental de este proceso es el envío de datos desde formularios HTML o mediante URL. En PHP, el método GET se utiliza ampliamente para este propósito, permitiendo que los datos sean transmitidos al servidor y procesados en un script PHP. Este artículo explora en detalle el método GET, su funcionamiento y consideraciones importantes a tener en cuenta.\n1. El método GET y su uso en la transmisión de datos: # El método GET es una forma común de enviar datos desde un formulario HTML o una URL a un script PHP para su procesamiento. A diferencia del método POST, donde los datos se envían de forma oculta, el método GET expone los datos en la URL, lo que permite una fácil accesibilidad y compartición de información. Los datos enviados mediante GET se adjuntan a la URL como una cadena de consulta, que consiste en pares clave-valor separados por el símbolo ampersand (\u0026amp;).\n2. Procesamiento de datos enviados mediante GET en PHP: # En el lado del servidor, el script PHP puede acceder a los datos enviados mediante GET utilizando la variable superglobal $_GET. Esta variable es un array asociativo donde las claves son los nombres de las variables enviadas y los valores son los datos correspondientes. Al acceder a los valores específicos en $_GET, se puede realizar un procesamiento adicional, como validación, manipulación y almacenamiento de los datos.\n3. Validación y manipulación de datos: # Es esencial realizar una validación adecuada de los datos enviados mediante GET para garantizar la seguridad y la integridad de la aplicación web. PHP ofrece diversas funciones y técnicas para validar y filtrar los datos, como filter_input(), filter_var(), htmlspecialchars(), entre otras. Estas herramientas permiten asegurar que los datos cumplan con los requisitos esperados y proteger la aplicación contra posibles ataques, como inyección de código o cross-site scripting (XSS). Además, se pueden realizar manipulaciones y transformaciones en los datos, como convertirlos a otros tipos de datos o ejecutar operaciones específicas según las necesidades del sistema.\n4. Consideraciones de seguridad y privacidad: # A pesar de su facilidad de uso, el método GET tiene ciertas limitaciones y consideraciones de seguridad importantes. Dado que los datos enviados mediante GET son visibles en la URL, se recomienda evitar enviar información sensible, como contraseñas o datos personales. En su lugar, es preferible utilizar el método POST, que oculta los datos de la URL y proporciona una capa adicional de seguridad.\nEjemplos # Ejemplo 1: Envío de datos mediante un formulario HTML: # Supongamos que tienes un formulario HTML simple con campos para el nombre y la edad del usuario. Cuando el usuario envía el formulario, los datos se enviarán al script PHP utilizando el método GET.\n\u0026lt;!-- formulario.html --\u0026gt; \u0026lt;form action=\u0026#34;procesar.php\u0026#34; method=\u0026#34;get\u0026#34;\u0026gt; \u0026lt;label for=\u0026#34;nombre\u0026#34;\u0026gt;Nombre:\u0026lt;/label\u0026gt; \u0026lt;input type=\u0026#34;text\u0026#34; id=\u0026#34;nombre\u0026#34; name=\u0026#34;nombre\u0026#34; /\u0026gt; \u0026lt;label for=\u0026#34;edad\u0026#34;\u0026gt;Edad:\u0026lt;/label\u0026gt; \u0026lt;input type=\u0026#34;number\u0026#34; id=\u0026#34;edad\u0026#34; name=\u0026#34;edad\u0026#34; /\u0026gt; \u0026lt;input type=\u0026#34;submit\u0026#34; value=\u0026#34;Enviar\u0026#34; /\u0026gt; \u0026lt;/form\u0026gt; En el archivo procesar.php, puedes acceder a los datos enviados mediante GET y realizar alguna acción, como mostrar un mensaje de bienvenida con el nombre y la edad del usuario:\n// procesar.php $nombre = $_GET[\u0026#39;nombre\u0026#39;]; $edad = $_GET[\u0026#39;edad\u0026#39;]; echo \u0026#34;¡Hola, $nombre! Tienes $edad años.\u0026#34;; Ejemplo 2: Envío de datos mediante una URL: # También puedes enviar datos directamente a un script PHP mediante una URL. En este ejemplo, la URL contendrá los datos del nombre y la edad en la cadena de consulta.\nhttp://ejemplo.com/procesar.php?nombre=John\u0026amp;edad=25 En el script procesar.php, puedes capturar los datos utilizando la variable superglobal $_GET y realizar alguna acción, como imprimir los datos en pantalla:\n// procesar.php $nombre = $_GET[\u0026#39;nombre\u0026#39;]; $edad = $_GET[\u0026#39;edad\u0026#39;]; echo \u0026#34;¡Hola, $nombre! Tienes $edad años.\u0026#34;; Estos son solo ejemplos básicos para ilustrar el uso del método GET en PHP. Recuerda que es importante validar y filtrar los datos recibidos antes de utilizarlos en tu aplicación, para garantizar la seguridad y evitar problemas de seguridad como la inyección de código.\nConclusiones: # El método GET en PHP es una poderosa herramienta para enviar y procesar datos en aplicaciones web. Su simplicidad y accesibilidad lo convierten en una opción popular, pero es fundamental tener en cuenta las consideraciones de seguridad y privacidad asociadas. Al aplicar las técnicas adecuadas de validación y manipulación de datos, podemos asegurar que nuestras aplicaciones web sean seguras y confiables en el manejo de la información enviada mediante GET.\n","date":"14 julio 2023","permalink":"/platform/php/metodo_get/","section":"Phps","summary":"El desarrollo de aplicaciones web ha revolucionado la forma en que interactuamos en línea.","title":"El método GET en PHP: Envío y procesamiento de datos en aplicaciones web"},{"content":"La cláusula JOIN en SQL se utiliza para combinar registros de dos o más tablas relacionadas en una consulta. Permite establecer relaciones entre las tablas utilizando columnas comunes y recuperar datos combinados en función de esas relaciones. La cláusula JOIN es una parte fundamental de SQL para consultar y combinar datos de manera eficiente.\nExisten varios tipos de JOIN utilizados comúnmente, incluyendo INNER JOIN, LEFT JOIN, RIGHT JOIN y FULL JOIN. Cada tipo de JOIN tiene características y resultados diferentes, y se selecciona según los requisitos específicos de la consulta.\nSELECT columnas FROM tabla1 JOIN tabla2 ON condición; La condición especifica cómo se relacionan las tablas utilizando columnas comunes. La condición puede ser una igualdad (usando el operador =) entre las columnas de relación, o una condición más compleja utilizando operadores lógicos.\nTipos de JOIN # INNER JOIN # El INNER JOIN devuelve únicamente los registros que tienen coincidencias en ambas tablas. Es decir, combina las filas de ambas tablas solo si existe una relación coincidente en la columna especificada en la condición JOIN.\n-- Ejemplo: Obtener una lista de todos los pedidos junto con el nombre del cliente SELECT pedidos.pedido_id, clientes.nombre, pedidos.producto FROM pedidos INNER JOIN clientes ON pedidos.cliente_id = clientes.cliente_id; LEFT JOIN # El LEFT JOIN devuelve todos los registros de la tabla izquierda (la primera mencionada en la cláusula FROM) y los registros coincidentes de la tabla derecha. Si no hay coincidencias, se devolverá NULL en las columnas de la tabla derecha.\n-- Ejemplo: Obtener todos los empleados con sus respectivos departamentos (incluso si no tienen departamento asignado) SELECT empleados.*, departamentos.nombre FROM empleados LEFT JOIN departamentos ON empleados.departamento_id = departamentos.id; RIGHT JOIN # El RIGHT JOIN devuelve todos los registros de la tabla derecha y los registros coincidentes de la tabla izquierda. Si no hay coincidencias, se devolverá NULL en las columnas de la tabla izquierda.\n-- Ejemplo: Obtener todos los departamentos con sus respectivos empleados (incluso si no tienen empleados asignados) SELECT empleados.*, departamentos.nombre FROM empleados RIGHT JOIN departamentos ON empleados.departamento_id = departamentos.id; FULL JOIN # El FULL JOIN devuelve todos los registros de ambas tablas. Combina las filas de ambas tablas sin importar si hay coincidencias o no. Si no hay coincidencias, se devolverán NULL en las columnas correspondientes.\n-- Ejemplo: Obtener todos los clientes junto con sus pedidos (incluso si no tienen pedidos) SELECT clientes.*, pedidos.fecha FROM clientes FULL JOIN pedidos ON clientes.id = pedidos.cliente_id; Es importante destacar que además de los JOIN mencionados, existen otras variaciones como el CROSS JOIN, que combina todas las filas de una tabla con todas las filas de otra tabla, sin necesidad de una condición de relación específica.\nLa cláusula JOIN es una herramienta poderosa para combinar y relacionar datos de diferentes tablas en una consulta SQL. Permite obtener información más completa y significativa al aprovechar las relaciones definidas en la base de datos. Al dominar los diferentes tipos de JOIN y comprender cómo utilizarlos adecuadamente, los desarrolladores pueden realizar consultas más complejas y obtener resultados precisos a partir de datos relacionados en diferentes tablas.\nVideo de refuerzo # ","date":"13 julio 2023","permalink":"/platform/sql/join/","section":"Sqls","summary":"La cláusula JOIN en SQL se utiliza para combinar registros de dos o más tablas relacionadas en una consulta.","title":"Join"},{"content":"La cláusula WHERE es una parte fundamental de las consultas SQL, ya que permite filtrar los resultados y recuperar únicamente las filas que cumplan con una condición específica. Esta cláusula se utiliza después de la cláusula SELECT en una consulta y ayuda a refinar los resultados basándose en criterios de búsqueda.\nSintaxis básica # La sintaxis básica de la cláusula WHERE es la siguiente:\nSELECT columnas FROM tabla WHERE condición; La condición puede ser una expresión lógica que involucra operadores de comparación (como igualdad, desigualdad, mayor que, menor que, etc.) y operadores lógicos (como AND, OR, NOT) para combinar múltiples condiciones.\nOperadores de comparación # Los operadores de comparación más comunes utilizados en la cláusula WHERE son:\nIgualdad (=): Se utiliza para comparar si dos valores son iguales. Desigualdad (\u0026lt;\u0026gt; o !=): Compara si dos valores son diferentes. Mayor que (\u0026gt;), mayor o igual que (\u0026gt;=), menor que (\u0026lt;) y menor o igual que (\u0026lt;=): Comparan valores numéricos o alfabéticos en función de su orden. IN: Verifica si un valor coincide con alguno de los valores de una lista o subconsulta. BETWEEN: Comprueba si un valor se encuentra dentro de un rango especificado. LIKE: Permite comparar un valor con un patrón utilizando comodines (% para cualquier cadena de caracteres y _ para un solo carácter). IS NULL / IS NOT NULL: Verifica si un valor es nulo o no es nulo. Ejemplos de uso:\n-- Ejemplo 1: Seleccionar todos los empleados con salario mayor a 5000 SELECT * FROM empleados WHERE salario \u0026gt; 5000; -- Ejemplo 2: Seleccionar todos los productos con existencia igual a 0 y precio mayor a 100 SELECT * FROM productos WHERE existencia = 0 AND precio \u0026gt; 100; -- Ejemplo 3: Seleccionar todos los clientes que no sean de la ciudad \u0026#34;Madrid\u0026#34; SELECT * FROM clientes WHERE ciudad \u0026lt;\u0026gt; \u0026#39;Madrid\u0026#39;; -- Ejemplo 4: Seleccionar todos los productos que empiecen con \u0026#34;A\u0026#34; y tengan una longitud de 5 caracteres SELECT * FROM productos WHERE nombre LIKE \u0026#39;A%\u0026#39; AND LENGTH(nombre) = 5; Combinación de condiciones: # Es posible combinar múltiples condiciones utilizando paréntesis para definir el orden de evaluación. Por ejemplo:\n-- Ejemplo: Seleccionar todos los empleados con salario mayor a 5000 y (edad menor a 30 o puesto igual a \u0026#39;Gerente\u0026#39;) SELECT * FROM empleados WHERE salario \u0026gt; 5000 AND (edad \u0026lt; 30 OR puesto = \u0026#39;Gerente\u0026#39;); En este caso, la condición dentro de los paréntesis se evalúa primero, y luego se combina con la condición principal utilizando el operador AND.\nEs importante mencionar que la posición de la cláusula WHERE en una consulta SQL puede variar. Puede colocarse después de la cláusula FROM o después de la cláusula JOIN, dependiendo de la estructura de la consulta y de las tablas involucradas.\nEn resumen, la cláusula WHERE es esencial en SQL para filtrar y obtener resultados específicos en una consulta. Permite establecer condiciones de búsqueda utilizando operadores de comparación y operadores lógicos, lo que brinda flexibilidad y precisión en la recuperación de datos. Al comprender y utilizar correctamente la cláusula WHERE, los desarrolladores y analistas de datos pueden obtener información relevante y útil de sus bases de datos.\nVideo de refuerzo # ","date":"13 julio 2023","permalink":"/platform/sql/where/","section":"Sqls","summary":"La cláusula WHERE es una parte fundamental de las consultas SQL, ya que permite filtrar los resultados y recuperar únicamente las filas que cumplan con una condición específica.","title":"Claúsula WHERE"},{"content":"Conexión con una base de datos desde PHP # Existen diversos juegos de funciones para trabajar con bases de datos MySQL en PHP (o MariaDB, ya que son compatibles). Antiguamente se usaban las funciones \u0026ldquo;mysql\u0026rdquo; pero de un tiempo para aquí se usa la nueva interfaz de acceso a MySQL denominada \u0026ldquo;mysqli\u0026rdquo;. Es importante usar \u0026ldquo;mysqli\u0026rdquo; porque está mejorada, pero sobre todo porque en las versiones modernas de PHP solamente funciona \u0026ldquo;mysqli\u0026rdquo;, siendo el API de funciones \u0026ldquo;mysql\u0026rdquo; declarado obsoleto.\nComo API de funciones nos referimos a todo el conjunto de funciones existentes en el lenguaje que nos permiten conectarnos con un servidor MySQL, acceder a los datos almacenados en las tablas, realizar actualizaciones, inserciones, etc. Para cada tipo de operación usaremos una función de PHP o, mejor dicho, una combinación de llamadas a funciones que se realizarán en secuencia.\nAdemás, cabe decir que estas interfaces de acceso a las bases de datos y a sus datos se encuentran publicadas en formato \u0026ldquo;funciones clásicas\u0026rdquo; o por medio de \u0026ldquo;objetos\u0026rdquo;. Nosotros vamos a preferir el acceso usando la interfaz de \u0026ldquo;objetos\u0026rdquo;, dado que las funciones clásicas se planea marcar como obsoletas, por lo que es posible que dentro de poco se eliminen del lenguaje.\nMYSQL Improved (MYSQLi) # MySQLi es una extensión de PHP diseñada específicamente para interactuar con bases de datos MySQL. Proporciona una API mejorada en comparación con la extensión original de MySQL en PHP y ofrece características adicionales.\nVentajas de usarlo # Compatibilidad mejorada: MySQLi es compatible con versiones más recientes de MySQL y ofrece características adicionales que no están disponibles en la extensión MySQL original. Uso de consultas preparadas: MySQLi admite consultas preparadas, lo que ayuda a prevenir ataques de inyección SQL al separar los datos de la consulta. Mayor control y funcionalidad: MySQLi ofrece más opciones de configuración y funcionalidades, como el soporte para múltiples declaraciones en una sola consulta y la recuperación de resultados parciales de una consulta. Vamos a ver un pedazo de código para conectarnos con un servidor MySQL y luego lo explicamos con detalle.\n\u0026lt;?php $mysqli_conexion = new mysqli(\u0026#34;localhost\u0026#34;, \u0026#34;usuario\u0026#34;, \u0026#34;clave\u0026#34;, \u0026#34;ejemplo\u0026#34;); if($mysqli_conexion-\u0026gt;connect_error) { echo \u0026#34;Error de conexión con la base de datos: \u0026#34; . $mysqli_conexion-\u0026gt;connect_error; } else { echo \u0026#34;Hemos podido conectarnos con MySQL\u0026#34;; } ?\u0026gt; Comenzamos por la línea donde se crea la conexión con la base de datos:\n$mysqli_conexion = new mysqli(\u0026#34;localhost\u0026#34;, \u0026#34;usuario\u0026#34;, \u0026#34;clave\u0026#34;, \u0026#34;ejemplo\u0026#34;); Esta línea está creando un nuevo objeto para la conexión con el servidor MySQL. Una vez creado ese objeto lo estamos almacenando en la variable $mysqli_conexion. Para crear el objeto de conexión usamos el operador \u0026ldquo;new\u0026rdquo;, indicando a continuación el nombre del tipo de objeto que estamos creando y los parámetros que se requiere para su creación, que son los siguientes:\n\u0026ldquo;localhost\u0026rdquo;: es el \u0026ldquo;host\u0026rdquo; del servidor de base de datos. El valor \u0026ldquo;localhost\u0026rdquo; es muy habitual y será usado si el servidor de la base de datos se encuentra en el mismo ordenador donde se está ejecuntando ese código. \u0026ldquo;usuario\u0026rdquo;: será el nombre de usuario que se usa para acceder al sistema gestor de la base de datos. Ese usuario debe tener permisos para acceder a la base de datos con la que nos queremos conectar. \u0026ldquo;clave\u0026rdquo;: es el password o contraseña del usuario usado. \u0026ldquo;ejemplo\u0026rdquo;: es el mombre de la base de datos con la que nos queremos conectar con ese usuario y clave, dentro del sistema gestor instalado en el host mencionado. En nuestro caso es \u0026ldquo;ejemplo\u0026rdquo; porque al crear la base de datos la hemos llamado así, pero si la llamaste de otra manera al crearla, tendrás que usar ese nombre. Veamos un ejemplo más completo:\n\u0026lt;?php $hostname = \u0026#34;localhost\u0026#34;; $username = \u0026#34;root\u0026#34;; $password = \u0026#34;\u0026#34;; $db = \u0026#34;microsot\u0026#34;; try { $connection = new mysqli($hostname, $username, $password, $db); echo \u0026#34;Conexión exitosa\u0026#34;; } catch (mysqli_sql_exception $e) { echo \u0026#39;Error de conexión\u0026#39; . $e-\u0026gt;getMessage(); exit; } ?\u0026gt; Si te fijas, en este caso hemos añadido la sentencia exit; en el caso positivo del if. Es para mostrar el error de conexión con la base de datos y luego salir inmediatamente del script, parando toda la ejecución de la página. Aquí se podría también redirigir a una página de error, o mostrar un include o cualquier otra cosa, pero siempre acabando en exit esa rama del if, para asegurarnos que no se realiza nada a continuación.\nEsto nos permite no poner una rama de else en este if, ya que no sería necesaria, evitando el uso de llaves del caso negativo, que ensucien un poco el código del bloque siguiente donde ya realizaremos el acceso a los datos. Esto también nos permitirá que este código de conexión se encuentre en un \u0026ldquo;include\u0026rdquo; separado, de modo que se escriba una única vez y no tengamos disperso en decenas de lugares de la página este mismo código de conexión.\nRealizar una consulta # Te mostraré otro ejemplo.\n\u0026lt;?php $consulta = \u0026#34;SELECT * FROM tabla\u0026#34;; $resultado = $mysqli_conexion-\u0026gt;query($consulta); if ($resultado) { while ($fila = $resultado-\u0026gt;fetch_assoc()) { // Procesar cada fila // ... } } else { die(\u0026#39;Error en la consulta: \u0026#39; . $mysqli_conexion-\u0026gt;error); } $resultado-\u0026gt;free(); ?\u0026gt; Utilizar consultas preparadas # \u0026lt;?php $consulta = \u0026#34;INSERT INTO tabla (columna1, columna2) VALUES (?, ?)\u0026#34;; $valor1 = \u0026#39;valor1\u0026#39;; $valor2 = \u0026#39;valor2\u0026#39;; $declaracion = $mysqli_conexion-\u0026gt;prepare($consulta); $declaracion-\u0026gt;bind_param(\u0026#39;ss\u0026#39;, $valor1, $valor2); if ($declaracion-\u0026gt;execute()) { // Consulta ejecutada con éxito } else { die(\u0026#39;Error en la consulta: \u0026#39; . $declaracion-\u0026gt;error); } $declaracion-\u0026gt;close(); ?\u0026gt; En el ejemplo anterior:\nUtiliza el método bind_param() para vincular los valores a los marcadores de posición en la consulta preparada. Indica el tipo de dato de cada parámetro y luego proporciona los valores correspondientes. \u0026lsquo;ss\u0026rsquo; indica que ambos valores son de tipo cadena (string). Si tuvieras valores enteros, utilizarías \u0026lsquo;ii\u0026rsquo;, y así sucesivamente. Una vez que hayas terminado con la consulta preparada, ciérrala utilizando el método close(). Recuerda también que el ejemplo anterior es para una inserción de datos, pero el mismo enfoque se puede aplicar a otras operaciones como actualizaciones (UPDATE) o eliminaciones (DELETE).\nCerrar las conexiones con las bases de datos MySQL # Es importante que se cierren las conexiones con el sistema gestor de bases de datos, para liberarlas y que la ejecución de otras páginas las puedan utilizar. Para ello, sobre el objeto de conexión realizaremos la invocación del método close().\nUsaremos un código como el que sigue.\n$conexion-\u0026gt;close(); En el anterior código $conexion es el objeto que hemos creado al conectarnos con la base de datos. Simplemente invocamos el método close() con lo que PHP cerrará la conexión con MySQL. Si tenemos que volver a conectarnos se debería realizar de nuevo otra conexión.\nEl método close() devuelve un valor boleano como resultado, para indicar si pudo cerrar correctamente la conexión o no. Generalmente ese valor no lo procesamos, ya que damos por hecho que las conexiones se podrán cerrar y, en caso contrario poco podremos hacer, simplemente se cerrará cuando se pueda ella sola.\nTodas las conexiones con la base de datos acabarán cerrándose tarde o temprano, aunque no las cerremos explícitamente con el método close() desde PHP. Sin embargo, es mucho mejor cerrarlas nosotros mismos una vez ya no se vayan a usar, dado que así nos aseguramos que así se liberan cuanto antes. Ten en cuenta que MySQL o MariaDB tienen un número de conexiones limitado, que suelen ser unas 100 (Esto es configurable en el sistema gestor de la base de datos). Habitualmente esas 100 conexiones son más que suficientes, porque el tiempo de ejecución de una página PHP generalmente es cuestión de milisegundos, o pocos segundos como máximo, y por tanto la conexión bien cerrada ocupará una de esas conexiones solamente por unos instantes. Sin embargo, si tenemos mucho tráfico y no cerramos las conexiones normalmente, es posible que se queden abiertas por más tiempo y llegue un momento en el que MySQL nos devuelva errores porque no tenga cuota de apertura de nuevas conexiones. PDO # PDO es una extensión de PHP que proporciona una capa de abstracción para acceder a bases de datos desde PHP. Permite interactuar con diferentes sistemas de gestión de bases de datos como MySQL, PostgreSQL, SQLite y más, utilizando una interfaz común.\nVentajas de usarlo # Portabilidad: PDO es compatible con múltiples bases de datos, lo que facilita la migración de una base de datos a otra sin cambiar significativamente el código. Seguridad: PDO utiliza sentencias preparadas y parámetros para evitar ataques de inyección SQL, lo que ayuda a prevenir vulnerabilidades. Orientado a objetos: PDO se basa en el paradigma de programación orientada a objetos, lo que proporciona una sintaxis más intuitiva y legible. Soporte para transacciones: PDO admite transacciones, lo que permite realizar operaciones en bloques y revertir los cambios si alguna operación falla. Gestión de errores: PDO maneja automáticamente errores de base de datos y proporciona información detallada para su depuración. Establecer una conexión # A continuación, te muestro cómo utilizar PDO para establecer una conexión a la base de datos y realizar operaciones básicas:\n\u0026lt;?php $servidor = \u0026#39;localhost\u0026#39;; $usuario = \u0026#39;nombre_usuario\u0026#39;; $contraseña = \u0026#39;contraseña\u0026#39;; $baseDatos = \u0026#39;nombre_base_datos\u0026#39;; try { $conexion = new PDO(\u0026#34;mysql:host=$servidor;dbname=$baseDatos\u0026#34;, $usuario, $contraseña); $conexion-\u0026gt;setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); } catch (PDOException $e) { die(\u0026#39;Error de conexión: \u0026#39; . $e-\u0026gt;getMessage()); } ?\u0026gt; Realizar una consulta # \u0026lt;?php try { $consulta = $conexion-\u0026gt;query(\u0026#34;SELECT * FROM tabla\u0026#34;); // Obtener los resultados while ($fila = $consulta-\u0026gt;fetch(PDO::FETCH_ASSOC)) { // Procesar cada fila // ... } } catch (PDOException $e) { die(\u0026#39;Error en la consulta: \u0026#39; . $e-\u0026gt;getMessage()); } ?\u0026gt; Utilizar sentencias preparadas # \u0026lt;?php try { $consulta = $conexion-\u0026gt;prepare(\u0026#34;INSERT INTO tabla (columna1, columna2) VALUES (?, ?)\u0026#34;); $valor1 = \u0026#39;valor1\u0026#39;; $valor2 = \u0026#39;valor2\u0026#39;; $consulta-\u0026gt;bindParam(1, $valor1); $consulta-\u0026gt;bindParam(2, $valor2); $consulta-\u0026gt;execute(); } catch (PDOException $e) { die(\u0026#39;Error en la consulta: \u0026#39; . $e-\u0026gt;getMessage()); } ?\u0026gt; ","date":"12 julio 2023","permalink":"/platform/php/mysqli_pdo/","section":"Phps","summary":"Conexión con una base de datos desde PHP # Existen diversos juegos de funciones para trabajar con bases de datos MySQL en PHP (o MariaDB, ya que son compatibles).","title":"mysqli y PDO"},{"content":"Cada comando en SQL tiene una sintaxis específica y realiza una tarea particular. En esta lección estudiaremos tres de ellos: INSERT, UPDATE y DELETE.\nINSERT # El comando INSERT se utiliza para insertar nuevos registros en una tabla. Permite especificar los valores para cada columna en el nuevo registro.\nSintaxis básica # La sintaxis básica del comando INSERT es la siguiente:\nINSERT INTO tabla (columnas) VALUES (valores); tabla: especifica el nombre de la tabla en la cual se insertarán los datos. columnas (opcional): especifica las columnas en las que se insertarán los valores. Si no se proporciona, se asume que los valores se insertarán en todas las columnas de la tabla en el orden correspondiente. valores: especifica los valores que se insertarán en las columnas. Debe proporcionarse un valor para cada columna especificada o para cada columna en el orden correspondiente si no se especifican las columnas. Ejemplos # Insertar un registro con valores específicos en todas las columnas: INSERT INTO empleados (nombre, edad, salario) VALUES (\u0026#39;Juan Pérez\u0026#39;, 30, 50000); Insertar un registro con valores en columnas seleccionadas: INSERT INTO empleados (nombre, edad) VALUES (\u0026#39;María López\u0026#39;, 25); Insertar múltiples registros en una sola sentencia: INSERT INTO empleados (nombre, edad) VALUES (\u0026#39;Pedro Gómez\u0026#39;, 35), (\u0026#39;Ana Ramírez\u0026#39;, 28), (\u0026#39;Carlos Jiménez\u0026#39;, 32); Consideraciones adicionales:\nLa secuencia de los valores en la cláusula VALUES debe coincidir con la secuencia de las columnas en la cláusula INSERT. Si se intenta insertar un valor que no cumple con las restricciones de la tabla, como un tipo de dato incorrecto o una violación de una restricción de clave primaria, la operación de inserción fallará y mostrará un error. UPDATE # El comando UPDATE se utiliza para modificar registros existentes en una tabla. Permite actualizar los valores de una o varias columnas en función de las condiciones especificadas.\nSintaxis básica # La sintaxis básica del comando UPDATE es la siguiente:\nUPDATE tabla SET columna1 = valor1, columna2 = valor2, ... WHERE condiciones; tabla: especifica el nombre de la tabla en la cual se actualizarán los registros. columna1, columna2, etc.: especifica las columnas que se actualizarán y los nuevos valores que se les asignarán. valor1, valor2, etc.: proporciona los nuevos valores que se asignarán a las columnas correspondientes. condiciones: especifica las condiciones que deben cumplirse para que se realice la actualización. Puedes utilizar operadores lógicos como \u0026ldquo;=\u0026rdquo;, \u0026ldquo;\u0026gt;\u0026rdquo;, \u0026ldquo;\u0026lt;\u0026rdquo;, etc., y operadores como \u0026ldquo;AND\u0026rdquo; y \u0026ldquo;OR\u0026rdquo; para combinar múltiples condiciones. Ejemplos # Actualizar un valor específico en una columna: UPDATE empleados SET salario = 55000 WHERE empleado_id = 1; Actualizar múltiples columnas en un solo comando: UPDATE empleados SET salario = 55000, edad = 35 WHERE departamento = \u0026#39;Ventas\u0026#39;; Utilizar una expresión en la cláusula SET para actualizar valores: UPDATE empleados SET salario = salario * 1.1 WHERE departamento = \u0026#39;Ventas\u0026#39;; Consideraciones adicionales:\nAsegúrate de proporcionar condiciones adecuadas en la cláusula WHERE para limitar la actualización solo a los registros deseados. Si no se proporciona una condición WHERE, se actualizarán todos los registros de la tabla. Ten en cuenta que un comando UPDATE puede afectar a múltiples registros al mismo tiempo, por lo que es importante revisar y verificar las condiciones y los nuevos valores antes de ejecutarlo. DELETE # El comando DELETE se utiliza para eliminar uno o varios registros de una tabla. Permite establecer condiciones para filtrar los registros a eliminar.\nSintaxis básica # La sintaxis básica del comando DELETE es la siguiente:\nDELETE FROM tabla WHERE condiciones; tabla: especifica el nombre de la tabla de la cual deseas eliminar registros. condiciones (opcional): establece las condiciones que deben cumplirse para eliminar los registros. Puedes utilizar operadores lógicos como \u0026ldquo;=\u0026rdquo;, \u0026ldquo;\u0026gt;\u0026rdquo;, \u0026ldquo;\u0026lt;\u0026rdquo;, etc., y operadores como \u0026ldquo;AND\u0026rdquo; y \u0026ldquo;OR\u0026rdquo; para combinar múltiples condiciones. Ejemplos # Eliminar todos los registros de una tabla: DELETE FROM empleados; Eliminar registros que cumplan con una condición específica: DELETE FROM empleados WHERE departamento = \u0026#39;Ventas\u0026#39;; Combinar condiciones utilizando operadores lógicos: DELETE FROM empleados WHERE departamento = \u0026#39;Ventas\u0026#39; AND edad \u0026gt; 40; Consideraciones adicionales:\nTen en cuenta que el comando DELETE es irreversible y elimina los registros de forma permanente. Asegúrate de tener una copia de seguridad de los datos o de estar seguro de la acción antes de ejecutarlo. Si no se proporciona una cláusula WHERE, se eliminarán todos los registros de la tabla. Al eliminar registros, ten cuidado de especificar correctamente las condiciones para evitar eliminar registros no deseados. También es importante tener en cuenta las restricciones de integridad referencial y otras dependencias entre tablas al eliminar registros. PLUS: Comando TRUNCATE # El comando TRUNCATE en SQL se utiliza para eliminar todos los registros de una tabla de una base de datos de manera rápida y eficiente. A diferencia del comando DELETE, TRUNCATE no registra cada eliminación individual en el registro de transacciones y reinicia los identificadores de autoincremento o secuencias asociados con la tabla.\nLa sintaxis básica del comando TRUNCATE es la siguiente:\nTRUNCATE TABLE tabla; Diferencias entre DELETE y TRUNCATE # Estas son algunas diferencias que te podría interesar conocer:\n1. Efecto en la base de datos # TRUNCATE: El comando TRUNCATE elimina todos los registros de una tabla de manera rápida y eficiente. Elimina los datos de la tabla de forma completa, pero no registra cada eliminación individual en el registro de transacciones (log). Además, reinicia los identificadores de autoincremento o secuencias asociados con la tabla. DELETE: El comando DELETE elimina registros de una tabla de acuerdo con una condición especificada. A diferencia de TRUNCATE, DELETE registra cada eliminación individual en el registro de transacciones, lo que permite deshacer o revertir la operación. 2. Velocidad de ejecución # TRUNCATE: El comando TRUNCATE es más rápido que el comando DELETE, especialmente cuando se trata de grandes conjuntos de datos. Truncate simplemente desasigna el espacio ocupado por la tabla y sus datos, sin llevar a cabo una eliminación de registro por registro. DELETE: El comando DELETE puede ser más lento que TRUNCATE, especialmente cuando se eliminan grandes cantidades de datos o se realizan eliminaciones con múltiples condiciones. 3. Uso de memoria y registro de transacciones # TRUNCATE: El comando TRUNCATE utiliza menos recursos de memoria y genera menos registros en el registro de transacciones debido a su forma de eliminar los datos. DELETE: El comando DELETE utiliza más recursos de memoria y registra cada eliminación individual en el registro de transacciones, lo que puede ocupar espacio adicional y tener un impacto en el rendimiento. 4. Rollback # TRUNCATE: Dado que TRUNCATE no registra las eliminaciones individuales en el registro de transacciones, no se puede deshacer o revertir una operación de TRUNCATE. Una vez que se realiza un TRUNCATE, los datos se eliminan de forma permanente. DELETE: Al utilizar el comando DELETE, las eliminaciones se registran en el registro de transacciones y se pueden deshacer o revertir mediante un rollback si es necesario. Video de refuerzo # ","date":"11 julio 2023","permalink":"/platform/sql/insert_update_delete/","section":"Sqls","summary":"Cada comando en SQL tiene una sintaxis específica y realiza una tarea particular.","title":"Comandos INSERT, UPDATE y DELETE en SQL"},{"content":"PHP basa su eficacia principalmente en su enorme biblioteca de funciones. Una gran librería que crece constantemente, a medida que nuevas versiones van surgiendo y se van incorporando nuevas áreas de trabajo dentro del lenguaje. Las funciones de PHP nos permiten realizar de una manera sencilla tareas habituales y a la hora de desarrollar una aplicación, pero además nosotros podemos hacer nuevas funciones para resolver todo tipo de tareas más específicas de nuestra aplicación.\nPara acceder a todas las utilidades que hay detrás de una función tan sólo hemos de realizar la llamada (o invocación) de la forma apropiada y especificar los parámetros necesarios para que la función realice su tarea.\nNota: Después de la llegada de PHP 5, en el momento en el que PHP pasó a ser un lenguaje con una orientación a objetos potente, las funciones de la biblioteca del lenguaje tienen en muchos casos alternativas en base a clases y objetos. Nosotros como programadores podemos escoger trabajar con funciones corrientes o con métodos de objetos y clases, pero en general la funcionalidad a la que llegaremos es exactamente la misma. Ejemplo de funciones existentes en PHP # Antes de lanzarnos a crear nuestra propia función, merece la pena echar un vistazo a la documentación para ver si dicha función ya existe o podemos aprovecharnos de alguna de las existentes para aligerar nuestro trabajo. Aquí te daré algunos ejemplos:\n// Función predefinida: strlen() $longitud = strlen(\u0026#34;Hola, mundo\u0026#34;); // Devuelve la longitud de una cadena // Función predefinida: strtolower() $cadena = \u0026#34;Hola, mundo\u0026#34;; $cadenaMinusculas = strtolower($cadena); // Convierte una cadena a minúsculas Crear nuestras propias funciones en PHP # Lo que puede parecer ligeramente más complicado, pero que con un mínimo de experiencia resultará muy sencillo y sin lugar a dudas muy práctico, es crear nuestras propias funciones. De una forma general, podríamos crear nuestras propias funciones para conectarnos a una base de datos o crear los encabezados o etiquetas meta de un documento HTML. Para una aplicación de comercio electrónico podríamos crear por ejemplo funciones de cambio de una moneda a otra o de calculo de los impuestos a añadir al precio de articulo. En definitiva, es interesante crear funciones para la mayoría de acciones más o menos sistemáticas que realizamos en nuestros programas.\nAquí daremos el ejemplo de creación de una función que, llamada al comienzo de nuestro script, nos crea el encabezado de nuestro documento HTML y coloca el titulo que queremos a la página:\nfunction hacer_encabezado($titulo) { $encabezado=\u0026#34;\u0026lt;html\u0026gt;\u0026lt;head\u0026gt;\u0026lt;title\u0026gt;$titulo\u0026lt;/title\u0026gt;\u0026lt;/head\u0026gt;\u0026#34;; echo $encabezado; } Esta función podría ser llamada al principio de todas nuestras páginas de la siguiente forma:\n$titulo=\u0026#34;Mi web\u0026#34;; hacer_encabezado($titulo); De esta forma automatizamos el proceso de creación de nuestro documento. Podríamos por ejemplo incluir en la función otras variables que nos ayudasen a construir las etiquetas meta y de esta forma, con un esfuerzo mínimo, crearíamos los encabezados personalizados para cada una de nuestras páginas. De este mismo modo nos es posible crear cierres de documento o interfaces de la web como podrían ser barras de navegación, formularios de login, etc.\nComo has podido comprobar, para crear una función debemos declararla. Para ello usamos la palabra function seguida del nombre de la función. Luego unos paréntesis donde podemos indicar los parámetros que se espera recibir en su invocación y finalmente el bloque de código de la función propiamente dicha, encerrado entre llaves.\nEstructurar el código de una aplicación con nuestras propias librerías de funciones # Por supuesto, la función ha de ser definida para poder ser utilizada, ya que no se encuentra integrada en PHP sino que la hemos creado nosotros. Si pensamos que en una aplicación web completa podemos tener cientos de funciones definidas por nosotros mismos quizás te asuste que tengas demasiado código de funciones que deben ser definidas antes de ser usadas. Pero esto en realidad tiene solución, ya que pueden ser incluidas desde un archivo externo. De hecho es muy común que tengamos archivos donde solo colocamos el código de las funciones, almacenando definiciones de las funciones que vayamos creando para realizar un sitio web.\nEstos archivos en los que se guardan las funciones se llaman comúnmente librerías. La forma de incluirlos en nuestro script es a partir de la instrucción require o include:\nrequire(\u0026#34;ruta/a/libreria.php\u0026#34;); O si prefieres la alternativa del include:\ninclude(\u0026#34;ruta/a/libreria.php\u0026#34;); Nota: Tanto require() como include() hacen el mismo trabajo, de traerse código que hay en archivos diferentes dentro del servidor, para que podamos utilizarlo al crear una página. La diferencia fundamental entre require e include es que la primera requiere forzosamente algo y la otra no. Es decir, si hacemos un require() de un archivo y éste no se encuentra disponible por cualquier motivo, PHP parará la ejecución del código y devolverá un \u0026ldquo;Error fatal\u0026rdquo;. Si por el contrario hacemos un include() y el archivo que tratamos de traer no se encuentra disponible, entonces lo que PHP nos mostrará es una señak de advertencia, un \u0026ldquo;warning\u0026rdquo;, pero tratará de seguir ejecutando el programa. Te daré un ejemplo:\nCreamos un archivo llamado libreria.php que contiene lo siguiente: \u0026lt;?php //función de encabezado y colocación del titulo function hacer_encabezado($titulo) { $encabezado=\u0026#34;\u0026lt;html\u0026gt;\u0026lt;head\u0026gt;nt\u0026lt;title\u0026gt;$titulo\u0026lt;/title\u0026gt;n\u0026lt;/head\u0026gt;n\u0026#34;; echo $encabezado; } ?\u0026gt; Creamos el archivo principal llamado página.php (por ejemplo): \u0026lt;?php include(\u0026#34;libreria.php\u0026#34;) $titulo=\u0026#34;Mi Web\u0026#34; hacer_encabezado($titulo) ?\u0026gt; \u0026lt;body\u0026gt; El cuerpo de la página \u0026lt;/body\u0026gt; \u0026lt;/html\u0026gt; Podemos meter todas las funciones que vayamos encontrando dentro de un mismo archivo pero resulta muchísimo más ventajoso ir clasificándolas en distintos archivos por temática: Funciones de conexión a bases de datos, funciones comerciales, funciones generales, etc. Esto nos ayudara a poder localizarlas antes para corregirlas o modificarlas, nos permite también cargar únicamente el tipo de función que necesitamos para el script sin recargar éste en exceso además de reutilizar algunas de nuestras librerías para varios sitios webs distintos.\nComo te mencioné al comienzo de esta lectura, existen funciones ya creadas en PHP, una de ellas es la función llamada header que crea un encabezado HTML configurable lo cual nos evita tener que crearla nosotros mismos.\nNota: Como puede verse, la tarea del programador puede en algunos casos parecerse a la de un coleccionista. Hay que ser paciente y metódico y al final, a base de trabajo propio, intercambio de código y dedicación podemos llegar poseer nuestro pequeño tesoro de funciones, capaces de aligerar nuestro trabajo diario.\nDe hecho, más adelante si sigues aprendiendo PHP profesionalmente encontrarás que existen los frameworks, que son en cierto modo como bibliotecas adicionales de funciones que puedes usar para resolver muchas más cosas, adicionales a las que el propio lenguaje ya te ofrece. Los frameworks además ayudan a los programadores a estructurar su código y a usar diversos patrones de diseño de software que facilitan la creación de proyectos de fácil mantenimiento y capaces de crecer sin volverse inmanejables. Al final de este nivel, aprenderemos uno muy conocido llamado Laravel.\nEjemplo de función # Vamos a ver un ejemplo de creación de funciones en PHP. Se trata de hacer una función que recibe un texto y lo escribe en la página con cada carácter separado por \u0026ldquo;-\u0026rdquo;. Es decir, si recibe \u0026ldquo;hola\u0026rdquo; debe escribir \u0026ldquo;h-o-l-a\u0026rdquo; en la página web.\nLa manera de realizar esta función será recorrer el string, caracter a caracter, para imprimir cada uno de los caracteres, seguido de el signo \u0026ldquo;-\u0026rdquo;. Recorreremos el string con un bucle for, desde el carater 0 hasta el número de caracteres total de la cadena.\nEl número de caracteres de una cadena se obtiene con la función predefinida en PHP strlen(), que recibe el string entre paréntesis y devuelve el número de los caracteres que tenga.\n\u0026lt;html\u0026gt; \u0026lt;head\u0026gt; \u0026lt;title\u0026gt;funcion 1\u0026lt;/title\u0026gt; \u0026lt;/head\u0026gt; \u0026lt;body\u0026gt; \u0026lt;? php function escribe_separa($cadena){ for ($i=0;$i\u0026lt;strlen($cadena);$i++){ echo $cadena[$i]; if ($i\u0026lt;strlen($cadena)-1) echo \u0026#34;-\u0026#34;; } } escribe_separa (\u0026#34;hola\u0026#34;); echo \u0026#34;\u0026lt;p\u0026gt;\u0026#34;; escribe_separa (\u0026#34;Texto más largo, a ver lo que hace\u0026#34;); ?\u0026gt; \u0026lt;/body\u0026gt; \u0026lt;/html\u0026gt; La función que hemos creado se llama escribe_separa y recibe como parámetro la cadena que hay que escribir con el separador \u0026ldquo;-\u0026rdquo;. El bucle for nos sirve para recorrer la cadena, desde el primer al último carácter. Luego, dentro del bucle, se imprime cada carácter separado del signo \u0026ldquo;-\u0026rdquo;. El if que hay dentro del bucle for comprueba que el actual no sea el último carácter, porque en ese caso no habría que escribir el signo \u0026ldquo;-\u0026rdquo; (queremos conseguir \u0026ldquo;h-o-l-a\u0026rdquo; y si no estuviera el if obtendríamos \u0026ldquo;h-o-l-a-\u0026rdquo;).\nPaso de parámetros o argumentos # Los parámetros son los datos que reciben las funciones y que utilizan para realizar las operaciones de esa función. Una función puede recibir cualquier número de parámetros, incluso ninguno.\nSi la función que estamos construyendo no necesita recibir ningún parámetro, al declararla, simplemente indicamos los paréntesis vacíos en la cabecera. Por ejemplo en la siguiente función mostramos la fecha del día de hoy. Para ello nos apoyamos en otra función incluida en PHP: date().\nfunction fecha_hoy() { echo date(\u0026#39;d/m/Y\u0026#39;); } La intención de la anterior función es mostrar la fecha del día actual. Como siempre mostrará el día de hoy, no necesito pasarle ningún parámetro, siempre hará lo mismo. Las funciones que no requieren parámetros se las invoca indicando los paréntesis vacíos.\nfecha_hoy(); En el caso que queramos, o necesitemos, recibir parámetros para implementar una función, a la hora de definirla, en la cabecera, se definen los parámetros que va a recibir.\nfunction f1 ($parametro1, $parametro2) { // code... } Argumentos por valor # El paso de parámetros en PHP se realiza por valor. \u0026ldquo;Por valor\u0026rdquo; es una manera típica de pasar parámetros en funciones, quiere decir que el cambio de un dato de un parámetro no actualiza el dato de la variable que se pasó a la función. Por ejemplo, cuando invocamos una función pasando una variable como parámetro, a pesar de que cambiemos el valor del parámetro dentro de la función, la variable original no se ve afectada por ese cambio. Puede que se vea mejor con un ejemplo:\nfunction porvalor ($parametro1){ $parametro1=\u0026#34;hola\u0026#34;; echo \u0026#34;\u0026lt;br\u0026gt;\u0026#34; . $parametro1; //imprime \u0026#34;hola\u0026#34; } $mivariable = \u0026#34;esto no cambia\u0026#34;; porvalor ($mivariable); echo \u0026#34;\u0026lt;br\u0026gt;\u0026#34; . $mivariable; //imprime \u0026#34;esto no cambia\u0026#34; Argumentos por referencia # Por defecto, los argumentos de las funciones son pasados por valor (así, si el valor del argumento dentro de la función cambia, este no cambia fuera de la función). Para permitir a una función modificar sus argumentos, éstos deben pasarse por referencia.\nPara hacer que un argumento a una función sea siempre pasado por referencia hay que anteponer al nombre del argumento el signo \u0026rsquo;et\u0026rsquo; (\u0026amp;) en la definición de la función:\n\u0026lt;?php function porreferencia(\u0026amp;$cadena) { $cadena = \u0026#39;Si cambia\u0026#39;; } $str = \u0026#39;Esto es una cadena\u0026#39;; porreferencia ($str); echo $str; // Imprime \u0026#39;Si cambia\u0026#39; ?\u0026gt; Este script mostrará por pantalla \u0026lsquo;Si cambia\u0026rsquo;.\nParámetros por defecto # Podemos definir valores por defecto para los parámetros. Los valores por defecto sirven para que los parámetros contengan un dato predefinido, con el que se inicializarán si no se le pasa ningún valor en la llamada de la función. Los valores por defecto se definen asignando un dato al parámetro al declararlo en la función.\nfunction pordefecto($parametro1=\u0026#34;pepe\u0026#34;;$parametro2=3) { // code... } Para la definición de función anterior, $parametro1 tiene como valor por defecto \u0026ldquo;pepe\u0026rdquo;, mientras que $parametro2 tiene 3 como valor por defecto.\nSi llamamos a la función sin indicar valores a los parámetros, estos tomarán los valores asignados por defecto.\nRetornar valores # Palabra \u0026ldquo;return\u0026rdquo; # Para retornar valores en funciones se utiliza la palabra \u0026ldquo;return\u0026rdquo;, indicando a continuación el dato o variable que tienen que retornar.\nfunction suma($valor1, $valor2) { return $valor1 + $valor2; } La anterior función realiza una operación de suma entre dos valores enviados por parámetro. Para invocarla debemos enviarle los dos valores que debe sumar. Cuando se ejecute la función recibiremos un valor como devolución y podremos hacer cualquier cosa con él. Por ejemplo, en el siguiente código estamos invocando a la función suma, enviando dos valores numéricos y almacenando el valor de devolución en una variable llamada \u0026ldquo;$resultado\u0026rdquo;.\n$resultado = suma(3, 6); Una función puede perfectamente tener múltiples palabras return en su código. Sin embargo, aunque esto ocurra, debemos tener en cuenta que una función sólo podrá devolver un único valor. Entre otras cosas esto ocurrirá porque, cuando se usa el return, se termina la ejecución de la función devolviendo el dato indicado.\nObserva el siguiente código de función. Realiza una operación de división. Recuerda que la operación matemática de dividir algo entre cero no está permitida, ya que el resultado sería \u0026ldquo;infinito\u0026rdquo; y ese valor desvordaría a la máquina. Entonces, antes de realizar la operación de división vamos a hacer una comprobación que no se intente dividir entre cero.\nfunction division($valor1, $valor2) { if($valor2 == 0) { return \u0026#39;No puedo dividir por cero!!\u0026#39;; } else { return $valor1 / $valor2; } } Para que quede claro, ahora mira esta otra función.\nfunction cuadrado($valor) { return $valor * $valor; echo \u0026#39;Esto nunca se ejecutará!!\u0026#39;; } Debido al return, el código con la sentencia \u0026ldquo;echo\u0026rdquo; nunca se llegará a ejecutar. Así que no aparecerá nunca el mensaje por pantalla, porque el return de la línea anterior parará siempre la ejecución de la función.\nPara acabar este punto queremos volver sobre la función anterior llamada \u0026ldquo;division\u0026rdquo;. Dado lo aprendido de las características del return, aunque nuestro código fuera ligeramente distinto, también tendríamos el mismo resultado. Observa el siguiente código:\nfunction division($valor1, $valor2) { if($valor2 == 0) { return \u0026#39;No puedo dividir por cero!!\u0026#39;; } return $valor1 / $valor2; } El segundo return solo se ejecutará si $valor2 es distinto de cero, porque si fuera igual a cero se habría salido de la función debido al primer return. Este detalle quizás cuesta un poco de ver al principio de la experiencia como programador, pero es bastante sencillo en realidad. En resumen, puedes confiar que la ejecución de una función siempre se detendrá después de producirse un return.\nRetornar múltiples valores en una función # Si queremos hacer que se puedan devolver varios valores distintos podríamos que recurrir a un truco que consiste en devolver un array.\nfunction numeros_pequenos() { return array (0, 1, 2); } list ($zero, $one, $two) = numeros_pequenos(); ","date":"11 julio 2023","permalink":"/platform/php/funciones/","section":"Phps","summary":"PHP basa su eficacia principalmente en su enorme biblioteca de funciones.","title":"Funciones en PHP"},{"content":"MySQL es uno de los sistemas de gestión de bases de datos (SGBD) más populares y ampliamente utilizados en el desarrollo de aplicaciones web. En este artículo, te guiaremos a través de los pasos básicos para crear una base de datos en MySQL. Utilziaremos \u0026lsquo;phpMyAdmin\u0026rsquo;, que una herramienta popular y poderosa para administrar bases de datos MySQL de forma gráfica a través de un navegador web. En este artículo, exploraremos cómo utilizar phpMyAdmin para crear bases de datos y tablas utilizando sentencias SQL. Aprenderás los pasos necesarios para crear una base de datos, definir tablas con sus campos y establecer claves primarias.\n1. Instalación del servidor MySQL: # Hasta este punto ya debes tener instalado WAMP o XAMPP porque te permitirá gestionar un entorno de desarrollo en el que utilices MySQL.\n2. Acceso al servidor phpMyAdmin: # Necesitamos acceder a phpMyAdmin y aquí te dejaré las instrucciones:\nEn XAMPP: # Asegúrate de que XAMPP esté instalado y en ejecución en tu computadora. Abre tu navegador web (por ejemplo, Google Chrome, Mozilla Firefox). En la barra de direcciones del navegador, escribe lo siguiente: http://localhost/phpmyadmin y presiona Enter. Esto te llevará a la página de inicio de sesión de phpMyAdmin. Por lo general, no se requiere un nombre de usuario para acceder a phpMyAdmin en XAMPP. Deja el campo de nombre de usuario en blanco. Si no has establecido una contraseña para el usuario \u0026ldquo;root\u0026rdquo; de MySQL en XAMPP, también deja el campo de contraseña en blanco. Si has configurado una contraseña, ingrésala en el campo correspondiente. Haz clic en el botón \u0026ldquo;Log in\u0026rdquo; o presiona Enter para iniciar sesión. Después de iniciar sesión correctamente, se abrirá el panel de control de phpMyAdmin, donde podrás administrar tus bases de datos MySQL. Recuerda que la dirección http://localhost/phpmyadmin es la ruta predeterminada para acceder a phpMyAdmin en un entorno local con WampServer o XAMPP. Si has modificado la configuración de WampServer o XAMPP o la ruta de acceso a phpMyAdmin, asegúrate de utilizar la dirección correcta en tu navegador.\nSi sigues teniendo problemas para acceder a phpMyAdmin desde WampServer o XAMPP, verifica que WampServer o XAMPP esté funcionando correctamente y que los servicios de Apache y MySQL estén activos. Además, asegúrate de haber instalado WampServer o XAMPP correctamente y de que no haya conflictos con otros servicios o aplicaciones en tu computadora.\n3. Creación de base de datos y tablas # Si bien este video dice XAMPP, no habrá ninguna diferencia si usas WAMP.\nAhora repasemos lo visto en el video.\nSentencia SQL CREATE DATABASE # La sentencia SQL \u0026ldquo;CREATE DATABASE\u0026rdquo; se utiliza para crear una nueva base de datos en un sistema de gestión de bases de datos (SGBD) como MySQL. Esta sentencia permite definir el nombre de la base de datos y, opcionalmente, especificar algunas características adicionales, como el conjunto de caracteres y la configuración regional.\nLa sintaxis básica de la sentencia \u0026ldquo;CREATE DATABASE\u0026rdquo; es la siguiente:\nCREATE DATABASE nombre_basedatos; Donde \u0026ldquo;nombre_basedatos\u0026rdquo; es el nombre que deseas asignarle a la nueva base de datos que estás creando. Es importante elegir un nombre descriptivo y único para evitar conflictos con otras bases de datos existentes.\nSupongamos que deseas crear una base de datos llamada \u0026ldquo;mi_base_datos\u0026rdquo;. La sentencia SQL para crearla sería:\nCREATE DATABASE mi_base_datos; Es importante tener en cuenta que la capacidad de ejecutar la sentencia \u0026ldquo;CREATE DATABASE\u0026rdquo; puede estar sujeta a los permisos y privilegios del usuario conectado al SGBD. Es posible que necesites tener privilegios suficientes para crear una base de datos.\nEn resumen, la sentencia SQL \u0026ldquo;CREATE DATABASE\u0026rdquo; es utilizada para crear una nueva base de datos en un sistema de gestión de bases de datos. Permite especificar el nombre de la base de datos y, opcionalmente, otras opciones como el conjunto de caracteres y la configuración regional. Esta sentencia es fundamental para iniciar la creación y gestión de bases de datos en MySQL.\nSentencia SQL USE # La sentencia SQL \u0026ldquo;USE\u0026rdquo; se utiliza para seleccionar una base de datos específica en un servidor MySQL. En phpMyAdmin, esta sentencia se utiliza para elegir la base de datos con la que deseas trabajar, lo que significa que todas las operaciones posteriores, como la creación de tablas o consultas, se realizarán en esa base de datos seleccionada.\nLa sintaxis es la siguiente:\nUSE nombre_basedatos; Reemplaza \u0026ldquo;nombre_basedatos\u0026rdquo; con el nombre real de la base de datos que deseas seleccionar.\nSentencia SQL CREATE TABLE # La sentencia SQL \u0026ldquo;CREATE TABLE\u0026rdquo; se utiliza para crear una nueva tabla en una base de datos en un sistema de gestión de bases de datos (SGBD) como MySQL. Esta sentencia permite definir la estructura de la tabla, incluyendo los nombres de los campos, los tipos de datos y las restricciones.\nA continuación, te explico los elementos clave de la sentencia \u0026ldquo;CREATE TABLE\u0026rdquo;:\n1. Sintaxis básica: # La sintaxis básica de la sentencia \u0026ldquo;CREATE TABLE\u0026rdquo; es la siguiente:\nCREATE TABLE nombre_tabla ( nombre_campo1 tipo_dato1 restricciones, nombre_campo2 tipo_dato2 restricciones, ... ); Donde \u0026ldquo;nombre_tabla\u0026rdquo; es el nombre que deseas asignarle a la tabla que estás creando. Luego, se definen los nombres de los campos (columnas) de la tabla, junto con sus tipos de datos y restricciones.\n2. Nombres de campos y tipos de datos: # Para cada campo de la tabla, debes especificar un nombre descriptivo y único, y el tipo de dato que almacenará. Algunos tipos de datos comunes incluyen:\nINT: para valores enteros. VARCHAR(n): para cadenas de caracteres de longitud variable, donde \u0026ldquo;n\u0026rdquo; representa la longitud máxima. DATE: para fechas. FLOAT: para números decimales. Puedes consultar la documentación del SGBD específico para conocer los tipos de datos disponibles y sus características.\n3. Restricciones y atributos de campo: # Además del nombre y el tipo de dato, puedes especificar restricciones y atributos adicionales para los campos de la tabla. Algunas restricciones comunes incluyen:\nPRIMARY KEY: para especificar un campo como clave primaria, que debe ser único en cada registro. NOT NULL: para indicar que un campo no puede tener un valor nulo. UNIQUE: para asegurar que los valores de un campo sean únicos. FOREIGN KEY: para establecer una relación con una clave externa en otra tabla. Ejemplo:\nSupongamos que deseas crear una tabla llamada \u0026ldquo;clientes\u0026rdquo; con los campos \u0026ldquo;id\u0026rdquo; (entero), \u0026ldquo;nombre\u0026rdquo; (cadena de caracteres) y \u0026ldquo;edad\u0026rdquo; (entero). La sentencia SQL para crear esta tabla sería:\nCREATE TABLE clientes ( id INT PRIMARY KEY, nombre VARCHAR(50) NOT NULL, edad INT ); Esta sentencia crea una nueva tabla llamada \u0026ldquo;clientes\u0026rdquo; con los campos especificados y sus respectivas características.\nEn resumen, la sentencia SQL \u0026ldquo;CREATE TABLE\u0026rdquo; se utiliza para crear una nueva tabla en una base de datos. Permite definir los nombres de los campos, los tipos de datos y las restricciones para cada campo. Esta sentencia es fundamental para establecer la estructura y el esquema de las tablas en una base de datos.\nVideo de refuerzo # Puedes ver este video desde el minuto 34:30 hasta el 42:10.\nRecuerda que él está usando una herramienta de diseño y administración de bases de datos llamada \u0026lsquo;Workbench\u0026rsquo;. Sin embargo, el concepto de creación de bases de datos y tablas es el mismo. ","date":"10 julio 2023","permalink":"/platform/sql/crear_db_tables/","section":"Sqls","summary":"MySQL es uno de los sistemas de gestión de bases de datos (SGBD) más populares y ampliamente utilizados en el desarrollo de aplicaciones web.","title":"Crear una base de datos con tablas"},{"content":"Los ordenadores, como cualquier máquina, están diseñados para realizar tareas repetitivas. Es por ello que nuestros programas pueden aprovecharse de este principio para realizar una determinada secuencia de instrucciones un cierto número de veces. Para ello, utilizamos las estructuras llamadas en bucle que nos ayudan a, usando unas pocas líneas, realizar una tarea incluida dentro del bucle un cierto numero de veces definido por nosotros mismos.\nPHP propone varios tipos de bucle cada uno con características especificas:\nBucle while # Lo usamos para ejecutar las instrucciones contenidas en su interior siempre y cuando la condición definida sea verdadera. La estructura sintáctica es la siguiente:\nwhile (condición) { instruccion1; instruccion2; ... } Un ejemplo sencillo es este bucle que aumenta el tamaño de la fuente en una unidad a cada nueva vuelta por el bucle:\n\u0026lt;?php $size=1; While ($size\u0026lt;=6) { echo\u0026#34;\u0026lt;font size=$size\u0026gt;Tamaño $size\u0026lt;/font\u0026gt;\u0026lt;br\u0026gt;\u0026#34;; $size++; } ?\u0026gt; Hemos de definir el valor de la variable que vamos a evaluar en la condición. Algo absolutamente obvio pero fácil de olvidar. En este caso le hemos atribuido un valor de 1 que corresponde a la letra más pequeña.\nEl paso siguiente es crear el bucle en el que imponemos la condición que la variable no exceda el valor de 6.\nLa instrucción a ejecutar será imprimir en nuestro documento un código HTML en el que la etiqueta font y el mensaje que contiene varían a medida que $size cambia su valor.\nEl siguiente paso es incrementar en una unidad el valor de $size. Esto se puede hacer con una expresión como la mostrada en el bucle ($size++) que en realidad es sinónima de:\n$size=$size+1 El bucle while se suele utiliza cuando no se sabe exactamente cuantas iteraciones se deben realizar antes de acabar. Vamos a utilizarlo en otro ejemplo, en el que hay que recorrer una cadena hasta encontrar un carácter dado. Si lo encuentra, escribir su posición. Si no, escribir que no se ha encontrado.\nNota: Para hacer este ejercicio necesitamos conocer la función de cadena strlen(), que obtiene la longitud de la cadena que se le pase por parámetro.\nint strlen (string cad) Devuelve un entero igual a la longitud de la cadena.\n\u0026lt;?php $cadena = \u0026#34;mhola a todo el mundo\u0026#34;; //recorro la cadena hasta encontrar una \u0026#34;m\u0026#34; $i = 0; while ($cadena[$i] != \u0026#34;m\u0026#34; \u0026amp;\u0026amp; $i \u0026lt; strlen($cadena)) { $i++; } if ($i == strlen($cadena)) echo \u0026#34;No se encuentra...\u0026#34;; else echo \u0026#34;Está en la posición $i\u0026#34;; ?\u0026gt; En este ejemplo se define una cadena con el valor \u0026ldquo;hola a todo el mundo\u0026rdquo;. Posteriormente se recorre esa cadena hasta el final de la cadena o hasta encontrar el caracter \u0026ldquo;m\u0026rdquo;, utilizando una variable $i que lleva la cuenta de los caracteres recorridos.\nAl final del bucle while, si se salió porque se encontró el caracter \u0026ldquo;m\u0026rdquo;, la variable $i valdrá un número menor que la longitud de la cadema. Si se salió por llegar al final de la cadena, la variable $i valdrá lo mismo que la longitud en caracteres de esa cadena. En el condicional simplemente se comprueba si $i vale o no lo mismo que la longitud de la cadena, mostrando los mensajes adecuados en cada caso.\nBucle do/while # Como ya hemos visto anteriormente, este bucle es muy similar al anterior. La sintaxis es la siguiente:\ndo { instruccion1; instruccion2; ... } while (condición) La diferencia con respecto a los bucles while es que este tipo de bucle evalúa la condición al final con lo que, incluso siendo falsa desde el principio, éste se ejecuta al menos una vez.\nBucle for # PHP está provisto de otros tipos de bucle que también resultan muy prácticos en determinadas situaciones. El más popular de ellos es el bucle \u0026ldquo;for\u0026rdquo; que, como para los casos anteriores, se encarga de ejecutar las instrucciones entre llaves. La diferencia con los anteriores radica en cómo se plantea la condición de finalización del bucle. Para aclarar su funcionamiento vamos a expresar el ejemplo de bucle while visto en el capítulo anterior en forma de bucle for:\n\u0026lt;?php for ($size = 1; $size \u0026lt;= 6; $size++) { echo \u0026#34;\u0026lt;font size=$size\u0026gt;Tamaño $size\u0026lt;/font\u0026gt;\u0026lt;br\u0026gt;\u0026#34;; } ?\u0026gt; Bucle foreach # Este bucle, implementado en las versiones de PHP4, nos ayuda a recorrer los valores de un array lo cual puede resultar muy útil por ejemplo para efectuar una lectura rápida del mismo. Recordamos que un array es una variable que guarda un conjunto de elementos (valores) catalogados por claves.\nLa estructura general es la siguiente:\nforeach ($array as $clave =\u0026gt; $valor) { instruccion1; instruccion2; ; } Un ejemplo práctico es la lectura de un array lo cual podría hacerse del siguiente modo:\n\u0026lt;?php $moneda=array(\u0026#34;España\u0026#34;=\u0026gt; \u0026#34;Peseta\u0026#34;,\u0026#34;Francia\u0026#34; =\u0026gt; \u0026#34;Franco\u0026#34;,\u0026#34;USA\u0026#34; =\u0026gt; \u0026#34;Dolar\u0026#34;); foreach ($moneda as $clave=\u0026gt;$valor) { echo \u0026#34;Pais: $clave Moneda: $valor\u0026lt;br\u0026gt;\u0026#34;; } ?\u0026gt; Break y continue # Estas dos instrucciones se introducen dentro de la estructura y nos sirven respectivamente para escapar del bucle o saltar a la iteración siguiente. Pueden resultarnos muy prácticas en algunas situaciones.\nDurante una iteración de un bucle podemos saltar directamente a la siguiente iteración, sin seguir con la actual, con la instrucción continue.\nTambién podemos detener completamente las repeticiones de cualquier bucle con break, lo que parará la ejecución de la iteración actual y de las siguientes que pudiera haber.\nVideo de repaso # ","date":"10 julio 2023","permalink":"/platform/php/bucles/","section":"Phps","summary":"Los ordenadores, como cualquier máquina, están diseñados para realizar tareas repetitivas.","title":"Bucles en PHP"},{"content":"Los condicionales son una parte fundamental de cualquier lenguaje de programación, y PHP no es una excepción. Los condicionales permiten tomar decisiones en el flujo de ejecución de un programa, lo que permite que el código se adapte dinámicamente a diferentes situaciones. En este artículo, exploraremos los condicionales en PHP y cómo se utilizan para controlar el comportamiento de tus programas.\n¿Qué son los condicionales? # Los condicionales son fundamentales para controlar el flujo de ejecución de un programa. Permiten que el código tome diferentes caminos en función de las condiciones que se cumplan en tiempo de ejecución. Esto proporciona flexibilidad y adaptabilidad a nuestros programas, ya que pueden responder de manera diferente según las circunstancias.\nLas condiciones en los condicionales suelen estar compuestas por operadores de comparación, como igualdad (==), desigualdad (!=), mayor que (\u0026gt;), menor que (\u0026lt;), etc. También se pueden utilizar operadores lógicos como \u0026amp;\u0026amp; (AND), || (OR) y ! (NOT) para combinar múltiples condiciones y obtener resultados más complejos.\nCuando queremos que el programa, llegado a un cierto punto, tome un camino concreto en determinados casos y otro diferente si las condiciones de ejecución difieren, nos servimos del conjunto de instrucciones if, else y elseif.\nSintaxis # La estructura de base de este tipo de instrucciones en PHP es la siguiente:\nif (condición) { Instrucción 1; Instrucción 2; ... } else { Instrucción A; Instrucción B; ... } Llegados a este punto, el programa verificará el cumplimiento o no de la condición. Si la condición es cierta las instrucciones 1 y 2 serán ejecutadas. De lo contrario (else), las instrucciones A y B serán llevadas a cabo.\nEsta estructura de base puede complicarse un poco más si tenemos cuenta que no necesariamente todo es blanco o negro y que muchas posibilidades pueden darse. Es por ello que otras condiciones pueden plantearse dentro de la condición principal. Hablamos por lo tanto de condiciones anidadas que tendrían una estructura del siguiente tipo:\nif (condición1) { Instrucción 1; Instrucción 2; ... } else { if (condición2) { Instrucción A; Instrucción B; ... } else { Instrucción X ... } } De este modo podríamos introducir tantas condiciones como queramos dentro de una condición principal.\nDe gran ayuda es la instrucción elseif que permite en una sola línea introducir una condición adicional. Este tipo de instrucción simpifica ligeramente la sintaxis que acabamos de ver:\nif (condición1) { Instrucción 1; Instrucción 2; ... } elseif (condición2) { Instrucción A; Instrucción B; ... } else { Instrucción X ... } El uso de esta herramienta resultará claro con un poco de práctica. Pongamos un ejemplo sencillo de utilización de condiciones. El siguiente programa permitiría detectar la lengua empleada por el navegador y visualizar un mensaje en dicha lengua.\n\u0026lt;HTML\u0026gt; \u0026lt;HEAD\u0026gt; \u0026lt;TITLE\u0026gt;Detector de Lengua\u0026lt;/TITLE\u0026gt; \u0026lt;/HEAD\u0026gt; \u0026lt;BODY\u0026gt; \u0026lt;?php //Antes de nada introducimos mensajes en forma de variables $espanol = \u0026#34;Hola\u0026#34;; $ingles = \u0026#34;Hello\u0026#34;; $frances = \u0026#34;Bonjour\u0026#34;; //Ahora leemos del navegador cuál es su lengua oficial $idioma = substr($_SERVER[\u0026#39;HTTP_ACCEPT_LANGUAGE\u0026#39;], 0, 2); //Formulamos las posibilidades que se pueden dar if ($idioma == \u0026#34;es\u0026#34;) { echo \u0026#34;$espanol\u0026#34;; } elseif ($idioma == \u0026#34;fr\u0026#34;) { echo \u0026#34;$frances\u0026#34;; } else { echo \u0026#34;$ingles\u0026#34;; } ?\u0026gt; \u0026lt;/BODY\u0026gt; \u0026lt;/HTML\u0026gt; Para leer la lengua aceptada por el navegador lo que hacemos es definir una variable ($idioma) y, mediante la función substr, recogemos las dos primeras letras del código correspondiente al idioma aceptado por el navegador $_SERVER['HTTP_ACCEPT_LANGUAGE'].\nLa tercera parte de script se encarga de ver si el navegador está en español (es), francés (fr) o en cualquier otro idioma que no sea ninguno de estos dos y de imprimir el mensaje que proceda en cada caso.\nA notar que, cuando se trata de comparar variables, ponemos un doble igual \u0026ldquo;==\u0026rdquo; en lugar de un simple \u0026ldquo;=\u0026rdquo;. Este último queda reservado exclusivamente para asignar valores a variables.\n","date":"10 julio 2023","permalink":"/platform/php/condicionales/","section":"Phps","summary":"Los condicionales son una parte fundamental de cualquier lenguaje de programación, y PHP no es una excepción.","title":"Condicionales en PHP"},{"content":"¿Qué es el lenguaje SQL? # El lenguaje SQL (Structured Query Language) es un lenguaje de programación utilizado para administrar y manipular bases de datos relacionales. SQL proporciona una forma estándar de interactuar con sistemas de gestión de bases de datos (DBMS) y realizar diversas operaciones, como crear, modificar y consultar datos almacenados en una base de datos.\nCaracterísticas # El lenguaje SQL se basa en una estructura declarativa, lo que significa que se le indica al DBMS qué operación realizar en lugar de especificar cómo realizarla. Algunas de las principales características del lenguaje SQL son las siguientes:\nCreación y modificación de objetos de la base de datos: SQL permite crear y modificar estructuras de la base de datos, como tablas, vistas, índices, procedimientos almacenados y funciones.\nManipulación de datos: SQL permite realizar operaciones CRUD (Create, Read, Update, Delete) para insertar, recuperar, actualizar y eliminar datos en la base de datos. Se pueden realizar consultas complejas utilizando cláusulas como SELECT, INSERT, UPDATE, DELETE, JOIN, GROUP BY, ORDER BY, entre otras.\nDefinición de datos: SQL permite definir la estructura de los datos en la base de datos, como los tipos de datos que se pueden almacenar en cada columna de una tabla, las restricciones de integridad (como claves primarias y foráneas) y los índices para mejorar el rendimiento de las consultas.\nControl de acceso y seguridad: SQL proporciona mecanismos para establecer permisos y controlar el acceso a los datos. Se pueden definir usuarios, roles y privilegios para garantizar la seguridad de la base de datos.\nTransacciones: SQL admite el concepto de transacciones, que son secuencias de operaciones que se ejecutan de forma atómica, consistente, aislada y duradera (ACID). Esto garantiza la integridad de los datos y la consistencia de la base de datos en entornos multiusuario.\nEs importante tener en cuenta que aunque SQL es un estándar, existen diferentes dialectos y variaciones en la sintaxis y las características específicas de cada sistema de gestión de bases de datos. Algunos de los sistemas de gestión de bases de datos más populares que utilizan SQL como lenguaje de consulta son MySQL, PostgreSQL, Oracle, SQL Server y SQLite.\nEn resumen, el lenguaje SQL es un lenguaje de programación utilizado para interactuar con bases de datos relacionales. Permite realizar operaciones de creación, modificación y consulta de datos, así como gestionar la estructura, la seguridad y las transacciones en la base de datos.\n¿Qué es MySQL? # MySQL es un sistema de gestión de bases de datos relacional (RDBMS, por sus siglas en inglés) de código abierto. Fue desarrollado originalmente por MySQL AB y ahora es propiedad de Oracle Corporation. MySQL se destaca por ser una opción popular y ampliamente utilizada para almacenar y administrar datos en una amplia gama de aplicaciones y sitios web.\nCaracterísticas # Como sistema de gestión de bases de datos, MySQL permite crear, organizar y manipular datos de manera eficiente. Algunas de las características clave de MySQL son:\nEstructura relacional: MySQL utiliza el modelo de datos relacional, donde los datos se organizan en tablas con filas y columnas. Esto permite establecer relaciones entre tablas y consultar los datos de manera eficiente.\nLenguaje SQL: MySQL utiliza el lenguaje SQL (Structured Query Language) para interactuar con la base de datos. SQL proporciona comandos para crear, modificar y consultar la base de datos, lo que permite realizar una amplia variedad de operaciones, como la creación de tablas, la inserción de datos, la actualización de registros y la recuperación de información.\nEscalabilidad y rendimiento: MySQL está diseñado para ser escalable, lo que significa que puede manejar grandes volúmenes de datos y altas cargas de trabajo. Además, se ha optimizado para un rendimiento eficiente, lo que lo hace adecuado para aplicaciones con requisitos de respuesta rápida.\nSoporte multiplataforma: MySQL es compatible con varias plataformas y sistemas operativos, lo que brinda flexibilidad al desarrollar aplicaciones. Se puede utilizar en sistemas Windows, Linux, macOS y otros.\nSeguridad: MySQL ofrece opciones de seguridad robustas, como la autenticación de usuarios, el cifrado de datos y los permisos de acceso granulares. Esto ayuda a proteger la integridad y la confidencialidad de los datos almacenados en la base de datos.\nMySQL se utiliza en una amplia variedad de aplicaciones, desde sitios web pequeños hasta grandes sistemas empresariales. Es compatible con muchos lenguajes de programación y frameworks, lo que facilita su integración en diferentes entornos de desarrollo.\nAdemás de la versión de código abierto, MySQL también tiene una versión comercial llamada \u0026ldquo;MySQL Enterprise Edition\u0026rdquo; que ofrece características adicionales y soporte extendido.\nEn resumen, MySQL es un sistema de gestión de bases de datos relacional popular y confiable que permite almacenar, administrar y consultar datos de manera eficiente en diversas aplicaciones y entornos.\nDiferencias entre MySQL y SQL # Existe una confusión común entre SQL y MySQL debido a la similitud en los nombres. A continuación, se presentan las diferencias clave entre SQL y MySQL:\nSQL (Structured Query Language): # SQL es un lenguaje de programación utilizado para administrar y manipular bases de datos relacionales. SQL es un estándar que define la sintaxis y las operaciones básicas que se pueden utilizar en cualquier sistema de gestión de bases de datos relacional (RDBMS) compatible. SQL se utiliza para crear, modificar y consultar datos en una base de datos, y puede ejecutarse en varios RDBMS, como MySQL, PostgreSQL, Oracle, SQL Server, SQLite, entre otros. No es un sistema de gestión de bases de datos en sí, sino un lenguaje que se utiliza para interactuar con ellos. MySQL: # MySQL es un sistema de gestión de bases de datos relacional (RDBMS) específico, desarrollado originalmente por MySQL AB y actualmente propiedad de Oracle Corporation. MySQL implementa el lenguaje SQL y proporciona un conjunto de funcionalidades y características específicas en su implementación. MySQL es uno de los RDBMS más populares y ampliamente utilizados en el mundo, conocido por su rendimiento, escalabilidad y facilidad de uso. Además del lenguaje SQL estándar, MySQL también admite características específicas, como almacenamiento de procedimientos almacenados, disparadores (triggers), vistas, funciones personalizadas y replicación, entre otros. En resumen, SQL es el lenguaje de programación utilizado para administrar y manipular bases de datos relacionales, mientras que MySQL es un sistema de gestión de bases de datos relacional específico que implementa SQL y proporciona su propia implementación y características adicionales. MySQL es uno de los RDBMS más populares y ampliamente utilizados que utiliza el lenguaje SQL como su lenguaje de consulta.\nCurso de SQL # Del siguiente video, solo mira desde el minuto 1:27 hasta el minuto 20:23.\n","date":"7 julio 2023","permalink":"/platform/mysql/intro/","section":"Mysqls","summary":"¿Qué es el lenguaje SQL?","title":"Introducción a MySQL y al lenguaje SQL"},{"content":"","date":"7 julio 2023","permalink":"/platform/mysql/","section":"Mysqls","summary":"","title":"Mysqls"},{"content":"Sintaxis PHP # Reforcemos la sintaxis:\nEtiquetas de apertura y cierre: Para iniciar el código PHP, se utiliza la etiqueta \u0026lt;?php y para cerrarlo se utiliza la etiqueta ?\u0026gt;. Dentro de estas etiquetas se escribe el código PHP. \u0026lt;?php // Código PHP aquí ?\u0026gt; Nota: # En PHP 7 se eliminaron otros estilos de apertura y cierre del código PHP: \u0026lt;% y %\u0026gt;, así como\n\u0026lt;script language=\u0026#34;php\u0026#34;\u0026gt; // eliminado en PHP 7 Comentarios: Puedes agregar comentarios en tu código para hacerlo más legible. Los comentarios en PHP se pueden hacer de dos formas: de una sola línea utilizando // o en varias líneas usando /* */. // Esto es un comentario de una sola línea /* Esto es un comentario de múltiples líneas */ Variables: En PHP, las variables se declaran utilizando el símbolo de $ seguido del nombre de la variable. No es necesario declarar el tipo de dato. $nombre = \u0026#34;Juan\u0026#34;; $edad = 25; Impresión de texto: Puedes imprimir texto en pantalla utilizando la función echo o print. Ambas funciones se utilizan de manera similar. echo \u0026#34;Hola, mundo!\u0026#34;; print \u0026#34;Hola, mundo!\u0026#34;; Concatenación de cadenas: Para concatenar cadenas de texto, se utiliza el operador .. $nombre = \u0026#34;Juan\u0026#34;; $apellido = \u0026#34;Pérez\u0026#34;; $nombreCompleto = $nombre . \u0026#34; \u0026#34; . $apellido; echo $nombreCompleto; // Imprime \u0026#34;Juan Pérez\u0026#34; Estos son solo algunos ejemplos de la sintaxis básica de PHP. El lenguaje ofrece muchas más características, como arrays, bucles más avanzados, manejo de excepciones, clases y objetos, entre otros. Puedes consultar la documentación oficial de PHP para obtener más información sobre la sintaxis y las características del lenguaje.\nVariables y tipos de datos # En PHP, las variables se utilizan para almacenar y manipular datos. Aquí tienes ejemplos de cómo declarar variables y los diferentes tipos de operadores disponibles:\nVariables # En PHP, las variables se declaran utilizando el símbolo de $ seguido del nombre de la variable. No es necesario especificar el tipo de dato al declarar una variable, ya que PHP es un lenguaje de programación con variables de tipado dinámico.\n$nombre = \u0026#34;Juan\u0026#34;; // Variable de tipo string $edad = 25; // Variable de tipo entero $precio = 10.5; // Variable de tipo float $esEstudiante = true; // Variable de tipo boolean Matrices, tablas o arrays # Es un tipo de datos en el que, en lugar de tener un dato, podemos almacenar un conjunto de ellos, a los que accedemos a través de índices. Cada una de las casillas de un array o los datos de nuestra matriz a su vez almancenan informaciones numéricas y/o alfanuméricas, pudiendo mezclar tipos de variables de manera arbitraria entre sus distintas casillas. Te muestro algunos ejemplos:\n$sentido[1]=\u0026#34;ver\u0026#34;; $sentido[2]=\u0026#34;tocar\u0026#34;; $sentido[3]=\u0026#34;oir\u0026#34;; $sentido[4]=\u0026#34;gusto\u0026#34;; $sentido[5]=\u0026#34;oler\u0026#34;; Más adelante hablaremos más profundamente acerca de los arrays en PHP.\nObjetos # Se trata de conjuntos de variables y funciones asociadas. Presentan una complejidad mayor que las variables vistas hasta ahora pero su utilidad es más que interesante. Entraremos con detalle en los objetos más adelante, ya que su complejidad hace difícil explicarlas ahora.\nPHP tiene tipado dinámico # A diferencia de otros lenguajes, PHP posee una gran flexibilidad a la hora de operar con variables. En efecto, cuando definimos una variable asignándole un valor, el ordenador le atribuye un tipo. Si por ejemplo definimos una variable entre comillas, la variable será considerada de tipo cadena:\n$variable=\u0026#34;5\u0026#34;; //esto es una cadena Sin embargo, si pedimos en nuestro script realizar una operación matemática con esta variable, no obtendremos un mensaje de error sino que la variable cadena será asimilada a numérica (PHP hará todo lo posible por interpretar nuestra operación, aunque técnicamente no tenga mucho sentido hacer determinadas operaciones):\n\u0026lt;? $cadena=\u0026#34;5\u0026#34;; //esto es una cadena $entero=3; //esto es un entero echo $cadena+$entero ?\u0026gt; Este script dará como resultado 8. La variable cadena ha sido asimilada en entero (aunque su tipo sigue siendo cadena) para poder realizar la operación matemática. Del mismo modo, podemos operar entre variables tipo entero y real. No debemos preocuparnos de nada, PHP se encarga durante la ejecución de interpretar el tipo de variable necesario para el buen funcionamiento del programa.\nNota: Los lenguajes como PHP que permiten mayor flexibilidad en los tipos de las variables se dicen que tienen tipado dinámico. En ellos una variable puede tener distintos tipos a lo largo de su vida, es decir, a medida que el programa se ejecuta una variable podrá cambiar de tipo. Generalmente durante el procesamiento del programa se va infiriendo los tipos de las variables, en tiempo de ejecución, según el tipo de datos del valor que se le asigna o las operaciones que se realizan sobre ellas. Otra manera de referirse a este tipo de lenguajes de programación es \u0026ldquo;débilmente tipados\u0026rdquo;, aunque esta segunda denominación es menos correcta, porque puede inducir a una comprensión errónea, ya que en la realidad las variables siempre tienen tipos, aunque estos puedan variar con el tiempo. Operadores # Operadores aritméticos: PHP proporciona operadores aritméticos para realizar operaciones matemáticas básicas.\n$a = 10; $b = 5; $suma = $a + $b; // Suma: 15 $resta = $a - $b; // Resta: 5 $producto = $a * $b; // Multiplicación: 50 $division = $a / $b; // División: 2 $modulo = $a % $b; // Módulo: 0 (resto de la división) $exponente = $a ** $b; // Exponente: 100000 Operadores de asignación: Los operadores de asignación se utilizan para asignar valores a variables.\n$a = 10; $b = 5; $c = $a; // Asignación: $c tiene el valor de $a (10) $a += $b; // Suma y asignación: $a se incrementa en $b (15) $a -= $b; // Resta y asignación: $a se decrementa en $b (10) $a *= $b; // Multiplicación y asignación: $a se multiplica por $b (50) $a /= $b; // División y asignación: $a se divide por $b (2) $a %= $b; // Módulo y asignación: $a se asigna al resto de la división por $b (0) Operadores de concatenación: En PHP, el operador de concatenación . se utiliza para unir cadenas de texto.\n$nombre = \u0026#34;Juan\u0026#34;; $apellido = \u0026#34;Pérez\u0026#34;; $nombreCompleto = $nombre . \u0026#34; \u0026#34; . $apellido; // Concatenación de cadenas Operadores de comparación: Los operadores de comparación se utilizan para comparar valores y devuelven un resultado booleano.\n$a = 10; $b = 5; $igual = $a == $b; // Igualdad: false $diferente = $a != $b; // Desigualdad: true $mayor = $a \u0026gt; $b; // Mayor que: true $menor = $a \u0026lt; $b; // Menor que: false $mayorIgual = $a \u0026gt;= $b; // Mayor o igual que: true $menorIgual = $a \u0026lt;= $b; // Menor o igual que: false Variables y operadores PHP # ","date":"7 julio 2023","permalink":"/platform/php/variables/","section":"Phps","summary":"Sintaxis PHP # Reforcemos la sintaxis:","title":"Variables y operadores en PHP"},{"content":"Entre de los diferentes paquetes de software que proporcionan un entorno de desarrollo, algunos que podrías utilizar son WAMP Y XAMPP. Veamos algunas definiciones de estos.\nWAMP # WAMP es un acrónimo que se refiere a un entorno de desarrollo web que combina varios componentes: Windows, Apache, MySQL y PHP. Estos componentes se utilizan para crear y ejecutar aplicaciones web en un entorno local en sistemas operativos Windows.\nAquí hay más información sobre cada uno de los componentes de WAMP:\nWindows: Se refiere al sistema operativo Windows en el que se instalará y ejecutará el entorno de desarrollo web.\nApache: Es un servidor web de código abierto ampliamente utilizado. Proporciona un entorno para alojar y servir aplicaciones web. Con Apache, puedes configurar dominios virtuales, manejar la seguridad, habilitar SSL y mucho más.\nMySQL: Es un sistema de gestión de bases de datos relacional. MySQL se utiliza para almacenar y administrar los datos de tus aplicaciones web. Puedes crear bases de datos, tablas, consultas y realizar operaciones CRUD (crear, leer, actualizar, eliminar) con MySQL.\nPHP: Es un lenguaje de programación del lado del servidor que se utiliza ampliamente en el desarrollo web. PHP se ejecuta en el servidor y genera contenido dinámico que se envía al navegador web. Puedes escribir código PHP para interactuar con la base de datos, manejar formularios, procesar datos y más.\nEs importante tener en cuenta que WAMP es específico para sistemas operativos Windows. Si estás utilizando otros sistemas operativos como Linux o macOS, hay alternativas como LAMP (Linux, Apache, MySQL, PHP) o MAMP (macOS, Apache, MySQL, PHP) que proporcionan un entorno de desarrollo similar adaptado a esas plataformas.\nXAMPP # La estructura \u0026ldquo;XAMPP\u0026rdquo; se refiere a un paquete de software que incluye varios componentes necesarios para crear y gestionar un entorno de desarrollo web. \u0026ldquo;XAMPP\u0026rdquo; es un acrónimo que representa los siguientes componentes:\nX: se refiere al sistema operativo en el que se instalará XAMPP. Puede ser Windows, Linux, macOS o Solaris.\nA: representa el servidor web Apache. Apache es uno de los servidores web más populares y ampliamente utilizados en el mundo. Proporciona la infraestructura necesaria para alojar y servir sitios web.\nM: representa el sistema de gestión de bases de datos MySQL. MySQL es un sistema de gestión de bases de datos relacional ampliamente utilizado. Proporciona un entorno para almacenar, organizar y administrar datos utilizados por aplicaciones web.\nP: representa el lenguaje de programación PHP. PHP es un lenguaje de programación de código abierto especialmente diseñado para el desarrollo web. Se utiliza principalmente para crear aplicaciones web dinámicas e interactuar con bases de datos.\nP: Hace referencia a Perl, otro lenguaje de programación de alto nivel utilizado en el desarrollo web y otros ámbitos. Perl es conocido por su capacidad para procesar texto y su flexibilidad en la manipulación de datos.\nXAMPP proporciona una forma conveniente de instalar y configurar estos componentes juntos, lo que permite a los desarrolladores crear y probar sus aplicaciones web en un entorno local antes de implementarlas en un servidor de producción en vivo.\nInstalar XAMPP # Para instalar XAMPP en tu sistema, sigue estos pasos:\nDescarga el paquete de instalación: Visita el sitio web oficial de XAMPP (https://www.apachefriends.org/es/index.html) y descarga el paquete de instalación correspondiente a tu sistema operativo (Windows, Linux, macOS o Solaris).\nInicia el instalador: Una vez que la descarga haya finalizado, ejecuta el archivo de instalación. Si estás en Windows, simplemente haz doble clic en el archivo ejecutable. En Linux y macOS, es posible que necesites abrir una terminal, navegar hasta la ubicación del archivo y ejecutarlo desde allí.\nSelecciona los componentes: Durante el proceso de instalación, se te presentará una lista de componentes disponibles para instalar. Por lo general, Apache, MySQL, PHP y phpMyAdmin estarán seleccionados de forma predeterminada. Puedes mantener estas selecciones o desmarcar los componentes que no necesites. También puedes seleccionar otros complementos opcionales si lo deseas.\nSelecciona la ubicación de instalación: El instalador te pedirá que elijas una ubicación para instalar XAMPP. Puedes optar por utilizar la ubicación predeterminada o seleccionar una ruta personalizada.\nCompleta la instalación: Una vez que hayas seleccionado los componentes y la ubicación de instalación, simplemente sigue las instrucciones en pantalla para completar la instalación. El instalador copiará los archivos necesarios y configurará el entorno de XAMPP.\nInicia XAMPP: Después de completar la instalación, podrás iniciar XAMPP. En Windows, puedes encontrar un acceso directo en el escritorio o en el menú de inicio. En Linux y macOS, puedes abrir una terminal y ejecutar el comando correspondiente para iniciar XAMPP.\nVerifica la instalación: Una vez que XAMPP esté en funcionamiento, puedes abrir un navegador web y visitar \u0026ldquo;http://localhost\u0026rdquo; para ver la página de inicio de XAMPP. Desde allí, podrás acceder a las diferentes herramientas y servicios, como phpMyAdmin para administrar tu base de datos MySQL.\n¡Eso es todo! Ahora tienes XAMPP instalado en tu sistema y puedes comenzar a desarrollar y probar aplicaciones web localmente.\nConfiguraciones Locales y en la Nube # Las configuraciones locales y en la nube se refieren a dos formas diferentes de alojar y ejecutar aplicaciones web.\nConfiguración Local: En una configuración local, instalas y ejecutas todos los componentes necesarios, como el servidor web, la base de datos y el lenguaje de programación, en tu propio equipo o en un servidor local dentro de tu red. XAMPP es un ejemplo de una configuración local, donde puedes instalar y configurar Apache, MySQL y PHP en tu máquina para desarrollar y probar aplicaciones web en un entorno controlado. La configuración local es útil para el desarrollo y pruebas, ya que te permite trabajar sin una conexión a Internet y tener un control total sobre la configuración del entorno.\nConfiguración en la Nube: En una configuración en la nube, utilizas servicios y recursos proporcionados por proveedores de servicios en la nube, como Amazon Web Services (AWS), Microsoft Azure o Google Cloud Platform (GCP), para alojar y ejecutar tus aplicaciones web. En lugar de configurar y mantener tus propios servidores, puedes aprovechar la infraestructura en la nube para desplegar y escalar tus aplicaciones de manera más fácil y flexible. En una configuración en la nube, no es necesario preocuparse por la gestión de servidores físicos, ya que el proveedor de la nube se encarga de eso. También obtienes beneficios como la alta disponibilidad, la escalabilidad y la facilidad de implementación.\nAmbas configuraciones tienen sus ventajas y se utilizan en diferentes escenarios:\nLa configuración local es útil para el desarrollo y pruebas en entornos controlados, donde puedes realizar cambios y experimentar sin afectar una aplicación en producción. También es útil cuando no tienes acceso a Internet o cuando necesitas trabajar con datos confidenciales que no deben estar en la nube.\nLa configuración en la nube es adecuada para implementar aplicaciones en producción a gran escala, ya que te brinda flexibilidad, escalabilidad y confiabilidad. Además, los servicios en la nube ofrecen una amplia gama de herramientas y servicios adicionales que pueden facilitar el desarrollo, la implementación y la administración de tus aplicaciones.\nLa elección entre una configuración local y en la nube depende de tus necesidades específicas, los recursos disponibles y el contexto del proyecto. A menudo, los desarrolladores utilizan una combinación de ambas configuraciones, desarrollando y probando localmente y luego desplegando la aplicación en la nube para su producción.\nVideos de ayuda: # Instalar XAMPP # # Monta tu servidor web con Apache, PHP y MySQL # ¿Qué es Apache? # ","date":"7 julio 2023","permalink":"/platform/backend/xampp-wamp/","section":"Backends","summary":"Entre de los diferentes paquetes de software que proporcionan un entorno de desarrollo, algunos que podrías utilizar son WAMP Y XAMPP.","title":"XAMPP Y WAMP"},{"content":"PHP es el lenguaje de lado servidor más extendido en la web. Nacido en 1994, se trata de un lenguaje de creación relativamente reciente, aunque con la rapidez con la que evoluciona Internet parezca que ha existido toda la vida. Es un lenguaje que ha tenido una gran aceptación en la comunidad de desarrolladores, debido a la potencia y simplicidad que lo caracterizan, así como al soporte generalizado en la mayoría de los servidores de hosting, hasta los más simples y económicos.\nLa facilidad de PHP se basa en que permite embeber pequeños fragmentos de código dentro de lo que sería una página común creada con HTML. Esos scripts PHP nos permiten realizar determinadas acciones de una forma fácil y eficaz, pudiendo realizar todo tipo de tareas, de las más simples a las más complejas. Esta combinación de PHP dentro del marco de un documento HTML es lo que permite a desarrolladores sin prácticamente nada de experiencia crear comportamientos atractivos de una manera sencilla, una de las claves del éxito del lenguaje. En resumen, con PHP escribimos scripts dentro del código HTML. Como ya estamos familiarizados con HTML, empezar a desarrollar con PHP es prácticamente inmediato. Por otra parte, y es aquí donde reside su mayor interés, PHP ofrece un sinfín de funciones para la explotación de todo tipo de recursos, entre los que destacan las bases de datos, a las que podremos acceder de una manera llana, sin complicaciones.\nPHP es lo que se denomina una tecnología del lado del servidor, que ahora se suele englobar dentro del término \u0026ldquo;Backend\u0026rdquo;. Existen diversos competidores de PHP en el mundo Backend y todos tienen sus cosas buenas y malas. Resultaría muy arriesgado decir que una tecnología o un lenguaje sea mejor o peor que otro, pero sí podemos decir que PHP es el lenguaje preferido por el mayor número de programadores dedicados en el área Backend. Como competidores de PHP podríamos mencionar ASP.NET (o ASP tradicional), NodeJS, Ruby, Java, Python y un largo etc. Sin embargo, en nuestra opinión, si lo que quieres es desarrollar páginas web, el más sencillo y directo con el que podrías empezar es PHP.\nAspectos fundamentales # PHP, aunque multiplataforma, fue concebido inicialmente para entornos Linux y es en este sistema operativo donde se pueden aprovechar mejor sus prestaciones. La mayoría de los servidores de Internet y los hosting soportan PHP sobre sistemas operativos Linux, aunque sin embargo, puedes ejecutar PHP en cualquier otro sistema, obteniendo el mismo soporte y los resultados idénticos. Esto permite que puedas desarrollar PHP en cualquier ordenador, independientemente de si usas Windows, Linux o Mac.\nEl estilo de programación con PHP es totalmente libre. Puedes usar tanto programación estructurada (funciones) como Programación Orientada a Objetos (clases y objetos). Incluso algunas características de la programación funcional están siendo incorporadas actualmente. Es por ello que cualquier tipo de programador puede sentirse cómodo con PHP.\nPHP presenta una filosofía de código abierto. Existen multitud de herramientas, librerías, frameworks gratuitos que llevan PHP a un nuevo nivel. Además el propio núcleo del lenguaje tiene una de las más nutridas cantidades de funciones para hacer todo tipo de operaciones. No necesitas invertir nada, de dinero, para disponer de un lenguaje poderoso y los mejores complementos para acelerar tu trabajo.\nExtensiones # En PHP, las extensiones son módulos adicionales que amplían la funcionalidad del lenguaje y proporcionan acceso a características específicas del sistema o servicios externos. Estas extensiones se pueden cargar dinámicamente en tiempo de ejecución para habilitar funcionalidades adicionales en tus aplicaciones PHP.\nPHP viene con un conjunto de extensiones incorporadas que proporcionan funcionalidades básicas, como manejo de cadenas, manipulación de archivos, conexión a bases de datos, entre otras. Sin embargo, también existen muchas extensiones adicionales que se pueden instalar y utilizar según tus necesidades específicas.\nAquí hay algunos ejemplos de extensiones populares en PHP:\nMySQLi: Esta extensión proporciona una interfaz mejorada para interactuar con bases de datos MySQL. Es una mejora del antiguo conjunto de funciones MySQL y ofrece características adicionales, como soporte para transacciones y consultas preparadas.\nPDO: La extensión PDO (PHP Data Objects) ofrece una capa de abstracción de base de datos en PHP. Te permite acceder a diferentes bases de datos mediante una interfaz unificada, lo que facilita la migración entre diferentes sistemas de gestión de bases de datos.\nGD: GD (Graphic Library) es una extensión que permite manipular imágenes en PHP. Proporciona funciones para crear, manipular y renderizar imágenes, como redimensionar, recortar, agregar texto y aplicar efectos.\ncURL: La extensión cURL permite realizar solicitudes HTTP y acceder a recursos remotos. Es útil para interactuar con servicios web, realizar llamadas a APIs y transferir datos a través de protocolos como HTTP, FTP, SMTP, entre otros.\nJSON: La extensión JSON proporciona funciones para trabajar con datos en formato JSON. Permite codificar y decodificar datos en JSON, lo que es útil para la comunicación con servicios web que utilizan este formato.\nEstos son solo algunos ejemplos, y existen muchas más extensiones disponibles para cubrir una amplia gama de necesidades, como encriptación, generación de PDF, manejo de XML, integración con redes sociales, entre otros.\nPuedes consultar la documentación oficial de PHP para obtener más información sobre las extensiones disponibles y cómo instalarlas y utilizarlas en tus proyectos.\nSintaxis PHP # Repasemos un poco la sintaxis. Es bastante sencilla y similar a otros lenguajes de programación. Aquí tienes algunos elementos básicos de la sintaxis de PHP:\nEtiquetas de apertura y cierre: Para iniciar el código PHP, se utiliza la etiqueta \u0026lt;?php y para cerrarlo se utiliza la etiqueta ?\u0026gt;. Dentro de estas etiquetas se escribe el código PHP. \u0026lt;?php // Código PHP aquí ?\u0026gt; Comentarios: Puedes agregar comentarios en tu código para hacerlo más legible. Los comentarios en PHP se pueden hacer de dos formas: de una sola línea utilizando // o en varias líneas usando /* */. // Esto es un comentario de una sola línea /* Esto es un comentario de múltiples líneas */ Introducción a PHP # Sintaxis PHP # Página de la que trajimos parte del contenido: https://desarrolloweb.com/articulos/303.php ","date":"7 julio 2023","permalink":"/platform/php/intro/","section":"Phps","summary":"PHP es el lenguaje de lado servidor más extendido en la web.","title":"Introducción a PHP"},{"content":"¿Qué es el Backend? # El backend, también conocido como el lado del servidor, se refiere a la parte de un sistema o aplicación informática que se encarga de procesar los datos, realizar cálculos, interactuar con la base de datos y generar las respuestas que son enviadas al cliente o a la interfaz de usuario. Es la parte invisible para los usuarios finales, pero es fundamental para el funcionamiento de cualquier aplicación.\nEl backend se encarga de gestionar la lógica de negocio, la seguridad, la autenticación, la autorización, la gestión de datos y otros aspectos fundamentales de una aplicación. Puede estar compuesto por diferentes componentes, como servidores, bases de datos, APIs (Application Programming Interfaces), frameworks de desarrollo, sistemas de cache, entre otros.\nLa importancia del backend radica en que es responsable de toda la funcionalidad y la lógica detrás de una aplicación. Es el encargado de procesar las solicitudes del usuario, realizar las operaciones necesarias y enviar las respuestas adecuadas. Además, se encarga de gestionar y almacenar los datos de manera segura.\nUn backend sólido y bien diseñado es crucial para garantizar un rendimiento óptimo, una seguridad adecuada, una escalabilidad eficiente y una buena experiencia de usuario. Si el backend no funciona correctamente, puede afectar negativamente la funcionalidad de la aplicación, la seguridad de los datos y la experiencia del usuario.\nEn resumen, el backend es esencial para el funcionamiento de cualquier aplicación y su importancia radica en su capacidad para gestionar la lógica de negocio, los datos y otros aspectos fundamentales, lo que garantiza una aplicación eficiente, segura y con una buena experiencia de usuario.\nRoles de un desarrollador backend # En el desarrollo de backend, existen varios roles o especialidades que desempeñan diferentes funciones. A continuación, te mencionaré algunos de los roles comunes en el ámbito del backend:\nDesarrollador backend: Es el encargado de escribir el código y construir la lógica de la aplicación en el lado del servidor. Este rol implica conocimientos en diferentes lenguajes de programación como Python, Java, PHP, Ruby, entre otros, así como también el manejo de frameworks y tecnologías específicas.\nArquitecto de software: Este rol se enfoca en el diseño y la planificación de la estructura y la arquitectura del backend de una aplicación. El arquitecto de software se encarga de definir las tecnologías, los componentes, los patrones de diseño y las mejores prácticas a seguir para garantizar un sistema eficiente, escalable y fácil de mantener.\nAdministrador de bases de datos: Este rol se ocupa de la gestión y el mantenimiento de las bases de datos utilizadas en el backend. El administrador de bases de datos se encarga de diseñar el esquema de la base de datos, optimizar las consultas, gestionar la seguridad de los datos y asegurarse de que la base de datos funcione correctamente.\nIngeniero de seguridad: Este rol se enfoca en garantizar la seguridad de la aplicación y proteger los datos sensibles. El ingeniero de seguridad se encarga de identificar y abordar vulnerabilidades, implementar medidas de seguridad, como autenticación y cifrado de datos, y garantizar el cumplimiento de estándares y regulaciones de seguridad.\nIngeniero de rendimiento: Este rol se ocupa de optimizar el rendimiento del backend de la aplicación. El ingeniero de rendimiento identifica cuellos de botella, mejora la eficiencia del código, optimiza las consultas de base de datos y utiliza técnicas de caching para garantizar una respuesta rápida y un rendimiento óptimo.\nEstos son solo algunos de los roles comunes en el desarrollo de backend. Dependiendo del tamaño y la complejidad del proyecto, pueden existir otros roles especializados, como especialistas en integración de sistemas, desarrolladores de APIs, expertos en DevOps, entre otros.\n¿BACKEND vs FRONTEND? # Ser programador BACKEND # Los roles en BACKEND # ","date":"7 julio 2023","permalink":"/platform/backend/intro/","section":"Backends","summary":"¿Qué es el Backend?","title":"¿Qué es el backend y cuál es su importancia?"},{"content":"Hoy abordaremos Algoritmos en JAVA. Continuaremos trabajando en el curso de UDEMY. Recuerda enfocarte en los temas que te indicamos y no en todo el curso, ya que el mismo es muy extenso y no queremos que te satures. Sin embargo, si consideras que comprendes el tema y deseas avanzar, puedes hacerlo.\nAlgoritmos en JAVA # Comprende toda la sección 10. Comprende los videos/lecturas del 122 al 150.\nSection 10- Algoritmos con Java\n","date":"5 junio 2023","permalink":"/platform/java/logica/algoritmos/","section":"Javae","summary":"Hoy abordaremos Algoritmos en JAVA.","title":"Java"},{"content":"","date":"5 junio 2023","permalink":"/platform/java/","section":"Javae","summary":"","title":"Javae"},{"content":"Inducción a la Programación # Instrucciones para postular al programa de Desarrollador Java en Funval 😃 Bienvenido a Funval, si estás en esta página es porque deseas postular al programa de Desarrollador Java que ofrece la Fundacion FUNVAL. Para lograr esto te explicaré brevemente como funciona el proceso de inducción y el material que usarás.\nAcerca del proceso # Durante el proceso de inducción, estarás estudiando los principios básicos de la programación.\nEste proceso está estructurado para funcionar de la siguiente forma:\n3 días de aprendizaje 3 horas de estudio en cada día aprox. (9 horas en total) un día de evaluación Acerca del material # Durante cada día de estudio, tendrás material para que puedas aprender las bases de estos lenguajes, si bien es cierto que tendrás 3 horas cada día, puedes dedicar mas tiempo en caso consideres necesario profundizar o practicar sobre un tema en particular.\nLa progrmación en la actualidad cuenta con una comunidad muy grande, quienes desean que más personas aprendan sobre este mundo, sin embargo hay tanta información que es dificil en ocasiones indagar por nuestra propia cuenta, aquí te daremos el material necesario para que aprendas las bases en el tiempo previsto, el cual ha sido previamente revisado y con el que sabemos, podrás aprender estas tecnologías de manera práctica y sencilla.\nAsimismo te invitamos a tomar nota de lo que vayas aprendiendo para que puedas repasarlo luego de las clase 😄\nImportancia de los temas que aprenderás Si bien es cierto que estos temas te ayudarán a prepararte para el exámen de admisión, esperamos que puedas analizarlo y prácticar de la mano con los tutoriales que hemos añadido. Al ingresar al programa, esta información será de gran ayuda para empezar tu camino como programador, recuerda que esperamos que llegues a entender de forma básica los temas que aprenderás y al iniciar el curso, podremos profundizar en ellos. También, tendremos en cuenta que leiste estos temas y partiremos de ahí para avanzar en el curso. Curso de UDEMY # Para esta preparación, estaremos tomando como base el curso de Fundamentos de Programación, Algoritmos en java y JavaScript de UDEMY. Una vez hayas hecho click en el enlace anterior, te aparecerá una página donde te permitirá añadir este curso a tu cuenta de UDEMY, si no tienes una cuenta, puedes crearla de forma gratuita. Una vez añadiste el curso a tu cuenta, ya puedes acceder a todo el contenido y comenzar a estudiarlo.\nTemas por día # Día 1 # Seccion 1 - Bienvenido al curso\nSeccion 2 - Conceptos Básicos de Fundamentos de Programación\nSección 3 - Fundamentos de Algoritmia (En esta secion, avanza lo que el tiempo te permita, ya que mañana puedes seguir estudiando esta sección)\nDía 2 # Sección 3 - Fundamentos de Algoritmia\nSección 4 - Operadores y estructuras de Control\nDía 3 # Sección 5 - Estructuras Secuencials Acerca de la evaluación # Luego de aprender lo necesario, necesitamos poner a prueba tu conocimiento para evaluar que cuentas con el conocimiento minimo antes de empezar el curso, por lo que la evaluación de Programación tendrá un puntaje sobre 100 pts. Es necesario que logres un mínimo de 75pts sobre promedio final para lograr ingresar al programa.\nDesde Funval te deseamos los mejores éxitos en este proceso, si tienes dudas sobre alguno de los puntos mencionados o del material que encontrarás, puedes contactar a tu reclutador.\n","date":"24 mayo 2023","permalink":"/platform/java/temario/","section":"Javae","summary":"Inducción a la Programación # Instrucciones para postular al programa de Desarrollador Java en Funval 😃 Bienvenido a Funval, si estás en esta página es porque deseas postular al programa de Desarrollador Java que ofrece la Fundacion FUNVAL.","title":"Temario"},{"content":"Objects # Atajo para valores de propiedad # En el código real, a menudo usamos variables existentes como valores de los nombres de propiedades.\nPor ejemplo:\nfunction makeUser(name, age) { return { name: name, age: age, // ...otras propiedades }; } let user = makeUser(\u0026#34;John\u0026#34;, 30); alert(user.name); // John En el ejemplo anterior las propiedades tienen los mismos nombres que las variables. El uso de variables para la creación de propiedades es tán común que existe un atajo para valores de propiedad especial para hacerla más corta.\nEn lugar de name:name, simplemente podemos escribir name, tal cual:\nfunction makeUser(name, age) { return { name, // igual que name:name age, // igual que age:age // ... }; } Podemos usar ambos tipos de notación en un mismo objeto, la normal y el atajo:\nlet user = { name, // igual que name:name age: 30 }; Métodos del objeto # Los objetos son creados usualmente para representar entidades del mundo real, como usuarios, órdenes, etc.:\nlet user = { name: \u0026#34;John\u0026#34;, age: 30 }; Y en el mundo real un usuario puede actuar: seleccionar algo del carrito de compras, hacer login, logout, etc.\nLas acciones son representadas en JavaScript por funciones en las propiedades.\nEjemplos de Métodos # Para empezar, enseñemos al usuario user a decir hola:\nlet user = { name: \u0026#34;John\u0026#34;, age: 30 }; user.sayHi = function() { alert(\u0026#34;¡Hola!\u0026#34;); }; user.sayHi(); // ¡Hola! Aquí simplemente usamos una expresión de función para crear la función y asignarla a la propiedad user.sayHi del objeto.\nEntonces la llamamos con user.sayHi(). ¡El usuario ahora puede hablar!\nUna función que es la propiedad de un objeto es denominada su método.\nAsí, aquí tenemos un método sayHi del objeto user.\nPor supuesto, podríamos usar una función pre-declarada como un método, parecido a esto:\n1 2 3 4 5 6 7 8 9 10 let user = { // ... }; // primero, declara function sayHi() { alert(\u0026#34;¡Hola!\u0026#34;); }; // entonces la agrega como un método user.sayHi = sayHi; user.sayHi(); // ¡Hola! Programación orientada a objetos Cuando escribimos nuestro código usando objetos que representan entidades, eso es llamado Programación Orientada a Objetos, abreviado: \u0026ldquo;POO\u0026rdquo;.\nPOO (OOP sus siglas en inglés) es una cosa grande, un ciencia interesante en sí misma. ¿Cómo elegir las entidades correctas? ¿Cómo organizar la interacción entre ellas? Eso es arquitectura, y hay muy buenos libros del tópico como \u0026ldquo;Patrones de diseño: Elementos de software orientado a objetos reutilizable\u0026rdquo; de E. Gamma, R. Helm, R. Johnson, J. Vissides o \u0026ldquo;Análisis y Diseño Orientado a Objetos\u0026rdquo; de G. Booch, y otros. Más sobre Métodos # Profundizando en Arrays # Sabemos que asi como los objetos, los arrays tienen su complejidad, no solo por la cantidad de datos que pueden organizar, sino tambien por los métodos que nos permiten manipularlos. Hoy repasaremos todo sobre este tipo de dato. Ten en cuenta tomar nota de los métodos que mas te interesen, ya que no es necesario memorizarlos todos, sino saber que existen y como buscarlos cuando los necesitemos.\n","date":"22 mayo 2023","permalink":"/platform/jsvanilla/obj-methods/","section":"Jsvanillas","summary":"Objects # Atajo para valores de propiedad # En el código real, a menudo usamos variables existentes como valores de los nombres de propiedades.","title":"Object Methods - Métodos de Objeto"},{"content":"En comun usar el objeto Array en Javascript para almacenar datos, pero tambien podemos usarlo para manipular datos. En este video veremos algunos metodos que nos permiten manipular los datos de un array.\nRecuerda hacer pausas cuando consideres necesario y prueba el codigo que se presente, igualmente anota tus preguntas para que las hagas durante clase.\n","date":"22 mayo 2023","permalink":"/platform/jsvanilla/arr-methods/","section":"Jsvanillas","summary":"En comun usar el objeto Array en Javascript para almacenar datos, pero tambien podemos usarlo para manipular datos.","title":"Array Methods - Métodos de Array"},{"content":"Hoy aprenderemos sobre las funciones flecha. Este concepto no es tan sencillo de aprender, sin embargo, su sintáxis trae consigo una serie de ventajas que nos permiten escribir código más limpio y legible. Aunque al principio te pueda costar un poco entenderlo, te aseguro que con la práctica te acostumbrarás a usarlo y te será de gran utilidad.\nSigue los videos a continuación y recuerda practicar el código que ves en los videos, la mejor forma de aprender es mediante la práctica. Toma nota de las dudas que tengas para que las resuelvas durante la clase.\n30 dias de JavaScript - Funciones Flecha En freeCodeCamp tambien hay un pequeño apartado sin embargo no es tan amplio en este tema, de igual forma te dejo el enlace aqui (de 2 a 4 lecciones empezando desde la te dirige el enlace):\nfreeCodeCamp - Arrow Functions ","date":"21 mayo 2023","permalink":"/platform/jsvanilla/arrow/","section":"Jsvanillas","summary":"Hoy aprenderemos sobre las funciones flecha.","title":"Arrow Functions"},{"content":"Algoritmos # Cualquier problema de computación puede resolverse ejecutando una serie de acciones en un orden específi co. Un procedimiento para resolver un problema en términos de: las acciones a ejecutar y el orden en el que se ejecutan estas acciones se conoce como un algoritmo. El siguiente ejemplo demuestra que es importante especifi car de manera correcta el orden en el que se ejecutan las acciones.\nConsidere el “algoritmo para levantarse y arreglarse” que sigue un ejecutivo para levantarse de la cama e ir a trabajar: (1) levantarse; (2) quitarse la pijama; (3) bañarse; (4) vestirse; (5) desayunar; (6) transportarse al trabajo. Esta rutina logra que el ejecutivo llegue al trabajo bien preparado para tomar decisiones críticas. Suponga que los mismos pasos se realizan en un orden ligeramente distinto: (1) levantarse; (2) quitarse la pijama; (3) vestirse; (4) bañarse; (5) desayunar; (6) transportarse al trabajo. En este caso nuestro ejecutivo llegará al trabajo todo mojado.\nAl proceso de especifi car el orden en el que se ejecutan las instrucciones (acciones) en un programa, se le llama control del programa. En este capítulo investigaremos el control de los programas mediante el uso de las instrucciones de control de Java.\nSeudocódigo # El seudocódigo es un lenguaje informal que ayuda a los programadores a desarrollar algoritmos sin tener que preocuparse por los estrictos detalles de la sintaxis del lenguaje Java. El seudocódigo que presentaremos es especialmente útil para desarrollar algoritmos que se convertirán en porciones estructuradas de programas en Java. El seudocódigo es similar al lenguaje cotidiano; es conveniente y amigable con el usuario, aunque no es realmente un lenguaje de programación de computadoras.\nEl seudocódigo no se ejecuta en las computadoras. En vez de ello, ayuda al programador a “organizar” un programa antes de que intente escribirlo en un lenguaje de programación como Java. Este capítulo presenta varios ejemplos de cómo utilizar el seudocódigo para desarrollar programas en Java. El estilo de seudocódigo que presentaremos consiste solamente en caracteres, de manera que los programadores pueden escribir el seudocódigo, utilizando cualquier programa editor de texto. Un programa en seudocódigo preparado de manera cuidadosa puede convertirse fácilmente en su correspondiente programa en Java.\nEn muchos casos, esto requiere tan sólo reemplazar las instrucciones en seudocódigo con sus instrucciones equivalentes en Java. Por lo general, el seudocódigo describe sólo las instrucciones que representan las acciones que ocurren después de que un programador convierte un programa de seudocódigo a Java, y el programa se ejecuta en una computadora. Dichas acciones podrían incluir la entrada, salida o un cálculo. Por lo general no incluimos las declaraciones de variables en nuestro seudocódigo, pero algunos programadores optan por listar las variables y mencionar sus propósitos al principio de su seudocódigo.\nDEITEL, PAUL J. Y HARVEY M. DEITE, (2008) Java como programar. Recuperardo el 13 de junio de 2023\nEste es un ejemplo de pseudocódigo en java:\n// Declarar variables Entero numero1 Entero numero2 Entero suma // Obtener el primer número Escribir \u0026#34;Ingrese el primer número:\u0026#34; Leer numero1 // Obtener el segundo número Escribir \u0026#34;Ingrese el segundo número:\u0026#34; Leer numero2 // Calcular la suma suma = numero1 + numero2 // Mostrar el resultado Escribir \u0026#34;La suma es: \u0026#34; + suma Este pseudocódigo describe el proceso paso a paso para realizar la suma de dos números en Java. Ten en cuenta que el pseudocódigo no es un lenguaje de programación real, sino una representación simplificada y no ejecutable del algoritmo. Para implementar este pseudocódigo en un programa Java real, tendrías que convertirlo en código Java válido, utilizando la sintaxis correcta del lenguaje.\n","date":"16 mayo 2023","permalink":"/platform/java/curso/dia6/seudocodigo/","section":"Javae","summary":"Algoritmos # Cualquier problema de computación puede resolverse ejecutando una serie de acciones en un orden específi co.","title":"Algoritmos y seudocodigos"},{"content":"Para el día de hoy, vamos a crear una aplicación del clima donde aprenderás a usar diversos conceptos de JavaScript. Aqui aprenderás a usar el DOM, eventos, funciones, condicionales, entre otros. Ten en cuenta que, aunque esta practica no es calificada, te servirá bastante para que ganes experiencia en el lenguaje de programación y puedas aplicar lo aprendido en futuros proyectos.\n","date":"16 mayo 2023","permalink":"/platform/jsvanilla/app-clima/","section":"Jsvanillas","summary":"Para el día de hoy, vamos a crear una aplicación del clima donde aprenderás a usar diversos conceptos de JavaScript.","title":"App Clima"},{"content":"Historia de Java # La contribución más importante a la fecha, por parte de la revolución del microprocesador, es que hizo posible el desarrollo de las computadoras personales, que ahora suman miles de millones a nivel mundial. Las computadoras personales han tenido un profundo impacto en la vida de las personas, y en la manera en que las empresas realizan y administran su negocio.\nLos microprocesadores están teniendo un profundo impacto en los dispositivos electrónicos inteligentes para uso doméstico. Al reconocer esto, Sun Microsystems patrocinó en 1991 un proyecto interno de investigación denominado Green, el cual desembocó en el desarrollo de un lenguaje basado en C++ al que su creador, James Gosling, llamó Oak debido a un roble que tenía a la vista desde su ventana en las ofi cinas de Sun. Posteriormente se descubrió que ya existía un lenguaje de computadora con el mismo nombre. Cuando un grupo de gente de Sun visitó una cafetería local, sugirieron el nombre Java (una variedad de café) y así se quedó.\nPero el proyecto Green tuvo algunas difi cultades. El mercado para los dispositivos electrónicos inteligentes de uso doméstico no se desarrollaba tan rápido a principios de los noventa como Sun había anticipado. El proyecto corría el riesgo de cancelarse. Pero para su buena fortuna, la popularidad de World Wide Web explotó en 1993 y la gente de Sun se dio cuenta inmediatamente del potencial de Java para agregar contenido dinámico, como interactividad y animaciones, a las páginas Web. Esto trajo nueva vida al proyecto.\nSun anunció formalmente a Java en una importante conferencia que tuvo lugar en mayo de 1995. Java generó la atención de la comunidad de negocios debido al fenomenal interés en World Wide Web. En la actualidad, Java se utiliza para desarrollar aplicaciones empresariales a gran escala, para mejorar la funcionalidad de los servidores Web (las computadoras que proporcionan el contenido que vemos en nuestros exploradores Web), para proporcionar aplicaciones para los dispositivos domésticos (como teléfonos celulares, radiolocalizadores y asistentes digitales personales) y para muchos otros propósitos.\nBibliotecas de clases de Java # Los programas en Java constan de varias piezas llamadas clases. Estas clases incluyen piezas llamadas métodos, los cuales realizan tareas y devuelven información cuando completan esas tareas. Los programadores pueden crear cada una de las piezas que necesitan para formar programas en Java. Sin embargo, la mayoría de los programadores en Java aprovechan las ricas colecciones de clases existentes en las bibliotecas de clases de Java, que también se conocen como APIs (Interfaces de programación de aplicaciones) de Java. Por lo tanto, en realidad existen dos fundamentos para conocer el “mundo” de Java. El primero es el lenguaje Java en sí, de manera que usted pueda programar sus propias clases; el segundo son las clases incluidas en las extensas bibliotecas de clases de Java. A lo largo de este libro hablaremos sobre muchas bibliotecas de clases; que proporcionan principalmente los vendedores de compiladores, pero muchas de ellas las proporcionan vendedores de software independientes (ISVs).\nDEITEL, PAUL J. Y HARVEY M. DEITE, (2008) Java como programar. Recuperardo el 13 de junio de 20232\n","date":"16 mayo 2023","permalink":"/platform/java/curso/dia1/autorjava/","section":"Javae","summary":"Historia de Java # La contribución más importante a la fecha, por parte de la revolución del microprocesador, es que hizo posible el desarrollo de las computadoras personales, que ahora suman miles de millones a nivel mundial.","title":"Autor Java"},{"content":"Clases # Una clase representa al conjunto de objetos que comparten una estructura y un comportamiento comunes. Una clase es una combinación específica de atributos y métodos y puede considerarse un tipo de dato de cualquier tipo no primitivo. Así, una clase es una especie de plantilla o prototipo de objetos: define los atributos que componen ese tipo de objetos y los métodos que pueden emplearse para trabajar con esos objetos. Aunque, por otro lado, una clase también puede estar compuesta por métodos estáticos que no necesitan de objetos (como las clases construidas en los capítulos anteriores que contienen un método estático main). La declaración de una clase sigue la siguiente sintaxis:\n[modificadores] class IdentificadorClase { // Declaraciones de atributos y metodos ... } Convención de los programadores en Java: los identificadores de las clases deberían ser simples, descriptivos y sustantivos y, en el caso de nombres compuestos, con la primera letra de cada uno en mayúsculas. Es conveniente utilizar las palabras completas y evitar los acrónimos, a menos que la abreviatura sea mucho más utilizada que la forma no abreviada como en URL o HTML.\nUna instancia es un elemento tangible (ocupa memoria durante la ejecución del programa) generado a partir de una definición de clase. Todos los objetos empleados en un programa han de pertenecer a una clase determinada.\nAunque el término a veces se emplea de una forma imprecisa, un objeto es una instancia de una clase predefinida en Java o declarada por el usuario y referenciada por una variable que almacena su dirección de memoria. Cuando se dice que Java no tiene punteros simplemente se indica que Java no tiene punteros que el programador pueda ver, ya que todas las referencias a objeto son de hecho punteros en la representación interna.\nEn general, el acceso a los atributos se realiza a través del operador punto, que separa al identificador de la referencia del identificador del atributo (idReferencia.idAtributo). Las llamadas a los métodos para realizar las distintas acciones se llevan a cabo separando los identificadores de la referencia y del método correspondiente con el operador punto (idReferencia.idMetodo(parametros)).\nEjemplo sencillo de clase y de instancia\nEl siguiente código muestra la declaración de la clase Precio. La clase Precio consta de un único atributo (euro) y dos métodos: uno que asigna un valor al atributo (pone) sin devolver ningún valor y otro que devuelve el valor del atributo (da).\n/** * Ejemplo de declaracion de la clase Precio * double da() --\u0026gt; devuelve el valor almacenado en euros * void pone( double x ) --\u0026gt; almacena valor en euros */ public class Precio { // Atributo o variable miembro public double euros; // Metodos public double da() { return this.euros; } public void pone(double x) { this.euros = x; } } Interfaz Gráfica en Java Eclipse # La interfaz gráfica de usuario (GUI) es una parte fundamental de muchas aplicaciones modernas, ya que permite a los usuarios interactuar de manera visual con el software. Java ofrece un conjunto de bibliotecas y herramientas para crear interfaces gráficas utilizando el entorno de desarrollo Eclipse. A continuación, te proporcionaré una explicación detallada sobre cómo trabajar con interfaces gráficas en Java Eclipse.\nCreación de una interfaz gráfica en Java Eclipse # Para crear una interfaz gráfica en Java Eclipse, se utilizan principalmente dos bibliotecas: Swing y JavaFX. En este caso, nos enfocaremos en Swing, que es una biblioteca estándar de Java para la creación de GUI.\nAbre Eclipse y crea un nuevo proyecto Java. Haz clic derecho en el proyecto y selecciona \"New\" \u003e \"Class\" para crear una nueva clase Java. En la clase recién creada, importa las clases necesarias para trabajar con Swing: import javax.swing.JFrame; import javax.swing.JLabel; import javax.swing.JButton; Dentro del método main, crea una instancia de la clase JFrame, que será la ventana principal de la interfaz:\nJFrame ventana = new JFrame(\u0026#34;Mi Aplicación\u0026#34;); ventana.setSize(300, 200); ventana.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); Agrega componentes a la ventana, como etiquetas y botones:\nJLabel etiqueta = new JLabel(\u0026#34;¡Hola, mundo!\u0026#34;); ventana.add(etiqueta); JButton boton = new JButton(\u0026#34;Haz clic\u0026#34;); ventana.add(boton); Haz que la ventana sea visible:\nventana.setVisible(true); Ejecuta la aplicación y verás la interfaz gráfica que has creado.\nEjemplos para practicar # A continuación, te presento dos ejemplos sencillos de interfaces gráficas en Java Eclipse para que puedas practicar:\nEjemplo 1: Calculadora básica # Crea una interfaz gráfica que simule una calculadora básica con los botones de los dígitos, operadores aritméticos y un campo de texto para mostrar el resultado. Utiliza los componentes de Swing, como JFrame, JLabel y JButton, para construir la calculadora. Implementa la lógica para realizar las operaciones y mostrar los resultados en el campo de texto.\nEjemplo 2: Lista de tareas # Crea una interfaz gráfica que permita al usuario ingresar tareas en un campo de texto y agregarlas a una lista. Utiliza componentes como JFrame, JTextField, JButton y JList para construir la interfaz. Implementa la funcionalidad para agregar tareas a la lista y mostrarlas visualmente. Puedes permitir al usuario marcar las tareas como completadas y eliminarlas de la lista.\nEstos ejemplos te ayudarán a practicar la creación de interfaces gráficas en Java Eclipse. Puedes expandir la funcionalidad de los ejemplos, mejorar la apariencia de la interfaz y explorar otros componentes de Swing para enriquecer la experiencia del usuario.\nRecuerda que la práctica constante es clave para dominar la creación de interfaces gráficas en Java Eclipse. Explora la documentación y los recursos disponibles en línea para ampliar tus conocimientos y mejorar tus habilidades en este campo.\n","date":"16 mayo 2023","permalink":"/platform/java/curso/dia11/clasesobjetos/","section":"Javae","summary":"Clases # Una clase representa al conjunto de objetos que comparten una estructura y un comportamiento comunes.","title":"Clases y Objetos"},{"content":"Java es un lenguaje de programación orientado a objetos, lo que significa que se basa en el concepto de \u0026ldquo;objetos\u0026rdquo; y utiliza clases e interfaces para modelar y organizar la lógica del programa. En esta explicación, abordaremos detalladamente cada uno de estos conceptos y proporcionaremos ejemplos prácticos para ayudarte a comprenderlos mejor.\nClases en Java # En Java, una clase es una plantilla o un plano para crear objetos. Representa un conjunto de atributos (variables de instancia) y métodos (funciones) que definen las características y el comportamiento de los objetos que se crearán a partir de ella. Las clases son fundamentales en la programación orientada a objetos, ya que permiten encapsular datos y operaciones relacionadas en una sola entidad.\nPara definir una clase en Java, se utiliza la siguiente sintaxis:\npublic class NombreClase { // Variables de instancia tipoDeDato variable1; tipoDeDato variable2; // Constructor public NombreClase(tipoDeDato param1, tipoDeDato param2) { this.variable1 = param1; this.variable2 = param2; } // Métodos tipoDeDato metodo1() { // Lógica del método } tipoDeDato metodo2() { // Lógica del método } } Ejemplo de Clase en Java: # public class Persona { // Variables de instancia private String nombre; private int edad; // Constructor public Persona(String nombre, int edad) { this.nombre = nombre; this.edad = edad; } // Métodos public void saludar() { System.out.println(\u0026#34;Hola, mi nombre es \u0026#34; + nombre); } public int obtenerEdad() { return edad; } } Objetos en Java # Un objeto es una instancia de una clase. Representa una entidad individual que se crea utilizando la plantilla definida por la clase. Cada objeto tiene su propia copia de las variables de instancia de la clase y puede invocar sus métodos.\nPara crear un objeto en Java, primero debes instanciar la clase utilizando la palabra clave new seguida del nombre de la clase y los paréntesis:\nNombreClase nombreObjeto = new NombreClase(argumentosConstructor); Ejemplo de Objetos en Java: # public class Main { public static void main(String[] args) { // Crear objetos de la clase Persona Persona persona1 = new Persona(\u0026#34;Juan\u0026#34;, 25); Persona persona2 = new Persona(\u0026#34;María\u0026#34;, 30); // Utilizar los objetos persona1.saludar(); // Salida: Hola, mi nombre es Juan persona2.saludar(); // Salida: Hola, mi nombre es María int edadPersona1 = persona1.obtenerEdad(); System.out.println(\u0026#34;Edad de persona1: \u0026#34; + edadPersona1); // Salida: Edad de persona1: 25 } } Interfaces en Java # Una interfaz en Java es una colección de métodos abstractos y constantes. Define un contrato que una clase debe cumplir si implementa la interfaz. Las interfaces permiten lograr una mayor flexibilidad y modularidad en el diseño del código, ya que una clase puede implementar múltiples interfaces.\nPara definir una interfaz en Java, se utiliza la siguiente sintaxis:\npublic interface NombreInterfaz { // Constantes tipoDato CONSTANTE1 = valor; tipoDato CONSTANTE2 = valor; // Métodos abstractos tipoDato metodo1(parametros); tipoDato metodo2(parametros); } Ejemplo de Interfaz en Java: # public interface Reproductor { // Constantes int MAX_VOLUME = 100; int MIN_VOLUME = 0; // Métodos abstractos void reproducir(); void pausar(); void detener(); } Una clase puede implementar una interfaz utilizando la palabra clave implements. Al implementar una interfaz, la clase debe proporcionar una implementación para todos los métodos declarados en la interfaz.\npublic class ReproductorMP3 implements Reproductor { public void reproducir() { // Lógica para reproducir un archivo MP3 } public void pausar() { // Lógica para pausar la reproducción } public void detener() { // Lógica para detener la reproducción } } Ejercicios para Practicar # Crea una clase \"Perro\" con los siguientes atributos: nombre (String) y edad (int). Incluye un constructor y métodos para obtener y establecer los valores de los atributos. Luego, crea dos objetos de la clase \"Perro\" y muestra su información por pantalla. Define una interfaz \"Calculadora\" que declare los métodos abstractos \"sumar\", \"restar\", \"multiplicar\" y \"dividir\". Crea una clase \"CalculadoraBasica\" que implemente esta interfaz y proporcione la implementación de los métodos. Luego, utiliza un objeto de la clase \"CalculadoraBasica\" para realizar algunas operaciones matemáticas básicas. Crea una clase \"Circulo\" con un atributo \"radio\" (double) y métodos para calcular el área y la circunferencia del círculo. Luego, crea un objeto de la clase \"Circulo\" y muestra el área y la circunferencia calculadas. ","date":"16 mayo 2023","permalink":"/platform/java/curso/dia11/clasesobjetosinterfaces/","section":"Javae","summary":"Java es un lenguaje de programación orientado a objetos, lo que significa que se basa en el concepto de \u0026ldquo;objetos\u0026rdquo; y utiliza clases e interfaces para modelar y organizar la lógica del programa.","title":"Clases, Objetos e Interfaces"},{"content":"Objetos # Un objeto es la instanciación de una clase y tiene un estado y un funcionamiento. El estado está contenido en sus variables (variables miembro), y el funcionamiento viene determinado por sus métodos. Las variables miembro pueden ser variables de instancia o variables de clase. Se activa el funcionamiento del objeto invocando a uno de sus métodos, que realizará una acción o modificará su estado, o ambas cosas.\nUn objeto es (de nuevo) una instancia de una clase. En Java, la creación de un objeto se realiza en tres pasos (aunque se pueden combinar):\nDeclaración, proporcionar un nombre al objeto Instanciación, asignar memoria al objeto Inicialización, opcionalmente se pueden proporcionar valores iniciales a las variables de instancia del objeto Cuando se trata de Java, es importante reconocer la diferencia entre objetos y variables de tipos básicos: init miVariable; Se puede inicializar la variable con un valor determinado en el momento de declararla, es decir, podemos resumir los tres pasos anteriormente citados de declaración, instanciación e inicialización, en una sola sentencia:\nint miVariable = 7; El formato en que se presenta un objeto en Java, cuando el compilador no conoce el tipo de que se trata, consiste en el identificador de la clase y el valor hexadecimal de la dirección.\nEn Java no siempre es necesaria la declaración de un objeto (darle un nombre). En el siguiente ejemplo, java502.java, se instancia un nuevo objeto que se usa en una expresión, sin previamente haberlo declarado.\nimport java.util.*;\nclass java502 { public static void main( String args[] ) { System.out.println( new Date() ); } }\nUna vez que se tiene declarado un objeto con sus variables y sus métodos, podemos acceder a ellos para que el uso para el que se ha creado ese objeto entre en funcionamiento. No hay diferencias apreciables entre los dos lenguajes a la hora de la invocación de los métodos de un objeto. Sin embargo, algunos métodos o variables pueden estar ocultos y el acceso a ellos resultar imposible.\nClases # Las clases son lo más simple de Java. Todo en Java forma parte de una clase, es una clase o describe como funciona una clase. El conocimiento de las clases es fundamental para poder entender los programas Java.Todas las acciones de los programas Java se colocan dentro del bloque de una clase o un objeto. Un objeto es una instancia de una clase. Todos los métodos se definen dentro del bloque de la clase, Java no soporta funciones o variables globales\nLa definición de una clase consta de dos partes, la declaración y el cuerpo, según la siguiente sintaxis:\nDeclaracionClase { CuerpoClase }\nsin el punto y coma (;)\nCada clase Java deriva, directa o indirectamente, de la clase Object. La clase padre inmediatamente superior a la clase que se está declarando se conoce como superclass. Si no se especifica la superclase de la que deriva una clase, se entiende que deriva directamente de la clase Object (definida en el paquete java.lang).\nEn la declaración de una clase se utiliza la palabra clave extends para especificar la superclase, de la forma:\nclass MiClase extends SuperClase { // cuerpo de la clase }\nHasta ahora sólo se ha utilizado la palabra clave public para calificar el nombre de las clases que hemos visto, pero hay tres modificadores más. Los tipos de clases que podemos definir son:\nPublic # Las clases public son accesibles desde otras clases, bien sea directamente o por herencia, desde clases declaradas fuera del paquete que contiene a esas clases públicas, ya que, por defecto, las clases solamente son accesibles por otras clases declaradas dentro del mismo paquete en el que se han declarado. Para acceder desde otros paquetes, primero tienen que ser importadas. La sintaxis es:\npublic class miClase extends SuperClase implements miInterface,TuInterface { // cuerpo de la clase }\nAquí la palabra clave public se utiliza en un contexto diferente del que se emplea cuando se define internamente la clase, junto con private y protected.\nAbstract # Una clase abstract tiene al menos un método abstracto. Una clase abstracta no se instancia, sino que se utiliza como clase base para la herencia.\nFinal # Una clase final se declara como la clase que termina una cadena de herencia, es lo contrario a una clase abstracta. Nadie puede heredar de una clase final. Por ejemplo, la clase Math es una clase final. Aunque es técnicamente posible declarar clases con varias combinaciones de public, abstract y final, la declaración de una clase abstracta y a la vez final no tiene sentido, y el compilador no permitirá que se declare una clase con esos dos modificadores juntos.\nSynchronizable # Este modificador especifica que todos los métodos definidos en la clase son sincronizados, es decir, que no se puede acceder al mismo tiempo a ellos desde distintos threads; el sistema se encarga de colocar los flags necesarios para evitarlo. Este mecanismo hace que desde threads diferentes se puedan modificar las mismas variables sin que haya problemas de que se sobreescriban.\nSi no se utiliza alguno de los modificadores expuestos, por defecto, Java asume que una clase es:\nNo final No abstracta Subclase de la clase Object No implementa interfaz alguno\nVariables # Una clase en Java puede contener variables y métodos. Las variables pueden ser tipos primitivos como int, char, etc. Los métodos son funciones.\nPor ejemplo, en el siguiente trozo de código podemos observarlo:\npublic class MiClase { int i; public MiClase() { i = 10; } public void Suma_a_i( int j ) { int suma; suma = i + j; } } La clase MiClase contiene una variable (i) y dos métodos, MiClase() que es el constructor de la clase y Suma_a_i( int j ).\nLa declaración de una variable miembro aparece dentro del cuerpo de la clase, pero fuera del cuerpo de cualquier método de esa clase. Si se declara dentro de un métodos, será una variable local del método y no una variable miembro de la clase. En el ejemplo anterior, i es una variable miembro de la clase y suma es una variable local del método Suma_ a_i().\nEl tipo de una variable determina los valores que se le pueden asignar y las operaciones que se pueden realizar con ella.\nEl nombre de una variable ha de ser un identificador válido en Java. Por convenio, los programadores Java empiezan los nombres de variables con una letra minúscula, pero no es imprescindible. Los nombres de las variables han de ser únicos dentro de la clase y se permite que haya variables y métodos con el mismo nombre, a diferencia de otros lenguajes como C++, en donde se produce un error de compilación si se da este caso.\nMétodos # Los métodos son funciones que pueden ser llamadas dentro de la clase o por otras clases. La implementación de un método consta de dos partes, una declaración y un cuerpo. La declaración en Java de un método se puede expresar esquemáticamente como:\ntipoRetorno nombreMetodo( [lista_de_argumentos] ) { cuerpoMetodo } En Java, la definición completa del método debe estar dentro de la definición de la clase y no se permite la posibilidad de métodos inline, por lo tanto, Java no proporciona al programador distinciones entre métodos normales y métodos inline.\nTodos los lenguajes tiene su propua sintaxis para la declaración de un método, Java no es la excepción, pero debemos identifica la sitaxis adecuada:\npublic void [nombre del método](){ [algoritmo] } Nombre del Método # El nombre del método puede ser cualquier identificador legal en Java. Java soporta el concepto de sobrecarga de métodos, es decir, permite que dos métodos compartan el mismo nombre pero con diferente lista de argumentos, de forma que el compilador pueda diferenciar claramente cuando se invoca a uno o a otro, en función de los parámetros que se utilicen en la llamada al método.\nEl siguiente fragmento de código muestra una clase Java con cuatro métodos sobrecargados, el último no es legal porque tiene el mismo nombre y lista de argumentos que otro previamente declarado:\nclass MiClase { . . . void miMetodo( int x,int y ) { . . . } void miMetodo( int x ) { . . . } void miMetodo( int x,float y ) { . . . } // void miMetodo( int a,float b ) { . . . } // no válido } Todo lenguaje de programación orientado a objetos debe soportar las características de encapsulación, herencia y polimorfismo. La sobrecarga de métodos es considerada por algunos autores como polimorfismo en tiempo de compilación.\nMétodo de Instancia # Cuando se incluye un método en una definición de una clase Java sin utilizar la palabra clave static, estamos generando un método de instancia. Aunque cada objeto de la clase no contiene su propia copia de un método de instancia (no existen múltiples copias del método en memoria), el resultado final es como si fuese así, como si cada objeto dispusiese de su propia copia del método.\nCuando se invoca un método de instancia a través de un objeto determinado, si este método referencia a variables de instancia de la clase, en realidad se están referenciando variables de instancia específicas del objeto específico que se está invocando.\nLa llamada a los métodos de instancia en Java se realiza utilizando el nombre del objeto, el operador punto y el nombre del método.\nmiObjeto.miMetodoDeInstancia(); Método Estático # Cuando una función es incluida en una definición de clase, o un método e incluso en una definición de una clase Java, y se utiliza la palabra static, se obtiene un método estático o método de clase.\nLo más significativo de los métodos de clase es que pueden ser invocados sin necesidad de que haya que instanciar ningún objeto de la clase. En Java se puede invocar un método de clase utilizando el nombre de la clase, el operador punto y el nombre del método.\nMiClase.miMetodoDeClase(); ","date":"16 mayo 2023","permalink":"/platform/java/curso/dia2/clasesobjetos/","section":"Javae","summary":"Objetos # Un objeto es la instanciación de una clase y tiene un estado y un funcionamiento.","title":"Clases, Objetos, métodos y Variables"},{"content":"Introducción a las Colecciones en Java # En esta hoja, explicaremos qué son las colecciones en Java y por qué son importantes. Las colecciones en Java son estructuras de datos que permiten almacenar, organizar y manipular grupos de objetos de manera eficiente y flexible. A diferencia de los arrays, las colecciones tienen un tamaño dinámico y pueden contener objetos de diferentes tipos.\nLas colecciones en Java están diseñadas para facilitar tareas comunes como agregar y eliminar elementos, buscar elementos específicos, ordenar elementos y realizar otras operaciones de manipulación de datos. Son parte de la API de Java y están implementadas a través de una jerarquía de interfaces y clases, como List, Set, Map, entre otras.\nSintaxis y Funcionalidades Básicas de las Colecciones en Java # En esta hoja, nos enfocaremos en la sintaxis básica para trabajar con colecciones en Java. Veremos cómo crear e inicializar colecciones utilizando clases como ArrayList, HashSet, HashMap, etc. Aprenderemos a agregar y eliminar elementos de las colecciones, así como a buscar elementos utilizando métodos como add(), remove(), contains(), entre otros.\nTambién exploraremos cómo recorrer las colecciones utilizando bucles for-each y la interfaz Iterator. Aprenderemos a utilizar métodos como size() y isEmpty() para obtener información sobre el tamaño y la vaciedad de la colección.\nFuncionalidades Avanzadas de las Colecciones en Java # En esta hoja, profundizaremos en algunas funcionalidades avanzadas de las colecciones en Java. Aprenderemos sobre el uso de colecciones genéricas, que nos permiten trabajar con cualquier tipo de objeto de forma segura y sin necesidad de realizar conversiones. Veremos cómo definir colecciones genéricas y cómo especificar el tipo de elemento que contendrán.\nAdemás, exploraremos la interfaz Map y sus implementaciones, como HashMap y TreeMap. Aprenderemos a agregar y eliminar pares clave-valor, y cómo buscar y obtener valores utilizando las claves.\nUsos y Ejemplos Comentados de Colecciones en Java # En esta hoja final, nos centraremos en los diversos usos y ejemplos comentados de colecciones en Java. Discutiremos cómo las colecciones son ampliamente utilizadas en el desarrollo de aplicaciones Java para manejar datos de manera eficiente y estructurada.\nEjemplo 1: Lista de Números\nimport java.util.ArrayList; import java.util.List; public class ListaNumeros { public static void main(String[] args) { List\u0026lt;Integer\u0026gt; numeros = new ArrayList\u0026lt;\u0026gt;(); numeros.add(10); numeros.add(20); numeros.add(30); numeros.add(40); for (Integer numero : numeros) { System.out.println(numero); } } } En este ejemplo, creamos una lista de números enteros y la recorremos utilizando un bucle for-each para imprimir los elementos.\nEjemplo 2: Conjunto de Nombres Únicos\nimport java.util.HashSet; import java.util.Set; public class ConjuntoNombres { public static void main(String[] args) { Set\u0026lt;String\u0026gt; nombres = new HashSet\u0026lt;\u0026gt;(); nombres.add(\u0026#34;Juan\u0026#34;); nombres.add(\u0026#34;María\u0026#34;); nombres.add(\u0026#34;Pedro\u0026#34;); nombres.add(\u0026#34;María\u0026#34;); for (String nombre : nombres) { System.out.println(nombre); } } } En este ejemplo, creamos un conjunto de nombres utilizando la clase HashSet, que garantiza que los elementos sean únicos. Luego, recorremos el conjunto y mostramos los nombres en la salida.\nEstos ejemplos ilustran el uso básico de las colecciones en Java y cómo pueden facilitar el manejo de datos en diferentes escenarios. A medida que te familiarices con las colecciones, podrás aprovechar sus funcionalidades avanzadas para desarrollar aplicaciones más sofisticadas y eficientes.\n","date":"16 mayo 2023","permalink":"/platform/java/curso/dia14/colecciones/","section":"Javae","summary":"Introducción a las Colecciones en Java # En esta hoja, explicaremos qué son las colecciones en Java y por qué son importantes.","title":"Colecciones"},{"content":" 2 // Crea y manipula un objeto LibroCalificaciones. 3 import java.util.Scanner; // el programa usa la clase Scanner 4 5 public class PruebaLibroCalificaciones 6 { 7 // el método main empieza la ejecución del programa 8 public static void main( String args[] ) 9 { 10 // crea un objeto Scanner para obtener la entrada de la ventana de comandos 11 Scanner entrada = new Scanner( System.in ); 12 13 // crea un objeto LibroCalificaciones y lo asigna a miLibroCalificaciones 14 LibroCalificaciones miLibroCalificaciones = new LibroCalificaciones(); 15 16 // muestra el valor inicial de nombreDelCurso 17 System.out.printf( “El nombre inicial del curso es: %s\\n\\n”, 18 miLibroCalificaciones.obtenerNombreDelCurso() ); 19 20 // pide y lee el nombre del curso 21 System.out.println( “Escriba el nombre del curso:” ); 22 String elNombre = entrada.nextLine(); // lee una línea de texto 23 miLibroCalificaciones.establecerNombreDelCurso( elNombre ); // establece el nombre del curso 24 System.out.println(); // imprime una línea en blanco 25 26 // muestra el mensaje de bienvenida después de especificar el nombre del curso 27 miLibroCalificaciones.mostrarMensaje(); 28 } // fin de main 29 30 } // fin de la clase PruebaLibroCalificaciones Los tipos de datos en Java se dividen en dos categorías: tipos primitivos y tipos por referencia (algunas veces conocidos como tipos no primitivos). Los tipos primitivos son boolean, byte, char, short, int, long, float y double. Todos los tipos no primitivos son tipos por referencia, por lo cual las clases, que especifi can los tipos de objetos, son tipos por referencia.\nUna variable de tipo primitivo puede almacenar sólo un valor de su tipo declarado a la vez. Por ejemplo, una variable int puede almacenar un número completo (como 7) a la vez. Cuando se asigna otro valor a esa variable, se sustituye su valor inicial. Las variables de instancia de tipo primitivo se inicializan de manera predeterminada; las variables de los tipos byte, char, short, int, long, float y double se inicializan con 0, y las variables de tipo boolean se inicializan con false. Usted puede especifi car sus propios valores iniciales para las variables de tipo primitivo. Recuerde que las variables locales no se inicializan de manera predeterminada.\nTip para prevenir errores Cualquier intento de utilizar una variable local que no se haya inicializado produce un error de compilación.\nLos programas utilizan variables de tipo por referencia (que por lo general se llaman referencias) para almacenar las ubicaciones de los objetos en la memoria de la computadora. Se dice que dicha variable hace referencia a un objeto en el programa. Cada uno de los objetos a los que se hace referencia pueden contener muchas variables de instancia y métodos. La línea 14 del código crea un objeto de la clase LibroCalificaciones, y la variable miLibroCalificaciones contiene una referencia a ese objeto LibroCalificaciones. Las variables de instancia de tipo por referencia se inicializan de manera predeterminada con el valor null: una palabra reservada que representa una “referencia a nada”. Esto explica por qué la primera llamada a obtenerNombreDelCurso en la línea 18 del código anterior; no se había establecido el valor de nombreDelCurso, por lo que se devolvía el valor inicial predeterminado null. En el apéndice C, Palabras clave y palabras reservadas, se muestra una lista completa de las palabras reservadas y las palabras clave.\nEs obligatorio que una referencia a un objeto invoque (es decir, llame) a los métodos de un objeto. En la aplicación anterior, las instrucciones en el método main utilizan la variable miLibroCalificaciones para enviar mensajes al objeto LibroCalificaciones. Estos mensajes son llamadas a métodos (como establecer NombreDelCurso y obtenerNombreDelCurso) que permiten al programa interactuar con el objeto LibroCalificaciones. Por ejemplo, la instrucción en la línea 23 utiliza a miLibroCalificaciones para enviar el mensaje establecerNombreDelCurso al objeto LibroCalificaciones. El mensaje incluye el argumento que requiere establecerNombreDelCurso para realizar su tarea. El objeto LibroCalificaciones utiliza esta información para establecer la variable de instancia nombreDelCurso. Tenga en cuenta que las variables de tipo primitivo no hacen referencias a objetos, por lo que dichas variables no pueden utilizarse para invocar métodos\n","date":"16 mayo 2023","permalink":"/platform/java/curso/dia4/comparcion/","section":"Javae","summary":"2 // Crea y manipula un objeto LibroCalificaciones.","title":"Comparación entre tipos primitivos y tipos por referencia"},{"content":"Java soporta la noción de constructor. El constructor es un tipo específico de método que siempre tiene el mismo nombre que la clase y se utiliza para construir objetos de esa clase. No tiene tipo de dato específico de retorno, ni siquiera void. Esto se debe a que el tipo específico que debe devolver un constructor de clase es el propio tipo de la clase.\nEn este caso, pues, no se puede especificar un tipo de retorno, ni se puede colocar ninguna sentencia que devuelva un valor. Los constructores pueden sobrecargarse, y aunque puedan contener código, su función primordial es inicializar el nuevo objeto que se instancia de la clase. En Java, ha de hacerse una llamada explícita al constructor para instanciar un nuevo objeto.\nCuando se declara una clase en Java, se pueden declarar uno o más constructores opcionales que realizan la inicialización cuando se instancia (se crea una ocurrencia) un objeto de dicha clase.\nUtilizando el código de la sección anterior, cuando se crea una nueva instancia de MiClase, se crean (instancias) todos los métodos y variables, y se llama al constructor de la clase:\nMiClase mc; mc = new MiClase(); La palabra clave new se usa para crear una instancia de la clase. Antes de ser instanciada con new no consume memoria, simplemente es una declaración de tipo. Después de ser instanciado un nuevo objeto mc, el valor de i en el objeto mc será igual a 10. Se puede referenciar la variable (de instancia) i con el nombre del objeto:\nmc.i++; // incrementa la instancia de i de mc Al tener mc todas las variables y métodos de MiClase, se puede usar la primera sintaxis para llamar al método Suma_a_i() utilizando el nuevo nombre de clase mc:\nmc.Suma_a_i( 10 ); y ahora la variable mc.i vale 21.\nLuego, en Java, cuando se instancia un objeto, siempre se hace una llamada directa al constructor como argumento del operador new. Este operador se encarga de que el sistema proporcione memoria para contener al objeto que se va a crear.\nEn el siguiente ejemplo, se ilustran algunos de los conceptos sobre constructores que se han planteado en esta sección.\nclass MiClase { int varInstancia; // Este es el constructor parametrizado MiClase( int dato ) { // rellenamos la variable de instancia con los datos // que se pasan al constructor varInstancia = dato; } void verVarInstancia() { System.out.println( \u0026#34;El Objeto contiene \u0026#34; + varInstancia ); } } class java507 { public static void main( String args[] ) { System.out.println( \u0026#34;Lanzando la aplicacion\u0026#34; ); // Instanciamos un objeto de este tipo llamando al // constructor de defecto java507 obj = new java507(); // Llamamos a la funcion pasandole un constructor // parametrizado como parametro obj.miFuncion( new MiClase( 100 ) ); } // Esta funcion recibe un objeto y llama a uno de sus metodos // para presentar en pantalla el dato que contiene el objeto void miFuncion( MiClase objeto){ objeto.verVarInstancia(); } } ","date":"16 mayo 2023","permalink":"/platform/java/curso/dia5/constructores/","section":"Javae","summary":"Java soporta la noción de constructor.","title":"Constructores"},{"content":"Declaración de una clase # Una declaración de clase especifica un nuevo tipo de referencia con nombre. Hay dos tipos de declaraciones de clase: declaraciones de clase normal y enumeración declaraciones.\nDeclaración de clase: Declaración de clase normalNormalClassDeclaration EnumDeclaration Declaración de clase normal: {ClassModifier} Identificador de clase [TypeParameters] [Superclase] [Superinterfaces] ClassBody Las reglas de esta sección se aplican a todas las declaraciones de clase, incluidas las declaraciones de enumeración. Sin embargo, se aplican reglas especiales a las declaraciones de enumeración con respecto a los modificadores de clase, clases internas y superclases.\nEl identificador en una declaración de clase especifica el nombre de la clase.\nEs un error de tiempo de compilación si una clase tiene el mismo nombre simple que cualquiera de sus clases o interfaces.\nControl de Acceso # El control de acceso también tiene un significado especial cuando se trata de constructores. Aunque en otra sección se trata a fondo el tela del control de acceso en Java, con referencia a los constructores se puede decir que el control de acceso que se indique determina la forma en que otros objetos van a pode instanciar objetos de la clase. En la siguiente descripción, se indica cómo se trata el control de acceso cuando se tienen entre manos a los constructores:\nPrivate\nNinguna otra clase puede instanciar objetos de la clase. La clase puede contener métodos públicos, y estos métodos pueden construir un objeto y devolverlo, pero nadie más puede hacerlo.\nProtected\nSolamente las subclases de la clase pueden crear instancias de ella.\nPublic\nCualquier otra clase puede crear instancias de la clase.\nComo ejemplo, vamos a definir una clase Persona. Clase Persona en Java:\npublic class Persona { private String nombre; private int edad; public void setNombre(String nom) { nombre = nom; } public String getNombre() { return nombre; } public void setEdad(int ed) { edad = ed; } public int getEdad() { return edad; } } La clase Persona es pública y tiene dos atributos, nombre y edad, y cuatro métodos. Los métodos que aparecen en esta clase se conocen como métodos de acceso ó setters/getters. Son métodos que solo sirven para asignar y obtener los valores de los atributos individualmente. En cada clase es conveniente escribir un método set y otro get para cada atributo.\n","date":"16 mayo 2023","permalink":"/platform/java/curso/dia2/declaracion/","section":"Javae","summary":"Declaración de una clase # Una declaración de clase especifica un nuevo tipo de referencia con nombre.","title":"Declaración de clases"},{"content":"La instrucción de repetición do\u0026hellip;while es similar a la instrucción while, ya que el programa evalúa la condición de continuación de ciclo al principio, antes de ejecutar el cuerpo del ciclo. Si la condición es falsa, el cuerpo nunca se ejecuta. La instrucción do\u0026hellip;while evalúa la condición de continuación de ciclo después de ejecutar el cuerpo del ciclo; por lo tanto, el cuerpo siempre se ejecuta por lo menos una vez. Cuando termina una instrucción do\u0026hellip;while, la ejecución continúa con la siguiente instrucción en la secuencia. El siguiente ejemplo utiliza una instrucción do\u0026hellip;while para imprimir los números del 1 al 10.\nLa línea 8 declara e inicializa la variable de control contador. Al entrar a la instrucción do\u0026hellip;while, la línea 12 imprime el valor de contador y la 13 incrementa a contador. Después, el programa evalúa la prueba de continuación de ciclo al fi nal del mismo (línea 14). Si la condición es verdadera, el ciclo continúa a partir de la primera instrucción del cuerpo en la instrucción do\u0026hellip;while (línea 12). Si la condición es falsa, el ciclo termina y el programa continúa con la siguiente instrucción después del ciclo.\nEl diagrama de actividad de UML para la instrucción do\u0026hellip;while. Este diagrama hace evidente que la condición de continuación de ciclo no se evalúa sino hasta después que el ciclo ejecuta el estado de acción, por lo menos una vez.\nNo es necesario utilizar llaves en la estructura de repetición do\u0026hellip;while si sólo hay una instrucción en el cuerpo. Sin embargo, la mayoría de los programadores incluyen las llaves para evitar la confusión entre las instrucciones while y do\u0026hellip;while. Por ejemplo: while ( condición )\n2 // La instrucción de repetición do...while. 3 4 public class PruebaDoWhile 5 { 6 public static void main( String args[] ) 7 { 8 int contador = 1; // inicializa contador 9 10 do 11 { 12 System.out.printf( \u0026#34;%d \u0026#34;, contador ); 13 ++contador; 14 } while ( contador \u0026lt;= 10 ); // fin de do...while 15 16 System.out.println(); // imprime una nueva línea 17 } // fin de main 18 } // fin de la clase PruebaDoWhile generalmente es la primera línea de una instrucción while. Una instrucción do\u0026hellip;while sin llaves, alrededor de un cuerpo con una sola instrucción, aparece así:.\ndo instrucción while ( condición ); o cual puede ser confuso. Un lector podría malinterpretar la última línea [while( condición );], como una instrucción while que contiene una instrucción vacía (el punto y coma por sí solo). Por ende, la instrucción do\u0026hellip; while con una instrucción en su cuerpo se escribe generalmente así:\ndo { Instrucción } while ( condición ); DEITEL, PAUL J. Y HARVEY M. DEITE, (2008) Java como programar. Recuperardo el 13 de junio de 2023\n","date":"16 mayo 2023","permalink":"/platform/java/curso/dia8/dowhile/","section":"Javae","summary":"La instrucción de repetición do\u0026hellip;while es similar a la instrucción while, ya que el programa evalúa la condición de continuación de ciclo al principio, antes de ejecutar el cuerpo del ciclo.","title":"do while"},{"content":"Ejercicios # Ejercicio de conversión de temperatura Ejercicio de cálculo del área de un rectángulo Ejercicio de cálculo del área de un círculo ","date":"16 mayo 2023","permalink":"/platform/java/curso/dia1/ejercicios/","section":"Javae","summary":"Ejercicios # Ejercicio de conversión de temperatura Ejercicio de cálculo del área de un rectángulo Ejercicio de cálculo del área de un círculo ","title":"Ejercicios"},{"content":"Ejercicios # Aplicación de Notas\nCrea una aplicación de notas que permita al usuario escribir y guardar notas en archivos. Utiliza una interfaz gráfica para mostrar la lista de notas existentes y permitir al usuario crear nuevas notas, ver y editar las notas existentes, y eliminar notas. Utiliza componentes como JFrame, JTextArea, JButton y JList para construir la interfaz.\n","date":"16 mayo 2023","permalink":"/platform/java/curso/dia11/ejercicios/","section":"Javae","summary":"Ejercicios # Aplicación de Notas","title":"Ejercicios"},{"content":"Desarrolla un código donde se filtren los elementos de una lista usando expresiones lambda y generics Escribe un programa que defina una lista de objetos de tipo Persona, donde cada objeto tiene un nombre y una edad. Luego, utiliza una expresión lambda y generics para filtrar las personas mayores de 30 años y mostrar sus nombres\nCalcular el promedio de una lista de números usando expresiones lambda y generics Escribe un programa que tome una lista de números enteros y utilice una expresión lambda y generics para calcular su promedio.\n","date":"16 mayo 2023","permalink":"/platform/java/curso/dia13/ejercicios/","section":"Javae","summary":"Desarrolla un código donde se filtren los elementos de una lista usando expresiones lambda y generics Escribe un programa que defina una lista de objetos de tipo Persona, donde cada objeto tiene un nombre y una edad.","title":"Ejercicios"},{"content":"Crea una clase \u0026ldquo;CardGame\u0026rdquo; que utilice un Set para almacenar objetos de una clase \u0026ldquo;Card\u0026rdquo; que representen cartas de un juego. Cada carta puede tener atributos como palo y valor. Implementa métodos para agregar cartas al juego, mezclar las cartas, repartir cartas a los jugadores y mostrar las cartas en la mesa. Puedes extender este ejemplo añadiendo reglas de juego y funcionalidades adicionales, como calcular la puntuación de cada jugador.\n","date":"16 mayo 2023","permalink":"/platform/java/curso/dia14/ejercicios/","section":"Javae","summary":"Crea una clase \u0026ldquo;CardGame\u0026rdquo; que utilice un Set para almacenar objetos de una clase \u0026ldquo;Card\u0026rdquo; que representen cartas de un juego.","title":"Ejercicios"},{"content":"Dada una lista de números enteros, utiliza el bucle foreach y los streams para filtrar y mostrar solo los números pares.\nDada una lista de palabras, utiliza el bucle foreach y los streams para contar y mostrar la cantidad de palabras que tienen más de cuatro caracteres.\nDada una lista de cadenas, utiliza el bucle foreach y los streams para convertir todas las cadenas a mayúsculas y mostrarlas.\n","date":"16 mayo 2023","permalink":"/platform/java/curso/dia15/ejercicios/","section":"Javae","summary":"Dada una lista de números enteros, utiliza el bucle foreach y los streams para filtrar y mostrar solo los números pares.","title":"Ejercicios"},{"content":" Confeccionar una clase que permita ingresar tres valores por teclado. Luego mostrar el mayor y el menor Crear una clase donde se ingrese el nombre de la persona y su edad, imprimirlo al final y saludar ","date":"16 mayo 2023","permalink":"/platform/java/curso/dia2/ejercicios/","section":"Javae","summary":"Confeccionar una clase que permita ingresar tres valores por teclado.","title":"Ejercicios"},{"content":"Ejercicios # Calcula el producto de tres enteros Encuentra el significado de las siguientes expresiones. Datos de prueba: -16 + 32 / 4 (48 - 7)% 11 (18 + 2) / (17 - 12) 17 - 18 / 6 * 3 + 11% 4 Divide los siguiente números: Dados 2 números 17 y 3, encuentra el cociente, el resto de la separación y la respuesta real. Datos de prueba: 17 y 3 ","date":"16 mayo 2023","permalink":"/platform/java/curso/dia3/ejercicios/","section":"Javae","summary":"Ejercicios # Calcula el producto de tres enteros Encuentra el significado de las siguientes expresiones.","title":"Ejercicios"},{"content":" Conversión de monedas: Se debe poder convertir soles, pesos, dólares y quetzales Calculadora Debe permitir tomar el precio agregar el iva, si es superior a 50 pesos el descuento debe ser de 10% si es inferior debe ser de 5% ","date":"16 mayo 2023","permalink":"/platform/java/curso/dia5/ejercicios/","section":"Javae","summary":" Conversión de monedas: Se debe poder convertir soles, pesos, dólares y quetzales Calculadora Debe permitir tomar el precio agregar el iva, si es superior a 50 pesos el descuento debe ser de 10% si es inferior debe ser de 5% ","title":"Ejercicios"},{"content":"Crea un programa que solicite al usuario ingresar una lista de palabras y luego elimine cualquier palabra duplicada en la lista. Utiliza un ArrayList para almacenar las palabras y el método contains() para verificar si una palabra ya está en la lista\nCrea un programa que solicite al usuario ingresar 5 números enteros y luego los muestre en orden ascendente. Utiliza un array para almacenar los números y el método sort() de la clase Arrays para ordenar el array\n","date":"16 mayo 2023","permalink":"/platform/java/curso/dia12/ejercicios/","section":"Javae","summary":"Crea un programa que solicite al usuario ingresar una lista de palabras y luego elimine cualquier palabra duplicada en la lista.","title":"Ejercicios de Arrays y List"},{"content":" Verificar si un número es positivo, negativo o cero. Determinar si un número es par impar y/o primo Determinar si un año es bisiesto ","date":"16 mayo 2023","permalink":"/platform/java/curso/dia6/ejercicios/","section":"Javae","summary":"Verificar si un número es positivo, negativo o cero.","title":"Ejercicios de if e if else"},{"content":" Desarrolla una calculadora con suma, resta, multiplica y divide números flotantes usando clases Cálculo del área de un círculo utilizando números flotantes usando clases Cálculo del promedio de números flotantes usando clases ","date":"16 mayo 2023","permalink":"/platform/java/curso/dia4/ejercicios/","section":"Javae","summary":" Desarrolla una calculadora con suma, resta, multiplica y divide números flotantes usando clases Cálculo del área de un círculo utilizando números flotantes usando clases Cálculo del promedio de números flotantes usando clases ","title":"Ejercicios de números flotantes"},{"content":" Imprimir la tabla de multiplicar del 7 utilizando un ciclo for Imprimir los números pares del 1 al 30 Calcular la suma de los primeros 100 números naturales ","date":"16 mayo 2023","permalink":"/platform/java/curso/dia7/ejercicio/","section":"Javae","summary":" Imprimir la tabla de multiplicar del 7 utilizando un ciclo for Imprimir los números pares del 1 al 30 Calcular la suma de los primeros 100 números naturales ","title":"Ejercicios For"},{"content":" Convertir un número a un día de la semana, el usuario ingresa un número del 1 al 7 y este debe corresponder a un día de la semana Generar una calculadora utilizando switch y que permita ingresar todo tipo de númeos Tener una Menu de 5 comidas cuando el usuario seleccione alguna opción se debe imprimir ","date":"16 mayo 2023","permalink":"/platform/java/curso/dia9/ejercicios/","section":"Javae","summary":" Convertir un número a un día de la semana, el usuario ingresa un número del 1 al 7 y este debe corresponder a un día de la semana Generar una calculadora utilizando switch y que permita ingresar todo tipo de númeos Tener una Menu de 5 comidas cuando el usuario seleccione alguna opción se debe imprimir ","title":"Ejercicios switch"},{"content":" Perdir números hasta que ingrese un número negativo mayor a 5 Calculará la suma de los dígitos de un número ingresado por el usuario utilizando un bucle while Calculará el factorial de un número ingresado por el usuario utilizando un bucle do-while ","date":"16 mayo 2023","permalink":"/platform/java/curso/dia8/ejercicios/","section":"Javae","summary":" Perdir números hasta que ingrese un número negativo mayor a 5 Calculará la suma de los dígitos de un número ingresado por el usuario utilizando un bucle while Calculará el factorial de un número ingresado por el usuario utilizando un bucle do-while ","title":"Ejercicios while y do while"},{"content":"En los días anteriores sobre la instrucción if de selección simple y la instrucción if\u0026hellip;else de selección doble. Java cuenta con la instrucción switch de selección múltiple para realizar distintas acciones, con base en los posibles valores de una variable o expresión entera. Cada acción se asocia con un valor de una expresión entera constante (es decir, un valor constante de tipo byte, short, int o char, pero no long) que la variable o expresión en la que se basa la instrucción switch pueda asumir.\nLa versión de la clase que presentamos ahora no sólo calcula el promedio de un conjunto de califi caciones numéricas introducidas por el usuario, sino que utiliza una instrucción switch para determinar si cada califi cación es el equivalente de A, B, C, D o F, y para incrementar el contador de la calificación apropiada. La clase también imprime en pantalla un resumen del número de estudiantes que recibieron cada califi cación. La entrada y la salida de ejemplo de la aplicación PruebaLibroCalificaciones, que utiliza la clase LibroCalificaciones para procesar un conjunto de calificaciones\n2 // La clase LibroCalificaciones usa la instrucción switch para contar las calificaciones A, B, C, D y F. 3 import java.util.Scanner; // el programa usa la clase Scanner 4 5 public class LibroCalificaciones 6 { 7 private String nombreDelCurso; // nombre del curso que representa este LibroCalificaciones 8 private int total; // suma de las calificaciones 9 private int contadorCalif; // número de calificaciones introducidas 10 private int aCuenta; // cuenta de calificaciones A 11 private int bCuenta; // cuenta de calificaciones B 12 private int cCuenta; // cuenta de calificaciones C 13 private int dCuenta; // cuenta de calificaciones D 14 private int fCuenta; // cuenta de calificaciones F 15 16 // el constructor inicializa nombreDelCurso; 17 // las variables de instancia int se inicializan en 0 de manera predeterminada 18 public LibroCalificaciones( String nombre ) 19 { 20 nombreDelCurso = nombre; // inicializa nombreDelCurso 21 } // fin del constructor 22 23 // método para establecer el nombre del curso 24 public void establecerNombreDelCurso( String nombre ) 25 { 26 nombreDelCurso = nombre; // almacena el nombre del curso 27 } // fin del método establecerNombreDelCurso 28 29 // método para obtener el nombre del curso 30 public String obtenerNombreDelCurso() 31 { 32 return nombreDelCurso; 33 } // fin del método obtenerNombreDelCurso 34 35 // muestra un mensaje de bienvenida al usuario de LibroCalificaciones 36 public void mostrarMensaje() 37 { 38 // obtenerNombreDelCurso obtiene el nombre del curso 39 System.out.printf( \u0026#34;Bienvenido al libro de calificaciones para\\n%s!\\n\\n\u0026#34;, 40 obtenerNombreDelCurso() ); 41 } // fin del método mostrarMensaje 42 43 // introduce un número arbitrario de calificaciones del usuario 44 public void introducirCalif() 45 { 46 Scanner entrada = new Scanner( System.in ); 47 48 int calificacion; // calificación introducida por el usuario 49 50 System.out.printf( \u0026#34;%s\\n%s\\n %s\\n %s\\n\u0026#34;, 51 \u0026#34;Escriba las calificaciones enteras en el rango de 0 a 100.\u0026#34;, 52 \u0026#34;Escriba el indicador de fin de archivo para terminar la entrada:\u0026#34;, 53 \u0026#34;En UNIX/Linux/Mac OS X escriba \u0026lt;ctrl\u0026gt; d y después oprima Intro\u0026#34;, 54 \u0026#34;En Windows escriba \u0026lt;ctrl\u0026gt; z y después oprima Intro\u0026#34; ); 55 56 // itera hasta que el usuario introduzca el indicador de fin de archivo 57 while ( entrada.hasNext() ) 58 { 59 calificacion = entrada.nextInt(); // lee calificación 60 total += calificacion; // suma calificación a total 61 ++contadorCalif; // incrementa el número de calificaciones 62 63 // llama al método para incrementar el contador apropiado 64 incrementarContadorCalifLetra( calificacion ); 65 } // fin de while 66 } // fin del método introducirCalif 67 68 // suma 1 al contador apropiado para la calificación especificada 69 public void incrementarContadorCalifLetra( int calificacion ) 70 { 71 // determina cuál calificación se introdujo 72 switch ( calificacion / 10 ) 73 { 74 case 9: // calificación está entre 90 75 case 10: // y 100 76 ++aCuenta; // incrementa aCuenta 77 break; // necesaria para salir del switch 78 79 case 8: // calificación está entre 80 y 89 80 ++bCuenta; // incrementa bCuenta 81 break; // sale del switch 82 83 case 7: // calificación está entre 70 y 79 84 ++cCuenta; // incrementa cCuenta 85 break; // sale del switch 86 87 case 6: // calificación está entre 60 y 69 88 ++dCuenta; // incrementa dCuenta 89 break; // sale del switch 90 91 default: // calificación es menor que 60 92 ++fCuenta; // incrementa fCuenta 93 break; // opcional; de todas formas sale del switch 94 } // fin de switch 95 } // fin del método incrementarContadorCalifLetra 96 97 // muestra un reporte con base en las calificaciones introducidas por el usuario 98 public void mostrarReporteCalif() 99 { 100 System.out.println( \u0026#34;\\nReporte de calificaciones:\u0026#34; ); 101 102 // si el usuario introdujo por lo menos una calificación... 103 if ( contadorCalif != 0 ) 104 { 105 // calcula el promedio de todas las calificaciones introducidas 106 double promedio = (double) total / contadorCalif; 107 108 // imprime resumen de resultados 109 System.out.printf( \u0026#34;El total de las %d calificaciones introducidas es %d\\n\u0026#34;, 110 contadorCalif, total ); 111 System.out.printf( \u0026#34;El promedio de la clase es %.2f\\n\u0026#34;, promedio ); 112 System.out.printf( \u0026#34;%s\\n%s%d\\n%s%d\\n%s%d\\n%s%d\\n%s%d\\n\u0026#34;, 113 \u0026#34;Numero de estudiantes que recibieron cada calificacion:\u0026#34;, 114 \u0026#34;A: \u0026#34;, aCuenta, // muestra el número de calificaciones A 115 \u0026#34;B: \u0026#34;, bCuenta, // muestra el número de calificaciones B 116 \u0026#34;C: \u0026#34;, cCuenta, // muestra el número de calificaciones C 117 \u0026#34;D: \u0026#34;, dCuenta, // muestra el número de calificaciones D 118 \u0026#34;F: \u0026#34;, fCuenta ); // muestra el número de calificaciones F 119 } // fin de if 120 else // no se introdujeron calificaciones, por lo que imprime el mensaje apropiado 121 System.out.println( \u0026#34;No se introdujeron calificaciones\u0026#34; ); 122 } // fin del método mostrarReporteCalif 123 } // fin de la clase LibroCalificaciones Al igual que las versiones anteriores de la clase, LibroCalificaciones declara la variable de instancia nombreDelCurso (línea 7) y contiene los métodos establecerNombreDelCurso (líneas 24 a 27), obtenerNombreDelCurso (líneas 30 a 33) y mostrarMensaje (líneas 36 a 41), que establecen el nombre del curso, lo almacenan y muestran un mensaje de bienvenida al usuario, respectivamente. La clase también contiene un constructor (líneas 18 a 21) que inicializa el nombre del curso.\nLa clase LibroCalificaciones también declara las variables de instancia total (línea 8) y contadorCalif(línea 9), que llevan la cuenta de la suma de las califi caciones introducidas por el usuario y el número de calificaciones introducidas, respectivamente. Las líneas 10 a 14 declaran las variables contador para cada categoría de califi caciones. La clase LibroCalificaciones mantiene a total, contadorCalif y a los cinco contadores de las letras de califi cación como variables de instancia, de manera que estas variables puedan utilizarse o modifi carse en cualquiera de los métodos de la clase. Observe que el constructor de la clase (líneas 18 a 21) establece sólo el nombre del curso; las siete variables de instancia restantes son de tipo int y se inicializan con 0, de manera predeterminada.\nLa clase LibroCalificaciones (fi gura 5.9) contiene tres métodos adicionales: introducirCalif, incrementarContadorCalifLetra y mostrarReporteCalif. El método introducirCalif (líneas 44 a 66) lee un número arbitrario de califi caciones enteras del usuario mediante el uso de la repetición controlada por un centinela, y actualiza las variables de instancia total y contadorCalif. El método introducirCalif llama al método incrementarContadorCalifLetra (líneas 69 a 95) para actualizar el contador de letra de calificación apropiado para cada calificación introducida. La clase LibroCalificaciones también contiene el método mostrarReporteCalif (líneas 98 a 122), el cual imprime en pantalla un reporte que contiene el total de todas las califi caciones introducidas, el promedio de las mismas y el número de estudiantes que recibieron cada letra de califi cación.\nExaminaremos estos métodos con más detalle. La línea 48 en el método introducirCalif declara la variable calificacion que almacenará la entrada del usuario. Las líneas 50 a 54 piden al usuario que introduzca califi caciones enteras y escriba el indicador de fin de archivo para terminar la entrada. El indicador de fin de archivo es una combinación de teclas dependiente del sistema, que el usuario introduce para indicar que no hay más datos que introducir. En el capítulo 14, Archivos y flujos, veremos cómo se utiliza el indicador de fi n de archivo cuando un programa lee su entrada desde un archivo. En los sistemas UNIX/Linux/Mac OS X, el fi n de archivo se introduce escribiendo la secuencia\n\u0026lt;ctrl\u0026gt; d en una línea por sí sola. Esta notación signifi ca que hay que oprimir al mismo tiempo la tecla ctrl y la tecla d. En los sistemas Windows, para introducir el fi n de archivo se escribe\n\u0026lt;ctrl\u0026gt; z La instrucción while (líneas 57 a 65) obtiene la entrada del usuario. La condición en la línea 57 llama al método hasNext de Scanner para determinar si hay más datos a introducir. Este método devuelve el valor boolean true si hay más datos; en caso contrario, devuelve false. Después, el valor devuelto se utiliza como el valor de la condición en la instrucción while. Mientras no se haya escrito el indicador de fin de archivo, el método hasNext devolverá true.\nLa línea 59 recibe como entrada un valor del usuario. La línea 60 utiliza el operador += para sumar calificacion a total. La línea 61 incrementa contadorCalif. El método mostrarReporteCalif de la clase utiliza estas variables para calcular el promedio de las calificaciones. La línea 64 llama al método incrementarContadorCalifLetra de la clase (declarado en las líneas 69 a 95) para incrementar el contador de letra de califi cación apropiado, con base en la calificación numérica introducida.\nEl método incrementarContadoraCalifLetra contiene una instrucción switch (líneas 72 a 94) que determina cuál contador se debe incrementar. En este ejemplo, suponemos que el usuario introduce una calificación válida en el rango de 0 a 100. Una califi cación en el rango de 90 a 100 representa la A: de 80 a 89, la B; de 70 a 79, la C; de 60 a 69, la D y de 0 a 59, la F. La instrucción switch consiste en un bloque que contiene una secuencia de etiquetas case y una instrucción case default opcional. Estas etiquetas se utilizan en este ejemplo para determinar cuál contador se debe incrementar, con base en la calificación.\nCuando el fl ujo de control llega al switch, el programa evalúa la expresión entre paréntesis (calificacion / 10) que va después de la palabra clave switch. A esto se le conoce como la expresión de control de la instrucción switch. El programa compara el valor de la expresión de control (que se debe evaluar como un valor entero de tipo byte, char, short o int) con cada una de las etiquetas case. La expresión de control de la línea 72 realiza la división entera, que trunca la parte fraccionaria del resultado. Por ende, cuando dividimos cualquier valor en el rango de 0 a 100 entre 10, el resultado es siempre un valor de 0 a 10. Utilizamos varios de estos valores en nuestras etiquetas case. Por ejemplo, si el usuario introduce el entero 85, la expresión de control se evalúa como el valor int 8. La instrucción switch compara a 8 con cada etiqueta case. Si ocurre una coincidencia (case 8: en la línea 79), el programa ejecuta las instrucciones para esa instrucción case. Para el entero 8, la línea 80 incrementa a bCuenta, ya que una califi cación entre 80 y 89 es una B. La instrucción break (línea 81) hace que el control del programa proceda con la primera instrucción después del switch; en este programa, llegamos al final del cuerpo del método incrementarContadorCalifLetra, por lo que el control regresa a la línea 65 en el método introducirCalif (la primeralínea después de la llamada a incrementarContadorCalifLetra). Esta línea marca el fin del cuerpo del ciclo while que recibe las calificaciones de entrada (líneas 57 a 65), por lo que el control fluye hacia la condición del while (línea 57) para determinar si el ciclo debe seguir ejecutándose.\nLas etiquetas case en nuestro switch evalúan explícitamente los valores 10, 9, 8, 7 y 6. Observe los casos en las líneas 74 y 75, que evalúan los valores 9 y 10 (los cuales representan la califi cación A). Al listar las etiquetas case en forma consecutiva, sin instrucciones entre ellas, pueden ejecutar el mismo conjunto de instrucciones; cuando la expresión de control se evalúa como 9 o 10, se ejecutan las instrucciones de las líneas 76 y 77. La instrucción switch no cuenta con un mecanismo para evaluar rangos de valores, por lo que cada valor que deba evaluarse se tiene que listar en una etiqueta case separada. Observe que cada case puede tener varias instrucciones. La instrucción switch es distinta de otras instrucciones de control, en cuanto a que no requiere llaves alrededor de varias instrucciones en cada case.\nSin instrucciones break, cada vez que ocurre una coincidencia en el switch, se ejecutan las instrucciones para ese case y los subsiguientes hasta encontrar una instrucción break o el fi nal del switch. A menudo a esto se le conoce como que las etiquetas case “se pasarían” hacia las instrucciones en las etiquetas case subsiguientes.\nDEITEL, PAUL J. Y HARVEY M. DEITE, (2008) Java como programar. Recuperardo el 13 de junio de 2023\n","date":"16 mayo 2023","permalink":"/platform/java/curso/dia9/switch/","section":"Javae","summary":"En los días anteriores sobre la instrucción if de selección simple y la instrucción if\u0026hellip;else de selección doble.","title":"Estructura  switch"},{"content":"Expresiones Lambda en Java # Las expresiones lambda son una característica introducida en Java 8 que permite escribir de forma más concisa y expresiva funciones anónimas. Proporcionan una manera elegante de trabajar con interfaces funcionales, lo que simplifica el código y mejora la legibilidad. En esta explicación, abordaremos la sintaxis de las expresiones lambda, su funcionamiento y proporcionaremos dos ejercicios para practicar en clase.\nSintaxis de las Expresiones Lambda # La sintaxis básica de una expresión lambda consta de tres partes:\n(parámetros) -\u0026gt; {cuerpo} Los parámetros representan los datos de entrada que toma la expresión lambda. El operador de flecha (-\u003e) separa los parámetros del cuerpo de la expresión lambda. El cuerpo contiene el código ejecutable de la expresión lambda. A continuación, se muestra un ejemplo básico de una expresión lambda que suma dos números:\n(int a, int b) -\u0026gt; { return a + b; } En este caso, la expresión lambda toma dos parámetros a y b de tipo entero, y devuelve la suma de los dos números.\nFuncionamiento de las Expresiones Lambda # Las expresiones lambda se basan en interfaces funcionales, que son interfaces que tienen un único método abstracto. La expresión lambda se puede utilizar para implementar el método abstracto de la interfaz funcional de manera concisa.\nPara utilizar una expresión lambda, es necesario que la interfaz funcional correspondiente esté presente en Java. Algunas interfaces funcionales predefinidas en Java incluyen Predicate, Consumer, Supplier y Function, entre otras. Estas interfaces proporcionan un conjunto de métodos abstractos que se pueden implementar utilizando expresiones lambda.\nA continuación, se muestra un ejemplo de cómo utilizar una expresión lambda con la interfaz funcional Predicate para verificar si un número es par:\nimport java.util.function.Predicate; public class EjemploLambda { public static void main(String[] args) { Predicate\u0026lt;Integer\u0026gt; esPar = (num) -\u0026gt; num % 2 == 0; boolean resultado = esPar.test(4); System.out.println(\u0026#34;¿Es 4 un número par? \u0026#34; + resultado); } } En este ejemplo, definimos una expresión lambda que toma un número como parámetro y devuelve true si es par y false si no lo es. Utilizamos el método test() de la interfaz Predicate para aplicar la expresión lambda al número 4 y obtener el resultado.\nEjercicios para Practicar en Clase # Aquí tienes dos ejercicios para practicar el uso de expresiones lambda en clase:\nEjercicio 1: Filtrar una Lista Escribe un programa que tome una lista de números enteros y utilice una expresión lambda para filtrar los números pares. Luego, imprime la lista resultante.\n","date":"16 mayo 2023","permalink":"/platform/java/curso/dia13/expresionlambda/","section":"Javae","summary":"Expresiones Lambda en Java # Las expresiones lambda son una característica introducida en Java 8 que permite escribir de forma más concisa y expresiva funciones anónimas.","title":"Expresión Lambda"},{"content":"La instrucción for en Java es una estructura de control que permite repetir un bloque de código un número específico de veces. Es especialmente útil cuando se conoce la cantidad exacta de repeticiones necesarias.\nSu sintaxis es la siguiente:\nLos siguientes ejemplos muestran técnicas para modifi car la variable de control en una instrucción for. En cada caso, escribimos el encabezado for apropiado. Observe el cambio en el operador relacional para los ciclos que decrementan la variable de control.\nModifi car la variable de control de 1 a 100 en incrementos de 1. for ( int i = 1; i \u003c= 100; i++ ) Modifi car la variable de control de 100 a 1 en decrementos de 1. for ( int i = 100; i \u003e= 1; i-- ) Modifi car la variable de control de 7 a 77 en incrementos de 7. for ( int i = 7; i \u003c= 77; i += 7 ) Modifi car la variable de control de 20 a 2 en decrementos de 2. for ( int i = 20; i \u003e= 2; i -= 2 ) Modifi car la variable de control con la siguiente secuencia de valores: 2, 5, 8, 11, 14, 17, 20. for ( int i = 2; i \u003c= 20; i += 3 ) Modifi car la variable de control con la siguiente secuencia de valores: 99, 88, 77, 66, 55, 44, 33, 22, 11, 0. for ( int i = 99; i \u003e= 0; i -= 11 ) ","date":"16 mayo 2023","permalink":"/platform/java/curso/dia7/for/","section":"Javae","summary":"La instrucción for en Java es una estructura de control que permite repetir un bloque de código un número específico de veces.","title":"For"},{"content":"Introducción a foreach en Java # El bucle \u0026ldquo;foreach\u0026rdquo; en Java, también conocido como \u0026ldquo;for-each\u0026rdquo;, es una forma simplificada de iterar sobre elementos de una colección o matriz. Fue introducido en Java 5 como una mejora para trabajar con colecciones y arrays de manera más eficiente y legible. El bucle foreach se utiliza para recorrer elementos sin necesidad de usar índices o contadores, lo que lo hace más sencillo y menos propenso a errores.\nSintaxis y Funcionalidades de foreach # La sintaxis básica del bucle foreach es la siguiente:\nfor (tipo elemento : coleccion) { // Cuerpo del bucle } Donde:\n\"tipo\" es el tipo de dato de los elementos en la colección. \"elemento\" es la variable que se utilizará para representar cada elemento en la iteración. \"coleccion\" es la colección o matriz que se desea recorrer. El bucle foreach recorre automáticamente cada elemento en la colección y ejecuta el código dentro del bloque del bucle para cada elemento. Usos y Ejemplos de foreach en Java # El bucle foreach es ampliamente utilizado para recorrer colecciones y matrices en Java. Algunos de los usos comunes incluyen:\nRecorrer una lista de objetos para realizar operaciones en cada elemento. Iterar sobre un mapa para acceder a las claves o valores. Recorrer un array para realizar cálculos o manipulaciones en los elementos. A continuación, se presentan ejemplos comentados de uso de foreach en diferentes situaciones. Ejemplos # List\u0026lt;String\u0026gt; frutas = Arrays.asList(\u0026#34;manzana\u0026#34;, \u0026#34;pera\u0026#34;, \u0026#34;plátano\u0026#34;); for (String fruta : frutas) { System.out.println(fruta); } En este ejemplo, utilizamos el bucle foreach para recorrer una lista de frutas e imprimir cada fruta en una línea separada.\nMap\u0026lt;Integer, String\u0026gt; alumnos = new HashMap\u0026lt;\u0026gt;(); alumnos.put(1, \u0026#34;Juan\u0026#34;); alumnos.put(2, \u0026#34;María\u0026#34;); alumnos.put(3, \u0026#34;Pedro\u0026#34;); for (Map.Entry\u0026lt;Integer, String\u0026gt; entry : alumnos.entrySet()) { int numeroAlumno = entry.getKey(); String nombreAlumno = entry.getValue(); System.out.println(\u0026#34;Alumno #\u0026#34; + numeroAlumno + \u0026#34;: \u0026#34; + nombreAlumno); } En este ejemplo, utilizamos el bucle foreach para iterar sobre un mapa que contiene los nombres de los alumnos asociados a sus números de estudiante. El bucle foreach nos permite acceder a las claves y valores de cada entrada en el mapa.\nint[] numeros = {1, 2, 3, 4, 5}; for (int numero : numeros) { System.out.print(numero + \u0026#34; \u0026#34;); } En este ejemplo, utilizamos el bucle foreach para recorrer un array de números enteros e imprimir cada número en la misma línea separados por espacios.\nEjercicios # Dada una lista de palabras, implementa un programa que utilice el bucle foreach para contar y mostrar las palabras que aparecen más de una vez en la lista.\nDada una matriz de números enteros, implementa un programa que utilice el bucle foreach para ordenar los números de forma ascendente y mostrarlos, además de definir cuales se repiten y cuales se repiten más.\n","date":"16 mayo 2023","permalink":"/platform/java/curso/dia15/foreach/","section":"Javae","summary":"Introducción a foreach en Java # El bucle \u0026ldquo;foreach\u0026rdquo; en Java, también conocido como \u0026ldquo;for-each\u0026rdquo;, es una forma simplificada de iterar sobre elementos de una colección o matriz.","title":"Foreach"},{"content":" 2 // Clase LibroCalificaciones que contiene una variable de instancia nombreDelCurso 3 // y métodos para establecer y obtener su valor. 4 5 public class LibroCalificaciones 6 { 7 private String nombreDelCurso; // nombre del curso para este LibroCalificaciones 8 9 // método para establecer el nombre del curso 10 public void establecerNombreDelCurso( String nombre ) 11 { 12 nombreDelCurso = nombre; // almacena el nombre del curso 13 } // fin del método establecerNombreDelCurso 14 15 // método para obtener el nombre del curso 16 public String obtenerNombreDelCurso() 17 { 18 return nombreDelCurso; 19 } // fin del método obtenerNombreDelCurso 20 21 // muestra un mensaje de bienvenida al usuario de LibroCalificaciones 22 public void mostrarMensaje() 23 { 24 // esta instrucción llama a obtenerNombreDelCurso para obtener el 25 // nombre del curso que representa este LibroCalificaciones 26 System.out.printf( “Bienvenido al libro de calificaciones para\\n%s!\\n”, 27 obtenerNombreDelCurso() ); 28 } // fin del método mostrarMensaje 29 30 } // fin de la clase LibroCalificaciones Cuando se crea un objeto de la clase LibroCalificaciones, su variable de instancia nombreCurso se inicializa con null de manera predeterminada. ¿Qué pasa si usted desea proporcionar el nombre de un curso a la hora de crear un objeto LibroCalificaciones? Cada clase que usted declare puede proporcionar un constructor, el cual puede utilizarse para inicializar un objeto de una clase al momento de crear ese objeto. De hecho, Java requiere una llamada al constructor para cada objeto que se crea.\nLa palabra clave new llama al constructor de la clase para realizar la inicialización. La llamada al constructor se indica mediante el nombre de la clase, seguido de paréntesis; el constructor debe tener el mismo nombre que la clase. Por ejemplo, la línea 14 de la fi gura 3.8 primero utiliza new para crear un objeto LibroCalificaciones. Los paréntesis vacíos después de \u0026ldquo;new LibroCalificaciones\u0026rdquo; indican una llamada sin argumentos al constructor de la clase. De manera predeterminada, el compilador proporciona un constructor predeterminado sin parámetros, en cualquier clase que no incluya un constructor en forma explícita. Cuando una clase sólo tiene el constructor predeterminado, sus variables de instancia se inicializan con sus valores predeterminados. Las variables de los tipos char, byte, short, int, long, float y double se inicializan con 0, las variables de tipo boolean se inicializan con false, y las variables de tipo por referencia se inicializan con null.\nCuando usted declara una clase, puede proporcionar su propio constructor para especifi car una inicialización personalizada para los objetos de su clase. Por ejemplo, tal vez un programador quiera especifi car el nombre de un curso para un objeto LibroCalificaciones cuando se crea este objeto, como en\nLibroCalificaciones miLibroCalificaciones = new LibroCalificaciones( \u0026ldquo;CS101 Introduccion a la programacion en Java\u0026rdquo; );\nEn este caso, el argumento \u0026ldquo;CS101 Introduccion a la programacion en Java\u0026rdquo; se pasa al constructor del objeto LibroCalificaciones y se utiliza para inicializar el nombreDelCurso. La instrucción anterior requiere que la clase proporcione un constructor con un parámetro String.\n2 // La clase LibroCalificaciones con un constructor para inicializar el nombre del curso. 3 4 public class LibroCalificaciones 5 { 6 private String nombreDelCurso; // nombre del curso para este LibroCalificaciones 7 8 // el constructor inicializa nombreDelCurso con el objeto String que se provee como argumento 9 public LibroCalificaciones( String nombre ) 10 { 11 nombreDelCurso = nombre; // inicializa nombreDelCurso 12 } // fin del constructor 13 14 // método para establecer el nombre del curso 15 public void establecerNombreDelCurso( String nombre ) 16 { 17 nombreDelCurso = nombre; // almacena el nombre del curso 18 } // fin del método establecerNombreDelCurso 19 20 // método para obtener el nombre del curso 21 public String obtenerNombreDelCurso() 22 { 23 return nombreDelCurso; 24 } // fin del método obtenerNombreDelCurso 25 26 // muestra un mensaje de bienvenida al usuario de LibroCalificaciones 27 public void mostrarMensaje() 28 { 29 // esta instrucción llama a obtenerNombreDelCurso para obtener el 30 // nombre del curso que este LibroCalificaciones representa 31 System.out.printf( “Bienvenido al Libro de calificaciones para\\n%s!\\n”, 32 obtenerNombreDelCurso() ); 33 } // fin del método mostrarMensaje 34 35 } // fin de la clase LibroCalificaciones Las líneas 9 a la 12 declaran el constructor para la clase LibroCalificaciones. Un constructor debe tener el mismo nombre que su clase. Al igual que un método, un constructor especifi ca en su lista de parámetros los datos que requiere para realizar su tarea. Cuando usted crea un nuevo objeto, estos datos se colocan en los paréntesis que van después del nombre de la clase. La línea 9 indica que el constructor de la clase LibroCalificaciones tiene un parámetro String llamado nombre. El nombre que se pasa al constructor se asigna a la variable de instancia nombreCurso en la línea 11 del cuerpo del constructor.\nEl siguiente código demuestra la inicialización de objetos LibroCalificaciones mediante el uso de este constructor. Las líneas 11 y 12 crean e inicializan el objeto libroCalificaciones1 de LibroCalificaciones. El constructor de la clase LibroCalificaciones se llama con el argumento \u0026ldquo;CS101 Introduccion a la programacion en Java\u0026rdquo; para inicializar el nombre del curso. La expresión de creación de la instancia de la clase a la derecha del signo = en las líneas 11 y 12 devuelve una referencia al nuevo objeto, el cual se asigna a la variable libroCalificaciones1. Las líneas 13 y 14 repiten este proceso para otro objeto LibroCalificaciones llamado libroCalificaciones2, pero esta vez se le pasa el argumento \u0026ldquo;CS102 Estructuras de datos en Java\u0026rdquo; para inicializar el nombre del curso para libroCalificaciones2. Las líneas 17 a la 20 utilizan el método obtenerNombreDelCurso de cada objeto para obtener los nombres de los cursos y mostrar que, sin duda, se inicializaron en el momento en el que se crearon los objetos. En la introducción a la sección 3.5, aprendió que cada instancia (es decir, objeto) de una clase contiene su propia copia de las variables de instancia de la clase. La salida confirma que cada objeto LibroCalificaciones mantiene su propia copia de la variable de instancia nombreCurso.\n2 // El constructor de LibroCalificaciones se utiliza para especificar el 3 // nombre del curso cada vez que se crea cada objeto LibroCalificaciones. 4 5 public class PruebaLibroCalificaciones 6 { 7 // el método main empieza la ejecución del programa 8 public static void main( String args[] ) 9 { 10 // crea objeto LibroCalificaciones 11 LibroCalificaciones libroCalificaciones1 = new LibroCalificaciones( 12 “CS101 Introduccion a la programacion en Java” ); 13 LibroCalificaciones libroCalificaciones2 = new LibroCalificaciones( 14 “CS102 Estructuras de datos en Java” ); 15 16 // muestra el valor inicial de nombreDelCurso para cada LibroCalificaciones 17 System.out.printf( “El nombre del curso de libroCalificaciones1 es: %s\\n”, 18 libroCalificaciones1.obtenerNombreDelCurso() ); 19 System.out.printf( “El nombre del curso de libroCalificaciones2 es: %s\\n”, 20 libroCalificaciones2.obtenerNombreDelCurso() ); 21 } // fin de main 22 23 } // fin de la clase PruebaLibroCalificaciones Al igual que los métodos, los constructores también pueden recibir argumentos. No obstante, una importante diferencia entre los constructores y los métodos es que los constructores no pueden devolver valores, por lo cual no pueden especifi car un tipo de valor de retorno (ni siquiera void). Por lo general, los constructores se declaran como public. Si una clase no incluye un constructor, las variables de instancia de esa clase se inicializan con sus valores predeterminados. Si un programador declara uno o más constructores para una clase, el compilador de Java no creará un constructor predeterminado para esa clase\n","date":"16 mayo 2023","permalink":"/platform/java/curso/dia5/inicializacion/","section":"Javae","summary":"2 // Clase LibroCalificaciones que contiene una variable de instancia nombreDelCurso 3 // y métodos para establecer y obtener su valor.","title":"Inicialización de objetos mediante constructores"},{"content":"Java también cuenta con las instrucciones break y continue etiquetadas, para usarlas en los casos en los que es conveniente alterar el fl ujo de control en las instrucciones de control anidadas. En el apéndice N hablaremos sobre las instrucciones break y continue etiqueta.\nEn el contexto de programación, el break es una intrucción que utilizamos para salir de un bucle como lo puede ser un for o un while, antes de que haya completado la intrucción con normalidad. Cuando se encuentra una declaración \u0026ldquo;break\u0026rdquo;, el programa sale inmediatamente del bucle o de la estructura de control en la que se encuentra y continúa con la siguiente instrucción después del bucle o estructura.\nEn el siguiente ejemplo podemos ver el funcionamiento de este:\npublic class EjemploBreak { public static void main(String[] args) { int[] numeros = {1, 2, 3, 4, 5}; for (int numero : numeros) { System.out.println(numero); if (numero == 3) { break; // Salir del bucle cuando el número sea 3 } } } } En este ejemplo, se declara un arreglo de números y se itera sobre ellos utilizando un bucle \u0026ldquo;for-each\u0026rdquo;. En cada iteración, se imprime el número actual. Sin embargo, si el número es igual a 3, se encuentra la declaración \u0026ldquo;break\u0026rdquo; y el bucle se interrumpe, saliendo del bucle antes de que todos los números sean impresos.\n","date":"16 mayo 2023","permalink":"/platform/java/curso/dia9/break/","section":"Javae","summary":"Java también cuenta con las instrucciones break y continue etiquetadas, para usarlas en los casos en los que es conveniente alterar el fl ujo de control en las instrucciones de control anidadas.","title":"Instrucciones break y continue"},{"content":"Intrucción if # Los programas utilizan instrucciones de selección para elegir entre los cursos alternativos de acción. Por ejemplo, suponga que la califi cación para aprobar un examen es 60. La instrucción en seudocódigo\nSi la califi cación del estudiante es mayor o igual a 60 Imprimir “Aprobado” determina si la condición “la califi cación del estudiante es mayor o igual a 60” es verdadera o falsa. Si la condición es verdadera se imprime “Aprobado”, y se “ejecuta” en orden la siguiente instrucción en seudocódigo. (Recuerde que el seudocódigo no es un verdadero lenguaje de programación). Si la condición es falsa se ignora la instrucción Imprimir, y se ejecuta en orden la siguiente instrucción en seudocódigo. La sangría de la segunda línea de esta instrucción de selección es opcional, pero se recomienda ya que enfatiza la estructura inherente de los programas estructurados La instrucción anterior if en seudocódigo puede escribirse en Java de la siguiente manera:\nif ( calificacionEstudiante \u0026gt;= 60 ) System.out.println( \u0026quot;Aprobado\u0026quot; ); Observe que el código en Java corresponde en gran medida con el seudocódigo. Ésta es una de las propiedades que hace del seudocódigo una herramienta de desarrollo de programas tan útil.\nEn la siguiente figura muestra la instrucción if de selección simple. Esta fi gura contiene lo que quizá sea el símbolo más importante en un diagrama de actividad: el rombo o símbolo de decisión, el cual indica que se tomará una decisión. El flujo de trabajo continuará a lo largo de una ruta determinada por las condiciones de guardia asociadas de ese símbolo, que pueden ser verdaderas o falsas. Cada flecha de transición que sale de un símbolo de decisión tiene una condición de guardia (especifi cada entre corchetes, a un lado de la flecha de transición). Si una condición de guardia es verdadera, el flujo de trabajo entra al estado de acción al que apunta la flecha de transición. Ssi la calificación es mayor o igual a 60, el programa imprime “Aprobado” y luego se dirige al estado final de esta actividad. Si la calificación es menor a 60, el programa se dirige inmediatamente al estado final sin mostrar ningún mensaje.\nLa instrucción if es una instrucción de control de una sola entrada/una sola salida. Pronto veremos que los diagramas de actividad para las instrucciones de control restantes también contienen estados iniciales, flechas de transición, estados de acción que indican las acciones a realizar, símbolos de decisión (con sus condiciones de guardia asociadas) que indican las decisiones a tomar, y estados finales. Esto es consistente con el modelo de programación acción/decisión que hemos estado enfatizando.\nImagine siete cajones, en donde cada uno contiene sólo un tipo de instrucción de control de Java. Todas las instrucciones de control están vacías. Su tarea es ensamblar un programa a partir de tantas instrucciones de control de cada tipo como lo requiera el algoritmo, combinando esas instrucciones de control en sólo dos formas posibles (apilando o anidando), y después llenando los estados de acción y las decisiones con expresiones de acción y condiciones de guardia, en una manera que sea apropiada para el algoritmo. Hablaremos sobre la variedad de formas en que pueden escribirse las acciones y las decisiones.\nDEITEL, PAUL J. Y HARVEY M. DEITE, (2008) Java como programar. Recuperardo el 13 de junio de 2023\nDoble if..else # La instrucción if de selección simple realiza una acción indicada solamente cuando la condición es verdadera (true); de no ser así, se evita dicha acción. La instrucción if\u0026hellip;else de selección doble permite al programador especifi car una acción a realizar cuando la condición es verdadera, y otra distinta cuando la condición es falsa. Por ejemplo, la instrucción en seudocódigo:\nSi la califi cación del estudiante es mayor o igual a 60 Imprimir “Aprobado” De lo contrario Imprimir “Reprobado imprime “Aprobado” si la califi cación del estudiante es mayor o igual a 60, y, “Reprobado” si la califi cación del estudiante es menor a 60. En cualquier caso, después de que ocurre la impresión se “ejecuta”, según la secuencia, la siguiente instrucción en seudocódigo.\nLa instrucción anterior if\u0026hellip;else en seudocódigo puede escribirse en Java como:\nif ( calificacion \u0026gt;= 60 ) System.out.println( \u0026#34;Aprobado\u0026#34; ); else System.out.println( \u0026#34;Reprobado\u0026#34; ); Observe que el cuerpo de la instrucción else también tiene sangría. Cualquiera que sea la convención de sangría que usted elija, debe aplicarla consistentemente en todos sus programas. Es difícil leer programas que no obedecen las convenciones de espaciado uniformes.\nOtro ejemplo que tenemos de if else es:\npublic class IfElseExample { public static void main(String[] args) { int edad = 18; if (edad \u0026gt;= 18) { System.out.println(\u0026#34;Eres mayor de edad\u0026#34;); } else { System.out.println(\u0026#34;Eres menor de edad\u0026#34;); } } } En este ejemplo, utilizamos la estructura if-else para determinar si una persona es mayor o menor de edad según su edad.\nLa variable edad se inicializa con el valor 18. La condición edad \u0026gt;= 18 se evalúa, lo cual verifica si la edad es igual o mayor que 18. Si esta condición es verdadera, se ejecuta el bloque de código dentro del if. En este caso, como la condición es verdadera (la edad es igual a 18), se muestra el mensaje \u0026ldquo;Eres mayor de edad\u0026rdquo; en la consola. Si la condición es falsa, se ejecuta el bloque de código dentro del else. En este caso, si la edad fuera menor a 18, se mostraría el mensaje \u0026ldquo;Eres menor de edad\u0026rdquo;. La estructura if-else en Java permite tomar decisiones basadas en una condición. Si la condición dentro del if es verdadera, se ejecuta el bloque de código dentro de ese if. Si la condición es falsa, se ejecuta el bloque de código dentro del else. Esto nos permite controlar el flujo del programa según las diferentes situaciones.\nEs importante tener en cuenta que el bloque else es opcional. Si solo se desea ejecutar un bloque de código cuando la condición del if es verdadera, no es necesario incluir el else.\nOperadores condicionales # Java cuenta con el operador condicional (?:), que en ocasiones puede utilizarse en lugar de una instrucción if\u0026hellip;else. Éste es el único operador ternario en Java; es decir, que utiliza tres operandos. En conjunto, los operandos y el símbolo ?: forman una expresión condicional. El primer operando (a la izquierda del ?) es una expresión booleana (es decir, una condición que se evalúa a un valor booleano: true o false), el segundo operando (entre el ? y :) es el valor de la expresión condicional si la expresión booleana es verdadera, y el tercer operando (a la derecha de :) es el valor de la expresión condicional si la expresión booleana se evalúa como false. Por ejemplo, la instrucción\nSystem.out.println( calificacionEstudiante \u0026gt;= 60 ? \u0026quot;Aprobado\u0026quot; : \u0026quot;Reprobado\u0026quot; ); imprime el valor del argumento de println, que es una expresión condicional. La expresión condicional en esta instrucción produce como resultado la cadena \u0026ldquo;Aprobado\u0026rdquo; si la expresión booleana calificacionEstudiante \u0026gt;= 60 es verdadera, o produce como resultado la cadena \u0026ldquo;Reprobado\u0026rdquo; si la expresión booleana es falsa. Por lo tanto, esta instrucción con el operador condicional realiza en esencia la misma función que la instrucción if\u0026hellip;else que se mostró anteriormente, en esta sección. La precedencia del operador condicional es baja, por lo que toda la expresión condicional se coloca normalmente entre paréntesis. Pronto veremos que las expresiones cpndicionales pueden usarse en algunas situaciones en las que no se pueden utilizar if .. else.\nComo lo son:\nOperador de igualdad (==): Compara si dos valores son iguales. Operador de desigualdad (!=): Compara si dos valores son diferentes. Operador de mayor que (\u003e): Compara si un valor es mayor que otro. Operador de menor que (\u003c): Compara si un valor es menor que otro. Operador de mayor o igual que (\u003e=): Compara si un valor es mayor o igual que otro. Operador de menor o igual que (\u003c=): Compara si un valor es menor o igual que otro. Operador lógico AND (\u0026\u0026): Evalúa dos condiciones y devuelve true si ambas son verdaderas. Operador lógico OR (||): Evalúa dos condiciones y devuelve true si al menos una de ellas es verdadera. Operador lógico NOT (!): Niega el resultado de una condición, es decir, si la condición es true, devuelve false, y si la condición es false, devuelve true. Estos operadores se utilizan en combinación con las estructuras de control, como if, else, while, for, entre otras, para tomar decisiones y controlar el flujo del programa en base a condiciones lógicas. ","date":"16 mayo 2023","permalink":"/platform/java/curso/dia6/intruccionif/","section":"Javae","summary":"Intrucción if # Los programas utilizan instrucciones de selección para elegir entre los cursos alternativos de acción.","title":"Intrucción if e if else"},{"content":"Introducción a Java Generics # Java Generics es una característica del lenguaje que permite crear clases, interfaces y métodos que pueden trabajar con diferentes tipos de datos de manera segura y sin problemas de tipos en tiempo de compilación. Proporciona una forma de parametrizar clases y métodos para que puedan ser reutilizables con diferentes tipos de datos, lo que mejora la legibilidad y la seguridad del código.\nSintaxis de Java Generics # La sintaxis básica de Java Generics utiliza paréntesis angulares (\u0026lt;\u0026gt;) para indicar el tipo genérico. Se coloca el tipo genérico entre los paréntesis angulares al definir una clase, una interfaz o un método.\nclass NombreClase\u0026lt;T\u0026gt; { // Código de la clase } interface NombreInterfaz\u0026lt;T\u0026gt; { // Código de la interfaz } class NombreClase { \u0026lt;T\u0026gt; void nombreMetodo(T parametro) { // Código del método } } En el ejemplo anterior, es el tipo genérico que se utiliza en la definición de la clase, la interfaz y el método. Puede elegir cualquier identificador para representar el tipo genérico.\nFuncionamiento de Java Generics # El objetivo principal de Java Generics es proporcionar reutilización de código y seguridad de tipos en tiempo de compilación. Al utilizar generics, podemos especificar el tipo de datos con el que queremos trabajar al crear instancias de clases o al invocar métodos.\nPor ejemplo, podemos crear una lista genérica que almacene cualquier tipo de datos:\nList\u0026lt;String\u0026gt; listaCadenas = new ArrayList\u0026lt;\u0026gt;(); listaCadenas.add(\u0026#34;Hola\u0026#34;); listaCadenas.add(\u0026#34;Mundo\u0026#34;); String primerElemento = listaCadenas.get(0); System.out.println(primerElemento); En este ejemplo, hemos creado una lista genérica utilizando List, lo que significa que solo podemos agregar y obtener elementos de tipo String. Esto garantiza que solo se puedan agregar cadenas a la lista y que los elementos que obtengamos serán de tipo String.\nEjercicios Prácticos # Crea una clase genérica llamada Contenedor que pueda almacenar cualquier tipo de dato. La clase debe tener métodos para agregar y obtener elementos del contenedor.\nCrea un método genérico llamado imprimirLista() que acepte una lista genérica y la imprima en la consola.\n","date":"16 mayo 2023","permalink":"/platform/java/curso/dia13/javagenerics/","section":"Javae","summary":"Introducción a Java Generics # Java Generics es una característica del lenguaje que permite crear clases, interfaces y métodos que pueden trabajar con diferentes tipos de datos de manera segura y sin problemas de tipos en tiempo de compilación.","title":"Java Generics"},{"content":"List y Array # En Java, List es una interfaz que define una colección ordenada de elementos, mientras que ArrayList es una de las implementaciones más comunes de esta interfaz. En esta explicación, te proporcionaré una descripción detallada de List y ArrayList, junto con ejemplos explicados para ilustrar su uso.\nList # List es una interfaz que extiende la interfaz Collection en Java. Define una colección ordenada de elementos, lo que significa que los elementos se mantienen en un orden específico según se agregan. Algunas características clave de List son:\nPuede contener elementos duplicados. Permite el acceso a los elementos por índice. Proporciona métodos para agregar, eliminar, buscar y manipular elementos. La sintaxis básica para declarar una lista es la siguiente:\nList\u0026lt;tipo\u0026gt; nombreLista = new ArrayList\u0026lt;\u0026gt;(); Donde tipo es el tipo de datos de los elementos que se almacenarán en la lista y nombreLista es el nombre que le asignas a la lista.\nA continuación, se muestra un ejemplo de cómo utilizar List en Java:\nimport java.util.List; import java.util.ArrayList; public class EjemploList { public static void main(String[] args) { List\u0026lt;String\u0026gt; listaNombres = new ArrayList\u0026lt;\u0026gt;(); // Agregar elementos a la lista listaNombres.add(\u0026#34;Juan\u0026#34;); listaNombres.add(\u0026#34;María\u0026#34;); listaNombres.add(\u0026#34;Pedro\u0026#34;); // Acceder a los elementos de la lista String primerNombre = listaNombres.get(0); System.out.println(\u0026#34;Primer nombre: \u0026#34; + primerNombre); // Iterar sobre la lista for (String nombre : listaNombres) { System.out.println(nombre); } // Eliminar un elemento de la lista listaNombres.remove(\u0026#34;María\u0026#34;); System.out.println(\u0026#34;Lista después de eliminar un nombre: \u0026#34; + listaNombres); } } En este ejemplo, creamos una lista de nombres utilizando ArrayList. Luego, agregamos elementos a la lista, accedemos a los elementos utilizando el método get(), iteramos sobre la lista utilizando un bucle for-each y eliminamos un elemento utilizando el método remove().\nArray # ArrayList es una implementación de la interfaz List en Java. Internamente, utiliza un arreglo dinámico para almacenar los elementos y proporciona métodos adicionales para agregar, eliminar y manipular elementos de manera eficiente. Algunas características clave de ArrayList son:\nProporciona acceso rápido a los elementos mediante índices. Aumenta automáticamente su tamaño según se agregan elementos. Permite agregar elementos en cualquier posición. La sintaxis básica para declarar un ArrayList es similar a la declaración de una lista:\nArrayList\u0026lt;tipo\u0026gt; nombreArrayList = new ArrayList\u0026lt;\u0026gt;(); Aquí hay un ejemplo que muestra cómo utilizar ArrayList en Java:\nimport java.util.ArrayList; public class EjemploArrayList { public static void main(String[] args) { ArrayList\u0026lt;Integer\u0026gt; numeros = new ArrayList\u0026lt;\u0026gt;(); // Agregar elementos al ArrayList numeros.add(10); numeros.add(20); numeros.add(30); // Obtener el tamaño del ArrayList int tamaño = numeros.size(); System.out.println(\u0026#34;Tamaño del ArrayList: \u0026#34; + tamaño); // Acceder a los elementos del ArrayList int primerNumero = numeros.get(0); System.out.println(\u0026#34;Primer número: \u0026#34; + primerNumero); // Iterar sobre el ArrayList for (int numero : numeros) { System.out.println(numero); } // Eliminar un elemento del ArrayList numeros.remove(1); System.out.println(\u0026#34;ArrayList después de eliminar un número: \u0026#34; + numeros); } } En este ejemplo, creamos un ArrayList de números enteros. Luego, agregamos elementos al ArrayList, obtenemos su tamaño utilizando el método size(), accedemos a los elementos utilizando el método get(), iteramos sobre el ArrayList utilizando un bucle for-each y eliminamos un elemento utilizando el método remove().\nEn resumen, List es una interfaz que define una colección ordenada de elementos, y ArrayList es una implementación común de esta interfaz. Ambos proporcionan métodos para agregar, eliminar, buscar y manipular elementos de la colección. Puedes utilizar List cuando solo necesites la funcionalidad básica de una lista, mientras que ArrayList es útil cuando necesites un rendimiento rápido de acceso a los elementos y manipulaciones frecuentes.\nArrayList # En Java, ArrayList es una clase que proporciona una implementación dinámica de un arreglo. A diferencia de los arreglos regulares, que tienen un tamaño fijo, los ArrayList pueden cambiar su tamaño dinámicamente según sea necesario. Esto los convierte en una estructura de datos muy versátil y ampliamente utilizada en programación.\nDeclaración e importación de ArrayList # Para utilizar ArrayList, primero debemos importar la clase:\nimport java.util.ArrayList; Luego, podemos declarar un ArrayList de la siguiente manera:\nArrayList\u0026lt;TipoDeDato\u0026gt; nombreArrayList = new ArrayList\u0026lt;\u0026gt;(); Reemplaza TipoDeDato con el tipo de elementos que deseas almacenar en el ArrayList, como Integer, String, Double, etc.\nAñadir elementos a un ArrayList # Para agregar elementos a un ArrayList, utilizamos el método add():\nnombreArrayList.add(elemento); Donde elemento es el valor que deseas agregar al ArrayList.\nAcceder a elementos del ArrayList # Podemos acceder a los elementos del ArrayList utilizando el método get() y proporcionando el índice del elemento que queremos obtener:\nTipoDeDato elemento = nombreArrayList.get(indice); Donde TipoDeDato es el tipo de elementos que contiene el ArrayList y indice es el índice del elemento que queremos obtener.\nModificar elementos del ArrayList # Para modificar un elemento existente en el ArrayList, utilizamos el método set() y proporcionamos el índice del elemento que deseamos modificar y el nuevo valor:\nnombreArrayList.set(indice, nuevoValor); Donde indice es el índice del elemento que queremos modificar y nuevoValor es el valor que queremos asignarle al elemento.\nEliminar elementos del ArrayList # Para eliminar elementos de un ArrayList, podemos utilizar el método remove() y proporcionar el índice del elemento que deseamos eliminar:\nnombreArrayList.remove(indice); También podemos eliminar un elemento proporcionando directamente el valor que queremos eliminar:\nnombreArrayList.remove(elemento); Tamaño del ArrayList # Podemos obtener el tamaño actual del ArrayList utilizando el método size():\nint tamaño = nombreArrayList.size(); Recorrer un ArrayList # Podemos recorrer los elementos de un ArrayList utilizando un bucle for o un bucle foreach:\n// Usando for for (int i = 0; i \u0026lt; nombreArrayList.size(); i++) { TipoDeDato elemento = nombreArrayList.get(i); // Hacer algo con el elemento } // Usando foreach for (TipoDeDato elemento : nombreArrayList) { // Hacer algo con el elemento } ArrayList de objetos personalizados # También podemos crear un ArrayList que contenga objetos de una clase personalizada que hayamos definido. Por ejemplo, si tenemos una clase Persona con atributos como nombre, edad y género, podemos crear un ArrayList de Persona de la siguiente manera:\nArrayList\u0026lt;Persona\u0026gt; listaPersonas = new ArrayList\u0026lt;\u0026gt;(); Luego podemos crear objetos Persona y agregarlos al ArrayList:\nPersona persona1 = new Persona(\u0026#34;Juan\u0026#34;, 30, \u0026#34;Masculino\u0026#34;); Persona persona2 = new Persona(\u0026#34;María\u0026#34;, 25, \u0026#34;Femenino\u0026#34;); listaPersonas.add(persona1); listaPersonas.add(persona2); El ArrayList es una estructura de datos muy útil en Java que nos permite almacenar y manipular elementos de manera dinámica. Puede adaptarse a diferentes tipos de datos y ofrece una amplia gama de métodos para agregar, acceder, modificar y eliminar elementos. Conocer y comprender cómo utilizar ArrayList es fundamental para desarrollar aplicaciones robustas y eficientes en Java.\nEjercicios para practicar # 1.- Suma de elementos en un Array Escribe un programa que tome un array de números enteros y calcule la suma de todos los elementos. El programa debe imprimir la suma total\n2.- Eliminar elementos duplicados de una Lista Escribe un programa que tome una lista de cadenas y elimine los elementos duplicados. El programa debe imprimir la lista resultante sin elementos duplicados.\n","date":"16 mayo 2023","permalink":"/platform/java/curso/dia12/listarray/","section":"Javae","summary":"List y Array # En Java, List es una interfaz que define una colección ordenada de elementos, mientras que ArrayList es una de las implementaciones más comunes de esta interfaz.","title":"List y Arrays"},{"content":"El proyecto final requiere que el usuario ingrese un número e identifique si es positivo, negativo o cero, despues de eso debe escribir el nombre del usuario e imprimir el nombre del usurio y concatenar el número que ingreso.\n","date":"16 mayo 2023","permalink":"/platform/java/curso/dia10/proyecto/","section":"Javae","summary":"El proyecto final requiere que el usuario ingrese un número e identifique si es positivo, negativo o cero, despues de eso debe escribir el nombre del usuario e imprimir el nombre del usurio y concatenar el número que ingreso.","title":"Mini proyecto"},{"content":"Se simula un sistema de gestión de empleados en una empresa. Puedes realizar las siguientes acciones:\nContratar empleado: ingresas el nombre, la edad y el salario del empleado y se agrega a la lista de empleados de la empresa. Despedir empleado: ingresas el nombre del empleado y se busca en la lista de empleados para despedirlo. Aumentar salario: ingresas el nombre del empleado y el porcentaje de aumento, y se busca en la lista de empleados para aumentar su salario. Listar empleados: muestra la lista de empleados de la empresa. Salir: finaliza el programa.\n","date":"16 mayo 2023","permalink":"/platform/java/curso/miniproyecto1/","section":"Javae","summary":"Se simula un sistema de gestión de empleados en una empresa.","title":"Mini proyecto 1"},{"content":"Modificadores de Alcance: default, private, protected, public # En Java, los modificadores de alcance (o de acceso) se utilizan para controlar la visibilidad y accesibilidad de las clases, variables, métodos y constructores en un programa. Existen cuatro modificadores de alcance en Java: default, private, protected y public. En esta explicación detallada, abordaremos cada uno de ellos y proporcionaremos ejemplos para ilustrar su uso.\nModificador de Alcance default (alcance de paquete) # Si no se especifica ningún modificador de alcance, se considera el modificador default, también conocido como alcance de paquete. Los miembros declarados con este modificador son accesibles dentro del mismo paquete (paquete o package) y no pueden ser accedidos desde paquetes diferentes.\nEjemplo:\npackage com.ejemplo.paquete; class ClaseDefault { int variableDefault; // Miembro con alcance de paquete void metodoDefault() { // Código del método } } public class Ejemplo { public static void main(String[] args) { ClaseDefault instancia = new ClaseDefault(); instancia.variableDefault = 10; // Acceso válido dentro del mismo paquete instancia.metodoDefault(); // Acceso válido dentro del mismo paquete } } Modificador de Alcance private # El modificador private restringe la visibilidad de un miembro a la clase en la que está definido. Los miembros private no son accesibles desde ninguna otra clase, incluso si pertenecen al mismo paquete. Este modificador se utiliza para encapsular y ocultar los detalles internos de una clase.\nEjemplo:\npublic class ClasePrivate { private int variablePrivada; // Miembro privado private void metodoPrivado() { // Código del método privado } } public class Ejemplo { public static void main(String[] args) { ClasePrivate instancia = new ClasePrivate(); instancia.variablePrivada = 10; // Error: No se puede acceder a un miembro privado instancia.metodoPrivado(); // Error: No se puede acceder a un método privado } } Modificador de Alcance protected # El modificador protected permite que los miembros de una clase sean accesibles dentro del mismo paquete y desde las subclases, incluso si estas están en paquetes diferentes. Esto significa que los miembros protected tienen una visibilidad más amplia que los miembros default, pero más restringida que los miembros public.\nEjemplo:\npackage com.ejemplo.paquete; public class ClasePadre { protected int variableProtegida; // Miembro protegido protected void metodoProtegido() { // Código del método protegido } } public class ClaseHija extends ClasePadre { public static void main(String[] args) { ClaseHija instancia = new ClaseHija(); instancia.variableProtegida = 10; // Acceso válido desde una subclase instancia.metodoProtegido(); // Acceso válido desde una subclase } } Modificador de Alcance public # El modificador public indica que un miembro es accesible desde cualquier parte del programa. Los miembros public pueden ser accedidos desde cualquier clase y desde cualquier paquete. Este modificador se utiliza cuando se desea que un miembro sea visible y accesible de forma global.\nEjemplo:\npublic class ClasePublic { public int variablePublica; // Miembro público public void metodoPublico() { // Código del método público } } public class Ejemplo { public static void main(String[] args) { ClasePublic instancia = new ClasePublic(); instancia.variablePublica = 10; // Acceso válido desde cualquier parte instancia.metodoPublico(); // Acceso válido desde cualquier parte } } Es importante utilizar los modificadores de alcance adecuadamente para lograr una encapsulación efectiva y un diseño de clase coherente. Recuerda que la elección correcta de los modificadores de alcance contribuye a la modularidad, reutilización y seguridad de tu código.\n","date":"16 mayo 2023","permalink":"/platform/java/curso/dia12/modificadoresdealcance/","section":"Javae","summary":"Modificadores de Alcance: default, private, protected, public # En Java, los modificadores de alcance (o de acceso) se utilizan para controlar la visibilidad y accesibilidad de las clases, variables, métodos y constructores en un programa.","title":"Modificadores de Alcance"},{"content":"En nuestra siguiente aplicación, dejaremos por un momento nuestro ejemplo práctico con la clase LibroCalificaciones para declarar una clase llamada Cuenta, la cual mantiene el saldo de una cuenta bancaria.\nLa mayoría de los saldos de las cuentas no son números enteros (por ejemplo, 0, –22 y 1024). Por esta razón, la clase Cuenta epresenta el saldo de las cuentas como un número de punto fl otante (es decir, un número con un punto decimal, como 7.33, 0.0975 o 1000.12345). Java cuenta con dos tipos primitivos para almacenar números de punto flotante en la memoria: float y double. La principal diferencia entre ellos es que las variables tipo double pueden almacenar números con mayor magnitud y detalle (es decir, más dígitos a la derecha del punto decimal; lo que también se conoce como precisión del número) que las variables float.\nLas variables de tipo float representan números de punto fl otante de precisión simple y tienen siete dígitos significativos. Las variables de tipo double representan números de punto fl otante de precisión doble. Éstos requieren el doble de memoria que las variables float y proporcionan 15 dígitos signifi cativos; aproximadamente el doble de precisión de las variables float. Para el rango de valores requeridos por la mayoría de los programas, debe bastar con las variables de tipo float, pero podemos utilizar variables tipo double para “ir a la segura”. En algunas aplicaciones, incluso hasta las variables de tipo double serán inadecuadas; dichas aplicaciones se encuentran más allá del alcance de este libro. La mayoría de los programadores representan los números de punto fl otante con el tipo double. De hecho, Java trata a todos los números de punto fl otante que escribimos en el código fuente de un programa (como 7.33 y 0.0975) como valores double de manera predeterminada. Dichos valores en el código fuente se conocen como literales de punto fl otante. En el apéndice D, Tipos primitivos, podrá consultar los rangos de los valores para los tipos float y double.\nAunque los números de punto fl otante no son siempre 100% precisos, tienen numerosas aplicaciones. Por ejemplo, cuando hablamos de una temperatura corporal “normal” de 36.8, no necesitamos una precisión con un número extenso de dígitos. Cuando leemos la temperatura en un termómetro como 36.8, en realidad podría ser 36.7999473210643. Si consideramos a este número simplemente como 36.8, está bien para la mayoría de las aplicaciones en las que se trabaja con las temperaturas corporales. Debido a la naturaleza imprecisa de los números de punto flotante, se prefi ere el tipo double al tipo float ya que las variables double pueden representar números de punto flotante con más precisión. Por esta razón, utilizaremos el tipo double a lo largo de este libro.\nLos números de punto fl otante también surgen como resultado de la división. En la aritmética convencional, cuando dividimos 10 entre 3 el resultado es 3.3333333…, y la secuencia de números 3 se repite en forma indefinida. La computadora asigna sólo una cantidad fi ja de espacio para almacenar un valor de este tipo, por lo que, sin duda, el valor de punto fl otante almacenado sólo puede ser una aproximación.\n2 // La clase Cuenta con un constructor para 3 // inicializar la variable de instancia saldo. 4 5 public class Cuenta 6 { 7 private double saldo; // variable de instancia que almacena el saldo 8 9 // constructor 10 public Cuenta( double saldoInicial ) 11 { 12 // valida que saldoInicial sea mayor que 0.0; 13 // si no lo es, saldo se inicializa con el valor predeterminado 0.0 14 if ( saldoInicial \u0026gt; 0.0 ) 15 saldo = saldoInicial; 16 } // fin del constructor de Cuenta 17 18 // abona (suma) un monto a la cuenta 19 public void abonar( double monto ) 20 { 21 saldo = saldo + monto; // suma el monto al saldo 22 } // fin del método abonar 23 24 // devuelve el saldo de la cuenta 25 public double obtenerSaldo() 26 { 27 return saldo; // proporciona el valor de saldo al método que hizo la llamada 28 } // fin del método obtenerSaldo 29 30 } // fin de la clase Cuenta La clase Cuenta contiene un constructor y dos métodos. Debido a que es común que alguien abra una cuenta para depositar dinero de inmediato, el constructor (líneas 10 a la 16) recibe un parámetro llamado saldoInicial de tipo double, el cual representa el saldo inicial de la cuenta. Las líneas 14 y 15 aseguran que saldoInicial sea mayor que 0.0. De ser así, el valor de saldoInicial se asigna a la variable de instancia saldo. En caso contrario, saldo permanece en 0.0, su valor inicial predeterminado.\nEl método abonar (líneas 19 a la 22) no devuelve datos cuando completa su tarea, por lo que su tipo de valor de retorno es void. El método recibe un parámetro llamado monto: un valor double que se sumará al saldo. La línea 21 suma monto al valor actual de saldo, y después asigna el resultado a saldo (con lo cual se sustituye el monto del saldo anterior).\nEl método obtenerSaldo (líneas 25 a la 28) permite a los clientes de la clase (es decir, otras clases que utilicen esta clase) obtener el valor del saldo de un objeto Cuenta específi co. El método especifi ca el tipo de valor de retorno double y una lista de parámetros vacía.\nObserve una vez más que las instrucciones en las líneas 15, 21 y 27 utilizan la variable de instancia saldo, aun y cuando no se declaró en ninguno de los métodos. Podemos usar saldo en estos métodos, ya que es una variable de instancia de la clase\n","date":"16 mayo 2023","permalink":"/platform/java/curso/dia4/numerosflotante/","section":"Javae","summary":"En nuestra siguiente aplicación, dejaremos por un momento nuestro ejemplo práctico con la clase LibroCalificaciones para declarar una clase llamada Cuenta, la cual mantiene el saldo de una cuenta bancaria.","title":"Números de punto flotante y double"},{"content":"Cada una de las instrucciones if, if\u0026hellip;else, while, do\u0026hellip;while y for requieren una condición para determinar cómo continuar con el fl ujo de control de un programa. Hasta ahora sólo hemos estudiado las condiciones simples, como cuenta \u0026lt;= 10, numero != valorCentinela y total \u0026gt; 1000. Las condiciones simples se expresan en términos de los operadores relacionales \u0026gt;, \u0026lt;, \u0026gt;= y \u0026lt;=, y los operadores de igualdad == y !=; cada expresión evalúa sólo una condición. Para evaluar condiciones múltiples en el proceso de tomar una decisión, ejecutamos estas pruebas en instrucciones separadas o en instrucciones if o if\u0026hellip;else anidadas. En ocasiones, las instrucciones de control requieren condiciones más complejas para determinar el fl ujo de control de un programa. Java cuenta con los operadores lógicos para que usted pueda formar condiciones más complejas, al combinar las condiciones simples. Los operadores lógicos son \u0026amp;\u0026amp; (AND condicional), || (OR condicional), \u0026amp; (AND lógico booleano), | (OR inclusivo lógico booleano), ^ (OR exclusivo lógico booleano) y ! (NOT lógico).\nLos operadores lógicos en Java son utilizados para combinar o negar expresiones booleanas y evaluar su veracidad. Los operadores lógicos más comunes son:\nOperador AND (\u0026\u0026): Retorna true si ambas expresiones son verdaderas. Si alguna de las expresiones es falsa, el resultado será false. Operador OR (||): Retorna true si al menos una de las expresiones es verdadera. Si ambas expresiones son falsas, el resultado será false. Operador NOT (!): Invierte el valor de una expresión booleana. Si la expresión es true, el resultado será false, y si la expresión es false, el resultado será true. Ten en cuenta que los operadores lógicos se evalúan de izquierda a derecha y pueden combinarse para formar expresiones más complejas. También se pueden utilizar paréntesis para controlar el orden de evaluación y agrupar expresiones.\nEs importante comprender cómo funcionan los operadores lógicos y cómo afectan la evaluación de expresiones booleanas en Java, ya que son fundamentales para tomar decisiones basadas en condiciones en programas.\nOperador AND (\u0026amp;\u0026amp;) condicional # Suponga que deseamos asegurar en cierto punto de una aplicación que dos condiciones sean ambas verdaderas, antes de elegir cierta ruta de ejecución. En este caso, podemos utilizar el operador \u0026amp;\u0026amp; (AND condicional) de la siguiente manera:\nif ( genero == FEMENINO \u0026amp;\u0026amp; edad \u0026gt;= 65 ) ++mujeresMayores; Esta instrucción if contiene dos condiciones simples. La condición genero == FEMENINO compara la variable genero con la constante FEMENINO. Por ejemplo, esto podría evaluarse para determinar si una persona es mujer. La condición edad \u0026gt;= 65 podría evaluarse para determinar si una persona es un ciudadano mayor. La instrucción if considera la condición combinada\ngenero == FEMENINO \u0026amp;\u0026amp; edad \u0026gt;= 65 la cual es verdadera si, y sólo si ambas condiciones simples son verdaderas. Si la condición combinada es verdadera, el cuerpo de la instrucción if incrementa a mujeresMayores en 1. Si una o ambas condiciones simples son falsas, el programa omite el incremento. Algunos programadores consideran que la condición combinada anterior es más legible si se agregan paréntesis redundantes, como por ejemplo:\n( genero == FEMENINO ) \u0026amp;\u0026amp; ( edad \u0026gt;= 65 ) La tabla de la fi gura 5.14 sintetiza el uso del operador \u0026amp;\u0026amp;. Esta tabla muestra las cuatro combinaciones posibles de valores false y true para expresión1 y expresión2. A dichas tablas se les conoce como tablas de verdad. Java evalúa todas las expresiones que incluyen operadores relacionales, de igualdad o lógicos como true o false.\nOperador OR condicional (||) # Ahora suponga que deseamos asegurar que cualquiera o ambas condiciones sean verdaderas antes de elegir cierta ruta de ejecución. En este caso, utilizamos el operador || (OR condicional), como se muestra en el siguiente segmento de un programa:\nif ( ( promedioSemestre \u0026gt;= 90 ) || ( examenFinal \u0026gt;= 90 ) ) System.out.println ( “La calificacion del estudiante es A” ); Esta instrucción también contiene dos condiciones simples. La condición promedioSemestre \u0026gt;= 90 se evalúa para determinar si el estudiante merece una A en el curso, debido a que tuvo un sólido rendimiento a lo largo del semestre. La condición examenFinal \u0026gt;= 90 se evalúa para determinar si el estudiante merece una A en el curso debido a un desempeño sobresaliente en el examen fi nal. Después, la instrucción if considera la condición combinada ( promedioSemestre \u0026gt;= 90 ) || ( examenFinal \u0026gt;= 90 ) y otorga una A al estudiante si una o ambas de las condiciones simples son verdaderas. La única vez que no se imprime el mensaje “La calificación del estudiante es A” es cuando ambas condiciones simples son falsas. El operador \u0026amp;\u0026amp; tiene mayor precedencia que el operador ||. Ambos operadores se asocian de izquierda a derecha.\nOperadores AND lógico booleano (\u0026amp;) y OR inclusivo lógico booleano (|) # Los operadores AND lógico booleano (\u0026amp;) y OR inclusivo lógico booleano (|) funcionan en forma idéntica a los operadores \u0026amp;\u0026amp; (AND condicional) y || (OR condicional), con una excepción: los operadores lógicos booleanos siempre evalúan ambos operandos (es decir, no realizan una evaluación en corto circuito). Por lo tanto, la expresión\n( genero == 1 ) \u0026amp; ( edad \u0026gt;= 65 ) evalúa edad \u0026gt;= 65, sin importar que genero sea igual o no a 1. Esto es útil si el operando derecho del operador AND lógico booleano o del OR inclusivo lógico booleano tiene un efecto secundario requerido: la modifi cación del valor de una variable. Por ejemplo, la expresión\n( cumpleanios == true ) | ( ++edad \u0026gt;= 65 ) garantiza que se evalúe la condición ++edad \u0026gt;= 65. Por ende, la variable edad se incrementa en la expresión anterior, sin importar que la expresión total sea true o false\nOperador lógico de negación (!) # El operador ! (NOT lógico, también conocido como negación lógica o complemento lógico) “invierte” el significado de una condición. A diferencia de los operadores lógicos \u0026amp;\u0026amp;, ||, \u0026amp;, | y ^, que son operadores binarios que combinan dos condiciones, el operador lógico de negación es un operador unario que sólo tiene una condición como operando. Este operador se coloca antes de una condición para elegir una ruta de ejecución si la condición original (sin el operador lógico de negación) es false, como en el siguiente segmento de código:\nif ( ! ( calificacion == valorCentinela ) ) System.out.printf( “La siguiente calificación es %d\\n”, calificacion ); que ejecuta la llamada a printf sólo si calificacion no es igual a valorCentinela. Los paréntesis alrededor de la condición calificacion == valorCentinela son necesarios, ya que el operador lógico de negación tiene mayor precedencia que el de igualdad. En la mayoría de los casos, puede evitar el uso de la negación lógica si expresa la condición en forma distinta, con un operador relacional o de igualdad apropiado. Por ejemplo, la instrucción anterior también puede escribirse de la siguiente manera:\nif ( calificacion != valorCentinela ) System.out.printf( “La siguiente calificación es %d\\n”, calificacion ); Esta flexibilidad le puede ayudar a expresar una condición de una manera más conveniente.\n1 // OperadoresLogicos.java 2 // Los operadores lógicos. 3 4 public class OperadoresLogicos 5 { 6 public static void main( String args[] ) 7 { 8 // crea tabla de verdad para el operador \u0026amp;\u0026amp; (AND condicional) 9 System.out.printf( \u0026#34;s\\n%s: %b\\n%s: %b\\n%s: %b\\n%s: %b\\n\\n\u0026#34;, 10 \u0026#34;AND condicional (\u0026amp;\u0026amp;)\u0026#34;, \u0026#34;false \u0026amp;\u0026amp; false\u0026#34;( false \u0026amp;\u0026amp; false ), 11 \u0026#34;false \u0026amp;\u0026amp; true\u0026#34;, ( false \u0026amp;\u0026amp; true ), 12 \u0026#34;true \u0026amp;\u0026amp; false\u0026#34;, ( true \u0026amp;\u0026amp; false ), 13 \u0026#34;true \u0026amp;\u0026amp; true\u0026#34;, ( true \u0026amp;\u0026amp; true ) ); 14 15 // crea tabla de verdad para el operador || (OR condicional) 16 System.out.printf( \u0026#34;%s\\n%s: %b\\n%s: %b\\n%s: %b\\n%s: %b\\n\\n\u0026#34;, 17 \u0026#34;OR condicional (||)\u0026#34;, \u0026#34;false || false\u0026#34;, ( false || false ), 18 \u0026#34;false || true\u0026#34;, ( false || true ), 19 \u0026#34;true || false\u0026#34;, ( true || false ), 20 \u0026#34;true || true\u0026#34;, ( true || true ) ); 21 22 // crea tabla de verdad para el operador \u0026amp; (AND lógico booleano) 23 System.out.printf( \u0026#34;%s\\n%s: %b\\n%s: %b\\n%s: %b\\n%s: %b\\n\\n\u0026#34;, 24 \u0026#34;AND logico booleano (\u0026amp;)\u0026#34;, \u0026#34;false \u0026amp; false\u0026#34;, ( false \u0026amp; false ), 25 \u0026#34;false \u0026amp; true\u0026#34;, ( false \u0026amp; true ), 26 \u0026#34;true \u0026amp; false\u0026#34;, ( true \u0026amp; false ), 27 \u0026#34;true \u0026amp; true\u0026#34;, ( true \u0026amp; true ) ); 28 29 // crea tabla de verdad para el operador | (OR inclusivo lógico booleano) 30 System.out.printf( \u0026#34;%s\\n%s: %b\\n%s: %b\\n%s: %b\\n%s: %b\\n\\n\u0026#34;, 31 \u0026#34;OR inclusivo logico booleano (|)\u0026#34;, 32 \u0026#34;false | false\u0026#34;, ( false | false ), 33 \u0026#34;false | true\u0026#34;, ( false | true ), 34 \u0026#34;true | false\u0026#34;, ( true | false ), 35 \u0026#34;true | true\u0026#34;, ( true | true ) ); 36 37 // crea tabla de verdad para el operador ^ (OR exclusivo lógico booleano) 38 System.out.printf( \u0026#34;%s\\n%s: %b\\n%s: %b\\n%s: %b\\n%s: %b\\n\\n\u0026#34;, 39 \u0026#34;OR exclusivo logico booleano (^)\u0026#34;, 40 \u0026#34;false ^ false\u0026#34;, ( false ^ false ), 41 \u0026#34;false ^ true\u0026#34;, ( false ^ true ), 42 \u0026#34;true ^ false\u0026#34;, ( true ^ false ), 43 \u0026#34;true ^ true\u0026#34;, ( true ^ true ) ); 44 45 // crea tabla de verdad para el operador ! (negación lógica) 46 System.out.printf( \u0026#34;%s\\n%s: %b\\n%s: %b\\n\u0026#34;, \u0026#34;NOT logico (!)\u0026#34;, 47 \u0026#34;!false\u0026#34;( !false ), \u0026#34;!true\u0026#34;, ( !true ) ); 48 } // fin de main 49 } // fin de la clase OperadoresLogicos ","date":"16 mayo 2023","permalink":"/platform/java/curso/dia10/operadores/","section":"Javae","summary":"Cada una de las instrucciones if, if\u0026hellip;else, while, do\u0026hellip;while y for requieren una condición para determinar cómo continuar con el fl ujo de control de un programa.","title":"Operadores"},{"content":"Polimorfismo # El polimorfismo, que literalmente significa \u0026ldquo;formas diferentes\u0026rdquo;, es uno de los conceptos centrales de POO. El polimorfismo explora cómo crear y usar dos métodos con el mismo nombre para ejecutar dos funcionalidades diferentes, como agregar dos funciones con el mismo nombre pero que aceptan parámetros diferentes.\nPor ejemplo, exploremos cómo puede definir dos funciones con el nombre Multiply(). Uno se usa para calcular el producto de dos enteros, y el otro se usa para calcular el producto de dos dobles.\npublic class Main { public static void main(String[] args) { Multiplier.Multiply(3,5); Multiplier.Multiply(3.5,5.1); }} Cuando se ejecuta el código, el resultado es el siguiente:\nMultiplicación de enteros, resultado = 15 doble multiplicación, resultado = 17,849999999999998\nNotará que al llamar a los dos métodos, no hay diferencia, excepto por los parámetros pasados. Además, tenga en cuenta que la salida depende del tipo de parámetros pasados.\nDiferencias entre herencia y polimorfismo # Comprensiblemente, los desarrolladores a veces confunden el polimorfismo con otro concepto central de POO: herencia. Sin embargo, los dos principios son sustancialmente diferentes.\nEn la herencia, una clase a la que se hace referencia como clase secundaria puede heredar los métodos y atributos de otra clase (la clase principal). Vea el siguiente ejemplo:4\nclass Shape {class}class Square extends Shape {// methods of Shape class are not specified here but are automatically accessible to this Square class thanks to inheritance// methods of Square class} ","date":"16 mayo 2023","permalink":"/platform/java/curso/dia16/polimorfismo/","section":"Javae","summary":"Polimorfismo # El polimorfismo, que literalmente significa \u0026ldquo;formas diferentes\u0026rdquo;, es uno de los conceptos centrales de POO.","title":"Polimorfismo"},{"content":"Los Inicios de Java # El lenguaje Java fue desarrollado en sus inicios por James Gosling, en el año 1991. Inicialmente Java era conocido como Oak o Green.\nLa primera versión del lenguaje Java es publicada por Sun Microsystems en 1995. Y es en la versión del lenguaje JDK 1.0.2, cuando pasa a llamarse Java, corría el año 1996.\nEn las primeras versiones de Java 1.1, 1.2 y 1.3 es en la que el lenguaje va tomando forma, con la inclusión de tecnologías como JavaBeans, JDBC para el acceso a base de datos, RMI para las invocaciones en remoto, Collections para la gestión de múltiples estructuras de datos o AWT para el desarrollo gráfico, entre otros.\nLinea de tiempo en Java # (https://www.timetoast.com/timelines/evolucion-de-java-78664828-b6c6-4b28-abf9-ccea9c6c1e2c)\n","date":"16 mayo 2023","permalink":"/platform/java/curso/dia1/primeraversion/","section":"Javae","summary":"Los Inicios de Java # El lenguaje Java fue desarrollado en sus inicios por James Gosling, en el año 1991.","title":"Primeras Versiones"},{"content":"Una lista de Automoviles, que muestre las imágenes de cada Automovil con su nombre y su tipo. Obtienes un array (ese array tiene que ser de objetos tipo Automoviles, que va a ser una clase abstracta de la que se genera cada Automovil), ese array hay que iterarlo con ciclos. Se debe generar un filtrados, como un buscador de nombre o de tipos. Al darle clic a cada uno, te muestre más información del Automovil Por ultimo agregar una funciona para agregar nuevos carros con los datos que ya existan en los demás carros, y se integren al resto del catalogo.\n","date":"16 mayo 2023","permalink":"/platform/java/curso/proyectofinal/","section":"Javae","summary":"Una lista de Automoviles, que muestre las imágenes de cada Automovil con su nombre y su tipo.","title":"Proyecto final"},{"content":"La repetición controlada por contador en Java es un tipo de estructura de control que permite ejecutar un bloque de código un número específico de veces utilizando un contador. Es decir, se establece una condición inicial para el contador, una condición de continuación y un incremento o decremento del contador en cada iteración del bucle.\nEn Java, existen dos formas comunes de implementar la repetición controlada por contador:\nBucle for: El bucle for es una estructura de control que se utiliza cuando se conoce la cantidad exacta de repeticiones necesarias. Se compone de tres partes separadas por punto y coma (;): la inicialización del contador, la condición de continuación y la actualización del contador en cada iteración. Aquí hay un ejemplo:\nfor (int contador = 0; contador \u0026lt; 5; contador++) { // Bloque de código a repetir System.out.println(\u0026#34;Iteración: \u0026#34; + contador); } En este ejemplo, el bucle for se ejecutará cinco veces, incrementando el contador en cada iteración. El resultado será la impresión de \u0026ldquo;Iteración: \u0026quot; seguido del valor del contador en cada iteración, desde 0 hasta 4.\nBucle while: El bucle while se utiliza cuando no se conoce de antemano la cantidad exacta de repeticiones necesarias y se basa en una condición de continuación. Se verifica la condición antes de cada iteración. Aquí hay un ejemplo:\nint contador = 0; while (contador \u0026lt; 5) { // Bloque de código a repetir System.out.println(\u0026#34;Iteración: \u0026#34; + contador); contador++; } En este ejemplo, el bucle while se ejecutará mientras la condición contador \u0026lt; 5 sea verdadera. El contador se incrementa en cada iteración y el bloque de código se repite hasta que el contador alcanza el valor 5.\nAmbas formas de repetición controlada por contador son útiles en situaciones donde se requiere ejecutar un bloque de código un número específico de veces y se conoce o se puede calcular la cantidad de repeticiones necesarias.\n","date":"16 mayo 2023","permalink":"/platform/java/curso/dia7/repeticion/","section":"Javae","summary":"La repetición controlada por contador en Java es un tipo de estructura de control que permite ejecutar un bloque de código un número específico de veces utilizando un contador.","title":"Repetición controlada por contador"},{"content":"Introducción a Set en Java # En esta hoja, introduciremos el concepto de Set en Java y su importancia en el manejo de colecciones. Un Set es una interfaz en Java que se utiliza para almacenar elementos únicos, es decir, no permite duplicados. Explicaremos cómo difiere de otras interfaces de colecciones, como List y Map, y cómo se representa en la jerarquía de colecciones en Java.\nTambién discutiremos las principales implementaciones de Set en Java, como HashSet, TreeSet y LinkedHashSet, y las características distintivas de cada una.\nSintaxis y Funcionalidades Básicas de Set en Java # En esta hoja, nos centraremos en la sintaxis y las funcionalidades básicas de Set en Java. Exploraremos cómo crear e inicializar un Set utilizando las diferentes implementaciones disponibles. Aprenderemos a agregar y eliminar elementos del Set utilizando los métodos add() y remove(). Además, veremos cómo verificar si un elemento existe en el Set utilizando el método contains().\nTambién discutiremos el uso del método size() para obtener el tamaño del Set, así como el método isEmpty() para verificar si el Set está vacío.\nFuncionalidades Avanzadas de Set en Java # En esta hoja, nos adentraremos en las funcionalidades avanzadas de Set en Java. Discutiremos cómo utilizar métodos como clear() para eliminar todos los elementos del Set, retainAll() para retener solo los elementos comunes entre dos Sets, y removeAll() para eliminar los elementos de un Set que también están presentes en otro Set.\nTambién exploraremos las características únicas de las implementaciones HashSet, TreeSet y LinkedHashSet. Discutiremos la diferencia en el orden de los elementos, el rendimiento y las características de almacenamiento de cada una.\nUsos y Ejemplos Comentados de Set en Java # En esta hoja final, nos enfocaremos en los usos y ejemplos comentados de Set en Java. Discutiremos los escenarios en los que el uso de Set puede ser beneficioso, como la eliminación de duplicados en una lista de elementos, la verificación de membresía en un conjunto de datos y la implementación de operaciones de conjuntos, como la unión, intersección y diferencia.\nEjemplo 1: Eliminación de duplicados en una lista\nimport java.util.HashSet; import java.util.Set; public class EliminarDuplicados { public static void main(String[] args) { Set\u0026lt;Integer\u0026gt; numeros = new HashSet\u0026lt;\u0026gt;(); numeros.add(10); numeros.add(20); numeros.add(30); numeros.add(20); System.out.println(\u0026#34;Elementos originales: \u0026#34; + numeros); Set\u0026lt;Integer\u0026gt; numerosSinDuplicados = new HashSet\u0026lt;\u0026gt;(numeros); System.out.println(\u0026#34;Elementos sin duplicados: \u0026#34; + numerosSinDuplicados); } } En este ejemplo, creamos un Set llamado \u0026ldquo;numeros\u0026rdquo; y agregamos algunos elementos, incluido un elemento duplicado. Luego, creamos otro Set llamado \u0026ldquo;numerosSinDuplicados\u0026rdquo; utilizando el constructor de HashSet y pasando el Set original como argumento. Como HashSet no permite duplicados, el Set resultante solo contendrá elementos únicos.\nEjemplo 2: Verificación de membresía en un conjunto\nimport java.util.HashSet; import java.util.Set; public class VerificarMembresia { public static void main(String[] args) { Set\u0026lt;String\u0026gt; colores = new HashSet\u0026lt;\u0026gt;(); colores.add(\u0026#34;rojo\u0026#34;); colores.add(\u0026#34;verde\u0026#34;); colores.add(\u0026#34;azul\u0026#34;); String color = \u0026#34;rojo\u0026#34;; if (colores.contains(color)) { System.out.println(color + \u0026#34; está presente en el conjunto\u0026#34;); } else { System.out.println(color + \u0026#34; no está presente en el conjunto\u0026#34;); } } } En este ejemplo, creamos un Set llamado \u0026ldquo;colores\u0026rdquo; y agregamos algunos elementos. Luego, verificamos si el color \u0026ldquo;rojo\u0026rdquo; está presente en el conjunto utilizando el método contains(). Dependiendo del resultado, mostramos un mensaje apropiado en la salida.\nIntroducción a List en Java # En esta hoja, introduciremos el concepto de List en Java y su importancia en el manejo de colecciones. Una List es una interfaz en Java que se utiliza para almacenar elementos en orden secuencial y permite duplicados. Explicaremos cómo difiere de otras interfaces de colecciones, como Set y Map, y cómo se representa en la jerarquía de colecciones en Java.\nTambién discutiremos las principales implementaciones de List en Java, como ArrayList, LinkedList y Vector, y las características distintivas de cada una.\nSintaxis y Funcionalidades Básicas de List en Java # En esta hoja, nos centraremos en la sintaxis y las funcionalidades básicas de List en Java. Exploraremos cómo crear e inicializar una List utilizando las diferentes implementaciones disponibles. Aprenderemos a agregar y eliminar elementos de la List utilizando los métodos add() y remove(). Además, veremos cómo acceder y modificar elementos de la List utilizando los métodos get() y set().\nTambién discutiremos el uso del método size() para obtener el tamaño de la List, así como el método isEmpty() para verificar si la List está vacía.\nFuncionalidades Avanzadas de List en Java # En esta hoja, nos adentraremos en las funcionalidades avanzadas de List en Java. Discutiremos cómo utilizar métodos como contains() para verificar la presencia de un elemento en la List, indexOf() para obtener el índice de la primera aparición de un elemento, y lastIndexOf() para obtener el índice de la última aparición de un elemento.\nTambién exploraremos métodos como subList() para obtener una sublista de la List, sort() para ordenar los elementos de la List, y reverse() para invertir el orden de los elementos.\nUsos y Ejemplos Comentados de List en Java # En esta hoja final, nos enfocaremos en los usos y ejemplos comentados de List en Java. Discutiremos los escenarios en los que el uso de List puede ser beneficioso, como el almacenamiento y manipulación de elementos en orden secuencial, la implementación de estructuras de datos como pilas y colas, y la búsqueda y filtrado de elementos.\nEjemplo 1: Almacenamiento y Manipulación de Elementos en una Lista\nimport java.util.ArrayList; import java.util.List; public class ListaEmpleados { public static void main(String[] args) { List\u0026lt;String\u0026gt; empleados = new ArrayList\u0026lt;\u0026gt;(); empleados.add(\u0026#34;Juan\u0026#34;); empleados.add(\u0026#34;María\u0026#34;); empleados.add(\u0026#34;Pedro\u0026#34;); System.out.println(\u0026#34;Lista de empleados: \u0026#34; + empleados); empleados.remove(\u0026#34;María\u0026#34;); System.out.println(\u0026#34;Lista de empleados después de eliminar a María: \u0026#34; + empleados); } } En este ejemplo, creamos una List llamada \u0026ldquo;empleados\u0026rdquo; y agregamos algunos nombres utilizando el método add(). Luego, eliminamos un elemento de la List utilizando el método remove(). Finalmente, mostramos el contenido de la List antes y después de la eliminación.\nEjemplo 2: Búsqueda y Filtrado de Elementos en una Lista\nimport java.util.ArrayList; import java.util.List; public class FiltrarNumerosPares { public static void main(String[] args) { List\u0026lt;Integer\u0026gt; numeros = new ArrayList\u0026lt;\u0026gt;(); numeros.add(10); numeros.add(5); numeros.add(8); numeros.add(3); numeros.add(12); List\u0026lt;Integer\u0026gt; numerosPares = new ArrayList\u0026lt;\u0026gt;(); for (Integer numero : numeros) { if (numero % 2 == 0) { numerosPares.add(numero); } } System.out.println(\u0026#34;Números pares: \u0026#34; + numerosPares); } } En este ejemplo, creamos una List llamada \u0026ldquo;numeros\u0026rdquo; y agregamos algunos números. Luego, creamos otra List llamada \u0026ldquo;numerosPares\u0026rdquo; y utilizamos un bucle for-each para iterar sobre los elementos de la List \u0026ldquo;numeros\u0026rdquo;. Utilizamos una expresión condicional para filtrar los números pares y los agregamos a la List \u0026ldquo;numerosPares\u0026rdquo;. Finalmente, mostramos los números pares en la salida.\nIntroducción a Map en Java # En esta hoja, introduciremos el concepto de Map en Java y su importancia en el manejo de colecciones. Un Map es una interfaz en Java que se utiliza para almacenar pares clave-valor, donde cada clave es única y se utiliza para acceder a su correspondiente valor. Explicaremos cómo difiere de otras interfaces de colecciones, como List y Set, y cómo se representa en la jerarquía de colecciones en Java.\nTambién discutiremos las principales implementaciones de Map en Java, como HashMap, TreeMap y LinkedHashMap, y las características distintivas de cada una.\nSintaxis y Funcionalidades Básicas de Map en Java # En esta hoja, nos centraremos en la sintaxis y las funcionalidades básicas de Map en Java. Exploraremos cómo crear e inicializar un Map utilizando las diferentes implementaciones disponibles. Aprenderemos a agregar pares clave-valor al Map utilizando el método put() y a obtener el valor correspondiente a una clave utilizando el método get(). También veremos cómo verificar la presencia de una clave en el Map utilizando el método containsKey().\nAdemás, discutiremos el uso de los métodos keySet() y values() para obtener conjuntos de claves y valores del Map, respectivamente.\nFuncionalidades Avanzadas de Map en Java # En esta hoja, nos adentraremos en las funcionalidades avanzadas de Map en Java. Discutiremos cómo utilizar métodos como remove() para eliminar un par clave-valor del Map, size() para obtener el tamaño del Map, y isEmpty() para verificar si el Map está vacío.\nTambién exploraremos métodos como entrySet() para obtener un conjunto de pares clave-valor del Map, y cómo utilizarlos en un bucle for-each para iterar sobre el Map y realizar operaciones en cada par.\nUsos y Ejemplos Comentados de Map en Java # En esta hoja final, nos enfocaremos en los usos y ejemplos comentados de Map en Java. Discutiremos los escenarios en los que el uso de Map puede ser beneficioso, como el almacenamiento y recuperación eficiente de información relacionada, la implementación de diccionarios y la realización de conteos y agrupaciones.\nEjemplo 1: Almacenamiento y Recuperación de Información en un Diccionario\nimport java.util.HashMap; import java.util.Map; public class Diccionario { public static void main(String[] args) { // Creamos un Map para almacenar las palabras y sus traducciones Map\u0026lt;String, String\u0026gt; diccionario = new HashMap\u0026lt;\u0026gt;(); // Agregamos palabras y sus traducciones al diccionario diccionario.put(\u0026#34;Hello\u0026#34;, \u0026#34;Hola\u0026#34;); diccionario.put(\u0026#34;Goodbye\u0026#34;, \u0026#34;Adiós\u0026#34;); diccionario.put(\u0026#34;Thank you\u0026#34;, \u0026#34;Gracias\u0026#34;); // Palabra a buscar en el diccionario String palabra = \u0026#34;Hello\u0026#34;; // Verificamos si la palabra está presente en el diccionario if (diccionario.containsKey(palabra)) { // Obtenemos la traducción de la palabra String traduccion = diccionario.get(palabra); System.out.println(\u0026#34;Traducción de \u0026#34; + palabra + \u0026#34;: \u0026#34; + traduccion); } else { System.out.println(\u0026#34;No se encontró traducción para \u0026#34; + palabra); } } } En este ejemplo, creamos un Map llamado \u0026ldquo;diccionario\u0026rdquo; y agregamos algunas palabras en inglés junto con sus traducciones en español. Luego, verificamos si una palabra específica está presente en el diccionario utilizando el método containsKey(). Si la palabra está presente, obtenemos su traducción utilizando el método get() y la mostramos en la salida. Si la palabra no está presente, mostramos un mensaje indicando que no se encontró traducción.\nEjemplo 2: Conteo de Palabras en un Texto\nimport java.util.HashMap; import java.util.Map; public class ConteoPalabras { public static void main(String[] args) { // Texto de ejemplo String texto = \u0026#34;Este es un ejemplo de texto. Es un texto de prueba.\u0026#34;; // Dividimos el texto en palabras utilizando el método split() String[] palabras = texto.split(\u0026#34; \u0026#34;); // Creamos un Map para almacenar las palabras y su conteo Map\u0026lt;String, Integer\u0026gt; conteoPalabras = new HashMap\u0026lt;\u0026gt;(); // Iteramos sobre las palabras y realizamos el conteo for (String palabra : palabras) { if (conteoPalabras.containsKey(palabra)) { // Si la palabra ya está en el Map, aumentamos su conteo en 1 int conteo = conteoPalabras.get(palabra); conteoPalabras.put(palabra, conteo + 1); } else { // Si la palabra no está en el Map, la agregamos con un conteo inicial de 1 conteoPalabras.put(palabra, 1); } } // Mostramos el conteo de palabras en la salida for (Map.Entry\u0026lt;String, Integer\u0026gt; entry : conteoPalabras.entrySet()) { String palabra = entry.getKey(); int conteo = entry.getValue(); System.out.println(\u0026#34;Palabra: \u0026#34; + palabra + \u0026#34;, Apariciones: \u0026#34; + conteo); } } } En este ejemplo, tomamos un texto y lo dividimos en palabras utilizando el método split(). Luego, creamos un Map llamado \u0026ldquo;conteoPalabras\u0026rdquo; para almacenar las palabras y su conteo correspondiente.\nUtilizamos un bucle for-each para iterar sobre las palabras y verificar si están presentes en el Map. Si una palabra ya está en el Map, aumentamos su conteo en 1. Si la palabra no está en el Map, la agregamos con un conteo inicial de 1.\nFinalmente, utilizamos el método entrySet() para obtener un conjunto de pares clave-valor del Map y lo recorremos en un bucle for-each. Mostramos cada palabra y su conteo en la salida.\nEjercicios # Ejercicio para Set:\nCrea una clase llamada \u0026ldquo;UniqueWords\u0026rdquo; que solicite al usuario ingresar una serie de palabras separadas por espacios. Utiliza un Set para almacenar las palabras únicas ingresadas por el usuario. Imprime en la pantalla las palabras únicas en orden alfabético.\nEjercicio para Map:\nCrea una clase llamada \u0026ldquo;StudentGrades\u0026rdquo; que almacene las calificaciones de los estudiantes. Utiliza un Map donde la clave sea el nombre del estudiante y el valor sea una lista de calificaciones. Implementa métodos para agregar calificaciones a un estudiante, obtener las calificaciones de un estudiante y calcular el promedio de calificaciones de un estudiante. Permite al usuario ingresar el nombre del estudiante y sus calificaciones, y luego muestra el promedio de calificaciones.\n","date":"16 mayo 2023","permalink":"/platform/java/curso/dia14/setmap/","section":"Javae","summary":"Introducción a Set en Java # En esta hoja, introduciremos el concepto de Set en Java y su importancia en el manejo de colecciones.","title":"Set, List y Map"},{"content":"Introducción a Stream en Java # Stream es una característica introducida en Java 8 que permite manipular y procesar colecciones de manera eficiente y concisa. Un Stream es una secuencia de elementos que puede ser procesada en paralelo o en secuencia. Proporciona una interfaz de programación funcional para realizar operaciones como filtrado, mapeo, clasificación y reducción en los elementos de la secuencia.\nEn esta documentación, exploraremos la sintaxis, funcionalidades, usos y ejemplos de cómo trabajar con Stream en Java.\nSintaxis y Funcionalidades de Stream # Para trabajar con Stream en Java, es necesario seguir una serie de pasos básicos:\nObtener un Stream: Puedes obtener un Stream de una colección existente utilizando el método stream() o parallelStream() dependiendo de si quieres trabajar en forma secuencial o en paralelo. Realizar operaciones intermedias: Las operaciones intermedias son aquellas que se aplican a los elementos del Stream y devuelven un nuevo Stream. Algunas operaciones intermedias comunes son filter(), map(), distinct(), sorted(), entre otras. Realizar operaciones terminales: Las operaciones terminales son aquellas que producen un resultado final o una acción en el Stream. Algunas operaciones terminales comunes son forEach(), collect(), reduce(), count(), entre otras. Página 3: Usos y Ejemplos de Stream\nStream proporciona una forma elegante y concisa de trabajar con colecciones en Java. Algunos de los usos comunes de Stream son:\nFiltrado de elementos: Puedes usar Stream para filtrar elementos de una colección en base a ciertos criterios. Por ejemplo, filtrar números pares de una lista de enteros. Transformación de elementos: Stream te permite transformar elementos de una colección utilizando operaciones como map(). Por ejemplo, convertir una lista de objetos a una lista de sus atributos específicos. Operaciones de reducción: Stream facilita las operaciones de reducción en los elementos de una colección. Por ejemplo, calcular la suma total de una lista de números. A continuación, se presentan ejemplos comentados de uso de Stream en diferentes situaciones.\nEjemplos Comentados de Stream # Filtrado de Números Pares:\nList\u0026lt;Integer\u0026gt; numeros = Arrays.asList(1, 2, 3, 4, 5, 6, 7, 8, 9, 10); List\u0026lt;Integer\u0026gt; pares = numeros.stream() .filter(num -\u0026gt; num % 2 == 0) .collect(Collectors.toList()); System.out.println(pares); // Imprime [2, 4, 6, 8, 10] Transformación de Nombres a Mayúsculas:\nList\u0026lt;String\u0026gt; nombres = Arrays.asList(\u0026#34;Juan\u0026#34;, \u0026#34;María\u0026#34;, \u0026#34;Pedro\u0026#34;, \u0026#34;Ana\u0026#34;); List\u0026lt;String\u0026gt; nombresMayusculas = nombres.stream() .map(String::toUpperCase) .collect(Collectors.toList()); System.out.println(nombresMayusculas); // Imprime [JUAN, MARÍA, PEDRO, ANA] Suma de Números\nList\u0026lt;Integer\u0026gt; numeros = Arrays.asList(1, 2, 3, 4, 5); int suma = numeros.stream() .reduce(0, (a, b) -\u0026gt; a + b); System.out.println(suma); // Imprime 15 Estos ejemplos muestran cómo utilizar Stream para realizar operaciones comunes en colecciones de manera más elegante y concisa. Puedes experimentar con diferentes operaciones intermedias y terminales para adaptar el Stream a tus necesidades específicas.\nEjercicios # Filtrado y Transformación de Elementos\nDado un conjunto de nombres, crea un programa que realice las siguientes operaciones utilizando Stream:\nFiltra los nombres que contengan más de 5 letras. Transforma los nombres filtrados a mayúsculas. Imprime los nombres resultantes separados por comas.\n","date":"16 mayo 2023","permalink":"/platform/java/curso/dia15/stream/","section":"Javae","summary":"Introducción a Stream en Java # Stream es una característica introducida en Java 8 que permite manipular y procesar colecciones de manera eficiente y concisa.","title":"Stream"},{"content":"Estudiar el Modulo 1 y 2\n(https://codigofacilito.com/articulos/tipos_datos_java)\n","date":"16 mayo 2023","permalink":"/platform/java/curso/dia3/tiposdedatos/","section":"Javae","summary":"Estudiar el Modulo 1 y 2","title":"Tipos de Datos"},{"content":"Por lo general, una clase consiste en uno o más métodos que manipulan los atributos pertenecientes a un objeto específi co de la clase. Los atributos se representan como variables en la declaración de la clase. Dichas variables se llaman campos, y se declaran dentro de la declaración de una clase, pero fuera de los cuerpos de las declaraciones de los métodos de la clase. Cuando cada objeto de una clase mantiene su propia copia de un atributo, el campo que representa a ese atributo se conoce también como variable de instancia; cada objeto (instancia) de la clase tiene una instancia separada de la variable en memoria. El ejemplo en esta sección demuestra una clase LibroCalificaciones, que contiene una variable de instancia llamada nombreDelCurso para representar el nombre del curso de un objeto LibroCalificaciones específico.\nLa clase LibroCalificaciones con una variable de instancia, un método establecer y un método obtener # En nuestra siguiente aplicación (fi guras 3.7 y 3.8), la clase LibroCalificaciones (código anterior) mantiene el nombre del curso como una variable de instancia, para que pueda usarse o modifi carse en cualquier momento, durante la ejecución de una aplicación. Esta clase contiene tres métodos: establecerNombreDelCurso, obtenerNombreDelCurso y mostrarMensaje. El método establecerNombreDelCurso almacena el nombre de un curso en un LibroCalificaciones. El método obtenerNombreDelCurso obtiene el nombre del curso de un LibroCalificaciones. El método mostrarMensaje, que en este caso no especifi ca parámetros, sigue mostrando un mensaje de bienvenida que incluye el nombre del curso; como veremos más adelante, el método ahora obtiene el nombre del curso mediante una llamada a otro método en la misma clase: obtenerNombreDelCurso.\nPor lo general, un instructor enseña más de un curso, cada uno con su propio nombre. La línea 7 declara que nombreDelCurso es una variable de tipo String. Como la variable se declara en el cuerpo de la clase, pero fuera de los cuerpos de los métodos de la misma (líneas 10 a la 13, 16 a la 19 y 22 a la 28), la línea 7 es una declaración para una variable de instancia. Cada instancia (es decir, objeto) de la clase LibroCalificaciones contiene una copia de cada variable de instancia. Por ejemplo, si hay dos objetos LibroCalificaciones, cada objeto tiene su propia copia de nombreDelCurso (una por cada objeto). Un benefi cio de hacer de nombreDelCurso una variable de instancia es que todos los métodos de la clase (en este caso, LibroCalificaciones) pueden manipular cualquier variable de instancia que aparezca en la clase (en este caso, nombreDelCurso).\n2 // Clase LibroCalificaciones que contiene una variable de instancia nombreDelCurso 3 // y métodos para establecer y obtener su valor. 4 5 public class LibroCalificaciones 6 { 7 private String nombreDelCurso; // nombre del curso para este LibroCalificaciones 8 9 // método para establecer el nombre del curso 10 public void establecerNombreDelCurso( String nombre ) 11 { 12 nombreDelCurso = nombre; // almacena el nombre del curso 13 } // fin del método establecerNombreDelCurso 14 15 // método para obtener el nombre del curso 16 public String obtenerNombreDelCurso() 17 { 18 return nombreDelCurso; 19 } // fin del método obtenerNombreDelCurso 20 21 // muestra un mensaje de bienvenida al usuario de LibroCalificaciones 22 public void mostrarMensaje() 23 { 24 // esta instrucción llama a obtenerNombreDelCurso para obtener el 25 // nombre del curso que representa este LibroCalificaciones 26 System.out.printf( “Bienvenido al libro de calificaciones para\\n%s!\\n”, 27 obtenerNombreDelCurso() ); 28 } // fin del método mostrarMensaje 29 30 } // fin de la clase LibroCalificaciones Método de establecer y obtener # Los campos private de una clase pueden manipularse sólo mediante los métodos de esa clase. Por lo tanto, un cliente de un objeto (es decir, cualquier clase que llame a los métodos del objeto) llama a los métodos public de la clase para manipular los campos private de un objeto de esa clase. Esto explica por qué las instrucciones en el método main, llaman a los métodos establecerNombreDelCurso, obtenerNombreDelCurso y mostrarMensaje en un objeto LibroCalificaciones. A menudo, las clases proporcionan métodos public para permitir a los clientes de la clase establecer (es decir, asignar valores a) u obtener (es decir, obtener los valores de) variables de instancia private. Los nombres de estos métodos no necesitan empezar con establecer u obtener, pero esta convención de nomenclatura es muy recomendada en Java, y es requerida para ciertos componentes de software especiales de Java, conocidos como JavaBeans, que pueden simplifi car la programación en muchos entornos de desarrollo integrados (IDEs). El método que establece la variable nombreDelCurso en este ejemplo se llama establecerNombreDelCurso, y el método que obtiene el valor de la variable de instancia nombreDelCurso se llama obtenerNombreDelCurso.\n2 // Crea y manipula un objeto LibroCalificaciones. 3 import java.util.Scanner; // el programa usa la clase Scanner 4 5 public class PruebaLibroCalificaciones 6 { 7 // el método main empieza la ejecución del programa 8 public static void main( String args[] ) 9 { 10 // crea un objeto Scanner para obtener la entrada de la ventana de comandos 11 Scanner entrada = new Scanner( System.in ); 12 13 // crea un objeto LibroCalificaciones y lo asigna a miLibroCalificaciones 14 LibroCalificaciones miLibroCalificaciones = new LibroCalificaciones(); 15 16 // muestra el valor inicial de nombreDelCurso 17 System.out.printf( “El nombre inicial del curso es: %s\\n\\n”, 18 miLibroCalificaciones.obtenerNombreDelCurso() ); 19 20 // pide y lee el nombre del curso 21 System.out.println( “Escriba el nombre del curso:” ); 22 String elNombre = entrada.nextLine(); // lee una línea de texto 23 miLibroCalificaciones.establecerNombreDelCurso( elNombre ); // establece el nombre del curso 24 System.out.println(); // imprime una línea en blanco 25 26 // muestra el mensaje de bienvenida después de especificar el nombre del curso 27 miLibroCalificaciones.mostrarMensaje(); 28 } // fin de main 29 30 } // fin de la clase PruebaLibroCalificaciones ","date":"16 mayo 2023","permalink":"/platform/java/curso/dia3/variablesinsta/","section":"Javae","summary":"Por lo general, una clase consiste en uno o más métodos que manipulan los atributos pertenecientes a un objeto específi co de la clase.","title":"Variables de instancia, métodos establecer y métodos obtener"},{"content":"Una instrucción de repetición (también llamada instrucción de ciclo, o un ciclo) permite al programador especificar que un programa debe repetir una acción mientras cierta condición sea verdadera. La instrucción en seudocódigo\nMientras existan más artículos en mi lista de compras Comprar el siguiente artículo y quitarlo de mi lista describe la repetición que ocurre durante una salida de compras. La condición “existan más artículos en mi lista de compras” puede ser verdadera o falsa. Si es verdadera, entonces se realiza la acción “Comprar el siguiente artículo y quitarlo de mi lista”. Esta acción se realizará en forma repetida mientras la condición sea verdadera. La instrucción (o instrucciones) contenida en la instrucción de repetición while constituye el cuerpo de esta estructura, el cual puede ser una sola instrucción o un bloque. En algún momento, la condición será falsa (cuando el último artículo de la lista de compras sea adquirido y eliminado de la lista). En este punto la repetición terminará y se ejecutará la primera instrucción que esté después de la instrucción de repetición.\nComo ejemplo de la instrucción de repetición while en Java, considere un segmento de programa diseñado para encontrar la primera potencia de 3 que sea mayor a 100. Suponga que la variable producto de tipo int se inicializa en 3. Cuando la siguiente instrucción while termine de ejecutarse, producto contendrá el resultado:\nint producto = 3; while ( producto \u0026lt;= 100 ) producto = 3 * producto;. Cuando esta instrucción while comienza a ejecutarse, el valor de la variable producto es 3. Cada iteración de la instrucción while multiplica a producto por 3, por lo que producto toma los valores de 9, 27, 81 y 243, sucesivamente. Cuando la variable producto se vuelve 243, la condición de la instrucción while (producto \u0026lt;= 1000) se torna falsa. Esto termina la repetición, por lo que el valor fi nal de producto es 243. En este punto, la ejecución del programa continúa con la siguiente instrucción después de la instrucción while.\nEl diagrama de actividad de UML muestra el flujo de control que corresponde a la instrucción while anterior. Una vez más (aparte del estado inicial, las flechas de transición, un estado final y tres notas), los símbolos en el diagrama representan un estado de acción y una decisión. Este diagrama también introduce el símbolo de fusión. UML representa tanto al símbolo de fusión como al símbolo de decisión como rombos. El símbolo de fusión une dos flujos de actividad en uno solo. En este diagrama, el símbolo de fusión une las transiciones del estado inicial y del estado de acción, de manera que ambas fluyan en la decisión que determina si el ciclo debe empezar a ejecutarse (o seguir ejecutándose). Los símbolos de decisión y de fusión pueden diferenciarse por el número de flechas de transición “entrante “salientes”. Un símbolo de decisión tiene una flecha de transición que apunta hacia el rombo y dos o más flechas de transición que apuntan hacia fuera del rombo, para indicar las posibles transiciones desde ese punto. Además, cada flecha de transición que apunta hacia fuera de un símbolo de decisión tiene una condición de guardia junto a ella. Un símbolo de fusión tiene dos o más flechas de transición que apuntan hacia el rombo, y sólo una flecha de transición que apunta hacia fuera del rombo, para indicar múltiples flujos de actividad que se fusionan para continuar la actividad. Ninguna de las flechas de transición asociadas con un símbolo de fusión tiene una condición de guardia.\nDEITEL, PAUL J. Y HARVEY M. DEITE, (2008) Java como programar. Recuperardo el 13 de junio de 2023\nLa condición es una expresión booleana que se evalúa antes de cada iteración. Si la condición es verdadera, el bloque de código se ejecuta. Si la condición es falsa, el programa sale del bucle y continúa con la siguiente instrucción después del while.\nAquí tienes un ejemplo para ilustrar el uso de while en Java\nint contador = 1; while (contador \u0026lt;= 5) { System.out.println(\u0026#34;Contador: \u0026#34; + contador); contador++; } En este ejemplo, el bucle while se ejecutará mientras la variable contador sea menor o igual a 5. En cada iteración, se imprimirá el valor del contador y luego se incrementará en 1. El bucle se repetirá 5 veces, mostrando los valores del contador del 1 al 5.\nEs importante tener cuidado al usar la instrucción while para evitar bucles infinitos. Asegúrate de que la condición dentro del while cambie en algún momento para que el bucle tenga una condición de finalización. De lo contrario, el bucle se ejecutará indefinidamente y el programa quedará atrapado en un ciclo infinito.\nEl bucle while es útil cuando no se conoce de antemano la cantidad exacta de repeticiones necesarias y se basa en una condición de continuación. Permite ejecutar un bloque de código repetidamente mientras se cumpla una condición específica.\n","date":"16 mayo 2023","permalink":"/platform/java/curso/dia8/while/","section":"Javae","summary":"Una instrucción de repetición (también llamada instrucción de ciclo, o un ciclo) permite al programador especificar que un programa debe repetir una acción mientras cierta condición sea verdadera.","title":"while"},{"content":"Para el día de hoy, vamos a crear una aplicación de tareas, en la cual podremos agregar tareas y eliminarlas. Este ejercicio nos servirá para practicar el uso de los evento y el DOM. Ten en cuenta que esto lo reportarás en la práctica calificada de hoy.\n","date":"16 mayo 2023","permalink":"/platform/jsvanilla/app-tareas/","section":"Jsvanillas","summary":"Para el día de hoy, vamos a crear una aplicación de tareas, en la cual podremos agregar tareas y eliminarlas.","title":"App Tareas"},{"content":" Métodos pop/push, shift/unshift # Antes de continuar con la lectura, mira este video donde se explica detalladamente los conceptos que nos permiten modificar un array. Luego refuerza ese conocimiento con la lectura:\nUna cola es uno de los usos más comunes de un array. En ciencias de la computación, significa una colección ordenada de elementos que soportan dos operaciones:\npush inserta un elemento al final. shift obtiene el elemento del principio, avanzando la cola, y así el segundo elemento se vuelve primero. Los arrays soportan ambas operaciones.\nEn la práctica los necesitamos muy a menudo. Por ejemplo, una cola de mensajes que necesitamos mostrar en pantalla.\nHay otro caso de uso para los arrays \u0026ndash; la estructura de datos llamada pila.\nElla soporta dos operaciones:\npush agrega un elemento al final. pop toma un elemento desde el final. Entonces los elementos nuevos son agregados o tomados siempre desde el \u0026ldquo;final\u0026rdquo;.\nUna pila es usualmente mostrada como un mazo de cartas, donde las nuevas cartas son agregadas al tope o tomadas desde el tope:\nPara las pilas, la última introducida es la primera en ser recibida, en inglés esto es llamado principio LIFO (Last-In-First-Out, última en entrar primera en salir). Para las colas, tenemos FIFO (First-In-First-Out primera en entrar, primera en salir).\nLos arrays en JavaScript pueden trabajar como colas o pilas. Ellos permiten agregar/quitar elementos al/del principio o al/del final.\nEn ciencias de la computación, la estructura de datos que permite esto se denomina cola de doble extremo o bicola.\nMétodos que trabajan sobre el final del array:\npop Extrae el último elemento del array y lo devuelve: let fruits = [\u0026#34;Apple\u0026#34;, \u0026#34;Orange\u0026#34;, \u0026#34;Pear\u0026#34;]; alert( fruits.pop() ); // quita \u0026#34;Pear\u0026#34; y lo muestra en un alert alert( fruits ); // Apple, Orange Tanto fruits.pop() como fruits.at(-1) devuelven el último elemento del array, pero fruits.pop() también modifica el array eliminando tal elemento.\npush Agrega el elemento al final del array: let fruits = [\u0026#34;Apple\u0026#34;, \u0026#34;Orange\u0026#34;]; fruits.push(\u0026#34;Pear\u0026#34;); alert( fruits ); // Apple, Orange, Pear El llamado a fruits.push(...) es igual a fruits[fruits.length] = ....\nMétodos que trabajan con el principio del array:\nshift Extrae el primer elemento del array y lo devuelve: let fruits = [\u0026#34;Apple\u0026#34;, \u0026#34;Orange\u0026#34;, \u0026#34;Pear\u0026#34;]; alert( fruits.shift() ); // quita Apple y lo muestra en un alert alert( fruits ); // Orange, Pear unshift Agrega el elemento al principio del array: let fruits = [\u0026#34;Orange\u0026#34;, \u0026#34;Pear\u0026#34;]; fruits.unshift(\u0026#39;Apple\u0026#39;); alert( fruits ); // Apple, Orange, Pear Los métodos push y unshift pueden agregar múltiples elementos de una vez:\nlet fruits = [\u0026#34;Apple\u0026#34;]; fruits.push(\u0026#34;Orange\u0026#34;, \u0026#34;Peach\u0026#34;); fruits.unshift(\u0026#34;Pineapple\u0026#34;, \u0026#34;Lemon\u0026#34;); // [\u0026#34;Pineapple\u0026#34;, \u0026#34;Lemon\u0026#34;, \u0026#34;Apple\u0026#34;, \u0026#34;Orange\u0026#34;, \u0026#34;Peach\u0026#34;] alert(fruits); Recorrer Arrays # Una de las formas más viejas de iterar los items de un array es el bucle for sobre sus índices:\nlet arr = [\u0026#34;Apple\u0026#34;, \u0026#34;Orange\u0026#34;, \u0026#34;Pear\u0026#34;]; *!* for (let i = 0; i \u0026lt; arr.length; i++) { */!* alert( arr[i] ); } Pero para los arrays también hay otra forma de bucle,for..of:\nlet fruits = [\u0026#34;Apple\u0026#34;, \u0026#34;Orange\u0026#34;, \u0026#34;Plum\u0026#34;]; // itera sobre los elementos del array for (let fruit of fruits) { alert( fruit ); } for..of no da acceso al número del elemento en curso, solamente a su valor, pero en la mayoría de los casos eso es suficiente. Y es más corto.\nTécnicamente, y porque los arrays son objetos, es también posible usar for..in:\nlet arr = [\u0026#34;Apple\u0026#34;, \u0026#34;Orange\u0026#34;, \u0026#34;Pear\u0026#34;]; *!* for (let key in arr) { */!* alert( arr[key] ); // Apple, Orange, Pear } Pero es una mala idea. Existen problemas potenciales con esto:\nEl bucle for..in itera sobre todas las propiedades, no solo las numéricas.\nExisten objetos \u0026ldquo;simil-array\u0026rdquo; en el navegador y otros ambientes que parecen arrays. Esto es, tienen length y propiedades indexadas, pero pueden también tener propiedades no numéricas y métodos que usualmente no necesitemos. Y el bucle for..in los listará. Entonces si necesitamos trabajar con objetos simil-array, estas propiedades \u0026ldquo;extras\u0026rdquo; pueden volverse un problema.\nEl bucle for..in está optimizado para objetos genéricos, no para arrays, y es de 10 a 100 veces más lento. Por supuesto es aún muy rápido. Una optimización puede que solo sea importante en cuellos de botella, pero necesitamos ser concientes de la diferencia.\nEn general, no deberíamos usar for..in en arrays.\nRecorrer Array ","date":"11 mayo 2023","permalink":"/platform/jsvanilla/for-arr/","section":"Jsvanillas","summary":"Métodos pop/push, shift/unshift # Antes de continuar con la lectura, mira este video donde se explica detalladamente los conceptos que nos permiten modificar un array.","title":"Metodos base de Array y Recorrer un Array"},{"content":"Arrays # Los objetos te permiten almacenar colecciones de datos a través de nombres. Eso está bien.\nPero a menudo necesitamos una colección ordenada, donde tenemos un 1ro, un 2do, un 3er elemento y así sucesivamente. Por ejemplo, necesitamos almacenar una lista de algo: usuarios, bienes, elementos HTML, etc.\nNo es conveniente usar objetos aquí, porque no proveen métodos para manejar el orden de los elementos. No podemos insertar una nueva propiedad “entre” los existentes. Los objetos no están hechos para eso.\nExiste una estructura llamada Array (llamada en español arreglo o matriz/vector) para almacenar colecciones ordenadas.\nDeclaración # Hay dos sintaxis para crear un array vacío:\nlet arr = new Array(); let arr = []; Casi siempre se usa la segunda. Podemos suministrar elementos iniciales entre los corchetes:\nlet fruits = [\u0026#34;Apple\u0026#34;, \u0026#34;Orange\u0026#34;, \u0026#34;Plum\u0026#34;]; Los elementos del array están numerados comenzando desde cero.\nPodemos obtener un elemento por su número entre corchetes:\nlet fruits = [\u0026#34;Apple\u0026#34;, \u0026#34;Orange\u0026#34;, \u0026#34;Plum\u0026#34;]; alert( fruits[0] ); // Apple alert( fruits[1] ); // Orange alert( fruits[2] ); // Plum Podemos reemplazar un elemento:\nfruits[2] = \u0026#39;Pear\u0026#39;; // ahora [\u0026#34;Apple\u0026#34;, \u0026#34;Orange\u0026#34;, \u0026#34;Pear\u0026#34;] \u0026hellip;o agregar uno nuevo al array:\nfruits[3] = \u0026#39;Lemon\u0026#39;; // ahora [\u0026#34;Apple\u0026#34;, \u0026#34;Orange\u0026#34;, \u0026#34;Pear\u0026#34;, \u0026#34;Lemon\u0026#34;] La cuenta total de elementos en el array es su longitud length:\nlet fruits = [\u0026#34;Apple\u0026#34;, \u0026#34;Orange\u0026#34;, \u0026#34;Plum\u0026#34;]; alert( fruits.length ); // 3 También podemos usar alert para mostrar el array completo.\nlet fruits = [\u0026#34;Apple\u0026#34;, \u0026#34;Orange\u0026#34;, \u0026#34;Plum\u0026#34;]; alert( fruits ); // Apple,Orange,Plum Un array puede almacenar elementos de cualquier tipo.\nPor ejemplo:\n// mezcla de valores let arr = [ \u0026#39;Apple\u0026#39;, { name: \u0026#39;John\u0026#39; }, true, function() { alert(\u0026#39;hello\u0026#39;); } ]; // obtener el objeto del índice 1 y mostrar su nombre alert( arr[1].name ); // John // obtener la función del índice 3 y ejecutarla arr[3](); // hello En el siguiente video aprenderás más de los arrays:\n","date":"11 mayo 2023","permalink":"/platform/jsvanilla/array/","section":"Jsvanillas","summary":"Arrays # Los objetos te permiten almacenar colecciones de datos a través de nombres.","title":"Array"},{"content":"En JavaScript, las funciones son una de las características fundamentales del lenguaje y son esenciales para crear programas complejos.\nYa hemos visto cómo crear funciones y cómo llamarlas, pero para sacar el máximo provecho de las funciones, es importante entender cómo funcionan los parámetros y argumentos.\nEn esta clase, vamos a explorar cómo funcionan los parámetros y argumentos en las funciones de JavaScript, cómo pasar valores a las funciones y cómo utilizar estos valores dentro de las funciones. También veremos ejemplos prácticos y explicaciones detalladas para que puedas entender cómo utilizar parámetros y argumentos para crear funciones más flexibles y reutilizables en tus programas.\nParámetros # Podemos pasar datos arbitrarios a funciones usando parámetros.\nEn el siguiente ejemplo, la función tiene dos parámetros: from y text.\n1 2 3 4 5 function showMessage(from, text) { // parámetros: from, text alert(from + \u0026#39;: \u0026#39; + text); } showMessage(\u0026#39;Ann\u0026#39;, \u0026#39;¡Hola!\u0026#39;); // Ann: ¡Hola! (*) *showMessage(\u0026#39;Ann\u0026#39;, \u0026#34;¿Cómo estás?\u0026#34;); // Ann: ¿Cómo estás? (**) Cuando la función se llama (*) y (**), los valores dados se copian en variables locales from y text. Y la función las utiliza.\nAquí hay un ejemplo más: tenemos una variable from y la pasamos a la función. Tenga en cuenta: la función cambia from, pero el cambio no se ve afuera, porque una función siempre obtiene una copia del valor:\n1 2 3 4 5 6 7 8 function showMessage(from, text) { from = \u0026#39;*\u0026#39; + from + \u0026#39;*\u0026#39;; // hace que \u0026#34;from\u0026#34; se vea mejor alert( from + \u0026#39;: \u0026#39; + text ); } let from = \u0026#34;Ann\u0026#34;; showMessage(from, \u0026#34;Hola\u0026#34;); // *Ann*: Hola // el valor de \u0026#34;from\u0026#34; es el mismo, la función modificó una copia local alert( from ); // Ann Cuando un valor es pasado como un parámetro de función, también se denomina argumento.\nPara poner los términos claros:\nUn parámetro es una variable listada dentro de los paréntesis en la declaración de función (es un término para el momento de la declaración) Un argumento es el valor que es pasado a la función cuando esta es llamada (es el término para el momento en que se llama). Declaramos funciones listando sus parámetros, luego las llamamos pasándoles argumentos.\nEn el ejemplo de arriba, se puede decir: \u0026ldquo;la función showMessage es declarada con dos parámetros, y luego llamada con dos argumentos: from y \u0026quot;Hola\u0026quot;\u0026rdquo;.\nValores predeterminados # Si una función es llamada, pero no se le proporciona un argumento, su valor correspondiente se convierte en undefined.\nPor ejemplo, la función mencionada anteriormente showMessage(from, text) se puede llamar con un solo argumento:\nshowMessage(\u0026#34;Ann\u0026#34;); Eso no es un error. La llamada mostraría \u0026quot;Ann: undefined\u0026quot;. Como no se pasa un valor de text, este se vuelve undefined.\nPodemos especificar un valor llamado \u0026ldquo;predeterminado\u0026rdquo; o \u0026ldquo;por defecto\u0026rdquo; (es el valor que se usa si el argumento fue omitido) en la declaración de función usando =:\n1 2 3 4 function showMessage(from,text = \u0026#34;sin texto\u0026#34;\u0026gt;) { alert( from + \u0026#34;: \u0026#34; + text ); } showMessage(\u0026#34;Ann\u0026#34;); // Ann: sin texto Ahora, si no se pasa el parámetro text, obtendrá el valor \u0026quot;sin texto\u0026quot;\nEl valor predeterminado también se asigna si el parámetro existe pero es estrictamente igual a undefined:\nshowMessage(\u0026#34;Ann\u0026#34;, undefined); // Ann: sin texto En el siguiente video aprenderemos más sobre estos conceptos:\nTipos de Funciones # En JavaScript, existen tres tipos de funciones: funciones declaradas, funciones de expresión y funciones de flecha.\nFunciones declaradas: Son funciones que se declaran con la palabra clave \u0026ldquo;function\u0026rdquo; seguida del nombre de la función. Ejemplo: function sum(a, b) { return a + b; } Estas funciones son hoisted, es decir, son elevadas al inicio del scope donde son declaradas, por lo tanto son accesibles antes de ser declaradas.\nFunciones de expresión: son funciones que son asignadas a una variable y son definidas mediante una expresión. Ejemplo: const sum = function(a, b) { return a + b; } Funciones de flecha: son funciones cuyo sintaxis es abreviada y se definen mediante una flecha \u0026ldquo;=\u0026gt;\u0026rdquo; y no tiene un nombre. Ejemplo: const sum = (a, b) =\u0026gt; a + b; 3 tipos de funciones # Para entender a detalle como funciona cada uno de estas, mira el siguiente tutorial donde verás qué diferencia a estas 3 formas de escribir una función:\n","date":"11 mayo 2023","permalink":"/platform/jsvanilla/parameters/","section":"Jsvanillas","summary":"En JavaScript, las funciones son una de las características fundamentales del lenguaje y son esenciales para crear programas complejos.","title":"Parametros y tipos de Funciones"},{"content":"El Document Object Model (DOM) es un estándar de la industria que define la estructura lógica de un documento y cómo se puede acceder y modificar su contenido y estilos. Es una interfaz de programación de aplicaciones (API) para documentos HTML y XML que permite a los desarrolladores interactuar con el contenido de una página web y modificarlo dinámicamente mediante código JavaScript.\nEl DOM es un árbol de nodos que representa la estructura de un documento, donde cada elemento HTML es un nodo y cada atributo es un nodo hijo. Los desarrolladores pueden utilizar el DOM para seleccionar y modificar elementos específicos en una página web, crear nuevos elementos, eliminar elementos existentes, cambiar estilos, agregar eventos, y mucho más.\nEn esta clase, vamos a profundizar en el concepto del DOM, cómo funciona, y cómo los desarrolladores pueden utilizarlo para interactuar con el contenido de una página web y crear aplicaciones web dinámicas e interactivas.\nAntes de entar a detalle en el DOM hablaremos un poco del entorno del navegador.\nEntorno de Navegador # El lenguaje JavaScript fue creado inicialmente para los navegadores web. Desde entonces, ha evolucionado en un lenguaje con muchos usos y plataformas.\nUna plataforma puede ser un navegador, un servidor web u otro host (\u0026ldquo;anfitrión\u0026rdquo;); incluso una máquina de café \u0026ldquo;inteligente\u0026rdquo;, si puede ejecutar JavaScript. Cada uno de ellos proporciona una funcionalidad específica de la plataforma. La especificación de JavaScript llama a esto entorno de host.\nUn entorno host proporciona sus propios objetos y funciones adicionales al núcleo del lenguaje. Los navegadores web proporcionan un medio para controlar las páginas web. Node.js proporciona características del lado del servidor, etc.\nAquí tienes una vista general de lo que tenemos cuando JavaScript se ejecuta en un navegador web:\nHay un objeto \u0026ldquo;raíz\u0026rdquo; llamado window. Tiene dos roles:\nPrimero, es un objeto global para el código JavaScript. Segundo, representa la \u0026ldquo;ventana del navegador\u0026rdquo; y proporciona métodos para controlarla. DOM (Modelo de Objetos del Documento) # La estructura de un documento HTML son las etiquetas.\nSegún el Modelo de Objetos del Documento (DOM), cada etiqueta HTML es un objeto. Las etiquetas anidadas son llamadas \u0026ldquo;hijas\u0026rdquo; de la etiqueta que las contiene. El texto dentro de una etiqueta también es un objeto.\nTodos estos objetos son accesibles empleando JavaScript, y podemos usarlos para modificar la página.\nPor ejemplo, document.body es el objeto que representa la etiqueta \u0026lt;body\u0026gt;.\nEjecutar el siguiente código hará que el \u0026lt;body\u0026gt; sea de color rojo durante 3 segundos:\ndocument.body.style.background = \u0026#39;red\u0026#39;; // establece un color de fondo rojo setTimeout(() =\u0026gt; document.body.style.background = \u0026#39;\u0026#39;, 3000); // regresa el color de fondo original despues de 3 segundos En el caso anterior usamos style.background para cambiar el color de fondo del document.body, sin embargo existen muchas otras propiedades, tales como:\ninnerHTML \u0026ndash; contenido HTML del nodo. offsetWidth \u0026ndash; ancho del nodo (en píxeles). \u0026hellip;, etc. Un ejemplo del DOM # Comencemos con el siguiente documento simple:\n\u0026lt;!DOCTYPE HTML\u0026gt; \u0026lt;html\u0026gt; \u0026lt;head\u0026gt; \u0026lt;title\u0026gt;About elk\u0026lt;/title\u0026gt; \u0026lt;/head\u0026gt; \u0026lt;body\u0026gt; The truth about elk. \u0026lt;/body\u0026gt; \u0026lt;/html\u0026gt; El DOM representa HTML como una estructura de árbol de etiquetas. A continuación podemos ver como se muestra:\nflowchart TD A(HTML) --\u003e B(HEAD) A --\u003e C[#text] A --\u003e D(BODY) B --\u003e E[#text] B --\u003e F(TITLE) B --\u003e I[#text] F --\u003e G[#text About elk] D --\u003e J[#text The truth about elk. #text] Cada nodo del árbol es un objeto.\nLas etiquetas son nodos de elementos (o solo elementos) y forman la estructura del árbol: \u0026lt;html\u0026gt; está ubicado en la raíz del documento, por lo tanto, \u0026lt;head\u0026gt; y \u0026lt;body\u0026gt; son sus hijos, etc.\nEl texto dentro de los elementos forma nodos de texto, etiquetados como #text. Un nodo de texto contiene solo una cadena. Esta puede no tener hijos y siempre es una hoja del árbol.\nPor ejemplo, la etiqueta \u0026lt;title\u0026gt; tiene el texto \u0026quot;About elk\u0026quot;.\nHay que tener en cuenta los caracteres especiales en nodos de texto:\nuna línea nueva: #text ↵ (en JavaScript se emplea \\n para obtener este resultado) un espacio: ␣ Los espacios y líneas nuevas son caracteres totalmente válidos, al igual que letras y dígitos. Ellos forman nodos de texto y se convierten en parte del DOM. Así, por ejemplo, en el caso de arriba la etiqueta \u0026lt;head\u0026gt; contiene algunos espacios antes de la etiqueta \u0026lt;title\u0026gt;, entonces ese texto se convierte en el nodo #text, que contiene una nueva línea y solo algunos espacios.\nHay solo dos excepciones de nivel superior:\nLos espacios y líneas nuevas antes de la etiqueta \u0026lt;head\u0026gt; son ignorados por razones históricas. Si colocamos algo después de la etiqueta \u0026lt;/body\u0026gt;, automáticamente se sitúa dentro de body, al final, ya que, la especificación HTML necesita que todo el contenido esté dentro de la etiqueta \u0026lt;body\u0026gt;, no puede haber espacios después de esta. En otros casos todo es sencillo \u0026ndash; si hay espacios (como cualquier carácter) en el documento, se convierten en nodos de texto en el DOM, y si los eliminamos, entonces no habrá ninguno.\nPara reforzar lo que hemos visto, mira el siguiente video donde se introduce el DOM:\nRecursos extra # 30 dias de Javascript - DOM\nPrácticar el DOM # EN el siguiente enlaces encontrarás diversos ejercicios para practicar el DOM, te recomiendo comenzarlos en orden y recuerda que siempre puedes preguntar o pedir ayuda si algo no te queda claro:\nEjercicios DOM\n","date":"11 mayo 2023","permalink":"/platform/jsvanilla/introdom/","section":"Jsvanillas","summary":"El Document Object Model (DOM) es un estándar de la industria que define la estructura lógica de un documento y cómo se puede acceder y modificar su contenido y estilos.","title":"Introducción al DOM"},{"content":"Hoy estaremos terminando la página web que comenzaste el día de ayer. Recuerda subir tu resultado final a la tarea de la práctica calificada de hoy.\nTen en cuenta que en esta práctica se te calificará por el avance que tengas, independiente si lograste terminar el tutorial por completo.\n","date":"7 mayo 2023","permalink":"/platform/css/pagina_css_p2/","section":"Csses","summary":"Hoy estaremos terminando la página web que comenzaste el día de ayer.","title":"Pagina HTML, CSS y JS - parte 2"},{"content":"Entre el día de hoy y mañana vamos a ver como crear una página web con HTML, CSS y JS. Siguiendo el tutorial, vas a crear una página web desde cero y subirás tu resultado el día de mañana en la entrega de la tarea de la práctica calificada del día viernes.\nTen en cuenta que en esta práctica se te calificará por el avance que tengas, independiente si lograste terminar el tutorial por completo.\n","date":"7 mayo 2023","permalink":"/platform/css/pagina_css_p1/","section":"Csses","summary":"Entre el día de hoy y mañana vamos a ver como crear una página web con HTML, CSS y JS.","title":"Pagina HTML, CSS y JS - parte 1"},{"content":"En esta ocasión vamos a revisar algunas buenas prácticas que debes tener en cuenta al usar CSS ya que si no tienes cuidado, podria volverse algo confuso y dificil de corregir. Mira el siguiente video con atención y toma nota de los consejos que se indican.\nEjemplo de barra de Navegación # Para continuar aprendiendo CSS, realiza el siguiente tutorial donde aprenderás a crear una barra de navegación usando Flexbox, el cual seguiremos aprendiendo en los siguientes días.\n","date":"7 mayo 2023","permalink":"/platform/css/more-styles/","section":"Csses","summary":"En esta ocasión vamos a revisar algunas buenas prácticas que debes tener en cuenta al usar CSS ya que si no tienes cuidado, podria volverse algo confuso y dificil de corregir.","title":"Buen uso de CSS y más estilos"},{"content":"Hoy abordaremos el tema de la estructura Iterativa. Continuaremos trabajando en el curso de UDEMY. Recuerda enfocarte en los temas que te indicamos y no en todo el curso, ya que el mismo es muy extenso y no queremos que te satures. Sin embargo, si consideras que comprendes el tema y deseas avanzar, puedes hacerlo.\nEstructura Secuencial # Comprende toda la sección 7. Comprende los videos/lecturas del 65 al 80.\nSection 7 - Estructuras Iterativas o Ciclos\n","date":"1 mayo 2023","permalink":"/platform/java/logica/iterativo/","section":"Javae","summary":"Hoy abordaremos el tema de la estructura Iterativa.","title":"Estructuras Iterativas o Ciclos"},{"content":"Hoy abordaremos el tema de la estructura Iterativa. Continuaremos trabajando en el curso de UDEMY. Recuerda enfocarte en los temas que te indicamos y no en todo el curso, ya que el mismo es muy extenso y no queremos que te satures. Sin embargo, si consideras que comprendes el tema y deseas avanzar, puedes hacerlo.\nEstructura Secuencial # Comprende toda la sección 7. Comprende los videos/lecturas del 65 al 80.\nSection 7 - Estructuras Iterativas o Ciclos\n","date":"1 mayo 2023","permalink":"/platform/logica/iteracion/","section":"Logicas","summary":"Hoy abordaremos el tema de la estructura Iterativa.","title":"Estructuras Iterativas o Ciclos"},{"content":"","date":"1 mayo 2023","permalink":"/platform/logica/","section":"Logicas","summary":"","title":"Logicas"},{"content":"Hoy abordaremos el tema de la estructura Condicional. Continuaremos trabajando en el curso de UDEMY. Recuerda enfocarte en los temas que te indicamos y no en todo el curso, ya que el mismo es muy extenso y no queremos que te satures. Sin embargo, si consideras que comprendes el tema y deseas avanzar, puedes hacerlo.\nEstructura Condicional # Comprende toda la sección 6. Comprende los videos/lecturas del 42 al 64.\nSection 6 - Estructuras Condicionales o de Decisión\n","date":"1 mayo 2023","permalink":"/platform/logica/condicional/","section":"Logicas","summary":"Hoy abordaremos el tema de la estructura Condicional.","title":"Estructura Condicional"},{"content":"Hoy abordaremos el tema de la estructura secuencial. Continuaremos trabajando en el curso de UDEMY. Recuerda enfocarte en los temas que te indicamos y no en todo el curso, ya que el mismo es muy extenso y no queremos que te satures. Sin embargo, si consideras que comprendes el tema y deseas avanzar, puedes hacerlo.\nEstructura Secuencial # Comprende toda la sección 4 y la sección 5. Comprende los videos/lecturas del 25 al 41.\nSection 4 - Operadores y Estructuras de Control\nSection 5 - Estructuras Secuenciales\n","date":"1 mayo 2023","permalink":"/platform/logica/secuencial/","section":"Logicas","summary":"Hoy abordaremos el tema de la estructura secuencial.","title":"Estructura Secuencial"},{"content":"Hoy abordaremos el tema de la estructura secuencial y condicional. Continuaremos trabajando en el curso de UDEMY. Recuerda enfocarte en los temas que te indicamos y no en todo el curso, ya que el mismo es muy extenso y no queremos que te satures. Sin embargo, si consideras que comprendes el tema y deseas avanzar, puedes hacerlo.\nEstructura Secuencial # Comprende toda la sección 4 y la sección 5. Comprende los videos/lecturas del 25 al 41.\nSection 4 - Operadores y Estructuras de Control\nSection 5 - Estructuras Secuenciales\nEstructura Condicional # Comprende toda la sección 6. Comprende los videos/lecturas del 42 al 64. Solo mira los videos que el tiempo de permita.\nSection 6 - Estructuras Condicionales o de Decisión\n","date":"1 mayo 2023","permalink":"/platform/java/logica/secuencial/","section":"Javae","summary":"Hoy abordaremos el tema de la estructura secuencial y condicional.","title":"Estructura Secuencial y Condicional"},{"content":"En esta primera semana de clase, se abordará el tema de la lógica de programación, la cual es la base fundamental para el desarrollo de software, ya que es la que nos permite realizar la construcción de algoritmos, los cuales son la base para la creación de programas.\nNos apoyaremos en el curso de UDEMY que se mencionó durante la clase. Te dejamos el enlace aquí para que lo puedas añadir a tu biblioteca si no lo haz hecho aún.\nDurante estos días te iremos indicando los segmentos que debes estudiar. Te recomendamos en enfocarte en los temas que te indicamos y no en todo el curso, ya que el mismo es muy extenso y no queremos que te satures. Sin embargo, si consideras que comprendes el tema y deseas avanzar, puedes hacerlo.\nConceptos básicos de programación # En esta sección se abordarán los conceptos básicos de programación, los cuales son la base para el desarrollo de software. Comprende toda la sección 2 titulada \u0026ldquo;Section 2: Conceptos básicos, Fundamentos de programación\u0026rdquo;. Comprende los videos/lecturas del 7 al 12.\nSection 2 - Conceptos básicos, Fundamentos de programación\nFundamentos de Algoritmia # En esta sección se abordarán los fundamentos de algoritmia, los cuales nos ayudan a construir una estructura para desarrollar un software. Comprende toda la sección 3 titulada \u0026ldquo;Section 3: Fundamentos de Algoritmia\u0026rdquo;. Comprende los videos/lecturas del 13 al 24.\nSection 3 - Fundamentos de Algoritmia\n","date":"1 mayo 2023","permalink":"/platform/java/logica/fundamentos/","section":"Javae","summary":"En esta primera semana de clase, se abordará el tema de la lógica de programación, la cual es la base fundamental para el desarrollo de software, ya que es la que nos permite realizar la construcción de algoritmos, los cuales son la base para la creación de programas.","title":"Introducción a la Logica de Programación"},{"content":"En esta primera semana de clase, se abordará el tema de la lógica de programación, la cual es la base fundamental para el desarrollo de software, ya que es la que nos permite realizar la construcción de algoritmos, los cuales son la base para la creación de programas.\nNos apoyaremos en el curso de UDEMY que se mencionó durante la clase. Te dejamos el enlace aquí para que lo puedas añadir a tu biblioteca si no lo haz hecho aún.\nDurante estos días te iremos indicando los segmentos que debes estudiar. Te recomendamos en enfocarte en los temas que te indicamos y no en todo el curso, ya que el mismo es muy extenso y no queremos que te satures. Sin embargo, si consideras que comprendes el tema y deseas avanzar, puedes hacerlo.\nConceptos básicos de programación # En esta sección se abordarán los conceptos básicos de programación, los cuales son la base para el desarrollo de software. Comprende toda la sección 2 titulada \u0026ldquo;Section 2: Conceptos básicos, Fundamentos de programación\u0026rdquo;. Comprende los videos/lecturas del 7 al 12.\nSection 2 - Conceptos básicos, Fundamentos de programación\nFundamentos de Algoritmia # En esta sección se abordarán los fundamentos de algoritmia, los cuales nos ayudan a construir una estructura para desarrollar un software. Comprende toda la sección 3 titulada \u0026ldquo;Section 3: Fundamentos de Algoritmia\u0026rdquo;. Comprende los videos/lecturas del 13 al 24.\nSection 3 - Fundamentos de Algoritmia\n","date":"1 mayo 2023","permalink":"/platform/logica/intro_progra/","section":"Logicas","summary":"En esta primera semana de clase, se abordará el tema de la lógica de programación, la cual es la base fundamental para el desarrollo de software, ya que es la que nos permite realizar la construcción de algoritmos, los cuales son la base para la creación de programas.","title":"Introducción a la Logica de Programación"},{"content":"Unidades de Medida en CSS # Hoy vamos a aprender un poco sobre las unidades de medida en CSS. si bien es cierto no debes saberlas todas de memoria, es importante que las conozcas y puedas identificarlas cuando las veas en un código CSS, al igual que entender la diferencia entre las unidades exactas y las relativas.\nCSS3: Box Model # Ya que entendemos las cosas básicas de HTML y CSS debemos tener presente lo sigiuente: Cada elemento en el diseño web es una caja rectangular. Este punto es importante para comprender como trabajamos con CSS y lograr el diseño que queremos lgrar. Si bien es cierto podemos posicionar los elementos y darles estilos con CSS, es importante que entendamos como funciona esa caja en sí.\nEl Box model (modelo de caja) explica el tamaño de los elementos en función de algunas propiedades de CSS.\nDesde el interior hacia el exterior, tenemos:\nContent (contenido) padding (relleno) border (borde o frontera) margin (margen) La mejor manera de visualizar el modelo de caja es abrir el navegador DevTools y comprobar cómo se muestra:\nAquí puedes ver cómo Firefox me dice las propiedades de un elemento span que destaqué. Hice clic con el botón derecho en él, presioné Inspeccionar elemento y fui al panel Diseño de DevTools.\nMira, el espacio azul claro es el área de content. Rodeándolo está el padding, luego el border y finalmente el margin. De forma predeterminada, si estableces un ancho (o alto) en el elemento, se aplicará al área de content . Todos los cálculos de padding, border y margin se realizan fuera del valor, por lo que debes tener esto en cuenta cuando realices el cálculo. Se puede cambiar este comportamiento utilizando Box-sizing (puedes buscar más información de esta propiedad aqui).\nEntender este punto, te puede ayudar a realizar diseño con CSS de manera más sencilla, por lo que mira el siguiente video y toma nota entre las diferencias entre cada una de las partes del box model:\nDisplay # Ahora que entiendes un poco mejor lo que es el box model, es importante que sepas que las cajas en CSS pueden comportarse de manera distinta de acuerdo a una propiedad conocida como display. Esta propiedad nos indica la forma en la que el elemento será representado en el navegador y usar alguno de estos display, alterará considerablemente el comportamiento del navegador con el elemento y sus hijos.\nEn esta sección analizaremos los más importantes no cubiertos en otra parte:\nblock inline inline-block none en el siguiente video aprenderás la diferencia entre cada uno de estos y como afectan al modelo de caja:\nTutorial de CSS # En caso desees hacer un repaso del tutorial de Hola Mundo te dejamos el video aqui, recuerda hacer una pausa almenos media hora antes de que comience la siguiente clase y dedicar ese tiempo a realizar los tutoriales de freeCodeCamp de CSS.\nAprendiendo con Práctica # Continua reforzando tu conocimiento de HTML y CSS siguiendo estos cursos:\nHTML - Aplicacion de fotos de gatos\nCSS - Menú de Cafetería\n","date":"1 mayo 2023","permalink":"/platform/css/part2/","section":"Csses","summary":"Unidades de Medida en CSS # Hoy vamos a aprender un poco sobre las unidades de medida en CSS.","title":"Fundamentos de CSS "},{"content":"Que es CSS? # Como HTML, CSS (Cascading Style Sheets) u Hojas de estilo en cascada en español, no es realmente un lenguaje de programación, tampoco es un lenguaje de marcado. Es un lenguaje de hojas de estilo, es decir, te permite aplicar estilos de manera selectiva a elementos en documentos HTML. Por ejemplo, para seleccionar todos los elementos de párrafo en una página HTML y volver el texto dentro de ellos de color rojo, has de escribir este CSS:\np { color: red; /* Selecciona la etiqueta p y cambia el color a rojo */ } CSS nos ayuda a generar un gran cambio en nuestras páginas web y su sintáxis es distintia a HTML.\nSintáxis # El selector nos ayuda a identificar a que elemento(s) se le aplicarán los estilos. El bloque de declaración es donde se escriben los estilos, tener en cuenta que se inicia y culmina con llaves {}. La declaración es donde ajustamos una cosa de el/los elemento(s), se compone por la propiedad que representa lo que vamos a ajustar y el valor que representa como lo vamos a cambiar (Cambiaremos los elementos p, le cambiaremos el color a rojo).\nDonde escribir CSS # Hay 3 lugares o formas de escribir CSS: inline, internal y external (en línea, interno y externo).\nInline # dentro de las etiquetas de apertura HTML podemos añadir el atributo style y como parte de su valor, podemos indicar las declaraciones CSS separadas por ;\nInternal # dentro de la \u0026lt;head\u0026gt; podemos insertar la etiqueta \u0026lt;style\u0026gt; donde podremos ingresar nuestro codigo css. Esto trae la ventaja de usar los selectores a diferencia de los estilos inline, que se aplican a cada elemento.\nExternal # External hace referencia a escribir CSS en un archivo aparte donde solo irá este código. la forma de escribir aquí sigue siendo en bloque sin la necesidad de una etiqueta \u0026lt;style\u0026gt;, aunque necesitamos enlazar el archivo HTML con este, por medio de una etiqueta link dentro del head similar a esta:\n\u0026lt;link rel=\u0026#34;stylesheet\u0026#34; href=\u0026#34;./css/main.css\u0026#34;\u0026gt; Tutorial de CSS # Durante el temario que estudiaste antes de ingresar a Funval, te dejamos un video del canal Hola Mundo. Hoy y mañana vamos a repasar los conceptos que vimos en ese video. Te recomendamos ver hasta media hora antes de la clase y el resto del tiempo comiences a trabajar con los tutoriales de freeCodeCamp de CSS.\nAprendiendo con Práctica # Continua reforzando tu conocimiento de HTML y CSS siguiendo estos cursos:\nHTML - Aplicacion de fotos de gatos\nCSS - Menú de Cafetería\n","date":"1 mayo 2023","permalink":"/platform/css/part1/","section":"Csses","summary":"Que es CSS?","title":"Fundamentos de CSS Parte 1"},{"content":"Los formularios de HTML son una herramienta esencial para la mayoría de los sitios web. Permiten a los visitantes interactuar con la página, enviando información y realizando acciones en línea. Con los formularios, los usuarios pueden proporcionar comentarios, enviar mensajes, realizar compras, registrarse para eventos, enviar correos electrónicos y mucho más.\nAdemás, los formularios pueden ser personalizados de acuerdo a las necesidades específicas de cada sitio web, desde la apariencia visual hasta la información requerida para ser enviada. Estos formularios pueden ser creados utilizando diferentes elementos, como campos de texto, casillas de verificación, botones de radio, menús desplegables, y muchos otros.\nHoy vamos a explorar todo lo que necesitas saber sobre los formularios de HTML. Desde los elementos más básicos hasta los más avanzados, vamos a ver cómo crear y personalizar formularios para mejorar la experiencia del usuario y obtener la información necesaria. Así que prepárate para adentrarte en el mundo de los formularios de HTML y descubrir todo lo que tienen para ofrecer.\nAprendiendo con Práctica # Continua reforzando tu conocimiento de HTML y CSS siguiendo estos cursos:\nHTML - Aplicacion de fotos de gatos\nCSS - Menú de Cafetería\n","date":"1 mayo 2023","permalink":"/platform/html/forms/","section":"Htmls","summary":"Los formularios de HTML son una herramienta esencial para la mayoría de los sitios web.","title":"Forms"},{"content":"Los formularios de HTML son una herramienta esencial para la mayoría de los sitios web. Permiten a los visitantes interactuar con la página, enviando información y realizando acciones en línea. Con los formularios, los usuarios pueden proporcionar comentarios, enviar mensajes, realizar compras, registrarse para eventos, enviar correos electrónicos y mucho más.\nAdemás, los formularios pueden ser personalizados de acuerdo a las necesidades específicas de cada sitio web, desde la apariencia visual hasta la información requerida para ser enviada. Estos formularios pueden ser creados utilizando diferentes elementos, como campos de texto, casillas de verificación, botones de radio, menús desplegables, y muchos otros.\nHoy vamos a explorar todo lo que necesitas saber sobre los formularios de HTML. Desde los elementos más básicos hasta los más avanzados, vamos a ver cómo crear y personalizar formularios para mejorar la experiencia del usuario y obtener la información necesaria. Así que prepárate para adentrarte en el mundo de los formularios de HTML y descubrir todo lo que tienen para ofrecer.\nAprendiendo con Práctica # Continua reforzando tu conocimiento de HTML y CSS siguiendo estos cursos:\nHTML - Aplicacion de fotos de gatos\nCSS - Menú de Cafetería\n","date":"1 mayo 2023","permalink":"/platform/mysql/mifcellaneous2/","section":"Mysqls","summary":"Los formularios de HTML son una herramienta esencial para la mayoría de los sitios web.","title":"Micellaneous parte 2"},{"content":"","date":"16 abril 2023","permalink":"/platform/levels/","section":"Levels","summary":"","title":"Levels"},{"content":"Hoy seguiremos reforzando nuestro conocimiento Bootstrap 5. Sigue el tutorial a continuación. Recuerda enviar lo que lograste al canal de Discord y subirlo a tu repositorio.\n","date":"16 abril 2023","permalink":"/platform/levels/level2_23/dia13/bs5/","section":"Levels","summary":"Hoy seguiremos reforzando nuestro conocimiento Bootstrap 5.","title":"Login con Bootstrap 5"},{"content":"Para hoy, vamos a realizar una página web con Bootstrap 5 y JS. Para ello, vamos a realizar el siguiente tutorial del canal de youtube Fazt Code. Sigue las instrucciones y envía tu resultado final al canal de discord. Recuerda subir esto a tu repositorio para que vayas sumando proyectos 😀.\n","date":"16 abril 2023","permalink":"/platform/levels/level2_23/dia12/bs5/","section":"Levels","summary":"Para hoy, vamos a realizar una página web con Bootstrap 5 y JS.","title":"Página con Bootstrap 5 y JS"},{"content":"En el mundo del desarrollo de software colaborativo, GitHub se ha convertido en una herramienta fundamental para trabajar en equipo y compartir código. Una de las funciones más importantes de GitHub es la bifurcación o forkeo de un proyecto. ¿Pero qué es exactamente la bifurcación en GitHub y por qué es importante para los desarrolladores? En este artículo, te explicaremos todo lo que necesitas saber sobre la bifurcación en GitHub, cómo hacerlo y cómo contribuir al proyecto original a través de tu bifurcación.\nForks en GitHub # Antes de Leer un poco mas de este tema, mira este video donde resume el proceso de Fork en GitHub.\nProceso de Bifurcación (Fork) # La bifurcación o \u0026ldquo;fork\u0026rdquo; en GitHub es una manera de crear una copia de un repositorio existente en tu cuenta de GitHub. Una bifurcación te permite experimentar con un proyecto sin afectar el proyecto original y es especialmente útil cuando deseas contribuir a un proyecto existente.\nAquí te muestro los pasos para hacer una bifurcación y contribuir al proyecto original:\nHaz una bifurcación del proyecto original: Ve al repositorio del proyecto en GitHub y haz clic en el botón \u0026ldquo;Fork\u0026rdquo; en la parte superior derecha de la página. Esto creará una copia del repositorio en tu cuenta de GitHub.\nClona tu bifurcación: Ahora, debes clonar tu bifurcación en tu computadora local usando el comando git clone. Para ello, ve a tu cuenta de GitHub y busca la bifurcación que acabas de crear. Haz clic en el botón \u0026ldquo;Code\u0026rdquo; y copia la URL que se muestra.\nLuego, en tu terminal, ejecuta el siguiente comando:\ngit clone \u0026lt;URL de tu bifurcación\u0026gt; Crea una nueva rama: Después de clonar el repositorio, debes crear una nueva rama en la que trabajarás en tu contribución. Para ello, ejecuta el siguiente comando en tu terminal: git checkout -b \u0026lt;nombre-de-la-rama\u0026gt; Haz los cambios necesarios: Ahora, puedes hacer los cambios necesarios en tu código. En este punto, puedes agregar, eliminar o modificar archivos según la contribución que desees realizar.\nConfirma los cambios: Una vez que hayas hecho los cambios necesarios, debes confirmarlos. Para ello, ejecuta los siguientes comandos en tu terminal:\ngit add . git commit -m \u0026#34;Mensaje de confirmación que describe los cambios realizados\u0026#34; Envía los cambios a tu bifurcación: Ahora, debes enviar los cambios a tu bifurcación. Para ello, ejecuta el siguiente comando en tu terminal: git push origin \u0026lt;nombre-de-la-rama\u0026gt; Crea una solicitud de extracción: Una vez que hayas enviado los cambios a tu bifurcación, ve a tu cuenta de GitHub y busca la rama que acabas de crear. Haz clic en el botón \u0026ldquo;Compare \u0026amp; pull request\u0026rdquo; para crear una solicitud de extracción (pull request) al proyecto original.\nEspera la revisión: Ahora, los propietarios del proyecto original revisarán tu solicitud de extracción y te darán retroalimentación si es necesario. Si todo está bien, tus cambios se fusionarán con el proyecto original.\nExplicación de GitHub # Dentro de la documentación de github, podemos encontrar informacion de la forma en la que podemos realizar sus procesos. A continuación tenemos dos lecturas sobre la bifurcación y la contribución a un proyecto. Lee ambas secciones y realiza lo siguiente:\nRealiza la Bifurcación de un repositorio de tu gusto, puedes buscar y elegir el que desees. Realiza una copia local de ese repositorio. Realiza la contribucion a ese proyecto, no importa si es pequeña o grande, lo importante es que lo hagas. Realiza un Pull Request a ese proyecto. Envía un pantallazo de tu contribución a DISCORD. Este ultimo paso es importante y no es opcional, tienes que enviar esta evidencia por el canal de Discord. 👉 Bifurcación de un repositorio\n👉 Contribuir a un proyecto\n","date":"15 abril 2023","permalink":"/platform/levels/level2_23/dia11/git/","section":"Levels","summary":"En el mundo del desarrollo de software colaborativo, GitHub se ha convertido en una herramienta fundamental para trabajar en equipo y compartir código.","title":"Bifurcacion de un Repositorio (Fork)"},{"content":"Componentes en Bootstrap 5 # ¡Hola a todos!\nHoy hablaremos sobre los componentes en Bootstrap 5. Para ayudarles a comprender mejor este tema,veremos una serie de videos que cubrirán algunos de los componentes que se pueden crear con esta librería.\nAl final de esta clase, tendrán una mejor comprensión de cómo usar Bootstrap 5 para crear interfaces de usuario visualmente atractivas y altamente funcionales. Así que, ¡prepárense para sumergirse en el mundo de los componentes de Bootstrap 5!\nLos videos que veremos hoy forman parte de una lista de reproduccion del youtuber Kiko Palomares. Los videos que habla sobre los componentes va desde el video numero 26 hasta el numero 38. Te dejaré aqui empezando por el video numero 26 y mira tantos videos como puedas. Recuerda realizar la práctica a la par que ves los videos para entender mejor el concepto:\nKiko Palomares - Bootstrap 5\nDocumentacion de Bootstrap (Comenzando con el Acordión):\nBootstrap 5 - Acordeon\n","date":"7 abril 2023","permalink":"/platform/levels/level2_23/dia10/components/","section":"Levels","summary":"Componentes en Bootstrap 5 # ¡Hola a todos!","title":"Components"},{"content":"Merge de Ramas y Conflictos # Hoy seguiremos revisando los conflictos que pueden aparecer al momento de combinar ramas. Hoy seguiremos aprendiendo sobre el tema viendo el tutorial creado por FreeCodeCamp. Recuerda que pueden hacer tus comentarios por el canal de discord para que podamos resolver tus dudas.\n","date":"7 abril 2023","permalink":"/platform/levels/level2_23/dia08/merge/","section":"Levels","summary":"Merge de Ramas y Conflictos # Hoy seguiremos revisando los conflictos que pueden aparecer al momento de combinar ramas.","title":"Merge"},{"content":"Resolver conflictos en GIT # Resolver conflictos en GitHub # En ocasiones, los conflictos en nuestro repositorio de GitHub pueden ser resueltos directamente desde la interfaz de GitHub. Aquí veremos un ejemplo de como sería un caso de conflicto en GitHub.\n","date":"7 abril 2023","permalink":"/platform/levels/level2_23/dia07/git/","section":"Levels","summary":"Resolver conflictos en GIT # Resolver conflictos en GitHub # En ocasiones, los conflictos en nuestro repositorio de GitHub pueden ser resueltos directamente desde la interfaz de GitHub.","title":"Git"},{"content":"Aplicando lo aprendido # Para este día, deberás aplicar lo aprendido en los días anteriores para crear una web con Bootstrap 5. Sigue el tutorial que se presenta a continuación sobre la construcción de una web con esta libreria. Recuerda que algunas de las técnicas que aprendas aquí puedes aplicarlas en tus proyectos personales. Si tienes alguna duda, toma nota y has tus preguntas por el canal de discord.\n","date":"7 abril 2023","permalink":"/platform/levels/level2_23/dia07/web_bs5/","section":"Levels","summary":"Aplicando lo aprendido # Para este día, deberás aplicar lo aprendido en los días anteriores para crear una web con Bootstrap 5.","title":"Creando una web con Bootstrap 5"},{"content":"Dentro de las cosas que hemos aprendido es crear páginas web que sean atractivas para las personas y Bootstrap ayuda a que ese proceso sea mas sencillo. Las páginas web tambien pueden ayudarnos para mostrar información de manera ordenada y que sea fácil de entender. Para esto es importante que sepamos como crear tablas y formularios en Bootstrap. Hoy veremos como hacer uso de estas estructuras con la ayuda de Bootstrap.\nRecuerda no solo apoyarte en el video, sino tambien aprovechar la documentación de la página oficial de bootstrap.\nTable # Bootstrap 5 - Tables Formularios # Bootstrap 5 - Forms ","date":"26 marzo 2023","permalink":"/platform/levels/level2_23/dia05/table/","section":"Levels","summary":"Dentro de las cosas que hemos aprendido es crear páginas web que sean atractivas para las personas y Bootstrap ayuda a que ese proceso sea mas sencillo.","title":"Table y Forms"},{"content":"A continuacion veremos como funcionan los contenedores y el sistema de grid en bootstrap. Adicionalmente te dejaré los enlaces a la documentación oficial de bootstrap para que puedas consultarla en cualquier momento. Recuerda que está en inglés por defecto pero puedes cambiar el idioma en tu navegador.\nContenedores en Bootstrap # Boostrap 5 - Containers Grid en Bootstrap # El sistema de grid en bootstrap usa una serie de contenedores, filas y columnas para organizar el contenido. Cada fila debe estar dentro de un contenedor y cada columna debe estar dentro de una fila. Está construido con flexbox y es totalmente responsive. En el siguiente video verás como funciona el sistema de grid en bootstrap y porqué se diferencia del sistema de grid en CSS.\nBootstrap 5 - Grid ","date":"26 marzo 2023","permalink":"/platform/levels/level2_23/dia03/conte/","section":"Levels","summary":"A continuacion veremos como funcionan los contenedores y el sistema de grid en bootstrap.","title":"Contenedores y GRID en Bootstrap"},{"content":"El diseño responsive o diseño adaptable es una técnica de diseño web que permite que un sitio web se adapte a diferentes dispositivos y tamaños de pantalla. En lugar de tener que crear una versión separada del sitio web para cada tipo de dispositivo, el diseño responsive utiliza un conjunto de reglas CSS para ajustar el diseño de una página en función del tamaño de pantalla del dispositivo en el que se está viendo.\nLa importancia del diseño responsive en la actualidad radica en el creciente uso de dispositivos móviles para acceder a internet. Según las estadísticas, en la actualidad más de la mitad del tráfico web proviene de dispositivos móviles. Si un sitio web no se visualiza bien en un dispositivo móvil, es probable que los visitantes abandonen el sitio web y busquen una alternativa que sea más fácil de navegar.\nAdemás, los motores de búsqueda, como Google, también dan preferencia a los sitios web que tienen un diseño responsive en sus resultados de búsqueda móviles. Esto significa que si un sitio web no es responsive, es posible que no aparezca en los primeros resultados de búsqueda móviles, lo que podría tener un impacto negativo en el tráfico del sitio web.\nOtra razón por la que el diseño responsive es importante es que permite que el contenido del sitio web se presente de manera consistente en diferentes dispositivos. Esto significa que los usuarios pueden ver la misma información, imágenes y videos en una pantalla de escritorio o en un dispositivo móvil, lo que ayuda a mejorar la experiencia del usuario.\nEn resumen, el diseño responsive es una técnica de diseño web esencial en la actualidad. Al permitir que un sitio web se adapte a diferentes tamaños de pantalla y dispositivos, mejora la experiencia del usuario, aumenta la visibilidad del sitio web en los resultados de búsqueda móviles y ayuda a mantener la coherencia del contenido en diferentes dispositivos.\nA continuación veremos dos videos donde se nos amplía mas este tema. Recuerda analizar los videos y anotar lo que consideres importante, al igual que las dudas que tengas.\nResponsive Design # Breakpoints en el Responsive Design # Media Queries # Las media queries son una parte fundamental del diseño responsive. Las media queries permiten que los estilos CSS se apliquen solo cuando se cumplen ciertas condiciones. Por ejemplo, puede usar media queries para aplicar estilos CSS diferentes a un sitio web dependiendo del tamaño de la pantalla del dispositivo en el que se está viendo. En el siguiente video veremos un poco más de este concepto.\n","date":"26 marzo 2023","permalink":"/platform/levels/level2_23/dia02/respon/","section":"Levels","summary":"El diseño responsive o diseño adaptable es una técnica de diseño web que permite que un sitio web se adapte a diferentes dispositivos y tamaños de pantalla.","title":"Responsive Design - Diseño adaptable"},{"content":" Ramas # git branch y git switch # git merge # .gitignore # Curso GIT y GitHub # Hasta ahora hemos visto a detalle como funciona cada uno de los comandos. En general, en el día a día, esto suele ser mas sencillo de aplicar. Para ello, veremos el siguiente tutorial de Fazt en el que se explica como crear un repositorio en GitHub y como subirlo a la nube. Comandos # Hasta el momento, hemos aprendido varios comandos de GIT, así que haré una lista de los comandos que hemos aprendido hasta ahora.\ngit init: Inicializa un repositorio GIT en el directorio actual. git status: Muestra el estado actual del repositorio. git add: Agrega archivos al área de preparación. git commit: Crea un nuevo commit con los archivos del área de preparación. git log: Muestra el historial de commits. git branch: Muestra las ramas del repositorio. git switch: Cambia de rama. git merge: Une dos ramas. git checkout: Cambia de rama o restaura un archivo. git tree: Muestra el árbol de commits. ","date":"26 marzo 2023","permalink":"/platform/java/git/ramas/","section":"Javae","summary":"Ramas # git branch y git switch # git merge # .","title":"Ramas en GIT"},{"content":"Ramas # git branch y git switch # git merge # .gitignore # Curso GIT y GitHub # Hasta ahora hemos visto a detalle como funciona cada uno de los comandos. En general, en el día a día, esto suele ser mas sencillo de aplicar. Para ello, veremos el siguiente tutorial de Fazt en el que se explica como crear un repositorio en GitHub y como subirlo a la nube. Comandos # Hasta el momento, hemos aprendido varios comandos de GIT, así que haré una lista de los comandos que hemos aprendido hasta ahora.\ngit init: Inicializa un repositorio GIT en el directorio actual. git status: Muestra el estado actual del repositorio. git add: Agrega archivos al área de preparación. git commit: Crea un nuevo commit con los archivos del área de preparación. git log: Muestra el historial de commits. git branch: Muestra las ramas del repositorio. git switch: Cambia de rama. git merge: Une dos ramas. git checkout: Cambia de rama o restaura un archivo. git tree: Muestra el árbol de commits. ","date":"26 marzo 2023","permalink":"/platform/levels/level2_23/dia05/ramas/","section":"Levels","summary":"Ramas # git branch y git switch # git merge # .","title":"Ramas en GIT"},{"content":"Configuración y bases de git # Hoy aprenderemos a configurar git y a usar los comandos básicos para trabajar con el. adicionalmente, recuerda que existe la documentación oficial de GIT, te la dejo aquí abajo para que te apoyes en ella de la mano de lo que aprenderás en estos videos:+\nGit Documentation\ngit init # Nota: En este video se habla de personalizar la terminal, te recomiendo no hacerlo, ya que puede causar problemas con el funcionamiento de la misma si no entiendes su uso, además que podrías gastar mucho tiempo en intentar realizar esto.\nRamas de GIT # Las 3 areas de GIT # git add y git commit # ","date":"24 marzo 2023","permalink":"/platform/levels/level2_23/dia04/git/","section":"Levels","summary":"Configuración y bases de git # Hoy aprenderemos a configurar git y a usar los comandos básicos para trabajar con el.","title":"Comandos de GIT"},{"content":"Repaso de JavaScript # Hoy vamos a repasar los conceptos que hemos aprendido en JS, te recomendamos ver los siguientes videos haciendo pausa, tomando nota y probando el codigo en tu editor de texto.\nConsumo de API\u0026rsquo;s # Callbacks # El siguiente video se profundiza en callbacks, te recomiendo que puedas verlo para ampliar un poco el panorama, pero si te llega a ver muy confuso puedes pasar a la siguiente sección.\nDesestructuración # ","date":"23 marzo 2023","permalink":"/platform/levels/level2_23/dia13/repaso/","section":"Levels","summary":"Repaso de JavaScript # Hoy vamos a repasar los conceptos que hemos aprendido en JS, te recomendamos ver los siguientes videos haciendo pausa, tomando nota y probando el codigo en tu editor de texto.","title":"Repaso"},{"content":"Para esta seccion vamos a repasar la modulación dentro de JS, así que volveremos a ver el tutorial del canal de youtube de Fazt Code. Presta atención a los detalles y trata de entender todo lo que se explica. Te recomiento que vayas probando el codigo en tu editor de texto y veas como funciona.\nModules: Tutorial por Fazt Code # ","date":"22 marzo 2023","permalink":"/platform/levels/level2_23/dia12/modu/","section":"Levels","summary":"Para esta seccion vamos a repasar la modulación dentro de JS, así que volveremos a ver el tutorial del canal de youtube de Fazt Code.","title":"Módulos, refuerzo"},{"content":"Dependencias # ¿Qué es el array de dependencias en React? # En nuestro post sobre el hook useCallback en React, te hemos mencionado que uno de los pasos más importantes en la ejecución de esta función es colocar un array de dependencias. Este elemento también es fundamental en el uso del hook useEffect en React. Pero, ¿qué es?\nCuando hablamos del array de dependencias en React nos referimos a pasar como segundo parámetro de un hook un array. Es decir, mientras que el primer parámetro de un hook como useEffect o useCallback es una función, el segundo parámetro puede ser un array. Aunque este array puede estar vacío o lleno, su función cambia según su valor. A continuación, te explicamos qué sucede en cada caso.\nSe le llama array de dependencias porque el valor contenido dentro del array se conoce como una dependencia. Este nombre se da porque el funcionamiento del hook cambiará dependiendo del valor que contenga este array.\nEn el hook useEffect, pasar un array vacío como segundo parámetro quiere decir que el efecto contenido en la función solo se ejecutará después del primer render. Por su parte, un array de dependencias en React que contenga un valor se ejecuta cada vez que cambie este valor.\nEn el hook useCallback, un array vacío quiere decir que la función contenida como primer parámetro se ejecutará justo después del primer render. La diferencia aquí es que la función quedará memoizada, es decir, no cambiará su referencia a largo de los consecuentes renders. Entonces, con el array de dependencias en React conseguiremos una función que será siempre la misma durante toda la vida del componente.\n¿Y qué sucede si ponemos un valor dentro del array de dependencias en useCallback? Pues esta dependencia marcará cuando se va a generar una nueva referencia. Es decir, cada vez que cambie la dependencia, cambiará la referencia.\nDesde KeepCoding queremos comentarte que el array de dependencias en React no es algo sobre lo que haya que pensar demasiado. En realidad, cualquier elemento que manejemos dentro de los hooks useCallback y useEffect, por ejemplo una prop, se vuelve una dependencia. Por ello, hay que buscar de qué depende la función que tenemos dentro del hook, un estado, un dato externo, una función. En muchos de los casos, terminamos poniendo un array vacío.\n¿Cómo saber si estamos usando el array de dependencias en React correctamente? # Debido a los distintos modos en que podemos usar el array de dependencias en React, podemos tener dudas sobre su uso adecuado. Lo bueno es que con análisis automáticos como ESLint podemos obtener un resultado. Esta extensión nos avisará cuando no tengamos bien puesto este elemento.\nPor ejemplo, cuando un hook useCallback no tiene un array de dependencias, veremos el siguiente mensaje:\nReact Hook useCallback does nothing when called with only one argument. Did you forget to pass an array of dependencies?\nEste mensaje sale porque no tiene mucho sentido usar el useCallback sin un array de dependencias. ¿Por qué? Pues porque si no se lo ponemos, al igual que si no lo ponemos en useEffect, las funciones se ejecutarán siempre después de cada render. Por ello, utilizar useCallback para que se cree una nueva referencia en cada render contradice el mismo propósito del hook.\nEn useCallback es bueno mantener las dependencias al mínimo. Normalmente, estamos utilizando este hook porque queremos reducir el número de referencias que se producen de una misma función. Entonces, para mejorar su performance deberemos mantener pocas dependencias. No necesariamente tiene que ser un array vacío, pero deberíamos asegurarnos de tener pocas variables que cambien poco.\n","date":"12 marzo 2023","permalink":"/platform/levels/level3_react/dia12/dependencias/","section":"Levels","summary":"Dependencias # ¿Qué es el array de dependencias en React?","title":"Dependencias"},{"content":"Dependencias # ¿Qué es el array de dependencias en React? # En nuestro post sobre el hook useCallback en React, te hemos mencionado que uno de los pasos más importantes en la ejecución de esta función es colocar un array de dependencias. Este elemento también es fundamental en el uso del hook useEffect en React. Pero, ¿qué es?\nCuando hablamos del array de dependencias en React nos referimos a pasar como segundo parámetro de un hook un array. Es decir, mientras que el primer parámetro de un hook como useEffect o useCallback es una función, el segundo parámetro puede ser un array. Aunque este array puede estar vacío o lleno, su función cambia según su valor. A continuación, te explicamos qué sucede en cada caso.\nSe le llama array de dependencias porque el valor contenido dentro del array se conoce como una dependencia. Este nombre se da porque el funcionamiento del hook cambiará dependiendo del valor que contenga este array.\nEn el hook useEffect, pasar un array vacío como segundo parámetro quiere decir que el efecto contenido en la función solo se ejecutará después del primer render. Por su parte, un array de dependencias en React que contenga un valor se ejecuta cada vez que cambie este valor.\nEn el hook useCallback, un array vacío quiere decir que la función contenida como primer parámetro se ejecutará justo después del primer render. La diferencia aquí es que la función quedará memoizada, es decir, no cambiará su referencia a largo de los consecuentes renders. Entonces, con el array de dependencias en React conseguiremos una función que será siempre la misma durante toda la vida del componente.\n¿Y qué sucede si ponemos un valor dentro del array de dependencias en useCallback? Pues esta dependencia marcará cuando se va a generar una nueva referencia. Es decir, cada vez que cambie la dependencia, cambiará la referencia.\nDesde KeepCoding queremos comentarte que el array de dependencias en React no es algo sobre lo que haya que pensar demasiado. En realidad, cualquier elemento que manejemos dentro de los hooks useCallback y useEffect, por ejemplo una prop, se vuelve una dependencia. Por ello, hay que buscar de qué depende la función que tenemos dentro del hook, un estado, un dato externo, una función. En muchos de los casos, terminamos poniendo un array vacío.\n¿Cómo saber si estamos usando el array de dependencias en React correctamente? # Debido a los distintos modos en que podemos usar el array de dependencias en React, podemos tener dudas sobre su uso adecuado. Lo bueno es que con análisis automáticos como ESLint podemos obtener un resultado. Esta extensión nos avisará cuando no tengamos bien puesto este elemento.\nPor ejemplo, cuando un hook useCallback no tiene un array de dependencias, veremos el siguiente mensaje:\nReact Hook useCallback does nothing when called with only one argument. Did you forget to pass an array of dependencies?\nEste mensaje sale porque no tiene mucho sentido usar el useCallback sin un array de dependencias. ¿Por qué? Pues porque si no se lo ponemos, al igual que si no lo ponemos en useEffect, las funciones se ejecutarán siempre después de cada render. Por ello, utilizar useCallback para que se cree una nueva referencia en cada render contradice el mismo propósito del hook.\nEn useCallback es bueno mantener las dependencias al mínimo. Normalmente, estamos utilizando este hook porque queremos reducir el número de referencias que se producen de una misma función. Entonces, para mejorar su performance deberemos mantener pocas dependencias. No necesariamente tiene que ser un array vacío, pero deberíamos asegurarnos de tener pocas variables que cambien poco.\n","date":"12 marzo 2023","permalink":"/platform/levels/level5_laravel/12laravel/dependencias/","section":"Levels","summary":"Dependencias # ¿Qué es el array de dependencias en React?","title":"Dependencias"},{"content":"Instrucciones # Bienvenido al mini proyecto del nivel 3. En este proyecto estaremos aplicando los adquiridos tanto en el nivel 2 como lo que estás aprendiendo en el nivel 3. Sigue las instrucciones de este archivo para completar el proyecto y ten en cuenta que estas mismas instrucciones se tomaran en cuenta para la evaluación del proyecto.\nInstrucciones generales # La misma empresa le gusto tu trabajo pasado pero ahora desea la aplicación en un código especifico migra y realízala con React.JS. el sector de viajes llamada windbnb Por suerte, ya tienes una base de código que puedes utilizar para comenzar a trabajar. Según las instrucciones que el cliente nos ha dado, te daré las instrucciones para completar el proyecto. El Figma del proyecto se encuentra en el siguiente enlace: Windbnb Instrucciones del proyecto\nLayout | Diseño # El diseño de esta página web debe ser 100% responsive. Debes asegurarte de que el diseño se adapte a diferentes tamaños de pantalla. Para lograr esto, el cliente y tu han acordado que se trabajará con la librería de Bootstrap 5. Para los estilos que no se puedan lograr con Bootstrap, puedes utilizar CSS puro. Dentro del archivo Figma verás que hay 2 vistas principales: Mobile y Desktop. Te recomendamos que trabajes con la vista Mobile primero y luego con la vista Desktop. Esto te ayudará a enfocarte en la responsividad de la página web, a la vez que Bootstrap está creado con este enfoque.\nFuentes # Las fuentes para este proyecto las hemos traido de Google Fonts. Ya hemos importado las fuentes a usar al proyecto. Para usarlas desde CSS, puedes utilizar la siguiente sintaxis:\nfont-family: 'Montserrat', sans-serif; /* Fuente principal */ font-family: 'Mulish', sans-serif; /* Fuente secundaria */ Iconos # Para los iconos, utilizaremos la librería de iconos de Google: Material Icons. Para usarlos puede seguir el enlace anterior y buscar el icono que necesite. Una vez que lo encuentre, copie el código que se le proporciona y peguelo en el HTML. Por ejemplo:\n\u0026lt;i class=\u0026#34;material-icons-sharp\u0026#34;\u0026gt;favorite\u0026lt;/i\u0026gt; Código base # Se te proporciona un código base para comenzar con el proyecto. Te recomendamos revisarlo y entenderlo para que puedas aprovecharlo al máximo. Puedes modificarlo de considerarlo necesairio, sin embargo debes tener cuidado con ello, ya que la base que se te entrega está pensada para que puedas completar el proyecto sin tener que modificarla demasiado. Algunas cosas que no debes modificar son: •\tEl nombre de los archivos y carpetas proporcionados. •\tEl archivo stays.json que contiene los datos de los alojamientos. •\tEl archivo index.html que contiene la estructura de la página web. Varios de los estilos ya están listos, sin embargo, debes completarlos para que se adapten a los requerimientos del proyecto.\nConsideraciones para la calificación # A continuación te diremos cuales son los puntos que se tomarán en cuenta para la calificacion del proyecto: •\tEl diseño debe ser 100% responsive. •\tEl diseño debe ser lo más fiel posible al proporcionado en el archivo Figma. •\tLos colores, fuentes, tamaños de letra, etc. deben ser los proporcionados en el archivo Figma. •\tEl proyecto debe ser desarrollado React y con Bootstrap 5. Para los estilos que no se puedan lograr con Bootstrap, puedes utilizar CSS puro. •\tLos datos deben ser obtenidos del archivo stays.json y no deben ser escritos a mano. •\tEl proyecto debe ser modulado y estructurado de forma que sea fácil de entender y mantener. •\tEl proyecto debe ser publicado en GitHub Pages. •\tEl proyecto debe tener más de un commit. •\tLa estructura de carpetas debe de ser por componentes según estructura de react.js •\tLas funciones dentro de los distintos modulos (app.js, data.js y dom.js) debe ir de acorde a su nombre. •\tEl proyecto debe ser subido a GitHub y el enlace debe ser enviado para su revisión.\n","date":"12 marzo 2023","permalink":"/platform/levels/level3_react/dia13/mini/","section":"Levels","summary":"Instrucciones # Bienvenido al mini proyecto del nivel 3.","title":"Instrucciones"},{"content":"Instrucciones # Bienvenido al mini proyecto del nivel 3. En este proyecto estaremos aplicando los adquiridos tanto en el nivel 2 como lo que estás aprendiendo en el nivel 3. Sigue las instrucciones de este archivo para completar el proyecto y ten en cuenta que estas mismas instrucciones se tomaran en cuenta para la evaluación del proyecto.\nInstrucciones generales # La misma empresa le gusto tu trabajo pasado pero ahora desea la aplicación en un código especifico migra y realízala con React.JS. el sector de viajes llamada windbnb Por suerte, ya tienes una base de código que puedes utilizar para comenzar a trabajar. Según las instrucciones que el cliente nos ha dado, te daré las instrucciones para completar el proyecto. El Figma del proyecto se encuentra en el siguiente enlace: Windbnb Instrucciones del proyecto\nLayout | Diseño # El diseño de esta página web debe ser 100% responsive. Debes asegurarte de que el diseño se adapte a diferentes tamaños de pantalla. Para lograr esto, el cliente y tu han acordado que se trabajará con la librería de Bootstrap 5. Para los estilos que no se puedan lograr con Bootstrap, puedes utilizar CSS puro. Dentro del archivo Figma verás que hay 2 vistas principales: Mobile y Desktop. Te recomendamos que trabajes con la vista Mobile primero y luego con la vista Desktop. Esto te ayudará a enfocarte en la responsividad de la página web, a la vez que Bootstrap está creado con este enfoque.\nFuentes # Las fuentes para este proyecto las hemos traido de Google Fonts. Ya hemos importado las fuentes a usar al proyecto. Para usarlas desde CSS, puedes utilizar la siguiente sintaxis:\nfont-family: 'Montserrat', sans-serif; /* Fuente principal */ font-family: 'Mulish', sans-serif; /* Fuente secundaria */ Iconos # Para los iconos, utilizaremos la librería de iconos de Google: Material Icons. Para usarlos puede seguir el enlace anterior y buscar el icono que necesite. Una vez que lo encuentre, copie el código que se le proporciona y peguelo en el HTML. Por ejemplo:\n\u0026lt;i class=\u0026#34;material-icons-sharp\u0026#34;\u0026gt;favorite\u0026lt;/i\u0026gt; Código base # Se te proporciona un código base para comenzar con el proyecto. Te recomendamos revisarlo y entenderlo para que puedas aprovecharlo al máximo. Puedes modificarlo de considerarlo necesairio, sin embargo debes tener cuidado con ello, ya que la base que se te entrega está pensada para que puedas completar el proyecto sin tener que modificarla demasiado. Algunas cosas que no debes modificar son: •\tEl nombre de los archivos y carpetas proporcionados. •\tEl archivo stays.json que contiene los datos de los alojamientos. •\tEl archivo index.html que contiene la estructura de la página web. Varios de los estilos ya están listos, sin embargo, debes completarlos para que se adapten a los requerimientos del proyecto.\nConsideraciones para la calificación # A continuación te diremos cuales son los puntos que se tomarán en cuenta para la calificacion del proyecto: •\tEl diseño debe ser 100% responsive. •\tEl diseño debe ser lo más fiel posible al proporcionado en el archivo Figma. •\tLos colores, fuentes, tamaños de letra, etc. deben ser los proporcionados en el archivo Figma. •\tEl proyecto debe ser desarrollado React y con Bootstrap 5. Para los estilos que no se puedan lograr con Bootstrap, puedes utilizar CSS puro. •\tLos datos deben ser obtenidos del archivo stays.json y no deben ser escritos a mano. •\tEl proyecto debe ser modulado y estructurado de forma que sea fácil de entender y mantener. •\tEl proyecto debe ser publicado en GitHub Pages. •\tEl proyecto debe tener más de un commit. •\tLa estructura de carpetas debe de ser por componentes según estructura de react.js •\tLas funciones dentro de los distintos modulos (app.js, data.js y dom.js) debe ir de acorde a su nombre. •\tEl proyecto debe ser subido a GitHub y el enlace debe ser enviado para su revisión.\n","date":"12 marzo 2023","permalink":"/platform/levels/level4_php/13laravel/mini/","section":"Levels","summary":"Instrucciones # Bienvenido al mini proyecto del nivel 3.","title":"Instrucciones"},{"content":"Instrucciones # Bienvenido al mini proyecto del nivel 3. En este proyecto estaremos aplicando los adquiridos tanto en el nivel 2 como lo que estás aprendiendo en el nivel 3. Sigue las instrucciones de este archivo para completar el proyecto y ten en cuenta que estas mismas instrucciones se tomaran en cuenta para la evaluación del proyecto.\nInstrucciones generales # La misma empresa le gusto tu trabajo pasado pero ahora desea la aplicación en un código especifico migra y realízala con React.JS. el sector de viajes llamada windbnb Por suerte, ya tienes una base de código que puedes utilizar para comenzar a trabajar. Según las instrucciones que el cliente nos ha dado, te daré las instrucciones para completar el proyecto. El Figma del proyecto se encuentra en el siguiente enlace: Windbnb Instrucciones del proyecto\nLayout | Diseño # El diseño de esta página web debe ser 100% responsive. Debes asegurarte de que el diseño se adapte a diferentes tamaños de pantalla. Para lograr esto, el cliente y tu han acordado que se trabajará con la librería de Bootstrap 5. Para los estilos que no se puedan lograr con Bootstrap, puedes utilizar CSS puro. Dentro del archivo Figma verás que hay 2 vistas principales: Mobile y Desktop. Te recomendamos que trabajes con la vista Mobile primero y luego con la vista Desktop. Esto te ayudará a enfocarte en la responsividad de la página web, a la vez que Bootstrap está creado con este enfoque.\nFuentes # Las fuentes para este proyecto las hemos traido de Google Fonts. Ya hemos importado las fuentes a usar al proyecto. Para usarlas desde CSS, puedes utilizar la siguiente sintaxis:\nfont-family: 'Montserrat', sans-serif; /* Fuente principal */ font-family: 'Mulish', sans-serif; /* Fuente secundaria */ Iconos # Para los iconos, utilizaremos la librería de iconos de Google: Material Icons. Para usarlos puede seguir el enlace anterior y buscar el icono que necesite. Una vez que lo encuentre, copie el código que se le proporciona y peguelo en el HTML. Por ejemplo:\n\u0026lt;i class=\u0026#34;material-icons-sharp\u0026#34;\u0026gt;favorite\u0026lt;/i\u0026gt; Código base # Se te proporciona un código base para comenzar con el proyecto. Te recomendamos revisarlo y entenderlo para que puedas aprovecharlo al máximo. Puedes modificarlo de considerarlo necesairio, sin embargo debes tener cuidado con ello, ya que la base que se te entrega está pensada para que puedas completar el proyecto sin tener que modificarla demasiado. Algunas cosas que no debes modificar son: •\tEl nombre de los archivos y carpetas proporcionados. •\tEl archivo stays.json que contiene los datos de los alojamientos. •\tEl archivo index.html que contiene la estructura de la página web. Varios de los estilos ya están listos, sin embargo, debes completarlos para que se adapten a los requerimientos del proyecto.\nConsideraciones para la calificación # A continuación te diremos cuales son los puntos que se tomarán en cuenta para la calificacion del proyecto: •\tEl diseño debe ser 100% responsive. •\tEl diseño debe ser lo más fiel posible al proporcionado en el archivo Figma. •\tLos colores, fuentes, tamaños de letra, etc. deben ser los proporcionados en el archivo Figma. •\tEl proyecto debe ser desarrollado React y con Bootstrap 5. Para los estilos que no se puedan lograr con Bootstrap, puedes utilizar CSS puro. •\tLos datos deben ser obtenidos del archivo stays.json y no deben ser escritos a mano. •\tEl proyecto debe ser modulado y estructurado de forma que sea fácil de entender y mantener. •\tEl proyecto debe ser publicado en GitHub Pages. •\tEl proyecto debe tener más de un commit. •\tLa estructura de carpetas debe de ser por componentes según estructura de react.js •\tLas funciones dentro de los distintos modulos (app.js, data.js y dom.js) debe ir de acorde a su nombre. •\tEl proyecto debe ser subido a GitHub y el enlace debe ser enviado para su revisión.\n","date":"12 marzo 2023","permalink":"/platform/levels/level5_laravel/13laravel/mini/","section":"Levels","summary":"Instrucciones # Bienvenido al mini proyecto del nivel 3.","title":"Instrucciones"},{"content":"Instrucciones Proyecto Final # ### Paso 1: crea un nuevo repositorio en github ### Paso 2: copie los recursos, README.md a su repositorio ### Paso 3: inicie sesión en Figma para verificar la fuente, el color, el espaciado, etc. ### Paso 4: Complete todas las historias de usuario ### Paso 5: Actualice README.md ### Paso 6: implemente su aplicación y envíe su solución ### Paso 7: Comparta su solución en Discord, Twitter y otras plataformas para solicitar comentarios Link de Figma: # https://www.figma.com/file/5X3Ao3gEqZPqqKctP7riDF?chrome=DOCUMENTATION\u0026embed_host=astra\u0026kind=\u0026node-id=0%3A1\u0026viewer=1\nLink de API: # https://openweathermap.org/api\nA continuación te diremos cuales son los puntos que se tomarán en cuenta para la calificacion del proyecto: • El diseño debe ser 100% responsive. • El diseño debe ser lo más fiel posible al proporcionado en el archivo Figma. • Los colores, fuentes, tamaños de letra, etc. deben ser los proporcionados en el archivo Figma. • El proyecto debe ser desarrollado NEXT.js y con Bootstrap 5. Para los estilos que no se puedan lograr con Bootstrap, puedes utilizar CSS puro. • El proyecto debe ser modulado y estructurado de forma que sea fácil de entender y mantener. • El proyecto debe ser publicado en GitHub Pages. • El proyecto debe tener más de un commit descarga el Archivo ZIP para completar tu PROYECTO.\n","date":"12 marzo 2023","permalink":"/platform/levels/level3_react/dia14/final/","section":"Levels","summary":"Instrucciones Proyecto Final # ### Paso 1: crea un nuevo repositorio en github ### Paso 2: copie los recursos, README.","title":"Instrucciones Final"},{"content":"Instrucciones Proyecto Final # ### Paso 1: crea un nuevo repositorio en github ### Paso 2: copie los recursos, README.md a su repositorio ### Paso 3: inicie sesión en Figma para verificar la fuente, el color, el espaciado, etc. ### Paso 4: Complete todas las historias de usuario ### Paso 5: Actualice README.md ### Paso 6: implemente su aplicación y envíe su solución ### Paso 7: Comparta su solución en Discord, Twitter y otras plataformas para solicitar comentarios Link de Figma: # https://www.figma.com/file/5X3Ao3gEqZPqqKctP7riDF?chrome=DOCUMENTATION\u0026embed_host=astra\u0026kind=\u0026node-id=0%3A1\u0026viewer=1\nLink de API: # https://openweathermap.org/api\nA continuación te diremos cuales son los puntos que se tomarán en cuenta para la calificacion del proyecto: • El diseño debe ser 100% responsive. • El diseño debe ser lo más fiel posible al proporcionado en el archivo Figma. • Los colores, fuentes, tamaños de letra, etc. deben ser los proporcionados en el archivo Figma. • El proyecto debe ser desarrollado NEXT.js y con Bootstrap 5. Para los estilos que no se puedan lograr con Bootstrap, puedes utilizar CSS puro. • El proyecto debe ser modulado y estructurado de forma que sea fácil de entender y mantener. • El proyecto debe ser publicado en GitHub Pages. • El proyecto debe tener más de un commit descarga el Archivo ZIP para completar tu PROYECTO.\n","date":"12 marzo 2023","permalink":"/platform/levels/level4_php/14laravel/final/","section":"Levels","summary":"Instrucciones Proyecto Final # ### Paso 1: crea un nuevo repositorio en github ### Paso 2: copie los recursos, README.","title":"Instrucciones Final"},{"content":"Instrucciones Proyecto Final # ### Paso 1: crea un nuevo repositorio en github ### Paso 2: copie los recursos, README.md a su repositorio ### Paso 3: inicie sesión en Figma para verificar la fuente, el color, el espaciado, etc. ### Paso 4: Complete todas las historias de usuario ### Paso 5: Actualice README.md ### Paso 6: implemente su aplicación y envíe su solución ### Paso 7: Comparta su solución en Discord, Twitter y otras plataformas para solicitar comentarios Link de Figma: # https://www.figma.com/file/5X3Ao3gEqZPqqKctP7riDF?chrome=DOCUMENTATION\u0026embed_host=astra\u0026kind=\u0026node-id=0%3A1\u0026viewer=1\nLink de API: # https://openweathermap.org/api\nA continuación te diremos cuales son los puntos que se tomarán en cuenta para la calificacion del proyecto: • El diseño debe ser 100% responsive. • El diseño debe ser lo más fiel posible al proporcionado en el archivo Figma. • Los colores, fuentes, tamaños de letra, etc. deben ser los proporcionados en el archivo Figma. • El proyecto debe ser desarrollado NEXT.js y con Bootstrap 5. Para los estilos que no se puedan lograr con Bootstrap, puedes utilizar CSS puro. • El proyecto debe ser modulado y estructurado de forma que sea fácil de entender y mantener. • El proyecto debe ser publicado en GitHub Pages. • El proyecto debe tener más de un commit descarga el Archivo ZIP para completar tu PROYECTO.\n","date":"12 marzo 2023","permalink":"/platform/levels/level5_laravel/14laravel/final/","section":"Levels","summary":"Instrucciones Proyecto Final # ### Paso 1: crea un nuevo repositorio en github ### Paso 2: copie los recursos, README.","title":"Instrucciones Final"},{"content":"MySQL en phpMyAdmin 5 # lección completa sobre cómo utilizar MySQL en phpMyAdmin, una popular herramienta de administración de bases de datos web:\nPaso 1: Acceder a phpMyAdmin\nAbre tu navegador web y accede a la URL donde está instalado phpMyAdmin. Por ejemplo, si está instalado localmente, la URL podría ser http://localhost/phpmyadmin. Ingresa tu nombre de usuario y contraseña para acceder a phpMyAdmin. Estos credenciales deben ser los mismos que usaste para configurar MySQL. Paso 2: Seleccionar la base de datos\nUna vez que hayas accedido a phpMyAdmin, verás una lista de bases de datos en el panel izquierdo. Haz clic en el nombre de la base de datos en la que deseas trabajar. Si aún no tienes una base de datos, puedes crear una nueva siguiendo los pasos mencionados a continuación. Paso 3: Crear una base de datos\nEn el panel izquierdo de phpMyAdmin, haz clic en \u0026ldquo;Nueva\u0026rdquo; para crear una nueva base de datos. Ingresa un nombre para la nueva base de datos y selecciona el conjunto de caracteres y la clasificación adecuada. Haz clic en \u0026ldquo;Crear\u0026rdquo; para crear la base de datos. Paso 4: Crear una tabla\nUna vez seleccionada la base de datos, haz clic en la pestaña \u0026ldquo;Estructura\u0026rdquo;. En la parte superior, encontrarás un campo para ingresar el nombre de la tabla. Ingresa un nombre para la tabla y especifica el número de columnas que deseas tener. En la sección de columnas, ingresa los nombres de columna, selecciona el tipo de datos adecuado para cada columna y define otras propiedades, como la longitud y si es requerida o no. Haz clic en \u0026ldquo;Guardar\u0026rdquo; para crear la tabla. Paso 5: Insertar datos en la tabla\nDespués de crear la tabla, ve a la pestaña \u0026ldquo;Datos\u0026rdquo;. Haz clic en \u0026ldquo;Insertar\u0026rdquo; para agregar una nueva fila de datos. Completa los valores para cada columna en la fila de inserción. Haz clic en \u0026ldquo;Ejecutar\u0026rdquo; para insertar los datos en la tabla. Paso 6: Ejecutar consultas SQL\nphpMyAdmin te permite ejecutar consultas SQL directamente en la base de datos. Ve a la pestaña \u0026ldquo;SQL\u0026rdquo; y escribe tu consulta SQL en el campo de texto. Haz clic en \u0026ldquo;Ejecutar\u0026rdquo; para ejecutar la consulta y ver los resultados. Paso 7: Administrar la base de datos\nphpMyAdmin proporciona una variedad de funciones para administrar la base de datos, como crear y eliminar tablas, agregar y eliminar columnas, realizar copias de seguridad, importar y exportar datos, entre otros. Explora las diferentes opciones y características disponibles en phpMyAdmin para administrar eficientemente tu base de datos. Recuerda que phpMyAdmin es una herramienta poderosa y debes tener cuidado al realizar cambios en tu base de datos. Asegúrate de entender las consecuencias de tus acciones antes de ejecutar consultas o modificar estructuras de tablas.\nmysql en Laravel # ","date":"12 marzo 2023","permalink":"/platform/levels/level4_php/12laravel/dependencias/","section":"Levels","summary":"MySQL en phpMyAdmin 5 # lección completa sobre cómo utilizar MySQL en phpMyAdmin, una popular herramienta de administración de bases de datos web:","title":"MySQL en phpMyAdmin"},{"content":"CRUD LARAVEL 4 # paso a paso completo para crear un CRUD (Crear, Leer, Actualizar, Eliminar) utilizando Laravel:\nPaso 1: Configurar un proyecto Laravel Comienza por configurar un nuevo proyecto Laravel utilizando el comando composer create-project. Abre una terminal y ejecuta el siguiente comando:\ncomposer create-project --prefer-dist laravel/laravel nombre-proyecto Esto creará un nuevo proyecto Laravel en un directorio llamado \u0026ldquo;nombre-proyecto\u0026rdquo;.\nPaso 2: Configurar la base de datos Accede al archivo .env en la raíz de tu proyecto y configura la conexión a la base de datos. Asegúrate de tener una base de datos creada y configurada correctamente en tu entorno de desarrollo.\nPaso 3: Crear una migración y modelo Utiliza las migraciones de Laravel para crear la estructura de la base de datos. Ejecuta el siguiente comando en la terminal:\nphp artisan make:migration create_nombre_tabla_table --create=nombre_tabla Esto creará un archivo de migración en el directorio database/migrations. Abre el archivo de migración y define los campos de la tabla.\nUna vez que hayas creado la migración, ejecuta el siguiente comando para migrar la tabla a la base de datos:\nphp artisan migrate Después de crear la migración, crea un modelo correspondiente utilizando el comando make:model:\nphp artisan make:model NombreModelo Esto generará un archivo de modelo en el directorio app/Models.\nPaso 4: Crear rutas y controladores Define las rutas y los controladores para tu CRUD. Abre el archivo routes/web.php y define las rutas del CRUD. Puedes utilizar los métodos Route::get(), Route::post(), Route::put(), Route::delete(), entre otros, para definir las diferentes rutas y los controladores que manejarán esas rutas.\nCrea un controlador utilizando el comando make:controller:\nphp artisan make:controller NombreControlador --resource Esto generará un archivo de controlador en el directorio app/Http/Controllers con los métodos CRUD predefinidos.\nPaso 5: Implementar la lógica del CRUD En el controlador, implementa la lógica para cada uno de los métodos CRUD. Por ejemplo, en el método index(), puedes obtener todos los registros de la base de datos utilizando el modelo correspondiente y devolverlos a la vista. En el método store(), puedes crear un nuevo registro en la base de datos utilizando los datos recibidos del formulario.\nUtiliza los métodos proporcionados por Laravel en el controlador y el modelo para realizar operaciones de base de datos, como all(), find(), create(), update(), delete(), etc.\nPaso 6: Crear vistas Crea las vistas correspondientes para tu CRUD en el directorio resources/views. Puedes crear una vista para mostrar todos los registros, una vista para mostrar un formulario de creación, una vista para mostrar un formulario de edición, y así sucesivamente.\nDentro de las vistas, utiliza la sintaxis de Blade de Laravel para mostrar los datos, crear formularios, etc.\nPaso 7: Asociar rutas a controladores Asocia las rutas definidas en el paso 4 a los métodos del controlador correspondiente. Ab\nVideo Crud con Laravel # ","date":"12 marzo 2023","permalink":"/platform/levels/level4_php/11laravel/redux/","section":"Levels","summary":"CRUD LARAVEL 4 # paso a paso completo para crear un CRUD (Crear, Leer, Actualizar, Eliminar) utilizando Laravel:","title":"CRUD"},{"content":"Rutas API # Next.js provee una solución para construir APIs fácilmente en un entorno Serverless (Sin servidor), por lo que no tendremos que preocuparnos de pagar alojamiento de servidores para el back-end de nuestra aplicación. Todos los archivos dentro de la carpeta pages/api serán tratados como endpoints de nuestra API en lugar de páginas. Por ejemplo, si creamos un archivo pages/api/hola.js podremos acceder al mismo en la ruta: /api/hola y nos devolverá como respuesta un objeto json.\nexport default function manejador(req, res) { res.status(200).json({ texto: \u0026#34;Hola\u0026#34; }); } pages/api/hola.js Como puedes observar, para que este archivo funcione correctamente como API endpoint es necesario exportar una función manejador (handler) con los parámetros req y res. Si queremos tener acceso a los diferentes métodos HTTP en nuestro manejador podemos usar req.method dentro del mismo, por ejemplo:\nexport default function manejador(req, res) { switch (req.method) { case \u0026#34;GET\u0026#34;: // Nuestra lógica de código para el método GET... break; case \u0026#34;PATCH\u0026#34;: // Nuestra lógica de código para el método PATCH... break; case \u0026#34;DELETE\u0026#34;: // Nuestra lógica de código para el método DELETE... break; default: res.status(405).json({ mensaje: `El método HTTP ${req.method} no esta disponible en esta ruta`, }); break; } } Si ya estás familiarizado con Express.js probablemente encuentres muchas similitudes en cuanto a sintaxis.\nBlog Oficial de Next # link : https://nextjs.org/docs/api-routes/introduction\nRUD de comentarios para un blog # Rutas:\nCrear comentario: POST /api/comment Actualizar comentario: PATCH /api/comment/:id Eliminar comentario: DELETE /api/comment/:id Obtener un comentario: GET /api/comment/:id Obtener todos los comentarios: GET /api/comment/ video Api con Next. JS # ","date":"12 marzo 2023","permalink":"/platform/levels/level3_react/dia11/redux/","section":"Levels","summary":"Rutas API # Next.","title":"Rutas API"},{"content":"Rutas API # Next.js provee una solución para construir APIs fácilmente en un entorno Serverless (Sin servidor), por lo que no tendremos que preocuparnos de pagar alojamiento de servidores para el back-end de nuestra aplicación. Todos los archivos dentro de la carpeta pages/api serán tratados como endpoints de nuestra API en lugar de páginas. Por ejemplo, si creamos un archivo pages/api/hola.js podremos acceder al mismo en la ruta: /api/hola y nos devolverá como respuesta un objeto json.\nexport default function manejador(req, res) { res.status(200).json({ texto: \u0026#34;Hola\u0026#34; }); } pages/api/hola.js Como puedes observar, para que este archivo funcione correctamente como API endpoint es necesario exportar una función manejador (handler) con los parámetros req y res. Si queremos tener acceso a los diferentes métodos HTTP en nuestro manejador podemos usar req.method dentro del mismo, por ejemplo:\nexport default function manejador(req, res) { switch (req.method) { case \u0026#34;GET\u0026#34;: // Nuestra lógica de código para el método GET... break; case \u0026#34;PATCH\u0026#34;: // Nuestra lógica de código para el método PATCH... break; case \u0026#34;DELETE\u0026#34;: // Nuestra lógica de código para el método DELETE... break; default: res.status(405).json({ mensaje: `El método HTTP ${req.method} no esta disponible en esta ruta`, }); break; } } Si ya estás familiarizado con Express.js probablemente encuentres muchas similitudes en cuanto a sintaxis.\nBlog Oficial de Next # link : https://nextjs.org/docs/api-routes/introduction\nRUD de comentarios para un blog # Rutas:\nCrear comentario: POST /api/comment Actualizar comentario: PATCH /api/comment/:id Eliminar comentario: DELETE /api/comment/:id Obtener un comentario: GET /api/comment/:id Obtener todos los comentarios: GET /api/comment/ video Api con Next. JS # ","date":"12 marzo 2023","permalink":"/platform/levels/level5_laravel/11laravel/redux/","section":"Levels","summary":"Rutas API # Next.","title":"Rutas API"},{"content":"API con Laravel 3 # Crear una API con Laravel es una forma común de desarrollar aplicaciones web que se comunican con otras aplicaciones o servicios a través de endpoints de API. A continuación, se muestra una lección completa sobre cómo crear una API utilizando Laravel:\nPaso 1: Configurar un proyecto Laravel Comienza por configurar un nuevo proyecto Laravel utilizando el comando composer create-project. Abre una terminal y ejecuta el siguiente comando:\ncomposer create-project --prefer-dist laravel/laravel nombre-proyecto Esto creará un nuevo proyecto Laravel en un directorio llamado \u0026ldquo;nombre-proyecto\u0026rdquo;.\nPaso 2: Configurar la base de datos Accede al archivo .env en la raíz de tu proyecto y configura la conexión a la base de datos. Asegúrate de tener una base de datos creada y configurada correctamente en tu entorno de desarrollo.\nPaso 3: Crear migraciones y modelos Utiliza las migraciones de Laravel para crear la estructura de la base de datos. Puedes crear una migración ejecutando el siguiente comando en la terminal:\nphp artisan make:migration nombre_migracion --create=nombre_tabla Esto creará un archivo de migración en el directorio database/migrations. Abre el archivo de migración y define los campos de la tabla.\nUna vez que hayas creado las migraciones, ejecuta el siguiente comando para migrar las tablas a la base de datos:\nphp artisan migrate Después de crear las migraciones, crea los modelos correspondientes utilizando el comando make:model:\nphp artisan make:model NombreModelo Esto generará un archivo de modelo en el directorio app/Models.\nPaso 4: Crear rutas y controladores Define las rutas y los controladores para tu API. Abre el archivo routes/api.php y define las rutas de la API. Puedes utilizar los métodos Route::get(), Route::post(), Route::put(), Route::delete(), entre otros, para definir las diferentes rutas y los controladores que manejarán esas rutas.\nCrea un controlador utilizando el comando make:controller:\nphp artisan make:controller NombreControlador --api Esto generará un archivo de controlador en el directorio app/Http/Controllers.\nEn el controlador, define los métodos para manejar las diferentes operaciones CRUD (crear, leer, actualizar y eliminar) en tu API.\nPaso 5: Implementar la lógica de la API En los métodos del controlador, utiliza los modelos y los métodos proporcionados por Laravel para implementar la lógica de tu API. Por ejemplo, puedes utilizar el método create() del modelo para crear registros en la base de datos, o el método all() para obtener todos los registros.\nUtiliza las respuestas JSON de Laravel para devolver las respuestas de la API en formato JSON. Puedes hacerlo utilizando el método response()-\u0026gt;json().\nPaso 6: Proteger la API (opcional) Si deseas agregar autenticación a tu API, Laravel proporciona varias opciones, como Laravel Passport para autenticación basada en tokens o Laravel Sanctum para autenticación basada en tokens de sesión.\nPuedes seguir la documentación de Laravel Passport o Laravel Sanctum para configurar la autenticación en tu API.\nPaso 7: Probar la API Una vez que hayas configurado y desarrollado tu API, puedes\nVideo API con Laravel 1 # ","date":"12 marzo 2023","permalink":"/platform/levels/level4_php/10laravel/webpack/","section":"Levels","summary":"API con Laravel 3 # Crear una API con Laravel es una forma común de desarrollar aplicaciones web que se comunican con otras aplicaciones o servicios a través de endpoints de API.","title":"API con Laravel"},{"content":"Componentes de Blade # En Laravel, Blade es el motor de plantillas incorporado que te permite escribir código HTML de una manera más expresiva y dinámica. Blade ofrece una serie de componentes y directivas que facilitan la creación de vistas reutilizables y dinámicas. A continuación, se muestran algunos de los componentes clave de Blade en Laravel:\nDirectivas de control de flujo: Blade proporciona directivas para controlar el flujo de ejecución en las vistas, como @if, @else, @elseif, @unless, @foreach, @for y @while. Estas directivas te permiten realizar evaluaciones condicionales y repetir bloques de código según ciertas condiciones.\nHerencia de plantillas: Blade admite la herencia de plantillas, lo que significa que puedes definir una plantilla principal con áreas que pueden ser sobrescritas por plantillas hijas. Puedes usar la directiva @extends para heredar una plantilla y la directiva @section para definir las áreas que pueden ser remplazadas en las plantillas hijas.\nInclusiones parciales: Puedes incluir contenido de otras vistas utilizando la directiva @include. Esto te permite reutilizar fragmentos de código en múltiples vistas. Puedes pasar variables a las vistas parciales utilizando el segundo argumento de la directiva @include.\nComponentes: Los componentes son una forma poderosa de encapsular una porción de código HTML y su lógica asociada en un componente reutilizable. Los componentes de Blade se definen con la directiva @component y se utilizan en las vistas con la directiva @component o @livewire. Los componentes pueden aceptar parámetros y tener métodos para controlar su comportamiento.\nSlots: Los slots son áreas variables en un componente que pueden ser remplazadas por contenido personalizado cuando se utiliza el componente. Puedes definir slots en un componente utilizando la directiva @slot, y luego reemplazar esos slots al usar el componente en una vista utilizando la directiva @slot o @slot con un nombre específico.\nDirectivas personalizadas: Blade te permite definir tus propias directivas personalizadas para encapsular funcionalidades específicas en tus vistas. Puedes crear directivas personalizadas utilizando el método directive del objeto Blade en tu archivo de rutas o en un proveedor de servicios.\nEstos son solo algunos de los componentes y características principales de Blade en Laravel. Blade ofrece una gran flexibilidad y potencia para la construcción de vistas dinámicas y reutilizables en tus aplicaciones Laravel. Puedes consultar la documentación oficial de Laravel para obtener más información sobre el uso y las características avanzadas de Blade.\nServer Side Render vs. Static Site Generation # Link de Blog : https://leonidasesteban.com/blog/ssg\nVideo SSG vs SSR # ","date":"12 marzo 2023","permalink":"/platform/levels/level5_laravel/05.2laravel/webpack/","section":"Levels","summary":"Componentes de Blade # En Laravel, Blade es el motor de plantillas incorporado que te permite escribir código HTML de una manera más expresiva y dinámica.","title":"Componentes de Blade"},{"content":"SSG vs SSR # Pre-renderizado # Next.js pre-renderiza cada página por defecto. Generando el HTML por adelantado en lugar de dejarle todo el trabajo al JavaScript del cliente. Esto se traduce en importantes mejoras de rendimiento y SEO. Cada HTML generado se asocia con un mínimo de código de JavaScript requerido para esa página. Cuando una página es cargada por el navegador, su código JavaScript se ejecuta y hace la página plenamente interactiva. Este proceso es llamado hidratación. Tipos de Pre-renderizado Existen dos formas de pre-renderizado en Next.js: Static Site Generation y Server-side Rendering. La diferencia principal radica en cuando se genera el HTML para la página. •\tSSG (Static Site Generation): El HTML se genera antes de cada petición, como al momento de crear la build. •\tSSR (Server-side Rendering): El HTML se genera en el servidor durante cada petición. Static Site Generation Si nuestra página no requiere datos de una fuente externa, Next.js se encargará de generarla de forma estática al crear la build. Por ejemplo:\nexport default function Perfil() { return \u0026lt;div\u0026gt;Perfil\u0026lt;/div\u0026gt;; } En cambio, si el contenido o rutas de la página dependen de una fuente externa, necesitaremos usar dos funciones especiales de Next.js: getStaticProps y getStaticPaths. Ejemplo 1: Digamos que tu página necesita una lista de posts publicados en tu blog desde un CMS. // TODO: Hacer fetch a los `posts` antes de que se pre-renderice la página export default function Blog({ posts }) { return ( \u0026lt;ul\u0026gt; {posts.map((post) =\u0026gt; ( \u0026lt;li key={post.id}\u0026gt;{post.titulo}\u0026lt;/li\u0026gt; ))} \u0026lt;/ul\u0026gt; ); } En el mismo archivo tenemos que exportar la función asíncrona getStaticProps, esta función es llamada al momento de crear la build y te permite pasar los datos recopilados a la página en forma de props.\nexport async function getStaticProps() { // Hacer fetch al endpoint que contiene los `posts` const res = await fetch(\u0026#34;https://.../posts\u0026#34;); const posts = await res.json(); return { props: { posts } }; } export default function Blog({ posts }) { // Renderizar posts... } Ejemplo 2: Queremos pre-renderizar posts individuales usando rutas dinámicas. Empezamos creando un archivo con ruta dinámica llamado pages/posts/[id].js, este nos permitirá acceder a nuestros posts según su id, con enlaces como: /posts/1, /posts/2, etc.\nexport default function Post({ post }) { return ( \u0026lt;div\u0026gt; \u0026lt;h1\u0026gt;{post.titulo}\u0026lt;/h1\u0026gt; \u0026lt;p\u0026gt;{post.contenido}\u0026lt;/p\u0026gt; \u0026lt;/div\u0026gt; ); } Podemos indicar a Next.js las rutas dinámicas que queremos pre-renderizar usando la función getStaticPaths.\nexport async function getStaticPaths() { // Hacer fetch al endpoint que contiene los `posts` const res = await fetch(\u0026#34;https://.../posts\u0026#34;); const posts = await res.json(); // Obtener rutas a pre-renderizar basado en el `id` de los posts const rutas = posts.map((post) =\u0026gt; `/posts/${post.id}`); return { paths: rutas, fallback: false }; } Nota: { fallback: false } hace que las rutas no incluidas devuelvan una página 404. Finalmente, utilizamos getStaticProps para conseguir los datos del post según el id proporcionado en el objeto params.\nexport async function getStaticPaths() { // ... } export async function getStaticProps({ params }) { // params contiene el `id` del post. const res = await fetch(`https://.../posts/${params.id}`); const post = await res.json(); // Pasar datos del post hacia la página en forma de props return { props: { post } }; } export default function Post({ post }) { // Renderizar post... } Server-side Rendering # Muchas veces los datos de nuestra página deben ser constantemente actualizados o tal vez necesitemos interactuar con una API haciendo consultas variadas y complejas. Para casos como estos, Next.js nos permite usar Server-side Rendering (SSR) en nuestras aplicaciones de React. Cuando una página utiliza Server-side rendering, el HTML de la misma se genera en el servidor durante cada petición. Para ello, necesitamos exportar la función asíncrona getServerSideProps, la cual recopila los datos y los pasa a la página. // Esta función es llamada durante cada petición\nexport async function getServerSideProps() { // Recopilar datos desde una API externa const res = await fetch(`https://.../datos`); const datos = await res.json(); // Pasar datos hacia la pagina en forma de props return { props: { datos } }; } export default function Pagina({ datos }) { // Renderizar datos... } Como puedes observar, getServerSideProps y getStaticProp cuentan con una sintaxis y funcionamiento similar, pero se diferencian principalmente por el momento en que son ejecutadas.\nServer Side Render vs. Static Site Generation # Link de Blog : https://leonidasesteban.com/blog/ssg\nVideo SSG vs SSR # ","date":"12 marzo 2023","permalink":"/platform/levels/level3_react/dia10/webpack/","section":"Levels","summary":"SSG vs SSR # Pre-renderizado # Next.","title":"SSG vs SSR"},{"content":"Tablas con Registros # Introducción: En Laravel, trabajar con tablas y registros de base de datos es fundamental para el desarrollo de aplicaciones web. En esta lección, exploraremos cómo crear tablas, realizar consultas y manipular registros en Laravel utilizando el ORM Eloquent.\nCrear tablas en Laravel: Paso 1: Asegúrate de tener Laravel instalado correctamente en tu proyecto.\nPaso 2: Para crear una tabla en Laravel, puedes utilizar migraciones. Las migraciones permiten definir la estructura de la tabla y se encargan de crear y modificar la base de datos de manera controlada. Puedes crear una migración utilizando el comando make:migration de Artisan. Por ejemplo:\nphp artisan make:migration create_nombre_de_la_tabla_table Esto generará un nuevo archivo de migración en el directorio database/migrations.\nPaso 3: Abre el archivo de migración recién creado y utiliza los métodos proporcionados por Laravel para definir la estructura de la tabla, como create, table, string, integer, etc. Por ejemplo: public function up() { Schema::create(\u0026#39;nombre_de_la_tabla\u0026#39;, function (Blueprint $table) { $table-\u0026gt;id(); $table-\u0026gt;string(\u0026#39;nombre_columna\u0026#39;); $table-\u0026gt;timestamps(); }); } Aquí, se define una tabla con una columna de ID, una columna de nombre y columnas de timestamps para el registro de la creación y actualización de los registros.\nPaso 4: Ejecuta la migración para crear la tabla en la base de datos utilizando el comando migrate de Artisan. Por ejemplo: php artisan migrate Esto creará la tabla definida en la migración en tu base de datos.\nRealizar consultas y manipular registros en Laravel: Paso 1: Para realizar consultas y manipular registros en Laravel, puedes utilizar el ORM Eloquent, que proporciona una interfaz fácil de usar para interactuar con la base de datos.\nPaso 2: Crea un modelo para la tabla utilizando el comando make:model de Artisan. Por ejemplo:\nphp artisan make:model NombreDelModelo Esto generará un nuevo archivo de modelo en el directorio app/Models.\nPaso 3: Abre el archivo del modelo creado y asegúrate de que la propiedad $table coincida con el nombre de la tabla que has creado. Por ejemplo: class NombreDelModelo extends Model { protected $table = \u0026#39;nombre_de_la_tabla\u0026#39;; // Otros métodos y relaciones del modelo } Paso 4: Utiliza los métodos proporcionados por Eloquent para realizar consultas y manipular registros. Algunos ejemplos comunes son: // Obtener todos los registros de la tabla $registros = NombreDelModelo::all(); // Obtener un registro por su ID $registro = NombreDelModelo::find($id); // Crear un nuevo registro $registro = new NombreDelModelo; $registro-\u0026gt;nombre_columna = \u0026#39;Valor\u0026#39;; $registro-\u0026gt;save(); // Actualizar un registro $registro = NombreDelModelo::find($id); $registro-\u0026gt;nombre_columna = \u0026#39;Nuevo valor\u0026#39;; $registro-\u0026gt;save(); // Eliminar un registro $registro = NombreDelModelo::find($id); $registro-\u0026gt;delete(); Estos son solo ejemplos bás\nicos, pero Eloquent proporciona una amplia gama de métodos para realizar consultas más avanzadas y realizar operaciones CRUD en la base de datos.\nConclusión: En Laravel, puedes crear tablas utilizando migraciones y manipular los registros de la base de datos utilizando el ORM Eloquent. Utilizando Eloquent, puedes realizar consultas y realizar operaciones CRUD de manera sencilla y eficiente. Esto simplifica el trabajo con tablas y registros en tu aplicación Laravel y te permite interactuar con la base de datos de manera segura y conveniente.\n# ","date":"12 marzo 2023","permalink":"/platform/levels/level5_laravel/10laravel/webpack/","section":"Levels","summary":"Tablas con Registros # Introducción: En Laravel, trabajar con tablas y registros de base de datos es fundamental para el desarrollo de aplicaciones web.","title":"Tablas con Registros "},{"content":"CSS en Next.js # Existen muchas formas de darle estilo a tu aplicación en Next.js, puedes importar archivos de hojas de estilo directamente gracias a la compatibilidad con los Módulos de CSS. Para ello el archivo debe nombrarse de la siguiente manera: [nombre].module.css. Los Módulos de CSS mantienen un ámbito local creando clases únicas automáticamente, por lo que te permite usar los mismos nombres de clases en diferentes archivos sin que tengas que preocuparte por colisiones. Por ejemplo, para crear un componente botón reusable, primero creamos componentes/Boton.module.css con el siguiente contenido:\n.peligro { color: white; background-color: red; } componentes/Boton.module.css # Y un archivo componentes/Boton.js donde importar y usar el módulo CSS antes creado.\nimport estilos from \u0026#34;./Boton.module.css\u0026#34;; export default function Boton() { return ( \u0026lt;button type=\u0026#34;button\u0026#34; className={estilos.peligro}\u0026gt; Borrar \u0026lt;/button\u0026gt; ); } componentes/Boton.js # Nota: La clase peligro es una propiedad del objeto estilos importado. Así de fácil es usar los Módulos de CSS en Next.js, recuerda que también tenemos más opciones de estilo a nuestra disposición, tales como Sass, Less o CSS en JavaScript. Recursos estáticos La carpeta public es utilizada en Next.js para servir todos nuestros recursos estáticos (imágenes, iconos, robots, entre otros). Puedes importar archivos dentro de la carpeta public usando (/) como URL base. Por ejemplo, para acceder a una imagen guardada en public/hero.jpg escribimos un código como el siguiente:\nexport default function Home() { return ( \u0026lt;div\u0026gt; \u0026lt;img src=\u0026#34;/hero.jpg\u0026#34; /\u0026gt; \u0026lt;/div\u0026gt; ); } pages/index.js Nota: No cambies el nombre de la carpeta public por ningún otro, es la única que puede servir recursos estáticos.\nvideo CCS CON NEXT # Creando sitios estáticos con Next.js # Next.js nos permite crear aplicaciones de React fácilmente con server render y sin configuración. En su versión 3 (actualmente beta) incluyen una nueva característica y es poder crear sitios estáticos.\n¿Qué es un sitio estático? Básicamente poder generar archivos .html en disco y que podamos luego llevar a producción fácilmente con Github Pages, Surge, Now, AWS S3, etc. Una ventaja de los sitios estáticos es que al ser un simple archivo en disco entrar a una página es super rápido, a comparación de un sitio dinámico que requiere hacer peticiones a un API o a una BD y luego generar el HTML dinámicamente con los datos obtenidos y a diferencia de una típica SPA no enviamos un HTML vacío, si no que el HTML que tenemos en disco ya tiene el contenido que necesitamos. Iniciando el proyecto\nComo siempre, vamos a iniciar nuestro proyecto y obtener un package.json ya sea que usen npm o yarn.\nnpm init --yes # o con yarn yarn init --yes Instalando dependencias # Luego vamos a instalar las dependencias de nuestro proyecto, para eso vamos a correr uno de estos scripts.\nnpm i next@beta react react-dom # o con yarn yarn add next@beta react react-dom Estamos usando una versión beta por lo que algunas cosas se pueden romper: si eso ocurre traten con otra versión beta inferior para ver si se arregla. Recuerden, usen las beta en producción bajo su propio riesgo.\nInstalar dependencias # Una vez hecho esto vamos a crear la página de Next.js que vamos a exportar en nuestra aplicación. Para eso vamos a crear un archivo pages/index.js con este código.\nimport { Component } from \u0026#39;react\u0026#39; import Head from \u0026#39;next/head\u0026#39; export default class extends Component { static async getInitialProps({ query }) { // vamos a cambiar el título dinámicamente dependiendo de un dato en la query return { title: query.title || \u0026#39;home page\u0026#39; } } render() { return ( \u0026lt;main\u0026gt; \u0026lt;Head\u0026gt; \u0026lt;title\u0026gt;{this.props.title}\u0026lt;/title\u0026gt; \u0026lt;/Head\u0026gt; \u0026lt;header\u0026gt; \u0026lt;h1\u0026gt;{this.props.title}\u0026lt;/h1\u0026gt; \u0026lt;/header\u0026gt; \u0026lt;p\u0026gt; Esta es nuestra página, el contenido es siempre el mismo, pero el título cambia. \u0026lt;/p\u0026gt; \u0026lt;/main\u0026gt; ) } } Esa es nuestra página. Como vemos vamos a obtener el title desde el querystring de la URL y vamos a modificar el título de la página tanto en la etiqueta como en la etiqueta \u003ch1 /\u003e con el valor de este. Por defecto mostramos el título home page si no está definido.\n\u003ch1 id=\"iniciar-servidor-en-desarrollo\" class=\"relative group\"\u003eIniciar servidor en desarrollo \u003cspan class=\"absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100\"\u003e\u003ca class=\"group-hover:text-primary-300 dark:group-hover:text-neutral-700\" style=\"text-decoration-line: none !important;\" href=\"#iniciar-servidor-en-desarrollo\" aria-label=\"Ancla\"\u003e#\u003c/a\u003e\u003c/span\u003e\u003c/h1\u003e \u003cp\u003eVamos ahora a probar que esto funcione en desarrollo, para eso simplemente vamos a definir estos scripts en el package.json.\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" class=\"chroma\"\u003e\u003ccode class=\"language-js\" data-lang=\"js\"\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"p\"\u003e{\u003c/span\u003e \u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\t\u003cspan class=\"s2\"\u003e\u0026#34;scripts\u0026#34;\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e \u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\t\u003cspan class=\"s2\"\u003e\u0026#34;dev\u0026#34;\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"s2\"\u003e\u0026#34;next\u0026#34;\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\t\u003cspan class=\"s2\"\u003e\u0026#34;build\u0026#34;\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"s2\"\u003e\u0026#34;next build\u0026#34;\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\t\u003cspan class=\"s2\"\u003e\u0026#34;start\u0026#34;\u003c/span\u003e\u003cspan class=\"o\"\u003e:\u003c/span\u003e \u003cspan class=\"s2\"\u003e\u0026#34;next start\u0026#34;\u003c/span\u003e \u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\t\u003cspan class=\"p\"\u003e}\u003c/span\u003e \u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"p\"\u003e}\u003c/span\u003e \u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003cp\u003eLuego vamos a inicar nuestra aplicación con el siguiente script:\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" class=\"chroma\"\u003e\u003ccode class=\"language-js\" data-lang=\"js\"\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"nx\"\u003enpm\u003c/span\u003e \u003cspan class=\"nx\"\u003erun\u003c/span\u003e \u003cspan class=\"nx\"\u003edev\u003c/span\u003e \u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"err\"\u003e#\u003c/span\u003e \u003cspan class=\"nx\"\u003eo\u003c/span\u003e \u003cspan class=\"nx\"\u003econ\u003c/span\u003e \u003cspan class=\"nx\"\u003eyarn\u003c/span\u003e \u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"nx\"\u003eyarn\u003c/span\u003e \u003cspan class=\"nx\"\u003edev\u003c/span\u003e \u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003cp\u003eEso nos va a correr un servidor HTTP en el puerto 3000, si entramos entonces a localhost:3000 nos debe mostrar la pagina.\n\u003ch1 id=\"video-de-sitios-estaticos\" class=\"relative group\"\u003evideo de Sitios Estaticos \u003cspan class=\"absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100\"\u003e\u003ca class=\"group-hover:text-primary-300 dark:group-hover:text-neutral-700\" style=\"text-decoration-line: none !important;\" href=\"#video-de-sitios-estaticos\" aria-label=\"Ancla\"\u003e#\u003c/a\u003e\u003c/span\u003e\u003c/h1\u003e ","date":"12 marzo 2023","permalink":"/platform/levels/level3_react/dia09/librerias/","section":"Levels","summary":"CSS en Next.","title":"CSS en Next.js y Recursos Estaticos"},{"content":"Modelos y Migraciones en Laravel y la definición de propiedades en los modelos. # Introducción: En Laravel, los modelos y las migraciones son componentes fundamentales para trabajar con bases de datos. Los modelos representan las entidades de tu aplicación y las migraciones se utilizan para definir y modificar la estructura de la base de datos. En esta lección, exploraremos cómo crear modelos y migraciones en Laravel, así como cómo definir propiedades en los modelos para interactuar con la base de datos.\nCrear modelos y migraciones en Laravel: Paso 1: Asegúrate de tener Laravel instalado correctamente en tu proyecto.\nPaso 2: Para crear un modelo y su migración asociada, puedes utilizar el comando make:model de Artisan. Por ejemplo:\nphp artisan make:model NombreDelModelo -m Esto generará un nuevo archivo de modelo en el directorio app/Models y una migración en el directorio database/migrations.\nPaso 3: Abre el archivo de migración recién creado y define la estructura de la tabla de la base de datos utilizando los métodos proporcionados por Laravel, como create, table, string, integer, etc. Por ejemplo: public function up() { Schema::create(\u0026#39;nombre_de_la_tabla\u0026#39;, function (Blueprint $table) { $table-\u0026gt;id(); $table-\u0026gt;string(\u0026#39;nombre_columna\u0026#39;); $table-\u0026gt;timestamps(); }); } Aquí, se define una tabla con una columna de ID, una columna de nombre y columnas de timestamps para el registro de la creación y actualización de los registros.\nPaso 4: Ejecuta la migración para crear la tabla en la base de datos utilizando el comando migrate de Artisan. Por ejemplo: php artisan migrate Esto creará la tabla definida en la migración en tu base de datos.\nDefinición de propiedades en los modelos: Paso 1: Abre el archivo del modelo creado previamente en el directorio app/Models. Dentro de la clase del modelo, puedes definir las propiedades que representarán las columnas de la tabla de la base de datos. Por ejemplo: class NombreDelModelo extends Model { protected $table = \u0026#39;nombre_de_la_tabla\u0026#39;; protected $fillable = [\u0026#39;nombre_columna\u0026#39;]; // Otros métodos y relaciones del modelo } Aquí, $table indica el nombre de la tabla asociada al modelo y $fillable especifica las columnas que se pueden asignar masivamente.\nPaso 2: Utiliza las propiedades definidas en los modelos para interactuar con la base de datos. Por ejemplo: // Crear un nuevo registro $registro = NombreDelModelo::create([\u0026#39;nombre_columna\u0026#39; =\u0026gt; \u0026#39;Valor\u0026#39;]); // Obtener todos los registros $registros = NombreDelModelo::all(); // Obtener un registro por su ID $registro = NombreDelModelo::find($id); // Actualizar un registro $registro-\u0026gt;nombre_columna = \u0026#39;Nuevo valor\u0026#39;; $registro-\u0026gt;save(); // Eliminar un registro $registro-\u0026gt;delete(); Aquí, se muestran ejemplos básicos de cómo crear, obtener, actualizar y eliminar registros utilizando el modelo.\nConclusión: En Laravel, los modelos y las migraciones son componentes clave para trabajar con bases de datos. Al crear modelos y migraciones, puedes definir la estructura de la base de datos y utilizar propiedades en los modelos para interactuar con los registros de la tabla correspondiente. Esto facilita la manipulación de los datos de la base de datos y ofrece una capa de abstracción para trabajar con las entidades de tu aplicación de manera eficiente y segura.\n","date":"12 marzo 2023","permalink":"/platform/levels/level5_laravel/09laravel/librerias/","section":"Levels","summary":"Modelos y Migraciones en Laravel y la definición de propiedades en los modelos.","title":"Model y Migraciones / Modelos con Propiedades"},{"content":"NavLinks Laravel 2 # En Laravel, los enlaces de navegación, o \u0026ldquo;NavLinks\u0026rdquo;, se utilizan para generar enlaces HTML de manera conveniente en tus vistas. Estos enlaces se utilizan típicamente para crear la navegación de tu aplicación, permitiendo a los usuarios moverse entre diferentes páginas.\nLaravel proporciona una forma sencilla de generar NavLinks utilizando el helper route(). El helper route() toma el nombre de la ruta como argumento y genera automáticamente el enlace correspondiente basado en la configuración de rutas de tu aplicación.\nAquí tienes un ejemplo de cómo generar un NavLink en Laravel:\n\u0026lt;a href=\u0026#34;{{ route(\u0026#39;nombre.ruta\u0026#39;) }}\u0026#34;\u0026gt;Texto del enlace\u0026lt;/a\u0026gt; Reemplaza 'nombre.ruta' con el nombre de la ruta que deseas enlazar y 'Texto del enlace' con el texto que quieres mostrar en el enlace.\nAdemás de utilizar el helper route(), Laravel también proporciona el helper url() que puedes utilizar para generar enlaces absolutos en lugar de enlaces basados en rutas. Aquí tienes un ejemplo:\n\u0026lt;a href=\u0026#34;{{ url(\u0026#39;/ruta\u0026#39;) }}\u0026#34;\u0026gt;Texto del enlace\u0026lt;/a\u0026gt; Reemplaza '/ruta' con la URL específica a la que deseas enlazar.\nAdemás de los helpers route() y url(), también puedes utilizar los métodos route() y url() de la instancia del objeto Illuminate\\Routing\\UrlGenerator para generar enlaces en tus controladores u otros lugares de tu aplicación.\nAquí tienes un ejemplo de cómo utilizar el método route() en un controlador:\npublic function index() { $enlace = app(\u0026#39;url\u0026#39;)-\u0026gt;route(\u0026#39;nombre.ruta\u0026#39;); // ... } Reemplaza 'nombre.ruta' con el nombre de la ruta correspondiente.\nRecuerda que para que los enlaces funcionen correctamente, debes asegurarte de haber definido las rutas correspondientes en el archivo routes/web.php o en otro archivo de rutas de tu aplicación.\nCon estos conceptos básicos, puedes utilizar los NavLinks de Laravel para crear fácilmente la navegación en tu aplicación y enlazar a diferentes rutas o URLs.\nVideo Navlinks # ","date":"12 marzo 2023","permalink":"/platform/levels/level4_php/09laravel/librerias/","section":"Levels","summary":"NavLinks Laravel 2 # En Laravel, los enlaces de navegación, o \u0026ldquo;NavLinks\u0026rdquo;, se utilizan para generar enlaces HTML de manera conveniente en tus vistas.","title":"NavLinks Laravel"},{"content":"Route Con Get Laravel # En Laravel, puedes definir rutas GET utilizando el método get del objeto Route. Las rutas GET se utilizan para manejar las solicitudes HTTP GET que llegan a tu aplicación. Puedes especificar una URL y una acción que se ejecutará cuando se acceda a esa URL.\nAquí tienes un ejemplo básico de cómo definir una ruta GET en Laravel:\nuse Illuminate\\Support\\Facades\\Route; Route::get(\u0026#39;/users\u0026#39;, function () { // Lógica para manejar la solicitud GET a /users // Devolver una vista o una respuesta return view(\u0026#39;users.index\u0026#39;); }); En este ejemplo, estamos definiendo una ruta GET en la URL /users. Cuando se acceda a esta URL, se ejecutará la función anónima pasada como segundo argumento de get(). Dentro de esta función, puedes realizar cualquier lógica necesaria, como interactuar con modelos, obtener datos de la base de datos o ejecutar servicios. Finalmente, puedes devolver una vista o una respuesta al usuario.\nTambién puedes utilizar un controlador para manejar la acción de la ruta en lugar de una función anónima. Esto ayuda a mantener tu código más estructurado y permite una mejor separación de la lógica de la ruta y la lógica de la aplicación. Aquí tienes un ejemplo:\nuse App\\Http\\Controllers\\UserController; use Illuminate\\Support\\Facades\\Route; Route::get(\u0026#39;/users\u0026#39;, [UserController::class, \u0026#39;index\u0026#39;]); En este caso, estamos usando el controlador UserController y el método index() para manejar la solicitud GET a /users. El controlador y el método se pasan como un array, donde el primer elemento es la clase del controlador y el segundo elemento es el nombre del método.\nPuedes definir tantas rutas GET como necesites en tu aplicación Laravel, y cada una puede tener su propia lógica y acción específicas. Esto te permite crear una API RESTful o construir diferentes vistas y páginas para tu aplicación web.\n","date":"12 marzo 2023","permalink":"/platform/levels/level5_laravel/04.2laravel/librerias/","section":"Levels","summary":"Route Con Get Laravel # En Laravel, puedes definir rutas GET utilizando el método get del objeto Route.","title":"Route Con Get Laravel  "},{"content":"Enlazando páginas # Para obtener una navegación fluida entre las páginas de nuestra aplicación, necesitamos importar el componente Link y usarlo de la siguiente manera:\nimport Link from \u0026#34;next/link\u0026#34;; export default function Home() { return ( \u0026lt;ul\u0026gt; \u0026lt;li\u0026gt; \u0026lt;Link href=\u0026#34;/\u0026#34;\u0026gt; \u0026lt;a\u0026gt;Home\u0026lt;/a\u0026gt; \u0026lt;/Link\u0026gt; \u0026lt;/li\u0026gt; \u0026lt;li\u0026gt; \u0026lt;Link href=\u0026#34;/perfil\u0026#34;\u0026gt; \u0026lt;a\u0026gt;Mi perfil\u0026lt;/a\u0026gt; \u0026lt;/Link\u0026gt; \u0026lt;/li\u0026gt; \u0026lt;li\u0026gt; \u0026lt;Link href=\u0026#34;/blog/post/hola-mundo\u0026#34;\u0026gt; \u0026lt;a\u0026gt;Post\u0026lt;/a\u0026gt; \u0026lt;/Link\u0026gt; \u0026lt;/li\u0026gt; \u0026lt;/ul\u0026gt; ); } pages/index.js En el ejemplo anterior podemos observar que hay múltiples enlaces, cada uno cuenta con un componente Link que recibe una propiedad href indicando la ruta a la que dirige. Link envuelve un elemento Anchor a que contiene el texto de nuestro enlace. Enlazando Rutas Dinámicas También puedes utilizar interpolación para crear la ruta, lo que resulta útil para los segmentos de ruta dinámicos. Por ejemplo, para mostrar una lista de posts que se han pasado al componente como propiedad: import Link from \u0026ldquo;next/link\u0026rdquo;;\nexport default function Posts({ posts }) { return ( \u0026lt;ul\u0026gt; {posts.map((post) =\u0026gt; ( \u0026lt;li key={post.id}\u0026gt; \u0026lt;Link href={`/blog/post/${post.id}`}\u0026gt; \u0026lt;a\u0026gt;{post.titulo}\u0026lt;/a\u0026gt; \u0026lt;/Link\u0026gt; \u0026lt;/li\u0026gt; ))} \u0026lt;/ul\u0026gt; ); } O usando un objeto URL: import Link from \u0026ldquo;next/link\u0026rdquo;;\nexport default function Posts({ posts }) { return ( \u0026lt;ul\u0026gt; {posts.map((post) =\u0026gt; ( \u0026lt;li key={post.id}\u0026gt; \u0026lt;Link href={{ pathname: \u0026#34;/blog/post/[id]\u0026#34;, query: { id: post.id }, }} \u0026gt; \u0026lt;a\u0026gt;{post.titulo}\u0026lt;/a\u0026gt; \u0026lt;/Link\u0026gt; \u0026lt;/li\u0026gt; ))} \u0026lt;/ul\u0026gt; ); } Como puedes observar, en el código anterior utilizamos el hook useRouter de Next.js para acceder al objeto router, dicho objeto contiene propiedades muy útiles, las partes dinámicas de cada ruta se almacenan en router.query Como se mencionó anteriormente, Next.js utiliza un enfoque basado en páginas para crear rutas. Concretamente, esto significa que en cada proyecto de Next.js existe una pagescarpeta. Dentro de esta carpeta especial, cada archivo y carpeta constituye una nueva ruta. En la pagescarpeta, la primera ruta raíz es index.js, que representa la página de inicio en la /URL. También puede nombrar su archivo y crear una ruta estática (es decir, about.jspara la /aboutruta). De manera similar, las carpetas también se pueden usar para crear rutas anidadas. Por ejemplo,\ncrear una carpeta con un nombre supporty un archivo dentro faq.jscreará la ruta /support/faq. Aquí hay un diagrama para ilustrar mejor esto: Las rutas dinámicas también son compatibles. Al poner corchetes en el nombre de su archivo o carpeta, puede crear una ruta dinámica. Por ejemplo, /blog/[article-id].jsadmitirá múltiples rutas como\n/blog/1, /blog/nextjs-dynamic-routing, etc. Limitaciones del enrutador Next.js # Desafortunadamente, este enfoque tiene una limitación importante. Es decir, a pesar de que las rutas anidadas comparten una ruta principal, no puede compartir el estado o el diseño entre ellas. Por ejemplo, tome la autenticación. En React, utilizando la biblioteca de enrutador de reacción , puede crear rutas personalizadas. Por ejemplo, podría crear una ruta protegida para verificar si el usuario ha iniciado sesión. Si el usuario no ha iniciado sesión, la ruta lo redirigirá, por ejemplo, a la página de inicio de sesión o registro. Luego, puede asignar esta ruta protegida a cualquier ruta /authenticationen su enrutador. Al hacer esto, las rutas anidadas no tienen que preocuparse por la autenticación, ya que la ruta principal se encargará de ello. Desafortunadamente, este escenario no es posible con Next.js. Puede crear un componente de ruta personalizado, pero tendrá que ajustarlo alrededor de cada página protegida individualmente. El mismo problema se aplica a los diseños. Si su aplicación tiene un tablero, varias páginas compartirán un diseño similar (navegación, pie de página, etc.). Tal como está, la única forma de aplicar un diseño a varias páginas a la vez es hacerlo en el nivel de la aplicación. Este diseño se aplicaría a toda su aplicación. Desafortunadamente, si tiene varios diseños, debe definirlos por página.\nCambios en el enrutador Next.js # Sabiendo todo esto, el equipo de Vercel decidió corregir estas limitaciones. Cambios en la creación de rutas Para empezar, de manera similar a la pagescarpeta, habrá una nueva carpeta llamada app. Esto es para proporcionar compatibilidad con versiones anteriores y permitir que los desarrolladores migren lentamente al nuevo enrutador. Entonces, la estructura de carpetas seguirá determinando nuevas rutas. Esto significa que una dashboardcarpeta dentro appestaría vinculada a las /dashboardrutas. Sin embargo, donde se pone interesante son los archivos dentro de esas rutas. El enrutador anterior asumía que cada archivo dentro de /pagesera una nueva ruta. Esto, por cierto, hizo que los desarrolladores separaran sus componentes React de páginas y no páginas (es decir, Navbar, Header, Footer). Poner un archivo como Navbar.jscon la página de inicio, también conocido como /pages/index.js, habría hecho que el enrutador creyera que Navbares una nueva ruta y no un simple componente secundario. Como resultado, muchos desarrolladores tuvieron que crear una componentscarpeta y separar sus diferentes componentes. Sin embargo, el nuevo enrutador asume que cada archivo NO es una ruta a menos que se indique explícitamente. Para crear una nueva ruta, por lo tanto, debe crear una page.jsdentro de la carpeta. Por lo tanto, nuestro ejemplo de proyecto anterior se vería así con el nuevo enrutador: Las rutas dinámicas también son compatibles. Con este nuevo formato, para tener una /blog/[article-id]URL por ejemplo, necesitarías una /app/blog/[article-id]/page.jsestructura de carpetas. En resumen, aquí hay una estructura de carpetas y sus rutas correspondientes: /app/blog/[article-id]/page.js→/blog/[article-id] /app/blog/[category-id]/page.js→/blog/[category-id] /app/blog/[category-id]/[article-id]/page.js→/blog/[category-id]/[article-id] Diseños anidados Los diseños también recibieron una actualización. Anteriormente, podía crear diseños en un archivo separado y luego importar el diseño a su página. Por ejemplo, aquí hay una página de tablero:\nimport DashboardLayout from '../components/DashboardLayout' export default function DashboardPage() { /* The content for your dashboard page */ } DashboardPage.getLayout = function getLayout(page) { return ( \u0026lt;DashboardLayout\u0026gt; {page} \u0026lt;/DashboardLayout\u0026gt; ) } Puede importar varios diseños a su página si necesita anidarlos. Sin embargo, dado que esto se hace por página, cada página anidada en su tablero tendría que importar los diseños y anidarlos. ¡Afortunadamente, esto está cambiando! Con el nuevo enrutador, podrá especificar un diseño para la página de su tablero y cualquier página anidada recibirá automáticamente este diseño. Todo lo que tiene que hacer es crear un layout.jsarchivo en la carpeta para que este diseño se aplique a todas las rutas en esta carpeta.\nMás concretamente, aquí hay un ejemplo: # En este ejemplo, layout.jsse creó un archivo en el nivel raíz, también conocido como en la appcarpeta. Este diseño se aplica automáticamente a cualquier ruta en la aplicación. Esta aplicación también tiene dos secciones: tablero y soporte. Dado que cada uno de estos posee su estilo, layout.jsse crea un archivo para aplicar el estilo específico para sus rutas. Además del diseño raíz, esto significa que cualquier ruta debajo /dashboardrecibirá el diseño de la aplicación y el del tablero. Como resultado, ya no tiene que especificar qué diseño usa, ya que los archivos pages.jslo hacen automáticamente .layout.js A diferencia del enrutador actual de Next.js, que solo le permitía obtener datos a nivel de página, también podrá obtener datos de los diseños. Podrá usar getStaticPropsy getServerPropsrecuperar datos y construir su diseño. Como resultado, sus /dashboardpáginas podrán obtener datos de múltiples componentes (el diseño de la aplicación, el diseño del tablero y la página misma).\nCómo crear un HOC (componente de orden superior) que puede redirigir condicionalmente a un usuario en función de su estado de inicio o cierre de sesión. En Next.js, de forma predeterminada, todas sus rutas se tratan de la misma manera. Si bien su aplicación específica puede incluir páginas o rutas que están destinadas solo para usuarios que iniciaron sesión, Next.js no proporciona una forma de aislar estas páginas en función del estado de autenticación de un usuario.\nEsto es de esperar ya que Next.js está diseñado para manejar un conjunto de tareas simple y bien definido. Si bien se puede usar como front-end para una aplicación, como en el repetitivo Next.js de CheatCode, tradicionalmente se usa para generar sitios de marketing estáticos o sitios respaldados por un CMS sin cabeza. Afortunadamente, resolver este problema no es demasiado complejo. Para solucionarlo, vamos a implementar dos componentes: authenticatedRouteque será una función que devuelve un componente React envuelto con una verificación condicional del estado de autenticación del usuario y una redirección si un usuario no está disponible. publicRouteque será una función que devuelve un componente React envuelto con una verificación condicional para el estado de autenticación del usuario y una redirección si un usuario está presente. Implementación de un componente de ruta autenticado Primero, construyamos el esqueleto de nuestro HOC y discutamos cómo va a funcionar:\n/components/AuthenticatedRoute/index.js import React from \u0026#34;react\u0026#34;; const authenticatedRoute = (Component = null, options = {}) =\u0026gt; { // We\u0026#39;ll handle wrapping the component here. }; export default authenticatedRoute; Aquí, exportamos una función simple de JavaScript que toma dos argumentos: React Componentcomo el primer argumento y un objeto de optionscomo el segundo. representa el Componentcomponente de la página protegida que queremos representar condicionalmente. Cuando vayamos a poner esto en uso, haremos algo como esto:\n/pages/\u0026lt;algunapágina\u0026gt;/index.js import authenticatedRoute from \u0026#39;../../components/AuthenticatedRoute\u0026#39;; const MyComponent = () =\u0026gt; { [...] }; export default authenticatedRoute(MyComponent, { pathAfterFailure: \u0026#39;/login\u0026#39; }) En el futuro, completemos nuestro HOC con el componente contenedor principal: /components/AuthenticatedRoute/index.js import React from \u0026#34;react\u0026#34;; const authenticatedRoute = (Component = null, options = {}) =\u0026gt; { class AuthenticatedRoute extends React.Component { state = { loading: true, }; render() { const { loading } = this.state; if (loading) { return \u0026lt;div /\u0026gt;; } return \u0026lt;Component {...this.props} /\u0026gt;; } } return AuthenticatedRoute; }; export default authenticatedRoute; Aquí, hemos llenado authenticatedRouteel cuerpo de nuestra función con un componente React basado en clases. La idea aquí es que queremos utilizar el estado y, a continuación, la componentDidMountfunción de la clase para que podamos decidir si queremos representar el pasado Componento redirigir al usuario fuera de él.\n/components/AuthenticatedRoute/index.js import React from \u0026#34;react\u0026#34;; import Router from \u0026#34;next/router\u0026#34;; const authenticatedRoute = (Component = null, options = {}) =\u0026gt; { class AuthenticatedRoute extends React.Component { state = { loading: true, }; componentDidMount() { if (this.props.isLoggedIn) { this.setState({ loading: false }); } else { Router.push(options.pathAfterFailure || \u0026#34;/login\u0026#34;); } } render() { const { loading } = this.state; if (loading) { return \u0026lt;div /\u0026gt;; } return \u0026lt;Component {...this.props} /\u0026gt;; } } return AuthenticatedRoute; }; export default authenticatedRoute; Ahora, con nuestro componentDidMountagregado, podemos ver implementado nuestro comportamiento principal. En el interior, todo lo que queremos saber es \u0026ldquo;¿hay un usuario conectado o no?\u0026rdquo; Si hay un usuario conectado, queremos decir \u0026ldquo;adelante y renderice el pasado Component\u0026rdquo;. Podemos ver que esto tiene lugar en el render()método del AuthenticatedRoutecomponente. Aquí, estamos diciendo, siempre que loadingsea true, simplemente devuelva un vacío (o no muestre nada al usuario). Si no estamos cargando, simplemente ejecute la returndeclaración en la parte inferior del archivo render(). Lo que esto logra es decir \u0026ldquo;hasta que sepamos que tenemos un usuario conectado, no mostrar nada, y si tenemos un usuario conectado, mostrarles la página a la que intentan acceder\u0026rdquo;. De vuelta en componentDidMount()la elsedeclaración, decimos \u0026ldquo;bien, no parece que el usuario haya iniciado sesión, así que vamos a redirigirlo\u0026rdquo;. Para hacer la redirección en este ejemplo, estamos usando el enrutador integrado Next.js para hacer la redirección por nosotros, pero puede usar cualquier enrutador JavaScript o React que desee (por ejemplo, si estuviéramos usando React Router, haría this.props.history.push(options.pathAfterFailure || \u0026lsquo;/login\u0026rsquo;)_ ¿Tener sentido? Entonces, si tenemos un usuario, muéstrale el componente. Si no tenemos un usuario, redirigirlo a otra ruta. Determinar el estado de inicio de sesión Ahora, técnicamente hablando, esto es todo lo que tenemos que hacer. Pero es posible que se pregunte \u0026ldquo;¿cómo sabemos si el usuario ha iniciado sesión?\u0026rdquo; Aquí es donde entra en juego su propia aplicación. En este ejemplo, estamos usando CheatCode Next.js Boilerplate que depende de que un usuario autenticado (si está disponible) esté presente en una tienda Redux global. Para hacer todo esto un poco más concreto, echemos un vistazo a esa configuración ahora:\n/components/AuthenticatedRoute/index.js import React from \u0026#34;react\u0026#34;; import Router from \u0026#34;next/router\u0026#34;; import { connect } from \u0026#34;react-redux\u0026#34;; const authenticatedRoute = (Component = null, options = {}) =\u0026gt; { class AuthenticatedRoute extends React.Component { state = { loading: true, }; componentDidMount() { if (this.props.isLoggedIn) { this.setState({ loading: false }); } else { Router.push(options.pathAfterFailure || \u0026#34;/login\u0026#34;); } } render() { const { loading } = this.state; if (loading) { return \u0026lt;div /\u0026gt;; } return \u0026lt;Component {...this.props} /\u0026gt;; } } return connect((state) =\u0026gt; ({ isLoggedIn: state?.authenticated \u0026amp;\u0026amp; !!state?.user, }))(AuthenticatedRoute); }; export default authenticatedRoute; El gran cambio que hemos hecho aquí es importar el connect()método del react-reduxpaquete (ya instalado en el repetitivo) y luego llamar a esa función, pasándole una mapStateToPropsfunción y luego envolviéndola alrededor de nuestro componente. Para ser claros, esta parte:\n/components/AuthenticatedRoute/index.js return connect((state) =\u0026gt; ({ isLoggedIn: state?.authenticated \u0026amp;\u0026amp; !!state?.user, }))(AuthenticatedRoute); Aquí, la función que pasamos como primer argumento connect()es la mapStateToPropsfunción (como se nombra en la react-reduxdocumentación). Esta función toma en cuenta el estado global actual de la aplicación proporcionada por el código modelo de /pages/_app.jsCheatCode Next.js. Al usar ese estado, como su nombre lo indica, asigna ese estado a un componente de React que se transmitirá a nuestro componente definido justo encima. Si miramos de cerca, aquí, estamos configurando un accesorio llamado isLoggedIn, verificando si el authenticatedvalor en nuestro estado es truey si tenemos o no un userobjeto en estado. si lo hacemos? ¡El usuario ha iniciado sesión! Si no, isLoggedInes falso. Si mira hacia atrás en la componentDidMount()función, aquí es donde estamos poniendo isLoggedInen uso el nuevo accesorio.\nUso de otras fuentes de autenticación Si no está utilizando CheatCode Next.js Boilerplate, la forma en que llega al estado autenticado de su usuario depende de su aplicación. Un ejemplo rápido y sucio de usar otra API se vería así:\nimport React from \u0026#34;react\u0026#34;; import Router from \u0026#34;next/router\u0026#34;; import { connect } from \u0026#34;react-redux\u0026#34;; import { myAuthenticationAPI } from \u0026#39;my-authentication-api\u0026#39;; const authenticatedRoute = (Component = null, options = {}) =\u0026gt; { class AuthenticatedRoute extends React.Component { state = { loading: true, }; async componentDidMount() { const isLoggedIn = await myAuthenticationAPI.isLoggedIn(); if (isLoggedIn) { this.setState({ loading: false }); } else { Router.push(options.pathAfterFailure || \u0026#34;/login\u0026#34;); } } render() { const { loading } = this.state; if (loading) { return \u0026lt;div /\u0026gt;; } return \u0026lt;Component {...this.props} /\u0026gt;; } } return AuthenticatedRoute; }; export default authenticatedRoute; En este ejemplo, casi todo es idéntico, pero en lugar de anticipar un valor de autenticación proveniente de una tienda de Redux, simplemente llamamos a nuestra API de autenticación (por ejemplo, Firebase) directamente, confiando en el valor de retorno de esa llamada como nuestro isLoggedInestado.\nImplementar un componente de ruta pública Ahora, algunas buenas noticias: nuestro publicRoutecomponente es idéntico al que vimos anteriormente con un pequeño cambio:\n/components/PublicRoute/index.js import React from \u0026#34;react\u0026#34;; import Router from \u0026#34;next/router\u0026#34;; import { connect } from \u0026#34;react-redux\u0026#34;; const publicRoute = (Component = null, options = {}) =\u0026gt; { class PublicRoute extends React.Component { state = { loading: true, }; componentDidMount() { if (!this.props.isLoggedIn) { this.setState({ loading: false }); } else { Router.push(options.pathAfterFailure || \u0026#34;/documents\u0026#34;); } } render() { const { loading } = this.state; if (loading) { return \u0026lt;div /\u0026gt;; } return \u0026lt;Component {...this.props} /\u0026gt;; } } return connect((state) =\u0026gt; ({ isLoggedIn: state?.authenticated \u0026amp;\u0026amp; !!state?.user, }))(PublicRoute); }; export default publicRoute; ¿Puedes distinguirlo? Arriba en el componentDidMounthemos agregado una !para decir \u0026ldquo;si el usuario no ha iniciado sesión, continúe y renderice el componente. Si está conectado, rediríjalo\u0026rdquo;. Literalmente la lógica inversa a nuestra authenticatedRoute. El punto aquí es que queremos usar el publicRoute()componente en rutas similares /logino /signuppara redirigir a los usuarios ya autenticados fuera de esas páginas. Esto asegura que no tengamos problemas con la base de datos más tarde, como usuarios duplicados o sesiones de múltiples usuarios.\n","date":"12 marzo 2023","permalink":"/platform/levels/level3_react/dia08/git/","section":"Levels","summary":"Enlazando páginas # Para obtener una navegación fluida entre las páginas de nuestra aplicación, necesitamos importar el componente Link y usarlo de la siguiente manera:","title":"Enlazando Paginas Con Next.js"},{"content":"Http Request / Navegaciones # En Laravel, las solicitudes HTTP se manejan a través de la clase Illuminate\\Http\\Request. Esta clase encapsula la información de la solicitud entrante, como los datos enviados, las cabeceras, los parámetros de la URL y más. Te permite acceder a estos datos y realizar validaciones, procesamiento y acciones basadas en la solicitud recibida.\nAquí hay algunos conceptos y ejemplos relacionados con las solicitudes HTTP y las navegaciones en Laravel:\nObtener información de una solicitud: Puedes acceder a los datos de una solicitud utilizando métodos proporcionados por la clase Request. Por ejemplo, para obtener el valor de un parámetro de la URL, puedes usar el método input o get:\nuse Illuminate\\Http\\Request; Route::get(\u0026#39;/users/{id}\u0026#39;, function (Request $request, $id) { $name = $request-\u0026gt;input(\u0026#39;name\u0026#39;); // o $name = $request-\u0026gt;get(\u0026#39;name\u0026#39;); // ... }); En este ejemplo, estamos obteniendo el valor del parámetro name de la URL.\nValidar datos de la solicitud: Laravel proporciona facilidades para validar los datos de la solicitud utilizando reglas de validación. Puedes usar el método validate de la clase Request para validar los datos de entrada y generar respuestas de error automáticamente:\nuse Illuminate\\Http\\Request; Route::post(\u0026#39;/users\u0026#39;, function (Request $request) { $request-\u0026gt;validate([ \u0026#39;name\u0026#39; =\u0026gt; \u0026#39;required\u0026#39;, \u0026#39;email\u0026#39; =\u0026gt; \u0026#39;required|email\u0026#39;, // ... ]); // ... }); Aquí estamos validando que los campos name y email estén presentes y tengan un formato de correo electrónico válido.\nRedireccionamiento: En Laravel, puedes redirigir al usuario a diferentes rutas o URLs utilizando el método redirect de la clase Redirector. Por ejemplo:\nuse Illuminate\\Http\\Request; Route::post(\u0026#39;/users\u0026#39;, function (Request $request) { // Validar los datos... // Redirigir al usuario a una ruta return redirect(\u0026#39;/dashboard\u0026#39;); // o redirigir a una URL externa return redirect(\u0026#39;https://example.com\u0026#39;); }); Aquí estamos redirigiendo al usuario a la ruta /dashboard después de validar los datos.\nRespuestas JSON: Si necesitas devolver una respuesta en formato JSON, puedes utilizar el método json de la clase Response. Por ejemplo:\nuse Illuminate\\Http\\Request; Route::get(\u0026#39;/users\u0026#39;, function (Request $request) { $users = User::all(); return response()-\u0026gt;json($users); }); En este caso, estamos devolviendo todos los usuarios en formato JSON como respuesta a la solicitud GET.\nEstos son solo algunos ejemplos de cómo trabajar con solicitudes HTTP y navegaciones en Laravel. El framework proporciona una amplia variedad de herramientas y métodos para manejar las solicitudes entrantes y realizar acciones basadas en ellas.\nEnlazando páginas laravel # Laravel MiMiddleware # ","date":"12 marzo 2023","permalink":"/platform/levels/level5_laravel/03.2laravel/git/","section":"Levels","summary":"Http Request / Navegaciones # En Laravel, las solicitudes HTTP se manejan a través de la clase Illuminate\\Http\\Request.","title":"Http Request / Navegaciones"},{"content":"Laravel middlewares 1 # En Laravel, los middlewares son componentes clave que permiten agregar capas de lógica entre las solicitudes entrantes y las respuestas salientes de una aplicación. Proporcionan una forma conveniente de filtrar, modificar o manipular las solicitudes HTTP antes de que sean manejadas por los controladores y de procesar las respuestas antes de que sean enviadas de vuelta al cliente.\nLos middlewares en Laravel son clases que implementan la interfaz Middleware o la interfaz MiddlewareInterface, dependiendo de la versión de Laravel que estés utilizando. Estas clases tienen un método principal llamado handle que acepta la solicitud entrante y un cierre de argumento de siguiente paso ($next), que se invoca para pasar la solicitud al siguiente middleware o al controlador final.\nPuedes crear tus propios middlewares en Laravel utilizando el comando de Artisan make:middleware. Por ejemplo, si deseas crear un middleware llamado VerificarEdadMiddleware, puedes ejecutar el siguiente comando en la línea de comandos:\nphp artisan make:middleware VerificarEdadMiddleware Esto generará una clase de middleware en la ubicación app/Http/Middleware/VerificarEdadMiddleware.php. En el método handle de esta clase, puedes escribir la lógica que deseas aplicar antes de pasar la solicitud al siguiente paso o incluso abortar la solicitud si se cumplen ciertas condiciones.\nUna vez que hayas creado un middleware, puedes utilizarlo en tus rutas o en grupos de rutas para aplicar la lógica específica del middleware a esas rutas. Puedes hacerlo utilizando el método middleware en tus definiciones de ruta o utilizando el middleware global en el archivo app/Http/Kernel.php.\nPor ejemplo, para aplicar el middleware VerificarEdadMiddleware a una ruta, puedes hacer lo siguiente:\nRoute::get(\u0026#39;/perfil\u0026#39;, function () { // })-\u0026gt;middleware(\u0026#39;VerificarEdadMiddleware\u0026#39;); Esto asegurará que antes de que se ejecute la función anónima de la ruta, la solicitud pasará por el middleware VerificarEdadMiddleware y se ejecutará la lógica definida en su método handle.\nAdemás de los middlewares personalizados, Laravel también incluye una serie de middlewares integrados que realizan tareas comunes, como autenticación, verificación CSRF, etc. Estos middlewares se pueden encontrar en el directorio app/Http/Middleware y se pueden utilizar de manera similar a los middlewares personalizados.\nEn resumen, los middlewares en Laravel son componentes flexibles que te permiten agregar y aplicar lógica de procesamiento a las solicitudes y respuestas HTTP en tu aplicación. Son una parte fundamental del flujo de solicitud y te brindan un gran control sobre el manejo de las solicitudes entrantes y las respuestas salientes.\nClases de middlewares # En Laravel, existen diferentes clases de middlewares disponibles que puedes utilizar según tus necesidades. Estas clases de middlewares están destinadas a realizar tareas comunes, como la autenticación, la verificación CSRF, la comprobación de roles y permisos, y más. A continuación, se presentan algunas de las clases de middlewares integrados en Laravel:\nAuthenticate: Este middleware se utiliza para autenticar a los usuarios. Verifica si el usuario ha iniciado sesión antes de permitir el acceso a rutas o controladores específicos.\nAuthorize: Este middleware se utiliza para autorizar a los usuarios. Verifica si el usuario tiene los roles y permisos necesarios para acceder a una determinada ruta o controlador.\nEncryptCookies: Este middleware se encarga de cifrar las cookies de la aplicación para garantizar la seguridad de los datos almacenados en ellas.\nVerifyCsrfToken: Este middleware protege tu aplicación contra ataques CSRF (Cross-Site Request Forgery) al verificar si el token CSRF en la solicitud coincide con el token almacenado en la sesión.\nTrimStrings: Este middleware se utiliza para recortar automáticamente los espacios en blanco de las cadenas de texto en las solicitudes entrantes. Es útil para mantener la consistencia en los datos recibidos.\nRedirectIfAuthenticated: Este middleware redirige automáticamente a los usuarios autenticados a una ruta específica, como la página de inicio, para evitar que accedan a rutas de autenticación como el formulario de inicio de sesión o registro.\nThrottleRequests: Este middleware limita la cantidad de solicitudes que un usuario puede hacer en un período de tiempo determinado. Es útil para prevenir ataques de fuerza bruta o solicitudes excesivas a la aplicación.\nEstas son solo algunas de las clases de middlewares integrados en Laravel. Puedes encontrar más clases de middlewares en el directorio app/Http/Middleware de tu proyecto Laravel. Además, puedes crear tus propias clases de middlewares personalizados para adaptarlos a tus necesidades específicas utilizando el comando make:middleware de Artisan.\nLaravel MiMiddleware # ","date":"12 marzo 2023","permalink":"/platform/levels/level4_php/08laravel/git/","section":"Levels","summary":"Laravel middlewares 1 # En Laravel, los middlewares son componentes clave que permiten agregar capas de lógica entre las solicitudes entrantes y las respuestas salientes de una aplicación.","title":"Laravel middlewares"},{"content":"Registros con Livewire y Validaciones en Tiempo Real en Laravel # Introducción: En Laravel, Livewire ofrece la capacidad de realizar registros en tiempo real y validaciones de formularios sin tener que recargar la página. En esta lección, exploraremos cómo utilizar Livewire para realizar registros de datos y realizar validaciones en tiempo real para proporcionar una mejor experiencia de usuario.\nRealizar registros con Livewire: Paso 1: Asegúrate de tener Livewire correctamente configurado en tu proyecto Laravel siguiendo los pasos de la lección anterior.\nPaso 2: Crea un componente Livewire utilizando el comando make:livewire de Artisan. Por ejemplo:\nphp artisan make:livewire CreatePost Esto generará un nuevo archivo de componente Livewire en el directorio app/Http/Livewire.\nPaso 3: Abre el archivo del componente Livewire y agrega los campos necesarios para el registro en una propiedad pública. Por ejemplo: public $titulo; public $contenido; Paso 4: En el método render() del componente, define la vista correspondiente al formulario de registro. Por ejemplo: public function render() { return view(\u0026#39;livewire.create-post\u0026#39;); } Crea la vista create-post.blade.php en la ubicación adecuada y define el formulario de registro con los campos correspondientes.\nPaso 5: Dentro del componente Livewire, define un método para manejar la acción de envío del formulario. Por ejemplo: public function store() { // Lógica para almacenar los datos recibidos en el formulario } En este método, puedes agregar la lógica necesaria para almacenar los datos recibidos en el formulario en tu base de datos u otro sistema de almacenamiento.\nPaso 6: Dentro de la vista del formulario, utiliza la directiva wire:submit para enviar la acción del formulario al método store() del componente. Por ejemplo: \u0026lt;form wire:submit.prevent=\u0026#34;store\u0026#34;\u0026gt; \u0026lt;!-- Campos del formulario --\u0026gt; \u0026lt;button type=\u0026#34;submit\u0026#34;\u0026gt;Enviar\u0026lt;/button\u0026gt; \u0026lt;/form\u0026gt; Esto enviará la acción del formulario al método store() del componente Livewire cuando se envíe el formulario.\nValidaciones en tiempo real: Paso 1: Dentro del método store() del componente Livewire, puedes agregar las validaciones necesarias utilizando las reglas de validación de Laravel. Por ejemplo: public function store() { $this-\u0026gt;validate([ \u0026#39;titulo\u0026#39; =\u0026gt; \u0026#39;required|max:255\u0026#39;, \u0026#39;contenido\u0026#39; =\u0026gt; \u0026#39;required\u0026#39;, ]); // Lógica para almacenar los datos recibidos en el formulario } Aquí, se aplican las reglas de validación necesarias para los campos del formulario.\nPaso 2: Para mostrar los mensajes de error en tiempo real, puedes utilizar la directiva @error en la vista del formulario. Por ejemplo: \u0026lt;input type=\u0026#34;text\u0026#34; wire:model=\u0026#34;titulo\u0026#34;\u0026gt; @error(\u0026#39;titulo\u0026#39;) \u0026lt;span class=\u0026#34;error\u0026#34;\u0026gt;{{ $message }}\u0026lt;/span\u0026gt; @enderror \u0026lt;textarea wire:model=\u0026#34;contenido\u0026#34;\u0026gt;\u0026lt;/textarea\u0026gt; @error(\u0026#39;contenido\u0026#39;) \u0026lt;span class=\u0026#34;error\u0026#34;\u0026gt;{{ $message }}\u0026lt;/span\u0026gt; @enderror Esto mostrará los mensajes de error correspondientes junto a los campos del formulario cuando ocurran errores de validación.\nPaso 3: Puedes utilizar el modificador .lazy al vincular los campos del formulario con las propiedades del componente Livewire para retrasar la actualización en tiempo real hasta que se realice una acción específica, como hacer clic en el botón de enviar. Por ejemplo:\n\u0026lt;input type=\u0026#34;text\u0026#34; wire:model.lazy=\u0026#34;titulo\u0026#34;\u0026gt; \u0026lt;textarea wire:model.lazy=\u0026#34;contenido\u0026#34;\u0026gt;\u0026lt;/textarea\u0026gt; Esto evita que se realicen validaciones en tiempo real hasta que el usuario intente enviar el formulario.\nConclusión: Utilizando Livewire en Laravel, puedes realizar registros en tiempo real y realizar validaciones de formularios sin tener que recargar la página. Al crear componentes Livewire, definir propiedades para los campos del formulario, aplicar validaciones y utilizar directivas de Livewire en las vistas, puedes proporcionar una experiencia de usuario fluida y mejorar la eficiencia en el manejo de registros y validaciones en tu aplicación Laravel.\nRegistros con Livewire # Validaciones en Tiempo Real en Laravel # ","date":"12 marzo 2023","permalink":"/platform/levels/level5_laravel/08laravel/git/","section":"Levels","summary":"Registros con Livewire y Validaciones en Tiempo Real en Laravel # Introducción: En Laravel, Livewire ofrece la capacidad de realizar registros en tiempo real y validaciones de formularios sin tener que recargar la página.","title":"Registros Con Livewire / Validaciones Tiempo Real"},{"content":"Características de Next.js # A continuación explicaremos las características de Next.js y lo que puedes ganar utilizando Next.js en tu proyecto.\nEnrutamiento # El enrutamiento es una de las características esenciales de Next.js. Next.js utiliza el sistema de enrutamiento basado en archivos de las páginas para estructurar cómo será el enrutamiento de tu aplicación. Cada archivo y carpeta creada dentro de la carpeta pages se convierte automáticamente en ruta en Next.js.\nEl sistema de enrutamiento de Next.js se divide en 3 tipos diferentes, y a continuación exploraremos cada uno de ellos.\nEnrutamiento de Índice # La carpeta pages tiene automáticamente index.js, que se convierte en la ruta de la página de inicio /. También puedes definir una página index.js para todas tus rutas en cualquier carpeta. Por ejemplo, puedes definir pages/profiles/index.js, que se asignará automáticamente a la página /profiles.\nMira este ejemplo, por ejemplo:\npages index.js profile index.js [user].js La estructura de páginas anterior mapeará las carpetas y archivos a una estructura de URL. Por ejemplo, / para las pages/index.js, /profile/ para las pages/profile/index.js, y /profile/user para las pages/profile/user.js, respectivamente.\nRutas Anidadas # Las rutas anidadas se crean dentro de una ruta padre. Para crear una ruta anidada, tienes que crear una ruta/carpeta padre dentro de la carpeta pages y añadir carpetas o archivos dentro para crear una ruta anidada.\nEcha un vistazo a este ejemplo:\npages index.js dashboard index.js user.js En el script anterior, los archivos user.js e index.js están anidados con la ruta padre del panel de control, lo que significa que sólo se puede acceder a las URLs con la ruta del panel de control.\nRutas Dinámicas # Se consigue mediante rutas dinámicas. Las rutas dinámicas son siempre indeterminadas. Pueden generarse mediante llamadas a la API o asignar un ID o slug a la URL.\nPara crear una ruta dinámica en Next.js, añade un corchete [id].js alrededor del nombre del archivo o del directorio. Puedes nombrar el archivo o el directorio con cualquier nombre de tu elección, pero debes adjuntar un corchete [] para que sea dinámico.\nEcha un vistazo a este ejemplo:\npages dashboard [user].js profile El script anterior hace que el [usuario].js sea dinámico, lo que significa que se debe acceder a la página del perfil con /dashboard/2/profile o /dashboard/johndoe/profile.\nEn la documentación oficial, puedes aprender más y los diferentes trucos para crear un sistema de enrutamiento más avanzado en Next.js.\nServir Archivos Estáticos # En Next.js, el servicio de archivos estáticos o activos como iconos, fuentes autoalojadas o imágenes se realiza a través de la carpeta public, la única fuente de verdad para los activos estáticos.\nLa carpeta public no debe ser renombrada según los documentos de Next.js. Servir activos estáticos a través de la carpeta public es muy sencillo, según la configuración de Next.js. Renderización Previa\nUna de las enormes características de Next.js es el pre-renderizado, que hace que Next.js funcione muy bien y muy rápido. Next.js pre-renderiza cada página generando de antemano el HTML de cada página junto con el JavaScript mínimo que necesitan para ejecutarse a través de un proceso conocido como Hidratación.\nHay dos formas de pre-renderizado en Next.js: # Renderización del lado del servidor (SSR) Generación estática (SG) La diferencia crucial entre SG y SSR es cómo se obtienen los datos. En el caso de SG, los datos se obtienen en el momento de la construcción y se reutilizan en cada solicitud (lo que hace que sea más rápido porque se puede almacenar en caché), mientras que en SSR, los datos se obtienen en cada solicitud.\nPáginas y Rutas # Una de las particularidades de Next.js es que esta construido alrededor del concepto de páginas. Una página es un componente de React exportado desde la carpeta pages. Las páginas están asociadas con una ruta basada en el nombre del archivo. Por ejemplo pages/perfil.js resultará en la ruta /perfil.\nexport default function Perfil() { return \u0026lt;div\u0026gt;¡Bienvenido a mi perfil!\u0026lt;/div\u0026gt;; } *** pages/perfil.js *** Prueba el código anterior por tu cuenta y visita localhost:3000/perfil para ver los resultados. Rutas Index Los archivos con nombre index dirigen hacia la raíz del directorio que lo contiene.\n•\tpages/index.js → / •\tpages/blog/index.js → /blog Rutas Anidadas Supongamos que queremos acceder a la siguiente ruta: /blog/post/:id Necesitaremos anidar las carpetas de la siguiente manera: |- pages |- index.js |- blog |- post |- [id].js # id dinámico para cada post *** Páginas con Rutas Dinámicas *** También podemos utilizar rutas dinámicas si agregamos corchetes al nombre del archivo. Por ejemplo, si creamos un archivo llamado pages/post/[id].js podremos acceder a el en las rutas post/1, post/2, y así sucesivamente.\nimport { useRouter } from \u0026#34;next/router\u0026#34;; export default function Post() { const router = useRouter(); const { id } = router.query; return \u0026lt;p\u0026gt;Post: {id}\u0026lt;/p\u0026gt;; } pages/post/[id].js ","date":"12 marzo 2023","permalink":"/platform/levels/level3_react/dia07/debug/","section":"Levels","summary":"Características de Next.","title":"Caracterìsticas de Next.js"},{"content":"Migraciones # En Laravel, las migraciones son una forma conveniente y controlada de administrar los cambios en la estructura de la base de datos. Las migraciones te permiten crear, modificar o eliminar tablas y columnas de manera fácil y consistente, y también te ayudan a colaborar en equipo y mantener un historial de versiones de tu esquema de base de datos.\nA continuación, te mostraré los pasos básicos para trabajar con migraciones en Laravel:\nCrear una migración: Puedes generar una nueva migración utilizando el comando Artisan make:migration. Por ejemplo, para crear una migración para crear una nueva tabla, puedes ejecutar el siguiente comando en tu terminal:\nphp artisan make:migration create_nueva_tabla --create=nombre_tabla Esto creará un nuevo archivo de migración en el directorio database/migrations.\nDefinir la estructura de la tabla: Abre el archivo de migración recién creado y utiliza los métodos de la clase Schema para definir la estructura de la tabla. Por ejemplo, puedes utilizar métodos como create(), addColumn(), dropColumn(), etc. para especificar las columnas y las modificaciones de la tabla.\n\u0026lt;?php use Illuminate\\Database\\Migrations\\Migration; use Illuminate\\Database\\Schema\\Blueprint; use Illuminate\\Support\\Facades\\Schema; class CreateNuevaTabla extends Migration { public function up() { Schema::create(\u0026#39;nombre_tabla\u0026#39;, function (Blueprint $table) { $table-\u0026gt;id(); $table-\u0026gt;string(\u0026#39;nombre\u0026#39;); $table-\u0026gt;integer(\u0026#39;edad\u0026#39;); $table-\u0026gt;timestamps(); }); } public function down() { Schema::dropIfExists(\u0026#39;nombre_tabla\u0026#39;); } } En este ejemplo, se crea una nueva tabla llamada nombre_tabla con las columnas id, nombre, edad y las columnas timestamps para registrar la fecha y hora de creación y actualización de los registros.\nEjecutar las migraciones: Una vez que hayas definido la migración, puedes ejecutarla para aplicar los cambios en la base de datos. Utiliza el comando Artisan migrate para ejecutar todas las migraciones pendientes:\nphp artisan migrate Esto ejecutará todas las migraciones que aún no se hayan aplicado.\nRollback y reset de migraciones: Si necesitas revertir o deshacer los cambios realizados por una o todas las migraciones, puedes utilizar los comandos migrate:rollback y migrate:reset respectivamente.\nphp artisan migrate:rollback Este comando deshará la última migración.\nphp artisan migrate:reset Este comando deshará todas las migraciones y eliminará todas las tablas de la base de datos.\nEstos son los conceptos básicos para trabajar con migraciones en Laravel. Las migraciones te permiten mantener un control y seguimiento de los cambios en la estructura de la base de datos de tu aplicación, facilitando el trabajo en equipo y la gestión del esquema de la base de datos.\nAppService Provider Laravel # El archivo AppServiceProvider en Laravel es una clase que se encuentra en el directorio app/Providers y proporciona un punto de entrada para configurar y registrar enlaces de servicio en la aplicación. Es una de las clases de proveedores incluidas por defecto en Laravel y juega un papel importante en la configuración inicial de la aplicación.\nEl AppServiceProvider tiene dos métodos principales que puedes utilizar:\nregister(): Este método se utiliza para registrar enlaces de servicio y realizar enlaces de dependencia en la aplicación. Puedes utilizarlo para enlazar interfaces con implementaciones concretas de clases.\npublic function register() { $this-\u0026gt;app-\u0026gt;bind(Interface::class, ConcreteClass::class); } En este ejemplo, se registra una implementación concreta ConcreteClass para la interfaz Interface. Esto permite que en otros lugares de la aplicación se inyecte automáticamente la instancia de ConcreteClass cuando se solicite una instancia de Interface.\nboot(): Este método se ejecuta después de que todos los servicios se hayan registrado y está destinado a la configuración adicional de la aplicación. Puedes utilizarlo para definir rutas, vistas, eventos, enlaces de base de datos, etc.\npublic function boot() { Route::middleware(\u0026#39;web\u0026#39;) -\u0026gt;namespace(\u0026#39;App\\Http\\Controllers\u0026#39;) -\u0026gt;group(function () { Route::get(\u0026#39;/\u0026#39;, \u0026#39;HomeController@index\u0026#39;); }); } En este ejemplo, se define una ruta para la página de inicio de la aplicación. La función group() permite agrupar varias rutas bajo un middleware y un espacio de nombres específicos.\nEl AppServiceProvider también es un buen lugar para definir enlaces de base de datos, configuraciones de cache, configuraciones de log, eventos, etc. Puedes personalizar este proveedor según tus necesidades y agregar más lógica en los métodos register() y boot().\nEs importante destacar que el AppServiceProvider es cargado automáticamente por Laravel durante el inicio de la aplicación, por lo que no es necesario registrar manualmente este proveedor en el archivo config/app.php.\nRecuerda que, además del AppServiceProvider, Laravel también incluye otros proveedores útiles como RouteServiceProvider, EventServiceProvider, AuthServiceProvider, entre otros, que te permiten personalizar y configurar diferentes aspectos de tu aplicación.\nMiddleware # En Laravel, el middleware es una capa de software que se encuentra entre la solicitud entrante y la respuesta enviada por la aplicación. Actúa como un filtro o una tubería a través de la cual pasan las solicitudes antes de ser procesadas por la aplicación. El middleware permite realizar acciones específicas en una solicitud, como autenticación, validación, registro de actividad, etc., antes de que la solicitud llegue a su destino final.\nLaravel incluye varios middlewares predefinidos, como el middleware de autenticación, el middleware de verificación CSRF (Cross-Site Request Forgery), el middleware de enrutamiento, entre otros. Además, puedes crear tus propios middlewares personalizados según tus necesidades.\nA continuación, te mostraré los pasos básicos para trabajar con middleware en Laravel:\nCreación de un middleware: Puedes generar un nuevo middleware utilizando el comando Artisan make:middleware. Por ejemplo, para crear un middleware llamado MiMiddleware, ejecuta el siguiente comando en tu terminal:\nphp artisan make:middleware MiMiddleware Esto creará un nuevo archivo de middleware en el directorio app/Http/Middleware.\nDefinición del middleware: Abre el archivo de middleware recién creado y, en el método handle(), implementa la lógica que deseas ejecutar en cada solicitud que pase a través de este middleware. Puedes realizar acciones como verificar la autenticación del usuario, validar datos, agregar encabezados personalizados, etc.\n\u0026lt;?php namespace App\\Http\\Middleware; use Closure; class MiMiddleware { public function handle($request, Closure $next) { // Lógica del middleware return $next($request); } } El método handle() recibe la solicitud actual y una clausura $next, que representa la siguiente capa de middleware o el controlador final. Debes asegurarte de llamar a la clausura $next para permitir que la solicitud continúe su flujo normal.\nRegistro del middleware: Para que Laravel utilice el middleware, debes registrarlo en la aplicación. Puedes hacerlo en el archivo app/Http/Kernel.php. En este archivo, encontrarás un arreglo llamado $middleware que contiene la lista de middlewares globales que se aplicarán a todas las solicitudes.\nprotected $middleware = [ // ... \\App\\Http\\Middleware\\MiMiddleware::class, ]; Agrega la referencia al middleware recién creado en este arreglo. Ten en cuenta que la posición en el arreglo determina el orden de ejecución de los middlewares. Si necesitas aplicar el middleware solo a rutas específicas, puedes utilizar el middleware de ruta en lugar del middleware global.\nAsignación del middleware a rutas: Puedes asignar el middleware a rutas específicas en el archivo routes/web.php o routes/api.php. Puedes hacerlo utilizando los métodos middleware() o group().\nRoute::get(\u0026#39;/ruta\u0026#39;, function () { // Lógica de la ruta })-\u0026gt;middleware(\u0026#39;MiMiddleware\u0026#39;); En este ejemplo, el middleware MiMiddleware se aplicará solo a la ruta /ruta.\nEstos son los pasos básicos para trabajar con middleware en Laravel. El middleware te permite realizar tareas específicas en las solicitudes antes de que lleguen a su destino final, lo\nLaravel Migraciones # Laravel MiMiddleware # ","date":"12 marzo 2023","permalink":"/platform/levels/level4_php/07laravel/debug/","section":"Levels","summary":"Migraciones # En Laravel, las migraciones son una forma conveniente y controlada de administrar los cambios en la estructura de la base de datos.","title":"Migraciones"},{"content":"Migraciones # En Laravel, las migraciones son una forma conveniente y controlada de administrar los cambios en la estructura de la base de datos. Las migraciones te permiten crear, modificar o eliminar tablas y columnas de manera fácil y consistente, y también te ayudan a colaborar en equipo y mantener un historial de versiones de tu esquema de base de datos.\nA continuación, te mostraré los pasos básicos para trabajar con migraciones en Laravel:\nCrear una migración: Puedes generar una nueva migración utilizando el comando Artisan make:migration. Por ejemplo, para crear una migración para crear una nueva tabla, puedes ejecutar el siguiente comando en tu terminal:\nphp artisan make:migration create_nueva_tabla --create=nombre_tabla Esto creará un nuevo archivo de migración en el directorio database/migrations.\nDefinir la estructura de la tabla: Abre el archivo de migración recién creado y utiliza los métodos de la clase Schema para definir la estructura de la tabla. Por ejemplo, puedes utilizar métodos como create(), addColumn(), dropColumn(), etc. para especificar las columnas y las modificaciones de la tabla.\n\u0026lt;?php use Illuminate\\Database\\Migrations\\Migration; use Illuminate\\Database\\Schema\\Blueprint; use Illuminate\\Support\\Facades\\Schema; class CreateNuevaTabla extends Migration { public function up() { Schema::create(\u0026#39;nombre_tabla\u0026#39;, function (Blueprint $table) { $table-\u0026gt;id(); $table-\u0026gt;string(\u0026#39;nombre\u0026#39;); $table-\u0026gt;integer(\u0026#39;edad\u0026#39;); $table-\u0026gt;timestamps(); }); } public function down() { Schema::dropIfExists(\u0026#39;nombre_tabla\u0026#39;); } } En este ejemplo, se crea una nueva tabla llamada nombre_tabla con las columnas id, nombre, edad y las columnas timestamps para registrar la fecha y hora de creación y actualización de los registros.\nEjecutar las migraciones: Una vez que hayas definido la migración, puedes ejecutarla para aplicar los cambios en la base de datos. Utiliza el comando Artisan migrate para ejecutar todas las migraciones pendientes:\nphp artisan migrate Esto ejecutará todas las migraciones que aún no se hayan aplicado.\nRollback y reset de migraciones: Si necesitas revertir o deshacer los cambios realizados por una o todas las migraciones, puedes utilizar los comandos migrate:rollback y migrate:reset respectivamente.\nphp artisan migrate:rollback Este comando deshará la última migración.\nphp artisan migrate:reset Este comando deshará todas las migraciones y eliminará todas las tablas de la base de datos.\nEstos son los conceptos básicos para trabajar con migraciones en Laravel. Las migraciones te permiten mantener un control y seguimiento de los cambios en la estructura de la base de datos de tu aplicación, facilitando el trabajo en equipo y la gestión del esquema de la base de datos.\nAppService Provider Laravel # El archivo AppServiceProvider en Laravel es una clase que se encuentra en el directorio app/Providers y proporciona un punto de entrada para configurar y registrar enlaces de servicio en la aplicación. Es una de las clases de proveedores incluidas por defecto en Laravel y juega un papel importante en la configuración inicial de la aplicación.\nEl AppServiceProvider tiene dos métodos principales que puedes utilizar:\nregister(): Este método se utiliza para registrar enlaces de servicio y realizar enlaces de dependencia en la aplicación. Puedes utilizarlo para enlazar interfaces con implementaciones concretas de clases.\npublic function register() { $this-\u0026gt;app-\u0026gt;bind(Interface::class, ConcreteClass::class); } En este ejemplo, se registra una implementación concreta ConcreteClass para la interfaz Interface. Esto permite que en otros lugares de la aplicación se inyecte automáticamente la instancia de ConcreteClass cuando se solicite una instancia de Interface.\nboot(): Este método se ejecuta después de que todos los servicios se hayan registrado y está destinado a la configuración adicional de la aplicación. Puedes utilizarlo para definir rutas, vistas, eventos, enlaces de base de datos, etc.\npublic function boot() { Route::middleware(\u0026#39;web\u0026#39;) -\u0026gt;namespace(\u0026#39;App\\Http\\Controllers\u0026#39;) -\u0026gt;group(function () { Route::get(\u0026#39;/\u0026#39;, \u0026#39;HomeController@index\u0026#39;); }); } En este ejemplo, se define una ruta para la página de inicio de la aplicación. La función group() permite agrupar varias rutas bajo un middleware y un espacio de nombres específicos.\nEl AppServiceProvider también es un buen lugar para definir enlaces de base de datos, configuraciones de cache, configuraciones de log, eventos, etc. Puedes personalizar este proveedor según tus necesidades y agregar más lógica en los métodos register() y boot().\nEs importante destacar que el AppServiceProvider es cargado automáticamente por Laravel durante el inicio de la aplicación, por lo que no es necesario registrar manualmente este proveedor en el archivo config/app.php.\nRecuerda que, además del AppServiceProvider, Laravel también incluye otros proveedores útiles como RouteServiceProvider, EventServiceProvider, AuthServiceProvider, entre otros, que te permiten personalizar y configurar diferentes aspectos de tu aplicación.\nMiddleware # En Laravel, el middleware es una capa de software que se encuentra entre la solicitud entrante y la respuesta enviada por la aplicación. Actúa como un filtro o una tubería a través de la cual pasan las solicitudes antes de ser procesadas por la aplicación. El middleware permite realizar acciones específicas en una solicitud, como autenticación, validación, registro de actividad, etc., antes de que la solicitud llegue a su destino final.\nLaravel incluye varios middlewares predefinidos, como el middleware de autenticación, el middleware de verificación CSRF (Cross-Site Request Forgery), el middleware de enrutamiento, entre otros. Además, puedes crear tus propios middlewares personalizados según tus necesidades.\nA continuación, te mostraré los pasos básicos para trabajar con middleware en Laravel:\nCreación de un middleware: Puedes generar un nuevo middleware utilizando el comando Artisan make:middleware. Por ejemplo, para crear un middleware llamado MiMiddleware, ejecuta el siguiente comando en tu terminal:\nphp artisan make:middleware MiMiddleware Esto creará un nuevo archivo de middleware en el directorio app/Http/Middleware.\nDefinición del middleware: Abre el archivo de middleware recién creado y, en el método handle(), implementa la lógica que deseas ejecutar en cada solicitud que pase a través de este middleware. Puedes realizar acciones como verificar la autenticación del usuario, validar datos, agregar encabezados personalizados, etc.\n\u0026lt;?php namespace App\\Http\\Middleware; use Closure; class MiMiddleware { public function handle($request, Closure $next) { // Lógica del middleware return $next($request); } } El método handle() recibe la solicitud actual y una clausura $next, que representa la siguiente capa de middleware o el controlador final. Debes asegurarte de llamar a la clausura $next para permitir que la solicitud continúe su flujo normal.\nRegistro del middleware: Para que Laravel utilice el middleware, debes registrarlo en la aplicación. Puedes hacerlo en el archivo app/Http/Kernel.php. En este archivo, encontrarás un arreglo llamado $middleware que contiene la lista de middlewares globales que se aplicarán a todas las solicitudes.\nprotected $middleware = [ // ... \\App\\Http\\Middleware\\MiMiddleware::class, ]; Agrega la referencia al middleware recién creado en este arreglo. Ten en cuenta que la posición en el arreglo determina el orden de ejecución de los middlewares. Si necesitas aplicar el middleware solo a rutas específicas, puedes utilizar el middleware de ruta en lugar del middleware global.\nAsignación del middleware a rutas: Puedes asignar el middleware a rutas específicas en el archivo routes/web.php o routes/api.php. Puedes hacerlo utilizando los métodos middleware() o group().\nRoute::get(\u0026#39;/ruta\u0026#39;, function () { // Lógica de la ruta })-\u0026gt;middleware(\u0026#39;MiMiddleware\u0026#39;); En este ejemplo, el middleware MiMiddleware se aplicará solo a la ruta /ruta.\nEstos son los pasos básicos para trabajar con middleware en Laravel. El middleware te permite realizar tareas específicas en las solicitudes antes de que lleguen a su destino final,\nController # En Laravel, los controladores son clases que se utilizan para agrupar la lógica relacionada con la manipulación de solicitudes HTTP. Los controladores manejan las solicitudes entrantes, procesan los datos y devuelven una respuesta al usuario. Proporcionan una forma estructurada de separar la lógica de la aplicación de las rutas y las vistas.\nAquí hay un ejemplo básico de cómo crear un controlador en Laravel:\nGenerar un controlador: Puedes generar un nuevo controlador utilizando el comando make:controller de Artisan. Por ejemplo, para crear un controlador llamado UserController, ejecuta el siguiente comando en tu terminal:\nphp artisan make:controller UserController Esto generará un archivo UserController.php en el directorio app/Http/Controllers con una estructura básica de controlador.\nDefinir métodos de acción: En el archivo UserController.php, encontrarás un método de acción por defecto llamado __invoke(). Puedes definir otros métodos de acción dentro del controlador para manejar diferentes rutas o acciones. Por ejemplo, puedes agregar un método index() para mostrar una lista de usuarios:\npublic function index() { // Lógica para obtener la lista de usuarios $users = User::all(); // Retornar una vista con los datos return view(\u0026#39;users.index\u0026#39;, [\u0026#39;users\u0026#39; =\u0026gt; $users]); } Enrutamiento: Después de definir los métodos de acción en el controlador, debes definir las rutas correspondientes en el archivo routes/web.php o routes/api.php, dependiendo del tipo de ruta que necesites. Puedes hacer esto utilizando el método Route:: y el nombre del controlador y el método de acción. Por ejemplo:\nRoute::get(\u0026#39;/users\u0026#39;, \u0026#39;UserController@index\u0026#39;); Esto establecerá una ruta GET /users que será manejada por el método index() del controlador UserController.\nInyección de dependencias: Los controladores de Laravel también admiten la inyección de dependencias. Puedes declarar dependencias en el constructor del controlador y Laravel automáticamente las inyectará cuando se instancie el controlador. Por ejemplo:\nuse App\\Services\\UserService; class UserController extends Controller { protected $userService; public function __construct(UserService $userService) { $this-\u0026gt;userService = $userService; } // ... } En este ejemplo, se inyecta la dependencia UserService en el controlador UserController a través del constructor.\nResponder a las solicitudes: Los métodos de acción de un controlador pueden realizar cualquier lógica necesaria, como interactuar con modelos, realizar consultas a la base de datos, ejecutar servicios, etc. Una vez que se complete la lógica, puedes devolver una respuesta al usuario. Esto puede ser una vista, una respuesta JSON, una redirección, entre otros.\nPor ejemplo, para devolver una vista desde un método de acción:\npublic function index() { $users = User::all(); return view(\u0026#39;users.index\u0026#39;, [\u0026#39;users\u0026#39; =\u0026gt; $users]); } En este caso, estamos devolviendo la vista users.index y pasando la variable $users como datos a\nla vista.\nLos controladores en Laravel juegan un papel central en la estructura MVC (Modelo-Vista-Controlador) del framework. Permiten mantener la lógica de la aplicación separada de las rutas y las vistas, promoviendo así la reutilización del código y un mejor mantenimiento.\nLaravel Migraciones # Laravel MiMiddleware # ","date":"12 marzo 2023","permalink":"/platform/levels/level5_laravel/02.2laravel/debug/","section":"Levels","summary":"Migraciones # En Laravel, las migraciones son una forma conveniente y controlada de administrar los cambios en la estructura de la base de datos.","title":"Migraciones"},{"content":"Renderizado de Componentes y Propiedades en Laravel # Introducción: En Laravel, los componentes son una forma conveniente de organizar y reutilizar la lógica de la interfaz de usuario. En esta lección, exploraremos cómo renderizar componentes en vistas de Laravel y cómo pasar propiedades a los componentes para personalizar su comportamiento y apariencia.\nRenderizado de componentes en Laravel: Paso 1: Asegúrate de haber instalado y configurado correctamente Livewire siguiendo los pasos de la lección anterior.\nPaso 2: En la vista de Laravel donde deseas renderizar un componente, utiliza la directiva de blade @livewire seguida del nombre del componente. Por ejemplo:\n\u0026lt;body\u0026gt; @livewire(\u0026#39;nombre-del-componente\u0026#39;) \u0026lt;/body\u0026gt; Esto renderizará el componente Livewire en esa parte de la vista.\nPasar propiedades a los componentes: Paso 1: En la vista donde se renderiza el componente, puedes pasar propiedades utilizando el atributo wire:prop y su valor. Por ejemplo: \u0026lt;body\u0026gt; @livewire(\u0026#39;nombre-del-componente\u0026#39;, [\u0026#39;propiedad\u0026#39; =\u0026gt; $valor]) \u0026lt;/body\u0026gt; Aquí, 'propiedad' es el nombre de la propiedad definida en el componente y $valor es el valor que deseas pasar.\nPaso 2: En el componente Livewire correspondiente, puedes definir las propiedades y acceder a ellas utilizando la sintaxis $this-\u0026gt;propiedad dentro de los métodos del componente. Por ejemplo: class NombreDelComponente extends Component { public $propiedad; public function render() { return view(\u0026#39;livewire.nombre-del-componente\u0026#39;); } } Aquí, $propiedad es la propiedad del componente a la que se asigna el valor pasado desde la vista.\nUso de propiedades en componentes: Puedes utilizar las propiedades pasadas a un componente para personalizar su comportamiento y apariencia. Por ejemplo, puedes mostrar datos dinámicos o realizar acciones basadas en los valores de las propiedades.\nDentro de los métodos del componente, puedes acceder y utilizar las propiedades utilizando la sintaxis $this-\u0026gt;propiedad. Por ejemplo, en el método render() puedes utilizar la propiedad para mostrar datos en la vista correspondiente del componente.\nPuedes modificar el valor de las propiedades dentro del componente utilizando métodos o eventos del ciclo de vida del componente. Por ejemplo, puedes actualizar una propiedad en respuesta a una acción del usuario.\nConclusión: En Laravel, el renderizado de componentes y el uso de propiedades permiten crear interfaces de usuario dinámicas y personalizadas. Al renderizar componentes en las vistas de Laravel y pasar propiedades a través de la directiva @livewire, puedes utilizar esas propiedades dentro de los componentes para adaptar su comportamiento y apariencia según tus necesidades.\nLaravel Migraciones # Laravel MiMiddleware # ","date":"12 marzo 2023","permalink":"/platform/levels/level5_laravel/07laravel/debug/","section":"Levels","summary":"Renderizado de Componentes y Propiedades en Laravel # Introducción: En Laravel, los componentes son una forma conveniente de organizar y reutilizar la lógica de la interfaz de usuario.","title":"Renderizar Componentes / Propiedad y Componentes"},{"content":"Laravel Livewire / Istalacion Livewire # Introducción: Laravel Livewire es una biblioteca de código abierto para Laravel que permite desarrollar interfaces de usuario interactivas y dinámicas utilizando componentes de PHP y HTML. En esta lección, aprenderemos cómo instalar Livewire en un proyecto Laravel y exploraremos los pasos necesarios para comenzar a utilizarlo.\nRequisitos previos: Un proyecto Laravel existente (asegúrate de tener Laravel instalado en tu entorno de desarrollo antes de comenzar). Composer, la herramienta de administración de paquetes de PHP, instalada en tu sistema. Instalación de Livewire: Puedes instalar Livewire en tu proyecto Laravel siguiendo estos pasos: Paso 1: Abre una terminal o línea de comandos y navega hasta el directorio raíz de tu proyecto Laravel.\nPaso 2: Ejecuta el siguiente comando para instalar Livewire a través de Composer:\ncomposer require livewire/livewire Esto descargará e instalará la biblioteca Livewire y sus dependencias en tu proyecto.\nPaso 3: Después de que se complete la instalación, ejecuta el siguiente comando para publicar los assets de Livewire:\nphp artisan livewire:publish --assets Esto copiará los archivos de assets necesarios de Livewire en tu proyecto.\nPaso 4: En el archivo app/Http/Kernel.php, asegúrate de que la clase App\\Http\\Middleware\\VerifyCsrfToken tenga la propiedad $except configurada para incluir el prefijo /livewire/*. Esto permitirá que Livewire funcione correctamente sin errores de token CSRF.\nPaso 5: Ahora, puedes comenzar a utilizar Livewire en tus componentes. Puedes crear un componente Livewire ejecutando el siguiente comando:\nphp artisan make:livewire NombreDelComponente Esto generará un nuevo archivo de componente Livewire en el directorio app/Http/Livewire.\nPaso 6: Para utilizar el componente Livewire en una vista, simplemente incluye el tag de Livewire en tu archivo de blade:\n\u0026lt;livewire:nombre-del-componente /\u0026gt; Donde nombre-del-componente es el nombre del componente Livewire que creaste en el paso anterior.\nPaso 7: Puedes agregar lógica y funcionalidad al componente Livewire en el archivo correspondiente en app/Http/Livewire. Puedes responder a eventos, interactuar con bases de datos, realizar validaciones y más.\nUso de Livewire: Una vez que hayas instalado Livewire y creado tus componentes, puedes utilizar sus funcionalidades para crear interfaces de usuario dinámicas y reactivas. Livewire utiliza una combinación de PHP y JavaScript para manejar la interactividad sin tener que escribir código JavaScript adicional. Puedes definir propiedades y métodos en tus componentes Livewire para manejar la lógica y la presentación de la interfaz de usuario. Livewire se encarga de manejar las solicitudes de acciones y actualizaciones de componentes de forma transparente, lo que permite una experiencia de desarrollo más sencilla y centrada en PHP. Conclusión: Laravel Livewire es una poderosa biblioteca que permite desarrollar interfaces de usuario interactivas en proyectos Laravel utilizando componentes de PHP y HTML. Con los pasos de instal y uso proporcionados en esta lección, puedes comenzar a utilizar Livewire en tu proyecto y aprovechar su funcionalidad para crear interfaces de usuario dinámicas y reactivas.\nLaravel Livewire # Istalacion Livewire # ","date":"12 marzo 2023","permalink":"/platform/levels/level5_laravel/06laravel/founda/","section":"Levels","summary":"Laravel Livewire / Istalacion Livewire # Introducción: Laravel Livewire es una biblioteca de código abierto para Laravel que permite desarrollar interfaces de usuario interactivas y dinámicas utilizando componentes de PHP y HTML.","title":" Laravel Livewire / Istalacion Livewire "},{"content":"Laravel # Introduccion Laravel # Laravel es un framework de desarrollo de aplicaciones web PHP de código abierto y altamente popular. Fue creado por Taylor Otwell en 2011 con el objetivo de proporcionar una forma elegante y eficiente de construir aplicaciones web robustas y escalables.\nA continuación, te presento una introducción a Laravel y algunos de los conceptos clave asociados a este framework:\nCaracterísticas principales de Laravel:\nElegante sintaxis: Laravel utiliza una sintaxis limpia y expresiva que facilita el desarrollo y mejora la legibilidad del código. Enrutamiento potente: Proporciona un sistema de enrutamiento flexible y fácil de usar para definir las rutas de la aplicación. Motor de plantillas: Incluye un potente motor de plantillas llamado Blade, que facilita la creación de vistas y la gestión de la presentación de la aplicación. ORM (Object-Relational Mapping): Laravel utiliza Eloquent ORM, que simplifica la interacción con la base de datos al permitirte trabajar con modelos y relaciones en lugar de escribir consultas SQL directamente. Migraciones de base de datos: Proporciona una forma conveniente de controlar los cambios en la estructura de la base de datos mediante migraciones, lo que facilita la colaboración en equipo y la gestión de versiones. Seguridad integrada: Laravel incluye características de seguridad como protección contra ataques de Cross-Site Scripting (XSS) y ataques de falsificación de solicitudes entre sitios (CSRF). Pruebas automatizadas: Viene con herramientas integradas para realizar pruebas unitarias y de integración de forma sencilla y eficiente. Instalación de Laravel: Para comenzar a utilizar Laravel, primero debes instalarlo en tu entorno de desarrollo. Puedes hacerlo siguiendo los siguientes pasos:\nAsegúrate de tener instalado PHP, Composer y Laravel Valet (si estás utilizando macOS) o Laravel Homestead (si estás utilizando otro sistema operativo). Abre una terminal y ejecuta el siguiente comando para instalar Laravel a través de Composer: composer global require laravel/installer Una vez que la instalación haya finalizado, puedes crear un nuevo proyecto Laravel ejecutando el siguiente comando: laravel new nombre-proyecto Esto creará una nueva carpeta con el nombre del proyecto en el directorio actual y descargará todas las dependencias de Laravel. Primeros pasos con Laravel: Una vez que hayas instalado Laravel, podrás comenzar a construir tu aplicación web. Algunos de los conceptos clave a tener en cuenta son:\nRutas: Define las rutas de tu aplicación en el archivo routes/web.php para asociar URL específicas con controladores o funciones de devolución de llamada. Controladores: Los controladores son responsables de procesar las solicitudes y realizar acciones específicas. Puedes crear controladores en la carpeta app/Http/Controllers. Vistas: Las vistas son las plantillas que se utilizan para mostrar la interfaz de usuario de tu aplicación. Se encuentran en la carpeta resources/views y generalmente utilizan el motor de plantillas Blade. Modelos: Los modelos representan las tablas de la base de datos y proporcionan métodos para interactuar con los datos. Puedes crear modelos en la carpeta `app Estrucuta Laravel # La estructura de un proyecto Laravel sigue una convención bien definida y organizada. A continuación, te mostraré la estructura básica de un proyecto Laravel:\n- app - Console - Exceptions - Http - Controllers - Middleware - Requests - Models - Providers - bootstrap - config - database - public - resources - js - lang - sass - views - routes - storage - tests - vendor Aquí tienes una descripción de las carpetas principales:\napp: Contiene la lógica de la aplicación, incluyendo controladores, modelos y clases relacionadas.\nConsole: Contiene comandos de consola personalizados que puedes crear. Exceptions: Contiene clases para manejar excepciones personalizadas. Http: Contiene controladores, middlewares y solicitudes HTTP. Controllers: Aquí puedes definir tus controladores que manejan las solicitudes HTTP y realizan acciones. Middleware: Contiene middlewares que procesan las solicitudes HTTP antes o después de ser manejadas por los controladores. Requests: Puedes crear clases de solicitud personalizadas para validar los datos enviados en las solicitudes. Models: Aquí puedes definir tus modelos que representan las tablas de la base de datos y proporcionan métodos para interactuar con los datos. Providers: Contiene clases de proveedores que registran los servicios de la aplicación. bootstrap: Contiene archivos de inicialización y configuración para arrancar la aplicación.\nconfig: Contiene los archivos de configuración de la aplicación, como las conexiones de base de datos, el archivo de rutas, etc.\ndatabase: Aquí puedes encontrar las migraciones de base de datos y los archivos de semillas para configurar y poblar la base de datos.\npublic: Es la carpeta raíz accesible públicamente. Contiene el archivo index.php que actúa como punto de entrada de la aplicación.\nresources: Contiene los recursos de la aplicación, como las vistas, los archivos de lenguaje, los archivos de estilo y los archivos JavaScript.\njs: Puedes colocar tus archivos JavaScript aquí. lang: Contiene archivos de lenguaje para la internacionalización de la aplicación. sass: Aquí puedes almacenar tus archivos Sass para los estilos de la aplicación. views: Contiene las vistas de la aplicación que se renderizan y muestran al usuario. routes: Aquí puedes definir las rutas de la aplicación, que establecen la relación entre una URL y el controlador o la acción que debe ejecutarse.\nstorage: Es el directorio de almacenamiento de la aplicación y contiene archivos generados dinámicamente, como archivos de registro, caché, sesiones, etc.\ntests: Contiene los archivos de prueba para probar tu aplicación.\nvendor: Aquí se encuentran las dependencias de Composer y las bibliotecas de terceros utilizadas en el proyecto.\nEsta es solo una descripción básica de la estructura de un proyecto Laravel. A medida que trabajes con Laravel, explorarás más en profundidad cada una de estas carpetas y cómo se utilizan en el desarrollo de tu aplicación.\nLaravel video # Laravel estrucuta # ","date":"12 marzo 2023","permalink":"/platform/levels/level4_php/06laravel/founda/","section":"Levels","summary":"Laravel # Introduccion Laravel # Laravel es un framework de desarrollo de aplicaciones web PHP de código abierto y altamente popular.","title":"Introduccion Laravel"},{"content":"NEXT.JS # Framework de JavaScript # Next.js se ha convertido en el framework de React para usar en producción, y ha quedado claro que con Next.js se pueden crear y desplegar rápidamente aplicaciones a gran escala y listas para usar en producción con Next.js.\nNext.js viene con características que garantizan que tu aplicación pase de cero a producción en muy poco tiempo, a la vez que ofrece una curva de aprendizaje fácil, simplicidad y potentes herramientas a tu disposición.\nNext.js amplía la biblioteca React original de Facebook y el paquete create-react-app para proporcionar un framework React extensible, fácil de usar y a prueba de producción.\n¿Qué Es Next.js? # Next.js es un framework de React que te permite construir sitios web y aplicaciones web estáticas supercargadas, amigables con el SEO y extremadamente orientadas al usuario, utilizando el framework de React. Next.js es conocido por la mejor experiencia de los desarrolladores a la hora de construir aplicaciones listas para usar en producción con todas las características que necesitas.\nDispone de renderizado híbrido estático y de servidor, compatibilidad con TypeScript, agrupación inteligente, precarga de rutas y mucho más, sin necesidad de configuración adicional.\nPor Qué Usar Next.js # Esta sección explorará por qué deberías aprender Next.js. También veremos las diferentes aplicaciones que puedes construir con Next.js.\nOptimizaciones de Imagen # Next.js proporciona optimizaciones de imagen automáticas con construcciones instantáneas. La optimización de imágenes es una potente función preintegrada en Next.js porque la gestión y optimización de imágenes requiere muchas configuraciones, y la optimización manual de imágenes puede suponer un peaje en tu tiempo productivo.\nInternacionalización # Otra gran característica añadida a Next.js es la internacionalización. La creación de una aplicación empresarial puede ser fácilmente utilizada y traducida a diferentes idiomas en todo el mundo. Esta característica es una gran incorporación a Next.js y hace que Next.js sea reconocido internacionalmente porque se necesita menos configuración para conseguir la internalización.\nAnálisis de Next.js # Next.js proporciona un panel de control analítico que puede configurarse para mostrar datos precisos de los visitantes y perspectivas de la página desde el primer momento. Con esta función, puedes crear rápidamente un panel de control analítico y obtener información valiosa sobre tus visitantes e información de la página sin necesidad de programación o configuración adicional.\nLo Que Puedes Construir # En Next.js, no hay límite para el tipo de aplicaciones que puedes desarrollar. Puedes desarrollar diferentes tipos de aplicaciones utilizando Next.js. Además, cualquier aplicación que elijas crear con Next.js seguirá teniendo todas las ventajas y características de Next.js sin necesidad de configuraciones adicionales por tu parte.\nA continuación se muestra la lista de tipos de aplicaciones que puedes crear con Next.js:\nMVP (Producto Mínimo Viable) Sitios web Jamstack Portales web Páginas web individuales Sitios web estáticos Productos SaaS Sitios web de comercio electrónico y de venta al por menor Paneles de control Aplicaciones web complejas y exigentes Interfaces de usuario interactivas ","date":"12 marzo 2023","permalink":"/platform/levels/level3_react/dia06/founda/","section":"Levels","summary":"NEXT.JS # Framework de JavaScript # Next.","title":"Introduccion Next.js"},{"content":"Laravel # Introduccion Laravel # Laravel es un framework de desarrollo de aplicaciones web PHP de código abierto y altamente popular. Fue creado por Taylor Otwell en 2011 con el objetivo de proporcionar una forma elegante y eficiente de construir aplicaciones web robustas y escalables.\nA continuación, te presento una introducción a Laravel y algunos de los conceptos clave asociados a este framework:\nCaracterísticas principales de Laravel:\nElegante sintaxis: Laravel utiliza una sintaxis limpia y expresiva que facilita el desarrollo y mejora la legibilidad del código. Enrutamiento potente: Proporciona un sistema de enrutamiento flexible y fácil de usar para definir las rutas de la aplicación. Motor de plantillas: Incluye un potente motor de plantillas llamado Blade, que facilita la creación de vistas y la gestión de la presentación de la aplicación. ORM (Object-Relational Mapping): Laravel utiliza Eloquent ORM, que simplifica la interacción con la base de datos al permitirte trabajar con modelos y relaciones en lugar de escribir consultas SQL directamente. Migraciones de base de datos: Proporciona una forma conveniente de controlar los cambios en la estructura de la base de datos mediante migraciones, lo que facilita la colaboración en equipo y la gestión de versiones. Seguridad integrada: Laravel incluye características de seguridad como protección contra ataques de Cross-Site Scripting (XSS) y ataques de falsificación de solicitudes entre sitios (CSRF). Pruebas automatizadas: Viene con herramientas integradas para realizar pruebas unitarias y de integración de forma sencilla y eficiente. Instalación de Laravel: Para comenzar a utilizar Laravel, primero debes instalarlo en tu entorno de desarrollo. Puedes hacerlo siguiendo los siguientes pasos:\nAsegúrate de tener instalado PHP, Composer y Laravel Valet (si estás utilizando macOS) o Laravel Homestead (si estás utilizando otro sistema operativo). Abre una terminal y ejecuta el siguiente comando para instalar Laravel a través de Composer: composer global require laravel/installer Una vez que la instalación haya finalizado, puedes crear un nuevo proyecto Laravel ejecutando el siguiente comando: laravel new nombre-proyecto Esto creará una nueva carpeta con el nombre del proyecto en el directorio actual y descargará todas las dependencias de Laravel. Primeros pasos con Laravel: Una vez que hayas instalado Laravel, podrás comenzar a construir tu aplicación web. Algunos de los conceptos clave a tener en cuenta son:\nRutas: Define las rutas de tu aplicación en el archivo routes/web.php para asociar URL específicas con controladores o funciones de devolución de llamada. Controladores: Los controladores son responsables de procesar las solicitudes y realizar acciones específicas. Puedes crear controladores en la carpeta app/Http/Controllers. Vistas: Las vistas son las plantillas que se utilizan para mostrar la interfaz de usuario de tu aplicación. Se encuentran en la carpeta resources/views y generalmente utilizan el motor de plantillas Blade. Modelos: Los modelos representan las tablas de la base de datos y proporcionan métodos para interactuar con los datos. Puedes crear modelos en la carpeta `app Estrucuta Laravel # La estructura de un proyecto Laravel sigue una convención bien definida y organizada. A continuación, te mostraré la estructura básica de un proyecto Laravel:\n- app - Console - Exceptions - Http - Controllers - Middleware - Requests - Models - Providers - bootstrap - config - database - public - resources - js - lang - sass - views - routes - storage - tests - vendor Aquí tienes una descripción de las carpetas principales:\napp: Contiene la lógica de la aplicación, incluyendo controladores, modelos y clases relacionadas.\nConsole: Contiene comandos de consola personalizados que puedes crear. Exceptions: Contiene clases para manejar excepciones personalizadas. Http: Contiene controladores, middlewares y solicitudes HTTP. Controllers: Aquí puedes definir tus controladores que manejan las solicitudes HTTP y realizan acciones. Middleware: Contiene middlewares que procesan las solicitudes HTTP antes o después de ser manejadas por los controladores. Requests: Puedes crear clases de solicitud personalizadas para validar los datos enviados en las solicitudes. Models: Aquí puedes definir tus modelos que representan las tablas de la base de datos y proporcionan métodos para interactuar con los datos. Providers: Contiene clases de proveedores que registran los servicios de la aplicación. bootstrap: Contiene archivos de inicialización y configuración para arrancar la aplicación.\nconfig: Contiene los archivos de configuración de la aplicación, como las conexiones de base de datos, el archivo de rutas, etc.\ndatabase: Aquí puedes encontrar las migraciones de base de datos y los archivos de semillas para configurar y poblar la base de datos.\npublic: Es la carpeta raíz accesible públicamente. Contiene el archivo index.php que actúa como punto de entrada de la aplicación.\nresources: Contiene los recursos de la aplicación, como las vistas, los archivos de lenguaje, los archivos de estilo y los archivos JavaScript.\njs: Puedes colocar tus archivos JavaScript aquí. lang: Contiene archivos de lenguaje para la internacionalización de la aplicación. sass: Aquí puedes almacenar tus archivos Sass para los estilos de la aplicación. views: Contiene las vistas de la aplicación que se renderizan y muestran al usuario. routes: Aquí puedes definir las rutas de la aplicación, que establecen la relación entre una URL y el controlador o la acción que debe ejecutarse.\nstorage: Es el directorio de almacenamiento de la aplicación y contiene archivos generados dinámicamente, como archivos de registro, caché, sesiones, etc.\ntests: Contiene los archivos de prueba para probar tu aplicación.\nvendor: Aquí se encuentran las dependencias de Composer y las bibliotecas de terceros utilizadas en el proyecto.\nEsta es solo una descripción básica de la estructura de un proyecto Laravel. A medida que trabajes con Laravel, explorarás más en profundidad cada una de estas carpetas y cómo se utilizan en el desarrollo de tu aplicación.\nmigraciones # Las migraciones avanzadas en Laravel son una funcionalidad poderosa que permite a los desarrolladores realizar cambios estructurales en la base de datos de una aplicación de manera controlada y reproducible. Laravel utiliza migraciones para crear, modificar o eliminar tablas y columnas en la base de datos, lo que facilita la administración de los cambios en el esquema de la base de datos a medida que evoluciona la aplicación.\nAquí hay algunas técnicas y características avanzadas relacionadas con las migraciones en Laravel:\nCreación de migraciones: Puedes crear una nueva migración utilizando el comando make:migration de Artisan, que generará un archivo de migración en el directorio database/migrations. Puedes definir los cambios que deseas realizar en el método up de la migración.\nModificación de tablas: Laravel proporciona una variedad de métodos para modificar tablas existentes en las migraciones. Por ejemplo, puedes usar el método addColumn para agregar una nueva columna, renameColumn para cambiar el nombre de una columna y dropColumn para eliminar una columna.\nModificación de columnas: Además de agregar y eliminar columnas, puedes modificar las columnas existentes utilizando métodos como change, unsigned, nullable, default, charset, collation, entre otros. Estos métodos te permiten ajustar las propiedades de las columnas existentes según tus necesidades.\nEjecución de consultas personalizadas: Si necesitas realizar cambios más complejos en la base de datos que no se pueden lograr con los métodos proporcionados por defecto, Laravel te permite ejecutar consultas SQL personalizadas en las migraciones utilizando el método DB::statement.\nRollbacks: Laravel también admite la reversión de migraciones utilizando el comando migrate:rollback. Esto deshará el último lote de migraciones, lo que significa que los cambios realizados en la base de datos se revertirán.\nMigraciones en varios entornos: Puedes definir migraciones específicas de entorno utilizando directorios adicionales en el directorio database/migrations. Por ejemplo, puedes tener un directorio database/migrations/testing para migraciones específicas de pruebas.\nSeeders: Además de las migraciones, Laravel también proporciona los seeders, que te permiten poblar la base de datos con datos de prueba o datos iniciales. Puedes utilizar el comando make:seeder para generar un nuevo seeder y el comando db:seed para ejecutar los seeders.\nEstas son solo algunas de las características avanzadas relacionadas con las migraciones en Laravel. Las migraciones proporcionan una forma estructurada y versionada de gestionar los cambios en la base de datos de tu aplicación, lo que facilita el desarrollo y la colaboración en equipo.\nLaravel video # Laravel estrucuta # ","date":"12 marzo 2023","permalink":"/platform/levels/level5_laravel/01.2laravel/founda/","section":"Levels","summary":"Laravel # Introduccion Laravel # Laravel es un framework de desarrollo de aplicaciones web PHP de código abierto y altamente popular.","title":"Laravel Migraciones"},{"content":"Consultas base de Datos php # Para realizar consultas a una base de datos desde PHP, necesitas utilizar una extensión como MySQLi o PDO que te permita conectarte y manipular la base de datos. A continuación, te muestro un ejemplo básico utilizando la extensión MySQLi:\nConexión a la base de datos: Primero, debes establecer una conexión con la base de datos utilizando la función mysqli_connect(). Aquí tienes un ejemplo:\n$servername = \u0026#34;localhost\u0026#34;; $username = \u0026#34;usuario\u0026#34;; $password = \u0026#34;contraseña\u0026#34;; $dbname = \u0026#34;nombre_base_datos\u0026#34;; $conn = mysqli_connect($servername, $username, $password, $dbname); if (!$conn) { die(\u0026#34;Error de conexión: \u0026#34; . mysqli_connect_error()); } Consulta SELECT: Para realizar una consulta SELECT a la base de datos, utilizas la función mysqli_query() para ejecutar la consulta y obtener un conjunto de resultados. Luego, puedes utilizar funciones como mysqli_fetch_assoc() o mysqli_fetch_array() para obtener los datos de cada fila. Aquí tienes un ejemplo:\n$sql = \u0026#34;SELECT * FROM usuarios\u0026#34;; $resultado = mysqli_query($conn, $sql); if (mysqli_num_rows($resultado) \u0026gt; 0) { while ($fila = mysqli_fetch_assoc($resultado)) { echo \u0026#34;ID: \u0026#34; . $fila[\u0026#34;id\u0026#34;] . \u0026#34;, Nombre: \u0026#34; . $fila[\u0026#34;nombre\u0026#34;] . \u0026#34;, Email: \u0026#34; . $fila[\u0026#34;email\u0026#34;] . \u0026#34;\u0026lt;br\u0026gt;\u0026#34;; } } else { echo \u0026#34;No se encontraron registros.\u0026#34;; } En este ejemplo, se seleccionan todos los registros de la tabla \u0026ldquo;usuarios\u0026rdquo; y se muestran los datos de cada fila.\nConsulta INSERT, UPDATE y DELETE: Para realizar consultas de inserción (INSERT), actualización (UPDATE) o eliminación (DELETE), utilizas la función mysqli_query() para ejecutar la consulta. Aquí tienes ejemplos:\n// Consulta INSERT $sql = \u0026#34;INSERT INTO usuarios (nombre, email) VALUES (\u0026#39;Juan\u0026#39;, \u0026#39;juan@example.com\u0026#39;)\u0026#34;; if (mysqli_query($conn, $sql)) { echo \u0026#34;Registro insertado correctamente.\u0026#34;; } else { echo \u0026#34;Error al insertar el registro: \u0026#34; . mysqli_error($conn); } // Consulta UPDATE $sql = \u0026#34;UPDATE usuarios SET nombre = \u0026#39;Pedro\u0026#39; WHERE id = 1\u0026#34;; if (mysqli_query($conn, $sql)) { echo \u0026#34;Registro actualizado correctamente.\u0026#34;; } else { echo \u0026#34;Error al actualizar el registro: \u0026#34; . mysqli_error($conn); } // Consulta DELETE $sql = \u0026#34;DELETE FROM usuarios WHERE id = 1\u0026#34;; if (mysqli_query($conn, $sql)) { echo \u0026#34;Registro eliminado correctamente.\u0026#34;; } else { echo \u0026#34;Error al eliminar el registro: \u0026#34; . mysqli_error($conn); } Estos son ejemplos básicos de cómo realizar consultas a una base de datos desde PHP utilizando MySQLi. Recuerda cerrar la conexión a la base de datos utilizando la función mysqli_close() cuando hayas terminado. También es importante tener en cuenta las buenas prácticas de seguridad, como utilizar consultas preparadas o escapar los datos para evitar ataques de inyección SQL.\nGet y Post en PHP # En PHP, puedes utilizar las superglobales $_GET y $_POST para acceder a los datos enviados desde un formulario HTML o desde la URL.\n$_GET: La superglobal $_GET se utiliza para acceder a los datos enviados a través de los parámetros de la URL. Los datos enviados a través de $_GET son visibles en la URL y tienen la siguiente estructura: http://example.com?parametro1=valor1\u0026amp;parametro2=valor2. Aquí tienes un ejemplo:\n// URL: http://example.com?nombre=Juan\u0026amp;edad=25 $nombre = $_GET[\u0026#39;nombre\u0026#39;]; $edad = $_GET[\u0026#39;edad\u0026#39;]; echo \u0026#34;Hola, $nombre. Tu edad es $edad años.\u0026#34;; En este ejemplo, se obtienen los valores de los parámetros nombre y edad desde la URL y se utilizan para mostrar un mensaje.\n$_POST: La superglobal $_POST se utiliza para acceder a los datos enviados a través de un formulario HTML utilizando el método POST. Los datos enviados a través de $_POST no son visibles en la URL y se envían en el cuerpo de la solicitud HTTP. Aquí tienes un ejemplo:\n\u0026lt;form method=\u0026#34;post\u0026#34; action=\u0026#34;procesar.php\u0026#34;\u0026gt; \u0026lt;input type=\u0026#34;text\u0026#34; name=\u0026#34;nombre\u0026#34; placeholder=\u0026#34;Nombre\u0026#34;\u0026gt; \u0026lt;input type=\u0026#34;number\u0026#34; name=\u0026#34;edad\u0026#34; placeholder=\u0026#34;Edad\u0026#34;\u0026gt; \u0026lt;input type=\u0026#34;submit\u0026#34; value=\u0026#34;Enviar\u0026#34;\u0026gt; \u0026lt;/form\u0026gt; // procesar.php $nombre = $_POST[\u0026#39;nombre\u0026#39;]; $edad = $_POST[\u0026#39;edad\u0026#39;]; echo \u0026#34;Hola, $nombre. Tu edad es $edad años.\u0026#34;; En este ejemplo, los datos ingresados en el formulario se envían al archivo procesar.php utilizando el método POST. En procesar.php, se obtienen los valores de los campos nombre y edad utilizando $_POST y se muestra un mensaje.\nEs importante tener en cuenta que tanto $_GET como $_POST contienen los datos tal como son enviados, por lo que es recomendable utilizar funciones de saneamiento y validación para evitar problemas de seguridad y errores en el código.\nConsultas base de Datos php video # Get y Post en PHP video # ","date":"12 marzo 2023","permalink":"/platform/levels/level4_php/05php/rout/","section":"Levels","summary":"Consultas base de Datos php # Para realizar consultas a una base de datos desde PHP, necesitas utilizar una extensión como MySQLi o PDO que te permita conectarte y manipular la base de datos.","title":"Consultas base de Datos php"},{"content":"Ficheros / Roles EC2 # Lección sobre Ficheros y Roles de EC2\nIntroducción: En el contexto de Amazon Elastic Compute Cloud (EC2), los ficheros y los roles desempeñan un papel importante en el almacenamiento y la gestión de los recursos de las instancias de EC2. En esta lección, exploraremos los conceptos fundamentales y las características de los ficheros y los roles de EC2, así como los casos de uso comunes para cada uno de ellos.\nFicheros en EC2: Ficheros de usuario: Son los ficheros específicos de una instancia de EC2, como documentos, imágenes, archivos de configuración, etc. Estos ficheros pueden ser almacenados en volúmenes de almacenamiento en bloque (EBS) o en el almacenamiento temporal de la instancia. Ficheros de sistema: Son los ficheros del sistema operativo y las aplicaciones instaladas en la instancia de EC2. Estos ficheros son administrados por el sistema operativo y pueden incluir archivos del sistema, bibliotecas, ejecutables, etc. Almacenamiento de ficheros en EC2: Volúmenes de almacenamiento en bloque (EBS): Proporcionan almacenamiento persistente y de alta disponibilidad para las instancias de EC2. Los volúmenes de EBS pueden ser adjuntados a una instancia y formateados con un sistema de archivos para almacenar ficheros de usuario y de sistema. Almacenamiento temporal de instancia: Cada instancia de EC2 tiene almacenamiento temporal conocido como \u0026ldquo;instancia store\u0026rdquo;. Este almacenamiento es más efímero y no persiste más allá del ciclo de vida de la instancia. Los ficheros almacenados aquí son adecuados para datos temporales o caché. Roles de EC2: Roles de IAM (Identity and Access Management): Los roles de IAM son entidades de seguridad que se pueden asociar a las instancias de EC2. Estos roles permiten que las instancias accedan a otros servicios de AWS, como S3 o DynamoDB, sin necesidad de proporcionar credenciales directamente en la instancia. Políticas de IAM: Los roles de EC2 están asociados a políticas de IAM, que definen los permisos y las acciones que la instancia puede realizar en los servicios de AWS. Estas políticas controlan el acceso y la gestión de los recursos en nombre de la instancia. Casos de uso comunes: Almacenamiento de archivos estáticos: Los ficheros de usuario pueden ser almacenados en volúmenes de EBS o en servicios de almacenamiento en la nube, como Amazon S3, para proporcionar un almacenamiento escalable y duradero para archivos estáticos. Configuración y personalización de la instancia: Los ficheros de sistema pueden ser utilizados para configurar el sistema operativo y las aplicaciones instaladas en la instancia de EC2, permitiendo personalizar y adaptar la instancia según las necesidades. Acceso seguro a servicios de AWS: Los roles de EC2 permiten que las instancias accedan a servicios de AWS sin necesidad de compartir credenciales directamente, lo que mejora la seguridad y facilita la administración de permisos. Conclusión: Los ficheros y los roles de EC2 son elementos esenciales en la gestión y configuración de las instancias de EC2. El almacenamiento de ficheros, ya sea en volúmenes de EBS o en almacenamiento temporal, permite gestionar los datos de usuario y de sistema\nde forma eficiente. Los roles de EC2 facilitan el acceso seguro a otros servicios de AWS sin la necesidad de compartir credenciales directamente en la instancia. Al comprender estos conceptos, se puede utilizar EC2 de manera eficaz para almacenar y gestionar ficheros, y para proporcionar acceso seguro a otros servicios de AWS.\nFicheros # Roles EC2 # ","date":"12 marzo 2023","permalink":"/platform/levels/level5_laravel/10aws/rout/","section":"Levels","summary":"Ficheros / Roles EC2 # Lección sobre Ficheros y Roles de EC2","title":"Ficheros / Roles EC2"},{"content":"Norder Radius, width, box shadow # En Tailwind CSS, puedes aplicar estilos de radio de borde (border radius), ancho (width) y sombra de caja (box shadow) utilizando clases de utilidad. Permíteme explicarte cómo puedes trabajar con estos estilos en Tailwind CSS:\n1. Radio de borde (Border Radius): # Para establecer el radio de borde de un elemento en Tailwind CSS, puedes utilizar las clases de utilidad relacionadas con el radio de borde. Algunas clases comunes que puedes utilizar son:\nrounded: Establece un radio de borde suave en el elemento. rounded-sm: Establece un radio de borde más pequeño y suave. rounded-lg: Establece un radio de borde más grande y suave. rounded-full: Establece un radio de borde circular. Por ejemplo, si deseas aplicar un radio de borde suave a un elemento, puedes agregar la clase rounded a ese elemento:\n\u0026lt;div class=\u0026#34;rounded\u0026#34;\u0026gt; Este es un ejemplo de elemento con radio de borde suave. \u0026lt;/div\u0026gt; Tailwind CSS también te permite establecer radios de borde específicos para cada esquina del elemento utilizando clases adicionales, como rounded-tl (borde superior izquierdo), rounded-br (borde inferior derecho), etc.\n2. Ancho (Width): # Para establecer el ancho de un elemento en Tailwind CSS, puedes utilizar las clases de utilidad relacionadas con el ancho. Algunas clases comunes que puedes utilizar son:\nw-{size}: Establece un ancho específico para el elemento. Por ejemplo, w-64 establecerá un ancho de 64 píxeles. max-w-{size}: Establece un ancho máximo para el elemento. Por ejemplo, max-w-sm establecerá un ancho máximo de 640 píxeles en dispositivos pequeños. Puedes combinar estas clases con los puntos de quiebre (breakpoints) para establecer diferentes anchos en diferentes tamaños de pantalla. Por ejemplo, md:w-1/2 establecerá un ancho del 50% en dispositivos de pantalla mediana.\n3. Sombra de caja (Box Shadow): # Para aplicar una sombra de caja a un elemento en Tailwind CSS, puedes utilizar las clases de utilidad relacionadas con las sombras de caja. Algunas clases comunes que puedes utilizar son:\nshadow-sm: Establece una sombra de caja pequeña. shadow: Establece una sombra de caja suave y moderada. shadow-lg: Establece una sombra de caja grande y prominente. Por ejemplo, si deseas aplicar una sombra de caja suave a un elemento, puedes agregar la clase shadow a ese elemento:\n\u0026lt;div class=\u0026#34;shadow\u0026#34;\u0026gt; Este es un ejemplo de elemento con sombra de caja suave. \u0026lt;/div\u0026gt; Tailwind CSS también ofrece opciones avanzadas para personalizar las sombras de caja, como shadow-offset, shadow-color, shadow-opacity, etc. Puedes consultar la documentación oficial de Tailwind CSS para obtener más detalles sobre las clases de utilidad de sombras de caja y sus opciones de personalización.\nEn resumen, en Tailwind CSS, puedes aplicar estilos de radio de borde, ancho y sombra de caja utilizando las clases de utilidad relacionadas. Estas clases\nConsultas base de Datos php video # Get y Post en PHP video # ","date":"12 marzo 2023","permalink":"/platform/levels/level5_laravel/05taildwind/rout/","section":"Levels","summary":"Norder Radius, width, box shadow # En Tailwind CSS, puedes aplicar estilos de radio de borde (border radius), ancho (width) y sombra de caja (box shadow) utilizando clases de utilidad.","title":"Norder Radius, width, box shadow"},{"content":"¿Qué es React Router? # React Router es una colección de componentes de navegación la cual podemos usar como ya lo mencione tanto en web o en móvil con React Native. Con esta librearía vamos a obtener un enrutamiento dinámico gracias a los componentes, en otras palabras tenemos unas rutas que renderizan un componente.\nBeneficios de React Router # Establecer rutas en nuestra aplicación ej: Home, About, User. # Realizar redirecciones # Acceso al historial del navegador # Manejo de rutas con parámetros # Páginas para el manejo de errores como 404 Actualización En las recientes versiones de React router dom hay algunas palabras reservadas que han cambiado, por lo que te aconsejamos basarte en el siguiente video tutoríal donde se explica la versión 6 de react-router-dom.\nComponentes pilares de React Router # BrowserRouter # Este componente es el encargado de envolver nuestra aplicación dándonos acceso al API historial de HTML5 (pushState, replaceState y el evento popstate) para mantener su UI sincronizada con la URL.\nSwitch # Este componente es el encargado de que solo se renderice el primer hijo Route o Redirect que coincide con la ubicación. Si no usar este componente todos los componentes Route o Redirect se van a renderizar mientras cumplan con la condición establecida.\nRoute # Con Route podemos definir las rutas de nuestra aplicación, quizás sea el componente más importante de React Router para llegar a comprender todo el manejo de esta librería. Cuando definimos una ruta con Route le indicamos que componente debe renderizar.\nEste componente cuanta con algunas propiedades.\nPath: # la ruta donde debemos renderizar nuestro componente podemos pasar un string o un array de string.\nExact: # Solo vamos a mostrar nuestro componente cuando la ruta sea exacta. Ej: /home === /home.\nStrict: # Solo vamos a mostrar nuestro componente si al final de la ruta tiene un slash. Ej: /home/ === /home/\nSensitive: # Si le pasamos true vamos a tener en cuenta las mayúsculas y las minúsculas de nuestras rutas. Ej: /Home === /Home\nComponent: # Le pasamos un componente para renderizar solo cuando la ubicación coincide. En este caso el componente se monta y se desmonta no se actualiza.\nRender: # Le pasamos una función para montar el componente en línea.\nRequisitos # Tener instalado node.js puede usar nvm para gestionar varias versiones de node.js, yo voy a usar la versión v10.15.3, npm o yarn manejo básico de la terminal, un editor de código como VScode, tener conocimiento básico de React.\nCreando nuestro proyecto # Para crear nuestro proyecto como lo mencione antes vamos a usar create-react-app para eso ejecutamos el siguiente comando en la terminal.\nnpx create-react-app routes-react Esperamos que instale y cree nuestro proyecto y accedemos desde la terminal con: cd routes-react\nAbrimos nuestro editor de código si estas usando VScode puede usar la terminal parado en la raíz de nuestro proyecto usamos code . para abrirlo desde VScode.\nSi queremos probar nuestro proyecto podemos correr npm start o yarn start desde la terminal. Hasta el momento tenemos un proyecto de react listo para modificar y agregar nuestros componentes e instalar React Router.\nInstalación de React Router # Para instalar la librería solo tenemos que ir a la terminal estar ubicados en la raíz de nuestro proyecto y ejecutar el siguiente comando.\n// con npm npm install react-router-dom // con yarn yarn add react-router-dom Trabajando con React Router # Teniendo todo listo ahora si vamos a nuestro editor de código y abrimos el archivo App.js que está ubicado en src/App.js acá vamos a limpiar muchas cosas hasta que al final tengamos algo como el siguiente código.\nimport React from \u0026#39;react\u0026#39;; import \u0026#39;./App.css\u0026#39;; import { BrowserRouter as Router, Route } from \u0026#34;react-router-dom\u0026#34;; import Home from \u0026#39;./pages/Home\u0026#39; function App() { return ( \u0026lt;Router\u0026gt; \u0026lt;div className=\u0026#34;App\u0026#34;\u0026gt; \u0026lt;Route exact path=\u0026#34;/\u0026#34; component={Home} /\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;/Router\u0026gt; ); } export default App; Importamos nuestro componente BrowserRouter le damos un nombre Router también importamos Route de react-router-dom. Envolvemos nuestra aplicación con Router y definimos nuestra primera ruta en este caso nuestro home le indicamos que debe ser exacta la ruta y que haga render de nuestro componente Home pero donde esta nuestro componente Home bueno vamos a crearlo.\n// Home.js import React from \u0026#39;react\u0026#39; const Home = () =\u0026gt; ( \u0026lt;section className=\u0026#34;Home\u0026#34;\u0026gt; \u0026lt;h3\u0026gt;Hello Home\u0026lt;/h3\u0026gt; \u0026lt;/section\u0026gt; ) export default Home Este es nuestro componente Home que está dentro de una carpeta llamada pages/Home y solo tenemos un h3 con un texto. Si vamos al navegador a http://localhost:3000/ vamos a ver solo el texto. Hello Home\nAhora vamos a crear otras páginas y una página para manejar el error 404.\n// App.js import React from \u0026#39;react\u0026#39;; import \u0026#39;./App.css\u0026#39;; import { BrowserRouter as Router, Route, } from \u0026#34;react-router-dom\u0026#34;; import Home from \u0026#39;./pages/Home\u0026#39; import About from \u0026#39;./pages/About\u0026#39; import PageNotFound from \u0026#39;./pages/PageNotFound\u0026#39; function App() { return ( \u0026lt;Router\u0026gt; \u0026lt;div className=\u0026#34;App\u0026#34;\u0026gt; \u0026lt;Route exact path=\u0026#34;/\u0026#34; component={Home} /\u0026gt; \u0026lt;Route exact path=\u0026#34;/about\u0026#34; component={About} /\u0026gt; \u0026lt;Route component={PageNotFound} /\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;/Router\u0026gt; ); } export default App; Si vamos al navegador después de agregar estas nuevas rutas vamos a tener un pequeño problema y es que también vamos a tener el render de nuestro componente PageNotFound para solucionar esto lo que tenemos que hacer es envolver nuestras rutas con el componente Switch. Hello PageNotFound\n\u0026lt;Switch\u0026gt; \u0026lt;Route exact path=\u0026#34;/\u0026#34; component={Home} /\u0026gt; \u0026lt;Route exact path=\u0026#34;/about\u0026#34; component={About} /\u0026gt; \u0026lt;Route exact path=\u0026#34;/users\u0026#34; render={() =\u0026gt; \u0026lt;Users name=\u0026#39;John Serrano\u0026#39; /\u0026gt;} /\u0026gt; \u0026lt;Route component={PageNotFound} /\u0026gt; \u0026lt;/Switch\u0026gt; Listo con esto ya solucionamos ese pequeño problema. Antes de seguir vamos a crear un menú de navegación para precisamente eso recorrer todas nuestras páginas y transformar nuestro proyecto en una SPA para esto vamos a usar el componente Link de React Router.\nTodos los componentes que están dentro de ./pages solo tiene un h3 con un texto.\nLink # Con Link vamos a poder navegar por nuestra aplicación, este componente recibe las siguientes propiedades.\nTo: le podemos pasar un string, object o una function para indicarle la ruta a la cual queremos navegar.\nReplace: cuando es verdadero, y hacemos clic en el enlace reemplazará la entrada actual en la pila del historial en lugar de agregar una nueva.\n\u0026lt;nav\u0026gt; \u0026lt;ul\u0026gt; \u0026lt;li\u0026gt; \u0026lt;Link to=\u0026#34;/\u0026#34;\u0026gt;Home\u0026lt;/Link\u0026gt; \u0026lt;/li\u0026gt; \u0026lt;li\u0026gt; \u0026lt;Link to=\u0026#34;/about\u0026#34;\u0026gt;About\u0026lt;/Link\u0026gt; \u0026lt;/li\u0026gt; \u0026lt;li\u0026gt; \u0026lt;Link to=\u0026#34;/users\u0026#34;\u0026gt;Users\u0026lt;/Link\u0026gt; \u0026lt;/li\u0026gt; \u0026lt;li\u0026gt; \u0026lt;Link to=\u0026#34;/hola-mundo\u0026#34;\u0026gt;Hello\u0026lt;/Link\u0026gt; \u0026lt;/li\u0026gt; \u0026lt;/ul\u0026gt; \u0026lt;/nav\u0026gt; Agregamos el siguiente código en nuestro componente App.js dentro del div con la clase App, ahora podemos ver un menú de navegación en nuestra aplicación. Me falto mencionar debemos hacer el import de Link.\n// App.js import { BrowserRouter as Router, Switch, Route, Link } from \u0026#34;react-router-dom\u0026#34;; Hello About Redirect\nCon este componente podemos causar un redireccionamiento a una ruta diferente a la ruta actual reemplazando el location actual y el historial de navegación. Tiene las siguientes propiedades.\nFrom: le pasamos un string u object para indicarle desde donde se va hacer el redireccionamiento.\nTo: le pasamos un string u object hacia dónde vamos a realizar el redireccionamiento.\nPush: si es verdadero no modifica el location del historial por el contrario agrega esta nueva locación al historial.\n\u0026lt;Redirect from=\u0026#34;/redirect\u0026#34; to=\u0026#34;/about\u0026#34; /\u0026gt; Agregamos ese componente dentro de Switch, ahora si vamos al navegador y en la barra de dirección escribimos lo siguiente http://localhost:3000/redirect vamos a ver que nos hace un redirect a la ruta /about. No olvides hacer el import de Redirect.\nHook useParams # Con este Hook podemos acceder a los params de las rutas veamos un ejemplo para eso debemos crear un nuevo componente el cual se va encargar de usar el hook y debemos agregar un nuevo link al menú de navegación al igual que un Route.\n// App.js import Blog from \u0026#39;./pages/Blog\u0026#39; // App.js \u0026lt;li\u0026gt; \u0026lt;Link to=\u0026#34;/blog/aprende-react-router\u0026#34;\u0026gt;Aprende\u0026lt;/Link\u0026gt; \u0026lt;/li\u0026gt; \u0026lt;Route exact path=\u0026#34;/blog/:slug\u0026#34; component={Blog}\u0026gt;\u0026lt;/Route\u0026gt; // pages/Blog.js import React from \u0026#39;react\u0026#39; import { useParams } from \u0026#39;react-router-dom\u0026#39; const Blog = () =\u0026gt; { let { slug } = useParams() return ( \u0026lt;section className=\u0026#34;Blog\u0026#34;\u0026gt; \u0026lt;p\u0026gt;Now showing post {slug}\u0026lt;/p\u0026gt; \u0026lt;/section\u0026gt; ) } export default Blog Lo primero es importar el hook y obtener el params que definimos en el Route, con este hook es muy fácil acceder al params que indicamos en el Route si vamos al navegador y damos click en el nuevo link que tiene como nombre aprende vamos a ver lo siguiente. Hook Params\nVIDEO React Router # ","date":"12 marzo 2023","permalink":"/platform/levels/level3_react/dia05/rout/","section":"Levels","summary":"¿Qué es React Router?","title":"React Router"},{"content":" Actualización En esta sección se detalla como crear componentes de estado basandonos en el uso de Clases, sin embargo en versiones mas recientes de react se usan las funciones para crear componentes de estado. Por ello, te recomendamos leer la documentación oficial de React que encontrarás a continuación y el video que te dejamos en la parte inferior.\nhttps://react.dev/learn/state-a-components-memory Componentes con estado / sin estado # Para comenzar queremos analizar estos dos conceptos en contraposición. Cuando empezamos con React pueden provocar dudas, pero realmente es sencillo. Básicamente, la diferencia entre componentes con o sin estado estriba en que los componentes con estado permiten mantener datos propios a lo largo del tiempo e implementar comportamientos en sus diferentes métodos del ciclo de vida. Componentes sin estado\nLos componentes sin estado no guardan ninguna información y por ello no necesitan de datos locales. Todos los componentes implementados hasta el momento eran stateless, sin estado. Eso no significa que no puedan personalizar su comportamiento, lo que se consigue con la ayuda de las propiedades de los componentes. Estas propiedades que nos pasan se podrán incluso transformar al producir una salida, de modo que sea acorde con las necesidades, pero no se guardará ningún valor y el componente no tendrá un ciclo de vida. Nota: El ciclo de vida de los componentes es algo que todavía no hemos abordado. Más adelante hablaremos de él, porque entenderlo es muy importante en React. Ejemplo de componente sin estado\nPara que quede más claro, esto sería una implementación de componente sin estado que recibe un timestamp como propiedad y genera una vista donde ese instante se muestra convertido en una fecha en español.\nimport React from \u0026#34;react\u0026#34;; export default function (props) { var date = new Date(parseInt(props.timestamp, 10)); var fecha = date.getDate() + \u0026#34;/\u0026#34; + (date.getMonth() + 1) + \u0026#34;/\u0026#34; + date.getFullYear(); return \u0026lt;span\u0026gt;{fecha}\u0026lt;/span\u0026gt;; } Este componente se podría usar importándolo y luego colocando la etiqueta correspondiente. Me parece interesante mostrar cómo se usaría porque el componente en sí, tal como se ha definido, no tiene nombre. El nombre se lo asignamos a la hora de importarlo. Nota: El estilo anterior para la creación del componente se conoce en React como \u0026ldquo;stateless function component\u0026rdquo;. Es una alternativa a la creación del componente a partir de una clase, que solo podemos usar para los componentes sin estado.\nimport React, { Component } from \u0026#34;react\u0026#34;; import TimestampToDate from \u0026#34;./utils/TimestampToDate\u0026#34;; class App extends Component { render() { return \u0026lt;TimestampToDate timestamp={1475700297974} /\u0026gt;; } } Otro detalle interesante aquí es la forma como le pasamos un valor numérico a un componente. Dentro del componente la propiedad timestamp se esperaría que fuera un entero y para que así sea tenemos que indicarle el valor sin comillas. Lo metemos entre llaves porque si no le colocas comillas JSX te obliga a que sea una expresión Javascript. Esa expresión se evalúa como un número entero.\nCon este ejemplo queremos dejar claro que las propiedades de los componentes se pueden manipular para transformarlas en cualquier otro dato. Pero atención, en los componentes stateless las propiedades debemos tratarlas como valores de solo lectura, para evitar posibles situaciones inesperadas.. Si queremos manipular las propiedades y transformarlas en otra cosa lo más normal es guardemos los datos nuevos generados como variables, o estado si fuera necesario. Incluso, si solo se trata de una transformación sencilla para visualizar en la vista, podrías incluirla como una expresión Javascript embebida entre llaves dentro del JSX, aunque por claridad del código es preferible crear variables locales para generar esos cambios, como en el ejemplo anterior. En todo caso, quédate con que las propiedades deben trabajar como solo lectura. Componentes con estado\nLos componentes con estado son aquellos que almacenan datos de manera local al componente. Estos datos pueden variar variar a lo largo del tiempo bajo diversas circunstancias, por ejemplo por la interacción del usuario con el componente. Este tipo de componentes tienen algunas particularidades y posibilidades por encima de los componentes sin estadao que veremos a continuación.\nUn ejemplo de componente con estado podría ser un contador. Ese contador puede incrementarse o decrementarse. Incluso podrían pasarnos como propiedad el valor inicial del contador, pero el valor actual de la cuenta lo guardaremos en el estado. Otro ejemplo podría ser un componente que se conecte con un API Rest. A este componente le podemos pasar como propiedad la URL del API y una serie de parámetros para realizar la solicitud al servidor. Una vez que recibamos los datos lo común será almacenarlos como estado del componente, para usarlos como sea necesario.\nEl componente podrá además reaccionar al cambio de estado, de modo que actualice su vista cuando sea necesario. Eso lo veremos cuando analicemos el ciclo de vida de los componentes. Código necesario para implementar componente con estado\nSeguro que estarás deseando ver ya un componente con estado. Enseguida nos ponemos con ello, pero quiero que veamos antes el código de \u0026ldquo;boilerplate\u0026rdquo; para crear un componente con estado.\nimport React from \u0026#34;react\u0026#34;; export default class Contador extends React.Component { constructor(...args) { super(...args); } render() { return \u0026lt;div\u0026gt;Esto aun no tiene estado!\u0026lt;/div\u0026gt;; } } Lo primero decir que este componente todavía no tiene un estado implementado, es solo un código de partida para ver un par de cosas.\nComo primer detalle no estamos importando implícitamente la clase Component, para hacer el extends. No es problema porque depende de React. Así que ahora estamos haciendo \u0026ldquo;extends React.Component\u0026rdquo;, lo que es perfectamente válido. Esto no tiene mucho que ver con el tema que nos ocupa, de los estados, pero así vemos más variantes de codificación.\nMás relevante en el código anterior es el constructor. En este boilerplate la verdad es que el constructor no sirve para nada, porque realmente no hemos inicializado nada (como sabes, los constructores resumen las tareas de inicialización de los objetos). En este caso simplemente estamos llamando al constructor de la clase padre, super(), pasándole los mismos argumentos que nos pasaron a nosotros. Nota: Eso de \u0026ldquo;\u0026hellip;args\u0026rdquo; es una desestructuración, algo que nos viene de ES6, que permite en este caso recibir todos los argumentos o parámetros enviados a una función, sin necesidad de indicarlos uno a uno. Puedes obtener más información en el Manual de ES6, artículos del operador Rest y el operador Spread.\nGeneralmente en los componentes que tienen estado necesitamos inicializarlo, por lo que el sitio más correcto sería el constructor. Si realizamos un constructor tenemos que asegurarnos que se invoque al constructor de la clase padre, que realiza una serie de tareas genéricas para todos los componentes de React. Como esa invocación hay que hacerla explícita al sobreescribir el constructor, nos obliga a escribir la llamada a super(). Enseguida veremos cómo inicializar el estado, pero he querido mostrar ese código, aún sin la inicialización, para comentar este detalle del constructor.\nEn el boilerplate encuentras también el método render(), que ya sabemos que es el que nos sirve para definir la representación del componente. Ejemplo de componente con estado\nAhora veamos ya una implementación de un componente completo con estado. En nuestro ejemplo vamos a crear el típico del contador. El valor actual del contador será nuestro estado y lo tendremos que inicializar en el constructor.\nimport React from \u0026#34;react\u0026#34;; export default class Contador extends React.Component { constructor(...args) { super(...args); this.state = { contador: 0, }; } render() { return \u0026lt;div\u0026gt;Cuenta actual: {this.state.contador}\u0026lt;/div\u0026gt;; } } Ahora nuestro constructor ya tiene sentido, porque está realizando la inicialización de la propiedad \u0026ldquo;state\u0026rdquo; del componente. Como puedes ver el estado es un objeto, en el que ponemos tantos atributos como sea necesarios guardar como estado.\nA la hora de renderizar el componente, por supuesto, podremos usar el estado para mostrar la salida. En este caso puedes ver cómo se vuelca el estado en la vista, con la expresión {this.state.contador}. Algo muy parecido a lo que hacíamos con las propiedades, solo que ahora los datos nos llegan del estado.\nSolo nos falta implementar un botón para incrementar ese contador para ello tenemos que entrar en un tema nuevo, que son los eventos. Veamos el siguiente código.\nimport React from \u0026#34;react\u0026#34;; export default class Contador extends React.Component { constructor(...args) { super(...args); this.state = { contador: 0, }; } incrementar() { this.setState({ contador: this.state.contador + 1, }); } render() { return ( \u0026lt;div\u0026gt; \u0026lt;span\u0026gt;Cuenta actual: {this.state.contador}\u0026lt;/span\u0026gt; \u0026lt;button onClick={this.incrementar.bind(this)}\u0026gt;+\u0026lt;/button\u0026gt; \u0026lt;/div\u0026gt; ); } } Ahora tenemos un botón y al hacer clic sobre él se invocará a la función incrementar(). Sin querer entrar en demasiados detalles sobre eventos, pues no es el asunto de este artículo, cabe decir que se pueden definir como si fueran atributos de los elementos o componentes. Como valor le colocamos su manejador de eventos. Además el \u0026ldquo;bind(this)\u0026rdquo; lo hacemos para bindear el contexto. Sobre eventos hablaremos más adelante.\nLo que es interesante, para lo que respecta al estado, está en el manejador de evento incrementar(). Este usa el método setState() para modificar el estado. El detalle que no se te puede escapar es que, para manipular el estado no se debe modificar \u0026ldquo;a pelo\u0026rdquo; (a mano) la propiedad this.state, sino que tenemos que hacerlo a través de this.setState(). El motivo es que setState(), además de alterar el estado, desencadena toda una serie de acciones implementadas en el core de React, que se encargan de realizar todo el trabajo por debajo para que ese cambio de estado tenga una representación en la vista.\nDicho de otra manera, en el momento que cambiemos el estado con setState(), se pone en ejecución el motor de React para que se actualice el DOM virtual, se compare con el DOM del navegador y por último se actualicen aquellos elementos que sea necesario (porque realmente hayan cambiado). Si no usamos setState() todas esas operativas no se producirían y los componentes empezarían a funcionar de manera no deseada. Asincronía en la manipulación del estado\nHay un detalle extra que no queremos dejar pasar, sobre la asincronía en el manejo del estado por parte de React. Resulta que React, por motivos de rendimiento, puede llegar a acumular varias llamadas a setState, para procesarlas en un mismo instante.\nLo anterior significa que this.state puede ser actualizado de manera asíncrona. Es decir, this.setState() puede no ejecutarse inmediatamente, sino esperar a que React juzgue oportuno hacer las actualizaciones del estado. Esto podría resultar en una situación complicada de resolver, cuando el cálculo del nuevo valor del estado necesita basarse en el estado que haya anteriormente.\nincrementar() { this.setState({ contador: this.state.contador + 1 }) } En el código del método incrementar anterior, nos basamos en el estado actual del contador, para incrementarlo en una unidad. Sin embargo, si no sabemos realmente cuándo se va a ejecutar this.setState. Por ello, podría ocurrir que ese incremento se realice a partir de un valor del estado que no era realmente el válido.\nPara resolver esta situación en React se puede usar un mecanismo de manipulación del estado basado en una función. Veamos el código para clarificarlo un poco.\nincrementar() { this.setState(prevState =\u0026gt; { return { counter: prevState.counter + 1}; }); }\nComo puedes ver, en lugar de enviarle un objeto a setState() le estamos enviando una función. Esa función es capaz de recibir como parámetro el estado actual. Entonces, el nuevo estado lo calculo en función del estado actual.\nSi habías probado ejemplos anteriores en los que no habías tenido problemas con el cálculo del estado es normal. Aunque sea asíncrona la actualización del estado es muy rápida, por lo que es fácil no percibir ningún comportamiento anómalo. Simplemente tenlo en cuenta como una buena práctica en React. Conclusión\nDe momento hemos dado bastante información sobre el estado de los componentes, hemos podido distinguir componentes con estado y componentes sin estado, y aunque todavía nos quedan cosas que aprender, hemos podido ver ejemplos para hacernos una idea de cada tipo de componente.\nEn futuros artículos tenemos que abordar otros asuntos clave, como la inicialización de propiedades y estado ante diversos estilos de codificación, así como el ciclo de vida de los componentes, que es necesario conocer a fondo para resolver muchas de las necesidades de desarrollo en React.\nvideo Componentes # ","date":"12 marzo 2023","permalink":"/platform/levels/level3_react/dia04/vistas/","section":"Levels","summary":"Actualización En esta sección se detalla como crear componentes de estado basandonos en el uso de Clases, sin embargo en versiones mas recientes de react se usan las funciones para crear componentes de estado.","title":"Componentes con estado"},{"content":"En el mundo del desarrollo web moderno, React se ha convertido en una herramienta fundamental para la creación de interfaces de usuario interactivas y dinámicas. Una de las características clave de React es la capacidad de trabajar con componentes con estado, que permiten administrar y actualizar datos a lo largo del tiempo. En versiones anteriores, los componentes con estado se implementaban mediante clases, pero con la introducción de React Hooks, como useState(), ahora también es posible crear componentes con estado utilizando funciones.\nIntroducción a useState() # useState() es uno de los Hooks más utilizados en React. Este Hook permite agregar estado a los componentes funcionales, lo que simplifica la gestión de datos cambiantes sin la necesidad de crear clases. Con useState(), puedes declarar una variable de estado en el cuerpo de un componente funcional y React se encargará de mantener su estado entre renderizaciones.\nSintaxis y uso # La sintaxis básica de useState() es la siguiente:\nconst [state, setState] = useState(initialValue); state es la variable de estado que mantiene el valor actual. setState es una función que te permite actualizar el valor de state. initialValue es el valor inicial que se asigna a state en el primer renderizado. Implementación y ejemplos # A continuación, se presentan tres ejemplos prácticos y sencillos de cómo utilizar useState() en componentes funcionales de React:\nEjemplo 1: Contador # import React, { useState } from \u0026#34;react\u0026#34;; function Contador() { const [contador, setContador] = useState(0); const incrementarContador = () =\u0026gt; { setContador(contador + 1); }; return ( \u0026lt;div\u0026gt; \u0026lt;p\u0026gt;Contador: {contador}\u0026lt;/p\u0026gt; \u0026lt;button onClick={incrementarContador}\u0026gt;Incrementar\u0026lt;/button\u0026gt; \u0026lt;/div\u0026gt; ); } export default Contador; En este ejemplo, creamos un componente funcional llamado Contador que utiliza el Hook useState para agregar un estado llamado contador. La función useState(0) inicializa el estado con el valor 0. Luego, definimos una función incrementarContador que, al hacer clic en el botón, utiliza la función setContador para actualizar el estado sumando 1 al valor actual del contador. En el retorno del componente, mostramos el valor del contador y un botón que, al hacer clic, incrementa el contador en uno.\nEjemplo 2: Alternar texto # import React, { useState } from \u0026#34;react\u0026#34;; function AlternarTexto() { const [mostrarTexto, setMostrarTexto] = useState(true); const alternarTexto = () =\u0026gt; { setMostrarTexto(!mostrarTexto); }; return ( \u0026lt;div\u0026gt; \u0026lt;button onClick={alternarTexto}\u0026gt;Alternar Texto\u0026lt;/button\u0026gt; {mostrarTexto \u0026amp;\u0026amp; \u0026lt;p\u0026gt;¡Texto alternado visible!\u0026lt;/p\u0026gt;} \u0026lt;/div\u0026gt; ); } export default AlternarTexto; En este ejemplo, creamos un componente funcional llamado AlternarTexto que utiliza el estado mostrarTexto para controlar si se muestra un texto alternado. Al principio, mostrarTexto se establece en true. Al hacer clic en el botón, la función alternarTexto utiliza setMostrarTexto para cambiar el valor de mostrarTexto al contrario de su valor actual (alternando entre true y false). En la renderización del componente, mostramos un botón que permite alternar el estado y, si mostrarTexto es true, se muestra un párrafo con el texto \u0026ldquo;¡Texto alternado visible!\u0026rdquo;.\nEjemplo 3: Lista de tareas # import React, { useState } from \u0026#34;react\u0026#34;; function ListaDeTareas() { const [tareas, setTareas] = useState([]); const [nuevaTarea, setNuevaTarea] = useState(\u0026#34;\u0026#34;); const agregarTarea = () =\u0026gt; { if (nuevaTarea.trim() !== \u0026#34;\u0026#34;) { setTareas([...tareas, nuevaTarea]); setNuevaTarea(\u0026#34;\u0026#34;); } }; return ( \u0026lt;div\u0026gt; \u0026lt;input type=\u0026#34;text\u0026#34; value={nuevaTarea} onChange={(e) =\u0026gt; setNuevaTarea(e.target.value)} /\u0026gt; \u0026lt;button onClick={agregarTarea}\u0026gt;Agregar Tarea\u0026lt;/button\u0026gt; \u0026lt;ul\u0026gt; {tareas.map((tarea, index) =\u0026gt; ( \u0026lt;li key={index}\u0026gt;{tarea}\u0026lt;/li\u0026gt; ))} \u0026lt;/ul\u0026gt; \u0026lt;/div\u0026gt; ); } export default ListaDeTareas; En este último ejemplo, creamos un componente funcional llamado ListaDeTareas que utiliza dos estados: tareas y nuevaTarea. tareas es una matriz que almacena las tareas agregadas y nuevaTarea es una cadena que almacena el valor del campo de entrada. La función agregarTarea se dispara al hacer clic en el botón \u0026ldquo;Agregar Tarea\u0026rdquo; y agrega la tarea ingresada a la matriz tareas. La función onChange del campo de entrada actualiza el estado nuevaTarea a medida que se escribe. Luego, en la renderización del componente, mostramos un campo de entrada, un botón para agregar tareas y una lista de tareas mostradas usando map().\nuseState() es un poderoso Hook en React que permite agregar y gestionar estado en componentes funcionales de manera sencilla y eficiente. Los ejemplos presentados demuestran cómo puede utilizarse para crear componentes interactivos y dinámicos, como un contador, un alternador de texto y una lista de tareas. Esta funcionalidad es esencial para construir aplicaciones web modernas que respondan a las interacciones del usuario de manera fluida y efectiva.\nRecursos # ","date":"12 marzo 2023","permalink":"/platform/nivel2/4/","section":"Nivel2s","summary":"En el mundo del desarrollo web moderno, React se ha convertido en una herramienta fundamental para la creación de interfaces de usuario interactivas y dinámicas.","title":"Componentes con Estado en React utilizando useState()"},{"content":"En el mundo del desarrollo web moderno, React se ha convertido en una herramienta fundamental para la creación de interfaces de usuario interactivas y dinámicas. Una de las características clave de React es la capacidad de trabajar con componentes con estado, que permiten administrar y actualizar datos a lo largo del tiempo. En versiones anteriores, los componentes con estado se implementaban mediante clases, pero con la introducción de React Hooks, como useState(), ahora también es posible crear componentes con estado utilizando funciones.\nIntroducción a useState() # useState() es uno de los Hooks más utilizados en React. Este Hook permite agregar estado a los componentes funcionales, lo que simplifica la gestión de datos cambiantes sin la necesidad de crear clases. Con useState(), puedes declarar una variable de estado en el cuerpo de un componente funcional y React se encargará de mantener su estado entre renderizaciones.\nSintaxis y uso # La sintaxis básica de useState() es la siguiente:\nconst [state, setState] = useState(initialValue); state es la variable de estado que mantiene el valor actual. setState es una función que te permite actualizar el valor de state. initialValue es el valor inicial que se asigna a state en el primer renderizado. Implementación y ejemplos # A continuación, se presentan tres ejemplos prácticos y sencillos de cómo utilizar useState() en componentes funcionales de React:\nEjemplo 1: Contador # import React, { useState } from \u0026#34;react\u0026#34;; function Contador() { const [contador, setContador] = useState(0); const incrementarContador = () =\u0026gt; { setContador(contador + 1); }; return ( \u0026lt;div\u0026gt; \u0026lt;p\u0026gt;Contador: {contador}\u0026lt;/p\u0026gt; \u0026lt;button onClick={incrementarContador}\u0026gt;Incrementar\u0026lt;/button\u0026gt; \u0026lt;/div\u0026gt; ); } export default Contador; En este ejemplo, creamos un componente funcional llamado Contador que utiliza el Hook useState para agregar un estado llamado contador. La función useState(0) inicializa el estado con el valor 0. Luego, definimos una función incrementarContador que, al hacer clic en el botón, utiliza la función setContador para actualizar el estado sumando 1 al valor actual del contador. En el retorno del componente, mostramos el valor del contador y un botón que, al hacer clic, incrementa el contador en uno.\nEjemplo 2: Alternar texto # import React, { useState } from \u0026#34;react\u0026#34;; function AlternarTexto() { const [mostrarTexto, setMostrarTexto] = useState(true); const alternarTexto = () =\u0026gt; { setMostrarTexto(!mostrarTexto); }; return ( \u0026lt;div\u0026gt; \u0026lt;button onClick={alternarTexto}\u0026gt;Alternar Texto\u0026lt;/button\u0026gt; {mostrarTexto \u0026amp;\u0026amp; \u0026lt;p\u0026gt;¡Texto alternado visible!\u0026lt;/p\u0026gt;} \u0026lt;/div\u0026gt; ); } export default AlternarTexto; En este ejemplo, creamos un componente funcional llamado AlternarTexto que utiliza el estado mostrarTexto para controlar si se muestra un texto alternado. Al principio, mostrarTexto se establece en true. Al hacer clic en el botón, la función alternarTexto utiliza setMostrarTexto para cambiar el valor de mostrarTexto al contrario de su valor actual (alternando entre true y false). En la renderización del componente, mostramos un botón que permite alternar el estado y, si mostrarTexto es true, se muestra un párrafo con el texto \u0026ldquo;¡Texto alternado visible!\u0026rdquo;.\nEjemplo 3: Lista de tareas # import React, { useState } from \u0026#34;react\u0026#34;; function ListaDeTareas() { const [tareas, setTareas] = useState([]); const [nuevaTarea, setNuevaTarea] = useState(\u0026#34;\u0026#34;); const agregarTarea = () =\u0026gt; { if (nuevaTarea.trim() !== \u0026#34;\u0026#34;) { setTareas([...tareas, nuevaTarea]); setNuevaTarea(\u0026#34;\u0026#34;); } }; return ( \u0026lt;div\u0026gt; \u0026lt;input type=\u0026#34;text\u0026#34; value={nuevaTarea} onChange={(e) =\u0026gt; setNuevaTarea(e.target.value)} /\u0026gt; \u0026lt;button onClick={agregarTarea}\u0026gt;Agregar Tarea\u0026lt;/button\u0026gt; \u0026lt;ul\u0026gt; {tareas.map((tarea, index) =\u0026gt; ( \u0026lt;li key={index}\u0026gt;{tarea}\u0026lt;/li\u0026gt; ))} \u0026lt;/ul\u0026gt; \u0026lt;/div\u0026gt; ); } export default ListaDeTareas; En este último ejemplo, creamos un componente funcional llamado ListaDeTareas que utiliza dos estados: tareas y nuevaTarea. tareas es una matriz que almacena las tareas agregadas y nuevaTarea es una cadena que almacena el valor del campo de entrada. La función agregarTarea se dispara al hacer clic en el botón \u0026ldquo;Agregar Tarea\u0026rdquo; y agrega la tarea ingresada a la matriz tareas. La función onChange del campo de entrada actualiza el estado nuevaTarea a medida que se escribe. Luego, en la renderización del componente, mostramos un campo de entrada, un botón para agregar tareas y una lista de tareas mostradas usando map().\nuseState() es un poderoso Hook en React que permite agregar y gestionar estado en componentes funcionales de manera sencilla y eficiente. Los ejemplos presentados demuestran cómo puede utilizarse para crear componentes interactivos y dinámicos, como un contador, un alternador de texto y una lista de tareas. Esta funcionalidad es esencial para construir aplicaciones web modernas que respondan a las interacciones del usuario de manera fluida y efectiva.\nRecursos # ","date":"12 marzo 2023","permalink":"/platform/react/usestate/intro/","section":"Reacts","summary":"En el mundo del desarrollo web moderno, React se ha convertido en una herramienta fundamental para la creación de interfaces de usuario interactivas y dinámicas.","title":"Componentes con Estado en React utilizando useState()"},{"content":"Funciones y Estructuras de Datos con PHP # En PHP, puedes utilizar funciones predefinidas y también crear tus propias funciones para realizar tareas específicas. Además, hay diversas estructuras de datos incorporadas que te permiten organizar y manipular información de manera eficiente. A continuación, te muestro ejemplos de funciones comunes y estructuras de datos en PHP:\nFunciones: Puedes utilizar funciones predefinidas de PHP y crear tus propias funciones para modularizar tu código y reutilizarlo en diferentes partes de tu programa. Aquí tienes ejemplos:\n// Función predefinida: strlen() $longitud = strlen(\u0026#34;Hola, mundo\u0026#34;); // Devuelve la longitud de una cadena // Función predefinida: strtolower() $cadena = \u0026#34;Hola, mundo\u0026#34;; $cadenaMinusculas = strtolower($cadena); // Convierte una cadena a minúsculas // Función personalizada: suma() function suma($a, $b) { return $a + $b; } $resultado = suma(5, 3); // Llama a la función personalizada echo $longitud; // Salida: 11 echo $cadenaMinusculas; // Salida: hola, mundo echo $resultado; // Salida: 8 Estructuras de Datos: PHP proporciona diferentes estructuras de datos integradas para organizar y manipular información de manera eficiente. Aquí tienes ejemplos de algunas estructuras de datos comunes:\nArrays: Los arrays son estructuras de datos que pueden contener múltiples elementos en una sola variable.\n// Array numérico $numeros = [1, 2, 3, 4, 5]; // Array asociativo $persona = [ \u0026#34;nombre\u0026#34; =\u0026gt; \u0026#34;Juan\u0026#34;, \u0026#34;edad\u0026#34; =\u0026gt; 30, \u0026#34;ciudad\u0026#34; =\u0026gt; \u0026#34;México\u0026#34; ]; echo $numeros[0]; // Acceder a un elemento del array numérico (Salida: 1) echo $persona[\u0026#34;nombre\u0026#34;]; // Acceder a un elemento del array asociativo (Salida: Juan) Listas Enlazadas: PHP no tiene una estructura de datos específica llamada \u0026ldquo;listas enlazadas\u0026rdquo; incorporada en su biblioteca estándar, pero puedes crear una lista enlazada utilizando clases personalizadas.\nclass Nodo { public $valor; public $siguiente; public function __construct($valor) { $this-\u0026gt;valor = $valor; $this-\u0026gt;siguiente = null; } } $nodo1 = new Nodo(1); $nodo2 = new Nodo(2); $nodo3 = new Nodo(3); $nodo1-\u0026gt;siguiente = $nodo2; $nodo2-\u0026gt;siguiente = $nodo3; echo $nodo1-\u0026gt;valor; // Salida: 1 echo $nodo1-\u0026gt;siguiente-\u0026gt;valor; // Salida: 2 echo $nodo1-\u0026gt;siguiente-\u0026gt;siguiente-\u0026gt;valor; // Salida: 3 Estos son solo ejemplos básicos de funciones y estructuras de datos en PHP. PHP ofrece una amplia variedad de funciones y estructuras de datos predefinidas, así como la capacidad de crear tus propias funciones y estructuras personalizadas según tus necesidades. Puedes explorar la documentación oficial de PHP para obtener más información sobre las funciones y estructuras de datos disponibles.\nProgramacion Orientada a Objetos # En PHP, puedes utilizar la programación orientada a objetos (POO) para estructurar y organizar tu código de manera más eficiente. La POO se basa en el concepto de objetos, que son instancias de clases, y permite la encapsulación, la herencia y el polimorfismo. A continuación, te muestro un ejemplo básico de cómo utilizar la programación orientada a objetos en PHP:\nClases y Objetos: Una clase es una plantilla o un plano para crear objetos. Define propiedades y métodos que los objetos de esa clase tendrán. Para crear un objeto, utilizamos el operador new. Aquí tienes un ejemplo:\nclass Persona { public $nombre; public $edad; public function saludar() { echo \u0026#34;Hola, mi nombre es \u0026#34; . $this-\u0026gt;nombre; } } $persona1 = new Persona(); $persona1-\u0026gt;nombre = \u0026#34;Juan\u0026#34;; $persona1-\u0026gt;edad = 30; $persona1-\u0026gt;saludar(); // Salida: Hola, mi nombre es Juan En este ejemplo, la clase Persona tiene dos propiedades: $nombre y $edad, y un método llamado saludar() que muestra un mensaje de saludo.\nEncapsulación: La encapsulación se refiere a la protección de las propiedades y métodos dentro de una clase para evitar su acceso directo desde fuera de la clase. Puedes utilizar los modificadores de acceso como public, private y protected para controlar la visibilidad de las propiedades y métodos. Aquí tienes un ejemplo:\nclass Persona { private $nombre; public $edad; public function setNombre($nombre) { $this-\u0026gt;nombre = $nombre; } public function getNombre() { return $this-\u0026gt;nombre; } } $persona1 = new Persona(); $persona1-\u0026gt;setNombre(\u0026#34;Juan\u0026#34;); $persona1-\u0026gt;edad = 30; echo $persona1-\u0026gt;getNombre(); // Salida: Juan En este ejemplo, la propiedad $nombre está declarada como private, lo que significa que solo se puede acceder a ella desde dentro de la clase utilizando los métodos setNombre() y getNombre(). La propiedad $edad está declarada como public, lo que permite acceder a ella directamente desde fuera de la clase.\nHerencia: La herencia te permite crear nuevas clases basadas en una clase existente. La clase derivada hereda las propiedades y métodos de la clase base y puede agregar sus propios métodos o propiedades adicionales. Aquí tienes un ejemplo:\nclass Persona { public $nombre; public function saludar() { echo \u0026#34;Hola, mi nombre es \u0026#34; . $this-\u0026gt;nombre; } } class Estudiante extends Persona { public $grado; public function estudiar() { echo \u0026#34;Soy estudiante de grado \u0026#34; . $this-\u0026gt;grado; } } $estudiante1 = new Estudiante(); $estudiante1-\u0026gt;nombre = \u0026#34;Juan\u0026#34;; $estudiante1-\u0026gt;grado = \u0026#34;10mo\u0026#34;; $estudiante1-\u0026gt;saludar(); // Salida: Hola, mi nombre es Juan $estudiante1-\u0026gt;estudiar(); // Salida: Soy estudiante de grado 10mo En este ejemplo, la clase Estudiante hereda de la clase Persona y agrega su propia propiedad $grado y su método `estudiar()\nFunciones y Estructuras de Datos con PHP # Programacion orientada a objetos php # ","date":"12 marzo 2023","permalink":"/platform/levels/level4_php/04php/vistas/","section":"Levels","summary":"Funciones y Estructuras de Datos con PHP # En PHP, puedes utilizar funciones predefinidas y también crear tus propias funciones para realizar tareas específicas.","title":"Funciones y Estructuras de Datos con PHP"},{"content":"MicroServicios / Base de Datos # Introducción: Los microservicios y las bases de datos son componentes fundamentales en la arquitectura de aplicaciones modernas. Los microservicios permiten desarrollar aplicaciones escalables y flexibles, mientras que las bases de datos almacenan y gestionan los datos de estas aplicaciones. En esta lección, exploraremos los conceptos fundamentales y las características de los microservicios y las bases de datos, así como los casos de uso comunes para cada uno de ellos.\n¿Qué son los microservicios y por qué son importantes? Los microservicios son un enfoque arquitectónico para desarrollar aplicaciones que consisten en construir una aplicación como un conjunto de servicios independientes y autónomos. Son importantes porque permiten una mayor escalabilidad, flexibilidad y mantenibilidad en el desarrollo de aplicaciones al dividir funcionalidades en servicios más pequeños y especializados. Características clave de los microservicios: Independencia y autonomía: Cada microservicio puede ser desarrollado, implementado y escalado de forma independiente. Comunicación a través de API: Los microservicios se comunican entre sí a través de interfaces de programación de aplicaciones (API), lo que permite la integración y la interoperabilidad. Enfoque en una única responsabilidad: Cada microservicio se centra en una única tarea o funcionalidad específica de la aplicación. Despliegue y escalado independientes: Los microservicios se pueden desplegar y escalar individualmente según la demanda de cada uno. Escenarios comunes de uso de microservicios: Aplicaciones empresariales escalables: Los microservicios permiten el desarrollo de aplicaciones empresariales que pueden crecer y adaptarse fácilmente a medida que los requisitos y la carga aumentan. Integración de sistemas y servicios: Los microservicios facilitan la integración de sistemas y servicios de diferentes proveedores, permitiendo la construcción de aplicaciones compuestas y flexibles. Implementación de aplicaciones móviles y web: Los microservicios son una opción popular para desarrollar aplicaciones móviles y web que necesitan escalar y adaptarse rápidamente a los cambios en la demanda. ¿Qué son las bases de datos y por qué son importantes? Las bases de datos son sistemas que almacenan, organizan y gestionan datos de manera estructurada y eficiente. Son importantes porque permiten el almacenamiento seguro y eficiente de datos, facilitando el acceso, la búsqueda y la manipulación de la información que las aplicaciones necesitan. Tipos comunes de bases de datos: Bases de datos relacionales: Almacenan datos en tablas relacionadas mediante claves primarias y foráneas. Ejemplos populares incluyen MySQL, PostgreSQL y Oracle. Bases de datos NoSQL: Proporcionan una estructura flexible para almacenar datos no estructurados o semi-estructurados. Ejemplos incluyen MongoDB, Cassandra y DynamoDB. Bases de datos en memoria: Almacenan datos en la memoria principal del servidor para un acceso ultrarrápido. Ejemplos incluyen Redis y Memcached. Almacenes de datos en la nube: Servicios en la nube como Amazon RDS, Amazon DynamoDB o Azure Cosmos DB que ofrecen bases de datos gestionadas y escalables. Casos de uso comunes para bases de datos: Persistencia de datos de aplicaciones: Las bases de datos se utilizan para almacenar y recuperar datos de aplicaciones web, móviles y empresariales. Análisis y generación de informes: Las bases de datos se utilizan para almacenar grandes volúmenes de datos y realizar análisis y generación de informes sobre ellos. Almacenamiento de contenido multimedia: Las bases de datos se utilizan para almacenar y gestionar contenido multimedia, como imágenes, videos o archivos. Sistemas de gestión de relaciones con clientes (CRM): Las bases de datos se utilizan para almacenar y gestionar datos de clientes, como información de contacto, historial de compras y preferencias. Conclusión: Los microservicios y las bases de datos son elementos fundamentales en el desarrollo de aplicaciones modernas. Los microservicios permiten la construcción de aplicaciones escalables y flexibles, mientras que las bases de datos almacenan y gestionan los datos necesarios para estas aplicaciones. Al entender los conceptos y las características de los microservicios y las bases de datos, se puede diseñar y desarrollar aplicaciones eficientes y adaptativas.\nMicroServicios AWS # Base de Datos AWS # ","date":"12 marzo 2023","permalink":"/platform/levels/level5_laravel/09aws/vistas/","section":"Levels","summary":"MicroServicios / Base de Datos # Introducción: Los microservicios y las bases de datos son componentes fundamentales en la arquitectura de aplicaciones modernas.","title":"MicroServicios / Base de Datos"},{"content":"Tailwind fuentes / backgroud color # En Tailwind CSS, puedes aplicar estilos de fuentes y colores de fondo utilizando clases de utilidad. Permíteme explicarte cómo puedes trabajar con fuentes y colores de fondo en Tailwind CSS:\nFuentes: Para aplicar estilos de fuente en Tailwind CSS, puedes utilizar las clases de utilidad relacionadas con la tipografía. Algunas clases comunes que puedes utilizar son: font-sans: Establece una familia de fuentes sin serifa. font-serif: Establece una familia de fuentes con serifa. font-mono: Establece una familia de fuentes monoespaciadas. Por ejemplo, si deseas aplicar una fuente sans-serif a un elemento, puedes agregar la clase font-sans a ese elemento:\n\u0026lt;p class=\u0026#34;font-sans\u0026#34;\u0026gt;Este es un ejemplo de texto con fuente sans-serif.\u0026lt;/p\u0026gt; Además de estas clases básicas, Tailwind CSS también ofrece clases de utilidad para estilos de tamaño de fuente, peso de fuente, espaciado entre letras y más. Puedes consultar la documentación oficial de Tailwind CSS para obtener más detalles sobre las clases de utilidad de fuentes disponibles.\nColores de fondo: Para aplicar estilos de color de fondo en Tailwind CSS, puedes utilizar clases de utilidad relacionadas con los colores. Tailwind CSS ofrece una amplia variedad de colores predefinidos que puedes utilizar para establecer el color de fondo de un elemento. Puedes aplicar clases de utilidad de colores de fondo utilizando la sintaxis bg-{color}. Por ejemplo, si deseas establecer un fondo rojo en un elemento, puedes agregar la clase bg-red-500 a ese elemento:\n\u0026lt;div class=\u0026#34;bg-red-500\u0026#34;\u0026gt; Este es un ejemplo de elemento con fondo rojo. \u0026lt;/div\u0026gt; Además de los colores predefinidos, Tailwind CSS te permite personalizar tu propia paleta de colores en el archivo tailwind.config.js, lo que te brinda una mayor flexibilidad para definir y utilizar tus colores personalizados.\nEn resumen, en Tailwind CSS, puedes aplicar estilos de fuentes utilizando las clases de utilidad relacionadas con la tipografía, y aplicar estilos de colores de fondo utilizando las clases de utilidad de colores predefinidos. Estas clases de utilidad te permiten establecer fácilmente estilos de fuentes y colores de fondo sin necesidad de escribir estilos CSS personalizados.\nFunciones y Estructuras de Datos con PHP video # Programacion orientada a objetos php # ","date":"12 marzo 2023","permalink":"/platform/levels/level5_laravel/04taildwind/vistas/","section":"Levels","summary":"Tailwind fuentes / backgroud color # En Tailwind CSS, puedes aplicar estilos de fuentes y colores de fondo utilizando clases de utilidad.","title":"Tailwind fuentes / backgroud color"},{"content":"Container / Padding \u0026amp; Margin # En Tailwind CSS, los conceptos de \u0026ldquo;Container\u0026rdquo; (contenedor) y \u0026ldquo;Padding\u0026rdquo; (relleno) y \u0026ldquo;Margin\u0026rdquo; (margen) son fundamentales para el diseño y la estructura de tu interfaz de usuario. Permíteme explicarte cada uno de ellos:\n1. Contenedor (Container): # El contenedor en Tailwind CSS es una clase de utilidad que te permite envolver el contenido principal de tu página dentro de un ancho máximo específico. Esto es útil para mantener el diseño centrado y limitar la anchura del contenido en pantallas más grandes.\nLa clase de utilidad para el contenedor se llama container y está diseñada para envolver los elementos principales de tu página, como encabezados, secciones o divs principales. Por ejemplo:\n\u0026lt;div class=\u0026#34;container\u0026#34;\u0026gt; \u0026lt;!-- Contenido principal de tu página --\u0026gt; \u0026lt;/div\u0026gt; Por defecto, la clase container establece un ancho máximo y agrega márgenes automáticos en los lados izquierdo y derecho para centrar el contenido. Puedes personalizar el ancho máximo del contenedor en el archivo tailwind.config.js para ajustarlo a tus necesidades.\n2. Padding (Relleno): # El relleno en Tailwind CSS se refiere al espacio interior entre el contenido de un elemento y sus bordes. Puedes aplicar clases de utilidad de relleno para agregar o ajustar el espacio interno alrededor de un elemento.\nTailwind CSS proporciona una amplia variedad de clases de utilidad de relleno que puedes utilizar, como p-4 (relleno de 4 unidades), py-2 (relleno vertical de 2 unidades), px-6 (relleno horizontal de 6 unidades), entre otras. Estas clases se pueden combinar y ajustar según tus necesidades. Por ejemplo:\n\u0026lt;div class=\u0026#34;p-4\u0026#34;\u0026gt; \u0026lt;!-- Contenido dentro del elemento --\u0026gt; \u0026lt;/div\u0026gt; 3. Margin (Margen): # El margen en Tailwind CSS se refiere al espacio externo alrededor de un elemento, que proporciona separación visual entre elementos adyacentes. Al igual que el relleno, puedes aplicar clases de utilidad de margen para agregar o ajustar el espacio entre elementos.\nTailwind CSS ofrece una amplia gama de clases de utilidad de margen, como m-4 (margen de 4 unidades), my-2 (margen vertical de 2 unidades), mx-6 (margen horizontal de 6 unidades), entre otras. Estas clases también se pueden combinar y ajustar según tus necesidades. Por ejemplo:\n\u0026lt;div class=\u0026#34;m-4\u0026#34;\u0026gt; \u0026lt;!-- Contenido dentro del elemento --\u0026gt; \u0026lt;/div\u0026gt; Estas clases de utilidad de relleno y margen te permiten establecer espacios y separaciones consistentes y controladas en tu interfaz de usuario, sin necesidad de escribir estilos CSS personalizados.\nEn resumen, en Tailwind CSS, el \u0026ldquo;Contenedor\u0026rdquo; te permite limitar el ancho del contenido y centrarlo, mientras que las clases de utilidad de \u0026ldquo;Padding\u0026rdquo; y \u0026ldquo;Margin\u0026rdquo; te permiten agregar espacios internos y externos a los elementos para lograr un diseño y una estructura visualmente atractivos.\nSintaxis PHP # Variables y operadores PHP # Condicionales y Ciclos PHP # ","date":"12 marzo 2023","permalink":"/platform/levels/level5_laravel/03taildwind/event/","section":"Levels","summary":"Container / Padding \u0026amp; Margin # En Tailwind CSS, los conceptos de \u0026ldquo;Container\u0026rdquo; (contenedor) y \u0026ldquo;Padding\u0026rdquo; (relleno) y \u0026ldquo;Margin\u0026rdquo; (margen) son fundamentales para el diseño y la estructura de tu interfaz de usuario.","title":"Container / Padding \u0026 Margin"},{"content":"Cómo definir un evento de manera declarativa en React # Los eventos en React se definen generalmente de manera declarativa, en el código de la vista o template, producido con JSX en el método render().\nPara definirlo tenemos que indicar dos cosas: Primero el tipo de evento que queremos implementar y luego el método que hará las veces de manejador de evento.\nNota: # un manejador de evento no es más que la función que se encarga de definir la funcionalidad que tiene que ejecutarse cuando se dispara un evento render() { return ( \u0026lt;p\u0026gt; \u0026lt;button onClick={this.toggleSlider}\u0026gt;Mostrar / Ocultar Slider\u0026lt;/button\u0026gt; \u0026lt;/p\u0026gt; ); } Como puedes apreciar en el código anterior, el método render devuelve el tempate, escrito con el lenguaje con JSX. Dentro del template tenemos un botón, el cuál tiene definido un evento \u0026ldquo;click\u0026rdquo;.\nNota: Es importante darse cuenta que el método asignado a onClick no tiene los paréntesis al final. No estamos queriendo ejecutar una función, sino indicar qué función se debe asociar como manejador de eventos. Por eso no se le colocan los paréntesis. # Las declaraciones de eventos en React tienen siempre esa forma: el prefijo \u0026ldquo;on\u0026rdquo;, seguido del tipo de evento que queremos capturar (onClick, onInput…). Como valor, colocamos una referencia al método del componente encargado de procesar el evento correspondiente. Por tanto, al hacer clic sobre el botón, se ejecutará el método toggleSlider().\nLuego tendremos que definir el manejador, como cualquier otro método del componente.\ntoggleSlider() { alert(\u0026#39;Has hecho clic\u0026#39;); } Bindear el contexto para acceder a this # Al implementar un manejador de evento es habitual que queramos acceder a las propiedades o métodos del propio componente. Por ejemplo, en el método toggleSlider() queremos cambiar el estado del componente y por tanto necesitamos manipularlo con this.setState().\nSin embargo aquí nos encontramos con una dificultad que viene del propio lenguaje Javascript no de React específicamente. En las funciones no es posible acceder a this como referencia al objeto sobre el que se invoca el método. Es por ello que necesitamos bindear el contexto.\nEste sería el código real del método toggleSlider(), que simplemente tiene que negar una propiedad boleana del estado del componente.\ntoggleSlider() { this.setState(prevState =\u0026gt; { return { showSlider: !prevState.showSlider }; }); } Como puedes ver, nos basamos en el estado anterior para calcular el nuevo estado. Por todas partes estamos usando \u0026ldquo;this\u0026rdquo; con la intención de acceder al propio componente que ha recibido el mensaje toggleSlider(). El problema aquí, como decíamos, es que \u0026ldquo;this\u0026rdquo; puede no contener esa referencia.\nNota: puedes ver más sobre el tratamiento del estado y this.setState en el artículo del estado de componentes en react. # Para solucionarlo existen varios mecanismos en React. El más recomendable es binderar el contexto directamente en el constructor del componente.\nLo consigo simplemente así:\nconstructor(props) { super(props); this.state = { showSlider: false } this.toggleSlider = this.toggleSlider.bind(this); } En este constructor estamos haciendo diversas tareas, la primera es la inicialización del estado, pero lo que nos interesa a nosotros es la parte donde se hace this.toggleSlider = this.toggleSlider.bind(this);\nNota: Gracias a la llamada a .bind(this) sobre una función o método, le estamos indicando a Javascript qué es lo que queremos que valga \u0026ldquo;this\u0026rdquo; dentro del método. Esto es algo que seguramente, si tienes experiencia en Javascript, ya habrás hecho en muchas otras ocasiones. # Otras alternativas de bindear this # También podemos hacer este bindeo de this (como contexto para en handler) a la hora de declarar el evento, en el template. El código nos quedaría más o menos así.\n\u0026lt;button onClick={this.toggleSlider.bind(this)}\u0026gt;Mostrar / Ocultar Slider\u0026lt;/button\u0026gt; También podríamos obtener el mismo resultado usando una arrow function, que es capaz de mantener el contexto de this, con un código como este:\n\u0026lt;button onClick={(e) =\u0026gt; this.toggleSlider(e)}\u0026gt;Mostrar / Ocultar Slider\u0026lt;/button\u0026gt; Aunque estas opciones nos ensucien algo el template, tienen la ventaja de ahorrarnos algo de ceremonia en el constructor del componente. Sin embargo, en términos de rendimiento resultan una solución peor. El problema de estas alternativas es que, cada vez que se renderiza el componente, se le pasa una nueva función como manejador de evento, donde se tiene que bindear el contexto nuevamente. Incluso, si la función se está pasando hacia componentes hijos, forzaría un redibujado adicional del componente hijo, lo que posiblemente nos lleve a una disminución del rendimiento que podrá notarse en aplicaciones grandes.\nPasar parámetros a manejadores de eventos # En los métodos de React asociados como manejadores de eventos podemos pasar parámetros. Puede ser útil cuando quieres personalizar el comportamiento del manejador, mediante el paso de datos que tienes desde el template.\nSería algo tan sencillo como bindear los otros datos que deseas enviar al método que hace de manejador de eventos. De la siguiente manera:\n\u0026lt;pre class=\u0026#34;language-markup\u0026#34;\u0026gt;\u0026lt;code\u0026gt;\u0026amp;lt;button onClick={(e) =\u0026amp;gt; this.toggleSlider(e)}\u0026amp;gt;Mostrar / Ocultar Slider\u0026amp;lt;/button\u0026amp;gt;\u0026lt;/code\u0026gt;\u0026lt;/pre\u0026gt; Ahora, dentro de nuestro método showText() podemos recibir el dato de esta forma.\nshowText(item, e) { console.log(e, item); } Esto nos mostrará dos datos en la consola, el \u0026ldquo;item\u0026rdquo; es aquella variable extra que estamos pasando al manejador. Por su parte, el parámetro \u0026ldquo;e\u0026rdquo; es el objeto evento de Javascript.\nPrevenir el comportamiento por defecto de un evento # Algo también muy típico que querrás realizar en un componente al trabajar con eventos es prevenir el comportamiento predeterminado. Por ejemplo, ante un clic en un enlace, podemos evitar que el navegador se vaya a la URL definida en el href del enlace.\nPara ello en Javascript nativo tendríamos dos opciones. La primera sería devolver \u0026ldquo;false\u0026rdquo; (return false) en el código del manejador. Esta alternativa no es válida para React. La segunda opción, que será la que realmente funcione, es invocar al método nativo de Javascript preventDefault(), que pertenece al objeto evento.\nPor ejemplo, podríamos tener un enlace como este:\n\u0026lt;a onClick={this.clickRealizado} href=\u0026#34;http://escuela.it\u0026#34;\u0026gt;Haz clic\u0026lt;/a\u0026gt; Cuyo manejador de evento sería el siguiente:\nclickRealizado(e) { e.preventDefault(); console.log(\u0026#39;clickEnP\u0026#39;) } Gracias a e.preventDefault() al hacer clic sobre el enlace no provocará que el navegador se vaya de la página, hacia la web de EscuelaIT.\nConclusión sobre los eventos en React # Hemos conocido lo básico sobre los eventos en React, junto con algunas cosas no tan básicas, pero de necesario conocimiento para poder trabajar con esta librería.\nComo has podido comprobar, trabajar con eventos no es nada complejo, pero requiere saber las particularidades de la librería React para evitar problemas o situaciones poco deseadas, que a veces resulta difícil de debuguear.\nVIDEO DE EVENT HANDLER # ","date":"12 marzo 2023","permalink":"/platform/levels/level3_react/dia03/event/","section":"Levels","summary":"Cómo definir un evento de manera declarativa en React # Los eventos en React se definen generalmente de manera declarativa, en el código de la vista o template, producido con JSX en el método render().","title":"Eventos JS"},{"content":"AWS Lambda y CloudFront # Introducción: AWS Lambda y CloudFront son dos servicios clave de Amazon Web Services (AWS) que brindan funcionalidades relacionadas con la computación sin servidor y la distribución de contenido a nivel global. En esta lección, exploraremos los conceptos fundamentales y las características de Lambda y CloudFront, así como los casos de uso comunes para estos servicios.\n¿Qué es Lambda y por qué es importante? Lambda es un servicio de computación sin servidor que permite ejecutar código en la nube sin la necesidad de administrar servidores. Es importante porque permite una implementación ágil y eficiente de aplicaciones y microservicios, ya que se encarga automáticamente de la escalabilidad y la administración del entorno de ejecución. Componentes clave de Lambda: Funciones: Representan el código que se ejecuta en respuesta a eventos específicos. Las funciones Lambda se definen en lenguajes de programación como Node.js, Python, Java, etc. Eventos: Son los desencadenantes que activan la ejecución de una función Lambda. Pueden ser eventos de servicios de AWS, como una carga de archivo en S3, o eventos personalizados generados por aplicaciones. Escenarios comunes de uso de Lambda: Procesamiento de eventos en tiempo real: Lambda es adecuado para procesar eventos en tiempo real, como cambios en la base de datos, cargas de archivos o notificaciones de servicios. Desarrollo de aplicaciones sin servidor: Lambda permite crear aplicaciones sin servidor, donde cada función se enfoca en una tarea específica y se ejecuta de forma independiente. Automatización de tareas: Se puede utilizar Lambda para automatizar tareas repetitivas, como el procesamiento y análisis de datos, la generación de informes o la copia de seguridad de archivos. ¿Qué es CloudFront y por qué es importante? CloudFront es un servicio de distribución de contenido (CDN) que permite entregar contenido web de manera rápida y segura a través de una red de servidores distribuidos globalmente. Es importante porque mejora la experiencia del usuario al reducir la latencia y mejorar el rendimiento al distribuir contenido desde servidores ubicados estratégicamente cerca de los usuarios finales. Características y casos de uso de CloudFront: Distribución global: CloudFront cuenta con una red global de puntos de presencia (PoPs) que permite entregar contenido de manera rápida en cualquier parte del mundo. Caché de contenido estático y dinámico: CloudFront puede almacenar en caché tanto contenido estático (como imágenes y archivos HTML) como contenido dinámico generado por aplicaciones web. Protección contra ataques DDoS: CloudFront proporciona medidas de seguridad integradas, como protección contra ataques de denegación de servicio distribuido (DDoS). Casos de uso: CloudFront se utiliza comúnmente para entregar contenido web estático y dinámico, transmitir contenido multimedia en tiempo real, acelerar sitios web y aplicaciones y mejorar la seguridad de las aplicaciones web. Conclusión: AWS Lambda y CloudFront son servicios esenciales de Amazon Web Services que ofrecen funcionalidades clave en el ámbito de la computación sin servidor y la distribución de contenido. Lambda permite ejecutar código sin servidor en respuesta a eventos específicos, mientras que CloudFront mejora la entrega de contenido web a nivel global, mejorando el rendimiento y la seguridad. Al\nLAMBDA # CloudFronT # ","date":"12 marzo 2023","permalink":"/platform/levels/level5_laravel/08aws/event/","section":"Levels","summary":"AWS Lambda y CloudFront # Introducción: AWS Lambda y CloudFront son dos servicios clave de Amazon Web Services (AWS) que brindan funcionalidades relacionadas con la computación sin servidor y la distribución de contenido a nivel global.","title":"LAMBDA/ CloudFront"},{"content":"Php Introducion Extensiones # En PHP, las extensiones son módulos adicionales que amplían la funcionalidad del lenguaje y proporcionan acceso a características específicas del sistema o servicios externos. Estas extensiones se pueden cargar dinámicamente en tiempo de ejecución para habilitar funcionalidades adicionales en tus aplicaciones PHP.\nPHP viene con un conjunto de extensiones incorporadas que proporcionan funcionalidades básicas, como manejo de cadenas, manipulación de archivos, conexión a bases de datos, entre otras. Sin embargo, también existen muchas extensiones adicionales que se pueden instalar y utilizar según tus necesidades específicas.\nAquí hay algunos ejemplos de extensiones populares en PHP:\nMySQLi: Esta extensión proporciona una interfaz mejorada para interactuar con bases de datos MySQL. Es una mejora del antiguo conjunto de funciones MySQL y ofrece características adicionales, como soporte para transacciones y consultas preparadas.\nPDO: La extensión PDO (PHP Data Objects) ofrece una capa de abstracción de base de datos en PHP. Te permite acceder a diferentes bases de datos mediante una interfaz unificada, lo que facilita la migración entre diferentes sistemas de gestión de bases de datos.\nGD: GD (Graphic Library) es una extensión que permite manipular imágenes en PHP. Proporciona funciones para crear, manipular y renderizar imágenes, como redimensionar, recortar, agregar texto y aplicar efectos.\ncURL: La extensión cURL permite realizar solicitudes HTTP y acceder a recursos remotos. Es útil para interactuar con servicios web, realizar llamadas a APIs y transferir datos a través de protocolos como HTTP, FTP, SMTP, entre otros.\nJSON: La extensión JSON proporciona funciones para trabajar con datos en formato JSON. Permite codificar y decodificar datos en JSON, lo que es útil para la comunicación con servicios web que utilizan este formato.\nEstos son solo algunos ejemplos, y existen muchas más extensiones disponibles para cubrir una amplia gama de necesidades, como encriptación, generación de PDF, manejo de XML, integración con redes sociales, entre otros.\nPuedes consultar la documentación oficial de PHP para obtener más información sobre las extensiones disponibles y cómo instalarlas y utilizarlas en tus proyectos.\nSintaxis PHP # La sintaxis de PHP es bastante sencilla y similar a otros lenguajes de programación. Aquí tienes algunos elementos básicos de la sintaxis de PHP:\nEtiquetas de apertura y cierre: Para iniciar el código PHP, se utiliza la etiqueta \u0026lt;?php y para cerrarlo se utiliza la etiqueta ?\u0026gt;. Dentro de estas etiquetas se escribe el código PHP. \u0026lt;?php // Código PHP aquí ?\u0026gt; Comentarios: Puedes agregar comentarios en tu código para hacerlo más legible. Los comentarios en PHP se pueden hacer de dos formas: de una sola línea utilizando // o en varias líneas usando /* */. // Esto es un comentario de una sola línea /* Esto es un comentario de múltiples líneas */ Variables: En PHP, las variables se declaran utilizando el símbolo de $ seguido del nombre de la variable. No es necesario declarar el tipo de dato. $nombre = \u0026#34;Juan\u0026#34;; $edad = 25; Impresión de texto: Puedes imprimir texto en pantalla utilizando la función echo o print. Ambas funciones se utilizan de manera similar. echo \u0026#34;Hola, mundo!\u0026#34;; print \u0026#34;Hola, mundo!\u0026#34;; Concatenación de cadenas: Para concatenar cadenas de texto, se utiliza el operador .. $nombre = \u0026#34;Juan\u0026#34;; $apellido = \u0026#34;Pérez\u0026#34;; $nombreCompleto = $nombre . \u0026#34; \u0026#34; . $apellido; echo $nombreCompleto; // Imprime \u0026#34;Juan Pérez\u0026#34; Estructuras de control: PHP proporciona estructuras de control como if, else, elseif, for, while, do-while, switch, entre otros, para controlar el flujo de ejecución del programa. $edad = 20; if ($edad \u0026gt;= 18) { echo \u0026#34;Eres mayor de edad\u0026#34;; } else { echo \u0026#34;Eres menor de edad\u0026#34;; } Funciones: Puedes definir y llamar funciones en PHP. function saludar($nombre) { echo \u0026#34;Hola, \u0026#34; . $nombre; } saludar(\u0026#34;Juan\u0026#34;); // Imprime \u0026#34;Hola, Juan\u0026#34; Estos son solo algunos ejemplos de la sintaxis básica de PHP. El lenguaje ofrece muchas más características, como arrays, bucles más avanzados, manejo de excepciones, clases y objetos, entre otros. Puedes consultar la documentación oficial de PHP para obtener más información sobre la sintaxis y las características del lenguaje.\nVariables y operadores PHP # En PHP, las variables se utilizan para almacenar y manipular datos. Aquí tienes ejemplos de cómo declarar variables y los diferentes tipos de operadores disponibles:\nVariables: En PHP, las variables se declaran utilizando el símbolo de $ seguido del nombre de la variable. No es necesario especificar el tipo de datos al declarar una variable, ya que PHP es un lenguaje de programación de tipo débil.\n$nombre = \u0026#34;Juan\u0026#34;; // Variable de tipo string $edad = 25; // Variable de tipo entero $precio = 10.5; // Variable de tipo float $esEstudiante = true; // Variable de tipo boolean Operadores aritméticos: PHP proporciona operadores aritméticos para realizar operaciones matemáticas básicas.\n$a = 10; $b = 5; $suma = $a + $b; // Suma: 15 $resta = $a - $b; // Resta: 5 $producto = $a * $b; // Multiplicación: 50 $division = $a / $b; // División: 2 $modulo = $a % $b; // Módulo: 0 (resto de la división) $exponente = $a ** $b; // Exponente: 100000 Operadores de asignación: Los operadores de asignación se utilizan para asignar valores a variables.\n$a = 10; $b = 5; $c = $a; // Asignación: $c tiene el valor de $a (10) $a += $b; // Suma y asignación: $a se incrementa en $b (15) $a -= $b; // Resta y asignación: $a se decrementa en $b (10) $a *= $b; // Multiplicación y asignación: $a se multiplica por $b (50) $a /= $b; // División y asignación: $a se divide por $b (2) $a %= $b; // Módulo y asignación: $a se asigna al resto de la división por $b (0) Operadores de concatenación: En PHP, el operador de concatenación . se utiliza para unir cadenas de texto.\n$nombre = \u0026#34;Juan\u0026#34;; $apellido = \u0026#34;Pérez\u0026#34;; $nombreCompleto = $nombre . \u0026#34; \u0026#34; . $apellido; // Concatenación de cadenas Operadores de comparación: Los operadores de comparación se utilizan para comparar valores y devuelven un resultado booleano.\n$a = 10; $b = 5; $igual = $a == $b; // Igualdad: false $diferente = $a != $b; // Desigualdad: true $mayor = $a \u0026gt; $b; // Mayor que: true $menor = $a \u0026lt; $b; // Menor que: false $mayorIgual = $a \u0026gt;= $b; // Mayor o igual que: true $menorIgual = $a \u0026lt;= $b; // Menor o igual que: false Estos son solo algunos ejemplos de variables y operadores en PHP. El lenguaje ofrece una amplia gama de operadores y funciones incorporadas que permiten realizar diversas operaciones y manipulaciones de datos. Puedes consultar la documentación\nCondicionales y Ciclos PHP # En PHP, puedes utilizar estructuras de control como condicionales y ciclos para controlar el flujo de ejecución de tu código. Aquí tienes ejemplos de cómo utilizar condicionales (if-else) y ciclos (for, while, do-while) en PHP:\nCondicionales (if-else): Las estructuras condicionales te permiten ejecutar diferentes bloques de código según una condición.\n$edad = 18; if ($edad \u0026gt;= 18) { echo \u0026#34;Eres mayor de edad.\u0026#34;; } else { echo \u0026#34;Eres menor de edad.\u0026#34;; } También puedes utilizar la estructura \u0026ldquo;elseif\u0026rdquo; para evaluar múltiples condiciones:\n$edad = 25; if ($edad \u0026lt; 18) { echo \u0026#34;Eres menor de edad.\u0026#34;; } elseif ($edad \u0026gt;= 18 \u0026amp;\u0026amp; $edad \u0026lt; 65) { echo \u0026#34;Eres adulto.\u0026#34;; } else { echo \u0026#34;Eres mayor de edad.\u0026#34;; } Ciclo for: El ciclo \u0026ldquo;for\u0026rdquo; te permite ejecutar un bloque de código un número específico de veces.\nfor ($i = 1; $i \u0026lt;= 5; $i++) { echo $i . \u0026#34; \u0026#34;; } // Salida: 1 2 3 4 5 Ciclo while: El ciclo \u0026ldquo;while\u0026rdquo; se ejecuta mientras una condición sea verdadera.\n$contador = 1; while ($contador \u0026lt;= 5) { echo $contador . \u0026#34; \u0026#34;; $contador++; } // Salida: 1 2 3 4 5 Ciclo do-while: El ciclo \u0026ldquo;do-while\u0026rdquo; se ejecuta al menos una vez y luego se repite mientras una condición sea verdadera.\n$contador = 1; do { echo $contador . \u0026#34; \u0026#34;; $contador++; } while ($contador \u0026lt;= 5); // Salida: 1 2 3 4 5 Ciclo foreach: El ciclo \u0026ldquo;foreach\u0026rdquo; se utiliza para iterar sobre elementos de un array o una colección.\n$nombres = [\u0026#34;Juan\u0026#34;, \u0026#34;María\u0026#34;, \u0026#34;Carlos\u0026#34;]; foreach ($nombres as $nombre) { echo $nombre . \u0026#34; \u0026#34;; } // Salida: Juan María Carlos Estos son solo ejemplos básicos de cómo utilizar condicionales y ciclos en PHP. Puedes combinar estas estructuras de control y utilizar operadores lógicos para construir lógica más compleja en tu código. Además, PHP también ofrece otras estructuras de control, como \u0026ldquo;switch\u0026rdquo; para casos múltiples y \u0026ldquo;break\u0026rdquo; para romper ciclos, que puedes utilizar según tus necesidades.\nSintaxis PHP # Variables y operadores PHP # Condicionales y Ciclos PHP # ","date":"12 marzo 2023","permalink":"/platform/levels/level4_php/03php/event/","section":"Levels","summary":"Php Introducion Extensiones # En PHP, las extensiones son módulos adicionales que amplían la funcionalidad del lenguaje y proporcionan acceso a características específicas del sistema o servicios externos.","title":"Php Introducion Extensiones"},{"content":"Paso 1: # Vamos a crear una ficha de empleado que contiene:\nen un elemento h1 el nombre en un elemento h2 con el cargo Crear un componente ‘Empleado’ que incorpore esos elementos. Ponemos valores de ejemplo. Ese componente lo devolvemos en App\nPaso 2: # Modifica el componente Empleado para que reciba los datos del empleado como propiedades y los muestre en el App\nPaso 3: # Ponemos tres empleados con diferentes nombres y cargos en la App.\nAñade estilos CSS para que se muestren en forma de ficha.\nPaso 4: # Añade imagenes que se pasen como propiedad, estas imagenes deben estar dentro de tu proyecto. Puedes crear una carpeta images dentro de tu carpeta src.\nEntrega # Recuerda subir un archivo PDF con los pantallazos de tu componente y el renderizado en el navegador.\n","date":"12 marzo 2023","permalink":"/platform/levels/level3_react/dia03/pc_3/","section":"Levels","summary":"Paso 1: # Vamos a crear una ficha de empleado que contiene:","title":"Practica Calificada 3"},{"content":"Tarea: Lista de tareas # Descripción: # Crea una aplicación de lista de tareas donde los usuarios puedan agregar nuevas tareas, marcarlas como completadas y eliminarlas. Utiliza React y el hook useState para implementar la funcionalidad de la lista de tareas.\nInstrucciones: # Configura un nuevo proyecto de React utilizando vite (npm create vite@latest).\nCrea un nuevo componente llamado TodoApp que será el componente principal de la aplicación.\nEn el componente TodoApp, utiliza el hook useState para crear una variable de estado llamada todos. Inicialízala como un array vacío.\nCrea un formulario en el componente TodoApp que permita a los usuarios agregar nuevas tareas. El formulario debe contener un campo de texto para ingresar la tarea y un botón para agregarla.\nAl enviar el formulario, utiliza el hook useState para actualizar el estado de todos y agregar la nueva tarea al array existente. Asegúrate de incluir un identificador único para cada tarea agregada.\nMuestra la lista de tareas en la interfaz. Para cada tarea, muestra el texto de la tarea y un botón para marcarla como completada.\nAl hacer clic en el botón de completar tarea, utiliza el hook useState para actualizar el estado de la tarea correspondiente y marcarla como completada.\nImplementa estilos CSS para mejorar la apariencia de la lista de tareas. Puedes utilizar CSS puro o un framework como Bootstrap para esto.\nPrueba la aplicación para asegurarte de que las tareas se agreguen correctamente y se marquen como completadas.\nReto Extra (Opcional) # Añade la opcion de poder eliminar tareas de la lista.\nEntrega # Recuerda subir un archivo PDF con los pantallazos de tu componente y el renderizado en el navegador.\n","date":"12 marzo 2023","permalink":"/platform/levels/level3_react/dia04/pc_4/","section":"Levels","summary":"Tarea: Lista de tareas # Descripción: # Crea una aplicación de lista de tareas donde los usuarios puedan agregar nuevas tareas, marcarlas como completadas y eliminarlas.","title":"Practica Calificada 4"},{"content":"Objetivo del día: # El objetivo de este día es agregar funciones de búsqueda y filtrado a la aplicación de lista de pokemons para permitir a los usuarios buscar pokemons por nombre y filtrarlos por tipo, habilidades u otros criterios.\nTemas a cubrir: # Búsqueda de Pokemons:\nImplementar una función de búsqueda para encontrar pokemons por nombre. Actualizar la lista mostrada en tiempo real mientras se escribe en el campo de búsqueda. Filtrado de Pokemons:\nCrear filtros para clasificar los pokemons por tipo, habilidades, etc. Actualizar la lista de pokemons según los filtros seleccionados. Estilización y Mejoras de la Aplicación:\nAñadir estilos y mejorar la apariencia de la aplicación utilizando CSS o bibliotecas de estilos como Material-UI. Añadir interacciones y animaciones para mejorar la experiencia del usuario. Actividades prácticas: # Implementar la Búsqueda de Pokemons:\nAgrega un campo de búsqueda en la interfaz de usuario. Implementa una función para buscar pokemons por nombre utilizando el valor ingresado en el campo de búsqueda. Actualiza la lista mostrada en tiempo real a medida que se escribe en el campo de búsqueda. Agregar Filtros para el Filtrado de Pokemons:\nCrea controles de selección o cajas de verificación para filtrar pokemons por tipo, habilidades u otros criterios. Implementa una función para aplicar los filtros seleccionados a la lista de pokemons. Estilizar la Aplicación:\nAgrega estilos CSS para mejorar la apariencia de la aplicación. Utiliza técnicas de diseño responsivo para que la aplicación se vea bien en diferentes dispositivos. Añadir Interacciones y Animaciones:\nAgrega efectos de transición o animaciones para mejorar la experiencia del usuario al navegar y filtrar los pokemons. Desafíos opcionales para repaso: # Implementar Ordenamiento de Pokemons:\nAgrega controles para ordenar la lista de pokemons por nombre, número u otros atributos. Implementa una función para ordenar los pokemons según el criterio seleccionado. Añadir Paginación Avanzada:\nMejora la paginación para mostrar un número limitado de pokemons por página y permitir al usuario navegar entre páginas. Resumen del día: # En el día 3, hemos agregado funciones de búsqueda y filtrado a la aplicación de lista de pokemons. Los usuarios ahora pueden buscar pokemons por nombre y filtrarlos por tipo, habilidades u otros criterios. Hemos mejorado la apariencia de la aplicación con estilos CSS y hemos añadido interacciones y animaciones para mejorar la experiencia del usuario. Además, hemos explorado desafíos opcionales para seguir expandiendo la funcionalidad de la aplicación. ¡La aplicación ahora está completa y lista para que los usuarios disfruten explorando el mundo de los pokemons! Con estos tres días de desarrollo, has aprendido a trabajar con la Poke API, manejar estado con React Hooks, y mejorar la experiencia de usuario mediante la búsqueda, filtrado y estilización de la aplicación. ¡Felicidades por completar este proyecto!\nRecursos # https://keepcoding.io/blog/crear-un-filtro-de-busqueda-en-react/\n","date":"12 marzo 2023","permalink":"/platform/nivel2/17/","section":"Nivel2s","summary":"Objetivo del día: # El objetivo de este día es agregar funciones de búsqueda y filtrado a la aplicación de lista de pokemons para permitir a los usuarios buscar pokemons por nombre y filtrarlos por tipo, habilidades u otros criterios.","title":"Búsqueda y Filtrado de Pokemons"},{"content":"Objetivo del día: # El objetivo de este día es aprender sobre el ciclo de vida de los componentes en React y cómo utilizar los métodos del ciclo de vida para agregar funcionalidades en diferentes etapas del ciclo de vida. Aprenderemos cómo trabajar con componentes de clase y cómo migrar hacia componentes funcionales utilizando React Hooks.\nTemas a cubrir: # Introducción al Ciclo de Vida de los Componentes:\n¿Qué es el ciclo de vida de un componente en React? Los diferentes métodos del ciclo de vida y sus propósitos. Componentes de Clase:\nCreación de componentes de clase en React. Los métodos del ciclo de vida componentDidMount, componentDidUpdate, y componentWillUnmount. Ejemplos prácticos de uso de estos métodos en componentes de clase. Migración a Componentes Funcionales con Hooks:\nIntroducción a los React Hooks y sus ventajas. Cómo migrar componentes de clase a componentes funcionales utilizando React Hooks como useEffect. Ejemplos prácticos de migración de componentes de clase a componentes funcionales. Supongamos que tenemos un componente de clase CounterClass que muestra un contador y permite al usuario incrementarlo o decrementarlo. A continuación, mostraremos cómo migrarlo a un componente funcional utilizando React Hooks, específicamente useState y useEffect.\nComponente de Clase CounterClass:\nimport React, { Component } from \u0026#39;react\u0026#39;; class CounterClass extends Component { state = { count: 0, }; componentDidMount() { document.title = `Contador: ${this.state.count}`; } componentDidUpdate() { document.title = `Contador: ${this.state.count}`; } componentWillUnmount() { document.title = \u0026#39;React App\u0026#39;; } increment = () =\u0026gt; { this.setState({ count: this.state.count + 1 }); }; decrement = () =\u0026gt; { this.setState({ count: this.state.count - 1 }); }; render() { const { count } = this.state; return ( \u0026lt;div\u0026gt; \u0026lt;h1\u0026gt;Contador: {count}\u0026lt;/h1\u0026gt; \u0026lt;button onClick={this.increment}\u0026gt;Incrementar\u0026lt;/button\u0026gt; \u0026lt;button onClick={this.decrement}\u0026gt;Decrementar\u0026lt;/button\u0026gt; \u0026lt;/div\u0026gt; ); } } export default CounterClass; Componente Funcional con React Hooks CounterFunctional:\nimport React, { useState, useEffect } from \u0026#39;react\u0026#39;; const CounterFunctional = () =\u0026gt; { const [count, setCount] = useState(0); useEffect(() =\u0026gt; { document.title = `Contador: ${count}`; return () =\u0026gt; { document.title = \u0026#39;React App\u0026#39;; }; }, [count]); const increment = () =\u0026gt; { setCount(count + 1); }; const decrement = () =\u0026gt; { setCount(count - 1); }; return ( \u0026lt;div\u0026gt; \u0026lt;h1\u0026gt;Contador: {count}\u0026lt;/h1\u0026gt; \u0026lt;button onClick={increment}\u0026gt;Incrementar\u0026lt;/button\u0026gt; \u0026lt;button onClick={decrement}\u0026gt;Decrementar\u0026lt;/button\u0026gt; \u0026lt;/div\u0026gt; ); }; export default CounterFunctional; Explicación del código:\nEn el componente de clase CounterClass, hemos declarado el estado count utilizando this.state y los métodos de ciclo de vida (componentDidMount, componentDidUpdate, componentWillUnmount) para actualizar el título de la página según el valor del contador. En el componente funcional CounterFunctional, hemos utilizado useState para declarar el estado count y useEffect para replicar el comportamiento de los métodos componentDidMount y componentDidUpdate. Utilizamos return en useEffect para especificar una función de limpieza que se ejecutará al desmontar el componente, que restaurará el título de la página al valor original. Como se puede ver, el código del componente funcional es mucho más conciso y fácil de entender que el componente de clase. Con los React Hooks, podemos manejar el estado y el ciclo de vida de manera más sencilla en componentes funcionales.\nCon este ejemplo, hemos migrado con éxito el componente de clase CounterClass a un componente funcional con React Hooks CounterFunctional. ¡Espero que este ejemplo te ayude a comprender cómo migrar tus componentes de clase a componentes funcionales con React Hooks en tus aplicaciones de React!\nActividades prácticas: # Utilizar los Métodos del Ciclo de Vida en Componentes de Clase:\nCrea un componente de clase que utilice los métodos del ciclo de vida componentDidMount, componentDidUpdate, y componentWillUnmount. En cada método, agrega código para mostrar mensajes o realizar acciones para demostrar su funcionamiento en diferentes etapas del ciclo de vida. Migrar a Componentes Funcionales con React Hooks:\nToma el componente de clase que has creado anteriormente y migra hacia un componente funcional utilizando React Hooks. Utiliza el hook useEffect para replicar el comportamiento de los métodos del ciclo de vida en el componente funcional. Desafíos opcionales para repaso: # Más Métodos del Ciclo de Vida:\nInvestiga y utiliza otros métodos del ciclo de vida como componentWillMount, shouldComponentUpdate, etc. Compara su funcionamiento con los métodos que ya has utilizado. Componentes HOC y Render Props:\nAprende sobre componentes HOC (Higher Order Components) y Render Props, y cómo pueden ser utilizados como alternativas para gestionar comportamientos compartidos en React. Optimización de Rendimiento:\nInvestiga técnicas para optimizar el rendimiento de tus componentes en React, como memoización, lazy loading y suspense. Resumen del día: # En el día 7, hemos aprendido sobre el ciclo de vida de los componentes en React y cómo utilizar los métodos del ciclo de vida para agregar funcionalidades en diferentes etapas del ciclo. Hemos trabajado con componentes de clase y hemos migrado hacia componentes funcionales utilizando React Hooks como useEffect. También hemos explorado desafíos adicionales relacionados con el ciclo de vida y la optimización del rendimiento en React.\nRecuerda que comprender el ciclo de vida de los componentes es esencial para trabajar con React de manera efectiva y optimizar el rendimiento de tus aplicaciones. Continúa practicando y experimentando con los diferentes métodos y técnicas de ciclo de vida en tus proyectos de React. ¡Sigue adelante y sigue construyendo con React!\nRecursos # https://legacy.reactjs.org/docs/state-and-lifecycle.html\nhttps://es.legacy.reactjs.org/docs/hooks-overview.html\n","date":"12 marzo 2023","permalink":"/platform/nivel2/7/","section":"Nivel2s","summary":"Objetivo del día: # El objetivo de este día es aprender sobre el ciclo de vida de los componentes en React y cómo utilizar los métodos del ciclo de vida para agregar funcionalidades en diferentes etapas del ciclo de vida.","title":"Ciclo de Vida de los Componentes en React"},{"content":"Un componente simple # Los componentes de React implementan un método llamado render() que recibe datos de entrada y retorna qué mostrar. Este ejemplo utiliza una sintaxis similar a XML llamada JSX. Puedes acceder a los datos de entrada que se pasan al componente mediante render() a través de this.props.\nJSX es opcional y no es requerido para usar React. Prueba Babel REPL para ver el código JavaScript sin procesar la compilación de JSX.\nclass HelloMessage extends React.Component { render() { return \u0026lt;div\u0026gt;Hola {this.props.name}\u0026lt;/div\u0026gt;; } } root.render(\u0026lt;HelloMessage name=\u0026#34;Taylor\u0026#34; /\u0026gt;); Resultado:\nHola Taylor Un componente con estado # Además de obtener datos de entrada (a los que accedes a través de this.props), un componente puede tener datos en su estado interno (a los que accedes a través de this.state). Cuando los datos del estado de un componente cambian, se vuelve a invocar render con los nuevos valores en this.state.\nclass Timer extends React.Component { constructor(props) { super(props); this.state = { seconds: 0 }; } tick() { this.setState(state =\u0026gt; ({ seconds: state.seconds + 1 })); } componentDidMount() { this.interval = setInterval(() =\u0026gt; this.tick(), 1000); } componentWillUnmount() { clearInterval(this.interval); } render() { return ( \u0026lt;div\u0026gt; Segundos: {this.state.seconds} \u0026lt;/div\u0026gt; ); } } root.render(\u0026lt;Timer /\u0026gt;); Resultado:\nSegundos: 5980 Una aplicación # Usando props y state, podemos integrar todo en una pequeña aplicación de tareas pendientes. Este ejemplo usa state para tener un control de la lista actual de objetos así como el texto que el usuario ha ingresado. A pesar de que los manejadores de eventos parecen ser renderizados en línea, serán recolectados e implementados usando delegación de eventos.\nclass TodoApp extends React.Component { constructor(props) { super(props); this.state = { items: [], text: \u0026#39;\u0026#39; }; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); } render() { return ( \u0026lt;div\u0026gt; \u0026lt;h3\u0026gt;Tareas pendientes\u0026lt;/h3\u0026gt; \u0026lt;TodoList items={this.state.items} /\u0026gt; \u0026lt;form onSubmit={this.handleSubmit}\u0026gt; \u0026lt;label htmlFor=\u0026#34;new-todo\u0026#34;\u0026gt; ¿Qué se necesita hacer? \u0026lt;/label\u0026gt; \u0026lt;input id=\u0026#34;new-todo\u0026#34; onChange={this.handleChange} value={this.state.text} /\u0026gt; \u0026lt;button\u0026gt; Añadir #{this.state.items.length + 1} \u0026lt;/button\u0026gt; \u0026lt;/form\u0026gt; \u0026lt;/div\u0026gt; ); } handleChange(e) { this.setState({ text: e.target.value }); } handleSubmit(e) { e.preventDefault(); if (this.state.text.length === 0) { return; } const newItem = { text: this.state.text, id: Date.now() }; this.setState(state =\u0026gt; ({ items: state.items.concat(newItem), text: \u0026#39;\u0026#39; })); } } class TodoList extends React.Component { render() { return ( \u0026lt;ul\u0026gt; {this.props.items.map(item =\u0026gt; ( \u0026lt;li key={item.id}\u0026gt;{item.text}\u0026lt;/li\u0026gt; ))} \u0026lt;/ul\u0026gt; ); } } root.render(\u0026lt;TodoApp /\u0026gt;); Un componente usando plugins externos # React permite interactuar con otras bibliotecas y frameworks. Este ejemplo usa remarkable, una biblioteca externa de Markdown, que convierte los valores de \u0026lt; textarea \u0026gt; en tiempo real.\nclass MarkdownEditor extends React.Component { constructor(props) { super(props); this.md = new Remarkable(); this.handleChange = this.handleChange.bind(this); this.state = { value: \u0026#39;¡Hola **mundo**!\u0026#39; }; } handleChange(e) { this.setState({ value: e.target.value }); } getRawMarkup() { return { __html: this.md.render(this.state.value) }; } render() { return ( \u0026lt;div className=\u0026#34;MarkdownEditor\u0026#34;\u0026gt; \u0026lt;h3\u0026gt;Entrada\u0026lt;/h3\u0026gt; \u0026lt;label htmlFor=\u0026#34;markdown-content\u0026#34;\u0026gt; Introduce algún texto en markdown \u0026lt;/label\u0026gt; \u0026lt;textarea id=\u0026#34;markdown-content\u0026#34; onChange={this.handleChange} defaultValue={this.state.value} /\u0026gt; \u0026lt;h3\u0026gt;Salida\u0026lt;/h3\u0026gt; \u0026lt;div className=\u0026#34;content\u0026#34; dangerouslySetInnerHTML={this.getRawMarkup()} /\u0026gt; \u0026lt;/div\u0026gt; ); } } root.render(\u0026lt;MarkdownEditor /\u0026gt;); COMPONENTES # PROPS # ","date":"12 marzo 2023","permalink":"/platform/levels/level3_react/dia02/comp/","section":"Levels","summary":"Un componente simple # Los componentes de React implementan un método llamado render() que recibe datos de entrada y retorna qué mostrar.","title":"Components \u0026 Props"},{"content":"Lección sobre AWS EC2 y EFS # Introducción: Amazon Elastic Compute Cloud (EC2) y Amazon Elastic File System (EFS) son dos servicios clave de Amazon Web Services (AWS) que permiten la creación y administración de instancias de servidores y almacenamiento de archivos escalable en la nube. En esta lección, exploraremos los conceptos fundamentales y las características de EC2 y EFS, así como los casos de uso comunes para estos servicios.\n¿Qué es EC2 y por qué es importante? EC2 es un servicio de computación en la nube que permite lanzar y administrar instancias de servidores virtuales en la infraestructura de AWS. Es importante porque proporciona una manera rápida y flexible de escalar la capacidad de cómputo según las necesidades de una aplicación o negocio. Componentes clave de EC2: Instancias: Representan los servidores virtuales en la nube, que pueden ser de diferentes tipos según los recursos de CPU, memoria, almacenamiento y capacidad de red que ofrecen. AMIs (Amazon Machine Images): Son plantillas preconfiguradas que contienen el sistema operativo y el software necesario para lanzar una instancia de EC2. Grupos de seguridad: Actúan como cortafuegos virtuales y permiten especificar qué tráfico de red está permitido o bloqueado para las instancias. Almacenamiento: EC2 ofrece diferentes opciones de almacenamiento, como volúmenes de almacenamiento en bloque (EBS) y almacenamiento de instancias (almacenamiento temporal). Escenarios comunes de uso de EC2: Alojamiento de aplicaciones web: EC2 permite alojar aplicaciones web en instancias virtuales escalables, adaptando la capacidad de cómputo según la demanda. Procesamiento y análisis de datos: EC2 se utiliza para realizar tareas de procesamiento intensivo, como análisis de big data, aprendizaje automático o renderizado de gráficos. Servidores de bases de datos: EC2 puede alojar servidores de bases de datos como MySQL o PostgreSQL, proporcionando flexibilidad y escalabilidad. ¿Qué es EFS y por qué es importante? EFS es un servicio de almacenamiento de archivos completamente administrado y altamente escalable que se puede utilizar con instancias de EC2. Es importante porque permite compartir archivos entre múltiples instancias de EC2 de manera eficiente y escalable. Características y casos de uso de EFS: Escalabilidad automática: EFS se ajusta automáticamente a medida que aumenta o disminuye el tamaño de los archivos y el número de instancias que acceden al sistema de archivos. Compartición de archivos: Permite compartir archivos entre múltiples instancias de EC2 en una misma región de AWS. Soporte para acceso concurrente: Varios usuarios y aplicaciones pueden acceder simultáneamente a los archivos almacenados en EFS. Casos de uso: EFS es ideal para aplicaciones web de alto tráfico, sistemas de gestión de contenido (CMS), repositorios de código y cualquier otra aplicación que requiera almacenamiento de archivos compartidos y escalables. Conclusión: AWS EC2 y EFS son servicios esenciales de Amazon Web Services que permiten la creación y administración de instancias de servidores y almacenamiento de archivos escalables en la nube. EC2 ofrece flexibilidad y escalabilidad en la computación en la nube, mientras que EFS proporcion\nEC2 # EFS # ","date":"12 marzo 2023","permalink":"/platform/levels/level5_laravel/07aws/comp/","section":"Levels","summary":"Lección sobre AWS EC2 y EFS # Introducción: Amazon Elastic Compute Cloud (EC2) y Amazon Elastic File System (EFS) son dos servicios clave de Amazon Web Services (AWS) que permiten la creación y administración de instancias de servidores y almacenamiento de archivos escalable en la nube.","title":"EC2 / EFS"},{"content":"React, una de las bibliotecas de JavaScript más populares para construir interfaces de usuario, utiliza una sintaxis especial llamada JSX (JavaScript XML) para definir componentes. Además de la representación de elementos visuales, React permite la interacción con estos componentes a través de eventos. Los eventos JSX permiten a los desarrolladores crear aplicaciones interactivas y dinámicas al capturar y responder a acciones del usuario, como clics de botones, cambios de entrada y más. En este artículo, exploraremos en profundidad los eventos JSX en React, analizando su sintaxis, proporcionando ejemplos prácticos y destacando buenas prácticas.\nSintaxis # Los eventos JSX se utilizan para escuchar y manejar acciones realizadas por el usuario en componentes React. La sintaxis general para declarar un evento JSX es la siguiente:\n\u0026lt;elemento onClick={manejadorDeEvento} /\u0026gt; En esta sintaxis, elemento es el componente JSX en el que se desea capturar el evento, y onClick es el nombre del evento que se está escuchando. manejadorDeEvento es una función que se ejecutará cuando ocurra el evento.\nEjemplos # Ejemplo 1: Manejo de clics en un botón # import React, { Component } from \u0026#34;react\u0026#34;; class BotonClic extends Component { handleClick() { alert(\u0026#34;¡Botón clickeado!\u0026#34;); } render() { return \u0026lt;button onClick={this.handleClick}\u0026gt;Clic aquí\u0026lt;/button\u0026gt;; } } export default BotonClic; En este ejemplo, el componente BotonClic muestra un botón en la interfaz de usuario. Cuando el botón se hace clic, se ejecuta la función handleClick, que muestra una alerta en pantalla.\nEjemplo 2: Cambio de Entrada # import React from \u0026#34;react\u0026#34;; function InputControl() { const handleInputChange = (event) =\u0026gt; { console.log(\u0026#34;Texto ingresado:\u0026#34;, event.target.value); }; return ( \u0026lt;div\u0026gt; \u0026lt;input type=\u0026#34;text\u0026#34; onChange={handleInputChange} /\u0026gt; \u0026lt;/div\u0026gt; ); } export default InputControl; En este ejemplo, creamos el componente InputControl que contiene un campo de entrada (\u0026lt;input\u0026gt;). Hemos definido una función llamada handleInputChange que se activará cada vez que cambie el valor del campo de entrada. En esta función, utilizamos event.target.value para acceder al valor actual del campo de entrada y luego lo imprimimos en la consola. Como no estamos manejando ningún estado, simplemente mostramos la información en la consola sin modificar la interfaz de usuario.\nEjemplo 3: Pase del Cursor sobre un Elemento # import React from \u0026#34;react\u0026#34;; function HoverExample() { const handleMouseOver = () =\u0026gt; { console.log(\u0026#34;Cursor encima del elemento\u0026#34;); }; const handleMouseLeave = () =\u0026gt; { console.log(\u0026#34;Cursor fuera del elemento\u0026#34;); }; return ( \u0026lt;div onMouseOver={handleMouseOver} onMouseLeave={handleMouseLeave} style={{ padding: \u0026#34;10px\u0026#34;, border: \u0026#34;1px solid black\u0026#34;, }} \u0026gt; Pasa el cursor aquí \u0026lt;/div\u0026gt; ); } export default HoverExample; En este ejemplo, creamos el componente HoverExample que representa un \u0026lt;div\u0026gt; con un comportamiento de cambio cuando el cursor pasa por encima o se aleja de él. Usamos los eventos onMouseOver y onMouseLeave para capturar estos dos eventos respectivamente. Cuando el cursor entra en el elemento, se llama a la función handleMouseOver, que imprime un mensaje en la consola. Cuando el cursor sale del elemento, se llama a la función handleMouseLeave, que también imprime un mensaje en la consola. Como en los ejemplos anteriores, no estamos manejando estados ni modificando la interfaz de usuario.\nEjemplo 4: Presionar una Tecla # import React from \u0026#34;react\u0026#34;; function KeyPressExample() { const handleKeyPress = (event) =\u0026gt; { console.log(\u0026#34;Tecla presionada:\u0026#34;, event.key); }; return ( \u0026lt;div\u0026gt; \u0026lt;p\u0026gt;Pulsa una tecla:\u0026lt;/p\u0026gt; \u0026lt;input type=\u0026#34;text\u0026#34; onKeyDown={handleKeyPress} style={{ fontSize: \u0026#34;16px\u0026#34;, padding: \u0026#34;5px\u0026#34; }} /\u0026gt; \u0026lt;/div\u0026gt; ); } export default KeyPressExample; En este ejemplo, creamos el componente KeyPressExample que consiste en un campo de entrada (\u0026lt;input\u0026gt;) donde el usuario puede escribir. Utilizamos el evento onKeyDown para capturar cuando una tecla se presiona mientras el campo de entrada está enfocado. Cuando esto sucede, se llama a la función handleKeyPress, que recibe un objeto de evento como argumento. Utilizamos event.key para acceder a la tecla que se ha presionado y luego imprimimos esta información en la consola. Al igual que en los ejemplos anteriores, aquí tampoco manejamos estados ni modificamos la interfaz de usuario.\nBuenas Prácticas y Consideraciones # Al trabajar con eventos JSX en React, es importante tener en cuenta algunas buenas prácticas:\nEnlace de Eventos: Asegúrate de enlazar correctamente los eventos. En React, es común usar funciones de flecha o enlazar métodos en el constructor para garantizar que el contexto sea el correcto.\nEvitar LLamadas Directas a Funciones: No utilices llamadas directas a funciones en el atributo onClick, como onClick={miFuncion()}. En su lugar, pasa la referencia de la función, como onClick={miFuncion}.\nUso de Eventos Sintéticos: React abstrae los eventos nativos del navegador y utiliza eventos sintéticos para mantener la consistencia entre diferentes navegadores. Puedes acceder a propiedades del evento como event.target.value.\nOptimización de Rendimiento: Ten en cuenta que la creación de una función en cada renderización puede afectar al rendimiento. En casos de componentes con muchas renderizaciones, considera memoizar funciones o utilizar componentes de clase con enlace en el constructor.\nRecursos # Documentación # https://es.react.dev/learn/responding-to-events\n","date":"12 marzo 2023","permalink":"/platform/nivel2/3/","section":"Nivel2s","summary":"React, una de las bibliotecas de JavaScript más populares para construir interfaces de usuario, utiliza una sintaxis especial llamada JSX (JavaScript XML) para definir componentes.","title":"Eventos JSX en React"},{"content":"En el vasto ecosistema de React, el hook useEffect se destaca como una herramienta esencial para gestionar el ciclo de vida y la interacción con efectos secundarios en componentes funcionales. Con su flexibilidad y poder, useEffect permite a los desarrolladores trabajar con lógica asincrónica, actualización de componentes y suscripciones a eventos de manera más efectiva. En este artículo, exploraremos en profundidad qué es el hook useEffect, por qué es tan importante, ejemplos prácticos y consejos para aprovechar al máximo esta potente herramienta.\n¿Qué es el hook useEffect? # El hook useEffect es una función proporcionada por React que permite a los componentes funcionales ejecutar efectos secundarios en respuesta a cambios en el estado o en la vida del componente. Estos efectos secundarios pueden incluir peticiones de red, manipulación del DOM, suscripciones a eventos y más. En esencia, useEffect es una manera de incorporar lógica \u0026ldquo;fuera del flujo principal\u0026rdquo; de renderizado de React.\n¿Por qué usar useEffect? # useEffect es fundamental porque nos permite mantener nuestras aplicaciones en un estado sincronizado con el mundo exterior. Sin él, las aplicaciones podrían volverse difíciles de controlar y podrían surgir problemas relacionados con la sincronización de datos y la interacción con APIs externas. useEffect brinda la capacidad de:\nEjecutar lógica después del renderizado y actualizaciones de componentes. Manejar tareas asíncronas de manera más ordenada y legible. Suscribirse a eventos globales o locales, como cambios en el tamaño de la ventana o el teclado. Gestionar la liberación de recursos o suscripciones cuando un componente se desmonta. Ventajas de usar useEffect # Desacoplar Efectos: useEffect separa la lógica de efectos secundarios del flujo de renderizado principal, lo que mejora la legibilidad y el mantenimiento del código.\nManejo Centralizado: Permite centralizar la lógica de efectos secundarios en un solo lugar, lo que facilita la identificación y solución de problemas.\nOptimización de Rendimiento: useEffect permite controlar cuándo se ejecutan los efectos, lo que puede ayudar a optimizar el rendimiento evitando ejecuciones innecesarias.\nCuándo usar useEffect # useEffect es útil en diversas situaciones:\nLlamadas a APIs: Puedes usar useEffect para realizar llamadas a APIs o bases de datos y actualizar el estado en consecuencia.\nManipulación del DOM: Utiliza useEffect para modificar el DOM directamente, como cambiar el título de la página.\nGestión de Eventos: Suscríbete y cancela suscripciones a eventos, como eventos de teclado o de redimensionamiento.\nEfectos Limpieza: Utiliza useEffect para liberar recursos o limpiar efectos cuando un componente se desmonte.\nSintaxis Básica # import React, { useState, useEffect } from \u0026#39;react\u0026#39;; function MyComponent() { const [data, setData] = useState(null); useEffect(() =\u0026gt; { // Lógica de efecto secundario fetchData().then((response) =\u0026gt; { setData(response); }); // Función de limpieza (opcional) return () =\u0026gt; { cleanup(); }; }, []); // Array de dependencias return ( // Renderizado del componente ); } En esta sintaxis básica, useEffect se ejecuta después del primer renderizado y en cada renderizado subsiguiente. El array vacío [] como segundo argumento asegura que el efecto se ejecute solo una vez.\nEjemplos de Uso de useEffect # Ejemplo 1: Llamada sencilla a una API # useEffect(() =\u0026gt; { fetch(\u0026#34;https://api.example.com/data\u0026#34;) .then((response) =\u0026gt; response.json()) .then((data) =\u0026gt; { setData(data); }); }, []); En este ejemplo, usamos useEffect para realizar una llamada a una API y actualizar el estado data.\nEjemplo 2: Suscripción a Eventos # useEffect(() =\u0026gt; { const handleResize = () =\u0026gt; { setWindowWidth(window.innerWidth); }; window.addEventListener(\u0026#34;resize\u0026#34;, handleResize); return () =\u0026gt; { window.removeEventListener(\u0026#34;resize\u0026#34;, handleResize); }; }, []); Aquí, usamos useEffect para suscribirnos al evento de cambio de tamaño de ventana y actualizar el estado windowWidth.\nEl hook useEffect es una pieza clave en el arsenal de herramientas de cualquier desarrollador de React. Facilita la gestión de efectos secundarios, la actualización de componentes y la interacción con el mundo exterior. A medida que dominas su uso, estarás mejor equipado para construir aplicaciones más eficientes, robustas y con un código más limpio. Recuerda adaptar el uso de useEffect según las necesidades específicas de tus proyectos, y aprovecha su versatilidad para crear experiencias de usuario sorprendentes y receptivas.\nRecursos # https://es.react.dev/reference/react/useEffect\n","date":"12 marzo 2023","permalink":"/platform/nivel2/6/","section":"Nivel2s","summary":"En el vasto ecosistema de React, el hook useEffect se destaca como una herramienta esencial para gestionar el ciclo de vida y la interacción con efectos secundarios en componentes funcionales.","title":"Hooks en React: useEffect"},{"content":"En el vasto ecosistema de React, el hook useEffect se destaca como una herramienta esencial para gestionar el ciclo de vida y la interacción con efectos secundarios en componentes funcionales. Con su flexibilidad y poder, useEffect permite a los desarrolladores trabajar con lógica asincrónica, actualización de componentes y suscripciones a eventos de manera más efectiva. En este artículo, exploraremos en profundidad qué es el hook useEffect, por qué es tan importante, ejemplos prácticos y consejos para aprovechar al máximo esta potente herramienta.\n¿Qué es el hook useEffect? # El hook useEffect es una función proporcionada por React que permite a los componentes funcionales ejecutar efectos secundarios en respuesta a cambios en el estado o en la vida del componente. Estos efectos secundarios pueden incluir peticiones de red, manipulación del DOM, suscripciones a eventos y más. En esencia, useEffect es una manera de incorporar lógica \u0026ldquo;fuera del flujo principal\u0026rdquo; de renderizado de React.\n¿Por qué usar useEffect? # useEffect es fundamental porque nos permite mantener nuestras aplicaciones en un estado sincronizado con el mundo exterior. Sin él, las aplicaciones podrían volverse difíciles de controlar y podrían surgir problemas relacionados con la sincronización de datos y la interacción con APIs externas. useEffect brinda la capacidad de:\nEjecutar lógica después del renderizado y actualizaciones de componentes. Manejar tareas asíncronas de manera más ordenada y legible. Suscribirse a eventos globales o locales, como cambios en el tamaño de la ventana o el teclado. Gestionar la liberación de recursos o suscripciones cuando un componente se desmonta. Ventajas de usar useEffect # Desacoplar Efectos: useEffect separa la lógica de efectos secundarios del flujo de renderizado principal, lo que mejora la legibilidad y el mantenimiento del código.\nManejo Centralizado: Permite centralizar la lógica de efectos secundarios en un solo lugar, lo que facilita la identificación y solución de problemas.\nOptimización de Rendimiento: useEffect permite controlar cuándo se ejecutan los efectos, lo que puede ayudar a optimizar el rendimiento evitando ejecuciones innecesarias.\nCuándo usar useEffect # useEffect es útil en diversas situaciones:\nLlamadas a APIs: Puedes usar useEffect para realizar llamadas a APIs o bases de datos y actualizar el estado en consecuencia.\nManipulación del DOM: Utiliza useEffect para modificar el DOM directamente, como cambiar el título de la página.\nGestión de Eventos: Suscríbete y cancela suscripciones a eventos, como eventos de teclado o de redimensionamiento.\nEfectos Limpieza: Utiliza useEffect para liberar recursos o limpiar efectos cuando un componente se desmonte.\nSintaxis Básica # import React, { useState, useEffect } from \u0026#39;react\u0026#39;; function MyComponent() { const [data, setData] = useState(null); useEffect(() =\u0026gt; { // Lógica de efecto secundario fetchData().then((response) =\u0026gt; { setData(response); }); // Función de limpieza (opcional) return () =\u0026gt; { cleanup(); }; }, []); // Array de dependencias return ( // Renderizado del componente ); } En esta sintaxis básica, useEffect se ejecuta después del primer renderizado y en cada renderizado subsiguiente. El array vacío [] como segundo argumento asegura que el efecto se ejecute solo una vez.\nEjemplos de Uso de useEffect # Ejemplo 1: Llamada sencilla a una API # useEffect(() =\u0026gt; { fetch(\u0026#34;https://api.example.com/data\u0026#34;) .then((response) =\u0026gt; response.json()) .then((data) =\u0026gt; { setData(data); }); }, []); En este ejemplo, usamos useEffect para realizar una llamada a una API y actualizar el estado data.\nEjemplo 2: Suscripción a Eventos # useEffect(() =\u0026gt; { const handleResize = () =\u0026gt; { setWindowWidth(window.innerWidth); }; window.addEventListener(\u0026#34;resize\u0026#34;, handleResize); return () =\u0026gt; { window.removeEventListener(\u0026#34;resize\u0026#34;, handleResize); }; }, []); Aquí, usamos useEffect para suscribirnos al evento de cambio de tamaño de ventana y actualizar el estado windowWidth.\nEl hook useEffect es una pieza clave en el arsenal de herramientas de cualquier desarrollador de React. Facilita la gestión de efectos secundarios, la actualización de componentes y la interacción con el mundo exterior. A medida que dominas su uso, estarás mejor equipado para construir aplicaciones más eficientes, robustas y con un código más limpio. Recuerda adaptar el uso de useEffect según las necesidades específicas de tus proyectos, y aprovecha su versatilidad para crear experiencias de usuario sorprendentes y receptivas.\nRecursos # https://es.react.dev/reference/react/useEffect\n","date":"12 marzo 2023","permalink":"/platform/react/useeffect/intro/","section":"Reacts","summary":"En el vasto ecosistema de React, el hook useEffect se destaca como una herramienta esencial para gestionar el ciclo de vida y la interacción con efectos secundarios en componentes funcionales.","title":"Hooks en React: useEffect"},{"content":"Objetivo del día: # El objetivo de este día es familiarizarse con la Poke API, una API que proporciona datos sobre los pokemons, y configurar el proyecto de React para comenzar a trabajar en la aplicación.\nTemas a cubrir: # Introducción a la Poke API:\n¿Qué es la Poke API? Endpoints disponibles y tipos de datos que proporciona. Cómo obtener una clave de acceso (API key) para acceder a la Poke API. Configuración del Proyecto de React:\nCreación de un nuevo proyecto de React utilizando Create React App. Configuración de la estructura de carpetas para la aplicación. Instalación de Dependencias:\nInstalación de Axios para hacer peticiones HTTP a la Poke API. Otras dependencias necesarias según las necesidades de la aplicación. Actividades prácticas: # Crear un nuevo proyecto de React:\nUtiliza Create React App para crear un nuevo proyecto de React. Abre el proyecto en tu editor de código y explora la estructura de carpetas. Obtener una clave de acceso a la Poke API:\nRegístrate en el sitio web de la Poke API para obtener una clave de acceso. Lee la documentación para entender cómo hacer peticiones a la API utilizando la clave de acceso. Configurar Axios para hacer peticiones HTTP:\nInstala Axios en tu proyecto utilizando npm o yarn. Crea un archivo de configuración para Axios y establece la URL base de la Poke API. Hacer una petición de prueba a la Poke API:\nUtiliza Axios para hacer una petición GET a la Poke API para obtener información de un pokemon. Muestra los datos obtenidos en la consola para asegurarte de que la petición fue exitosa. Desafíos opcionales para repaso: # Explorar otros endpoints de la Poke API:\nLee la documentación de la Poke API para explorar otros endpoints y datos disponibles (por ejemplo, información de tipos de pokemon, habilidades, etc.). Agregar estilos básicos a la aplicación:\nAgrega un poco de CSS para mejorar la apariencia de la aplicación. Utiliza algún componente de diseño como Material-UI para facilitar la estilización. Resumen del día: # En este día, hemos introducido la Poke API y nos hemos familiarizado con los datos que proporciona. Hemos configurado el proyecto de React utilizando Create React App y hemos instalado las dependencias necesarias, incluido Axios para hacer peticiones HTTP a la Poke API. Hemos hecho una petición de prueba para asegurarnos de que podemos obtener datos de la API. ¡Estamos listos para comenzar a trabajar en la aplicación para mostrar la lista de pokemons y sus detalles!\nRecursos # https://pokeapi.co/\nhttps://axios-http.com/es/docs/intro\nhttps://axios-http.com/es/docs/example\n","date":"12 marzo 2023","permalink":"/platform/nivel2/15/","section":"Nivel2s","summary":"Objetivo del día: # El objetivo de este día es familiarizarse con la Poke API, una API que proporciona datos sobre los pokemons, y configurar el proyecto de React para comenzar a trabajar en la aplicación.","title":"Introducción a la Poke API y Configuración del Proyecto"},{"content":"Objetivo del día: # El objetivo de este día es mostrar la lista de pokemons obtenida desde la Poke API y permitir a los usuarios ver los detalles de un pokemon específico al hacer clic en él.\nTemas a cubrir: # Obtener Datos de la Poke API:\nHacer peticiones a la Poke API para obtener la lista de pokemons. Almacenar la lista de pokemons en el estado de la aplicación. Mostrar la Lista de Pokemons:\nCreación de un componente para mostrar la lista de pokemons. Utilización de la información obtenida para mostrar los nombres y números de los pokemons. Detalles de Pokemon:\nObtener información detallada de un pokemon específico utilizando su ID o nombre. Creación de un componente para mostrar los detalles de un pokemon. Actividades prácticas: # Obtener la Lista de Pokemons:\nUtiliza Axios para hacer una petición GET a la Poke API para obtener la lista de pokemons. Almacena la lista de pokemons en el estado de la aplicación utilizando React Hooks. Mostrar la Lista de Pokemons:\nCrea un componente para mostrar la lista de pokemons. Utiliza el estado de la aplicación para mostrar los nombres y números de los pokemons en la interfaz de usuario. Crear un Enlace a los Detalles de Pokemon:\nAgrega un enlace a cada pokemon en la lista para dirigir al usuario a la página de detalles del pokemon correspondiente. Obtener y Mostrar los Detalles de Pokemon:\nUtiliza Axios para hacer una petición GET a la Poke API para obtener los detalles de un pokemon específico. Crea un componente para mostrar los detalles de un pokemon en la interfaz de usuario. Desafíos opcionales para repaso: # Paginación de la Lista de Pokemons:\nImplementa la paginación para mostrar solo una cantidad limitada de pokemons por página. Permite al usuario navegar entre diferentes páginas de la lista. Agregar imágenes de los Pokemons:\nObten imágenes de los pokemons desde la Poke API y muéstralas junto a sus nombres y números en la lista y los detalles. Resumen del día: # Hemos trabajado en mostrar la lista de pokemons obtenida desde la Poke API. Hemos utilizado React Hooks para almacenar la lista en el estado de la aplicación y hemos creado componentes para mostrar los nombres y números de los pokemons en la interfaz de usuario. Además, hemos implementado la funcionalidad de ver los detalles de un pokemon específico al hacer clic en su enlace. ¡La aplicación ahora muestra una lista completa de pokemons y permite a los usuarios ver detalles adicionales de cada uno de ellos! En el sgt dia, continuaremos mejorando la aplicación agregando funciones de búsqueda y filtrado de pokemons.\nRecursos # https://pokeapi.co/\n","date":"12 marzo 2023","permalink":"/platform/nivel2/16/","section":"Nivel2s","summary":"Objetivo del día: # El objetivo de este día es mostrar la lista de pokemons obtenida desde la Poke API y permitir a los usuarios ver los detalles de un pokemon específico al hacer clic en él.","title":"Listado de Pokemons y Detalles de Pokemon"},{"content":"Objetivo del día: # El objetivo de este día es aprender cómo trabajar con formularios en React y cómo capturar datos ingresados por el usuario. Aprenderemos a manejar eventos, controlar campos de formulario y enviar datos a través de formularios.\nTemas a cubrir: # Introducción a los Formularios en React:\n¿Qué es un formulario en React y por qué son importantes? Los diferentes elementos y atributos utilizados en los formularios. Manejo de Eventos en Formularios:\nCaptura de eventos como onChange y onSubmit. Actualización del estado con los datos ingresados por el usuario. Control de Campos de Formulario:\nControlando los valores de los campos de formulario utilizando el estado. Estableciendo valores iniciales y validaciones. Envío de Datos del Formulario:\nEnviando datos ingresados por el usuario a un servidor o a otras partes de la aplicación. Validación de los datos antes del envío. En este ejemplo, construiremos una simple aplicación de lista de tareas (to-do list) donde los usuarios podrán agregar, marcar como completadas y eliminar tareas. Utilizaremos React para crear componentes funcionales, React Hooks para manejar el estado y formularios, y React Router para navegar entre diferentes vistas.\nApp.js\nimport React, { useState } from \u0026#39;react\u0026#39;; import { BrowserRouter as Router, Route, Switch, Link } from \u0026#39;react-router-dom\u0026#39;; // Componentes import TodoList from \u0026#39;./TodoList\u0026#39;; import AddTodo from \u0026#39;./AddTodo\u0026#39;; import TodoDetail from \u0026#39;./TodoDetail\u0026#39;; const App = () =\u0026gt; { const [todos, setTodos] = useState([]); // Función para agregar una nueva tarea const addTodo = (task) =\u0026gt; { const newTodo = { id: Date.now(), task, completed: false }; setTodos([...todos, newTodo]); }; // Función para marcar una tarea como completada const markCompleted = (id) =\u0026gt; { const updatedTodos = todos.map((todo) =\u0026gt; todo.id === id ? { ...todo, completed: !todo.completed } : todo ); setTodos(updatedTodos); }; // Función para eliminar una tarea const deleteTodo = (id) =\u0026gt; { const updatedTodos = todos.filter((todo) =\u0026gt; todo.id !== id); setTodos(updatedTodos); }; return ( \u0026lt;Router\u0026gt; \u0026lt;div\u0026gt; \u0026lt;nav\u0026gt; \u0026lt;ul\u0026gt; \u0026lt;li\u0026gt; \u0026lt;Link to=\u0026#34;/\u0026#34;\u0026gt;Inicio\u0026lt;/Link\u0026gt; \u0026lt;/li\u0026gt; \u0026lt;li\u0026gt; \u0026lt;Link to=\u0026#34;/add\u0026#34;\u0026gt;Agregar Tarea\u0026lt;/Link\u0026gt; \u0026lt;/li\u0026gt; \u0026lt;/ul\u0026gt; \u0026lt;/nav\u0026gt; \u0026lt;Switch\u0026gt; \u0026lt;Route exact path=\u0026#34;/\u0026#34;\u0026gt; \u0026lt;h2\u0026gt;Lista de Tareas\u0026lt;/h2\u0026gt; \u0026lt;TodoList todos={todos} markCompleted={markCompleted} deleteTodo={deleteTodo} /\u0026gt; \u0026lt;/Route\u0026gt; \u0026lt;Route path=\u0026#34;/add\u0026#34;\u0026gt; \u0026lt;h2\u0026gt;Agregar Nueva Tarea\u0026lt;/h2\u0026gt; \u0026lt;AddTodo addTodo={addTodo} /\u0026gt; \u0026lt;/Route\u0026gt; \u0026lt;Route path=\u0026#34;/todo/:id\u0026#34;\u0026gt; \u0026lt;TodoDetail todos={todos} /\u0026gt; \u0026lt;/Route\u0026gt; \u0026lt;/Switch\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;/Router\u0026gt; ); }; export default App; TodoList.js\nimport React from \u0026#39;react\u0026#39;; import { Link } from \u0026#39;react-router-dom\u0026#39;; const TodoList = ({ todos, markCompleted, deleteTodo }) =\u0026gt; { return ( \u0026lt;ul\u0026gt; {todos.map((todo) =\u0026gt; ( \u0026lt;li key={todo.id}\u0026gt; \u0026lt;input type=\u0026#34;checkbox\u0026#34; checked={todo.completed} onChange={() =\u0026gt; markCompleted(todo.id)} /\u0026gt; \u0026lt;span style={{ textDecoration: todo.completed ? \u0026#39;line-through\u0026#39; : \u0026#39;none\u0026#39; }} \u0026gt; {todo.task} \u0026lt;/span\u0026gt; \u0026lt;button onClick={() =\u0026gt; deleteTodo(todo.id)}\u0026gt;Eliminar\u0026lt;/button\u0026gt; \u0026lt;Link to={`/todo/${todo.id}`}\u0026gt;Detalles\u0026lt;/Link\u0026gt; \u0026lt;/li\u0026gt; ))} \u0026lt;/ul\u0026gt; ); }; export default TodoList; AddTodo.js\nimport React, { useState } from \u0026#39;react\u0026#39;; const AddTodo = ({ addTodo }) =\u0026gt; { const [task, setTask] = useState(\u0026#39;\u0026#39;); const handleSubmit = (e) =\u0026gt; { e.preventDefault(); if (task.trim() !== \u0026#39;\u0026#39;) { addTodo(task); setTask(\u0026#39;\u0026#39;); } }; return ( \u0026lt;form onSubmit={handleSubmit}\u0026gt; \u0026lt;input type=\u0026#34;text\u0026#34; value={task} onChange={(e) =\u0026gt; setTask(e.target.value)} placeholder=\u0026#34;Ingrese una nueva tarea\u0026#34; /\u0026gt; \u0026lt;button type=\u0026#34;submit\u0026#34;\u0026gt;Agregar\u0026lt;/button\u0026gt; \u0026lt;/form\u0026gt; ); }; export default AddTodo; TodoDetail.js\nimport React from \u0026#39;react\u0026#39;; import { useParams } from \u0026#39;react-router-dom\u0026#39;; const TodoDetail = ({ todos }) =\u0026gt; { const { id } = useParams(); const todo = todos.find((todo) =\u0026gt; todo.id === parseInt(id)); if (!todo) { return \u0026lt;h2\u0026gt;Tarea no encontrada\u0026lt;/h2\u0026gt;; } return ( \u0026lt;div\u0026gt; \u0026lt;h2\u0026gt;Detalles de la Tarea\u0026lt;/h2\u0026gt; \u0026lt;p\u0026gt;ID: {todo.id}\u0026lt;/p\u0026gt; \u0026lt;p\u0026gt;Tarea: {todo.task}\u0026lt;/p\u0026gt; \u0026lt;p\u0026gt;Completada: {todo.completed ? \u0026#39;Sí\u0026#39; : \u0026#39;No\u0026#39;}\u0026lt;/p\u0026gt; \u0026lt;/div\u0026gt; ); }; export default TodoDetail; En este ejemplo, hemos creado una aplicación de lista de tareas con React. Utilizamos componentes funcionales, React Hooks para manejar el estado y React Router para navegar entre diferentes vistas. Cada tarea se representa como un objeto con un id, una task y un estado completed. Los usuarios pueden agregar nuevas tareas, marcar tareas como completadas y ver los detalles de una tarea específica.\nActividades prácticas: # Crear un Formulario Simple:\nCrea un formulario simple con campos como nombre, correo electrónico y mensaje. Maneja eventos onChange para capturar y actualizar los datos ingresados por el usuario. Controlar Campos de Formulario:\nEstablece valores iniciales para los campos de formulario utilizando el estado. Asegúrate de que los campos de formulario estén controlados y se actualicen correctamente. Validación de Datos del Formulario:\nImplementa la validación básica en el formulario (por ejemplo, el campo de correo electrónico debe tener un formato válido). Muestra mensajes de error si los datos no son válidos. Desafíos opcionales para repaso: # Envío de Datos del Formulario:\nAgrega un botón de envío al formulario y maneja el evento onSubmit. Captura los datos del formulario y muestra una confirmación de envío o un mensaje de error en función de la validación. Formulario de Registro y Autenticación:\nCrea un formulario de registro que solicite información como nombre de usuario, contraseña, etc. Implementa la funcionalidad de autenticación con una validación básica de inicio de sesión. Manejo de Formularios con React Hooks:\nMigrar el manejo de formularios a componentes funcionales utilizando React Hooks como useState. Resumen del día: # En el día 9, hemos aprendido sobre el manejo de formularios en React y cómo capturar datos ingresados por el usuario. Hemos trabajado con eventos onChange y onSubmit, controlado los campos de formulario y validado los datos antes del envío. También hemos explorado desafíos adicionales relacionados con el envío de datos, el formulario de registro y el manejo de formularios con React Hooks.\nRecuerda que el manejo de formularios es una parte esencial de muchas aplicaciones web, y React proporciona herramientas y eventos para facilitar el proceso de capturar y validar datos del usuario. Continúa practicando y experimentando con formularios en tus proyectos de React. ¡Sigue adelante y sigue construyendo con formularios en React!\nRecursos # https://es.react.dev/reference/react-dom/components/input\n","date":"12 marzo 2023","permalink":"/platform/nivel2/9/","section":"Nivel2s","summary":"Objetivo del día: # El objetivo de este día es aprender cómo trabajar con formularios en React y cómo capturar datos ingresados por el usuario.","title":"Manejo de Formularios en React: Captura de Datos del Usuario"},{"content":"Objetivo del día: # El objetivo de este día es aprender cómo manejar listas de elementos en React y cómo utilizar las keys correctamente para mejorar el rendimiento y la eficiencia de las operaciones de actualización en el DOM.\nTemas a cubrir: # Manejo de listas en React: Uso del método map() para iterar sobre elementos de una lista. Cómo generar elementos dinámicamente a partir de una lista de datos. Supongamos que queremos crear una aplicación de lista de compras donde los usuarios puedan agregar y eliminar elementos de la lista. Utilizaremos un componente ShoppingList para mostrar la lista de compras y un componente ShoppingItem para representar cada artículo de la lista.\nCrear el componente ShoppingItem: import React from \u0026#39;react\u0026#39;; const ShoppingItem = ({ item, onDelete }) =\u0026gt; { return ( \u0026lt;div\u0026gt; \u0026lt;span\u0026gt;{item}\u0026lt;/span\u0026gt; \u0026lt;button onClick={() =\u0026gt; onDelete(item)}\u0026gt;Eliminar\u0026lt;/button\u0026gt; \u0026lt;/div\u0026gt; ); }; export default ShoppingItem; Crear el componente ShoppingList: import React, { useState } from \u0026#39;react\u0026#39;; import ShoppingItem from \u0026#39;./ShoppingItem\u0026#39;; const ShoppingList = () =\u0026gt; { const [items, setItems] = useState([]); const [newItem, setNewItem] = useState(\u0026#39;\u0026#39;); const handleAddItem = () =\u0026gt; { if (newItem.trim() !== \u0026#39;\u0026#39;) { setItems((prevItems) =\u0026gt; [...prevItems, newItem]); setNewItem(\u0026#39;\u0026#39;); } }; const handleDeleteItem = (itemToDelete) =\u0026gt; { setItems((prevItems) =\u0026gt; prevItems.filter((item) =\u0026gt; item !== itemToDelete)); }; return ( \u0026lt;div\u0026gt; \u0026lt;h2\u0026gt;Lista de Compras\u0026lt;/h2\u0026gt; \u0026lt;div\u0026gt; \u0026lt;input type=\u0026#34;text\u0026#34; value={newItem} onChange={(e) =\u0026gt; setNewItem(e.target.value)} placeholder=\u0026#34;Agregar nuevo artículo\u0026#34; /\u0026gt; \u0026lt;button onClick={handleAddItem}\u0026gt;Agregar\u0026lt;/button\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;div\u0026gt; {items.map((item, index) =\u0026gt; ( \u0026lt;ShoppingItem key={index} item={item} onDelete={handleDeleteItem} /\u0026gt; ))} \u0026lt;/div\u0026gt; \u0026lt;/div\u0026gt; ); }; export default ShoppingList; Usar el componente ShoppingList en la aplicación principal: import React from \u0026#39;react\u0026#39;; import ShoppingList from \u0026#39;./ShoppingList\u0026#39;; const App = () =\u0026gt; { return ( \u0026lt;div\u0026gt; \u0026lt;ShoppingList /\u0026gt; \u0026lt;/div\u0026gt; ); }; export default App; En este ejemplo, el componente ShoppingList mantiene el estado de la lista de compras en el estado items, que es un array de strings. También utiliza el estado newItem para mantener el valor del input de texto donde los usuarios pueden agregar nuevos elementos a la lista.\nCuando el usuario ingresa un nuevo artículo en el input y hace clic en el botón \u0026ldquo;Agregar\u0026rdquo;, se llama a la función handleAddItem que agrega el nuevo artículo al estado items y luego limpia el input de texto.\nEl componente ShoppingList también pasa la función handleDeleteItem como prop al componente ShoppingItem, que se utiliza para eliminar un artículo específico de la lista cuando el usuario hace clic en el botón \u0026ldquo;Eliminar\u0026rdquo;.\nCon este ejemplo, hemos mostrado cómo manejar listas en React. Hemos utilizado el método map() para generar dinámicamente los componentes ShoppingItem basados en el estado de la lista items. También hemos implementado funciones para agregar y eliminar elementos de la lista, lo que nos permite crear una aplicación funcional de lista de compras.\nLa importancia de las keys: ¿Qué son las keys y por qué son importantes en listas de elementos? El propósito de las keys en React y cómo mejoran la eficiencia de las actualizaciones. Supongamos que tenemos una aplicación de comentarios, donde los usuarios pueden agregar nuevos comentarios y también eliminar comentarios existentes. Utilizaremos un componente CommentList para mostrar la lista de comentarios y un componente CommentItem para representar cada comentario.\nCrear el componente CommentItem: import React from \u0026#39;react\u0026#39;; const CommentItem = ({ comment, onDelete }) =\u0026gt; { return ( \u0026lt;div\u0026gt; \u0026lt;span\u0026gt;{comment.text}\u0026lt;/span\u0026gt; \u0026lt;button onClick={() =\u0026gt; onDelete(comment.id)}\u0026gt;Eliminar\u0026lt;/button\u0026gt; \u0026lt;/div\u0026gt; ); }; export default CommentItem; Crear el componente CommentList: import React, { useState } from \u0026#39;react\u0026#39;; import CommentItem from \u0026#39;./CommentItem\u0026#39;; const CommentList = () =\u0026gt; { const [comments, setComments] = useState([ { id: 1, text: \u0026#39;¡Este es un gran artículo!\u0026#39; }, { id: 2, text: \u0026#39;Gracias por compartir esta información.\u0026#39; }, { id: 3, text: \u0026#39;Me encantó, muy útil.\u0026#39; }, ]); const handleAddComment = () =\u0026gt; { const newComment = { id: Date.now(), text: \u0026#39;Nuevo comentario agregado.\u0026#39;, }; setComments((prevComments) =\u0026gt; [...prevComments, newComment]); }; const handleDeleteComment = (commentId) =\u0026gt; { setComments((prevComments) =\u0026gt; prevComments.filter((comment) =\u0026gt; comment.id !== commentId)); }; return ( \u0026lt;div\u0026gt; \u0026lt;h2\u0026gt;Comentarios\u0026lt;/h2\u0026gt; \u0026lt;button onClick={handleAddComment}\u0026gt;Agregar Comentario\u0026lt;/button\u0026gt; \u0026lt;div\u0026gt; {comments.map((comment) =\u0026gt; ( \u0026lt;CommentItem key={comment.id} comment={comment} onDelete={handleDeleteComment} /\u0026gt; ))} \u0026lt;/div\u0026gt; \u0026lt;/div\u0026gt; ); }; export default CommentList; Usar el componente CommentList en la aplicación principal: import React from \u0026#39;react\u0026#39;; import CommentList from \u0026#39;./CommentList\u0026#39;; const App = () =\u0026gt; { return ( \u0026lt;div\u0026gt; \u0026lt;CommentList /\u0026gt; \u0026lt;/div\u0026gt; ); }; export default App; En este ejemplo, el componente CommentList mantiene el estado de la lista de comentarios en el estado comments, que es un array de objetos. Cada objeto representa un comentario con un id único y un texto.\nCuando el usuario hace clic en el botón \u0026ldquo;Agregar Comentario\u0026rdquo;, se llama a la función handleAddComment que agrega un nuevo comentario al estado comments con un id único generado por Date.now().\nEl componente CommentList también pasa la función handleDeleteComment como prop al componente CommentItem, que se utiliza para eliminar un comentario específico de la lista cuando el usuario hace clic en el botón \u0026ldquo;Eliminar\u0026rdquo;.\nAquí es donde se vuelve importante el uso de las keys. Al proporcionar una key única para cada elemento de la lista en el componente CommentItem, React puede identificar eficientemente los elementos que cambian, se agregan o se eliminan durante las actualizaciones.\nSin el uso de keys, React tendría que reevaluar todos los elementos en la lista y volver a renderizarlos completamente cada vez que se produce un cambio, lo que podría ser ineficiente y afectar el rendimiento de la aplicación. Al proporcionar keys únicas, React puede realizar operaciones de actualización más eficientes y garantizar que los cambios en la lista se reflejen correctamente en la interfaz de usuario.\nCon este ejemplo, hemos demostrado la importancia de las keys en React al mantener el rendimiento y la eficiencia al manejar listas y operaciones de actualización en el DOM.\nActividades prácticas: # Creación de una lista de tareas:\nCreamos un componente Task que muestra cada tarea en la lista con un botón para marcarla como completada. Utilizamos el método map() para generar dinámicamente los componentes Task basados en una lista de tareas en el estado del componente principal. Uso de keys:\nAprendemos sobre la importancia de las keys y cómo evitar problemas de rendimiento al no usar keys adecuadas. Asignamos keys únicas a cada elemento de la lista para mejorar la eficiencia de las actualizaciones en el DOM. Agregar funcionalidad de eliminación de tareas:\nImplementamos una función para eliminar una tarea de la lista cuando el usuario hace clic en un botón \u0026ldquo;Eliminar\u0026rdquo;. Desafíos opcionales para repaso: # Editar tareas:\nAgregamos la funcionalidad para editar el nombre de una tarea en la lista. Implementamos un botón de edición en cada tarea que muestre un campo de entrada de texto para editar el nombre. Filtrar tareas completadas/incompletas:\nAgregamos botones para filtrar las tareas en función de su estado de completado o incompleto. Implementamos funciones para mostrar solo las tareas que cumplen con el criterio seleccionado. Persistencia de datos:\nAñadimos persistencia de datos utilizando el localStorage del navegador. Guardamos las tareas en el localStorage para que la lista se mantenga incluso si la página se actualiza. Resumen del día: # En el día 5, hemos aprendido cómo manejar listas de elementos en React y la importancia de utilizar keys para mejorar la eficiencia de las operaciones de actualización en el DOM. Hemos creado una lista de tareas y hemos utilizado el método map() para generar dinámicamente los elementos de la lista. También hemos implementado funcionalidades adicionales, como la eliminación de tareas y posibles desafíos opcionales para repasar y ampliar nuestros conocimientos.\nRecuerda que el manejo adecuado de listas y el uso correcto de keys son aspectos fundamentales en el desarrollo de aplicaciones en React. Continúa practicando y experimentando con estos conceptos para mejorar tus habilidades y construir aplicaciones más robustas y eficientes. ¡Sigue adelante y buen trabajo!\nRecursos # https://es.react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key\n","date":"12 marzo 2023","permalink":"/platform/nivel2/5/","section":"Nivel2s","summary":"Objetivo del día: # El objetivo de este día es aprender cómo manejar listas de elementos en React y cómo utilizar las keys correctamente para mejorar el rendimiento y la eficiencia de las operaciones de actualización en el DOM.","title":"Manejo de listas y uso de keys en React"},{"content":"Puntos de quiebre/Preflight # Puntos de quiebre (Breakpoints) y Preflight son dos conceptos clave en Tailwind CSS para el diseño responsive y la normalización de estilos. Permíteme explicarte cada uno de ellos:\n1. Puntos de quiebre (Breakpoints): # Los puntos de quiebre son valores predefinidos en Tailwind CSS que definen diferentes tamaños de pantalla en los que se aplicarán estilos específicos. Estos puntos de quiebre están diseñados para adaptar tu diseño y hacerlo responsive, es decir, para que se ajuste y se vea bien en diferentes dispositivos y tamaños de pantalla.\nTailwind CSS proporciona varios puntos de quiebre por defecto que puedes utilizar en tus clases de utilidad, como sm (pequeño), md (mediano), lg (grande), y xl (extra grande). Por ejemplo, puedes usar la clase lg:text-xl para establecer un tamaño de texto extra grande solo en dispositivos de pantalla grande.\nAdemás, Tailwind CSS te permite personalizar los puntos de quiebre según tus necesidades, definiendo tus propias variantes de clase en el archivo tailwind.config.js.\n2. Preflight: # Preflight es una característica de Tailwind CSS que proporciona un conjunto de estilos base y normalizaciones para garantizar una experiencia coherente en diferentes navegadores y dispositivos. Estos estilos iniciales se aplican a elementos HTML como encabezados, párrafos, enlaces, etc., y ayudan a establecer una base sólida para la construcción de tu interfaz de usuario.\nAl utilizar Preflight, no es necesario incluir una hoja de estilos de normalización separada, como normalize.css, ya que Tailwind CSS se encarga de proporcionar los estilos básicos necesarios para la mayoría de los proyectos.\nPuedes personalizar los estilos de Preflight según tus preferencias, eliminando o modificando ciertas reglas en el archivo tailwind.config.js. Esto te permite adaptar los estilos base de acuerdo con los requisitos específicos de tu proyecto.\nEn resumen, los puntos de quiebre (breakpoints) te permiten adaptar el diseño y los estilos en diferentes tamaños de pantalla, mientras que Preflight proporciona un conjunto de estilos iniciales y normalizaciones para una experiencia coherente en diferentes navegadores. Ambas características son importantes en Tailwind CSS para la construcción de interfaces responsive y la normalización de estilos.\nInstalar XAMP # Monta tu servidor web con Apache, PHP y MySQL # ","date":"12 marzo 2023","permalink":"/platform/levels/level5_laravel/02taildwind/comp/","section":"Levels","summary":"Puntos de quiebre/Preflight # Puntos de quiebre (Breakpoints) y Preflight son dos conceptos clave en Tailwind CSS para el diseño responsive y la normalización de estilos.","title":"Puntos de quiebre/Preflight"},{"content":"Objetivo del día: # El objetivo de este día es aprender sobre React Router, una librería popular utilizada para gestionar la navegación y enrutamiento en aplicaciones de React. Aprenderemos cómo utilizar React Router para crear rutas, enlazar componentes y navegar entre páginas en una aplicación de una sola página (SPA).\nTemas a cubrir: # Introducción a React Router:\n¿Qué es React Router y por qué es importante para aplicaciones React? Conceptos básicos de enrutamiento y rutas en React Router. Configuración de React Router:\nInstalación de React Router en una aplicación de React. Configuración básica de rutas utilizando BrowserRouter. Instala React Router en tu proyecto utilizando npm o yarn:\nnpm install react-router-dom En el archivo principal de tu aplicación (por lo general, index.js o App.js), importa los componentes necesarios de React Router y configura las rutas utilizando el componente BrowserRouter: import React from \u0026#39;react\u0026#39;; import { BrowserRouter as Router, Route, Switch, Link } from \u0026#39;react-router-dom\u0026#39;; const Home = () =\u0026gt; \u0026lt;h2\u0026gt;¡Bienvenido a la Página de Inicio!\u0026lt;/h2\u0026gt;; const About = () =\u0026gt; \u0026lt;h2\u0026gt;Esta es la Página Acerca de Nosotros\u0026lt;/h2\u0026gt;; const Contact = () =\u0026gt; \u0026lt;h2\u0026gt;Contáctanos en la Página de Contacto\u0026lt;/h2\u0026gt;; const App = () =\u0026gt; { return ( \u0026lt;Router\u0026gt; \u0026lt;div\u0026gt; \u0026lt;nav\u0026gt; {/* Definimos los enlaces de navegación */} \u0026lt;ul\u0026gt; \u0026lt;li\u0026gt; \u0026lt;Link to=\u0026#34;/\u0026#34;\u0026gt;Inicio\u0026lt;/Link\u0026gt; \u0026lt;/li\u0026gt; \u0026lt;li\u0026gt; \u0026lt;Link to=\u0026#34;/about\u0026#34;\u0026gt;Acerca\u0026lt;/Link\u0026gt; \u0026lt;/li\u0026gt; \u0026lt;li\u0026gt; \u0026lt;Link to=\u0026#34;/contact\u0026#34;\u0026gt;Contacto\u0026lt;/Link\u0026gt; \u0026lt;/li\u0026gt; \u0026lt;/ul\u0026gt; \u0026lt;/nav\u0026gt; {/* Definimos las rutas */} \u0026lt;Switch\u0026gt; {/* La ruta exacta coincide solo con la ruta raíz */} \u0026lt;Route exact path=\u0026#34;/\u0026#34; component={Home} /\u0026gt; \u0026lt;Route path=\u0026#34;/about\u0026#34; component={About} /\u0026gt; \u0026lt;Route path=\u0026#34;/contact\u0026#34; component={Contact} /\u0026gt; \u0026lt;/Switch\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;/Router\u0026gt; ); }; export default App; En este ejemplo, hemos configurado React Router en nuestra aplicación. Importamos los componentes necesarios de React Router (BrowserRouter, Route, Switch, y Link) y los utilizamos para definir nuestras rutas y enlaces de navegación.\nHemos creado tres componentes funcionales: Home, About y Contact, que representan diferentes páginas de nuestra aplicación. Utilizamos el componente Link para crear enlaces de navegación que lleven al usuario a las páginas correspondientes. Utilizamos el componente Route para asociar cada componente con una ruta específica. El componente Switch garantiza que solo se renderice la primera ruta coincidente. Esto es útil cuando tenemos rutas que son subconjuntos de otras rutas (por ejemplo, /about y /about/team). La ruta exacta (exact) asegura que solo la ruta raíz se muestre cuando la URL coincide exactamente con \u0026quot;/\u0026quot;.\nCreación de Rutas y Enlaces:\nUso de los componentes Route para definir rutas y sus componentes asociados. Uso de los componentes Link para crear enlaces de navegación entre páginas. Enrutamiento con Parámetros:\nUso de parámetros dinámicos en las rutas para páginas con datos específicos. Extracción de parámetros de la URL utilizando useParams (React Hooks). Primero, asegúrate de haber configurado React Router en tu proyecto como se mostró en el ejemplo anterior.\nCrea un nuevo componente llamado UserDetail.js que representará la página de detalle de un usuario. Este componente recibirá el parámetro id como parte de la URL y mostrará los detalles del usuario correspondiente.\nUserDetail.js\nimport React from \u0026#39;react\u0026#39;; const users = [ { id: 1, name: \u0026#39;Usuario 1\u0026#39;, email: \u0026#39;usuario1@example.com\u0026#39; }, { id: 2, name: \u0026#39;Usuario 2\u0026#39;, email: \u0026#39;usuario2@example.com\u0026#39; }, { id: 3, name: \u0026#39;Usuario 3\u0026#39;, email: \u0026#39;usuario3@example.com\u0026#39; }, ]; const UserDetail = ({ match }) =\u0026gt; { // Obtenemos el valor del parámetro \u0026#34;id\u0026#34; de la URL utilizando \u0026#34;match.params\u0026#34; const userId = parseInt(match.params.id, 10); // Buscamos el usuario correspondiente en la lista de usuarios const user = users.find((user) =\u0026gt; user.id === userId); // Si no encontramos el usuario, mostramos un mensaje de error if (!user) { return \u0026lt;h2\u0026gt;Usuario no encontrado\u0026lt;/h2\u0026gt;; } // Mostramos los detalles del usuario return ( \u0026lt;div\u0026gt; \u0026lt;h2\u0026gt;Detalles del Usuario {user.name}\u0026lt;/h2\u0026gt; \u0026lt;p\u0026gt;ID: {user.id}\u0026lt;/p\u0026gt; \u0026lt;p\u0026gt;Email: {user.email}\u0026lt;/p\u0026gt; \u0026lt;/div\u0026gt; ); }; export default UserDetail; Ahora, actualiza tu archivo principal de la aplicación (App.js o index.js) para definir una nueva ruta que contenga el parámetro id utilizando el componente Route. App.js\nimport React from \u0026#39;react\u0026#39;; import { BrowserRouter as Router, Route, Switch, Link } from \u0026#39;react-router-dom\u0026#39;; import UserDetail from \u0026#39;./UserDetail\u0026#39;; const Home = () =\u0026gt; \u0026lt;h2\u0026gt;¡Bienvenido a la Página de Inicio!\u0026lt;/h2\u0026gt;; const About = () =\u0026gt; \u0026lt;h2\u0026gt;Esta es la Página Acerca de Nosotros\u0026lt;/h2\u0026gt;; const Contact = () =\u0026gt; \u0026lt;h2\u0026gt;Contáctanos en la Página de Contacto\u0026lt;/h2\u0026gt;; const App = () =\u0026gt; { return ( \u0026lt;Router\u0026gt; \u0026lt;div\u0026gt; \u0026lt;nav\u0026gt; \u0026lt;ul\u0026gt; \u0026lt;li\u0026gt; \u0026lt;Link to=\u0026#34;/\u0026#34;\u0026gt;Inicio\u0026lt;/Link\u0026gt; \u0026lt;/li\u0026gt; \u0026lt;li\u0026gt; \u0026lt;Link to=\u0026#34;/about\u0026#34;\u0026gt;Acerca\u0026lt;/Link\u0026gt; \u0026lt;/li\u0026gt; \u0026lt;li\u0026gt; \u0026lt;Link to=\u0026#34;/contact\u0026#34;\u0026gt;Contacto\u0026lt;/Link\u0026gt; \u0026lt;/li\u0026gt; \u0026lt;/ul\u0026gt; \u0026lt;/nav\u0026gt; \u0026lt;Switch\u0026gt; \u0026lt;Route exact path=\u0026#34;/\u0026#34; component={Home} /\u0026gt; \u0026lt;Route path=\u0026#34;/about\u0026#34; component={About} /\u0026gt; \u0026lt;Route path=\u0026#34;/contact\u0026#34; component={Contact} /\u0026gt; {/* Ruta con parámetro \u0026#34;id\u0026#34; */} \u0026lt;Route path=\u0026#34;/user/:id\u0026#34; component={UserDetail} /\u0026gt; \u0026lt;/Switch\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;/Router\u0026gt; ); }; export default App; Ahora, cuando navegues a la ruta /user/1, /user/2, o /user/3, verás los detalles del usuario correspondiente. Si intentas acceder a una ruta que no tenga un usuario válido, verás el mensaje \u0026ldquo;Usuario no encontrado\u0026rdquo;. Con este ejemplo, has implementado enrutamiento con parámetros en React Router. Ahora puedes pasar y recibir parámetros en las URLs y utilizarlos para mostrar contenido específico en tus páginas.\nActividades prácticas: # Configurar React Router en la Aplicación:\nInstala React Router en tu aplicación utilizando npm o yarn. Configura las rutas utilizando BrowserRouter en el archivo principal de la aplicación (por lo general, index.js o App.js). Crear Rutas y Enlaces:\nCrea diferentes componentes que representen distintas páginas de la aplicación. Define rutas utilizando el componente Route para asociar componentes a rutas específicas. Crea enlaces de navegación utilizando el componente Link para permitir a los usuarios cambiar entre páginas. Desafíos opcionales para repaso: # Enrutamiento con Parámetros:\nAgrega una ruta que acepte un parámetro específico en la URL. Utiliza useParams (React Hooks) para acceder y mostrar el parámetro en la página correspondiente. Enrutamiento Anidado:\nCrea rutas anidadas para representar jerarquías de navegación en la aplicación. Asegúrate de que los enlaces y rutas anidadas funcionen correctamente. Redirecciones:\nImplementa una redirección para una ruta específica. Asegúrate de que los usuarios sean redirigidos automáticamente a la nueva ruta. Resumen del día: # En el día 8, hemos aprendido sobre React Router y cómo utilizarlo para gestionar la navegación y enrutamiento en una aplicación de React. Hemos configurado React Router, creado rutas, enlaces y hemos aprendido sobre el enrutamiento con parámetros. También hemos explorado desafíos adicionales relacionados con el enrutamiento anidado y las redirecciones.\nRecuerda que React Router es una herramienta esencial para crear aplicaciones de una sola página (SPA) en React y facilita la navegación entre diferentes vistas. Continúa practicando y experimentando con React Router para mejorar tus habilidades en el enrutamiento y la navegación en tus aplicaciones de React. ¡Sigue adelante y sigue construyendo con React Router!\nRecursos # https://reactrouter.com/en/main/start/tutorial\n","date":"12 marzo 2023","permalink":"/platform/nivel2/8/","section":"Nivel2s","summary":"Objetivo del día: # El objetivo de este día es aprender sobre React Router, una librería popular utilizada para gestionar la navegación y enrutamiento en aplicaciones de React.","title":"React Router: Navegación y Enrutamiento en una Aplicación React"},{"content":"Servidores # XAMP # La estructura \u0026ldquo;XAMPP\u0026rdquo; se refiere a un paquete de software que incluye varios componentes necesarios para crear y gestionar un entorno de desarrollo web. \u0026ldquo;XAMPP\u0026rdquo; es un acrónimo que representa los siguientes componentes:\nX: se refiere al sistema operativo en el que se instalará XAMPP. Puede ser Windows, Linux, macOS o Solaris.\nA: representa el servidor web Apache. Apache es uno de los servidores web más populares y ampliamente utilizados en el mundo. Proporciona la infraestructura necesaria para alojar y servir sitios web.\nM: representa el sistema de gestión de bases de datos MySQL. MySQL es un sistema de gestión de bases de datos relacional ampliamente utilizado. Proporciona un entorno para almacenar, organizar y administrar datos utilizados por aplicaciones web.\nP: representa el lenguaje de programación PHP. PHP es un lenguaje de programación de código abierto especialmente diseñado para el desarrollo web. Se utiliza principalmente para crear aplicaciones web dinámicas e interactuar con bases de datos.\nP: representa el servidor de correo electrónico Postfix. Postfix es un servidor de correo electrónico de código abierto que permite el envío y recepción de correos electrónicos en un entorno de desarrollo local.\nXAMPP proporciona una forma conveniente de instalar y configurar estos componentes juntos, lo que permite a los desarrolladores crear y probar sus aplicaciones web en un entorno local antes de implementarlas en un servidor de producción en vivo.\nInstalar XAMP # Para instalar XAMPP en tu sistema, sigue estos pasos:\nDescarga el paquete de instalación: Visita el sitio web oficial de XAMPP (https://www.apachefriends.org/es/index.html) y descarga el paquete de instalación correspondiente a tu sistema operativo (Windows, Linux, macOS o Solaris).\nInicia el instalador: Una vez que la descarga haya finalizado, ejecuta el archivo de instalación. Si estás en Windows, simplemente haz doble clic en el archivo ejecutable. En Linux y macOS, es posible que necesites abrir una terminal, navegar hasta la ubicación del archivo y ejecutarlo desde allí.\nSelecciona los componentes: Durante el proceso de instalación, se te presentará una lista de componentes disponibles para instalar. Por lo general, Apache, MySQL, PHP y phpMyAdmin estarán seleccionados de forma predeterminada. Puedes mantener estas selecciones o desmarcar los componentes que no necesites. También puedes seleccionar otros complementos opcionales si lo deseas.\nSelecciona la ubicación de instalación: El instalador te pedirá que elijas una ubicación para instalar XAMPP. Puedes optar por utilizar la ubicación predeterminada o seleccionar una ruta personalizada.\nCompleta la instalación: Una vez que hayas seleccionado los componentes y la ubicación de instalación, simplemente sigue las instrucciones en pantalla para completar la instalación. El instalador copiará los archivos necesarios y configurará el entorno de XAMPP.\nInicia XAMPP: Después de completar la instalación, podrás iniciar XAMPP. En Windows, puedes encontrar un acceso directo en el escritorio o en el menú de inicio. En Linux y macOS, puedes abrir una terminal y ejecutar el comando correspondiente para iniciar XAMPP.\nVerifica la instalación: Una vez que XAMPP esté en funcionamiento, puedes abrir un navegador web y visitar \u0026ldquo;http://localhost\u0026rdquo; para ver la página de inicio de XAMPP. Desde allí, podrás acceder a las diferentes herramientas y servicios, como phpMyAdmin para administrar tu base de datos MySQL.\n¡Eso es todo! Ahora tienes XAMPP instalado en tu sistema y puedes comenzar a desarrollar y probar aplicaciones web localmente.\nConfiguraciones Locales y en la Nube # Las configuraciones locales y en la nube se refieren a dos formas diferentes de alojar y ejecutar aplicaciones web.\nConfiguración Local: En una configuración local, instalas y ejecutas todos los componentes necesarios, como el servidor web, la base de datos y el lenguaje de programación, en tu propio equipo o en un servidor local dentro de tu red. XAMPP es un ejemplo de una configuración local, donde puedes instalar y configurar Apache, MySQL y PHP en tu máquina para desarrollar y probar aplicaciones web en un entorno controlado. La configuración local es útil para el desarrollo y pruebas, ya que te permite trabajar sin una conexión a Internet y tener un control total sobre la configuración del entorno.\nConfiguración en la Nube: En una configuración en la nube, utilizas servicios y recursos proporcionados por proveedores de servicios en la nube, como Amazon Web Services (AWS), Microsoft Azure o Google Cloud Platform (GCP), para alojar y ejecutar tus aplicaciones web. En lugar de configurar y mantener tus propios servidores, puedes aprovechar la infraestructura en la nube para desplegar y escalar tus aplicaciones de manera más fácil y flexible. En una configuración en la nube, no es necesario preocuparse por la gestión de servidores físicos, ya que el proveedor de la nube se encarga de eso. También obtienes beneficios como la alta disponibilidad, la escalabilidad y la facilidad de implementación.\nAmbas configuraciones tienen sus ventajas y se utilizan en diferentes escenarios:\nLa configuración local es útil para el desarrollo y pruebas en entornos controlados, donde puedes realizar cambios y experimentar sin afectar una aplicación en producción. También es útil cuando no tienes acceso a Internet o cuando necesitas trabajar con datos confidenciales que no deben estar en la nube.\nLa configuración en la nube es adecuada para implementar aplicaciones en producción a gran escala, ya que te brinda flexibilidad, escalabilidad y confiabilidad. Además, los servicios en la nube ofrecen una amplia gama de herramientas y servicios adicionales que pueden facilitar el desarrollo, la implementación y la administración de tus aplicaciones.\nLa elección entre una configuración local y en la nube depende de tus necesidades específicas, los recursos disponibles y el contexto del proyecto. A menudo, los desarrolladores utilizan una combinación de ambas configuraciones, desarrollando y probando localmente y luego desplegando la aplicación en la nube para su producción.\nInstalar XAMP # Monta tu servidor web con Apache, PHP y MySQL # ","date":"12 marzo 2023","permalink":"/platform/levels/level4_php/02servidores/comp/","section":"Levels","summary":"Servidores # XAMP # La estructura \u0026ldquo;XAMPP\u0026rdquo; se refiere a un paquete de software que incluye varios componentes necesarios para crear y gestionar un entorno de desarrollo web.","title":"Xamp y Servidores"},{"content":"Resumen: Los Cron Jobs son una herramienta esencial para automatizar tareas programadas en aplicaciones web. En este artículo, exploraremos cómo configurar y utilizar Cron Jobs en Laravel para ejecutar tareas automatizadas de manera eficiente y en intervalos específicos. A través de ejemplos prácticos, aprenderán a programar tareas, mantener la consistencia de datos y mejorar la experiencia del usuario.\n1. Introducción a Cron Jobs en Laravel # Los Cron Jobs son tareas programadas que se ejecutan en intervalos específicos, como horas, días o semanas. En Laravel, los Cron Jobs se configuran y gestionan mediante el programador de tareas integrado.\n2. Configuración Básica del Programador de Tareas # 2.1 Archivo app/Console/Kernel.php # El archivo Kernel.php contiene la definición de las tareas programadas de la aplicación. Aquí es donde se configuran las tareas que se ejecutarán automáticamente en segundo plano.\n2.2 Métodos schedule y command # El método schedule se utiliza para definir las tareas programadas. Puedes usar el método command para especificar la tarea a ejecutar y sus argumentos.\n3. Creación de Tareas Programadas # 3.1 Creación de Tareas Personalizadas # En Laravel, las tareas programadas personalizadas se crean utilizando el comando Artisan make:command. Esto genera una nueva clase de comando que contiene la lógica de la tarea.\n3.2 Definición de Tareas Programadas # Dentro de la clase de comando, puedes definir la lógica que se ejecutará cuando se active la tarea programada.\n4. Ejecución y Programación de Tareas # 4.1 Programación de Tareas # Puedes programar tareas para que se ejecuten en intervalos específicos, como minutos, horas o días. Laravel proporciona una sintaxis clara para programar tareas.\n4.2 Ejecución de Tareas Programadas # Las tareas programadas se ejecutan automáticamente en segundo plano utilizando el comando Artisan schedule:run o mediante la configuración de Cron en el servidor.\n5. Práctica Guiada: Limpieza Automatizada de Datos # Para aplicar lo aprendido, pueden llevar a cabo un emocionante proyecto práctico: implementar una tarea programada para limpiar automáticamente datos obsoletos en la base de datos utilizando Cron Jobs en Laravel. Algunos pasos clave incluyen:\nCrear una tarea programada personalizada. Definir la lógica para la limpieza de datos en la tarea. Programar la tarea para que se ejecute en intervalos específicos. Recursos # Documentación oficial # https://laravel.com/docs/10.x/scheduling#main-content\n","date":"9 marzo 2023","permalink":"/platform/nivel4/10/","section":"Nivel4s","summary":"Resumen: Los Cron Jobs son una herramienta esencial para automatizar tareas programadas en aplicaciones web.","title":"Automatización con Cron Jobs en Laravel: Tareas Programadas y Eficientes"},{"content":"Resumen: En este artículo, exploraremos la configuración y el uso de los servidores web Apache y Nginx, así como la línea de comandos (CMD) en el entorno de Windows. A través de ejemplos prácticos, aprenderán a instalar y configurar estos servidores web, y a utilizar el CMD para realizar diversas tareas administrativas.\n1. Introducción a Apache y Nginx # Apache y Nginx son dos de los servidores web más populares que permiten el alojamiento y la entrega de sitios web. Ambos servidores web tienen sus propias características y beneficios.\n2. Instalación y Configuración Básica # 2.1 Instalación de Apache # Descarga el paquete de instalación de Apache desde el sitio web oficial. Ejecuta el instalador y sigue las instrucciones. Abre un navegador y verifica que Apache esté funcionando accediendo a http://localhost. 2.2 Instalación de Nginx # Descarga el paquete de instalación de Nginx desde el sitio web oficial. Ejecuta el instalador y sigue las instrucciones. Abre un navegador y verifica que Nginx esté funcionando accediendo a http://localhost. 3. Configuración de Sitios Virtuales # 3.1 Configuración de Sitios Virtuales en Apache # Abre el archivo httpd.conf en la carpeta de instalación de Apache. Habilita el módulo vhost y configura tus sitios virtuales. 3.2 Configuración de Sitios Virtuales en Nginx # Abre el archivo de configuración nginx.conf en la carpeta de instalación de Nginx. Define tus servidores virtuales utilizando bloques server. 4. Gestión de Servicios y Línea de Comandos # 4.1 Gestión de Servicios en Windows # Utiliza el Administrador de Servicios o los comandos net start y net stop para iniciar y detener los servicios de Apache y Nginx.\n4.2 Línea de Comandos (CMD) en Windows # Abre la línea de comandos (cmd.exe) desde el menú Inicio. Utiliza comandos como cd para cambiar de directorio, dir para listar archivos y carpetas, ipconfig para obtener información de red, etc. 5. Práctica Guiada: Configuración de un Sitio Web # Para aplicar lo aprendido, pueden llevar a cabo un proyecto práctico: configurar y alojar un sitio web local utilizando Apache o Nginx en Windows. Algunos pasos clave incluyen:\nConfigurar un sitio virtual en Apache o Nginx. Crear una página web simple en HTML. Acceder al sitio web localmente a través del navegador. Recursos # Documentación oficial # https://kinsta.com/es/base-de-conocimiento/instalar-nginx/\nhttps://ticgrup.com/los-comandos-cmd-que-deberias-conocer/\n","date":"9 marzo 2023","permalink":"/platform/nivel4/11/","section":"Nivel4s","summary":"Resumen: En este artículo, exploraremos la configuración y el uso de los servidores web Apache y Nginx, así como la línea de comandos (CMD) en el entorno de Windows.","title":"Configuración y Uso de Apache, Nginx y CMD en Windows"},{"content":"Resumen: Los formularios son una parte esencial de las aplicaciones web, permitiendo a los usuarios interactuar con la aplicación y enviar datos al servidor. En este artículo, exploraremos cómo crear formularios interactivos utilizando el marco de trabajo Laravel. A través de ejemplos prácticos, aprenderán a construir formularios, validar datos y procesar envíos en sus aplicaciones web.\n1. Introducción a los Formularios en Laravel # Los formularios son una forma fundamental de recopilar información de los usuarios y enviarla al servidor. Laravel ofrece una serie de herramientas para crear y manejar formularios de manera eficiente.\n2. Creación de Formularios # 2.1 Creación de un Formulario Básico # En Laravel, se pueden crear formularios utilizando la función Form::open() y Form::close():\n{!! Form::open([\u0026#39;url\u0026#39; =\u0026gt; \u0026#39;/enviar\u0026#39;, \u0026#39;method\u0026#39; =\u0026gt; \u0026#39;post\u0026#39;]) !!} \u0026lt;!-- Campos del formulario --\u0026gt; {!! Form::text(\u0026#39;nombre\u0026#39;, null, [\u0026#39;placeholder\u0026#39; =\u0026gt; \u0026#39;Nombre\u0026#39;]) !!} {!! Form::email(\u0026#39;correo\u0026#39;, null, [\u0026#39;placeholder\u0026#39; =\u0026gt; \u0026#39;Correo electrónico\u0026#39;]) !!} {!! Form::submit(\u0026#39;Enviar\u0026#39;) !!} {!! Form::close() !!} 2.2 Campos de Formulario # Laravel proporciona una variedad de campos de formulario como text, email, password, textarea, select, etc.\n3. Validación de Datos # 3.1 Definición de Reglas de Validación # Laravel permite definir reglas de validación en el controlador para asegurarse de que los datos enviados por los usuarios sean válidos:\npublic function store(Request $request) { $request-\u0026gt;validate([ \u0026#39;nombre\u0026#39; =\u0026gt; \u0026#39;required|string|max:255\u0026#39;, \u0026#39;correo\u0026#39; =\u0026gt; \u0026#39;required|email|unique:usuarios\u0026#39;, // ... más reglas ... ]); // Procesar el envío } 3.2 Mostrar Errores de Validación # En la vista, los errores de validación pueden mostrarse junto a los campos correspondientes:\n\u0026lt;input type=\u0026#34;text\u0026#34; name=\u0026#34;nombre\u0026#34;\u0026gt; @if ($errors-\u0026gt;has(\u0026#39;nombre\u0026#39;)) \u0026lt;span class=\u0026#34;error\u0026#34;\u0026gt;{{ $errors-\u0026gt;first(\u0026#39;nombre\u0026#39;) }}\u0026lt;/span\u0026gt; @endif 4. Procesamiento de Envíos # 4.1 Enviar Datos al Servidor # Después de la validación exitosa, los datos del formulario se pueden enviar al servidor para su procesamiento:\npublic function store(Request $request) { // Procesar los datos $nombre = $request-\u0026gt;input(\u0026#39;nombre\u0026#39;); $correo = $request-\u0026gt;input(\u0026#39;correo\u0026#39;); // ... más procesamiento ... return redirect(\u0026#39;/exito\u0026#39;); } 5. Práctica Guiada: Creación de un Formulario de Registro # Para aplicar lo aprendido, pueden crear un formulario de registro de usuarios en Laravel. Algunos pasos clave incluyen:\nCrear la vista del formulario de registro. Definir reglas de validación en el controlador. Procesar y almacenar los datos del formulario. Mostrar mensajes de éxito y errores en la vista. Recursos # Documentación oficial # https://laravel.com/docs/10.x/blade#forms\n","date":"9 marzo 2023","permalink":"/platform/nivel4/8/","section":"Nivel4s","summary":"Resumen: Los formularios son una parte esencial de las aplicaciones web, permitiendo a los usuarios interactuar con la aplicación y enviar datos al servidor.","title":"Creando Formularios Interactivos con Laravel: Guía Práctica para Estudiantes"},{"content":"Resumen: En el vasto universo del desarrollo web con Laravel, comprender y dominar las relaciones de bases de datos y las migraciones avanzadas es esencial para construir aplicaciones potentes y flexibles. Eloquent, el poderoso ORM de Laravel, ofrece un conjunto de herramientas sofisticadas para manejar estas tareas de manera eficiente y efectiva. En este artículo, proporcionaremos a una guía práctica para explorar Eloquent con relaciones y migrations avanzadas, a través de ejemplos concretos y desafiantes ejercicios que les permitirán practicar durante todo el día.\n1. Introducción a Eloquent con Relaciones y Migrations Avanzadas # Las relaciones de bases de datos y las migraciones avanzadas son piedras angulares para construir aplicaciones escalables y de alta calidad. Eloquent simplifica enormemente estas tareas al proporcionar una interfaz elegante y orientada a objetos para trabajar con bases de datos relacionales.\n2. Definiendo Relaciones en Eloquent # Las relaciones en Eloquent permiten modelar las interacciones entre diferentes tablas de bases de datos. Veamos cómo definir y utilizar relaciones en Eloquent:\n2.1 Uno a Muchos # // En el modelo Usuario public function publicaciones() { return $this-\u0026gt;hasMany(Publicacion::class); } // En el modelo Publicacion public function usuario() { return $this-\u0026gt;belongsTo(Usuario::class); } 2.2 Muchos a Muchos # // En el modelo Curso public function estudiantes() { return $this-\u0026gt;belongsToMany(Estudiante::class); } // En el modelo Estudiante public function cursos() { return $this-\u0026gt;belongsToMany(Curso::class); } 4. Migrations Avanzadas # Las migrations avanzadas permiten definir esquemas de bases de datos más complejos. Veamos cómo crear migrations avanzadas en Laravel:\n4.1 Creación de una Migration # php artisan make:migration crear_tabla_productos 4.2 Definición de una Migration # use Illuminate\\Database\\Schema\\Blueprint; use Illuminate\\Database\\Migrations\\Migration; class CrearTablaProductos extends Migration { public function up() { Schema::create(\u0026#39;productos\u0026#39;, function (Blueprint $table) { $table-\u0026gt;id(); $table-\u0026gt;string(\u0026#39;nombre\u0026#39;); $table-\u0026gt;decimal(\u0026#39;precio\u0026#39;, 10, 2); // ... más columnas ... $table-\u0026gt;timestamps(); }); } public function down() { Schema::dropIfExists(\u0026#39;productos\u0026#39;); } } Recursos # Documentación oficial # https://laravel.com/docs/10.x/eloquent-relationships\nhttps://laravel.com/docs/10.x/migrations\nhttps://laravel.com/docs/10.x/seeding\n","date":"9 marzo 2023","permalink":"/platform/nivel4/4/","section":"Nivel4s","summary":"Resumen: En el vasto universo del desarrollo web con Laravel, comprender y dominar las relaciones de bases de datos y las migraciones avanzadas es esencial para construir aplicaciones potentes y flexibles.","title":"Explorando Eloquent con Relaciones y Migrations Avanzadas en Laravel: Un Enfoque de Práctica Integral"},{"content":"Resumen: En el emocionante mundo del desarrollo web con Laravel, el manejo de bases de datos es fundamental. Eloquent Models, Seeders y Factories son componentes esenciales que permiten a los desarrolladores crear, poblar y manipular datos de manera eficiente en aplicaciones Laravel. Este artículo tiene como objetivo proporcionar a una comprensión sólida y práctica de Eloquent Models, Seeders y Factories, a través de ejemplos concretos y ejercicios desafiantes para practicar durante todo el día.\n1. Introducción a Eloquent Models, Seeders y Factories # Eloquent es el ORM (Object-Relational Mapping) incorporado en Laravel, que simplifica la interacción con bases de datos al permitir a los desarrolladores trabajar con modelos y objetos en lugar de consultas SQL directas. Seeders y Factories son herramientas que complementan Eloquent al permitir la generación y el llenado de datos de manera automatizada.\n2. Eloquent Models # Los Eloquent Models son representaciones de tablas de bases de datos en forma de objetos. A través de ellos, los desarrolladores pueden interactuar con la base de datos de manera orientada a objetos. Veamos cómo crear y utilizar un Eloquent Model:\n2.1 Creación de un Eloquent Model # php artisan make:model Tarea 2.2 Definición de un Eloquent Model # use Illuminate\\Database\\Eloquent\\Model; class Tarea extends Model { protected $fillable = [\u0026#39;nombre\u0026#39;, \u0026#39;descripcion\u0026#39;, \u0026#39;completada\u0026#39;]; } 2.3 Uso de Eloquent Model # // Crear una nueva tarea $tarea = new Tarea([ \u0026#39;nombre\u0026#39; =\u0026gt; \u0026#39;Realizar presentación\u0026#39;, \u0026#39;descripcion\u0026#39; =\u0026gt; \u0026#39;Preparar la presentación para el seminario.\u0026#39;, \u0026#39;completada\u0026#39; =\u0026gt; false, ]); $tarea-\u0026gt;save(); // Obtener todas las tareas completadas $tareasCompletadas = Tarea::where(\u0026#39;completada\u0026#39;, true)-\u0026gt;get(); 3. Seeders # Los Seeders permiten la inserción masiva de datos de prueba en la base de datos. Son útiles para poblar la base de datos con información falsa para pruebas y desarrollo:\n3.1 Creación de un Seeder # php artisan make:seeder TareasTableSeeder 3.2 Definición de un Seeder # use Illuminate\\Database\\Seeder; class TareasTableSeeder extends Seeder { public function run() { factory(App\\Tarea::class, 10)-\u0026gt;create(); } } 3.3 Ejecución de un Seeder # php artisan db:seed --class=TareasTableSeeder 4. Factories # Las Factories son generadores de datos que permiten crear registros de prueba de manera controlada. Son especialmente útiles para crear datos falsos coherentes y diversificados:\n4.1 Creación de una Factory # php artisan make:factory TareaFactory 4.2 Definición de una Factory # use Illuminate\\Database\\Eloquent\\Factories\\Factory; class TareaFactory extends Factory { protected $model = Tarea::class; public function definition() { return [ \u0026#39;nombre\u0026#39; =\u0026gt; $this-\u0026gt;faker-\u0026gt;sentence, \u0026#39;descripcion\u0026#39; =\u0026gt; $this-\u0026gt;faker-\u0026gt;paragraph, \u0026#39;completada\u0026#39; =\u0026gt; $this-\u0026gt;faker-\u0026gt;boolean, ]; } } 4.3 Uso de una Factory # // Crear una sola tarea utilizando la Factory $tarea = Tarea::factory()-\u0026gt;create(); // Crear múltiples tareas utilizando la Factory $tareas = Tarea::factory()-\u0026gt;count(5)-\u0026gt;create(); Recursos # Base de datos # Documentación oficial # https://laravel.com/docs/10.x/database\nhttps://laravel.com/docs/10.x/migrations\n","date":"9 marzo 2023","permalink":"/platform/nivel4/3/","section":"Nivel4s","summary":"Resumen: En el emocionante mundo del desarrollo web con Laravel, el manejo de bases de datos es fundamental.","title":"Explorando Eloquent Models, Seeders y Factories en Laravel"},{"content":"Resumen: La autenticación es un componente esencial en muchas aplicaciones web modernas. En este artículo, exploraremos cómo implementar un sistema de autenticación seguro utilizando el marco de trabajo Laravel. A través de ejemplos y pasos prácticos, aprenderán a crear sistemas de registro, inicio de sesión y administración de usuarios en sus aplicaciones web.\n1. Introducción a la Autenticación en Laravel # La autenticación es el proceso de verificar la identidad de un usuario y permitir o denegar su acceso a recursos protegidos. Laravel proporciona un sistema completo de autenticación listo para usar que hace que implementar la autenticación en una aplicación web sea eficiente y seguro.\n2. Configuración Básica de la Autenticación # 2.1 Generación de Autenticación # Laravel ofrece comandos para generar vistas, controladores y rutas para la autenticación:\nphp artisan make:auth Esto generará las vistas y los controladores necesarios para el registro y el inicio de sesión.\n2.2 Protección de Rutas # Laravel permite proteger rutas para que solo los usuarios autenticados puedan acceder a ellas:\nRoute::get(\u0026#39;/perfil\u0026#39;, \u0026#39;PerfilController@index\u0026#39;)-\u0026gt;middleware(\u0026#39;auth\u0026#39;); 3. Registro y Autenticación de Usuarios # 3.1 Registro de Usuarios # Laravel proporciona rutas y controladores para el registro de nuevos usuarios. Las vistas generadas contienen formularios de registro y lógica para crear usuarios en la base de datos.\n3.2 Inicio de Sesión de Usuarios # El sistema de autenticación de Laravel también incluye rutas y controladores para el inicio de sesión de usuarios. Las vistas generadas contienen formularios de inicio de sesión y lógica para verificar las credenciales.\n4. Gestión de Sesiones y Usuarios # 4.1 Sesiones y Cookies # Laravel maneja automáticamente la creación y gestión de sesiones y cookies para el usuario autenticado.\n4.2 Cierre de Sesión # Laravel proporciona una ruta y lógica para permitir a los usuarios cerrar sesión de manera segura:\npublic function logout(Request $request) { Auth::logout(); $request-\u0026gt;session()-\u0026gt;invalidate(); $request-\u0026gt;session()-\u0026gt;regenerateToken(); return redirect(\u0026#39;/\u0026#39;); } 5. Práctica Guiada: Implementación de Autenticación # Para aplicar lo aprendido, pueden emprender un emocionante proyecto práctico: implementar un sistema de autenticación seguro en una aplicación web utilizando Laravel. Algunos pasos clave incluyen:\nGenerar las vistas y controladores de autenticación. Personalizar las vistas de registro e inicio de sesión. Proteger rutas y recursos sensibles con middleware de autenticación. Recursos # Documentación oficial # https://laravel.com/docs/10.x/authentication#main-content\n","date":"9 marzo 2023","permalink":"/platform/nivel4/9/","section":"Nivel4s","summary":"Resumen: La autenticación es un componente esencial en muchas aplicaciones web modernas.","title":"Explorando la Autenticación en Laravel: Creación de Sistemas de Acceso Seguro"},{"content":"Resumen: Los middlewares son una parte fundamental en el desarrollo web con Laravel. Permiten el filtrado y procesamiento de solicitudes HTTP antes de que lleguen a los controladores y la manipulación de respuestas antes de ser enviadas al cliente. En este artículo, exploraremos en detalle los middlewares en Laravel y cómo se pueden utilizar para mejorar la seguridad, la autenticación y la manipulación de datos en una aplicación web.\n1. Introducción a Middlewares # Los middlewares son capas intermedias que se encuentran entre las solicitudes del cliente y las respuestas del servidor. Proporcionan un mecanismo para realizar tareas como autenticación, validación de datos, transformación de datos y más, antes de que la solicitud llegue a su destino final.\n2. Creación de Middlewares # En Laravel, se pueden crear middlewares personalizados utilizando el comando make:middleware. Veamos cómo crear un middleware que verifique si un usuario tiene permiso para acceder a cierta ruta:\nphp artisan make:middleware VerificarPermisos Luego, en el middleware VerificarPermisos, se puede implementar la lógica de verificación de permisos antes de que la solicitud continúe hacia el controlador.\n3. Asignación de Middlewares # Los middlewares pueden ser asignados a rutas específicas o a grupos de rutas en el archivo de rutas web.php o api.php.\nRoute::get(\u0026#39;/perfil\u0026#39;, \u0026#39;PerfilController@index\u0026#39;)-\u0026gt;middleware(\u0026#39;auth\u0026#39;); // Middleware de autenticación Route::post(\u0026#39;/publicar\u0026#39;, \u0026#39;PublicacionController@store\u0026#39;)-\u0026gt;middleware([\u0026#39;auth\u0026#39;, \u0026#39;verificar.permisos\u0026#39;]); // Varios middlewares 4. Middlewares Globales # Laravel también permite la definición de middlewares globales que se aplicarán a todas las solicitudes entrantes. Esto es útil para tareas como la configuración de encabezados de seguridad.\n5. Middleware en Grupos de Rutas # Los middlewares pueden agruparse y asignarse a múltiples rutas al mismo tiempo. Esto es especialmente útil cuando se necesita aplicar el mismo middleware a varias rutas relacionadas.\nRoute::middleware([\u0026#39;auth\u0026#39;])-\u0026gt;group(function () { Route::get(\u0026#39;/dashboard\u0026#39;, \u0026#39;DashboardController@index\u0026#39;); Route::get(\u0026#39;/perfil\u0026#39;, \u0026#39;PerfilController@index\u0026#39;); // ... más rutas protegidas ... }); 6. Práctica Guiada: Implementación de Autenticación Avanzada # Para poner en práctica lo aprendido, pueden emprender un emocionante proyecto práctico: implementar un sistema de autenticación avanzada utilizando middlewares en Laravel. Algunas tareas incluyen:\nCrear middlewares para verificar roles y permisos de usuario. Implementar autenticación de dos factores con middlewares. Proteger rutas y recursos sensibles utilizando middlewares de autenticación. Recursos # https://laravel.com/docs/10.x/middleware\n","date":"9 marzo 2023","permalink":"/platform/nivel4/6/","section":"Nivel4s","summary":"Resumen: Los middlewares son una parte fundamental en el desarrollo web con Laravel.","title":"Explorando Middlewares en Laravel: Gestión Avanzada de Solicitudes y Respuestas"},{"content":"Resumen: En el vasto panorama del desarrollo web, comprender cómo manejar las rutas y los controladores es esencial para construir aplicaciones sólidas y eficientes. Laravel, un marco de trabajo PHP de renombre, proporciona un sistema robusto para gestionar las solicitudes HTTP a través de rutas y controladores. Este artículo se sumerge en los fundamentos de las rutas y los controladores en Laravel, brindando a la oportunidad de practicar intensamente a lo largo del día. A través de ejemplos prácticos y ejercicios desafiantes, adquirirán un conocimiento sólido de cómo diseñar y manipular las rutas y los controladores en sus proyectos.\n1. Introducción a Rutas y Controladores en Laravel # Las rutas y los controladores son componentes esenciales de cualquier aplicación web. En el contexto de Laravel, las rutas definen cómo se deben manejar las solicitudes HTTP y los controladores contienen la lógica que responde a esas solicitudes. Comprender cómo diseñar y organizar eficazmente estas partes es fundamental para el éxito del desarrollo.\n2. Configuración del Entorno # Antes de sumergirse en la creación de rutas y controladores, es crucial establecer un entorno de desarrollo adecuado. Asegúrese de tener instalado PHP, Composer y Laravel, siguiendo los pasos descritos en la sección \u0026ldquo;Configuración del Entorno\u0026rdquo; del artículo anterior.\n3. Creación de Rutas # Laravel facilita la definición de rutas a través del archivo routes/web.php. Veamos cómo crear rutas básicas y parametrizadas:\n3.1 Rutas Básicas # Route::get(\u0026#39;/\u0026#39;, function () { return \u0026#39;¡Bienvenido a mi sitio web!\u0026#39;; }); 3.2 Rutas Parametrizadas # Route::get(\u0026#39;/usuario/{id}\u0026#39;, function ($id) { return \u0026#34;Mostrando detalles del usuario con ID: \u0026#34; . $id; }); 4. Introducción a Controladores # Los controladores permiten separar la lógica de manejo de solicitudes del archivo de rutas, lo que resulta en un código más limpio y mantenible. Veamos cómo crear y usar controladores en Laravel:\n4.1 Creación de un Controlador # php artisan make:controller UsuarioController 4.2 Definición de Métodos en el Controlador # class UsuarioController extends Controller { public function mostrar($id) { return \u0026#34;Mostrando detalles del usuario con ID: \u0026#34; . $id; } } 4.3 Uso de Controladores en Rutas # use App\\Http\\Controllers\\UsuarioController; Route::get(\u0026#39;/usuario/{id}\u0026#39;, [UsuarioController::class, \u0026#39;mostrar\u0026#39;]); Recursos # Rutas # Documentación: https://laravel.com/docs/10.x/routing\nControladores # Documentación: https://laravel.com/docs/10.x/controllers#main-content\n","date":"9 marzo 2023","permalink":"/platform/nivel4/2/","section":"Nivel4s","summary":"Resumen: En el vasto panorama del desarrollo web, comprender cómo manejar las rutas y los controladores es esencial para construir aplicaciones sólidas y eficientes.","title":"Explorando Rutas y Controladores en Laravel"},{"content":"React Js # ¿Que es React Js? # Una biblioteca de JavaScript para construir interfaces de usuario Comienza Haz el tutorial.\nDeclarativo # React te ayuda a crear interfaces de usuario interactivas de forma sencilla. Diseña vistas simples para cada estado en tu aplicación, y React se encargará de actualizar y renderizar de manera eficiente los componentes correctos cuando los datos cambien.\nLas vistas declarativas hacen que tu código sea más predecible, por lo tanto, fácil de depurar.\nBasado en componentes # Crea componentes encapsulados que manejen su propio estado, y conviértelos en interfaces de usuario complejas.\nYa que la lógica de los componentes está escrita en JavaScript y no en plantillas, puedes pasar datos de forma sencilla a través de tu aplicación y mantener el estado fuera del DOM.\nAprende una vez, escríbelo donde sea # En React no dejamos fuera al resto de tus herramientas tecnológicas, así que podrás desarrollar nuevas características sin necesidad de volver a escribir el código existente.\nReact puede también renderizar desde el servidor usando Node, así como potencializar aplicaciones móviles usando React Native.\n¿Que es React Js y como funciona? # Estructura # ¿Que es JSX? # Considera la declaración de esta variable:\nconst element = \u0026lt;h1\u0026gt;Hello, world!\u0026lt;/h1\u0026gt;; Esta curiosa sintaxis de etiquetas no es ni un string ni HTML.\nSe llama JSX, y es una extensión de la sintaxis de JavaScript. Recomendamos usarlo con React para describir cómo debería ser la interfaz de usuario. JSX puede recordarte a un lenguaje de plantillas, pero viene con todo el poder de JavaScript.\nJSX produce “elementos” de React. Exploraremos como renderizarlos en el DOM en la siguiente sección. A continuación puedes encontrar lo básico de JSX que será necesario para empezar.\n¿Por qué JSX? # React acepta el hecho de que la lógica de renderizado está intrínsecamente unida a la lógica de la interfaz de usuario: cómo se manejan los eventos, cómo cambia el estado con el tiempo y cómo se preparan los datos para su visualización.\nEn lugar de separar artificialmente tecnologías poniendo el maquetado y la lógica en archivos separados, React separa intereses con unidades ligeramente acopladas llamadas “componentes” que contienen ambas. Volveremos a los componentes en otra sección, pero si aún no te sientes cómodo maquetando en JS, esta charla podría convencerte de lo contrario.\nReact no requiere usar JSX, pero la mayoría de la gente lo encuentra útil como ayuda visual cuando trabajan con interfaz de usuario dentro del código Javascript. Esto también permite que React muestre mensajes de error o advertencia más útiles.\nInsertando expresiones en JSX # En el ejemplo a continuación, declaramos una variable llamada name y luego la usamos dentro del JSX envolviéndola dentro de llaves:\nconst name = \u0026#39;Josh Perez\u0026#39;; const element = \u0026lt;h1\u0026gt;Hello, {name}\u0026lt;/h1\u0026gt;; Puedes poner cualquier expresión de JavaScript dentro de llaves en JSX. Por ejemplo, 2 + 2, user.firstName, o formatName(user) son todas expresiones válidas de Javascript.\nEn el ejemplo a continuación, insertamos el resultado de llamar la función de JavaScript, formatName(user), dentro de un elemento \u0026lt;h1\u0026gt;.\nfunction formatName(user) { return user.firstName + \u0026#39; \u0026#39; + user.lastName; } const user = { firstName: \u0026#39;Harper\u0026#39;, lastName: \u0026#39;Perez\u0026#39; }; const element = ( \u0026lt;h1\u0026gt; Hello, {formatName(user)}! \u0026lt;/h1\u0026gt; ); Dividimos JSX en varias líneas para facilitar la lectura. Aunque no es necesario, cuando hagas esto también te recomendamos envolverlo entre paréntesis para evitar errores por la inserción automática del punto y coma.\nJSX también es una expresión # Después de compilarse, las expresiones JSX se convierten en llamadas a funciones JavaScript regulares y se evalúan en objetos JavaScript.\nEsto significa que puedes usar JSX dentro de declaraciones if y bucles for, asignarlo a variables, aceptarlo como argumento, y retornarlo desde dentro de funciones:\nfunction getGreeting(user) { if (user) { return \u0026lt;h1\u0026gt;Hello, {formatName(user)}!\u0026lt;/h1\u0026gt;; } return \u0026lt;h1\u0026gt;Hello, Stranger.\u0026lt;/h1\u0026gt;;} Especificando atributos con JSX # Puedes utilizar comillas para especificar strings literales como atributos:\nconst element = \u0026lt;a href=\u0026#34;https://www.reactjs.org\u0026#34;\u0026gt; link \u0026lt;/a\u0026gt;; También puedes usar llaves para insertar una expresión JavaScript en un atributo:\nconst element = \u0026lt;img src={user.avatarUrl}\u0026gt;\u0026lt;/img\u0026gt;; No pongas comillas rodeando llaves cuando insertes una expresión JavaScript en un atributo. Debes utilizar comillas (para los valores de los strings) o llaves (para las expresiones), pero no ambas en el mismo atributo.\nAdvertencia: # Dado que JSX es más cercano a JavaScript que a HTML, React DOM usa la convención de nomenclatura camelCase en vez de nombres de atributos HTML. Por ejemplo, class se vuelve className en JSX, y tabindex se vuelve tabIndex. Instalacion React Js # 1. Veamos una forma sencilla de instalar React JS bajo el SO Windows 10 # Para instalar React JS debemos tener instalado nodejs y ejecutar algunos comandos sencillos veamos la instalación paso a paso en este tutorial fácil\n2. Pasos para instalar React JS # Instalar Node JS. Aqui buscamos la página oficial de NodeJS y descargamos la version recomendada luego procedemos a realizar la instalación con simples clics Levantamos la ventana de Comando de Windows CMD y ejecutamos las siguientes instrucciones o comandos. node \u0026ndash;version.- Verificamos la instalación npm \u0026ndash;version.- Verificamos que se haya instalado correctamente el gestor de dependencias de Javascript npx create-react-app miaplicacion.- Con este comando iniciamos la instalación de un proyecto con React JS. cd miaplicacion .- Ingresamos al directorio de la aplicación npm start.- Finalmente iniamos la compilación del proyecto para visualizarlo en un navegador web\nComo Instalar React JS en Windows # ","date":"9 marzo 2023","permalink":"/platform/nivel2/1/","section":"Nivel2s","summary":"React Js # ¿Que es React Js?","title":"Intro"},{"content":"Intro AWS IAM # Introducción: AWS Identity and Access Management (IAM) es un servicio de administración de identidades y accesos que proporciona un control granular sobre los recursos de Amazon Web Services (AWS). IAM permite gestionar usuarios, grupos y roles, y asignar permisos para acceder a los diferentes servicios de AWS de forma segura. En esta lección completa, exploraremos los conceptos fundamentales y las mejores prácticas relacionadas con IAM.\n¿Qué es IAM y por qué es importante? IAM es el servicio de gestión de identidades y accesos de AWS, que permite controlar quién tiene acceso a los recursos de la nube y qué acciones pueden realizar. Es importante porque proporciona seguridad, escalabilidad y control sobre los recursos de AWS al permitir la gestión centralizada de usuarios y sus permisos. Componentes clave de IAM: Usuarios: Representan a las personas u entidades que interactúan con AWS y se autentican mediante credenciales. Se les asignan políticas para definir los permisos. Grupos: Contienen varios usuarios y permiten aplicar políticas comunes a un conjunto de usuarios. Roles: Se utilizan para conceder permisos a entidades externas, como servicios de AWS o aplicaciones, en lugar de usuarios individuales. Políticas: Documentos JSON que definen los permisos y acciones permitidas en AWS. Se pueden asignar a usuarios, grupos o roles. Credenciales de seguridad: Incluyen claves de acceso y claves secretas, utilizadas para autenticar y acceder a los recursos de AWS. Escenarios comunes de uso: Control de acceso: IAM permite establecer permisos granulares para usuarios y roles, restringiendo el acceso solo a los recursos necesarios. Federación de identidades: Permite a los usuarios acceder a cuentas de AWS utilizando sus credenciales de identidad corporativa existentes. Acceso programático: IAM proporciona credenciales de acceso seguro para interactuar con servicios de AWS a través de API o SDK. Delegación de permisos: Los roles de IAM permiten que las aplicaciones accedan a los recursos de AWS sin compartir credenciales de seguridad. Mejores prácticas de IAM: Principio de menor privilegio: Otorgar solo los permisos necesarios para realizar una tarea específica. Uso de roles en lugar de usuarios IAM: Para servicios y aplicaciones que requieren acceso a los recursos de AWS, se recomienda el uso de roles en lugar de cuentas de usuario IAM. Implementación de autenticación multifactor (MFA): Reforzando la seguridad de las cuentas de usuario con una capa adicional de autenticación. Revisión periódica de los permisos: Regularmente auditar los permisos asignados para garantizar que sigan siendo necesarios y apropiados. Utilización de políticas de acceso condicional: Definir políticas basadas en condiciones, como direcciones IP o fecha y hora, para restringir aún más el acceso. Conclusión: AWS IAM es un componente esencial para garantizar la seguridad y el control de acceso en entornos de nube basados en AWS. Mediante la gestión de usuarios, grupos y roles, y la asignación de permisos mediante políticas, IAM permite una administración granular de los recursos de AWS. Al seguir las mejores prácticas y comprender los conceptos fundamentales de IAM, se puede crear un entorno seguro\nAWS ? # IAM # ","date":"9 marzo 2023","permalink":"/platform/levels/level5_laravel/06aws/intro/","section":"Levels","summary":"Intro AWS IAM # Introducción: AWS Identity and Access Management (IAM) es un servicio de administración de identidades y accesos que proporciona un control granular sobre los recursos de Amazon Web Services (AWS).","title":"Intro a AWS / IAM"},{"content":"Intro Taildwind # Tailwind CSS es un framework de diseño de interfaz de usuario (UI) de código abierto que se basa en clases de utilidad. A diferencia de otros frameworks CSS como Bootstrap o Foundation, Tailwind no se enfoca en componentes predefinidos, sino que proporciona una amplia gama de clases de utilidad que puedes utilizar para construir y diseñar tu propia interfaz de usuario.\nLa instalación de Tailwind CSS es bastante sencilla. Aquí hay una guía paso a paso para la instalación:\nPrimero, debes crear un nuevo proyecto o navegar al directorio del proyecto existente donde deseas instalar Tailwind CSS.\nAbre una terminal en el directorio de tu proyecto y asegúrate de tener Node.js y npm (Node Package Manager) instalados en tu sistema.\nEjecuta el siguiente comando para inicializar un nuevo proyecto de Node.js y generar un archivo package.json si no tienes uno:\nnpm init -y A continuación, instala Tailwind CSS y sus dependencias ejecutando el siguiente comando: npm install tailwindcss Una vez que la instalación se complete, puedes generar un archivo de configuración de Tailwind CSS ejecutando el siguiente comando: npx tailwindcss init Este comando generará un archivo tailwind.config.js en el directorio raíz de tu proyecto. Este archivo de configuración te permitirá personalizar diferentes aspectos de Tailwind CSS, como colores, fuentes, espaciado, variantes de clase, etc.\nAhora, puedes comenzar a utilizar Tailwind CSS en tu proyecto. Puedes importar Tailwind CSS en tu archivo CSS principal o agregarlo como una referencia en el archivo HTML. Por ejemplo, si estás utilizando una herramienta de construcción como webpack o Parcel, puedes importar Tailwind CSS en tu archivo CSS principal de la siguiente manera:\n@import \u0026#39;tailwindcss/base\u0026#39;; @import \u0026#39;tailwindcss/components\u0026#39;; @import \u0026#39;tailwindcss/utilities\u0026#39;; Si no estás utilizando una herramienta de construcción, puedes agregar la referencia a Tailwind CSS en tu archivo HTML de la siguiente manera:\n\u0026lt;link href=\u0026#34;path/to/tailwind.css\u0026#34; rel=\u0026#34;stylesheet\u0026#34;\u0026gt; Una vez que hayas completado estos pasos, estarás listo para comenzar a utilizar Tailwind CSS en tu proyecto y aprovechar su amplia gama de clases de utilidad para diseñar y construir tu interfaz de usuario de manera eficiente.\nTailwind CSS se puede utilizar con los siguientes lenguajes: # HTML: Puedes utilizar las clases de utilidad de Tailwind CSS directamente en tus elementos HTML para aplicar estilos y diseñar tu interfaz de usuario.\nCSS: Tailwind CSS está construido sobre CSS, por lo que puedes combinarlo con CSS personalizado para crear estilos específicos o anular los estilos generados por Tailwind.\nJavaScript: Tailwind CSS no requiere JavaScript para funcionar, pero se puede utilizar junto con frameworks y bibliotecas de JavaScript, como React, Vue.js o Angular, para crear componentes interactivos y dinámicos.\nAdemás de estos lenguajes, Tailwind CSS también puede ser utilizado en combinación con herramientas de construcción como webpack o Parcel, que te permiten compilar y optimizar tu código CSS antes de desplegarlo en producción.\nEn resumen, Tailwind CSS es compatible con HTML, CSS y JavaScript, y se puede integrar fácilmente en proyectos web independientemente del lenguaje de programación principal que estés utilizando.\n¿Qué es BACKEND y FRONTEND? # Los roles en backend # ","date":"9 marzo 2023","permalink":"/platform/levels/level5_laravel/01taildwind/intro/","section":"Levels","summary":"Intro Taildwind # Tailwind CSS es un framework de diseño de interfaz de usuario (UI) de código abierto que se basa en clases de utilidad.","title":"Intro Taildwind"},{"content":"Resumen: Amazon Web Services (AWS) es una plataforma de servicios en la nube líder en la industria que ofrece una amplia gama de recursos y soluciones para satisfacer las necesidades de empresas y desarrolladores. En este artículo, exploraremos una introducción completa a AWS, desde sus beneficios clave hasta una descripción general de algunos de sus servicios más populares.\n1. ¿Qué es Amazon Web Services (AWS)? # Amazon Web Services (AWS) es una plataforma de servicios en la nube ofrecida por Amazon que permite a individuos, empresas y organizaciones acceder y utilizar una amplia variedad de recursos y servicios de tecnología de la información a través de Internet.\n2. Beneficios de Utilizar AWS # 2.1 Escalabilidad y Elasticidad # AWS permite escalar recursos de acuerdo con las necesidades cambiantes de la aplicación, lo que garantiza un rendimiento óptimo en todo momento.\n2.2 Pago por Uso # Con AWS, solo se paga por los recursos y servicios que se utilizan, lo que reduce los costos operativos y permite un uso eficiente de los recursos.\n2.3 Variedad de Servicios # AWS ofrece una amplia gama de servicios, desde cómputo y almacenamiento hasta análisis, inteligencia artificial, aprendizaje automático y más.\n2.4 Disponibilidad y Durabilidad # AWS garantiza alta disponibilidad y durabilidad de los datos a través de múltiples zonas de disponibilidad y copias de seguridad automatizadas.\n3. Servicios Destacados de AWS # 3.1 Amazon EC2 (Elastic Compute Cloud) # Amazon EC2 proporciona instancias de máquinas virtuales escalables y personalizables para ejecutar aplicaciones y servicios.\n3.2 Amazon S3 (Simple Storage Service) # Amazon S3 ofrece almacenamiento escalable y seguro en la nube para archivos, imágenes, videos y otros datos.\n3.3 Amazon RDS (Relational Database Service) # Amazon RDS facilita la creación, administración y escalabilidad de bases de datos relacionales en la nube.\n3.4 AWS Lambda # AWS Lambda permite ejecutar código sin aprovisionar ni administrar servidores, lo que facilita la creación de aplicaciones sin servidor.\n3.5 Amazon DynamoDB # Amazon DynamoDB es una base de datos NoSQL que ofrece un rendimiento rápido y escalabilidad automática.\n4. Creación de una Cuenta de AWS # 4.1 Creación de una Cuenta Gratuita de AWS # Los nuevos usuarios pueden crear una cuenta gratuita de AWS para explorar y probar los servicios durante un período inicial sin incurrir en cargos.\nConclusión # En este artículo, hemos explorado una introducción completa a Amazon Web Services (AWS), destacando sus beneficios clave y describiendo algunos de sus servicios más populares. AWS ofrece una plataforma poderosa y versátil para alojar aplicaciones y servicios en la nube, lo que brinda a las empresas y desarrolladores la flexibilidad y escalabilidad necesarias para el éxito empresarial.\nA medida que continúen explorando y practicando con AWS, estarán mejor preparados para utilizar esta potente plataforma en la nube para una variedad de casos de uso. Aprovechen esta valiosa información y sigan construyendo sus habilidades en el uso de Amazon Web Services. ¡Sigan adelante y construyan soluciones en la nube innovadoras y exitosas!\nRecursos # Documentación oficial # https://www.youtube.com/watch?v=EDfV2zJOBPA\u0026list=PLdOotbFwzDIgjeTHvCSLiGmKKzTpDsLLI\nhttps://aws.amazon.com/es/getting-started/\n","date":"9 marzo 2023","permalink":"/platform/nivel4/12/","section":"Nivel4s","summary":"Resumen: Amazon Web Services (AWS) es una plataforma de servicios en la nube líder en la industria que ofrece una amplia gama de recursos y soluciones para satisfacer las necesidades de empresas y desarrolladores.","title":"Introducción a Amazon Web Services (AWS): Potenciando la Nube para el Éxito Empresarial"},{"content":"Resumen: En este artículo, exploraremos cómo construir una API RESTful utilizando el marco de trabajo Laravel, centrándonos en los conceptos esenciales y pasos fundamentales para crear una API funcional sin detallar la configuración del entorno. A través de ejemplos prácticos, obtendrán una comprensión sólida de los componentes clave para construir una API RESTful con Laravel.\n1. ¿Qué es una API RESTful? # Una API RESTful (Representational State Transfer) es una interfaz de programación de aplicaciones que utiliza los métodos HTTP para permitir la comunicación entre aplicaciones. Proporciona un conjunto de endpoints que permiten realizar operaciones CRUD (Crear, Leer, Actualizar, Eliminar) en recursos específicos.\n2. Conceptos Fundamentales # 2.1 Rutas y Endpoints # En Laravel, las rutas se definen en el archivo routes/api.php. Cada ruta se mapea a un controlador que manejará la lógica de la API.\nRoute::get(\u0026#39;/usuarios\u0026#39;, \u0026#39;UsuarioController@index\u0026#39;); // Obtener lista de usuarios Route::get(\u0026#39;/usuarios/{id}\u0026#39;, \u0026#39;UsuarioController@show\u0026#39;); // Obtener un usuario por ID Route::post(\u0026#39;/usuarios\u0026#39;, \u0026#39;UsuarioController@store\u0026#39;); // Crear un nuevo usuario Route::put(\u0026#39;/usuarios/{id}\u0026#39;, \u0026#39;UsuarioController@update\u0026#39;); // Actualizar un usuario existente Route::delete(\u0026#39;/usuarios/{id}\u0026#39;, \u0026#39;UsuarioController@destroy\u0026#39;); // Eliminar un usuario 2.2 Controladores # Los controladores manejan las solicitudes HTTP y contienen la lógica para realizar operaciones en la base de datos.\nclass UsuarioController extends Controller { public function index() { $usuarios = Usuario::all(); return response()-\u0026gt;json($usuarios); } public function show($id) { $usuario = Usuario::find($id); return response()-\u0026gt;json($usuario); } public function store(Request $request) { $usuario = new Usuario([ \u0026#39;nombre\u0026#39; =\u0026gt; $request-\u0026gt;input(\u0026#39;nombre\u0026#39;), // ... más campos ... ]); $usuario-\u0026gt;save(); return response()-\u0026gt;json($usuario, 201); } // Métodos update y destroy similares... } 3. Autenticación y Seguridad # La autenticación y la seguridad son aspectos cruciales de cualquier API. Laravel ofrece diversas formas de proteger los endpoints, como autenticación basada en tokens o mediante el uso de OAuth2.\n4. Práctica Guiada: Creación de una API de Tareas # Para practicar la construcción de una API RESTful, podemos crear una API simple para gestionar tareas. Aquí están los pasos clave:\nDefinir las rutas en routes/api.php. Crear un controlador TareaController para manejar las operaciones CRUD. Implementar los métodos en el controlador para indexar, mostrar, almacenar, actualizar y eliminar tareas. Probar y consumir la API utilizando herramientas como Postman. Recursos # Documentación oficial # https://laravel.com/docs/10.x/requests\nhttps://laravel.com/docs/10.x/responses\n","date":"9 marzo 2023","permalink":"/platform/nivel4/5/","section":"Nivel4s","summary":"Resumen: En este artículo, exploraremos cómo construir una API RESTful utilizando el marco de trabajo Laravel, centrándonos en los conceptos esenciales y pasos fundamentales para crear una API funcional sin detallar la configuración del entorno.","title":"Introducción a la Construcción de una API RESTful con Laravel"},{"content":"Resumen: En el mundo actual del desarrollo web, es esencial que de informática adquieran habilidades prácticas en marcos de trabajo modernos. Laravel, un popular marco de trabajo de código abierto basado en PHP, ha ganado reconocimiento por su elegante sintaxis, amplias características y comunidad activa. Este artículo tiene como objetivo proporcionar una introducción práctica a Laravel para estudiantes, permitiéndoles practicar y desarrollar sus habilidades durante todo el día. Exploraremos los conceptos fundamentales de Laravel a través de ejemplos concretos y ejercicios prácticos.\n1. Introducción a Laravel # Laravel es un marco de trabajo de desarrollo web que sigue el patrón de arquitectura Modelo-Vista-Controlador (MVC). Su diseño orientado a la simplicidad y la legibilidad del código ha llevado a su popularidad en la comunidad de desarrollo. Antes de sumergirnos en ejemplos prácticos, es crucial comprender algunos conceptos clave:\n1.1 Modelo-Vista-Controlador (MVC) # MVC es un patrón de diseño arquitectónico que separa la aplicación en tres componentes principales:\nModelo: Representa la estructura y lógica de los datos de la aplicación. Vista: Maneja la presentación y la interfaz de usuario. Controlador: Gestiona las solicitudes del usuario y coordina las interacciones entre el Modelo y la Vista. 1.2 Composición de Laravel # Laravel se basa en una variedad de componentes que simplifican el desarrollo web, como el enrutamiento, las migraciones de base de datos, el sistema de plantillas Blade y el manejo de solicitudes HTTP.\n2. Configuración del Entorno # Antes de comenzar a trabajar con Laravel, es esencial configurar adecuadamente el entorno de desarrollo. Para ello, necesitamos instalar PHP, Composer y Laravel. A continuación, se detallan los pasos:\nInstalación de PHP: Descarga e instala la última versión de PHP desde php.net.\nInstalación de Composer: Composer es un administrador de paquetes de PHP que facilita la gestión de dependencias. Sigue las instrucciones en getcomposer.org para instalar Composer.\nInstalación de Laravel: Abre una terminal y ejecuta el siguiente comando para instalar Laravel de forma global:\ncomposer global require laravel/installer 3. Creación de un Proyecto Laravel # Una vez que hayas configurado el entorno, estás listo para crear tu primer proyecto Laravel. Abre una terminal y sigue estos pasos:\nNavega a la ubicación deseada para tu proyecto y ejecuta el siguiente comando para crear un nuevo proyecto Laravel llamado \u0026ldquo;MiProyecto\u0026rdquo;: laravel new MiProyecto Cambia al directorio del proyecto: cd MiProyecto 4. Rutas y Controladores # En Laravel, las rutas y los controladores son fundamentales para manejar las solicitudes HTTP y organizar la lógica de la aplicación. Consideremos un ejemplo sencillo de cómo crear una ruta y un controlador:\nCrea una nueva ruta en el archivo routes/web.php: Route::get(\u0026#39;/saludo\u0026#39;, \u0026#39;SaludoController@index\u0026#39;); Crea un controlador llamado SaludoController con el siguiente comando: php artisan make:controller SaludoController Abre el archivo app/Http/Controllers/SaludoController.php y define el método index: public function index() { return \u0026#39;¡Hola, bienvenido a mi sitio web!\u0026#39;; } Ahora, cuando accedas a la URL http://localhost:8000/saludo, verás el mensaje de saludo.\n5. Vistas y Plantillas Blade # Las vistas permiten presentar contenido al usuario, y Laravel utiliza el motor de plantillas Blade para facilitar la creación de vistas. Veamos cómo crear y renderizar una vista:\nCrea una nueva vista en resources/views/saludo.blade.php con el siguiente contenido: \u0026lt;!DOCTYPE html\u0026gt; \u0026lt;html\u0026gt; \u0026lt;head\u0026gt; \u0026lt;title\u0026gt;Saludo\u0026lt;/title\u0026gt; \u0026lt;/head\u0026gt; \u0026lt;body\u0026gt; \u0026lt;h1\u0026gt;{{ $mensaje }}\u0026lt;/h1\u0026gt; \u0026lt;/body\u0026gt; \u0026lt;/html\u0026gt; Modifica el método index en SaludoController.php para renderizar la vista: public function index() { $mensaje = \u0026#39;¡Hola, bienvenido a mi sitio web!\u0026#39;; return view(\u0026#39;saludo\u0026#39;, compact(\u0026#39;mensaje\u0026#39;)); } Visita http://localhost:8000/saludo nuevamente para ver la vista renderizada.\nConclusión # En este artículo, hemos explorado los conceptos básicos de Laravel a través de ejemplos prácticos y ejercicios. Hemos cubierto la configuración del entorno, la creación de un proyecto Laravel, la definición de rutas y controladores, y la creación de vistas con Blade. Estos fundamentos sientan las bases para que puedan practicar y desarrollar sus habilidades en Laravel durante todo el día. A medida que adquieran más experiencia, podrán explorar características avanzadas como las migraciones de bases de datos, el manejo de autenticación y la creación de API. ¡Continúa explorando y expandiendo tus conocimientos en el emocionante mundo de Laravel!\nRecursos # Primeros pasos # Estensiones útiles # https://laravel.com/docs/10.x\n","date":"9 marzo 2023","permalink":"/platform/nivel4/1/","section":"Nivel4s","summary":"Resumen: En el mundo actual del desarrollo web, es esencial que de informática adquieran habilidades prácticas en marcos de trabajo modernos.","title":"Introducción a Laravel"},{"content":"¿Que es React Js? # Una biblioteca de JavaScript para construir interfaces de usuario Comienza Haz el tutorial.\nDeclarativo # React te ayuda a crear interfaces de usuario interactivas de forma sencilla. Diseña vistas simples para cada estado en tu aplicación, y React se encargará de actualizar y renderizar de manera eficiente los componentes correctos cuando los datos cambien.\nLas vistas declarativas hacen que tu código sea más predecible, por lo tanto, fácil de depurar.\nBasado en componentes # Crea componentes encapsulados que manejen su propio estado, y conviértelos en interfaces de usuario complejas.\nYa que la lógica de los componentes está escrita en JavaScript y no en plantillas, puedes pasar datos de forma sencilla a través de tu aplicación y mantener el estado fuera del DOM.\nAprende una vez, escríbelo donde sea # En React no dejamos fuera al resto de tus herramientas tecnológicas, así que podrás desarrollar nuevas características sin necesidad de volver a escribir el código existente.\nReact puede también renderizar desde el servidor usando Node, así como potencializar aplicaciones móviles usando React Native.\n¿Que es React Js y como funciona? # Estructura # ¿Que es JSX? # Considera la declaración de esta variable:\nconst element = \u0026lt;h1\u0026gt;Hello, world!\u0026lt;/h1\u0026gt;; Esta curiosa sintaxis de etiquetas no es ni un string ni HTML.\nSe llama JSX, y es una extensión de la sintaxis de JavaScript. Recomendamos usarlo con React para describir cómo debería ser la interfaz de usuario. JSX puede recordarte a un lenguaje de plantillas, pero viene con todo el poder de JavaScript.\nJSX produce “elementos” de React. Exploraremos como renderizarlos en el DOM en la siguiente sección. A continuación puedes encontrar lo básico de JSX que será necesario para empezar.\n¿Por qué JSX? # React acepta el hecho de que la lógica de renderizado está intrínsecamente unida a la lógica de la interfaz de usuario: cómo se manejan los eventos, cómo cambia el estado con el tiempo y cómo se preparan los datos para su visualización.\nEn lugar de separar artificialmente tecnologías poniendo el maquetado y la lógica en archivos separados, React separa intereses con unidades ligeramente acopladas llamadas “componentes” que contienen ambas. Volveremos a los componentes en otra sección, pero si aún no te sientes cómodo maquetando en JS, esta charla podría convencerte de lo contrario.\nReact no requiere usar JSX, pero la mayoría de la gente lo encuentra útil como ayuda visual cuando trabajan con interfaz de usuario dentro del código Javascript. Esto también permite que React muestre mensajes de error o advertencia más útiles.\nInsertando expresiones en JSX # En el ejemplo a continuación, declaramos una variable llamada name y luego la usamos dentro del JSX envolviéndola dentro de llaves:\nconst name = \u0026#34;Josh Perez\u0026#34;; const element = \u0026lt;h1\u0026gt;Hello, {name}\u0026lt;/h1\u0026gt;; Puedes poner cualquier expresión de JavaScript dentro de llaves en JSX. Por ejemplo, 2 + 2, user.firstName, o formatName(user) son todas expresiones válidas de Javascript.\nEn el ejemplo a continuación, insertamos el resultado de llamar la función de JavaScript, formatName(user), dentro de un elemento \u0026lt;h1\u0026gt;.\nfunction formatName(user) { return user.firstName + \u0026#34; \u0026#34; + user.lastName; } const user = { firstName: \u0026#34;Harper\u0026#34;, lastName: \u0026#34;Perez\u0026#34;, }; const element = \u0026lt;h1\u0026gt;Hello, {formatName(user)}! \u0026lt;/h1\u0026gt;; Dividimos JSX en varias líneas para facilitar la lectura. Aunque no es necesario, cuando hagas esto también te recomendamos envolverlo entre paréntesis para evitar errores por la inserción automática del punto y coma.\nJSX también es una expresión # Después de compilarse, las expresiones JSX se convierten en llamadas a funciones JavaScript regulares y se evalúan en objetos JavaScript.\nEsto significa que puedes usar JSX dentro de declaraciones if y bucles for, asignarlo a variables, aceptarlo como argumento, y retornarlo desde dentro de funciones:\nfunction getGreeting(user) { if (user) { return \u0026lt;h1\u0026gt;Hello, {formatName(user)}!\u0026lt;/h1\u0026gt;; } return \u0026lt;h1\u0026gt;Hello, Stranger.\u0026lt;/h1\u0026gt;; } Especificando atributos con JSX # Puedes utilizar comillas para especificar strings literales como atributos:\nconst element = \u0026lt;a href=\u0026#34;https://www.reactjs.org\u0026#34;\u0026gt; link \u0026lt;/a\u0026gt;; También puedes usar llaves para insertar una expresión JavaScript en un atributo:\nconst element = \u0026lt;img src={user.avatarUrl}\u0026gt;\u0026lt;/img\u0026gt;; No pongas comillas rodeando llaves cuando insertes una expresión JavaScript en un atributo. Debes utilizar comillas (para los valores de los strings) o llaves (para las expresiones), pero no ambas en el mismo atributo.\nAdvertencia: # Dado que JSX es más cercano a JavaScript que a HTML, React DOM usa la convención de nomenclatura camelCase en vez de nombres de atributos HTML. Por ejemplo, class se vuelve className en JSX, y tabindex se vuelve tabIndex. Instalacion React Js # 1. Veamos una forma sencilla de instalar React JS bajo el SO Windows 10 # Para instalar React JS debemos tener instalado nodejs y ejecutar algunos comandos sencillos veamos la instalación paso a paso en este tutorial fácil\n2. Pasos para instalar React JS # Instalar Node JS. Aqui buscamos la página oficial de NodeJS y descargamos la version recomendada luego procedemos a realizar la instalación con simples clics Levantamos la ventana de Comando de Windows CMD y ejecutamos las siguientes instrucciones o comandos. node \u0026ndash;version.- Verificamos la instalación npm \u0026ndash;version.- Verificamos que se haya instalado correctamente el gestor de dependencias de Javascript npx create-react-app miaplicacion.- Con este comando iniciamos la instalación de un proyecto con React JS. cd miaplicacion .- Ingresamos al directorio de la aplicación npm start.- Finalmente iniamos la compilación del proyecto para visualizarlo en un navegador web\nComo Instalar React JS en Windows # ","date":"9 marzo 2023","permalink":"/platform/levels/level3_react/dia01/intro/","section":"Levels","summary":"¿Que es React Js?","title":"Introducción a ReactJS"},{"content":"","date":"9 marzo 2023","permalink":"/platform/nivel4/","section":"Nivel4s","summary":"","title":"Nivel4s"},{"content":"Resumen: Blade es el poderoso motor de plantillas de Laravel que permite la creación de interfaces web de manera eficiente y elegante. En este artículo, exploraremos las características y funcionalidades clave de Blade, así como su uso en la creación de vistas dinámicas y reutilizables en aplicaciones web Laravel.\n1. Introducción a Blade # Blade es el sistema de plantillas incorporado en Laravel que simplifica la creación de interfaces de usuario al separar la lógica del diseño. Permite a los desarrolladores crear vistas de manera más organizada y legible.\n2. Uso Básico de Blade # 2.1 Sintaxis de Blade # Blade utiliza una sintaxis familiar de PHP con algunas mejoras y atajos. Por ejemplo, para imprimir una variable en Blade:\nBienvenido, {{ $nombre }} 2.2 Estructuras de Control # Blade proporciona estructuras de control familiares como @if, @foreach, @for, @while, etc.:\n@if($usuario-\u0026gt;rol === \u0026#39;admin\u0026#39;) \u0026lt;p\u0026gt;¡Hola Administrador!\u0026lt;/p\u0026gt; @elseif($usuario-\u0026gt;rol === \u0026#39;editor\u0026#39;) \u0026lt;p\u0026gt;Bienvenido Editor.\u0026lt;/p\u0026gt; @else \u0026lt;p\u0026gt;Hola Usuario.\u0026lt;/p\u0026gt; @endif 3. Herencia de Plantillas # 3.1 Definición de Plantillas # Blade permite crear plantillas base que contienen el diseño común de la aplicación. Por ejemplo, en layouts/app.blade.php:\n\u0026lt;!DOCTYPE html\u0026gt; \u0026lt;html\u0026gt; \u0026lt;head\u0026gt; \u0026lt;title\u0026gt;Mi Aplicación\u0026lt;/title\u0026gt; \u0026lt;/head\u0026gt; \u0026lt;body\u0026gt; @yield(\u0026#39;contenido\u0026#39;) \u0026lt;/body\u0026gt; \u0026lt;/html\u0026gt; 3.2 Extender Plantillas # Las vistas pueden extender las plantillas base y llenar el contenido utilizando la directiva @extends y la sección @section:\n@extends(\u0026#39;layouts.app\u0026#39;) @section(\u0026#39;contenido\u0026#39;) \u0026lt;h1\u0026gt;Bienvenido a mi Aplicación\u0026lt;/h1\u0026gt; @endsection 4. Componentes y Inclusiones # Blade permite la creación de componentes reutilizables y su inclusión en múltiples vistas:\n\u0026lt;!-- Componente de Alerta --\u0026gt; @component(\u0026#39;componentes.alerta\u0026#39;) Mensaje de alerta importante. @endcomponent \u0026lt;!-- Inclusión de una vista parcial --\u0026gt; @include(\u0026#39;partials.encabezado\u0026#39;) 5. Directivas de Control # 5.1 Directiva @foreach # @foreach($usuarios as $usuario) \u0026lt;p\u0026gt;{{ $usuario-\u0026gt;nombre }}\u0026lt;/p\u0026gt; @endforeach 5.2 Directiva @if # @if(count($usuarios) \u0026gt; 0) \u0026lt;p\u0026gt;Hay usuarios registrados.\u0026lt;/p\u0026gt; @else \u0026lt;p\u0026gt;No hay usuarios registrados.\u0026lt;/p\u0026gt; @endif 6. Práctica Guiada: Construcción de una Vista Dinámica # Para aplicar lo aprendido, pueden emprender un emocionante proyecto práctico: construir una vista dinámica que muestre una lista de tareas pendientes utilizando Blade en Laravel. Algunos pasos clave incluyen:\nCrear una plantilla base para la aplicación. Extender la plantilla base en una vista específica. Usar estructuras de control para mostrar las tareas pendientes. Utilizar componentes para agregar detalles adicionales a la vista. Recursos # https://laravel.com/docs/10.x/blade\n","date":"9 marzo 2023","permalink":"/platform/nivel4/7/","section":"Nivel4s","summary":"Resumen: Blade es el poderoso motor de plantillas de Laravel que permite la creación de interfaces web de manera eficiente y elegante.","title":"Profundizando en Blade: Plantillas Eficientes en Laravel"},{"content":"Que es el Backend y Su importancia # Que es el Backend # El backend, también conocido como el lado del servidor, se refiere a la parte de un sistema o aplicación informática que se encarga de procesar los datos, realizar cálculos, interactuar con la base de datos y generar las respuestas que son enviadas al cliente o a la interfaz de usuario. Es la parte invisible para los usuarios finales, pero es fundamental para el funcionamiento de cualquier aplicación.\nEl backend se encarga de gestionar la lógica de negocio, la seguridad, la autenticación, la autorización, la gestión de datos y otros aspectos fundamentales de una aplicación. Puede estar compuesto por diferentes componentes, como servidores, bases de datos, APIs (Application Programming Interfaces), frameworks de desarrollo, sistemas de cache, entre otros.\nLa importancia del backend radica en que es responsable de toda la funcionalidad y la lógica detrás de una aplicación. Es el encargado de procesar las solicitudes del usuario, realizar las operaciones necesarias y enviar las respuestas adecuadas. Además, se encarga de gestionar y almacenar los datos de manera segura.\nUn backend sólido y bien diseñado es crucial para garantizar un rendimiento óptimo, una seguridad adecuada, una escalabilidad eficiente y una buena experiencia de usuario. Si el backend no funciona correctamente, puede afectar negativamente la funcionalidad de la aplicación, la seguridad de los datos y la experiencia del usuario.\nEn resumen, el backend es esencial para el funcionamiento de cualquier aplicación y su importancia radica en su capacidad para gestionar la lógica de negocio, los datos y otros aspectos fundamentales, lo que garantiza una aplicación eficiente, segura y con una buena experiencia de usuario.\nRoles de un backend # En el desarrollo de backend, existen varios roles o especialidades que desempeñan diferentes funciones. A continuación, te mencionaré algunos de los roles comunes en el ámbito del backend:\nDesarrollador backend: Es el encargado de escribir el código y construir la lógica de la aplicación en el lado del servidor. Este rol implica conocimientos en diferentes lenguajes de programación como Python, Java, PHP, Ruby, entre otros, así como también el manejo de frameworks y tecnologías específicas.\nArquitecto de software: Este rol se enfoca en el diseño y la planificación de la estructura y la arquitectura del backend de una aplicación. El arquitecto de software se encarga de definir las tecnologías, los componentes, los patrones de diseño y las mejores prácticas a seguir para garantizar un sistema eficiente, escalable y fácil de mantener.\nAdministrador de bases de datos: Este rol se ocupa de la gestión y el mantenimiento de las bases de datos utilizadas en el backend. El administrador de bases de datos se encarga de diseñar el esquema de la base de datos, optimizar las consultas, gestionar la seguridad de los datos y asegurarse de que la base de datos funcione correctamente.\nIngeniero de seguridad: Este rol se enfoca en garantizar la seguridad de la aplicación y proteger los datos sensibles. El ingeniero de seguridad se encarga de identificar y abordar vulnerabilidades, implementar medidas de seguridad, como autenticación y cifrado de datos, y garantizar el cumplimiento de estándares y regulaciones de seguridad.\nIngeniero de rendimiento: Este rol se ocupa de optimizar el rendimiento del backend de la aplicación. El ingeniero de rendimiento identifica cuellos de botella, mejora la eficiencia del código, optimiza las consultas de base de datos y utiliza técnicas de caching para garantizar una respuesta rápida y un rendimiento óptimo.\nEstos son solo algunos de los roles comunes en el desarrollo de backend. Dependiendo del tamaño y la complejidad del proyecto, pueden existir otros roles especializados, como especialistas en integración de sistemas, desarrolladores de APIs, expertos en DevOps, entre otros.\n# ¿Qué es BACKEND y FRONTEND? # Los roles en backend # ","date":"9 marzo 2023","permalink":"/platform/levels/level4_php/01backend/intro/","section":"Levels","summary":"Que es el Backend y Su importancia # Que es el Backend # El backend, también conocido como el lado del servidor, se refiere a la parte de un sistema o aplicación informática que se encarga de procesar los datos, realizar cálculos, interactuar con la base de datos y generar las respuestas que son enviadas al cliente o a la interfaz de usuario.","title":"Que es el Backend y Su importancia"},{"content":"Nivel 3 React JS # Aqui encontrarás la información que se usará dentro del Nivel 3.\n","date":"9 marzo 2023","permalink":"/platform/levels/level3_react/","section":"Levels","summary":"Nivel 3 React JS # Aqui encontrarás la información que se usará dentro del Nivel 3.","title":"Level3_react"},{"content":"Nivel 4 PHP, mysql y Laravel # Aqui encontrarás la información que se usará dentro del Nivel 4.\n","date":"9 marzo 2023","permalink":"/platform/levels/level4_php/","section":"Levels","summary":"Nivel 4 PHP, mysql y Laravel # Aqui encontrarás la información que se usará dentro del Nivel 4.","title":"Level4_php"},{"content":"Nivel 5 Taidlwine, livewire, mysql y Laravel # Aqui encontrarás la información que se usará dentro del Nivel 5.\n","date":"9 marzo 2023","permalink":"/platform/levels/level5_laravel/","section":"Levels","summary":"Nivel 5 Taidlwine, livewire, mysql y Laravel # Aqui encontrarás la información que se usará dentro del Nivel 5.","title":"Level5_Laravel"},{"content":"Las dos estructuras de datos más usadas en JavaScript son Object y Array.\nLos objetos nos permiten crear una simple entidad que almacena items con una clave cada uno. los arrays nos permiten reunir items en una lista ordenada. Pero cuando los pasamos a una función, tal vez no necesitemos un objeto o array como un conjunto sino en piezas individuales.\nLa asignación desestructurante es una sintaxis especial que nos permite “desempaquetar” arrays u objetos en varias variables, porque a veces es más conveniente.\nLa desestructuración también funciona bien con funciones complejas que tienen muchos argumentos, valores por defecto, etcétera. Pronto lo veremos.\nDesestructuración de Arrays # Un ejemplo de cómo el array es desestructurado en variables:\n1 2 3 4 5 6 7 8 9 10 // tenemos un array con el nombre y apellido let arr = [\u0026#34;John\u0026#34;, \u0026#34;Smith\u0026#34;] // asignación desestructurante // fija firstName = arr[0] // y surname = arr[1] let [firstName, surname] = arr; alert(firstName); // John alert(surname); // Smith Ahora podemos trabajar con variables en lugar de miembros de array.\nSe ve genial cuando se combina con split u otro método que devuelva un array:\nlet [firstName, surname] = \u0026#34;John Smith\u0026#34;.split(\u0026#39; \u0026#39;); alert(firstName); // John alert(surname); // Smith Como puedes ver, la sintaxis es simple. Aunque hay varios detalles peculiares. Veamos más ejemplos para entenderlo mejor.\n“Desestructuración” no significa “destructivo”. Se llama \u0026ldquo;asignación desestructurante\u0026rdquo; porque \u0026ldquo;desestructura\u0026rdquo; al copiar elementos dentro de variables, pero el array en sí no es modificado. Es sólo una manera más simple de escribir:\n// let [firstName, surname] = arr; let firstName = arr[0]; let surname = arr[1]; Ignorar elementos utilizando comas Los elementos no deseados de un array también pueden ser descartados por medio de una coma extra:\n// segundo elemento no es necesario let [firstName, , title] = [\u0026#34;Julius\u0026#34;, \u0026#34;Caesar\u0026#34;, \u0026#34;Consul\u0026#34;, \u0026#34;of the Roman Republic\u0026#34;]; alert( title ); // Consul Truco para intercambiar variables Hay un conocido truco para intercambiar los valores de dos variables usando asignación desestructurante:\nlet guest = \u0026#34;Jane\u0026#34;; let admin = \u0026#34;Pete\u0026#34;; // Intercambiemos valores: hagamos guest=Pete, admin=Jane [guest, admin] = [admin, guest]; alert(`${guest} ${admin}`); // Pete Jane (¡intercambiados con éxito!) Aquí creamos un array temporal de dos variables e inmediatamente lo desestructuramos con el orden cambiado.\nPodemos intercambiar más de dos variables de este modo. Desestructuración de objetos # La asignación desestructurante también funciona con objetos.\nLa sintaxis básica es:\nlet {var1, var2} = {var1:…, var2:…} Debemos tener un símil-objeto en el lado derecho, el que queremos separar en variables. El lado izquierdo contiene un símil-objeto \u0026ldquo;pattern\u0026rdquo; para sus propiedades correspondientes. En el caso más simple, es la lista de nombres de variables en {...}.\nPor ejemplo:\nlet options = { title: \u0026#34;Menu\u0026#34;, width: 100, height: 200 }; let {title, width, height} = options; alert(title); // Menu alert(width); // 100 alert(height); // 200 Las propiedades options.title, options.width y options.height son asignadas a las variables correspondientes.\nNo importa el orden sino los nombres. Esto también funciona:\n// cambiado el orden en let {...} let {height, width, title} = { title: \u0026#34;Menu\u0026#34;, height: 200, width: 100 } El patrón de la izquierda puede ser más complejo y especificar el mapeo entre propiedades y variables.\nSi queremos asignar una propiedad a una variable con otro nombre, por ejemplo que options.width vaya en la variable llamada w, lo podemos establecer usando dos puntos:\nlet options = { title: \u0026#34;Menu\u0026#34;, width: 100, height: 200 }; // { propiedadOrigen: variableObjetivo } let {width: w, height: h, title} = options; // width -\u0026gt; w // height -\u0026gt; h // title -\u0026gt; title alert(title); // Menu alert(w); // 100 alert(h); // 200 Los dos puntos muestran \u0026ldquo;qué : va dónde\u0026rdquo;. En el ejemplo de arriba la propiedad width va a w, height va a h, y title es asignado al mismo nombre.\nSi tenemos un objeto complejo con muchas propiedades, podemos extraer solamente las que necesitamos:\nlet options = { title: \u0026#34;Menu\u0026#34;, width: 100, height: 200 }; // sólo extrae título como variable let { title } = options; alert(title); // Menu La trampa si no hay `let` En los ejemplos de arriba, las variables fueron declaradas en la asignación: let {…} = {…}. Por supuesto que también podemos usar variables existentes, sin let. Pero hay una trampa. Esto no funcionará:\nlet title, width, height; // error en esta línea {title, width, height} = {title: \u0026#34;Menu\u0026#34;, width: 200, height: 100}; El problema es que JavaScript trata al {...} como un bloque de código en el flujo principal de código (no dentro de otra expresión). Estos bloques de código pueden ser usados para agrupar sentencias, de esta manera:\n{ // una bloque de código let message = \u0026#34;Hola\u0026#34;; // ... alert( message ); } Aquí JavaScript supone que tenemos un bloque de código, es por eso que hay un error. Nosotros en cambio queremos desestructuración. Para mostrarle a JavaScript que no es un bloque de código, podemos rodear la expresión entre paréntesis (...): let title, width, height; // ahora está bien ( {title, width, height} = {title: \u0026#34;Menu\u0026#34;, width: 200, height: 100} ); alert( title ); // Menu Tutorial Desestructuración # En el siguiente video verás algunos ejemplos de desestructuración de objetos y arrays.\n","date":"21 febrero 2023","permalink":"/platform/levels/level2_23/dia11/destruc/","section":"Levels","summary":"Las dos estructuras de datos más usadas en JavaScript son Object y Array.","title":"Destructuring (Destructuración)"},{"content":"Creacion de API Local # Sabemos que comprender el concepto de API es fundamental para el desarrollo de aplicaciones web. En este capítulo vamos a crear una API local para poder consumirla en el siguiente capítulo.\nEn este video presta atencion a la forma en la que se crea el API de manera local. Es sencilla pero te servirá para enteder el concepto de una API, como crearla y como funciona, almenos de una forma sencilla.\nAPI REST: Consumo de API # Ahora ya que tenemos nuestra API creada, veremos como consumirla con una herramienta llamada INSOMNIA que nos ayuda a hacer pruebas con API\u0026rsquo;s de manera sencilla.\n","date":"21 febrero 2023","permalink":"/platform/levels/level2_23/dia09/apis/","section":"Levels","summary":"Creacion de API Local # Sabemos que comprender el concepto de API es fundamental para el desarrollo de aplicaciones web.","title":"Apis"},{"content":"Callbacks # Una función de callback es una función que se pasa a otra función como un argumento, que luego se invoca dentro de la función externa para completar algún tipo de rutina o acción.\nTerminos a considerar Callback\u0026rsquo;s es un concepto que pueden llegar a ser confuso, pero es importante entenderlos para poder consumir API\u0026rsquo;s. Ya hemos visto un poco de ellos en los métodos de Array. Para esto debemos entender que significa las siguientes palabras: Sincrono: Significa que las instrucciones se ejecutan una a una, en el orden en que fueron escritas. Asincrono: Significa que las instrucciones se ejecutan en cualquier orden, no necesariamente en el orden en que fueron escritas. Secuencia de la función # Las funciones de JavaScript se ejecutan en la secuencia en que se llaman. No en la secuencia en que se definen.\nPor ejemplo, al tener un documento HTML con un elemento \u0026lt;p\u0026gt; con el id demo.\nEste ejemplo terminará mostrando \u0026ldquo;Goodbye\u0026rdquo;:\n1 2 3 4 5 6 7 8 9 10 11 12 13 14 function myDisplayer(some) { document.getElementById(\u0026#34;demo\u0026#34;).innerHTML = some; } function myFirst() { myDisplayer(\u0026#34;Hello\u0026#34;); } function mySecond() { myDisplayer(\u0026#34;Goodbye\u0026#34;); } myFirst(); mySecond(); En este ejemplo, estamos invocando primero a la funcion myFirst la cual invoca a la funcion myDisplayer con el argumento \u0026quot;Hello\u0026quot;. Luego, invocamos a la funcion mySecond la cual invoca a la funcion myDisplayer con el argumento \u0026quot;Goodbye\u0026quot;.\nEste otro ejemplo terminará mostrando \u0026ldquo;Hello\u0026rdquo;:\n1 2 3 4 5 6 7 8 9 10 11 12 13 14 function myDisplayer(some) { document.getElementById(\u0026#34;demo\u0026#34;).innerHTML = some; } function myFirst() { myDisplayer(\u0026#34;Hello\u0026#34;); } function mySecond() { myDisplayer(\u0026#34;Goodbye\u0026#34;); } mySecond(); myFirst(); Convirtiendo a callback # Ahora, vamos a convertir el ejemplo anterior en un callback. Para esto, vamos a crear una función que reciba como argumento una función y un argumento para esa función.\n1 2 3 4 5 6 7 8 9 10 11 12 13 14 function myDisplayer(some) { document.getElementById(\u0026#34;demo\u0026#34;).innerHTML = some; } function myFirst(callback) { callback(\u0026#34;Hello\u0026#34;); } function mySecond(callback) { callback(\u0026#34;Goodbye\u0026#34;); } myFirst(myDisplayer); mySecond(myDisplayer); En este ejemplo, la función myFirst recibe como argumento la función myDisplayer y el argumento \u0026quot;Hello\u0026quot;. Luego, la función mySecond recibe como argumento la función myDisplayer y el argumento \u0026quot;Goodbye\u0026quot;. Analiza el código con calma y entiende como funciona. puedes hacer unas pruebas con el.\nAl trabajar con Arrays y usar sus métodos como filter, forEach, map entre otros, usamos funciones callbacks. Por ejemplo, el método filter recibe como argumento una función que se ejecuta para cada elemento del array. Si la función retorna true, el elemento se agrega al nuevo array. Si retorna false, el elemento no se agrega al nuevo array.\nYa hemos usado esos métodos durante este curso, pero comprender el concepto de callback es importante para crear nuestras propias funciones que reciban como argumento una función. Al trabajar con API\u0026rsquo;s, es muy común usar funciones callbacks.\nCallback explicación por Midudev # En el siguiente video aprendarás con ejemplos de código cómo funciona el concepto de callback y cómo usarlo en tus proyectos. Recuerda que existen más videos sobre el tema, pero este concepto puede llegar a ser complicado, así que te recomendamos ir con calma y analizar el código que se escribe.\n","date":"20 febrero 2023","permalink":"/platform/levels/level2_23/dia08/callback/","section":"Levels","summary":"Callbacks # Una función de callback es una función que se pasa a otra función como un argumento, que luego se invoca dentro de la función externa para completar algún tipo de rutina o acción.","title":"Callback | Consumo de API's"},{"content":"En este día seguiremos aprendiendo sobre los archivos JSON y Fetch.\nJSON # En el siguiente video de Fazt aprenderás las bases de este formato de datos con el cual se suele intercambiar información entre aplicaciones.\nFetch # JavaScript puede enviar peticiones de red al servidor y cargar nueva información siempre que se necesite.\nPor ejemplo, podemos utilizar una petición de red para:\nCrear una orden, Cargar información de usuario, Recibir las últimas actualizaciones desde un servidor, …etc. …Y todo esto sin la necesidad de refrescar la página.\nSe utiliza el término global “AJAX” (abreviado Asynchronous JavaScript And XML, en español: “JavaScript y XML Asincrónico”) para referirse a las peticiones de red originadas desde JavaScript. Sin embargo, no estamos necesariamente condicionados a utilizar XML dado que el término es antiguo y es por esto que el acrónimo XML se encuentra aquí. Probablemente lo hayáis visto anteriormente.\nExisten múltiples maneras de enviar peticiones de red y obtener información de un servidor.\nComenzaremos con el el método fetch() que es moderno y versátil. Este método no es soportado por navegadores antiguos (sin embargo se puede incluir un polyfill), pero es perfectamente soportado por los navegadores actuales y modernos.\nLa sintaxis básica es la siguiente:\nlet promise = fetch(url, [options]) url – representa la dirección URL a la que deseamos acceder. options – representa los parámetros opcionales, como puede ser un método o los encabezados de nuestra petición, etc. Este método puede parece confuso, debido a que usa un concepto llamado “promesas” y asincronía. Pero no te preocupes, en los siguientes ejemplos veremos cómo funciona.\nEn este video entenderemos de manera sencilla como funciona el método fetch().\nEjercicio de Consumo de API\u0026rsquo;s # En el siguiente video de Fazt aprenderás a consumir una API de forma sencilla.\n","date":"20 febrero 2023","permalink":"/platform/levels/level2_23/dia06/json/","section":"Levels","summary":"En este día seguiremos aprendiendo sobre los archivos JSON y Fetch.","title":"Json y Fetch"},{"content":"A medida que nuestra aplicación crece, queremos dividirla en múltiples archivos, llamados “módulos”. Un módulo puede contener una clase o una biblioteca de funciones para un propósito específico.\nDurante mucho tiempo, JavaScript existió sin una sintaxis de módulo a nivel de lenguaje. Eso no fue un problema, porque inicialmente los scripts eran pequeños y simples, por lo que no era necesario.\nPero con el tiempo los scripts se volvieron cada vez más complejos, por lo que la comunidad inventó una variedad de formas de organizar el código en módulos, bibliotecas especiales para cargar módulos a pedido.\nPara nombrar algunos (por razones históricas):\nAMD \u0026ndash; uno de los sistemas de módulos más antiguos, implementado inicialmente por la biblioteca require.js. CommonJS \u0026ndash; el sistema de módulos creado para el servidor Node.js. UMD \u0026ndash; un sistema de módulos más, sugerido como universal, compatible con AMD y CommonJS. Ahora, todo esto se convierte lentamente en una parte de la historia, pero aún podemos encontrarlos en viejos scripts.\nEl sistema de módulos a nivel de idioma apareció en el estándar en 2015, evolucionó gradualmente desde entonces y ahora es compatible con todos los principales navegadores y en Node.js. Así que estudiaremos los módulos modernos de Javascript de ahora en adelante.\nQué es un módulo? # Un módulo es solo un archivo. Un script es un módulo. Tan sencillo como eso.\nLos módulos pueden cargarse entre sí y usar directivas especiales export e import para intercambiar funcionalidad, llamar a funciones de un módulo de otro:\nLa palabra clave export etiqueta las variables y funciones que deberían ser accesibles desde fuera del módulo actual. import permite importar funcionalidades desde otros módulos. Por ejemplo, si tenemos un archivo sayHi.js que exporta una función:\n// 📁 sayHi.js export function sayHi(user) { alert(`Hello, ${user}!`); } \u0026hellip;Luego, otro archivo puede importarlo y usarlo:\n// 📁 main.js import {sayHi} from \u0026#39;./sayHi.js\u0026#39;; alert(sayHi); // function... sayHi(\u0026#39;John\u0026#39;); // Hello, John! La directiva import carga el módulo por la ruta ./sayHi.js relativo con el archivo actual, y asigna la función exportada sayHi a la variable correspondiente.\nEjecutemos el ejemplo en el navegador.\nComo los módulos admiten palabras clave y características especiales, debemos decirle al navegador que un script debe tratarse como un módulo, utilizando el atributo \u0026lt;script type =\u0026quot; module \u0026quot;\u0026gt;.\nEl navegador busca y evalúa automáticamente el módulo importado (y sus importaciones si es necesario), y luego ejecuta el script.\nLos módulos funcionan solo a través de HTTP(s), no localmente Si intenta abrir una página web localmente a través del protocolo file://, encontrará que las directivas import y export no funcionan. Use un servidor web local, como static-server o use la capacidad de \u0026ldquo;servidor en vivo\u0026rdquo; de su editor, como VS Code Live Server Extension para probar los módulos. Import y Export # En el siguiente video del canal de youtube Fazt Code se explica de manera muy clara y sencilla como importar y exportar modulos en javascript.\n","date":"20 febrero 2023","permalink":"/platform/levels/level2_23/dia04/mod/","section":"Levels","summary":"A medida que nuestra aplicación crece, queremos dividirla en múltiples archivos, llamados “módulos”.","title":"EcmaScript Modules"},{"content":"Arrays # Hace algunas clases atras, aprendimos las bases de los arrays, sus bases y tambien vimos como este tipo de dato nos permite almacenar multiples valores en una sola variable. También vimos que por medio de algunos metodos, nos permite recorrer su información de manera más sencilla, sin embargo, entender estos métodos no es necesariamente sencillo.\nHoy vamos a aprender un poco más sobre los arrays, y veremos como podemos utilizarlos para almacenar información de manera más compleja. También repasaremos los distintos métodos que tiene y cómo las funciones flecha nos pueden ayudar a simplificar el código.\nArrays Multidimensionales # Los arrays pueden tener items que a su vez sean arrays. Podemos usarlos como arrays multidimensionales, por ejemplo para almacenar matrices(arrays):\nlet matrix = [ [1, 2, 3], [4, 5, 6], [7, 8, 9] ]; En este caso, matrix es una matriz de 3 filas y 3 columnas. Podemos acceder a los elementos de la matriz utilizando dos índices, uno para la fila y otro para la columna. Por ejemplo, para acceder al elemento en la segunda fila y la tercera columna, podemos hacerlo así:\nalert( matrix[1][1] ); // 5, el elemento central También podemos utilizar un bucle for anidado para recorrer todos los elementos de la matriz. Por ejemplo:\nfor (let i = 0; i \u0026lt; miMatriz.length; i++) { for (let j = 0; j \u0026lt; miMatriz[i].length; j++) { console.log(miMatriz[i][j]); } } toString # Los arrays tienen su propia implementación del método toString que devuelve un lista de elementos separados por coma.\nPor ejemplo:\nlet arr = [1, 2, 3]; alert( String(arr) === \u0026#39;1,2,3\u0026#39; ); // true alert( arr.toString() === \u0026#39;1,2,3\u0026#39; ); // true Probemos esto también:\nalert( [] + 1 ); // \u0026#34;1\u0026#34; alert( [1] + 1 ); // \u0026#34;11\u0026#34; alert( [1,2] + 1 ); // \u0026#34;1,21\u0026#34; Los arrays no tienen Symbol.toPrimitive ni un valueOf viable, ellos implementan la conversión toString solamente, así [] se vuelve una cadena vacía, [1] se vuelve \u0026quot;1\u0026quot; y [1,2] se vuelve \u0026quot;1,2\u0026quot;.\nCuando el operador binario más \u0026quot;+\u0026quot; suma algo a una cadena, lo convierte a cadena también, entonces lo siguiente se ve así:\nalert( \u0026#34;\u0026#34; + 1 ); // \u0026#34;1\u0026#34; alert( \u0026#34;1\u0026#34; + 1 ); // \u0026#34;11\u0026#34; alert( \u0026#34;1,2\u0026#34; + 1 ); // \u0026#34;1,21\u0026#34; No compares arrays con == # Las arrays en JavaScript, a diferencia de otros lenguajes de programación, no deben ser comparadas con el operador ==.\nEste operador no tiene un tratamiento especial para arrays, trabaja con ellas como con cualquier objeto.\nRecordemos las reglas:\nDos objetos son iguales == solo si hacen referencia al mismo objeto. Si uno de los argumentos de == es un objeto y el otro es un primitivo, entonces el objeto se convierte en primitivo. …Con la excepción de null y undefined que son iguales == entre sí y nada más. La comparación estricta === es aún más simple, ya que no convierte tipos.\nEntonces, si comparamos arrays con ==, nunca son iguales, a no ser que comparemos dos variables que hacen referencia exactamente a la misma array.\nPor ejemplo:\nalert( [] == [] ); // falso alert( [0] == [0] ); // falso Estas arrays son técnicamente objetos diferentes. Así que no son iguales. El operador == no hace comparaciones de elemento a elemento.\nComparaciones con primitivos también pueden dar resultados aparentemente extraños:\nalert( 0 == [] ); // verdadero alert(\u0026#39;0\u0026#39; == [] ); // falso Aquí, en ambos casos, comparamos un primitivo con un objeto array. Entonces la array [] se convierte a primitivo para el propósito de comparar y se convierte en una string vacía ''.\nLuego el proceso de comparación continúa con los primitivos.\n// después de que [] se convierta en \u0026#39;\u0026#39; alert( 0 == \u0026#39;\u0026#39; ); // verdadero, ya que \u0026#39;\u0026#39; se convierte en el número 0 alert(\u0026#39;0\u0026#39; == \u0026#39;\u0026#39; ); // falso, sin conversión de tipos, strings diferentes Entonces, ¿cómo comparamos arrays?\nSimple: no utilices el operador ==. En lugar, compáralas elemento a elemento en un bucle o utilizando métodos de iteración explicados en la siguiente sección.\nMétodos de Array # Objects # Atajo para valores de propiedad # En el código real, a menudo usamos variables existentes como valores de los nombres de propiedades.\nPor ejemplo:\nfunction makeUser(name, age) { return { name: name, age: age, // ...otras propiedades }; } let user = makeUser(\u0026#34;John\u0026#34;, 30); alert(user.name); // John En el ejemplo anterior las propiedades tienen los mismos nombres que las variables. El uso de variables para la creación de propiedades es tán común que existe un atajo para valores de propiedad especial para hacerla más corta.\nEn lugar de name:name, simplemente podemos escribir name, tal cual:\nfunction makeUser(name, age) { return { name, // igual que name:name age, // igual que age:age // ... }; } Podemos usar ambos tipos de notación en un mismo objeto, la normal y el atajo:\nlet user = { name, // igual que name:name age: 30 }; Métodos del objeto # Los objetos son creados usualmente para representar entidades del mundo real, como usuarios, órdenes, etc.:\nlet user = { name: \u0026#34;John\u0026#34;, age: 30 }; Y en el mundo real un usuario puede actuar: seleccionar algo del carrito de compras, hacer login, logout, etc.\nLas acciones son representadas en JavaScript por funciones en las propiedades.\nEjemplos de Métodos # Para empezar, enseñemos al usuario user a decir hola:\nlet user = { name: \u0026#34;John\u0026#34;, age: 30 }; user.sayHi = function() { alert(\u0026#34;¡Hola!\u0026#34;); }; user.sayHi(); // ¡Hola! Aquí simplemente usamos una expresión de función para crear la función y asignarla a la propiedad user.sayHi del objeto.\nEntonces la llamamos con user.sayHi(). ¡El usuario ahora puede hablar!\nUna función que es la propiedad de un objeto es denominada su método.\nAsí, aquí tenemos un método sayHi del objeto user.\nPor supuesto, podríamos usar una función pre-declarada como un método, parecido a esto:\n1 2 3 4 5 6 7 8 9 10 let user = { // ... }; // primero, declara function sayHi() { alert(\u0026#34;¡Hola!\u0026#34;); }; // entonces la agrega como un método user.sayHi = sayHi; user.sayHi(); // ¡Hola! Programación orientada a objetos Cuando escribimos nuestro código usando objetos que representan entidades, eso es llamado Programación Orientada a Objetos, abreviado: \u0026ldquo;POO\u0026rdquo;.\nPOO (OOP sus siglas en inglés) es una cosa grande, un ciencia interesante en sí misma. ¿Cómo elegir las entidades correctas? ¿Cómo organizar la interacción entre ellas? Eso es arquitectura, y hay muy buenos libros del tópico como \u0026ldquo;Patrones de diseño: Elementos de software orientado a objetos reutilizable\u0026rdquo; de E. Gamma, R. Helm, R. Johnson, J. Vissides o \u0026ldquo;Análisis y Diseño Orientado a Objetos\u0026rdquo; de G. Booch, y otros. Más sobre Métodos # ","date":"17 febrero 2023","permalink":"/platform/levels/level2_23/dia03/obj/","section":"Levels","summary":"Arrays # Hace algunas clases atras, aprendimos las bases de los arrays, sus bases y tambien vimos como este tipo de dato nos permite almacenar multiples valores en una sola variable.","title":"Arrays y Objetos"},{"content":"Hay otra sintaxis muy simple y concisa para crear funciones, que a menudo es mejor que las Expresiones de funciones.\nSe llama “funciones de flecha”, porque se ve así:\nlet func = (arg1, arg2, ..., argN) =\u0026gt; expression; Esto crea una función func que acepta los parámetros arg1..argN, luego evalúa la expression del lado derecho mediante su uso y devuelve su resultado.\nEn otras palabras, es la versión más corta de:\nlet func = function(arg1, arg2, ..., argN) { return expression; }; Veamos un ejemplo concreto:\nlet sum = (a, b) =\u0026gt; a + b; /* Esta función de flecha es una forma más corta de: let sum = function(a, b) { return a + b; }; */ alert( sum(1, 2) ); // 3 Como puedes ver, (a, b) =\u0026gt; a + b significa una función que acepta dos argumentos llamados a y b. Tras la ejecución, evalúa la expresión a + b y devuelve el resultado.\nSi solo tenemos un argumento, se pueden omitir paréntesis alrededor de los parámetros, lo que lo hace aún más corto.\nPor ejemplo:\n1 2 3 4 let double = n =\u0026gt; n * 2; // Más o menos lo mismo que: let double = function(n) { return n * 2 } alert( double(3) ); // 6 Si no hay parámetros, los paréntesis estarán vacíos; pero deben estar presentes:\nlet sayHi = () =\u0026gt; alert(\u0026#34;¡Hola!\u0026#34;); sayHi(); Las funciones de flecha pueden parecer desconocidas y poco legibles al principio, pero eso cambia rápidamente a medida que los ojos se acostumbran a la estructura.\nSon muy convenientes para acciones simples de una línea, cuando somos demasiado flojos para escribir muchas palabras.\nFunciones de flecha multilínea # Las funciones de flecha que estuvimos viendo eran muy simples. Toman los parámetros a la izquierda de =\u0026gt;, los evalúan y devuelven la expresión del lado derecho.\nA veces necesitamos una función más compleja, con múltiples expresiones o sentencias. En ese caso debemos encerrarlos entre llaves. La diferencia principal es que las llaves necesitan usar un return para devolver un valor (tal como lo hacen las funciones comunes).\nComo esto:\n1 2 3 4 5 let sum = (a, b) =\u0026gt; { // la llave abre una función multilínea let result = a + b; return result; // si usamos llaves, entonces necesitamos un \u0026#34;return\u0026#34; explícito }; alert( sum(1, 2) ); // 3 Profundizando en Arrow Functions # Para comprender mejor las funciones flecha (Arrow Functions), veremos el siguiente video del canal de youtube de jonmircha donde nos explica más acerca de lo que son este tipo de funciones, sus similitudes con las que ya conocemos, sus ventajas y diferencias:\nEn el siguiente video, seguiremos aprendiendo de estas funciones, y como usarlas en lugar de las funciones normales:\nResumen # Las funciones de flecha son útiles para acciones simples, especialmente las de una sola línea. Vienen en dos variantes:\nSin llaves: (...args) =\u0026gt; expression \u0026ndash; el lado derecho es una expresión: la función la evalúa y devuelve el resultado. Pueden omitirse los paréntesis si solo hay un argumento, por ejemplo n =\u0026gt; n*2. Con llaves: (...args) =\u0026gt; { body } \u0026ndash; las llaves nos permiten escribir varias declaraciones dentro de la función, pero necesitamos un return explícito para devolver algo. ","date":"16 febrero 2023","permalink":"/platform/levels/level2_23/dia02/arrow/","section":"Levels","summary":"Hay otra sintaxis muy simple y concisa para crear funciones, que a menudo es mejor que las Expresiones de funciones.","title":"Arrow Functions (Funciones Flecha)"},{"content":"Comandos de la terminal # Esto es un pequeño repaso de lo que vimos el día de ayer en clase. Si entiendes algunas cosas básicas de la terminal, avanza a la siguiente sección.\nAntes de aprender los comandos de git, debemos aprender algunos comandos de la terminal. Esto es importante porque git es una herramienta que se ejecuta desde la terminal. Por lo tanto, debemos saber cómo usar la terminal para poder usar git. Iremos familiarizándonos con la terminal a medida que avancemos en el curso. Aunque hay una manera mas sencilla de trabajar con GIT desde VS code, estas opciones son hasta cierto punto limitadas. Por lo tanto, es importante que aprendas a usar la terminal.\n# Configuración y bases de git Hoy aprenderemos a configurar git y a usar los comandos básicos para trabajar con el. adicionalmente, recuerda que existe la documentación oficial de GIT, te la dejo aquí abajo para que te apoyes en ella de la mano de lo que aprenderás en estos videos:+\nGit Documentation\ngit init # Nota: En este video se habla de personalizar la terminal, te recomiendo no hacerlo, ya que puede causar problemas con el funcionamiento de la misma si no entiendes su uso, además que podrías gastar mucho tiempo en intentar realizar esto.\nRamas de GIT # Las 3 areas de GIT # git add y git commit # ","date":"15 febrero 2023","permalink":"/platform/java/git/comandos/","section":"Javae","summary":"Comandos de la terminal # Esto es un pequeño repaso de lo que vimos el día de ayer en clase.","title":"comandos en GIT"},{"content":" ¿Qué es el control de versiones? # EL control de versiones es la práctica de rastrear y gestionar los cambios que se realizan en un archivo o conjunto de archivos a lo largo del tiempo. Los sitemas de control de versiones son herramientas de software que ayudan a los equipos de software a gestionar los cambios en el código fuente a lo largo del tiempo. Si bien los sistemas de control de versiones son utilizados principalmente por programadores y desarrolladores de software, cualquier persona que trabaje con archivos puede beneficiarse de la utilización de un sistema de control de versiones.\nEl software de control de versiones realiza un seguimiento de todas las modificaciones en el código en un tipo especial de base de datos. Si se comete un error, los desarrolladores pueden ir hacia atrás en el tiempo y comparar las versiones anteriores del código para ayudar a resolver el error, al tiempo que se minimizan las interrupciones para todos los miembros del equipo.\nLos desarrolladores de software que trabajan en equipos están escribiendo continuamente nuevo código fuente y cambiando el que ya existe. El código de un proyecto, una aplicación o un componente de software normalmente se organiza en una estructura de carpetas o \u0026ldquo;árbol de archivos\u0026rdquo;. Un desarrollador del equipo podría estar trabajando en una nueva función mientras otro desarrollador soluciona un error no relacionado cambiando código. Cada desarrollador podría hacer sus cambios en varias partes del árbol de archivos.\nVentajas de los sistemas de control de versiones # Los sistemas de control de versiones ofrecen una serie de ventajas para los equipos de desarrollo de software, incluidas las siguientes:\nSincronización de archivos: Los sistemas de control de versiones permiten a los desarrolladores trabajar en el mismo archivo o conjunto de archivos a la vez. Los sistemas de control de versiones pueden detectar y resolver conflictos entre los cambios realizados por diferentes desarrolladores.\nSeguimiento de cambios: Los sistemas de control de versiones mantienen un registro de todos los cambios realizados en cada archivo o conjunto de archivos a lo largo del tiempo. Si se encuentra un error en el código, los desarrolladores pueden volver a una versión anterior del archivo o conjunto de archivos para ayudar a solucionar el problema.\nReutilización de código: Los sistemas de control de versiones permiten a los desarrolladores recuperar versiones anteriores de un archivo o conjunto de archivos. Esto puede ser útil cuando se desarrolla una nueva función que se basa en el código de una función anterior que ya no se usa.\nSeguridad: Los sistemas de control de versiones mantienen una copia de seguridad de todas las versiones de un archivo o conjunto de archivos. Si un archivo se corrompe o se elimina accidentalmente, los desarrolladores pueden recuperar una versión anterior del archivo desde el sistema de control de versiones.\nColaboración: Los sistemas de control de versiones permiten a los desarrolladores trabajar en equipo en el mismo archivo o conjunto de archivos. Los sistemas de control de versiones pueden detectar y resolver conflictos entre los cambios realizados por diferentes desarrolladores.\nSeguimiento de errores: Los sistemas de control de versiones mantienen un registro de cada error encontrado en el código. Cuando se encuentra un error, los desarrolladores pueden volver a una versión anterior del archivo o conjunto de archivos para ayudar a solucionar el problema.\nReutilización de código: Los sistemas de control de versiones permiten a los desarrolladores recuperar versiones anteriores de un archivo o conjunto de archivos. Esto puede ser útil cuando se desarrolla una nueva función que se basa en el código de una función anterior que ya no se usa.\nSeguridad: Los sistemas de control de versiones mantienen una copia de seguridad de todas las versiones de un archivo o conjunto de archivos\nQué es Git # Hoy en día, Git es, con diferencia, el sistema de control de versiones moderno más utilizado del mundo. Git es un proyecto de código abierto maduro y con un mantenimiento activo que desarrolló originalmente Linus Torvalds, el famoso creador del kernel del sistema operativo Linux, en 2005.\nGit es un sistema de control de versiones distribuido, lo que significa que cada desarrollador tiene una copia completa de todos los archivos, el historial completo de versiones de todos los archivos y la capacidad de ver el historial completo de todas las versiones de cada archivo. Los desarrolladores pueden trabajar en el código fuente de forma local y luego sincronizar sus cambios con otros desarrolladores a través de Internet o una red local. Git también permite que los desarrolladores trabajen en el mismo archivo a la vez, lo que facilita la colaboración en el desarrollo de software.\n¿Por qué usar Git? # Git es una herramienta poderosa que puede ayudar a los desarrolladores a gestionar el código fuente de un proyecto. Si bien la mayoría de los desarrolladores de software utilizan Git para gestionar proyectos de código abierto, también se puede utilizar para gestionar proyectos privados. Git es una herramienta de control de versiones distribuido, lo que significa que cada desarrollador tiene una copia completa de todos los archivos, el historial completo de versiones de todos los archivos y la capacidad de ver el historial completo de todas las versiones de cada archivo. Los desarrolladores pueden trabajar en el código fuente de forma local y luego sincronizar sus cambios con otros desarrolladores a través de Internet o una red local. Git también permite que los desarrolladores trabajen en el mismo archivo a la vez, lo que facilita la colaboración en el desarrollo de software.\nGIT # Para seguir aprendiendo GIT, analiza con calma el siguiente video, haz pausas, toma nota, investiga sobre un termino que escuches y no entiendas. Es importante que lo analices con calma y aunque veremos a detalle cada uno de los conceptos a lo largo de este nivel, presta atencion de como funciona de manera general este sistema.\nInstalación de GIT # Sigue los pasos que verás en el video para instalar GIT en tu computadora, mira el video que corresponda a tu sistena operativo.\nNo avances sin terminar la instalación A partir de ahora usaremos git y github para nuestros proyectos, por ello es importante que lo instales en tu computadora. No es opcional. Si llegas a tener dificultades con la instalación, no dudes en preguntar en el canal de Discord, pero antes que comience la clase de zoom, debes tenerlo instalado. GIT en Windows # GIT en MacOS # Este video empieza en el minuto 14:35. Solo mira el fragmento donde se habla de la instalación de GIT, luego analizaremos más partes de este segmento. Este segmento termina en el minuto 24:00.\nAcerca de los video tutoriales # Durante este nivel, nos apoyaremos principalmente en el tutoríal del canal de youtube FreeCodCamp Español y tambien del canal de youtube MoureDev. Pondremos otros recursos según sea neceario.\nEsto videos duran en total más de 5 horas c/u, e iremos viendo los segmentos que necesitemos por clase.\ncomo ves a la derecha, el video está segmentado por temas. Al inicial una nueva lección, el video se iniciará en el segmento correspondiente y se detendrá al final de la lección. Algunas cosas que debes tener en cuenta es lo siguiente:\nEstos segmentos no suelen durar mucho, sin embargo se espera que no solo reproduzcas el video, sino que pruebes el código que se muestra en el video y lo entiendas. Si no entiendes algo, puedes detener el video y preguntar a tu profesor. Algunos segmentos son muy cortos, por lo que se recomienda que los veas dos veces para que puedas entenderlos mejor. Buscar información adicional es completamente válido. Si un tema no te queda claro, puedes buscar en internet y preguntar a tu profesor por el canal de Discord. ","date":"15 febrero 2023","permalink":"/platform/java/git/intro/","section":"Javae","summary":"¿Qué es el control de versiones?","title":"GIT"},{"content":" ¿Qué es el control de versiones? # EL control de versiones es la práctica de rastrear y gestionar los cambios que se realizan en un archivo o conjunto de archivos a lo largo del tiempo. Los sitemas de control de versiones son herramientas de software que ayudan a los equipos de software a gestionar los cambios en el código fuente a lo largo del tiempo. Si bien los sistemas de control de versiones son utilizados principalmente por programadores y desarrolladores de software, cualquier persona que trabaje con archivos puede beneficiarse de la utilización de un sistema de control de versiones.\nEl software de control de versiones realiza un seguimiento de todas las modificaciones en el código en un tipo especial de base de datos. Si se comete un error, los desarrolladores pueden ir hacia atrás en el tiempo y comparar las versiones anteriores del código para ayudar a resolver el error, al tiempo que se minimizan las interrupciones para todos los miembros del equipo.\nLos desarrolladores de software que trabajan en equipos están escribiendo continuamente nuevo código fuente y cambiando el que ya existe. El código de un proyecto, una aplicación o un componente de software normalmente se organiza en una estructura de carpetas o \u0026ldquo;árbol de archivos\u0026rdquo;. Un desarrollador del equipo podría estar trabajando en una nueva función mientras otro desarrollador soluciona un error no relacionado cambiando código. Cada desarrollador podría hacer sus cambios en varias partes del árbol de archivos.\nVentajas de los sistemas de control de versiones # Los sistemas de control de versiones ofrecen una serie de ventajas para los equipos de desarrollo de software, incluidas las siguientes:\nSincronización de archivos: Los sistemas de control de versiones permiten a los desarrolladores trabajar en el mismo archivo o conjunto de archivos a la vez. Los sistemas de control de versiones pueden detectar y resolver conflictos entre los cambios realizados por diferentes desarrolladores.\nSeguimiento de cambios: Los sistemas de control de versiones mantienen un registro de todos los cambios realizados en cada archivo o conjunto de archivos a lo largo del tiempo. Si se encuentra un error en el código, los desarrolladores pueden volver a una versión anterior del archivo o conjunto de archivos para ayudar a solucionar el problema.\nReutilización de código: Los sistemas de control de versiones permiten a los desarrolladores recuperar versiones anteriores de un archivo o conjunto de archivos. Esto puede ser útil cuando se desarrolla una nueva función que se basa en el código de una función anterior que ya no se usa.\nSeguridad: Los sistemas de control de versiones mantienen una copia de seguridad de todas las versiones de un archivo o conjunto de archivos. Si un archivo se corrompe o se elimina accidentalmente, los desarrolladores pueden recuperar una versión anterior del archivo desde el sistema de control de versiones.\nColaboración: Los sistemas de control de versiones permiten a los desarrolladores trabajar en equipo en el mismo archivo o conjunto de archivos. Los sistemas de control de versiones pueden detectar y resolver conflictos entre los cambios realizados por diferentes desarrolladores.\nSeguimiento de errores: Los sistemas de control de versiones mantienen un registro de cada error encontrado en el código. Cuando se encuentra un error, los desarrolladores pueden volver a una versión anterior del archivo o conjunto de archivos para ayudar a solucionar el problema.\nReutilización de código: Los sistemas de control de versiones permiten a los desarrolladores recuperar versiones anteriores de un archivo o conjunto de archivos. Esto puede ser útil cuando se desarrolla una nueva función que se basa en el código de una función anterior que ya no se usa.\nSeguridad: Los sistemas de control de versiones mantienen una copia de seguridad de todas las versiones de un archivo o conjunto de archivos\nQué es Git # Hoy en día, Git es, con diferencia, el sistema de control de versiones moderno más utilizado del mundo. Git es un proyecto de código abierto maduro y con un mantenimiento activo que desarrolló originalmente Linus Torvalds, el famoso creador del kernel del sistema operativo Linux, en 2005.\nGit es un sistema de control de versiones distribuido, lo que significa que cada desarrollador tiene una copia completa de todos los archivos, el historial completo de versiones de todos los archivos y la capacidad de ver el historial completo de todas las versiones de cada archivo. Los desarrolladores pueden trabajar en el código fuente de forma local y luego sincronizar sus cambios con otros desarrolladores a través de Internet o una red local. Git también permite que los desarrolladores trabajen en el mismo archivo a la vez, lo que facilita la colaboración en el desarrollo de software.\n¿Por qué usar Git? # Git es una herramienta poderosa que puede ayudar a los desarrolladores a gestionar el código fuente de un proyecto. Si bien la mayoría de los desarrolladores de software utilizan Git para gestionar proyectos de código abierto, también se puede utilizar para gestionar proyectos privados. Git es una herramienta de control de versiones distribuido, lo que significa que cada desarrollador tiene una copia completa de todos los archivos, el historial completo de versiones de todos los archivos y la capacidad de ver el historial completo de todas las versiones de cada archivo. Los desarrolladores pueden trabajar en el código fuente de forma local y luego sincronizar sus cambios con otros desarrolladores a través de Internet o una red local. Git también permite que los desarrolladores trabajen en el mismo archivo a la vez, lo que facilita la colaboración en el desarrollo de software.\nGIT # Para seguir aprendiendo GIT, analiza con calma el siguiente video, haz pausas, toma nota, investiga sobre un termino que escuches y no entiendas. Es importante que lo analices con calma y aunque veremos a detalle cada uno de los conceptos a lo largo de este nivel, presta atencion de como funciona de manera general este sistema.\nInstalación de GIT # Sigue los pasos que verás en el video para instalar GIT en tu computadora, mira el video que corresponda a tu sistena operativo.\nNo avances sin terminar la instalación A partir de ahora usaremos git y github para nuestros proyectos, por ello es importante que lo instales en tu computadora. No es opcional. Si llegas a tener dificultades con la instalación, no dudes en preguntar en el canal de Discord, pero antes que comience la clase de zoom, debes tenerlo instalado. GIT en Windows # GIT en MacOS # Este video empieza en el minuto 14:35. Solo mira el fragmento donde se habla de la instalación de GIT, luego analizaremos más partes de este segmento. Este segmento termina en el minuto 24:00.\nAcerca de los video tutoriales # Durante este nivel, nos apoyaremos principalmente en el tutoríal del canal de youtube FreeCodCamp Español y tambien del canal de youtube MoureDev. Pondremos otros recursos según sea neceario.\nEsto videos duran en total más de 5 horas c/u, e iremos viendo los segmentos que necesitemos por clase.\ncomo ves a la derecha, el video está segmentado por temas. Al inicial una nueva lección, el video se iniciará en el segmento correspondiente y se detendrá al final de la lección. Algunas cosas que debes tener en cuenta es lo siguiente:\nEstos segmentos no suelen durar mucho, sin embargo se espera que no solo reproduzcas el video, sino que pruebes el código que se muestra en el video y lo entiendas. Si no entiendes algo, puedes detener el video y preguntar a tu profesor. Algunos segmentos son muy cortos, por lo que se recomienda que los veas dos veces para que puedas entenderlos mejor. Buscar información adicional es completamente válido. Si un tema no te queda claro, puedes buscar en internet y preguntar a tu profesor por el canal de Discord. Comandos de la terminal # Antes de aprender los comandos de git, debemos aprender algunos comandos de la terminal. Esto es importante porque git es una herramienta que se ejecuta desde la terminal. Por lo tanto, debemos saber cómo usar la terminal para poder usar git. Iremos familiarizándonos con la terminal a medida que avancemos en el curso. Aunque hay una manera mas sencilla de trabajar con GIT desde VS code, estas opciones son hasta cierto punto limitadas. Por lo tanto, es importante que aprendas a usar la terminal.\n","date":"15 febrero 2023","permalink":"/platform/levels/level2_23/dia01/git/","section":"Levels","summary":"¿Qué es el control de versiones?","title":"GIT"},{"content":"","date":"14 febrero 2023","permalink":"/platform/levels/level2_23/","section":"Levels","summary":"","title":"Nivel 2 - Responsive Design"},{"content":" Buscando elementos del DOM # Para buscar elementos del DOM, podemos usar los métodos getElementById, getElementsByClassName, getElementsByTagName y querySelector y querySelectorAll del objeto document.\nBúsqueda de elementos # El método getElementById busca un elemento por su atributo id:\nlet elem = document.getElementById(\u0026#39;id\u0026#39;); El método getElementsByClassName busca elementos por su atributo class. Aqui debemos tener en cuenta que nos devolverá un arreglo de elementos que coincidan con la clase especificada:\nlet elems = document.getElementsByClassName(\u0026#39;clase\u0026#39;); El método getElementsByTagName busca elementos por su nombre de etiqueta:\nlet elems = document.getElementsByTagName(\u0026#39;div\u0026#39;); El método querySelector busca un elemento que coincida con el selector CSS especificado:\nlet elem = document.querySelector(\u0026#39;#elemento\u0026#39;); let elem = document.querySelector(\u0026#39;.clase\u0026#39;); let elem = document.querySelector(\u0026#39;div\u0026#39;); El método querySelectorAll busca todos los elementos que coincidan con el selector CSS especificado y los retorna dentro de un array:\nlet elems = document.querySelectorAll(\u0026#39;#elemento\u0026#39;); let elems = document.querySelectorAll(\u0026#39;.clase\u0026#39;); let elems = document.querySelectorAll(\u0026#39;div\u0026#39;); Agregando y eliminando elementos del DOM # Para agregar elementos al DOM, podemos usar el método appendChild de un elemento del DOM:\nlet elemento = document.createElement(\u0026#39;div\u0026#39;); elemento.textContent = \u0026#39;Hola Mundo\u0026#39;; document.body.appendChild(elemento); Para eliminar elementos del DOM, podemos usar el método removeChild de un elemento del DOM:\nlet elemento = document.querySelector(\u0026#39;#elemento\u0026#39;); document.body.removeChild(elemento); Cambiando atributos del DOM # Para cambiar atributos del DOM, podemos usar el método setAttribute de un elemento del DOM:\nlet elemento = document.querySelector(\u0026#39;#elemento\u0026#39;); elemento.setAttribute(\u0026#39;class\u0026#39;, \u0026#39;clase\u0026#39;); Para eliminar atributos del DOM, podemos usar el método removeAttribute de un elemento del DOM:\nlet elemento = document.querySelector(\u0026#39;#elemento\u0026#39;); elemento.removeAttribute(\u0026#39;class\u0026#39;); Cambiando el estilo del DOM # Para cambiar el estilo del DOM, podemos usar el método style de un elemento del DOM:\nlet elemento = document.querySelector(\u0026#39;#elemento\u0026#39;); elemento.style.backgroundColor = \u0026#39;#000\u0026#39;; Manejo de Nodos # En el siguiente video aprenderemos a manipular el DOM con JavaScript:\n","date":"14 febrero 2023","permalink":"/platform/levels/level2_23/dia01/dom/","section":"Levels","summary":"Buscando elementos del DOM # Para buscar elementos del DOM, podemos usar los métodos getElementById, getElementsByClassName, getElementsByTagName y querySelector y querySelectorAll del objeto document.","title":"Manipulación del DOM"},{"content":"Hoy continuaremos aprendiendo los conceptos que estabamos viendo ayer sobre el manejo y manipulación.\nPresta atención al siguiente tutorial y toma nota de las dudas o cosas nuevas que aprendas:\n","date":"29 enero 2023","permalink":"/platform/jsvanilla/dom_pt2/","section":"Jsvanillas","summary":"Hoy continuaremos aprendiendo los conceptos que estabamos viendo ayer sobre el manejo y manipulación.","title":"DOM"},{"content":"Hoy continuaremos aprendiendo los conceptos que estabamos viendo ayer sobre el manejo y manipulación.\nPresta atención al siguiente tutorial y toma nota de las dudas o cosas nuevas que aprendas:\n","date":"29 enero 2023","permalink":"/platform/levels/level1_2023/dia14/dom/","section":"Levels","summary":"Hoy continuaremos aprendiendo los conceptos que estabamos viendo ayer sobre el manejo y manipulación.","title":"DOM"},{"content":"Hoy vamos a reforzar los conceptos de CSS.\nEl siguiente tutorial ya lo vimos antes, hoy lo repasaremos para reforzar los conceptos aprendidos y quizas ver algunos que no notamos antes:\n","date":"29 enero 2023","permalink":"/platform/levels/level1_2023/dia14/css/","section":"Levels","summary":"Hoy vamos a reforzar los conceptos de CSS.","title":"CSS"},{"content":" Ahora que tenemos la base para poner manipular los elementos del DOM, vamos a ver como podemos interactuar con estos elementos, para ello vamos a ver como podemos utilizar los eventos del DOM.\nEventos del DOM # 30 dias de JavaScript - Eventos del DOM\nVideo de refuerzo # Ejercicios de aprendizaje # Eventos del DOM\n","date":"27 enero 2023","permalink":"/platform/jsvanilla/dom_eventos/","section":"Jsvanillas","summary":"Ahora que tenemos la base para poner manipular los elementos del DOM, vamos a ver como podemos interactuar con estos elementos, para ello vamos a ver como podemos utilizar los eventos del DOM.","title":"Eventos del DOM"},{"content":"Durante estos ultimos días del nivel, vamos a enfocarnos en poder manipular los elementos del DOM, si bien es cierto hemos podido ver algunos ejemplos durante las clases, el enfoque de estos días será entender como se realizar este proceso y como podemos manipular, alterar contenidos de los nodos o tambien añadir o eliminar nodos del DOM.\nEn el siguiente video veremos más a detalle este proceso:\n","date":"27 enero 2023","permalink":"/platform/jsvanilla/dom_pt1/","section":"Jsvanillas","summary":"Durante estos ultimos días del nivel, vamos a enfocarnos en poder manipular los elementos del DOM, si bien es cierto hemos podido ver algunos ejemplos durante las clases, el enfoque de estos días será entender como se realizar este proceso y como podemos manipular, alterar contenidos de los nodos o tambien añadir o eliminar nodos del DOM.","title":"DOM"},{"content":"Ayer aprendimos que es grid y cuales son sus diferencias y ventajas sobre display flex. Estos dos conceptos son importantes para la creación de sitios web responsivos (se pueden adaptar a los distintos tamaños de pantalla).\nHoy vamos a repasar sobre estos conceptos y aprender algunos más, en el siguiente tutorial aprendrás más sobre este concepto de CSS:\nDentro del portal CSS Tricks podemos encontrar una guía completa y detallada de las propiedades de grid. Si bien la página está en inglés, puedes verla en español en tu navegador Chrome o Edge dando click derecho en la página y seleccionando la opcion \u0026ldquo;Traducir a Español\u0026rdquo;:\nGRID - CSS-Tricks\n","date":"27 enero 2023","permalink":"/platform/levels/level1_2023/dia13/grid/","section":"Levels","summary":"Ayer aprendimos que es grid y cuales son sus diferencias y ventajas sobre display flex.","title":"Grid"},{"content":"Los Arrays y los Objetos son dos de los tipos de datos fundamentales en JavaScript. Los Arrays son una colección ordenada de elementos, mientras que los Objetos son una colección de pares clave-valor.\nLos Arrays se definen utilizando corchetes […] y cada elemento se separa con una coma. Por ejemplo, se puede crear un Array de números como este:\nconst numbers = [1, 2, 3, 4, 5]; Los Arrays en JavaScript proporcionan métodos para manipular sus elementos, como push, pop, shift, unshift, entre otros.\nLos Objetos se definen utilizando llaves {…} y cada par clave-valor se separa con una coma. Por ejemplo, se puede crear un objeto persona así:\nconst person = { name: \u0026#39;John\u0026#39;, age: 30, job: \u0026#39;Developer\u0026#39; }; Los objetos en JavaScript proporcionan métodos para acceder y modificar sus propiedades, como Object.keys, Object.values, entre otros.\nAmbos tipos de datos son muy útiles en la programación JavaScript ya que permiten almacenar y acceder a una gran cantidad de datos de manera estructurada y organizada.\nRepaso de Array y Objetos # Hoy repasaremos como funcionan estos dos tipos de datos y las ventajas que aportan al lenguaje JavaScript:\n","date":"27 enero 2023","permalink":"/platform/levels/level1_2023/dia12/arr_obj/","section":"Levels","summary":"Los Arrays y los Objetos son dos de los tipos de datos fundamentales en JavaScript.","title":"Array y Objetos"},{"content":"CSS Grid Layout es un sistema de diseño de cuadrícula para crear diseños de página en HTML.\nCon CSS Grid, se pueden crear diseños de cuadrícula complejos con facilidad, como diseños de dos o más columnas, diseños de cuadrícula anidados y diseños de rejilla adaptativos.\nUna de las principales ventajas de CSS Grid es que permite crear diseños de cuadrícula de forma independiente de los elementos de HTML. Esto significa que puede crear un diseño de cuadrícula y luego colocar elementos en él, independientemente de su estructura HTML.\nCSS Grid también proporciona una serie de herramientas para trabajar con elementos de cuadrícula, como la capacidad de especificar tamaños de celda, posiciones de celda y zonas de cuadrícula. También se pueden utilizar las propiedades de grid-template y grid-template-areas para crear diseños de cuadrícula complejos.\nEn resumen, CSS Grid es una herramienta poderosa para crear diseños de cuadrícula en HTML que te permite crear diseños complejos de forma fácil y flexible.\nIntroducción a Grid # En el siguiente video aprenderás lo necesario para aprender sobre este concepto y como se diferencia de flex:\nRecuerda hacer pausas en el video y escribir el código que ves en el ejemplo para que te vayas acostumbrando a este nuevo concepto. ","date":"27 enero 2023","permalink":"/platform/levels/level1_2023/dia12/grid/","section":"Levels","summary":"CSS Grid Layout es un sistema de diseño de cuadrícula para crear diseños de página en HTML.","title":"CSS Grid"},{"content":" Los arrays en JavaScript son una de las características fundamentales del lenguaje, y su capacidad para almacenar y acceder a una colección ordenada de valores es esencial para cualquier desarrollador web. Sin embargo, JavaScript no se queda solo en eso, ya que también ofrece una amplia variedad de métodos que nos permiten trabajar con arrays de manera más eficiente.\nEn esta parte, vamos a explorar los métodos de arrays más comunes y útiles en JavaScript, desde cómo acceder y modificar elementos, hasta cómo buscar, ordenar y filtrar datos en un array. Veremos ejemplos prácticos y explicaciones detalladas para que puedas entender cómo sacar el máximo provecho de estos métodos y cómo pueden ayudarte a mejorar tu código.\nEn este tutorial se usa arrow functions, que es una forma distinta de escribir funciones y podría confundirte, de ser el caso, mira primero brevemente este video para entrar en contexto. ","date":"27 enero 2023","permalink":"/platform/levels/level1_2023/dia11/arr_methods/","section":"Levels","summary":"Los arrays en JavaScript son una de las características fundamentales del lenguaje, y su capacidad para almacenar y acceder a una colección ordenada de valores es esencial para cualquier desarrollador web.","title":"Métodos de Array"},{"content":"Hoy repasaremos los conceptos de funciones que hemos visto hasta ahora. Toma nota de lo que aprendes y pon a prueba el código que se enseña.\nMetodos en Array # En este recurso, veras un uso de ciertos metodos(funciones) que existen dentro de los arrays, que combinandolo con lo que sabes de funciones, puede ayudarte a realizar ciertas operaciones de manera más sencilla al querer manipular arrays.\nFunciones de Arrays Curso de funciones - FreeCodeCamp # te recomendamos ver este apartado luego de haber leido sobre arrow functions:\nProgramación Funcional ","date":"27 enero 2023","permalink":"/platform/jsvanilla/functions_r/","section":"Jsvanillas","summary":"Hoy repasaremos los conceptos de funciones que hemos visto hasta ahora.","title":"Funciones"},{"content":"Haz notado que en algunas páginas al recargar la página, los datos que habías ingresado siguen ahí?, esto es gracias al storage del navegador.\nEl objeto Storage (API de almacenamiento web) nos permite almacenar datos de manera local en el navegador y sin necesidad de realizar alguna conexion a una base de datos.\nlocalStorage y sessionStorage: ¿qué son? # localStorage y sessionStorage son propiedades que acceden al objeto Storage y tienen la función de almacenar datos de manera local, la diferencia entre éstas dos es que localStorage almacena la información de forma indefinida o hasta que se decida limpiar los datos del navegador y sessionStorage almacena información mientras la pestaña donde se esté utilizando siga abierta, una vez cerrada, la información se elimina. A continuación te dejamos algunos recursos que te servirán para entender este concepto.\nlocalStorage - EDTeam localStorage - JavaScript.info ","date":"27 enero 2023","permalink":"/platform/jsvanilla/storage/","section":"Jsvanillas","summary":"Haz notado que en algunas páginas al recargar la página, los datos que habías ingresado siguen ahí?","title":"Local Storage"},{"content":"Hoy terminaremos de ver el tutorial de funciones que empezamos a ver ayer. Toma nota de lo que aprendes y pon a prueba el código que se enseña.\nEncontrarás más información sobre las funciones aquí:\nFunciones - gitbook.io\n","date":"27 enero 2023","permalink":"/platform/jsvanilla/functions_p2/","section":"Jsvanillas","summary":"Hoy terminaremos de ver el tutorial de funciones que empezamos a ver ayer.","title":"Funciones"},{"content":"Muy a menudo necesitamos realizar acciones similares en muchos lugares del script.\nPor ejemplo, debemos mostrar un mensaje atractivo cuando un visitante inicia sesión, cierra sesión y tal vez en otros momentos.\nLas funciones son los principales \u0026ldquo;bloques de construcción\u0026rdquo; del programa. Permiten que el código se llame muchas veces sin repetición.\nYa hemos visto ejemplos de funciones integradas, como alert(message), prompt(message, default) y confirm(question). Pero también podemos crear funciones propias.\nDeclaración de funciones # Para crear una función podemos usar una declaración de función.\nSe ve como aquí:\nfunction showMessage() { alert( \u0026#39;¡Hola a todos!\u0026#39; ); } La palabra clave function va primero, luego va el nombre de función, luego una lista de parámetros entre paréntesis (separados por comas, vacía en el ejemplo anterior) y finalmente el código de la función entre llaves, también llamado \u0026ldquo;el cuerpo de la función\u0026rdquo;.\nfunction name(parameter1, parameter2, ... parameterN) { // body } Nuestra nueva función puede ser llamada por su nombre: showMessage().\nPor ejemplo:\nfunction showMessage() { alert( \u0026#39;¡Hola a todos!\u0026#39; ); } showMessage(); // llamando a la funcion showMessage() showMessage(); // llamando a la funcion showMessage() La llamada showMessage() ejecuta el código de la función. Aquí veremos el mensaje dos veces.\nEste ejemplo demuestra claramente uno de los propósitos principales de las funciones: evitar la duplicación de código..\nSi alguna vez necesitamos cambiar el mensaje o la forma en que se muestra, es suficiente modificar el código en un lugar: la función que lo genera.\nVariables Locales # Una variable declarada dentro de una función solo es visible dentro de esa función.\nPor ejemplo:\nfunction showMessage() { let message = \u0026#34;Hola, ¡Soy JavaScript!\u0026#34;; // variable local alert( message ); } showMessage(); // Hola, ¡Soy JavaScript! alert( message ); // \u0026lt;-- ¡Error! La variable es local para esta función Variables Externas # Una función también puede acceder a una variable externa, por ejemplo:\n1 2 3 4 5 6 let userName = \u0026#39;Juan\u0026#39;; function showMessage() { let message = \u0026#39;Hola, \u0026#39; + userName; alert(message); } showMessage(); // Hola, Juan La función tiene acceso completo a la variable externa. Puede modificarlo también.\nPor ejemplo:\n1 2 3 4 5 6 7 8 9 let userName = \u0026#39;Juan\u0026#39;; function showMessage() { userName = \u0026#34;Bob\u0026#34;; // (1) Cambió la variable externa let message = \u0026#39;Hola, \u0026#39; + userName; alert(message); } alert( userName ); // Juan antes de llamar la función showMessage(); alert( userName ); // Bob, el valor fué modificado por la función La variable externa solo se usa si no hay una local.\nSi una variable con el mismo nombre se declara dentro de la función, le hace sombra a la externa. Por ejemplo, en el siguiente código, la función usa la variable userName local. La exterior se ignora:\n1 2 3 4 5 6 7 8 9 10 11 let userName = \u0026#39;John\u0026#39;; function showMessage() { let userName = \u0026#34;Bob\u0026#34;; // declara variable local let message = \u0026#39;Hello, \u0026#39; + userName; // Bob alert(message); } // la función crea y utiliza su propia variable local userName showMessage(); alert( userName ); // John, se mantiene, la función no accedió a la variable externa Variables globales Variables declaradas fuera de cualquier función, como la variable externa userName en el código anterior, se llaman globales.\nLas variables globales son visibles desde cualquier función (a menos que se les superpongan variables locales con el mismo nombre).\nEs una buena práctica reducir el uso de variables globales. El código moderno tiene pocas o ninguna variable global. La mayoría de las variables residen en sus funciones. Aunque a veces puede justificarse almacenar algunos datos a nivel de proyecto. Tutorial de Funciones # En los siguientes tutoriales aprenderás más sobre como puedes usar esta estructura, sin embargo sientete libre a investigar un poco mas por tu cuenta 😄.\nAprendeJavascript.dev # Tu primera funcion Parametros Function Expression 30 días de Javascript # Funciones\nJavascript.info # Funciones\n","date":"27 enero 2023","permalink":"/platform/jsvanilla/functions_p1/","section":"Jsvanillas","summary":"Muy a menudo necesitamos realizar acciones similares en muchos lugares del script.","title":"Funciones"},{"content":"En JavaScript, existen tres tipos de funciones: funciones declaradas, funciones de expresión y funciones de flecha.\nFunciones declaradas: Son funciones que se declaran con la palabra clave \u0026ldquo;function\u0026rdquo; seguida del nombre de la función. Ejemplo: function sum(a, b) { return a + b; } Estas funciones son hoisted, es decir, son elevadas al inicio del scope donde son declaradas, por lo tanto son accesibles antes de ser declaradas.\nFunciones de expresión: son funciones que son asignadas a una variable y son definidas mediante una expresión. Ejemplo: const sum = function(a, b) { return a + b; } Funciones de flecha: son funciones cuyo sintaxis es abreviada y se definen mediante una flecha \u0026ldquo;=\u0026gt;\u0026rdquo; y no tiene un nombre. Ejemplo: const sum = (a, b) =\u0026gt; a + b; 3 tipos de funciones # Para entender a detalle como funciona cada uno de estas, mira el siguiente tutorial donde verás qué diferencia a estas 3 formas de escribir una función:\n","date":"27 enero 2023","permalink":"/platform/levels/level1_2023/dia10/function_type/","section":"Levels","summary":"En JavaScript, existen tres tipos de funciones: funciones declaradas, funciones de expresión y funciones de flecha.","title":"Tipos de Funciones"},{"content":"El día de hoy continuaremos aprendiendo sobre flexbox siguiendo el tutorial que comenzamos el día de ayer:\nAdicionalmente, te comparto una guía complete de Flexbox, si bien la página está en inglés, puedes verla en español en tu navegador Chrome o Edge dando click derecho en la página y seleccionando la opcion \u0026ldquo;Traducir a Español\u0026rdquo;:\nFlexbox - CSS Tricks\n","date":"26 enero 2023","permalink":"/platform/css/flexbox/","section":"Csses","summary":"El día de hoy continuaremos aprendiendo sobre flexbox siguiendo el tutorial que comenzamos el día de ayer:","title":"Flexbox"},{"content":"El día de hoy vamos a repasar en el uso de flexbox, es importante comprender este tema antes de que pasemos a aprender sobre grid. analiza el siguiente video a detalle o desde donde te quedaste y toma nota de las dudas o preguntas que surgan para que puedas resolverlas durante clase:\nAdicionalmente, te comparto una guía complete de Flexbox, si bien la página está en inglés, puedes verla en español en tu navegador Chrome o Edge dando click derecho en la página y seleccionando la opcion \u0026ldquo;Traducir a Español\u0026rdquo;:\nFlexbox - CSS Tricks\n","date":"26 enero 2023","permalink":"/platform/levels/level1_2023/dia10/flexbox/","section":"Levels","summary":"El día de hoy vamos a repasar en el uso de flexbox, es importante comprender este tema antes de que pasemos a aprender sobre grid.","title":"Flexbox"},{"content":"En JavaScript, las funciones son una de las características fundamentales del lenguaje y son esenciales para crear programas complejos.\nYa hemos visto cómo crear funciones y cómo llamarlas, pero para sacar el máximo provecho de las funciones, es importante entender cómo funcionan los parámetros y argumentos.\nEn esta clase, vamos a explorar cómo funcionan los parámetros y argumentos en las funciones de JavaScript, cómo pasar valores a las funciones y cómo utilizar estos valores dentro de las funciones. También veremos ejemplos prácticos y explicaciones detalladas para que puedas entender cómo utilizar parámetros y argumentos para crear funciones más flexibles y reutilizables en tus programas.\nParámetros # Podemos pasar datos arbitrarios a funciones usando parámetros.\nEn el siguiente ejemplo, la función tiene dos parámetros: from y text.\n1 2 3 4 5 function showMessage(from, text) { // parámetros: from, text alert(from + \u0026#39;: \u0026#39; + text); } showMessage(\u0026#39;Ann\u0026#39;, \u0026#39;¡Hola!\u0026#39;); // Ann: ¡Hola! (*) *showMessage(\u0026#39;Ann\u0026#39;, \u0026#34;¿Cómo estás?\u0026#34;); // Ann: ¿Cómo estás? (**) Cuando la función se llama (*) y (**), los valores dados se copian en variables locales from y text. Y la función las utiliza.\nAquí hay un ejemplo más: tenemos una variable from y la pasamos a la función. Tenga en cuenta: la función cambia from, pero el cambio no se ve afuera, porque una función siempre obtiene una copia del valor:\n1 2 3 4 5 6 7 8 function showMessage(from, text) { from = \u0026#39;*\u0026#39; + from + \u0026#39;*\u0026#39;; // hace que \u0026#34;from\u0026#34; se vea mejor alert( from + \u0026#39;: \u0026#39; + text ); } let from = \u0026#34;Ann\u0026#34;; showMessage(from, \u0026#34;Hola\u0026#34;); // *Ann*: Hola // el valor de \u0026#34;from\u0026#34; es el mismo, la función modificó una copia local alert( from ); // Ann Cuando un valor es pasado como un parámetro de función, también se denomina argumento.\nPara poner los términos claros:\nUn parámetro es una variable listada dentro de los paréntesis en la declaración de función (es un término para el momento de la declaración) Un argumento es el valor que es pasado a la función cuando esta es llamada (es el término para el momento en que se llama). Declaramos funciones listando sus parámetros, luego las llamamos pasándoles argumentos.\nEn el ejemplo de arriba, se puede decir: \u0026ldquo;la función showMessage es declarada con dos parámetros, y luego llamada con dos argumentos: from y \u0026quot;Hola\u0026quot;\u0026rdquo;.\nValores predeterminados # Si una función es llamada, pero no se le proporciona un argumento, su valor correspondiente se convierte en undefined.\nPor ejemplo, la función mencionada anteriormente showMessage(from, text) se puede llamar con un solo argumento:\nshowMessage(\u0026#34;Ann\u0026#34;); Eso no es un error. La llamada mostraría \u0026quot;Ann: undefined\u0026quot;. Como no se pasa un valor de text, este se vuelve undefined.\nPodemos especificar un valor llamado \u0026ldquo;predeterminado\u0026rdquo; o \u0026ldquo;por defecto\u0026rdquo; (es el valor que se usa si el argumento fue omitido) en la declaración de función usando =:\n1 2 3 4 function showMessage(from,text = \u0026#34;sin texto\u0026#34;\u0026gt;) { alert( from + \u0026#34;: \u0026#34; + text ); } showMessage(\u0026#34;Ann\u0026#34;); // Ann: sin texto Ahora, si no se pasa el parámetro text, obtendrá el valor \u0026quot;sin texto\u0026quot;\nEl valor predeterminado también se asigna si el parámetro existe pero es estrictamente igual a undefined:\nshowMessage(\u0026#34;Ann\u0026#34;, undefined); // Ann: sin texto En el siguiente video aprenderemos más sobre estos conceptos:\n","date":"26 enero 2023","permalink":"/platform/levels/level1_2023/dia9/parameters/","section":"Levels","summary":"En JavaScript, las funciones son una de las características fundamentales del lenguaje y son esenciales para crear programas complejos.","title":"Funciones: Parámetros"},{"content":"Flexbox es un método de diseño en CSS que se utiliza para crear diseños adaptables y flexibles. Es especialmente útil para dispositivos móviles y pantallas de diferentes tamaños. Flexbox hace posible ajustar el tamaño y la posición de los elementos dentro de un contenedor de forma automática, lo que permite crear diseños flexibles que se adaptan a diferentes tamaños de pantalla. Con Flexbox, los desarrolladores pueden alinear elementos, distribuirlos en una grilla y controlar el orden de los elementos, independientemente de su tamaño. Es una de las herramientas fundamentales para los desarrolladores web para crear diseños responsivos, flexibles y adaptables.\nVeamos un poco más de esta propiedad:\n","date":"26 enero 2023","permalink":"/platform/css/flex_intro/","section":"Csses","summary":"Flexbox es un método de diseño en CSS que se utiliza para crear diseños adaptables y flexibles.","title":"Flexbox"},{"content":"Los formularios HTML y Flexbox en CSS son dos herramientas fundamentales para cualquier desarrollador web.\nLos formularios HTML nos permiten recolectar información de los usuarios de un sitio web, mientras que Flexbox en CSS nos permite crear diseños de layout flexibles y adaptables.\nEn esta clase, vamos a explorar cómo crear y personalizar formularios HTML y cómo utilizar Flexbox para crear diseños adaptables y flexibles en un sitio web. Desde cómo crear campos de entrada y botones hasta cómo utilizar Flexbox para alinear elementos y crear diseños de grillas.\nForms # Los formularios en HTML son utilizados para recolectar información de los usuarios de un sitio web. Se componen de diferentes elementos de entrada, como campos de texto, botones de radio, casillas de verificación, etc. Los formularios permiten que los usuarios ingresen información, como sus nombres, direcciones de correo electrónico, contraseñas, etc. y luego enviar esa información a un servidor web para su procesamiento. Los formularios son comúnmente utilizados para registros de usuarios, inicios de sesión, encuestas, compras en línea y muchas otras funciones en un sitio web.\nEn el siguiente video aprenderemos como crear formularios en HTML:\nSi deseas realizar un formulario más real, aquí tienes un tutorial donde aprenderás a crear un formulario de login:\nFlexbox # Flexbox es un método de diseño en CSS que se utiliza para crear diseños adaptables y flexibles. Es especialmente útil para dispositivos móviles y pantallas de diferentes tamaños. Flexbox hace posible ajustar el tamaño y la posición de los elementos dentro de un contenedor de forma automática, lo que permite crear diseños flexibles que se adaptan a diferentes tamaños de pantalla. Con Flexbox, los desarrolladores pueden alinear elementos, distribuirlos en una grilla y controlar el orden de los elementos, independientemente de su tamaño. Es una de las herramientas fundamentales para los desarrolladores web para crear diseños responsivos, flexibles y adaptables.\nVeamos un poco más de esta propiedad:\n","date":"26 enero 2023","permalink":"/platform/levels/level1_2023/dia9/form_flex/","section":"Levels","summary":"Los formularios HTML y Flexbox en CSS son dos herramientas fundamentales para cualquier desarrollador web.","title":"Forms \u0026 Flexbox"},{"content":" Tipos de Display 🖥️ En CSS, la propiedad display controla cómo se muestra un elemento en la página. Los valores más comunes son:\nblock 🏢\nUn elemento con display: block ocupa toda la línea disponible y empuja los elementos siguientes a la línea siguiente.\nEjemplo:\ndiv { display: block; } inline ➡️\nUn elemento con display: inline solo ocupa el espacio necesario, y los elementos siguientes se alinean en la misma línea.\nEjemplo:\nspan { display: inline; } inline-block 🔲\nSimilar a inline, pero el elemento puede tener dimensiones definidas (width, height).\nEjemplo:\nbutton { display: inline-block; width: 150px; height: 50px; } none 🚫\nEl elemento no se muestra en la página, eliminándose completamente del flujo del documento.\nEjemplo:\n.oculto { display: none; } Introducción a Flexbox 💪 Flexbox es un modelo de diseño en CSS que ayuda a alinear y distribuir los elementos dentro de un contenedor de manera eficiente, incluso cuando el tamaño de los elementos es desconocido o dinámico.\nPropiedades Principales de Flexbox 📏 # display: flex 🌟\nSe aplica a un contenedor para activar el modelo de flexbox.\nEjemplo:\n.contenedor { display: flex; } justify-content ➡️\nAlinea los elementos horizontalmente (a lo largo del eje principal).\nValores comunes:\nflex-start: Alinea al principio. center: Centra los elementos. space-between: Espacia los elementos uniformemente. Ejemplo:\n.contenedor { justify-content: center; } align-items ⬇️\nAlinea los elementos verticalmente (a lo largo del eje transversal).\nValores comunes:\nflex-start: Alinea al principio. center: Centra los elementos. stretch: Estira los elementos para ocupar todo el espacio disponible. Ejemplo:\n.contenedor { align-items: center; } flex-direction 🔄\nDefine la dirección del eje principal. Los valores más comunes son:\nrow: De izquierda a derecha (predeterminado). column: De arriba a abajo. row-reverse: De derecha a izquierda. column-reverse: De abajo hacia arriba. Ejemplo:\n.contenedor { flex-direction: column; } flex-wrap ↩️\nPermite que los elementos se envuelvan en una nueva línea si es necesario.\nValores comunes:\nnowrap: Los elementos no se envuelven. wrap: Los elementos se envuelven. Ejemplo:\n.contenedor { flex-wrap: wrap; } Ejemplo Completo de Flexbox 👇 Aquí tienes un ejemplo de cómo usar Flexbox para organizar varios elementos en una página:\n\u0026lt;div class=\u0026#34;contenedor\u0026#34;\u0026gt; \u0026lt;div class=\u0026#34;item\u0026#34;\u0026gt;Item 1\u0026lt;/div\u0026gt; \u0026lt;div class=\u0026#34;item\u0026#34;\u0026gt;Item 2\u0026lt;/div\u0026gt; \u0026lt;div class=\u0026#34;item\u0026#34;\u0026gt;Item 3\u0026lt;/div\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;style\u0026gt; .contenedor { display: flex; justify-content: space-between; align-items: center; flex-direction: row; flex-wrap: wrap; height: 100vh; } .item { background-color: lightblue; padding: 20px; margin: 10px; border-radius: 5px; } \u0026lt;/style\u0026gt; Resumen 🎯\nTipos de display: block, inline, inline-block, y none. Flexbox: Utiliza display: flex en un contenedor y usa las propiedades justify-content, align-items, flex-direction, y flex-wrap para organizar sus elementos. ","date":"26 enero 2023","permalink":"/platform/css/tipos-display/","section":"Csses","summary":"Tipos de Display 🖥️ En CSS, la propiedad display controla cómo se muestra un elemento en la página.","title":"Tipos de Display"},{"content":"Los Bucles o Loops son parte fundamental en la programación.\nHoy repasaremos su uso y veremos una forma especial de recorres los arrays.\nRepaso # ","date":"26 enero 2023","permalink":"/platform/levels/level1_2023/dia8/loops/","section":"Levels","summary":"Los Bucles o Loops son parte fundamental en la programación.","title":"Loops"},{"content":"Los arrays en JavaScript son estructuras de datos que nos permiten almacenar y acceder a una colección ordenada de valores de forma sencilla y eficiente.\nEn esta clase, vamos a explorar en profundidad el uso de arrays en JavaScript, desde cómo se crean, se accede y se modifican sus elementos, hasta cómo se utilizan en conjunto con otras características del lenguaje como funciones y bucles para crear programas más complejos\nLee la información a continuación con calma y toma nota de las dudas que surgan para que las puedas resolver en clase.\nArrays # Los objetos te permiten almacenar colecciones de datos a través de nombres. Eso está bien.\nPero a menudo necesitamos una colección ordenada, donde tenemos un 1ro, un 2do, un 3er elemento y así sucesivamente. Por ejemplo, necesitamos almacenar una lista de algo: usuarios, bienes, elementos HTML, etc.\nNo es conveniente usar objetos aquí, porque no proveen métodos para manejar el orden de los elementos. No podemos insertar una nueva propiedad “entre” los existentes. Los objetos no están hechos para eso.\nExiste una estructura llamada Array (llamada en español arreglo o matriz/vector) para almacenar colecciones ordenadas.\nDeclaración # Hay dos sintaxis para crear un array vacío:\nlet arr = new Array(); let arr = []; Casi siempre se usa la segunda. Podemos suministrar elementos iniciales entre los corchetes:\nlet fruits = [\u0026#34;Apple\u0026#34;, \u0026#34;Orange\u0026#34;, \u0026#34;Plum\u0026#34;]; Los elementos del array están numerados comenzando desde cero.\nPodemos obtener un elemento por su número entre corchetes:\nlet fruits = [\u0026#34;Apple\u0026#34;, \u0026#34;Orange\u0026#34;, \u0026#34;Plum\u0026#34;]; alert( fruits[0] ); // Apple alert( fruits[1] ); // Orange alert( fruits[2] ); // Plum Podemos reemplazar un elemento:\nfruits[2] = \u0026#39;Pear\u0026#39;; // ahora [\u0026#34;Apple\u0026#34;, \u0026#34;Orange\u0026#34;, \u0026#34;Pear\u0026#34;] \u0026hellip;o agregar uno nuevo al array:\nfruits[3] = \u0026#39;Lemon\u0026#39;; // ahora [\u0026#34;Apple\u0026#34;, \u0026#34;Orange\u0026#34;, \u0026#34;Pear\u0026#34;, \u0026#34;Lemon\u0026#34;] La cuenta total de elementos en el array es su longitud length:\nlet fruits = [\u0026#34;Apple\u0026#34;, \u0026#34;Orange\u0026#34;, \u0026#34;Plum\u0026#34;]; alert( fruits.length ); // 3 También podemos usar alert para mostrar el array completo.\nlet fruits = [\u0026#34;Apple\u0026#34;, \u0026#34;Orange\u0026#34;, \u0026#34;Plum\u0026#34;]; alert( fruits ); // Apple,Orange,Plum Un array puede almacenar elementos de cualquier tipo.\nPor ejemplo:\n// mezcla de valores let arr = [ \u0026#39;Apple\u0026#39;, { name: \u0026#39;John\u0026#39; }, true, function() { alert(\u0026#39;hello\u0026#39;); } ]; // obtener el objeto del índice 1 y mostrar su nombre alert( arr[1].name ); // John // obtener la función del índice 3 y ejecutarla arr[3](); // hello En el siguiente video aprenderás más de los arrays:\nFunciones # Muy a menudo necesitamos realizar acciones similares en muchos lugares del script.\nPor ejemplo, debemos mostrar un mensaje atractivo cuando un visitante inicia sesión, cierra sesión y tal vez en otros momentos.\nLas funciones son los principales \u0026ldquo;bloques de construcción\u0026rdquo; del programa. Permiten que el código se llame muchas veces sin repetición.\nYa hemos visto ejemplos de funciones integradas, como alert(message), prompt(message, default) y confirm(question). Pero también podemos crear funciones propias.\nDeclaración de funciones # Para crear una función podemos usar una declaración de función.\nSe ve como aquí:\nfunction showMessage() { alert( \u0026#39;¡Hola a todos!\u0026#39; ); } La palabra clave function va primero, luego va el nombre de función, luego una lista de parámetros entre paréntesis (separados por comas, vacía en el ejemplo anterior) y finalmente el código de la función entre llaves, también llamado \u0026ldquo;el cuerpo de la función\u0026rdquo;.\nfunction name(parameter1, parameter2, ... parameterN) { // body } Nuestra nueva función puede ser llamada por su nombre: showMessage().\nPor ejemplo:\nfunction showMessage() { alert( \u0026#39;¡Hola a todos!\u0026#39; ); } showMessage(); // llamando a la funcion showMessage() showMessage(); // llamando a la funcion showMessage() La llamada showMessage() ejecuta el código de la función. Aquí veremos el mensaje dos veces.\nEste ejemplo demuestra claramente uno de los propósitos principales de las funciones: evitar la duplicación de código..\nSi alguna vez necesitamos cambiar el mensaje o la forma en que se muestra, es suficiente modificar el código en un lugar: la función que lo genera.\nVariables Locales # Una variable declarada dentro de una función solo es visible dentro de esa función.\nPor ejemplo:\nfunction showMessage() { let message = \u0026#34;Hola, ¡Soy JavaScript!\u0026#34;; // variable local alert( message ); } showMessage(); // Hola, ¡Soy JavaScript! alert( message ); // \u0026lt;-- ¡Error! La variable es local para esta función Variables Externas # Una función también puede acceder a una variable externa, por ejemplo:\n1 2 3 4 5 6 let userName = \u0026#39;Juan\u0026#39;; function showMessage() { let message = \u0026#39;Hola, \u0026#39; + userName; alert(message); } showMessage(); // Hola, Juan La función tiene acceso completo a la variable externa. Puede modificarlo también.\nPor ejemplo:\n1 2 3 4 5 6 7 8 9 let userName = \u0026#39;Juan\u0026#39;; function showMessage() { userName = \u0026#34;Bob\u0026#34;; // (1) Cambió la variable externa let message = \u0026#39;Hola, \u0026#39; + userName; alert(message); } alert( userName ); // Juan antes de llamar la función showMessage(); alert( userName ); // Bob, el valor fué modificado por la función La variable externa solo se usa si no hay una local.\nSi una variable con el mismo nombre se declara dentro de la función, le hace sombra a la externa. Por ejemplo, en el siguiente código, la función usa la variable userName local. La exterior se ignora:\n1 2 3 4 5 6 7 8 9 10 11 let userName = \u0026#39;John\u0026#39;; function showMessage() { let userName = \u0026#34;Bob\u0026#34;; // declara variable local let message = \u0026#39;Hello, \u0026#39; + userName; // Bob alert(message); } // la función crea y utiliza su propia variable local userName showMessage(); alert( userName ); // John, se mantiene, la función no accedió a la variable externa Variables globales Variables declaradas fuera de cualquier función, como la variable externa userName en el código anterior, se llaman globales.\nLas variables globales son visibles desde cualquier función (a menos que se les superpongan variables locales con el mismo nombre).\nEs una buena práctica reducir el uso de variables globales. El código moderno tiene pocas o ninguna variable global. La mayoría de las variables residen en sus funciones. Aunque a veces puede justificarse almacenar algunos datos a nivel de proyecto. Puedes encontrar más información acerca de las funciones en la página de MDN:\nFunciones - MDN web docs\n","date":"26 enero 2023","permalink":"/platform/levels/level1_2023/dia8/arrays/","section":"Levels","summary":"Los arrays en JavaScript son estructuras de datos que nos permiten almacenar y acceder a una colección ordenada de valores de forma sencilla y eficiente.","title":"Arrays y Funciones"},{"content":"JavaScript es uno de los lenguajes de programación más populares en el mundo, y una de las razones de su éxito radica en su capacidad para manejar y organizar datos a través de objetos y arrays.\nLos objetos en JavaScript son estructuras de datos clave-valor que nos permiten almacenar y acceder a la información de una manera sencilla y eficiente.\nLos arrays, por otro lado, son un tipo especial de objeto que nos permite almacenar y acceder a una colección ordenada de valores.\nEn esta clase, vamos a explorar en profundidad el uso de objetos en JavaScript, desde cómo se crean y se accede a sus propiedades, hasta cómo se utilizan en conjunto con otras características del lenguaje para crear programas más complejos. Veremos ejemplos prácticos y explicaciones detalladas para entender cómo sacar el máximo provecho de estas herramientas fundamentales de JavaScript.\nLee la información a continuación con calma y toma nota de las dudas que surgan para que las puedas resolver en clase.\nObjetos # Como aprendimos en clases anteriores, hay ocho tipos de datos en JavaScript. Siete de ellos se denominan \u0026ldquo;primitivos\u0026rdquo;, porque sus valores contienen solo un dato (sea un string, un número o lo que sea).\nEn contraste, los objetos son usados para almacenar colecciones de varios datos y entidades más complejas asociados con un nombre clave. En JavaScript, los objetos penetran casi todos los aspectos del lenguaje. Por lo tanto, debemos comprenderlos primero antes de profundizar en cualquier otro lugar.\nPodemos crear un objeto usando las llaves {…} con una lista opcional de propiedades. Una propiedad es un par \u0026ldquo;key:value\u0026rdquo;, donde key es un string (también llamado \u0026ldquo;nombre clave\u0026rdquo;), y value puede ser cualquier cosa. P.D. Para fines prácticos de la lección, nos referiremos a este par de conceptos como \u0026ldquo;clave:valor\u0026rdquo;.\nPodemos imaginar un objeto como un gabinete con archivos firmados. Cada pieza de datos es almacenada en su archivo por la clave. Es fácil encontrar un archivo por su nombre o agregar/eliminar un archivo.\nSe puede crear un objeto vacío (\u0026ldquo;gabinete vacío\u0026rdquo;) utilizando una de estas dos sintaxis:\nlet user = new Object(); // sintaxis de \u0026#34;constructor de objetos\u0026#34; let user = {}; // sintaxis de \u0026#34;objeto literal\u0026#34; Normalmente se utilizan las llaves {...}. Esa declaración se llama objeto literal.\nLiterales y propiedades # Podemos poner inmediatamente algunas propiedades dentro de {...} como pares \u0026ldquo;clave:valor\u0026rdquo;:\nlet user = { // un objeto name: \u0026#34;John\u0026#34;, // En la clave \u0026#34;name\u0026#34; se almacena el valor \u0026#34;John\u0026#34; age: 30 // En la clave \u0026#34;age\u0026#34; se almacena el valor 30 }; Una propiedad tiene una clave (también conocida como \u0026ldquo;nombre\u0026rdquo; o \u0026ldquo;identificador\u0026rdquo;) antes de los dos puntos \u0026quot;:\u0026quot; y un valor a la derecha.\nEn el objeto user hay dos propiedades:\nLa primera propiedad tiene la clave \u0026quot;name\u0026quot; y el valor \u0026quot;John\u0026quot;. La segunda tienen la clave \u0026quot;age\u0026quot; y el valor 30. Podemos imaginar al objeto user resultante como un gabinete con dos archivos firmados con las etiquetas \u0026ldquo;name\u0026rdquo; y \u0026ldquo;age\u0026rdquo;.\nPodemos agregar, eliminar y leer archivos de él en cualquier momento.\nSe puede acceder a los valores de las propiedades utilizando la notación de punto:\n// Obteniendo los valores de las propiedades del objeto: alert( user.name ); // John alert( user.age ); // 30 El valor puede ser de cualquier tipo. Agreguemos uno booleano:\nuser.isAdmin = true; Para eliminar una propiedad podemos usar el operador delete:\ndelete user.age; También podemos nombrar propiedades con más de una palabra. Pero, de ser así, debemos colocar la clave entre comillas \u0026quot;...\u0026quot;:\nlet user = { name: \u0026#34;John\u0026#34;, age: 30, \u0026#34;likes birds\u0026#34;: true // Las claves con más de una palabra deben ir entre comillas }; La última propiedad en la lista puede terminar con una coma:\nlet user = { name: \u0026#34;John\u0026#34;, age: 30, // termina con una \u0026#34;,\u0026#34; } Eso se llama una coma \u0026ldquo;final\u0026rdquo; o \u0026ldquo;colgante\u0026rdquo;. Facilita agregar, eliminar y mover propiedades, porque todas las líneas se vuelven similares.\nTutotial de Objetos # En los siguientes video, aprenderás más sobre los objetos:\n","date":"26 enero 2023","permalink":"/platform/jsvanilla/objects/","section":"Jsvanillas","summary":"JavaScript es uno de los lenguajes de programación más populares en el mundo, y una de las razones de su éxito radica en su capacidad para manejar y organizar datos a través de objetos y arrays.","title":"Objetos"},{"content":"JavaScript es uno de los lenguajes de programación más populares en el mundo, y una de las razones de su éxito radica en su capacidad para manejar y organizar datos a través de objetos y arrays.\nLos objetos en JavaScript son estructuras de datos clave-valor que nos permiten almacenar y acceder a la información de una manera sencilla y eficiente.\nLos arrays, por otro lado, son un tipo especial de objeto que nos permite almacenar y acceder a una colección ordenada de valores.\nEn esta clase, vamos a explorar en profundidad el uso de objetos en JavaScript, desde cómo se crean y se accede a sus propiedades, hasta cómo se utilizan en conjunto con otras características del lenguaje para crear programas más complejos. Veremos ejemplos prácticos y explicaciones detalladas para entender cómo sacar el máximo provecho de estas herramientas fundamentales de JavaScript.\nLee la información a continuación con calma y toma nota de las dudas que surgan para que las puedas resolver en clase.\nObjetos # Como aprendimos en clases anteriores, hay ocho tipos de datos en JavaScript. Siete de ellos se denominan \u0026ldquo;primitivos\u0026rdquo;, porque sus valores contienen solo un dato (sea un string, un número o lo que sea).\nEn contraste, los objetos son usados para almacenar colecciones de varios datos y entidades más complejas asociados con un nombre clave. En JavaScript, los objetos penetran casi todos los aspectos del lenguaje. Por lo tanto, debemos comprenderlos primero antes de profundizar en cualquier otro lugar.\nPodemos crear un objeto usando las llaves {…} con una lista opcional de propiedades. Una propiedad es un par \u0026ldquo;key:value\u0026rdquo;, donde key es un string (también llamado \u0026ldquo;nombre clave\u0026rdquo;), y value puede ser cualquier cosa. P.D. Para fines prácticos de la lección, nos referiremos a este par de conceptos como \u0026ldquo;clave:valor\u0026rdquo;.\nPodemos imaginar un objeto como un gabinete con archivos firmados. Cada pieza de datos es almacenada en su archivo por la clave. Es fácil encontrar un archivo por su nombre o agregar/eliminar un archivo.\nSe puede crear un objeto vacío (\u0026ldquo;gabinete vacío\u0026rdquo;) utilizando una de estas dos sintaxis:\nlet user = new Object(); // sintaxis de \u0026#34;constructor de objetos\u0026#34; let user = {}; // sintaxis de \u0026#34;objeto literal\u0026#34; Normalmente se utilizan las llaves {...}. Esa declaración se llama objeto literal.\nLiterales y propiedades # Podemos poner inmediatamente algunas propiedades dentro de {...} como pares \u0026ldquo;clave:valor\u0026rdquo;:\nlet user = { // un objeto name: \u0026#34;John\u0026#34;, // En la clave \u0026#34;name\u0026#34; se almacena el valor \u0026#34;John\u0026#34; age: 30 // En la clave \u0026#34;age\u0026#34; se almacena el valor 30 }; Una propiedad tiene una clave (también conocida como \u0026ldquo;nombre\u0026rdquo; o \u0026ldquo;identificador\u0026rdquo;) antes de los dos puntos \u0026quot;:\u0026quot; y un valor a la derecha.\nEn el objeto user hay dos propiedades:\nLa primera propiedad tiene la clave \u0026quot;name\u0026quot; y el valor \u0026quot;John\u0026quot;. La segunda tienen la clave \u0026quot;age\u0026quot; y el valor 30. Podemos imaginar al objeto user resultante como un gabinete con dos archivos firmados con las etiquetas \u0026ldquo;name\u0026rdquo; y \u0026ldquo;age\u0026rdquo;.\nPodemos agregar, eliminar y leer archivos de él en cualquier momento.\nSe puede acceder a los valores de las propiedades utilizando la notación de punto:\n// Obteniendo los valores de las propiedades del objeto: alert( user.name ); // John alert( user.age ); // 30 El valor puede ser de cualquier tipo. Agreguemos uno booleano:\nuser.isAdmin = true; Para eliminar una propiedad podemos usar el operador delete:\ndelete user.age; También podemos nombrar propiedades con más de una palabra. Pero, de ser así, debemos colocar la clave entre comillas \u0026quot;...\u0026quot;:\nlet user = { name: \u0026#34;John\u0026#34;, age: 30, \u0026#34;likes birds\u0026#34;: true // Las claves con más de una palabra deben ir entre comillas }; La última propiedad en la lista puede terminar con una coma:\nlet user = { name: \u0026#34;John\u0026#34;, age: 30, // termina con una \u0026#34;,\u0026#34; } Eso se llama una coma \u0026ldquo;final\u0026rdquo; o \u0026ldquo;colgante\u0026rdquo;. Facilita agregar, eliminar y mover propiedades, porque todas las líneas se vuelven similares.\nTutotial de Objetos # En el siguiente video, aprenderás más sobre los objetos:\n","date":"26 enero 2023","permalink":"/platform/levels/level1_2023/dia7/objetcs/","section":"Levels","summary":"JavaScript es uno de los lenguajes de programación más populares en el mundo, y una de las razones de su éxito radica en su capacidad para manejar y organizar datos a través de objetos y arrays.","title":"Objetos"},{"content":"Los principios de diseño web son fundamentales para crear sitios web atractivos, intuitivos y fáciles de usar. Estos principios incluyen la organización, la estética, la usabilidad y la accesibilidad. Al seguir estos principios, los diseñadores web pueden crear sitios web que sean estéticamente agradables y fáciles de navegar para los usuarios.\nEn primer lugar, la organización es importante para garantizar que el contenido de un sitio web esté estructurado de manera lógica y fácil de encontrar. Esto incluye la jerarquía de la información, el uso de encabezados y subtítulos, y la disposición de los elementos en la página.\nEn segundo lugar, la estética es importante para crear un sitio web atractivo y atractivo para los usuarios. Esto incluye el uso de colores, tipografía, imágenes y otros elementos visuales para crear una apariencia consistente y profesional.\nEn tercer lugar, la usabilidad es importante para garantizar que los usuarios puedan navegar fácilmente por un sitio web y encontrar la información que necesitan. Esto incluye la navegación, el diseño de formularios, y la disposición de los elementos en la página.\nFinalmente, la accesibilidad es esencial para garantizar que todos los usuarios, independientemente de sus habilidades, puedan acceder y utilizar un sitio web. Esto incluye el uso de etiquetas semanticas, tamaños de letra legibles, y la compatibilidad con diferentes dispositivos y navegadores.\nAl seguir estos principios, los diseñadores web pueden crear sitios web eficaces y accesibles para todos los usuarios.\nPrincipios Generales de Diseño Web # Dentro de esta sección aprenderás un poco más de estos principios, primero mira este video donde aprenderás principios básicos de diseño.\nPrincipios de Diseño - Shopify # Shopify es uno de los e-commerce mas populares en la actualidad, permite crear tiendas virtuales con facilidad y para lograr ese propósito, tiene su propio segmento dedicado al diseño web.\nAqui analizaremos algunas partes de esa seccion, los apartados que debes revisar son:\nDesign Colors Data Visualizations Space Estos apartados se encuentran en el menú lateral izquierdo.\nCada una de estas páginas está en ingles por default pero puedes cambiarlas a español dede tu navegador Edge o Chrome dando click derecho en la página y seleccionando la opción \u0026ldquo;traducir al español\u0026rdquo;.\nPara comenzar esta a leer esta documentación sigue el siguiente link:\nPolaris Design - Shopify\n","date":"25 enero 2023","permalink":"/platform/levels/level1_2023/dia7/sem_design/","section":"Levels","summary":"Los principios de diseño web son fundamentales para crear sitios web atractivos, intuitivos y fáciles de usar.","title":"Principios de Diseño Web"},{"content":"El Document Object Model (DOM) es un estándar de la industria que define la estructura lógica de un documento y cómo se puede acceder y modificar su contenido y estilos. Es una interfaz de programación de aplicaciones (API) para documentos HTML y XML que permite a los desarrolladores interactuar con el contenido de una página web y modificarlo dinámicamente mediante código JavaScript.\nEl DOM es un árbol de nodos que representa la estructura de un documento, donde cada elemento HTML es un nodo y cada atributo es un nodo hijo. Los desarrolladores pueden utilizar el DOM para seleccionar y modificar elementos específicos en una página web, crear nuevos elementos, eliminar elementos existentes, cambiar estilos, agregar eventos, y mucho más.\nEn esta clase, vamos a profundizar en el concepto del DOM, cómo funciona, y cómo los desarrolladores pueden utilizarlo para interactuar con el contenido de una página web y crear aplicaciones web dinámicas e interactivas.\nAntes de entar a detalle en el DOM hablaremos un poco del entorno del navegador.\nEntorno de Navegador # El lenguaje JavaScript fue creado inicialmente para los navegadores web. Desde entonces, ha evolucionado en un lenguaje con muchos usos y plataformas.\nUna plataforma puede ser un navegador, un servidor web u otro host (\u0026ldquo;anfitrión\u0026rdquo;); incluso una máquina de café \u0026ldquo;inteligente\u0026rdquo;, si puede ejecutar JavaScript. Cada uno de ellos proporciona una funcionalidad específica de la plataforma. La especificación de JavaScript llama a esto entorno de host.\nUn entorno host proporciona sus propios objetos y funciones adicionales al núcleo del lenguaje. Los navegadores web proporcionan un medio para controlar las páginas web. Node.js proporciona características del lado del servidor, etc.\nAquí tienes una vista general de lo que tenemos cuando JavaScript se ejecuta en un navegador web:\nHay un objeto \u0026ldquo;raíz\u0026rdquo; llamado window. Tiene dos roles:\nPrimero, es un objeto global para el código JavaScript. Segundo, representa la \u0026ldquo;ventana del navegador\u0026rdquo; y proporciona métodos para controlarla. DOM (Modelo de Objetos del Documento) # La estructura de un documento HTML son las etiquetas.\nSegún el Modelo de Objetos del Documento (DOM), cada etiqueta HTML es un objeto. Las etiquetas anidadas son llamadas \u0026ldquo;hijas\u0026rdquo; de la etiqueta que las contiene. El texto dentro de una etiqueta también es un objeto.\nTodos estos objetos son accesibles empleando JavaScript, y podemos usarlos para modificar la página.\nPor ejemplo, document.body es el objeto que representa la etiqueta \u0026lt;body\u0026gt;.\nEjecutar el siguiente código hará que el \u0026lt;body\u0026gt; sea de color rojo durante 3 segundos:\ndocument.body.style.background = \u0026#39;red\u0026#39;; // establece un color de fondo rojo setTimeout(() =\u0026gt; document.body.style.background = \u0026#39;\u0026#39;, 3000); // regresa el color de fondo original despues de 3 segundos En el caso anterior usamos style.background para cambiar el color de fondo del document.body, sin embargo existen muchas otras propiedades, tales como:\ninnerHTML \u0026ndash; contenido HTML del nodo. offsetWidth \u0026ndash; ancho del nodo (en píxeles). \u0026hellip;, etc. Un ejemplo del DOM # Comencemos con el siguiente documento simple:\n\u0026lt;!DOCTYPE HTML\u0026gt; \u0026lt;html\u0026gt; \u0026lt;head\u0026gt; \u0026lt;title\u0026gt;About elk\u0026lt;/title\u0026gt; \u0026lt;/head\u0026gt; \u0026lt;body\u0026gt; The truth about elk. \u0026lt;/body\u0026gt; \u0026lt;/html\u0026gt; El DOM representa HTML como una estructura de árbol de etiquetas. A continuación podemos ver como se muestra:\nflowchart TD A(HTML) --\u003e B(HEAD) A --\u003e C[#text] A --\u003e D(BODY) B --\u003e E[#text] B --\u003e F(TITLE) B --\u003e I[#text] F --\u003e G[#text About elk] D --\u003e J[#text The truth about elk. #text] Cada nodo del árbol es un objeto.\nLas etiquetas son nodos de elementos (o solo elementos) y forman la estructura del árbol: \u0026lt;html\u0026gt; está ubicado en la raíz del documento, por lo tanto, \u0026lt;head\u0026gt; y \u0026lt;body\u0026gt; son sus hijos, etc.\nEl texto dentro de los elementos forma nodos de texto, etiquetados como #text. Un nodo de texto contiene solo una cadena. Esta puede no tener hijos y siempre es una hoja del árbol.\nPor ejemplo, la etiqueta \u0026lt;title\u0026gt; tiene el texto \u0026quot;About elk\u0026quot;.\nHay que tener en cuenta los caracteres especiales en nodos de texto:\nuna línea nueva: #text ↵ (en JavaScript se emplea \\n para obtener este resultado) un espacio: ␣ Los espacios y líneas nuevas son caracteres totalmente válidos, al igual que letras y dígitos. Ellos forman nodos de texto y se convierten en parte del DOM. Así, por ejemplo, en el caso de arriba la etiqueta \u0026lt;head\u0026gt; contiene algunos espacios antes de la etiqueta \u0026lt;title\u0026gt;, entonces ese texto se convierte en el nodo #text, que contiene una nueva línea y solo algunos espacios.\nHay solo dos excepciones de nivel superior:\nLos espacios y líneas nuevas antes de la etiqueta \u0026lt;head\u0026gt; son ignorados por razones históricas. Si colocamos algo después de la etiqueta \u0026lt;/body\u0026gt;, automáticamente se sitúa dentro de body, al final, ya que, la especificación HTML necesita que todo el contenido esté dentro de la etiqueta \u0026lt;body\u0026gt;, no puede haber espacios después de esta. En otros casos todo es sencillo \u0026ndash; si hay espacios (como cualquier carácter) en el documento, se convierten en nodos de texto en el DOM, y si los eliminamos, entonces no habrá ninguno.\nPara reforzar lo que hemos visto, mira el siguiente video donde se introduce el DOM:\n","date":"25 enero 2023","permalink":"/platform/levels/level1_2023/dia6/introdom/","section":"Levels","summary":"El Document Object Model (DOM) es un estándar de la industria que define la estructura lógica de un documento y cómo se puede acceder y modificar su contenido y estilos.","title":"Introducción al DOM"},{"content":"Las pseudo-clases de CSS y la propiedad de transición son dos herramientas esenciales para cualquier desarrollador web.\nA través de las pseudo-clases, es posible seleccionar elementos específicos en una página web y aplicar estilos personalizados, mientras que la propiedad de transición permite crear efectos suaves al cambiar entre estilos.\nEn esta clase, exploraremos en profundidad el uso de estas herramientas y cómo pueden ser utilizadas para mejorar la experiencia de usuario en un sitio web. Desde cómo seleccionar elementos específicos hasta cómo crear transiciones suaves, cubriremos todo lo que necesita saber para sacar el máximo provecho de estas herramientas poderosas.\npseudo-clases # Las pseudo-clases son una herramienta muy poderosa en CSS que permite aplicar estilos a elementos en un estado específico. A continuación se presentan algunos ejemplos de cómo se pueden utilizar las pseudo-clases en una página web.\nEjemplo 1: Agregar estilos a los enlaces visitados # \u0026lt;a href=\u0026#34;http://ejemplo.com\u0026#34;\u0026gt;Este es un enlace\u0026lt;/a\u0026gt; a:visited { color: purple; } En este ejemplo, se está utilizando la pseudo-clase :visited para seleccionar y aplicar estilos a los enlaces que han sido visitados por el usuario en el documento HTML. En este caso, se está cambiando el color de los enlaces visitados a morado.\nEjemplo 2: Agregar estilos al elemento seleccionado # \u0026lt;select\u0026gt; \u0026lt;option\u0026gt;Opción 1\u0026lt;/option\u0026gt; \u0026lt;option\u0026gt;Opción 2\u0026lt;/option\u0026gt; \u0026lt;option\u0026gt;Opción 3\u0026lt;/option\u0026gt; \u0026lt;/select\u0026gt; option:checked { background-color: green; color: white; } En este ejemplo, se está utilizando la pseudo-clase :checked para seleccionar y aplicar estilos al elemento seleccionado en una lista desplegable del documento HTML. En este caso, se está cambiando el color\nMás pseudo-clases # Hay muchas pseudo-clases con las que podemos trabajar, en el siguiente artículo de MDN aprenderás un poco más de ellas:\nPseudo-clases - MDN web docs\nTransition # La propiedad transition en CSS permite crear transiciones suaves entre estados de un elemento, como cambios en el tamaño, posición, color y otros aspectos visuales. A continuación se presentan algunos ejemplos de cómo se pueden utilizar las transiciones en una página web.\nEjemplo 1: Crear una transición de tamaño al pasar el cursor sobre un botón # \u0026lt;button\u0026gt;Haz clic aquí\u0026lt;/button\u0026gt; button { transition: width 2s; } button:hover { width: 200px; } En este ejemplo, se está utilizando la propiedad transition para crear una transición suave de 2 segundos en el ancho del botón al pasar el cursor sobre él. El boton tiene un tamaño estandar y al pasar el cursor se amplia para dar la sensación de clic.\nEjemplo 2: Crear una transición de color al hacer clic en un elemento # \u0026lt;div\u0026gt;Haz clic aquí\u0026lt;/div\u0026gt; div { transition: background-color 1s; } div:active { background-color: blue; } En este ejemplo, se está utilizando la propiedad transition para crear una transición suave de 1 segundo en el color de fondo del elemento al hacer clic sobre él. El elemento tiene un color de fondo estandar y al hacer clic en el mismo cambia a azul.\nEstos son solo algunos ejemplos simples de cómo se pueden utilizar las transiciones en CSS para crear efectos visuales suaves y mejorar la experiencia del usuario en una página web. Hay muchas otras propiedades y valores disponibles para personalizar las transiciones, como la duración, el retraso y la función de velocidad.\nAdemás de esto, también es posible aplicar transiciones a varias propiedades al mismo tiempo, utilizando la sintaxis abreviada:\ntransition: background-color 1s, width 2s, height 2s; Es importante tener en cuenta que las transiciones solo funcionan en navegadores modernos y no funcionarán en navegadores antiguos. Por lo tanto, es importante probar y verificar la compatibilidad de las transiciones en diferentes navegadores antes de implementarlas en un sitio web en producción.\nEn el siguiente artículo de MDN podrás aprender más sobre esta propiedad de CSS:\ntransition - MDN web docs\n","date":"25 enero 2023","permalink":"/platform/levels/level1_2023/dia6/pseudo/","section":"Levels","summary":"Las pseudo-clases de CSS y la propiedad de transición son dos herramientas esenciales para cualquier desarrollador web.","title":"Pseudo"},{"content":"Switch # Una sentencia switch puede reemplazar múltiples condiciones if.\nProvee una mejor manera de comparar un valor con múltiples variantes.\nLa sintaxis # switch tiene uno o mas bloques casey un opcional default.\nSe ve de esta forma:\nswitch(x) { case \u0026#39;valor1\u0026#39;: // if (x === \u0026#39;valor1\u0026#39;) ... [break] case \u0026#39;valor2\u0026#39;: // if (x === \u0026#39;valor2\u0026#39;) ... [break] default: ... [break] } El valor de x es comparado contra el valor del primer case (en este caso, valor1), luego contra el segundo (valor2) y así sucesivamente, todo esto bajo una igualdad estricta. Si la igualdad es encontrada, switch empieza a ejecutar el código iniciando por el primer case correspondiente, hasta el break más cercano (o hasta el final del switch). Si no se cumple ningún caso entonces el código default es ejecutado (si existe). Ejemplo # Un ejemplo de switch (se resalta el código ejecutado):\nlet a = 2 + 2; switch (a) { case 3: alert( \u0026#39;Muy pequeño\u0026#39; ); break; case 4: alert( \u0026#39;¡Exacto!\u0026#39; ); // Se ejecuta esta línea break; case 5: alert( \u0026#39;Muy grande\u0026#39; ); break; default: alert( \u0026#34;Desconozco estos valores\u0026#34; ); } Aquí el switch inicia comparando a con la primera variante case que es 3. La comparación falla.\nLuego 4. La comparación es exitosa, por tanto la ejecución empieza desde case 4 hasta el break más cercano.\nSi no existe break entonces la ejecución continúa con el próximo case sin ninguna revisión.\nUn ejemplo sin break:\nlet a = 2 + 2; switch (a) { case 3: alert( \u0026#39;Muy pequeño\u0026#39; ); // Se ejecuta todas las lineas de abajo case 4: alert( \u0026#39;¡Exacto!\u0026#39; ); case 5: alert( \u0026#39;Muy grande\u0026#39; ); default: alert( \u0026#34;Desconozco estos valores\u0026#34; ); // Se ejecuta todas las lineas de arriba } En el ejemplo anterior veremos ejecuciones de tres alert secuenciales:\nalert( \u0026#39;¡Exacto!\u0026#39; ); alert( \u0026#39;Muy grande\u0026#39; ); alert( \u0026#34;Desconozco estos valores\u0026#34; ); El tipo importa # Vamos a enfatizar que la comparación de igualdad es siempre estricta. Los valores deben ser del mismo tipo para coincidir.\nPor ejemplo, consideremos el código:\nlet arg = prompt(\u0026#34;Ingrese un valor\u0026#34;); switch (arg) { case \u0026#39;0\u0026#39;: case \u0026#39;1\u0026#39;: alert( \u0026#39;Uno o cero\u0026#39; ); break; case \u0026#39;2\u0026#39;: alert( \u0026#39;Dos\u0026#39; ); break; case 3: alert( \u0026#39;¡Nunca ejecuta!\u0026#39; ); break; default: alert( \u0026#39;Un valor desconocido\u0026#39; ); } Para 0, 1, se ejecuta el primer alert. Para 2 se ejecuta el segundo alert. Pero para 3, el resultado del prompt es un string \u0026quot;3\u0026quot;, el cual no es estrictamente igual === al número 3. Por tanto ¡Tenemos un código muerto en case 3! La variante default se ejecutará. Debería usar switch? # Si bien es cierto, switch puede parecer una alternativa viable para ciertas situaciones con las que nos encontremos, en la actualidad hay muchas formas y motivos por los que su uso ha descendido y se debería evitar, sobre todo al escalar nuestro proyecto. En el siguiente video aprenderás como evitar su uso y mantener buenas prácticas en tu código (en el ejemplo se hace uso de la estructura objetos, ternarias y operadores lógicos, por ahora enfocate en el concepto en sí más que en las estructuras que se usan):\nBucles # Hasta el momento hemos aprendido 3 tipos de bucles: while, do while y for. En el siguiente video repasaremos el uso de ellos y tambien veremos el uso de algunas variaciones de este último que son for in y for of:\nDentro de W3Schools encontramos información detallada acerca de cada uno, aquí te dejo articulos sobre los distintos loops(ciclos), puedes cambiar el idioma a español en tu navegador Chrome o Edge dando click derecho en la pagina y seleccionando la opción \u0026ldquo;Traducir a español\u0026rdquo;:\nCiclo For ciclo For in Ciclo For Of Ciclo While ","date":"25 enero 2023","permalink":"/platform/levels/level1_2023/dia5/switch_loop/","section":"Levels","summary":"Switch # Una sentencia switch puede reemplazar múltiples condiciones if.","title":"Switch y Bucles"},{"content":"La posicion y la profundidad son aspectos importantes en el diseño web, y en CSS tenemos las propiedades position y z-index para controlarlos.\nLa propiedad position nos permite especificar cómo se posiciona un elemento dentro de un contenedor, mientras que la propiedad z-index nos permite controlar el orden en el que los elementos aparecen en la pantalla. Juntas, estas propiedades nos permiten crear diseños complejos y sofisticados. En las siguientes sección veremos en detalle cómo funcionan estas propiedades y cómo utilizarlas en nuestros diseños.\nPosition # En el siguiente video aprenderas las bases de position en CSS:\nAdicionalmente, dentro del portal \u0026ldquo;MDN web docs_\u0026rdquo; podemos encontrar más información\tsobre esta propiedad position.\nposition - MDN web docs\nz-index # En el siguiente video aprenderás sobre el uso de z-indes en CSS:\nLuego de ver el video, lee el siguiente articulo de MDN sobre esta propiedad z-index.\nz-index - MDN web docs\n","date":"25 enero 2023","permalink":"/platform/levels/level1_2023/dia5/position/","section":"Levels","summary":"La posicion y la profundidad son aspectos importantes en el diseño web, y en CSS tenemos las propiedades position y z-index para controlarlos.","title":"Position y Z-index"},{"content":"Etiqueta \u0026lt;Head\u0026gt; # En el siguiente video aprenderás sobre la importancia de la etiqueta \u0026lt;head\u0026gt; dentro de un documento HTML.\nEstas son las meta etiquetas más comunes pero existen muchas más de las cuales puedes seguir investigando si tienes curiosidad sobre este tema. Te dejo un link de referencia.\nMetadatos en HTML - MDN web docs\nEtiqueta \u0026lt;Body\u0026gt; # Estructura y Anatomía HTML # Multimedia en HTML # Dentro de HTML podemos incrustas archivos multimedia como imagenes, audio y video. En esta sección aprenderemos a insertar cada uno de ellas.\nImágenes # Las imágenes se pueden mostrar usando la etiqueta img. Esta etiqueta acepta un atributo src, que usamos para establecer la fuente de la imagen:\n\u0026lt;img src=\u0026#34;image.png\u0026#34; /\u0026gt; Podemos utilizar un amplio conjunto de imágenes. Los más comunes son PNG, JPEG, GIF, SVG y, más recientemente, WebP. El estándar HTML requiere que un atributo alt esté presente para describir la imagen. Esto lo utilizan los lectores de pantalla y también los bots de los motores de búsqueda:\n\u0026lt;img src=\u0026#34;dog.png\u0026#34; alt=\u0026#34;A picture of a dog\u0026#34; /\u0026gt; Puede configurar los atributos width y height para establecer el espacio que ocupará el elemento, de modo que el navegador pueda tenerlo en cuenta y no cambie el diseño cuando esté completamente cargado. Toma un valor numérico, expresado en píxeles. Sin embargo, te recomendamos fuertemente modificar estos dos atributos desde CSS.\n\u0026lt;img src=\u0026#34;dog.png\u0026#34; alt=\u0026#34;A picture of a dog\u0026#34; width=\u0026#34;300\u0026#34; height=\u0026#34;200\u0026#34; /\u0026gt; Video # Esta etiqueta le permite incrustar contenido de video en sus páginas HTML.\nEste elemento puede transmitir video, usando una cámara web getUserMedia() o WebRTC , o puede reproducir una fuente de video a la que haga referencia usando el atributo src:\n\u0026lt;video src=\u0026#34;file.mp4\u0026#34;\u0026gt;\u0026lt;/video\u0026gt; De forma predeterminada, el navegador no muestra ningún control para este elemento, solo el video. Lo que significa que el video se reproducirá solo si está configurado para reproducción automática (más sobre esto más adelante) y el usuario no puede ver cómo detenerlo, pausarlo, controlar el volumen o saltar a una posición específica en el video.\nPara mostrar los controles integrados, puede agregar el atributo controls:\n\u0026lt;video src=\u0026#34;file.mp4\u0026#34; controls\u0026gt;\u0026lt;/video\u0026gt; Puede especificar el tipo MIME del archivo de video usando el atributo type. Si no está configurado, el navegador intentará determinarlo automáticamente:\n\u0026lt;video src=\u0026#34;file.mp4\u0026#34; controls type=\u0026#34;video/mp4\u0026#34;\u0026gt;\u0026lt;/video\u0026gt; Un archivo de video por defecto no se reproduce automáticamente. Agregue el atributo autoplay para reproducir el video automáticamente:\n\u0026lt;video src=\u0026#34;file.mp4\u0026#34; controls autoplay\u0026gt;\u0026lt;/video\u0026gt; El siguiente video explica como trabajar con cada uno de los conceptos multimedia que hemos aprendido hoy:\nAprendiendo con Práctica # Continua reforzando tu conocimiento de HTML y CSS siguiendo estos cursos:\nHTML - Aplicacion de fotos de gatos\nCSS - Menú de Cafetería\n","date":"25 enero 2023","permalink":"/platform/html/estructura/","section":"Htmls","summary":"Etiqueta \u0026lt;Head\u0026gt; # En el siguiente video aprenderás sobre la importancia de la etiqueta \u0026lt;head\u0026gt; dentro de un documento HTML.","title":"Head, Body y Estructura"},{"content":"Etiqueta \u0026lt;Head\u0026gt; # En el siguiente video aprenderás sobre la importancia de la etiqueta \u0026lt;head\u0026gt; dentro de un documento HTML.\nEstas son las meta etiquetas más comunes pero existen muchas más de las cuales puedes seguir investigando si tienes curiosidad sobre este tema. Te dejo un link de referencia.\nMetadatos en HTML - MDN web docs\nEtiqueta \u0026lt;Body\u0026gt; # Estructura y Anatomía HTML # Multimedia en HTML # Dentro de HTML podemos incrustas archivos multimedia como imagenes, audio y video. En esta sección aprenderemos a insertar cada uno de ellas.\nImágenes # Las imágenes se pueden mostrar usando la etiqueta img. Esta etiqueta acepta un atributo src, que usamos para establecer la fuente de la imagen:\n\u0026lt;img src=\u0026#34;image.png\u0026#34; /\u0026gt; Podemos utilizar un amplio conjunto de imágenes. Los más comunes son PNG, JPEG, GIF, SVG y, más recientemente, WebP. El estándar HTML requiere que un atributo alt esté presente para describir la imagen. Esto lo utilizan los lectores de pantalla y también los bots de los motores de búsqueda:\n\u0026lt;img src=\u0026#34;dog.png\u0026#34; alt=\u0026#34;A picture of a dog\u0026#34; /\u0026gt; Puede configurar los atributos width y height para establecer el espacio que ocupará el elemento, de modo que el navegador pueda tenerlo en cuenta y no cambie el diseño cuando esté completamente cargado. Toma un valor numérico, expresado en píxeles. Sin embargo, te recomendamos fuertemente modificar estos dos atributos desde CSS.\n\u0026lt;img src=\u0026#34;dog.png\u0026#34; alt=\u0026#34;A picture of a dog\u0026#34; width=\u0026#34;300\u0026#34; height=\u0026#34;200\u0026#34; /\u0026gt; Video # Esta etiqueta le permite incrustar contenido de video en sus páginas HTML.\nEste elemento puede transmitir video, usando una cámara web getUserMedia() o WebRTC , o puede reproducir una fuente de video a la que haga referencia usando el atributo src:\n\u0026lt;video src=\u0026#34;file.mp4\u0026#34;\u0026gt;\u0026lt;/video\u0026gt; De forma predeterminada, el navegador no muestra ningún control para este elemento, solo el video. Lo que significa que el video se reproducirá solo si está configurado para reproducción automática (más sobre esto más adelante) y el usuario no puede ver cómo detenerlo, pausarlo, controlar el volumen o saltar a una posición específica en el video.\nPara mostrar los controles integrados, puede agregar el atributo controls:\n\u0026lt;video src=\u0026#34;file.mp4\u0026#34; controls\u0026gt;\u0026lt;/video\u0026gt; Puede especificar el tipo MIME del archivo de video usando el atributo type. Si no está configurado, el navegador intentará determinarlo automáticamente:\n\u0026lt;video src=\u0026#34;file.mp4\u0026#34; controls type=\u0026#34;video/mp4\u0026#34;\u0026gt;\u0026lt;/video\u0026gt; Un archivo de video por defecto no se reproduce automáticamente. Agregue el atributo autoplay para reproducir el video automáticamente:\n\u0026lt;video src=\u0026#34;file.mp4\u0026#34; controls autoplay\u0026gt;\u0026lt;/video\u0026gt; El siguiente video explica como trabajar con cada uno de los conceptos multimedia que hemos aprendido hoy:\nAprendiendo con Práctica # Continua reforzando tu conocimiento de HTML y CSS siguiendo estos cursos:\nHTML - Aplicacion de fotos de gatos\nCSS - Menú de Cafetería\n","date":"25 enero 2023","permalink":"/platform/mysql/dml2/","section":"Mysqls","summary":"Etiqueta \u0026lt;Head\u0026gt; # En el siguiente video aprenderás sobre la importancia de la etiqueta \u0026lt;head\u0026gt; dentro de un documento HTML.","title":"Head, Body y Estructura"},{"content":"Head # El elemento HTML \u0026lt;head\u0026gt; provee información general (metadatos) acerca del documento, incluyendo su título y enlaces a scripts y hojas de estilos. Es importante diferenciar este elemento del elemento header el cual sirve como etiqueta semántica para contener el contenido de encabezado de nuestra página web.\nSiempre se escribe antes de la etiqueta body, como hijo de la etiqueta html:\n\u0026lt;html\u0026gt; \u0026lt;head\u0026gt; ... \u0026lt;/head\u0026gt; \u0026lt;body\u0026gt; ... \u0026lt;/body\u0026gt; \u0026lt;/html\u0026gt; Dentro de esta etiqueta no usamos atributos y tampoco escribimos contenido en él. Sirve solo para contener otras etiquetas, dependiendo que necesitemos hacer:\ntitle script noscript link style base meta La etiqueta title # La etiqueta title determina el título de la página. El título se muestra en el navegador, y es especialmente importante ya que es uno de los factores clave para la optimización de motores de búsqueda (SEO).\nLa etiqueta script # Esta etiqueta se utiliza para añadir JavaScript a la página.\nPuede incluirlo en línea, usando una etiqueta de apertura, el código JavaScript y luego la etiqueta de cierre:\n\u0026lt;script\u0026gt; ..some JS \u0026lt;/script\u0026gt; O bien, puede cargar un archivo JavaScript externo mediante el atributo src:\n\u0026lt;script src=\u0026#34;file.js\u0026#34;\u0026gt;\u0026lt;/script\u0026gt; El atributo type de forma predeterminada se establece en text/javascript, por lo que es completamente opcional.\nay algo muy importante que saber sobre esta etiqueta.\nA veces, esta etiqueta se usa en la parte inferior de la página, justo antes de la etiqueta de cierre \u0026lt;/body\u0026gt;. ¿Por qué? Por razones de rendimiento.\nLa carga de secuencias de comandos bloquea de forma predeterminada la representación de la página hasta que la secuencia de comandos se analiza y se carga.\nAl colocarlo en la parte inferior de la página, la secuencia de comandos se carga y ejecuta después de que toda la página ya se analizó y se cargó, lo que brinda una mejor experiencia al usuario que al mantenerlo en la etiqueta head.\nEsto puede ser considerado una mala práctica. Es mejor dejar vivir script dentro de la etiqueta head.\nEn JavaScript moderno, tenemos una alternativa que tiene más rendimiento que mantener el script en la parte inferior de la página: el atributo defer. Este es un ejemplo que carga un archivo file.js, relativo a la URL actual:\n\u0026lt;script defer src=\u0026#34;file.js\u0026#34;\u0026gt;\u0026lt;/script\u0026gt; Este es el escenario que desencadena la ruta más rápida a una página de carga rápida y JavaScript de carga rápida.\nLa etiqueta link # La etiqueta link se utiliza para establecer relaciones entre un documento y otros recursos.\nSe utiliza principalmente para vincular un archivo CSS externo para cargarlo.\nEste elemento no tiene etiqueta de cierre.\n\u0026lt;!DOCTYPE html\u0026gt; \u0026lt;html\u0026gt; \u0026lt;head\u0026gt; ... \u0026lt;link href=\u0026#34;file.css\u0026#34; rel=\u0026#34;stylesheet\u0026#34; /\u0026gt; ... \u0026lt;/head\u0026gt; ... \u0026lt;/html\u0026gt; El atributo media permite la carga de diferentes hojas de estilo dependiendo de las capacidades del dispositivo:\n\u0026lt;link href=\u0026#34;file.css\u0026#34; media=\u0026#34;screen\u0026#34; rel=\u0026#34;stylesheet\u0026#34; /\u0026gt; \u0026lt;link href=\u0026#34;print.css\u0026#34; media=\u0026#34;print\u0026#34; rel=\u0026#34;stylesheet\u0026#34; /\u0026gt; O podemos asociar un favicon usando:\n\u0026lt;link rel=\u0026#34;apple-touch-icon\u0026#34; sizes=\u0026#34;180x180\u0026#34; href=\u0026#34;/assets/apple-touch-icon.png\u0026#34; /\u0026gt; \u0026lt;link rel=\u0026#34;icon\u0026#34; type=\u0026#34;image/png\u0026#34; sizes=\u0026#34;32x32\u0026#34; href=\u0026#34;/assets/favicon-32x32.png\u0026#34; /\u0026gt; \u0026lt;link rel=\u0026#34;icon\u0026#34; type=\u0026#34;image/png\u0026#34; sizes=\u0026#34;16x16\u0026#34; href=\u0026#34;/assets/favicon-16x16.png\u0026#34; /\u0026gt; La etiqueta style # Esta etiqueta se puede usar para agregar estilos al documento, en lugar de cargar una hoja de estilo externa:\n\u0026lt;style\u0026gt; .some-css { } \u0026lt;/style\u0026gt; La etiqueta meta # Las metaetiquetas realizan una variedad de tareas y son muy, muy importantes, especialmente para el SEO. Los elementos meta solo tienn una etiqueta inicial. La etiqueta más básica es la metaetiqueta description:\n\u0026lt;meta name=\u0026#34;description\u0026#34; content=\u0026#34;A nice page\u0026#34; /\u0026gt; Google podría usar esto para generar la descripción de la página en sus páginas de resultados, si encuentra que describe mejor la página que el contenido de la página (no me preguntes cómo).\nLa etiqueta meta charset se utiliza para establecer la codificación de caracteres de la página utf-8 en la mayoría de los casos:\n\u0026lt;meta charset=\u0026#34;utf-8\u0026#34; /\u0026gt; La metaetiqueta viewport se usa para decirle al navegador que establezca el ancho de la página en función del ancho del dispositivo.\n\u0026lt;meta name=\u0026#34;viewport\u0026#34; content=\u0026#34;width=device-width, initial-scale=1\u0026#34; /\u0026gt; Estas son las meta etiquetas más comunes pero existen muchas más de las cuales puedes seguir investigando si tienes curiosidad sobre este tema. Te dejo un link de referencia.\nMetadatos en HTML - MDN web docs\nMultimedia en HTML # Dentro de HTML podemos incrustas archivos multimedia como imagenes, audio y video. En esta sección aprenderemos a insertar cada uno de ellas.\nImágenes # Las imágenes se pueden mostrar usando la etiqueta img. Esta etiqueta acepta un atributo src, que usamos para establecer la fuente de la imagen:\n\u0026lt;img src=\u0026#34;image.png\u0026#34; /\u0026gt; Podemos utilizar un amplio conjunto de imágenes. Los más comunes son PNG, JPEG, GIF, SVG y, más recientemente, WebP. El estándar HTML requiere que un atributo alt esté presente para describir la imagen. Esto lo utilizan los lectores de pantalla y también los bots de los motores de búsqueda:\n\u0026lt;img src=\u0026#34;dog.png\u0026#34; alt=\u0026#34;A picture of a dog\u0026#34; /\u0026gt; Puede configurar los atributos width y height para establecer el espacio que ocupará el elemento, de modo que el navegador pueda tenerlo en cuenta y no cambie el diseño cuando esté completamente cargado. Toma un valor numérico, expresado en píxeles. Sin embargo, te recomendamos fuertemente modificar estos dos atributos desde CSS.\n\u0026lt;img src=\u0026#34;dog.png\u0026#34; alt=\u0026#34;A picture of a dog\u0026#34; width=\u0026#34;300\u0026#34; height=\u0026#34;200\u0026#34; /\u0026gt; Audio # LA etiqueta audio le permite incrustar contenido de audio en sus páginas HTML.\nEste elemento puede transmitir audio, tal vez usando un micrófono a través de getUserMedia() , o puede reproducir una fuente de audio a la que hace referencia con el atributo src:\n\u0026lt;audio src=\u0026#34;file.mp3\u0026#34;\u0026gt;\u0026lt;/audio\u0026gt; Por defecto, el navegador no muestra ningún control para este elemento. Lo que significa que el audio se reproducirá solo si se establece en reproducción automática (más sobre esto más adelante) y el usuario no puede ver cómo detenerlo o controlar el volumen o moverse a través de la pista.\nPara mostrar los controles integrados, puede agregar el atributo controls:\n\u0026lt;audio src=\u0026#34;file.mp3\u0026#34; controls\u0026gt;\u0026lt;/audio\u0026gt; Los controles pueden tener una máscara personalizada.\nPuede especificar el tipo MIME del archivo de audio utilizando el atributo type. Si no está configurado, el navegador intentará determinarlo automáticamente:\n\u0026lt;audio src=\u0026#34;file.mp3\u0026#34; controls type=\u0026#34;audio/mpeg\u0026#34;\u0026gt;\u0026lt;/audio\u0026gt; Un archivo de audio por defecto no se reproduce automáticamente. Agregue el atributo autoplay para reproducir el audio automáticamente:\n\u0026lt;audio src=\u0026#34;file.mp3\u0026#34; controls autoplay\u0026gt;\u0026lt;/audio\u0026gt; Nota: los navegadores móviles no permiten la reproducción automática\nVideo # Esta etiqueta le permite incrustar contenido de video en sus páginas HTML.\nEste elemento puede transmitir video, usando una cámara web getUserMedia() o WebRTC , o puede reproducir una fuente de video a la que haga referencia usando el atributo src:\n\u0026lt;video src=\u0026#34;file.mp4\u0026#34;\u0026gt;\u0026lt;/video\u0026gt; De forma predeterminada, el navegador no muestra ningún control para este elemento, solo el video. Lo que significa que el video se reproducirá solo si está configurado para reproducción automática (más sobre esto más adelante) y el usuario no puede ver cómo detenerlo, pausarlo, controlar el volumen o saltar a una posición específica en el video.\nPara mostrar los controles integrados, puede agregar el atributo controls:\n\u0026lt;video src=\u0026#34;file.mp4\u0026#34; controls\u0026gt;\u0026lt;/video\u0026gt; Puede especificar el tipo MIME del archivo de video usando el atributo type. Si no está configurado, el navegador intentará determinarlo automáticamente:\n\u0026lt;video src=\u0026#34;file.mp4\u0026#34; controls type=\u0026#34;video/mp4\u0026#34;\u0026gt;\u0026lt;/video\u0026gt; Un archivo de video por defecto no se reproduce automáticamente. Agregue el atributo autoplay para reproducir el video automáticamente:\n\u0026lt;video src=\u0026#34;file.mp4\u0026#34; controls autoplay\u0026gt;\u0026lt;/video\u0026gt; El siguiente video explica como trabajar con cada uno de los conceptos multimedia que hemos aprendido hoy:\nSelectores # Hace poco vimos como funciona la especificidad en CSS y algunos selectores que podemos usar. Ahora repasemos brevemente como funciona la especificidad con esta imagen:\nComo vimos tambien en ese momento, podemos combinar los selectores segun necesitemos, por ejemplo:\n.animal.perro { background-color: green; } Cuando tenemos esta situación, debemos tener en cuenta que la especificidad se suma, lo cual puede afectar la propiedad que se aplica a un elemento, por ejemplo, si tenemos los siguientes elementos:\n\u0026lt;p class=\u0026#34;animal perro\u0026#34;\u0026gt;Firulais\u0026lt;/p\u0026gt; p { background-color: red; } .animal { background-color: green; } El primer Selector tiene una especificidad de 0.0.1 (Ver la tabla superior) y el de clase tiene una especificidad de 0.1.0 por lo tanto, se aplicará background-color: green. Ahora vamos a añadir un selector de clase al primer selector:\np.perro { background-color: red; } .animal { background-color: green; } Ahora el primero tiene una especificidad de 0.1.1 y el segundo de 0.1.0 por lo tanto, se aplicará background-color: red.\nSi bien es cierto los estilos en CSS se aplican en cascada, cuando tenemos un conflicto entre dos propiedades que pueden afectar al mismo elemento, la especificidad determina cual de los dos estilos se aplica al elemento, aplicando el que tenga una especificidad mayor.\nSi deseamos que el color verde se aplique al elemento, entonces podemos mejorar su especificidad:\np.perro { background-color: red; } .animal.perro { background-color: green; } Ahora el primer selector tiene especificidad de 0.1.1 y el segundo de 0.2.0, por lo que se aplicará background-color: green.\nCuando tenemos un proyecto pequeño probablemente no tengamos problemas con la especificidad, pero a medida que nuestro proyecto crece, la forma en que seleccionamos elementos se vuelve mas compleja, podríamos llegar a tener algo como esto:\n.container \u0026gt; .animal.perro ~ a.link{ /* 0.4.1 */ color: red; } .container \u0026gt; a#bot.link.green{ /* 1.3.1 */ color: green; } Es aquí donde podemos aplicar la especificidad para determinar correctamente cual es el estilo que se está aplicando y como corregirlo de tal forma en la que no afecte el resto de elementos que estoy seleccionando.\nPara que podamos comprender la manera correcta de aplicar los selectores, repasemos los distintos selectores que encontramos en CSS 🧐.\n","date":"25 enero 2023","permalink":"/platform/levels/level1_2023/dia4/headcss/","section":"Levels","summary":"Head # El elemento HTML \u0026lt;head\u0026gt; provee información general (metadatos) acerca del documento, incluyendo su título y enlaces a scripts y hojas de estilos.","title":"Head, Multimedia y Selectores"},{"content":"Etiqueta \u0026lt;Head\u0026gt; # En el siguiente video aprenderás sobre la importancia de la etiqueta \u0026lt;head\u0026gt; dentro de un documento HTML.\nEstas son las meta etiquetas más comunes pero existen muchas más de las cuales puedes seguir investigando si tienes curiosidad sobre este tema. Te dejo un link de referencia.\nMetadatos en HTML - MDN web docs\nEtiqueta \u0026lt;Body\u0026gt; # Estructura y Anatomía HTML # Multimedia en HTML # Dentro de HTML podemos incrustas archivos multimedia como imagenes, audio y video. En esta sección aprenderemos a insertar cada uno de ellas.\nImágenes # Las imágenes se pueden mostrar usando la etiqueta img. Esta etiqueta acepta un atributo src, que usamos para establecer la fuente de la imagen:\n\u0026lt;img src=\u0026#34;image.png\u0026#34; /\u0026gt; Podemos utilizar un amplio conjunto de imágenes. Los más comunes son PNG, JPEG, GIF, SVG y, más recientemente, WebP. El estándar HTML requiere que un atributo alt esté presente para describir la imagen. Esto lo utilizan los lectores de pantalla y también los bots de los motores de búsqueda:\n\u0026lt;img src=\u0026#34;dog.png\u0026#34; alt=\u0026#34;A picture of a dog\u0026#34; /\u0026gt; Puede configurar los atributos width y height para establecer el espacio que ocupará el elemento, de modo que el navegador pueda tenerlo en cuenta y no cambie el diseño cuando esté completamente cargado. Toma un valor numérico, expresado en píxeles. Sin embargo, te recomendamos fuertemente modificar estos dos atributos desde CSS.\n\u0026lt;img src=\u0026#34;dog.png\u0026#34; alt=\u0026#34;A picture of a dog\u0026#34; width=\u0026#34;300\u0026#34; height=\u0026#34;200\u0026#34; /\u0026gt; Video # Esta etiqueta le permite incrustar contenido de video en sus páginas HTML.\nEste elemento puede transmitir video, usando una cámara web getUserMedia() o WebRTC , o puede reproducir una fuente de video a la que haga referencia usando el atributo src:\n\u0026lt;video src=\u0026#34;file.mp4\u0026#34;\u0026gt;\u0026lt;/video\u0026gt; De forma predeterminada, el navegador no muestra ningún control para este elemento, solo el video. Lo que significa que el video se reproducirá solo si está configurado para reproducción automática (más sobre esto más adelante) y el usuario no puede ver cómo detenerlo, pausarlo, controlar el volumen o saltar a una posición específica en el video.\nPara mostrar los controles integrados, puede agregar el atributo controls:\n\u0026lt;video src=\u0026#34;file.mp4\u0026#34; controls\u0026gt;\u0026lt;/video\u0026gt; Puede especificar el tipo MIME del archivo de video usando el atributo type. Si no está configurado, el navegador intentará determinarlo automáticamente:\n\u0026lt;video src=\u0026#34;file.mp4\u0026#34; controls type=\u0026#34;video/mp4\u0026#34;\u0026gt;\u0026lt;/video\u0026gt; Un archivo de video por defecto no se reproduce automáticamente. Agregue el atributo autoplay para reproducir el video automáticamente:\n\u0026lt;video src=\u0026#34;file.mp4\u0026#34; controls autoplay\u0026gt;\u0026lt;/video\u0026gt; El siguiente video explica como trabajar con cada uno de los conceptos multimedia que hemos aprendido hoy:\nAprendiendo con Práctica # Continua reforzando tu conocimiento de HTML y CSS siguiendo estos cursos:\nHTML - Aplicacion de fotos de gatos\nCSS - Menú de Cafetería\n","date":"25 enero 2023","permalink":"/platform/mysql/micellaneous/","section":"Mysqls","summary":"Etiqueta \u0026lt;Head\u0026gt; # En el siguiente video aprenderás sobre la importancia de la etiqueta \u0026lt;head\u0026gt; dentro de un documento HTML.","title":"Micellaneous"},{"content":"Entender el Box Model es una de las cosas más importantes para trabajar correctamente con HTML y CSS, una vez este concepto nos queda claro, es posible que se nos facilite mucho la construcción de sitios web.\nEn el siguiente artículo encontrarás información mas detallada sobre cómo funciona el 👉 box-model.\nLee atentamente el artículo antes de continuar.\nDisplay # Hace poco estuvimos aprendiendo sobre la propiedad display en CSSy conocimos 4 propiedades básicas:\nblock inline inline-block none Un display es una propiedad en CSS que se utiliza para especificar cómo se debe mostrar un elemento en una página web.\nDisplay block: Este valor hace que el elemento ocupe todo el ancho disponible y comience en una nueva línea después del elemento anterior. Los elementos con display block son, por defecto, visibles y ocupan todo el espacio disponible en la dirección del eje principal (generalmente, la dirección vertical). Ejemplo de código:\ndiv { display: block; } Display inline: Este valor hace que el elemento se comporte como una línea de texto, es decir, no comienza en una nueva línea y solo ocupa el espacio necesario para su contenido. Los elementos con display inline son, por defecto, visibles y solo ocupan el espacio necesario para su contenido. Ejemplo de código:\nspan { display: inline; } Display inline-block: Este valor combina las características de los valores block e inline. Los elementos con display inline-block son, por defecto, visibles y ocupan solo el espacio necesario para su contenido, pero pueden tener un ancho y un alto especificados. Ejemplo de código:\nimg { display: inline-block; width: 50px; height: 50px; } Flexbox: Flexbox es una manera de crear diseños flexibles y adaptativos en CSS. Se utiliza para alinear elementos en una fila o columna y distribuir el espacio disponible de manera eficiente. Un ejemplo de código para crear un contenedor flex:\n.container { display: flex; } Todos estos valores y conceptos son estandarizado por el W3C, las especificaciones de las propiedades y su uso pueden ser consultadas en https://www.w3.org/TR/CSS/\nEl centrado de Elementos # Una práctica común con los elementos, es poder alinearlos y como viste en capitulos pasados, para mover los elementos respecto a otros puedes usar margin o si deseas cambiar su espacio interior usas padding.\nPara este ejemplo pega el siguiente codigo en un documento HTML:\n\u0026lt;body\u0026gt; \u0026lt;div class=\u0026#34;contenedor\u0026#34;\u0026gt; \u0026lt;div class=\u0026#34;caja1\u0026#34;\u0026gt; Soy una caja \u0026lt;/div\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;/body\u0026gt; Tambien añade estos estilos CSS en la etiqueta \u0026lt;style\u0026gt;\u0026lt;/style\u0026gt;:\n.contenedor { width: 100%; height: 100vh; } .caja1 { background-color: #FAF; } Ahora deberías ver que una caja que abarca todo el ancho disponible. vamos a ajustar el ancho, añade la siguiente regla css:\n.caja1 { background-color: #FAF; width: 200px; } Con esto, nuestra caja mide 200px.\nCuando queremos centrar un elemento, podemos usar algunas técnicas sencillas, te explicaré algunas que puedes tener en cuenta:\nUsando Margin: Podemos centrar un objeto de manera Horizontal usando el Margin, para usamos la propiedad margin y le damos un valor auto:\n.caja1 { background-color: #FAF; margin: auto; /* Solo se aplicará a los lados, aun podemos poner un margin para top y bottom*/ } Usando Flex: Flex nos ayuda a posicionar los elementos hijo respecto a su contenedor padre. Para ver una idea más clara, ahora vamos a centrar ambas cajas usando el display flex. Para ello primero quitamos la propiedad margin que habiamos usado en el ejemplo anterior y ahora añadimos lo siguiente a el selector .contenedor:\n.contenedor { width: 100%; height: 100vh; display: flex; /* Indicamos que el contenedor tiene display flex*/ justify-content: center; /* Indicamos que queremos justificar el contenido al centro en el eje horizontal */ } Con esto hemos centrado nuestra caja dentro del eje horizontal, si queremos añadir un centrado vertical podemo hacer lo siguiente:\n.contenedor { width: 100%; height: 100vh; display: flex; /* Indicamos que el contenedor tiene display flex*/ justify-content: center; /* Indicamos que queremos justificar el contenido al centro en el eje horizontal */ align-items: center; /* Indicamos que estamos centrando de manera vertical */ } Esto que puede parecer sencillo, en ocasiones es un dolor de cabeza para muchos desarrolladores por desconocer la correcta aplicación de estas propiedades.\nIntroducción a Flexbox # Si bien es cierto hemos usado Flex para uno de los ejemplos, aún no hemos visto que es este tipo de display y las ventajas que trae, así que veremos un poco de ello en el siguiente video:\n","date":"24 enero 2023","permalink":"/platform/levels/level1_2023/dia4/display/","section":"Levels","summary":"Entender el Box Model es una de las cosas más importantes para trabajar correctamente con HTML y CSS, una vez este concepto nos queda claro, es posible que se nos facilite mucho la construcción de sitios web.","title":"Display"},{"content":"Fuentes # En los albores de la web, solo tenía un puñado de fuentes entre las que podía elegir, afortunadamente, hoy puedes cargar cualquier tipo de fuente en tus páginas. CSS ha ganado muchas buenas capacidades a lo largo de los años en lo que respecta a las fuentes.\nLa propiedad font es la abreviatura de una serie de propiedades, las que veremos hoy son las siguientes:\nfont-family font-weight font-style font-size Veamos cada uno de ellos.\nfont-family # Establece la familia de fuentes que utilizará el elemento. ¿Por qué “familia”? Porque lo que conocemos como fuente en realidad se compone de varias subfuentes. que proporcionan todo el estilo (negrita, cursiva, ligero\u0026hellip;) que necesitamos. Aquí hay un ejemplo de la aplicación Font Book de una Mac: la familia de fuentes Fira Code alberga varias fuentes dedicadas debajo:\nEsta propiedad le permite seleccionar una fuente específica, por ejemplo:\nbody { font-family: Helvetica; } Puede establecer varios valores, por lo que se usará la segunda opción si la primera no se puede usar por algún motivo (si no se encuentra en la máquina o si la conexión de red para descargar la fuente falló, por ejemplo):\nbody { font-family: Helvetica, Arial; } font-weight # Esta propiedad establece el ancho de una fuente. Puede utilizar esos valores predefinidos:\nnormal bold bolder (en relación con el elemento principal) lighter (en relación con el elemento principal) O usando las palabras clave numéricas\n100 200 300 400, asignado a normal 500 600 700 asignado a bold 800 900 donde 100 es la fuente más clara y 900 es la más gruesa.\nfont-style # Le permite aplicar un estilo de cursiva a una fuente. Esta propiedad también permite los valores oblique y normal. Hay muy poca o ninguna diferencia entre usar italic y oblique. El primero es más fácil para mí, ya que HTML ya ofrece un elemento i que significa cursiva (italic).\np { font-style: italic; } font-size # Esta propiedad se utiliza para determinar el tamaño de las fuentes. Puedes pasar 2 tipos de valores: un valor de longitud como px, em, rem, o una palabra clave de valor pre definido. En el Segundo caso los valores que puedes usar son:\nxx-small x-small small medium large x-large xx-large smaller (relativo al elemnto padre) larger (relativo al elemento padre) p { font-size: 20px; } li { font-size: medium; } Fuente personalizada # En ocasiones, querrás usar fuentes que no están por defecto dentro del navegador del cliente o tienes que asegurarte que la fuente que deseas usar, esté disponible para que el cliente tambien pueda renderizarla. Para esto podemos importar fuentes personalizadas a nuestro proyecto, en el siguiente video aprenderás a usar fuentes personalizadas de google a tu página web, da click en el siguiente enlace para abrir el video en youtube:\nFuentes Personalizadas en CSS - Youtube\nTipografía | Texto # Ya hablamos sobre las fuentes, pero hay más en el estilo del texto. En esta sección hablaremos de las siguientes propiedades:\ntext-decoration text-align line-height text-shadow text-decoration # Esta propiedad se usa para agregar decoraciones al texto, incluyendo:\nunderline overline line-through blink none a { text-decoration: underline; } text-align # Por defecto, la alineación del texto tiene el valor start, lo que significa que el texto comienza en el \u0026ldquo;inicio\u0026rdquo;. Los valores posibles son start, end, left, right, center, justify(es bueno tener un espacio constante en los extremos de las líneas):\np { text-align: center; } line-height # Esto le permite cambiar la altura de una línea. Cada línea de texto tiene una cierta altura de fuente, pero luego hay un espacio adicional verticalmente entre las líneas. Esa es la altura de la línea. los valores que puedes utilizar son unidades de medida (px, rem, em, etc).\np { line-height: 1rem; } text-shadow # Aplica una sombra al texto. Por defecto, el texto ahora tiene sombra.\nEsta propiedad acepta un color opcional y un conjunto de valores que establecen:\nel desplazamiento X de la sombra del texto el desplazamiento Y de la sombra del texto el radio de desenfoque Si no se especifica el color, la sombra utilizará el color del texto.\nHay muchas más propiedades CSS para fuentes y textos, pero las veremos más adelanta, incluso como importar otro tipo de fuentes. Si deseas aprender más propiedades de CSS puedes ir al siguiente enlace, la página está en inglés pero puedes usar la opcion de traducir páginas que te da tu navegador:\ncssreference.io\n","date":"24 enero 2023","permalink":"/platform/levels/level1_2023/dia3/texto_css/","section":"Levels","summary":"Fuentes # En los albores de la web, solo tenía un puñado de fuentes entre las que podía elegir, afortunadamente, hoy puedes cargar cualquier tipo de fuente en tus páginas.","title":"Propiedades de Fuente y Texto"},{"content":"Bucles # Usualmente necesitamos repetir acciones.\nPor ejemplo, mostrar los elementos de una lista uno tras otro o simplemente ejecutar el mismo código para cada número del 1 al 10.\nLos Bucles son una forma de repetir el mismo código varias veces.\nAqui te dejo un video práctico de como aplicarlo, sin embargo pueden tambien leer el contenido de esta sección para complementar la información:\nEl bucle \u0026ldquo;while\u0026rdquo; # El bucle while (mientras) tiene la siguiente sintaxis:\nwhile (condition) { // código // llamado \u0026#34;cuerpo del bucle\u0026#34; } Mientras la condición condition sea verdadera, el código del cuerpo del bucle será ejecutado.\nPor ejemplo, el bucle debajo imprime i mientras se cumpla i \u0026lt; 3:\nlet i = 0; while (i \u0026lt; 3) { // muestra 0, luego 1, luego 2 alert( i ); i++; } Cada ejecución del cuerpo del bucle se llama iteración. El bucle en el ejemplo de arriba realiza 3 iteraciones.\nSi faltara i++ en el ejemplo de arriba, el bucle sería repetido (en teoría) eternamente. En la práctica, el navegador tiene maneras de detener tales bucles desmedidos; y en el JavaScript del lado del servidor, podemos eliminar el proceso.\nCualquier expresión o variable puede usarse como condición del bucle, no solo las comparaciones: El while evaluará y transformará la condición a un booleano.\nPor ejemplo, una manera más corta de escribir while (i != 0) es while (i):\nlet i = 3; while (i) { // cuando i sea 0, la condición se volverá falsa y el bucle se detendrá alert( i ); i--; } El bucle \u0026ldquo;for\u0026rdquo; # El bucle for es más complejo, pero también el más usado.\nSe ve así:\nfor (begin; condition; step) { // (comienzo, condición, paso) // ... cuerpo del bucle ... } Aprendamos el significado de cada parte con un ejemplo. El bucle debajo corre alert(i) para i desde 0 hasta (pero no incluyendo) 3:\nfor (let i = 0; i \u0026lt; 3; i++) { // muestra 0, luego 1, luego 2 alert(i); } Vamos a examinar la declaración for parte por parte:\nparte comienzo let i = 0 Se ejecuta una vez al comienzo del bucle. condición i \u0026lt; 3 Comprobada antes de cada iteración del bucle. Si es falsa, el bucle finaliza. cuerpo alert(i) Se ejecuta una y otra vez mientras la condición sea verdadera. paso i++ Se ejecuta después del cuerpo en cada iteración. El algoritmo general del bucle funciona de esta forma:\nSe ejecuta comenzar → (si condición → ejecutar cuerpo y ejecutar paso) → (si condición → ejecutar cuerpo y ejecutar paso) → (si condición → ejecutar cuerpo y ejecutar paso) → ... Si eres nuevo en bucles, te podría ayudar regresar al ejemplo y reproducir cómo se ejecuta paso por paso en una pedazo de papel.\nEsto es lo que sucede exactamente en nuestro caso:\n// for (let i = 0; i \u0026lt; 3; i++) alert(i) // se ejecuta comenzar let i = 0 // si condición → ejecutar cuerpo y ejecutar paso if (i \u0026lt; 3) { alert(i); i++ } // si condición → ejecutar cuerpo y ejecutar paso if (i \u0026lt; 3) { alert(i); i++ } // si condición → ejecutar cuerpo y ejecutar paso if (i \u0026lt; 3) { alert(i); i++ } // ...finaliza, porque ahora i == 3 Declaración de variable en línea Aquí, la variable \"counter\" `i` es declarada en el bucle. Esto es llamado una declaración de variable \"en línea\". Dichas variables son visibles solo dentro del bucle. for (let i = 0; i \u0026lt; 3; i++) { alert(i); // 0, 1, 2 } alert(i); // error, no existe dicha variable En vez de definir una variable, podemos usar una que ya exista:\nlet i = 0; for (i = 0; i \u0026lt; 3; i++) { // usa una variable existente alert(i); // 0, 1, 2 } alert(i); // 3, visible, porque fue declarada fuera del bucle Recursos Externos # Para seguir aprendiendo sobre los bucles y como funcionan, puedes visitar los siguientes enlaces:\nRecursos de aprendejavascript.dev # Bucles con while Bucles con do while Expresiones y declaraciones Bucles con for Asímismo continúa con las lecciones de freecodecamp:\nJavascript - FreeCodeCamp\n","date":"24 enero 2023","permalink":"/platform/jsvanilla/bucles/","section":"Jsvanillas","summary":"Bucles # Usualmente necesitamos repetir acciones.","title":"Estructura de Control: Bucles"},{"content":"Algunas veces, necesitamos ejecutar diferentes acciones basadas en diferentes condiciones.\nPara esto podemos usar la sentencia if y el operador condicional ?, también llamado operador de “signo de interrogación”.\nLa sentencia \u0026ldquo;if\u0026rdquo; # La sentencia if(...) evalúa la condición en los paréntesis, y si el resultado es true ejecuta un bloque de código.\nPor ejemplo:\nlet year = prompt(\u0026#39;¿En que año fué publicada la especificación ECMAScript-2015?\u0026#39;, \u0026#39;\u0026#39;); if (year == 2015) alert( \u0026#39;¡Estás en lo cierto!\u0026#39; ); Aquí la condición es una simple igualdad (year == 2015), pero podría ser mucho mas complejo.\nSi quisiéramos ejecutar más de una sentencia, debemos encerrar nuestro bloque de código entre llaves:\nif (year == 2015) { alert( \u0026#34;¡Es Correcto!\u0026#34; ); alert( \u0026#34;¡Eres muy inteligente!\u0026#34; ); } Recomendamos siempre encerrar nuestro bloque de código entre llaves {} siempre que se utilice la sentencia if, inclusive si solo se va a ejecutar una sola sentencia en este caso. Hacer eso mejora la legibilidad.\nConversión Booleana # La sentencia if (…) evalúa la expresión dentro de sus paréntesis y convierte el resultado en booleano.\nEl número 0, un string vacío \u0026quot;\u0026quot;, null, undefined, y NaN se convierte en false. Por esto son llamados valores \u0026ldquo;falso\u0026rdquo;. El resto de los valores se convierten en true, entonces los llamaremos valores \u0026ldquo;verdadero\u0026rdquo;. Entonces, el código bajo esta condición nunca se ejecutaría:\nif (0) { // 0 es falso ... } \u0026hellip;y dentro de esta condición siempre se ejecutará:\nif (1) { // 1 es verdadero ... } La cláusula \u0026ldquo;else\u0026rdquo; # La sentencia if quizás contenga un bloque \u0026ldquo;else\u0026rdquo; opcional. Este se ejecutará cuando la condición sea falsa.\nPor ejemplo:\nlet year = prompt(\u0026#39;¿En qué año fue publicada la especificación ECMAScript-2015?\u0026#39;, \u0026#39;\u0026#39;); if (year == 2015) { alert( \u0026#39;¡Lo adivinaste, correcto!\u0026#39; ); } else { alert( \u0026#39;¿Cómo puedes estar tan equivocado?\u0026#39; ); // cualquier valor excepto 2015 } Muchas condiciones: \u0026ldquo;else if\u0026rdquo; # Algunas veces, queremos probar variantes de una condición. La clausula else if nos permite hacer esto.\nPor ejemplo:\nlet year = prompt(\u0026#39;¿En qué año fue publicada la especificación ECMAScript-2015?\u0026#39;, \u0026#39;\u0026#39;); if (year \u0026lt; 2015) { alert( \u0026#39;Muy poco...\u0026#39; ); } else if (year \u0026gt; 2015) { alert( \u0026#39;Muy Tarde\u0026#39; ); } else { alert( \u0026#39;¡Exactamente!\u0026#39; ); } En el código de arriba, JavaScript primero revisa si year \u0026lt; 2015. Si esto es falso, continúa a la siguiente condición year \u0026gt; 2015. Si esta también es falsa, mostrará la última alert.\nPodría haber más bloques else if. Y el último else es opcional.\nEjemplos de Condicionales # En el siguiente video encontrarás mas informción de condicionales e incluso podrás ver el uso de switch, una tipo de condicion que no estaremos usando en el curso pero que es importante que conozcas.\nBucles # Usualmente necesitamos repetir acciones.\nPor ejemplo, mostrar los elementos de una lista uno tras otro o simplemente ejecutar el mismo código para cada número del 1 al 10.\nLos Bucles son una forma de repetir el mismo código varias veces.\nEl bucle \u0026ldquo;while\u0026rdquo; # El bucle while (mientras) tiene la siguiente sintaxis:\nwhile (condition) { // código // llamado \u0026#34;cuerpo del bucle\u0026#34; } Mientras la condición condition sea verdadera, el código del cuerpo del bucle será ejecutado.\nPor ejemplo, el bucle debajo imprime i mientras se cumpla i \u0026lt; 3:\nlet i = 0; while (i \u0026lt; 3) { // muestra 0, luego 1, luego 2 alert( i ); i++; } Cada ejecución del cuerpo del bucle se llama iteración. El bucle en el ejemplo de arriba realiza 3 iteraciones.\nSi faltara i++ en el ejemplo de arriba, el bucle sería repetido (en teoría) eternamente. En la práctica, el navegador tiene maneras de detener tales bucles desmedidos; y en el JavaScript del lado del servidor, podemos eliminar el proceso.\nCualquier expresión o variable puede usarse como condición del bucle, no solo las comparaciones: El while evaluará y transformará la condición a un booleano.\nPor ejemplo, una manera más corta de escribir while (i != 0) es while (i):\nlet i = 3; while (i) { // cuando i sea 0, la condición se volverá falsa y el bucle se detendrá alert( i ); i--; } El bucle \u0026ldquo;do..while\u0026rdquo; # La comprobación de la condición puede ser movida debajo del cuerpo del bucle usando la sintaxis do..while:\ndo { // cuerpo del bucle } while (condition); El bucle primero ejecuta el cuerpo, luego comprueba la condición, y, mientras sea un valor verdadero, la ejecuta una y otra vez.\nPor ejemplo:\nlet i = 0; do { alert( i ); i++; } while (i \u0026lt; 3); Esta sintaxis solo debe ser usada cuando quieres que el cuerpo del bucle sea ejecutado al menos una vez sin importar que la condición sea verdadera. Usualmente, se prefiere la otra forma: while(…) {…}.\nEl bucle \u0026ldquo;for\u0026rdquo; # El bucle for es más complejo, pero también el más usado.\nSe ve así:\nfor (begin; condition; step) { // (comienzo, condición, paso) // ... cuerpo del bucle ... } Aprendamos el significado de cada parte con un ejemplo. El bucle debajo corre alert(i) para i desde 0 hasta (pero no incluyendo) 3:\nfor (let i = 0; i \u0026lt; 3; i++) { // muestra 0, luego 1, luego 2 alert(i); } Vamos a examinar la declaración for parte por parte:\nparte comienzo let i = 0 Se ejecuta una vez al comienzo del bucle. condición i \u0026lt; 3 Comprobada antes de cada iteración del bucle. Si es falsa, el bucle finaliza. cuerpo alert(i) Se ejecuta una y otra vez mientras la condición sea verdadera. paso i++ Se ejecuta después del cuerpo en cada iteración. El algoritmo general del bucle funciona de esta forma:\nSe ejecuta comenzar → (si condición → ejecutar cuerpo y ejecutar paso) → (si condición → ejecutar cuerpo y ejecutar paso) → (si condición → ejecutar cuerpo y ejecutar paso) → ... Si eres nuevo en bucles, te podría ayudar regresar al ejemplo y reproducir cómo se ejecuta paso por paso en una pedazo de papel.\nEsto es lo que sucede exactamente en nuestro caso:\n// for (let i = 0; i \u0026lt; 3; i++) alert(i) // se ejecuta comenzar let i = 0 // si condición → ejecutar cuerpo y ejecutar paso if (i \u0026lt; 3) { alert(i); i++ } // si condición → ejecutar cuerpo y ejecutar paso if (i \u0026lt; 3) { alert(i); i++ } // si condición → ejecutar cuerpo y ejecutar paso if (i \u0026lt; 3) { alert(i); i++ } // ...finaliza, porque ahora i == 3 Declaración de variable en línea Aquí, la variable \"counter\" `i` es declarada en el bucle. Esto es llamado una declaración de variable \"en línea\". Dichas variables son visibles solo dentro del bucle. for (*!*let*/!* i = 0; i \u0026lt; 3; i++) { alert(i); // 0, 1, 2 } alert(i); // error, no existe dicha variable En vez de definir una variable, podemos usar una que ya exista:\nlet i = 0; for (i = 0; i \u0026lt; 3; i++) { // usa una variable existente alert(i); // 0, 1, 2 } alert(i); // 3, visible, porque fue declarada fuera del bucle Omitiendo partes # Cualquier parte de for puede ser omitida.\nPor ejemplo, podemos quitar comienzo si no necesitamos realizar nada al inicio del bucle.\nComo aquí:\nlet i = 0; // Ya tenemos i declarada y asignada for (; i \u0026lt; 3; i++) { // no hay necesidad de \u0026#34;comenzar\u0026#34; alert( i ); // 0, 1, 2 } También podemos eliminar la parte paso:\nlet i = 0; for (; i \u0026lt; 3;) { alert( i++ ); } Esto hace al bucle idéntico a while (i \u0026lt; 3).\nEn realidad podemos eliminar todo, creando un bucle infinito:\nfor (;;) { // se repite sin limites } Por favor, nota que los dos punto y coma ; del for deben estar presentes. De otra manera, habría un error de sintaxis.\nRompiendo el bucle # Normalmente, se sale de un bucle cuando la condición se vuelve falsa.\nPero podemos forzar una salida en cualquier momento usando la directiva especial break.\nPor ejemplo, el bucle debajo le pide al usuario por una serie de números, \u0026ldquo;rompiéndolo\u0026rdquo; cuando un número no es ingresado:\nlet sum = 0; while (true) { let value = +prompt(\u0026#34;Ingresa un número\u0026#34;, \u0026#39;\u0026#39;); *!* if (!value) break; // (*) */!* sum += value; } alert( \u0026#39;Suma: \u0026#39; + sum ); La directiva break es activada en la línea (*) si el usuario ingresa una línea vacía o cancela la entrada. Detiene inmediatamente el bucle, pasando el control a la primera línea después de el bucle. En este caso, alert.\nLa combinación \u0026ldquo;bucle infinito + break según sea necesario\u0026rdquo; es ideal en situaciones donde la condición del bucle debe ser comprobada no al inicio o al final de el bucle, sino a la mitad o incluso en varias partes del cuerpo.\nContinuar a la siguiente iteración # La directiva continue es una \u0026ldquo;versión más ligera\u0026rdquo; de break. No detiene el bucle completo. En su lugar, detiene la iteración actual y fuerza al bucle a comenzar una nueva (si la condición lo permite).\nPodemos usarlo si hemos terminado con la iteración actual y nos gustaría movernos a la siguiente.\nEl bucle debajo usa continue para mostrar solo valores impares:\nfor (let i = 0; i \u0026lt; 10; i++) { // si es verdadero, saltar el resto del cuerpo *!*if (i % 2 == 0) continue;*/!* alert(i); // 1, luego 3, 5, 7, 9 } Para los valores pares de i, la directiva continue deja de ejecutar el cuerpo y pasa el control a la siguiente iteración de for (con el siguiente número). Así que el alert solo es llamado para valores impares.\nLa directiva `continue` ayuda a disminuir la anidación Un bucle que muestra valores impares podría verse así: for (let i = 0; i \u0026lt; 10; i++) { if (i % 2) { alert( i ); } } Desde un punto de vista técnico, esto es idéntico al ejemplo de arriba. Claro, podemos simplemente envolver el código en un bloque if en vez de usar continue.\nPero como efecto secundario, esto crearía un nivel más de anidación (la llamada a alert dentro de las llaves). Si el código dentro de if posee varias líneas, eso podría reducir la legibilidad en general. Más sobre bucles # En el siguiente video vamos a ver algunos ejemplos de como aplicar los bucles que hemos mencionado:\n","date":"24 enero 2023","permalink":"/platform/levels/level1_2023/dia3/if_bucles/","section":"Levels","summary":"Algunas veces, necesitamos ejecutar diferentes acciones basadas en diferentes condiciones.","title":"Condicionales y Bucles"},{"content":"Algunas veces, necesitamos ejecutar diferentes acciones basadas en diferentes condiciones.\nPara esto podemos usar la sentencia if y el operador condicional ?, también llamado operador de “signo de interrogación”.\nLa sentencia \u0026ldquo;if\u0026rdquo; # La sentencia if(...) evalúa la condición en los paréntesis, y si el resultado es true ejecuta un bloque de código.\nPor ejemplo:\nlet year = prompt(\u0026#39;¿En que año fué publicada la especificación ECMAScript-2015?\u0026#39;, \u0026#39;\u0026#39;); if (year == 2015) alert( \u0026#39;¡Estás en lo cierto!\u0026#39; ); Aquí la condición es una simple igualdad (year == 2015), pero podría ser mucho mas complejo.\nSi quisiéramos ejecutar más de una sentencia, debemos encerrar nuestro bloque de código entre llaves:\nif (year == 2015) { alert( \u0026#34;¡Es Correcto!\u0026#34; ); alert( \u0026#34;¡Eres muy inteligente!\u0026#34; ); } Recomendamos siempre encerrar nuestro bloque de código entre llaves {} siempre que se utilice la sentencia if, inclusive si solo se va a ejecutar una sola sentencia en este caso. Hacer eso mejora la legibilidad.\nConversión Booleana # La sentencia if (…) evalúa la expresión dentro de sus paréntesis y convierte el resultado en booleano.\nEl número 0, un string vacío \u0026quot;\u0026quot;, null, undefined, y NaN se convierte en false. Por esto son llamados valores \u0026ldquo;falso\u0026rdquo;. El resto de los valores se convierten en true, entonces los llamaremos valores \u0026ldquo;verdadero\u0026rdquo;. Entonces, el código bajo esta condición nunca se ejecutaría:\nif (0) { // 0 es falso ... } \u0026hellip;y dentro de esta condición siempre se ejecutará:\nif (1) { // 1 es verdadero ... } La cláusula \u0026ldquo;else\u0026rdquo; # La sentencia if quizás contenga un bloque \u0026ldquo;else\u0026rdquo; opcional. Este se ejecutará cuando la condición sea falsa.\nPor ejemplo:\nlet year = prompt(\u0026#39;¿En qué año fue publicada la especificación ECMAScript-2015?\u0026#39;, \u0026#39;\u0026#39;); if (year == 2015) { alert( \u0026#39;¡Lo adivinaste, correcto!\u0026#39; ); } else { alert( \u0026#39;¿Cómo puedes estar tan equivocado?\u0026#39; ); // cualquier valor excepto 2015 } Muchas condiciones: \u0026ldquo;else if\u0026rdquo; # Algunas veces, queremos probar variantes de una condición. La clausula else if nos permite hacer esto.\nPor ejemplo:\nlet year = prompt(\u0026#39;¿En qué año fue publicada la especificación ECMAScript-2015?\u0026#39;, \u0026#39;\u0026#39;); if (year \u0026lt; 2015) { alert( \u0026#39;Muy poco...\u0026#39; ); } else if (year \u0026gt; 2015) { alert( \u0026#39;Muy Tarde\u0026#39; ); } else { alert( \u0026#39;¡Exactamente!\u0026#39; ); } En el código de arriba, JavaScript primero revisa si year \u0026lt; 2015. Si esto es falso, continúa a la siguiente condición year \u0026gt; 2015. Si esta también es falsa, mostrará la última alert.\nPodría haber más bloques else if. Y el último else es opcional.\nEjemplos de Condicionales # En el siguiente video encontrarás mas informción de condicionales e incluso podrás ver el uso de switch, una tipo de condicion que no estaremos usando en el curso pero que es importante que conozcas.\n","date":"24 enero 2023","permalink":"/platform/jsvanilla/condicionales/","section":"Jsvanillas","summary":"Algunas veces, necesitamos ejecutar diferentes acciones basadas en diferentes condiciones.","title":"Estructura de Control: Condicionales"},{"content":" Una introducción a JavaScript # Veamos qué tiene de especial JavaScript, qué podemos lograr con este lenguaje y qué otras tecnologías se integran bien con él.\n¿Qué es JavaScript? # JavaScript fue creado para “dar vida a las páginas web”.\nLos programas en este lenguaje se llaman scripts. Se pueden escribir directamente en el HTML de una página web y ejecutarse automáticamente a medida que se carga la página.\nLos scripts se proporcionan y ejecutan como texto plano. No necesitan preparación especial o compilación para correr.\nEn este aspecto, JavaScript es muy diferente a otro lenguaje llamado Java.\n¿Por qué se llama JavaScript? Cuando JavaScript fue creado, inicialmente tenía otro nombre: “LiveScript”. Pero Java era muy popular en ese momento, así que se decidió que el posicionamiento de un nuevo lenguaje como un “Hermano menor” de Java ayudaría. Pero a medida que evolucionaba, JavaScript se convirtió en un lenguaje completamente independiente con su propia especificación llamada ECMAScript, y ahora no tiene ninguna relación con Java. Hoy, JavaScript puede ejecutarse no solo en los navegadores, sino también en servidores o incluso en cualquier dispositivo que cuente con un programa especial llamado El motor o intérprete de JavaScript.\nDiferentes motores tienen diferentes “nombres en clave”. Por ejemplo:\nV8 – en Chrome, Opera y Edge. SpiderMonkey – en Firefox. …Existen otros nombres en clave como “Chakra” para IE , “JavaScriptCore”, “Nitro” y “SquirrelFish” para Safari, etc. Es bueno recordar estos términos porque son usados en artículos para desarrolladores en internet. Por ejemplo, si “la característica X es soportada por V8”, entonces probablemente funciona en Chrome, Opera y Edge.\n¿Como trabajan los motores? Los motores son complicados, pero los fundamentos son fáciles. El motor (embebido si es un navegador) lee (“analiza”) el script. Luego convierte (“compila”) el script a lenguaje de máquina. Por último, el código máquina se ejecuta, muy rápido. El motor aplica optimizaciones en cada paso del proceso. Incluso observa como el script compilado se ejecuta, analiza los datos que fluyen a través de él y aplica optimizaciones al código maquina basadas en ese conocimiento. Tutorial de JavaScript # El siguiente tutorial explica de manera sencilla los conceptos base de este lenguaje de programación, asímismo, te dejamos un enlace a FreeCodeCamp para que puedas practicar lo aprendido.\n¿Como usar esta guía? La informacion que está debajo, utilizalo como apoyo en caso quieras profundizar los conceptos que verás en estos dos recursos. FreeCodeCamp - JavaScript Tipos de datos # Un valor en JavaScript siempre pertenece a un tipo de dato determinado. Por ejemplo, un string o un número.\nHay ocho tipos de datos básicos en JavaScript. En esta semana cubriremos la mayoría en general y posteriormente hablaremos de cada uno de ellos en detalle.\nPodemos almacenar un valor de cualquier tipo dentro de una variable. Por ejemplo, una variable puede contener en un momento un string y luego almacenar un número\n// no hay error let message = \u0026#34;hola\u0026#34;; message = 123456; Los lenguajes de programación que permiten estas cosas, como JavaScript, se denominan “dinámicamente tipados”, lo que significa que allí hay tipos de datos, pero las variables no están vinculadas rígidamente a ninguno de ellos.\nNumber # let n = 123; n = 12.345; El tipo number representa tanto números enteros como de punto flotante.\nHay muchas operaciones para números. Por ejemplo, multiplicación *, división /, suma +, resta -, y demás.\nString # Un string en JavaScript es una cadena de caracteres y debe colocarse entre comillas.\nlet str = \u0026#34;Hola\u0026#34;; let str2 = \u0026#39;Las comillas simples también están bien\u0026#39;; let phrase = `se puede incrustar otro ${str}`; En JavaScript, hay 3 tipos de comillas.\nComillas dobles: \u0026quot;Hola\u0026quot; . Comillas simples: 'Hola' . Backticks (comillas invertidas): `Hola` . Las comillas dobles y simples son comillas “sencillas” (es decir, funcionan igual). No hay diferencia entre ellas en JavaScript.\nLos backticks son comillas de “funcionalidad extendida”. Nos permiten incrustar variables y expresiones en una cadena de caracteres encerrándolas en ${...}, por ejemplo:\nlet name = \u0026#34;John\u0026#34;; // incrustar una variable alert( `Hola, ${name}!` ); // Hola, John! // incrustar una expresión alert( `el resultado es ${1 + 2}` ); // el resultado es 3 La expresión dentro de ${...} se evalúa y el resultado pasa a formar parte de la cadena. Podemos poner cualquier cosa ahí dentro: una variable como name, una expresión aritmética como 1 + 2, o algo más complejo.\nToma en cuenta que esto sólo se puede hacer con los backticks. ¡Las otras comillas no tienen esta capacidad de incrustación!\nalert( \u0026#34;el resultado es ${1 + 2}\u0026#34; ); // el resultado es ${1 + 2} // (las comillas dobles no hacen nada) Boolean (tipo lógico) # El tipo boolean tiene sólo dos valores posibles: true y false.\nEste tipo se utiliza comúnmente para almacenar valores de sí/no: true significa “sí, correcto, verdadero”, y false significa “no, incorrecto, falso”.\nPor ejemplo:\nlet nameFieldChecked = true; // sí, el campo name está marcado let ageFieldChecked = false; // no, el campo age no está marcado Los valores booleanos también son el resultado de comparaciones:\nlet isGreater = 4 \u0026gt; 1; alert( isGreater ); // verdadero (el resultado de la comparación es \u0026#34;sí\u0026#34;) Object # El tipo object (objeto) es especial.\nTodos los demás tipos se llaman “primitivos” porque sus valores pueden contener una sola cosa (ya sea una cadena, un número o lo que sea). Por el contrario, los objetos se utilizan para almacenar colecciones de datos y entidades más complejas.\nSiendo así de importantes, los objetos merecen un trato especial. Nos ocuparemos de ellos más adelante después de aprender más sobre los primitivos.\nEl operador typeof # El operador typeof devuelve el tipo de dato del operando. Es útil cuando queremos procesar valores de diferentes tipos de forma diferente o simplemente queremos hacer una comprobación rápida.\nLa llamada a typeof x devuelve un string con el nombre del tipo:\ntypeof undefined // \u0026#34;undefined\u0026#34; typeof 0 // \u0026#34;number\u0026#34; typeof 10n // \u0026#34;bigint\u0026#34; typeof true // \u0026#34;boolean\u0026#34; typeof \u0026#34;foo\u0026#34; // \u0026#34;string\u0026#34; typeof Symbol(\u0026#34;id\u0026#34;) // \u0026#34;symbol\u0026#34; typeof Math // \u0026#34;object\u0026#34; (1) typeof null // \u0026#34;object\u0026#34; (2) typeof alert // \u0026#34;function\u0026#34; (3) Operadores Básicos # Conocemos varios operadores matemáticos porque nos los enseñaron en la escuela. Son cosas como la suma +, multiplicación *, resta -, etcétera.\nTérminos: “unario”, “binario”, “operando” # Antes de continuar, comprendamos la terminología común.\nUn operando – es a lo que se aplican los operadores. Por ejemplo, en la multiplicación de 5 * 2 hay dos operandos: el operando izquierdo es 5 y el operando derecho es 2. A veces, la gente los llama “argumentos” en lugar de “operandos”.\nUn operador es unario si tiene un solo operando. Por ejemplo, la negación unaria - invierte el signo de un número:\nlet x = 1; x = -x; alert( x ); // -1, se aplicó negación unaria Un operador es binario si tiene dos operandos. El mismo negativo también existe en forma binaria:\nlet x = 1, y = 3; alert( y - x ); // 2, binario negativo resta valores Formalmente, estamos hablando de dos operadores distintos: la negación unaria (un operando: revierte el símbolo) y la resta binaria (dos operandos: resta).\nMatemáticas # Están soportadas las siguientes operaciones:\nSuma +, Resta -, Multiplicación *, División /, Resto %, Exponenciación **. Los primeros cuatro son conocidos mientras que % y ** deben ser explicados más ampliamente.\nResto % # El operador resto %, a pesar de su apariencia, no está relacionado con porcentajes.\nEl resultado de a % b es el resto de la división entera de a por b.\nPor ejemplo:\nalert( 5 % 2 ); // 1, es el resto de 5 dividido por 2 alert( 8 % 3 ); // 2, es el resto de 8 dividido por 3 alert( 8 % 4 ); // 0, es el resto de 8 dividido por 4 Exponenciación ** # El operador exponenciación a ** b eleva a a la potencia de b.\nEn matemáticas de la escuela, lo escribimos como ab.\nPor ejemplo:\nalert( 2 ** 2 ); // 2² = 4 alert( 2 ** 3 ); // 2³ = 8 alert( 2 ** 4 ); // 2⁴ = 16 Matemáticamente, la exponenciación está definida para operadores no enteros también.\nPor ejemplo, la raíz cuadrada es el exponente ½:\nalert( 4 ** (1/2) ); // 2 (potencia de 1/2 es lo mismo que raíz cuadrada) alert( 8 ** (1/3) ); // 2 (potencia de 1/3 es lo mismo que raíz cúbica) Concatenación de cadenas con el binario + # Ahora veamos las características de los operadores de JavaScript que van más allá de la aritmética escolar.\nNormalmente el operador + suma números.\nPero si se aplica el + binario a una cadena, los une (concatena):\nlet s = \u0026#34;my\u0026#34; + \u0026#34;string\u0026#34;; alert(s); // mystring Tenga presente que si uno de los operandos es una cadena, el otro es convertido a una cadena también.\nPor ejemplo:\nalert( \u0026#39;1\u0026#39; + 2 ); // \u0026#34;12\u0026#34; alert( 2 + \u0026#39;1\u0026#39; ); // \u0026#34;21\u0026#34; Vieron, no importa si el primer operando es una cadena o el segundo.\nAquí hay un ejemplo algo más complejo:\nalert(2 + 2 + \u0026#39;1\u0026#39; ); // \u0026#34;41\u0026#34; y no \u0026#34;221\u0026#34; Aquí, los operadores trabajan uno después de otro. El primer + suma dos números entonces devuelve 4, luego el siguiente + le agrega la cadena 1, así que se evalúa como 4 + '1' = 41.\nalert(\u0026#39;1\u0026#39; + 2 + 2); // \u0026#34;122\u0026#34;, no es \u0026#34;14\u0026#34; Aquí el primer operando es una cadena, el compilador trata los otros dos operandos como cadenas también. El 2 es concatenado a '1', entonces es como '1' + 2 = \u0026quot;12\u0026quot; y \u0026quot;12\u0026quot; + 2 = \u0026quot;122\u0026quot;.\nEl binario + es el único operador que soporta cadenas en esa forma. Otros operadores matemáticos trabajan solamente con números y siempre convierten sus operandos a números.\nPor ejemplo, resta y división:\nalert( 2 - \u0026#39;1\u0026#39; ); // 1 alert( \u0026#39;6\u0026#39; / \u0026#39;2\u0026#39; ); // 3 Operadores Lógicos # Hay cuatro operadores lógicos en JavaScript: || (O), \u0026amp;\u0026amp; (Y), ! (NO), ?? (Fusión de nulos). Aquí cubrimos los primeros tres, el operador ?? se verá más adelante.\nAunque sean llamados lógicos, pueden ser aplicados a valores de cualquier tipo, no solo booleanos. El resultado también puede ser de cualquier tipo.\nVeamos los detalles.\n|| (OR) # El operador OR se representa con dos símbolos de linea vertical:\nresult = a || b; En la programación clásica, el OR lógico esta pensado para manipular solo valores booleanos. Si cualquiera de sus argumentos es true, retorna true, de lo contrario retorna false.\nEn JavaScript, el operador es un poco más complicado y poderoso. Pero primero, veamos qué pasa con los valores booleanos.\nHay cuatro combinaciones lógicas posibles:\nalert(true || true); // true (verdadero) alert(false || true); // true alert(true || false); // true alert(false || false); // false (falso) Como podemos ver, el resultado es siempre true excepto cuando ambos operandos son false.\nSi un operando no es un booleano, se lo convierte a booleano para la evaluación.\nPor ejemplo, el número 1 es tratado como true, el número 0 como false:\nif (1 || 0) { // Funciona como if( true || false ) alert(\u0026#34;valor verdadero!\u0026#34;); } La mayoría de las veces, OR || es usado en una declaración if para probar si alguna de las condiciones dadas es true.\nPor ejemplo:\nlet hour = 9; *!* if (hour \u0026lt; 10 || hour \u0026gt; 18) { */!* alert( \u0026#39;La oficina esta cerrada.\u0026#39; ); } Podemos pasar mas condiciones:\nlet hour = 12; let isWeekend = true; if (hour \u0026lt; 10 || hour \u0026gt; 18 || isWeekend) { alert(\u0026#34;La oficina esta cerrada.\u0026#34;); // Es fin de semana } \u0026amp;\u0026amp; (AND) # El operador AND es representado con dos ampersands \u0026amp;\u0026amp;:\nresult = a \u0026amp;\u0026amp; b; En la programación clásica, AND retorna true si ambos operandos son valores verdaderos y false en cualquier otro caso.\nalert(true \u0026amp;\u0026amp; true); // true alert(false \u0026amp;\u0026amp; true); // false alert(true \u0026amp;\u0026amp; false); // false alert(false \u0026amp;\u0026amp; false); // false Un ejemplo con if:\nlet hour = 12; let minute = 30; if (hour == 12 \u0026amp;\u0026amp; minute == 30) { alert(\u0026#34;La hora es 12:30\u0026#34;); } Al igual que con OR, cualquier valor es permitido como operando de AND:\nif (1 \u0026amp;\u0026amp; 0) { // evaluado como true \u0026amp;\u0026amp; false alert( \u0026#34;no funcionará porque el resultado es un valor falso\u0026#34; ); } Más operadores en JS # Para seguir aprendiendo de estos operadores, mira el siguiente video donde reforzarás el conocimiento sobre los operadores que acabamos de ver y aprenderás algunos más que son comuness:\n","date":"23 enero 2023","permalink":"/platform/jsvanilla/introjs/","section":"Jsvanillas","summary":"Una introducción a JavaScript # Veamos qué tiene de especial JavaScript, qué podemos lograr con este lenguaje y qué otras tecnologías se integran bien con él.","title":"Introducción a JavaScript"},{"content":" Una introducción a JavaScript # Veamos qué tiene de especial JavaScript, qué podemos lograr con este lenguaje y qué otras tecnologías se integran bien con él.\n¿Qué es JavaScript? # JavaScript fue creado para “dar vida a las páginas web”.\nLos programas en este lenguaje se llaman scripts. Se pueden escribir directamente en el HTML de una página web y ejecutarse automáticamente a medida que se carga la página.\nLos scripts se proporcionan y ejecutan como texto plano. No necesitan preparación especial o compilación para correr.\nEn este aspecto, JavaScript es muy diferente a otro lenguaje llamado Java.\n¿Por qué se llama JavaScript? Cuando JavaScript fue creado, inicialmente tenía otro nombre: “LiveScript”. Pero Java era muy popular en ese momento, así que se decidió que el posicionamiento de un nuevo lenguaje como un “Hermano menor” de Java ayudaría. Pero a medida que evolucionaba, JavaScript se convirtió en un lenguaje completamente independiente con su propia especificación llamada ECMAScript, y ahora no tiene ninguna relación con Java. Hoy, JavaScript puede ejecutarse no solo en los navegadores, sino también en servidores o incluso en cualquier dispositivo que cuente con un programa especial llamado El motor o intérprete de JavaScript.\nDiferentes motores tienen diferentes “nombres en clave”. Por ejemplo:\nV8 – en Chrome, Opera y Edge. SpiderMonkey – en Firefox. …Existen otros nombres en clave como “Chakra” para IE , “JavaScriptCore”, “Nitro” y “SquirrelFish” para Safari, etc. Es bueno recordar estos términos porque son usados en artículos para desarrolladores en internet. Por ejemplo, si “la característica X es soportada por V8”, entonces probablemente funciona en Chrome, Opera y Edge.\n¿Como trabajan los motores? Los motores son complicados, pero los fundamentos son fáciles. El motor (embebido si es un navegador) lee (“analiza”) el script. Luego convierte (“compila”) el script a lenguaje de máquina. Por último, el código máquina se ejecuta, muy rápido. El motor aplica optimizaciones en cada paso del proceso. Incluso observa como el script compilado se ejecuta, analiza los datos que fluyen a través de él y aplica optimizaciones al código maquina basadas en ese conocimiento. Tipos de datos # Un valor en JavaScript siempre pertenece a un tipo de dato determinado. Por ejemplo, un string o un número.\nHay ocho tipos de datos básicos en JavaScript. En esta semana cubriremos la mayoría en general y posteriormente hablaremos de cada uno de ellos en detalle.\nPodemos almacenar un valor de cualquier tipo dentro de una variable. Por ejemplo, una variable puede contener en un momento un string y luego almacenar un número\n// no hay error let message = \u0026#34;hola\u0026#34;; message = 123456; Los lenguajes de programación que permiten estas cosas, como JavaScript, se denominan “dinámicamente tipados”, lo que significa que allí hay tipos de datos, pero las variables no están vinculadas rígidamente a ninguno de ellos.\nNumber # let n = 123; n = 12.345; El tipo number representa tanto números enteros como de punto flotante.\nHay muchas operaciones para números. Por ejemplo, multiplicación *, división /, suma +, resta -, y demás.\nString # Un string en JavaScript es una cadena de caracteres y debe colocarse entre comillas.\nlet str = \u0026#34;Hola\u0026#34;; let str2 = \u0026#39;Las comillas simples también están bien\u0026#39;; let phrase = `se puede incrustar otro ${str}`; En JavaScript, hay 3 tipos de comillas.\nComillas dobles: \u0026quot;Hola\u0026quot; . Comillas simples: 'Hola' . Backticks (comillas invertidas): `Hola` . Las comillas dobles y simples son comillas “sencillas” (es decir, funcionan igual). No hay diferencia entre ellas en JavaScript.\nLos backticks son comillas de “funcionalidad extendida”. Nos permiten incrustar variables y expresiones en una cadena de caracteres encerrándolas en ${...}, por ejemplo:\nlet name = \u0026#34;John\u0026#34;; // incrustar una variable alert( `Hola, *!*${name}*/!*!` ); // Hola, John! // incrustar una expresión alert( `el resultado es *!*${1 + 2}*/!*` ); // el resultado es 3 La expresión dentro de ${...} se evalúa y el resultado pasa a formar parte de la cadena. Podemos poner cualquier cosa ahí dentro: una variable como name, una expresión aritmética como 1 + 2, o algo más complejo.\nToma en cuenta que esto sólo se puede hacer con los backticks. ¡Las otras comillas no tienen esta capacidad de incrustación!\nalert( \u0026#34;el resultado es ${1 + 2}\u0026#34; ); // el resultado es ${1 + 2} // (las comillas dobles no hacen nada) Boolean (tipo lógico) # El tipo boolean tiene sólo dos valores posibles: true y false.\nEste tipo se utiliza comúnmente para almacenar valores de sí/no: true significa “sí, correcto, verdadero”, y false significa “no, incorrecto, falso”.\nPor ejemplo:\nlet nameFieldChecked = true; // sí, el campo name está marcado let ageFieldChecked = false; // no, el campo age no está marcado Los valores booleanos también son el resultado de comparaciones:\nlet isGreater = 4 \u0026gt; 1; alert( isGreater ); // verdadero (el resultado de la comparación es \u0026#34;sí\u0026#34;) Object # El tipo object (objeto) es especial.\nTodos los demás tipos se llaman “primitivos” porque sus valores pueden contener una sola cosa (ya sea una cadena, un número o lo que sea). Por el contrario, los objetos se utilizan para almacenar colecciones de datos y entidades más complejas.\nSiendo así de importantes, los objetos merecen un trato especial. Nos ocuparemos de ellos más adelante después de aprender más sobre los primitivos.\nEl operador typeof # El operador typeof devuelve el tipo de dato del operando. Es útil cuando queremos procesar valores de diferentes tipos de forma diferente o simplemente queremos hacer una comprobación rápida.\nLa llamada a typeof x devuelve un string con el nombre del tipo:\ntypeof undefined // \u0026#34;undefined\u0026#34; typeof 0 // \u0026#34;number\u0026#34; typeof 10n // \u0026#34;bigint\u0026#34; typeof true // \u0026#34;boolean\u0026#34; typeof \u0026#34;foo\u0026#34; // \u0026#34;string\u0026#34; typeof Symbol(\u0026#34;id\u0026#34;) // \u0026#34;symbol\u0026#34; typeof Math // \u0026#34;object\u0026#34; (1) typeof null // \u0026#34;object\u0026#34; (2) typeof alert // \u0026#34;function\u0026#34; (3) Operadores Básicos # Conocemos varios operadores matemáticos porque nos los enseñaron en la escuela. Son cosas como la suma +, multiplicación *, resta -, etcétera.\nTérminos: “unario”, “binario”, “operando” # Antes de continuar, comprendamos la terminología común.\nUn operando – es a lo que se aplican los operadores. Por ejemplo, en la multiplicación de 5 * 2 hay dos operandos: el operando izquierdo es 5 y el operando derecho es 2. A veces, la gente los llama “argumentos” en lugar de “operandos”.\nUn operador es unario si tiene un solo operando. Por ejemplo, la negación unaria - invierte el signo de un número:\nlet x = 1; x = -x; alert( x ); // -1, se aplicó negación unaria Un operador es binario si tiene dos operandos. El mismo negativo también existe en forma binaria:\nlet x = 1, y = 3; alert( y - x ); // 2, binario negativo resta valores Formalmente, estamos hablando de dos operadores distintos: la negación unaria (un operando: revierte el símbolo) y la resta binaria (dos operandos: resta).\nMatemáticas # Están soportadas las siguientes operaciones:\nSuma +, Resta -, Multiplicación *, División /, Resto %, Exponenciación **. Los primeros cuatro son conocidos mientras que % y ** deben ser explicados más ampliamente.\nResto % # El operador resto %, a pesar de su apariencia, no está relacionado con porcentajes.\nEl resultado de a % b es el resto de la división entera de a por b.\nPor ejemplo:\nalert( 5 % 2 ); // 1, es el resto de 5 dividido por 2 alert( 8 % 3 ); // 2, es el resto de 8 dividido por 3 alert( 8 % 4 ); // 0, es el resto de 8 dividido por 4 Exponenciación ** # El operador exponenciación a ** b eleva a a la potencia de b.\nEn matemáticas de la escuela, lo escribimos como ab.\nPor ejemplo:\nalert( 2 ** 2 ); // 2² = 4 alert( 2 ** 3 ); // 2³ = 8 alert( 2 ** 4 ); // 2⁴ = 16 Matemáticamente, la exponenciación está definida para operadores no enteros también.\nPor ejemplo, la raíz cuadrada es el exponente ½:\nalert( 4 ** (1/2) ); // 2 (potencia de 1/2 es lo mismo que raíz cuadrada) alert( 8 ** (1/3) ); // 2 (potencia de 1/3 es lo mismo que raíz cúbica) Concatenación de cadenas con el binario + # Ahora veamos las características de los operadores de JavaScript que van más allá de la aritmética escolar.\nNormalmente el operador + suma números.\nPero si se aplica el + binario a una cadena, los une (concatena):\nlet s = \u0026#34;my\u0026#34; + \u0026#34;string\u0026#34;; alert(s); // mystring Tenga presente que si uno de los operandos es una cadena, el otro es convertido a una cadena también.\nPor ejemplo:\nalert( \u0026#39;1\u0026#39; + 2 ); // \u0026#34;12\u0026#34; alert( 2 + \u0026#39;1\u0026#39; ); // \u0026#34;21\u0026#34; Vieron, no importa si el primer operando es una cadena o el segundo.\nAquí hay un ejemplo algo más complejo:\nalert(2 + 2 + \u0026#39;1\u0026#39; ); // \u0026#34;41\u0026#34; y no \u0026#34;221\u0026#34; Aquí, los operadores trabajan uno después de otro. El primer + suma dos números entonces devuelve 4, luego el siguiente + le agrega la cadena 1, así que se evalúa como 4 + '1' = 41.\nalert(\u0026#39;1\u0026#39; + 2 + 2); // \u0026#34;122\u0026#34;, no es \u0026#34;14\u0026#34; Aquí el primer operando es una cadena, el compilador trata los otros dos operandos como cadenas también. El 2 es concatenado a '1', entonces es como '1' + 2 = \u0026quot;12\u0026quot; y \u0026quot;12\u0026quot; + 2 = \u0026quot;122\u0026quot;.\nEl binario + es el único operador que soporta cadenas en esa forma. Otros operadores matemáticos trabajan solamente con números y siempre convierten sus operandos a números.\nPor ejemplo, resta y división:\nalert( 2 - \u0026#39;1\u0026#39; ); // 1 alert( \u0026#39;6\u0026#39; / \u0026#39;2\u0026#39; ); // 3 Operadores Lógicos # Hay cuatro operadores lógicos en JavaScript: || (O), \u0026amp;\u0026amp; (Y), ! (NO), ?? (Fusión de nulos). Aquí cubrimos los primeros tres, el operador ?? se verá más adelante.\nAunque sean llamados lógicos, pueden ser aplicados a valores de cualquier tipo, no solo booleanos. El resultado también puede ser de cualquier tipo.\nVeamos los detalles.\n|| (OR) # El operador OR se representa con dos símbolos de linea vertical:\nresult = a || b; En la programación clásica, el OR lógico esta pensado para manipular solo valores booleanos. Si cualquiera de sus argumentos es true, retorna true, de lo contrario retorna false.\nEn JavaScript, el operador es un poco más complicado y poderoso. Pero primero, veamos qué pasa con los valores booleanos.\nHay cuatro combinaciones lógicas posibles:\nalert(true || true); // true (verdadero) alert(false || true); // true alert(true || false); // true alert(false || false); // false (falso) Como podemos ver, el resultado es siempre true excepto cuando ambos operandos son false.\nSi un operando no es un booleano, se lo convierte a booleano para la evaluación.\nPor ejemplo, el número 1 es tratado como true, el número 0 como false:\nif (1 || 0) { // Funciona como if( true || false ) alert(\u0026#34;valor verdadero!\u0026#34;); } La mayoría de las veces, OR || es usado en una declaración if para probar si alguna de las condiciones dadas es true.\nPor ejemplo:\nlet hour = 9; *!* if (hour \u0026lt; 10 || hour \u0026gt; 18) { */!* alert( \u0026#39;La oficina esta cerrada.\u0026#39; ); } Podemos pasar mas condiciones:\nlet hour = 12; let isWeekend = true; if (hour \u0026lt; 10 || hour \u0026gt; 18 || isWeekend) { alert(\u0026#34;La oficina esta cerrada.\u0026#34;); // Es fin de semana } \u0026amp;\u0026amp; (AND) # El operador AND es representado con dos ampersands \u0026amp;\u0026amp;:\nresult = a \u0026amp;\u0026amp; b; En la programación clásica, AND retorna true si ambos operandos son valores verdaderos y false en cualquier otro caso.\nalert(true \u0026amp;\u0026amp; true); // true alert(false \u0026amp;\u0026amp; true); // false alert(true \u0026amp;\u0026amp; false); // false alert(false \u0026amp;\u0026amp; false); // false Un ejemplo con if:\nlet hour = 12; let minute = 30; if (hour == 12 \u0026amp;\u0026amp; minute == 30) { alert(\u0026#34;La hora es 12:30\u0026#34;); } Al igual que con OR, cualquier valor es permitido como operando de AND:\nif (1 \u0026amp;\u0026amp; 0) { // evaluado como true \u0026amp;\u0026amp; false alert( \u0026#34;no funcionará porque el resultado es un valor falso\u0026#34; ); } Más operadores en JS # Para seguir aprendiendo de estos operadores, mira el siguiente video donde reforzarás el conocimiento sobre los operadores que acabamos de ver y aprenderás algunos más que son comuness:\n","date":"23 enero 2023","permalink":"/platform/levels/level1_2023/dia2/introjs/","section":"Levels","summary":"Una introducción a JavaScript # Veamos qué tiene de especial JavaScript, qué podemos lograr con este lenguaje y qué otras tecnologías se integran bien con él.","title":"JavaScript"},{"content":"Los módulos en JavaScript son una ventaja para organizar tu código, ya que te permite separar tu código en diferentes archivos y poder importarlos en el archivo principal. Los recursos que verás a continuación te darán una visión clara de como usarlos, recuerda no solo leer, sino también practicar lo que aprendas en estas guias.\nmodulos ES Mientras ves el video, práctica creando algunas funciones o variables sencillas en un archivo con nombre herramientas.js e importalos y usalos en un archivo main.js. Recuerda que pasar usar los modules en JavaScript, cuando añadas la etiqueta \u0026lt;script\u0026gt; en tu archivo HTML, debes añadir el atributo type=\u0026quot;module\u0026quot;.\n\u0026lt;head\u0026gt; ... \u0026lt;script type=\u0026#34;module\u0026#34; src=\u0026#34;main.js\u0026#34; defer\u0026gt;\u0026lt;/script\u0026gt; ... \u0026lt;/head\u0026gt; ","date":"23 enero 2023","permalink":"/platform/jsvanilla/modules/","section":"Jsvanillas","summary":"Los módulos en JavaScript son una ventaja para organizar tu código, ya que te permite separar tu código en diferentes archivos y poder importarlos en el archivo principal.","title":"Modules"},{"content":"","date":"23 enero 2023","permalink":"/platform/recursos/","section":"Recursos","summary":"","title":"Recursos"},{"content":"Aqui encontrarás una lista de recursos que te ayudarán a aprender JavaScript, recuerda que no solo debes leer, sino también practicar lo que aprendas en estas guias.\nEstos recursos es algo adicional y te puede servir de apoyo a el material que te proporcionamos en el curso.\nHTML # lenguajehtml.com : Una Guía para aprender HTML en Español. Páginas # Youtube # CSS # Páginas # lenguajecss.com : Una Guía para aprender CSS en Español. Youtube # JavaScript # Páginas # lenguajejs.com : Una Guía para aprender JavaScript en Español. javascript.info: Plataforma con documentación completa y ejemplos sobre el lenguaje JavaScript. Youtube # ","date":"23 enero 2023","permalink":"/platform/recursos/nivel1/","section":"Recursos","summary":"Aqui encontrarás una lista de recursos que te ayudarán a aprender JavaScript, recuerda que no solo debes leer, sino también practicar lo que aprendas en estas guias.","title":"Recursos Nivel 1"},{"content":"Que es CSS? # Como HTML, CSS (Cascading Style Sheets) u Hojas de estilo en cascada en español, no es realmente un lenguaje de programación, tampoco es un lenguaje de marcado. Es un lenguaje de hojas de estilo, es decir, te permite aplicar estilos de manera selectiva a elementos en documentos HTML. Por ejemplo, para seleccionar todos los elementos de párrafo en una página HTML y volver el texto dentro de ellos de color rojo, has de escribir este CSS:\nCSS nos ayuda a generar un gran cambio en nuestras páginas web y su sintáxis es distintia a HTML.\nSintáxis # El selector nos ayuda a identificar a que elemento(s) se le aplicarán los estilos. El bloque de declaración es donde se escriben los estilos, tener en cuenta que se inicia y culmina con llaves {}. La declaración es donde ajustamos una cosa de el/los elemento(s), se compone por la propiedad que representa lo que vamos a ajustar y el valor que representa como lo vamos a cambiar (Cambiaremos los elementos p, le cambiaremos el color a rojo).\nDonde escribir CSS # Hay 3 lugares o formas de escribir CSS: inline, internal y external (en línea, interno y externo).\nInline # dentro de las etiquetas de apertura HTML podemos añadir el atributo style y como parte de su valor, podemos indicar las declaraciones CSS separadas por ;\nInternal # dentro de la \u0026lt;head\u0026gt; podemos insertar la etiqueta \u0026lt;style\u0026gt; donde podremos ingresar nuestro codigo css. Esto trae la ventaja de usar los selectores a diferencia de los estilos inline, que se aplican a cada elemento.\nExternal # External hace referencia a escribir CSS en un archivo aparte donde solo irá este código. la forma de escribir aquí sigue siendo en bloque sin la necesidad de una etiqueta \u0026lt;style\u0026gt;, aunque necesitamos enlazar el archivo HTML con este, por medio de una etiqueta link dentro del head similar a esta:\n\u0026lt;link rel=\u0026#34;stylesheet\u0026#34; href=\u0026#34;./css/main.css\u0026#34;\u0026gt; Selectores CSS # Un selector nos permite asociar una o más declaraciones a uno o más elementos de la página.\nSelectores Básicos # Podemos apuntar a ese elemento usando este selector p, que apunta a todos los elementos que usan la etiqueta p en la página. Una regla CSS simple para lograr lo que queremos es:\nCada etiqueta HTML tiene un selector correspondiente, por ejemplo: div, span, img.\nSi un selector coincide con varios elementos, todos los elementos de la página se verán afectados por el cambio.\nLos elementos HTML tienen 2 atributos que se utilizan con mucha frecuencia en CSS para asociar el estilo a un elemento específico de la página: class y id.\nHay una gran diferencia entre esos dos: dentro de un documento HTML puede repetir el mismo valor class en varios elementos, pero solo puede usar id una vez. Asimismo, usando clases puedes seleccionar un elemento con 2 o más nombres de clase específicos, algo que no es posible usando ids.\nLas clases se identifican mediante el símbolo \u0026lsquo;.\u0026rsquo; , mientras que los identificadores utilizan el símbolo \u0026lsquo;#\u0026rsquo; (numeral, hash tag).\nEjemplo usando una clase:\n\u0026lt;!-- HTML --\u0026gt; \u0026lt;p class=\u0026#34;dog-name\u0026#34;\u0026gt;Roger\u0026lt;/p\u0026gt; \u0026lt;!--Usamos el atributo class --\u0026gt; /* CSS */ .dog-name { color: yellow; } Ejemplo usando un ID:\n\u0026lt;!-- HTML --\u0026gt; \u0026lt;p id=\u0026#34;dog-name\u0026#34;\u0026gt;Roger\u0026lt;/p\u0026gt; \u0026lt;!--Usamos el atributo id --\u0026gt; /* CSS */ #dog-name { color: yellow; } Complejidad de Selectores Lo que viene a continuación son conceptos más complejos de CSS, pero no es necesario que los entiendas para comenzar a usar CSS. Sin embargo, te aconsejo que le des un vistazo para que veas hasta donde puede llegar el uso de los selectores. Combinando Selectores # Hasta ahora hemos visto cómo apuntar a un elemento, una clase o una identificación. Introduzcamos selectores más potentes.\nSeleccionar Elemento con clase o ID # Puede apuntar a un elemento específico que tenga una clase o una identificación adjunta.\nEjemplo usando una clase:\n\u0026lt;p class=\u0026#34;dog-name\u0026#34;\u0026gt;Roger\u0026lt;/p\u0026gt; \u0026lt;p\u0026gt;Mauricio\u0026lt;/p\u0026gt; p.dog-name { /* Solo seleccionamos el elemento p que tiene la clase dog-name */ color: yellow; } ¿Por qué querría hacer eso, si la clase o la identificación ya proporciona una forma de apuntar a ese elemento? Puede que tengas que hacer eso para tener más especificidad. Veremos qué significa eso más tarde.\nApuntando a múltiples clases # Puedes apuntar a un elemento con una clase específica usando .class-name, como vio anteriormente. Puedes apuntar a un elemento con 2 (o más) clases combinando los nombres de clase separados por un punto, sin espacios.\nEjemplo:\n\u0026lt;p class=\u0026#34;dog-name roger\u0026#34;\u0026gt;Roger\u0026lt;/p\u0026gt; \u0026lt;p class=\u0026#34;dog-name\u0026#34;\u0026gt;Mauricio\u0026lt;/p\u0026gt; .dog-name.roger { /* Solo seleccionamos el elemento que tiene la clase dog-name y la clase roger */ color: yellow; } Combinando clases e id\u0026rsquo;s # De la misma manera, puede combinar una clase y una identificación.\nEjemplo:\n\u0026lt;p class=\u0026#34;dog-name\u0026#34; id=\u0026#34;roger\u0026#34;\u0026gt;Roger\u0026lt;/p\u0026gt; \u0026lt;p class=\u0026#34;dog-name\u0026#34; id=\u0026#34;mauricio\u0026#34;\u0026gt;Mauricio\u0026lt;/p\u0026gt; .dog-name#roger { /* Seleccionamos el elemento que tiene la clase dog-name y el id roger */ color: yellow; } Especificidad # Lo que acabamos de ver tiene un propósito importante y esto es para que evitemos aplicar estilos a elementos que no deseamos, a medida que nuestra página crezca, comenzaremos a usar estas combinaciones para tener un mejor orden en los estilos que aplicamos. Sin embargo al aplicar estos selectores, la forma en la que se aplica los estilos puede romper el orden en cascada que conocemos por un concepto llamado especificidad.\nPara entender ese concepto mira el siguiente video donde entendemos que es la especificidad y como afecta los estilos que aplicamos a los elementos.\nAquí te dejo una tabla donde podrás ver la especificidad entre elementos y selectores:\nMás Selectores # Hay muchas más formas de combinar los selectores, aquí tienes una lista con más selectores, puedes apoyarte en el traductor de google para entender algunos terminos que vienen en ingles en las siguientes imágenes:\n","date":"23 enero 2023","permalink":"/platform/levels/level1_2023/dia2/estiloscss/","section":"Levels","summary":"Que es CSS?","title":"Estilos base de CSS y Selectores"},{"content":"Estamos trabajando para añadir información en esta seccion 😀\n","date":"19 enero 2023","permalink":"/platform/tags/","section":"Tags","summary":"Estamos trabajando para añadir información en esta seccion 😀","title":"Tags"},{"content":"Estamos trabajando para añadir información en esta seccion 😀\n","date":"19 enero 2023","permalink":"/platform/categories/","section":"Categories","summary":"Estamos trabajando para añadir información en esta seccion 😀","title":"Categories"},{"content":"DDL # lenguaje de definición de datos (DDL) de MySQL. El DDL se utiliza para crear, modificar y eliminar estructuras de base de datos, como tablas, índices y restricciones. A continuación, te mostraré los comandos más comunes en MySQL DDL.\nCrear una base de datos: CREATE DATABASE nombre_base_de_datos; Seleccionar una base de datos: USE nombre_base_de_datos; Crear una tabla: CREATE TABLE nombre_tabla ( columna1 tipo_dato_restricciones, columna2 tipo_dato_restricciones, ... ); Por ejemplo:\nCREATE TABLE usuarios ( id INT PRIMARY KEY, nombre VARCHAR(50) NOT NULL, email VARCHAR(100) UNIQUE, fecha_nacimiento DATE ); Modificar una tabla (agregar columna): ALTER TABLE nombre_tabla ADD COLUMN nombre_columna tipo_dato_restricciones; Por ejemplo:\nALTER TABLE usuarios ADD COLUMN telefono VARCHAR(20); Modificar una tabla (modificar columna): ALTER TABLE nombre_tabla MODIFY COLUMN nombre_columna tipo_dato_restricciones; Por ejemplo:\nALTER TABLE usuarios MODIFY COLUMN email VARCHAR(150); Modificar una tabla (eliminar columna): ALTER TABLE nombre_tabla DROP COLUMN nombre_columna; Por ejemplo:\nALTER TABLE usuarios DROP COLUMN telefono; Eliminar una tabla: DROP TABLE nombre_tabla; Por ejemplo:\nDROP TABLE usuarios; PRIMARY KEY # En una base de datos relacional, una clave primaria se utiliza para identificar de manera única cada fila de una tabla. Esto asegura que no haya duplicados y permite un acceso rápido y eficiente a los datos. En MySQL, puedes definir una clave primaria al crear una tabla o agregarla más tarde mediante la modificación de la estructura de la tabla.\nAquí tienes dos formas de definir una clave primaria en MySQL:\nDefinir una clave primaria durante la creación de la tabla: CREATE TABLE nombre_tabla ( columna1 tipo_dato_restricciones, columna2 tipo_dato_restricciones, ... PRIMARY KEY (columna1) ); En este ejemplo, la columna1 se define como clave primaria.\nAgregar una clave primaria a una tabla existente: ALTER TABLE nombre_tabla ADD PRIMARY KEY (columna1); En este ejemplo, la columna1 se agrega como clave primaria a una tabla existente.\nEs importante destacar que una clave primaria puede estar compuesta por una o más columnas. Si deseas utilizar una clave primaria compuesta, simplemente incluye varias columnas dentro del paréntesis PRIMARY KEY.\nAquí tienes un ejemplo de una clave primaria compuesta:\nCREATE TABLE productos ( id_categoria INT, id_producto INT, nombre VARCHAR(100), PRIMARY KEY (id_categoria, id_producto) ); En este ejemplo, la clave primaria está compuesta por las columnas id_categoria e id_producto.\nRecuerda que solo puedes tener una clave primaria por tabla y no puede contener valores nulos (NULL). Además, MySQL crea automáticamente un índice en la clave primaria para mejorar el rendimiento de las consultas.\nEspero que esta lección te haya sido útil. Si tienes más preguntas sobre claves primarias en MySQL o cualquier otro tema relacionado con bases de datos, no dudes en preguntar.\n","date":"17 enero 2023","permalink":"/platform/mysql/ddl/","section":"Mysqls","summary":"DDL # lenguaje de definición de datos (DDL) de MySQL.","title":"DDL"},{"content":"Leccion DML MYSQL # lección completa sobre el lenguaje de manipulación de datos (DML) en MySQL. El DML se utiliza para realizar operaciones de inserción, actualización, eliminación y consulta en una base de datos. Aquí tienes una descripción general de las principales declaraciones DML en MySQL:\nINSERT: Se utiliza para insertar datos en una tabla.\nSintaxis básica:\nINSERT INTO nombre_tabla (columna1, columna2, ...) VALUES (valor1, valor2, ...); Ejemplo:\nINSERT INTO clientes (nombre, apellido, edad) VALUES (\u0026#39;John\u0026#39;, \u0026#39;Doe\u0026#39;, 30); UPDATE: Se utiliza para modificar datos existentes en una tabla.\nSintaxis básica:\nUPDATE nombre_tabla SET columna1 = valor1, columna2 = valor2, ... WHERE condición; Ejemplo:\nUPDATE productos SET precio = 100 WHERE id = 1; DELETE: Se utiliza para eliminar filas de una tabla.\nSintaxis básica:\nDELETE FROM nombre_tabla WHERE condición; Ejemplo:\nDELETE FROM usuarios WHERE id = 1; SELECT: Se utiliza para consultar datos de una o varias tablas.\nSintaxis básica:\nSELECT columnas FROM nombre_tabla WHERE condición; Ejemplo:\nSELECT * FROM clientes WHERE edad \u0026gt;= 18; SELECT \u0026hellip; ORDER BY: Se utiliza para ordenar los resultados de una consulta en función de una o más columnas.\nSintaxis básica:\nSELECT columnas FROM nombre_tabla ORDER BY columna ASC/DESC; Ejemplo:\nSELECT * FROM registros ORDER BY fecha DESC; Estas son las declaraciones DML más utilizadas en MySQL. Recuerda que hay muchas más opciones y cláusulas disponibles en el lenguaje SQL para personalizar y ajustar tus consultas según tus necesidades.\nJOIN MYSQL # lección completa sobre las diferentes formas de realizar joins en MySQL. El join es una operación que combina filas de dos o más tablas en función de una columna relacionada entre ellas. Aquí tienes una descripción de los tipos de join más comunes en MySQL:\nINNER JOIN: Devuelve solo las filas que tienen coincidencias en ambas tablas.\nSintaxis básica:\nSELECT columnas FROM tabla1 INNER JOIN tabla2 ON tabla1.columna = tabla2.columna; Ejemplo:\nSELECT pedidos.numero, clientes.nombre FROM pedidos INNER JOIN clientes ON pedidos.cliente_id = clientes.id; LEFT JOIN: Devuelve todas las filas de la tabla izquierda y las coincidencias de la tabla derecha. Si no hay coincidencias, se devuelve NULL en las columnas de la tabla derecha.\nSintaxis básica:\nSELECT columnas FROM tabla1 LEFT JOIN tabla2 ON tabla1.columna = tabla2.columna; Ejemplo:\nSELECT clientes.nombre, pedidos.numero FROM clientes LEFT JOIN pedidos ON clientes.id = pedidos.cliente_id; RIGHT JOIN: Devuelve todas las filas de la tabla derecha y las coincidencias de la tabla izquierda. Si no hay coincidencias, se devuelve NULL en las columnas de la tabla izquierda.\nSintaxis básica:\nSELECT columnas FROM tabla1 RIGHT JOIN tabla2 ON tabla1.columna = tabla2.columna; Ejemplo:\nSELECT clientes.nombre, pedidos.numero FROM clientes RIGHT JOIN pedidos ON clientes.id = pedidos.cliente_id; FULL JOIN: Devuelve todas las filas de ambas tablas, incluidas las coincidencias y las no coincidencias. Si no hay coincidencias, se devuelve NULL en las columnas correspondientes.\nNota: MySQL no admite la sintaxis de FULL JOIN de forma nativa, pero se puede emular mediante UNION de LEFT JOIN y RIGHT JOIN.\nSintaxis básica:\nSELECT columnas FROM tabla1 LEFT JOIN tabla2 ON tabla1.columna = tabla2.columna UNION SELECT columnas FROM tabla1 RIGHT JOIN tabla2 ON tabla1.columna = tabla2.columna; Ejemplo:\nSELECT clientes.nombre, pedidos.numero FROM clientes LEFT JOIN pedidos ON clientes.id = pedidos.cliente_id UNION SELECT clientes.nombre, pedidos.numero FROM clientes RIGHT JOIN pedidos ON clientes.id = pedidos.cliente_id; Count, sum, Group by y sort by # Estos son los tipos de joins más utilizados en MySQL. Recuerda que el join te permite combinar tablas en función de una relación específica, lo que te permite realizar consultas más complejas y obtener resultados más significativos.\n¡Por supuesto! Aquí tienes una lección completa sobre las funciones de agregación COUNT, SUM, el uso de GROUP BY y ORDER BY en MySQL:\nCOUNT: Esta función de agregación cuenta el número de filas que cumplen una condición específica.\nSintaxis básica:\nSELECT COUNT(columna) FROM tabla WHERE condición; Ejemplo:\nSELECT COUNT(id) FROM clientes WHERE estado = \u0026#39;activo\u0026#39;; SUM: Esta función de agregación calcula la suma de los valores de una columna específica.\nSintaxis básica:\nSELECT SUM(columna) FROM tabla WHERE condición; Ejemplo:\nSELECT SUM(total) FROM ventas WHERE fecha = \u0026#39;2023-06-13\u0026#39;; GROUP BY: Esta cláusula se utiliza para agrupar filas en función de una o más columnas y aplicar funciones de agregación a cada grupo.\nSintaxis básica:\nSELECT columna1, columna2, ..., función_agregación(columna) FROM tabla GROUP BY columna1, columna2, ...; Ejemplo:\nSELECT categoría, COUNT(*) FROM productos GROUP BY categoría; ORDER BY: Esta cláusula se utiliza para ordenar los resultados de una consulta en función de una o más columnas, ya sea en orden ascendente (ASC) o descendente (DESC).\nSintaxis básica:\nSELECT columnas FROM tabla ORDER BY columna1 ASC/DESC, columna2 ASC/DESC, ...; Ejemplo:\nSELECT nombre, edad FROM usuarios ORDER BY edad DESC; Estas funciones y cláusulas son muy útiles para realizar operaciones de agregación, agrupación y ordenación en MySQL. Puedes combinarlas con otras declaraciones DML para obtener resultados más precisos y personalizados en tus consultas.\n","date":"17 enero 2023","permalink":"/platform/mysql/dml/","section":"Mysqls","summary":"Leccion DML MYSQL # lección completa sobre el lenguaje de manipulación de datos (DML) en MySQL.","title":"DML parte 2"},{"content":"","date":"17 enero 2023","permalink":"/platform/ejercicios/","section":"Ejercicios","summary":"","title":"Ejercicios"},{"content":"Organizar HTML # Durante el proceso de inducción aprendiste las bases de HTML, hoy vamos a repasar algunas cosas de este lenguaje.\nAnatomía HTML # Anatomía HTML\nLos elementos HTML que siempre encontrarás luego de \u0026lt;!DOCTYPE html\u0026gt; son:\n\u0026lt;html\u0026gt;\u0026lt;/html\u0026gt;: El elemento \u0026lt;html\u0026gt; envuelve todo el contenido de la página. A veces se le conoce como el elemento raíz. \u0026lt;head\u0026gt;\u0026lt;/head\u0026gt;: Es la cabecera de la página y no la verá el cliente. Aquí pondrás información e instrucciones de tu página que sólo deberá interpretar el navegador. \u0026lt;meta charset=\u0026quot;utf-8\u0026quot;\u0026gt;: las etiquetas meta sirven para dar diferentes instrucciones al navegador, esta configuración en concreto le dice al navegador que tu página usará la configuración de caracteres UTF-8 que incluye la mayoría de caracteres de todos los lenguajes humanos escritos. Esta etiqueta va dentro de la etiqueta \u0026lt;head\u0026gt;. \u0026lt;title\u0026gt;\u0026lt;/title\u0026gt;: Aquí se establece el título de la página, este aparecerá en la pestaña del navegador. También se utiliza para describir la página. Esta etiqueta va dentro de la etiqueta \u0026lt;head\u0026gt;. \u0026lt;body\u0026gt;\u0026lt;/body\u0026gt;: El elemento \u0026lt;body\u0026gt; contiene todo el contenido que quieres mostrar a los usuarios cuando visitan tu página, ya sea texto, imágenes, vídeos, juegos, pistas de audio reproducibles o cualquier otra cosa. index.html # Cuando trabajamos con archivos HTML debemos comenzar teniendo en cuenta el nombre de nuestro archivo. como convención, cuando se crea un sitio web, el archivo principal se llama index.html . Esto es porque los navegadores por defecto, al ingresar en una dirección web, buscan el archivo HTML que tenga este nombre, y será la primera página que se visita.\nLos demás archivos HTML pueden tener otro nombre según sea necesario.\nAsimismo, si tenemos archivos HTML dentro de una carpeta, debemos ponerle de nombre index.html al archivo HTML principal de esa carpeta.\nIndentación # Cuando tenemos nuestros archivos HTML, habrás notado que algunos elementos están más a la derecha que otros:\nEn este ejemplo, los elementos \u0026lt;meta\u0026gt; y \u0026lt;title\u0026gt; se encuentran indentados. Es decir, están separados del margen izquierdo por una tabulación haciendo la lectura más sencilla. Con esto entendemos que los elementos \u0026lt;meta\u0026gt; y \u0026lt;title\u0026gt; son elementos \u0026ldquo;hijo\u0026rdquo; del elemento \u0026lt;head\u0026gt;.\nEsta estructura ayuda a la legibilidad del código y es de uso común en los lenguajes de programación. Te recomendamos seguir esta buena práctica a fin de que tu código sea legible y evitar que se convierta en un caos.\nCSS3: Box Model # Ya que entendemos las cosas básicas de HTML y CSS debemos tener presente lo sigiuente: Cada elemento en el diseño web es una caja rectangular. Este punto es importante para comprender como trabajamos con CSS y lograr el diseño que queremos lgrar. Si bien es cierto podemos posicionar los elementos y darles estilos con CSS, es importante que entendamos como funciona esa caja en sí.\nEl Box model (modelo de caja) explica el tamaño de los elementos en función de algunas propiedades de CSS.\nDesde el interior hacia el exterior, tenemos:\nContent (contenido) padding (relleno) border (borde o frontera) margin (margen) La mejor manera de visualizar el modelo de caja es abrir el navegador DevTools y comprobar cómo se muestra:\nAquí puedes ver cómo Firefox me dice las propiedades de un elemento span que destaqué. Hice clic con el botón derecho en él, presioné Inspeccionar elemento y fui al panel Diseño de DevTools.\nMira, el espacio azul claro es el área de content. Rodeándolo está el padding, luego el border y finalmente el margin. De forma predeterminada, si estableces un ancho (o alto) en el elemento, se aplicará al área de content . Todos los cálculos de padding, border y margin se realizan fuera del valor, por lo que debes tener esto en cuenta cuando realices el cálculo. Se puede cambiar este comportamiento utilizando Box-sizing (puedes buscar más información de esta propiedad aqui).\nEntender este punto, te puede ayudar a realizar diseño con CSS de manera más sencilla, por lo que mira el siguiente video y toma nota entre las diferencias entre cada una de las partes del box model:\nDisplay # Ahora que entiendes un poco mejor lo que es el box model, es importante que sepas que las cajas en CSS pueden comportarse de manera distinta de acuerdo a una propiedad conocida como display. Esta propiedad nos indica la forma en la que el elemento será representado en el navegador y usar alguno de estos display, alterará considerablemente el comportamiento del navegador con el elemento y sus hijos.\nEn esta sección analizaremos los más importantes no cubiertos en otra parte:\nblock inline inline-block none en el siguiente video aprenderás la diferencia entre cada uno de estos y como afectan al modelo de caja:\nAprendiendo con Práctica # A lo largo de esta primera semana, te dejaremos unos enlaces de los que puedes aprender a aplicar HTML y CSS dede el portal FreeCodeCamp. Te recomendamos que los realices en orden, ya que cada uno de ellos te enseñará algo nuevo y te ayudará a reforzar lo aprendido en esta semana, comenzando por el segmento de HTML y al finalizarlo, empezar con el de CSS, sin embargo eres libre realizarlos en el orden que desees.\nHTML - Aplicacion de fotos de gatos\nCSS - Menú de Cafetería\n","date":"17 enero 2023","permalink":"/platform/html/anatomia/","section":"Htmls","summary":"Organizar HTML # Durante el proceso de inducción aprendiste las bases de HTML, hoy vamos a repasar algunas cosas de este lenguaje.","title":"HTML 5 y CSS3"},{"content":"Librería Online es una aplicación web de comercio electrónico para la venta de libros. Los usuarios pueden explorar el catálogo, filtrar por categorías, agregar productos al carrito y gestionar sus compras de manera intuitiva.\n🚀 Características # Catálogo de libros con información como título, autor, precio, categoría y stock. Búsqueda y filtrado por categorías para una navegación más eficiente. Gestión de carrito de compras, permitiendo agregar, quitar y actualizar la cantidad de productos. Diseño responsivo, adaptable a dispositivos móviles y de escritorio. 🖥️ Interfaz # Vista de Escritorio: # Se presenta el catálogo en un diseño en cuadrícula. Botón de \u0026ldquo;Agregar al carrito\u0026rdquo; en cada libro. Carrito accesible en la esquina superior derecha con detalles de la compra. Vista Móvil: # Diseño en lista para una mejor visualización en pantallas pequeñas. Funcionalidad de filtrado y búsqueda optimizada. Carrito accesible con un diseño tipo modal. Carrito de Compras: # Lista de productos añadidos con opciones para aumentar o disminuir cantidad. Eliminación de productos con un solo clic. Cálculo automático del total de la compra. ","date":"17 enero 2023","permalink":"/platform/ejercicios/book-store/","section":"Ejercicios","summary":"Librería Online es una aplicación web de comercio electrónico para la venta de libros.","title":"Librería Online"},{"content":"Bienvenido a Funval Este es tu primer día en el camino a convertirte en un Desarrollador Web Full Stack, por lo que te invitamos a prestar mucha atención a todo lo que aprenderás. Toma apuntes de lo que consideres mas relevante y anota los temas que sean más complicados de entender para que puedas resolver tus dudas posteriormente. Sin mas rodeos, comencemos 😉.\nFundamentos de la Programación # La programación en pocas palabras, es darle datos e instrucciones a una computadora para que procese esos datos siguiendo las instrucciones que le dimos para que nos devuelva un resultado. ¿Y para qué? para resolver problemas de nuestra vida como hacer operaciones matemáticas, sacar estadísticas, automatizar procesos, etcétera.\nPero esos problemas se pueden resolver de diferentes maneras, algunas más rápidas y eficientes y otras no tanto. Pero todas con el fin de encontrar la solución al problema.\n¿Qué es la Programación? # Es un término común que se puede describir según la Real Academia de la Lengua como \u0026ldquo;Acción o efecto de programar\u0026rdquo;. ¿Y programar? se define como Idear y ordenar las acciones necesarias para realizar un proyecto.\nTodo esto en términos generales, no se refiere específicamente a la programación de lenguajes informáticos, pero nos da una idea de lo que es.\nPara ejecutar lo que el usuario desea hacer en su computadora, o bien para resolver un problema específico, este precisa buscar un software que realice o ejecute con exactitud la tarea que se ha planteado o elaborar y desarrollar (escribir) un programa que la realice. El trabajo de elaboración de un programa se denomina “programación”. Pero la programación no es solo el trabajo de escritura del código, sino todo un conjunto de tareas que se deben cumplir, a fin de que el código que se escribió resulte correcto, robusto, y cumpla con el objetivo o los objetivos para los que fue creado.\nLas afirmaciones que se derivan de lo anterior son varias:\nConocer las herramientas, los formalismos y los métodos para transformar un problema en un programa escrito en un lenguaje (que posiblemente no será el lenguaje máquina), y para qué dicho programa pueda ser transformado en un código ejecutable.\nSaber transformar el problema inicial en un algoritmo y luego en un programa.\nLa primera afirmación es genérica y se considera para varias categorías de problemas para resolver. Por su parte, la segunda es específica de un problema determinado que se tiene que resolver, para lo cual existen diversas metodologías específicas de resolución para este tipo de problemas.\nPara los casos de problemas muy generales, en ocasiones existen métodos conocidos que solo se adaptan a un problema en particular. El método es, por lo general, un algoritmo o una técnica de programación.\nDesarrollo Web # Web Developing ¿Y el Desarrollo Web?\nLa aplicación de la programación y la lógica son muchos: Inteligencia Artificial, Administración de base de datos, Desarrollo de videojuegos, Desarrollo de Sistemas operativos, etc.\nEntre todas estas ramas encontramos el Desarrollo Web.\nDesarrollo web es un término que define la creación de sitios web para Internet o una intranet.\nEl Programador Web es un profesional que trabaja con desarrolladores de páginas web, softwares, operadores de sistemas (SysOps) que ejecuta y/o desarrollar las versiones e implementaciones de códigos. El puesto requiere de personas que también posean soft skills o habilidades blandas relevantes que impacten positivamente el control de calidad de las pruebas y los equipos de operaciones; además de fomentar un entorno colaborativo.\nDentro del Desarrollo Web encontramos distintos roles:\nDesarrollador web front-end es el profesional responsable de proyectar y construir la interfaz del usuario en un proyecto web. Es quien cuida de la visualización y la interfaz gráfica.\nDesarrollador web back-end Son los que trabajan con aplicaciones haciendo código que sólo el servidor entenderá.\nDesarrollador web full-stack - Por supuesto que nada impide que un desarrollador trabaje en ambas áreas. Por eso el término full-stack se refiere a que el profesional que trabaja tanto con el back-end como el front-end.\nAquí te vamos a enseñar lo necesario para que tengas las habilidades de un desarrollador Full-Stack así que ¡preparate para aprender creando! 😁.\nComenzaremos con las habilidades de un desarrollador Front-end y seguiremos con el Back-end.\nLas primeras tecnologías que aprenderás son: HTML5, CSS3 y JavaScript. Los dos primeros tienen como objetivo darle estructura, contenido y diseño a una página web, y el último se encarga de la lógica que hay detrás de una página.\nPáginas web estáticas vs Dinámicas # Al empezar en el mundo del desarrollo web, seguro te estarás preguntando ¿Cómo inicio a hacer páginas web? Veamos primero las dos diferencias entre estos productos web.\nPáginas Estáticas # Lo primero, hay páginas estáticas y páginas dinámicas. Las páginas estáticas van a ser todos los productos web o todas las páginas que van a tener pura información para consumir, ya sea texto e imágenes, y que esta información no va a cambiar. Siempre va a ser la misma. Por ejemplo, algún blog post, si te metes algún blog de alguien, siempre vas a poder ver los blogs de esa persona.\nEsta información raramente va a cambiar. Posiblemente van a llegar personas nuevas al equipo o se van a ir personas o van a agregar cierta información distinta de la empresa o de los productos que tienen, pero gran parte de la información se va a quedar ahí de forma estática por mucho tiempo, y si tú generas esta página, posiblemente te vayan a contactar meses después para poderte decir como \u0026ldquo;oye, queremos hacer este cambio, ahora queremos agregar nuevas fotos o una nueva dirección de donde estamos nosotros\u0026rdquo;. O \u0026ldquo;hay 2 miembros nuevos del equipo, creemos que agregue su información y su foto\u0026rdquo;. Pero estas páginas siguen siendo estáticas porque la información perse nunca va a cambiar. Si tú entras, hoy vas a ver lo mismo. Si entras mañana, no va a haber algún tipo de cambio.\nLo más importante es que estas páginas no están conectadas a un servidor o a una base de datos, no necesitas generar interacción con la base de Datos porque no hay algo que generes este cambio del lado del cliente. El cliente desde el navegador no tendrá alguna interacción que le permita cambiar información de la página web, no tendrá algún login, etc.\nEjemplo de página estática # Las Landing page son un buen ejemplo de páginas estáticas. Como en este caso. La información que verán los clientes siempre es la misma y no cambiará a menos que se solicite. No hay opción de hacer login y esto es solo informativo.\nEste tipo de páginas no es menos importante, simplemente tiene un objetivo distinto a una página dinámica y son más sencillas de construir.\nPáginas Dinámicas # Las páginas dinámicas, también conocidas como web Apps, ya dejan de ser páginas y se convierten más en aplicaciones por todas las cosas que vas a poder hacer con estas mismas.\nEstas sí están conectadas a una base de Datos, por lo que el usuario, o sea nosotros a través del navegador, si podemos generar una interacción con la página o con la aplicación. Ahora se tiene que guardar cierta información o estado de lo que estemos haciendo, se esperaría poder tener un login para yo tener mi cuenta y poder guardar información. Se esperaría poder interactuar ya sea con productos si quiero comprar algo, si es que estoy viendo algo de mis seguidores en las redes, o si quiero ver a las personas que sigo.\nEjemplo de página dinámica # En páginas como Twitter, tú si puedes interactuar. Puedes dejarla de esa forma y dentro de unos 15 minutos si actualizas, la información será distinta. Esta página está en comunicación con el servidor para traer los nuevos cambios según el usuario lo solicite. La información que ves allí es específica para ti, y otro usuario podría ver twits distintos.\nRecursos Para comenzar # Antes de continuar, debemos asegurarnos de tener los siguientes programas que formarán parte de este curso:\nVSCode: Este es el editor de código que estaremos utilizando a lo largo del curso, si bien es cierto que existen varios editores y puedes usar el que te sea mas cómodo, te recomendamos este para que todos estemos trabajando en las mismas situaciones y sea más fácil poder interactuar. En caso aun no lo tengas, puedes descargarlo desde el siguiente enlace:\nDownload VS Code\nNavegadores: Es probable que ya cuentes con algunos de estos, sin embargo cuando trabajamos en desarrollo web, es importante contar con diferentes opciones ya que nuestra página web puede comportarse de manera diferente en cada uno de estos por los distintos motores de interpretación que utilizan. Algunos de los navegadores que te recomendamos tener para tus pruebas son:\nBrave Chrome Edge Firefox En cada uno de los anteriores links, tendrás una opción de descarga.\nSi tienes dificultades para instalar alguno de los recursos mencionados, puedes postear tu error o duda en el chat grupal donde podremos ayudarte 😀\nEnlaces # Al terminar la lectura anterior, revisa los siguientes artículos donde encontrarás más información de los temas:\nPáginas Estaticas vs Dinámicas - Open Webinars\n¿Qué es desarrollo web? - Articulo Tekla\n","date":"17 enero 2023","permalink":"/platform/levels/level1_2023/dia1/intro/","section":"Levels","summary":"Bienvenido a Funval Este es tu primer día en el camino a convertirte en un Desarrollador Web Full Stack, por lo que te invitamos a prestar mucha atención a todo lo que aprenderás.","title":"Introducción al Desarrollo Web"},{"content":"Bienvenido a Funval Este es tu primer día en el camino a convertirte en un Desarrollador Web Full Stack, por lo que te invitamos a prestar mucha atención a todo lo que aprenderás. Toma apuntes de lo que consideres mas relevante y anota los temas que sean más complicados de entender para que puedas resolver tus dudas posteriormente. Sin mas rodeos, comencemos 😉.\nFundamentos de la Programación # La programación en pocas palabras, es darle datos e instrucciones a una computadora para que procese esos datos siguiendo las instrucciones que le dimos para que nos devuelva un resultado. ¿Y para qué? para resolver problemas de nuestra vida como hacer operaciones matemáticas, sacar estadísticas, automatizar procesos, etcétera.\nPero esos problemas se pueden resolver de diferentes maneras, algunas más rápidas y eficientes y otras no tanto. Pero todas con el fin de encontrar la solución al problema.\n¿Qué es la Programación? # Es un término común que se puede describir según la Real Academia de la Lengua como \u0026ldquo;Acción o efecto de programar\u0026rdquo;. ¿Y programar? se define como Idear y ordenar las acciones necesarias para realizar un proyecto.\nTodo esto en términos generales, no se refiere específicamente a la programación de lenguajes informáticos, pero nos da una idea de lo que es.\nPara ejecutar lo que el usuario desea hacer en su computadora, o bien para resolver un problema específico, este precisa buscar un software que realice o ejecute con exactitud la tarea que se ha planteado o elaborar y desarrollar (escribir) un programa que la realice. El trabajo de elaboración de un programa se denomina “programación”. Pero la programación no es solo el trabajo de escritura del código, sino todo un conjunto de tareas que se deben cumplir, a fin de que el código que se escribió resulte correcto, robusto, y cumpla con el objetivo o los objetivos para los que fue creado.\nLas afirmaciones que se derivan de lo anterior son varias:\nConocer las herramientas, los formalismos y los métodos para transformar un problema en un programa escrito en un lenguaje (que posiblemente no será el lenguaje máquina), y para qué dicho programa pueda ser transformado en un código ejecutable.\nSaber transformar el problema inicial en un algoritmo y luego en un programa.\nLa primera afirmación es genérica y se considera para varias categorías de problemas para resolver. Por su parte, la segunda es específica de un problema determinado que se tiene que resolver, para lo cual existen diversas metodologías específicas de resolución para este tipo de problemas.\nPara los casos de problemas muy generales, en ocasiones existen métodos conocidos que solo se adaptan a un problema en particular. El método es, por lo general, un algoritmo o una técnica de programación.\nDesarrollo Web # Web Developing ¿Y el Desarrollo Web?\nLa aplicación de la programación y la lógica son muchos: Inteligencia Artificial, Administración de base de datos, Desarrollo de videojuegos, Desarrollo de Sistemas operativos, etc.\nEntre todas estas ramas encontramos el Desarrollo Web.\nDesarrollo web es un término que define la creación de sitios web para Internet o una intranet.\nEl Programador Web es un profesional que trabaja con desarrolladores de páginas web, softwares, operadores de sistemas (SysOps) que ejecuta y/o desarrollar las versiones e implementaciones de códigos. El puesto requiere de personas que también posean soft skills o habilidades blandas relevantes que impacten positivamente el control de calidad de las pruebas y los equipos de operaciones; además de fomentar un entorno colaborativo.\nDentro del Desarrollo Web encontramos distintos roles:\nDesarrollador web front-end es el profesional responsable de proyectar y construir la interfaz del usuario en un proyecto web. Es quien cuida de la visualización y la interfaz gráfica.\nDesarrollador web back-end Son los que trabajan con aplicaciones haciendo código que sólo el servidor entenderá.\nDesarrollador web full-stack - Por supuesto que nada impide que un desarrollador trabaje en ambas áreas. Por eso el término full-stack se refiere a que el profesional que trabaja tanto con el back-end como el front-end.\nAquí te vamos a enseñar lo necesario para que tengas las habilidades de un desarrollador Full-Stack así que ¡preparate para aprender creando! 😁.\nComenzaremos con las habilidades de un desarrollador Front-end y seguiremos con el Back-end.\nLas primeras tecnologías que aprenderás son: HTML5, CSS3 y JavaScript. Los dos primeros tienen como objetivo darle estructura, contenido y diseño a una página web, y el último se encarga de la lógica que hay detrás de una página.\nPáginas web estáticas vs Dinámicas # Al empezar en el mundo del desarrollo web, seguro te estarás preguntando ¿Cómo inicio a hacer páginas web? Veamos primero las dos diferencias entre estos productos web.\nPáginas Estáticas # Lo primero, hay páginas estáticas y páginas dinámicas. Las páginas estáticas van a ser todos los productos web o todas las páginas que van a tener pura información para consumir, ya sea texto e imágenes, y que esta información no va a cambiar. Siempre va a ser la misma. Por ejemplo, algún blog post, si te metes algún blog de alguien, siempre vas a poder ver los blogs de esa persona.\nEsta información raramente va a cambiar. Posiblemente van a llegar personas nuevas al equipo o se van a ir personas o van a agregar cierta información distinta de la empresa o de los productos que tienen, pero gran parte de la información se va a quedar ahí de forma estática por mucho tiempo, y si tú generas esta página, posiblemente te vayan a contactar meses después para poderte decir como \u0026ldquo;oye, queremos hacer este cambio, ahora queremos agregar nuevas fotos o una nueva dirección de donde estamos nosotros\u0026rdquo;. O \u0026ldquo;hay 2 miembros nuevos del equipo, creemos que agregue su información y su foto\u0026rdquo;. Pero estas páginas siguen siendo estáticas porque la información perse nunca va a cambiar. Si tú entras, hoy vas a ver lo mismo. Si entras mañana, no va a haber algún tipo de cambio.\nLo más importante es que estas páginas no están conectadas a un servidor o a una base de datos, no necesitas generar interacción con la base de Datos porque no hay algo que generes este cambio del lado del cliente. El cliente desde el navegador no tendrá alguna interacción que le permita cambiar información de la página web, no tendrá algún login, etc.\nEjemplo de página estática # Las Landing page son un buen ejemplo de páginas estáticas. Como en este caso. La información que verán los clientes siempre es la misma y no cambiará a menos que se solicite. No hay opción de hacer login y esto es solo informativo.\nEste tipo de páginas no es menos importante, simplemente tiene un objetivo distinto a una página dinámica y son más sencillas de construir.\nPáginas Dinámicas # Las páginas dinámicas, también conocidas como web Apps, ya dejan de ser páginas y se convierten más en aplicaciones por todas las cosas que vas a poder hacer con estas mismas.\nEstas sí están conectadas a una base de Datos, por lo que el usuario, o sea nosotros a través del navegador, si podemos generar una interacción con la página o con la aplicación. Ahora se tiene que guardar cierta información o estado de lo que estemos haciendo, se esperaría poder tener un login para yo tener mi cuenta y poder guardar información. Se esperaría poder interactuar ya sea con productos si quiero comprar algo, si es que estoy viendo algo de mis seguidores en las redes, o si quiero ver a las personas que sigo.\nEjemplo de página dinámica # En páginas como Twitter, tú si puedes interactuar. Puedes dejarla de esa forma y dentro de unos 15 minutos si actualizas, la información será distinta. Esta página está en comunicación con el servidor para traer los nuevos cambios según el usuario lo solicite. La información que ves allí es específica para ti, y otro usuario podría ver twits distintos.\nRecursos Para comenzar # Antes de continuar, debemos asegurarnos de tener los siguientes programas que formarán parte de este curso:\nVSCode: Este es el editor de código que estaremos utilizando a lo largo del curso, si bien es cierto que existen varios editores y puedes usar el que te sea mas cómodo, te recomendamos este para que todos estemos trabajando en las mismas situaciones y sea más fácil poder interactuar. En caso aun no lo tengas, puedes descargarlo desde el siguiente enlace:\nDownload VS Code\nNavegadores: Es probable que ya cuentes con algunos de estos, sin embargo cuando trabajamos en desarrollo web, es importante contar con diferentes opciones ya que nuestra página web puede comportarse de manera diferente en cada uno de estos por los distintos motores de interpretación que utilizan. Algunos de los navegadores que te recomendamos tener para tus pruebas son:\nBrave Chrome Edge Firefox En cada uno de los anteriores links, tendrás una opción de descarga.\nSi tienes dificultades para instalar alguno de los recursos mencionados, puedes postear tu error o duda en el chat grupal donde podremos ayudarte 😀\nEnlaces # Al terminar la lectura anterior, revisa los siguientes artículos donde encontrarás más información de los temas:\nPáginas Estaticas vs Dinámicas - Open Webinars\n¿Qué es desarrollo web? - Articulo Tekla\n","date":"17 enero 2023","permalink":"/platform/logica/intro_web/","section":"Logicas","summary":"Bienvenido a Funval Este es tu primer día en el camino a convertirte en un Desarrollador Web Full Stack, por lo que te invitamos a prestar mucha atención a todo lo que aprenderás.","title":"Introducción al Desarrollo Web"},{"content":"I\u0026rsquo;m doing tests # ","date":"17 enero 2023","permalink":"/platform/tests/","section":"","summary":"I\u0026rsquo;m doing tests # ","title":"Introducción al Desarrollo Web"},{"content":"Introducción al Desarrollo Web # Aqui encontrarás la información que se usará dentro del Nivel 1.\n","date":"17 enero 2023","permalink":"/platform/levels/level1_2023/","section":"Levels","summary":"Introducción al Desarrollo Web # Aqui encontrarás la información que se usará dentro del Nivel 1.","title":"Nivel 1 - Intro al desarrollo web"},{"content":"Día 5 : Prácticas # Durante el día 5 nos concentraremos en poner en practica los conceptos de Lógica de programación y los diagramas de flujo mediante el desarrollo de un ejecicio práctico que se realizará durante las clases.\nImportancia de los temas que aprenderás Si bien es cierto que estos temas te ayudarán a prepararte para el exámen de admisión, esperamos que puedas analizarlo y prácticar de la mano con los tutoriales que hemos añadido. Al ingresar al programa, esta información será de gran ayuda para empezar tu camino como programador, recuerda que esperamos que llegues a entender de forma básica los temas que aprenderás y al iniciar el curso, podremos profundizar en ellos. También, tendremos en cuenta que leiste estos temas y partiremos de ahí para avanzar en el curso. Tambien para que continues aprendiendo las bases de la programación con JavaScript, te recomendamos ver el curso de platzi desde la lección 1 hasta la lección 15.\nProgramación básica - Platzi\nFreeCodeCamp # Puedes continuar este curso incluso luego de terminar estos primeros dias de capacitación:\nFreeCodeCamp - JavaScript. Recomendaciones Finales # Estos días han sido cargados de información, por lo que te recomendamos que como preparación para tu examen, revises los temas que hemos visto en estos días, en especial la lógica de programación para hacer operaciones con la información de las variables, los operadores, etc.\n","date":"16 diciembre 2022","permalink":"/platform/levels/level_0/dia_5/","section":"Levels","summary":"Día 5 : Prácticas # Durante el día 5 nos concentraremos en poner en practica los conceptos de Lógica de programación y los diagramas de flujo mediante el desarrollo de un ejecicio práctico que se realizará durante las clases.","title":"Día 5"},{"content":"Día 4 : Intro a JavaScript # Introducción a JavaScript # JavaScript es un lenguaje de programación que permite crear interactividad en páginas web. Es uno de los lenguajes más utilizados en el desarrollo web.\n¿Para qué sirve JavaScript? # Hacer sitios web interactivos (botones, formularios, animaciones). Crear aplicaciones web y móviles. Controlar contenido dinámico, etc. ¿Dónde se usa? # En el navegador, junto con HTML y CSS.\nPrimer programa: ¡Hola Mundo! # \u0026lt;!DOCTYPE html\u0026gt; \u0026lt;html\u0026gt; \u0026lt;head\u0026gt; \u0026lt;title\u0026gt;Mi primera página\u0026lt;/title\u0026gt; \u0026lt;/head\u0026gt; \u0026lt;body\u0026gt; \u0026lt;h1\u0026gt;Hola JavaScript\u0026lt;/h1\u0026gt; \u0026lt;script\u0026gt; alert(\u0026#34;¡Hola mundo!\u0026#34;); console.log(\u0026#34;Esto se muestra en la consola.\u0026#34;); \u0026lt;/script\u0026gt; \u0026lt;/body\u0026gt; \u0026lt;/html\u0026gt; Tipos de Datos y Operadores # En JavaScript trabajamos con distintos valores, cada valor pertenece a un tipo de dato determinado. Por ejemplo, un string o un número. En JavaScript hay ocho tipos de datos básicos. En esta sección aprenderemos sobre algunos de ellos.\nRecuerda que podemos almacenar cualquier tipo de dato en una variable, incluso podemos reasignar el valor de una variable con un tipo de dato distinto:\n// Sin error let number = \u0026#34;3\u0026#34;; // variable que contiene un string number = 6; // cambiamos el valor a un dato tipo number Cadenas de Texto (Strings) # Números # Booleanos # Tipos de Operadores # Hasta este punto, hemos visto los tipos de datos más básicos dentro del lenguaje, conocidos como primitivos. Existen otros tipos de datos llamados compuestos como: Objetos, Arrays, Functions y Classes; los cuales por ahora no cubriremos. Con los tipos de datos primitivos tenemos una base para entender más conceptos de JavaScript.\nCondicionales # Algunas veces, necesitamos ejecutar diferentes acciones basadas en diferentes condiciones.\nPara esto podemos usar la sentencia if(...) la cual evalúa la condicion entre los paréntesis, y si el resultado es true ejecuta un bloque de código.\nPor ejemplo:\nif (year == 2015) alert(\u0026#34;¡Estás en lo cierto!\u0026#34;); Aquí la condición es de igualdad (year == 2015), en caso sea true se ejecutará la alerta, pero podría ser más compleja.\nSi quisiéramos ejecutar más de una sentencia, debemos encerrar nuestro bloque de código entre llaves:\nif (year == 2015) { alert(\u0026#34;¡Es Correcto!\u0026#34;); alert(\u0026#34;¡Eres muy inteligente!\u0026#34;); } Se recomienda siempre encerrar nuestro bloque de código en llaves {} siempre que se utilice la sentencia if, inclusive si solo se va a ejecutar una sola sentencia en este caso. Hacer eso mejora la legibilidad.\nPara aprender más de este concepto, mira el siguiente video. Por el momento solo es importante la seccion donde se menciona el uso de la condicional if, else y else if. La sección sobre la condición switch , y los bucles for no es necesaria por el momento.\n","date":"16 diciembre 2022","permalink":"/platform/levels/level_0/dia_4/","section":"Levels","summary":"Día 4 : Intro a JavaScript # Introducción a JavaScript # JavaScript es un lenguaje de programación que permite crear interactividad en páginas web.","title":"Día 4"},{"content":"Estructuras de Control # Las estructuras de control permiten tomar decisiones y repetir instrucciones:\na) Condicionales (IF-ELSE) # Se usan para ejecutar diferentes bloques de código según una condición.\nb) Bucles (FOR) # Permiten repetir instrucciones varias veces.\nEjemplo con un bucle FOR:\nConclusión # La lógica de programación es un pilar esencial en el desarrollo de software. Aprender a estructurar algoritmos, utilizar diagramas de flujo te ayudará a mejorar tus habilidades como programador, independientemente del lenguaje que utilices.\n","date":"16 diciembre 2022","permalink":"/platform/levels/level_0/dia_3/","section":"Levels","summary":"Estructuras de Control # Las estructuras de control permiten tomar decisiones y repetir instrucciones:","title":"Día 3"},{"content":"Introducción a la Lógica de Programación # ¿Qué es la lógica de programación? # La lógica de programación es la base fundamental para desarrollar software. Consiste en una serie de reglas y estructuras que permiten escribir instrucciones de manera ordenada para que una computadora pueda ejecutarlas correctamente.\n¿Por qué es importante? # Facilita la resolución de problemas mediante el uso de algoritmos. Permite escribir código más estructurado, eficiente y fácil de mantener. Es independiente del lenguaje de programación, lo que ayuda a aprender nuevos lenguajes con mayor facilidad. Conceptos básicos # 1. Algoritmos # Un algoritmo es un conjunto de pasos secuenciales que resuelven un problema específico. Un buen algoritmo debe ser:\nPreciso: cada paso debe estar bien definido. Finito: debe terminar en algún punto. Definido: si se ejecuta varias veces con los mismos datos, debe producir el mismo resultado. Ejemplo de un algoritmo en lenguaje natural:\nIngresar dos números. Sumar los dos números. Mostrar el resultado. 2. Diagramas de flujo # Los diagramas de flujo son representaciones gráficas de algoritmos utilizando símbolos estándar:\nÓvalo: Inicio o fin del programa. Paralelogramo: Entrada o salida de datos. Rectángulo: Procesos o cálculos. Rombo: Decisiones lógicas. Ejemplo:\nInicio → [Ingresar número A] → [Ingresar número B] → [Sumar A + B] → [Mostrar resultado] → Fin BASES DE LA PROGRAMACIÓN # En el siguiente video podrás encontrar las bases de la lógica de programación por el canal de youtube \u0026ldquo;La Geekipedia de Ernesto\u0026rdquo;. Dentro del video se mostrará el uso simple de un programa llamado \u0026ldquo;Raptor\u0026rdquo; el cual puede ser descargado de la siguiente pagina. Raptor Descarga\n","date":"15 diciembre 2022","permalink":"/platform/levels/level_0/dia_2/","section":"Levels","summary":"Introducción a la Lógica de Programación # ¿Qué es la lógica de programación?","title":"Día 2"},{"content":"Introducción a HTML y CSS # Al comenzar tu camino como Web Developer (Desarrollador Web) vas a tener que aprender varias tecnologías. vamos a empezar por la base de la web.\nImportancia de los temas que aprenderás Si bien es cierto que estos temas te ayudarán a prepararte para el exámen de admisión, esperamos que puedas analizarlo y prácticar de la mano con los tutoriales que hemos añadido. Al ingresar al programa, esta información será de gran ayuda para empezar tu camino como programador, recuerda que esperamos que llegues a entender de forma básica los temas que aprenderás y al iniciar el curso, podremos profundizar en ellos. También, tendremos en cuenta que leiste estos temas y partiremos de ahí para avanzar en el curso. HTML # HTML (Lenguaje de Marcas de Hipertexto, del inglés HyperText Markup Language) es el componente más básico de la Web. Define el significado y la estructura del contenido web. Además de HTML, generalmente se utilizan otras tecnologías para describir la apariencia/presentación de una página web (CSS) o la funcionalidad/comportamiento (JavaScript).\n\u0026ldquo;Hipertexto\u0026rdquo; hace referencia a los enlaces que conectan páginas web entre sí, ya sea dentro de un único sitio web o entre sitios web. Los enlaces son un aspecto fundamental de la Web. Al subir contenido a Internet y vincularlo a las páginas creadas por otras personas, te conviertes en un participante activo en la «World Wide Web» (Red Informática Mundial).\nHTML ha ido evolucionando a través del tiempo y hoy nos encontramos en la versión 5 (HTML5). Este lenguaje se basa en una estructura de etiquetas, las cuales tienen la siguiente forma:\nEs más facil aprender esto haciendo, así que dejemos por un momento la teoría.\nKhan Academy : HTML\nIngresa al enlace de arriba e intenta completar las lecciónes antes de pasar al siguiente tutorial.\nMás etiquetas de HTML # Una vez que realizaste el tutorial de Khan academy, te recomiendo seguir con el tutorial que verás a continuación. Toma nota de los conceptos que consideres más importantes, no es necesario que mires todo el video pero si por lo menos la mitad de este tutorial donde se explican los conceptos básicos dentro de este lenguaje. La seccion donde se explica los formularios (minuto 35:27 hasta 51:34) puedes saltarla ya que no se incluirá en la evaluación. Si ya viste como crear listas en el tutorial de Khan academy, puedes saltarte el resto del video, sino continua hasta aprender de las listas y con eso puedes concluir.\nHTML es la base de las páginas web, tener una idea de lo que representa y como usarlo de manera básica, te ayudará a que en un futuro puedas construir páginas web modernas y prácticas.\nEstilos CSS # Hoy profundizaremos en los estilos de CSS. El siguiente video creado por el canal de youtube Hola Mundo explican de manera clara más estilos que debes tener en cuenta al momento de desarrollar para la web. Antes de ello, te menciono 3 formas comunes de escribir estilos CSS: inline, internal y external.\nImportancia de los temas que aprenderás Si bien es cierto que estos temas te ayudarán a prepararte para el exámen de admisión, esperamos que puedas analizarlo y prácticar de la mano con los tutoriales que hemos añadido. Al ingresar al programa, esta información será de gran ayuda para empezar tu camino como programador, recuerda que esperamos que llegues a entender de forma básica los temas que aprenderás y al iniciar el curso, podremos profundizar en ellos. También, tendremos en cuenta que leiste estos temas y partiremos de ahí para avanzar en el curso. Inline # Son los estilos CSS que se indican dentro del atributo style de la etiqueta HTML\n\u0026lt;p style=\u0026#34;color: red;\u0026#34;\u0026gt;Hola mundo\u0026lt;/p\u0026gt; Internal # Son los estilos CSS que se colocan dentro de la etiqueta \u0026lt;style\u0026gt; ubicada dentro del head de la estructura HTML.\n\u0026lt;head\u0026gt; ... \u0026lt;style\u0026gt; p { color: red; } \u0026lt;/style\u0026gt; ... \u0026lt;/head\u0026gt; External # La forma de escribir estos estilos es similar a Internal con la diferencia que se escriben dentro de un archivo .css aparte, el cual se une al archivo HTML por medio de la etiqueta \u0026lt;link\u0026gt;, de esta forma, los estilos serán aplicados aunque sean dos archivos distintos.\n\u0026lt;link rel=\u0026#34;stylesheet\u0026#34; href=\u0026#34;style.css\u0026#34;\u0026gt; \u0026lt;!-- Dentro del atributo `href` indicamos la ruta del archivo CSS--\u0026gt; Al igual que ayer, te recomiendo darte una vuelta por el tutorial de Khan Academy donde darás unos primeros pasos con CSS, luego revisa el video tutorial a continuación.\nKhan Academy - CSS\nCSS con Hola Mundo # En este tutorial, Puedes aprender desde el inicio hasta la seccion en la que aprendes de background(minuto 56:10). En caso sientas que puedes ir un poco más alla, puedes ir a la seccion siguiente donde se habla de box model (termina en 1:04:55) pero esta ultima no se incluirá dentro del examen.\n","date":"15 diciembre 2022","permalink":"/platform/levels/level_0/dia_1/","section":"Levels","summary":"Introducción a HTML y CSS # Al comenzar tu camino como Web Developer (Desarrollador Web) vas a tener que aprender varias tecnologías.","title":"Día 1"},{"content":"Seccion creada para insertar la información del Nivel inductivo.\n","date":"15 diciembre 2022","permalink":"/platform/levels/level_0/","section":"Levels","summary":"This is an example of summary","title":"Induccion a Nivel 0"},{"content":"Una guia para la vida # Este es un sitio de prueba\nme interesa aprender a usar markdown to create nuevos sitios\n","date":"15 diciembre 2022","permalink":"/platform/contacto/","section":"","summary":"Una guia para la vida # Este es un sitio de prueba","title":"Contacto"},{"content":"Inducción a la Programación # Instrucciones para postular al programa de Desarrollo Web en Funval 😃 Bienvenido a Funval, si estás en esta página es porque deseas postular al programa de Desarrollo Web que ofrece la Fundacion FUNVAL. Para lograr esto te explicaré brevemente cómo funciona el proceso de inducción y el material que usarás.\nAcerca del proceso # Durante el proceso de inducción, estarás estudiando los principios básicos de la programación. Para desarrollar páginas web, se debe escribir en lenguajes especiales para esta labor. Los más usados en el desarrollo web son : HTML5, CSS3 y JavaScript, este ultimo sirve para implementar la lógica de programación dentro de la web, mientras los anteriores sirven tanto para el maquetado como para el diseño (estilos) respectivamente.\nEste proceso está estructurado para funcionar de la siguiente forma:\n5 días de aprendizaje 2 horas de estudio en cada día aprox. de material (10 horas en total) 2 hora de estudio en cada día por zoom (10 horas en total) Un día de evaluación Acerca del material # Durante cada día de estudio, tendrás material para que puedas aprender las bases de estos lenguajes, si bien es cierto que tendrás 4 horas cada día (2 de lectura/estudio y 2 por zoom), puedes dedicar mas tiempo en caso consideres necesario profundizar o practicar sobre un tema en particular.\nEl material disponible, en su mayoría es de recursos externos (páginas web, videos, blogs, etc.). La programación en la actualidad cuenta con una comunidad muy grande, quienes desean que más personas aprendan sobre este mundo, sin embargo hay tanta información que es difícil en ocasiones indagar por nuestra propia cuenta, aquí te daremos el material necesario para que aprendas las bases en el tiempo previsto, el cual ha sido previamente revisado y con el que sabemos, podrás aprender estas tecnologías de manera práctica y sencilla.\nAsimismo te invitamos a tomar nota de lo que vayas aprendiendo para que puedas repasarlo luego de las clase 😄\nImportancia de los temas que aprenderás Si bien es cierto que estos temas te ayudarán a prepararte para el examen de admisión, esperamos que puedas analizarlo y prácticar de la mano con los tutoriales que hemos añadido. Al ingresar al programa, esta información será de gran ayuda para empezar tu camino como programador, recuerda que esperamos que llegues a entender de forma básica los temas que aprenderás y al iniciar el curso, podremos profundizar en ellos. También, tendremos en cuenta que leiste estos temas y partiremos de ahí para avanzar en el curso. Acerca de la evaluación # Luego de aprender lo necesario, necesitamos poner a prueba tu conocimiento para evaluar que cuentas con el conocimiento minimo necesario antes de empezar el curso, por lo que la evaluación de Programación tendrá un puntaje sobre 100 pts. Es necesario que logres un mínimo de 75pts sobre promedio final para lograr ingresar al programa.\nDesde Funval te deseamos los mejores éxitos en este proceso, si tienes dudas sobre alguno de los puntos mencionados o del material que encontrarás, puedes contactar a tu reclutador.\nPreparación de entorno de trabajo # Antes de poder iniciar el aprendizaje es necesario que podamos preparar nuestro entorno de trabajo por lo que en los siguientes videos aprenderas como instalar Visual Studio Code, como configurarlo, agregar algunas extenciones utiles y como abrir o trabajar con proyectos nuevos en esta herramienta.\n","date":"15 diciembre 2022","permalink":"/platform/levels/level_0/temario/","section":"Levels","summary":"Inducción a la Programación # Instrucciones para postular al programa de Desarrollo Web en Funval 😃 Bienvenido a Funval, si estás en esta página es porque deseas postular al programa de Desarrollo Web que ofrece la Fundacion FUNVAL.","title":"Temario"},{"content":"Finding a new way to build pages prueba about # ","date":"1 enero 0001","permalink":"/platform/about/","section":"","summary":"Finding a new way to build pages prueba about # ","title":""},{"content":"Blog de Funval # Estamos trabajando para añadir información en esta seccion 😀\n","date":"1 enero 0001","permalink":"/platform/posts/","section":"","summary":"Blog de Funval # Estamos trabajando para añadir información en esta seccion 😀","title":""},{"content":"¿Qué es Tailwind CSS? # Tailwind CSS es un moderno y popular framework de diseño CSS que se centra en la construcción de interfaces web altamente personalizables y de manera rápida. A diferencia de otros frameworks CSS como Bootstrap o Foundation, Tailwind CSS no ofrece estilos predefinidos ni componentes UI listos para usar. En su lugar, proporciona una gran cantidad de utilidades de CSS de bajo nivel, lo que permite a los desarrolladores diseñar y personalizar cada aspecto de su interfaz de usuario de forma eficiente.\nFilosofía detrás de Tailwind CSS # La filosofía central de Tailwind CSS es proporcionar una base sólida para el desarrollo front-end, pero sin imponer un diseño o estilo específico. En lugar de forzar a los desarrolladores a utilizar clases predefinidas con estilos y tamaños específicos, Tailwind les ofrece un conjunto extenso de utilidades que pueden combinar para construir componentes personalizados y lograr la apariencia deseada.\nCaracterísticas principales de Tailwind CSS # Utilidades CSS: Tailwind CSS se basa en clases de utilidad CSS, lo que significa que cada clase tiene un propósito específico y puede aplicarse directamente en el marcado HTML. Por ejemplo, clases como text-center, p-4, bg-blue-500, etc., se pueden utilizar para alinear el texto al centro, establecer un relleno de 4 píxeles y definir un fondo de color azul, respectivamente.\nConfigurabilidad: El framework es altamente configurable, lo que permite a los desarrolladores personalizar cada aspecto del diseño, como los colores, las tipografías, los márgenes, los tamaños y más. La configuración se puede realizar mediante archivos de configuración JavaScript, lo que facilita la adaptación del proyecto según las necesidades específicas.\nMobile-first: Tailwind CSS sigue una filosofía \u0026ldquo;mobile-first\u0026rdquo;, lo que significa que el diseño se optimiza primero para dispositivos móviles y luego se adapta a tamaños de pantalla más grandes. Esto garantiza una experiencia de usuario consistente en diferentes dispositivos.\nComponentes reutilizables: Aunque Tailwind CSS no ofrece componentes predefinidos, permite a los desarrolladores crear componentes reutilizables con facilidad, al combinar las diferentes utilidades proporcionadas por el framework.\nIntegración con otros frameworks y bibliotecas: Tailwind CSS se puede integrar fácilmente con otros frameworks o bibliotecas front-end, como React, Vue.js o Angular, lo que lo convierte en una opción versátil para el desarrollo de aplicaciones web modernas.\nVentajas y desafíos # Ventajas: # Flexibilidad y personalización: La gran cantidad de utilidades proporciona un alto nivel de personalización y control sobre el diseño. Rendimiento: Tailwind CSS permite cargar solo el CSS utilizado, lo que puede conducir a un mejor rendimiento y tiempos de carga más rápidos. Curva de aprendizaje reducida: Con un enfoque en las clases de utilidad, los desarrolladores pueden empezar a utilizar Tailwind CSS con una curva de aprendizaje más rápida en comparación con otros frameworks más complejos. Desafíos: # Tamaño del archivo CSS: Si bien Tailwind CSS permite una personalización exhaustiva, esto puede llevar a un archivo CSS más grande en comparación con otros frameworks más limitados en opciones. Diseño desde cero: Para desarrolladores acostumbrados a frameworks con estilos predefinidos, el enfoque de diseño desde cero de Tailwind CSS puede resultar inicialmente desafiante. Uso e implementación # La implementación de Tailwind CSS generalmente implica los siguientes pasos:\nInstalación: Puedes instalar Tailwind CSS mediante npm o yarn, y configurar un archivo de configuración personalizado si lo deseas. Integración con el flujo de trabajo: Tailwind CSS se puede integrar en el flujo de trabajo de desarrollo utilizando herramientas de compilación como Webpack o Parcel. Aplicación de clases: Utiliza las clases de utilidad proporcionadas por Tailwind CSS directamente en el marcado HTML para diseñar y personalizar los componentes. Tailwind CSS ofrece una forma única de construir interfaces web mediante el uso de clases de utilidad altamente configurables. Si bien implica un cambio en el enfoque de desarrollo, su flexibilidad y personalización hacen que sea una excelente opción para desarrolladores que desean un control total sobre el diseño de sus proyectos. Al adoptar Tailwind CSS, los desarrolladores pueden construir aplicaciones web más rápidas, eficientes y altamente personalizadas.\n","date":"1 enero 0001","permalink":"/platform/tailwindcss/intro/","section":"Tailwindcsses","summary":"¿Qué es Tailwind CSS?","title":"Introducción a Tailwind CSS"},{"content":"Para este ejercicio debes realizar la siguiente página: Tendrás varios días para terminar la página, así que avanza todo lo que puedas solo en el tiempo de estudio.\nPara lograrlo, tendrás que seguir los siguientes tutoriales:\nPrimera parte # Segunda parte # Página desplegada:\nhttps://challenge-31-social-media-dashboard-with-theme-switcher.vercel.app/\n","date":"1 enero 0001","permalink":"/platform/tailwindcss/practico/","section":"Tailwindcsses","summary":"Para este ejercicio debes realizar la siguiente página: Tendrás varios días para terminar la página, así que avanza todo lo que puedas solo en el tiempo de estudio.","title":"Practico"}]