Posts tagged ‘javascript’

Script.aculo.us Samplr

Dos post atrás les comentaba sobre Scripteka.com, que es un sitio en donde encontraran todo tipo de librerías para ocupar con Prototype, Samplr es la misma idea, pero recopilando scripts que funcionen con la librería Effect de Script.aculo.us.

Hay unos scripts verdaderamente buenos y que pueden ser muy útiles, en el sitio encontraras 9 extensiones y tienes 21 enlaces a otros mas que ha ido recolectando el autor del sitio.

Enlace:
Script.aculo.us Samplr
.

Ver VideosTe VerdeImagenes para hi53GP

noviembre 10, 2007 at 12:57 am 2 comentarios

Aprende a usar Prototype

La última versión de prototype trae unas mejoras y cambios en el modo de uso, si es cierto las antiguas maneras no se eliminan, si se agregan métodos para que su uso sea mas fácil y obviamente es recomendable usar estos, cuando se mencionaba del release de prototype se explicaban en parte estos cambios.

Vía Ajaxian me entero de dos tutoriales/manuales de que es correcto y que no es correcto en prototype, o sea, aprender a ocupar prototype y sacar el máximo del provecho.

En ambos se muestran ejemplos de que haría uno, y como se podría mejorar, por ejemplo:

Forma Antigua
Event.observe(‘myContainer’, ‘click’, doSomeMagic);

Forma mejorada
$(‘myContainer’).observe(‘click’, doSomeMagic);

Además de otros tips de como optimizar mas nuestros scripts y que sean mas eficientes.

Enlaces:
How well do you know prototype
How well do you know prototype II

Dato: También tienen la API para ver en mas detalle y con ejemplos de uso.
.

Ver VideosTe VerdeImagenes para hi53GP

noviembre 10, 2007 at 12:49 am 6 comentarios

Scripteka.com – Repositorio de librerías para Prototype

Scripteka es un sitio en el que encontraras librerías y/o extensiones de todo tipo para que puedas ocupar con el framework Prototype, como por ejemplo datepicker, tooltips, validadores, entre otros.

En este momento cuenta con mas de 60 scripts (64 al día de hoy y subiendo) en el que de seguro encontraras lo que buscabas para tu proyecto. Bastante simple el sitio e intuitivo, te entregan una breve introducción a la librería, el autor, sitio web y la valoración entregada por los usuarios registrados.

Sinceramente me impresiona como ha crecido este framework y su comunidad, hace una par de días atrás salio la version 1.6 de prototype, además se actualizo la suit scriptaculous a la 1.8 y en conjunto lanzaron un libro, contando también con Scripteka que recopila todas las librerías para prototype existentes (ojo que si falta alguna, puedes dar aviso para que la agreguen), etc. y etc. Así que si aun no te decides por que framework ocupar, por aquí puede ser tu camino.

Enlace: Scripteka.com
.

Ver VideosTe VerdeImagenes para hi53GP

noviembre 10, 2007 at 12:29 am 2 comentarios

mootools + PHP = mooHP

mooTools es un framework javascript que ha crecido de una forma basta abrupta, por lo mismo hoy en día es uno de los frameworks mas importantes y usados por desarrolladores. Pero se imaginan programar de la misma forma que mooTools pero en PHP?, pues ya es un hecho y se llama mooHP.

mooHP es un novedoso framework con la particularidad de que su sintaxis es idéntica a la de mooTools, novedoso no?. Así que si tu eres uno de los adeptos a mooTools y aun no te acostumbras a otros frameworks PHP, este puede ser tu punto de partida sin tener que pasar por un gran esfuerzo intentando conocer una sintaxis nueva.

Mírenlo ustedes mismo.

<?php
include("mooHP2/dom.class.php");
include("mooHP2/element.class.php");
include("mooHP2/css.class.php");
include("mooHP2/utility.class.php");

//New instance of the dom class
$t = new dom();

//Loads a template from file
$t->loadFile("base.html");

//Gets element by css selector  and sets it's HTML content.
$t->SE("body")->setHTML("");

//Selected ellement: body adopts  new element
$t->SE("body")->adopt( $t->element("div", array("id"=>"header") ,"Hello world!") );

//Body adopts  <br />
$t->SE("body")->newLine();

$picked = "";
if (isset( $_GET["cd"] )) {
 $picked = " you have selected #".$_GET["cd"];
}

//Body adopts new element div: with assigned properties as second argument and text as content;
$t->SE("body")->adopt( $t->element("div", array("style"=>"margin:10px; padding:10px; border:1px solid #444;"), "Counting down:".$picked) );

// $select  = new Element()
$select = $t->element("select", array("name"=>"cd"), "");

//Body adopts new element of type form
$t->SE("body")->adopt( $t->element("form", array("id"=>"newForm","method"=>"get") ) );
//Selects new element by ID and adopts previously defined element $select
$t->S("newForm")->adopt( $select );
// #newForm adopts new Element input
$t->S("newForm")->adopt( $t->element("input", array("type"=>"submit", "value"=>"CLICK!") ) );

for ($i=1; $i<=20; $i++) {
	//$newOption is new option element
	$newOption = $t->element("option", array("value"=>$i), "Count down: " . $i );
	//$select adopt as it's first child the $newOption element
	$select->adoptTop( $newOption );
	if ( isset($_GET["cd"]) && $_GET["cd"] == $i ) {
		//Setting an attribute to an element
		$newOption->setProperty("selected","selected");
	}
}

//Body accepts  new style rules
$t->SE("body")->setStyle("margin","10px");

//Body adopts <br/>
$t->SE("body")->newLine();

//Appending text to the body
$t->SE("body")->appendText("and here comes the appended text");

//Body is adopting the inc.html contents
$t->SE("body")->adopt( $t->includeFile("inc.html") );

if (!isset( $_GET["cd"] )) {
	//Make simple alert with javascript
	$t->alert("Hello and welcome to mooHP");
}

//Setting the <title> tah innerHTML
$t->setPageTitle("..:: Hello and welcome to mooHP ::..");

//Creating new instance of the css class
$newCss = new css();
//Setting rule in css
$newCss->setStyle("color","#ff9900");
//Setting rules in css
$newCss->setStyles(array("font-weight"=>"bold","font-size"=>"24px" ));
//Writing the defined css to element
$newCss->writeToElement( $t->S("header") );

//Creating new instance of the css class
$newCss2 = new css();
//Setting rule in css
$newCss2->setStyle("border","10px solid #DDD");
//Setting rule in css
$newCss2->setStyle("padding","10px");
//Writing the defined css as #newForm selector in $t dom instance
$newCss2->writeToDom("#newForm", $t);

//Writing the page   if true is passed as argument the page will be compresed
$t->writePage(true);

?>

En lo personal no lo he probado, ya que es un framework bastante nuevo, así que si alguno de ustedes lo ha ocupado, seria bueno saber que tal les fue, cuales fueron sus impresiones, etc. Como última nota, mooHP funciona sobre versiones 5.2.1 de PHP en adelante.

Demo | Descarga | Artículo relacionado
.

Ver VideosTe VerdeImagenes para hi53GP

noviembre 3, 2007 at 8:02 pm 12 comentarios

Formularios más semanticos

En un proyecto en el que estoy, se requiere que los formularios sean muy breves pero claros, sin duda un gran problema. Bueno pues he creado un pequeño script JS que funciona con prototype, para ayudar un poco a que sean mas claros. Sinceramente no si esta sea “la solución”, pero sin duda nos ha ayudado bastante y lo he comprobado.

Consiste en hacer aparecer un tooltip en al momento de enfocar el elemento del formulario, dando una explicación mas detalla de que hacer y/o escribir, no es una maravilla y ya existe hace bastante, pero lo quise hacer a mi manera, una manera no obstrusiva y que funciona de la misma manera en todos los navegadores (bueno aunque sea en la matoria).

Sin mas comentarios vamos al grano, esto es lo que quiero lograr.

Tooltip HorizontalTooltip vertical

Y la forma de lograrlo es muy simple.

El HTML:

<input type="text" name="nombre" size="25" title="Ingrese su nombre completo" class="tooltip" />
<input type="text" name="edad" size="3" title="Ingrese su edad" class="tooltip option-horizontal" />

El CSS:

.tooltip-aviso {
    position: absolute;
    z-index: 100;
    display: none;
    width: 150px;
    border: 1px solid #A5C9FF;
    font-size: 90%;
    padding: 2px;
    background: #E0ECFF url(img/pointer.gif) no-repeat -10px 5px;
    height: auto!important; /* para los browsers buenos */
    height: 25px; /* para IE5+ */
    min-height: 25px; /* para los browsers buenos */
}
    .tooltip-aviso .tooltip-pointer {
        position: absolute;
        left: -10px;
        top: 5px;
        width: 10px;
        height: 19px;
        background: url(img/pointer.gif) left top no-repeat;
    }
    .tooltip-aviso-horizontal {
        background: #E0ECFF url(img/pointer-horizontal.gif) no-repeat 5px -10px;
    }
        .tooltip-aviso-horizontal .tooltip-pointer-horizontal {
            position: absolute;
            top: -10px;
            left: 10px;
            width: 19px;
            height: 10px;
            background: url(img/pointer-horizontal.gif) center top no-repeat;
        }

La Imagen:

Pointer Tooltip Horizontal

Finalmente el Javascript:

Tooltip.js – Solo 2KB

Pueden ver el ejemplo desde aquí o descargarlo completo desde aquí.

Testado en IE5.5+, Firefox 2.0+, Opera 9.0.

PD: La idea de la flecha, la tome de este artículo
.

Ver VideosTe VerdeImagenes para hi53GP

octubre 29, 2007 at 1:09 am 4 comentarios



Seguir

Recibe cada nueva publicación en tu buzón de correo electrónico.