El Comercio Digital

Webmaster Libre

Subtitulo del blog

Archivo de la categoría "Javascript"

Mootols: Una libreria ultra compacta

Supongo que todos conocíamos moo.fx, moo.ajax o moo.dom y otros pequeños scripts creados por Mad4Milk.

Mootools Logo

Desde ayer todos estos scripts y algunos más se encuentran englobados en la nueva librería Mootools.
Se trata de una librería modular, la página de descargas nos permite escoger los componentes que queremos descargar y nos genera un solo archivo.

Está probada con Safari, MSIE 6 y 7, Firefox, Opera y Camino. Además, los usuarios de Firefox se beneficiarán de la optimización para ciertas funcionalidades sin que tú tengas que modificar tu código.

Como todos los scripts de Mad4Milk está bajo una licencia MIT

Mootools: http://mootools.net/

CSS Ya y Javascript Ya

Hace tiempo conocía PHP Ya, una excelente forma de aprender PHP. Hoy, gracias a Bitacora de Webmaster (da gusto verlos de vuelta) descubro que la familia ha crecido con la incorporación de Javascript Ya y CSS Ya.

Javascript Ya y CSS Ya están también destinadas al aprendizaje desde cero de los lenguajes, con tutoriales y ejercicios. Ideal para iniciarse en el desarrollo web ¿no creéis?

PHP Ya:
http://www.phpya.com.ar
Javascript Ya: http://www.javascriptya.com.ar/
CSS Ya: http://www.cssya.com.ar/

Prototype Carousel Class

Ejemplo de uso de Prototype Carousel

A través de Ajaxian me entero de que Sebastien Gruhier ha desarrollado una alternativa al pesado (200kb) YUI Carousel de Bill Scott

Prototype Carousel es un script muy ligero (6kb) que podrás utilizar tanto en Ruby como HTML y con contenido estático o generado con AJAX. Esta primera versión 0.1 tiene pocos parámetros pero, el autor, promete más opciones para la próxima.
Está bajo una licencia tipo MIT que te permite utilizarlo para lo que prefieras siempre que mantengas la noticia del copyright.

Prototype Carousel Class:

http://prototype-carousel.xilinus.com/

Asegurar aplicaciones hechas con AJAX

AJAX nos permite crear increíbles aplicaciones web cuando lo conjuntamos con una base de datos, no obstante, es importante asegurarnos de que no dejamos la base de datos expuesta a cualquier petición maliciosa.

Kris Hadlock nos explica un método relativamente simple para incluir una verificación por medio de contraseña en las interacciones con la base de datos.

How to secure AJAX Requests

Scriptio: Presentaciones online con animaciones y sonido

Scriptio Logo

No es la primera vez que hablamos sobre un script Javascript que nos permite crear presentaciones online del estilo de las que genera Power Point (S5 o HTML Slidy) pero Scriptio va un paso más allá.

Scriptio es un framework Javascript que nos permite crear presentaciones animadas, acopañadas de audio. Al más claro estilo de Flash, cuando Flash se utilizaba para eso…

Ejemplo de presentacion con Scriptio

  • Lenguaje de Scripting intuitivo: simple y sencillo de comprender, además puede expandirse al tratarse de Javascript
  • Rico juego de objetos: Dispondrás de herramientas para texto, imágenes, rectángulos, líneas y círculos. Además los campos de entrada, como botones o checkboxes, se utilizan para crear presentaciones educativas claramente interactivas
  • Multiples opciones para el audio
  • Herramientas para autores

Scriptio: http://www.scriptio.us/index.php
Ejemplos: http://www.scriptio.us/examples.php

DOMTab: Navegación por pestañas con CSS y DOMscripting

DOMTab

DOMTab nos permite crear estupendas interfaces divididas por pestañas por medio de Javascript no intrusivo.

Aplicar DOMTab a nuestras páginas es francamente sencillo. Primero llama al script desde la cabecera de tu documento

  1. <script type="text/javascript" src="domtab.js"></script>

El código html de nuestra página debe ser algo así,

  1. <div class="domtab">
  2.   <ul class="domtabs">
  3.     <li><a href="#t1">Test 1</a></li>
  4.     <li><a href="#t2">Test 2</a></li>
  5. [... and so on ...]
  6.   </ul>
  7.   <div>
  8.     <h2><a name="t1" id="t1">Proof 1</a></h2>
  9.     <p>Test to prove that more than one menu is possible</p>
  10.     <p><a href="#top">back to menu</a></p>
  11.   </div>
  12.   <div>
  13.     <h2><a name="t2" id="t2">Proof 2</a></h2>
  14.     <p>Test to prove that more than one menu is possible</p>
  15.     <p><a href="#top">back to menu</a></p>
  16.   </div>
  17. [... and so on ...]
  18. </div>

Tenemos, además, la opción de presentar un enlace donde se mostrarán todos los contenidos en una sola pantalla, por ejemplo para imprimir.

Puedes editar todas las opciones del script ya que todos lo que se espera del HTML son parámentros.

  1. tabClass:'domtab', // class para activar las pestañas
  2. listClass:'domtabs', // class de los menús
  3. activeClass:'active', // class del enlace actual
  4. contentElements:'div', // elements to loop through
  5. backToLinks:/#top/, // patrón para buscar enlaces "volver arriba"
  6. printID:'domtabprintview', // id del enlace para imprimir todo
  7. showAllLinkText:'show all content', // texto del enlace para imprimir todo

A la hora de dar estilo, tenemos a nuestra disposición tanto las clases e id utilizadas por el script como el resto de recursos a nuestro alcance por medio de CSS:

DOMTab: http://onlinetools.org/tools/domtabdata/

Javascript Unobstrusivo para Rails

Rails es un excelente framework, especialmente para construir aplicaciones AJAX, pero el Javascript que resulta de utilizar los helpers de serie de Rails es la manzana de la discordia para muchos. Unobtrusive Javascript for Rails pretende ayudar a solucionar eso.

Con UJS for Rails podrás:

  • Definir tus comportamientos usando selectores tipo CSS y Ruby
  • Usar los Helpers para Javascript y AJAX de forma no obstrusiva
  • Aplicar efectos de la librería script.aculo.us no obstrusivamente y con facilidad


UJS Rails Plugin:
http://www.ujs4rails.com/

JavaScript Lint: Limpia de errores tus scripts

Con Javascript Lint podrás comprobar todo tu código Javascript en busca de errores comunes sin necesidad de abrir la página en un navegador.
El programa está basado en el motor de Javascript de Firefox, con lo que, además de buscar errores puede también mostrar advertencias sobre prácticas no recomendables.

Javascript Lint está disponible para Windows y Linux. Además, es muy versátil y te permite utilizarlo de diversas formas:


Javascript Lint:
http://www.javascriptlint.com
Demo Online: http://www.javascriptlint.com/online_lint.php

Via del.icio.us/popular

Despídete de los PopUps con DOMinclude

Todos sabemos que los popups son un asco, la mayoría de los usuarios los ignora para simplemente cerrarlos y el resto los bloquea automáticamente con su navegador. A pesar de todo, en muchas ocasiones nos interesaría utilizar un popup para mostrar alguna información adicional sin que el visitante tuviese que abandonar la página o abrir otra ventana de su navegador.

Captura del efecto de DOMincludeDOMinclude es un script que nos permite abrir archivos adicionales, como por ejemplo fotografías o imágenes, en una nueva capa dentro del documento. Cuando no se encuentra disponible el Javascript se abre un iFrame.

DOMinclude es muy sencillo de implementar en tus páginas, incluye lo siguiente en la cabecera (head) de tu documento:

  1. <script type="text/javascript" 
  2.   src="DOMinclude_config.js"></script>
  3. <script type="text/javascript" 
  4.   src="DOMinclude.js"</script>

Agrega la clase DOMpop a cada enlace en el que quieras utilizarlo

  1. <a href="saywhat.jpg" class="DOMpop">
  2. photo of a confused puppy</a>

Y edita el archivo DOMinclude_config.js para adaptarlo a tus necesidades:

  1. DOMinccfg={
  2. // Clases CSS
  3. // que activan DOMinclude
  4.   triggerClass:'DOMpop',
  5. // class del popup
  6.   popupClass:'popup',
  7. // class del enlace cuando el popup
  8. // está abierto
  9.   openPopupLinkClass:'popuplink',
  10. //texto para añadir al enlace cuando el
  11. // popup está abierto
  12.   displayPrefix:'Ocultar ',
  13. // filtro para definir que archivos no deberían
  14. // abrirse en un iframe
  15.   imagetypes:'jpg|JPG|JPEG|jpeg|gif|GIF|png|PNG',
  16. // dimensiones del popup
  17.   frameSize:[320,180]
  18. }

Descarga DOMinclude

Enlace, ejemplos y explicación original en inglés:
http://onlinetools.org/tools/dominclude/

2 de Javascript

Encontré estos dos enlaces sobre Javascript en CodigoPHP.com y como son bastante interesantes aquí os los dejo:

Webmaster Libre es un blog de Alma Fernández y está publicado bajo licencia Creative Commons desde el año 2006

Agradecimientos especiales a WordPress y FamFamFam

Política de Privacidad | Condiciones de uso | Sitemap (XML)