Hoy me ha dado por experimentar un poco con el TweenMax, y me ha salido este efecto interesante sobre las letras de un párrafo.
Lo que hago es separar cada letra y envolverla en un span. Luego con jQuery los selecciono todos y hago un bucle animando alguna de sus propiedades.
He encontrado esta librería de JavaScript que tiene muy buena pinta para hacer zoom sobre una imagen. Es simple y muy modificable.
A la hora de maquetar nuestro sitio responsive, necesitamos saber las dimensiones de los dispositivos que hay en el mercado, para saber donde situar los puntos de corte.
Hay infinidad de dispositivos, resoluciones y densidades de pixel, y puede parecer un infierno a primera vista 🙁
Lo primero que tenemos que hacer es colocar esta etiqueta en nuestro html:
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
Con ella le indicamos a nuestro html que tome como anchura de la pantalla la anchura de nuestro dispositivo.
Cada dispositivo tiene unas dimensiones, pero también tiene una densidad de pixeles, sin embargo a la hora de maquetar debemos tratarlos como si de densidad simple se tratase.
Por ejemplo un iPad 1 tiene como dimensiones de pantalla 1024 x 768 (132 ppp),.
Un iPad 3 retina, tiene el doble de densidad de pixels (264 ppp) y tiene unas dimensiones de pantalla de 2048 x 1536.
Sin embargo, ambos se tratan de igual manera en nuestras media queries, tomando ambos como 1024 x 768
Tengo una página para obtener fácilmente las dimensiones de pantalla:
Voy actualizando los valores en una tabla, para tener una referencia de los modelos que hay en el mercado.
Con esta función podemos obtener las variables que nos vengan por la dirección url fácilmente:
// http://mydomain.com/?id=15&name=john getVariables(); // {id:15, name:john} |
// Return url variables like an object function getVariables(){ var variables = window.top.location.search.substring(1, window.top.location.search.length); var arrVariables = variables.split("&"); var obj = {}; for (i=0; i<arrVariables.length; i++) { var current = arrVariables[i].split("="); obj[current[0]] = current[1]; } return obj; } |
Los Object en JavaScript se comparan por referencia, es decir, que aunque sean dos objetos idénticos, cada uno apunta a un espacio de memoria diferente. Así:
var a = {nombre:'Ivan'}; var b = {nombre:'Ivan'}; alert(a == b); // false |
Una forma rápida y sencilla de comparar dos objetos es convertirlos a una cadena de texto con JSON.stringify
var a = {nombre:'Ivan'}; var b = {nombre:'Ivan'}; // Compare two objects function compareObjects(obj1, obj2) { return JSON.stringify(obj1) === JSON.stringify(obj2); } alert( compareObjects(a, b) ); // true |
Si una ventana de html abre otra, estas se pueden comunicar entre ellas. Normalmente se hace con window.open, pero a mi este método no me gusta porque eso abre un popup y la mayoría de navegadores tienen bloqueados los popups.
Lo que muchos no saben es que abriendo una ventana desde un enlace directo, no se bloquea la ventana y se siguen pudiendo comunicar de la misma manera, a través del window.opener
Dejo un ejemplo de un index, que abre una ventana hija (hijo.html)
Este hijo a su vez, tiene un iframe que carga ok.html
Esto lo hago porque hay muchos servicios, como Youtube o Facebook que se abren en un iframe, y una vez logado el usuario, se re dirigen a una url dada. De esta forma, nuestra app de Youtube estaría dentro de nuestro iframe, y este puede comunicarle a quien quiera que se ha logado con éxito.
HTML PADRE:
<body> <a href="hijo.html" target="_blank">Abrir ventana</a> <script> // La ventana hijo me informa que se ha abierto, y me puede pasar una referencia suya function popupAbierto(windowHijo){ console.log("Ventana Abierta!! " , windowHijo); } // La ventana hijo me informa que se ha cerrado function popupCerrado(){ console.log("Ventana Cerrada"); } </script> </body> |
HTML HIJO:
<body> <iframe src="ok.html" frameborder="1"></iframe> <script> // Informo de que me han abierto. Puedo pasarle una referencia a esta ventana para que pueda acceder a ella el padre window.opener.popupAbierto(window); // Le digo a la ventana padre que esta ventana se va a cerrar (tambien puedo delegar esta responabilidad al padre) function usuarioLogado(){ window.opener.popupCerrado(); window.close(); } </script> </body> |
HTML OK:
<body> <a href="javascript:logadoOk()" target="_self">Ya me he logado y quiero cerrar esta ventana</a> <script> // Se lo comunico la ventana contenedora de este iFrame function logadoOk(){ window.parent.usuarioLogado(); } </script> </body> |
Descargar ejemplo de comunicación entre ventanas
Muy buena pinta tiene esta librería de JavaScript para aplicar efectos de imagen como en Photoshop.
Tiene Brillo, Saturación, quitar ruido, Blur, Perspectiva… y algunos tipo Fun que dan mucho juego para hacer creatividades! 😉
http://evanw.github.io/glfx.js/demo/
Otro año que vamos al Subflash!!
y este año… me toca dar una charla a mi 🙂
Ironías de la vida, tantos años yendo como flashero y ahora voy a hablar de Programación en JavaScript, la idea es seguir trabajando como en flash pero con JS 🙂
Corréd! que aún estáis a tiempo! Este año es en Ezcaray, un lugar precioso de La Rioja.
Estos son mis snippets para el Sublime. Son pocos y muy básicos pero al final son los que mas uso 🙂
El atajo de teclado para insertarlos es su propio nombre (class, docu, clearfix…)
Para instalarlos, descomprimir el zip en la carpeta de los paquetes de usuario del Sublime:
En Mac {Usuario}/Library/Application Support/Sublime Text 2/Packages/User/
Muy concisos estos tutos sobre canvas en html5
http://www.html5canvastutorials.com/tutorials/html5-canvas-element/
