Proyectos / Utilizar la API de notificaciones
Construir la instancia Notification
\Veamos entonces la estructura de a API, que debe estar instanciada en
una variable JS, tal como se observa en el siguiente cédigo’
var notificacion = new Notification(titulo, opciones);
Tal como se indica en la tabla anterior, titulo corresponde a la propiedad fitle,
la cual se pasa como un parémetro.
Luego encontramos el siguiente parémetro, opciones, donde enviaremos el resto
de las propiedades que terminan de dar forma a la ventana Notification.
Continuemos con el cédigo JS. Debajo del bloque de cédigo anterior, donde validamos
que el navegador web soporte notificaciones, creamos la siguiente funcién:
function notificame() {
if (1(“Notification” in window)) {
alert(“La versién de su navegador web no soporta notificaciones web.”);
+
else if (Notification. permission === “granted”)
var imagen = ‘/images/[Link]? ;
var texto = ‘Has creado exitosamente tu primera notificacién web.” ;
var titulo = ‘Notificaciones web’;
var notificacion = new Notification(titulo, {
body: texto,
icon: imagen});
Laestructura JavaScript final debe quedar tal como la muestra la siguiente imagen:
3S indexjs-% — indexhtml
Notification. requestPermission() then(function(result) {
Roce:
function natificame() {
if (I(*Natification® in windon)) {
ert ("La versién de su navegador web no soporta notificaciones web.");
else if ([Link] === “granted")
var imagen = '/images/logo-footer-transparente-128x128 png
var texto = ‘Has creado exitosamente tu prinera notificacién web.’;
Notificaciones web";
eu Notification(titule, {
onsole. log('Notificacién emitida..
72|_- redeserscom Enel bloque de cédigo anterior,
validamos que el usuario haya
aceptado recibir notificaciones
en su navegador. Luego
creamos la variable imagen,
donde establecemos un grafico
de 128x128 0 256x258 pixeles
‘como icono que se mostrara
en la notificacién. Seguido
aesto, creamos la variable
texto, donde escribimos el
‘mensaje que se visualizara, el guardar todos los archivos de _verifiquemos que el botén
titulo que tendré la notificacién este proyecto yejecutarloenel creado con HTML contenga
[Link], la invocacién navegador web para probar el _el Ilamadoa la funcién JS
ala misma. Solo nos queda resultado. Antes de la prueba, _notificame(),
Notificaciones temporales
Si acorde al tipo de notificacién que disparamos por cédigo, queremos evitar que el usuario
deba cerrarla para que desaparezca de la pantalla, podemos optar por utilizar la funcién JS
‘setTimeout(), de modo que esta se cierre al cabo de unos segundos. E! codigo para hacerlo es:
setTimeout([Link](notificacion), 4000)
En este caso, la notificacién se cerrard a los 4 segundos. Podemos cambiar el valor 4000 por cualquier
oto, dentro de los parametros 1000 a 60000 (desde 1 segundo como minimo, hasta 60 segundos
‘como maximo). Sino especificamos un tiempo determinaco mediante setTimeoutt), las nolificaciones.
desaparecen de la pantalla a los 20 segundos (aproximados) de haberse ejecutado.
Probar el bloqueo [€ > ¢ Wrarosser
Para probar el funcionamiento
de las notificaciones debemos
cambiar el pardmetro
‘Tu conesin con este sitio web no es
segura
determinado de éstas.
Realizamos esto pulsando cieniieafecticanaeenaiiay =
el icono Informacién o en la Sone
leyenda No seguro, ubicada a
la izquierda de la URL del sitio fy Notifeaciones ia 2
web en cuestién, y seleccionado ies
luego Notificaciones/Bloquear. = osm
Bogue
1% Cogan dl so web
Es posible descargar el archivo Notificaciones [Link],
correspondiente a este proyecto, desde el sitio web de material
adicional que acompajia a esta obra.
reduserscom | 73 JavaScript > Proyectos
Almacenar datos localmente
de almacenar datos del lado del usuario. Es por eso que, en esta seccion,
g Una de las premisas mas importantes de la Web moderna es la capacidad
veremos qué opciones de almacenamiento local tenemos y como trabajar
con ellas, entre otras cosas, para reducir el consumo de datos.
Enllos inicio de la Web, practicamente la unica
forma de almacenar datos del lado del usuario
era utilizando las conocidas cookies. Esta opcién
permitia, por ejemplo, conocer cuantas veces un
usuario nos habia visitado, quardar su nombre u
otro dato de importancia, y recuperarlo cuando
volvia a visitar la web, Las cookies nos ofrecian,
entre otras cosas, el poder contar con soporte
heredado, hacer que los datos fueran persistentes
y poner una fecha de caducidad.
Como desventaja, cada dominio almacena sus
propias cookies en una tinica cadena, lo cual
complica la posibilidad de analizar claramente
los datos quardados. Estos tampoco se
encriptan, a menos que lo hagamos nosotros.
mediante un algoritmo propio. Su capacidad
de almacenamiento se limita a 4 Kilobytes, y lo
peor de todo es que SQL INJECTION puede
hacerse tranquilamente desde ellas a una BBDD.
ena nube
La nueva era de almacenamiento web local
LocalStorage
'® SessionStorage
@ IndexedDB
@ Web SOL
1 Application Cache
Entre las opciones que nos ofrece la
modernizacién de los navegadores
web, gracias ala llegada de HTMLS y su
complemento perfecto con JavaScript,
podemos encontrar las siguientes:
[Link]
74|
EnHerramientas
dedesarrallagor
de Google Chrome
ocualqul
otro browser,
len Applicaton
iaofertade
almacenamiento
disponible Opciones de almacenamiento del lado del usuario
A través de la siguiente infografia, veamos una breve descripcidn de las diferentes opciones
que tenemos hoy para guardar datos en forma local y, asi, agilizar los tiempos de carga o
recuperacién de la informacion:
TG) | Genenis Console Souces
iccsere at
Seeetts. =,
Sater wee
CD
mene B corso
eee
largo de esta seccion. a.
Sa
ages
rae
a
Pie anor
oa
SessionStorage
‘Se implementa
principalmente para iniciar
ymantener una sesién de
datos temporales, los cuales {BE nepsz/me googlecom
(garantizan que, al cerrar la 1B ovome searen/moststes
peslafa el navegador web, ‘BE noses goalecom
estos sean eliminados del BE hpi /noseatone googiecom
disco local + B insesecdo
BS esp-newta-hpsy/wgooclecom
B veo scx
Cookies @ nxpsspuargoogiecom
Por tradicién, compatibilidad psi /[Link]
con aquellas web que © npsi/nteationsgoogiecom
‘aun ulizan tecnologias
‘antiguas, y para mantener en
‘una segunda opeién ante la
ausencia de LocalStorage,
las cookies siguen teniendo
su lugar en el ecosistema de
almacenamiento del ado del ames
‘usuario, > Ore
come sorge
BE Appucabon Cache
La mayoria de las ofertas
de almacenamiento local va
cambiando con el tiempo.
Lo mas conveniente es que
elijamos una opcién de
almacenamiento local que sea
funcional y comtn a todos los
navegadores web.
IndexedDB
Peimite crear una base de
daios local y ransaccional,
utiizando Is estructura de
‘bjetos del ipo JSoN
(ar - valor), con indices.
Web SOL.
Esuna API web que
permite almacenar datos
locaimente, uiizande
ellenguaje de datos
SOL para cada consulta,
{grabacién y eliminacion,
Solo es compatible con ios
navegadores Chrome, Opera,
Saarly Android Browser
‘cache Storage
Esta opcisn se usa solo
para almacenar paginas
HTML, documentos CSS
yarchivos JS del lado
{el usuario, y tambien
archivos JSON, imagenes,
videos e iconos. Es
utiizada siempre en
lasimplementaciones
[Link] PWA JavaScript > Proyectos / Almacenar datos localmente
LocalStorage
Veamos a continuacién cuales son las caracteristicas ms importantes de
LocalStorage y cémo trabajar de manera eficaz con esta opcién de almacenamiento
de datos local.
Para reemplazar rapidamente a las cookies, utilizando a su vez una forma éptima de
leer y almacenar datos, LocalStorage es la opcién que necesitamos implementar.
Entre sus caracteristicas mas beneficiosas, podemos destacar:
1 Soporta los navegadores modernos.
™ Almacena directamente en el browser y no en un archivo local.
@ No se envian los datos almacenados con cada peticién http.
™ Posee 5120 KB (0 5 MB) de almacenamiento por cada dominio.
‘Como podemos ver
Jas webs modemas que
‘aprovechan la capacidad
de almacenamiento local
terminan consumiendo
Unespacio importante
de! lado de la maquina
cliente (nuestro
navegador)
Sus métodos
LLocalStorage cuenta con una serie de métados muy simples que le permiten
realizar las operaciones basicas con los datos que se almacenan del lado
del usuario. Veamos en la siguiente tabla cuales son estos métodos:
eirelye) DESCRIPCION
setltem(a, b) | Este método recibe dos parémetros: (a) indica el nombre con el cual identificaremos el
dato por guardar, y (b) esl valor que deseamos almacenar dentro de ese dato.
removeltem() _ | A través de este método, podemos eliminar un item existente junto con su valor
almacenado. Recibe como parametro el item en cuestién que deseamos borrar del
almacenamiento local.
Todos estos métodos se aplican sin modificacién alguna sobre SessionStorage, la variante que
vimos para almacenar datos localmente, solo que de forma temporal. Veamos ahora la manera de
implementar exitosamente estos métodos para sacar provecho de las capacidades de LocalStorage
76 | redureracom Soporte para almacenamiento local
Si queremos asegurarnos de que el navegador web que carga el sitio soporta LocalStorage,
entonces podemos implementar, al inicio del HTML inicial, un cédigo similar al siguiente:
{Qué caracteristica nueva DORTYPE hen
implementamos en la ue
declaracién de este script? El is ichorecl M0
so del atributo Defer. Pero meta nane="vieeport” content="widthedevice-wldth, Anitial-sca
gpara qué sirve? Veémoslo a ‘cite Forwulario de Datos«/title
pane eva ink rel="stylesheet
nS EnvSenos sus comentarios: /h5
form ide"formilario” naval idate:
‘div class~"row center"
Atributo defer
Alimplementar el atributo defer con la referencia al archivo JavaScript, la carga de
este JS del lado del usuario se realizaré una vez finalizada la carga del documento
HTML y sus referencias. Asi, evitamos que nuestro cédigo JS falle en su ejecucién,
referenciando a un componente HTML no creado al momento de su renderizado,
Crear dinamicamente el archivo JS
Pulsamos la tecla CTRL seguida de un clic sobre el archivo [Link].
wienos sus comentarios:
ermularie” novatia, € Nose puede abrir formularioj': Archivo no encontrado
(filey// Proyectos
Implementar SQL offline
El lenguaje de consulta estructurado, conocido por todos como SQL, tiene
varias décadas de maduracion, y es por eso que tambien tiene su lugar en
el mundo del almacenamiento de datos offline, desde una aplicacion web.
Veamos entonces como implementarlo exitosamente en nuestros proyectos web.
Si bien Local y Session Storage son dos
herramientas faciles de implementar al
momento de tener que almacenar datos
localmente, cuando llegamos a cierto punto de
complejidad en el desarrollo de una alternativa
web, debemos pensar en una solucién un poco
mas efectiva
Y si somos programadores con experiencia
De qué se trata WebSQL
Web SQL es una adaptacion que funciona
Comiinmente en los navegadores que uiilzan
el motor WebKit o Blink (Chrome, Chromium,
Opera y Safari), y que, a través de simples
métodos, se emplea para crear una base de datos
relacional del lado del usuario. Dicha base se
almacena dentro de una instancia que permite el
uso exclusivo de la aplicacién web que la cred.
Web SQL utiliza tres métodos simples:
Decors webs
Co recién estamos incursionando en el mundo
del desarrollo web, el manejo del lenguaje
SQL (Structured Query Language) es la opcién
mas efectiva cuando debemos manipular un
compendio de datos de mediano a grande.
Veamos entonces cémo aprovechar las.
caracteristicas basicas pero efectivas del lenguaje
SOL dentro de nuestras soluciones web.
Opendatabase se usa para abrir o crear una
base de datos. Recibe una serie de parémetros
elementales, los cuales le permitirn ejecutarse
de manera eficaz,
| Transaction es el método utilizado para
realizar operaciones de escritura sobre la base
de datos y/o tablas que esta contiene.
1 ExecuteSql realiza la lectura de los datos ya
creados y almacenados localmente en tablas.
€ > © O Archivo} er//C/Use/Muna/Destop/Proyecto2010/Fuentes Web%20SOL/indexhtml
Rescue” Sa? x) 1008 Nba
Base de datos Web SQL.
‘Ceasin de aves primera base de datos SQL de lao del usuario
¥ One
aa
Benes
BE Sevee ores
W Cerrscage
Dentro de las herramientas para el desarrollador del navegador Chrome, o en cualquiera
de los otros antes mencionados, podemos encontrar el apartado Application > Web SQL,
donde se lista la o las bases de datos que cree nuestra solucién web.
[Link] Crear una base de datos
Iniciemos un nuevo ejercicio con un documento HTML y un archivo JS asociado, donde
realizaremos todos los pasos que veremos a continuaci6n. Dentro del archivo JS,
escribimos el siguiente codigo:
document .addEventListener(“DOMContentLoaded”, function() {
var db = openDatabase(“tareas”, “1.0”, “mi base de datos de tareas”, 2
* 1024 * 1024);
ns
‘Como podemos ver, esperamos a que se cargue el documento
HTML y luego creamos la base de datos en cuestion. Siésta
existe, el método la abrird, y si no, la creara desde cero,
Crear una tabla
Para crear una tabla dentro de la misma base de datos, primero debemos abrir una
transacci6n a través del método transaction(), y luego, invocar el método executeSql|).
[Link](function (tx) {
‘[Link]]( ‘CREATE TABLE mistareas (id unique, text)’);
ns
£Cémo resolvemos la creacién de una tabla si esta ya existia antes?
De la misma manera que lo hacemos en SOL: integramos en la sentencia
CREATE TABLE la condicion IF NOT EXISTS antes del nombre de la tabla,
tal como vemos en el siguiente cédigo:
trexecuteSql( “CREATE TABLE IF NOT EXISTS mistareas (id unique, text’);
B Manifest
Base de datos Web SQL %& Service Workers
Wi Geer sicage
‘Cesc de aves primera bse de datos SQL del lado de usuario.
Storage
» BB Local Storage
>» BB Session Storage
+S tarcas
EE mistaroas
Cookies
reduserscom | 81 JavaScript > Proyectos / Implementar SQL offline
Parametros del método openDatabase()
Este método recibe cuatro parametros: el nombre de la base, la versidn de la base, una
breve descripcion y el tamafio inicial. Cualquiera de estos parametros que obviemos en el
llamado del método openDatabase() impedira la creacion o apertura de la base de datos.
Je 2 © @ pov tesCtimatra tenet HAAR net
sponse” So7 x 796 1008 £ [RG] | enews cone
Aopleaton
Be rentes
Base de datos Web SQL S setatotn
Cer stoage
md deme de nL en
> BE Local stor
9B Sesion taage
Agregar registros a la tabla
\Veamos ahora cémo se estructura la sentencia que permite agregar registros a una tabla
[Link]( “INSERT INTO mistareas (id, text) VALUES (1, “Asi se visualiza
una tarea”)’);
[Link] (‘INSERT INTO mistareas (id, text) VALUES (2, “Esta es otra
tarea”)’);
[Link]( “INSERT INTO mistareas (id, text) VALUES (3, “Y aqui, una tercer
tarea”)’);
S07 x 796 100% ¥ Mobile ¥ $ OR A) | Gements Console Sources Network Performan
Aepliation
Be Maniest
stos Web SQL 18 Senice Workers
W ce soroge
ime etn SO a et i
Storage
> BB Local storage
Session Storage
B indesedos
¥ & web sa.
© Cookies
82 | resureracom Consideraciones con el indice
Como vimos en el ejemplo anterior donde insercién del registro, pero su vez, no devuelve
insertamos registros, estamos poniendo un mensaje ni inserta el registro nuevo.
manualmente el indice 0 ID, que corresponde Para solucionar este problema, debemios ejecutar
acada uno de los registros insertados. Cuando _una sentencia SQL que obtenga primero el ultimo
creamos la tabla, declaramos el campo [Link] _ ID que se ha insertado y, luego, le sume uno para
indice Unico, por lo queno se pueden duplicar ——_—poder agregar efectivamente un nuevo registro
los registros insertados. Web SQL directamente con el ID consecutivo.
obvia la insercién de ID duplicados evitandola _ ¢Cémo lo conseguimos?:
[Link]( ‘SELECT * FROM mistareas ORDER BY id DESC LIMIT 1”, [], function
(tr, results) {
var len = [Link], 13
if (len ==?) { //La tabla MISTAREAS esta vacia
dd = 1;
} else { //existen registros en la tabla
id = [Link](i).id;
ides
a
[Link] (“INSERT INTO mistareas (id, text) VALUES (‘+ id +’, “Asi se
visualiza una tarea”)?);
Si analizamos el cédigo, lo primero que hacemos es leer el campo ID de la tabla mistareas,
ordenando de manera descendente el resultado, y filtrando mediante LIMIT 1, para listar un
Unico registro.
En la variable len, guardamos la longitud del resultado obtenido. Sino existen registros,
la variable len quedaré vacia. Luego preguntamos siesta variable esta vacia, y en ese
caso, asignamos a la variable ID el valor 1. Sino esta vacia, obtenemos el ID devuelto, lo
guardamos en la variable ID y le sumamos 1. Finalmente, ejecutamos la sentencia INSERT,
reemplazando el numero fijo del ID por la variable en cuestién.
Refresquemos varias veces el documento HTML, para generar sendos registros.
aosavindexnn
TR Ei] | Elements Console Sources Application»
BE Session Storage ——* rowid_[id [text
& tndexedo8 ‘Aste visualize una tarea
7B wed sa ‘Asie visualiza unatarea
+B toreos ‘Asis visulia una tarea
BE ristareas Asis visuliza una tarea
» ® Cookies Ast se visualiza una tarea
Ast se visuliza una tarea
cache ‘Asi se vsualiza una tarea
Cache Storage ‘As se visualiza una tarea
BB Aoplication Cache ‘Asi se visualiza una tarea
‘Asi se vsualiza una tarea
Frames ites
reduserscom [83 JavaScript > Proyectos / Implementar SQL offline
Eliminar un registro
La sentencia SQL DELETE se utiliza cuando necesitamos eliminar uno o mas
registros de una tabla relacional. Su manejo es muy simple:
DELETE FROM mistareas;
tr executeSql (‘DELETE FROM mistareas”);
Esta sentencia eliminaré el total de registros que existan en la tabla en cuestin. Si queremos eliminar
un registro puntual, podemos indicar su ID al momento de ejecutar la sentencia SQL DELETE:
tr executeSql (‘DELETE FROM mistareas WHERE id = 8”);
Esto eliminara el registro cuyo
ID sea el 8 dentro de la tabla.
Si creamos muchos registros
con la sentencia anteriormente
R Gi] | ements Console Sources Network Application»
"WE Service Works = ae
W Cleor storage
As se visualiza una tarea
especificada, probemos la Asse visualiza una tarea
opcién de eliminar un registro. fla Ast sevisualiza una tarea
especifico, indicando su ID > BB Local Storage ‘Asse visualiza una tarea
mediante WHERE, tal como lo Session Storage As se visualiza una ‘area
muestra la linea anterior. BS Indexedds
’Asise visualiza una tarea
7B tareas ‘Ast sevisualiza una tarea
Podemos ver en la imagen Ia Py [ee
‘ausencia del registra cuyo ID
es e1 nmero 8, que hemos
eliminada mediante DELETE,
> ® Cookies As se vsualiza una tarea
Leer y listar registros
Ya con una tabla alimentada de registros, solo nos queda ver de qué manera podemos
leerlos con SQL para, luego, poder mostrarlos en el documento HTML en cuestion. Su
sentencia es muy simple:
SELECT * FROM mistareas ORDER BY id;
Utilizando la sentencia SELECT,
Web SQL nos devolverd todos
los registros (esto esta indicado ieee
mediante el *, asterisco) de latabla [sume
mistareas, ordenados mediante ee
el campo id. De esta forma, oa
conseguiremos listarlos tal como nos
muestra la pantalla de herramientas
para el desarrollador de Google
Chrome, ‘Ahora, debemos aplicar esta sentencia SELECT dentro del cédigo JavaScript,
y tambien star el resultado en pantalla. Lo primero que hacemos es ejecutar la
consulta mediante executeSql():
‘[Link]( ‘SELECT * FROM mistareas ORDER BY id’, [], function (tr, results) {
ns
En la ejecucién de dicha consulta, si existen registros dentro de la tabla en cuestién, nos devolvera
un array. Creamos una funcién que leerd y almacenaré los resultados que necesitamos manipular.
‘Ahora, dentro de dicha funcién, declaramos dos variables: len y html, tal como lo muestra el
siguiente cédigo:
Lavariable html la
Enlavariable len, - ejamos vaca, ya que la
estamos guardando el var len = [Link], utiizaremas para armar
total de los registros| var html = 3 | _—-etcédiga HTML que
evueltosen results tenemos que mostraren el
documenta homanima,
‘Acontinuacion, declaramos una
sentencia For, que recorrera
todos os registrosexistentes y
‘armaré el html para, fnalmente,
‘mostrarios en pantalla
La sentencia For va desde 0 (cero) hasta el total de registros devueltos en la
variable len. Por cada iteracion que hace el For, alimentamos la variable htm!
html = html + “” + [Link]
+ 1p"
var posicion = document. getElementById(“tareas”);
[Link] = html;
item(i).id + “ - “ + [Link]. item(i).text
La variable html almacena una
concatenacién de textos y registros.
Iniciamos un componente HTML. Base de datos Web SQL
del tipo
(paragraph); luego coteeproenngstts
retornamos el objeto results, del
cual lems las filas que contiene
(rows), y seleccionamos de ellas el
ftem(i).id, Volvemos a concatenar
‘con un espacio, guidn y espacio,
yrepetimos la misma lectura de!
mismo registro, pero esta vez del
item text. Finalmente, creamos la
variable posicion, le asignamos el
‘componente HTML cuyo id es tareas,
yescribimos la variable html armada,
en pantalla, utlzando posicion.
innerHTML = html
reduserscom [85 JavaScript > Proyectos
Encriptar contenido
Una buena practica que podemos implementar junto con el guardado de datos de!
lado del usuario es la encriptacién de estos. JavaScript propone el estandar Base64
para hacerlo, que es lo que aprenderemos a utilizar a continuacién y, sino nos gusta,
veremos también como crear nuestro mecanismo de resguardo de la informacién.
Seguin Wikipedia, Base64
es un sistema de numeracién
posicional que utiliza el
rnlimero 64 como base. Este
valor corresponde a la mayor
potencia de dos que puede ser
representada utilizando los
caracteres ASCII
Mas informacion en: https://
[Link]/wiki/Base64
El lugar donde comunmente
se aplica este mecanismo de
codificacién es en los sistemas
de correo electronico. Por lo
general, el contenido adjunto
aun mail (archivos, imagenes,
etcétera) se comprime
al formato Base64 para Exist en el mundo una orgenizacién que se ocupe dela cifusiony el
Transformer encaracteresy —[ipscnnarncsfosalaerucon meena par edoncera foresee
asi poder enviarlo de manera
directrices de este estandar,y también padremas hacer pruebas de codificacion y
incrustada dentro del mensaje. __decodificacién de informacion
Seguridad con Base64
JavaScript incluye en la sintaxis de su lenguaje métodos ya armados que nos permiten codificar y
decodificar contenido en formato Base64. Los dos métodos asociados para realizar estas tareas son:
' atob(): encripta caracteres ASCII a Base64
™ btoa(): desencripta Base64 a caracteres ASCII
‘Suuso es muy simple’
Funcién que recibe un btoa(texto); solo debemos llamar
parametodalteotesto, simetogo pesindoie
Yeodiica a Basa6a eltexto que deseamos
codificar oviceversa,
Pardmetos que rece los métodos de peta Wes eee
encriptacion y desencriptacion Soca
en una base de datos
Funcién querecibe el parémetro eetreinoun ster
encriptado en Base64, ylo atob(texto_encriptado); ote lied
Seoeiran OASE.” nasa MLTR encripeaiays tonal
86 | redserscom Encriptar con btoa()
Realizaremos a continuacién el ejercicio de encriptar contenido. Para esto,
descargamos el archivo [Link] del repositorio de material adicional
que contiene esta obra. Luego, creamos un nuevo proyecto en Visual Studio Code,
yagregamos el documento HTML que contiene el material descargado.
Si ejecutamos una vista previa
del archivo HTML, veremos que
este simplemente contiene un
campo de texto, un botén y una
etiqueta del tipo Paragraph.
El campo cuyo ID es texto
permitira que escribamos un
texto o frase para encriptar.
E| botén denominado botén-
encriptar ejecutaré la funcion
JS que realizard el trabajo,
y dentro del Parrafo texto-
resultado, visualizaremos
el contenido encriptado en
formato de caracteres.
Ihref="s!" class="brand-logo
@ No se puede abrir ‘base6ajs: Archivo no encontrado
(filee///c{Users/iuna/Desktop/Proyecto
11/Fuentes/Base64/base64 js).
Ubiquemos en el cédigo del archivo HTML la declaracién
del archivo JS [Link], y hagamos CTRL + clic sobre él,
aceptando a continuacién su creacién.
Ahora declaramos en el archivo JS las primeras sentencias de
nuestra aplicacion web de encriptacion’
document .addEventListener(“DoMContentLoaded”, function() {
docunent..getElenentById(“boton-encriptar”) .addEventListener(“click”, function() {
ns
vs
[Link] | 87 JavaScript > Proyectos / Encriptar contenido
Con esto nos aseguramos de que el script solo se ejecutaré cuando el HTML se haya
cargado completamente, y la funcidn de encriptacién la ejecutaremos cuando el
usuario pulse boton-encriptar.
Luego, agregamos el siguiente cédigo dentro de la funcién del botén:
Enla variable palabra
almacenamas el contenido
escrito en el campo de texto,
Var palabra = document. getElementById(“texto”). value;
‘Median una sentenciaf,n0s Pa F (palabra === “") {
aseguremos de que dicho campo alert(“Debe ingresar un texto valido.”);
tenge un contenido escrito antes de ;
ejecutar la funcion de encriptacion, eed
} else {
Sino tiene contenido, alertamos ——~» encripto(palabra) ;
al usuario que debe escribir algo }
vsilo tiene, ejecutamos la funcién
‘encripto() pasandole palabra
como un parametro.
Declarar la funcion de encriptacion
Acontinuaci6n, declararemos la funcion de encriptacién y llamaremos al método
btoa() para que haga lo propio con el texto pasado como parametro:
function encripto(texto) {
var texto_codificado = btoa(texto);
document. getElementById(“texto-resultado”).innerText = texto_codificado;
star Seleccién Ver le Depurar erminal _« base6Ajs-Base6s- visual Studio ©
1 basebdjs ©
[Link](“DOHContentLoaded", funetion() {
document. gett lenent8)T4("boton-encriptar*) addeventListener(“ellek*, function() {
fran pelabre = [Link]®yid(texto").value
if (palabra see =")
Pu arse rreer wn sree vane
poise {
[llencripeo(peiasea);
>
»
ction encripto(terto) {
War texte_codiflcado = btoa(texto);
document. getElonantSyid(testo- resultado) innerText « texto_cosificado;
8B | reduserscom Uso de Base64
En esta funcién, declaramos la variable texto_
codificado, donde almacenamos el resultado de
la funcién btoa(). Finalmente escribimos el label wiricredusarscom
texto-resultado con el resultado codificado en
base64. Ya tenemos las condiciones adaptadas Ec
para probar nuestro sistema de encriptacién:
4adaLnzvaZXleLnv0Q==
robemnos citerentes palabras o frases completas,
para ver el comportamiento correcto de nuestro
primer sistema de encriptacion de informacion,
‘Ahora, ¢se animan a guardar este resultado
locaimente, uiizando LocalStorage?
Desencriptar datos con atob()
El procedimiento ahora es a la inversa, para ver lo que hemos codificado anteriormente, en formato
estandar ASCII. Para esto, vamos a modificar el documento HTML, agregando un botén denominado
boton-desencriptar, y un nuevo label llamado texto-desencriptado. Luego afadimos:
document . getElementBy1d (“boton-desencriptar”) .addéventListener(“click”,
function() {
var texto_encriptado = document .getElementById(“texto-resultado”).innerText}
if (texto_encriptado ===”) {
//Nada para desencriptar
} else {
desencripto(texto_encriptado) ;
+
»
El disefio debe quedar similar te
alde la imagen. credo Ltt ee re» lpn dseer!
Por ultimo, creamos la funcién correspondiente que desencripta el dato:
function desencripto(base) {
var texto = atob(base);
document. getElementById(““texto-desencriptado”).innerText = texto;
[Link] |89 JavaScript > Proyectos / Encriptar contenido
Ya con el resultado final, podemos ejecutar este ejercicio en el
navegador web y comenzar a probarlo.
Uso de Base64
20 proyectos con Javascript
Mage wvensconcrsienncznu2nyaxe0
Para soluciones de encriptacion mucho més efectives, podemos
recurrir a librerias 0 frameworks como WebCryptoAPI, sjcl,
js-nacl, jsencrypt, [Link], jwcrypto, o similares. Estas
nos daran mucha mayor efectividad al momento de proteger
informacién sensible.
Tengamos siempre
presente que
Base64 no es un
sistema seguro de
encriptacién, y solo
nos servira para
dar un nivel minimo
de protecci6n a los
datos registrados
del lado del usuario
© a aquellos datos
que deban viajar
por un formulario
web hacia nuestro
backend web.
Codificar nuestro sistema de encriptacion
Sino queremos utilizar Base64 como
mecanismo de encriptacién, ni tampoco
emplear las librerias y frameworks JS que
existen actualmente, podemos programar
nuestro propio sistema de encriptacién, que
ayudara a almacenar datos més seguros,
tanto del lado del usuario como en forma
remota. Vearnos cémo hacerlo.
Esta soluci6n requiere de bastante codigo
fuente, por lo que sera mas efectivo
descargar el ejemplo directamente det
repositorio de archivos de esta obra
Ejemplo-Encriptacion-Completo.
zip. Creemos a continuacién un nuevo
proyecto y agreguemos estos archivos a él
Finalmente, ejecutemos el documento HTML
para ver su estructura grafica
Como podemos visualizar en la imagen, el codigo
HTMLes similar al que trabajamos en el ejercicio
de Base64, y lo unico que cambia en este caso es
el contenido del archivo [Link]. Proyectos
Adaptar graficos y multimedia
segun la performance
Este nuevo proyecto nos permitira cargar imagenes y videos
optimizados, segiin la velocidad de navegacién o el poder de
procesamiento del hardware de quienes visitan nuestra web.
Antes que comenzar, debemos aclarar que ponga oficialmente en vigencia.
las propiedades del objeto Navigator que Creemos conveniente aprovechar estas
analizaremos a continuacién se encuentran caracteristicas, que seguramente terminen por
actualmente en modo experimental. Qué hacerse efectivas con el tiempo. 2Y qué pasa si
significa esto? Quiere decir que estan presentes _esto ultimo no ocurre? Por lo general, aquellos
de modo parcial en algunos navegadores web, _navegadores que las incluyeron en su motor web
y que los respectivos desarrolladores de estas _las dejan vigentes durante muchos aos, o hasta
caracteristicas estan tratando que la W3C (el que salga un estandar web oficial que se aplique
consorcio que administra los estandares web) las de forma masiva.
Medir la performance de carga
Através de las
Herramientas para el
desarrollador, Google
Chrome nos permite medir
la velocidad de carga de
un sitio web, analizando
todos sus componentes,
y visualizandolos juntos 0 Para esto, debemos ingresar en el apartado Network de estas
solo algunos de ellos. herramientas y cargar la pagina o sitio que deseamos. En el,
extremo superior de la grilla de analisis, encontraremos la
posibilidad de fitrar los componentes a analizar, pudiendo elegir
entre todos, imagenes, multimedia, JavaScript, CSS, etcétera.
Q Siblen nohay un estindar
definido para la carga
Optima y veloz de un sitio.
web (dado que existe
en el mundo un sinfin de
velocidades de navegacion i
que varian seguin el tipo de
conexién y dispositivo con el eco!
cual accedemos a Internet),
lo ideal es siempre tener
cada web lo mas optimizada
posible para que el usuario no deba esperar mucho tiempo
Por la respuesta del sitio que quiere ver. Teniendo esto
presente, comencemos a trabajar el contenido para la
primera fase de este proyecto.
96 | _ redserscom [Link]
‘Como bien mencionamos anteriormente, el objeto Navigator cuenta con
mAs propiedades que permiten llevar a cabo otras tareas especificas del
navegador, entre ellas, evaluar la conexion del usuario. Podemos comenzar
a probar esto mismo en la consola de Chrome. Presionamos la tecla F12 ya
confinuacion la pestafa Console. Alli, en su linea de comandos, escribimos:
Navigator. connection;
“Tamnents Console Sources Tatwork Performance Momory Tx] El resultado que nos devuelve
: esuncbjeo JSON (nos
13 @ | a * adelante analizaremos qué
1S Womasges > ratanter conection . 7 es) con una serie de datos, tal
Oi teeremnste * orareecrenis Peer ihn ere terns lonrunca ltr
eum ie
hice =a” Dento del conunto do
ona ress valores que retorna, pedemos
. Ss Bier une denernado
os nt Matorkintorastion effectiveType: este es el que
almacena el tio de conexion
que el usuario utiliza, También
podemos escrbirla sentencia
anterior seguida de un punto
+ effectiveType. para llegar
directamente al valor que
necesitamos analiza,
Valores que devuelve
Los valores de conectividad que suele devolver nai
mg
539
m 2g
[Link] son:
Almomento de escribir esta publicacién no existen otras opciones que esta
funcionalidad pueda devolver. Entendemos que 4g engloba todas las conexiones
maviles 4g junto con las conexiones WiFi, cablemédem, ADSL y Ethernet. Bajo 3g,
se incluyen las conexiones méviles en general, y 2g hace referencia a conexiones de
baja velocidad, como GPRS, cablemédem y ADSL de 1 Mbps o menos,
ESTEE &
Cargar una imagen optimizada
Acontinuacién, descargamos
el archivo Ejercicio-
[Link].
Descomprimimos los archivos
contenidos en una carpeta
ycreamos un proyecto en
VS Code, seleccionando
dicha carpeta. Dentro de este tC Las tres imagenes JPG son el mismo archivo, recortado ¥
contenido, encontraremos una optimizado en aterenes romans (enkionyes) Logue
aulbearpeta images oon tes nremosenerie sec es analzarcon que vloctiad se
Cconecta el usuario, segun este dato, le enviaremos uno u
archivos JPG y un archivo GIF, ‘tro archivo de mayor o menos peso
tal como muestra la imagen.
reduserscom |97 JavaScript > Proyectos/ Adaptar graficos y multimedia seguin la performance
Enel documento HTML tenemos
contenido estandar: un titulo Pie essa
, un parrafo yuna Seca ree ae
imagen
Videos optimizados
reduseracom | 101 JavaScript > Proyectos/ Adaptar graficos y multimedia seguin la performance
El contenido del documento HTML debe quedar estructurado como en la imagen.
Bc ence ntecng at
E: paar Cemetery
Fog Th a tie
El siguiente paso es adaptar el contenido del archivo JS. Vamos a editarlo para agregarle
en a parte superior la declaracion de dos nuevas variables: hconc y video:
Con esto, incluimes en la
variable video la etiqueta HTML.
correspondiente al mismo, yen
var video = document .getElenentById(“video”); { T_ivsihacnconcammaccnaven
var hcone = navigator.hardwareconcurrency3 alor dewuete por navigator.
hardwareConcurrency
A final de la sentencia Switch utlizada para cargar la imagen ms éptima afiadimos una
serie de If que analizaran la combinacién de heone y tonn. Con el resultado obtenido,
reconfiguramos la variable heone con un valor acorde al video que debera mostrar:
if (hconc >= “6” && tconn >= “3g”) {hconc = “6”}
if (hconc === “4” && tconn >= 3g”) {hconc = “4”}
if (heone === “4” && teonn < “3g”) {hconc = “2”}
if (heone === “2” @& teonn >= “2g”) {hcone = “2”}
if (hcone === "2" @& tconn
if (heone =
if (heone =
2g”) {hconc = “1”}
“1” @& tconn > “2g”) {hcone = “1”}
“1” @& tconn == “2g”) {hconc = “”}
\Vaciamos a continuacién el elemento , cuyo id es “alerta”
document .getElementById(“alerta”).innerText = “5
Ahora analizamos el valor de heone. Si es mayor que 1, cargamos la portada del video;
vssiesmenor, cargamos una portada genérica
if (hone > “1”) {
video. setattribute(“poster”, “images/cover-dsr-.3pg”);
} else {
video. setattribute(“poster”, “images/video. gif”);
ty
102 | resuseracom Por tiltimo, agregamos una nueva sentencia Switch, que analiza el valor de la variable
hone, y con esto determina la calidad del video que se va a cargar:
switch (hconc) {
case (“6”):
case (“4”):
video. setattribute(“sre”, “videos/love_of_my_life_218_1080.mp4”);
break;
case (“2”)
video. setattribute(“sre”, “videos/love_of_my_life_2¢18_720.mp4”);
break;
case (“1”):
video. setattribute(“sre”, “videos/love_of_my_ life 2018 480.mp4”);
break;
case (“0”):
document .getElement8yid(“alerta”).innerText = “Su dispositivo es muy
lento para reproducir videos.”;
video. setattribute(“sre”, “);
break;
default:
video. setattribute(“sre”, “videos/love_of_my_ life 2018 480.mp4”);
break;
Finalmente, ya estamos
en condiciones de
probar la calidad de
video que se cargaré en
nuestra pagina web.
Podemos aprovechar
la opcion Network
Throttling de Chrome
para simular diferentes
‘como se carga una
calidad de video acorde
reduserscom |103 JavaScript > Proyectos
Capturar fotografias y videos
Conozcamos las ventajas que propone JS para sacar provecho de las capacidades
de hardware multimedia como webcams, cémaras fotograficas y micréfonos incluidos
en computadoras y dispositivos méviles.
JavaScript, a través de la API aun programa o app nativa. Este método
getUserMedia(), propone acceder a la estuvo originalmente incluido en Navigator.
camara fotogréfica de dispositivos méviles __getUserMedia() y, luego, fue agrupado
y/o computadoras para realizar capturas de como subcaracteristica de Navigator.
fotos 0 filmaciones, sin necesidad de recurrir_ MediaDevices.
[Link]
A través de MediaDevices, el objeto Navigator permite al desarrollador conocer todos
los dispositivos fisicos (hardware) de entrada/salida que tiene la computadora o dispositivo movil
del usuario que accede a una web. Para ver como trabaja, podemos escribir la siguiente sentencia
enla linea de comandos de las Herramientas para el desarrollador:
al) Gees ab Sane aed eae ieeey
E 9 © ew
© Nom re.
© Howe
[Link]
Cdbtendremos un aray de datos
al desplegar los subniveles,
encontraremas una funcion
cienominada enumerateDevices()
Tatar aT
Siejecutamos @ continuacién el comando ise ial
completo, llegaremos al array de ecanf acc
hardware que tiene el dispositivo mévill o
la computadora’
[Link]()
Siotra vez desplegamos el array ase
para ver todo su contenido, ced te ins “nla
podremos identificar si el equipo (cteicua:“ocooantoaebeonssceter ita: csuaonceoares
en cuestién tiene camara o no.
Veamos en la siguiente imagen
‘como se identifica el dispositivo iia poets omnes
vinculado a una webcam: wrt twereein
104 | redeserscom La integracién de Promises
En estos Ultimos afios, se comenz6 a hablar
mucho de Promises dentro del ecosistema
JavaScript. Lo que propone esto es un objeto que
representa la eventual finalizacion o falla durante
la ejecucién de un proceso determinado utilizando
una operaci6n asincrénica.
Antes habia que pensar en crear dos funciones
‘completamente distintas para un determinado.
proceso: una abocada a ejecutar el proceso
en siy devolver un posible resultado al resto
del algoritmo que se ejecutaba; y otra que
“analizaba’ si el algoritmo no devolvia un objeto,
para informarle al programa 0 al usuario que la
operacién habia fallado. Veamos a continuacién
Un ejemplo de cémo se estructuraba antes una
operacién asincrénica:
J/ Funcién de ejecucién
function successCallback(result) {
71 Funcién de falla
function failurecallback(error) {
“+ error); }
console. log(“El archive de audio esta complete en la URL: “ + result);}
console. log(“Se ha generado un error al crear el archivo de audio:
// Funcién asincrénica con sus parémetros de control
createAudioFileAsync(audioSettings, successCallback, failureCallback);
del siguiente mado:
En la actualidad, con la integracién de Promises, el cddigo se resuelve
createAudioFileasync(audioSettings) .then(successCallback, failureCallback);
De esta forma, integrar Promises en nuestro cédigo nos permitira
‘manipular mas agiimente los acontecimientos asincrénicos, sin tener que
utilizar, por ejemplo, contadores del tipo setTimeout() para esperar un
periodo determinado antes de ejecutar un callBack
Sources
°
Elements Console
No messages
No user me.
No errors [irromisestot
No warnings
No info
charging: f
e
°
a
°
s
No verbose
Network Performance
rus]: “resolved
[[Promisevatue]]: atteryhanager
alse
chargingvine: Infinity
dischargingTine:
evel: 0.97
oncharginge!
onchargingt
ondischargi
onlevelchan
Infinity
thange: null
mechange: null
ngtinechange:
ge! ul
Batterywanager
wl
reduseracom [105 JavaScript > Proyectos / Capturar fotografias y videos
También debemos tener presente que Promises permite ejecutar un conjunto de funciones
asincrénicas consecutivas, invocando .then de manera anidada, y por supuesto, también
integrar la funcién Catch() para el tratamiento de errores,
hazAlgo()
-then(resultadoo => hazAlgoMas (resultado) )
-then(nuevoresultado => hazUnaTercerCosa(nuevoResultado))
-then(resultadoFinal => console. 1og(“El resultado final es: ${resultadoFinal}”))
-catch(errorEnResultados) ;
getUserMedia()
Regresemos al objetivo de este proyecto: mediaDevices, que accede a todo el hardware
capturar fotografias con la camara del de la computadora o dispositive que carga
dispositive o computadora del usuario. Para _nuestra pagina web. Esta, a su vez, contiene
esto, utilizaremos el objeto Navigator, el un método denominado getUserMedia(), que
de los ejercicios anteriores. Como bien nos permitira acceder al hardware del usuario.
dijimos, este objeto incluye la propiedad Entonces, ec6mo lo invocamos?:
navigator [Link](parans) ;
Como vemos en el ejemplo de cédigo anterior, este método requiere de pardmetros,
que en este caso, sirven de configuracién, Por lo general, la multimedia a la cual
accedemos en cualquier hardware modemo esté compuesta por Audio y Video. Y para
utilizar uno, otto 0 ambos, debemos indicar cudles son los que estamos invocando.
Esto se realiza de la siguiente forma’
[Link]({
video: true,
audio: false
»
Como podemos ver, en nuestro
caso estamos por utilizar solo
el objeto video, sin audio. Al
invocar este método, lo que a 1 © wp
hacemos, tanto en méviles
como en computadoras (y por
cuestiones de seguridad), es Waheaalle
pedirle permiso al usuario para No errors
utilizar uno 0 ambos dispositivos
de hardware de su equipo.
No messages >
No warnings
No info
No verbose
106 | redeserscom € 5 © CRB e1/1rer/mnaDeaoprMoyeccn20%4 uence
De esta forma se invoca, por ejemplo, ae
el mensaje de permisos de uso de Eefnte
recursos de hardware que solemos + cure
ver en el extremo superior izquierdo © User cine
de la barra de navegacion. Si le
asignamos el valor true al param
audio anterior, entonces la solicitud
de permiso variara como se observa
ena imagen.
Concepto y uso de la API Stream
Tanto Media Capture (que veremos a jue parte de cero omas objetos del
continuacién) como Streams API son APIS tipo track anidados, los cuales terminan
relacionadas a WebRTC, que provee soporte para__conformando el flujo multimedia
la transmision de audioyy video. través de elias, _mencionado. Para entender técnicamente cémo
accedemos a las interfaces y métodos necesarios inciona esto, descargamos el proyecto Proyecto-
que nos permiten trabajar un stream. Podemos _Camara-[Link] y creamos a confinuacién uno
definir el stream como un flujo de audio y/o video nuevo en VSCode, utilizando estos archivos base.
‘ue cisparara la
captura dela
el streaming
ib
Finalmente, tenemos un tag
-eanvas>, donde almacenaremos la
fo capturada, para luego guardaria
nel equipo.
[Link] |107 JavaScript > Proyectos / Capturar fotografias y videos
Codificar nuestro JS
Abrimos el archivo JS asociado a este proyecto y, dentro del método AddEventListener creado,
comenzamos a escribir el cédigo. Lo primero que hacemos es agregar el llamado a la API
getUserMedia(), de la cual solo usaremos el video:
document .addEventListener(“DOMContentLoaded”, function() {
navigator .[Link]({
video: true,
audio: false
»
-then(stream => video. srcObject = stream)
-catch([Link])
ns
Aqui utilizamos el objeto stream, el cual legara mediante una operacién asincrénica que espera la
Confirmacién del usuario, quien debe aceptar transmitir video desde su dispositivo, Si hay un error,
seré capturado y mostrado en la consola, a través de .catch,
Promise solucioné y ordené el computo asincrénico, que ain
es crucial en este tipo de desarrollo de software, dado sus tiempos
de carga, respuesta, o disponibilidad técnica en el navegador web.
108 | reduserscom En caso de que el usuario no acepte la transmisién del video, el tag del
documento HTML quedara vacio. No se visualizara nada en él, mientras que la consola
de JavaScript incluida en las Herramientas para el desarrollador de Chrome arrojara una
excepcién (0 error) en el DOM
(© @ Arce | fiver AnaDestopPryectoN2ONeFnts\Cmarafeil
capa tno
a
BO + © tm
( vaxrescertion
+ © tame
+O ew
2 Novag
0 none
Acontinuacién, agregamos el cédigo que se ejecutara al momento de
hacer clic o tap sobre el componente HTML :
»
document. getElenentById(“capturar”) .addEventListener(“click”, function() {
canvas .getContext (“2d”) .drawImage(video, 0, @, 580, 377);
Capturamos el evento clic del botén.
Cuando este se ejecuta, mediante el método
drawimage(), didujamos contenido en el
objeto canvas, uno de los frames que es
transmitido en el componente . Esto es
el equivalente a tomar una fotografia, Antes de
la invocacion de este método, debemos definir
al objeto canvas, que en el contexto actual que
se representara dentro de si, es un contexto 2d
(dos dimensiones). Los pardmetros que recibe
el método drawimage() corresponden a las
coordenadas que debemos dibujar (Xx inicial
.Y inicial = O, X final = 377, Y final = 500)
del streaming de video. Estas coordenadas
‘equivalen a la dimension en la que actualmente
se reproduce el video.
Canvas esta presente en HTML como un elemento y en JavaScript
como un objeto. Nos permite dibujar graficos, visualizar imagenes,
crear animaciones o procesar el renderizado de video en tiempo real.
reduseracom 109 JavaScript > Proyectos / Capturar fotografias y videos
Podemos ver cémo se reparten las coordenadas que debemos
pasar como parameiras al meétedo drawimage(). Este recibe
cinco parmetros en total, siendo el primero de ellos el objeto oy
desde donde se resizer ia caphra deimagen (viseo)
[Link]("2d").drawlmage(video, 0, 0, 500, 377);
X inicial = @
Y inicial = @ Y inicial = 500
X final = 377
Almacenar la foto en el equipo
Eliltimo paso es almacenar la foto en la computadora o dispositive mévil del usuario,
Para esto, a continuacién del método drawImage(), agregamos el siguiente cédigo:
[Link](“src”, [Link] ( ‘image/png’ ))5
guardarFoto();
Utlizamos el atributo sre del componente canvas, para convertir el frame
capturado en una imagen. Luego, mediante el método toDataURL() del
componente canvas, le indicamos que dicho objeto es del tipo image/
ng. De esta forma, definimos que descargaremos una imagen al equipo 0
dispositivo, a través de la funcion guardarFoto(). Creemos dentro del mismo
AddEventListener, la funcion mencionada:
function guardarFoto() {
var link = document. createElement (“a”);
[Link] = “imagen_” + obtenerFecha() + “.png”;
[Link] = document. getElementById (“canvas”). toDataURL()
Link. click();
THO | redserscom Basicamente, creams la variable link, del tipo hipervinculo, a la cual le asignamos en su
propiedad download un nombre de imagen, que obtenemos concatenando “imagen_" junto
con la funcién obtenerFecha(), que generaremos a continuacién. Finalmente, el vinculo de
referencia de esta imagen es tomado desde la propiedad toDataURL() del elemento canvas
', por Ultimo, simulamos un clic para que se genere la descarga de la imagen:
function obtenerFecha() {
d= new Date();
h = [Link]() + “ + ([Link]() + 1) + +
[Link]() + ? + [Link]() + ? + [Link]() + 7 +
[Link]();
return hs
La funcion obtenerFecha() crea un objeto del tipo Date(), y almacena en
una variable fh la concatenacién de los datos Aito, Mes, Dia, Hora, Minutos
y Segundos. Por tiltimo, retorna esta informacién a través del mismo nombre
de funcion. De esta manera, para cada imagen que se va a descargar se
concatena un nombre Unico, de modo que no sobrescriba una anterior,
Incluir la fecha y hora del instante en que descargamos una imagen
nos permitira evitar la sobre escritura de archivos y el renombrado
indexado que muchas veces pueden confundir al usuario final.
reduseracom | TH JavaScript > Proyectos
Acceder al hardware
de los dispositivos
Comenzaremos a explorar en profundidad el hardware de los dispositivos del usuario
conociendo, en esta primera instancia, el consumo de bateria de los dispositivos
maéviles y cémo generar notificaciones mediante vibracién.
Continuando en el terreno experimental que computadoras portatiles, este navegador ha
propone JavaScript, una opcién muy vista este _incluido una funcién que notifica en pantalla
Ultimo tiempo dentro de los navegadores web cuando un equipo funciona con bateria y, ademas
es la de poder conocer el nivel de bateria de de ofrecernos la posibilidad de ahorrar datos
los dispositivos del usuario. Sihemos prestado durante la navegacién, nos avisa el tiempo
atencién a las ultimas implementaciones de estimado de bateria que nos queda.
Google Chrome en los dispositivos méviles y
Anotrador de bateria
On
43 min
Como desarrolladores, no esta
mal incluir el analisis de este
tipo de dato, ya que la web de
hoy pasa, en gran parte, por
el consumo desde pantallas
moviles; entendiendo por moviles
no solo tablets y smartphones,
sino también notebooks y
netbooks, que dependen en gran
medida de una bateria para su
correcto funcionamiento.
12 | _reduserscom [Link] Responin
El objeto Navigator suma a su cimulo
de caracteristicas la posibilidad de medir
el nivel de bateria de los dispositivos Nivel de bateria
donde se ejecuta una web, a traves del
método getBattery(). De esta forma, como
desarrolladores que acceden a este dato
podemos madelar procesos de carga de
una web evaluando el nivel de bateria,
para mostrar una mejor imagen, o habilitar
0 deshabiltar le posibilidad de cargar y/o
reproducir un video de alta calidad.
Veamos el conjunto de caracteristicas que Chrome, Opera y Microsoft Edge, por el lado
obtenemos al utilizar este método de andlisis _de los navegadores de escritorio.
de bateria de los equipos, para finalmente En el terreno mobile, solo esta presente en
integrarlo a un proyecto funcional que nos Chrome y Opera para Android, Samsung
permita entender en la practica cémo se Internet Browser y Android WebView.
comporta getBattery(). Esto ultimo nos garantiza el poder contar
De acuerdo con Mozilla Developer Network, con esta caracteristica si desarrollamos
la API de especificacién Battery Status se soluciones basadas en PWA, Apache
encuentra en una fase de recomendacién. Cordova, lonic y Phonegap
Actualmente esta implementada en Google
Browser compatibility &
@ Serxn0 Itemet
E Frew beans
© cee transis
@ Se!e108
@ SreMe for Arca
©) E02 Motte
@ Meret Below
Mews weoveW
Es
i
[Link] (113 JavaScript > Proyectos / Acceder al hardware de los dispositivos
Como invocar el método getBattery()
La integracién del método getBattery() se realiza también
utilizando Promises, tal como vemos en el siguiente cdigo:
navigator .getBattery().then(function(battery) {
// Obtengo valores y ejecuto funciones
+
Sise ejecuta correctamente el método (porque esta disponible en el motor
de navegacién), entonces se ejecuta la funcién function(battery), donde el
pardmetto indicado a la funcion, battery, se transforma en un objeto para prover
diferente informacién del sistema de hardware. Asi, podremos tomar diferentes
decisiones en cuanto al comportamiento de la web. Veamos en la siguiente tabla
qué podemos consultar a este objeto battery:
[sco)-21 =). NRO) DESCRIPCION
dischargingTime | Integer ‘Sino esta conectado a un cargador, esta propiedad devuelve un
estimado (en segundos) del tiempo restante de bateria.
EVENTO DESCRIPCION
chargingTimeChange Event Listener que detecta cuando cambia el valor del tiempo de
carga (cuando este aumenta).
Con el buen uso de este método podemos definir la carga progresiva
de imagenes, mostrar imagenes con mayor o menor calidad,
reproducir automaticamente videos o limitar la resolucion del video,
entre otras opciones utiles para una aplicacién web exitosa.
M14 | retuceracom Medidor de bateria
Una aplicacion web que mida el nivel de bateria de un dispositivo, actualizando su
valor en pantalla y alertando, mediante la consola, cuando llega a determinados
Pongamos manos a la obra con nuestro proximo proyecto practico. Construiremos @
niveles. Para empezar, descargamos el archivo Proyecto-nivel-bateria-base. zip.
Bresette ee cere Gemncene
Este proyecto web cuenta con una subcarpeta denominada imagenes, la cual contiene tres
graticos en forma de bateria, titulados [Link], [Link] y [Link]. Nuestro propésito
sera, por un lado, mostrar el nivel de bateria del equipo donde se ejecuta esta pagina web y,
cuando dicho nivel difiera de determinados valores, cambiar la imagen por la de un indicativo de
color que notifique visualmente el nivel correspondiente.
Creamos un nuevo proyecto en Visual Studio Code, agregamos el contenido de este archivo .ZIP
yeditamos a continuacién el archivo JS. Encontraremos en él el siguiente codigo:
var 4 = [Link]; |__|
var nivel;
document .addEventListener(“DOMContentLoaded”, function() {
bateria();
Ys
Escribamos a continuacién el cédigo para diche funcién
function bateria() {
[Link]().then(function(battery) {
vs
‘Tenemos dos variables
declaradasil y nivel. Le
primera almacena e valor
del cuerpo del documento,
la cual utlizaremos mas
adelante para cambiar la
imagen de color por la otra
imagen que corresponds,
La segunda serd la que
almacenard el nivel de
bateria que leeremos.
Dentro del Event Listener
que detecta a finalizacién
de carga dela pagina,
enemas declarada la
funcién bateria().
[Link] {115 JavaScript > Proyectos / Acceder al hardware de los dispositivos
Como podemos ver en este cédigo, invocamos al método getBattery() ulilizando Promises. Si puede
ejecutarse en el navegador, entonces activamos un Event Listener, que escuchar cuando se produzca
un cambio en el nivel de bateria del equipo:
battery. addeventListener(“levelchange”, function() {
nivel = ([Link] * 100). toFixed(9);
document. getElenentById(“pbat”).textContent = nivel + “%”;
»
Utilizamos la variable nivel, donde almacenamos
el valor devuelto por battery. level, multiplicéndolo
por 100 y redondeandolo para conseguir asi un
rntimero entero para mostrar. Luego, en el tag
dentro de la imagen, escribimos el valor de bateria
obtenido, expresado como porcentaje. A esta altura
ya podemos ejecutar nuestro proyecto en una
computadora o dispositive que cuente con bateria, y
obtener el nivel de carga,
[Link]én, creamos la funcién que actualizara la imagen de fondo, acorde a
determinados niveles de bateria, También escribimos en el titulo de la pestafia de
navegacién si la bateria se esta cargando o descargando. Para esto, agregamos lo
siguiente dentro del bloque de cédigo anterior:
actualizoImagenNivel (nivel);
if ([Link]) {[Link] = “Cargando...”;}
else {[Link] = “Descargando....”;
Consultamos la propiedad charging, que devuelve un booleano, Acorde a este, cambiamos el titulo de
la pestatia de navegacién, donde indicamos si ta bateria se esta cargando o descargando, utilizando
title del objeto document. Luego, creamos la funcién actualizolmagenNivel()
function actualizoImagenNivel(n) {
console. log(“valor de N “ +n);
Af (n <= 100 && n >= 30) {[Link] = “url(imagenes/[Link])”;
console. info(“Bateria normal.”);}
Af (n <= 29 && n >= 26) {[Link] = “url (imagenes /[Link])”;
[Link](“Bateria baja.”);}
if (n <= 19) {[Link] = “url (imagenes/red. png)”;
[Link](“Bateria muy baja. jConecte el cargador!”);}
a
"En este cédigo analizamos el valor n, pasado coma parametro al invocar esta Tambien ufilzaros console. info(),
funcién, e! cya contiene nivel de bateria obtenido anteriormente. Con este dato, __onsole.warn() y [Link]() para
‘reamos una serie de sentencias If, las cuales nos permiten analizar el nivel de rotificar oalertar mediante ia consola
bateriay, siesta dentro de determinadas pardmetros, mostrar una u otra imagen. sobre los diferentes niveles de bateria,
116 | _resuseracom Adaptar el grafico al nivel de bateria
Como hemos visto en
el codigo anterior, el
grafico de fondo que Ir ve
simula una bateria Siiee oe Se
cambia de acuerdo con — ae
los diferentes niveles tk tmee | wirenn set
que la funcionalidad de Sen ato wea st
esta API va reportando,
2 2 ee Cuando el nivel de
a 1 [eh ee oe bateria se mantiene
ia aE] = centre 100% y 30%, la
st Sant a imagen de fondo es de
ee cn color verde, Por cada
ree Ea fevento que ee el nivel de
eae = See Sor speciosa
1g tee ere Ce ete
sosme Shu | (ndcarzesieopiee
nite
ae
Cuando el nvel de bateria
desciende por debajo del
30%, yse mantiene igual
por artiba del 20%, la
imagen de fondo cambia
pr la de color naranja,
yen la consola del
navegador ejecutamos e|
evento [Link]()
Por timo, cuando
rivel de batera alcanza
18%omenos, la imagen
‘cambiara por la de color
rojo, yen la consola
aparecerd una alerta de
Conexion del cargador,
utlizando para ello
console.err0r().
reduserscom | 117 JavaScript > Proyectos / Acceder al hardware de los dispositivos
[Link]()
Los equipos mas modernos, usualmente que permite producir este evento en dichos
incluidos bajo el paradigma movil, suelen incluir_ _dispositivos. Su funcién es muy simple: se invoca
un sensor de vibracién para notificar al usuario _la sentencia navigator.
Fate(ms), pasdndole
ante determinados eventos. JavaScript engloba _los milisegundos que debe durar dicho efecto. Por
bajo el objeto navigator el método vibrate(), ejemplo, si ejecutamos el comando:
navigator. vibrate(5@@); 4+
Emitir pulsos continuos
El parémetro que recibe el método vibrate() no es tinico y fijo. Podemos.
ispositvo movil vibeard
durante medio segundo,
especificarle una serie de parémetros consecutivos para generar una vibracién
pausada en el dispositive. Veamos cémo hacerlo a través del siguiente diagrama:
Tiempo de pausa (en milsegundos)
\ |
“Tiempo de vibracion (en milisegudos)
Proyecto de ejemplo
Para probar esta caracteristica, debemos descargar
el proyecto de ejemplo Proyecto~
ibracion-
De acuerdo con este esquems,
al ejecutar dicho metodo, el
‘dispositive vibrara durante medio
‘segundo, hard una pausa de 2
décimas de segundo, vbrara
flras 3 décimas de segundo, hard
luna nueva pausa de 2 décimas
de segundo, y finalmente
\ibrara olros 100 milisagundes
Come podemos apreciar, su
implementacién es muy sencilla,
[Link]. Lo ejecutamos en una tablet, smartphone o
computadora que cuente con esta caracteristica. Para conseguir
esto iltimo, los invitamos a descargar un servidor proxy que
permita poner este proyecto en linea, dentro de una red hogarefta,
© subirel contenido a algiin sitio web desde donde podamos
ejecutarlo a posteriori, en el dispositivo correspondiente.
118 | reduserscom Redes
sociales
a li
Técnicas
de Marketing Digital
Cientos de publicaciones USERS por una minima cuota mensual.
Siempre, donde vayas. On Line - Off Line. En cualquier dispositivo.
Al menos 1 novedad semanal. Son 680 publicaciones y sumando...!
Incluye: eBooks - Informes USERS - Gufas USERS -
Revistas USERS y Power — CURSOS.
Pere eee
SUSCRIBETE 9 ==
Torey JavaScript > Proyectos
Los sensores
de movimiento
Ya sea para aplicar en videojuegos, como para orientar nuestros puntos cardinales,
los sensores de movimiento incluidos en los dispositivos méviles son de gran utilidad.
Veamos cémo acceder a ellos utilizando nuestro fabuloso lenguaje JavaScript.
Laiintegracién de sensores de movimiento y ejes _ diferentes en los videojuegos, contar con una app
en tablet y smartphone ha generado un cambio _brjula para guiarnos atin sin sefial de antena, 0
beneficioso en los dispositivos méoviles. Estoha _ulilizar un GPS que nos oriente hacia donde nos
permitido, por ejemplo, desplegar una interaccién dirigimos en tiempo real.
Como procesar los eventos de orientacion
En JavaScript, contamos con la posibilidad de procesar cualquier evento
relacionado con la orientacién de un dispositivo, utilizando precisamente el evento
deviceorientation. Al ejecutar el codigo de deteccién de la orientacion del dispositivo,
lo que hacemos es “escuchar” el cambio de posicion de los sensores incluidos en el
acelerémetro. Su implementacion es muy simple:
window. addEventListener(‘deviceorientation’, function(e) {
ys
Ejecutando un Event Listener, donde invocamos el método deviceorientation, ya
podemos comenzar a detectar cualquier cambio que se produzca en el dispositivo
movil. Este evento se ocupa de reportar el valor de tres ejes principales: X, Y y Z.
Eleje X esté en el plano de a pantalla, y es positive hacia la
erecta de esta, y negalivo hacia su izquierda
YY ElejeY esia ene! plano de la pantalla yes positivo hacia el extrema
superior, y negative hacia el extrem interior
Finalmente, el ejeZ esta perpenciculara la pantalla o teclado, yes,
positivo cuando se extiende hacia afuera de la pantalla,
WL
120 | [Link] Alalterar la posicién de cualquiera de estos tres ees, se esta cambiando la graduacién de los
angulos Alpha, Beta y Gamma. La orientacion del dispositivo se determina sobre la base de cémo
este se rota. Veamos de qué modo se comporta cada uno de los ejes:
ANGULO COMPORTAMIENTO
Larotacién sobre el eje X se da cuando el itivo se aleja respecto ala posicion del
usuario, lo que hace que el Angulo Beta cambie. El angulo Beta es 0° (cero grados) cuando
el extremo superior e inferior del dispositivo estan a la misma distancia del plano de pi
respecto de la superficie de la Tierra.
Implementaciones de la orientacion y gravedad
A través de los sensores includ en los dispositivos movies de gama media y alta, es posible no solo
infegrar una brjula en el equipo ointeractuar con videojuegos, sino terbiéndetectar cuando un equipo esta
encaida libre y apagara tiempo la energfa de cisco rigido, para evter que los cabezales dafen los platos
como sucede en algunas unidades portailes que utiizan los discos rigidos mecénicos.
La geolocalizacion basada en GPS no s6lo al plano de la tierra (Altitud). Estos detalles
permite medir las coordenadas Latitud y permiten calcular en algunas apps avanzadas,
Longitud de un dispositive con mucha precisién _en qué piso se puede encontrar una persona, y
sino que también permite medir, en muchos hasta orientarla desde el software, por el interior
casos, la distancia del dispositive respecto de una vivienda o edificio,
reduserscom f121 JavaScript > Proyectos / Los sensores de movimiento
Atencion: Chrome, Firefox y los ejes
Cuando utilizamos el manejo de ejesy rotacion de
panfalaa través de JavaScript, debernos tener en cuenta,
ue los navegadores Chrome y Firefox, y por ende los
respectivos navegadores web que utilizan los motores de
estos, tienen un manejo de ejes diferente. Por lo tanto,
recomendamos que, al momento de desarrollar una
solucién que manipula los ejes y, en base aellos, genera
un determinado comportamiento de la aplicacién, es
preciso probarla en estos dos navegadores para controlar
de manera correcta la forma en la cual responderd.
El objeto Math
Antes de proceder con el ejercicio practico que _propiedades estaticas, que permiten operar
concierne a este proyecto, vamos aanalizar —_facilmente con cualquier tipo de niimero que
un poco qué nos ofrece JavaScript para el necesitemos manipular.
manejo de las operaciones matematicas, Dentro del ctimulo de métodos de que
JavaScript pone a nuestra disposicién el objeto disponemos en Math, podemos destacar
Math, a través del cual se invocanmétodosy —_los siguientes:
DESCRIPCION
angente de un arco.
Retorna el coseno de un niimero en radianes.
Retorna un numero redondeado hacia su entero mas proximo.
tan(x) Retorna la tangente de un angulo.
es [Link]()
Para realizar nuestro préximo proyecto,
utilizaremos el método [Link](), que
nos devolvera el numero inferior entero
mas proximo al valor que le pasemos
como parametro. En la siguiente imagen,
podemos ver el comportamiento de esta
funcién, dependiendo de si el numero
que le pasamos como parametro es
positivo 0 negativo.
Rotar los ejes de una imagen
Para comprender mejor el uso del sensor
acelerémetro de los dispositivos moviles a través
de JavaScript, abordaremos a continuacién
Un proyecto que cargara una imagen en dos
dimensiones, y la rotara de acuerdo con el
movimiento que realice el usuario con el dispositive
Tae fan Wwe epee Te hae
Por el momento, este proyecto no realiza ninguna funcionelidad en particular. La misma
debemos agregarla nosotros a través del archivo JS relacionado. Para ello, editamos el
documento HTML, y pulsamos CTRL + clic sobre la referencia al archivo [Link]; aceptamos,
‘crear dicho archivo. Agregamos el codigo base, que detectard cuando la aplicacion web ha
finalizado su carga en el navegador:
22. Math. £1001 (1.03)
21 \
20 21
21 math. ti00r(
22 N
23 -22
®
movil. Para empezar, descargamos el archivo
[Link], Descomprimimos la
carpeta correspondiente y creamos un nuevo
proyecto en Visual Studio Code. Al editarlo,
vveremos un archivo HTML base, que muestra
alineada una imagen determinada
/ (nn function() {
Denia de! Event a
Listener declarado, yp
ahadimos la
primera linea de
document .querySelector (“img”);
cece
\ var imagen
[Link] |123 JavaScript > Proyectos / Los sensores de movimiento
De esta forma, a través de Ia variable imagen, mediante querySelector capturamos el
objeto HTML correspondiente a la imagen que queremos rotar, sequin el movimiento
que detectard el acelerémetro del dispositive. Después, declaramos otro Event
Listener, que escucharé cuando se produzca el movimiento del dispositive movil,
utilizando deviceorientation. Al detectar dicho movimiento, mediante el parametroe,
Parariehzart le aloves'on tiempo real ai ol abelensmelo gent) area
Elparimero se
window. addéventListener(‘deviceorientation’, function(e) ¢ | transtomsanunodies,
- bh vot amacena as
ys propiedad alpha, beta
Yoamma,luntoconsus
aloes en impo rea
Estoesto que debomos
leer acontinuociony
aimacerar dchos vores
enterentes ables
Utiizamos las variables a, by g para
‘almacenatlos valores de Alpha, Beta
Gamma, respectivamente, Dado que
losnimeros devueltos através de estos
parametros pueden ser del tipo double,
Utilzaremas el método [Link]()
para redondearlos hacia suentero
Inferior mas proximo,
a = Math. floor([Link]);
b = Math. floor([Link]);
Math. floor([Link]) ;
Ahora un poco de CSS
Para tetminar de dar formato a nuestro script,
invocaremos el método CSS rotate() relacionado
alas transformaciones que incluye CSS3, para
mover el producto acorde al valor que recibimos
Los métodos que ultilizaremos son rotateZ(),
rotateX() y rotateY(), y pasaremos el valor de los
respectivos enteros almacenados en las variables
a, byg, sequido de la leyenda deg (degrees, 0
de cada eje. grados en inglés)
var transform = ‘rotateZ(‘ + [Link]([Link]) + ‘deg) rotatex(* + Math.
round([Link] -90) + ‘deg) rotatey(‘ + [Link]([Link]) + ‘deg)?;
En la variable transform agrupamos la invocacién a estos métodos CSS,
concatenando los valores que deseamos aplicar, a cada uno de los métodos
CSS. Una vez almacenado todo esto en la variable mencionada, le aplicamos la
transformacion CSS a la imagen que deseamos rotar:
[Link] = transform;
hiv Editar saeccén Yer
Tg Depurer Terminal Ayuda oes Es-Vinalstdioca.. —
Sejsis x
[Link]{'ooNContentLaades™, function) {
var imagen = [Link](“ing");
window. addevertListorer(‘deviceorientation', function(e) {
Con este eéaiga, ath #loer(e-a1p%8);
ya podemos = hash ftoor(e. tet);
probar nuestro ath floor Ce. gama)
‘huevo proyecto. La transform = “rotate2(’ + fatharound(enalpha) + ‘deg) rotatex(* + Hatheround
estructura completa ecoeca =50) + *deq) rovatey(" »[Link]([Link]) © 4)" 7,
‘de céma debe imagen. style. transform » transform)
quedarel codigo
puede verse en la
Imagen,
124| Probar la rotacion de la imagen
41 Siontamos con un servi web en nuestro
equipo, lo iniciamos y, con la direccién IP y
el puerto, cargamos dicha ruta en nuestro
dispositivo mévil para comenzar las pruebas.
‘Sino disponemos de un servidor web,
podemos optar por las Herramientas para el
desarrollador de Google Chrome, que nos
permitiré probar locaimente este proyecto
‘emulando la rotacién de un dispositive, En
este ultimo caso, cargamos el proyecto en
Google Chrome y presionamos la tecla F12,
que inicia las herramientas mencionadas.
4) Ene spastndo Sensors dean Heramierdas
para el desarrollador de Google Chrome,
encontramos la opcién Orientation. Por
defecto, esta viene en modo OFF, 0
‘sea, apagado. Desplegamos el Combo
desplegable y seleccionamos Custom
Orientation. A continuacion, se habilitard el
PAD que contiene la imagen de un teléfono
‘mévil, [Link] los campos relacionados a
los éngulos Alpha, Beta y Gamma.
Pascua s ror imageceboros
pulsar con el mouse sobre el PAD mencionado
y, sin soltar el bot6n primario, comenzamos
a arrastrar el grafico del teléfono mévil hacia
alguno de sus lados 0 en forma diagonal
(modo Drag and Drop). Esto hara que la
imagen contenida en el documento HTML
‘empiece a girar. Si anulamos el efecto de
arrastre, la imagen quedara fia en la posicion
donde nos detuvimos.
{Ot 2pci6n manual para rotrlaimagen es
seleccionar alguno de los campos de texto
disponibles e ingresar un valor numérico que
puede ir de 0° a 180°, 0 de -0" a -180°. De
esta forma, veremos que la imagen rota de
forma fija. Podemos ir alterando los diferentes
campos Alpha, Beta y Gamma con nuimeros
dentro de los parametros indicados, y asi
apreciar la rotacién del grafico.
Lege de realizar todas as prusbas que
creamos pertinentes, podemos volver la
imagen a0 (cero), restableciendo asi su valor
inicial. Para hacerlo, basta con pulsar el boton
RESET. Entonces podremos volver a realizar
pruebas y correcciones, o alternar entre las
pruebas descriptas en los pasos 02 y 03.
redusercom | 125 JavaScript > Proyectos / Manejo de datos remotos con JSON
Manejo de datos remotos
con JSON
Acontinuacién nos introduciremos en el mundo del acceso a datos remotos. Veremos
cémo aprovechar la técnica Ajax para acceder a datos del tiempo, leyendo los resultados
en formato JSoN y visualizéndolos de manera clara para el usuario.
Desde la llegada de Internet, las técnicas A través de este nuevo proyecto, accederemos
de acceso a datos remotos a través de sitios. a la informacién remota de un servicio web
web y aplicaciones méviles se ha tornado de pronéstico del tiempo y aprenderemos de
diferente respecto al que los desarrolladores qué forma podemos sacar provecho de
de software estaban acostumbrados a ver. la tecnologia Ajax.
Ajax
en ‘Ajax es un acrénimo de Asynchronous JavaScript And Xml para el desarrollo web, que
nos permite crear aplicaciones interactivas. Estas se ejecutan del lado cliente (usuarios), mientras
que los datos (remotos) son accedidos a través de una comunicaci6n asincrénica contra el servidor
que los aloja, en segundo plano. Esta técnica fue desarrollada originalmente por Microsoft bajo su
concepto de scripting remoto, en 1995, y se introdujo en el mercado en 1998. El nombre Ajax llego
casi una década después de la mano de Jesse James Garrett.
és)
ae} eh ian
= . Sense. reese
-
‘Aqui versos representada una pagina web de notificas, con los tituos, una breve introduccién de cada nota y un
hipervinculo que permite extender, Al pulsar sobre él, la pagina solicitaa la base de datos del servidor web el resto
{del contenido de a nota, Este contenido es descargad, y Ajax se ocupa de refrescar solo la porcion de pagina de dicha
nota, para completar el texto y contenido grafico/mulimedia de la noticia
126 | resuserscom Beneficios
Esta técnica es itil, por ejemplo, para cargar répidamente un sitio web voleando informacién parcial a él
luego, Ajax descarga el resto de manera asinerénica. De este modo, n solo la web carga con rapidez, sino
‘que también se descargan porciones de informacin desde el servder, evitando que éste se sature. Y, por
Llfimo, no se refresca todo el documento web, sino tnicamente la porcién donde se agrega el contenido.
Asilogramos también que el usuario no consuma datos excesivos ni espere demasiado tiempo.
Este tipo de intercambio de informacién se populariz6 para bien, con el objetivo de reducir el envio de
datos y evitar la saturacién de servidores cuando las consultas por parte de los usuarios son masivas.
Web services
La técnica de acceso a datos remotos se servidor de donde proviene la aplicacién web.
realiza a través de lo que se conoce como web _Unicamente se puede acceder a servidores
services. Ajax solo permite accedera datos —_externos o de terceros si estos soportan la
de forma sincrénica, es decir, a aquellos tecnologia CORS (acrdnimo de Cross Origin
que se encuentren alojados en el mismo Resource Sharing)
—f /sTocK
=> =| ee [
Wwhl. [Link]
Enel diagrama podemos ver la representacién del acceso
mediante Ajax a la informacién de acciones en tiempo
real. Como usuarios, accedemos a un sitio web especifico;
este, a su vez, consulta la API de Wall Street para obtener
la cotizacién de acciones del dia, actualizadas al instante
recutriendo a ellas mediante la tecnologia CORS.
Se ZS
f=
resuserscom | 127
