Proyectos Personales

Módulo 1 - Lección 1.3

Escoge de los siguientes proyectos personales para realizar durante tus estudios

Proyectos Personales (3-6 Meses):

Desarrolla y mejora tus propios proyectos tecnológicos con asesoramiento personalizado.

Proyectos Sencillos para Principiantes Usando Webflow, Figma, Spline y Jitter

Webflow - Sitio Web Personal:

• Objetivo: Crear un sitio web simple para presentar tu biografía, experiencia laboral y datos de contacto.

• Descripción: Aprende a usar Webflow para construir un sitio web de una página con secciones para Sobre mí, Experiencia, Galería de Fotos y Contacto.

• Recursos: Puedes seguir tutoriales básicos para entender la interfaz de Webflow y cómo agregar y estilizar elementos.

Tutorial en Español: Cómo Crear un Sitio Web Personal en Webflow

Objetivo:

Crear un sitio web sencillo para presentar tu biografía, experiencia laboral y datos de contacto.

Descripción:

Con este tutorial, aprenderás a utilizar Webflow para diseñar un sitio web de una sola página que incluya las siguientes secciones: Sobre mí, Experiencia, Galería de Fotos y Contacto.

Paso 1: Configuración de la Cuenta en Webflow

1. Visita webflow.com y crea una cuenta gratuita.

2. Una vez registrado, inicia un nuevo proyecto seleccionando la opción 'Nuevo Sitio Web'.

Paso 2: Diseñando la Sección 'Sobre Mí'

1. Elige un diseño de plantilla o empieza con un lienzo en blanco.

2. Añade una sección utilizando el panel de elementos y nómbrala como 'Sobre Mí'.

3. Introduce un contenedor para tu texto y escribe tu biografía.

Paso 3: Añadiendo la Sección 'Experiencia'

1. Crea una nueva sección debajo de 'Sobre Mí'.

2. Usa una lista para presentar tus empleos anteriores o logros significativos.

3. Personaliza la tipografía y el diseño para que resalten tus experiencias.

Paso 4: Incorporando una 'Galería de Fotos'

1. Añade otra sección titulada 'Galería de Fotos'.

2. Utiliza las herramientas de grilla o flexbox para organizar tus imágenes.

3. Sube tus fotografías y ajusta sus dimensiones según necesites.

Paso 5: Creando la Sección 'Contacto'

1. Agrega la última sección para Contacto.

2. Inserta un formulario de Webflow o simplemente tus datos de contacto.

Paso 6: Publicación de tu Sitio Web

1. Revisa tu diseño en diferentes dispositivos con la vista previa de Webflow.

2. Publica tu sitio web utilizando el dominio de Webflow o conecta tu propio dominio.

How to Publish your Webflow Website 2024 (Step-by-Step)YouTube

Recursos Adicionales:

• Tutorial Oficial de Webflow

• Curso Básico de Webflow en YouTube

• Comunidad de Webflow

Consejos Finales:

• Experimenta con diferentes estilos y efectos visuales para que tu sitio web destaque.

• Asegúrate de que tu sitio sea responsivo y se vea bien en dispositivos móviles.

• Utiliza los recursos proporcionados para explorar funcionalidades avanzadas una vez que te sientas cómodo con lo básico.

Figma - Diseño de Interfaz de Usuario:

Proyecto: Diseño de Sitio Web Personal en Figma para Principiantes

Paso 1: Familiarización con Figma

• Objetivo: Aprender los conceptos básicos de Figma para diseñar interfaces.

• Tutorial:

  1. Regístrate o inicia sesión en Figma.

  2. Explora la interfaz y localiza las herramientas principales.

  3. Mira el Tutorial para Principiantes de Figma en español.

  Paso 2: Crear un Nuevo Proyecto

  • Descripción: Iniciar tu primer diseño de sitio web con una plantilla simple.

  • Tutorial:

    1. Crea un nuevo proyecto en Figma haciendo clic en 'Nuevo Diseño'.

    2. Busca plantillas para sitios web en la comunidad de Figma y elige una que se ajuste a un blog personal.

    Paso 3: Diseñar la Interfaz del Sitio Web

    • Detalles: Configura las páginas del sitio web y diseña la interfaz de usuario.

    • Tutorial:

      1. Define la estructura del sitio con 'Frames' para cada página (Inicio, Sobre Mí, Contacto).

      2. Utiliza las herramientas de texto e imagen para agregar contenido a cada página.

      3. Aprende a diseñar botones e íconos en el curso de Figma para Principiantes.

      Paso 4: Prototipado y Animaciones

      • Meta: Hacer que tu diseño sea interactivo con transiciones y microinteracciones.

      • Tutorial:

        1. Usa la pestaña 'Prototipo' de Figma para conectar las diferentes páginas de tu sitio.

        2. Crea transiciones y hover effects siguiendo este video tutorial.

        Paso 5: Iteración y Feedback

        • Intención: Recibe comentarios y mejora el diseño de tu sitio.

        • Tutorial:

          1. Comparte tu diseño con amigos o la comunidad para obtener opiniones.

          2. Aprende a iterar tu diseño en este tutorial práctico.

          Paso 6: Preparar el Diseño para Desarrollo

          • Finalidad: Asegurar que tu diseño esté listo para ser pasado a desarrollo

          • Tutorial:

            1. Aprende a crear un 'Style Guide' y 'Assets Export' dentro de Figma siguiendo [este tutorial](https://www.youtube.com/watch?v=HGF

Spline - Objeto 3D para Web:.

• Objetivo: Modelar y animar un objeto 3D simple como un cubo o esfera para ser utilizado en un sitio web.

• Descripción: Introdúcete al diseño 3D utilizando Spline y crea un modelo básico que puedas girar o animar sutilmente.

• Recursos: Sigue tutoriales introductorios de Spline para aprender a manipular objetos y a agregar animaciones simples.

Jitter - Animación Básica para Incluir en Webflow:

• Objetivo: Crear una animación sencilla, como un botón que cambia de forma al pasar el ratón sobre él.

• Descripción: Aprende a utilizar Jitter para generar animaciones básicas que puedan ser exportadas e integradas en Webflow.

• Recursos: Busca guías de inicio rápido de Jitter para entender cómo trabajar con la línea de tiempo y los ajustes preestablecidos de animaciones.

Proyectos Amigables para Principiantes en Webflow para Audiencia Mayor de 60 Años

---

Tu Participación: ¡Fundamental!

• Compromiso Ético: Se espera un nivel de participación del 80% en actividades y proyectos del curso.

Adquiriendo Experiencia Práctica

• Enfoque en la Práctica: Más que teoría, buscamos que adquieras habilidades prácticas a través de la colaboración en equipo.

1. Webflow - Blog Personal sobre Pasatiempos:

   • Objetivo: Crear un blog donde puedas compartir tus experiencias y conocimientos sobre tus hobbies o intereses.

   • Descripción: Te guiaremos paso a paso en la creación de un blog con entradas que puedes actualizar regularmente.

   • Recursos: Usa plantillas de Webflow diseñadas para blogs, y aprende cómo personalizarlas fácilmente.

2. Utilización de la Inteligencia Artificial en la Creación de Sitios Web

   Durante las sesiones interactivas, profundizaremos en:

   • Ingeniería de prompts: Aprenderás cómo formular preguntas y comandos de manera efectiva para comunicarte con la IA y obtener los resultados deseados.

   • Desarrollo Web asistido por IA: Descubre cómo la IA puede acelerar el proceso de desarrollo web, desde el diseño hasta la implementación.

   • Personalización del contenido: Uso de IA para personalizar la experiencia del usuario en tu sitio web basándote en su comportamiento y preferencias.

   • Optimización mediante IA: Cómo mejorar tu sitio web con las sugerencias automáticas proporcionadas por la IA.

   Creando Una Experiencia Multilingüe

   No solo aprenderás el inglés técnico necesario, sino también:

   • Adaptabilidad lingüística: Cómo asegurarte de que tu sitio web sea accesible para hablantes de diferentes idiomas, especialmente de inglés y español.

   • Cultura y Localización: Entenderás la importancia de adaptar tu contenido al contexto cultural de tus usuarios.

   Sesiones Prácticas

   Incluiremos ejercicios prácticos donde:

   1. Utilizarás nuestra IA específicamente entrenada en español mexicano para crear un sitio web.

   2. Recibirás retroalimentación inmediata sobre tu trabajo y consejos de mejora.

   3. Tendrás la oportunidad de colaborar con otros estudiantes en proyectos multilingües.

   Proyecto Final

   Para culminar el curso, implementaremos un proyecto final que consiste en:

   • Un sitio web completamente funcional desarrollado con el apoyo de la inteligencia artificial.

   • Contenido redactado en inglés y español, optimizado para ambas audiencias.

   • Análisis y ajustes basados en la interacción real de los usuarios.