Analizador de texto

Índice

• 1. Consideraciones generales
• 2. Preámbulo
• 3. Resumen del proyecto
• 4. Funcionalidades
• 5. Boilerplate
• 6. Diseño
• 7. Pruebas

---

1. Consideraciones generales

• Este proyecto ha sido desarrollado de manera individual, por Milen Palma Gutiérrez.
• El proceso de desarrollo fue de 4 sprints, de 1 semana cada uno.

2. Preámbulo

Credito: Foto de ethan en Unsplash

Un analizador de texto es una aplicación para extraer información útil de un texto utilizando diversas técnicas, como el procesamiento del lenguaje natural (NLP), el aprendizaje automático (ML) y el análisis estadístico. Estas aplicaciones pueden proporcionar una variedad de métricas que brindan información básica sobre la longitud y la estructura del texto como por ejemplo, el conteo de palabras, el conteo de caracteres, el conteo de oraciones y el conteo de párrafos. Otras métricas incluyen el análisis de sentimientos, que utiliza técnicas de NLP para determinar el tono general positivo, negativo o neutral del texto, y el análisis de legibilidad, que utiliza algoritmos para evaluar la complejidad y la legibilidad del texto.

En general, las aplicaciones de análisis de texto brindan información valiosa y métricas sobre los textos que pueden ayudar a las usuarias a tomar decisiones informadas y sacar conclusiones significativas. Mediante el uso de estas herramientas de análisis, las usuarias pueden obtener una comprensión más profunda de los textos.

3. Resumen del proyecto

El presente proyecto, fue realizado en base a ciertos parámetros y objetivos indicados por Laboratoria. El proyecto "Text Analyzer", consta de una aplicación web que permite que lxs usuarixs puedan analizar un texto en el navegador mostrando una serie de indicadores y métricas específicas sobre caracteres, letras, números, etc. Que hayan sido enviadas como input por ellxs. El programa utiliza HTML, CSS y JavaScript.

4. Funcionalidades

El listado de funcionalidades es el siguiente:

1. La aplicación permite a lxs usuarixs ingresar un texto, escribiéndolo en un cuadro de texto.

2. La aplicación calcula las siguientes métricas, actualizando el resultado en tiempo real, a medida que la usuaria escribe su texto:

   • Recuento de palabras: la aplicación cuenta el número de palabras en el texto de entrada y muestra este recuento a la usuaria.
   • Recuento de caracteres: la aplicación cuenta el número de caracteres en el texto de entrada, incluidos espacios y signos de puntuación, y muestra este recuento a la usuaria.
   • Recuento de caracteres excluyendo espacios y signos de puntuación: la aplicación cuenta el número de caracteres en el texto de entrada, excluyendo espacios y signos de puntuación, y muestra este recuento a la usuaria.
   • Recuento de números: la aplicación cuenta cúantos números hay en el texto de entrada y muestra este recuento a la usuaria.
   • Suma total de números: la aplicación suma todos los números que hay en el texto de entrada y muestra el resultado a la usuaria.
   • Longitud media de las palabras: la aplicación calcula la longitud media de las palabras en el texto de entrada y se la muestra a la usuaria.

3. La aplicación permite limpiar el contenido de la caja de texto haciendo clic en el botón "Limpiar".

5. Boilerplate

La lógica del proyecto está implementada en JavaScript puro.

Como se menciona anteriormente, nuestra aplicación fue desarrollada desde ciertos parámetros e instrumentos dados por Laboratoria. El principal instrumento dado fue el presente repositorio base, que, desde su fork empezamos a modificar. A su vez, este repositorio contiene un boilerplate con tests (pruebas). Un boilerplate es la estructura básica de un proyecto que sirve como un punto de partida con archivos y configuración inicial de dependencias y tests.

El boilerplate dado contiene la siguiente estructura:

./
├── .babelrc
├── .editorconfig
├── .eslintrc
├── .gitignore
├── README.md
├── package.json
├── src
│   ├── analyzer.js
│   ├── index.html
│   ├── index.js
│   └── style.css
└── test
    ├── .eslintrc
    └── analyzer.spec.js

Descripción de scripts / archivos

• README.md: Modificado. web, así como una introducción a la aplicación, su funcionalidad y decisiones de diseño que tomaron.
• .github/workflows: No modificado.
• docs/images: Modificado. contiene las imagenes de este README.
• read-only/: No modificado. Esta carpeta contiene las pruebas de criterios mínimos de aceptación y end-to-end.
• src/index.html: Modificado. HTML de la aplicación.
• src/style.css: Modificado. Style en CSS de la aplicación.
• src/analyzer.js: Modificado. Objeto analyzer.
• src/index.js: Modificado. Manipulación del DOM, invocación de los métodos del objeto analyzer.
• test/analyzer.spec.js: No modificado. Este archivo contiene las pruebas unitarias para los métodos del objeto analyzer.

---

Deploy

Nuestro Analizador de texto está desplegado en la web, gracias a Github Pages: https://milenpg.github.io/DEV013-text-analyzer/

6. Diseño

Las decisiones de diseño fueron tomadas con una intención minimalista, buscando un producto de estética simple, funcional y apacible. Siguiendo la idea de no saturar visualmente al usuario y poner foco en la interaccción, se optó por el contraste de diferentes tonos de gris, blanco y azul, color que, dicen, contribuye con una atmósfera visual de concentración. Por su parte, la posición del cuadro de texto al centro, permite que este elemento interactivo tome un rol protagónico en la página. Para lograr el resultado deseado en cuanto a las posiciones objetos, fue fundamental el uso de Flexbox.

Diseño de baja fidelidad

Si bien la idea original, que se ilustra en el bosquejo a continuación, fue transformándose en el camino, persistieron atributos relativos a la posición de los objetos/cajas y paleta de colores.

Diseño de alta fidelidad

El diseño digital fue elaborado en un tablero de Canva y fue evolucionando con el tiempo, hasta lo que ven hoy.

7. Criterios de aceptación mínimos del proyecto

A continuación, se muestran los criterios de aceptación mínimos del proyecto relacionados con cada objetivo de aprendizaje.

HTML

• Uso de HTML semántico

  • La aplicación tiene un encabezado conformado por un <header> que es padre de un <h1> con texto Analizador de texto. Para que puedas practicar más, estos elementos no pueden tener atributos id, ni name, ni class.

  • La aplicación usa un <textarea> con un el atributo name en el valor user-input para permitir a la usuaria ingresar un texto. Para que puedas practicar más, este elemento no puede tener atributos id, ni class.

  • La aplicación usa un <ul> con 6 hijos <li>, uno para mostrar cada métrica. Para que puedas practicar más, estos elementos no pueden tener atributos id ni name ni hijos.

  • El <li> para mostrar el recuento de palabras debe tener un atributo data-testid con valor word-count.

  • El <li> para mostrar el recuento de caracteres debe tener un atributo data-testid con valor character-count.

  • El <li> para mostrar el recuento de caracteres excluyendo espacios y signos de puntuación debe tener un atributo data-testid con valor character-no-spaces-count.

  • El <li> para mostrar el recuento de números debe tener un atributo data-testid con valor number-count.

  • El <li> para mostrar la suma total de números debe tener un atributo data-testid con valor number-sum.

  • El <li> para mostrar la longitud media de palabras debe tener un atributo data-testid con valor word-length-average.

  • La aplicación tiene un pie de página conformado por un <footer> que es padre de un <p> que tiene como texto el nombre de la estudiante desarrolladora de la aplicación. Para que puedas practicar más, estos elementos no pueden tener atributos id, ni name, ni class.

  • La aplicación usa un <button> con el atributo id en el valor reset-button para permitir a la usuaria, mediante un clic, limpiar el contenido de la caja de texto.

CSS

• Uso de selectores de CSS

  • La aplicación usa selectores CSS de tipo para darle estilo al <header> y al <footer>.

  • La aplicación usa selectores CSS de class para darle estilo a los <li> descrito anteriormente.

  • La aplicación usa selectores de atributo para darle estilo al <textarea> usando el atributo name.

  • La aplicación usa selectores CSS de ID para darle estilo al <button> con el atributo id en el valor reset-button.

• Modelo de caja (box model): border, margen, padding

  • Las clases css de los <li> hijos del <ul> definen un estilo usando las propiedades del modelo de caja, (background, border, margin, padding).

Web APIs

• Uso de selectores del DOM

  • La aplicación usa el selector del DOM querySelector.

  • La aplicación usa el selector del DOM getElementById.

• Manejo de eventos del DOM (listeners, propagación, delegación)

  • La aplicación registra un Event Listener para escuchar el evento input del <textarea> para actualizar las métricas cuando se haga escriba en el cuadro de texto.

  • La aplicación registra un Event Listener para escuchar el evento click del <button> que limpia el contenido de la caja de texto.

• Manipulación dinámica del DOM

  • La aplicación actualiza el atributo textContent o innerHTML de los <li> que mostrar las métricas del texto.

JavaScript

• Tipos de datos primitivos

  • La aplicación convierte valores tipo string a tipo number.

• Strings (cadenas de caracteres)

  • La aplicación usa métodos para manipular strings como split, trim o replace.

• Variables (declaración, asignación, ámbito)

  • La aplicación declara variables con let y const.

  • La aplicación NO declara variables con var.

• Uso de condicionales (if-else, switch, operador ternario, lógica booleana)

  • La aplicación usa el statement if..else para evaluar condiciones.

• Uso de bucles/ciclos (while, for, for..of)

  • La aplicación usa el statement for para crear un bucle.

• Funciones (params, args, return)

  • El objeto analyzer contiene un método getWordCount para calcular el recuento de palabras de un texto.

  • El objeto analyzer contiene un método getCharacterCount para calcular el recuento de caracteres de un texto.

  • El objeto analyzer contiene un método getCharacterCountExcludingSpaces para calcular el recuento de caracteres excluyendo espacios y signos de puntuación de un texto.

  • El objeto analyzer contiene un método getNumbersCount para contar cúantos números hay en un texto.

  • El objeto analyzer contiene un método getNumbersSum para la suma longitud media de los números en un texto.

  • El objeto analyzer contiene un método getAverageWordLength para calcular la longitud media de las palabras en un texto.

• Pruebas unitarias (unit tests)

  • Se pasan todas las pruebas unitarias.

• Módulos de ECMAScript (ES Modules)

  • La aplicación usan import y export para importar y exportar valores desde un modulo JavaScript.

• Uso de linter (ESLINT)

  • Al ejecutar el linter no se muestran errores de formato y estilo.

• Uso de identificadores descriptivos (Nomenclatura y Semántica)

  • En el código se utilizan identificadores descriptivos para variables y funciones.

Control de Versiones (Git y GitHub)

• GitHub: Creación de cuenta y repos, configuración de llaves SSH

  • La estudiante creó una cuenta en Github.

  • La estudiante configuró su cuenta de Github con una llave SSH.

• Git: Control de versiones con git (clone, add, commit, push)

  • La estudiante creó un fork para su proyecto.

  • La estudiante clonó su repositorio usando una llave SSH.

  • La estudiante creó commits y los guardó en Github.

• GitHub: Despliegue con GitHub Pages

  • La aplicación está desplegada en Github Pages.

Centrado en la usuaria

• Diseñar y desarrollar un producto o servicio poniendo a las usuarias en el centro

Diseño de producto

• Diseñar en distintos niveles de fidelidad

  • La estudiante creó prototipos de baja fidelidad para la UI (interfaz gŕafica).

• Seguir los principios básicos de diseño visual

  • Se tuvieron en cuenta las reglas básica del diseño visual para diseñar la UI (interfáz gráfica).