![\"Un](\"https:\/\/cdn.howtogeek.blog\/wp-content\/uploads\/2025\/01\/web-app-example.webp\" "\\"Un")
<\/figure>\nAdem\u00e1s, la aplicaci\u00f3n realiza un seguimiento de los recuentos de caracteres y palabras, lo que proporciona una excelente introducci\u00f3n a la manipulaci\u00f3n de cadenas. Si bien la aplicaci\u00f3n tiene un dise\u00f1o b\u00e1sico, este tutorial le brinda habilidades fundamentales para el desarrollo de aplicaciones web y le permite acceder a vastas posibilidades en la codificaci\u00f3n.<\/p>\n
C\u00f3mo lo construir\u00e1s<\/h2>\n
Si bien las aplicaciones web pueden variar significativamente, por lo general integran tres tecnolog\u00edas esenciales: HTML, CSS y JavaScript. Cada uno de estos componentes cumple una funci\u00f3n crucial en el desarrollo web:<\/p>\n
- \n
- HTML:<\/strong> Esta es la estructura de su aplicaci\u00f3n web, que establece c\u00f3mo se organiza el contenido. HTML define si el texto es un p\u00e1rrafo, un encabezado o un elemento de lista.<\/li>\n
- CSS:<\/strong> Las hojas de estilo en cascada a\u00f1aden estilo a su contenido, lo que le permite cambiar colores, fuentes y dise\u00f1o. Puede usar CSS para poner elementos en negrita, ajustar bordes y posicionar elementos en la pantalla.<\/li>\n
- JavaScript:<\/strong> este lenguaje de programaci\u00f3n es fundamental para incorporar funcionalidad a su aplicaci\u00f3n web. JavaScript puede crear experiencias interactivas, como mostrar u ocultar elementos o crear aplicaciones complejas como juegos.<\/li>\n<\/ul>\n
![\"La](\"https:\/\/cdn.howtogeek.blog\/wp-content\/uploads\/2025\/01\/web-dev-homepage.webp\" "\\"La")
<\/figure>\nLa estructura de la aplicaci\u00f3n<\/h2>\n
La aplicaci\u00f3n que est\u00e1s a punto de crear consta de tres archivos sencillos:
index.html<\/code>,styles.css<\/code>, yscript.js<\/code>.<\/p>\nNo existen requisitos avanzados para ejecutar esta aplicaci\u00f3n: basta con un navegador web. Como se trata de una aplicaci\u00f3n front-end, no se necesitan lenguajes de programaci\u00f3n back-end como PHP o servidores locales. Una vez completada, simplemente \u00e1brala
index.html<\/code>en su navegador para ver su aplicaci\u00f3n en acci\u00f3n.<\/p>\nEsta aplicaci\u00f3n aprovecha la API de almacenamiento web para guardar texto, lo que le permite retener informaci\u00f3n sin necesidad de escribir en archivos de disco, ya que JavaScript carece de acceso al sistema de archivos.<\/p>\n
C\u00f3mo construir el tomador de notas<\/h2>\n
Comience por crear los tres archivos necesarios en el mismo directorio. Tambi\u00e9n puede descargar los archivos desde este repositorio de GitHub<\/a> .<\/p>\n
Construyendo la estructura con HTML<\/h3>\n
El
index.html<\/code>archivo establece la estructura de contenido de la aplicaci\u00f3n. Incluye referencias a los archivos CSS y JavaScript, lo que permite que el navegador los combine para lograr una experiencia perfecta.<\/p>\nAl igual que cualquier documento HTML, el marco principal consta de una secci\u00f3n de encabezado con metadatos y un cuerpo que contiene el contenido:<\/p>\n
\n<!DOCTYPE html><\/span>
\n<html><\/span>
\n<head><\/span>
\n...<\/head><\/span>
\n<body><\/span>
\n...<\/body><\/span>
\n<\/html><\/span>
\n<\/code><\/p>\nLa secci\u00f3n principal contiene metadatos breves, incluido el t\u00edtulo de la p\u00e1gina (visible en la barra de t\u00edtulo del navegador) y un enlace al
styles.css<\/code>archivo:<\/p>\n
\n<title>Text<\/title><\/span>
\n<link rel=\"stylesheet\"href=\"styles.css\"\/><\/span>
\n<\/code><\/p>\nEl cuerpo est\u00e1 m\u00e1s detallado, incluidos los componentes clave:<\/p>\n
\n<div id=\"counter\"><\/span>
\nwords: <span id=\"words\">0<\/span><\/span>
\n\/ characters: <span id=\"chars\">0<\/span><\/span>
\n<\/div><\/span>
\n<textarea id=\"text\"autofocus=\"1\"><\/textarea><\/span>
\n<script src=\"script.js\"><\/script><\/span>
\n<\/code><\/p>\nEl
div<\/code>elemento, identificado como \u201ccontador\u201d, contiene el recuento de palabras y caracteres. Permanece en la parte superior y se actualiza din\u00e1micamente a medida que cambia el texto.<\/p>\nEs fundamental tener en cuenta el uso de
id<\/code>atributos: sus valores \u00fanicos ayudan a darle estilo a estos elementos y orientarlos seg\u00fan su funcionalidad.<\/p>\nProporciona
textarea<\/code>un \u00e1rea para que los usuarios ingresen texto con elautofocus<\/code>atributo, lo que garantiza que est\u00e9 listo para escribirse al cargar la p\u00e1gina. Por \u00faltimo, el HTML hace referencia alscript.js<\/code>archivo.<\/p>\nEn este punto, \u00e1brelo
index.html<\/code>en un navegador. A\u00fan no funcionar\u00e1 y es posible que no se vea del todo bien, pero es \u00fatil verificar tu progreso en cada etapa.<\/p>\n![\"Una](\"https:\/\/cdn.howtogeek.blog\/wp-content\/uploads\/2025\/01\/web-app-no-style.webp\" "\\"Una")
<\/figure>\nC\u00f3mo hacer que las cosas se vean bien con CSS<\/h3>\n
Si bien esta aplicaci\u00f3n b\u00e1sica no requiere grandes ajustes de dise\u00f1o, podemos mejorar su dise\u00f1o con algo de estilo.<\/p>\n
Primero, establecemos el estilo de la carrocer\u00eda para delinear la apariencia general:<\/p>\n
\nbody {<\/span>
\n margin: 0;<\/span>
\n padding: 0;<\/span>
\n display: grid;<\/span>
\n min-height: 100vh;<\/span>
\n grid-template-rows: min-content 1fr;<\/span>
\n}<\/span>
\n<\/code><\/p>\nEste CSS emplea un dise\u00f1o de cuadr\u00edcula<\/a> para organizar los recuentos de palabras y caracteres en una fila angosta sobre el \u00e1rea de texto. La
grid-template-rows<\/code>propiedad determina que la fila de recuento debe ocupar el menor espacio posible (min-content) mientras que el \u00e1rea de texto llena el espacio restante (1fr).<\/p>\nLa fila del contador recibe un estilo b\u00e1sico para distinguirla del \u00e1rea de texto, principalmente a trav\u00e9s de su fondo:<\/p>\n
\n#counter {<\/span>
\n font-family: sans-serif;<\/span>
\n background-color: #f7f7f7;<\/span>
\n text-align: center;<\/span>
\n width: 100%;<\/span>
\n padding: 0 0.5em 0;<\/span>
\n}<\/span>
\n<\/code><\/p>\nEl \u00e1rea de texto est\u00e1 dise\u00f1ada para garantizar que el texto sea legible, permitiendo un espacio en blanco adecuado:<\/p>\n
\ntextarea {<\/span>
\n width: 100%;<\/span>
\n height: 100%;<\/span>
\n font-size: 16pt;<\/span>
\n padding: 1em;<\/span>
\n box-sizing: border-box;<\/span>
\n outline: 0;<\/span>
\n border: none;<\/span>
\n border-top: 1px solid #999;<\/span>
\n}<\/span>
\n<\/code><\/p>\n![\"La](\"https:\/\/cdn.howtogeek.blog\/wp-content\/uploads\/2025\/01\/web-app-with-style.webp\" "\\"La")
<\/figure>\nA\u00f1adiendo funcionalidad con JavaScript<\/h3>\n
Una vez establecidas las bases, es hora de incorporar funcionalidad a su aplicaci\u00f3n: \u00a1el c\u00f3digo que le da vida!<\/p>\n
Antes de comenzar a codificar, es fundamental definir la funcionalidad prevista. Para esta aplicaci\u00f3n, te centrar\u00e1s en dos objetivos principales:<\/p>\n
- \n
- Persistir y recargar el texto ingresado.<\/li>\n
- Actualice el n\u00famero de caracteres y palabras de forma din\u00e1mica.<\/li>\n<\/ul>\n
Estas funciones requieren actualizaciones de determinados elementos del documento. Por lo tanto, comience por obtener referencias a estos nodos mediante el
getElementById<\/code>m\u00e9todo:<\/p>\n
\nconst words = document.getElementById(\"words\");<\/span>
\nconst chars = document.getElementById(\"chars\");<\/span>
\nconst textarea = document.getElementById(\"text\");<\/span>
\n<\/code><\/p>\nAqu\u00ed,
words<\/code>,chars<\/code>, ytextarea<\/code>corresponden a sus respectivas secciones en el documento, identificadas por sus atributos ID.<\/p>\nA continuaci\u00f3n, introduzca la interactividad configurando la aplicaci\u00f3n para que responda cuando se modifique el texto:<\/p>\n
\ntextarea.addEventListener(\"input\", function(ev) {<\/span>
\n localStorage.setItem(\"text\", ev.target.value);<\/span>
\n update_counts(ev.target.value);<\/span>
\n});<\/span>
\n<\/code><\/p>\nEl
addEventListener<\/code>m\u00e9todo vincula una funci\u00f3n para que se active cuando se produce un evento espec\u00edfico. En este caso, una vez que el usuario interact\u00faa con el \u00e1rea de texto, el evento \u201centrada\u201d activa la funci\u00f3n.<\/p>\nA continuaci\u00f3n, se utiliza la API de almacenamiento web para conservar el contenido actual del \u00e1rea de texto, al que se accede mediante
ev.target.value<\/code>. ElsetItem<\/code>m\u00e9todo asocia una clave con los datos que se van a almacenar.<\/p>\nPara garantizar que el texto se cargue cuando la aplicaci\u00f3n se inicializa o se actualiza, agregue otro detector:<\/p>\n
\nwindow.addEventListener(\"load\", function(ev) {<\/span>
\n var text = localStorage.getItem(\"text\");<\/span>
\n textarea.value = text;<\/span>
\n update_counts(text);<\/span>
\n});<\/span>
\n<\/code><\/p>\nEste detector responde al evento de carga de la ventana. Al cargar la ventana, recupera el texto guardado y establece el valor del \u00e1rea de texto en consecuencia mientras invoca
update_counts()<\/code>para actualizar los recuentos de palabras y caracteres.<\/p>\nLa funcionalidad restante reside en la
update_counts()<\/code>funci\u00f3n, que tiene este aspecto:<\/p>\n
\nfunction update_counts(text) {<\/span>
\n chars.innerHTML = text.length;<\/span>
\n words.innerHTML = text.split(' ').length;<\/span>
\n}<\/span>
\n<\/code><\/p>\nA diferencia de un \u00e1rea de texto, el texto sin formato no tiene un atributo de valor; por lo tanto,
innerHTML<\/code>se utiliza la propiedad en su lugar. Lalength<\/code>propiedad de una cadena recupera el recuento total de caracteres.<\/p>\nPara dividir el texto en palabras, utilizamos
text.split(' ')<\/code>, que divide la cadena en cada car\u00e1cter de espacio, lo que produce una matriz de palabras. La propiedad length de la matriz resultante proporciona la cantidad de palabras.<\/p>\nSin embargo, es posible que encuentres un par de desaf\u00edos con este c\u00f3digo:<\/p>\n
- \n
- No contar\u00e1 correctamente palabras individuales en una l\u00ednea sin caracteres de espacio alrededor.<\/li>\n
- Si no hay texto presente, se informar\u00e1 incorrectamente una sola palabra debido a su forma
split<\/code>de operar.<\/li>\n<\/ol>\nPara solucionar el primer problema, considere dividir en una expresi\u00f3n regular para tener en cuenta los caracteres de espacio en blanco:
\\s<\/code>. Para solucionar el segundo problema, filtre las cadenas vac\u00edas:<\/p>\n
\n words.innerHTML = text.split(\/\\s\/).filter(function(n) { return n! = ''; }).length;<\/span>
\n<\/code><\/p>\n![\"La](\"https:\/\/cdn.howtogeek.blog\/wp-content\/uploads\/2025\/01\/web-app-final.webp\" "\\"La")
<\/figure>\n\u00a1Se pueden crear aplicaciones web \u00fatiles con tan solo unos pocos archivos b\u00e1sicos! Puede ampliar esta sencilla aplicaci\u00f3n para tomar notas integrando funciones adicionales, como emplear la propiedad window.location<\/a> para acceder a URL o permitir guardar varias notas variando los nombres que se pasan a
localStorage.setItem<\/code>.<\/p>\nInformaci\u00f3n adicional<\/h3>\n
1. \u00bfCu\u00e1les son los requisitos previos para este tutorial de aplicaci\u00f3n web?<\/strong><\/h4>\n
Todo lo que necesitas es un conocimiento b\u00e1sico de HTML, CSS y JavaScript. Tambi\u00e9n te resultar\u00e1n \u00fatiles herramientas como un editor de texto (por ejemplo, VSCode) y un navegador web.<\/p>\n
2. \u00bfPuedo modificar esta aplicaci\u00f3n web para agregar m\u00e1s funciones?<\/strong><\/h4>\n
\u00a1Por supuesto! Este tutorial proporciona una base. \u00a1Puedes agregar funciones como guardar varias notas, categorizar notas o incluso implementar una funci\u00f3n de b\u00fasqueda!<\/p>\n
3. \u00bfC\u00f3mo funciona la API de almacenamiento web?<\/strong><\/h4>\n
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\u00e9s de cerrar el navegador, lo que facilita su recuperaci\u00f3n posterior.<\/p>\n
- CSS:<\/strong> Las hojas de estilo en cascada a\u00f1aden estilo a su contenido, lo que le permite cambiar colores, fuentes y dise\u00f1o. Puede usar CSS para poner elementos en negrita, ajustar bordes y posicionar elementos en la pantalla.<\/li>\n