Browser Shooter es un juego desarrollado con Javascript que nos recuerda al famoso Puzzle Bobble pero con los logos de navegadores
web.
El juego usa jQuery 1.3.2 y con una gran cantidad de archivos JS se controla la física de los rebotes, el movimiento del lanzador y demás efectos del juego.
Puedes probarlo aquí
jQuery Visualize, es un plugin de jQuery que nos permite generar gráficas dinámicas usando <canvas /> para alogar los gráficos.
Lo curioso de este plugin es que carga los datos desde tablas <html>y el resultado no puede ser más accesible, ya que en caso de que el usuario no tenga el Javascript activo, este podrá ver la tabla con los datos, posibilitando así su comprensión.
Y lo “malo”… tu navegador debe ser HTML5 compatible, de lo contrario no podrás ver funcionar este plugin.
Fuente: anieto2k
anieto2k ha publicado un buen listado de librerías Javascript para generar nuestras gráficas más elegantes para nuestros proyectos:
Fuente: anieto2k
Google ha publicado una nueva API open source llamada O3D. Sirve para poder crear aplicaciones interactivas en 3D que se visalizan en nuestros navegadores. Usando Javascript podemos crear, mostrar, manipular un mundo virtual en 3D, seguramente quede poco para ver el próximo shooter de éxito funcinando en Firefox ^^!
Al igual que el Flash, es necesario un plugin para cada sistema operativo para hacer funcionar las aplicaciones O3D.
Hay versión para Windows y Mac, y los usuarios de Linux deben seguir estas instrucciones para compilarlo.
Fuente: anieto2k
Seguramente tanto Google Analytics cómo Google Maps sean usadas por muchas de las aplicaciones Web de hoy en día.
Precisamente estas dos aplicaciones pueden provocar, en muchas situaciones, retrasos en los tiempos de carga o lo que es peor, que no se cargue el contenido de forma correcta.
Analytics es el gestor de estadísticas gratuito de Google, es usado por muchísimos sitios Web y quizás debido a eso, se suele producir un retraso en la carga de la página, para evitar este retraso simplemente hay que dejarle la carga al evento onload del navegador. Con jQuery esto se traduce así:
$(document).ready(function(){ $.getScript('http://www.google-analytics.com/ga.js',function(){ if (typeof(_gat) == 'object'){ var pageTracker = _gat._getTracker('UA-XXXXXXX-Y'); pageTracker._initData(); pageTracker._trackPageview(); } }); });
Pero si no estamos usando jQuery podemos usar la función como addLoadEvent() que nos permite añadir funcionalidades al evento onload con compatibilidad en todos los navegadores, sería algo así:
addLoadEvent(function(){ // Insertamos el Código que Google Analytics var analyticsCode = 'UA-XXXXXXX-Y';
var s = document.createElement("script"); s.type = "text/javascript"; s.src = "http://www.google-analytics.com/ga.js"; s.onload = s.onreadystatechange = function() { if (typeof _gat == 'object'){ var pageTracker = _gat._getTracker(analyticsCode); pageTracker._initData(); pageTracker._trackPageView(); } } document.getElementsByTagName("head")[0].appendChild(s); });
En ambos casos se debe reemplazar (UA-XXXXXXX-Y) por el código que Google Analytics nos asigna.
La mayor y posiblemente mejor aplicación de mapas de Internet y de dónde la gran mayoría de sitios Web obtienen la información sobre mapas, es sin duda la que más problemas produce. Las largas esperas producen, por ejemplo, en Internet Explorer 6 que el tiempo de carga de las imágenes nos desesperen antes de poder visualizarlas….
Para solucionar el problema basándonos en una solución sobre jQuery podemos usar:
function cargarMapa(){ if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("MAPA")); map.setCenter(new GLatLng(39.578678,2.646021), 16); } };
$(document).ready(function(){ var api='AQUI TU GOOGLE MAPS API KEY'; $.getScript('http://maps.google.com/maps?file=api &v=2.x&key='+api+'&async=2&callback=cargarMapa'); });
Si se prefiere, también podemos usar el ya conocido addLoadEvent()
addLoadEvent(function(){
var api='AQUI TU GOOGLE MAPS API KEY';
function cargarMapa(){ if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("MAPA")); map.setCenter(new GLatLng(39.578678,2.646021), 16); } };
var s = document.createElement("script"); s.type = "text/javascript"; s.src = 'http://maps.google.com/maps?file=api &v=2.x&key='+api+'&async=2&callback=cargarMapa'; document.getElementsByTagName("head")[0].appendChild(s);
})
Fuente: anieto2k
¿Habéis tenido problemas antes con los tiempos de carga usando estos servicios de Google en vuestras aplicaciones Web?
En la mayoría de aplicaciones de gestión es muy últil disponer de una calculadora para introducir nuevos datos en un formulario o para realizar pequeñas comprobaciones. Si además podemos disponer de una calculadora dentro de la interfaz del programa y accesible vía un icono o al hacer click sobre un input, pues mejor que mejor. Hoy os presento jQuery Calculator.
1.Incluir jQuery
2.Descargar el plugin jQuery Calculator (v1.0.0) e incluir los archivos necesarios en la página
<style type="text/css">@import "jquery.calculator.css";</style>
<script type="text/javascript" src="jquery.calculator.js"></script>
3.Realizar la invocación (ver más ejemplos)
$('input').calculator();
$('input').calculator({showOn: 'button'});
Se puede invocar desde un botón, una imágen, al hacer focus sobre un elemento. Además podemos personalizar la animación: show, slide, slideDown, fade… (gracias a jQuery UI).
jQuery Calculator además está disponible en varios idiomas, entre ellos, el español. Basta con agregar el archivo de idioma correspondiente y cargar la calculadora indicando el idioma cómo parámetro de la llamada:
<script type="text/javascript" src="jquery.calculator-es.js"></script>
$('#l10nCalc').calculator($.calculator.regional['es']);
Por defecto, los colores y elementos gráficos de jQuery Calculator, la verdad, són un poco sosos, pero por suerte disponemos de una extensa guía de diseño para darle nuestro toque personal modificando el CSS directamente para conseguir darle algo más de vida.
jQuery Calculator es más potente de lo que parece a simple vista, podemos trabajar con diferentes bases, podemos añadir más botones y funciones a la calculadora para adaptarla 100% a lo que queremos hacer con ella, además de definir los callbacks adecuados para tratar los resultados obtenidos y ya se me olvidaba, también tiene funciones de “memória”.
Los chicos de jQuery (uno de los mejores framewoks javascript), han lanzado una nueva versión en los últimos días. Se trata de la versión 1.3.
En esta nueva versión de jQuery se ha visto incrementada sustancialmente la velocidad en la mayoría de aspectos. Básicamente la mejora de velocidad de ha mejorado cambiando el selector de elementos, ahora se utiliza Sizzle. Por otro lado se ha reescrito la inyección de HTML haciendo hasta 6 veces más rápida esta.
Para conocer más sobre esta versión de jQuery no olvides visitar la documentación oficial.
Es posible mejorar la accesibilidad de Google Maps a través de la implementación de la Google Static Maps API, que permite incluir una imagen simple mediante el tag <img> y una URL especificado en el atributo “src”.
Ejemplo: http://maps.google.com/staticmap?center=41.539402,2.441468&markers=41.539402,2.441468,red&zoom=17&size=400×300&key=TU-CLAVE-GOOGLEMAPS
Pero no solo se trata de ganar en accesibilidad. Por ejemplo, si implementamos una versión imprimible del contenido, se podrá visualizar fácilmet que salga la imagen que se genera con dicha API.
Ser compatible con el IE6 y el IE7, lo que significa adaptar los estándares de la Web a estos navegadores bastante populares, implica invertir mucho tiempo y esfuerzo. Además, requiere el conocimiento de hacks compatibles con las validaciones de las páginas por la W3C e incluso la separación de hojas de estilo en los peores casos.
El IE7.js es una librería liviana (de 11Kb comprimidos) de Javascript que permite convertir los navegadores Microsoft Internet Explorer desde la versión 5 hasta la 8 en vavegadores compatibles con los estándares de la Web, tanto a nivel de código HTML como de hojas de estilo CSS. También añade soporte de transparencia de imágenes PNG para el IE5 y el IE6.
EL IE7.js es una alternativa de compatibilidad con menos esfuerzo. Ahora con una evolución significativa en la velocidad y estabilidad, se ha convertido en una versión BETA, tras permanecer un largo periodo de tiempo en ALPHA. El motor del sistema opera con base2: Una librería de Javascript que permite trabajar con un Javascript multinavegador con un único DOM, siguiendo los estándates ECMAScript. Esta librería esta teniendo un fuerte impulso de desarrollo, lo que ha permitido mejorar notablemente el rendimiento del IE7.js. Ambas librerías son mantenidas por el mismo equipo de desarrollo de Dean Edwards.
¿Pero por qué significa un menor esfuerzo? Solo imagina implementar una única hoja de estilos compatible para todos los navegadores, válida para la W3C (tanto en HTML como en CSS) y solamente incluyendo los tags:
<!--[if lt IE 7]> <script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script> <![endif]-->