• Sobre Nosotros
  • Anunciar
  • Política de privacidad
  • Contacta con nosotros
MasterTrend News
  • Home
    • BLOG
    • SERVICIO TÉCNICO
    • TIENDA
  • Tutoriales
  • Hardware
  • Gaming
  • Móviles
  • Seguridad
  • Windows
  • IA
  • Software
  • Redes
  • Novedades
Sin resultado
Ver todos los resultados
  • Home
    • BLOG
    • SERVICIO TÉCNICO
    • TIENDA
  • Tutoriales
  • Hardware
  • Gaming
  • Móviles
  • Seguridad
  • Windows
  • IA
  • Software
  • Redes
  • Novedades
Sin resultado
Ver todos los resultados
MasterTrend News
Sin resultado
Ver todos los resultados
Inicio Tutoriales

Crea tu primera app web y domina programación sin estrés 🚀💻

MasterTrend Insights por MasterTrend Insights
13 de mayo de 2025
en Tutoriales
Tiempo de lectura:Lectura de 10 minutos
A A
0
Crea tu primera app web notas + contador fácil y rápido
1
COMPARTIDOS
4
Vistas
Share on FacebookShare on Twitter

Contents

  1. Crea tu primera app web: notas + contador fácil y rápido 📝⚡
  2. Lo Que Vas a Construir
  3. Cómo Lo Vas a Construir
  4. La Estructura de la App
  5. Cómo Construir el Tomador de Notas
    1. Construyendo la Estructura con HTML
    2. Haciendo Que Se Vean Bien Con CSS
    3. Agregando Funcionalidad con JavaScript
    4. Publicaciones Relacionadas

Crea tu primera app web: notas + contador fácil y rápido 📝⚡

Iniciar en la programación puede parecer abrumador, entre tantos lenguajes, frameworks y metodologías para considerar. A veces puede parecer más fácil delegar todo a una IA. ¡Tranquilo! Programar para la web puede ser sencillo, divertido y lo mejor de todo, ¡totalmente gratis! 🌐✨

Lo Que Vas a Construir

Siguiendo este tutorial, crearás una aplicación web simple para almacenar notas de texto y contar caracteres y palabras.

La app conservará los datos, así que recordará el texto cuando recargues la página o la vuelvas a abrir. Esto significa que tendrás una forma conveniente de guardar cualquier texto que quieras consultar más adelante, como direcciones, URLs, etc. 📄🔗

Un ejemplo de la simple aplicación web de texto que muestra notas incluyendo un registro de calendario y una lista de URLs.

También cuenta caracteres y palabras, lo cual es una buena introducción al manejo de cadenas (texto). Por supuesto, la app es muy sencilla: ¡ese es el propósito! Pero con este tutorial, aprenderás los conceptos básicos para desarrollar una aplicación web, y luego el mundo será tu ostra. 🦪💻

Cómo Lo Vas a Construir

Aunque las aplicaciones web son muy diversas, por lo general involucran tres tecnologías principales: HTML, CSS, y JavaScript. Es fundamental que comprendas sus roles antes de comenzar. 📚

  • HTML: El Lenguaje de Marcado de Hipertexto te permite definir la estructura de tu contenido. Con él, puedes marcar un texto según su significado, indicando si es un párrafo, un encabezado o un elemento en una lista, por ejemplo.
  • CSS: Las Hojas de Estilo en Cascada te permiten estilizar tu contenido. Usando este lenguaje, puedes colorear un párrafo de verde, hacer que todos tus enlaces sean negritas, o posicionar una barra lateral junto a tu artículo principal. 🎨
  • JavaScript: Con este lenguaje de programación, puedes agregar funcionalidades a tu página web. Puedes hacer que los botones muestren u oculten partes de tu documento al hacer clic, o implementar un procesador de texto completo o un videojuego. 🎮

El sitio web.dev (escrito por miembros del equipo de Chrome) y MDN, la Red de Desarrolladores de Mozilla, son dos excelentes fuentes de información sobre tecnologías web fundamentales.

La página de inicio del sitio web.dev con recursos de aprendizaje para HTML, CSS y JavaScript.

La Estructura de la App

La app que construirás constará de tres archivos simples: index.html, styles.css y script.js. 🗂️

No hay requisitos especiales para ejecutar la app, solo necesitas un navegador web. No hay funcionalidad de backend, por lo que no necesitas un lenguaje de scripting como PHP ni un servidor web local. Una vez que termines, puedes abrir el archivo index.html directamente en tu navegador y todo funcionará. 😊

Es importante mencionar que esta app guarda tu texto sin escribir en un archivo específico en el disco, ya que JavaScript no puede acceder al sistema de archivos. Utiliza el API de Almacenamiento Web, una alternativa poderosa a las cookies. 🍪💾

Cómo Construir el Tomador de Notas

Crea los siguientes tres archivos en el mismo directorio y luego abre index.html en un navegador web. Alternativamente, puedes descargar los archivos de este repositorio de GitHub. 📥

Construyendo la Estructura con HTML

El archivo index.html define la estructura del contenido de tu app en HTML. Incluye referencias a los otros dos archivos para que un navegador pueda combinarlos para el producto final.

Como todos los documentos HTML, la estructura de nivel superior incluye una sección head que contiene metadatos y un body que contiene el contenido real que aparecerá en la página:

html>
<html>
<head>
    ...
head>

<body>
…
body>
html>

Los metadatos en el head son muy breves, con solo un título de página (que aparece en la barra de título de tu navegador) y una referencia al archivo styles.css:

    <title>Textotitle>
    <link rel="stylesheet" href="styles.css" />

El body es más complicado, pero solo hay algunas partes importantes:

    <div id="counter">
        palabras: <span id="words">0span>
        /
        caracteres: <span id="chars">0span>
    div>

<textarea id=«text» autofocus=«1»>textarea>

<script src=«script.js»>script>

El elemento div («división») contiene el conteo de palabras y caracteres de la app. Estará ubicado en la parte superior de la app web y se actualizará cada vez que cambie el texto.

Fíjate en los atributos id, que son vitales para la operación. El valor de un id debe ser único, para que la app pueda usarlo para identificar un elemento específico. Hacer esto puede ayudarnos a estilizar estos elementos y también a apuntarles cuando agreguemos funcionalidad.

El textarea es un elemento de formulario incorporado que te permite escribir texto simple en un navegador. Con el atributo autofocus, estará listo para escribir tan pronto como se cargue la página. Finalmente, la página hace referencia al archivo javascript, script.js.

En este punto, puedes abrir el archivo index.html en un navegador. No hará nada en este momento, y ni siquiera se verá bien, pero es útil verificar tu app en cada etapa para asegurarte de que lo básico funcione como esperas.

Una vista de la aplicación web para tomar notas con estilos por defecto del navegador, mostrando todo agrupado en la esquina superior izquierda.

Haciendo Que Se Vean Bien Con CSS

CSS te permite cambiar el estilo de partes de tu página web, dirigiéndote a esas partes y especificando valores para propiedades como font-size y background-color. Esta app de ejemplo no necesita un diseño muy refinado porque su interfaz es tan básica. Sin embargo, podemos pulir un poco las asperezas con un toque de estilo. 🎨✨

Primero, estiliza el body para definir el diseño general:

body {
    margin: 0;
    padding: 0;
    display: grid;
    min-height: 100vh;
    grid-template-rows: min-content 1fr;
}

Este CSS utiliza la disposición en cuadrícula para posicionar los conteos de palabras y caracteres en una fila estrecha sobre el textarea. La propiedad grid-template-rows especifica que la fila del conteo debe ser lo más corta posible (min-content) y el textarea debe llenar el espacio restante (1fr).

La fila del contador tiene un estilo básico para diferenciarla del resto del texto, principalmente a través de su fondo:

#counter {
    font-family: sans-serif;
    background-color: #f7f7f7;
    text-align: center;
    width: 100%;
    padding: 0.5em 0;
}

Finalmente, el textarea está estilizado para mostrar texto legible con suficiente espacio para respirar. La línea que separa los conteos del texto es en realidad el borde superior de este textarea.

textarea {
    width: 100%;
    height: 100%;
    font-size: 16pt;
    padding: 1em;
    box-sizing: border-box;
    outline: 0;
    border: none;
    border-top: 1px solid #999;
}
La aplicación para tomar notas con estilos personalizados muestra la barra de conteo en la parte superior con un textarea de tamaño completo debajo.

Agregando Funcionalidad con JavaScript

Con la estructura y el estilo en su lugar, estás listo para agregar funcionalidad: el código que hace que esta simple app realmente haga algo. 🛠️

Antes de comenzar a escribir incluso el código más simple, es conveniente entender lo que deseas que haga. En este caso, hay solo un par de requisitos generales:

  • Guardar el texto ingresado y recargarlo cuando sea necesario.
  • Actualizar el conteo de caracteres y palabras para proporcionar estadísticas en tiempo real. 📊

Ambos requisitos implican la actualización de elementos en el documento. Así que el script comienza obteniendo referencias a estos nodos usando el método getElementById:

const words = document.getElementById("words");
const chars = document.getElementById("chars");
const textarea = document.getElementById("text");

Ten en cuenta que words, chars y text son los IDs de sus respectivos elementos en el documento, asignados en el archivo HTML con el atributo id.

A continuación, necesitamos que la app reaccione cuando el texto sea cambiado:

textarea.addEventListener("input", function(ev) {
    localStorage.setItem("text", ev.target.value);
    update_counts(ev.target.value);
});

Un event listener es una función que JavaScript ejecutará automáticamente cuando ocurra un cierto evento. En este caso, anexamos un listener al nodo textarea, el cual se ejecuta cuando se produce el evento «input». Es decir, cuando alguien interactúa con el textarea.

A continuación, usamos el API de Almacenamiento Web para guardar el contenido actual del textarea, que proviene de ev.target.value. En esta estructura, ev es un objeto que representa el evento que disparó el listener, ev.target es el nodo que recibió el evento, y ev.target.value es el texto de ese textarea.

El método setItem toma dos parámetros: un nombre de clave para asociar con los datos y los datos reales a almacenar.

Después, llamamos a update_counts(), pasando el mismo texto. Explicaremos esa función en un momento.

Ahora que estamos guardando el texto, querrás cargarlo nuevamente cuando se abra o se recargue la app. Podemos encargarnos de eso usando otro listener:

window.addEventListener("load", function(ev) {
    var text = localStorage.getItem("text");
    textarea.value = text;
    update_counts(text);
});

Este listener maneja el evento load que ocurre en el objeto window, una representación de nivel superior de la ventana del navegador. Cuando la ventana se carga, una llamada a getItem() devuelve el valor de texto almacenado desde el almacenamiento local. Este código luego establece el valor del textarea al texto cargado y, al igual que el listener anterior, llama a update_counts() con este texto.

El trabajo restante se lleva a cabo en la función update_counts() que se ve así:

function update_counts(text) {
    chars.innerHTML = text.length;
    words.innerHTML = text.split(' ').length;
}

A diferencia de un textarea, el texto normal no tiene una propiedad value, así que establecemos la propiedad innerHTML en su lugar. La propiedad length de una cadena es una propiedad de solo lectura simple que nos da el número de caracteres.

text.split(‘ ‘) divide la cadena en los caracteres de espacio, devolviendo el resultado como un array de strings. Al igual que las cadenas, los arrays tienen una propiedad length que nos da el número de elementos en un array.

Si pruebas este código, sin embargo, podrías notar un par de errores:

  1. No contará una palabra por sí sola en una línea correctamente, ya que no hay caracteres de espacio a su alrededor.
  2. Sin texto en absoluto, informará una sola palabra debido a cómo funciona split.

Para solucionar el primer problema, puedes dividir sobre una expresión regular (\s significa «un carácter en blanco») en lugar de un espacio. Para solucionar el segundo, filtra las cadenas vacías del resultado:

    words.innerHTML = text.split(/\s/).filter(function(n) { return n != ''; }).length;

Si no entiendes completamente esa línea, consulta las páginas de MDN para split y filter.

La aplicación web con texto de ejemplo, mostrando conteos precisos de caracteres y palabras.

Puedes construir muchas aplicaciones web útiles con solo unos pocos archivos. También puedes extender esta simple app de notas para agregar más funcionalidad. Por ejemplo, puedes usar la propiedad window.location para recuperar la URL actual y soportar múltiples notas variando el nombre que pasas a localStorage.setItem. 🗒️🌍

Comparte esto:
49FacebookLinkedInPinterestXRedditTumblrBlueskyThreadsShare
49
ACCIONES

Publicaciones Relacionadas

  • Cómo solucionar el error Algo salió mal en Twitter
  • Cómo descargar vídeos incrustados gratis en 2024
  • Las mejores herramientas de diagnóstico para Windows 10/11
  • AMD Radeon RX 7000 5 y 6 nanómetros
  • Intel Alder Lake P y U aspectos
  • Velocidad con disco solido SSD – PC y Laptop
  • Atlas de Boston Dynamics en acción
  • La estructura de directorios de Linux, explicada
Etiquetas: EvergreenContentTechTips
Publicación Anterior

Cómo Mostrar u Ocultar Bibliotecas en Windows 11: Guía Paso a Paso 🚀🔒

Próxima publicación

Juegos RTS: ¿Por qué los grandes estudios los abandonan? 🎮🔥

MasterTrend Insights

MasterTrend Insights

Nuestro equipo editorial comparte análisis profundos, tutoriales y recomendaciones para que aproveches al máximo tus dispositivos y herramientas digitales.

Próxima publicación
Juegos RTS 5 títulos indie que mantienen viva la estrategia

Juegos RTS: ¿Por qué los grandes estudios los abandonan? 🎮🔥

5 2 votos
Article Rating
Suscribirse
Acceso
Notificar de
guest

guest

0 Comments
Más antiguo
El más nuevo Más votado
Comentarios en línea
Ver todos los comentarios

Mantente Conectado

  • 976 Fans
  • 118 Seguidores
  • 1.4k Seguidores
  • 1.8k Suscriptores

  • Tendencias
  • Comentarios
  • Último
Cómo añadir reloj en el escritorio de Windows 11: ¡3 trucos infalibles!

Cómo añadir reloj en el escritorio de Windows 11: ¡Logra más en minutos! ⏱️

1 de mayo de 2025
12 Mejores Alternativas a Lucky Patcher para Android

Alternativas a Lucky Patcher: ¡12 apps mejores y fáciles! 🎮⚡

12 de mayo de 2025
Cómo utilizar AdGuard DNS en Android en 2024

Cómo utilizar AdGuard DNS en Android en 2025

11 de febrero de 2025
Cómo almacenar objetos en Oblivion Remastered: ¡5 trucos que debes saber! 🗝️💼

Cómo almacenar objetos en Oblivion Remastered sin perder tu botín 💎⚡

1 de mayo de 2025
Funciones de Gmail en Android: Ahorra tiempo con 5 tips

Funciones de Gmail en Android: ¡5 trucos que no conocías! 📱✨

12
Reparacion de placas madres - Reparar MotherBoards

Reparacion de Placas Madres de Notebooks

10
Instalar Windows 11 Home sin Internet

Instalar Windows 11 Home sin Internet

10
Cómo respaldar controladores en Windows 11/10 ¡en 4 pasos!

Cómo respaldar controladores en Windows 11/10 ¡Evita errores! 🚨💾

10
Nombres de usuario aleatorios ¡Protege tu cuenta hoy

Nombres de usuario aleatorios: La clave para evitar hackeos masivos 🛡️🚫

25 de junio de 2025
Desbloquear a Yasuke ¡Descubre el Kofun secreto que cambiará tu juego!

Desbloquear a Yasuke: ¡Descubre el Kofun secreto que te hará dominar! 🥷💥

25 de junio de 2025
Acelera tu laptop 🚀 con 5 apps gratis que debes probar ya

Acelera tu laptop ⚡️ y mejora su rendimiento en 5 pasos fáciles

24 de junio de 2025
Teclas BIOS/UEFI: Las 10 claves para acceder rápido

Teclas BIOS/UEFI: Descubre cómo entrar fácil y sin errores ⚡🔑

24 de junio de 2025

Noticias Recientes

Nombres de usuario aleatorios ¡Protege tu cuenta hoy

Nombres de usuario aleatorios: La clave para evitar hackeos masivos 🛡️🚫

25 de junio de 2025
6
Desbloquear a Yasuke ¡Descubre el Kofun secreto que cambiará tu juego!

Desbloquear a Yasuke: ¡Descubre el Kofun secreto que te hará dominar! 🥷💥

25 de junio de 2025
4
Acelera tu laptop 🚀 con 5 apps gratis que debes probar ya

Acelera tu laptop ⚡️ y mejora su rendimiento en 5 pasos fáciles

24 de junio de 2025
6
Teclas BIOS/UEFI: Las 10 claves para acceder rápido

Teclas BIOS/UEFI: Descubre cómo entrar fácil y sin errores ⚡🔑

24 de junio de 2025
4
MasterTrend News logo

MasterTrend Info es tu fuente de referencia en tecnología: descubre novedades, tutoriales y análisis sobre hardware, software, gaming, móviles e inteligencia artificial. Suscríbete a nuestro boletín y no te pierdas ninguna tendencia.

Síguenos

Browse by Category

  • Gaming
  • Hardware
  • IA
  • Móviles
  • Novedades
  • Redes
  • Seguridad
  • Software
  • Tutoriales
  • Windows

Recent News

Nombres de usuario aleatorios ¡Protege tu cuenta hoy

Nombres de usuario aleatorios: La clave para evitar hackeos masivos 🛡️🚫

25 de junio de 2025
Desbloquear a Yasuke ¡Descubre el Kofun secreto que cambiará tu juego!

Desbloquear a Yasuke: ¡Descubre el Kofun secreto que te hará dominar! 🥷💥

25 de junio de 2025
  • Sobre Nosotros
  • Anunciar
  • Política de privacidad
  • Contacta con nosotros

Copyright © 2025 https://mastertrend.info/ - Reservados todos los derechos. Todas las marcas registradas son propiedad de sus respectivos dueños.

es_ES Spanish
es_ES Spanish
en_US English
pt_BR Portuguese
fr_FR French
it_IT Italian
ru_RU Russian
de_DE German
zh_CN Chinese
ko_KR Korean
ja Japanese
th Thai
hi_IN Hindi
ar Arabic
tr_TR Turkish
pl_PL Polish
id_ID Indonesian
Sin resultado
Ver todos los resultados
  • Gaming
  • Hardware
  • IA
  • Móviles
  • Novedades
  • Redes
  • Seguridad
  • Software
  • Tutoriales
  • Windows

Copyright © 2025 https://mastertrend.info/ - Reservados todos los derechos. Todas las marcas registradas son propiedad de sus respectivos dueños.

Comment Author Info
:wpds_smile::wpds_grin::wpds_wink::wpds_mrgreen::wpds_neutral::wpds_twisted::wpds_arrow::wpds_shock::wpds_unamused::wpds_cool::wpds_evil::wpds_oops::wpds_razz::wpds_roll::wpds_cry::wpds_eek::wpds_lol::wpds_mad::wpds_sad::wpds_exclamation::wpds_question::wpds_idea::wpds_hmm::wpds_beg::wpds_whew::wpds_chuckle::wpds_silly::wpds_envy::wpds_shutmouth:
wpDiscuz
RedditBlueskyXMastodonHacker News
Comparte esto:
MastodonVKWhatsAppTelegramSMSHacker NewsLineMessenger
Su instancia de Mastodon