Archivo de septiembre de 2013

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

 

AS3 – Recoger parámetros externos con loaderInfo

Publicado por Iván Gajate el 20 de septiembre de 2013 en AS3, Flash | Los comentarios están cerrados.

Algo muy típico es pasarle parámetros a Flash desde el html que lo contiene para que se inicie la carga según esos parámetros, por ejemplo para pasarle un idioma inicial, o alguna contraseña generada en el servidor.

En nuestro html sería algo así (si utilizamos swfobject que deberíamos 🙂

 

<script type="text/javascript">
	var flashvars = {};
	// Inyecto tantas variables como quiera
	flashvars.foo = "foo";
 
	var params = {menu:"false", scale:"noscale", bgcolor:"FFFFFF", allowScriptAccess:"always"};
	var attributes = {};
	//swfobject.embedSWF(swfUrl,      id,    width, height, version, expressInstallSwfurl, flashvars, params, attributes)
	swfobject.embedSWF("miflash.swf", "flashdiv", "1000", "600", "10.0.0", "playerProductInstall.swf", flashvars, params, attributes);
</script>

Desde nuestra peli de flash, podemos recoger esa variable foo utilizando loaderInfo:

 

package {
 
	import flash.display.MovieClip;
	import flash.text.TextField;
	import flash.events.*;
 
	public class Main extends MovieClip {
 
		public function Main() {
			this.addEventListener(Event.ADDED_TO_STAGE, added); // Me aseguro que esta addedToStage
		}
 
		private function added(e:Event):void{
			this.removeEventListener(Event.ADDED_TO_STAGE, added);
 
			if (loaderInfo != null){
				var parametros:Object = loaderInfo.parameters;
 
				// Para evitar que genere error en caso que no haya variables creamos un contador
				var cont:int = 0;
				for (var param:String in parametros){
					trace(parametros[param]);
					cont++;
				}
			}
 
		}
 
	}
}

Flash Builder Snippets

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

Ya soy adicto a estos trocitos de código y me siento inútil si trato de programar sin ellos instalados 🙂

Para utilizarlos hay que instalar un plugin en Flash Builder (o Eclipse) llamado CFEclipse. Para instalarlo lo mas fácil es ir a

Help > Install new Software > Add…

Tal y como se explica aquí.

Una vez instalado, sacamos la ventana del plugin en Flash Builder en

Window > Show View > Other…

y el plugin aparece como CFML > Snip Tree View

Desde ese panel podemos añadir nuestros snippets y asignarles atajos de teclado.

Si quieres utilizar mis snippets solo hay que cerrar Flash Builder, abrir la carpeta de nuestro Workspace (se configuró en su día cuando abrimos el programa por primera vez, está en las preferencias), y dentro veremos la ruta .metadata > .plugins > org.cfeclipse.cfml > snippets (Ojo!! son carpetas ocultas, tendremos que poder ver los archivos ocultos en nuestro sistema).

Dentro descomprimiremos nuestros snippets (en carpetas) junto con un archivo que guarda un indice de todos.

Descargar mis snippets

Yo he modificado el atajo de teclado para que se inserten los snippets, para hacerlo en preferencias de Flash Builder, en General > Keys, modificamos el Insert Snippet de CFML Editor por «Esc» «in Window»

Así, si pulsamos «pfn+esc» nos escribirá:

//
public function ():void{
 
}

Con el cursor parpadeando en el nombre 😀

Subflash 2013 superado!!

Publicado por Iván Gajate el 16 de septiembre de 2013 en Eventos | 2 comentarios »

Que buenas sensaciones me da siempre Subflash, no se cómo funciona pero funciona! Nos juntamos programadores, diseñadores, gestores de cliente, hasta un político! 😉

Yo pensaba escribir mi crónica del fin de semana, pero no voy a poder hacerlo mejor que el el propio portal de Subflash 🙂

Tan solo añadir que personalmente me ha encantado, era el primer año que asistía como ponente y si me dejan repetiré sin duda. Eso si, con un tema menos duro que si no se me duermen todos! 😉

Aquí dejo mis archivos de la charla por si alguien les quiere echar un ojo.

¡¡Hasta el Subflash que viene!! ¿te apuntas?

 

 

AS3 – encriptar una cadena con AES

Publicado por Iván Gajate el 16 de septiembre de 2013 en Sin categoría | 1 comentario »

Podemos encriptar una cadena de texto con una contraseña utilizando la librería AES. La implementación mas simple que he encontrado es este port de JavaScript. Super simple 😉 

var key:String = "1234567890";
var encrypted:String = AES.encrypt("Hola Mundo",key, AES.BIT_KEY_256);
var decrypted:String = AES.decrypt(encrypted,key, AES.BIT_KEY_256);
 
trace(encrypted); // Cada vez genera una diferente, por ejemplo "FgcKALKysrKy54vQ8zC0nY2p"
trace(decrypted); // Hola Mundo

Descargar ejemplo:

Visto en Lost in ActionScript

Ya vimos como hacer algo parecido con TEA

AS3 – A toda velocidad con Alchemy

Publicado por Iván Gajate el 16 de septiembre de 2013 en AS3, Flash | Los comentarios están cerrados.

Hay un proyecto de Adobe llamado Alchemy que sirve para portar librerías de C a ActionScript y poder utilizarlas en nuestros proyectos. El resultado es librerías muy fáciles de usar y que aportan una velocidad brutal a la hora de hacer procesos pesados de procesador.

Un ejemplo impresionante es el de codificar imágenes como jpg:

http://www.websector.de/blog/2009/06/21/speed-up-jpeg-encoding-using-alchemy/

Y aquí el ejemplo para descargar.

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/

Configurar MAMP para las extensiones .shtml

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

Cómo hacer que MAMP (o WAMP para Mac) reconozca la extensión .shtml y que entienda los includes del lado del servidor: 

http://jeffreybarke.net/2010/04/mamp-shtml-and-server-side-includes/

  1. Stop the MAMP servers.
  2. Open MAMP’s httpd.conf (located at/Applications/MAMP/conf/apache/httpd.conf) in a plain text editor.
  3. Find the line:

    DirectoryIndex index.html index.php

    and change it to:

    DirectoryIndex index.shtml index.html index.php

  4. Uncomment the following two lines:

    AddType text/html .shtml
    AddOutputFilter INCLUDES .shtml

  5. Find the lines:

    <Directory />
    Options Indexes FollowSymLinks
    AllowOverride All
    </Directory>

    and change to:

    <Directory />
    Options Indexes FollowSymLinks
    Options +Includes
    AllowOverride All
    </Directory>

  6. Restart the MAMP servers.