#36 – 5 Agosto 2010

iPad, iPad, iPad… otro nuevo dispositivo para cautivar a los ávidos consumidores, pero que por lo menos trae interesantes nuevas tecnologías. Aparte de que crean que es un iPhone gigante, tiene varias innovaciones que permiten darle mucha rienda a la imaginación de los creadores de contenido específico para esta plataforma. Una de las que más me han interesados, corresponde a los eventos gestuales. Este artículo abordará todos los eventos disponibles para iPad y que ocurren cuando el usuario interactúa con una página web en iOS. Aunque puedes visualizar los ejemplos con Safari 5 para escritorio o el mismo iPhone, la mejor interacción la puedes lograr desde un iPad mismo por la dimensión y calidad de su superficie táctil (o en su defecto con su simulador).

Si usas seguido Safari ó Chrome, habrás notado que estos browsers permiten -por defecto- que el sea redimensionado por el usuario a través del arrastre en el rincón inferior-derecho. Esta es una propiedad de WebKit de accesibilidad que puede perjudicar el layout de nuestro lindo formulario. Para quitarlo, basta declarar en CSS:

Al declarar algunos valores en propiedades CSS como background-image, usualmente se permite poner o no el valor entre comillas dobles "" ó simples ». Si escribes el código a mano, no las utilizas. Si usas algún editor, quizas las agrega. Pero ¿se debe o no poner comillas? Esta pregunta que ha intrigado al hombre por años no tiene una respuesta definitiva. Por lo menos no la he encontrado de manos de la W3C, pero sí el uso de comillas en ciertas declaraciones tiene sentido:

Muchos temas me son más fáciles de expresar verbalmente que a través del teclado, principalmente cuando son de opinión. Y compartir la opinión, tanto mía como la de ustedes ha sido uno de los principales motivos por los cuales mantengo este sitio. Aparte de compartir conocimientos, crear un lugar -aunque sea virtual- para concentrar y comparar puntos de vista es un gran objetivo que se sigue manteniendo en CSSLab.cl. En esta ocasión, el podcast es bastante preciso y corto, y los temas que convergen son:

Esta pequeña función de jQuery me es muy útil cuando tengo un campo de texto (, , etc) y éste tiene un valor por defecto (por ejemplo, el Buscar que se ve en el header de este humilde sitio). Cuando hago foco en él para escribir, quiero que ese value desaparezca y el usuario pueda ingresar lo que quiera; caso contrario, si el usuario lo deja vacío o si es el mismo que el original (en este caso, Buscar) vuelve a restablecerse al definido por defecto.

#35 – 4 Junio 2010

Inaugurando el rediseño de este sitio, orientado completamente hacia los nuevos estándares que espero algún día pronto sea aprobado y (bien) aplicado por los fabricantes de browsers, he mejorado la versión de mi ya fiel [CSS Reseter][1] que tanto me ha ayudado en innumerables proyectos. Para esta nueva versión, he agregado las nuevas etiquetas que conforman HTML 5 para elementos de tipo bloque (las que son inline no las necesitan) y aproveché de realizar las siguientes mejoras en lo existente:

Es muy común el uso de navegación de tipo tabs para contenidos dentro de una misma página y funcionan bastante bien; el usuario ya está acostumbrado a este tipo de elementos y los utiliza sin problemas, además que resulta liviano y relativamente fácil implementarlos.

Como muchos ya saben, Webkit siempre ha sido pionero en implementar nuevas tecnologías y las últimas versiones de los lenguajes web existentes. Muchas etiquetas y atributos de HTML 5 por ejemplo, ya se pueden utilizar desde hace mucho tiempo en browsers como Safari, Konqueror y Chrome. Este pequeño tip mostrará un atributo de HTML 5 que implementado, ayudará a que la experiencia de usuario de Safari para iPhone y iPad sea mejor. En un campo de formulario, cuando lo seleccionas en iPhone/iPad para completarlo, automáticamente te muestra el teclado touch del aparato. Aparte del teclado QUERTY por defecto, existen 3 valores para type="" de que muestran diferentes tipos de teclados: numéricos, url y de e-mail: