Categoría: Javascript/jquery

Javascript, jquery y otros frameworks para js

Librería para usar MD5 y SHA 1 en Javascript

en por Donnie Rocken Informática, Javascript/jquery1 comentario

En fin, me he quedado sin ordenador el fin de semana… pero todavía me apaño para dejar una minientrada.

Hemos hablado ya en el pasado de criptografía y de algoritmos de hash e incluso de cómo usarlos en C o en Java así que hoy nos toca verlo desde otro ángulo. A la hora de usar estos algoritmos de resumen en una web, para almacenar una contraseña por ejemplo, nos podemos encontrar con la duda ¿encripto en el lado del servidor o en el del cliente? En fin, en el lado del servidor no tiene mucha ciencia ya que desde PHP 4 existen funciones MD5 y SHA1 de forma nativa. Pero ¿y si queremos hacerlo en el cliente?. Encriptar en el servidor implica que el mensaje viaje en texto plano desde el equipo hasta él. En cambio encriptando en el cliente esta ya saldrá encriptada del equipo.

Podría tirarme el moco y hacerme el pro copiando aquí un chorretón de código enorme, pero realmente os daré dos opciones:

  • PHP.js: Se trata de una librería libre de javascript que aporta a este lenguaje todas (o gran parte) de las existentes para PHP. Podéis descargarla desde la web oficial del proyecto, donde además podréis personalizar la librería eligiendo las funciones que os interesen (coged sólo lo justo, para aligerar la carga).
  • JSHASH: Esta otra , bajo licencia BSD, está en versión beta y se orienta totalmente al uso de  algoritmos de reducción (incluye además de las dos citadas sha256 y sha512). La recomiendan en varios blogs como muy fiable. Podéis descargarla de aquí, donde también hay tutoriales sobre su utilización.

En fin, con esto ya tenéis dos opciones para generar hashes con facilidad y sin romperos mucho la cabeza.

CSS3 Media Queries

en por Donnie Rocken HTML5, Informática, Javascript/jqueryDeja un comentario

La verdad es que no hace mucho Web designer Wall me ha salvado el culo en el tema del diseño responsivo (hacer que una web se adapte al tamaño de la ventana). Tras mucho tiempo rompiéndome la cabeza, tirando de jQuery y Javascript con pirulas cosa mala para lograr modificar el tamaño del texto, las posiciones de las imágenes… un coñazo y además ineficiente y poco compatible entre navegadores (menos mal que para móviles jQueryMobile me safaba muchas veces), pues tras mucho tiempo, como te iba diciendo, me encuentro este artículo, que ya tiene un par de años y me quedo como «coño, así es más fácil«. La siguiente explicación es una medio traducción/adaptación/explicación del tema, ya que se que en muchos casos lo que buscáis en este blog es una explicación en castellano de algo que ya hay en inglés. Espero que os sirva de ayuda.

Bueno, empezando desde un principio ¿por qué es importante el diseño responsivo? Porque los tiempos en los que el usuario visualizaba webs en su ordenador, con un rango de pantallas que solía oscilar entre las 14 y las 20 pulgadas en el 90% de los casos, ya pasó, es una reliquia de la década pasada, como MySpace, las PDA’s o que en la liga de fútbol española pueda ganar algo un equipo que no sea Madrid o Barcelona. Ahora te puedes encontrar desde el que usa una tele con una definición de 2560px al que lo ve en su teléfono móvil con una de 320px. Los tamaños fijos son un coñazo, y el usar porcentajes para todo… no siempre funciona, porque el tamaño de la fuente o las imágenes no se adaptan, y a veces hay que usar posicionamientos absolutos y te da la risa. CSS2 permitía diferenciar entre una hoja de estilos para la impresión y otra para la presentación en pantalla. CSS3 nos permite ir más allá, nos permite conocer el tamaño de la ventana/pantalla del dispositivo y aplicar un estilo diferente para cada pantalla. Voy a aprovecharme del artículo antes citado y enlazarte aquí con un ejemplo donde verás cómo funciona esto.

Visto esto, aquí tienes la explicación del cómo se hace, sacada del mismo artículo:

Max Width
En este caso el css se aplicará si trabajamos con una resolución de un máximo de 600 pixeles:

@media screen and (max-width: 600px) {
  .class {
    background: #ccc;
  }
}

Si quieres enlazarlo a una archivo CSS distinto, puedes hacerlo poniendo esta línea en la cabecera del documento:

<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />

Min Width
Al contrario que en el ejemplo de arriba, en este caso se especificará un tamaño mínimo para utilizar este estilo (en este caso, se aplicará a toda las resoluciones mayores de 900px).

@media screen and (min-width: 900px) {
  .class {
    background: #666;
  }
}

Media Queries múltiples
Tienes también la opción de utilizar dos valores a la vez, máximo y mínimo, para que el estilo se aplique a los comprendidos entre esos valores. En este caso, entre 600 y 900 px.

@media screen and (min-width: 600px) and (max-width: 900px) {
  .class {
    background: #333;
  }
}

Max device
Finalmente está la opción de adaptarlo a la máxima resolución del dispositivo. Los ejemplos anteriores hacen referencia al tamaño de la ventana/area de visualización, mientras que este se referiría a la resolución máxima que pueda mostrar el teléfono/ordenador/tableta en cuestión.

@media screen and (max-device-width: 480px) {
  .class {
    background: #000;
  }
}

En el artículo original arriba referenciado podéis encontrar también código para adaptarlo específicamente para iPad y iPhone4. No tiene mucha ciencia, podréis ver los ejemplos de código pinchando allí, además hay páginas de ejemplo al final.

Lo interesante está en uno de los puntos finales, donde comentan que, como siempre, va a haber problemas con Explorer. Bueno, no hay que ser 100% injusto con Microsoft, en principio Explorer 9 va bien, pero en las versiones anteriores la cosa ya no va por ningún lado. Dan varias soluciones, pero yo recomiendo la del plugin de jQuery para hacer furrular las media queries, que está en este ejemplo. Hay varios artículos más sobre diseño responsivo en esta página, así que intentaré próximamente meter un par de estas medio traducciones.

Creando un menú de navegación con jQueryMobile

en por Donnie Rocken HTML5, Informática, Javascript/jqueryDeja un comentario

Crear un menú de navegación con jQueryMobile, adaptando la web para una mayor usabiliad en dispositivos móviles, no es complicado.

El primer paso consiste en declarar el atributo data-role del div como navbar. Dentro de este metemos una lista desordenada (ul) y en cada elemento (li) de la misma añadimos un enlace, apuntando a la página a la que tiene que ir. A los enlaces no hay que definirles data-role.

Para cambiar el color de los botones usaremos el atributo data-theme (en el ejemplo data-theme=b para ponerlos de color azul), si no lo hacemos serán del mismo color que la cabecera. Una de las ventajas de jQueryMobile es que definiendo la clase ui-btn-active se un estilo más claro al botón seleccionado, sin que tengamos que currarnos un CSS para ello.

Recuerda también definir el data-icon para que el botón quede más bonito. 

<header data-role="header"> 
    <h1>SJV Town Hall</h1>
    <div data-role="navbar">
        <ul>
             <li>
                 <a href="#inicio" class="ui-btn-active" data-icon="home" data-theme="b">Inicio</a>
             </li>

             <li>
                 <a href="#favourites" data-icon="star" data-theme="b">Favoritos</a>
             </li>

             <li>
                 <a href="#contactos data-icon="grid" data-theme="b">Contactos</a>
             </li>
         </ul>
       </div>
</header>

En el ejemplo puedes ver un poco de todo lo que hemos comentado arriba.

Listas en jQueryMobile: ordenadas y desordenadas

en por Donnie Rocken HTML5, Informática, Javascript/jqueryDeja un comentario

A la hora de trabajar tanto con listas ordenadas o listas desordenadas con jQueryMobile no hay mucha ciencia, es como trabajar con listas en html clásico.

Mayormente hay que usar la etiqueta ul para listas desordenadas y ol para ordenadas, como en cualquier página. La única diferencia es añadir el atributo data-role=»listview». Esto es lo único que necesitas en jQueryMobile para aplicar el estilo «móvil» a la lista. Te pongo un ejemplillo


<ol data-role="listview" data-inset="true" data-filter="true">
   <li><a href="#">El Resplandor</a></li>
   <li><a href="#">La Naranja Mecánica</a></li>
   <li><a href="#">Barry Lyndon</a></li>
   <li><a href="#">La Chaqueta Metálica</a></li>
</ol>

<ul data-role="listview" data-inset="true">
   <li><a href="#">Gran Torino</a></li>
   <li><a href="#">Mystic River</a></li>
   <li><a href="#">Million Dollar Baby</a></li>
   <li><a href="#">Sin Perdón</a></li>
</ul>

Sep, la lista ordenada son películas de Kubrick y la sin índices son de Clint Eastwood. Y no hay más que hablar, sólo el atributo data-role=»listview», por el resto HTML de toda la vida.

Menú desplegable con jQuery

en por Donnie Rocken Informática, Javascript/jquery4 comentarios

Write less, es la idea de jQuery. Usando este framework para Javascript puedes lograr resultados vistosos y mejorar la usabilidad de tu web. En este caso vamos a hacer un menú desplegable usando jQuery, que se abra cuando lo «sobrevolemos» con el ratón. Mi primera experiencia con menús desplegables fue en una empresa (no diré cual, no queda bien hablar mal de los jefes) que querían un menú desplegable en la página (era un menú de sólo dos opciones, por lo que no le veía mucho sentido a hacerlo así, pero eran paranoias del jefe).

Lo primero es descargar jQuery desde su página oficial e incluirlo en la cabecera de la página. Luego insertar el marcado html del menú tal que así: 

        <ul class="dropdown">  
            <li class="active">Listado: <span>Ejemplos</span></li>  
            <li class="first"><a href="#">Ej 1</a></li>  
            <li><a href="#">Ej 2</a></li>  
            <li><a href="#">Ej 3</a></li>  
            <li class="last"><a href="#">Ej...</a></li>  
        </ul>

En fin, lo siguiente son los estilos del menú, el css. En el marcado ya dimos a la lista la clase dropdown, lo que nos simplificará mucho ahora el aplicar estilos en el css.

  
ul.dropdown{  
    width: 250px;  
    border: 1px double #000;  
    border-radius: 5px;  
    -moz-border-radius: 5px;  
    -webkit-border-radius: 5px;  
    background: #1a1a1a;  
    margin-top: 2em;  
}  
ul.dropdown li{  
    display: none;  
    font-size: 12px;  
}  
ul.dropdown li.active{  
    display: block;  
    color: #8c8c8c;  
    font-size: 14px;  
    padding: 12px;  
    color: #555;  
    border-top: 1px solid #313131;  
    border-radius: 4px;  
    -moz-border-radius: 4px;  
    -webkit-border-radius: 4px;  
}  
ul.dropdown li.active span{  
    padding-right: 24px;  
    color: #8c8c8c;  
}  
ul.dropdown li a{  
    display: block;  
    text-decoration: none;  
    padding: 8px 8px 8px 10px;  
    background: #1e1e1e;  
    border-bottom: 1px solid #171717;  
}  
ul.dropdown li.last a{  
    border:0;  
}  
ul.dropdown li.first a{  
    border-top: 3px solid #131313;  
}  
ul.dropdown li a:hover{  
    background: #232323;  
    color: #fff;  
    padding-left: 11px;  
}

Marcado listo, estilos listos. Falta sólo la funcionalidad, el código javascript que haga furrular todo esto. De momento toda la lista está oculta menos el elemento de la clase active, por lo que tenemos que hacer que se muestre el resto cuando pasemos el ratón por encima, desaparezca cuando lo saquemos y además sea un código reutilizable. Aquí tenemos el procedimiento: 


//variable global para almacenar el menú 
var menu = $("ul.dropdown");  
  
//captura de eventos  
$(this.document).ready(function(){  
    menu.mouseover(function(){  
        mostrar($(this).find("li"));  
    });  
    menu.mouseout(function(){  
        ocultar($(this));  
    });  
})  
  
//función que muestra los elementos del menú  
function mostrar(e){  
    e.show();  
}  
//función que los oculta
function ocultar(e){  
    e.find("li").hide();  
    e.find("li.active").show();  
}

Y con esto ya tienes un menú desplegable chulo chulo que poner en tu web.

Ejemplos varios de canvas (html5)

en por Donnie Rocken HTML5, Informática, Javascript/jqueryDeja un comentario

Canvas es, probablemente, el elemento más potente de HTML5. Mayormente nos da una funcionalidad similar a las animaciones flash en una parte de la pantalla, pero utilizando javascript. En principio es para un contexto 2D pero ya hay una librería (three.js) que te permite utilizar gráficos 3D (de momento no soportada por todos los navegadores). En los primeros manuales de HTML5 que cayeron en mis manos este elemento venía muy mal explicado, te decían que se podía «dibujar» usando javascript… y ale, vía.

Para utilizar canvas en tu web debes incluir una etiqueta canvas, que por defecto será invisible y tendrá un tamaño de 300*150 px. Luego, en javascript, debes inicializar un contexto tal que así: 

var ctx = document.querySelector('canvas').getContext('2d');

Tras haber definido un contexto bidimensional, podemos empezar a dibujar. El API da la posibilidad de utilizar rectángulos, arcos, círculos… El siguiente código dibujaría un rectángulo, con un reborde más oscuro: 

ctx.fillStyle='rgb(0, 255, 0)';
ctx.fillRect(10,20,50,50);
ctx.strokeStyle='rgb(0,182,0)'
ctx.lineWidth=5;
ctx.strokeRect(9,19,52,52);

En fin, esto es lo más básico, pero tienes múltiples opciones: degradados, imágenes complejas, animaciones, interactividad… En lugar de currarme un tutorial más complejo te remito a varios enlaces para que veas la pontencia de Canvas:

Bueno, con estos ejemplos ya puedes ver más o menos la potencia de este elemento y tener varios tutoriales para iniciarte en la creación de aplicaciones con canvas.

Formularios HTML5 con jQueryMobile

en por Donnie Rocken HTML5, Informática, Javascript/jquery1 comentario

Tras la iniciación a la maquetación con jQueryMobile que publiqué ayer, toca complementarla con una introducción a los formularios.

Como es habitual en todo formulario HTML, los campos estarán encerrados entre etiquetas form, con su action y su method definidos. Existen varios tipos de controles, que son mas que suficientes para poder crear formularios complejos, que puedes consultar aquí.

Una de las opciones que nos reporta jQueryMobile es la de poder crear formularios «mini», con una versión más pequeña de sus controles para facilitar la visualización en las pantallas de los móviles. Para ello debemos añadir el atributo data-mini=”true” en el controlgroup.

El atributo placeholder (del que también hablamos en este blog) juega un papel importante aquí. Si quieres ocultar la etiqueta label por motivos de accesibilidad pero que los lectores de pantalla puedan leerla, podras servirte de la clase ui-hidden-accessible y, con el atributo placeholder, usar el elemento de formulario con la etiqueta dentro.

Para deshabilitar un elemento del formulario usaremos el atributo disabled. En el caso de que necesitemos aplicar el estilo disabled a un elemento que no sea un control de formulario, podemos utilizar la clase ui-disabled sobre el elemento.

Ahora un ejemplo de un formulario con las etiquetas como placeholder y controles mini, para ilustrar lo explicado.

<form action="procesar.php" method="post" id="formEjemplo">
    <div data-role="fieldcontain">
        <fieldset data-role="controlgroup" data-mini="true">
            <legend>Login ejemplo:</legend>
            <label for="user" class="ui-hidden-accessible">Usero:</label>
            <input type="text" name="user" id="user" value="" placeholder="User" />
            <label for="password" class="ui-hidden-accessible">Usuario:</label>
            <input type="password" name="password" id="password" value="" placeholder="password" />
        </fieldset>
    </div>
</form>

Si usas un contenedor para controles de formularios (que es un elemento de jQueryMobile) y quieres ocultar la etiqueta y usar el texto placeholder, tienes que ocultarla en los atributos del div con class=»ui-hide-label» en lugar de en los del label, como en este ejemplo: 

<div data-role="fieldcontain" class="ui-hide-label">
    <label for="user">Usero:</label>
    <input type="text" name="user" id="user" value="" placeholder="User" />
</div>

Y con esto ya puedes empezar a hacer tus formularios optimizados para móviles.

Iniciación a jQueryMobile: Maquetando web para móviles con HTML5

en por Donnie Rocken HTML5, Informática, Javascript/jquery3 comentarios

A la hora de programar webs para móvil el framework de javascript jQueryMobile, basado en jQuery, nos ofrece una gran productividad, simplificando profundamente las cuestiones de maquetación. Si ya conoces jQuery y jQueryUI la curva de aprendizaje será muy pequeña.

Este framework es compatible con todos los navegadores y sistemas operativos móviles actuales, es ligero (20kb), casi no utiliza imágenes, se puede combinar con PhoneGAP para realizar aplicaciones nativas y es libre y gratuito.

A la hora de crear la estructura, como en cualquier web, lo primero es empezar por la cabecera (la etiqueta HEAD). Ahí agregamos las referencias necesarias a jQuery, jQuery Mobile y el theme básico de CSS. Para definir el ancho de pantalla utilizamos meta viewport, lo dejaremos definido con la constante width=device-width y la escala mínima y máxima a 1; initial-scale=1.0 maximum-scale=1.0.

Una vez que hemos terminado de referenciar las librerías necesarias, creamos la estructura de la plantilla principal de la página utilizando HTML5, y luego definimos las areas de contenido (content region) que proporciona jQueryMobile. El atributo data-role nos permitirá maquetar con comodidad y estructurar la página. Especificaremos la página (data-role=”page”), el encabezado (data-role=”header”), el contenido (data-role=”content”) y el pié (data-role=”footer”). Estos data-role los utiliza jQueryMobile para en Widgets funcionales y con los estilos del theme utilizado las secciones definidas.

Creo que lo mejor es un ejemplo que ilustre lo comentado: 

<!DOCTYPE html>
<html>
<head>
    <title>Página prueba</title>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
</head>
<body> 
 
<!-- Página principal -->
<section data-role="page" data-title="Página de inicio">
 
    <header data-role="header">
        <h1>HW</h1>
    </header>
    <!-- end header -->
 
    <section data-role="content">
        <p>Hello world!</p>
    </section>
    <!-- end content -->
 
    <footer data-role="footer">
        <p>DonnieRock 2012</p>
    </footer>
    <!-- end footer -->  
 
</section>
<!-- end page -->
 
</body>
</html>

Pero el verdadero cambio respecto a la programación web tradicional es el concepto «page within page». Dentro del mismo documento están incrustadas todas las páginas. De ahí que en el ejemplo de arriba utilizaramos el atributo data-role=page, porque tendremos que definir varias páginas, que se diferenciarán entre ellas por su atributo id, que será obligatorio para poder navegar entre ellas.

La navegación entre distintas páginas de un mismo documento es bastante sencilla, tenemos que poner en el ‘href’ del enlace el ‘id’ de la página destino y ya está. Podemos especificar el tipo de transición con el atributo data-transition, la transición por defecto es slide pero existen varias que puedes consultar en la página de jQuery. También podemos definir la dirección de la transición con el atributo data-direction.

Recuperaré el código del primer ejemplo, con alguna modificacación, para explicar esto:

<!DOCTYPE html>
<html>
<head>
    <title>Página prueba</title>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
</head>
<body> 
 
<!-- Página principal -->
<section data-role="page" id="page1" data-title="Página de inicio">
 
    <header data-role="header">
        <h1>HW</h1>
    </header>
    <!-- end header -->
 
    <section data-role="content">
        <p>Hello world!</p>
    </section>
    <!-- end content -->

    <footer data-role="footer">
        <p>
            DonnieRock 2012 
           <a href="#page2" data-role="button" data-transition="slidedown">Ir a la página 2</a>
        </p>
    </footer>
    <!-- end footer -->  
 
</section>
<!-- end page 1-->

<!-- Segunda página -->
<section data-role="page" id="page2" data-title="Página 2">
 
    <header data-role="header">
        <h1>HW2</h1>
    </header>
    <!-- end header -->
 
    <section data-role="content">
        <p>Hello, again, world!</p>
    </section>
    <!-- end content -->
 
    <footer data-role="footer">
        <p>
            DonnieRock 2012 
           <a href="#page1" data-role="button" data-transition="slidedown" data-direction="reverse">Ir a la página 1</a>
        </p>
    </footer>
    <!-- end footer -->  
 
</section>
<!-- end page 2-->
 
</body>
</html>

Finalmente nos queda por elegir el «theme». Podemos crearlo fácilmente con el ThemeRoller que hay en la web de jQueryMobile, con multitud de themes que podemos crear y asignar a cada componente que usemos en nuestra aplicación. También hay themes ya predefinidos, si no queremos rompernos la cabeza. Los themes son diferenciados por una letra identificativa, gracias a la cual podemos identificar el theme y aplicarlo a cualquier componente que queramos, usando el atributo data-theme. Tienes información sobre los distintos themes en la página de jQueryMobile. El theme además puede ser modificado con facilidad tocando los archivos css.

<section data-role="page" id="page1" data-title="Página de inicio" data-theme="b">
 
    <header data-role="header">
        <h1>HW</h1>
    </header>
    <!-- end header -->
 
    <section data-role="content">
        <p>Hello world!</p>
    </section>
    <!-- end content -->

    <footer data-role="footer">
        <p>
            DonnieRock 2012 
           <a href="#page2" data-role="button" data-transition="slidedown">Ir a la página 2</a>
        </p>
    </footer>
    <!-- end footer -->  
 
</section>

Bueno, espero con esto ya tienes unas nociones básicas de cómo empezar. Más adelante tocaré otros temas, como los formularios o la integración con PhoneGAP, de momento podéis ir ojeando esto.

Detectando navegadores de móviles (PHP y Javascript)

en por Donnie Rocken HTML5, Informática, Javascript/jquery2 comentarios

Es habitual en los tiempos que correr desarrollar una página web para navegadores de escritorio y otras optimizadas para el uso en navegadores móviles (smartphone, tablet). Una maquetación puede parecer cojonuda para una pantalla grande, de un sobremesa, pero ser incómoda en una pantalla de cuatro pulgadas.

En ese caso tenéis dos posibilidades: detectar el dispositivo móvil en el servidor (PHP) o en el cliente (javascript). El ejemplo para PHP sería el siguiente:

<?php
$mobile_browser = ’0';

//$_SERVER['HTTP_USER_AGENT'] -> el agente de usuario que está accediendo a la página.
//preg_match -> Realizar una comparación de expresión regular
if(preg_match(‘/(up.browser|up.link|mmp|symbian|smartphone|midp|wap|phone)/i’,strtolower($_SERVER['HTTP_USER_AGENT']))){
	$mobile_browser++;
}

//$_SERVER['HTTP_ACCEPT'] -> Indica los tipos MIME que el cliente puede recibir.
if((strpos(strtolower($_SERVER['HTTP_ACCEPT']),’application/vnd.wap.xhtml+xml’)>0) or
((isset($_SERVER['HTTP_X_WAP_PROFILE']) or isset($_SERVER['HTTP_PROFILE'])))){

	$mobile_browser++;
}

$mobile_ua = strtolower(substr($_SERVER['HTTP_USER_AGENT'],0,4));
$mobile_agents = array(
‘w3c ‘,’acs-’,'alav’,'alca’,'amoi’,'audi’,'avan’,'benq’,'bird’,'blac’,
‘blaz’,'brew’,'cell’,'cldc’,'cmd-’,'dang’,'doco’,'eric’,'hipt’,'inno’,
‘ipaq’,'java’,'jigs’,'kddi’,'keji’,'leno’,'lg-c’,'lg-d’,'lg-g’,'lge-’,
‘maui’,'maxo’,'midp’,'mits’,'mmef’,'mobi’,'mot-’,'moto’,'mwbp’,'nec-’,
‘newt’,'noki’,'oper’,'palm’,'pana’,'pant’,'phil’,'play’,'port’,'prox’,
‘qwap’,'sage’,'sams’,'sany’,'sch-’,'sec-’,'send’,'seri’,'sgh-’,'shar’,
‘sie-’,'siem’,'smal’,'smar’,'sony’,'sph-’,'symb’,'t-mo’,'teli’,'tim-’,
‘tosh’,'tsm-’,'upg1',’upsi’,'vk-v’,'voda’,'wap-’,'wapa’,'wapi’,'wapp’,
‘wapr’,'webc’,'winw’,'winw’,'xda’,'xda-’);
//buscar agentes en el array de agentes
if(in_array($mobile_ua,$mobile_agents)){
	$mobile_browser++;
}

//$_SERVER['ALL_HTTP'] -> Todas las cabeceras HTTP
//strpos -> Primera aparición de una cadena dentro de otra

if(strpos(strtolower($_SERVER['ALL_HTTP']),’OperaMini’)>0) {
	$mobile_browser++;
}

if(strpos(strtolower($_SERVER['HTTP_USER_AGENT']),’windows’)>0) {
	$mobile_browser=0;
}

if($mobile_browser>0){
//Aquí redireccionamos hacia la aplicación móvil
}else{
//Aquí nos vamos a la versión para escritorio
}
?>

Se trata de una vieja función que econtré hace tiempo y detecta todo tipo de navegadores. La utilicé en mi proyecto de fin de curso y funcionaba. Utiliza un array con referencias a muchos navegadores de dispositivos móviles. La función de javascript por su parte es más sencillita y detectará el SO:

 var ua = navigator.userAgent.toLowerCase();
 var isAndroid = ua.indexOf("android") > -1; // && ua.indexOf("mobile");
 var isiPhone = ua.indexOf("iphone") > -1;
 var isiPod = ua.indexOf("ipod") > -1;
 var isiPad = ua.indexOf("ipad") > -1;
 if(!isiPad) isiPad = /iPad/i.test(ua) || /iPhone OS 3_1_2/i.test(ua) || /iPhone OS 3_2_2/i.test(ua);
 var isWPx = ua.indexOf("windows phone") > -1;

En este caso detecta si se trata de Android, un dispositivo Apple o WindowsPhone.

En último caso, en el siguiente enlace tenéis ejemplos de código actualizados para varios lenguajes. Os puede servir de mucha ayuda.

Ventanas modales con jQueryUI

en por Donnie Rocken Informática, Javascript/jquery8 comentarios

Como soy masoquista, tras un duro día desarrollando en PHP/Javascript creo que voy a hacer una entrada sobre informática en mi blog… por seguir esta racha.

Hoy he tenido mi primera experiencia con jQueryUI, una biblioteca para el framework jQuery. Lo he utilizado para crear un formulario de correo en una ventana modal y… oye, qué fácil, qué productividad reporta esta librería. En este enlace tenéis a vuestra disposición dicha librería, con muchas demos y documentación.

Para el caso de las ventanas modales tendremos que recurrir al widget «dialog», que nos permitirá hacer desde una suerte de alert más sofisticado hasta introducir todo un formulario (como era mi caso).

El uso de dialog() puede resumirse con facilidad en el siguiente ejemplo:

<html>
    <head>
        <link rel="stylesheet" href="css/darkness/jquery-ui-1.8.18.custom.css">
        <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>
        <script>
            $(function(){
                $("#ventanaModal").dialog({
                   title:"Título a elegir",
                   modal: true
                });
            })
        </script>
    </head>
    <body>
        <div id="ventanaModal"></div>
            <p>Aquí metes lo que quieras</p>
        </div>
    </body>
</html>

Con esto tenéis lo mínimo para tener una ventana modal: un div con el contenido al que aplicáis el método dialog pasándole como parámetros el título y el parámetro modal como true (si no le pasárais modal: true se abriría también, pero no bloquería los elementos del fondo, como debe hacer una ventana modal). Pero esto queda muy soso, así que vamos a ir haciendo cosillas.

Lo primero es meter algo más de contenido, para que veas las posibilidades. Por ejemplo, una pregunta que requiera confirmación (como en un window.confirm de los de antaño):

<div id="ventanaModal">
<span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>
    ¿Acepta usted las condiciones de uso y que le espiemos impunemente?
</div>

Ahora ya tenemos un aviso de seguridad, vamos con lo siguiente, meterle algún efectillo a la página para que quede chulo cuando se despliega en pantalla:

               $("#ventanaModal").dialog({
                   title:"Título a elegir",
                   modal: true,
                   show: "slide",
                   hide: "explode"
                });

Con esto aparecerá deslizándose y desaparecerá explotando en mil pedazos (bueno, realmente en nueve pedazos). En cualquier caso te habrás fijado en que no hay botones dentro del div. ¿Por qué? Porque los creó la desde javascript definiendo la propiedad buttons, que recibe como parámetro un objeto json con la información y con su función:

           buttons: {
            "Sí": function(){
                alert("has aceptado, tu alma es nuestra");
            },

            "No": function(){
                alert("no has aceptado, te jodes y te quedas sin servicio");
            }
        }

Como resumen entonces el javascript completo quedaría tal que así:

$("#ventanaModal").dialog({
   title:"Título a elegir",
   modal: true,
   show: "slide",
   hide: "explode",
   buttons: {
            "Sí": function(){
                alert("has aceptado, tu alma es nuestra");
            },

            "No": function(){
                alert("no has aceptado, te jodes y te quedas sin servicio");
            }
        }
});

En este caso son dos alerts chorras, pero sirve para que te hagas una idea del potencial que tiene este widget si ya has trabajado antes con javascript.

Nos queda añadir un botón, mismamente, en el html que llame a la ventana y la abra (es decir, el botón en el marcado y el script con la acción). Algo tipo:

<input type="button" name="accept" id="accept" value="Aceptar"/>
<script>
    $("#accept").button().click(function() {
	$("#ventanaModal").dialog("open");
    });
</script>

Y con esto y un bizcocho… se acabó el ejemplo. Ahora te recomiendo que te pelees un rato con esta librería, porque parece que puede dar muchas alegrías.