{labola.org} Javascript y HTML
5 views
Skip to first unread message
Alberto
Aug 8, 2008, 12:57:09 PM8/8/08
to labola.org
Hola, ¿A la hora de usar Javascript para modificar alguna parte del
HTML como lo haceis? ¿Mezclais el código Javascript con el de HTML o
utilizais algún método o framework para reducir el acomplamiento y no
mezclar Javascript y HTM?
Es por ejemplo para poner un texto en negrita podría hacerlo así:
object.innerHTML = "<b>"+ texto_original +"</b>
Es algo sencillo, pero hay mucho acomplamiento y mezclo el HTML con
Javascript. El problema llega cuando quiero crear una estructura de
"div's" a partir de un objeto en JSON. Es bastante más complejo y si
en un futuro quiero modificarlo no va ser sencillo.
La verdad es que me extraña que no haya inventada ninguna metodología
o patrón de diseño para solucionar esto.
Una cosa que se me ocurrió para centralizar un poco la generación del
HTML y no tenerlo repartido por un montón de funciones es crearme una
función única llamada "render_object". A ésta función se le pasa el
objeto en JSON y devuelve su código HTML. Para saber que HTML tiene
que generar , primero mira a que clase pertenece el objeto, y luego
según la clase a la que pertenezca se genera su correspondiente HTML.
Así, siempre que quiera pasar un objeto a HTML solo tengo que llamar a
la función "render_object(objecto_json)", y si en un futuro quiero
cambiar el HTML de la clase solo tengo que irme a la función y cambiar
su HTML.
Un saludo, Alberto
HTML como lo haceis? ¿Mezclais el código Javascript con el de HTML o
utilizais algún método o framework para reducir el acomplamiento y no
mezclar Javascript y HTM?
Es por ejemplo para poner un texto en negrita podría hacerlo así:
object.innerHTML = "<b>"+ texto_original +"</b>
Es algo sencillo, pero hay mucho acomplamiento y mezclo el HTML con
Javascript. El problema llega cuando quiero crear una estructura de
"div's" a partir de un objeto en JSON. Es bastante más complejo y si
en un futuro quiero modificarlo no va ser sencillo.
La verdad es que me extraña que no haya inventada ninguna metodología
o patrón de diseño para solucionar esto.
Una cosa que se me ocurrió para centralizar un poco la generación del
HTML y no tenerlo repartido por un montón de funciones es crearme una
función única llamada "render_object". A ésta función se le pasa el
objeto en JSON y devuelve su código HTML. Para saber que HTML tiene
que generar , primero mira a que clase pertenece el objeto, y luego
según la clase a la que pertenezca se genera su correspondiente HTML.
Así, siempre que quiera pasar un objeto a HTML solo tengo que llamar a
la función "render_object(objecto_json)", y si en un futuro quiero
cambiar el HTML de la clase solo tengo que irme a la función y cambiar
su HTML.
Un saludo, Alberto
Alberto Gimeno
Aug 12, 2008, 10:50:23 AM8/12/08
to lab...@googlegroups.com
En Ext-JS tienen un motor de plantillas sencillo implementado en JavaScript.
http://extjs.com/forum/showthread.php?t=8025
No lo he utilizado y desconozco si existe alguna otra librería
javascript que implemente algo parecido.
saludos!
2008/8/8 Alberto <supe...@gmail.com>:
--
Alberto Gimeno Brieba
Presidente y fundador de
Ribe Software S.L.
http://www.ribesoftware.com
ri...@ribesoftware.com
Contacto personal
eMail: gime...@gmail.com
GTalk: gime...@gmail.com
msn: gime...@hotmail.com
página web: http://gimenete.net
teléfono móvil: +34 625 24 64 81
http://extjs.com/forum/showthread.php?t=8025
No lo he utilizado y desconozco si existe alguna otra librería
javascript que implemente algo parecido.
saludos!
2008/8/8 Alberto <supe...@gmail.com>:
Alberto Gimeno Brieba
Presidente y fundador de
Ribe Software S.L.
http://www.ribesoftware.com
ri...@ribesoftware.com
Contacto personal
eMail: gime...@gmail.com
GTalk: gime...@gmail.com
msn: gime...@hotmail.com
página web: http://gimenete.net
teléfono móvil: +34 625 24 64 81
Alberto
Aug 12, 2008, 2:09:05 PM8/12/08
to labola.org
Desde luego es impresionante la cantidad de widgets que tiene la
librería.Lo único "malo" es que está enfocada solo a elementos
gráficos no? nada de utilidades para trabajar con javascript. Es que
ahora que me había decidido a usar jQuery, me gustaría usarlo en
combinación con extjs. Sabes si hay problemas de compatibilidades o
algo? Por cierto, no se si es mi conexión pero la librería parece algo
pesada no?
Respecto a lo de mezclar html y javascript, hace unos días vi la luz.
Me descargué una aplicación para bajar torrents para MacOS
"Transmission". En su ultima versión permite acceder a la app mediante
http, como lo hacía MlDonkey. Lo impresionante es que con JQuery han
conseguido calcar la aplicación de escritorio hasta el más mínimo
detalle. Parece que estás delante de la app hecha para Mac.
Me puse a mirar el código en Javascript que usan para ver como lo
hacían. Se nota que no es la primera página con Javascript que hacen,
está todo super "profesional". No hay nada mezclado de html y
javascript, nada de nada. Lo que hacen es poner en un solo index.html
todo el código html. Las partes que no les interesan se quedan
ocultas. Por ejemplo, cuando se llama al "inspector del fichero
torrent", aparece un frame en el que se ve la información ( tracker,
%descargado, tamaño, etc) del torrent seleccionado en la lista. Lo que
hacen para rellenar la info de ese frame es que cada hueco donde va la
información tiene un id y luego cuando quieren cambiar en el frame el
nombre del tracker no cambian el html sino que cambian solo el
contenido del DIV con el id "panel-tracer-name". De esta manera el
html se queda en el index.html y el javascript solo cambia el
contenido de los divs con la información.
Por si quereis ver la aplicación podéis bajaros el código de
Transmission desde este svn : svn co svn://svn.m0k.org/Transmission/trunk
Transmission y luego en la carpeta web está el código de la interfaz
web.
On Aug 12, 4:50 pm, "Alberto Gimeno" <gimen...@gmail.com> wrote:
> En Ext-JS tienen un motor de plantillas sencillo implementado en JavaScript.
>
> http://extjs.com/forum/showthread.php?t=8025
>
> No lo he utilizado y desconozco si existe alguna otra librería
> javascript que implemente algo parecido.
>
> saludos!
>
> 2008/8/8 Alberto <super...@gmail.com>:
> r...@ribesoftware.com
>
> Contacto personal
> eMail: gimen...@gmail.com
> GTalk: gimen...@gmail.com
> msn: gimen...@hotmail.com
librería.Lo único "malo" es que está enfocada solo a elementos
gráficos no? nada de utilidades para trabajar con javascript. Es que
ahora que me había decidido a usar jQuery, me gustaría usarlo en
combinación con extjs. Sabes si hay problemas de compatibilidades o
algo? Por cierto, no se si es mi conexión pero la librería parece algo
pesada no?
Respecto a lo de mezclar html y javascript, hace unos días vi la luz.
Me descargué una aplicación para bajar torrents para MacOS
"Transmission". En su ultima versión permite acceder a la app mediante
http, como lo hacía MlDonkey. Lo impresionante es que con JQuery han
conseguido calcar la aplicación de escritorio hasta el más mínimo
detalle. Parece que estás delante de la app hecha para Mac.
Me puse a mirar el código en Javascript que usan para ver como lo
hacían. Se nota que no es la primera página con Javascript que hacen,
está todo super "profesional". No hay nada mezclado de html y
javascript, nada de nada. Lo que hacen es poner en un solo index.html
todo el código html. Las partes que no les interesan se quedan
ocultas. Por ejemplo, cuando se llama al "inspector del fichero
torrent", aparece un frame en el que se ve la información ( tracker,
%descargado, tamaño, etc) del torrent seleccionado en la lista. Lo que
hacen para rellenar la info de ese frame es que cada hueco donde va la
información tiene un id y luego cuando quieren cambiar en el frame el
nombre del tracker no cambian el html sino que cambian solo el
contenido del DIV con el id "panel-tracer-name". De esta manera el
html se queda en el index.html y el javascript solo cambia el
contenido de los divs con la información.
Por si quereis ver la aplicación podéis bajaros el código de
Transmission desde este svn : svn co svn://svn.m0k.org/Transmission/trunk
Transmission y luego en la carpeta web está el código de la interfaz
web.
On Aug 12, 4:50 pm, "Alberto Gimeno" <gimen...@gmail.com> wrote:
> En Ext-JS tienen un motor de plantillas sencillo implementado en JavaScript.
>
> http://extjs.com/forum/showthread.php?t=8025
>
> No lo he utilizado y desconozco si existe alguna otra librería
> javascript que implemente algo parecido.
>
> saludos!
>
>
> Contacto personal
> eMail: gimen...@gmail.com
> GTalk: gimen...@gmail.com
> msn: gimen...@hotmail.com
Alberto Gimeno
Aug 12, 2008, 7:03:46 PM8/12/08
to lab...@googlegroups.com
Hola!
ExtJS tiene el problema de su licencia. Pasó de ser BSD a ser LGPL y
ahora es GPL. Según el principal desarrollador si utilizas su librería
todo tu código html y javascript que utilice la librería debe ser GPL.
Hasta aquí normal por la naturaleza de la GPL. Pero también afirma que
tu código del servidor debe ser GPL, lo que yo no tengo nada claro.
Para evitar problemas yo dejé de utilizarla. También puedes comprar
una licencia comercial y entonces tu código no tiene por qué ser GPL.
Aquí un trozo de la historia que se montó cuando cambiaron recientemente a GPL:
http://stephan.reposita.org/archives/2008/04/22/when-people-dont-understand-gpl-and-lgpl/
Y, sí, es bastante pesada. También tiene cosas para utilizar sólo
AJAX, sin componentes, pero no tan potente como jQuery. Si la quieres
utilizar con JQuery no tienes problema, porque jQuery tiene licencia
doble: GPL y MIT. Pero, obviamente, sigues teniendo el problema
anterior.
Lo de la "ténica" de los elementos HTML con ids me ha dado una idea.
Sólo con ids tienes un problema si tener que generar HTML para un
array de datos: no debes repetir el id. Se me ocurre lo siguiente.
Supón un foro que utiliza AJAX:
<!-- HTML de la página -->
<div id="comment-template" style="display:none">
<div class="comment"><p><span class='author'></span> escribió en <span
class='date'></span></p> <p class='content'></p></div>
</div>
<div id="comments">
</div>
// javascript que añade un comentario
// clonas el <div class="comment"> que te sirve de plantilla
var new_comment = $('#comment-template > div').clone();
// "rellenas los huecos", utilizando clases en los selectores
$('.author', new_comment).html('nombre del autor');
$('.date', new_comment).html('la fecha);
$('.content', new_comment).html('el contenido);
// añades el nuevo contenido
$('#comments').append(new_comment);
saludos!
2008/8/12 Alberto <supe...@gmail.com>:
ExtJS tiene el problema de su licencia. Pasó de ser BSD a ser LGPL y
ahora es GPL. Según el principal desarrollador si utilizas su librería
todo tu código html y javascript que utilice la librería debe ser GPL.
Hasta aquí normal por la naturaleza de la GPL. Pero también afirma que
tu código del servidor debe ser GPL, lo que yo no tengo nada claro.
Para evitar problemas yo dejé de utilizarla. También puedes comprar
una licencia comercial y entonces tu código no tiene por qué ser GPL.
Aquí un trozo de la historia que se montó cuando cambiaron recientemente a GPL:
http://stephan.reposita.org/archives/2008/04/22/when-people-dont-understand-gpl-and-lgpl/
Y, sí, es bastante pesada. También tiene cosas para utilizar sólo
AJAX, sin componentes, pero no tan potente como jQuery. Si la quieres
utilizar con JQuery no tienes problema, porque jQuery tiene licencia
doble: GPL y MIT. Pero, obviamente, sigues teniendo el problema
anterior.
Lo de la "ténica" de los elementos HTML con ids me ha dado una idea.
Sólo con ids tienes un problema si tener que generar HTML para un
array de datos: no debes repetir el id. Se me ocurre lo siguiente.
Supón un foro que utiliza AJAX:
<!-- HTML de la página -->
<div id="comment-template" style="display:none">
<div class="comment"><p><span class='author'></span> escribió en <span
class='date'></span></p> <p class='content'></p></div>
</div>
<div id="comments">
</div>
// javascript que añade un comentario
// clonas el <div class="comment"> que te sirve de plantilla
var new_comment = $('#comment-template > div').clone();
// "rellenas los huecos", utilizando clases en los selectores
$('.author', new_comment).html('nombre del autor');
$('.date', new_comment).html('la fecha);
$('.content', new_comment).html('el contenido);
// añades el nuevo contenido
$('#comments').append(new_comment);
saludos!
2008/8/12 Alberto <supe...@gmail.com>:
Ribe Software S.L.
http://www.ribesoftware.com
ri...@ribesoftware.com
Contacto personal
eMail: gime...@gmail.com
GTalk: gime...@gmail.com
msn: gime...@hotmail.com
http://www.ribesoftware.com
ri...@ribesoftware.com
Contacto personal
eMail: gime...@gmail.com
GTalk: gime...@gmail.com
msn: gime...@hotmail.com
Alberto
Aug 12, 2008, 10:54:57 PM8/12/08
to labola.org
He estado mirando como hace la web de Transmission y la verdad es que
me parece mucho mejor tu idea. Está mucho más desacoplada y es
bastante más elegante. En la web de transmissión cuando quieren añadir
un nuevo torrent a lista lo que hacen es crear el html poco a poco. Es
decir, primero creo un "div" y le pongo la clase "name", luego creo
otro "div" y le pongo la clase "image_torrent" y lo concateno con el
anterior, y así sucesivamente. Al final, ese elemento nuevo se añade a
la lista con un append. Esto es parte del código:
// Create the 'progress details' <div>
e = $('<div/>');
e.addClass('torrent_progress_details');
element.append(e);
element._progress_details_container = e;
// Create the 'in progress' bar
e = $('<div/>');
e.addClass('torrent_progress_bar incomplete');
e.css('width', '0%');
element.append( e );
element._progress_complete_container = e;
.....
// insert the element
$('#torrent_list').append(this._element);
Es otra manera de crear el html pero sigue dependiendo el javascript
del HTML. Con tu manera se escribe mucho menos código, y si cambias
algo en el HTML no hace falta cambiar nada en el Javascript.
Por cierto, vaya cagada lo de extjs con la licencia. Han trabajado un
montón en las librerías para que al final no las utilice en serio casi
nadie por la licencia. A ver quien se dedica a hacer una web para
luego liberar todo el fuente. Yo por lo menos no.
A ver si poco a poco, vamos sacando una metodología para desarrollar
Javascript desacoplado.,jejejeje
On Aug 13, 1:03 am, "Alberto Gimeno" <gimen...@gmail.com> wrote:
> Hola!
>
> ExtJS tiene el problema de su licencia. Pasó de ser BSD a ser LGPL y
> ahora es GPL. Según el principal desarrollador si utilizas su librería
> todo tu código html y javascript que utilice la librería debe ser GPL.
> Hasta aquí normal por la naturaleza de la GPL. Pero también afirma que
> tu código del servidor debe ser GPL, lo que yo no tengo nada claro.
> Para evitar problemas yo dejé de utilizarla. También puedes comprar
> una licencia comercial y entonces tu código no tiene por qué ser GPL.
>
> Aquí un trozo de la historia que se montó cuando cambiaron recientemente a GPL:http://stephan.reposita.org/archives/2008/04/22/when-people-dont-unde...
> 2008/8/12 Alberto <super...@gmail.com>:
me parece mucho mejor tu idea. Está mucho más desacoplada y es
bastante más elegante. En la web de transmissión cuando quieren añadir
un nuevo torrent a lista lo que hacen es crear el html poco a poco. Es
decir, primero creo un "div" y le pongo la clase "name", luego creo
otro "div" y le pongo la clase "image_torrent" y lo concateno con el
anterior, y así sucesivamente. Al final, ese elemento nuevo se añade a
la lista con un append. Esto es parte del código:
// Create the 'progress details' <div>
e = $('<div/>');
e.addClass('torrent_progress_details');
element.append(e);
element._progress_details_container = e;
// Create the 'in progress' bar
e = $('<div/>');
e.addClass('torrent_progress_bar incomplete');
e.css('width', '0%');
element.append( e );
element._progress_complete_container = e;
.....
// insert the element
$('#torrent_list').append(this._element);
Es otra manera de crear el html pero sigue dependiendo el javascript
del HTML. Con tu manera se escribe mucho menos código, y si cambias
algo en el HTML no hace falta cambiar nada en el Javascript.
Por cierto, vaya cagada lo de extjs con la licencia. Han trabajado un
montón en las librerías para que al final no las utilice en serio casi
nadie por la licencia. A ver quien se dedica a hacer una web para
luego liberar todo el fuente. Yo por lo menos no.
A ver si poco a poco, vamos sacando una metodología para desarrollar
Javascript desacoplado.,jejejeje
On Aug 13, 1:03 am, "Alberto Gimeno" <gimen...@gmail.com> wrote:
> Hola!
>
> ExtJS tiene el problema de su licencia. Pasó de ser BSD a ser LGPL y
> ahora es GPL. Según el principal desarrollador si utilizas su librería
> todo tu código html y javascript que utilice la librería debe ser GPL.
> Hasta aquí normal por la naturaleza de la GPL. Pero también afirma que
> tu código del servidor debe ser GPL, lo que yo no tengo nada claro.
> Para evitar problemas yo dejé de utilizarla. También puedes comprar
> una licencia comercial y entonces tu código no tiene por qué ser GPL.
>
Joaquin Cuenca Abela
Aug 15, 2008, 5:12:57 AM8/15/08
to lab...@googlegroups.com
para paginas pequenyas / medianas, lo mas recomendable en mi opinion
es lo que comentais de tener un div oculto en el html, clonar y
rellenar con JS. Asi es como lo hice en ciertas partes del upload de
Panoramio y va bastante bien.
es lo que comentais de tener un div oculto en el html, clonar y
rellenar con JS. Asi es como lo hice en ciertas partes del upload de
Panoramio y va bastante bien.
Lo que comentais de la GPL, que el tio se crea que el codigo servidor
tiene que pasar a GPL no quiere decir que sea el caso. Otra cosa,
aunque el codigo servidor fuese GPL eso no significa que le tengais
que ensenyar el codigo a nadie, a no ser que vendais el codigo que
usais en el servidor. Si no distribuis el codigo no teneis porque dar
el fuente (creo que esto cambia en la GPLv3).
2008/8/13 Alberto <supe...@gmail.com>:
--
Joaquin Cuenca Abela
Alberto
Aug 15, 2008, 8:58:57 AM8/15/08
to labola.org
Y cuando la página es grande? como lo haces para panoramio? Con grande
a que te refieres, grande en visitas o grande en funcionalidades? Es
que no se me ocurre ningún problema de escalabilidad con JS.
On Aug 15, 11:12 am, "Joaquin Cuenca Abela" <e98cu...@gmail.com>
wrote:
a que te refieres, grande en visitas o grande en funcionalidades? Es
que no se me ocurre ningún problema de escalabilidad con JS.
On Aug 15, 11:12 am, "Joaquin Cuenca Abela" <e98cu...@gmail.com>
wrote:
> para paginas pequenyas / medianas, lo mas recomendable en mi opinion
> es lo que comentais de tener un div oculto en el html, clonar y
> rellenar con JS. Asi es como lo hice en ciertas partes del upload de
> Panoramio y va bastante bien.
>
> Lo que comentais de la GPL, que el tio se crea que el codigo servidor
> tiene que pasar a GPL no quiere decir que sea el caso. Otra cosa,
> aunque el codigo servidor fuese GPL eso no significa que le tengais
> que ensenyar el codigo a nadie, a no ser que vendais el codigo que
> usais en el servidor. Si no distribuis el codigo no teneis porque dar
> el fuente (creo que esto cambia en la GPLv3).
>
> 2008/8/13 Alberto <super...@gmail.com>:
> es lo que comentais de tener un div oculto en el html, clonar y
> rellenar con JS. Asi es como lo hice en ciertas partes del upload de
> Panoramio y va bastante bien.
>
> Lo que comentais de la GPL, que el tio se crea que el codigo servidor
> tiene que pasar a GPL no quiere decir que sea el caso. Otra cosa,
> aunque el codigo servidor fuese GPL eso no significa que le tengais
> que ensenyar el codigo a nadie, a no ser que vendais el codigo que
> usais en el servidor. Si no distribuis el codigo no teneis porque dar
> el fuente (creo que esto cambia en la GPLv3).
>
Alberto
Aug 16, 2008, 8:43:42 AM8/16/08
to labola.org
Mirad lo que me acabo de encontrar. http://plugins.jquery.com/project/jquerytemplate
El sistema de plantillas como el de django pero para Javascript. Está
hecho con Jquery. Parece que esto va a ser la mejor opción. Aunque
tiene el problema de que la web esté en varios idiomas, ya que habría
que tener una plantilla para cada idioma.
> > >> Ribe Software S.L.http://www.ribesoftware.com...
>
> read more »
El sistema de plantillas como el de django pero para Javascript. Está
hecho con Jquery. Parece que esto va a ser la mejor opción. Aunque
tiene el problema de que la web esté en varios idiomas, ya que habría
que tener una plantilla para cada idioma.
>
> read more »
Joaquin Cuenca Abela
Aug 17, 2008, 6:05:16 PM8/17/08
to lab...@googlegroups.com
con "grande" me refiero a que haya tantisimo contenido dinamico que
sea un lio pregenerarlo todo en el html. Entonces usaria un sistema de
templates en JS. En Panoramio no tenemos ese problema.
sea un lio pregenerarlo todo en el html. Entonces usaria un sistema de
templates en JS. En Panoramio no tenemos ese problema.
2008/8/15 Alberto <supe...@gmail.com>:
--
Joaquin Cuenca Abela
Reply all
Reply to author
Forward
0 new messages