Usando StackBlitz

¿Qué es StackBlitz?

Proyecto en StackBlitz

Usando StackBlitz

Personalización

Guía de uso y funcionalidades de StackBlitz

empezar

¿Qué es StackBlitz?

¿Qué es StackBlitz?

Proyecto en StackBlitz

Personalización

StackBlitz es una plataforma de tipo SanBox(Caja de arena) en donde podremos probar y trabajar con HTML, CSS y JavaScript.

Una de sus grandes bondades es que funciona directamente en la nube.

¿Qué es StackBlitz?

Creando una cuenta en GitHub

¿Qué es StackBlitz?

Proyecto en StackBlitz

Personalización

Para poder crear una cuenta en esta plataforma, es necesario que primero creemos una cuenta en GitHub. Para ello deberemos ingresar en el enlace proporcionado en la parte inferior de la diapositiva y veremos una pantalla como la mostrada en la imagen.

+GitHUB

¿Qué es StackBlitz?

Creando una cuenta en GitHub

¿Qué es StackBlitz?

Proyecto en StackBlitz

Personalización

Al ingresar deberemos seleccionar la opción "Sign up" para poder proceder al registro, en este apartado nos solicitarán datos básicos como correo, contraseña y nombre de usuario.

¿Qué es StackBlitz?

Creando una cuenta en GitHub

¿Qué es StackBlitz?

Proyecto en StackBlitz

Personalización

Cuando terminemos la primera parte del registro, nos enviarán un código de verificación al correo proporicionado, así que deberemos acceder al mismo e ingresar el código en la siguiente ventana.

¿Qué es StackBlitz?

Creando una cuenta en GitHub

¿Qué es StackBlitz?

Proyecto en StackBlitz

Personalización

Una vez con el código, el sistema nos llevará a una ventana en donde seleccionaremos para que seleccionemos algunas cosas, en este caso seleccionaremos las opciones "Just me" y "Student".

¿Qué es StackBlitz?

Creando una cuenta en GitHub

¿Qué es StackBlitz?

Proyecto en StackBlitz

Personalización

En la siguiente ventana deberemos seleccionar cual es nuestro interes en GitHub, pueden marcar más de un elemento. Esto realmente no influira en la cuenta más que en algunas opciones o anuncios.

¿Qué es StackBlitz?

Creando una cuenta en GitHub

¿Qué es StackBlitz?

Proyecto en StackBlitz

Personalización

Por último, nos solicitará seleccionar el tipo de cuenta, en este caso deberemos seleccionar la opción de "Free", dando click al botón que aparece en la parte inferior de la ventana.

¿Qué es StackBlitz?

Creando una cuenta en GitHub

¿Qué es StackBlitz?

Proyecto en StackBlitz

Personalización

Una vez heco lo anterior, tendremos una cuenta en GitHub. Así que solo nos faltará vincular StackBlitz con esta nueva cuenta.

¿Qué es StackBlitz?

Vinculando StackBlitz a GitHub

¿Qué es StackBlitz?

Proyecto en StackBlitz

Personalización

Para hacer este paso lo que deberemos hacer es ingresar a StackBlitz y seleccionar la opción "Sing in" que aparece en la ezquina superior derecha.

¿Qué es StackBlitz?

Vinculando StackBlitz a GitHub

¿Qué es StackBlitz?

Proyecto en StackBlitz

Personalización

Al dar click en el botón, nos aparecerá una ventana emergente que nos solicitará una autorización de StackBlitz para vincularse a nuestra cuenta de GitHub, seleccionamos la opción "Authorize stackblitz".

¿Qué es StackBlitz?

Vinculando StackBlitz a GitHub

¿Qué es StackBlitz?

Proyecto en StackBlitz

Personalización

Realizado el proceso anterior, podremos ver ahora nuestro "Dashboard" en donde prodremos crear proyectos de diversos tipos.

Proyecto en StackBlitz

Creando un Proyecto Vainilla (Sin Librerías)

¿Qué es StackBlitz?

Proyecto en StackBlitz

Personalización

Para crear un proyecto lo que deberemos hacer en este caso es dar click en el banner con el texto "New Project"

Proyecto en StackBlitz

Creando un Proyecto Vainilla (Sin Librerías)

¿Qué es StackBlitz?

Seleccionamos esta opción

Proyecto en StackBlitz

Personalización

Seleccionamos esta opción

En la ventana emegente que nos aparece deberemos desplazarno hacia la derecha con la barra deslizante (scroll bar) que aparece debajo de los textos: "Popular Frontend ...", etc. Una vez hecho esto seleccionamos la opción "Vanilla" y seleccionar la opción "Static".

Proyecto en StackBlitz

Creando un Proyecto Vainilla (Sin Librerías)

¿Qué es StackBlitz?

Proyecto en StackBlitz

Personalización

Esta será la configuración automática que nos dara la herramienta.

Personalización

Personalizando el proyecto y sus opciones

Al dar click en el zona 1 (Settings), nos aparecerá la siguiente lista de elementos, destacaremos tres de ellas.

• La sección 2 (User settings): Se refiere a configuraciones de los equipos en donde abran StackBlitz, es decir, como se verá en cada dispositivo el proyecto.
• La sección 3 (Workspace settings): se refiere a configuraciones generales del área de trabajo, es decir del entorno de desarrollo que se refleja en cómo visualizamos y editamos tanto el código como la previsualización en cada proyecto que hagamos en StackBlitz.
• La opción 4 (Save): se habilitará cada vez que editemos un archivo (sea de configuración o del proyecto), debemos siempre tener el habito de guardar cada vez que completemos alguna edición importante de nuestro proyecto de lo contrario si cerramos nuestro navegador o pestaña, los cambio no se guardarán.

¿Qué es StackBlitz?

Proyecto en StackBlitz

Personalización

Personalización

Personalizando el proyecto y sus opciones

¿Qué es StackBlitz?

Proyecto en StackBlitz

En este misma parte de la interfaz también encontraremos dos elementos bastante importantes.

• La sección 1 (Fork): Permite copiar un proyecto si es que nos comparten un enlace al mismo, esto permite replicar toda la estructura de un proyecto entre usuarios.
• La sección 2 (Share): Permite compartir el proyecto con otros usuarios, tanto de StackBlitz como usuarios en general, esta opción es la que emplearemos para las actividades.

Personalización

Personalización

Personalizando el proyecto y sus opciones

¿Qué es StackBlitz?

Proyecto en StackBlitz

Personalización

En la ventana de Share encontraremos lo siguiente.

• La sección 1 (Editor URL): Esta es la URL que deberemos compartir en las evidencias de las actividades.
• La sección 2 (Aplication URL): Esta URL no funciona correctamente por un Bug de la aplicación así que no permite visualizar las cosas.

Personalización

Personalizando el proyecto y sus opciones

¿Qué es StackBlitz?

Proyecto en StackBlitz

En cuanto al parte central de la vista del proyecto encontraremos algunas opciones:

• Sección 1 - Título y Descripción del Proyecto: En este apartado podremos cambiar tanto el título como la descripción del proyecto en el que estemos trabajando.
• Al dar click en el cando y no al texto, se abrirá una ventana flotante que veremos en el siguiente punto.
• Sección 2 (Open in New Tab): Esta opción mueve el Previsualizador hacia una nueva pestaña del navegador y nos llevará a ella.
• Para regresar a la edición simplemente podemos cerrar la pestaña nueva o dar click en la pestaña de StackBlitz.
• Sección 3 (Close | Open): Al crear un proyecto por defecto aparecerá como Close, esto permite ocultar el Previsualizador.
• Cuando seleccionamos la Sección 2, por defecto esta opción cambia a Open y permite ver de nuevo el Previsualizador.

Personalización

Personalización

Personalizando el proyecto y sus opciones

Al dar click en el candado se mostrará la siguiente información editable.

• La sección 1 (Title): Permite cambiar el nombre del proyecto.
• La sección 2 (Description): Permite colocar una descripción del proyecto, es en este apartado donde deberemos colocar nuestro nombre y el de nuestro equipo de trabajo una vez iniciado el proyecto integrador.
• La sección 2 (Project URL): Permite cambiar la URL de nuestro proyecto para hacerla un tanto más personalizada, la única regla es usar siempre un lenguaje decoroso, sin acentos, ñ o espacios, ya que las URL no reconocen estos elementos, para separar cada palabra, usaremos un "-".
• La sección 2 (Visibility): Permite cambiar la visibilidad del proyecto como en el caso de Share.

¿Qué es StackBlitz?

Proyecto en StackBlitz

Personalización