Aqu\u00ed va el titulo de la p\u00e1gina<\/title> \n<script src=\"..\/mootools-release-1.11.js\" type=\"text\/javascript\" charset=\"utf-8\"><\/script><\/span> \n<script type=\"text\/javascript\" charset=\"utf-8\">\nwindow.addEvent('domready', function() {<\/script><\/span> \n\tponer script aqu\u00ed<\/span> \n});<\/span><\/p>\n<style type=\"text\/css\">\n\tponer estilo aqu\u00ed<\/span>\n<\/style>\n<\/head> \n<body> \n\tponer <acronym title=\"HyperText Markup Language\">HTML<\/acronym> aqu\u00ed<\/span> \n<\/body> \n<\/html> \n<\/code><\/p>\nOK, ahora permitanme explicar que hagan con eso:<\/p>\nYo suelo crear una carpeta por cada proyecto\/ejemplo que voy a probar y una carpeta antes tengo el archivo mootools-release-1.11.js<\/strong>, que fue el archivo que descargamos de la p\u00e1gina de Mootoos, as\u00ed todos los ejemplos usen el mismo archivo (l\u00ednea <script src=\u00bb..\/mootools-release-1.11.js\u00bb type=\u00bbtext\/javascript\u00bb charset=\u00bbutf-8″><\/script><\/strong>), pero si vas a ponerlo en alg\u00fan servidor no olvides cambiar la ruta donde est\u00e1 ubicado tu archivo.<\/p>\nLuego, tenemos la funci\u00f3n: \n<code>window.addEvent('domready', function() {<\/span> \n \/\/ Poner aqu\u00ed codigo JS<\/span> \n });<\/span><\/code> \nSiempre debes poner tus funciones dentro de esa funci\u00f3n, de otro modo Mootools no ejecutar\u00e1 las funciones que escribas, a excepci\u00f3n de DomReadyVS.Load<\/strong>, pero eso es otro cuento.<\/p>\nHe puesto comentarios (lo que est\u00e1 en color verde), ah\u00ed deber\u00e1s sustituir esas l\u00edneas por lo que te proporcionen las pesta\u00f1as JS Code, <acronym title=\"Cascading Style Sheets\">CSS<\/acronym> Code<\/strong> y <acronym title=\"HyperText Markup Language\">HTML<\/acronym> Code<\/strong> respectivamente.<\/p>\n<img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.joelsedano.com\/blog\/wp-content\/uploads\/2008\/04\/pestanas.png\" alt=\"\" title=\"pestanas\" width=\"168\" height=\"29\" class=\"aligncenter size-medium wp-image-1238\" \/><\/p>\nGuardas el archivo cuando hayas sustituido los comentarios por c\u00f3digos y pruebas en un navegar web tu html.<\/p>\nAhora, solo me resta recomendarles que lean la documentaci\u00f3n del Mootools y algunas p\u00e1ginas para que incrementen sus habilidades:<\/p>\n<a title=\"PhatFusion\" href=\"http:\/\/www.phatfusion.net\/index.htm\">PhatFusion<\/a>: Esta p\u00e1gina recopila unos excelentes experimentos de efectos hechos en Mootools.<\/p>\n<a href=\"http:\/\/www.moord.it\/examples\">Moord<\/a>: Muy bonitos y atractivos efectos Javascript hechos con Mootools.<\/p>\n<a title=\"Mooflow\" href=\"http:\/\/www.outcut.de\/\">MooFlow<\/a>: Para crear una muy bonita galer\u00eda de imagenes con un efecto similar al CoverFlow del iPod\/iTunes.<\/p>\ny por \u00faltimo <a title=\"Xyberneticos\" href=\"http:\/\/xyberneticos.com\">Xyberneticos<\/a>, una de los mejores blogs que conozco de desarrollo web.<\/p>","protected":false},"excerpt":{"rendered":"MooTools es un framework de JavaScript que a los programadores web nos ofrece muchas interesantes caracter\u00edsticas y efectos de una manera muy sencilla. En este post quiero explicar un poco como funciona esta librer\u00eda, como instalarla y como implementar los ejemplos que muestran en la p\u00e1gina del proyecto.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11,2],"tags":[],"class_list":["post-1235","post","type-post","status-publish","format-standard","hentry","category-links-externos","category-programacion"],"_links":{"self":[{"href":"https:\/\/www.joelsedano.com\/blog\/wp-json\/wp\/v2\/posts\/1235","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.joelsedano.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.joelsedano.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.joelsedano.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.joelsedano.com\/blog\/wp-json\/wp\/v2\/comments?post=1235"}],"version-history":[{"count":0,"href":"https:\/\/www.joelsedano.com\/blog\/wp-json\/wp\/v2\/posts\/1235\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.joelsedano.com\/blog\/wp-json\/wp\/v2\/media?parent=1235"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.joelsedano.com\/blog\/wp-json\/wp\/v2\/categories?post=1235"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.joelsedano.com\/blog\/wp-json\/wp\/v2\/tags?post=1235"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":1235,"date":"2008-04-02T15:57:57","date_gmt":"2008-04-02T21:57:57","guid":{"rendered":"http:\/\/www.joelsedano.com\/blog\/?p=1235"},"modified":"2008-04-02T16:08:04","modified_gmt":"2008-04-02T22:08:04","slug":"primeros-pasos-con-mootools","status":"publish","type":"post","link":"https:\/\/www.joelsedano.com\/blog\/2008\/04\/02\/primeros-pasos-con-mootools\/","title":{"rendered":"Primeros pasos con MooTools"},"content":{"rendered":"

MooTools<\/a> es un framework de JavaScript que a los programadores web nos ofrece muchas interesantes caracter\u00edsticas y efectos de una manera muy sencilla.<\/p>\n

$\"\"$ <\/p>\n

En este post quiero explicar un poco como funciona esta librer\u00eda, como instalarla y como implementar los ejemplos que muestran en la p\u00e1gina del proyecto.<\/p>\n

<\/p>\n

Lo primero es descargar el framework, nos dirigimos a la p\u00e1gina de mootols y de ah\u00ed a la pesta\u00f1a de downloads<\/a>. En esta secci\u00f3n es donde eliges cuales funciones vas a utilizar marc\u00e1ndolas en el checkbox<\/em>, para motivos educacionales recomiendo seleccionar todas las funciones (alrededor de 65kb), pero para producci\u00f3n solamente marcar las que vayas a utilizar.<\/p>\n

$\"mootools1\"$ <\/p>\n

Al terminar de seleccionar las funciones deberemos elegir la compresi\u00f3n, dejemos por default la que est\u00e1 y presionamos el boton DOWNLOAD<\/strong> para comenzar la descarga del archivo JS (JavaScript).<\/p>\n

Ahora viene lo divertido, comenzar a utilizar Mootols<\/strong>!.<\/p>\n

Lo que aqu\u00ed voy a exponer no es la mejor manera de adentrarte a Mootools, sobretodo si no eres programador o entiendes un poco de desarrollo web, pero es la mejor manera que se me ocurre de alentar a la gente a hacer uso de esta librer\u00eda.<\/p>\n

Primeramente sugiero hacer una plantilla para todos esos ejemplos que exponen en la secci\u00f3n Demos de Mootools<\/a>, lo m\u00e1s correcto ser\u00eda leer la documentaci\u00f3n por completo para entender bien como funciona la librer\u00eda, de hecho ah\u00ed mismo recomiendan que lo peor que puedes hacer es solo copiar y pegar el c\u00f3digo ah\u00ed descrito sin entender como funciona, pero igualmente puedes leerte la documentaci\u00f3n una vez que te diviertas un poco viendo lo que se puede hacer y viendo que es muy sencillo implementar en cualquier web XHTML<\/acronym>, mi plantilla es algo como lo siguiente:<\/p>\n