Contenido

Primeras imagenes de Google Chrome para Mac Os X

14 Feb

+ 3

Aunque hace ya muchos meses que apareció Google Chrome en nuestras vidas. Como casi todos los productos de Google se ha convertido en algo que usamos a diario. Personalmente no es el navegador que más me gusta, pero gracias a su velocidad, tanto de arranque como en la carga de páginas, se ha ganado un icono fijo en mi escritorio (en el trabajo).

firstchromepageever

Esta imagen muestra que Google Chrome en Mac OS X es una realidad y que están trabajando en ella. Una versión que sorprendentemente aún no está para este sistema operativo.

Recordemos que hace unos meses hablamos de Stainless, una versión compilada para Mac OS X que no acababa de funcionar perfectamente, pero que nos permitía darnos una idea de lo que podríamos llegar a tener con la versión oficial.

Más información / Via

iMeneame.net se lava la cara

26 Oct

+ 17

Hace más de un año que iMeneame vió la luz, la versión para el iPhone de Meneame.net (versión no oficial) ha tenido que aguantar con un diseño realmente horrible (evidentemente mio) hasta que me he topado con Lucas Savelli de WydStudio.

new_imeneamenew_meneame_single

Gracias a Lucas, iMeneame ha adquirido un aspecto más moderno y más eficiente para el dispositivo que fue creado. Debido a que el contenido lo saco del RSS de Meneame me veo condicionado a lo que este formato nos devuelve, las limitaciones del XSL tampoco han ayudado mucho, pero creo que el resultado es más que satisfactorio apesar de las salvedades encontradas.

Espero que os guste, y me comuniqueis todos los fallos e impresiones.

¿Firefox Multitouch?

22 Oct

+ 2

Hace unos días, Apple anunció la nueva versión de MacBook y MacBook Pro. Ambos incluyen de serie la tableta del ratón multitactil, lo que significa una nueva forma de interactuar con el sistema operativo, y ¿por que no? con la web.

Al parecer Edward Lee ha pensado en ello y ha montado una versión de Firefox 3.1 con un sistema de manejo multitouch para ir abriendo boca. Únicamente disponible para MacOs X.

Oculta la barra de navegación en Mobile Safari sin Javascript

3 Oct

+ 7

Mobile Safari es el navegador que nos encontramos en los iPhone/iPod Touch y sus aplicaciones web está revolucionando la navegación móvil de una forma espectacular. Hace unas semanas vimos como ocultar la barra de navegación usando Javascript y vimos que de esta forma agrandamos la parte visible de la página mostrando más información a usuario, algo realmente importante en este tipo de dispositivos.

Ahora via Ajaxian, descubro la forma de hacer mediante el uso de tags <meta /> en nuestro <head />:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />

Podemos ver una demo directamente desde este enlace.

Crea un motor de busquedas accesibles al estilo Mac OS X

14 Jul

+ 6

La influencia de Apple, está muy latente en el desarrollo web y no es para menos, el conjunto de diseño limpio y usable es algo ideal para lo que el desarrollo web moderno intenta conseguir con las páginas web.

Una muestra de ello es este motor de búsqueda desarrollado en Javascript/CSS para emular el «searchbox» del sistema operativo de Apple. He estado mirando el código fuente y no me ha acabado de gustar la idea de usar <span></span> para alojar elementos que deberían ser inputs.

searchbox

Por ese motivo me he tomado la libertad de modificar el CSS y adaptar a jQuery un par de líneas que son realmente las necesarias para dotar este tipo de elementos al aspecto de Mac OS X que queremos darle.

HTML

<form name="form" class="searchbox" action="" method="post">
<p>
    <input type="text" name="s" value="" class="search"/>
    <input type="reset" name="reset" value="Reset" />
    <input type="submit" value="Enviar" />
</p>
</form>

La estructura es, a mi entender, algo más correcta ya que simplemente nos basamos de los elementos HTML que componen un formulario normal. Usando la class searchbox para indicar al javascript que ese formulario va a ser tratado para emular el searchbox de Mac OS X.

En este código, usaremos el botón reset para emular el botón (x) que vemos en la parte derecha del <input /> y la lupa que vemos en la parte izquierda del <input /> será nuestro botón de submit y el que nos llevará a la siguiente página.

CSS

.searchbox .resetButton  {
	background: white url("i/srch_r.gif") no-repeat scroll left top;
	width: 19px;
	height: 19px;
	border:0;
	text-indent:-5000;
	position:absolute;
	margin-left:-18px;
}
.searchbox .delete {
	background: white url("i/srch_r_f2.gif") no-repeat scroll left top;
}

.searchbox .submitButton {
		background: white url('i/srch_l.gif') no-repeat top left;
		width: 19px; height: 19px;
		text-indent:-5000;
		border:0;
		position:absolute;
}

.searchbox input.search {
	height:19px;
	padding-left:10px;
	width:600px;
}

Este código, consigue que nuestro input tenga el aspecto que deseamos, simplemente usamos la class searchbox para cambiar los estilos de los elementos que hay dentro.

Javascript

$.extend({
    searchbox: function() {
        var isSafari = /Apple/.test(navigator.vendor);
        var isOpera = window.opera;
        var input = $("form.searchbox input:text");
        var submit = $("form.searchbox input:submit");

        $("form.searchbox input:reset").each(function(x, el){
                $(el).addClass("resetButton");
                $(el).bind("click", function(){
                        $(this).removeClass("delete");
                });
        });

        $("form.searchbox input:submit").each(function(x, el){ $(el).addClass("submitButton");});

        input.css({
                "height": (isOpera || isSafari)?"13px":"14px",
                "padding-left" : (isOpera || isSafari)?"15px":"10px",
                "outline":"none"
                });
        var corrector = (isOpera || isSafari)?29:21;
        $("input.submitButton").css("margin-left", "-" + input.width() - (corrector) + "px");


        input.bind("keyup", function(){
            if($(this).val() != '') $(this).parent().find("input:reset").addClass("delete");
            else $(this).parent().find("input:reset").removeClass("delete");
        });
    }
});
// Activamos al cargar la página.
$(document).ready(function(){
        $.searchbox();
})

Usando jQuery como base, extendemos las opciones del framework con el método extend() que nos permite definir nuevas opciones de forma fácil y limpia. Esta nueva funcionalidad, nos añade los estilos necesarios para los usuarios que disponen de javascript.

Ventajas

searchbox2

Al necesitar javascript para aplicar los estilos los usuarios que no disponen de ellos ven un formulario compuesto por un <input /> en el que pueden introducir un lo que están buscando y dos botones, uno que nos limpiará el formulario y el botón de submit que nos permite enviar el valor del elemento a nuestra página de resultados. Para ello he usado este gran artículo de Olga Carreras en el que nos muestra las diferentes formas de crear formularios con varios botones.

Problemas

Pese a que he podido probarlo en Firefox 3, Safari y Opera no he podido verlo en Internet Explorer, aunque seguro que falla, el text-indent no le gustaba, así que tendré que testearlo cuando tenga tiempo.

Demo

Podéis ver como se vería en el ejemplo que he montado. Creo que como idea puede valer 😉

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

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 😀

Desarrollo web sobre Mac OS

18 Feb

+ 25

Hace unos días recibí un mail en el que me pedían que publicara este post, uno en el que indicara las herramientas que uso para desarrollar sobre mac. Inicialmente pensé que sería un poco corto el post, por que soy de los desarrolladores que usan herramientas rudimentarias y la verdad es que con TextMate lo hago casi todo, pero indagando un poco sobre el tema he encontrado una serie de herramientas que me ayudarán a desarrollar y que poco a poco iré integrando en mi día a día.

Continua —>

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 />.