Contenido

La documentación de jQuery en tu iPhone/iTouch

25 Abr

aNieto2k hace 5517 días en: Apple, Asides, iphone, ipod, javascript, Programacion, webdev

+ 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

aNieto2k hace 5548 días en: Apple, hacks, iphone, ipod, PHP, Programacion, webdev, Wordpress

+ 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 😀

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

16 Ene

aNieto2k hace 5617 días en: Accesibilidad, Apple, estandares, iphone, ipod, Programacion, web, webdev

+ 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

aNieto2k hace 5639 días en: Apple, iphone, ipod, javascript, Programacion, webdev

+ 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

aNieto2k hace 5645 días en: Apple, iphone, ipod, javascript, Programacion, webdev

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

Pronto DJ aNieto2k irrumpirá en las pistas

29 Nov

aNieto2k hace 5665 días en: Apple, iphone, ipod

+ 7

Pos eso, los frutos de la pantalla multitactil son infinitos. iPhone DJ es la muestra de ello.

iPhone/iPod Touch DJ

Características

  • Cargar y reproducir canciones MP3
  • Cross-Fader entre 2 canciones
  • Fowars/Reverse en canciones (rotando los discos)
  • Speed/Pitch con control por Slide.
  • Speed/Pitch tocando los discos
  • Efecto Scratch
  • Control de volumen de dos canales

Aún es una foto, pero se promete.

Ordena los iconos de tu iPhone/iPod Touch con iOrder

23 Nov

aNieto2k hace 5671 días en: Apple, iphone, ipod

+ 3

Cuando compré el iTouch, me molestaba mucho tener los iconos ordenados de esa manera sin posibilidad de reordenarlos a mi antojo. Eso de tener que echar un vistazo para encontrar la opción no me acababa de gustar, así que me puse a buscar algo para solucionar este problema.

iOrder es la solución a todos estos males, se trata de una aplicación (para Windows) que nos permite ordenar las aplicaciones de nuestro iPhone o iPod Touch. Por desgracia, solo tiene las aplicaciones del source original y no tiene una forma fácil de añadir nuevas aplicaciones.

screenshot1.png

Continua —>

iEmule beta 0.1, tomando contacto

10 Nov

aNieto2k hace 5684 días en: Apple, iphone, ipod, webdev

+ 27

Bueno, despues de unos últimos retoques de diseño y alguna mejora con javascript, ya tengo lista la primera versión beta de iEmule. Esta versión, es simplemente una toma de contacto, algo funcional pero abierta a modificaciones y sugerencias, por ese motivo agradecería cualquier tipo de comentario al respecto, con tal de mejorar en medida de lo posible el template.

iemulelogin.pngiemulemain.pngopciones.pngdescargas.pngbusqueda.png

Características

  • Diseño adaptado para iPhone / iPod Touch y Firefox
  • Sistema de cookie con javascript para recordar el password.
  • Diseño fluido que se adapta a la posición del iPhone / iPod Touch

Requerimientos

  1. eMule con posibilidad de servidor web 

Instalación

  1. Descargamos la versión correspondiente a nuetro idioma
  2. Descomprimimos y copiamos en la carpeta webserver/ de nuestro emule (puede variar en algunas versiones de eMule, revisar la carpeta del servidor web en las opciones).
  3. En las opciones de nuestro eMule, Panel de control  >> Servidor Web, seleccionamos la plantilla iEmule.tmpl del directorio anterior.
  4. Disfrutamos de nuestro iEmule.

Descargar

Versión Español / English Versión

 

iEmule, un skin para administrar tu eMule desde tu iPhone/iTouch

7 Nov

aNieto2k hace 5687 días en: Apple, CSS, iphone, ipod, Programacion, webdev

+ 11

Llevo unos días adaptando una plantilla del servidor del web de Emule para poder administrarlo desde el iPod Touch, os pongo unas imagenes para ir abriendo boca.

login.pngestado.pngopciones.pngdescargas.pngbusqueda.png

En cuando lo termine (que será en breve) lo publicaré para que el que quiera lo pueda usar. ¿Que os parece?

Como leer PDF desde el iPhone/iPod Touch

24 Oct

aNieto2k hace 5701 días en: Apple, iphone, ipod

+ 26

La pantalla grande del iPhone/iTouch, es idea para leer documentos, libros, páginas web,… además de mostrar imagenes, gráficos, videos,… por ese motivo era obvio que Apple, incluyera un lector de PDF en forma de extensión para Safari.

Si accedes a un fichero .PDF desde tu navegador podrás leerlo con la aplicación desarrollada aposta, los que la hayan visto sabrán que es bastante buena para leer grandes documentos. Pero, ¿que pasa si no tenemos acceso a Internet? Menos mal que hay cabezas pensantes que solucionan nuestros problemas.

De las posibles soluciones, he recopilado y probado estas:

1) Usar PDFViewer

Me detecta los .pdf, pero no me los visualiza… descartada.

2) Enviartelo por mail

Una solución es enviarte el fichero .pdf al mail y una vez descargado es posible ejecutarlo desde el cliente de correo.

3) Usar MobilePreview

Esta solución, requiere que se instale MobileFinder y MobilePreview, esto nos permitirá navegar por el sistema de ficheros y ejecutar el fichero .pdf que queramos.

4) Convierte el .PDF en una URL (O.o)

Al principio, cuando lo leí dije (¿como?), pero luego caí en los Data:Url, y pensé que podía probarlo:

  1. Descargué Filemark Marker (para Mac), versión Online
  2. Arrastré el fichero .pdf a la aplicación .app que había dentro del zip.
  3. Copié la URL que Safari me dio
  4. La envié por mail al iTouch
  5. Leí mi PDF sin problemas 😀

Magia!! 😀

5) Usa el servidor Web

Esta es la primera solución que se me ocurrió y puse en práctica:

  1. Instalamos Lighttpd ( o Apache)
  2. Subimos via FTP, SSH el fichero .pdf a la carpeta /private/var/root/Sites
  3. Accedemos desde Safari a la ruta local (127.0.0.1) junto al nombre del PDF (http://127.0.0.1/fichero.pdf)
  4. Leemos nuestro libro.

Opcional

Tambien podemos hacer que el servidor web nos liste los ficheros por defecto, de esta forma además tendremos una biblioteca de .pdf’s.

  1. Editamos el fichero lighttpd.conf de /usr/local/etc/
  2. Añadimos dir-listing.activate = "enable" y "mod_dirlisting"
  3. Reiniciamos el iPhone
  4. Podemos mejorar estéticamente la salida de este listado y conseguir algo bastante interesante.
Siguiente → ↑ ← Anterior
wordpress. themes wordpress.plugins wordpress.hacks Wordpress webkit usabilidad tweet themes Safari prototype plugins plugin PHP optimización Opera navegadores MooTools lightbox jquery.plugin jquery javascript itouch iphone internet explorer imagenes IE8 IE6 HTML5 HTML hack google.chrome google framework flash firefox3 firefox firebug estandares CSS3 CSS canvas ajax Accesibilidad 2.7 2.6