Explicación Diseño de Personajes

Presentación Explicativa de diseño de Personajes DISEÑO DE PERSONAJES DESDE CERO | ADN, Moodboard, Silueta, Color y Psicología Visual Actividad a realizar ¿Quieres aprender a crear personajes memorables para animación, videojuegos, ilustración, branding o proyectos multimedia? En esta clase completa de Diseño de Personajes para aprendices del Tecnólogo en Producción de Multimedia del SENA, exploramos las bases profesionales utilizadas en la industria para construir personajes con identidad, propósito y alto impacto visual. Aprenderás cómo pasar de una simple idea a un personaje sólido mediante técnicas de concept art, psicología visual, anatomía, color, narrativa y construcción estratégica. 🚀 Descubre cómo diseñar personajes únicos y convertir esta habilidad en una oportunidad profesional dentro de la industria creativa. 🎯 Temas abordados: ✅ Diseño de personajes✅ Concept Art✅ Character Design✅ Moodboard Profesional✅ Psicología del Color✅ Psicología Geométrica✅ Anatomía para Personajes✅ Storytelling Visual✅ Diseño para Videojuegos✅ Diseño para Animación✅ Diseño para Multimedia✅ Creación de Mascotas Corporativas✅ Construcción de Portafolio✅ Industria Creativa 💬 Déjame en los comentarios: 👉 ¿Qué personaje estás creando actualmente?👉 ¿Cuál es el rasgo distintivo de tu personaje?👉 ¿Qué estilo prefieres: Cyberpunk, Fantasía o Cartoon? #DiseñoDePersonajes #CharacterDesign #ConceptArt #DiseñoMultimedia #SENA #ProducciónMultimedia #IlustraciónDigital #Animación #Videojuegos #DiseñoCreativo #ConceptArtist #Moodboard #ArteDigital #StorytellingVisual #CharacterArtist #DiseñoGráfico #Creatividad #DiseñoDeVideojuegos #DigitalArt #ConceptDesign Beneficios Aprender a diseñar personajes (o Character Design) va mucho más allá de simplemente saber dibujar; es una disciplina que combina psicología, narrativa visual y fundamentos técnicos. Basándonos en la clase y los conceptos compartidos por Estudio Font, aquí tienes organizadas todas las bondades y beneficios de aprender esta técnica: 1. El vehículo principal para la Narrativa y las Emociones   Contar historias sin palabras: El diseño de personajes es la herramienta clave para comunicarte con el espectador. A través de la expresión, la indumentaria o el lenguaje de formas, puedes contar un trasfondo o un sentimiento completo sin necesidad de textos.   Conexión emocional inmediata: Dominar esta técnica te permite evocar sensaciones específicas en el público de manera instantánea (por ejemplo, usando círculos para personajes cálidos e inocentes , cuadrados para transmitir solidez y confianza , o triángulos para generar dinamismo y tensión ).   Expresión a través del color: Aprendes a utilizar la psicología del color para potenciar y rematar la personalidad de tu diseño (como usar tonos vibrantes para capturar energía o tonos oscuros para el misticismo). 2. Amplias Oportunidades Laborales y Económicas   Alta versatilidad en la industria: Los personajes son requeridos en prácticamente todas partes, desde el desarrollo de videojuegos y producciones de animación hasta el diseño de juguetes.   Mercado laboral en expansión: Sectores como el de los videojuegos mueven miles de puestos de trabajo a nivel global y se mantienen en constante crecimiento año tras año.   Vivir de tu pasión: Te da las competencias necesarias para convertir el dibujo en tu trabajo formal, permitiéndote colaborar con empresas o realizar encargos profesionales bien remunerados. 3. Autonomía y la «Economía del Creador»   Desarrollo de proyectos propios: No dependes únicamente de que te contrate una gran empresa. El diseño de personajes te capacita para lanzar tus propios proyectos independientes, como crear un webcómic, publicar un libro de arte (Artbook) o monetizar tu contenido en plataformas independientes o redes sociales. 4. Crecimiento y Eficiencia Técnica como Artista   Superar el «bloqueo del lienzo en blanco»: Aprender diseño de personajes te enseña a trabajar con un propósito claro y un método estructurado. Al plantearte preguntas clave (misión del personaje, rasgos distintivos, cómo se mueve) antes de trazar la primera línea, dejas de improvisar a ciegas y ahorras tiempo.   Dominio de los fundamentos artísticos: Te obliga a dominar áreas esenciales del dibujo como el balance visual entre simplicidad y complejidad , el uso del espacio negativo , el control de las siluetas legibles y el dinamismo mediante las líneas de acción.   Aceleración del aprendizaje y erradicación de vicios: Contar con bases de diseño sólidas te ayuda a «saltarte pasos» innecesarios, avanzar mucho más rápido hacia un nivel profesional y evitar automatizar manías o errores negativos que suelen adquirirse cuando se dibuja por simple repetición sin dirección.

Spect Driven Development

Qué es Spec Driven Development Spec Driven Development propone, en esencia que la especificación preceda y guíe al código. No es un marco de trabajo ni una metodología prescriptiva como scrum. Es más bien un enfoque de trabajo que propone: Escribir primero una especificación clara de lo que se quiere construir: objetivos, reglas de negocio, criterios de aceptación, restricciones técnicas. Usar esa especificación como fuente tanto para humanos como para agentes de IA. Generar código a partir de la spec, no de prompts improvisados. Como lo resume GitHub en su documentación de Spec Kit: «En este nuevo mundo, mantener software significa evolucionar especificaciones. […] El código es el enfoque de última milla.»[3] Referente 1 En el contexto de Spec-Driven Development (SDD) —o Desarrollo Guiado por Especificaciones— y de acuerdo con el análisis de la fuente compartida, el rol del programador tradicional se transforma profundamente. Deja de ser un simple «escriba» de líneas de código (evitando caer en el descontrol del vibe coding) para convertirse en un Arquitecto de Especificaciones que dirige a los agentes de Inteligencia Artificial. A continuación, se detallan 4 funciones básicas que realiza un profesional de la programación bajo este enfoque de trabajo: 1. Redacción y Modelado de la Especificación (The Spec) La función principal y más crítica del trabajador ya no es picar código directamente, sino estructurar el pensamiento antes de actuar. El programador debe redactar un documento técnico sumamente claro, riguroso y versionado (que funciona como un super-prompt). ¿Qué hace exactamente?: Define con precisión los objetivos del software, las reglas de negocio, los criterios de aceptación, las restricciones técnicas y los flujos de manejo de errores, asegurando que el documento sea legible tanto para humanos como para los agentes de IA. 2. Diseño del Plan Técnico y Descomposición de Tareas Una vez definida la especificación a nivel de producto o característica (feature), el desarrollador debe trazar la estrategia técnica para que las herramientas de IA no tengan que improvisar ni «adivinar» la arquitectura. ¿Qué hace exactamente?: Utiliza herramientas del ecosistema SDD (como GitHub Spec Kit o Kiro) para ejecutar flujos estructurados que van desde los requisitos iniciales hasta un plan concreto. Descompone la funcionalidad general en un conjunto de tareas (tasks) técnicas viables, ordenadas y acotadas. 3. Orquestación y Supervisión de Agentes de IA El desarrollador actúa como el director de un equipo de «programadores junior virtuales». El código de última milla es generado de forma masiva y veloz por los Modelos de Lenguaje (LLMs), pero la ejecución depende de las instrucciones de la especificación. ¿Qué hace exactamente?: Alimenta a las herramientas de desarrollo con la especificación y supervisa cómo los agentes automatizados traducen esas directrices en archivos de código fuente, manteniendo el control absoluto de la lógica de negocio implantada. 4. Auditoría de Código, Pruebas y Validación (Review) Debido a que la IA opera bajo un modelo probabilístico (no determinista) y puede llegar a ignorar reglas por exceso de celo o cometer fallos sutiles, la intervención humana en el control de calidad es indispensable. ¿Qué hace exactamente?: El trabajador revisa los resultados, valida que los archivos generados cumplan fielmente con los criterios de aceptación de la especificación y complementa el flujo aplicando pruebas de calidad tradicionales (como Test Driven Development – TDD para el código unitario o Behavior Driven Development – BDD para verificar el comportamiento de extremo a extremo del sistema). En resumen: En la labor diaria de SDD, el profesional cambia el foco del «¿Cómo lo programo?» al «¿Qué quiero construir y por qué?», elevando su nivel de abstracción para garantizar la calidad, consistencia y mantenimiento de la base de código.

Curso Marketing Digital Casa Santa Barbara

Hola Estudiantes Mi correo: jlopezdi@sena.edu.co llenar formulario Feedback 1- Conceptos técnicos: Marketing Digital: Acciones y estrategias para Contenido y creación de Blogs videos, para atraer y educar en anuncios en plataformas sociales. SEO (Search Engine Optimization) Optimización en Motores de Busqueda: Posicionar palabras o busquedas, posicionar productos y servicios, aumenta la visibilidad organica de manera gratuita SEM (Search Engine Marketing) Pagar publicidad para estar en los primeros lugares de busqueda paga. Creación de Contenido. Redes Sociales: X, Facebook, Instagram, Youtube, Linkedin, para llegar a mas clientes CTR (Click Through Rate) Tasa de Clics, Es el porcentaje de usuarios que hacen clic en un anuncio, mide el porcentaje de usuarios ROI (Return of Investment) Es una metrica que se utiliza para saber si el dinero que se invirtio en la publicidad genero ganacias. CRM (Costumer Relationship Management) Sistema creado para ventas para obtrener mas y ganar mas la expansión de una empresa o cliente. KPI (Key Power Indicators) es una metrica para medir un objetivo especifico, que tan bien se esta lograndpo dentgro de una empresa proyectpo, empresa o actividad. TOKENS PROMPT: Es una instruccion detalla o conjunto de datos que usa un usuario para obtener informacion adecuada. Social Media Marketing Marketing Digital con IA Copyrighting Chatbots LLM (Large Language Model) Vision general creada por la ia para poder extender y entender alos humanos, entrenados con  conjuntos de datos masivos, modelo extenso de lenguaje. CTA (Call to Action) es un termino utilizado para que un usuario realice una accion especifica, el objetivo, frase para animar a las personas a hacer una acción como comprar, escribenos, siguenos. Chat GPT Claude Gemini DeepSeek Open AI: Empresa lider creadora de Chat GPT para ayudar a las personas, aprender y trabajar. 2- Prompt Estructura de Prompt:CONTEXTO + ROL + OBJETIVO + TONO + FORMATO 3- Logo – Slogan y Paleta de Colores 4- Foto Emprendimiento 5- Fanpage de Emprendimiento 6- Creación Video Comercial – Flow 7- Estructuras nuevas de prompting:– RTF (Rol + Tarea + Formato)– TAM (Tarea + Acción + Meta)– ADP (Antes + Despues + Puente)– CARE (Contexto + Acción + Resultado + Ejemplo)– REPE (Rol + Entrada + Pasos + Espectativa) 8- Briefing: (Instrumento de Recolección de Información) 9- Estructura REPE para la construcción de Excel de contenidos del emprendimiento: (el contexto es la informacion del brief) 10- Calendario de Fechas especiales 11- Prompt Creación Avatar 12- Analisis de palabras clave 13- Creación Video Comercial 2 – Flow

Proceso de Creación de Producto Multimedia

Proceso creación de Producto Multimedia Fase de Investigación Investigación Exploración visual, análisis de referencias, benchmarking y tendencias. Brief Documento donde se recopila la información del cliente, objetivos del proyecto, público objetivo y necesidades. Fase de Preproducción Concepto Gráfico Planteamiento creativo que define la identidad visual del proyecto. Idea Concepto creativo principal que guiará el desarrollo del producto multimedia. Afiche Representación visual preliminar del producto o mensaje comunicacional. Boceto / Sketch Dibujos rápidos que permiten visualizar la estructura inicial del proyecto. Fase de Producción Retícula / Wireframe Estructura base de navegación y organización de los elementos visuales. Fase de Posproducción Mockup / Prototipo Simulación visual del producto final antes de su desarrollo o publicación.

Implementación de soluciones de Inteligencia Artificial

Clase 1 Bienvenido a la clase 1 del Curso Soluciones de Inteligencia Artificial 📘 — el punto de partida perfecto para tu viaje en el mundo de la IA y su aplicación real en proyectos y negocios. En esta sesión inicial exploramos qué es la Inteligencia Artificial, cómo funciona y por qué está revolucionando industrias completas. 🔍 ActividadDeben escoger una estructura de prompt y construirla con un tema de libre elección, luego debe presentar el resultado he indicar con que modelo lo realizó y que reflexión le merece Clase 2 https://youtu.be/79I5llPhdFU Esta clase te llevará de la teoría a la acción, entendiendo que la IA no es solo generación de texto o imágenes, sino una metodología estructurada para crear, vender y escalar soluciones inteligentes. Exploramos conceptos clave como: Segmentación de clientes y Buyer Persona Propuesta de valor diferencial Canales de comunicación y análisis de sentimiento Consumer Journey Automatización de marketing con IA CRM, Email Marketing y Remarketing SEO y posicionamiento orgánico Herramientas como ChatGPT, Gemini y Grok aplicadas al marketing estratégico Actividad: Ejercicio de Reflexión de contraste de las 3 LLM (Large Language Model) para postear en este Blog;– ChatGPT, – Grok, – Gemini Clase 3 Aprenderás a identificar problemas que pueden resolverse con IA, comprenderás el ciclo de vida de un proyecto de Inteligencia Artificial, analizarás los componentes técnicos clave (datos, modelos, entrenamiento, validación y despliegue) y entenderás cómo convertir una idea en una solución funcional y escalable. https://youtu.be/6NTWU9VlGq0 Actividad: Keyword research de ideas de contenido y posicionamiento SEO (Search Engine Optimization) Palabras Clave para  Posicionamiento Organico de Optimizacion en Motores de busqueda. Clase 4 https://youtu.be/ZohAy4-bq5A Aprenderás cómo transformar una necesidad organizacional en una solución basada en IA, comprendiendo desde la recolección y preparación de datos hasta el entrenamiento, validación y despliegue de modelos. Esta clase es clave para quienes desean pasar de la teoría a la aplicación práctica en proyectos reales de Inteligencia Artificial. ActividadDeben postear un parrafo escrito de 500 caracteres de su opinion del ejercicio usando Perplexity y parafraseando con claude. Clase 5 Parte 1 y 2 Reflexionamos sobre: El papel indispensable del ser humano en el uso de la IA La importancia de los fundamentos antes que la herramienta Cómo las herramientas generan PPT, SVG, MP4, MP3 y otros formatos La evolución de PowerPoint frente a la integración con modelos como ChatGPT La necesidad de coworking y construcción colectiva del conocimiento La preparación hacia HTML, CSS y JavaScript para crear landing pages inteligentes El enfoque estratégico hacia CRM y páginas de aterrizaje https://youtu.be/NLvnl3vEoNg 💡 Esta clase no es solo técnica. Es una reflexión profunda sobre cómo pensar estratégicamente la Inteligencia Artificial y cómo convertirla en una aliada real en proyectos digitales. Si quieres dominar la IA desde los fundamentos y no solo desde la herramienta, esta clase es obligatoria. https://youtu.be/qqIzUiol2RE Aquí no solo hablamos de inteligencia artificial… hablamos de cómo implementarla correctamente. Durante la sesión se desarrollan conceptos clave sobre estructuración de soluciones, integración tecnológica, análisis de datos, toma de decisiones automatizada y visión estratégica para proyectos de IA. Esta clase está diseñada para quienes desean pasar del conocimiento conceptual a la ejecución profesional. Si quieres entender cómo se construyen soluciones inteligentes con enfoque real, impacto organizacional y visión de transformación digital, esta clase es para ti. 🔥 La inteligencia artificial no reemplaza a los profesionales… potencia a los que saben implementarla. Aprende, estructura y ejecuta con mentalidad estratégica. Descarga Presentación Complementaria Canal de Youtube Suscribete Actividad: Creación de Landing Page con Antigravity Clase 6 Se hace énfasis en: 🔹 Google Antigravity como metáfora de ruptura de paradigmas digitales.🔹 Nano Banana como ejemplo de interacción creativa en entornos impulsados por IA.🔹 La importancia de la mentalidad disruptiva en la transformación digital.🔹 Cómo la inteligencia artificial potencia la creatividad humana en lugar de reemplazarla. Descarga Presentación Complementaria https://youtu.be/htgd81BkOdk Esta clase no se queda en la teoría. Invita a pensar estratégicamente cómo integrar herramientas inteligentes en proyectos reales, fortaleciendo competencias digitales avanzadas y visión tecnológica. Clase 7 Descarga Presentación Complementaria https://youtu.be/xStQsyryKvs Actividad: practica con Antigravity para la creación de landing page, base de generación de imagenes con modelos nano banana, firefly Clase 8 Parte 1 y 2 https://youtu.be/f5xM54s2VNc Descubrirás: 🔹 Cómo estructurar prompts precisos y profesionales🔹 Ingeniería de instrucciones para generar infografías técnicas🔹 Uso estratégico del lenguaje descriptivo🔹 Componentes visuales: etiquetas, dimensiones, materiales, flujos funcionales🔹 Optimización visual para proyectos académicos y tecnológicos En esta sesión, el profe Jlopez (Juan Francisco López Díaz) profundiza en las técnicas estratégicas para construir Landing Pages efectivas, integrando Inteligencia Artificial para la generación del código y enseñando cómo llevar ese proyecto al mundo real mediante su despliegue en servidores. 🔹 Creación estratégica de Landing Pages educativas🔹 Uso de prompts para generar código HTML, CSS y JavaScript🔹 Diferencias entre hosting, dominio y repositorio🔹 Análisis de servidores pagos y gratuitos🔹 Evaluación de alternativas como Hostinger y otros proveedores🔹 Publicación gratuita mediante GitHub🔹 Creación de repositorio público🔹 Configuración de rama gh-pages🔹 Proceso de build & deployment🔹 Generación de URL pública para compartir https://youtu.be/T_D-5_gV_b8 Actividad: Presentar un Prompt, creado por usted Clase 9 Parte 1 y 2 https://youtu.be/LxCAAbqdDdk Un prompt común produce resultados comunes.Un prompt estructurado con intención estratégica produce innovación. Si quieres dominar la Inteligencia Artificial, debes dominar primero tu forma de pensar y estructurar instrucciones. Recuerda:La calidad de tus resultados depende de la calidad de tus preguntas. 🚀 La Inteligencia Artificial no reemplaza tu creatividad… la amplifica. Cuando aprendes a estructurar correctamente un prompt visual, dejas de “probar suerte” y empiezas a diseñar resultados. Recuerda:No gana quien tiene la herramienta más potente.Gana quien sabe cómo dar la instrucción correcta. 🚀 Tu creatividad tiene estructura. Tu estructura genera impacto. https://youtu.be/XvxEU7q2J7s Actividad: Generar las imagenes del proyecto Landing Page Clase 10 Parte 1 y 2 https://youtu.be/r96JOjlk6sQ 💡 Reflexión clave de la clase:Las marcas que realmente crecen no son las que solo venden productos, sino las que comunican valor, construyen comunidad y generan confianza a través del contenido. 🔥 Si estás construyendo tu proyecto digital, tu marca personal o tu emprendimiento, esta clase te dará una base

Curso de React

Curso React ¡Hola a todos! ¡Estoy emocionado de anunciar comenzamos entrenamientos a este curso Hola estudiante, si alguna vez has querido crear sitios web impresionantes pero no sabías cómo empezar, este entrenamiento es fundamental para tu proceso formativo. Duración estimada: 200-250 horas académicas (aproximadamente 6 meses) Modalidad: Presencial/Virtual híbrida Intensidad sugerida: 4-5 horas semanales (2 sesiones de 2-2.5 horas) Bienvenido al Taller, hablaremos de: Html5 CSS3 javaScript Bootstrap Git PHP React Angular MySql Temario Curso de React https://www.pacgrafica.com/blog/wp-content/uploads/2023/03/pa-floating-effects-filters-css-selector.mp4 📊 Información General del Curso Duración estimada: 10-12 semanasHoras totales: 120-150 horasModalidad: Presencial/VirtualNivel: Principiante a Intermedio-AvanzadoPrerrequisitos: JavaScript ES6+, HTML5, CSS3 🎯 Objetivos del CursoAl finalizar el curso, los estudiantes podrán: Crear aplicaciones web interactivas con ReactManejar el estado de aplicaciones complejasImplementar routing y navegaciónConsumir APIs y manejar datos asíncronosAplicar mejores prácticas de desarrolloDeployar aplicaciones React en producción 📚 MÓDULO 1: Fundamentos de React (Semana 1-2)Duración: 24 horas | Intensidad: 12 horas/semanaTema 1.1: Introducción a React (4 horas) ¿Qué es React y por qué usarlo?Comparación con Vanilla JavaScriptVirtual DOM y reconciliaciónEcosistema de ReactConfiguración del entorno de desarrollo Tema 1.2: Primeros pasos con Create React App (4 horas) Instalación y configuraciónEstructura de un proyecto ReactJSX: sintaxis y reglasPrimer componente funcionalRenderizado de elementos Tema 1.3: Componentes y Props (8 horas) Componentes funcionales vs de claseProps: paso de datos entre componentesProps.children y composiciónPropTypes para validaciónDestructuring de props Tema 1.4: Manejo de eventos (4 horas) Eventos sintéticos en ReactEvent handlersBinding y arrow functionsPaso de parámetros a event handlers Tema 1.5: Renderizado condicional y listas (4 horas) Operadores ternarios y &&Renderizado de arraysKey prop y su importanciaFiltrado y mapeo de datos 🔄 MÓDULO 2: Estado y Ciclo de Vida (Semana 3-4)Duración: 24 horas | Intensidad: 12 horas/semanaTema 2.1: Introducción al Estado (6 horas) ¿Qué es el estado?useState HookEstado vs PropsActualizaciones del estadoEstado como función Tema 2.2: Hooks Fundamentales (10 horas) useEffect: efectos secundariosCiclo de vida con useEffectCleanup functionsDependencias en useEffectuseContext para compartir estado Tema 2.3: Formularios y Controlled Components (8 horas) Inputs controlados vs no controladosManejo de formularios complejosValidación básicaLibrerías de formularios (Formik/React Hook Form) 🔄 MÓDULO 2: Estado y Ciclo de Vida (Semana 3-4)Duración: 24 horas | Intensidad: 12 horas/semanaTema 2.1: Introducción al Estado (6 horas) ¿Qué es el estado?useState HookEstado vs PropsActualizaciones del estadoEstado como función Tema 2.2: Hooks Fundamentales (10 horas) useEffect: efectos secundariosCiclo de vida con useEffectCleanup functionsDependencias en useEffectuseContext para compartir estado Tema 2.3: Formularios y Controlled Components (8 horas) Inputs controlados vs no controladosManejo de formularios complejosValidación básicaLibrerías de formularios (Formik/React Hook Form) 🏗️ MÓDULO 3: Arquitectura de Componentes (Semana 5-6)Duración: 24 horas | Intensidad: 12 horas/semanaTema 3.1: Composición de Componentes (8 horas) Patrones de composiciónHigher-Order Components (HOC)Render PropsChildren patterns avanzados Tema 3.2: Custom Hooks (8 horas) Creación de hooks personalizadosLógica reutilizableHooks para llamadas a APIsTesting de custom hooks Tema 3.3: Optimización de Rendimiento (8 horas) React.memouseMemo y useCallbackLazy loading con SuspenseCode splittingProfiling de aplicaciones 🌐 MÓDULO 4: Enrutamiento y Navegación (Semana 7)Duración: 12 horas | Intensidad: 12 horas/semanaTema 4.1: React Router (6 horas) Instalación y configuraciónRoute, Link, NavLinkParámetros de rutaQuery parameters Tema 4.2: Navegación Avanzada (6 horas) Nested routesProtected routesProgrammatic navigationHistory API 📡 MÓDULO 5: Manejo de Estado Global (Semana 8-9)Duración: 24 horas | Intensidad: 12 horas/semanaTema 5.1: Context API Avanzado (8 horas) Context patternsMultiple contextsContext optimizationContext vs state management libraries Tema 5.2: Introducción a Redux (8 horas) Principios de ReduxActions, Reducers, StoreReact-Redux hooksRedux DevTools Tema 5.3: Redux Toolkit (8 horas) Configuración moderna con RTKCreateSlice y CreateAsyncThunkRTK Query para API callsMejores prácticas 🔌 MÓDULO 6: APIs y Datos Asíncronos (Semana 10)Duración: 12 horas | Intensidad: 12 horas/semanaTema 6.1: Fetch API y Axios (6 horas) Llamadas HTTP en ReactManejo de loading statesError handlingAbort controllers Tema 6.2: Librerías de Data Fetching (6 horas) React Query/TanStack QuerySWRCaching y sincronizaciónOptimistic updates 🧪 MÓDULO 7: Testing (Semana 11)Duración: 12 horas | Intensidad: 12 horas/semanaTema 7.1: Fundamentos de Testing (6 horas) Jest y React Testing LibraryTesting de componentesTesting de hooksMocking Tema 7.2: Testing Avanzado (6 horas) Integration testsE2E testing con CypressTesting de ReduxContinuous Integration 🚀 MÓDULO 8: Proyecto Final y Deploy (Semana 12)Duración: 12 horas | Intensidad: 12 horas/semanaTema 8.1: Desarrollo del Proyecto (8 horas) Planificación de aplicación completaImplementación de funcionalidadesCode review y refactoringOptimización final Tema 8.2: Deployment y Producción (4 horas) Build de producciónDeployment en Netlify/VercelEnvironment variablesMonitoring y analytics 📋 Metodología y EvaluaciónDistribución de Tiempo por Clase: Teoría: 40% (explicación conceptual)Práctica guiada: 35% (coding junto al instructor)Práctica independiente: 25% (ejercicios individuales) Evaluaciones: Quizzes semanales: 20%Proyectos modulares: 40%Proyecto final: 30%Participación: 10% Proyectos Prácticos: To-Do App (Módulo 2)E-commerce básico (Módulo 4)Dashboard con datos externos (Módulo 6)Aplicación completa (Módulo 8) 🛠️ Herramientas y TecnologíasEsenciales: Node.js y npmCreate React App / ViteVS Code con extensiones ReactReact Developer ToolsGit y GitHub Librerías principales: React RouterRedux ToolkitAxios/React QueryMaterial-UI o Tailwind CSSReact Testing Library 📖 Recursos Adicionales Documentación oficial de ReactReact Beta DocsFreeCodeCamp React CourseReact patterns y best practicesEjercicios en CodeSandbox Enlaces de interes W3Schools Developer Mozilla Lenguaje Html Lenguaje CSS Lenguaje javaScript Bootstrap Articulos de Explicaciones Box Model Git Recursos especializados Generador de CSS GRID Videotutoriales explicativos https://youtu.be/pGQnGrSUEgk?si=sr0nnDucid_UZlk-https://youtu.be/4euM_DhaHJY?si=n-NvgH4r3_pyTZG1https://youtu.be/nH5Y178O2U0?si=8ocqWC4I-K0tpu3Chttps://youtu.be/X6HH-KjOJck?si=fHQItKGruEaqxRXshttps://youtu.be/ShMS_ViFw1w?si=ads_p0DOB8-_FmHWhttps://youtu.be/Z3JM5YMaDhw?si=z19Hyw8kUX_MOcR-https://youtu.be/xSag6oHvgCE?si=UquWP6G1lNXhIKH-https://youtu.be/SaGxm1oDwvw?si=FLKhfIRP5lDjoF-Ehttps://youtu.be/Q1sur8Qji5I?si=NZvPkimirL5P27dGhttps://youtu.be/0FeSGNnYoOM?si=nieONtrP2fzYCfvF Herramientas recomendadas Drag and drop con  javascript: https://drag-and-drop.formkit.com SQLFlow herramienta que visualiza bases de datos: https://sqlflow.gudusoft.com/#/ Creador de personas que no existen: https://thispersondoesnotexist.com/ Pagina de Iconos: https://fontawesome.com/ Creador de Gradientes: https://cssgradient.io/ Creador de imagenes con IA: https://firefly.adobe.com WEB CONTENT ACCESIBILITY Y LICENCIAS https://www.w3.org/WAI/standards-guidelines/wcag/es https://developer.mozilla.org/es/docs/Web/Accessibility/Understanding_WCAG   La practica hace al maestro

Curso de JavaScript

Curso JavaScript ¡Hola a todos! ¡Estoy emocionado de anunciar comenzamos entrenamientos a este curso Hola estudiante, si alguna vez has querido crear sitios web impresionantes pero no sabías cómo empezar, este entrenamiento es fundamental para tu proceso formativo. Duración estimada: 200-250 horas académicas (aproximadamente 6 meses) Modalidad: Presencial/Virtual híbrida Intensidad sugerida: 4-5 horas semanales (2 sesiones de 2-2.5 horas) Bienvenido al Taller, hablaremos de: Html5 CSS3 javaScript Bootstrap Git PHP React Angular MySql Temario Curso de JavaScript https://www.pacgrafica.com/blog/wp-content/uploads/2023/03/pa-floating-effects-filters-css-selector.mp4 MÓDULO 1: FUNDAMENTOS DE PROGRAMACIÓN (40 horas) Semanas 1-2: Introducción y Conceptos Básicos (16 horas) Historia y evolución de JavaScript Configuración del entorno de desarrollo Herramientas: navegador, VS Code, consola Sintaxis básica y estructura del código Variables y constantes (var, let, const) Tipos de datos primitivos Comentarios y buenas prácticas de documentación   Semanas 3-4: Operadores y Expresiones (12 horas) Operadores aritméticos, de comparación y lógicos Precedencia de operadores Conversión de tipos (type coercion) Template literals y manipulación de cadenas básica Semanas 5-6: Control de Flujo (12 horas) Estructuras condicionales (if, else, switch) Operador ternario Introducción a la lógica booleana Debugging básico Proyecto Práctico 1: Calculadora básica MÓDULO 2: ESTRUCTURAS DE DATOS Y FUNCIONES (50 horas) Semanas 7-8: Arrays y Métodos Básicos (16 horas) Creación y manipulación de arrays Métodos básicos: push, pop, shift, unshift Acceso a elementos e índices Iteración básica con for loops   Semanas 9-10: Bucles y Iteración (12 horas) Bucles for, while, do-while for…in y for…of Break y continue Bucles anidados Bootstrap4.1 Librería4.2 Componentes4.3 Incorporación: – CDN – Librería local 4.4 Incorporación de componentes, helpers, layout4.5 Identación, herencias y comentarios4.6 Display Grid4.7 Flexboxgrid4.8 Grid systems4.9 Breakpoints JavaScript3.1 Introducción a JavaScript3.2 Variables y tipos de datos3.3 Operadores y expresiones3.4 Estructuras de control: – Condiciones (if, else if, else) – Bucles (for, while, do-while) – Switch3.5 Funciones y ámbito de variables3.6 Objetos y propiedades3.7 Arrays y bucles de iteración3.8 Eventos y manipulación del DOM3.9 jQuery (opcional) https://youtu.be/ZeVsrmw5t-Y Profe Jlopez explica el curso, no se olviden darle like y suscribirsen al canal Enlaces de interes W3Schools Developer Mozilla Lenguaje Html Lenguaje CSS Lenguaje javaScript Bootstrap Articulos de Explicaciones Box Model Git Recursos especializados Generador de CSS GRID Videotutoriales explicativos https://youtu.be/pGQnGrSUEgk?si=sr0nnDucid_UZlk-https://youtu.be/4euM_DhaHJY?si=n-NvgH4r3_pyTZG1https://youtu.be/nH5Y178O2U0?si=8ocqWC4I-K0tpu3Chttps://youtu.be/X6HH-KjOJck?si=fHQItKGruEaqxRXshttps://youtu.be/ShMS_ViFw1w?si=ads_p0DOB8-_FmHWhttps://youtu.be/Z3JM5YMaDhw?si=z19Hyw8kUX_MOcR-https://youtu.be/xSag6oHvgCE?si=UquWP6G1lNXhIKH-https://youtu.be/SaGxm1oDwvw?si=FLKhfIRP5lDjoF-Ehttps://youtu.be/Q1sur8Qji5I?si=NZvPkimirL5P27dGhttps://youtu.be/0FeSGNnYoOM?si=nieONtrP2fzYCfvF Herramientas recomendadas Drag and drop con  javascript: https://drag-and-drop.formkit.com SQLFlow herramienta que visualiza bases de datos: https://sqlflow.gudusoft.com/#/ Creador de personas que no existen: https://thispersondoesnotexist.com/ Pagina de Iconos: https://fontawesome.com/ Creador de Gradientes: https://cssgradient.io/ Creador de imagenes con IA: https://firefly.adobe.com WEB CONTENT ACCESIBILITY Y LICENCIAS https://www.w3.org/WAI/standards-guidelines/wcag/es https://developer.mozilla.org/es/docs/Web/Accessibility/Understanding_WCAG   La practica hace al maestro