HTML: Imagen no encontrada

Este es un pequeño truco muy sencillo que sirve para usar como imagen por defecto o imagen no encontrada. Para esto basta este sencillo código:

En caso que no se encuentre la imagen miimagen.jpg automáticamente se cargará la imagen default.jpg

¿Qué es Responsive Design?

Seguramente han escuchado esa frase, en español se traduce como Diseño Web Sensible, si eso aún no te suena a nada básicamente significa que tu diseño para un sitio web se adapten al dispositivo en el que se usan, para ello se usan imágenes y diseños que sean elásticos, ojo esto no es lo mismo que tener una versión para pc y otra para dispositivos móbiles, esto es hacer que la misma versión del diseño funcione bien y se adapte a los iphone, ipad, tanto en la posición horizontal como vertical.

Esto suena bien pero seguro ahora te preguntas y cómo se logra eso pues para eso existen los media queries de CSS3, si tampoco te suena esto último tal vez lo haz usado antes y no te habías dado cuenta de su potencial

Claro es lo que siempre haz utilizado para invocar al CSS, pero también se usa para crear versiones CSS para imprimir

Ahora aquí viene lo interesante, también se puede usar esto para tener hojas de estilo que se adpaten a dispositivos con distintas resoluciones de pantalla

En este caso se agrega una hoja de estilos especial para aquellos dispositivos que tengan un ancho de 800px, en un post en el futuro, haré un ejemplo más específico con las resoluciones para iphone, ipad, etc. La idea no es que en esta hoja de estilos crees un nuevo CSS desde cero, la idea es que sobreescribas sólo ciertos estilos para que el sitio web se vea bien en estos dispositivos, obviamente tieens que haber diseño tu sitio pensando en que elementos serán elásticos.

HTML5: creando un juego 3d con canvas

He visto algunos juegos usando HTML5 pero nadie explica ni como empezar y si buscas el código fuente pues esta en chino.

Encontré este excelente tutorial que explica paso a paso como crear un juego pseudo 3D que luce como el viejo Wolfenstein incluyendo los enemigos usando el objeto CANVAS de HTML, incluso te permiten desacargar todo el código fuente y las demos funcionando.

Pueden verlo AQUI

HTML5: Animaciones 8 bits usando canvas

Gracias a que los modernos navegadores han agregado aceleración vía hardware ya es posible generar animaciones de forma fluida usando CANVAS. Para los amantes de lo retro pueden ver una excelente colección de animaciones estilo los viejos juegos de 8bits, para lo cual simplemente cambian los colores de ciertos pixeles de forma continua logrando interesantes animaciones.

Pueden verlo AQUI

Paypal: Productos con atributos

Para entender bien este tutorial te sugiero revisar el anterior sobre botones simples. Cuando vendemos un producto es usual que debamos elegir algunos atributos como por ejemplo el color, la talla o incluso necesitemos que se deba ingresar algún pequeño texto, ahora vamos a ver como hacer esto y que paypal se encargue de recolectar los atributos.

Producto con distintas tallas

Vamos a agregar un combo box en el cual podamos elegir la talla aunque bien podríamos usarlo para cualquier otro atributo. A nuestro botón tendríamos que agregarle el siguiente código.

Si nos fijamos en el código hay un campo hidden llamado on0 con el valor “talla” este es el nombre del atributo, a continuación hay un combo llamado os0 este da el valor del atributo “talla”.

Si quisiéramos agregar más atributos estos se llamarían on1, on2, on3… y sus valores os1, os2, os3… podemos usar tanto un combo como un input text aunque personalmente prefiero cerrar al máximo las opciones para el usuario usando combos y a modo excepcional los campos de texto.

El código completo del botón luciría así:

Finalmente cabe mencionar que este sistema de atributos funciona tanto con botones buynow como con botones tipo shopping cart indistintamente