Etiqueta: javascript

jQueryNumeric: Fuerza al usuario a introducir sólo números.

en por Donnie Rocken Informática, Javascript/jquery, Lenguajes de programación4 comentarios

Llevo unos días sin escribir nada por aquí, cierto es. Me alegra ver que por otra parte el número de lecturas no decae. Hoy he decidido hacerme un hueco en la hora de comer para comentar este plugin de jQuery. Lo podéis descargar de aquí e incorporarlo libremente a vuestros proyectos, junto al framework jQuery, indispensable para su funcionamiento.

Una vez insertado sólo tenéis que utilizar el método numeric() sobre los campos de usuario que queráis que no acepten números. Este primer ejemplo muestra su funcionamiento para permitir sólo la entrada de enteros:

$("#input").numeric();

¿Y para floats? (es decir, números reales)… pues metiende una cadena con el separador como parámetro (en el ejemplo una coma, por mantener el formato latino):

$("#input").numeric(",");

Ojo, esto bloquea el teclado sobre el campo del formulario. Es decir, si os hacen la gracia de copiar y pegar algo sí lo tragará, así que una expresión regular para comprobar el formato, como la del ejemplo, no estaría mal. Por aquello de evitar fallos en el envío del formulario:

/[0-9\.,]+/.test()

Y con esto, liquidamos el consejo javascript del día.

Detectar IE7 o IE6 con Javascript

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

A día de hoy son muchos todavía los que usan IE6 e IE7. A pesar de que tener un navegador totalmente actualizado y compatible con sistemas operativos con una década de edad es fácil y totalmente gratis, hay gente que se resiste. Si has tenido que hacer páginas web alguna vez sabrás lo engorroso que es tener que contar con estos navegadores. Ya sea para programar una alternativa o para dar un aviso de que ya no das soporte a los mismos (yo es lo que hago últimamente cuando tengo libre albedrío a la hora de diseñar, a modo de concienciación y protesta) es indispensable tener alguna forma de detectar si el navegador es Internet Explorer y qué versión del mismo es.

 var rv = -1;  //inicializamos para prevenir fallos de puntero a nulo
 if (navigator.appName == 'Microsoft Internet Explorer')
 {
      var ua = navigator.userAgent;
      var re  = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
      if (re.exec(ua) != null)
               rv = parseFloat( RegExp.$1 );
      if(rv > -1){
          switch(rv){
              case 7.0:
                "lo que toque hacer";
                 break;
              case 6.0: 
                 "lo que toque si es el 6";
                  break;
              default:
                  "aquí se hace lo que habría que hacer por defecto";
                   break;                  
          }
      }
 }

Y con esto debería ir sin problema la detección.

Datepicker fácil en tu web

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

¿Necesitas un «datepicker»? Con esto quiero decir necesitas introducir un calendario en un formulario web, a día de hoy hay muchos sencillos métodos para hacerlo. Pero estas son las dos más fáciles:

  • Campo date en HTML5: Un campo del formulario definido como de tipo date ya te arregla en gran parte el problema. Tiene el handicap de que cada navegador te saca el calendario con el formato que le da la gana 
    <input type="date"/>
  • Calendario datepicker con jQueryUI: Esta opción incluye más opciones de personalización. Lo primero es descargar la librería jQuery y lo siguiente bajar los componentes de jQueryUI necesarios, incluyendo sus estilos. Luego para implantarlo debes cargar las dos librerías en la cabecera del documento, usar un campo input normal (en el ejemplo se llamará #calendario) y un script como el siguiente: 
    <script>
	$(function() {
		$( "#calendario" ).datepicker({
			changeMonth: true,
			changeYear: true
		});
	});
	</script>

<div class="ejemplo">

<p>Date: <input type="text" id="calendario"></p>

</div>

En fin, para el caso del jQueryUI tienes muchos más ejemplos en la propia página con las distintas opciones.

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.

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.

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.

Aplicaciones offline en HTML5

en por Donnie Rocken HTML5, Informática1 comentario

Lee una página web offline siempre había sido posible. Descargabas la página y las hojas de estilos y listo, ya podías ojearla. Pero ¿y las aplicaciones? Eso ya era otra cosa, ahí ya estabas limitado.

HTML5 llega con la posibilidad de la creación de aplicaciones offline. Imaginemos que hemos puesto un juego creado en una etiqueta canvas con javascript (uno mismamente como CanvasRider), y queremos que el usuario pueda usarla aunque no esté conectado. Lo que tenemos que hacer es crear un archivo app.manifest listando los archivos que tienen que descargarse. Algo así:

#Cache para la aplicación offline
#HTML
index.html
#Javascript
_js/aplicacion.js
#CSS
_css/aplicacion.css
#Imágenes
_img/imagen1.png
_img/imagen2.png
_img/imagen3.png
_img/animacion.gif

Una vez hecho el archivo .manifest hay que enlazarlo con la web. Lo primero es meterlo como atributo en la etiqueta html del archivo hmtl principal: 

<html manifest = "app.manifest" >

Se debe configurar el tipo MIME correcto en el servidor para que reconozca bien el archivo. Si usas Apache en la carpeta /conf/ encontrarás la carpeta mime.types, debes añadir al final:

#HTML5 applicacion cache_offline access
text/cache-manifest manifest

Si por lo que sea no puedes acceder a este archivo (tal vez porque tu empresa de hosting no te lo permita), puedes crear un archivo .htaccess en la carpeta web con este texto:

AddType text/cache-manifest .manifest

Cuando el usuario visita el sitio, el navegador compara los archivo manifest (local y remoto) y comprueba si son iguales. Si el archivo remoto cambió el navegador descarga todos los archivos listados en él. Es posible forzar al navegador a cargar determinados recursos siempre de la red, por medio de la instrucción NETWORK. Por ejemplo, si quisiéramos que una imagen siempre sea cargada desde el servidor, dentro del archivo manifest habría que declararlo así:

NETWORK:
imagen1.png

El problema de hacer esto es que si la aplicación se utiliza offline la imagen se tratará de cargar desde el servidor. Para solucionar esto se puede utilizar otra instrucción que especifica que si no existe conexión se cargue un archivo local, y si la hay se cargue el archivo desde el servidor. Este es la instrucción FALLBACK:

FALLBACK
imagen1.png imagen1Local.png

Y no sólo esto, sino que también podemos especificar que en caso de que estemos sin conexión se muestre la misma imágen para todas las imágenes de la página, tal que así:

FALLBACK
_img/ _img/imagen1Local.png

Mientras los archivos manifest se comparan y se descargan los nuevos archivos varios eventos se disparan en un objeto llamado ApplicationCache. Con este objeto, por ejemplo, podemos actualizar al usuario con los nuevos archivos descargados sin necesidad de volver a lanzar la aplicación.

El objeto window.applicationCache tiene varios métodos, pero los más destacados y útiles son:

  • cache.status: Nos muestra el estado de la app mediante una serie de constantes.
    • 0 = uncached
    • 1 = idle
    • 2 = checking
    • 3 = downloading
    • 4 = updateready
    • 5 = obsolete
  • cache.update(): Llama al proceso de descarga de cache. Lanza una excepción INVALID_STATE_ERR en caso de que no exista cache que actualizar.
  • cache.swapCache(): Cambia la cache mas reciente en caso de que exista uno, si no, arroja una excepción de tipo INVALID_STATE_ERR

Un pequeño ejemplo de cómo lograr actualizar la aplicación con los archivos nuevos sin recargarla:

cache = window.applicationCache;
cache.addEventListener('updateready',function{
    cache.swapCache();
},false);

Cinco programas para la creación de aventuras gráficas.

en por Donnie Rocken InformáticaDeja un comentario

Sin dejar el tema de la programación, pero acerándonos a un terreno más lúdico hoy hablaremos de programas para la creación de aventuras gráficas. Si como yo eras de los que flipaban con Monkey Island, Day of the Tentacle, Maniac Mansion, Full Throttle… y tienes alguna noción de programación podrás, con este software, dar forma a tu aventura gráfica deseada. Eso sí, necesitarás también a alguien con nociones de diseño gráfico para que te haga los fondos, personajes y demás diseños.

WinterMute Engine: Se trata de un motor muy potente para crear aventuras gráficas. Es un proyecto GNU que os permitirá crear tanto aventuras comerciales como gratuítas, que permite el uso de gráficos 3D, alta definición, gran cantidad de recursos multimedia y un scripting con una sintaxis similar a PHP, por lo que si tienes nociones de este lenguaje o de C++ no te costará mucho trabajar con él.

En su página oficial podrás descargar el programa y encontrar ejemplos, ayuda, hacer donaciones…

Open SLUDGE: Basado en SLUDGE, de HungrySoftware, se trata de una alternativa abierta muy simple e intuitivo. Existe para Windows, Linux y MacOS. Gráficamente no es tan potente como WinterMute, pero tiene una gran cantidad de características que implementar. En su página de sourceforge podéis encontrar todas sus características, juegos creados con este software y el programa en si.

Javascript Graphic Adventure Maker: Bueno, el nombre ya dice bastante. Se trata de un programa que nos permitirá crear aventuras gráficas en javascript. JSGAM se trata de un proyecto libre y proporciona la ventaja de que el juega pueda ser incrustado en una página y jugado desde un navegador. De nuevo en sourceforge podéis encontrar la página del proyecto con el programa para descargar. También podéis jugar a este juego de ejemplo

DAGE: Un editor de aventuras complejo y muy potente, orientado sobre todo a la realización de aventuras con gráficos en 3D. Existen versiones para Windows y Linux y soporta OpenGL, el motor de física open source Newton Game Dynamic y usa scripting Lua. En su portal podrás no sólo descargar el editor, sino también varias aventuras subidas por otros creadores.

ALPACA: Finalmente un editor para diseñadores en Flash. Dudé si incluirlo o no, ya que todos sabéis que no soy muy partidario de esta tecnología, pero la gran cantidad de desarrolladores flash que hay por el mundo supongo que hará de ALPACA una opción interesante para ellos. Su nombre es un acrónimo de ActionScript LDU Point-And-Click Adventure. Al igual que JSGAM nos permite hacer juegos ejecutables en un navegador. En la página del proyecto tenéis juegos de ejemplo, documentación y el propio editor.

Estos cinco ejemplos no son los únicos. Tenéis también Adventure Game Studio, potente, fácile de usar pero privativo. Y si sois fans de los juegos old school podéis encontrar SCIStudio, basado en el mítico motor de Sierra (Larry2, Kings Quest IV); o NAGI, basado en el motor AGI que usaban, por ejemplo, los tres primeros King’s Quest o Larry I, y además permite hacer juegos compatibles con el motor SCUMM o con Sarien (que pemite modo multijudaor on-line).

En fin, con todo este montón malo será que no encontréis una opción que os convenza. Ahora sólo necesitáis tener una buena idea y trabajarla bien…

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.