Archivo de la categoría ‘JavaScript’

JS – Explosión de Letras

Publicado por Iván Gajate el 5 de febrero de 2014 en Desarrollo Web, JavaScript | 2 comentarios »

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.

JS – Zoom Magnifier

Publicado por Iván Gajate el 16 de enero de 2014 en Desarrollo Web, JavaScript | Los comentarios están cerrados.

He encontrado esta librería de JavaScript que tiene muy buena pinta para hacer zoom sobre una imagen. Es simple y muy modificable.

http://mark-rolich.github.io/Magnifier.js/

Resoluciones móviles

Publicado por Iván Gajate el 15 de enero de 2014 en css, Desarrollo Web, JavaScript | 2 comentarios »

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:

http://yporqueno.es/lab/mobile/

Voy actualizando los valores en una tabla, para tener una referencia de los modelos que hay en el mercado.
 

 

JS – Recoger Variables de la URL

Publicado por Iván Gajate el 29 de noviembre de 2013 en JavaScript | Los comentarios están cerrados.

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;
}

JS – Comparar dos Objetos en JavaScript

Publicado por Iván Gajate el 29 de noviembre de 2013 en JavaScript | 1 comentario »

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 tratamos de usarlo con un objeto jQuery nos dará un error porque tiene referencias circulares.

JS – Comunicación entre ventanas

Publicado por Iván Gajate el 30 de septiembre de 2013 en Desarrollo Web, JavaScript | Los comentarios están cerrados.

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

 

JS – Filtros de imagen como en Photoshop

Publicado por Iván Gajate el 9 de septiembre de 2013 en JavaScript | Los comentarios están cerrados.

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/

Subflash 2013

Publicado por Iván Gajate el 28 de agosto de 2013 en Eventos, Flash, JavaScript | Los comentarios están cerrados.

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.

http://www.subflash.com/talleres/2013/

Sublime Text – Mis Snippets

Publicado por Iván Gajate el 25 de agosto de 2013 en Desarrollo Web, JavaScript | Los comentarios están cerrados.

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/

Descargar Snippets

Tutoriales sobre Canvas

Publicado por Iván Gajate el 6 de agosto de 2013 en Desarrollo Web, JavaScript | Los comentarios están cerrados.

Muy concisos estos tutos sobre canvas en html5 

http://www.html5canvastutorials.com/tutorials/html5-canvas-element/