Mostrando entradas con la etiqueta javascript. Mostrar todas las entradas
Mostrando entradas con la etiqueta javascript. Mostrar todas las entradas

lunes, 10 de marzo de 2014

Aplicando la estrategia mobile offline first ante la frustración de la desconexión

Cuando se trata de la creación de aplicaciones, a menudo asumimos que nuestros usuarios son muy parecidos a nosotros. Nosotros los imaginamos con los últimos dispositivos, el software más reciente, y las conexiones más rápidas. Para esto debemos tener una variedad de dispositivos(o al menos emuladores) y navegadores antiguos para las pruebas, pasamos la mayoría de nuestro tiempo de construcción desde la comodidad de nuestros dispositivos de escritorio modernos, siempre en línea.



Para nosotros, un error de conexión o servicio lento es un problema temporal en la red de telefonía o wifi el cual es rutinario. Desde esta perspectiva, se tiene la tentación de pensar en la conectividad, móvil o de otro modo, como algo que se resolverá por sí mismo con el tiempo, a medida que una mayor cobertura de la red y un servicio más rápido. Y eso funciona, siempre y cuando nuestros usuarios a mantenerse por encima del suelo en grandes y muy modernas ciudades bien desarrolladas, pero este no es el caso siempre.

Pero, ¿qué sucede una vez que suben en el metropolitano o al tren eléctrico, a bordo de un avión, en un viaje por tierra, o ir a visitar el campo? O cuando se paran en la esquina con menos cobertura de un edificio o simplemente se encuentran como parte de una gran multitud? Nuestras aplicaciones con UX cuidadosamente construidas se convierten en fuentes de frustración, porque confiamos tan
plenamente en ese enlace que irá supuestamente de nuevo a nuestros servidores.

Esta dependencia hace caso omiso de una verdad fundamental: Desconectado es simplemente un hecho de la vida. Si usted usa un móvil, usted estará desconectado en algún momento. Sin embargo. Hay maneras de tratar con este hecho.

Como encontrar el balance de conexión?

Las aplicaciones web solían ser completamente dependiente del servidor que hace todo el trabajo , y el cliente sólo muestra el resultado. Cualquier interrupción en la conexión era un problema importante : si usted se encontraba desconectado, no podía usar la aplicación.

Ese problema se resuelve, en parte, por los clientes más ricos, donde más de la lógica de la aplicación se ejecuta en el navegador como google docs (actualmente google drive), por ejemplo. Pero para una experiencia adecuada de offline first, también se desea almacenar los datos en la parte front, y si se desea que se sincronice con el almacén de datos del servidor. Felizmente, las bases de datos en el navegador están madurando, y hay un número cada vez mayor de soluciones para esto como derby.js, Lawnchair, hoodie, firebase, remotestorage.io, sencha touch entre otros- los cuales resuelven los aspectos técnicos
cada vez de manera más fácil.

Pero tenemos problemas más grandes y mucho más raros: el diseño de las aplicaciones y sus interfaces de conectividad intermitente conducen a una gran cantidad de nuevos escenarios, problemas y errores que debemos controlar dependiendo del negocio.

La experiencia de uso de un sitio web o aplicación sin conexión debe ser mucho mejor, menos frustrante y de más potencia. Necesitamos el equivalente UX de diseño de páginas web sensibles : un fuerte catálogo de guías y patrones para un mundo multidispositivo desconectado. Pues actualmente el usuario final no solo se conecta desde su móvil sino también desde la PC o tablet.



Entendiendo el ciclo de vida de la conectividad

La mayoría de las aplicaciones web tienen dos puntos de conexión relacionados de fracaso los cuales son:
el envío desde el cliente y la recepción del cliente (llega a ser equivalente a demanda de servidor).
Dependiendo de lo que hace su aplicación, es posible que el usuario final desee 3 cosas:

1. Comunicar u ocultar explícitamente el estado de conectividad y sus cambios (por ejemplo, en un cliente de chat sería informar a los usuarios que los nuevos mensajes escritos no se envían inmediatamente).

2. Permitir la creación del lado del cliente y funciones de edición, incluso cuando la aplicación se encuentre fuera de línea, y tranquilizar a los usuarios que sus datos están seguros y eventualmente se enviarán hacia al servidor (pensar en una aplicación para compartir fotos que le permite tomar y publicar fotos en cualquier circunstancia).

3. Deshabilitar, modificar, o incluso ocultar características que no pueden trabajar fuera de línea, en lugar de dejar que la gente las vea y no las pueda usar (imagine un botón de "enviar" que se transforme en un botón "enviar al recuperar la conexión").



A fin de ayudarnos entre sí y también a futuras generaciones de diseñadores, desarrolladores y expertos en interfaces de usuario (UX), te invitamos a unirte a la discusión en offlinefirst.org. La meta futura es la de crear un manual en línea que incluye los patrones UX y anti-patrones, las opciones de tecnología, y la investigación sobre el usuario. Hasta la próxima!

viernes, 7 de febrero de 2014

Obtener el sistema operativo cliente usando javascript

En una ocasión anterior les había comentado como obtener el navegador y la versión con PHP, en este post les comentaré algo que tiene una utilidad parecida pues también nos sirve para hacer una bifurcación en caso tengamos una aplicación web para escritorio y otra para el móvil, se que también existe el responsive design con su estrategia mobile first lo cual evitaría el uso de esto pero el código a continuación les puede servir también en otros casos como hacer compatibles en un website otras muchas cosas, por ejemplo si entras en tu website y tu tienes una aplicación en google play y otra en la appstore de apple puedes mostrar el enlace según sea el móvil con el que accedan a tu website o mejor dicho según el sistema operativo que tenga el móvil (Android o IOS) lo cual permite una mejor experiencia de usuario al recomendar la aplicación segun sea el sistema operativo cliente. A continuación les dejo el código para determinar dos variables booleanas y evaluar si el origen es un dispositivo con android o un dispositivo con ios.

            
var ua = navigator.userAgent.toLowerCase();
var esAndroid = ua.indexOf("android") > -1;
var esiPhone = ua.indexOf("iphone") > -1;
var esWPx = ua.indexOf("windows phone") > -1;


El siguiente paso solo sería evaluar estas variables en una condicional y mostrar la información requerida (en este caso el enlace a descargar la aplicación Android o el enlace a descargar la aplicación IOS) según sean las variables booleanas recuperadas.

Hasta la próxima.

miércoles, 22 de enero de 2014

Compartir cookies entre dominios (Crossdomain cookies)

La semana pasada me tope con un problema muy particular, actualmente estoy laborando en una institución que tiene implementado un esquema de alta disponibilidad (HA) el cual consiste en un balanceador de carga y dos servidores cada uno con su replica de la aplicación web, digamos pe1.dominio.com y pe2.dominio.com, por lo que si existe una configuración frecuente en una de ellas al redirigir a la otra mediante el balanceador las cookies no pueden ser vistas y la configuración frecuente del usuario no se mostrará. Lo que se requiere evidentemente es que dos dominios compartan de alguna manera las cookies con la configuración frecuente requerida en el login.
Entonces me puse a investigar un poco, de todo lo que pude encontrar seleccione inicialmente dos alternativas una que no muy legal por asi decirlo y que no es compatible con todos los navegadores por el javascript que se debe de usar, es la siguiente: método via XSS . La otra opción era recurrir al almacenamiento en cliente propio del html5.
Finalmente me di cuenta que no existe un estándar para compartir las cookies entre dominios, en teoría una cookie sirve para un dominio y un navegador, por lo que hacerlo vía javascript no es compatible con todos los navegadores, pero pense un poco mejor y habría otra opción (al menos en teoria): 

1. Centralizar todas las cookies en un único tercer dominio, digamos gestorcookie.dominio.com 
2. Cuando el usuario hace una petición a pe1.dominio.com o a pe2.dominio.com le debe redirigir a gestorcookie.dominio.com
3. gestorcookie.dominio.com le vuelve a dirigir de nuevo a pe1.dominio.com o a pe2.dominio.com segun sea el origen con la información que se necesita.

Aclaro que quizás desde otro punto de vista no sea muy seguro, y se tiene que crear algún tipo de artificio con variables post o get entre el dominio gestor de cookies y los dominios pe1 y pe2 tanto para la creación como para la lectura de este tipo de variables. Ahora la pregunta: Alguien se atreve a implementarlo? . Si logran hacerlo por favor compartan. Hasta luego.

jueves, 16 de enero de 2014

Comunicación entre aplicaciones web usando xml, java y javascript

En estos días me tope con un problema a resolver y se trata de verificar la creación de un archivo PDF en una aplicación web distinta a la mia, el cual en el ejemplo que explicaré a continuación denominaremos cargo. Evidentemente tuve que modificar las dos aplicaciones para que se puedan comunicar de alguna manera, en este caso opte por XML, la arquitectura quedó masomenos del siguiente modo:


En donde Rich Client vendria a ser la aplicacion cliente y Server es la aplicacion donde se vericará la creación/existencia del registro en base de datos o archivo en PDF en este caso ya que podría servir para verificar ambos.

Primero configuramos en el Server el XML de respuesta que se enviará al cliente en base a algunos parámetros get, en este caso el número de cargo y el tipo de cargo, para lo cual necesitamos crear un servlet al cual nombrare ValorPosible.java en la aplicación servidor que contenga lo siguiente:

response.setContentType("text/xml;charset=ISO-8859-1");
      PrintWriter out = response.getWriter(); 
      int tipoval = Tool.parseInt(request.getParameter("tipoval"));
      String resultado = "-1";
     
      switch(tipoval)
      {
      case 70://validar si  hay algun tipo de documento registrado de un cargo
        {
            String nCargo = request.getParameter("nCargo");
            String nTipo = request.getParameter("nTipo");
            String query = "select count (*) NUM from w_doc_cargo where ncargo="+nCargo+" and ntipo="+nTipo;
            int conta =Tool.parseInt(Tool.obtieneDatos(query).getString("NUM"));
            out.print(
                  " \n" +
                  " \n" +
                  "" + conta  + " \n" +
                  "");
              break;
        }
    }
    out.close();
}


Ahora configuraremos la aplicación cliente, primero debemos agregar en la pagina JSP que desea verificar la existencia del archivo la siguiente funcion javascript, si desean pueden hacerlo invocando un archivo js externo o dentro del jsp no hay problema.

            
function retValXml(url1)
{
           if (window.XMLHttpRequest)
             {
             xmlHttp=new XMLHttpRequest();
             }
           else // for older IE 5/6
             {
             xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
             }
           var url=url1;
           xmlHttp.open("GET",url,false);
           xmlHttp.send();
           var dom=xmlHttp.responseText;
           return dom.split("Valor")[1].substr(1, dom.split("Valor")[1].length-3);
}

También agrego otra función javascript que será finalmente la que determinará la exitencia del registro o archivo en la aplicación servidor mediante la comunicación por XML.

            
function VisualizarPDF(nCargo, nTipo)
{   var url="http://server/servlets/ValorPosible?tipoval=70&nCargo=" + nCargo;
    var ret = retValXml(url);
    if(trim(nCargo)=="")
    {
        alert("Ingrese un número de cargo");
    }
    else if(ret=="0")
    {       
        alert("El número de cargo no existe");
    }
    else
    {
        //...Aqui va el codigo para redirigir hacia la url/ubicación predefinida de los cargos
        window.location.href = 'http://server/ruta/predefinida/pdfs/' + nCargo + ".pdf";
    }
}

Nótese que en la pagina JSP de la aplicación cliente en la funcion javascript anterior invocamos al servlet de la aplicación servidor en la línea:

var url="http://server/servlets/ValorPosible?tipoval=70&nCargo=" + nCargo;

Solo nos quedaría testear nuestra funcion invocandola desde un hipervinculo o enlace de la siguiente manera:

<a href="#" onclick="javascript:VisualizarPDF(1,70);" > Descargar </a>

Evidentemente en la aplicación este link debe tener el parámetro número de cargo como dinámico en la función VisualizarPDF en este caso estoy pasando el codigo de cargo "1", despues de verificar la existencia se redirige hacia el archivo "1.pdf" ubicado en la ruta predefinida de archivos en la aplicacion servidor o en la que configuremos en el código.

Hasta luego.

viernes, 24 de septiembre de 2010

Buscar contenido dentro de un feed o rss especifico

Hola a todos, este post va dirigido a personas que tienen un blog y han querido poner un gadget de busqueda sin que salga el famoso mensajito "con la tecnologia de google", no me malentiendan la busqueda es utilizando el motor de google pero sin el famoso logo, para hacer esto vamos a utilizar el API de google para Feeds los que deseen saber mas pueden entrar a la siguiente direccion http://code.google.com/apis/ajax/playground/?exp=libraries#find_feed sino tambien pueden bajar mi ejemplo al final del post.

Simplemente tenemos que modificar una linea de codigo del javascript para variar el ejemplo para que busque en nuestro blog(excepto si deseas agregarle algo de diseño con css), en mi caso yo ya lo tengo implementado en mi blog al costado izquierdo abajo de mi perfil.

En mi ejemplo customizado tendrian que variar la siguiente linea:


var query = 'site:humancompiler.blogspot.com '+document.getElementById('c4').value;

Solo deben reemplazar la URL de mi blog por su blog o dominio con una fuente rss, a continuacion pueden bajar mi ejemplo completo, para ponerlo en su blog solo deben poner esa pagina con un iframe, para probar mi ejemplo busquen cualquier palabra que contenga algun post de mi blog.



jueves, 23 de septiembre de 2010

Formatear un input tipo text a entero, o con 2 decimales, o con separador de n caracteres en n caracteres

Hola a todos, despues d eun largo tiempo de ausencia retomo la blogosfera para compartir algo con lo que estruve lidiando esta semana, se me presento el problema de formatear una caja de texto para que acepte solo numeros enteros y otra caja de texto para q acepte numeros con n decimales, les explicare el codigo a usar y al final del articulo dejare los archivos para que descarguen los ejemplos.

Primero veremos el ejemplo para numero entero:

Javascript a utilizar:


function validarEntero(valor){
//intento convertir a entero.
//si era un entero no le afecta, si no lo era lo intenta convertir
valor = parseInt(valor)
//Compruebo si es un valor numérico
if (isNaN(valor)) {
//entonces (no es un numero) devuelvo el valor cadena vacia
return ""
}else{
//En caso contrario (Si era un número) devuelvo el valor
return valor
}
}
function validarFormulario(){
//extraemos el valor del campo
textoCampo = window.document.formul.texto.value
//lo validamos como entero
textoCampo = validarEntero(textoCampo)
//colocamos el valor de nuevo
window.document.formul.texto.value = textoCampo
}


Y dentro del tag body ponemos el objeto input dentro de un form:


< method="post" name="formul" action="">
Teclea un número:
< id="texto" onkeyup="validarFormulario()" onchange="validarFormulario()" name="texto">
< /form>


Ahora veremos el ejemplo para numero con 2 decimales, para esto hago la observacion que el usuario no ingresara el punto decimal por ejemplo si se desa ingresar 45.68 el usuario solo tecleara 4568 y el punto se añadira automaticamente, otro ejemplo si se desa ingresar 45.6 el usuario debera teclear solamente 4560 y se añadira el punto automaticamente.

Javascript a utilizar:


function format(input)
{
var num = input.value.replace(/\./g,'');
if(!isNaN(num)){
if(num.length>2)
{
num=num.substring(0,num.length-2)+'.'+num.substring(num.length-2);
}
input.value = num;
}

else{ alert('Solo se permiten numeros');
input.value = input.value.replace(/[^\d\.]*/g,'');
}
}


Y dentro del tag body ponemos el objeto input dentro de un form:


< form>
< type="text" id="c4" name="c4" runat="server" onkeyup="format(this)" onchange="format(this)">
< /form>


Bueno aqui les dejo los ejemplos a descargar, por tiempo no les comente el codigo del separador pero les dejo el archivo es el tercer archivo. Saludos y espero que les sirva, agradecer no cuesta nada, comenten si les gusto el post...