Contenido

Activar la navegación por teclado en los navegadores de MacOs X

10 Jun

aNieto2k hace 25 días en: Apple, Asides, macbook, webdev

+ 1

La gente de 456 Berea St nos muestran como activar la navegación por teclado en los diferentes navegadores disponibles para MacOs X. Al parecer, por defecto esta opción no viene completamente activa lo que hace que la navegación con teclado es parcial e incompleta. De esta forma podremos ponernos en el caso del usuario que no tiene ratón y quiere navegar por nuestra web (por ejemplo :D ).

NimbleKit, aplicaciones nativa para iPhone con HTML y JS

27 May

aNieto2k hace 39 días en: Programacion, estandares, iphone, ipod, javascript, web, webdev

+ 3

NimbleKit es una extensión de Xcode con el que podremos desarrollar aplicaciones para el iPhone/iPod Touch pero sin necesidad de saber Object C. Se trata de intentar hacer que los desarrolladores web tengamos posibilidad de realizar estas aplicaciones e incluso subirlas al App Store de Apple. Todo ello, desarrolllando como lo venimos haciendo, usando tecnologías como HTML y Javascript.

road-map
(Ver Imagen)

Dispone de una serie de funciones que activarán los elementos nativos del dispositivo. Además de …

  • Control completo de la apariencia de la aplicación
  • Posibilidad de reproducir sonido en streaming
  • Controlar la vibración
  • Soporte de la Agenda
  • Acceso a ficheros
  • Acceso a Internet

Crear un iCal (estilo iPhone) con jQuery

14 Feb

aNieto2k hace 141 días en: Apple, CSS, Programacion, ipod, javascript, webdev

+ 13

El calendario del iPhone va a dejar de ser únicamente conocido por ese nombre ya que ahora con jQuery podemos conseguir un calendario de similar aspecto para nuestras páginas web.

ical_jquery

Mediante unas tablas, un poco de CSS y un mucho de jQuery obtenemos el resultado que podemos ver en el ejemplo. Tambien podemos descargar el código y usarlos en nuestras aplicaciones web.

Primeras imagenes de Google Chrome para Mac Os X

14 Feb

aNieto2k hace 141 días en: Actualidad, Apple, de la red, estandares, web, webdev

+ 1

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

aNieto2k hace 252 días en: Apple, CSS, PHP, Programacion, Proyectos, ipod, javascript, webdev, xslt

+ 16

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

aNieto2k hace 256 días en: Apple, macbook, webdev

+ 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

aNieto2k hace 275 días en: Apple, Programacion, estandares, ipod, javascript, web, webdev

+ 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

aNieto2k hace 356 días en: Accesibilidad, Apple, CSS, Programacion, diseño, estandares, javascript, web, webdev

+ 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

aNieto2k hace 363 días en: Apple, CSS, Programacion, estandares, iphone, ipod, web, webdev

+ 6

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

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

+ 2

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

← Anterior ↑