Explorando los creadores de aplicaciones web

  • Conozca las aplicaciones web y en qué se diferencian de las aplicaciones móviles
  • Conozca las distintas opciones de codificación y creación de aplicaciones web
  • Instalar el software necesario para crear una aplicación web

Éstas son las actividades para esta lección:

APLICACIONES WEB

Para su proyecto Technovation, tiene la opción de crear una aplicación móvil o una aplicación web

Los participantes que ya hayan participado en Technovation y busquen un nuevo reto, o los nuevos participantes que tengan experiencia previa en programación, pueden plantearse crear una aplicación web para su proyecto Technovation.

Muchos participantes optarán por crear una aplicación móvil con uno de nuestros creadores de aplicaciones sugeridos, App Inventor o Thunkable. Si eres nuevo en la programación o sabes que quieres utilizar App Inventor o Thunkable para programar tu aplicación, puedes saltarte esta lección. 

Hacer una aplicación web implica codificación basada en texto y es más avanzado que la codificación basada en bloques con App Inventor o Thunkable. 

Empecemos por repasar la diferencia entre aplicaciones móviles, aplicaciones web y aplicaciones web progresivas. 

Aplicación móvil

  • un programa que se ejecuta de forma nativa en el teléfono
  • descargado e instalado en el dispositivo 
  • puede acceder a las funciones del teléfono, como el GPS y la cámara
  • específico de la plataforma (iOS o Android) 
  • codificadas con lenguajes particulares para adaptarse al sistema operativo

Aplicación web

  • se parece mucho a una aplicación móvil
  • se ejecuta en un navegador de Internet
  • no es nativo de un dispositivo concreto (iOS o Android) 
  • suele codificarse con HTML, CSS, Javascript y Python.
  • no puede ejecutarse cuando está desconectado

Aplicación web progresiva

  • tipo especial de aplicación web que es un híbrido entre aplicación móvil y aplicación web.
  • se ejecuta en un navegador
  • también puede instalarse en el dispositivo móvil como una aplicación móvil normal
  • puede ejecutarse incluso cuando el usuario no está conectado

Tenga en cuenta que una aplicación web es diferente de un sitio web. Un sitio web es estático, codificado con HTML y CSS. Las aplicaciones web son dinámicas y cambian en función de las entradas del usuario y otras interacciones externas. Para su proyecto Technovation, un sitio web no es aceptable.

Exploraremos algunas opciones para principiantes en la creación de aplicaciones web.

Una gran diferencia con respecto a las plataformas de creación de aplicaciones que cubrimos para aplicaciones móviles es que usted creará una aplicación web utilizando un lenguaje de programación basado en texto en lugar de un lenguaje basado en bloques. 

Hay dos lenguajes principales que se utilizan para crear aplicaciones web.

JAVASCRIPT

logo javascript

Javascript, o JSes un lenguaje de scripting. Esto significa que el código se ejecuta en tiempo de ejecución, en lugar de ser compilado, como una aplicación móvil. Es como si un actor ejecutara su guión durante un espectáculo cada vez que este se ejecuta.

Javascript suele combinarse con HTML y CSS para crear sitios web. HTML y CSS se utilizan para hacer sitios web estáticos, que pueden presentar información pero no cambian. Javascript añade interactividad y la capacidad de que el sitio web cambie y se actualice en función de factores externos. Y un sitio web dinámico e interactivo es esencialmente una aplicación web.

PITÓN

logo python

Python es un lenguaje de programación de propósito general muy popular. Python es a la vez un lenguaje de programación y un lenguaje de scripting, por lo que puede compilarse para ejecutarse, pero también puede ejecutarse en tiempo de ejecución.

Se considera un lenguaje sencillo, versátil y accesible para los programadores noveles. Se utiliza en muchos aspectos diferentes del desarrollo de software. Uno de ellos es el desarrollo web. Otra es el aprendizaje automático. Por lo tanto, Python es una gran opción para aprender y desarrollar aplicaciones web de IA más avanzadas. 

En este currículo educativo, nos centraremos en la creación de aplicaciones web con Python. Para crear fácilmente una aplicación web con Python, utilizaremos un framework llamado Streamlit. Streamlit te permite crear aplicaciones web potentes e interactivas con poco código. Se especializa en aplicaciones que involucran datos, y le permite utilizar fácilmente las bibliotecas de aprendizaje automático de Python para incorporar la IA en sus aplicaciones. 

Estas son algunas de sus principales características.

  • Una buena opción para las personas que tienen mucha experiencia en codificación basada en bloques y buscan un nuevo reto.
  • Bueno para personas que han hecho algo de codificación basada en texto
  • Lenguaje muy versátil y ampliamente utilizado
  • Tendrás que instalar software en tu ordenador
      • Python y bibliotecas asociadas
      • Un editor de código
  • Streamlit tiene la opción de ejecutarse en el navegador, utilizando Github
      • No vamos a cubrir esta opción en este currículo educativo
  • Puedes utilizar la IA con él
      • El lenguaje más popular para construir y utilizar modelos de aprendizaje automático
      • Utilizaremos Jupyter Notebooks en este currículo educativo para la construcción de modelos

CÓMO EMPEZAR

Para codificar aplicaciones web para su proyecto Technovation, necesitará:

  • un ordenador o portátil
  • Acceso a Internet

Deberías sentirte algo cómodo utilizando la ventana Terminal en Mac o Linux y Terminal o símbolo del sistema en Windows. Si no tienes experiencia, o ni siquiera sabes lo que es la ventana Terminal, entonces echa un vistazo a estos principiantes videos antes de pasar a la actividad.

Consulte la página video correspondiente a su sistema operativo.

Uso del terminal

3 Videos

Vamos a cubrir dos opciones para desarrollar aplicaciones web. Usted puede codificar en su ordenador o portátil, o puede codificar todo en la nube. Usted puede elegir cualquiera de las opciones, pero se recomienda que elija una opción y se adhieren a ella a través de su proyecto Technovation. Saber cómo utilizar los comandos de terminal anteriores son útiles con cualquiera de las opciones.

He aquí algunos pros y contras de cada uno.

EN SU ORDENADOR

PROS:

  • Los archivos se guardan en tu ordenador
  • Aprenda a utilizar Visual Studio Code, un IDE muy popular
  • Aprenderás mucho sobre el uso de la ventana de terminal, la instalación de paquetes, etc.
  • Control total y elección del software utilizado
  • Puede codificar sin necesitar siempre acceso a Internet

CONS:

  • No es fácil compartir archivos y código con tu equipo
  • Puede ser muy frustrante instalar paquetes y puede llevar mucho tiempo configurarlos.
  • Posibilidad de perder archivos si el ordenador se bloquea

EN LA NUBE

PROS:

  • Los archivos se almacenan en la nube
  • No necesitas instalar nada en tu ordenador
  • Enlace automático a Github para portafolio
  • Facilidad para compartir y codificar en equipo

CONS:

  • No tendrá experiencia en el uso de programas informáticos a nivel local
  • Dependencia de la conexión a Internet

Elige la Actividad A o la Actividad B, en función de si quieres codificar localmente en tu ordenador o codificar en la nube.

ACTIVIDAD A: EMPIEZA A UTILIZAR PYTHON EN TU ORDENADOR

Tiempo estimado: 45 minutos

INSTALAR SOFTWARE Y CODIFICAR LA APLICACIÓN DE INICIO

NOTA: Si sigues las instrucciones que aparecen a continuación, es posible que te encuentres con algunos problemas, así que ten paciencia y prepárate para solucionarlos sobre la marcha.

  1. Paso 1: Instalar Python. Aquí hay un buen conjunto de instrucciones para Window, Mac o Linux.
  2. Paso 2: Instala un editor de código y Streamlit. Este video muestra cómo instalar Visual Studio Code y luego instalar Streamlit para ejecutarlo desde el editor de código.
  3. Paso 3: Ejecute una aplicación web Streamlit muy sencilla en el entorno VS Code de la siguiente manera video.
  4. Celébralo haciendo una captura de pantalla de tu primera aplicación web y envíasela con una nota a tu mentor.

ACTIVIDAD B: INICIARSE EN PYTHON EN LA NUBE

Tiempo estimado: 45 minutos

CREAR CUENTAS Y CODIFICAR UNA APLICACIÓN

Sigue video para registrarte en Streamlit.io y Github. A continuación, conecta las dos cuentas y crea una aplicación Streamlit muy sencilla.
Ver Video

REVISIÓN DE TÉRMINOS CLAVE

  • Aplicación Web - aplicación que se parece a una aplicación móvil pero se ejecuta en un navegador de Internet y se codifica utilizando HTML, CSS y Javascript o Python.

REFLEXIÓN

Enhorabuena por probar la codificación basada en texto. Aquí tienes algunas preguntas para reflexionar con tu equipo y con tu tutor.

refelcción de rocas en agua
¿Le ha resultado difícil instalar o trabajar con un lenguaje basado en texto?
¿Cómo superó los retos?

RECURSOS ADICIONALES

Tendrás que consultar la documentación y el soporte para trabajar con Python y Streamlit. A continuación se presentan algunos buenos lugares para empezar.