Contenido

Gordon, el reproductor flash en Javascript

2 Feb

+ 6

Mucho se está hablando de la muerte de Flash con la llegada de HTML5, principalmente por que sitios como YouTube o Vimeo están implementando ya versiones del tag <video /> de HTML5 en ciertas secciones y para navegadores que lo soporten. Aunque Adobe parece no verlo igual.

Por otro lado, Tobias Scheneider ha desarrollado “Gordon“, una implementación en Javascript de un reproductor de Flash usando SVG para ello.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<script type="text/javascript" src="../gordon.js"></script>
		<script type="text/javascript">
 			window.onload = function(){
 				// Opciones
 				var opt = { id: 'stage', // ID del contenedor
 					width: 500,
 					height: 400};

 				// Definimos la nueva película
 				new Gordon.Movie('blue.swf', opt);
 			}
		</script>
	</head>
 	<body>
 		<div id="stage"></div>
 	</body>
</html>

El resultado es realmente sorprendente, y podemos disfrutar de algunos ejemplos directamente aquí (aún está un poco verde y solo está disponible para Firefox y WebKit). Además, tenemos disponible el código en GitHub.

Colección de editores enriquecidos del futuro

2 Feb

+ 2

SixRevisions publica una interesante recopilación de editores de texto enriquecidos que nos permiten reemplazar los tristes <textarea /> por completos editores que facilitan la visualización del resultado al usuario. Muy a tener en cuenta.

Código Konami en Javascript

1 Feb

+ 7

El Código Konami (Konami Code) es un truco que la gente de Konami integraba en muchos de sus juegos y que generalmente ofrecía acceso a una sección secreta.

↑ ↑ ↓ ↓ ← → ← → B A

Muchas son las aplicaciones web que integran este código, implementar este código en cualquier página web mediante Javascript es algo tan sencillo como esto:

<head>
 <script type="text/javascript">
   var $ = {
      enabled: false,
      tmp: Array(),
      _konamiCode: Array(65,66,39,37,39,37,40,40,38,38),
      init: function() {
        this.tmp = Array(65,66,39,37,39,37,40,40,38,38);
      },
      konamiCode: function(e) {
        if(!this.enabled) {
          var t = this.tmp.pop();
          if((e.keyCode-t) == 0) {
            if(this.tmp.length == 0) {
              this.enabled = true;
            }
          }
          else {
            this.init();
          }
        }
        else {
          this.action();
        }
      },
      // Cambiamos por nuestra funcionalidad.
      action: function() {
        alert("Konami Code Activated");
      }
    }
 </script>
</head>
<body onload="$.init()" onkeydown="$.konamiCode(event)">
</body>

Simplemente tendremos que añadir este código modificando el valor de action por el de la funcionalidad que deseemos ejecutar al completar el Konami Code.

Sigue la traza de tus script con printStackTrace()

1 Feb

+ 2

Hace unos meses Eric Wendelin publicó una implementación de printStackTrace(), un script que nos permite seguir una traza de ejecución de nuestros scripts ideal para detectar errores y detectar más fácilmente por donde ha pasado la ejecución de nuestro script.

Hace unos días, Eric actualizó el código integrando a Google Chrome entre los navegadores soportados por la función:

function foo() {
    var blah;
    bar("blah");
}

function bar(blah) {
    var stuff;
    thing();
}

function thing() {
    if (true) {
        var st = printStackTrace();
        alert(st.join("\n\n"));
    }
}

foo();

El resultado nos muestra por donde ha pasado la ejecución:

printStackTrace()@http://eriwen.com/js/common.4.js:53
thing()@http://eriwen.com/js/common.4.js:249
bar("blah")@http://eriwen.com/js/common.4.js:244
foo()@http://eriwen.com/js/common.4.js:239
@javascript:foo();:1

Si nos interesa, podemos ver el código del proyecto directamente desde GitHub.

Interprete de LOGO desarrollado en Javascript

27 Ene

+ 1

Los que nos iniciamos pronto en la informática recordamos LOGO. Aquel lenguaje de programación que nos enseñaron cuando estudiábamos y que mediante comandos muy claros podíamos mover por la pantalla un puntero (que llamabamos Tortuga) haciendo dibujos en la pantalla. En clase, lo usábamos para mover un coche teledirigido adaptado para recibir órdenes desde una interfaz con LOGO.

logo_javascript
(Ver Imagen)

Gracias a <canvas />, ha sido posible generar un interprete desarrollado en Javascript que nos permite disfrutar de este interesante lenguaje :D

Windows 3.11 en tu navegador

25 Ene

+ 3

Ni Gazelle (SO online de Microsoft) ni Google Chrome OS, lo mejor es Windows 3.11. Impresionante versión “Browser Edition” de Windows 3.11Via

Chuleta de Google Analytics, que no se te escape nada

25 Ene

+ 2

Si has trabajado alguna vez con Google Analytics, sabrás que no solo es pequeño script que colocas en el inferior de tu página y esperas a que Google añada las estadísticas y confeccione los gráficos. Google Analytics, permite una gran cantidad de configuraciones para ayudarnos a estudiar a nuestros usuarios y enfocar más nuestro diseño/contenido a lo que ellos buscan.

google_analytics_cheatsheet
(Ver Imagen)

Siempre es bueno tener una chuleta a mano con todas las opciones para que trabajar con él sea más sencillo y rápido. Por eso, esta cheatsheet seguro que te sacará de algún apuro.

Deshabilitar el editor HTML de nuestro Wordpress

19 Ene

+ 7

Aunque sin él yo no podría escribir mis artículos, es posible deshabilitar el editor HTML de nuestro Wordpress de una forma sencilla con alguna de estas opciones:

1) CSS: La opción con más estilo (¿lo pillais? :P )

Sin duda se trata de la solución más rápida y sencilla ya que simplemente tendremos que añadir un estilo CSS al panel de administrador.

// Añadir el CSS directamente
function removeHTMLEditorCSS(){
 echo '<style type="text/css">#editor-toolbar #edButtonHTML, #quicktags {display: none;}</style>';
}

add_action('admin_head', 'removeHTMLEditorCSS');

// Añadir un fichero CSS externo
fichero: removeHTMLEditor.css
#editor-toolbar #edButtonHTML, #quicktags {display: none;}

wp_register_style('removeHTMLEditorCSS', '/ruta/css/removeHTMLEditor.css');
wp_enqueue_style('removeHTMLEditorCSS');

2) Javascript: La más rápida

Desde Javascript podemos borrar directamente el botón y no permitir usar esta opción:

function removeHTMLEditorJS(){
 echo 'jQuery(document).ready(function($) {
         $("#edButtonHTML").remove();
       });';
}

add_action('admin_footer', 'removeHTMLEditorJS');

3) PHP: La más limpia

En las dos anteriores, aunque son efectivas, dejamos la opción de recuperar la opción directamente desde el mismo navegador, desde PHP podemos eliminar el botón dejando la opción perfectamente deshabilitada.

function my_default_editor() {
 $r = 'tinymce'; // html or tinymce
 return $r;
}
add_filter( 'wp_default_editor', 'my_default_editor' );

// Versión reducida
add_filter( 'wp_default_editor', create_function('', 'return "tinymce";') );

Conclusión

Siempre que puedas estas cosas, deberían ir en un fichero de configuración alojado en el servidor y todas las opciones son igual de válidas.

ie-css3.js: Pseudo selectores CSS3 en Internet Explorer

18 Ene

+ 2

ie-css3.js permite que Internet Explorer identifique los pseudo selectores CSS3 y aplique los estilos asociados a ellos en nuestras páginas. Solo tendremos que incluir un fichero Javascript para poder empezar a disfrutrar de este script.

Requerimientos

El script necesita el framework DOMAssistant para funcionar, aunque no creo que adaptarlo para cualquier otro framework sea áltamente complicado. He intentado migrarlo a jQuery y MooTools y me he encontrado con la limitación de pseudo-selectores disponibles en los frameworks. Por ejemplo :nth-of-type() no está disponible en ninguno de los dos anteriores.

Instalación

Simplemente tendremos que añadir al <head /> de nuestra página la llamada a los dos ficheros javascript que necesitamos:

<head>
	<script type="text/javascript" src="DOMAssistantCompressed-2.7.4.js"></script>
	<script type="text/javascript" src="ie-css3.js"></script>
</head>

Selectores soportados

No están todos, pero con estos ya podemos ir haciendo más cómoda la tarea de maquetar una página para Internet Explorer. :nth-child,:nth-last-child, :nth-of-type, :nth-last-of-type, :first-child, :last-child, : only-child, :first-of-type, :last-of-type, : only-of-type, :empty

Consideraciones

Al tratarse de una versión bastante temprana tenemos que tener en cuenta una serie de consideraciones o limitaciones con las que tendremos que lidiar:

  • Los ficheros CSS deben ser llamados mediante el uso del tag <link /> aunque dentro de ellos podrás usar @import sin problemas. No será posible usar el CSS a nivel de página.
  • El fichero CSS deberá estar alojado en el dominio de la página.
  • El protocolo file:// para llamar a las CSS no funcionará por temas de seguridad.
  • El selector :not() no está soportado
  • La emulación no es dinámica, una vez aplicada los estilos los cambios en el DOM no se verán reflejados.
  • Es compatible con las versiones 5,6,7,8 de Internet Explorer.

No es la panacea, pero seguro que a más de uno le puede sacar de un aprieto :D

Ext Core disponible desde Google Ajax Libraries

18 Ene

+ 3

Hace ya un tiempo que Google ofrecío su infrastructura para alojar los frameworks Javascript más conocidos y hasta el momento, jQuery, jQuery UI, MooTools, Prototype, Script.aculo.us, Dojo,… tenían este privilegio permitiendo que estemos actualizados sin tener que cambiar nada y sin tener que preocuparnos de alojar el fichero JS en nuestro servidor.

Ahora Ext Core, tambien está disponible mediante este método, permitiéndonos usarlo de dos formas diferentes:

HTML

El formato HTML es el que nos permite usarlo mediante una llamada usando el tag <script /> a una URL que Google nos ofrece

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/ext-core/3.0.0/ext-core.js"></script>

Javascript

Mediante Javascript, nos permite controlar cuando esté cargado y ejecutar código Ext Core cuando esté listo para usarlo.

<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
 // Cargamos el core
 google.load("ext-core", "3.0.0");

 // Cuando esté cargado
 google.setOnLoadCallback(function() {
 ....
 });
</script>

Ambas técnicas funcionan igual de bien, aunque dependemos de la disponibilidad de Google.

Actualización (18:29)

Corrigo el nombre Ext.js por el de Ext Core, ya que son productos diferentes con diferentes licencias. Steffen nos lo explica más detalladamente en su comentario.Gracias Steffen.