Emular una web en varios dispositivos

Para comprobar como se verá una web (local o no) en varios dispositivos, el navegador Google Chrome dispone de una herramienta muy útil.

Tenemos que ir a Menú > Más herrramientas > Herramientas para desarrolladores (o Ctrl + Mayús + I).

Para activar el emulador utilizamos el botón con forma de dispositivo ( ). Aparecerá un espacio de trabajo con varias opciones. La más importante es el desplegable «Device», donde escogeremos qué dispositivo queremos simular. Importante: hay que recordar actualizar la página para que se adapte al dispositivo que hemos escogido, muchas veces no lo hace de forma automática. Hay otras opciones útiles, como rotar el dispositivo, poner una medida customizada…

Convertir todos los “li” con “a” dentro, en botones en jQuery

Es bastante habitual, cuando trabajamos con una plantilla WordPress, que un tema pinte los elementos de un menu como «LI» con etiquetas «A» dentro, por ejemplo: <li><a>mi menú</a></li>
También es habitual encontrarse que las propiedades CSS que hacen que nuestro enlace se vea como un botón, están aplicada al LI y no al A. Por tanto…. todo el LI parece un botón, pero solo el texto «mi menú» es clicable.
Esto bien puede solucionarse con estilos… pero también puede solventarse en un plis con este sencillo jQuery que hace que la etiqueta LI también sea clicable:

Incrustando y personalizando Google Maps

Obtener las coordenadas de cualquier mapa en google maps:
http://www.agenciacreativa.net/coordenadas_google_maps.php

Responsive Image Maps

Los imágenes en html se pueden «Mapear», es decir… asignarle a una misma imagen distintas áreas clickables.
Dreamweaver permite hacerlo de forma muy sencilla mediante un editor visual, pero cuando la imagen no tiene un tamaño fijo, la cosa se complica.
Para solucionarlo existe:

http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html

Menu responsivo

10 Soluciones responsivas de navegación:

http://speckyboy.com/2012/08/29/10-responsive-navigation-solutions-and-tutorials/

Javascript, que es y que permite hacer.

Javascript, que es y que permite hacer.

Usos mas comunes:

• Desarrollo de utilidades en Dreamweaver (como el acordeón)
• Generar consultas a bases de datos que no necesiten recargar la pagina (ajax).
• Desarrollar aplicaciones web complejas que funcionen dentro del navegador (gmail, google doc’s etc).
• Integración con canvas para la generación de animación, generada a través de programas con interfase gráfica (como las que generan flash y processing).
• Papel determinante en las paginas web de diseño responsivo.
• Librerías open source de recursos destinados a aumentar la funcionalidad de la web como Jquery y otras, basadas en esa como las galería de imágenes, etc.
• Creación de widgets y apps para distintos dispositivos.

HTML5Rubik: cómo programar un cubo de Rubik en CSS3/JavaScript

Básicamente es una explicación paso-a-paso de cómo construir un cubo de Rubik interactivo empleando únicamente CSS3 y JavaScript. Funciona en cualquier «navegador web moderno» y también en iPhone/iPad y dispositivos Android.
HTML5Rubik.

Vía. microsiervos.com