Como valor agregado, posterior al curso volví a grabar (tratando de recordar lo dicho en esos momentos) y disponibilizo los slides con audio y auto-navegación, es decir, en la parte superior de cada slide encontrarán un player de <video> con el cual pueden hacer play y escuchar mi monótona voz mientras se cruzan de brazos, conectan audífonos y ven como pasan los slides uno a uno, sincronizados con lo que se va mencionando. Con audio cada clase no son más de 20 minutos.

Advertencia:
La grabación hecha en cada uno de los 3 slides fueron en una misma sesión y al estilo de conversación, no de charla.
Imagínense que estamos en un bar conversando y me preguntan sobre mobile y y les voy contando todo lo que sé y deberían saben.
Eso.

Si no les interesa escucharme, ignoren el player y denle con las flechas. En todo caso el audio pueden pararlo y adelantarlo si quieren, el slide correspondiente se reubicará donde debería estar.

Clase 1: Introducción al desarrollo móvil

• Roadmap
• Herramientas
• Dispositivos / Browsers
• Códigos base

Ver Clase 1

Clase 2: Diseño orientado al móvil

• Resoluciones y Tamaños
• Densidad de pixeles
• Qué evitar

Ver Clase 2

Clase 3: Desarrollo orientado al móvil

• Detección
• Was ist Modernizr
• Sitio dedicado v/s sitio responsivo
• Media queries
• HTML/CSS
• Javascript
• Herramientas

Ver Clase 3

Recomendaciones:

1. El uso de un browser moderno (duh!) como Chrome/Safari ó Firefox 9+
2. Si vas a escuchar el audio, súbele el volumen y ponte audífonos.
3. Comentarios sobre el contenido son bienvenidos.

El HTML es una imagen común y corriente:

<img src="http://www.be-studios.com/tests/foto_diegol.jpg" />

Pero la magia está en la animación con CSS3:

@-webkit-keyframes girando {
   0%   { transform: rotate(45deg) rotate3d(1,1,0,0deg);   }
   25%  { transform: rotate(45deg) rotate3d(1,1,0,90deg);  }
   50%  { transform: rotate(45deg) rotate3d(1,1,0,180deg); }
   75%  { transform: rotate(45deg) rotate3d(1,1,0,270deg); }
   100% { transform: rotate(45deg) rotate3d(1,1,0,360deg); }
}
   img {
      position: absolute;
      top: 20%;
      left: 30%;
      animation: girando linear infinite 2s;
      transform-style: preserve-3d;
   }

Ver ejemplo

Ver Gist en Dabblet

Adelante, puedes ver cómo funciona en tu celular ⬇

Links:

• CSS3 3D Transforms
• Understanding CSS 3D Transforms
• 3D Transforms

Desde el siguiente ejemplo, tomaremos la el valor CSS de margin-right del buscador de este mismo sitio; normalmente lo haríamos de esta manera:

$marginR = $('.search-form').css('margin-right');

Click para ver ejemplo 1

El valor entregado efectivamente es el correcto: 10px pero lo necesitamos numérico. Para ello utilizamos replace():

$marginR = $('.search-form').css('margin-right').replace('px','');

Click para ver ejemplo 2

background-size: cover;

Esta propiedad (anexa) de background permite hacer lo que necesitamos. Lamentablemente estamos en una etapa en que los estándares y quienes los implementan no se ponen del todo de acuerdo y debemos utilizar esos molestosos prefijos, pero fuera de eso funciona de maravilla.

body {
   background: url('../img/thai.jpg') center center no-repeat;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   background-size: cover;
}

Ver ejemplo

Soporte: Safari, Chrome, Firefox 3.6+, IE9+, Opera10+

100 Things Every Designer Needs to Know About People

Susan M Weinschenk, Ph.D.
Edición 1, ISBN-10: 0321767535 | ISBN-13: 978-0321767530

Antes que todo y primero que nada, este libro fue un préstamo de un amigo quien gentilmente me recomendó leerlo. Sus palabras fueron (creo): "lo compré en Amazon y es interesante". Suficiente en ese entonces para darle una oportunidad.

Segundo: un libro que tiene en su cubierta el nombre del autor con su grado académico no me impresiona para nada, más aún si el tema involucra diseño gráfico o desarrollo web.

"100 Things…" terminó siendo un libro interesante de leer, pero si estuviera aún en la Universidad. Trata sobre el estudio de Susan (psicóloga, se nota) sobre el comportamiento del usuario frente a diferentes estímulos que existen cuando se encuentra con un sitio web. Para ser exactos, son 100 hechos que se consideran y que son avalados por estudios sobre el comportamiento del usuario.

Lo bueno es que está bastante resumido. Lo malo, es que es muy superficial y fácil de leer. Personalmente me gustan lecturas algo más complejas y que me permitan trabajar más el cerebro, pero en este libro Susan no deja mucho a la imaginación y entrega todo lo que tiene, muy simple y resumido. Cuando menciona estudios hechos por investigadores, no agrega las fuentes utilizadas (no hay ningún pié de página) pero al final del libro están todas las referencias utilizadas, por si alguien se asoma a consultarlos. Aún más, trabaja tan bien cada una de las 100 ideas (y las separa por temas: Como ven, leen, recuerdan, piensa, decide, etc.) que deja un resumen de lo que el lector debe recordar (Takeaways), algo así como ‘si no quieres seguir leyendo quédate con el resumen’.

Finalizando, "100 Things…" es un libro muy bueno para ser leído por un universitario o quien esté en una etapa de aprendizaje, es fundamental para que se conozcan los estudios y conclusiones hechas en base al comportamiento del usuario. Pero para un profesional que ya tiene bagage, si no conoce 90 de las 100 es que está mal enfocado (he conocido a muchos que le hacen falta un repaso por este libro en todo caso).

* La guinda de la torta: ¡Publicidad! ¡En un Libro! Primera vez que lo veo, no me dejo de impresionar.

Con el siguiente HTML de ejemplo:

<ul>
   <li>Elemento Uno</li>
   <li>Elemento Dos</li>
   <li>Elemento Tres</li>
   <li>Elemento Cuatro</li>
   <li>Elemento Cinco</li>
</ul>

CSS3

Comencemos con la más vanguardista: con CSS3, a cada elemento impar (odd) agrégale el estilo definido:

ul li:nth-child(odd) {
   background-color: #999;
}

Ver ejemplo

Si quieres los elementos pares, basta cambiar odd por even.

jQuery

Sigamos con el popular jQuery: cómo lograr estilos intercalados para elementos dependientes de uno padre:

$("ul li:odd").addClass("impar");

Teniendo en el CSS:

.impar {
   background-color: #999;
}

Ver ejemplo

Mootools

Terminemos con el poderoso Mootools, mismo CSS anterior:

$$("ul li").each(function(el, count) {
   el.addClass(count % 2 == 0 ? '' : 'impar');
});

Ver ejemplo

* Si te fijaste, tanto jQuery como Mootools no coinciden en el zebra con el método con CSS3 porque manipula los elementos con Javascript y los interpreta como un array, el que tiene un índice de 0 y a partir de ahí comienza a contar hacia adelante. En el fondo no es realmente ‘impar’ o ‘par’, ten en cuenta que lo importante es la alternancia en los elementos.

El cursor del mouse es un elemento muy poco considerado en el momento del diseño ó al aplicar estilos CSS. Pero la verdad es que es un complemento importantísimo de la accesibilidad y usabilidad, y por esa razón fue considerado en el momento de crearse tantos valores para esta propiedad.

Su uso es muy fácil y es aplicable no sólo a la pseudo-class :hover, sino que a cualquier etiqueta HTML:

<strong style="cursor: help;">¡Ayuda!</strong>

Lamentablemente la visualización de cada tipo de cursor depende del sistema operativo del usuario, y la capacidad de visualizarlo depende del browser que esté utilizando.

A continuación nombro todas las variedades y al final una página de ejemplo con todos ellos aplicados para que tengan al cursor considerado en su próximo proyecto:

CSS2:

cursor: auto;
cursor: inherit;
cursor: crosshair;
cursor: default;
cursor: help;
cursor: move;
cursor: pointer;
cursor: progress;
cursor: text;
cursor: wait;
cursor: e-resize;
cursor: ne-resize;
cursor: nw-resize;
cursor: n-resize;
cursor: se-resize;
cursor: sw-resize;
cursor: s-resize;
cursor: w-resize;

CSS3 (funcionan en los browsers modernos (IE9+, FF 3.5+, Chrome, Safari, Opera 9+):

cursor: none;
cursor: context-menu;
cursor: cell;
cursor: vertical-text;
cursor: alias;
cursor: copy;
cursor: no-drop;
cursor: not-allowed;
cursor: ew-resize;
cursor: ns-resize;
cursor: nesw-resize;
cursor: nwse-resize;
cursor: col-resize;
cursor: row-resize;
cursor: all-scroll;

Propietarios (Firefox y Chrome/Safari):

cursor: -webkit-grab;
cursor: -moz-grab;
cursor: -webkit-grabbing;
cursor: -moz-grabbing;
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
cursor: -webkit-zoom-out;
cursor: -moz-zoom-out;

Tu propio cursor:

cursor: url(images/cursor.cur);
cursor: url(images/cursor.png), default;

* para mejor fallback después del url() utiliza algunos de los cursores CSS2
* Para Firefox y Chrome/Safari utiliza un PNG transparente.
* IE require que sea un archive .cur
* Opera no lo soporta

Ver cursores

Link:

• Introducing the New Cursor Styles in CSS3

Desde la salida del Retina Display, se duplicó la densidad de pixeles que utilizábamos para diseñar y construir sitios webs para iPhone. Aunque si seguías utilizando los acostumbrados 480x320px de las pantallas anteriores, se nota bastante el pixel en estos nuevos teléfonos. Pero si trabajas para la nueva resolución de 960x640px, ¿qué haces con los modelos anteriores?

Suele ser común el pensamiento que 1 pixel en CSS es 1 pixel en la pantalla del dispositivo. Cuando entramos al nuevo mundo de la alta definición un pixel en CSS termina siendo múltiples en la pantalla. Un ejemplo es si defino un zoom de 2x, entonces 1 pixel de CSS termina siendo 2×2 cuadrados de pixel en el dispositivo. Y eso es lo que está sucediendo desde el iPhone 4.

Entonces, la pregunta es sencilla: ¿Cómo trabajamos con Retina sin dejar de lado las resoluciones anteriores?

La respuesta viene de la mano del potente Mobile Safari y su capacidad de responder mediante CSS3 media queries. Podemos detectar si el dispositivo duplica la densidad del pixel, y si es así modificar el estilo reemplazando las imágenes por una de doble resolución:

<link rel="stylesheet" type="text/css" href="css/normal.css">
<link rel="stylesheet" type="text/css" href="css/retina.css" media="only screen and (-webkit-min-device-pixel-ratio: 2)" >

El secreto está en que definas las imágenes que querrás se vean de mejor calidad en un iPhone 4+ mediante background-image de CSS, por ejemplo:

normal.css

#logo {
   background-image: url('images/logo.png');
   background-size: 100px 100px;
   background-repeat: no-repeat;
}

retina.css

#logo {
   background-image: url('images/logo_hi.png');
}

Ver ejemplo

Te recomiendo apreciar el ejemplo desde tu teléfono móvil, para que realmente veas los resultados:

Como el navegador va a leer sí o sí normal.css, y por gracia del media="only screen and (-webkit-min-device-pixel-ratio: 2) sólo los dispositivos que tengan duplicados su resolución leerán retina.css y sobreescribirán los estilos definidos en esta hoja de estilos por sobre la anterior. La idea es que sólo definas las propiedades que cambien, no es necesario que reescribas todo el código.

Mediante JS

Otra manera es hacerlo mediante JavaScript, la cual encuentro innecesaria pero de todas maneras dejo la opción:

<script type="text/javascript">
   if (window.devicePixelRatio >= 2) {
      document.write("<link href='css/retina.css' rel='stylesheet' type='text/css' media='screen' />");
   } else {
      document.write("<link href='normal.css' rel='stylesheet' type='text/css' media='screen' />");
</script>

Links:

• CSS Image Replacement for iPhone 4 High-DPI Retina Display
• Targeting the iPhone 4 Retina Display with CSS3 Media Queries
• Media Queries by W3C

Selecciona tu idioma / Select your language:

• English
• Español

Outlinr ← click&drag

How to install a bookmarklet / Cómo instalar un bookmarklet