Javascript

[Ajax-Php] mooHP: Mootools y Php

Buscando un script que me facilitara poner unas tabs para el próximo theme de el blog, el cual por cierto al parecer usara Mootools para unas tabs, las cuales luego verán, Me tope con este Framework.

Se llama mooHP, el cual como su nombre lo indica es una mezcla entre Mootools y Php.

La ventaja reside en que su sintaxis es muy similar a la de Mootools , por lo cual si estas acostumbrado a usar esta librería la implementación sera fácil y las ventajas muchas mas, como gestionar la gran mayoría de código vía Php.

A continuación les pongo un ejemplo de código y posteriormente un link para que vean el demo.

< ?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);

?>

El resultado de esto seria lo siguiente.
http://www.devpartment.com/testdrive/mooHP/

Creo que Mootools, me esta ganando, y eso se debe a una gran ventaja que ofrece ante otras Frameworks, como JQuery o Prototype, y eso es su peso, que es extremadamente pequeño, bueno aun sigo defendiendo a Jquery, pero si no se compacta un poco mas quiza tenga que darle un vistazo a Mootools.

Por cierto fui la Flisol, no participe casi en nada y es por que no me dio tuve mucho tiempo, eso si me compre una nueva playera muy chida de Debian Linux, tome unas fotos y me queria traer la de Php, pero pues no habia mas Varo($), asi que sera para la próxima, en cunato baje las fotos les platicare como estuvo la cosa.

Via | mootools + PHP = mooHP
Descarga | Descargar MooHP
Mas información en | http://www.devpartment.com/posts/mootools-php-moohp/

Leer más

[Ajax] TimeFrame: Rango de fechas usando prototype

Recuerdan que este blog se llama Ajaxman,por la gran admiración que le tengo a lo que es Ajax, y pues ultimamanete no ha habido muchos posts sobre esto, bueno vamos a mejorarlo , o al menos ese sera mi proposito, es que realmente blgo con buenas noticias sobre ajax en español practicamente no hay, asi que tengo que interntar “traducir” algunas noticias de el mejor blog sobre Ajax, osea Ajaxian.com.

Bien, olvidandonos un poco de lo poco que hay sobre ajax en español, paso a comentarles que surgio un plugin para prototype, una libreria que es muy eficiente para extender y/o mejorar las funcionalidades de Javascript-Ajax, la cual la he usado he varias ocasiones.

Este plugin se llama TimeFrame, con este plugin podremos hacer una selección de fechas o de un rango de fechas, son el “mouse” y veremos como se desplaza el rango al elejir una u otra fecha, n lo personal pienso que haria falta mejorarlo un poco mas, sin embargo, es una muy buena alternativa, ya que hace poco en un proyecto use la libreria “Ajax – Javascript”, Mootools con un plugin calendar, con el cual despliega dos calendario(pendiente el manual de como hacer esto), para tomar un rango de fechas, talvez usar TimeFrame hubiera sido mas optimo, quien sabe, aqui les dejoi la imagen de como se ve este proyecto que realice.

muestra mootools javascript calendar

Para usar TimeFrame, basta con bajarse el framework prototype y posteriormente bajarse el plugin de aqui. y usarlo

<script src="http://www.ajaxman.net/projects/timeframe/scripts/prototype.js" type="text/javascript"></script>
<script src="http://www.ajaxman.net/projects/timeframe.js" type="text/javascript"></script>

Una vez solicitados los Archivos Javascript los usamos con Javascript

    //< ![CDATA[
      new Timeframe('calendars', {
        startfield: 'start',
        endfield: 'end',
        previousbutton: 'previous',
        todaybutton: 'today',
        nextbutton: 'next',
        resetbutton: 'reset' });
    //]]>

Y con lo cual obtendriamos algo como esto.

Leer más

[Asides] Consejos para mejorar el Javascript

Como se daran cuenta poseo gran admiración hacia Javascript, en el blog del serafin, comenta sobre 5 Consejos para mejorar nuestros Javascripts, Con los cuales estoy muy de acuerdo ya que el usar Javascript, tiene que ser para mejorar nuestras webs y no dañarlas, y sobre todo hacerlas compatibles con el maldito Internet Explorer. | Via

Leer más

[Javascript - Jquery] Jhon Resig: aprendiendo javascript, y jQuery

Mientras siguo desarrollando el proyecto que me ha llevado mas tiempo de lo previsto, veo que los recursos para los desarrolladores web no paran de fluir.

El maestro Jhon Resig, que ya nos tiene acostumbrados a sus platicas, nos presenta un video en donde vemos el uso de Javascript, con algunos trucos que nos seran de gran utilidad.

Son consejos simples, en donde tambien vemos el uso/manejo del DOM, y por supuesto el manejo de Jquery, es en ingles, pero como muchos lo dominan bastante bien, se que no les sera dificil, les dejo el video a ver que les parece.

Javascript y Jquery

http://video.google.com/videoplay?docid=-7485992465859932389

Y tambien les dejo el PDF de la presentacion para que puedan ver todo lo que se trato en el video

Descargar aqui PDF javascript y Jquery

Via | JavaScript Talk at Northeastern

Leer más

[Curiosidades-programacion]Con ustedes: El Javascripy

jajajaj, esto simplemente es lo mejor, el javascripy ponganle sonido y veamos que tal queda.

Es una letra de una cancion que nos enseña algo de javascript simplemente impresionante pero sobretodo muy divertido.

¡¡¡Teclea, teclea!!!

El javascripy mola mogollón,

funciona en explorer y también en firefox.

Ponle javascripy a esa paginita,

que el javascripy la deja muy bonita.

Abre ventanas,

muestra mensajes,

valida formularios,

mi amol ya tu sabes!

Programan los seniors,

Programan los juniors,

Programa mi jefe con acentos en el function!

Y el javascripy se programa asi:

1 – el tag <script>

2 – el function vars

3 – el alert-confirm

4 – el return trú

Programa el javascripy,

Programa el javascripy,

programan los heavys también los frikis

Programan en la offis, programan en la uni,

Programan los fruittis y también los lunnis.

Programa Maradona esnifando una raya,

y Juan Carlos le dice: ¿Porque no usas ajax?

En el formulario de un triste portal,

pusieron javascripy y ya pudo validar

¡¡¡Validar!! ¡¡Validar, validarr, validarrr!!!

Y el javascripy se programa asi:

1 – el tag </script><script>

2 – el function vars

3 – el alert-confirm

4 – el return trú

Via | El baile del javascripy

Leer más

[Librerias-Ajax] Los secretos de las librerias y Frameworks Javascript

Las librerias o Frameworks Javascript, sin duda son unas herramientas importantisimas si deseamos mejorar nuestro desarrollo con Ajax.

Jhon Resig, El creador de Jquery, que junto con Sam Stephenson(conio.net), Alex Russell(alex.dojotoolkit.org), Thomas Fuchs(script.aculo.us/thomas), y Andrew Dupont(adrewdupont.net), han tenido una platica sobre los secretos que esconden, o tambien dicho las caracteriticas principales de la Librerias Javascript.

Me hubiera encantado encontralo en video pero es de mucha ayuda tenerlo aunque sea en Diapositivas(Slides).

Aqui les dejo la presentación:

Actualizado: Lo mismo que la anterior por alguna razon no puedo publicar estas diapositivas lastima, ojala y todo se pudiera compartir

http://www.slideshare.net/jeresig/secrets-of-javascript-libraries

Un saludo a Jhon Resig y a todo el panel de SXSW.

Via | Secrets of JavaScript Libraries (SXSW)

Leer más

[Javascript-Songbird] Manipulando nuestra musica con Javascript y Songbird

Cuando deseamos escuchar musica, y vemos que reprodutor usar, mucha gente suele utilizar Windows Media, otra gran mayoria suele usar iTunes, alguinos mas usan Winamp, que son los mas usados.

Sin embargo la fundacion Mozilla, esta desarrollado desde hace bastante tiempo una alternativa bastante interesante, que se llama Songbird, de el cual hace algunos posts les platique.

Ahora van en la version 0.4

songbird version

Tiene muchas cosas que talvez en muchos otros podremos encontrar sin embargo algo que no podemos ver como algo importante es que es “Open source”, y que ademas se puede personalizar a nuestros gusto.

Pero hay algo aun mas interesante, como esta desarrollado con XUL, se puede manipular con Javascript, claro que para esto debemos adentrarnos un poco con XUL y con SongBird.

Keisuke, Desarrollo un script el cual, valga la redundacia esta escrito en Javascript, muuy simple y sencillo que nos permite mostrar en forma de un nube de tags nuestra biblioteca.

solo basta introducir la url del script y Songbird nos pedira confirmacion para ejecutar dicho script y listo ya tenemos nuestra nube de tags.

songbird nube de tags tagcloud

El codigo de la pagina que se ejecuta es el siguiente


<html>
  <head>
    <title>TagCloud Library View</title>
    <link rel="stylesheet" href="./tagCloud.css" />
    <script type="application/javascript"
            src="./tagCloud.js">
    </script>
  </head>

  <body onload="load();" onunload="unload();">
    <div id="menu">

      <a class="genre" href="javascript:void(0);" onclick="javascript:setCloud('genre', 'genres');">Genres</a>
      <a class="artist" href="javascript:void(0);" onclick="javascript:setCloud('artistName', 'artists');">Artists</a>
      <a class="album" href="javascript:void(0);" onclick="javascript:setCloud('albumName', 'albums');">Albums</a>
      <a class="year" href="javascript:void(0);" onclick="javascript:setCloud('year', 'years');">Years</a>
    </div>
    <div id="cloud">
    </div>

  </body>
</html>

Y el contenido de el archivo tagcloud.js es el siguiente

Leer más

Historico de entradas

febrero 2012
L M X J V S D
« ene    
 12345
6789101112
13141516171819
20212223242526
272829  

Ajaxman

Mi nombre es Javier, soy desarrollador web con especialización en PHP (avanzado), HTML, CSS y Javascript(Medio).

Me considero evangelizador de Kohana Framework, Mozilla Firefox y GNU/Linux Debian.

Estoy casado, y tengo dos hermosos hijos.

Todos los contenidos a menos que se exprese lo contrario estan bajo licencia Creative Commons.

Enlazanos!!

hit counters online counter