Entradas etiquetadas ‘plugins’

Accelerando Firefox desfragmentando su base de datos

1 de Septiembre de 2009

Parece que aún hay necesidades y funciones que no están del todo cubiertas por los puglins existentes para Firefox, ya que hoy nos hemos enterado de que existe un plugin para desfragmentar la base de datos (SQLite) de nuestro Firefox y así hacer que funcione más rapido.

La extensión en concreto se llama Vacuum Places Improved y es compatible en versiones de Firefox 3.5 y superiores. En realidad la extensión optimiza la carga del historial y los marcadores, así, al teclear una dirección en la barra de direcciónes lo hará (supuestamente) más rapido.

Según los autores también mejora el tiempo de inicio de Firefox.

La extesión además se puede configurar para realizar desfragmentaciones automáticas cada cierto numuero de inicios de Firefox o programar recordatorios también cada cierto número de inicios.

Sin duda vamos a probarlo y veremos que tal.

jQuery Visualize

10 de Julio de 2009

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

Publicada la O3D, el 3D en nuestros navegadores

22 de Abril de 2009

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.

Más ejemplos:

Fuente: anieto2k

jQuery Calculator, la calculadora definitiva

28 de Enero de 2009

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.

Aspecto por defecto

Aspecto por defecto

Uso

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).

Localización

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']);

Estilos CSS

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.

)

Mismo plugin + CSS modificado = Nueva calculadora :)

Funciones Extra

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”.



Validar el código HTML completo de nuestro blog Wordpress

15 de Enero de 2009

Que el HTML de nuestro blog o cualquier página web sea válido es el primer paso para conseguir que funcione como esperamos (especialmente en dispositivos típicamente poco flexibles como son los teléfonos móviles u otros dispositivos de nueva generación).

Un código correcto es una buena muestra de rigor de cara a los usuarios y a nosotros mismos, si son las normas estandarizadas de la web, ¿por qué no cumplirlas?.

El problema es mantener esa validez post tras posts, he explico, si nuestro código de la plantilla es válido, no significa que lo vaya a ser siempre, ya que a veces ocurre por integrar objetos incrustados mal codificados (vídeos de YouTube, galerías fotográficas, etc.) ya no valida como debería.

Ejemplo de validación

Ejemplo de validación

Para verificar la validez de todas y cada una de las entradas de nuestro blog viene tenemos Validated para WordPress, es tan sencillo como instalarlo y ponerlo a trabajar para descubrir todas las entradas con problemas.

Además este plugin nos enlaza directamente con el validador de W3C para ver el detalle de los fallos de cada entrada y así saber donde tenemos los problemas y poder remediarlo.

Optimizar imágenes sin perder calidad con Smush.it

10 de Enero de 2009

Con Smush.it con solo tan solo un click, mediante la instalación de una extensión del Firefox o a través de una URL o un Uploader, se puede optimizar las imágenes de un sitio Web sin perder su calidad. Solo exprimiendo al límite los bytes que la componen.

Es muy fácil de usar:

  • Podemos entrar en la Web de Smush.it y subir nuestras imágenes con el navegador Web.
  • Utilizar el Bookmarklet de Smush.it, lo que le permite a extraer todas las imágenes de la Web que estamos viendo.
  • Entrar en la Web de Smush.it y escribir las URL de nuestras imágenes.
  • O usar la extensión de Firefox de Smush.it, que con tan solo un click pasa todas las imágenes de la Web que estamos viendo a Smush.it para que las procese en cuestión de segundos.

Viendo la portada de la Web de A2SISTEMAS y activando con un click el plugin del Firefox de Smash.it, podremos apreciar el resultado de la optimización de las imágenes de la portada en la siguiente captura:

Resultado de la optimización con Smush.it

Resultado de la optimización con Smush.it

El resultado representa un ahorro de casi un 10% del peso total de todas las imágenes. Un verdadero revés a la optimización cotidiana, teniendo en cuenta que todas y cada una de la imágenes que componen esta portada fueron debidamente optimizadas para ganar en tiempo de carga sin perder su calidad con programas de edición de imágenes profesionales como el Gimp y el Photoshop.

También podemos apreciar que al final del listado, la última imagen estaba en un formato GIF que Smush.it automáticamente ha convertido al formato PNG. Lo que no representa un problema, pero sí un cambio, ya que tendríamos que actualizar el HTML para actualizar a este nuevo formato. ¡Es la hora de dejarnos de GIF!

El resultado es una carpeta comprimida con todas las imágenes optimizadas, que se descarga del sitio Web de Smush.it. Así de fácil.

jQuery más fácil con una Extensión del Dreamweaver

9 de Enero de 2009

Se trata de una extensión disponible gratuitamente que se instala en el Dreamweaver, a través de un típico .MXP. Facilita definitivamente el trabajo del día día con este lenguaje de programación. Su aportación se puede resumir en:

  • Sintaxis coloreada del lenguaje.
  • Autoayuda cuando escribes, con listados que contienen todas las funciones de jQuery y jQuery UI.
  • Biblioteca de recortes de código.
Captura del plugin en acción

Captura del plugin en acción

Esta disponible para Dreamweaver CS3, 8, MX2004, and MX, tanto en Windows como en Mac OS X.

Menús estilo acordeón en JQuery

27 de Noviembre de 2008

Uno de los lenguajes que nos sirve para poder hacer desarrollos más vistosos, en el sentido de animaciones o realizar efectos, fue en su momento javascript. Pero gracias a la aparición de Jquery podemos realizar muchas más cosas más fácilmente de lo que podiamos hacer con Javascript. En este caso queremos exponer el plugin de jquery “accordion”, esto nos permite hacer unos menús desplegables que hoy en día se usan en Webs reconocidas como por ejemplo la de Apple. En este tipo de menús constan de apartados importantes que contienen un “listado” de enlaces que dan accesos a los distintos apartados de la web. El funcionamiento es sencillo, simplemente cuando seleccionas uno de estos grandes apartados se despliega el menú que contiene dando paso a la lista de enlaces de ese ámbito. Veamos un ejemplo con el menú de Apple:

Vemos en la parte izquerda este tipo de menu.

Estos menús se realizan con el uso de los tags UL i LI que nos permiten realizar listados. En estos tags se le deben añadir los id’s pertinentes para que se pueda identificar el elemento que se selecciona y se pueda desplegar. Este es un ejemplo:

<ul class=”drawers” id=”menu”>
<li class=”drawer”><h2 class=”drawer-handle”>Sección 1</h2>
<ul class=”submenu”>
<li class=”elemento”><a href=”#”>Elemento 1.1</a></li>
<li class=”elemento”><a href=”#”>Elemento 1.2</a></li>
<li class=”elemento”><a href=”#”>Elemento 1.3</a></li>
<li class=”elemento”><a href=”#”>Elemento 1.4</a></li>
<li class=”elemento”><a href=”#”>Elemento 1.5</a></li>

<li class=”elemento”><a href=”/”>Salir</a></li>
</ul>
</li>
<li class=”drawer”><h2 class=”drawer-handle”> Sección 2 </h2>
<ul class=”submenu”>
<li class=”elemento”><a href=”#”>Elemento 2.1</a></li>
<li class=”elemento”><a href=”#”>Elemento 2.2</a></li>
<li class=”elemento”><a href=”#”>Elemento 2.3</a></li>
</ul>
</li>
</ul>

Este es un sencillo menú con 2 apartados con varios subelementos cada uno de los apartados. Una vez hecho esto tendremos que inicializar el menú y dar la acción de despliegue en Jquery. Tanto se puede desplegar con un click del ratón, como simplemente pasando el ratón por encima (al hacer hover). La inicialización (que debería ir englobada dentro del <head> por ejemplo) de este menú podria ser tal que así:

$(document).ready(function () {

$(’LI.drawer UL:not(:first)’).hide();

$(’LI.drawer UL:first’).addClass(’open’);

$(’H2.drawer-handle’).click(function () {

$(’LI.drawer UL:visible’).hide();

$(’H2.open’).removeClass(’open’);

$(this).next().show(”slow”);

$(this).addClass(’open’);
});
});
En esta inicialización empezamos cerrando todos los elementos principales menos el primero (cada uno lo puede hacer a su gusto). Entonces se le añade a este primer elemento la clase “open”. Entonces solo se debe determinar con que evento se mostraran los elementos de los otros submenus, en el ejemplo seria con el click del elemento principal. Entonces se esconde el elemento actual, se le quita la clase open y se le asigna al nuevo elemento que se mostrará.

Son menus bastante útiles y vistosos para mostrar los accesos a los diferentes apartados de la web de una manera organizada y vistosa.

Flash o no Flash

22 de Noviembre de 2008

Este es uno de esos populares temas de debate en foros de diseño web. ¿Qué tipos de sitios web deben utilizar esta nueva tecnología y qué tipos de sitios no? Para aquellos que no están familiarizados con Flash: Flash es un plug-in y el programa desarrollado por Macromedia que ofrece sitios de dinámica de animación y interactividad.
Lo único es que, a fin de ver sitios que utilizan esta tecnología, primero se debe descargar el plug-in, que en algunos equipos puede tomar desde 5 minutos a 15 minutos dependiendo de su velocidad de conexión. Esto no es un obstáculo para la mayoría de los usuarios, sin embargo, para algunos, no es una cuestión de rapidez o la lentitud de carga – algunos usuarios son muy cautos sobre lo que descargar de internet, y es posible que vean este “Download Now” como una amenaza a su sistema. Otros usuarios ni siquiera entran en los sitios que requieren plugins por esta razón solamente. Y algunos no entran porque no les gusta esperar a los componentes y las animaciones de carga. Estas son las personas que quieren información y que han ido al sitio para eso – no para ver un oso animado al introducirse en el.

E-Comercio y Flash no pueden mezclarse

No se recomienda para los sitios de comercio electrónico utilizar tecnología Flash. La finalidad de un sitio de comercio electrónico es vender artículos a los consumidores que visitan su sitio web. Los visitantes quieren ver los productos y obtener la información de manera rápida y fácil. Mediante la implementación de un sitio de comercio electrónico en Flash, la empresa está limitando la cantidad de consumidores que van al sitio, y, potencialmente, podrían perder ventas.
La mayoría de los sitios que utilizan Flash también ofrecen una versión HTML para los clientes que no tienen el plugin, o que deciden no descargarse dicho plugin.
Esto es altamente recomendable para todas las empresas al hacer el uso de Flash en su sitio de comercio electrónico.
Vamos a decirlo de esta manera: Pongamos que nuestra empresa de venta de productos la hemos construido en una isla en el Pacífico muy cerca de la costa. ¿Se le requerirá a todo el mundo que quiere entrar en su tienda a obtener un barco para llegar hasta ella? ¿O a construir un puente para cruzar? Mejor aún, probablemente habría sido mejor construirla en la orilla principal en el primer lugar de “fácil acceso”. Este es el problema con Flash el día de hoy. Aunque un alto porcentaje de consumidores ya tienen sus plugins de Flash instalados, no es aconsejada la aplicación de Flash para un sitio de comercio electrónico. Por supuesto, que es, en última instancia la decisión de la empresa.

El lado bueno de Flash

Sí, Flash tiene sus buenos puntos. Flash es muy beneficioso para los sitios web de entretenimiento. Los sitios que son principalmente para fines de entretenimiento. Webs de información también empiezan a utilizar Flash en partes de sus sitios para representar imágenes en movimiento y sonido como una visita guiada o clips de información que hacen que el sitio sea más interesante. Flash también es ideal para los niños y los sitios de juego. Con la tecnología Flash, su sitio puede interactuar con los visitantes en forma de divertidos juegos o dibujos animados. Añade la diversión y emoción a la web con los sonidos de la música, voces, colores y imágenes en movimiento. Así que sí, Flash puede ser muy bueno para algunos sitios.

Selecciona el tiempo con JQuery

17 de Noviembre de 2008

Jquery es una tecnologia que cada vez ofrece mas prestaciones de cara a poder aplicarlas a las páginas web.  No sólo ofrece poder tener gestionar eventos de una manera más vistosa, si no que permite tener efectos que realmente llaman la atención del usuario. Pero lo mejor de todo es que se pueden conseguir resultados realmente buenos sin tener que hacer un sobreesfuerzo. Aquí tenemos un ejemplo con el selector de tiempo que se nos ofrece. Si hay algun formulario en el que debes almacenar los datos de tiempo sin tener que preocuparte excesivamente por el control de datos esta es una buena solución. Ya que le das al usuario una interfície con la que los podrá introducir con relativa facilidad. Un proceso escalonado para ir introduciendo las horas y los minutos, manteniendo el fomato correcto de tiempo. Como vemos en la siguiente imagen.

Este proyecto esta echo simplemente por diversión. Como muchos de estos plugins que nos pueden ayudar a tener las aplicaciones cuidadas mas al detalle.

Eso si los usuarios deberán tener claro cuando es AM y cuando es PM.

Para mayor información haz click aquí.