Comenzar tu aventura en la programación puede parecer abrumador en medio de una abrumadora variedad de lenguajes y marcos de trabajo. ¡Incluso podrías pensar en dejar que una IA se encargue de todo! Sin embargo, ¡programar para la web puede ser emocionante, accesible y completamente gratis!
Lo que construirás
En este tutorial, creará una aplicación web sencilla diseñada para almacenar notas de texto mientras cuenta los caracteres y las palabras dentro de esas notas.
Esta aplicación guarda datos de forma persistente, lo que le permite recuperar texto incluso después de actualizar la página o volver a abrirla. Es una solución práctica para mantener un acceso rápido a texto importante, ya sean direcciones, URL o cualquier otra cosa.
Además, la aplicación realiza un seguimiento de los recuentos de caracteres y palabras, lo que proporciona una excelente introducción a la manipulación de cadenas. Si bien la aplicación tiene un diseño básico, este tutorial le brinda habilidades fundamentales para el desarrollo de aplicaciones web y le permite acceder a vastas posibilidades en la codificación.
Cómo lo construirás
Si bien las aplicaciones web pueden variar significativamente, por lo general integran tres tecnologías esenciales: HTML, CSS y JavaScript. Cada uno de estos componentes cumple una función crucial en el desarrollo web:
- HTML: Esta es la estructura de su aplicación web, que establece cómo se organiza el contenido. HTML define si el texto es un párrafo, un encabezado o un elemento de lista.
- CSS: Las hojas de estilo en cascada añaden estilo a su contenido, lo que le permite cambiar colores, fuentes y diseño. Puede usar CSS para poner elementos en negrita, ajustar bordes y posicionar elementos en la pantalla.
- JavaScript: este lenguaje de programación es fundamental para incorporar funcionalidad a su aplicación web. JavaScript puede crear experiencias interactivas, como mostrar u ocultar elementos o crear aplicaciones complejas como juegos.
La estructura de la aplicación
La aplicación que estás a punto de crear consta de tres archivos sencillos: index.html, styles.css, y script.js.
No existen requisitos avanzados para ejecutar esta aplicación: basta con un navegador web. Como se trata de una aplicación front-end, no se necesitan lenguajes de programación back-end como PHP o servidores locales. Una vez completada, simplemente ábrala index.htmlen su navegador para ver su aplicación en acción.
Esta aplicación aprovecha la API de almacenamiento web para guardar texto, lo que le permite retener información sin necesidad de escribir en archivos de disco, ya que JavaScript carece de acceso al sistema de archivos.
Cómo construir el tomador de notas
Comience por crear los tres archivos necesarios en el mismo directorio. También puede descargar los archivos desde este repositorio de GitHub .
Construyendo la estructura con HTML
El index.htmlarchivo establece la estructura de contenido de la aplicación. Incluye referencias a los archivos CSS y JavaScript, lo que permite que el navegador los combine para lograr una experiencia perfecta.
Al igual que cualquier documento HTML, el marco principal consta de una sección de encabezado con metadatos y un cuerpo que contiene el contenido:
<!DOCTYPE html>
<html>
<head>
...</head>
<body>
...</body>
</html>
La sección principal contiene metadatos breves, incluido el título de la página (visible en la barra de título del navegador) y un enlace al styles.cssarchivo:
<title>Text</title>
<link rel="stylesheet"href="styles.css"/>
El cuerpo está más detallado, incluidos los componentes clave:
<div id="counter">
words: <span id="words">0</span>
/ characters: <span id="chars">0</span>
</div>
<textarea id="text"autofocus="1"></textarea>
<script src="script.js"></script>
El divelemento, identificado como “contador”, contiene el recuento de palabras y caracteres. Permanece en la parte superior y se actualiza dinámicamente a medida que cambia el texto.
Es fundamental tener en cuenta el uso de idatributos: sus valores únicos ayudan a darle estilo a estos elementos y orientarlos según su funcionalidad.
Proporciona textareaun área para que los usuarios ingresen texto con el autofocusatributo, lo que garantiza que esté listo para escribirse al cargar la página. Por último, el HTML hace referencia al script.jsarchivo.
En este punto, ábrelo index.htmlen un navegador. Aún no funcionará y es posible que no se vea del todo bien, pero es útil verificar tu progreso en cada etapa.
Cómo hacer que las cosas se vean bien con CSS
Si bien esta aplicación básica no requiere grandes ajustes de diseño, podemos mejorar su diseño con algo de estilo.
Primero, establecemos el estilo de la carrocería para delinear la apariencia general:
body {
margin: 0;
padding: 0;
display: grid;
min-height: 100vh;
grid-template-rows: min-content 1fr;
}
Este CSS emplea un diseño de cuadrícula para organizar los recuentos de palabras y caracteres en una fila angosta sobre el área de texto. La grid-template-rowspropiedad determina que la fila de recuento debe ocupar el menor espacio posible (min-content) mientras que el área de texto llena el espacio restante (1fr).
La fila del contador recibe un estilo básico para distinguirla del área de texto, principalmente a través de su fondo:
#counter {
font-family: sans-serif;
background-color: #f7f7f7;
text-align: center;
width: 100%;
padding: 0 0.5em 0;
}
El área de texto está diseñada para garantizar que el texto sea legible, permitiendo un espacio en blanco adecuado:
textarea {
width: 100%;
height: 100%;
font-size: 16pt;
padding: 1em;
box-sizing: border-box;
outline: 0;
border: none;
border-top: 1px solid #999;
}
Añadiendo funcionalidad con JavaScript
Una vez establecidas las bases, es hora de incorporar funcionalidad a su aplicación: ¡el código que le da vida!
Antes de comenzar a codificar, es fundamental definir la funcionalidad prevista. Para esta aplicación, te centrarás en dos objetivos principales:
- Persistir y recargar el texto ingresado.
- Actualice el número de caracteres y palabras de forma dinámica.
Estas funciones requieren actualizaciones de determinados elementos del documento. Por lo tanto, comience por obtener referencias a estos nodos mediante el getElementByIdmétodo:
const words = document.getElementById("words");
const chars = document.getElementById("chars");
const textarea = document.getElementById("text");
Aquí, words, chars, y textareacorresponden a sus respectivas secciones en el documento, identificadas por sus atributos ID.
A continuación, introduzca la interactividad configurando la aplicación para que responda cuando se modifique el texto:
textarea.addEventListener("input", function(ev) {
localStorage.setItem("text", ev.target.value);
update_counts(ev.target.value);
});
El addEventListenermétodo vincula una función para que se active cuando se produce un evento específico. En este caso, una vez que el usuario interactúa con el área de texto, el evento “entrada” activa la función.
A continuación, se utiliza la API de almacenamiento web para conservar el contenido actual del área de texto, al que se accede mediante ev.target.value. El setItemmétodo asocia una clave con los datos que se van a almacenar.
Para garantizar que el texto se cargue cuando la aplicación se inicializa o se actualiza, agregue otro detector:
window.addEventListener("load", function(ev) {
var text = localStorage.getItem("text");
textarea.value = text;
update_counts(text);
});
Este detector responde al evento de carga de la ventana. Al cargar la ventana, recupera el texto guardado y establece el valor del área de texto en consecuencia mientras invoca update_counts()para actualizar los recuentos de palabras y caracteres.
La funcionalidad restante reside en la update_counts()función, que tiene este aspecto:
function update_counts(text) {
chars.innerHTML = text.length;
words.innerHTML = text.split(' ').length;
}
A diferencia de un área de texto, el texto sin formato no tiene un atributo de valor; por lo tanto, innerHTMLse utiliza la propiedad en su lugar. La lengthpropiedad de una cadena recupera el recuento total de caracteres.
Para dividir el texto en palabras, utilizamos text.split(' '), que divide la cadena en cada carácter de espacio, lo que produce una matriz de palabras. La propiedad length de la matriz resultante proporciona la cantidad de palabras.
Sin embargo, es posible que encuentres un par de desafíos con este código:
- No contará correctamente palabras individuales en una línea sin caracteres de espacio alrededor.
- Si no hay texto presente, se informará incorrectamente una sola palabra debido a su forma
splitde operar.
Para solucionar el primer problema, considere dividir en una expresión regular para tener en cuenta los caracteres de espacio en blanco: \s. Para solucionar el segundo problema, filtre las cadenas vacías:
words.innerHTML = text.split(/\s/).filter(function(n) { return n! = ''; }).length;
¡Se pueden crear aplicaciones web útiles con tan solo unos pocos archivos básicos! Puede ampliar esta sencilla aplicación para tomar notas integrando funciones adicionales, como emplear la propiedad window.location para acceder a URL o permitir guardar varias notas variando los nombres que se pasan a localStorage.setItem.
Información adicional
1. ¿Cuáles son los requisitos previos para este tutorial de aplicación web?
Todo lo que necesitas es un conocimiento básico de HTML, CSS y JavaScript. También te resultarán útiles herramientas como un editor de texto (por ejemplo, VSCode) y un navegador web.
2. ¿Puedo modificar esta aplicación web para agregar más funciones?
¡Por supuesto! Este tutorial proporciona una base. ¡Puedes agregar funciones como guardar varias notas, categorizar notas o incluso implementar una función de búsqueda!
3. ¿Cómo funciona la API de almacenamiento web?
La API de almacenamiento web permite que las aplicaciones web almacenen datos en el navegador. Almacena datos en pares clave-valor que persisten incluso después de cerrar el navegador, lo que facilita su recuperación posterior.
Artículos relacionados:
Elegir una sombrilla solar en lugar de paneles solares adicionales para soluciones energéticas
14:34
Guía paso a paso para duplicar la pantalla con AirPlay en una Mac
14:20
Cómo transmitir Plex o Jellyfin directamente desde tu terminal
14:05
Deja una respuesta