Si a alguno de ustedes se les ha ocurrido customizar un poco su web móvil con bootstrap pero no tiene el tiempo suficiente como para modificar los css y crear un skin desde cero, este recurso les servirá de mucho.
Entren a http://bootswatch.com/ , escojan el tema que más se acomode a su necesidad, luego solo deben bajar los dos siguientes archivos en css: bootstrap.css y bootstrap.min.css y reemplazarlos en su proyecto, aconsejo desde luego hacer un backup de estos dos archivos originales en caso quieran volver a su tema anterior. Hasta la próxima.
miércoles, 26 de febrero de 2014
martes, 11 de febrero de 2014
Elegir PhoneGap, Bootstrap ó JQuery Mobile
Por lo general cuando nos toca desarrollar un sitio web móvil a medida es determinante el momento en que decidimos que tecnología y frameworks usar, en especial si de diseño se trata. Una forma de ayudar a nuestra elección es el análisis del las ventajas y desventajas que tienen las opciones disponibles actuales que se muestran en el título de este post. Bien, empezemos por aclarar que estas tres herramientas fueron creadas para resolver diferentes problemas con diferentes enfoques.
PhoneGap es esencialmente un wrapper (navegador) que enmarca la aplicacion web el cual permite acceder a librerias nativas (API's) de los dipositivos (como la camera, bluetooth, etc.) haciendo uso del lenguaje JavaScript.
Bootstrap es un framework web preparado para aplicar la técnica del responsive design. Su propósito es adaptar la vista según se a el dispositivo con el que se acceda. Proporcionando diferentes presentaciones para smartphones, tablets, PC's, etc.
jQueryMobile es un framework web móvil que permite la vista multiplataforma móvil de la aplicación web reescribiendo enteramente los elementos JavaScript, HTML y CSS.
Ahora teniendo en claras estas definiciones pasamos a los Pro's y los Contras de los frameworks antes mencionados.
Bootstrap:
Pro: Fácil de aprender, fácil de configurar y customizar.
Pro: Muchos websites lo usan como por ejemplo twitter, la nasa, etc.
Con: UX limitada, esta es un área en la que jQuery tiene la ventaja, especialmente si usas sliders o menus drop down. Los sliders en bootstrap no son arrastrables en los móviles.
jQuery Mobile:
Pro: Interfaz más amigable al usuario final.
Pro: Fácil de aprender, especialmente si has usado antes la librería jQuery.
Con: Necesita mayor inyección de data para una mejor experiencia de usuario, esto podría hacer que tu aplicación dinámica sea muy compleja de modificar.
PhoneGap:
Pro: Fácilmente te permite crear aplicaciones web interplatforma haciendo uso de JavaScript/HTML/CSS y brinda acceso a las APIs del dispositivo.
Con: El tiempo de respuesta en especial en android es mayor que los frameworks antes mencionados.
Conclusión mucho depende del enfoque que busques darle a tu aplicación y de sus particularidades. Por ejemple si se quiere algo netamente informativo bastaría con bootstrap, si se desea una interfaz más atractiva para el usuario podría usarse jQuery Mobile y si lo que se desea es interacción con las API's nativas de los dispositivos PhoneGap. Hasta la próxima.
Etiquetas:
bootstrap,
browser,
celular,
globalhub,
jquery mobile,
navegador,
phonegap,
willy castro alvarado
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.
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.
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.
Etiquetas:
android,
globalhub,
ios,
javascript,
moviles,
web,
willy castro alvarado
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.
Etiquetas:
compartir cookies,
cookies,
crossdomain,
globalhub,
javascript,
web,
willy castro alvarado
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:
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.
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.
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:
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.
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.
Etiquetas:
java,
javascript,
web,
willy castro alvarado,
xml
viernes, 10 de enero de 2014
Editor de gráficos web con hoja de cálculo en google drive
Después de un largo tiempo ausente me anime a publicar algo así que al actualizarme un poco en visualization encontré un componente gráfico muy útil que se llama chart editor, para visitar la página y descargar el código original en code playground click aquí. Así que me puse a modificar un poco el código del editor original lo cual iré comentando en este artículo.
Primero debemos entender como es que genera los diferentes tipos de gráficos este asistente en web, por lo general podemos usar un rango seleccionado de celdas de una hoja de calculo alojada en google drive, debemos tener en cuenta que tal hoja de calculo debe estar en modo compartido público de los contrario no podrá cargarse la data, hay otro modo de usar este generador de gráficos web al establece un data table haciendo uso de JSON lo cual publicaré en otro artículo.
Entonces manos a la obra, primero debemos crear una hoja de calculo en drive y compartirla como pública de la siguiente manera:
La dirección pública generada por drive de mi hoja de cálculo por ejemplo es:
https://docs.google.com/spreadsheet/ccc?key=0AplEIWl3vfe3dEk2TkJrdjBESkpkcHFJRV9lLUJ0bmc&usp=sharing
Luego modificamos el código del chart editor en el campo denominado dataSourceUrl y establecemos el rango de celdas en ese campo
Primero debemos cambiar el parámetro llamado key por el parámetro key de la dirección publica generada por drive de nuestra propia hoja de calculo, también el parámetro range en mi caso puse B3:C5 pues es el intervalo en el que se encuentra la data en la hoja de calculo (notar el intervalo en la segunda imagen de este articulo que muestra el contenido de la hoja de calculo).
Finalmente probamos el código abriendo el archivo html modificado en el navegador
Para cambiar de tipo de gráfico solo deben darle click en la opción abrir chart wizard y si quieren obtener el código estático para embeberlo en cualquier pagina denle click en obtener embed y copian el código generado en el text area de la parte inferior.
Vale resaltar que modifique un poco el código original del chart editor de google code playground para que me generase un código embebido y así poder usarlo en todos lados sin necesidad de conexión a internet, si alguien encuentra otra forma de hacerlo por favor compartirlo. Finalmente les dejo mi código modificado del chart editor a continuación: Ver/Descargar Código HTML.
Primero debemos entender como es que genera los diferentes tipos de gráficos este asistente en web, por lo general podemos usar un rango seleccionado de celdas de una hoja de calculo alojada en google drive, debemos tener en cuenta que tal hoja de calculo debe estar en modo compartido público de los contrario no podrá cargarse la data, hay otro modo de usar este generador de gráficos web al establece un data table haciendo uso de JSON lo cual publicaré en otro artículo.
Entonces manos a la obra, primero debemos crear una hoja de calculo en drive y compartirla como pública de la siguiente manera:
Después click en el botón compartir y definir como público.
La dirección pública generada por drive de mi hoja de cálculo por ejemplo es:
https://docs.google.com/spreadsheet/ccc?key=0AplEIWl3vfe3dEk2TkJrdjBESkpkcHFJRV9lLUJ0bmc&usp=sharing
Luego modificamos el código del chart editor en el campo denominado dataSourceUrl y establecemos el rango de celdas en ese campo
Primero debemos cambiar el parámetro llamado key por el parámetro key de la dirección publica generada por drive de nuestra propia hoja de calculo, también el parámetro range en mi caso puse B3:C5 pues es el intervalo en el que se encuentra la data en la hoja de calculo (notar el intervalo en la segunda imagen de este articulo que muestra el contenido de la hoja de calculo).
Finalmente probamos el código abriendo el archivo html modificado en el navegador
Para cambiar de tipo de gráfico solo deben darle click en la opción abrir chart wizard y si quieren obtener el código estático para embeberlo en cualquier pagina denle click en obtener embed y copian el código generado en el text area de la parte inferior.
Vale resaltar que modifique un poco el código original del chart editor de google code playground para que me generase un código embebido y así poder usarlo en todos lados sin necesidad de conexión a internet, si alguien encuentra otra forma de hacerlo por favor compartirlo. Finalmente les dejo mi código modificado del chart editor a continuación: Ver/Descargar Código HTML.
Etiquetas:
chart,
globalhub,
google,
visualization,
willy castro alvarado
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:
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.
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.
Etiquetas:
buscar feed,
find feed,
javascript,
rss,
willy castro alvarado
Suscribirse a:
Entradas (Atom)





