Micaela 14 de octubre de 2009 a las 09.05
   Imprimir artículo
elWebmaster.com

5 librerías Javascript que te facilitarán el diseño


javascript_125x125En esta nota estaremos buscando a las 5 bibliotecas JavaScript que realmente pueden facilitar el desarrollo de modernos y atractivos sitios web.

Las bibliotecas que estaremos viendo no son bibliotecas como jQuery o YUI, sino que son mucho más pequeñas y mucho más especializadas.

1. Arreglando PNG en IE6 con DD_BelatedPNG

* Creado por: Drew Diller

* Licencia: MIT

* Utilización: Arregla la transparencia alpha PNG en IE6

* Tamaño: 6.86kb (comprimido)

* Compatibilidad: IE6 solamente

* Demo

* Descarga

DD_belatedPNG fue creado con el propósito de permitir que la transparencia alpha pueda ser utilizada en IE6 sin recurrir al filtro de Micrsoft AlphaImageLoader.

Utilizando el filtro AlphaImageLoader sólo corrige la mitad del problema de PNG en IE6, ya que sólo se puede utilizar con imágenes de fondo. Para hacer uso de transparencia alpha-en elementos <img>, otra solución se utiliza, que suele ser la revisión HTC que se basa en un PNG transparente y un archivo de comportamiento de HTC. Además, como los usuarios de Firebug y YSlow serán conscientes, AlphaImageLoader de Microsoft es lento.

DD_belatedPNG usa la implementación de VML de Microsoft para reemplazar archivos PNG con elementos VML, que no soporta transparencia alpha. Se puede utilizar tanto con elementos plenos <img>  e imágenes de fondo CSS. Cuando las imágenes de fondo se sustituyen, características comunes, tales como fondo repetido y estados hover también se pueden utilizar por lo que esta librería resuelve todos los problemas normales de PNG en IE6.

Utilización

Usar DD_BelatedPNG es increíblemente fácil, sólo necesita utilizarse con IE6, por lo que el script principal puede ser añadido en la página utilizando un comentario condicional:

  1. <!--&#91;if IE 6]>
<script src="DD_belatedPNG.js"></script>
  2. <!&#91;endif]-->

La biblioteca cuenta con un único método, arreglar, que se utiliza para suministrar simples selectores CSS que son el objetivo de la biblioteca, cualquier elemento <img> que tiene un atributo src PNG, o cualquier otro elemento con un fondo PNG CSS con el nombre de la clase que corresponda serán arreglados. Esta parte del script puede ir en el comentario condicional, así sólo IE6 necesitará procesar estas reglas adicionales:

  1. <script type="text/javascript">
  2.   DD_belatedPNG.fix(".linkButton");
  3. </script>

El PNG fijo en IE6 aparecerá ahora como debe y puede ser posicionado de fondo y repetido, y también trabajar con: Estados hover, a diferencia de filtro de propiedad de Microsoft. La siguiente imagen muestra una foto de antes y después de una imagen de fondo de transparencia alpha:

13

2. Utiliza cualquier fuente con Cufon

* Creado por: Simo Kinnunen

* Licencia: MIT

* Utilización: Permite embeber fuentes no-estándar sin necesidad de flash

* Tamaño: 17.8kb (comprimido)

* Compatibilidad: Toda (todas las versiones comunes de todos los proveedores comunes, incluyendo IE6)

* Demo

* Descarga

La tipografía es un área de desarrollo web que ha visto el avance dolorosamente poco en comparación con otras áreas de la industria. Los desarrolladores web se han visto obligados a depender de un pequeño grupo de fuentes  ‘Web seguras’ que es probable que estén instaladas en la mayoría de las computadoras de sus visitantes. Soluciones de imagen y basadas en flash se han planteado, las cuales tienen desventajas de implementación.

Cufon ofrece a los desarrolladores una solución rápida, que puede ser visualizada en el navegador sin necesidad de plugins de terceras partes utilizando las características incorporadas en los navegadores.Las fuentes de Cufon pueden ser utilizadas como VML para la implementación del IE nativo, o el  elemento <canvas> para otros navegadores más capaces. Asombrosamente, también puede establecer diferentes estilos del texto sustituido, tales como su color y tamaño usando puramente CSS.

Utilización

Esta biblioteca se diferencia de las otras en que requiere un poco de preparación antes de usar;  un nuevo archivo de fuentes necesita generarse lo que se puede hacer fácilmente usando la página web cufon. Esto generará una fuente SVG que se debe guardar en un archivo JS. Este archivo debe entonces ser vinculado a cualquier otro recurso de <script> después del archivo núcleo de cufon:

  1. <script type="text/javascript" src="cufon.js"></script>
  2. <script type="text/javascript" src="Breip_500.font.js"></script>

Sólo se necesita decirle a Cufon qué elementos reemplazar:

  1. <script type="text/javascript">
  2.   Cufon.replace('h1.replacedFont');
  3. </script>

La API ofrece otras soluciones para usar múltiples fuentes en la misma página para mejorar el desempeño en IE. Deben recordar que sólo se pueden utilizar fuentes que tengan la licencia para ser embebeidas. La siguiente captura de pantalla muestra un titular reemplazado:

23

3. Utiliza Firebug en cualquier navegador

* Creado por: Mike Ratcliffe

* Licencia: BSD-style

* Utilización: Todo el poder de Firebug en navegadores que no sean Firefox

* Tamaño: 76.9kb (comprimido)

* Compatibilidad: Todos los navegadores que no sean Firefox

* Demo

* Descarga

Firebug es sin lugar a duda uno de los mayores logros en lo que respecta al desarrollo web disponibles en la actualidad.

Firebug Lite es una simple librería Javascript que recrea la mayoría de las propiedades claves de la interface Firebug, trayendo nuestro debuggeador preferido a cualquier plataforma que utilicemos. El arreglo de diseños y los problemas de navegadores cruzados se vuelven fáciles una vez más.

Una de las mejores cosas de Firebug Lite es que no se necesita descarga o instalar nada para comenzar a usarlo; cuando desees debuggear una página en la que estés trabajando con navegadores que no sean Firefox simplemente debes incluir un archivo script cuyo SRC apunte a la versión online:

  1. <script type="text/javascript" src="http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js"></script>

Y listo. Cuando cargues la página en cualquier otro navegador, Firebug Lite se presentará en la página. Para uso offline utiliza el script, como así también un archivo CSS, pueden ser descargados y deben ser utilizados como cualquier otro archivo CSS o JS. La siguiente captura de pantalla muestra Firebug Lite en Safari:

32

4. Presenta formas 3D interactivas con Raphael JS

* Creado por: Dmitry Baranovskiy

* Licencia: MIT

* Utilización: Dibujar formas SVG en la página

* Tamaño: 58.4kb (comprimido)

* Compatibilidad: Toda(todas las versiones comunes de todos los proveedores comunes, incluyendo el IE6)

* Demo

* Descarga

Es una librería algo pesada pero que realiza un gran rango de cosas y añade control SVG complete a una página web. Raphael permite dibujar suaves curvas a través de una página y crear formas personalizadas al pasar.

Puedes realizar esquinas redondeadas que son completamente de navegadores cruzados sin imágenes, puedes crear reflexiones desvanecidas para cualquier imagen, rotar imágenes dinámicamente y mucho más. Como todos los caminos se dibujan utilizando elementos SVG, puedes adjuntar eventos JavaScript a ellos para que la gente pueda interactuar con las imágenes al pasar el mouse sobre ellas o al hacer clic (o cualquier otro evento JS). Las posibilidades son interminables y la API provee un gran rango de diferentes métodos que hacen que trabajar con esta librería sea un placer.

Utilización

La librería debe estar linkeada:

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

Y listo, no hay otras dependencias. Ahora podemos comenzar a crear nuestras formas SVG:

  1. <script type="text/javascript">
  2.   var canvas = Raphael(50, 50, 620, 100);
  3.   var shape = canvas.rect(0, 0, 500, 100, 10);
  4.   shape.attr("fill", "#fff");
  5.   canvas.text(250, 50, "Using Raphael to create custom shapes\ndrawn on the fly is extremely easy").attr("font", "20px 'Arial'");
  6.  </script>

La página en la que se utilice debería lucir así:

4

5. Mejora tu página de forma progresiva en el futuro con Modernizr

5

* Creada por: Faruk AteÅŸ and Paul Irish.

* Licencia: MIT

* Utilización: Detecta soporte HTML5 y CSS3

* Tamaño: 7kb (comprimido)

* Compatibilidad: Toda

* Demo

* Descarga

Es un momento emocionante para el desarrollo web con CSS3 y HTML5 avanzando día a día, pero también es frustrante, porque tenemos todas estas nuevas tecnologías avanzadas que salen con muy poco soporte.

Modernizr es una pequeña biblioteca pequeña que simplemente comprueba si el entorno actual soporta una serie de características avanzadas, tales como los nuevos elementos  <audio> y <video>. Un objeto JavaScript es creado por la biblioteca que contiene booleanos que indican si se admite cada función. Así, si el navegador actual es compatible con el nuevo elemento <audio> , Modernizr.audio devolverá true. Es así de simple.

Esta librería también añade nombres de clase a los elementos <html> que podemos etiquetar con CSS para así ocultar ciertos elementos de la página, para que cuándo el elemento <audio> sea soportado, el elemento <html> recibirá el nombre de clase.audio. Cuando los navegadores no soporten su visualización de página, el elemento obtendrá la clase.no-audio.

Utilización

Veámoslo en acción para mostrar algunos lindos efectos CSS3; primero simplemente linkeamos a la pequeña librería utilizando el elemento <script>:

  1. <script type="text/javascript" src="modernizr-1.0.min.js"></script>

Luego, podemos añadir el siguiente CSS:

  1. .no-audio #audioContainer { display:none; }

Esto asegurará que los navegadores que no soporten el componente <audio>no lo vean. El cuerpo de la página luego lucirá algo así:

  1. <div id="audioContainer">
  2.       <audio id="audio" src="http://upload.wikimedia.org/wikipedia/en/7/77/Jamiroquai_-_Snooze_You_Lose.ogg" controls"true"></audio>
  3.  </div>
  4. <a id="linkToAudio" href="http://upload.wikimedia.org/wikipedia/en/7/77/Jamiroquai_-_Snooze_You_Lose.ogg">Link to the audio</a>

Una vez que se hace esto podemos detectar si el navegador soporta HTML5 audio y mostrar u ocultar el link multimedia:

  1. if (Modernizr.audio) {
  2.   var audioLink = document.getElementById("linkToAudio");
  3.   audioLink.style.display = "none";
  4. }

Esto es todo lo que necesitas, los navegadores capacitados verán el elemento <audio> pero no el link, mientras que los menos capacitados verán en link y no el <audio>:

Sin duda, 5 librerías verdaderamente geniales ¿No creen?

Fuente: Net TutsPlus


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (4)

  1. Silvia dice:

    El reemplazo de fuentes cufon no funciona con IE6 ni 7 ni con Firefox 3.0… veo un triste texto en Times New Roman

  2. chris dice:

    Cufon y RaphaelJS no me funcionan en IE7.

  3. Antuan dice:

    Hey, buen trabajo
    Increible el firebug en versión js , espero que sea fiable, lo voy a estar usando a conciencia.
    Lo de Raphaël no está bien, no hace 3D son 2D vectoriales, muy bueno también, llevo tiempo usandolo.

    un saludo.

  4. Andru dice:

    Estimada Silvia, al implementar cufon en general normalmente se aplica el jquery y veras que funciona en one

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder