diff --git a/FAQ.md b/FAQ.md deleted file mode 100644 index e24b08c5..00000000 --- a/FAQ.md +++ /dev/null @@ -1,15 +0,0 @@ -# FAQ (preguntas frecuentes) - -- [Diferencia entre array y objetos](https://youtu.be/mJJloQY7A8Y) -- [¿Cómo agrego una nueva propiedad a un objeto?](https://youtu.be/mJJloQY7A8Y?t=236) -- [¿Cómo puedo recorrer un objeto?](https://youtube.com/01RHn23Bn_0) -- [map, filter, sort y reduce también son métodos para objetos](https://youtu.be/bUl1R2lQvKo) -- [Diferencia entre expression y statements](https://youtu.be/wlukoWco2zk) -- [Diferencia entre createElement e innerHTML](https://www.javascripttutorial.net/javascript-dom/javascript-innerhtml-vs-createelement/) -- [¿Qué es el Scope?](https://youtu.be/s-7C09ymzK8) -- ¿Qué es git y por qué debo usarlo? -- GitHub Colaborativo -- ¿Qué es un Merge y existen alternativas? (Rebase) -- ¿Existe una "buena forma" de usar git? - -[Para estas preguntas sobre Git recomendamos ver este playlist](https://www.youtube.com/watch?v=F1EoBbvhaqU&list=PLiAEe0-R7u8k9o3PbT3_QdyoBW_RX8rnV) diff --git a/README.md b/README.md index 0e78340d..1b763789 100644 --- a/README.md +++ b/README.md @@ -2,624 +2,283 @@ ## Índice -* [1. Preámbulo](#1-preámbulo) -* [2. Resumen del proyecto](#2-resumen-del-proyecto) -* [3. Objetivos de aprendizaje](#3-objetivos-de-aprendizaje) -* [4. Consideraciones generales](#4-consideraciones-generales) -* [5. Criterios de aceptación mínimos del proyecto](#5-criterios-de-aceptación-mínimos-del-proyecto) -* [6. Hacker edition](#6-hacker-edition) -* [7. Consideraciones técnicas](#7-consideraciones-técnicas) -* [8. Pistas, tips y lecturas complementarias](#8-pistas-tips-y-lecturas-complementarias) -* [9. Checklist para solicitar PF](#9-checklist-para-solicitar-pf) +* [1. Resumen del proyecto](#1-resumen-del-proyecto) +* [2. Objetivo](#2-objetivo) +* [3. Definición del producto](#3-definicion-del-producto) +* [4. Historias de usuario](#4-historia-de-usuario) +* [5. Diseño de la interfaz de usuario](#5-diseño-de-la-interfaz-de-usuario) +* [6. Consideraciones técnicas](#7-consideraciones-técnicas) -*** - -## 1. Preámbulo - -Según [Forbes](https://www.forbes.com/sites/bernardmarr/2018/05/21/how-much-data-do-we-create-every-day-the-mind-blowing-stats-everyone-should-read), -el 90% de la data que existe hoy ha sido creada durante los últimos dos años. -Cada día generamos 2.5 millones de terabytes de datos, una cifra sin -precedentes. - -No obstante, los datos por sí mismos son de poca utilidad. Para que esas -grandes cantidades de datos se conviertan en **información** fácil de leer para -los usuarios, necesitamos entender y procesar estos datos. Una manera simple de -hacerlo es creando _interfaces_ y _visualizaciones_. - -En la siguiente imagen, podrás ver cómo con la data que que se ve en la parte -izquierda se puede construir una interfaz amigable y entendible por las -usuarias, al lado derecho. -![pokemon-data-to-ui](https://user-images.githubusercontent.com/12631491/218505816-c6d11758-9de4-428f-affb-2a56ea4d68c4.png) - -## 2. Resumen del proyecto - -En este proyecto **construirás una _página web_ para visualizar un -_conjunto (set) de datos_** que se adecúe a lo que descubras que tu usuario -necesita. - -Como entregable final tendrás una página web que permita **visualizar la data, -filtrarla, ordenarla y hacer algún cálculo agregado**. Con cálculo agregado -nos referimos a distintos cálculos que puedes hacer con la data para mostrar -información aún más relevante para los usuarios (promedio, el valor máximo -o mínimo, etc). - -Esta vez te proponemos una serie de datos de diferentes _temáticas_ para que -explores y decidas con qué temática te interesa trabajar. Hemos elegido -específicamente estos sets de datos porque creemos que se adecúan bien a esta -etapa de tu aprendizaje. +*** -Una vez que definas tu área de interés, buscar entender quién es tu usuario -y qué necesita saber o ver exactamente; luego podrás construir la interfaz que -le ayude a interactuar y entender mejor esos datos. +## 1. Resumen del proyecto -Estos son datos que te proponemos: +En este proyecto construimos una página web que visualiza la data dada de 250 paises, la cual contiene la siguiente información por cada país: +- Su nombre común y oficial. +- Su _Top Level Domain_ (tld), la extensión que utilizan en intenet, por + ejemplo la de Perú es `.pe` y la de Brasil es `.br`. +- Si se ha independizado o no. +- Su(s) Capital(es). +- La _subregión_ a la que pertenece. +- Los lenguajes hablados en ese país. +- Los países con los que limita. +- Su área total (en metros cuadrados). +- Un emoji con su respectiva bandera. +- La población total. +- Su [coeficiente de gini](https://es.wikipedia.org/wiki/Coeficiente_de_Gini) + (del año más reciente del cual se tenga data). +- La nomenclatura utilizada por la FIFA para identificar al país. +- Su huso horario. +- El continente al cual pertenece. +- Y por último, imágenes y descripción de su bandera. -* [Pokémon](src/data/pokemon/pokemon.json): - En este set encontrarás una lista con los 251 Pokémon de la región de Kanto - y Johto, junto con sus respectivas estadísticas usadas en el juego - [Pokémon GO](http://pokemongolive.com). - - [Investigación con jugadores de Pokémon Go](src/data/pokemon/README.md) +Debido a que nuestro usuario final son niños de primaria que requieren conocer de manera fácil la información básica de un país; Decidimos que se visualiza las banderas con sus respectivos nombres, que tuviera la posibilidad de buscar directamente el país y se pudiera filtrar por continentes y ordenarlos alfabeticamente, así como conocer datos estadísticos de acuerdo a la población y sus áreas. -* [League of Legends - Challenger leaderboard](src/data/lol/lol.json): - Este set de datos muestra la lista de campeones en una liga del - juego League of Legends (LoL). - - [Investigación con jugadores de LoL](src/data/lol/README.md) -* [Rick and Morty](src/data/rickandmorty/rickandmorty.json). - Este set nos proporciona la lista de los personajes de la serie Rick and - Morty. [API Rick and Morty](https://rickandmortyapi.com). - - [Investigación con seguidores de Rick and Morty](src/data/rickandmorty/README.md) +## 2. Objetivo -* [Juegos Olímpicos de Río de Janeiro](src/data/athletes/athletes.json). - Este set nos proporciona la lista de los atletas que ganaron medallas en las - olímpiadas de Río de Janeiro. - - [Investigación con interesados en juegos olímpicos de Río de Janeiro](src/data/athletes/README.md) +Analizar los datos proporcionados con el fin de identificar el usuario al que puede ir dirigido y desarrollar una interfaz web interactiva que permita visualizar e interactual con dicha información. -* [Studio Ghibli](src/data/ghibli/ghibli.json). - En este set encontrarás una lista de las animaciones y sus personajes del - [Studio Ghibli](https://ghiblicollection.com/). - - [Investigación con seguidores de las animaciones del Studio Ghibli](src/data/ghibli/README.md) +### 2.1. Objetivos especificos -El objetivo principal de este proyecto es que aprendas a diseñar y construir una -interfaz web donde se pueda visualizar y manipular data, entendiendo lo que el -usuario necesita. +- Conocer al usuario final, para identificar sus historias de usuario +- Clasificar los datos que se desean trabajar +- Identificar las necesidades del usuario +- Diseñar una interfaz web interactiva que facilite el manejo de los datos por parte del usuario final -## 3. Objetivos de aprendizaje +## 3. Definición del producto +Nuestro proyecto es una pagina web interactiva de la información básica de todos los países del mundo (bandera, capital, nombre común, nombre oficial, continente, subregión, paises con los que se limitan, población y área), la cual va dirigida a niños de básica primaria que desean conocer información de un pais en especifico, los paises que conforman cada contiente y sus subregiones; Al igual que estadísticas de población y área total por continetes. -Reflexiona y luego marca los objetivos que has llegado a entender y aplicar en tu proyecto. Piensa en eso al decidir tu estrategia de trabajo. -### HTML +## 4. Historias de usuario -- [ ] **Uso de HTML semántico** +Realizamos las siguientes historias de usuario al comenzo del proyecto: -
Links

+-![Historia Usuario inicial](/src/imagen/HUinicial.png) - * [HTML semántico](https://curriculum.laboratoria.la/es/topics/html/02-html5/02-semantic-html) - * [Semantics - MDN Web Docs Glossary](https://developer.mozilla.org/en-US/docs/Glossary/Semantics#Semantics_in_HTML) -

+Pero como no habiamos definido con anterioridad el público objetivo y teniamos un error ya que el verbo de cada historia no era acorde con la pregunta del para que?. -### CSS +Por ende, revisamos este tema e iniciamos definiendo nuestro público objetivo con estas pregutas: -- [ ] **Uso de selectores de CSS** +a. ¿Quiénes son los principales usuarios de producto? -
Links

+ Niñ@s de 5-14 años. - * [Intro a CSS](https://curriculum.laboratoria.la/es/topics/css/01-css/01-intro-css) - * [CSS Selectors - MDN](https://developer.mozilla.org/es/docs/Web/CSS/CSS_Selectors) -

+b. ¿Cuáles son los objetivos de estos usuarios en relación con el producto? -- [ ] **Modelo de caja (box model): borde, margen, padding** + - Reconocer el pais de acuerdo a su bandera. + - Conocer información básica de paises. + - Aprender que paises tiene cada uno de los continentes. + - Comparar datos de los continentes. -
Links

+c. ¿Cuáles son los datos más relevantes que quieren ver en la interfaz y por qué? - * [Box Model & Display](https://curriculum.laboratoria.la/es/topics/css/01-css/02-boxmodel-and-display) - * [The box model - MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model) - * [Introduction to the CSS box model - MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model) - * [CSS display - MDN](https://developer.mozilla.org/pt-BR/docs/Web/CSS/display) - * [display - CSS Tricks](https://css-tricks.com/almanac/properties/d/display/) -

+ - Ver las banderas para poder aprender a que pais le corresponde + - Conocer la información de un pais en especifico al hacer click en su bandera o buscandolo por el nombre. + - Poder visualizar los paises al filtrar por el continente y las subregiones para aprender. + - Comparar el área y la población por continente para determinar que continente tiene mayor área y cual mayor población + +d. ¿Cuándo utilizan o utilizarían el producto? -- [ ] **Uso de flexbox en CSS** + - Cuando tengan tareas de sociales especificas de contientes y sus paises. + - Esten interesados en conocer algun país para viajar. + - Por saber información de los paises por interes general. -
Links

+Y definimos las siguientes historias de usuario con sus respectivos criterios de aceptación y la definición de terminado(DOD) para cada una de ellas. - * [A Complete Guide to Flexbox - CSS Tricks](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) - * [Flexbox Froggy](https://flexboxfroggy.com/#es) - * [Flexbox - MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) -

+* HISTORIA DE USUARIO #1. -### Web APIs +![Historia de usuario 1 -Ver](/src/imagen/HU1.png) +![Definición de terminado-Historia 1](/src/imagen/DOD1.png) -- [ ] **Uso de selectores del DOM** +* HISTORIA DE USUARIO #2. -
Links

+![Historia de usuario 2 - Filtrar](/src/imagen/HU2.png) +![Definición de terminado-Historia 2](/src/imagen/DOD2.png) - * [Manipulación del DOM](https://curriculum.laboratoria.la/es/topics/browser/02-dom/03-1-dom-methods-selection) - * [Introducción al DOM - MDN](https://developer.mozilla.org/es/docs/Web/API/Document_Object_Model/Introduction) - * [Localizando elementos DOM usando selectores - MDN](https://developer.mozilla.org/es/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors) -

+* HISTORIA DE USUARIO #3. -- [ ] **Manejo de eventos del DOM (listeners, propagación, delegación)** +![Historia de usuario 3 - Ordenar](/src/imagen/HU3.png) +![Definición de terminado-Historia 3](/src/imagen/DOD3.png) -
Links

+* HISTORIA DE USUARIO #4. - * [Introducción a eventos - MDN](https://developer.mozilla.org/es/docs/Learn/JavaScript/Building_blocks/Events) - * [EventTarget.addEventListener() - MDN](https://developer.mozilla.org/es/docs/Web/API/EventTarget/addEventListener) - * [EventTarget.removeEventListener() - MDN](https://developer.mozilla.org/es/docs/Web/API/EventTarget/removeEventListener) - * [El objeto Event](https://developer.mozilla.org/es/docs/Web/API/Event) -

+![Historia de usuario 4 - Ordenar](/src/imagen/HU4.png) +![Definición de terminado-Historia 4](/src/imagen/DOD4.png) -- [ ] **Manipulación dinámica del DOM** -
Links

- * [Introducción al DOM](https://developer.mozilla.org/es/docs/Web/API/Document_Object_Model/Introduction) - * [Node.appendChild() - MDN](https://developer.mozilla.org/es/docs/Web/API/Node/appendChild) - * [Document.createElement() - MDN](https://developer.mozilla.org/es/docs/Web/API/Document/createElement) - * [Document.createTextNode()](https://developer.mozilla.org/es/docs/Web/API/Document/createTextNode) - * [Element.innerHTML - MDN](https://developer.mozilla.org/es/docs/Web/API/Element/innerHTML) - * [Node.textContent - MDN](https://developer.mozilla.org/es/docs/Web/API/Node/textContent) -

+## 5. Diseño de la Interfaz de Usuario -### JavaScript +### 5.1 Prototipo de baja fidelidad -- [ ] **Diferenciar entre tipos de datos primitivos y no primitivos** +A continuación presentamos: -- [ ] **Arrays (arreglos)** +- Primer prototipo de baja fidelidad que realizamos -
Links

+![Prototipo de baja1](/src/imagen/prototipobaja1.png) +![Prototipo de baja1](/src/imagen/prototipobaja1.1.png) - * [Arreglos](https://curriculum.laboratoria.la/es/topics/javascript/04-arrays) - * [Array - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/) - * [Array.prototype.sort() - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) - * [Array.prototype.forEach() - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach) - * [Array.prototype.map() - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/map) - * [Array.prototype.filter() - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) - * [Array.prototype.reduce() - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce) -

+- Segundo prototipo de baja fidelidad -- [ ] **Objetos (key, value)** +![Prototipo de baja2](/src/imagen/prototipobaja2.png) -
Links

+- Tercer prototipo de baja fidelidad - * [Objetos en JavaScript](https://curriculum.laboratoria.la/es/topics/javascript/05-objects/01-objects) -

+![Prototipo de baja3](/src/imagen/prototipobaja3.png) -- [ ] **Variables (declaración, asignación, ámbito)** +Para tomar una decisión de cual de estas opciones escoger, tomamos una OH y nos indicaron que debia ser más sencillo, que todo se mostraba en una misma página; que no nos desgastaramos con mapamundis interactivos ya nos desviaba de los objetivos de este proyecto que es mostrar y manipular la data que tenemos. -
Links

+Tomamos en cuenta estas sugerencia y realizamos las modificaciones correspondientes que se veran en el prototipo de alta fidelidad. - * [Valores, tipos de datos y operadores](https://curriculum.laboratoria.la/es/topics/javascript/01-basics/01-values-variables-and-types) - * [Variables](https://curriculum.laboratoria.la/es/topics/javascript/01-basics/02-variables) -

-- [ ] **Uso de condicionales (if-else, switch, operador ternario, lógica booleana)** +### 5.2 Prototipo de alta fidelidad -
Links

+* Prototipo de alta fidelidad para mobil. +https://www.figma.com/proto/cgVM0arDxKbTcoA52MMif6/Data-Lovers-Countries-Mobile?type=design&node-id=3-757&t=DLEHVKOvCOCX29XU-0&scaling=min-zoom&page-id=0%3A1&starting-point-node-id=3%3A757 - * [Estructuras condicionales y repetitivas](https://curriculum.laboratoria.la/es/topics/javascript/02-flow-control/01-conditionals-and-loops) - * [Tomando decisiones en tu código — condicionales - MDN](https://developer.mozilla.org/es/docs/Learn/JavaScript/Building_blocks/conditionals) -

+* Protototipo de alta fidelidad para desktop +https://www.figma.com/proto/Ez5RhXmkRT7wkPVgSUXolv/PAISES?type=design&t=DLEHVKOvCOCX29XU-0&scaling=min-zoom&page-id=0%3A1&starting-point-node-id=1%3A2&node-id=1-2 -- [ ] **Uso de bucles/ciclos (while, for, for..of)** -
Links

+#### 5.3 Testeos de usabilidad - * [Bucles (Loops)](https://curriculum.laboratoria.la/es/topics/javascript/02-flow-control/02-loops) - * [Bucles e iteración - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Loops_and_iteration) -

+Se realizaron varios testeos de usabilidad, donde se le pidió a los diferentes usuarios que realiazaran las siguientes acciones. -- [ ] **Funciones (params, args, return)** +A. Para Mobile +1. Buscar la información de Colombia. +2. Filtrar por contiente Americano y acceder a la información de México. +3. Volver a la página principal. -
Links

+B. Para Mobile +1. Buscar la bandera de Singapure y visualizar su información. +2. Filtar por contiente asiatico. +3. Volver a pagina principal. - * [Funciones (control de flujo)](https://curriculum.laboratoria.la/es/topics/javascript/02-flow-control/03-functions) - * [Funciones clásicas](https://curriculum.laboratoria.la/es/topics/javascript/03-functions/01-classic) - * [Arrow Functions](https://curriculum.laboratoria.la/es/topics/javascript/03-functions/02-arrow) - * [Funciones — bloques de código reutilizables - MDN](https://developer.mozilla.org/es/docs/Learn/JavaScript/Building_blocks/Functions) -

+Los resultados fueron los siguientes: -- [ ] **Pruebas unitarias (unit tests)** +![Tabla de resultados de testeos](/src/imagen/tablatesteos.png) -
Links

+Comentarios - Usuario 1: - * [Empezando con Jest - Documentación oficial](https://jestjs.io/docs/es-ES/getting-started) -

+ * La visualización de las banderas está muy bien junto con el país, pero le colocaria un buscador, para que no me tenga que desplazar por toda pantalla tratando de encontrar el país que busco. + * Al darle click en la bandera, la información visualizada se ve completa y entendible y al darle clik en la x vuelvo al inicio. + * Al filtrar por continente hace falta algun botón o acceso para volver a la página principal y un letrero que se mantenga donde indique en que continente se filtro. + * Me parece que botón de ordenar de a-z se visualice cuando este filtrado por contiente, para hacer visible el cambio. -- [ ] **Módulos de ECMAScript (ES Modules)** -
Links

- * [import - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Statements/import) - * [export - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Statements/export) -

+Comentarios - Usuario 2: -- [ ] **Uso de linter (ESLINT)** + * Falta un botón para regresar a la página de inicio tanto en la tarjeta del país como para salir del filtrado de continente. + * Revizar el tipo de letra del proyecto para darle un estilo propio y que se destaque. + * En la tarjeta de país, se destaque mejor la información más relevante y la que la adicional tenerla en letra más pequeña. + * El borde de las tarjeta redondeado les gusto ya que da un toque de modernismo y nos sugirio que estuviera en un rango de 0-10. + * El color de fondo de las tarjeta sea en matices de blanco para resaltar mejor la información. + * Insertar un hover para que se visualize donde el usuario debe hacer click para obtener la información. + * Las gráficas se manejen fuera de un modal por el tamaño de la data -- [ ] **Uso de identificadores descriptivos (Nomenclatura y Semántica)** -- [ ] **Diferenciar entre expresiones (expressions) y sentencias (statements)** +Comentarios - Usuario 3: -### Control de Versiones (Git y GitHub) + * Me gustaria un botón de busqueda ya que aún no conozco a que pais comerresponde la bandera. + * Falta un botón para regresar al inicio despúes de filtrar por continente. + * Que se visualize un botón de inicio + * Que el título de la página que sea de un tamaño mayor y cambiar su color. + * El borde redondeado del poppop es agradable y nos aconseja cambiar el fondo un poco más claro. y la información obtenida sea remarcada. -- [ ] **Git: Instalación y configuración** -- [ ] **Git: Control de versiones con git (init, clone, add, commit, status, push, pull, remote)** +Comentarios - Usuario 4: -- [ ] **Git: Integración de cambios entre ramas (branch, checkout, fetch, merge, reset, rebase, tag)** + * Se fácilita ver la información al darle clik a la bandera del pais a buscar. + * Al escribir las primeras letras del país a buscar, es fácil visualizar el país. + * Cuando filtro por contiente se visualiza muy bien los países que lo conforman. + * Me gustaria que no tuviera que dar clik en el botón de buscar para obtener la información sino que al ir escribiendo se pueda ir visualizando la busqueda. + * Falta colocar un boton de Inicio para regresar al menú general. -- [ ] **GitHub: Creación de cuenta y repos, configuración de llaves SSH** +Con estos resultados, realizamos los siguientes cambios en nuetra página +1. Se incluyó un botón de Inicio. +2. Se adiciono un buscador en la página principal que nos permita escribir el pais en buscar o sus letras inicales y al darle click en el botón de busqueda nos muestre el país selecionado. +3. Se cambio color de fondo del pop-up y se serlecciono la información más relevante para mostrar. +4. Se cambio el color y estilo de la letra tanto header como en los pop-up. +5. Se colocó una imagen al body -- [ ] **GitHub: Despliegue con GitHub Pages** -
Links

- * [Sitio oficial de GitHub Pages](https://pages.github.com/) -

+### 5.4 Implementación de la Interfaz de Usuario (HTML/CSS/JS) -- [ ] **GitHub: Colaboración en Github (branches | forks | pull requests | code review | tags)** +Nuestra página muestra la data por medio de cartas en la cual se ve bandera y el nombre del continente. +![Intefaza de usuario](/src/imagen/interfaz.png) -### Centrado en el usuario +Puedes buscar un país en especifico dando click sobre la carta correpondiete es decir donde esta su bandera y nombre ó realizar el proceso de busqueda escribiendo en la caja de texto el país a buscar y al hacer clic en el botón de busqueda obtener la card -- [ ] **Diseñar y desarrollar un producto o servicio poniendo a las usuarias en el centro** +![Buscador](/src/imagen/busqueda.png) -### Diseño de producto +![información a la card](/src/imagen/pop-up.png) -- [ ] **Crear prototipos de alta fidelidad que incluyan interacciones** +Tambien puede filtrar por continente y por subregiones; así puede ver la data filtrada. al igual que ordenar la data filtrada de a-z ó por la z-a. -- [ ] **Seguir los principios básicos de diseño visual** +![Filtro por continent!](/src/imagen/EasternEurope.png) + + Y visualizar las tablas de estadísticas al realizar clik en el botón correspondinte. + ![Tablas de área y población](/src/imagen/tablas%20de%20area%20y%20oblacion.png) -### Investigación -- [ ] **Planear y ejecutar testeos de usabilidad de prototipos en distintos niveles de fidelidad** +### 5.5 Pruebas unitarias -
Links

+Se realizarón pruebas unitarias por cada función realizada, a continuación se vera que tienen una cobertura de más del 70% para cada sentencia, función, lines y ramas. - * [Intro a testeos usabilidad](https://coda.io/@bootcamp-laboratoria/contenido-ux/test-de-usabilidad-15) - * [Pruebas con Usuarios 1 — ¿Qué, cuándo y para qué testeamos?](https://eugeniacasabona.medium.com/pruebas-con-usuarios-1-qu%C3%A9-cu%C3%A1ndo-y-para-qu%C3%A9-testeamos-7c3a89b4b5e7) -

+![test](/src/imagen/TEST.png) -## 4. Consideraciones generales -* Este proyecto se debe resolver en duplas. -* El rango de tiempo estimado para completar el proyecto es de 3 a 4 Sprints. -* El proyecto será entregado subiendo tu código a GitHub (commit/push) y la - interfaz será desplegada usando [GitHub Pages](https://pages.github.com/). +## 6. Consideraciones técnicas -## 5. Criterios de aceptación mínimos del proyecto +### 6.1 `src/index.html` -Los criterios para considerar que has completado este proyecto son: +Aquí codeamos el encabezado de la página
( titulo, logo, la barra de navergación), el cuerpo donde mediante el se pudo generar la interfaz con Javascript y el pie de página