Diseño fullstack archivos

Curso de React

Deja un comentario / Diseño fullstack, Diseño web / Por jlopez

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

Deja un comentario / Diseño fullstack, Diseño web / Por jlopez

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

Curso Adobe ANIMATE – Copy

9 comentarios / Animación, Diseño fullstack, Diseño web / Por jlopez

Curso Adobe Animate ¡Hola a todos! ¡Estoy emocionado de anunciar comenzamos entrenamientos a este curso Hola estudiante, si alguna vez has querido crear Historias y personajes animados pero no sabías cómo empezar, este entrenamiento es fundamental para Lograrlo Este blog inicialmente tiene como fin transferir conocimientos de temas acerca de la herramienta de Adobe Animate Bienvenido al Curso, hablaremos de: Capas Fotogramás Clave javaScript Bootstrap Git PHP React Angular MySql Temario Curso Adobe Animate https://www.pacgrafica.com/blog/wp-content/uploads/2023/03/pa-floating-effects-filters-css-selector.mp4 Introducción a Adobe Animate: Introducción al software y su interfaz. Herramientas básicas de dibujo y selección. Capas y organización de elementos. Importar y exportar archivos. Creación de la primera animación básica. Animación Básica: Animación de movimiento con fotogramas clave. Animación de formas básicas. Uso de guías y máscaras. Animación con interpolación de movimiento. Práctica: Creación de una animación simple. Trabajo con Símbolos Introducción a los símbolos y biblioteca. Símbolos gráficos vs. de botón vs. de película. Animación con símbolos. Creación y edición de símbolos. Práctica: Creación de una animación utilizando símbolos. Interactividad y Sonido Introducción a la interactividad. Uso de botones y acciones. Importar y sincronizar audio. Creación de botones interactivos. Práctica: Creación de una animación interactiva con sonido. Animación Avanzada Animación de personajes: Principios básicos. Rigging básico con huesos. Animación de caminata y corrida. Animación facial y expresiones. Práctica: Animación de un personaje simple. Efectos y Exportación Uso de filtros y efectos. Animación de partículas. Exportación de proyectos para web y vídeo. Preparación de archivos para diferentes dispositivos. Práctica: Creación de una animación con efectos especiales. Proyecto de Animación Desarrollo del proyecto de animación. Retroalimentación y ajustes. Finalización del proyecto. Presentación de proyectos y revisión final. Profundización y Práctica Exploración de técnicas avanzadas según intereses individuales (ej. animación de texto, efectos de cámara, animación de juego). Prácticas guiadas y tutoriales adicionales. Revisión general y cierre del curso. Profe Jlopez explica el curso, no olvides darle like y suscribirse al canal Enlaces de interes W3Schools Developer Mozilla Lenguaje Html Lenguaje javaScript Bootstrap Articulos de Explicaciones Box Model Git Videotutoriales explicativos https://youtu.be/7EaCBFDFyrc?si=_uU0_Jrapx7JkYwZhttps://youtu.be/baBSsOxoEgY?si=gS9qtq34fAWTvWpS Herramientas recomendadas Drag and drop con javascript: https://drag-and-drop.formkit.com SQLFlow herramienta que visualiza bases de datos: https://sqlflow.gudusoft.com/#/ La practica hace al maestro

Curso Figma

5 comentarios / Animación, Creación de contenidos, Desarrollo web, Diseño 2D y 3D, Diseño fullstack, Diseño web, Inteligencia Artificial, Redes sociales / Por jlopez

Curso de Figma ¡Hola a todos! ¡Estoy emocionado de anunciar comenzamos entrenamientos a este curso Hola estudiante, si alguna vez has querido crear Historias y personajes animados pero no sabías cómo empezar, este entrenamiento es fundamental para Lograrlo Este blog inicialmente tiene como fin transferir conocimientos de temas acerca de la herramienta de Figma Bienvenido al Curso, hablaremos de: Capas Fotogramás Clave javaScript Bootstrap Git PHP React Angular MySql Temario Curso Figma Introducción a Figma ¿Qué es Figma?Ventajas de Figma sobre otras herramientas de diseñoConfiguración de la cuenta y del espacio de trabajo Interfaz de usuario de Figma Barra de herramientasPanel de capasPanel de propiedadesAtajos de teclado esenciales Conceptos básicos de diseño en Figma Crear y gestionar marcos (frames)Formas básicas y herramientas de dibujoManipulación de objetos (mover, escalar, rotar)Alineación y distribución de elementos Trabajando con capas y grupos Organización de capasCreación y gestión de gruposUso de máscarasBloqueo y ocultación de capas Estilos y colores Creación y aplicación de estilos de colorGestión de la biblioteca de estilosCreación de paletas de coloresUso de degradados y opacidad Tipografía en Figma Añadir y editar textoEstilos de texto y párrafoImportación y gestión de fuentesAjustes avanzados de tipografía Componentes y sistemas de diseño Creación de componentesInstancias y propiedadesVariantes de componentesOrganización de componentes en la biblioteca Grids y constraints Configuración de grids de diseñoUso de constraints para diseño responsivoAuto layout para diseños flexibles Prototipado en Figma Creación de conexiones entre framesConfiguración de transiciones y animacionesInteracciones avanzadas (hover, arrastrar, etc.)Prototipado para diferentes dispositivos Colaboración en Figma Compartir proyectos y archivosComentarios y feedbackHistorial de versiones y control de cambiosTrabajo en equipo en tiempo real Plugins y integraciones Exploración de la comunidad de plugins Instalación y uso de plugins populares Integración con otras herramientas (Slack, Jira, etc.) Exportación y entrega Exportación de assets para desarrollo Generación de especificaciones para desarrolladores Creación de presentaciones y documentación de diseño Técnicas avanzadas de diseño Diseño de sistemas de iconos Creación de ilustraciones en Figma Diseño de interfaces complejas (dashboards, apps) Optimización del flujo de trabajo Mejores prácticas para la organización de archivos Creación de plantillas y bibliotecas de equipo Automatización de tareas repetitivas Accesibilidad y diseño inclusivo Principios de diseño accesible Herramientas de Figma para evaluar la accesibilidad Implementación de patrones de diseño inclusivo Diseño para diferentes plataformas Diseño para web Diseño para aplicaciones móviles (iOS y Android) Diseño para aplicaciones de escritorio Animación avanzada en Figma Uso de Smart Animate Creación de micro-interacciones Prototipado de animaciones complejas Gestión de proyectos de diseño en Figma Planificación y estructuración de proyectos grandes Seguimiento del progreso y colaboración a gran escala Presentación de proyectos a clientes o stakeholders Tendencias y técnicas emergentes Diseño de interfaces de voz (VUI) Realidad aumentada (AR) y realidad virtual (VR) en Figma Diseño para wearables y IoT Proyecto final Aplicación de todos los conocimientos adquiridos Creación de un proyecto completo desde el concepto hasta el prototipo final Presentación y defensa del proyecto Profe Jlopez explica el curso, no olvides darle like y suscribirse al canal Enlaces de interes Figma figma community Blog oficial figma Lenguaje javaScript Bootstrap Articulos de Explicaciones Box Model Git Videotutoriales explicativos https://youtu.be/7EaCBFDFyrc?si=_uU0_Jrapx7JkYwZhttps://youtu.be/baBSsOxoEgY?si=gS9qtq34fAWTvWpS Herramientas recomendadas Drag and drop con javascript: https://drag-and-drop.formkit.com SQLFlow herramienta que visualiza bases de datos: https://sqlflow.gudusoft.com/#/ La practica hace al maestro

Flexbox Grid – Produccion multimedia tercer trimestre

12 comentarios / Desarrollo web, Diseño fullstack, Diseño web / Por jlopez

Estamos trabajando Flexbox Grid ¡Hola a todos! POR ACA ME DEJAN SUS ENLACES DE GH-PAGES Este equipo inicialmente tiene como fin transferir conocimientos de backend y frontend para los entrenamientos a senasoft 2023 Bienvenido al Taller, hablaremos de: Html5 CSS3 javaScript Bootstrap Git PHP React Angular MySql Temario Curso de Diseño Frontend HTML, CSS, JavaScript y Git https://www.pacgrafica.com/blog/wp-content/uploads/2023/03/pa-floating-effects-filters-css-selector.mp4 HTML51.1 Etiquetas Huérfanas / Compuestas1.2 Estructura semántica1.3 Etiquetas semánticas1.4 Atributos comunes y generales 1.5 Estructura del documento1.6 Identación y herencias1.7 Box model CSS2.1 Estructura sintaxis2.2 Tipos de incorporación CSS: – Interno – Externo – En línea2.3 Identación, herencias y comentarios2.4 Niveles de especificidad2.5 Flexbox grid, Breakpoints2.6 Mediaqueries2.7 Pseudo Elementos2.8 Pseudo Clases Git5.1 Introducción a Git y control de versiones5.2 Github5.3 Repositorios5.4 Control de cambios y push5.5 Terminología y comandos básicos de Git5.6 Metodología 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/EyLDGCestpQ Profe Jlopez explica el curso, no se olviden darle like y suscribirsen al canal Enlaces de interes W3Schools Developer Mozilla Lenguaje Html Lenguaje javaScript Bootstrap Articulos de Explicaciones Box Model Git https://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 La practica hace al maestro

Flexbox Grid

2 comentarios / Diseño fullstack, Diseño web / Por jlopez

Que es Flexbox Grid ¡Hola a todos! Introducción a la tecnología de maquetación para css y html Hola estudiante, si alguna vez se le ha dificultado centrar un objeto en html y css esta explicacion es para ti Este equipo inicialmente tiene como fin transferir conocimientos de backend y frontend para los entrenamientos a senasoft 2023 Bienvenido al Taller, hablaremos de: Html5 CSS3 javaScript Bootstrap Git PHP React Angular MySql Temario Curso de Diseño Frontend HTML, CSS, JavaScript y Git https://www.pacgrafica.com/blog/wp-content/uploads/2023/03/pa-floating-effects-filters-css-selector.mp4 HTML51.1 Etiquetas Huérfanas / Compuestas1.2 Estructura semántica1.3 Etiquetas semánticas1.4 Atributos comunes y generales 1.5 Estructura del documento1.6 Identación y herencias1.7 Box model CSS2.1 Estructura sintaxis2.2 Tipos de incorporación CSS: – Interno – Externo – En línea2.3 Identación, herencias y comentarios2.4 Niveles de especificidad2.5 Flexbox grid, Breakpoints2.6 Mediaqueries2.7 Pseudo Elementos2.8 Pseudo Clases Git5.1 Introducción a Git y control de versiones5.2 Github5.3 Repositorios5.4 Control de cambios y push5.5 Terminología y comandos básicos de Git5.6 Metodología 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/EyLDGCestpQ Profe Jlopez explica el curso, no se olviden darle like y suscribirsen al canal Enlaces de interes W3Schools Developer Mozilla Lenguaje Html Lenguaje javaScript Bootstrap Articulos de Explicaciones Box Model Git Videotutoriales explicativos 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 La practica hace al maestro

Curso Diseño Frontend: HTML, CSS, JavaScript y Git

98 comentarios / Diseño fullstack, Diseño web / Por jlopez

Curso Diseño Frontend HTML CSS 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. Este equipo inicialmente tiene como fin transferir conocimientos de backend y frontend para los entrenamientos a senasoft 2023 Bienvenido al Taller, hablaremos de: Html5 CSS3 javaScript Bootstrap Git PHP React Angular MySql Temario Curso de Diseño Frontend HTML, CSS, JavaScript y Git https://www.pacgrafica.com/blog/wp-content/uploads/2023/03/pa-floating-effects-filters-css-selector.mp4 HTML51.1 Etiquetas Huérfanas / Compuestas1.2 Estructura semántica1.3 Etiquetas semánticas1.4 Atributos comunes y generales 1.5 Estructura del documento1.6 Identación y herencias1.7 Box model CSS2.1 Estructura sintaxis2.2 Tipos de incorporación CSS: – Interno – Externo – En línea2.3 Identación, herencias y comentarios2.4 Niveles de especificidad2.5 Flexbox grid, Breakpoints2.6 Mediaqueries2.7 Pseudo Elementos2.8 Pseudo Clases2.9 Z-index Git5.1 Introducción a Git y control de versiones5.2 Github5.3 Repositorios5.4 Control de cambios y push5.5 Terminología y comandos básicos de Git5.6 Metodología 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

Transferencias desarrollo web

2 comentarios / Desarrollo web, Diseño fullstack, Diseño web / Por jlopez

Transferencias de conocimientos ¡Hola a todos! ¡Estamos emocionados de anunciar comenzamos entrenamientos a senasoft Si alguna vez has querido crear aplicaciones web impresionantes pero no sabías cómo empezar, este entrenamiento es para ti. Este equipo inicialmente tiene como fin transferir conocimientos de backend y frontend para los entrenamientos a senasoft 2023 Quieres pertenecer a nuestro grupo, hablaremos de: Frontend Backend Desarrollo Web Lenguajes de programación TEMARIO TRANSFERENCIAS Y ENTRENAMIENTO SENASOFT https://www.pacgrafica.com/blog/wp-content/uploads/2023/03/pa-floating-effects-filters-css-selector.mp4 Transferencia 1 https://youtu.be/uRaLwivY0KU Handru Camargo explica sistema de busqueda javascript puro Transferencia 2 https://youtu.be/Hs6D3k9WPbU Profe Jlopez explica funcionamiento de movimiento de personaje con el teclado en javascript No esperes más, comparte, comenzamos a entrenar!

AR Aframe Libreria de Realidad Aumentada

9 comentarios / Desarrollo web, Diseño 2D y 3D, Diseño fullstack, Diseño web, Realidad Aumentada / Por jlopez

Aprende Realidad Aumentada ¡Hola a todos! ¡Estoy emocionado de anunciar que estaré dictando un curso en profundidad sobre esta Realidad Aumentada! Si alguna vez has querido crear un sitio web impresionante pero no sabías cómo empezar, este curso es para ti. A-Frame es un framework web diseñado para crear experiencias en realidad virtual (VR). Se basa en HTML, lo que facilita su uso para principiantes. Sin embargo, A-Frame va más allá de ser simplemente un motor de gráficos en 3D o un lenguaje de marcado; su núcleo es un potente sistema de componentes basado en entidades, lo que le otorga una estructura declarativa, extensible y modular, construido sobre three.js. Inicialmente desarrollado por Mozilla y ahora mantenido por sus cocreadores en Supermedium, A-Frame fue creado con el objetivo de proporcionar una herramienta sencilla pero poderosa para desarrollar contenido de VR. Este proyecto de código abierto ha crecido hasta convertirse en una de las comunidades más grandes en el ámbito de la realidad virtual. A-Frame es compatible con la mayoría de los cascos de VR, como Vive, Rift, Windows Mixed Reality, Cardboard, Oculus Go, y también puede utilizarse para experiencias de realidad aumentada. Aunque ofrece soporte para una amplia variedad de dispositivos, su objetivo principal es crear experiencias de VR interactivas e inmersivas que superen el contenido 360°, aprovechando al máximo el seguimiento posicional y los controladores. Quieres pertenecer a nuestro grupo, hablaremos de: Realidad Virtual Realidad Aumentada Realidad Extendida Metaverso TEMARIO CURSO AR-AFRAME https://www.pacgrafica.com/blog/wp-content/uploads/2023/03/pa-floating-effects-filters-css-selector.mp4 No esperes más, comparte esta información con tus amigos, familiares y colegas interesados en aprender WordPress. ¡Juntos podemos ayudar a más personas a aprender esta valiosa herramienta y construir sitios web impresionantes!