Diseño web

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.

Flexbox Grid

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

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

Explicación teorica de Git

28 comentarios / Diseño web / Por

Historia de Git y Github ¿Qué es Git y por qué es importante? Github Instalación de Git y primeros pasos https://youtu.be/6Isbqq60efU Git representa el historial de una manera fundamentalmente diferente de los sistemas de controles de versión centralizados (CVCS), como Control de versiones de Team Foundation, Perforce o Subversion. Los sistemas centralizados almacenan un historial independiente para cada archivo de un repositorio. Git almacena el historial como un gráfico de instantáneas de todo el repositorio. Estas instantáneas, llamadas confirmaciones en Git, pueden tener varios elementos primarios, creando un historial similar a un gráfico en lugar de una línea recta. Esta diferencia en el historial es increíblemente importante y es la razón principal por la que los usuarios familiarizados con CVCS encuentran a Git confuso. Instalación de GIT: Se explicó cómo descargar e instalar Git en windows. Despierta tu pasión con dedicación y, tu visión con determinación y, tu misión con innovación acción. Videos explicativos Explicación Git y Github En este video muestro a los aprendices como subir una estructura sencilla de archivos a través del sistema de control de versiones de Git Explicación Git Parte 2 En esta oportunidad presento a los aprendices como subir a github y crear enlace de sitio web para compartir a través de mensajes y redes Explicación Github-pages Parte 2 En esta oportunidad presento explicación parasubir proyecto a github Git y Github actualizaciones a repositorios En este video explico una de las maneras de descargar el contenido de repositorio de github realizar un cambio y posteriormente subir los cambios del proyecto Detalles del evento Despierta tu pasión con dedicación y, tu visión con determinación y, tu misión con innovación acción.

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

101 comentarios / Diseño fullstack, Diseño web / Por

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

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

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!

Cómo crear una experiencia de usuario inolvidable con el diseño web

8 comentarios / Diseño web / Por

El diseño web es mucho más que una simple estética visual. Se trata de crear una experiencia de usuario que sea atractiva, intuitiva y que logre cumplir los objetivos de tu sitio web. En este blog, te enseñaremos cómo diseñar una web que enamore a tus usuarios y logre que se queden por mucho tiempo. ¿Quieres crear una página web impresionante que enamore a tus usuarios desde el primer momento? ¡Pues has llegado al lugar adecuado! En este blog, te enseñaremos cómo diseñar una web que sea atractiva, intuitiva y que cumpla los estándares de Bootstrap. Primero, ¿qué es Bootstrap? Es un marco de trabajo de diseño web que te permite crear páginas web responsive y bien estructuradas con un conjunto de herramientas y componentes predefinidos. Con Bootstrap, no necesitas empezar desde cero, ya que tienes un kit de herramientas completo para empezar a diseñar tu sitio web. Ahora, ¿cómo puedes utilizar Bootstrap para crear una experiencia de usuario inolvidable? Te presentamos los siguientes consejos: Comienza con una buena estructura: Lo primero que debes hacer es crear una estructura clara y coherente para tu sitio web. Utiliza la jerarquía visual para ordenar la información y guiar al usuario a través de tu sitio web. Bootstrap te ofrece una variedad de componentes predefinidos que puedes utilizar para estructurar tu página. Elige una paleta de colores adecuada: Los colores son fundamentales para crear una experiencia de usuario atractiva. Utiliza una paleta de colores coherente que refleje la identidad visual de tu marca. Bootstrap tiene una selección de colores predefinidos que puedes utilizar o personalizar. Crea un diseño responsive: La mayoría de los usuarios navegan por internet desde sus dispositivos móviles, así que es fundamental que tu sitio web sea responsive. Bootstrap te ofrece un sistema de rejilla que te permitirá adaptar tu sitio web a diferentes tamaños de pantalla. Utiliza imágenes y vídeos de alta calidad: Las imágenes y los vídeos son fundamentales para atraer la atención del usuario y transmitir tu mensaje. Utiliza imágenes y vídeos de alta calidad y optimizados para web. Bootstrap te ofrece una selección de componentes predefinidos para integrar imágenes y vídeos en tu sitio web. Crea llamados a la acción claros: Los llamados a la acción son fundamentales para guiar al usuario a través de tu sitio web. Utiliza botones claros y bien posicionados para que el usuario sepa qué acción debe realizar. Bootstrap te ofrece una selección de componentes predefinidos para crear botones y otros elementos de interacción. Con estos consejos, podrás crear una página web que sea atractiva, intuitiva y que cumpla los estándares de Bootstrap. ¡Manos a la obra y a crear una experiencia de usuario inolvidable!

Curso WordPress

2 comentarios / Curso Wordpress, Diseño web, Sesión 1, Sesión 2, Sesión 3, Sesión 4, Sesión 5, Sesión 6 / Por

Aprende WordPress ¡Hola a todos! ¡Estoy emocionado de anunciar que estaré dictando un curso en profundidad sobre esta valiosa herramienta! Si alguna vez has querido crear un sitio web impresionante pero no sabías cómo empezar, este curso es para ti. WordPress es una de las plataformas de creación de sitios web más populares y poderosas disponibles en la actualidad. Con este curso, podrás aprender las habilidades esenciales que necesitas para diseñar y construir tu propio sitio web atractivo y funcional. Además, tendrás la oportunidad de explorar todas las herramientas y características avanzadas que hacen de WordPress una de las mejores opciones para la creación de sitios web. Ya sea que estés buscando crear un sitio web para tu negocio, blog personal, o simplemente por diversión, este curso te proporcionará el conocimiento y la confianza para hacerlo realidad. ¡No pierdas la oportunidad de aprender una habilidad valiosa que te servirá por el resto de tu vida! ¡Inscríbete en el curso de WordPress hoy mismo y descubre todo lo que puedes lograr! Quieres pertenecer a nuestro grupo, hablaremos de: WordPress Temas y Plugins Diseño Web Creación de Contenido TEMARIO CURSO WORDPRESS https://www.pacgrafica.com/blog/wp-content/uploads/2023/03/pa-floating-effects-filters-css-selector.mp4 Sesión 1: Introducción a WordPress (4 horas) ¿Qué es WordPress y por qué es importante? Hosting y dominios para WordPress Instalación de WordPress y primeros pasos Sesión 2: Configuración y personalización de WordPress (4 horas) Configuración general de WordPress Elección y personalización de temas Plugins útiles para WordPress Sesión 3: Diseño de páginas y publicación de contenido (4 horas) Diseño y estructura de páginas en WordPress Publicación de contenido: entradas y páginas Trabajo con multimedia: imágenes, videos y audio Sesión 4: Optimización de la velocidad y rendimiento de WordPress (4 horas) Cómo optimizar la velocidad de carga de WordPress Uso de herramientas para mejorar la velocidad y rendimiento Monitoreo del rendimiento de WordPress Sesión 5: SEO en WordPress (4 horas) Introducción al SEO para WordPress Uso de plugins de SEO para mejorar el posicionamiento en buscadores Optimización de contenidos para SEO Sesión 6: WooCommerce y tiendas en línea (4 horas) Introducción a WooCommerce Instalación de WooCommerce en WordPress Configuración de tiendas en línea en WordPress Sesión 7: Seguridad en WordPress (4 horas) Amenazas de seguridad en WordPress Cómo proteger WordPress de ataques Uso de plugins de seguridad para WordPress Sesión 8: Gestión de usuarios y permisos en WordPress (4 horas) Administración de usuarios en WordPress Asignación de permisos a usuarios en WordPress Uso de roles de usuario en WordPress Sesión 9: Integración con redes sociales y marketing digital (4 horas) Integración de WordPress con redes sociales Uso de plugins de marketing digital para WordPress Monitoreo y análisis de métricas de marketing digital en WordPress Sesión 10: Mantenimiento y actualización de WordPress (4 horas) Mantenimiento regular de WordPress Actualización de WordPress, temas y plugins Resolución de problemas comunes en WordPress 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!

Consejos para crear una web

7 comentarios / Diseño web / Por

¿Quieres crear un sitio web impresionante sin tener que invertir mucho dinero? ¡No te preocupes! Existen muchas herramientas y recursos gratuitos que puedes utilizar para crear un sitio web efectivo y atractivo. En este artículo, te presentamos las mejores herramientas y recursos gratuitos para crear una web, así como algunas recomendaciones para aprender HTML, CSS y JavaScript. 1 WordPress: Es una plataforma de gestión de contenidos que te permite crear y administrar fácilmente tu sitio web. WordPress es fácil de usar y cuenta con una gran cantidad de temas y plugins gratuitos para personalizar tu sitio web. 2 Wix: Es un creador de sitios web que te permite crear un sitio web fácilmente arrastrando y soltando elementos. Wix cuenta con una gran cantidad de plantillas gratuitas y opciones de personalización para tu sitio web. 3 Canva: Es una herramienta de diseño gráfico que te permite crear diseños personalizados para tu sitio web. Canva cuenta con una gran cantidad de plantillas gratuitas y opciones de personalización para crear diseños atractivos y efectivos. 4 Google Analytics: Es una herramienta de análisis web que te permite medir el tráfico de tu sitio web y obtener información valiosa sobre tus usuarios. Google Analytics es gratuito y te permite obtener información sobre el comportamiento de tus usuarios en tu sitio web. 5 Yoast SEO: Es un plugin de WordPress que te ayuda a optimizar tu sitio web para los motores de búsqueda. Yoast SEO te proporciona sugerencias para mejorar el SEO de tu sitio web y aumentar tu visibilidad en los motores de búsqueda. 6 Unsplash: Es un sitio web que ofrece fotografías de alta calidad gratuitas para utilizar en tu sitio web. Unsplash cuenta con una gran variedad de imágenes de diferentes categorías para utilizar en tu sitio web. 7 Google Fonts: Es una biblioteca de fuentes gratuitas que puedes utilizar en tu sitio web. Google Fonts cuenta con una gran variedad de fuentes para utilizar en tu sitio web y personalizar la estética de tu sitio web. 7 Además Si quieres aprender HTML, CSS y JavaScript para crear tu propio sitio web desde cero, te recomendamos los siguientes recursos gratuitos: Descartar esta alerta. Codecademy: Es una plataforma de aprendizaje interactivo que te permite aprender HTML, CSS, JavaScript y otros lenguajes de programación de forma gratuita. w3schools es un sitio web que te ofrece tutoriales y ejemplos de HTML, CSS, JavaScript y otros lenguajes de programación de forma gratuita. Es una plataforma de aprendizaje para las tecnologías Web y el software con el que funciona la Web, incluyendo: – Estándares Web como CSS, HTML, y JavaScript – Desarrollo de aplicaciones para Web Abierta – Desarrollo de complementos para Firefox Es una comunidad de aprendizaje que te ofrece cursos gratuitos de HTML, CSS, JavaScript y otras tecnologías relacionadas con el desarrollo web. Con estas herramientas y recursos gratuitos, así como con el aprendizaje de HTML, CSS y JavaScript, puedes crear un sitio web efectivo y atractivo sin tener que invertir mucho dinero. ¡Manos a la obra y a crear tu sitio web ideal!