Contenido

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??)

Nuevo Google Reader para el iPhone/iPod Touch

13 may

+ 7

Hace unos meses hablabamos de los cambios en Google Reader para adaptarlo a las posibilidades del iPhone/iPod Touch.

reader4iphone.jpg

Estás mejoras ayudaban a los usuario de estos dispositivos a ver claramente los artículos sindicados sin tener que ampliar o reducir el contenido para poder leerlo.

Ahora la gente de Google Reader estrena un nuevo rediseño enfocado más aún a facilitar esta tarea, mediante el uso de Ajax, consigue mitigar las recargas de páginas y se centra únicamente en el contenido.

mobilescroll-small

Podemos ver una demos, pulsando aqui.

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.

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

Añade un icono webclip para el iPod Touch a tu web

16 ene

+ 8

Ayer, en la keynote de Apple, además de presentar el Macbook Air, Apple presentó la nueva actualización de pago para el iPod Touch. Esta actualización, permite disponer de las aplicaciones que tiene por defecto el iPhone y “Home Screen”.

ipod-touch-features1.png

Home Screen te permite organizar los iconos de la pantalla, cambiar los elementos del dock y añadir hasta 8 páginas de inicio llamadas WebClip, simplemente son enlaces directos a tus páginas preferidas desde el menú principal de dispositivo.

Entre las demás mejoras, Safari sufre una modificación y se le incorpora la posibilidad de añadir al menú principal directamente desde el menú de inferior. Lo que facilita la insercción de nuestros WebClip en nuestro iTouch.

add_to_home_ipod_touch_1.jpgadd_to_home_ipod_touch_2.jpg

Para hacer que nuestro sitio esté preparado para esta nueva funcionalidad, tendremos que añadir el siguiente código y cargar una imagen que será importada como icono para lanzar nuestra aplicación.

<head>
    <title>aNieto2k</title>
    <link rel="apple-touch-icon" href="/anieto2k-webclip.png"/>
</head>

La imaden que crearemos tendrá que ser un PNG de 57×57 pixeles (si el tamaño es diferente, se cortará o expandirá lo que haga falta), y tendrá el nombre indicado en el href="" de nuestro <link />.

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 );

Interface móviles para clientes BitTorrent

1 dic

+ 1

Hace ya unas semanas que iEmule nació y la verdad es que me ha ayudado a controlar mis descargas desde cualquier sitio en el que me encontraba. Permitiendome añadir descargas que al llegar a casa no me hubiera acordado, incluso me ha hecho cambiar de planes al ver que ya tenía algo descargado y que podría ir a casa a verlo, y/o escucharlo.

Ahora µTorrent dispone tambien de su propio interface adatado a la tecnología móvil, y como nó para el iPhone/iPod Touch

µTorrent mUI 2.0

La posibilidad de adminitrar tus descargas desde el móvil, puede volver todavía más atractivo este cliente BitTorrent. 

muiutorrent1.jpgmuiutorrent2.jpgmuiutorrent3.jpg

Posibilidades:

  • Ver el estado de los torrents activos
  • Pausar y activar torrents
  • Añadir y Eliminar torrents

[Demo n70][Demo Opera Mini]

µTorrent mUI

iPhone Web para µTorrent

Las nuevas tecnologías tambien están calando fondo a este cliente. 

iphone_utorrent.jpg

Posibilidades:

  • Ver el estado de los torrents activos
  • Pausar, activar torrents.
  • Añadir nuevos torrents añadiendo una URL

iPhone web internet for uTorrent