Jx: GUI mediante Mootools

ByLuis

JX Library es una librería para Mootools que nos facilita la realización de interfaces gráficas en nuestras páginas web.
jx.png
Nos ofrece una variedad de elementos gráficos: layouts, paneles, árboles, grids, botones, toolbars, selectores de color, combos, …
Jx
Vía / WebAppers

Similar Posts

|

‘Bocadillos’ en tu web

ByLuis

Albert Lanchas nos ofrece un script que me ha gustado bastante en el que se muestran ‘bocadillos’ con imágenes dentro. El bocadillo se adapta al tamaño de la imagen y su aspecto se puede cambiar mediante CSS.
bubble.png

Es necesario tener instalado prototype para su funcionamiento, y su uso es bastante sencillo, incluir el script, la librería prototype, la css e incluir la siguiente línea para que funcione:

<a href="imagen.jpg" rel="bubble"><img src="images/bubble.png"/></a>

Yo como unica pega, intentaría hacer la sombra con una imagen png, para poder usar la transparencia que nos ofrece, aunque en IE6 no funcione.

Bubble

Vía / Fresqui

Documentación oficial de prototype: por fin!

ByLuis

prototype_logo.pngPrototype ya dispone de documentación oficial. Aprovechando el lanzamiento de la versión 1.5 de la famosa librería han publicado la documentación de la API, un blog y una sección de tutoriales.
La documentación está realmente bien. Bien organizada y bajo un diseño limpio y claro. Pero se echan de menos dos cosas: la posibilidad de que la gente envíe comentarios y ejemplos como ocurre con la documentación de PHP y un buscador. Respecto al buscador, proporcionan un bookmarklet que cumple esa función pero parece una solución forzada.
La sección de tutoriales y consejos está todavía muy vacía pero es una buena idea el que la hayan implementado. Actualmente ofrecen dos documentos: Introducción a AJAX y Cómo Prototype extiende DOM.
Y el blog, genial. Todavía esta vacío pero es lógico… lo acaban de publicar! Desde luego yo ya me he suscrito a las RSS
Vía / Anieto2k

Detectar características HTML5 mediante Javascript

ByLuis

Aunque el HTML5 no está disponible en todos los navegadores, no es mala idea ir incluyendo en nuestras webs aplicaciones que hagan uso de HTML5, e ir dándole un poco de vidilla al asunto y no estar pendientes de Internet Explorer. Por ello, este script nos puede venir muy bien:

function detectBrowserCapabilities(){
  var res = new Array();
  res["userAgent"] = navigator.userAgent;    
  var hasWebWorkers = !!window.Worker;
  res["workersFlag"] = "" + hasWebWorkers;
  var hasGeolocation = !!navigator.geolocation;
  res["geoFlag"] = "" + hasGeolocation;
  if (hasGeolocation) {
    document.styleSheets[0].cssRules[1].style.display = "block";
    navigator.geolocation.getCurrentPosition(function(location) {
      res["geoLat"] = location.coords.latitude;
      res["geoLong"] = location.coords.longitude;
    });
  }
  var hasDb = !!window.openDatabase;
  res["dbFlag"] = "" + hasDb;
  var videoElement = document.createElement("video");
  var hasVideo = !!videoElement["canPlayType"];
  var ogg = false;
  var h264 = false;
  if (hasVideo) {
    ogg = videoElement.canPlayType('video/ogg; codecs="theora, vorbis"') || "no";
    h264 = videoElement.canPlayType('video/mp4; 
    codecs="avc1.42E01E, mp4a.40.2"') || "no";
  }
  res["videoFlag"] = "" + hasVideo;
  if (hasVideo){
    var vStyle = document.styleSheets[0].cssRules[0].style;
    vStyle.display = "block";
  }
  res["h264Flag"] = "" + h264;
  res["oggFlag"] = "" + ogg;
  return res;
}

Build Web applications with HTML 5

inlineEdit: editor de contenidos con Mootools

ByLuis

inlineEdit2 es un editor de contenidos inline realizado con Mootools.

Su uso es muy sencillo, tan solo es necesario añadir el siguiente código para poder utilizarlo:

$('element').inlineEdit();

Lo más asombroso es su tamaño, 20k sin comprimir, y para los que estén deseando mirar su funcionamiento, aquí va el código:

var inlineEdit = new Class({
getOptions: function(){
return {
onComplete: function(el,oldContent,newContent){
},
type: 'input'
};
},
initialize: function(element,options){
this.setOptions(this.getOptions(), options);
if(!element.innerHTML.toLowerCase().match('<'+this.options.type)){
this.editting = element;
this.oldContent = element.innerHTML;
var content = this.oldContent.trim().replace(new RegExp("<br>", "gi"), "\n");
this.inputBox = new Element(this.options.type).setProperty('value',content).setStyles('margin:0;background:transparent;width:99.5%;font-size:100%;border:0;');
if(!this.inputBox.value){this.inputBox.setHTML(content)}
this.setAllStyles(element,this.inputBox);
this.editting.setHTML('');
this.inputBox.injectInside(this.editting);
(function(){this.inputBox.focus()}.bind(this)).delay(300);
this.inputBox.addEvent('change',this.onSave.bind(this));
this.inputBox.addEvent('blur',this.onSave.bind(this));
}
},
onSave: function(){
this.inputBox.removeEvents();
this.newContent = this.inputBox.value.trim().replace(new RegExp("\n", "gi"), "<br>");
this.editting.setHTML(this.newContent);
this.fireEvent('onComplete', [this.editting,this.oldContent,this.newContent]);
},
setAllStyles: function(prevel,el){
if(prevel.getStyle('font'))el.setStyle('font', prevel.getStyle('font'));
if(prevel.getStyle('font-family'))el.setStyle('font-family', prevel.getStyle('font-family'));
if(prevel.getStyle('font-weight'))el.setStyle('font-weight', prevel.getStyle('font-weight'));
if(prevel.getStyle('line-height'))el.setStyle('line-height', prevel.getStyle('line-height'));
if(prevel.getStyle('letter-spacing'))el.setStyle('letter-spacing', prevel.getStyle('letter-spacing'));
if(prevel.getStyle('color'))el.setStyle('color', prevel.getStyle('color'));
}
});
Element.extend({
inlineEdit: function(options) {
return new inlineEdit(this, options);
}
});
inlineEdit.implement(new Events);
inlineEdit.implement(new Options);

Algo que nos puede ser útil en lugares como wikis o parecidos.

inlineEdit 2

jHeidi: cliente MySQL multiplataforma

ByLuis

jHeidi es una versión de Heidi realizado en Java para que se pueda ejecutar en otras plataformas y no solo en Windows.

jheidi.png

Entre las características que ofrece nos encontramos con:

  • Navegador de bases de datos, tablas y campos
  • Crear, actualizar y borrar BD, tablas, campos e índices
  • Ventana para queries
  • Administrador de usuarios
  • Mantenimiento de tablas
  • Administrador de conexiones
  • Exportar datos (CSV, HTML, …)
  • Importar CVS

jHeidi

| |

Laboratorio: desplegar mapa del sitio mediante Ajax

ByLuis

Vamos a explicar un pequeño script para mostrar en una capa el mapa del sitio web usando Ajax (en este caso la librería jQuery).

Un efecto parecido lo podemos encontrar en periódicos online para mostrar las diferentes secciones que se pueden visitar. Por ejemplo lo podemos ver en elmundo.es (en la cabecera) y en elpais.com (en el pie de página).

Se trata de que cuando se pasa el ratón sobre el link, se muestra un menú con las secciones del periódico (mapa del sitio en nuestro caso).

Como hemos explicado en otras ocasiones de cómo usar Ajax, esta vez vamos a utilizar la librería jQuery para facilitar la labor. El que sea un mapa del sitio es debido a que de cara a SEO los buscadores indexan más facilmente nuestro sitio.

También hemos pensado en la accesibilidad, para ello el enlace nos lleva a una página que muestra el mapa del sitio. Esta página que deberá ser dinámica, lo que hace es incluir en la parte del HTML donde se muestra la información principal (suponiendo que hay navegación y paneles laterales) el contenido de otro archivo, que es el que tiene el mapa del sitio. Este último archivo es el mismo que mediante Ajax se carga en la capa que se muestra en el mouseover del enlace.

Supongamos que tenemos dentro de nuestra página, el enlace en cuestión y una capa que estará oculta inicialmente mediante CSS:

<p><a href="paginasecciones.php" id="secciones">Secciones</a></p>
<div id="marco"></div>

También disponemos de dos páginas, una que muestra el mapa del sitio (secciones.html) y otra que incluye a la primera dentro de su contenido (paginasecciones.php), en cuyo código debería haber la siguiente función:

<?php require('secciones.html'); ?>

Ahora tan solo nos falta en el onload del window añadir la funcionalidad necesaria para ocultar la capa, y añadir al enlace el evento onmouseover para cargar el contenido de la capa y mostrarla cuando se pose el ratón en el enlace, y el evento onmouseout para ocultar la capa cuando salgamos del enlace.

window.onload = function() {
var obj = $("div#marco");
obj.hide();
$("a#secciones").mouseover(
function() {
var capa = $("div#marco");
// Para evitar recargar la pagica cada vez que se muestra
if (!capa.attr("cargado")) {
capa.load("secciones.html");
capa.attr({cargado: true});
}
capa.show().slideDown("slow");
} );
$("a#secciones").mouseout(
function() {
var capa = $("div#marco");
capa.slideUp("slow");
} );
}

El código es muy sencillo, lo único necesario de explicar para entenderlo es lo siguiente:

  • Cuando se carga el contenido de la capa, primero se comprueba si existe un atributo propio que hemos añadido a la capa, si no existe ese atributo entonces cargamos el contenido mediante Ajax y luego creamos ese atributo para así no tener que volver a cargar otra vez el contenido cuando pasemos el ratón sobre el enlace.
  • La función $ nos permite obtener un elemento HTML, en el caso de $(“div#marco”) nos devuelve el elemento DIV cuyo id es “marco”.
  • hide() oculta un elemento HTML.
  • show() muestra un elemento.mouseover(funcion) añade la ejecución de la función en el evento mouseover de un elemento.
  • mouseout(funcion) añade la ejecución de la función en el evento mouseout de un elemento.
  • attr(texto) consulta el valor del atributo pasado como parámetro de un elemento.
  • attr(código) añade el atributos y valores a un elemento.
  • slideDown despliega una capa hacia abajo.
  • slideUp repliega una capa hacia arriba.

Código fuente