Todo lo que necesitas saber para crear y mantener un sitio web efectivo y atractivo. Desde cómo elegir la plataforma adecuada hasta cómo optimizar la experiencia del usuario y mejorar el SEO.
1mer Lugar Aprendiz logro un tiempo de 18 minutos 2do Lugar Aprendiz logro un tiempo de 20 minutos 3cer Lugar Aprendiz logro un tiempo de 23 minutos En el marco de las pruebas entre aprendices del Centro para la Industria de la Comunicación Gráfica
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.
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 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.
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 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 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
¡Hola a todos! <SenaSoft /2025> El documento «Lineamientos SENASOFT 2025» establece la estrategia y el reglamento general para la competición tecnológica organizada por el Servicio Nacional de Aprendizaje (SENA). Describe las fases del evento, incluyendo una ruta de habilitación y la competencia nacional, y detalla las categorías de competición en áreas como desarrollo de software, industrias creativas e infraestructura. Además, el texto define los roles y responsabilidades de todos los participantes, desde competidores y responsables de centros hasta evaluadores y equipo técnico, y expone los requisitos, lineamientos de evaluación, procesos de comunicación, y el procedimiento de solución de conflictos y sanciones aplicables. La estrategia SENASoft busca fortalecer las habilidades de los aprendices y conectar el sector educativo con la industria, a través de una competencia real y rigurosa. Registro Aprendices Participación Categorías Cenigraf Programas de Formación: Análisis y Desarrollo de Sistemas de Información ADSO Desarrollo Libre Competidores 1034661262 Sara Alejandra Cuellar Arévalo Mujeres Digitales Competidores 1074527057 Valerin Dayana Bonilla Vallejo Desarrollo Integral Desarrollo Integral 1028483095 SANTIAGO PALOMINO PEÑALOZA Inteligencia Artificial Competidores 1021313912 Lucas Garcia Niño 1025534015 Nicol Dayyana Cabrera Nieto Programas de Formación: Animación 3D, Animación Digital Animación 3D Competidores 1033099714 Danna Valeria Torres Izquierdo 1141514303 Daniel Corredor Rincon Programas de Formación: Desarrollo de Medios Gráficos Visuales, Integración de Contenidos Digitales, Producción de Multimedia Publicaciones Digitales Competidores 1093558605 Diana Carolina Bonilla Torres 1070927299 Juan Sebastian Moreno Bernal Medios Audiovisuales Competidores 1012460412 Andrés Camilo Castellanos Villamizar 1024496790 Jose Alfredo Benavides Gutiérrez Branding o Identidad Visual Competidores 1085170750 Beatriz Adriana López Ortiz 1015405423 María Paula Obando Toro Videos y contenidos Video 1 Video 2 https://www.youtube.com/watch?v=q4hyR1pI7c8https://www.youtube.com/watch?v=MzaB9mBFUqIhttps://www.youtube.com/watch?v=IMBDrSJKzTAhttps://www.youtube.com/watch?v=zb3yBW-qSoghttps://www.youtube.com/watch?v=yFhKnxuo-Jkhttps://www.youtube.com/watch?v=JTMw0VxmI74https://www.youtube.com/watch?v=q9u_-mNkvUo Mujeres Digitales Descripción En un mundo donde la tecnología avanza a pasos agigantados, el papel de la mujer en el desarrollo de software es crucial. la categoría de mujeres digitales te invita a diseñar y desarrollar una aplicación web utilizando spring boot y java para el backend, junto con html5, css3, bootstrap y javascript para el frontend. este es tu momento para demostrar tus habilidades y creatividad, utilizando plantillas y frameworks de uso libre, siempre asegurando la calidad y buen funcionamiento del producto final. participa y muestra tu capacidad para abordar problemas complejos e innovar en el campo tecnológico. las mujeres están cambiando el panorama del desarrollo de software con su creatividad y habilidades técnicas. en esta categoría, te invitamos a diseñar y desarrollar una aplicación web con spring boot y java. tu participación ayudará a fomentar la equidad de género y a potenciar la industria con tu talento. Únete a nosotros y demuestra que las mujeres son fuerzas imparables en el mundo tecnológico.
Formulario de Registro Carpeta de documentación Descarga descriptivo técnico Tecnologías Web Videos Worldskills 1 Worldskills 2 Worldskills 3 Worldskills 4 Worldskills Youtube worldskills Youtube 2 Explicación resumen habilidad Tecnologías Web Pruebas para Tecnologías Web Manzanas Prueba Modulo A Prueba Modulo B Prueba Modulo C Prueba Modulo D Frontend 2023 Backend 2023 Participantes Sara Alejandra Cuellar Arévalo Proyecto Paris 2024 Ver Lucas Garcia Niño Proyecto Login Ver Ricardo Stiven Urrego Cupitra Proyecto Paris 2024 Ver Repo Proyecto Laravel React Panel para administrador Usando react – laravel -php Ver Repo Proyecto Pagina de Peliculas Usando html-css-javascript Ver Repo P4 P5 P6
