Contenido

Ocultar la barra de navegación en Mobile Safari

17 ago

+ 9

Si estamos desarrollando una aplicación para el iPhone, probablemente nos guste la idea de ocultar la barra de navegación, en muchas aplicaciones web diseñadas para estos dispositivos ya lo podemos ver, entre ellas el iMeneame.

Ocultándola, ganamos espacio de lectura inmediatamente después de acabar la carga de la página, lo que en ciertas aplicaciones, permite una o dos líneas más de contenido. La barra no desaparece, sino que hacemos que el scroll baje hasta ocultarla, de esa forma podemos disponer de ella para cuando la necesitemos simplemente dirigiéndonos a la parte superior de la página.

El javascript necesario

addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
function hideURLbar(){ window.scrollTo(0,1);}

Como podemos ver, únicamente se trata de un función que nos coloca el scroll de la página en la posición indicada al ejecutarse el evento onload. Añadiendo esto a nuestro fichero JS tendremos la barra de navegación oculta. Más fácil imposible :D

Aplicación nativa de Worpdress para iPhone disponible

22 jul

+ 5

Ya tenemos la opción de descargar la aplicación nativa con la que podremos controlar nuestro WordPress desde nuestro iPhone/iTouch.[Descargar]

Administra tu blog nativamente desde el iPhone

11 jul

+ 12

Con la salida del nuevo iPhone 3G y la apertura del App Store con aplicaciones nativas para este dispositivo, WordPress ha aprovechado y ha creado una aplicación con la que podremos administrar nuestro WordPress sin necesidad de usar Safari para ello.

ss1ss2ss3

[Ver video de demostración]

Framework CSS y XHTML para desarrollar en iPhone y iPod Touch

7 jul

+ 8

Diego Martín Lafuente (aka MiniD) nos ha sorprendido esta madrugada con la presentación de un framework CSS/XHTML para desarrollar aplicaciones web para el iPhone e iPod Touch.

IMG

El framework, sigue la línea de iUI desarrollado por Joe Hewitt, emulando una aplicación nativa evitando romper el equilibrio que Apple consiguió con su dispositivo.

Gracias a que el iPhone/iTouch utiliza Safari, nos permite utilizar las propiedades en selectores de CSS3 extendiendo las posibilidades que Diego ha sabido aprovechar, que junto a un HTML estandarizado y semánticamente correcto nos permite hacer una aplicación de cálidad con muy poca inversión de tiempo.

Diego nos ha dejado una demo para que veamos que ta ha quedado, sinó dispones de un iPhone/iTouch, puedes visualizarlo correctamente con Safari. Un 10 Diego (No serás Maradona??)

WPTouch, el nuevo theme para iphone

30 abr

+ 16

WPTouch es un nuevo theme para WordPress pensado y adaptado para los dispositivos de Apple, especialmente los iPhone e IPod Touch.

WPTouch

Al igual que otros que ya hemos visto, este adapta el aspecto de nuestro WordPress para que encaje perfectamente en estos dispositivos. Además WPTouch nos alegra con una serie de funcionalidades interesates:

  • Ajax y efectos, con Prototype + Script.aculo.us
  • Páginas de busqueda, login, archive, categories, pages, tags.
  • Sistema navido de enlaces sociales
  • Sistema de personalización desde el panel de administrador
  • Paginación mediante Ajax
  • Soporte de envio de mails nativo del iPhone/iTouch
  • Insercción de comentarios mediante Ajax
  • Personalización de iconos
  • Sistema de control de las páginas que mostremos y las que no.
  • Interacción con Flickr.

Instalación

Como todos los themes y plugins, el sistema de instalación es relativamente sencillo.

  1. Descargamos el fichero
  2. Subimos a la carpeta wp-content/plugins/ de nuestro WordPress
  3. Activamos desde el panel de administración
  4. Lo disfrutamos.

Configuración

WPTouch 2

Todas las posibles configuraciones las encontraremos en Opciones > WPTouch.

Descargar

Versión 1.0

La documentación de jQuery en tu iPhone/iTouch

25 abr

+ 2

Útil adaptación de la documentación de jQuery para que podamos verla perfectamente desde nuestro iPhone/iTouch.

¿Quieres ser millonario? versión Geek para tu iPhone

29 mar

+ 6

En EsferaiPhone hoy han publicado un juego que todos conocemos, ¿Quieres ser millonario?. Sin duda la ceja de Carlos Sobera hizo de este concurso uno de los más famosos de la última década. Pues ahora gracias a Millionaire podemos jugar en nuestro iPhone/iPod Touch.

Como era normal quería probarlo, por que aunque estuviera en Italiano podría ver si me interesaría tenerlo aunque fuera en ingles (cuando lo saquen). Al instalarlo cual ha sido mi sorpresa al encontrar una carpeta llamada “questions” con una base de datos en su interior :D

millionaire_database_questions.jpg

Usando el plugin SQL Lite de Firefox, he podido editarla y ver que dentro están todas las preguntas, 12688 preguntas, con sus respectivas respuestas. He pensado que podríamos recopilar una cuantas preguntas geeks y hacer una versión de ¿Quieres ser millonario? para geeks.

Para ello he creado una página bastante chorra en la que podremos introducir las preguntas que se nos ocurran. Existen 5 niveles, desde fácil a Dios Supremo y los usuarios son los que deciden esa pregunta a que nivel corresponde.

Cuando haya algo más o menos decente podría ser divertido echarse una partidita, incluso con las almacenadas podríamos montar un juego online, pero eso ya se verá.

Os dejo la dirección de donde podeis dejar llevar vuestro imaginación e intentar hacer las preguntas más complicadas posibles.

[¿Quieres ser millonario? Version Geek?]

aNieto2k ahora personalizada para iPhone e iTouch

25 mar

+ 32

Hace tiempo que quería hacer una versión personalizada para los usuarios que visitan el blog desde el iPhone e iTouch, aprovechando el descubrimiento de Massive News “Mobile Edition” he pensado en hacer uso de él y condicionar la visualización del blog dependiendo del dispositivo desde el que se ve.

anieto2k_iphone.jpg

Usando el fichero my-hacks.php he añadido una condición que me indica si el usuario está accediendo desde un iPhone/iPod Touch y en caso afirmativo le digo que para ese usuario me cargue el theme Massive News “Mobile Edition”.

<?php
function is_iphone($user_agent) {
        return (bool)eregi('(iPhone|iPod)', $user_agent);
        }

function theme_for_iphone($tpl) {
        if (!is_iphone($_SERVER['HTTP_USER_AGENT'])) return $tpl;
        else return "mobile";
}

add_filter('template', 'theme_for_iphone');
?>

 Como podemos ver, es un código bastante claro que me ayuda a distinguir entre iPhone/iPod y el resto.

Para que todo funcione correctamente, he introducido el theme en el directorio wp-content/themes/ y he activado el plugin wp-pagenavi, que se complementa perfectamente para mejorar gráficamente la paginación del theme.

Por el momento no he podido hacer que funcione con 1BlogCacher o WP-Cache, pero solo es cuestión de tiempo :D

window.onorientationchange, conoce la orientación de tu iPhone

25 dic

+ 2

Via Ajaxian, descubor que Apple ha publicado un ejemplo con el que podremos conocer la orientación de nuestro dispositivo. Conociendo si está apaisado o vertical, podemos controlar, aún más nuestras aplicaciones web. 

Mediante una propiedad del window de Safari, podremos conocer en que posición está colocado nuestro dispositivo, y mediante un método creado para esto, nos avisará en el momento en que esta posición cambie.

Ejemplo

window.onorientationchange = function(){
  var orientation=window.orientation; //Orientación actual del dispositivo
  switch(orientation) {
    case 0: ...; break;
    case 90: ...; break;
    case -90:  ...; break;
  }
}

De esta forma en cuanto el dispositivo cambie de orientación, nos avisará mediante el método onorientationchange y mediante javascript podremos manipular nuestra página para adaptarla a las nuevas condiciones. 

Jiggy, un IDE via Web para tu iPhone/iPod Touch

19 dic

+ 5

Si eres un desarrollador concienciado en que la tecnología móvil será una trozo importante del pastel de Internet, seguro que coincides conmigo en que el iPhone/iPod Touch es el comienzo de lo que ha de venir. Por ese motivo hemos de empezar a pensar en apostar por el desarrollo sobre estos dispositivos y la forma más fácil es mediante Jiggy.

Jiggy es un IDE para que puedas desarrollar para tu iPhone/iPod Touch mediante un editor completamente web. Instalando una aplicación en tu dispositivo, cargarás un servidor web con los ficheros necesarios para que la edición desde tu navegador sea posible. Ver video.

jiggy.jpg

Trás la insercción de código nos aparecerá una aplicación nueva en nuestro SpringBoard que al ejecutarla lanzará nuestro código.

Instalación

Para instalar la aplicación, podemos hacerlo directamente desde Instaler o descargar el zip directamente desde aqui

Instaler

  1. Añadimos una source nueva ( http://jiggyapp.com/i ) a nuestro instaler
  2.  Actualizamos las sources
  3. Descargamos JiggyApp

Anatomía de una JiggyApp

Las JiggyApp, se componen de una serie de ficheros:

  • Jiggy, Se trata del ejecutable que lanzará nuestra aplicación.
  • Info.plist: Fichero requerido por el iPhone con la información básica sobre la aplicación.
  • icon.png: El icono que hayamos decidido usar para nuestra aplicación.
  • metadata.js: La metadata de nuestra aplicación se encontrará aqui.
  • main.js: Fichero principal de nuestra JiggyApp. Este fichero es el que se ejecuta cuando lanzamos nuestra aplicación.

Tenemos una documentación bastante bien detallada para que no tengas limitaciones a la hora de ponerte a desarrollar.

Hola mundo versión JiggyApp

Plugins.load( "UIKit" );

var window = new UIWindow( UIHardware.fullScreenApplicationContentRect );
window.setHidden( false );
window.orderFront();
window.makeKey();
window.backgroundColor = [ 0.8 , 0 , 0, 1 ];

var mainView = new UIScroller();
mainView.contentSize = [ window.bounds[ 2 ] * 2 , window.bounds[ 3 ] * 2 ];
mainView.backgroundColor = [ 0 , 0 , 0 , 0 ];

window.setContentView( mainView );

var hello = new UITextLabel( [ 20 , 20 , window.bounds[ 2 ] - 40 , 100 ] );

hello.text = "Hello World!";
hello.backgroundColor = [ 0 , 0 , 0 , 0.25 ];
hello.setFont( new Font( "Trebuchet MS" , 2 , 46 ) );
hello.color = [ 1 , 1 , 1 , 1 ];
hello.centersHorizontally = true;

mainView.addSubview( hello );