Categories
drupal JavaScript Trucos

Usando Javascript en Drupal 7, algunos cambios

Haciendo algunos cambios en un theme de Drupal 6 a Drupal 7, he notado que los scripts antiguos no funcionan.

Buscando mucho, he encontrado que jQuerya hora está "namespaced", por lo tanto si tenías un código parecido a este:

JAVASCRIPT:

$(document).ready(function() {
        // Código
});
 

Ahora tiene que ser:

JAVASCRIPT:

(function($) {
    $(document).ready(function() {
        // Código
    });
})(jQuery);
 

Funciona y parece ser la solución final, sin embargo no se si hay otro tipo de solución. Si es asi, házmelo saber.

Actualización

Alejandro Barrio, me escribe y me sugiere que use los "behaviors" de Drupal para agregar los scripts:

Para Drupal 6

JAVASCRIPT:

Drupal.behaviors.exampleModule = function (context) {
    $('.example', context).click(function () {
            $(this).next('ul').toggle('show');
    });
}
 

Para Drupal 7

JAVASCRIPT:

(function ($) {
    Drupal.behaviors.exampleModule = {
        attach: function (context, settings) {
            $('.example', context).click(function () {
                $(this).next('ul').toggle('show');
                });
        }
    };
}(jQuery));
 

De la misma manera Eber Irigoyen sugiere no usar document.ready, sino:

JAVASCRIPT:

jQuery(function ($) {
        // codigo, puedes usar $ sin conflictos
});
 

Gracias por sus aportes 🙂

Enlace: Managing Javascript in Drupal 7

Categories
CSS3 Herramientas html5 JavaScript

Adobe mata a Flash y lanza Adobe Edge, su plataforma de animaciones HTML5, Javascript y CSS3

No he podido creer la noticia, después de haber invertido millones de dólares en el desarrollo de Flash, de haber escrito y reescrito ActionScript; Adobe se "echa" ante lo nuevo y reemplaza a Flash por HTML5, JavaScript y CSS3.

Lo hace mediante Edge, la herramienta por ahora gratuita que genera animaciones e interaccion del usuario.

Adobe Edge

La herramienta la puedes usar gratis por sólo 152 días desde su instalación.

Probando un poco he visto que para las animaciones usan jQuery y otras herramientas propias de Adobe. La interfaz recuerda a Lightroom pero el uso del timeline es igual a Flash. El código resultante es limpio y fácil de editar. Personalmente le veo mucho futuro.

HTML:

<script type="text/javascript" src="edge_includes/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="edge_includes/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="edge_includes/edge.0.1.1.min.js"></script>
    <script type="text/javascript" src="edge_includes/edge.symbol.0.1.1.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="Untitled-1_edge.js"></script>
    <link rel="stylesheet" href="Untitled-1_edge.css"/>
 

Javascript que se usa en un ejemplo

Las características que más me llaman la atención las pongo en negrita:

  • Crea nuevas composiciones con las herramientas de dibujo y texto.
  • Importa los tipos de imágenes SVG, PNG, JPG or GIF files.
  • Crea animaciones con un editor de línea de tiempo. Anima posición, tamaño, color, fondo, rotación y más.
  • Añade archivos HTML existentes con animación, mientras se preserva la integridad de los layouts.
  • Copia y pega transiciones, las invierte y se puede escoger entre más de 25 efectos existentes.

Otras características se añadirán poco a poco, si quieres estar informado puedes seguir la página en Facebook o la cuenta en Twitter.

Enlace: Adobe Edge Preview

Categories
Herramientas JavaScript

jQuery Boilerplate: empieza a escribir tus propios plugins de jQuery

Boilerplate constructor de plugins jQuery

Si estás interesado en construir plugins jQuery, Boilerplate te da una plantilla lista para empezar.

El código está comentado de tal manera que peudas empezar fácilmente. No sólo servirá para construir un plugin, sino también sirve para entender el comportamiento de otros ya existentes.

Enlace: jQuery BoilerPlate

Fuente: Kabytes

Categories
Cusco JavaScript

Machupicchu Puzzle

Mi amiga @nitanilla ha estado emocionada con el aniversario de Machupicchu, y le ha hecho un pequeño homenaje.

Nada más ni nada menos que un pequeño rompecabezas con la imagen de Machupicchu.

Machupicchu Puzzle

Está hecho con Scriptaculous y prototype. A jugar

Enlace: Machupicchu Puzzle

Categories
Google Herramientas html5 JavaScript Webkit

Convertir SWF a HTML5 con Swiffy

Mientras todos están muriendo por una invitación a Google+, te invito a poner atención a una herramienta interesante también de Google.

Swiffy permite convertir archivos SWF a HTML5 online. permitiendo usar estos en archivos en dispositivos que no soportan Flash como iPods o iPads.

Por ahora Swiffy no soporta ActionScript 3 ni escenas. El resultado final es un archivo html, que contiene código JSON y que al final es formateado y puede ser visto en cualquier navegador que soporte Webkit.

Mientras esperas tu invitación, te puedes distraer convirtiendo algunos archivos o simplemente revisando los ejemplos 🙂