Traemos para ustedes un listado con los mejores Frameworks JavaScripts enfocados en manipular el DOM actualmente. Es necesario entender que un framework es una abstracción de código común que provee funcionalidades genéricas que pueden ser utilizadas para desarrollar aplicaciones de manera rápida,fácil, modular y sencilla, ahorrando tiempo y esfuerzo.
Entre dichos frameworks, se encuentran jQuery, MooTools, Prototype, Dojo Toolkit, YUI, y más.
En esta nueva sección, procuraremos presentar snippets. Es un término del idioma inglés utilizado en programación para referirse a pequeñas partes reusables de código fuente, código binario o texto.
Hover entrando/saliendo
$("a").hover(
function () {
// código a ejecutarse cuando el apuntador pasa por encima
},
function () {
// código a ejecutarse cuando el apuntador sale del elemento
}
);
El método hover de jQuery es una solución rápida para manejar esos eventos. Puede determinar si el usuario esta moviendo el apuntador para pasar sobre el elemento seleccionado (mouseenter), o si el usuario está a punto de salir del mismo (mouseleve). Esto permite establecer dos funciones personalizadas, donde se pueden ejecutar dos conjuntos distintos de código.
Su sintaxis:
Mozilla ha lanzado Firefox Edición para desarrolladores 38, que incluye una versión de 64 bits de su navegador para Windows por primera vez, añadiendolo también a las plataformas Mac OS X y Linux ya soportadas. La versión de 64 bits de Firefox trae mejoras sustanciales con respecto a la versión de 32 bits, incluyendo la capacidad de ejecutar aplicaciones más grandes, la ejecución más rápida y una mayor seguridad. Eso significa la ejecución de juegos que devoran recursos y aplicaciones web más potentes, con acceso a nuevos registros de hardware y ejecutar JavaScript más rápido y más eficaz; aleatorización en el diseño del espacio de direcciones (ASLR), lo que hace más difícil para el contenido Web malicioso poder explotar el navegador. Como en otras plataformas, la edición es amigable con el desarrollador ofreciendole una serie de características útiles para la construcción de proyectos Web, incluyendo herramientas para desarrollar aplicaciones en todos los navegadores, un depurador de JavaScript, y los editores de Web Audio y CSS.
Firefox Developer Edition 38 está disponible para descarga gratuita en el sitio de Mozilla. Haciendo clic aqui descargar el mismo en español.
jQuery consiste en un único fichero JavaScript que contiene las funcionalidades comunes de DOM, eventos, efectos y AJAX. Según wikipedia:
jQuery es una biblioteca de JavaScript, creada inicialmente por John Resig, que permite simplificar la manera de interactuar con los documentos HTML, manipular el árbol DOM, manejar eventos, desarrollar animaciones y agregar interacción con la técnica AJAX a páginas web. Fue presentada el 14 de enero de 2006 en el BarCamp NYC. jQuery es la biblioteca de JavaScript más utilizada.
Específicamente jQuery nos facilita:
La búsqueda y manipulación de contenido en una página HTML;
Trabajar con el modelo de eventos de los exploradores modernos;
Y añadir efectos y transiciones sofisticadas que vemos en páginas modernas, como animaciones disparadas por eventos.
Si observamos el alcance que ha logrado jQuery, basandonos en las estadisticas de builtwith.com:
Las estadísticas para sitios web utilizando tecnologías JavaScript
Es decir, que casi el 19% de todas las páginas web que conseguimos en internet implementan jQuery. Y del ranking de las primeros diez mil (10.000) sitios web en importancia seis mil seiscientos cuarenta (6.640), un 66% implementan jQuery. Podemos observar su crecimiento en uso visitando la siguiente gráfica. En esta sección iremos profundizando, de a poco, lo más novedoso sobre jQuery. Visita la página oficial
Un ejemplo muy básico lo puedes observar a continuación:
¿Haz utilizado jQuery recientemente? Escribenos tu opinión sobre esta librería.
Plugin jQuery Easy Ticker, para barra de noticias (animando sus artículos), muchas veces utilizamos listas de elementos obtenidas de alguna base de datos, por ejemplo:
Listas de productos
Listas de noticias
Listas de usuarios
Listas de comentarios
En ocasiones paginamos estos elementos ya que no tienemos una forma automática de pasar de un elemento a otro, debido a esa necesidad hay un plugin que puede ayudarnos a mostrar dicho contenido de forma infinita, mostrando inclusive una animación con diferentes estilos, su nombre es jQuery Easy Ticker. Con este plugin podemos implementar efectos como animación hacia arriba o abajo, ademas que tenemos un control sobre los elementos que quieremos mostrar; como en el caso del ejemplo que implementamos en jsfiddle. Posee una documentación (en ingles), muy sencilla, además de ejemplos muy legibles, también seria bueno que antes de implementar el plugin tengas en cuenta los siguientes puntos con los cuales cuenta:
Dos direcciones disponibles (Arriba y abajo).
Puede ser dirigido.
API flexible para que se extiende a varias aplicaciones.
Soporta suavizar funciones.
Botón de pausa.
La velocidad de la transición se puede cambiar.
Los controles pueden ser añadidos para reproducir / pausar o mover la lista hacia arriba y hacia abajo.
Alertify es pequeña librería para la mostrar interesantes ventanas de diálogo y notificaciones. Es fácil de personalizar con CSS, posee una API sencilla, además no depende de librerías de terceros (pero se adapta muy bien a ellos). Este plugin está completamente en Inglés en su página oficial. Pero es muy fácil adaptar al español. Principales características de Alertify.js:
Código Javascript no invasivo y ligero.
Fácil de implementar.
Permite crear diálogos de alertas, confirmaciones y de entrada de datos.
Permite crear etiquetas de botones personalizadas.
Permite crear mensajes de log personalizados.
Alertify.js es una completa solución para crear elementos personalizados en la interfaz de cualquier desarrollo web sin sacrificar tiempo ni usabilidad.
Ejemplos de su uso:
// diálogo de alerta
alertify.alert("Mensaje");
// diálogo de confirmación
alertify.confirm("Mensaje", function (e) {
if (e) {
// Usuario ha hecho clic en "aceptar"
} else {
// Usuario ha hecho clic en "cancelar"
}
});
// diálogo con entrada de texto
alertify.prompt("Mensaje", function (e, str) {
// str contiene el texto introducido
if (e) {
// Usuario ha hecho clic en "aceptar"
} else {
// Usuario ha hecho clic en "cancelar"
}
}, "Valor predeterminado");
