El impacto de explicar a los clientes el diseño web mutidispositivo

Cuando entras a una reunión con un cliente, debemos mentalizarnos casi como visitantes del futuro. Nosotros, como profesionales web, pasamos días inmersos en los nuevos paradigmas de la web multidispositivo. Sin embargo, incluso para nosotros, el cambio y los ajustes que vienen con la vida en Internet son constantes y pueden resultar en retos abrumadores. Entonces, ¿cómo creemos que se sienten nuestros clientes?

La web actual debe ser fluida e implica cambios rápidos, agiles y repentinos. Nuestros procesos para trabajar con ella y con nuestros clientes tienen la necesidad de reflejar eso. Es hora de que nos despojemos de los vestigios mentales que hemos heredado de antiguas aplicaciones para poder construir nuevos sistemas basados en la honestidad, la inclusión y la comunicación genuina. Debemos ofrecer a nuestros posibles clientes el servicio y el proceso de inmediato, permitiéndoles ver y detectar todas las fallas, mejoras y baches en el camino. A través de esta relación se convertirán en verdaderos socios al aprender a navegar mejor en este extraño y evolucionando universo digital juntos.

La perspectiva lo es todo

Cuando nuestros clientes primero piensan en un sitio web, la imagen mental que evocan es probable que sea la de un navegador web en una computadora de escritorio. Esto es completamente comprensible, después de todo, la mayoría de sus experiencias de sitios web se producen mientras están sentados en sus escritorios, experimentando continuamente en la comodidad de sus sillas.

Desde donde estamos sentados nosotros, sin embargo, vemos la web como compuesta de muchos más dispositivos. Hasta hace poco, ha sido conveniente pensar que aquellos dispositivos son solo "smartphones", "tablets " y "laptops". Pero a medida que más dispositivos y más variados han entrado en el mercado, los cubículos digitales se han multiplicado y desbordado, a manera de una aglomeración de tamaños de pantalla, resoluciones, navegadores, sistemas operativos, convenciones, y las posibilidades de la interfaz.

Esto ha requerido una revisión en nuestro pensamiento. En lugar de sitios web es una serie de construcciones perfectas prestadas en cada pantalla en detalle exigente, los diseñadores web han comenzado a pensar en términos de sistemas complejos. La flexibilidad se ha convertido en una moneda más valiosa que la especificidad.

Si sus clientes siempre han sido parte de un proyecto de diseño tradicional antiguo, esto no es lo que estarán esperando encontrar en sus reuniones. Entonces, ¿cómo comenzamos a cerrar esta brecha? ¿De qué manera ayudamos a nuestros clientes a comenzar a ver el Internet a través de nuestras gafas de diseñador web? Por amor de Dios, ¿cómo les podemos hablar de esto?

Haga de sus comentarios un bucle

La granularidad de la retroalimentación del cliente debe coincidir con el nivel de detalle de la entrega que están viendo. Echemos un vistazo a una reacción común:

    Cliente: Hmm . La maqueta se siente un poco vacía de lo que pensé que haría.

    Yo: En el documento de especificaciones nos dijo que quería que fuera a la vez sofisticado y limpio. Tal vez esto no es suficientemente sofisticado?

    Cliente: Eso suena bastante bien. ¿En qué piensas?

    Yo: No estoy exactamente seguro de lo que parece, pero yo creo que las interacciones y banners que crearemos más tarde serán una oportunidad de tener más información en el website. ¿Por qué no vemos lo que podemos hacer ahora , tal vez revisemos el esquema de color para ser más enérgicos, entonces a ver qué podemos hacer para animar las cosas una vez que tengamos la versión desplegada. ¿Le parece bien?

    Cliente: Sí! Vamos a hacerlo.

Usted debe ajustar las cosas hasta que el cliente este de acuerdo en que estemos  lo suficientemente cerca de lo ideal. Recuerde: cada solicitud del cliente para una revisión es en realidad una petición de una conversación. Mi respuesta predeterminada a cualquier cambio es, " ¿Por qué?". Ayude a su cliente a centrarse en el "por qué ", y recordarles que averiguar el "cómo" es su responsabilidad. Centrándose en el "por qué" le ayuda a abordar la raíz del problema.

Ahora podemos empezar

Tomarse el tiempo para ayudar a nuestros clientes a entender los desafíos que enfrentamos y el papel que van a jugar en nuestro proceso que hace que sean más fáciles de comunicar y trabajar con ellos. Incluso le ayudará a construir la confianza en usted, a fortalecer su relación, y confiar más plenamente en su equipo para este y futuros proyectos. Hasta la próxima.

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.

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.

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.

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...

Como Obtener El Navegador Web y La Versión usando PHP

Es clasico toparse con problemas de diseño en web, especificamente con internet explorer 6 por lo que a continuación les recomiendo usar dos funciones, la primera es para obtener el nombre del navegador web desde el que se accede y la otra es para obtener la version de este, estas funciones son muy útiles a la hora de diferenciar contenidos debido al renderizado de cada cliente web.

-Función para obtener el nombre del navegador:

function get_user_browser()
{
   $u_agent = $_SERVER['HTTP_USER_AGENT'];
   $ub = '';
   if(preg_match('/MSIE/i',$u_agent))
   {
       $ub = "ie";
   }
   elseif(preg_match('/Firefox/i',$u_agent))
   {
       $ub = "firefox";
   }
   elseif(preg_match('/Safari/i',$u_agent))
   {
       $ub = "safari";
   }
   elseif(preg_match('/Chrome/i',$u_agent))
   {
       $ub = "chrome";
   }
   elseif(preg_match('/Flock/i',$u_agent))
   {
       $ub = "flock";
   }
   elseif(preg_match('/Opera/i',$u_agent))
   {
       $ub = "opera";
   }
 
   return $ub;
}

-Función para obtener la versión del navegador:

function gbversion()
{
  $Name="";
  $Version=""; 
        $browsers = array("firefox", "msie", "opera", "chrome", "safari",
                            "mozilla", "seamonkey",    "konqueror", "netscape",
                            "gecko", "navigator", "mosaic", "lynx", "amaya",
                            "omniweb", "avant", "camino", "flock", "aol");
        $Agent = strtolower($_SERVER['HTTP_USER_AGENT']);
        foreach($browsers as $browser)
        {
            if (preg_match("#($browser)[/ ]?([0-9.]*)#", $Agent, $match))
            {
                $Name = $match[1] ;
                $Version = $match[2] ;
                break ;
            }
        }  
  return $Version;
} 

-Como en mi caso el problema solo se daba cuando usaba internet explorer 6 use el siguiente codigo:

if(get_user_browser()=="ie" && gbversion()=="6.0")
{
 echo "hacer ie6";
}
else
{
 echo "hacer otro";
}

Comic Don Xumas

A partir de hoy empezaré una nueva etapa de mi blog, aunque la primera fue muy corta y solo la visitaban mis amigos ja... Además ya hay muchos blogs dedicados a la tecnología y al internet(demasiados!!!), asi que les dejo mi primer dizque comic, como dijeron por ahi una imagen vale mas que mil palabras... en especial para los analfabetos...

Control Captcha en 3D(más entendible)

Hay muchos que hemos visto el sistema de códigos captcha, más conocido como las letras deformes que tienes que poner en algunas web antes de registrarte, suscribirte a un servicio o enviar un sms. Pero recientemente se ha implementado un nuevo sistema captcha que consiste en escoger objetos en 3d que se muestran en posiciones aleatorias, realmente los objetos son más fáciles de identificar que las letras retorcidas y son más efectivos teniendo en cuenta que ya hay sistemas que pueden romper el captcha alfanumerico.



Existen sitios que ya han implementado este sistema como el que les dejo a continuación yuniti, habrá que estudiar un poco el código de este nuevo sistema... hasta la próxima :)

Hacer Autompletar Con Google Suggest Queries

Para quienes se han topado con el problema de tener el requerimiento de realizar una búsqueda con sugerencias en alguna web, para ser más especifico realizar sugerencias al teclear en una caja de texto, pues aqui les dejo una sencilla solución al problema se trata de un servicio de google que se llama suggest queries, este devuelve una lista de posiblidades para autompletar el texto a buscar, pueden customizar el ejemplo a su gusto... Servidos :)

Descargar Ejemplo

      

Imágenes, Iconos de Aplicación y Diseño Web

Como ya es costumbre estaba el lunes con mucho sueñito(no diré por que...), y pues empeze muy temprano a recorrer la blogosfera y encontre una web interesante dedicada al diseño, me pareció muy chevere por que hay iconos para aplicaciones, fondos para web y los infaltables templates, en resumen todo lo que necesita un diseñador que no necesita reinventar la polvora para llegar a obtener un buen producto en el ciberespacio...

Bueno señores... servidos, ahi les dejo el enlace http://www.deviantart.com/ y también algunas imagenes que llamaron mi atención.