En este resumen, veremos 5 bibliotecas de JavaScript que realmente pueden facilitar el desarrollo de sitios web modernos y atractivos. Las bibliotecas que veremos no son bibliotecas en el mismo sentido que algo como jQuery o YUI; Son mucho más pequeños y mucho más especializados. Pero son los mejores en lo que hacen y proporcionan una funcionalidad única..
1. Arreglando PNGs en IE6 con DD_BelatedPNG
Creado por: Drew Diller
Licencia: MIT
Uso: Corrige PNGs alfa-transparentes en IE6
Tamaño: 6.86kb (comprimido)
Compatibilidad: sólo IE6
Ver demostración
Descargar
DD_belatedPNG se creó con el único propósito de permitir el uso de PNG transparentes alfa en IE6 sin tener que recurrir a la propiedad de Microsoft AlphaImageLoader filtrar. Como cualquier persona que haya intentado usar PNG en IE6 antes lo sabe, aunque se puede hacer que funcionen en un grado muy básico, cosas como las imágenes de fondo repetidas están fuera de discusión..
El uso del filtro AlphaImageLoader solo soluciona la mitad del problema PNG en IE6, ya que solo se puede usar con imágenes de fondo. Para hacer uso de PNGs alfa-transparentes en Elementos, se usa otra solución, que suele ser la solución de HTC que se basa en un PNG transparente y un archivo de comportamiento de HTC. Además, como los usuarios de Firebug y YSlow estarán al tanto, el AlphaImageLoader de Microsoft es lento; Una de las pautas de YSlow es evitar el filtro a toda costa..
DD_belatedPNG utiliza la implementación de VML de Microsoft para reemplazar los PNG con elementos VML, que admiten la transparencia alfa. Se puede utilizar tanto en plena Elementos e imágenes de fondo CSS. Cuando se reemplazan las imágenes de fondo, características comunes como repetición de fondo y :flotar Los estados también se pueden usar, por lo que esta biblioteca resuelve todos los problemas comunes de PNG en IE6.
Uso
Usar DD_BelatedPNG es excepcionalmente fácil; solo se debe utilizar con IE6, por lo que la secuencia de comandos principal se puede incluir en la página mediante un comentario condicional:
La biblioteca tiene un solo método, corrección, que se utiliza para suministrar selectores de CSS simples que están dirigidos por la biblioteca, cualquier el elemento que tiene un atributo src de PNG o cualquier elemento que use un fondo de CSS de PNG con el nombre de la clase coincidente se corregirá. Esta parte de la secuencia de comandos también puede incluirse en el comentario condicional, de modo que solo IE6 deberá procesar estas reglas adicionales:
Los PNG fijos en IE6 ahora aparecerán como deberían y pueden colocarse en segundo plano y repetirse, y también funcionan con: estados flotantes, a diferencia del filtro propietario de Microsoft. La siguiente imagen muestra una imagen de antes y después de una imagen de fondo alfa-transparente:
2. Usa cualquier fuente con Cufon
Creado por: Simo Kinnunen
Licencia: MIT
Uso: Permite la incrustación de fuentes no estándar sin necesidad de flash
Tamaño: 17.8kb (comprimido)
Compatibilidad: todas (todas las versiones comunes de todos los proveedores comunes, incluido IE6)
Ver demostración
Descargar
La tipografía es un área del desarrollo web que ha visto un progreso muy pequeño en comparación con otras áreas de la industria. Los desarrolladores web se han visto obligados a confiar en un pequeño conjunto de fuentes "seguras para la web" que probablemente se instalarán en la mayoría de las computadoras de sus visitantes. Han surgido soluciones basadas en imágenes y flash, las cuales tienen desventajas de uso.
Cufon ofrece a los desarrolladores una solución robusta y rápida, que puede mostrarse en el navegador sin necesidad de complementos de terceros que utilicen funciones integradas en los navegadores. Las fuentes Cufon se pueden usar como VML para la implementación nativa de IE, o
Uso
Esta biblioteca difiere de las otras en que se requiere un poco de preparación antes de su uso; es necesario generar un nuevo archivo de fuente que se puede hacer fácilmente usando el sitio web de cufon. Generará una fuente SVG y la guardará en un archivo JS. Este archivo necesita ser vinculado a cualquier otro
Entonces es solo un caso de decirle a Cufon qué elementos reemplazar:
La API ofrece otras soluciones para usar varias fuentes en la misma página y para mejorar el rendimiento en IE. Aunque he llamado a esta sección, "Uso de cualquier fuente" ... debe recordar que solo se deben usar las fuentes con licencia para incrustar. La siguiente captura de pantalla muestra un encabezado reemplazado:
3. Usa Firebug en cualquier navegador
Creado por: Mike Ratcliffe
Licencia: estilo BSD
Uso: Todo el poder de Firebug en navegadores que no sean Firefox
Tamaño: 76.9kb (comprimido)
Compatibilidad: todos los navegadores que no sean Firefox
Ver demostración
Descargar
Firebug es sin duda uno de los mejores activos para el desarrollo web disponible; Ciertamente, lo uso a diario cuando desarrollo para la web, y sé que es el complemento elegido por muchos otros también. Un efecto secundario desafortunado de la excelencia de Firebug es que otras herramientas similares para otros navegadores palidecen en comparación y parecen inferiores. Problemas de diseño de resolución de problemas y errores de CSS en IE, por ejemplo, pueden ser una lección de futilidad..
Aquí es donde entra Firebug Lite; esta es una biblioteca de JavaScript simple que recrea la mayoría de las características clave de la interfaz de Firebug, lo que lleva a nuestro depurador de elección a todas las demás plataformas. Solucionar problemas de diseño y solución de problemas entre navegadores es fácil una vez más.
Una de las mejores cosas de Firebug Lite es que no necesita descargarlo ni instalar nada para comenzar a usarlo; cuando quiera depurar una página en la que está trabajando en navegadores que no son Firefox, solo puede incluir un archivo de script cuyo SRC apunte a la versión en línea:
Eso es todo, cuando ejecute la página en cualquier otro navegador, Firebug Lite estará presente en la página. Para el uso fuera de línea, el archivo de script, así como un archivo CSS, se pueden descargar y se deben usar como cualquier otro archivo JS o CSS. La siguiente captura de pantalla muestra Firebug Lite en Safari:
4. Renderizar formas interactivas en 3D con Raphael JS
Creado por: Dmitry Baranovskiy
Licencia: MIT
Uso: dibujar formas SVG en la página
Tamaño: 58.4kb (comprimido)
Compatibilidad: todas (todas las versiones comunes de todos los proveedores comunes, incluido IE6)
Ver demostración
Descargar
Ok, entonces esta biblioteca no es tan pequeña, pero hay una razón para eso; La biblioteca hace una gran variedad de cosas y agrega control SVG completo a una página web. Francamente, su poder es impresionante. Imagine poder dibujar curvas suaves en una página web y crear formas personalizadas sobre la marcha: Raphael hace eso.
Puede hacer esquinas redondeadas que son completamente de navegador cruzado sin imágenes (además de las dibujadas realmente por la biblioteca), puede crear reflejos descoloridos para cualquier imagen, rotar las imágenes dinámicamente y mucho más. Como todas las rutas se dibujan usando elementos SVG, puede adjuntar eventos de JavaScript para que las personas puedan interactuar con las imágenes con el mouseover o hacer clic (o cualquier otro evento JS). Las posibilidades son infinitas y la API proporciona una amplia gama de métodos diferentes que hacen que trabajar con la biblioteca sea un placer..
Uso
La biblioteca, por supuesto, debe estar vinculada a:
This is it, there are no other dependencies. Now we can begin creating our SVG shape:
La biblioteca está diseñada para ser fácil de usar y en este ejemplo solo hemos usado una pequeña fracción de sus capacidades. La página en la que se usa debe aparecer así:
5. Mejore progresivamente su sitio hacia el futuro con Modernizr
Creado por: Faruk Ateş y Paul Irish.
Licencia: MIT
Uso: Detectar HTML5 y CSS3
Tamaño: 7kb (comprimido)
Compatibilidad: Todas
Ver demostración
Descargar
Es un momento emocionante para el desarrollo web con CSS3 y HTML5 avanzando día a día, pero también es un momento frustrante porque tenemos todas estas nuevas tecnologías avanzadas que salen con muy poco soporte. Queremos comenzar a usar todas las nuevas y geniales funciones de HTML5 y CSS3, pero la mayoría de los nuevos elementos de HTML5, por ejemplo, solo son compatibles con un solo navegador..
Modernizr es una pequeña biblioteca que simplemente prueba si el entorno actual es compatible con una serie de características avanzadas, como la nueva
La biblioteca también agrega nombres de clase a la elemento que podemos orientar con CSS para ocultar ciertos elementos a la página, por lo que cuando el elemento es compatible, El elemento recibirá el nombre de la clase .audio. Cuando los navegadores que no lo admiten vean la página, el elemento obtendrá la clase .no-audio.
Esto es increíble porque significa que podemos agregar de forma segura estas nuevas características a nuestras páginas para los navegadores que las admiten, sin causar un caos en los navegadores que no lo hacen. En la naturaleza de la mejora progresiva, podemos crear un núcleo de contenido accesible y ampliamente compatible, y luego agregar progresivamente más y más funciones para los navegadores que las admiten.
Uso
Vamos a verlo en acción para mostrar algunos efectos CSS3 agradables; En primer lugar, simplemente nos vinculamos a la pequeña biblioteca utilizando el estándar
Luego podemos agregar el siguiente CSS:
.no-audio #audioContainer pantalla: ninguna;
Esto asegurará que los navegadores que no soportan la El elemento no lo ve. El elemento proporciona un respaldo incorporado para los navegadores que no lo admiten, pero de esta manera es mejor. El cuerpo de la página podría verse así:
Enlace al audio
Una vez hecho esto, podemos detectar si el navegador es compatible con el audio HTML5 y mostrar u ocultar el enlace a los medios (podríamos hacerlo fácilmente utilizando solo el CSS, pero de esta manera podemos ver el objeto Modernizr en acción):
if (Modernizr.audio) var audioLink = document.getElementById ("linkToAudio"); audioLink.style.display = "none";
Esto es todo lo que necesitamos; navegadores capaces verán el elemento pero no el enlace, mientras que los navegadores menos capaces verán el enlace y no el enlace :
Conclusión
Cada una de estas bibliotecas se ocupa de un problema muy específico; En general, son mucho más pequeñas que las bibliotecas más conocidas y de propósito general, pero igual de útiles para su propósito especializado. Cada uno de ellos puede ayudarnos de una u otra manera al desarrollar sitios web, ya sea para facilitar el desarrollo en IE6, usar fuentes no estándar sin técnicas de reemplazo engorrosas, para detectar el soporte para las últimas tecnologías CSS3 y HTML5 o generar imágenes complejas e interactivas..