Ajaxman

[Javascript] JavaScript HTML Parser: Mejorando nuestros HTML’S

Muchos quizas creyeron que ya no postearia, pero se equivacaron, he estado un poco atorado(como siempre), pero poco a poco mostrare mejores cosas.

Hoy leyendo el blog de Jhon Resig, me entero de que el, ha lanzado un proyecto llamado: Pure JavaScript HTML Parser.

Este proyecto , por lo poco que lo probe, se trata de un corrector de codigo html, aunque talvez, muchos digan, que son expertos en HTML, no olvidemos que al estar programando en algun otro lenguaje se nos puede pasar algo de HTML, como cerrar alguna tag.

Esta funcionalidad posee 4 metodos/opciones diferentes de uso.

  • Compone Tags no cerradas:
    HTMLtoXML("<p><b>Hello") == '<p><b>Hello</b></p>'
  • Elementos Vacios:
    HTMLtoXML("<img src=test.jpg>") == '<img src="test.jpg"/>'
  • Bloques vs. Elementos:
    HTMLtoXML("<b>Hello <p>John") == '<b>Hello </b><p>John</p>'
  • Cierre de Elementos padre:
    HTMLtoXML("<p>Hello<p>World") == '<p>Hello</p><p>World</p>'
  • Atributos deshabilitados.:
    HTMLtoXML("<input disabled>") == '<input disabled="disabled"/>'

Talvez a muchos no nos sea de gran ayuda pero quiza usando este codigo podamos mejorar nuestros codigos HTML, asi como tambien usarlo para algo mas.

Pueden ver el demo de su uso en el siguiente enlace.

Demo | JavaScript HTML Parser

0 comentarios » por: Ajaxman Miércoles, 07 May 2008 a las 12:32 am Pertenece a : Ajax, Javascript, Librerias, Programacion Comparte

[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:
  1. <?php
  2. include(“mooHP2/dom.class.php”);
  3. include(“mooHP2/element.class.php”);
  4. include(“mooHP2/css.class.php”);
  5. include(“mooHP2/utility.class.php”);
  6.  
  7. //New instance of the dom class
  8. $t = new dom();
  9.  
  10. //Loads a template from file
  11. $t->loadFile(“base.html”);
  12.  
  13. //Gets element by css selector  and sets it’s HTML content.
  14. $t->SE(“body”)->setHTML(“”);
  15.  
  16. //Selected ellement: body adopts  new element
  17. $t->SE(“body”)->adopt( $t->element(“div”, array(“id”=>“header”) ,“Hello world!”) );
  18.  
  19. //Body adopts  <br />
  20. $t->SE(“body”)->newLine();
  21.  
  22.  
  23. $picked = “”;
  24. if (isset( $_GET[“cd”] )) {
  25.  $picked = ” you have selected #”.$_GET[“cd”];
  26. }
  27.  
  28. //Body adopts new element div: with assigned properties as second argument and text as content;
  29. $t->SE(“body”)->adopt( $t->element(“div”, array(“style”=>“margin:10px; padding:10px; border:1px solid #444;”), “Counting down:”.$picked) );
  30.  
  31. // $select  = new Element()
  32. $select = $t->element(“select”, array(“name”=>“cd”), “”);
  33.  
  34. //Body adopts new element of type form
  35. $t->SE(“body”)->adopt( $t->element(“form”, array(“id”=>“newForm”,“method”=>“get”) ) );
  36. //Selects new element by ID and adopts previously defined element $select
  37. $t->S(“newForm”)->adopt( $select );
  38. // #newForm adopts new Element input
  39. $t->S(“newForm”)->adopt( $t->element(“input”, array(“type”=>“submit”, “value”=>“CLICK!”) ) );
  40.  
  41.  
  42. for ($i=1; $i<=20; $i++) {
  43.     //$newOption is new option element
  44.     $newOption = $t->element(“option”, array(“value”=>$i), “Count down: “ . $i );
  45.     //$select adopt as it’s first child the $newOption element
  46.     $select->adoptTop( $newOption );
  47.     if ( isset($_GET[“cd”]) && $_GET[“cd”] == $i ) {
  48.         //Setting an attribute to an element
  49.         $newOption->setProperty(“selected”,“selected”);
  50.     }
  51. }
  52.  
  53. //Body accepts  new style rules
  54. $t->SE(“body”)->setStyle(“margin”,“10px”);
  55.  
  56. //Body adopts <br />
  57. $t->SE(“body”)->newLine();
  58.  
  59. //Appending text to the body
  60. $t->SE(“body”)->appendText(“and here comes the appended text”);
  61.  
  62. //Body is adopting the inc.html contents
  63. $t->SE(“body”)->adopt( $t->includeFile(“inc.html”) );
  64.  
  65. if (!isset( $_GET[“cd”] )) {
  66.     //Make simple alert with javascript
  67.     $t->alert(“Hello and welcome to mooHP”);
  68. }
  69.  
  70. //Setting the <title> tah innerHTML
  71. $t->setPageTitle(“..:: Hello and welcome to mooHP ::..”);
  72.  
  73.  
  74. //Creating new instance of the css class
  75. $newCss = new css();
  76. //Setting rule in css
  77. $newCss->setStyle(“color”,“#ff9900″);
  78. //Setting rules in css
  79. $newCss->setStyles(array(“font-weight”=>“bold”,“font-size”=>“24px” ));
  80. //Writing the defined css to element
  81. $newCss->writeToElement( $t->S(“header”) );
  82.  
  83.  
  84. //Creating new instance of the css class
  85. $newCss2 = new css();
  86. //Setting rule in css
  87. $newCss2->setStyle(“border”,“10px solid #DDD”);
  88. //Setting rule in css
  89. $newCss2->setStyle(“padding”,“10px”);
  90. //Writing the defined css as #newForm selector in $t dom instance
  91. $newCss2->writeToDom(“#newForm”, $t);
  92.  
  93. //Writing the page   if true is passed as argument the page will be compresed
  94. $t->writePage(true);
  95.  
  96. ?>

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/

0 comentarios » por: Ajaxman Lunes, 28 Abr 2008 a las 10:29 am Pertenece a : Ajax, Javascript, Librerias, Mootools, Programacion, Recursos Comparte

[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

HTML:
  1. <script src=“http://www.ajaxman.net/projects/timeframe/scripts/prototype.js” type=“text/javascript”></script>
  2. <script src=“http://www.ajaxman.net/projects/timeframe.js” type=“text/javascript”></script>

Una vez solicitados los Archivos Javascript los usamos con Javascript

JAVASCRIPT:
  1. //<![CDATA[
  2.       new Timeframe(‘calendars’, {
  3.         startfield: ’start’,
  4.         endfield: ‘end’,
  5.         previousbutton: ‘previous’,
  6.         todaybutton: ‘today’,
  7.         nextbutton: ‘next’,
  8.         resetbutton: ‘reset’ });
  9.     //]]>

Y con lo cual obtendriamos algo como esto.
Seguir leyendo […]

2 comentarios » por: Ajaxman Miércoles, 23 Abr 2008 a las 10:31 am Pertenece a : Ajax, Javascript, Librerias, Programacion, Recursos Comparte

[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

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

0 comentarios » por: Ajaxman Martes, 01 Abr 2008 a las 12:38 am Pertenece a : Ajax, Ajaxman, Javascript, Jquery, Pdf, Programacion, Recursos, Tips, Videos Comparte

[Recursos] Resumen de una encuesta sobre desarrollo web y Ajax

Antes de que me digan ¿y donde esta la encuesta? dejeneme decirles que esta encuesta no la hice yo, si no la hiciceron en http://www.nitobi.com/survey/.

Y lo encontre visitando ajaxian, y bueno les cuento sobre esto:

Se hizo una encuesta sobre algunos gustos y preferencias sobre desarrollo web y ajax, los resultados muestran varias tendencias sobre los frameworks ajax mas usados asi como el lenguaje de script del lado del servidor tambien mas usado o talvez preferido.

Hubo varias preguntas y respuestas pero las que sin duda me interesaron mas fueron:

¿Que Plataformas de desarrollo que está usando?

La respuesta con grafica y con numeros.

encuesta ajax

  • PHP: 296
  • Just HTML and CSS: 289
  • Java (other): 177
  • .Net: 163
  • Cold Fusion: 105
  • JSP: 105
  • Servlets: 89
  • Other (please specify): 57
  • Struts: 51
  • Python: 46
  • Rails: 42
  • Flex: 27
  • JSF: 23

¿Qué herramientas de desarrollo usas (seleccione todos los que correspondan)?

En este caso el resultado es:
encuesta ajax

  • Eclipse: 289
  • Dreamweaver: 241
  • NotePad: 156
  • Visual Studio: 154
  • Aptana: 105
  • Other (please specify): 80
  • Textmate: 42
  • Flex Builder: 39
  • BBEdit: 36
  • NotePad++: 33

Aqui un detalle, muchos usan eclipse y otros mas usan dreamweaver, yo uso rapidphp y es excelente aunque solo esta disponible para windows, pero sin duda su flexibilidad y caracteristicas lo hacen fenomenal, ojala y fuera opensource, pero aun asi lo uso por encima de dreamweaver, no es un post patrocinado ni nada, pero deberian probarlo.

Y una sobre el uso de ajax (la que mas nos interesa) Seguir leyendo […]

0 comentarios » por: Ajaxman Martes, 25 Mar 2008 a las 3:08 pm Pertenece a : Ajax, Ajaxman, Flex, Internet, Java, Javascript, Jquery, Librerias, Mootools, Php, Programacion, Recursos Comparte

[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)

2 comentarios » por: Ajaxman Miércoles, 12 Mar 2008 a las 2:13 pm Pertenece a : Ajax, Ajaxman, Geek, Javascript, Jquery, Librerias, Programacion, Recursos Comparte

[Javascript] ECMAScript 4 Segunda etapa: Liberado

Francis Cheng, anuncia la liberacion de la especificacion ECMAScript 4, en su segunda etapa, la cual nos trae muchas mejoras:
Completa Implementacion de:

  • classes and interfaces
  • namespaces
  • pragmas
  • let, const, let-const
  • iterators
  • enumerability control
  • type expressions / definitions / annotations
  • runtime type checks (”standard mode”)
  • nullability
  • destructuring assignment
  • slice syntax
  • hashcode
  • catchalls
  • map & vector
  • date & time improvements
  • meta objects
  • static generics
  • string trim
  • typeof
  • globals
  • expression closures
  • name objects
  • type operators (is / to / cast / wrap)

Implementacion en parte:

  • inheritance checking
  • strict mode
  • type parameters
  • structural types
  • numbers & decimal
  • getters & setters (structural part is incomplete)
  • packages

Implementado parcialmente:

  • program units
  • generic function
  • updates to unicode
  • updates to regexps

No implementado:

  • generators
  • tail calls
  • triple quotes
  • stack inspection
  • reformed with
  • resurrected eval (eval exists but may be wrong)
  • help for the argument object
  • “this function” / “this generator”

Nota: Esta en ingles por que se comprende mejor su funcionalidad en Javascript.

Tambien les dejo un video de muy larga duracion 58 Minutos, que esta en ingles pero vemos ejemplos de las mejoras hechas a Javascript o sea ECMAScript

Seguir leyendo […]

0 comentarios » por: Ajaxman Miércoles, 27 Feb 2008 a las 11:57 am Pertenece a : Ajax, Ajaxman, Geek, Javascript, Noticias, Programacion Comparte
  

Buscar

¿No esta el articulo en portada? Utiliza nuestro buscador.

Realiza una donación a este blog

Agrega a Ajaxman a tus favoritos

Add to Technorati Favorites