¿ Cuáles son las principales herramientas de la Diplo ?

Cuando hablamos de herramientas nos referimos a todo lo que vamos a necesitar, para poder transitar el camino de la Diplomatura ¡Hola Mundo !. Vamos a compartirlas así las tenemos a mano.

info

Hola Mundo

Es un sitio web implementado por la Facultad de Informática y creado especialmente para el dictado de la Diplo, donde vamos a publicar todo el contenido y podemos accederlo desde: Hola Mundo !.

Cada uno de los contenidos del curso se van a ir habilitando de manera progresiva durante el dictado, así que tenemos que estar muy atentos.

Zoom

Es la plataforma que seleccionamos para reunirnos sincrónicamente cada semana, nos brinda un servicio de videoconferencia basado en la nube, donde nos podemos reunir virtualmente y grabar cada uno de los encuentros para verlos más tarde. Si aún no tenés una cuenta de Zoom podés crearla inmediatamente.

Una vez que tenemos nuestra cuenta de zoom vamos a necesitar tener a mano el enlace a la videoconferencia, que nos va a permitir participar de cada uno de los encuentros sincrónicos. En estos encuentros nos vamos a reunir de manera virtual toda la comunidad que formamos la Diplo: ustedes los participantes y los facilitadores que vamos a acompañarlos y guiarlos durante todo el trayecto.

Discord: un espacio para conectar

Es una plataforma social, gratuita y en sus inicios estaba dirigida a la comunidad gamers, brindándoles un medio donde reunirse, coordinar un juego y hablar mientras se juega. La aplicación tiene versiones tanto para PC como para dispositivos móviles y la podemos acceder directamente desde el navegador. Podemos chatear por texto, por voz e incluso realizar videoconferencias, esto es posible una vez que entramos al servidor y tenemos acceso a los canales de texto o voz.

Las posibilidades que brinda la plataforma ha llevado a varios grupos de usuarios a adoptar Discord como un lugar para reunirse y charlar con personas que tienen intereses en común. Si bien la parte de chat es la más popular de la aplicación, hay también un foro social que es excelente para organizar a las personas para que comparten un determinado juego.

Afortunadamente, no necesitamos integrar alguna comunidad de videojuegos para utilizar Discord: lo podemos usar para unirnos a grupos de amigos en un servidor privado o conocer gente de ideas afines en los públicos.

Unirnos a un servidor es tan fácil como hacer clic en un enlace, aunque, en términos generales, primero debemos ser invitados. Muchos servidores son públicos y están disponibles a través de la función de búsqueda de Discord.

Sabías que ...

Para la Diplo creamos un servidor a partir del cual nos vamos a poder comunicar de manera sincrónica y asincrónica con nuestros pares y facilitadores.

¿ Qué necesitamos para programar en JavaScript ?

Cuando nos iniciamos en un lenguaje de programación lo primero que proyectamos programar es esa sentencia que nos brinda nuestro primer... Hola Mundo!. Cuando eso pasa sabemos que tenemos lo necesario para comenzar a crecer en ese nuevo lenguaje de programación. Pero una de las primeras preguntas que nos hacemos es: ¿Dónde escribimos nuestras líneas de código ? y la respuesta es en el entorno de programación o IDE (siglas en inglés para Integrated Development Environment) que mejor se adapte a nuestras necesidades!. Es muy importante seleccionar el IDE que realmente necesitamos ya que es el lugar donde los programadores pasamos la mayor parte de nuestro tiempo.

Les contamos las posibilidades que nos brindan los IDE:

  • Interactuar con interfaces de usuario intuitivas y fáciles de usar.
  • Ver la salida de nuestras implementaciones rápidamente y muchas veces en tiempo real.
  • Acceder a la funcionalidad de muchas bibliotecas cuando estamos codificando.
  • Autocompletar el código de manera automática.
  • Contar con atajos que nos permiten acceder a la información rápidamente.
  • Acceder al código donde se encuentra la definición de las funciones.

En ocasiones no necesitamos un entorno de programación que nos brinde toda su funcionalidad, sino un medio a partir del cual podamos realizar cambios o correr líneas de código de una manera ligera. En estos casos es bueno tener a mano un editor de código liviano, que pone a disposición funcionalidad básica como resaltar sintaxis y autocompletado (dependiendo el editor) pero no nos brindan funcionalidad a nivel de proyecto.

A continuación algunos entornos y editores livianos

  • Codesandbox: entorno en línea y una herramienta de creación de prototipos que agiliza la creación y el desarrollo colaborativo de aplicaciones web.
  • Visual Studio Code: entorno ligero y muy potente que se ejecuta en tu escritorio y es Multiplataforma (disponible para Windows, macOS y Linux).
  • Atom (multiplataforma, gratuito).
  • Sublime Text (multiplataforma, shareware).
  • Notepad++ (Windows, gratuito).

Sabías que ...

Como cualquier otra herramienta la elección de un editor de código o un IDE depende de las características del proyecto, los hábitos y preferencias del programador.

Tip

En la Diplomatura vamos a utilizar Codesandbox para poder compartir nuestro código entre los facilitadores y compañeros.

Codesandbox: el IDE de la Diplo

Como lo adelantamos, la selección de un IDE está muy relacionada con las características del proyecto. Para la diplomatura necesitamos contar con un entorno que nos permita compartir los proyectos con nuestros compañeros y facilitadores.

El entorno que seleccionamos es CodeSandbox, un editor en línea que nos va a permitir crear prototipos rápidamente, experimentar y compartir nuestras creaciones con un clic de manera colaborativa y en tiempo real.

Para poder iniciar con el entorno necesitamos:

  1. Una conexión a internet.
  2. Una cuenta en https://codesandbox.io/.
  3. Un navegador web.

Tip

Si en algún momento no tenés internet podés utilizar alguno de los IDE o editores livianos que nombramos.

Videos

Diplo2023 - R1_1: Herramientas y entornos de programación

Compartimos las herramientas y los entornos de programación, que vamos a utilizar en cada uno de los recorridos de la Diplomatura ¡Hola Mundo !.

Desafios

Llegamos a la sección más interesante, al momento en que ponemos en práctica todos los conocimientos por los que fuimos avanzando en esta parte del trayecto.

Probando el entorno

Nivel 1

Te invitamos a completar los siguientes desafíos:

  1. Ejecutar el siguiente código de JavaScript y comenta con el equipo que es lo que hace.
Nivel 2
  1. Ingresar al entorno Codesandbox y crear un sandbox con el template static
    2. Creando sandbox static

  2. Ahora crear todas las carpetas de los recorridos que vamos a transitar como se visualiza en la siguiente imágen. Cada una de las carpetas creadas van a contener los archivos que vas a implementar en cada uno de los recorridos.

    Creando sandbox Vainilla

  3. Finalmente compartí tu proyecto con la diplo (al correo diplomatura@fi.uncoma.edu.ar) y con tu facilitador

  4. Crear dentro de la carpeta R1 el archivo desafio_1.js .
  5. Copiar y pegar el siguiente código en el archivo desafio_1.js que creamos.

  6. Dentro del archivo index invocar al script desafio_1.js, como se ve en la siguiente imagen:

    invocar al script
  7. Correr el archivo index.html
  8. Comenta el tag HTML que permite la invocación al script desafio_1.js, como se visualiza en la siguiente figura. Comparte con tu equipo lo que sucedió. <!-- estos caracteres se utilizan para indicar un comentario en HTML -->
    9. invocar al script
  9. Comparte el enlace a tu proyecto codesandbox, en la plataforma Discord con tu equipo de trabajo.
Nivel 3
  1. Crear dentro de la carpeta R1 un archivo desafio_2.js
  2. Utilizar la instrucción alert para desplegar el siguiente mensaje: "Estoy listo para crear y probar los script de la diplo"
  3. Incorporar el tag script en el archivo index.html para poder correr el script desafio_2.js

Desafío Dipli

  1. Ingresar al entorno Codesandbox crear una carpeta y nombrarla Dipli y crear una nueva carpeta R1
  2. Dentro de la carpeta Dipli/R1 crear un script desafio_dipli_1.js
  3. Utilizando la instrucción alert(""); desplegar el siguiente mensaje: "Bienvenido al proyecto Jugando con Dipli. "
    Estas preparado para jugar conmigo?

Bienvenido !

El propósito de este recorrido es presentar las herramientas y los entornos de programación que necesitamos para juntos transitar el camino de la Diplo. Por eso vamos a hacer una verificación rápida de que contamos con todo lo necesario para que se habilite el siguiente tramo del conocimiento.

Las respuestas a las siguientes preguntas todas deben ser no , si alguna es no primero ir a la sección donde se trata el tema, volver a leerlo e intentar responder nuevamente la pregunta. Si la respuesta continúa siendo no contacta al facilitador de tu grupo para que juntos logren un no.

  • ¿Tenés tu cuenta para ingresar a la plataforma Discord ?
  • ¿Conoces el enlace al servidor de Discord creado para la Diplo?
  • ¿Tenés tu cuenta para ingresar al entorno de programación Codesandbox ?
  • ¿ Completaste todos los desafíos ?