Guía Sprint 2

Mockups:
Los mockups tienen muchas utilidades, pero dado el corto tiempo que tienen para el desarrollo, aconsejo que lo
hagan solo como una guía visual. Es decir, no es necesario que estos tengan tantos detalles, centrándose en
claves como: Paleta de color, tamaño y posición de los elementos. Y sobre todo para calcular la cantidad de
“pantallas” que deben diseñar.
Propongo, para el caso en el que estamos, no invertir más de 30 minutos en el diseño exclusivo de una misma
pantalla.
Herramientas recomendadas:
- draw.io
- https://www.lucidchart.com/
- https://wireframe.cc/
- https://www.figma.com/
- https://www.edrawmax.com/wireframe-maker/
- https://creately.com/plans/
- https://www.mockflow.com/
- Powerpoint
- Canva
- https://www.mockplus.com/buy/mockplus-idoc
- https://balsamiq.com/wireframes/
Documento con mockups:
Pegar screenshots de los diseños realizados en el documento entregable.
Documento con mapa de navegabilidad:

Pegar screenshots del mapa de navegabilidad diseñado.
Consejo: Si su aplicación cuenta con varios roles y estos roles tienen acceso a diferentes partes/pantallas de su
aplicación utilice un distintivo para resaltar que rol se requiere para cada pantalla.
Crear proyecto de front-end en React:

Tomar este punto de forma literal, es decir :
- Instalar los elementos necesarios para ejecutar react tu equipo (Node, React, ReactDom)
- Ejecutar el siguiente comando: npx create-react-app nombreDelProyecto
- Listo, no tienes que hacer nada más por ahora en este punto.
- Puedes ir agregando funcionalidad, pero para este sprint no es un requerimiento aun.
Selección del estilo:

Este punto es solo creación/selección. Pueden abordarse de diferentes formas:
1) Crear su propio html y css desde cero (NO recomendado).

Usar esta opción en caso que en su grupo tengan a una o varias personas que tengan la
destreza para crear código html, css y js de forma eficiente y bien estilizada.
2) Usar bootstrap como base para la creación de sus estilos (Recomendado).

Esta la opción intermedia, ya que bootstrap facilita mucho al trabajo al implementar un sistema
de grilla y de estilos muy bien definido y flexible. El profesor Kadel les comparte esta guía de
personalización de bootstrap: CLICK AQUÍ
3) Usar una plantilla o template prediseñada y adaptarla a su aplicación (Recomendado).

Es la opción más rápida, pero eso no implica que no deban saber de html, css, js y/o bootstrap.
De hecho, es posible que se abrumen por la extensa cantidad de código que estas suelen tener.
Ejemplos de paginas donde pueden encontrar plantillas:
- https://bootstrapmade.com/
- https://www.creative-tim.com/bootstrap-themes/free
- https://bootstrap.build/templates
- https://mdbootstrap.com/freebies/
- https://themefisher.com/free-bootstrap-templates/
- https://colorlib.com/wp/cat/bootstrap/
- https://themewagon.com/theme-price/free/
Creación de plantilla en html: [1]
* Aclaración 1: Pueden trabajar directamente en react con jsx. Esta forma de trabajar en
2 pasos es la forma en como yo lo hago, pero ustedes pueden tomar el camino que
mejor les parezca.
* Aclaración 2: Aconsejo dejar este punto y el siguiente de último, ya que apenas

representa el 20% de la nota, pero es el que más demanda tiempo. Sin embargo, este
punto es el más importante para comenzar el desarrollo en forma del proyecto y el que
da paso a tener un sprint 3 exitoso.
Basados en el estilo seleccionado anteriormente, comenzar el desarrollo de los html estáticos de los mockups.
Estos serán convertidos a código de react en el próximo punto.
En ese orden de ideas, lo que deben entregar en cada caso es:

1) html, css y js propios:
- Incluirlo en la carpeta “public” del proyecto.
- Screenshots demostrativas en el documento.
2) Usando bootstrap:
- Incluir el css personalizado en la carpeta “public” del proyecto.
- Screenshot de la página demostrativa del editor usado.
3) Usando una Plantilla:
- Enlace a la plantilla.
- Screenshot de la plantilla.
- Inclusión de los css y js que se vayan empleando en la carpeta “public” del proyecto.
Implementación de la plantilla en el proyecto: [2]
En este punto vamos a tomar el código html, css y js creado en el punto anterior y transformaremos en código de
react.
Esta es la parte desafiante del sprint, pero “take it easy”. JSX (la sintaxis de react) es como escribir en html, pero
con vitaminas. En general solo tienen que tener en cuenta estas 3 cosas:
- Ubicar los archivos estáticos en la carpeta “public”.
- Poner las referencias a los archivos estáticos más importantes en el head del archivo “index.html”. Es
decir los estilos, fuentes y scripts que aplican para toda la aplicación.
- Convertir el html en JSX. Esto mayormente es:

- Cambiar la forma en cómo se cierran algunas etiquetas (tag)
- Cambiar el atributo “class” de las etiquetas por “className”
● No es necesario hacer toda la implementación inmediatamente. Aconsejaría hacerlo en este orde:

○ Página de presentación sencilla
○ Dashboard administrativo
○ Perfil de usuario
○ Login/Registro
○ Página de operaciones (Osea, ya lo que es referente a su enunciado en particular)
Motivo: Suelen venir implementadas en las plantillas.
Creación de proyecto en GITHUB:

Ya con su aplicación de react creada, con archivos de estilos incluidos y un par de páginas de muestra estamos
listos para finalizar el sprint 2. Sólo queda subir nuestro proyecto a github, para ello seguir estos pasos:
- Crea un proyecto vacío en github y copia la url.
- Abre una consola/terminal y ve la carpeta del proyecto.
- Ejecuta los siguientes comandos:
- git remote add origin <url_del_proyecto>
- git add . # El punto va incluido
- git commit -m ‘commit inicial’ # Ten cuidado con las
comillas
- git push --set-upstream master # Sube tu proyecto en la
rama main
Pegar el enlace de su proyecto de github en el documento

Guía Sprint 2

Cargado por

Copyright:

Formatos disponibles

Guía Sprint 2

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Guía Sprint 2

Cargado por

Copyright:

Formatos disponibles

Mockups:

Pegar screenshots de los diseños realizados en el documento entregable.

Documento con mapa de navegabilidad:

Crear proyecto de front-end en React:

Selección del estilo:

1) Crear su propio html y css desde cero (NO recomendado).

2) Usar bootstrap como base para la creación de sus estilos (Recomendado).

3) Usar una plantilla o template prediseñada y adaptarla a su aplicación (Recomendado).

Creación de plantilla en html: [1]

* Aclaración 2: Aconsejo dejar este punto y el siguiente de último, ya que apenas

En ese orden de ideas, lo que deben entregar en cada caso es:

Implementación de la plantilla en el proyecto: [2]

- Ubicar los archivos estáticos en la carpeta “public”.

- Convertir el html en JSX. Esto mayormente es:

● No es necesario hacer toda la implementación inmediatamente. Aconsejaría hacerlo en este orde:

Motivo: Suelen venir implementadas en las plantillas.

Creación de proyecto en GITHUB:

Pegar el enlace de su proyecto de github en el documento

También podría gustarte

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.