Escribamos un editor de texto.
Además de Flash / applets, * todo * que ves con los ojos dentro de un navegador es una combinación de Javascript, HTML y CSS. Esto se aplica a una página web estática simple a una aplicación web interactiva complicada como gmail.
HTML le dice al navegador cuáles son los contenidos de la página web que debe “dibujar”.
CSS comprende las reglas estilísticas de cómo debe verse ese contenido, como el relleno y los márgenes, la fuente, etc.
Javascript es un código ejecutable que puede manipular o generar HTML, cambiando así el contenido de la página web de forma dinámica. Esto le da la sensación de “aplicación”.
- ¿Los tweets con enlaces o tweets sin enlaces son más importantes para usted para su investigación?
- ¿Cuál es el mejor marco web para un backend web (API) de subproceso único?
- ¿Qué debo elegir para una aplicación web altamente personalizada en R, Shiny vs. OpenCPU?
- ¿Cuáles son las ventajas y desventajas entre cobrar a los usuarios de forma continua y el pago único a tanto alzado para una cuenta premium bajo un modelo freemium?
- ¿Cuál es la mejor aplicación de planificación de eventos en la web?
Página web estática
Te daré un ejemplo muy simple de una página en blanco que dice “Hola, mundo” en rojo. Este es un seudocódigo y no se ejecutará en el navegador.
HTML : Hola, mundo
CSS : cuerpo {color: rojo}
Javascript : nada, por ahora
Como puede ver, HTML es texto “estático” que le dice al navegador que en el contenido de de esta página, se muestra “Hola, mundo”.
CSS le dice al navegador que cualquier cosa dentro del bloque debe tener un color de fuente rojo. Entonces “Hola, mundo” aparecerá en rojo.
En este momento esta es una página web estática, por lo que no incluí Javascript.
Página web dinámica
Ahora, para mostrarle el poder de Javascript para hacer que esta página web sea dinámica. Una vez más, estoy escribiendo súper pseudocódigo porque soy vago.
HTML : Hola, mundo
CSS : cuerpo {color: rojo}
Javascript : (súper pseudocódigo): espera 5 segundos. Después de 5 segundos, cambie el contenido de a “Mira, he cambiado”, cambie el color del cuerpo CSS a “azul”.
Cuando abra esta página web por primera vez, verá “Hola, mundo” en rojo, como en el ejemplo de la página web estática. Después de 5 segundos, verá que el texto cambia a “Mira, he cambiado”, y su color cambia a azul.
Hacer un editor de texto
El ejemplo dinámico anterior fue extremadamente trivial. Démosle, conceptualmente, un ejemplo más profundo de cómo hacer un editor de texto como Google doc. No voy a escribir ningún código aquí, pero describiré el concepto de usar HTML, CSS y Javascript para crear una aplicación web de editor de texto simple.
HTML :
CSS : cuerpo {color de fondo: negro}; #pad {ancho: 600; altura: 800; color de fondo: blanco; relleno: 20px};
Javascript : (superpseudocódigo):
Detectar tecla de usuario presione “A” – “z”:
Verifique la longitud del tramo actual “línea N”, donde N es el número de línea actual que se está escribiendo. Por ejemplo, cuando la página se abre por primera vez, N es 1. Si la extensión “línea N” es más larga que 560 px (ancho – relleno * 2), cree una nueva extensión “línea N + 1” en div “relleno” y márquelo como tramo actual.
agregar carácter al tramo actual.
En el ejemplo anterior, tiene una almohadilla blanca de 600 x 800 en una página web completamente negra. A medida que el usuario comienza a escribir caracteres “A” – “z”, agregará el carácter al final del primer tramo – línea1 – del editor. Cuando la primera línea es demasiado larga, creará un nuevo tramo – línea2 – para que debajo de ella comience su próxima línea, y así sucesivamente.
Este editor de texto es inútil para cualquiera, pero es un comienzo. Con Javascript, puede agregar un cursor parpadeante, ajuste de palabras, operaciones de eliminación, deshacer, resaltado en negrita, etc. El concepto básico está ahí, el resto son solo cientos de horas de trabajo, que le dejo a usted.
