Contenido

Google Web Elements, integra todos (o casi) los servicios de Google en tu Web

27 May

+ 4

La estrategia de Google, siempre ha sido ofrecer servicios de calidad de forma gratuita. De esta forma, la gente los usa (y mucho). Ahora, una nueva estrategia entra en juego, la de sacarle partido a estos servicios, y ¿como mejor que ofrecer “widgets” para que los desarrolladores los integremos en nuestras web?

google-web-elements
(Ver Imagen)

Google Web Elements, entra en juego para conseguir ofrecer más a los usuarios de una forma fácil y cómoda. Con ellos, podrás integrar desde Presentaciones hasta Calendarios, pasando por Chats, Maps o busquedas. Todo ello, en forma de <iframe /> que simplemente tendremos que pegar en nuestro HTML.

google-web-elements-configuration
(Ver Imagen)

Gracias a una sencilla configuración, podremos adaptar el elemento a nuestra web sin ningún tipo de problema.

La propiedad CSS overflow

27 May

+ 2

Áltamente recomendable el artículo de CSS Tricks sobre la propiedad CSS overflow.

FontJazz, usa cualquier fuente en tus aplicaciones web.

27 May

+ 1

FontJazz es un sistema basado en Javascript, que permite añadir tipografías no estandarizadas en nuestras aplicaciones web. Al igual que otros que hemos visto previamente nos permite disfrutar de este estandard CSS3 antes de que este esté implementado en todos los navegadores.

fontjazz
(Ver Imagen)

Como novedad, frente a las otras que conozco, FontJazz nos permite generar una imagen con las fuentes TTF que nosotros le indiquemos para realizar una serie de <span /> y jugar con background-position sobre esa imagen y componer la imagen con la tipografía que estamos generando.

Descargar

Puedes descargarlo directamente desde la página oficial.

jqTransform, formularios más elegantes con jQuery

27 May

+ 5

El otro día vimos Sexy Forms, un plugin para MooTools que nos permitía mejorar estéticamente los formularios de nuestras aplicaciones. jqTransform, es un plugin de jQuery que consigue más o menos lo mismo.

jqtransform
(Ver Imagen)

Implementación

Como todos los plugins de los diferentes frameworks, la implementación es realmente sencilla.

Añadimos los ficheros Javascript necesarios

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.jqtransform.min.js"></script>

Escribimos nuestro formulario

<form class="jqtransform">
  <div class="rowElem">
    <label for="name">Name: </label>
    <input type="text" name="name" />
  </div>
  <div class="rowElem"><input type="submit" value="send" /><div>
</form>

Indicamos el formulario anterior debe ser más elegante 😀

<script type="text/javascript">
$(function() {
    $("form.jqtransform").jqTransform();
});
</script>

Descargar

Puedes descargarlo directamente desde aquí.

jQuery Ribbon, interface atractivo con jQuery

27 May

+ 1

jQuery Ribbon es un conjunto de elementos que nos permitirán extender los interfaces desarrollados sobre jQuery. De un resultado similar al obtenido en Ext.js, podemos montar aplicaciones web con aspecto de escritorio de una forma rápida y funcional.[Demo][Descargar]

dhtmlxScheduler, create tu propio Google Calendar

27 May

+ 5

dhtmlxScheduler es un script desarrollado en Javascript, que nos permite crear nuestro propio Google Calendar o iCal.

dhmlxscheduler
(Ver Imagen)

El resultado es realmente bueno, ya que nos permitirá mover los eventos por el calendario, editarlos y borrarlos en 3 diferentes vistas posibles (Día, Semana, Mes). Todo ello cargado de Ajax que hace que la página no se haya de recargar ni una sola vez.

API

Además dispone de una API para trabajar con él, lo que nos permite generar/actualizar eventos de una forma sencilla.

// Añadir Evento
	scheduler.addEvent({
		id: "ev123",
		start_date: "16-05-2009",
		end_date: "19-05-2009",
		text: "My new event. dhtmlxScheduler release"
	});
// Actualizar evento
	scheduler.setEventText("ev123", "Updated Release date");
	scheduler.setEventStartDate("ev123", "21-5-2009");
	scheduler.setEventEndDate("ev123", "22-5-2009");
// Borrar evento
	scheduler.deleteEvent("ev123");
// Control del interface
	scheduler.setCurrentView("21-05-2009", "week");

Descargar

Puedes descargarlo directamente desde aquí, ya que tiene una licencia GPL para proyectos free, para usos comerciales con 1 mes de soporte el precio sube a $149 (106,6€) o la versión Enterprise que ofrece 12 meses de soporte por $449 (321,3€).

Stealth Login, añade un grado de seguridad más a tu WordPress

26 May

+ 6

En PuntoGeek me he encontrado un interesante plugin que nos permite añadir un grado más de seguridad a nuestros blogs. Se trata de Stealth Login, un plugin que mediante un una serie de reglas en el fichero .htaccess hará que nuestro fichero wp-login.php y el directorio wp-admin/ sean reemplazados por los nombres que nosotros le indiquemos.

screenshot-11
(Ver Imagen)

Este sería el estado inicial, el fichero .htaccess que WordPress nos añade por defecto. Una vez modificadas las opciones disponibles, obtendremos un resultado similar a este.

screenshot-2
(Ver Imagen)

La idea es realmente buena, ya que te dá completo control sobre el nombre que tu quieras ponerle a tu pantalla de login y a tu panel de administración. Además, si algo falla, siempre puedes borrar directamente el fichero .htaccess desde el FTP y volver a empezar desde donde WordPress te lo deja originalmente.

Descargar

Puedes descargar directamente desde la página oficial de WordPress.

V8 y SquirrellFish son realmente rápidos

25 May

+ 7

Olov Lassus, ha realizado una serie de pruebas a los nuevos motores de renderizado de Javascript que estamos viendo en los navegadores más actuales.

V8: Chromium 3.0.182 (182.0) snapshot 16837 23 May 2009
TraceMonkey: Firefox 3.6a1pre nightly latest-trunk 22 May 2009
JavaScriptCore (SquirrelFish extreme): WebKit r44078 nightly 23 May 2009

jsbenchs2
(Ver Imagen)

Y los resultados muestran en los diferentes tests realizados como V8 (de Google Chrome) y SquirrelFish Extreme (de Webkit) son realmente rápidos. Haciendo que TraceMonkey (de Firefox 3.5) quede en un último lugar.

Es sospechoso curioso ver, como dependiendo del test el vencedor es uno u otro….

Ya no tienes excusas para no iniciarte en el mundo de los blogs

25 May

+ 5

Alberto Navarro me avisa por correo que ha preparado 3 artículos sobre como planificar y montar un blog usando WordPress como base. 3 artículos muy detallados, que con imágenes y unas descripciones muy claras haría que hasta mi gato puediera hacer un blog en 5 minutos.

  1. Planificación
  2. Creación
  3. Mantenimiento

Ya no tienes excusas para iniciarte en el mundo de los blogs, con WordPress.

Mozilla JetPack, todos podemos hacer extensiones para Firefox

25 May

+ 11

Mozilla JetPack es una extensión para Firefox que permite desarrollar extensiones mediante el uso de tecnologías de desarrollo web (HTML, CSS, Javascript), aprovechándose de la potencia de Ajax y los nuevos estándares multimedia (<canvas />, <video /> y <audio />) realizar extensiones para Firefox es muy sencillo y sobretodo muy potente.

logo
(Ver Imagen)

Gracias a la integración con jQuery, el desarrollo de extensiones será realmente sencillo y la pequeña API, será más que suficiente para hacer realidad esas ideas que tenemos en mente.

La facilidad de integrar librerías externas (Google Maps, Twitter, Delicious.com,…) hará que nuestro navegador esté más conectado que nunca.

Veamos un ejemplo:

function GmailNotifier(doc){
  $(doc).click( this.goToInbox );
  this.update( doc );
  setInterval( function(){
    this.update(doc);
  }, 60*1000 );
}

GmailNotifier.prototype = {
  goToInbox: function(){
    jetpack.tabs.open("http://mail.google.com");
    jetpack.tabs[ Jetpack.tabs.length-1 ].focus();
  },

  update: function(doc){
    var url = "http://mail.google.com/mail/feed/atom";
    doc = $(doc);
    $.get( url, function(xml){
      var el = $(xml).find("fullcount"); // Unread message count

      if( el ){
        var count = el.get(0).textContent;
        doc.find("#count").text( count );
      }
      else{
        doc.find("#count").text( "Login" );
      }
    });
  }
}

jetpack.statusBar.append({
  html: '<img src="http://mail.google.com/mail/images/favicon.ico"><span id="count"></span>',
  onReady: function(doc){
    var gmail = new GmailNotifier(doc);
    $("#count", doc).css({
      position: "absolute",
      left: 4, top: 8,
      fontSize: "10px",
      cursor: "pointer",
      backgroundColor: "rgba(255,255,255,.8)"
    });
  },
  width: 20
});

Este código nos mostrará un icono de gMail con el número de emails pendientes por leer en la parte inferior de nuestro Firefox (statusbar). Revisa el tutorial para ver que cosillas se pueden hacer.

Ya tenemos una buena serie de demos desarrolladas por que extendamos nuestro navegador.

Gracias Edu.