tag:blogger.com,1999:blog-116429862008-06-22T18:19:59.497+02:00Blog de Diego Gómez DeckDiego Gomez Deckhttp://www.blogger.com/profile/11016380965975303930noreply@blogger.comBlogger87125tag:blogger.com,1999:blog-11642986.post-84535998437187677352007-04-28T09:54:00.000+02:002007-04-28T09:58:55.513+02:00¡Ladran Sancho! Señal que cabalgamos...¡Cómo me gusta que <a href="http://en.wikipedia.org/wiki/Criticism_of_Microsoft">esta gente</a> se ponga nerviosa!<br /><br />Véanlo ustedes mismos, en barrapunto: <span style="text-decoration: underline;"></span><span style="font-size:130%;"><a href="http://barrapunto.com/article.pl?sid=07/04/27/1141253">Microsoft y Extremadura</a></span>Diego Gomez Deckhttp://www.blogger.com/profile/11016380965975303930noreply@blogger.comtag:blogger.com,1999:blog-11642986.post-44064888254347134062007-03-12T09:37:00.000+01:002007-03-12T09:43:43.056+01:00Vídeo de la charla “Squeak en la OLPC” - Conferencia Internacional de Software Libre 3.0 (Badajoz, Febrero/2007)Haciendo un <a href="http://www.google.es/search?q=diego+%22gomez+deck%22">poco de egogoogling</a> me encontré que, en el sitio <a href="http://www.archive.org/">www.archive.org</a>, hay un vídeo con licencia creative commons de mi última presentación, en la conferencia de software libre de Badajoz.<br /><br /><p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://bp0.blogger.com/_iDMF0x4pln0/RfUSUbmU7sI/AAAAAAAAAGg/vGWa3b0INaU/s1600-h/olpc1.png"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="http://bp0.blogger.com/_iDMF0x4pln0/RfUSUbmU7sI/AAAAAAAAAGg/vGWa3b0INaU/s400/olpc1.png" alt="" id="BLOGGER_PHOTO_ID_5040955500126334658" border="0" /></a><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://bp1.blogger.com/_iDMF0x4pln0/RfUSUrmU7tI/AAAAAAAAAGo/k_GwB3WjBGI/s1600-h/olpc2.png"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="http://bp1.blogger.com/_iDMF0x4pln0/RfUSUrmU7tI/AAAAAAAAAGo/k_GwB3WjBGI/s400/olpc2.png" alt="" id="BLOGGER_PHOTO_ID_5040955504421301970" border="0" /></a></p><p><br /></p> <p>Pueden bajar el vídeo desde esta página:</p> <p align="center"><a href="http://www.archive.org/details/FSWCOLPCSqueak">http://www.archive.org/details/FSWCOLPCSqueak</a></p> <p><br /><br /></p> <p>También podemos encontrar el audio de la <a href="http://www-org.rtve.es/?go=111b735a516af85c54ba5009b84fd04cbd9cd6ea14231d5e5a5cf6c735b165568ae49e60ef3fd4161428f97083f9fa26">edición especial del programa de radio “Red Babel”</a>, que se emite los sábados en RNE 3 (Radio Nacional de España 3); sobre Software Libre en general, donde compartí mesa con Richard Stallman, Marcelo Branco, Paco Huertas, etc.</p> <p><br /></p> <p>Pueden bajar el audio de las 2 horas de programa desde acá:</p> <p style="text-align: center;"><a href="http://www.rtve.es/rne/r3/audios/prog/redbabel/red_20070210_a.mp3">http://www.rtve.es/rne/r3/audios/prog/redbabel/red_20070210_a.mp3</a> </p><div style="text-align: center;"> </div><p style="text-align: center;"><a href="http://www.rtve.es/rne/r3/audios/prog/redbabel/red_20070210_b.mp3">http://www.rtve.es/rne/r3/audios/prog/redbabel/red_20070210_b.mp3</a></p><br />¡Qué lo disfruten!Diego Gomez Deckhttp://www.blogger.com/profile/11016380965975303930noreply@blogger.comtag:blogger.com,1999:blog-11642986.post-56357087998780760852007-03-08T12:22:00.000+01:002007-03-08T12:35:08.991+01:00Webcam, en Squeak, en la OLPC, a 20 cuadros por segundo<p style="margin-bottom: 0cm;" align="center"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://bp0.blogger.com/_iDMF0x4pln0/Re_yyAKnT7I/AAAAAAAAAGQ/zKdXh6pIOd4/s1600-h/world.png"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="http://bp0.blogger.com/_iDMF0x4pln0/Re_yyAKnT7I/AAAAAAAAAGQ/zKdXh6pIOd4/s400/world.png" alt="" id="BLOGGER_PHOTO_ID_5039513448902774706" border="0" /></a></p> <p style="margin-bottom: 0cm;"><br /></p>Una cosa es hacer andar código viejo en la OLPC, y otra muy distinta es que ese código funcione de forma aceptable. En el procesamiento de vídeo es, tal vez, uno de los objetivos más ambiciosos sobre la OLPC. <p style="margin-bottom: 0cm;">Imaginemos que tenemos que procesar 20 cuadros por segundo, y que la imagen mide 320x240 píxeles. Cada píxel está compuesto por 3 datos (la parte Roja, la parte Verde, y la parte Azul) que se denominan RGB (Red, Green, Blue). Si tenemos que procesar cada punto de la imagen, tendremos que procesar 320x240 veces, por cada cuadro, las operaciones para la parte Roja, Verde y Azul.</p> <p style="margin-bottom: 0cm;">Para lograr tener 20 cuadros por segundo, con una imagen de 320x240, tendremos que realizar:</p> <p style="margin-bottom: 0cm; font-style: normal;" align="center"><span style="font-size:100%;"><b>320 </b><span style=""><i>(ancho)</i></span><b> * 240 </b><span style=""><i>(alto)</i></span><b> * 3 </b><span style=""><i>(RGB)</i></span><b> * 20 </b><span style=""><i>(cuadros/seg)</i></span><b> = 4.608.000 </b><span style=""><i>(operaciones/seg)</i></span></span></p> <p style="margin-bottom: 0cm;">En un procesamiento como ese, la poca velocidad de la OLPC se hace notar.</p> <p style="margin-bottom: 0cm;"><br />Bueno, el primer port del código Linux a la OLPC, fue prácticamente sin problemas <span style="font-style: italic;">PERO</span> la velocidad de procesamiento obtenida era de lástima. Sólo procesaba 3 cuadros por segundo.</p> <p style="margin-bottom: 0cm;">Después de algunos cambios en el código (evitar aritmética de coma flotante, loop unrolling, uso de bitmaps de 16 bits en lugar de 32 bits, etc) logramos 20 cuadros por segundo.</p> <p style="margin-bottom: 0cm;"><br /></p><p style="margin-bottom: 0cm;">Una cosa a tener en cuenta es que el modelo y la filosofía de Squeak imponen mayores requerimientos al código. Dicho de otra forma: Procesar vídeo en Squeak no es SOLO mostrar un vídeo a pantalla completa, lo más rápido posible. Si sólo hiciésemos eso, podríamos obtener los mismos 30 cuadros x segundo con una imagen de 640x480 pixeles que logran la mayoría de los programas de control de cámaras de vídeo. Procesar vídeo en Squeak es integrar el vídeo como un ciudadano de pleno derecho dentro del mundo de objetos 100% manipulables y programables.</p> <p style="margin-bottom: 0cm;">No sirve de nada poder ver vídeo si no podemos hacer nada con el. En Squeak el vídeo puede ser manipulado como cualquier otro objeto (se puede rotar, mover, cambiar de tamaño, etc). También puede ser programado desde guiones de eToys.</p> <p style="margin-bottom: 0cm;">Este es el vocabulario del objeto de vídeo:</p> <p style="margin-bottom: 0cm;" align="center"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://bp0.blogger.com/_iDMF0x4pln0/Re_yyAKnT8I/AAAAAAAAAGY/AEoy6iyxXYA/s1600-h/VocabularioVideoEnglish.png"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="http://bp0.blogger.com/_iDMF0x4pln0/Re_yyAKnT8I/AAAAAAAAAGY/AEoy6iyxXYA/s400/VocabularioVideoEnglish.png" alt="" id="BLOGGER_PHOTO_ID_5039513448902774722" border="0" /></a></p> <p style="margin-bottom: 0cm;"><br />Con este vocabulario (y el vocabulario de los demás objetos Squeak) se pueden hacer algunos experimentos interesantes.... Por ejemplo: Si hacemos <a href="http://swiki.agro.uba.ar/small_land/170">una animación en Squeak, de las clásicas</a>, pero si en lugar de llenar el Contenedor con dibujos hechos a mano, lo llenamos con 1 cuadro por segundo desde la webcam (usando la propiedad #lastFrame), obtendremos una animación que es un vídeo acelerado (como esos vídeo de crecimiento acelerado de las plantas que ponen en los canales de documentales, o una manzana que se pudre en 20 segundos, etc) de lo que esté capturando la Webcam.</p> <p style="margin-bottom: 0cm;"><br /></p> <p style="margin-bottom: 0cm;">Lo más interesante de esta opción es que, el vídeo acelerado, es una producción del niño. No usa la opción “mostrar vídeo acelerado” que hace todo por el, sino que tiene que enfrentarse a resolver el problema, usando conocimiento que ya tiene. Muy en la línea de Squeak.</p><br /><br /><div style="text-align: left;">Para terminar les dejo una pregunta:<br /></div><p style="margin-bottom: 0cm; font-style: italic; font-weight: bold; text-align: center;">¿Qué otros experimentos se podrán hacer con la Webcam y Squeak?</p><p style="margin-bottom: 0cm; font-style: italic; font-weight: bold; text-align: center;"><br /></p>Diego Gomez Deckhttp://www.blogger.com/profile/11016380965975303930noreply@blogger.comtag:blogger.com,1999:blog-11642986.post-12692306239605863962007-01-03T15:39:00.000+01:002007-01-03T17:12:45.033+01:00Mis impresiones sobre la OLPC Prototipo BTest-1De la misma forma en que <a href="http://diegogomezdeck.blogspot.com/2006/11/fotos-de-un-prototipo-de-olpc-la.html">se adelantó Papá Noel</a>, los Reyes me trajeron el <a href="http://wiki.laptop.org/go/BTest-1_Release_Notes">“prototipo B1” de la OLPC</a>.<br /><br /><p style="margin-bottom: 0cm;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://wiki.laptop.org/images/e/e9/Drawing75c.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px;" src="http://wiki.laptop.org/images/e/e9/Drawing75c.jpg" alt="" border="0" /></a></p> <p style="margin-bottom: 0cm;"><a href="http://wiki.laptop.org/images/e/e9/Drawing75c.jpg"></a><br />Debemos recordar que el proyecto OLPC no es un proyecto tecnológico, sino que es un proyecto educativo. Las diferentes decisiones que se fueron tomando, fueron siempre considerando que el objetivo es hacer una computa barata, portátil, fuerte y eficiente que será usada por chicos, para mejorar su educación, en lugares donde pueda ser difícil conseguir energía para las máquinas.</p> <p style="margin-bottom: 0cm;">Para explicar rápidamente que es una OLPC, podemos decir que es una notebook “pequeña” pero lo suficientemente “potente” para lograr un gran impacto en los procesos educativos.</p> <p style="margin-bottom: 0cm;"><br /><b>Pequeña:</b></p> <ul><li><p style="margin-bottom: 0cm;">Para los pequeños. Es una computadora pensada para ser usada por chicos.</p> <ul><li><p style="margin-bottom: 0cm;">¡Es verde!</p> </li><li><p style="margin-bottom: 0cm;">Esquinas redondeadas</p> </li><li><p style="margin-bottom: 0cm;">Manija para llevarla</p> </li><li><p style="margin-bottom: 0cm;">Tiene un joystick</p> </li><li><p style="margin-bottom: 0cm;">El teclado es de goma, para que se ensucie menos y soporte algo de agua.</p> </li><li><p style="margin-bottom: 0cm;">Las antenas, cuando están plegadas, protegen los conectores.</p> </li><li><p style="margin-bottom: 0cm;">No se puede abrir la computadora sin abrir las antenas. Esto quiere decir que, por diseño del hardware, todo el mundo siempre tendrá las antenas levantadas... maximizando la posibilidad de que la red P2P funcione.</p> </li></ul> </li></ul> <ul><li value="1"><p style="margin-bottom: 0cm;">Pequeña en Tamaño:</p> <ul><li><p style="margin-bottom: 0cm;">pesa menos de 1.5Kg</p> </li><li><p style="margin-bottom: 0cm;">el display mide 7.5”</p> </li><li><p style="margin-bottom: 0cm;">las teclas son para el tamaño de los dedos de los chicos</p> </li></ul> </li></ul> <ul><li value="1"><p style="margin-bottom: 0cm;">Poco Consumo:</p> <ul><li><p style="margin-bottom: 0cm;">Uno de los lemas del diseño es: “Más duración de la batería == Más Utilidad”.</p> </li><li><p style="margin-bottom: 0cm;">El consumo es, a grosso modo, 1/10 del consumo de una notebook “normal”. </p> </li><li><p style="margin-bottom: 0cm;">No hay partes móviles.</p> </li><li><p style="margin-bottom: 0cm;">Display con poca superficie a iluminar.</p> </li><li><p style="margin-bottom: 0cm;">Diseño en el hardware que permite el uso del display y de la placa inalámbrica con el procesador suspendido.</p> </li></ul> </li></ul> <ul><li><p style="margin-bottom: 0cm;">Barata.</p> <ul><li><p style="margin-bottom: 0cm;">El objetivo es que cada unidad se pueda vender en 100USD.</p> </li><li><p style="margin-bottom: 0cm;">El precio conseguido, hasta hoy, es de 130USD.</p> </li></ul> </li></ul> <ul><li value="1"><p style="margin-bottom: 0cm;">Pequeña en Capacidades:</p> <ul><li><p style="margin-bottom: 0cm;">Comparadas con las notebooks comerciales que se venden hoy en día, son pequeñas en capacidad. Aunque debemos recordar que el objetivo es que cada unidad cueste sólo 100USD (un costo bastante menor al de las notebooks actuales). </p> </li><li><p style="margin-bottom: 0cm;">También debemos tener en cuenta que se maximizó el ahorro de energía, así que no se consideró poner un mega-cuadruple-super-cpu que necesite un reactor nuclear para funcionar.</p> </li></ul> </li></ul> <p style="margin-bottom: 0cm;"><br /></p> <p style="margin-bottom: 0cm;"></p><p style="margin-bottom: 0cm;"><b>Potente:</b></p> <ul><li><p style="margin-bottom: 0cm;">Pantalla Dual Color/Blanco y Negro, con resolución de 1200x900 (200dpi).</p> <ul><li><p style="margin-bottom: 0cm;">La pantalla puede ponerse desde un modo de muy bajo consumo (Blanco y negro, con el backlight apagado), hasta un modo muy cómodo (Color, con la iluminación completa).</p> </li><li><p style="margin-bottom: 0cm;">La pantalla puede funcionar con el procesador suspendido. Permitiendo, mientras el chico está sólo leyendo, el ahorro de energía.</p> </li><li><p style="margin-bottom: 0cm;">El display, en modo blanco y negro y sin la luz, tiene muy buena visibilidad incluso con la luz del sol.</p> </li></ul> </li><li><p style="margin-bottom: 0cm;">Red inalámbrica con capacidad P2P.</p> <ul><li><p style="margin-bottom: 0cm;">La placa inalámbrica puede rutear paquetes mesh incluso con el procesador suspendido.</p> </li></ul> </li><li><p style="margin-bottom: 0cm;">Multimedia</p> <ul><li><p style="margin-bottom: 0cm;">2 parlantes incluidos.</p> </li><li><p style="margin-bottom: 0cm;">1 micrófono</p> </li><li><p style="margin-bottom: 0cm;">Webcam</p> </li><li><p style="margin-bottom: 0cm;">Todo lo necesario para hacer video-conferencias.</p> </li></ul> </li></ul> <ul><li><p style="margin-bottom: 0cm;">Extensible</p> <ul><li><p style="margin-bottom: 0cm;">3 puertos USB</p> </li><li><p style="margin-bottom: 0cm;">1 lector de tarjetas SD-Card.</p> </li><li><p style="margin-bottom: 0cm;">1 conector para auriculares.</p> </li><li><p style="margin-bottom: 0cm;">1 conector para micrófono (que, además, puede usarse como un puerto de conexión de sensores baratos).</p> </li></ul> </li></ul> <ul><li><p style="margin-bottom: 0cm;">Modo eBook. Se pliega el display sobre el teclado.</p> <ul><li><p style="margin-bottom: 0cm;">Cómodo para usar como libro.</p> </li><li><p style="margin-bottom: 0cm;">Cómodo para jugar.</p> </li></ul> </li></ul> <ul><li><p style="margin-bottom: 0cm;">Robusta</p> <ul><li><p style="margin-bottom: 0cm;">No tiene partes móviles. ¡NO HACE RUIDO!</p> </li><li><p style="margin-bottom: 0cm;">Los conectores son del tipo más fuerte posible.</p> </li><li><p style="margin-bottom: 0cm;">El teclado es de goma.</p> </li><li><p style="margin-bottom: 0cm;">Se van a romper 500, de las 800 y pico unidades B1 que se hicieron, para probarlas.</p> </li></ul> </li></ul> <p style="margin-bottom: 0cm;"><br /></p> <p style="margin-bottom: 0cm;"><span style="font-size:100%;">Todas las características en: </span><a href="http://wiki.laptop.org/go/Hardware_specification"><span style="font-size:100%;">http://wiki.laptop.org/go/Hardware_specification</span></a></p> <p style="margin-bottom: 0cm;">Y algunas fotos:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://smalltalk.consultar.com/olpc/completa-abierta.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 200px;" src="http://smalltalk.consultar.com/olpc/completa-abierta.JPG" alt="" border="0" /></a><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://smalltalk.consultar.com/olpc/completa-cerrada.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 200px;" src="http://smalltalk.consultar.com/olpc/completa-cerrada.JPG" alt="" border="0" /></a><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://smalltalk.consultar.com/olpc/conectores-1.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 200px;" src="http://smalltalk.consultar.com/olpc/conectores-1.JPG" alt="" border="0" /></a><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://smalltalk.consultar.com/olpc/conectores-2.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 200px;" src="http://smalltalk.consultar.com/olpc/conectores-2.JPG" alt="" border="0" /></a><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://smalltalk.consultar.com/olpc/metafoto.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 200px;" src="http://smalltalk.consultar.com/olpc/metafoto.JPG" alt="" border="0" /></a><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://smalltalk.consultar.com/olpc/completa-cerrada.JPG"><br /></a></p><p style="margin-bottom: 0cm;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://smalltalk.consultar.com/olpc/teclado.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 200px;" src="http://smalltalk.consultar.com/olpc/teclado.JPG" alt="" border="0" /></a><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://smalltalk.consultar.com/olpc/pantalla-blanco-negro.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 200px;" src="http://smalltalk.consultar.com/olpc/pantalla-blanco-negro.JPG" alt="" border="0" /></a><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://smalltalk.consultar.com/olpc/pantalla-color.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 200px;" src="http://smalltalk.consultar.com/olpc/pantalla-color.JPG" alt="" border="0" /></a></p>Diego Gomez Deckhttp://www.blogger.com/profile/11016380965975303930noreply@blogger.comtag:blogger.com,1999:blog-11642986.post-58084347520124019762006-12-21T10:54:00.000+01:002006-12-21T10:56:38.844+01:00Charla de Squeak en GUADEC (22/Mayo/2004) - Almendralejo, España<embed style="width: 400px; height: 326px;" id="VideoPlayback" type="application/x-shockwave-flash" src="http://video.google.com/googleplayer.swf?docId=4868273594928635340&hl=es" flashvars=""> </embed>Diego Gomez Deckhttp://www.blogger.com/profile/11016380965975303930noreply@blogger.comtag:blogger.com,1999:blog-11642986.post-60869228781030085112006-12-20T17:35:00.000+01:002006-12-20T17:44:40.184+01:00Conferencia Internacional de Software Libre 3.0<span style="font-family:Times New Roman,serif;">Los días 7, 8 y 9 de febrero de 2007, se celebrará la <a href="http://www.freesoftwareworldconference.com/">Conferencia Internacional de Software Libre 3.0</a>, <a href="http://www.freesoftwareworldconference.com/?q=node/14">organizada en conjunto</a> por los gobiernos regionales de la <a href="http://www.juntaex.es/">Junta de Extremadura</a> y la <a href="http://www.juntadeandalucia.es/">Junta de Andalucía</a>.</span><p></p> <p style="margin-bottom: 0cm;"><span style="font-family:Times New Roman,serif;">Estoy invitado a participar dentro de la <b>Mesa de Creadores de Conocimiento Libre</b>, el día 7 de febrero, de 18:00 a 19:30Hs; donde mostraré las novedades relacionadas con Squeak ocurridas durante el último año. Seguramente mostraré un Squeak funcionando en un prototipo de la OLPC, así como también los desarrollos relacionados con la Web 2.0, y alguna cosita más...</span></p> <p style="margin-bottom: 0cm;"><span style="font-family:Times New Roman,serif;">¡Están todos invitados!</span></p>Diego Gomez Deckhttp://www.blogger.com/profile/11016380965975303930noreply@blogger.comtag:blogger.com,1999:blog-11642986.post-1166008687535133452006-12-13T12:10:00.000+01:002006-12-17T22:47:25.590+01:00Video4Squeak funcionando en la OLPC<a href="http://diegogomezdeck.blogspot.com/2006/11/fotos-de-un-prototipo-de-olpc-la.html">Ya había comentado</a> que estaba trabajando para el <a href="http://wiki.laptop.org/go/Etoys">Squeak que vendrá instalado en las OLPC</a> (las míticas notebooks de 100USD.<p style="margin-bottom: 0cm;">Específicamente mi trabajo es lograr que el <a href="http://minnow.cc.gatech.edu/squeak/3765">Video4Squeak</a> (proyecto que yo ya tenía desarrollado para la imagen de Small-Land que usamos en Extremadura) funcione con la configuración de hardware que tienen las OLPC.</p><p style="margin-bottom: 0cm;">Sin más preámbulo, les dejo un screenshot del Video4Squeak funcionando en una OLPC (prototipo beta):</p><p style="margin-bottom: 0cm;"><br /></p> <a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://wiki.laptop.org/images/0/0f/CameraInEtoys.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px;" src="http://wiki.laptop.org/images/0/0f/CameraInEtoys.jpg" alt="" border="0" /></a><br /> En la foto podemos ver a <a href="http://croquetweak.blogspot.com/">Bert Freudenberg</a> y a <a href="http://d.hatena.ne.jp/squeaker/">Yoshiki Ohshima</a>, dos de los hackers de <a href="http://www.viewpointsresearch.org/">VPRI</a>.Diego Gomez Deckhttp://www.blogger.com/profile/11016380965975303930noreply@blogger.comtag:blogger.com,1999:blog-11642986.post-1164274332241406782006-11-23T10:25:00.000+01:002006-11-30T16:10:37.086+01:00Squeak, muy pronto, tendrá una licencia MIT<style type="text/css"> <!-- @page { size: 21cm 29.7cm; margin: 2cm } P { margin-bottom: 0.21cm } A:link { text-decoration: underline } --> </style> <p style="margin-bottom: 0cm;">No son desconocidos los “problemas” de licencia de Squeak. Por otro lado, hace poco hablábamos que <a href="http://diegogomezdeck.blogspot.com/2006/05/nueva-licencia-para-el-squeak-versin.html">Apple había acordado relicenciar el Squeak (versión 1.1) como APSL2</a>.</p> <p style="margin-bottom: 0cm;"><br />Poco después, supimos que Apple nuevamente había acordado relicenciar Squeak, y <a href="http://laptop.media.mit.edu/laptopnews.nsf/latest/news">esta vez lo hizo con una licencia Apache 2</a>.</p> <p style="margin-bottom: 0cm;">Ahora <a href="http://www.viewpointsresearch.org/">Viewpoints Research Institute</a> está encargándose de contactar a todos los autores de código incluido en Squeak después de la versión 1.1 para relicenciar todo el Squeak con una licencia MIT.</p> <p style="margin-bottom: 0cm;"><br />Yo ya envíe, por correo normal y firmado en original, el acuerdo donde acepto relicenciar la parte que me corresponde.</p><p style="margin-bottom: 0cm;"><br /></p>Diego Gomez Deckhttp://www.blogger.com/profile/11016380965975303930noreply@blogger.comtag:blogger.com,1999:blog-11642986.post-1164018436411283362006-11-20T11:20:00.000+01:002006-11-20T11:31:15.066+01:00Squeak en Extremadura y la OLPC: Ejemplos contra las patentes de software.<p>Hace algún tiempo que <a href="http://diegogomezdeck.blogspot.com/2005/04/documental-sobre-squeak-en-extremadura.html">anunciábamos el vídeo</a> que La Junta de Extremadura había producido sobre el uso de Squeak en la región.</p> <p>Este fin de semana <a href="http://lists.squeakfoundation.org/pipermail/squeak-dev/2006-November/111462.html">me enteré</a> de <a href="http://www.groklaw.net/article.php?story=20061118091048997">esta nota</a>:</p> <p style="margin-left: 1.25cm;"><a href="http://www.groklaw.net/article.php?story=20061118091048997">http://www.groklaw.net/article.php?story=20061118091048997</a></p> <p><br />La nota no tiene desperdicios, pero me quedo con estos fragmentos:</p><p><br /></p> <style type="text/css"> </style> <p style="margin-left: 1.25cm;">“<i>I enjoyed personally from the video the little girl who said Squeak introduced her to computers and she found out she likes them. Is that not what education is supposed to do for children?”</i></p> <p style="margin-left: 1.25cm;"><br /></p> <p style="margin-left: 1.25cm;">“<i>... so programmers can work to create masterpieces like Squeak that benefit society. </i> </p> <p style="margin-left: 1.25cm;"><i>What a concept. Benefit society. ”</i></p> <p style="margin-left: 1.25cm;"><br /></p> <p style="margin-left: 1.25cm; page-break-before: always;">“<i>Please think it over, everyone, and decide just how much damage you are willing to let software patents do, just to benefit a few companies, who by the way made their billions at a time when there were no software patents to get in *their* way, and at the expense of everyone else on the planet with them. </i> </p> <p style="margin-left: 1.25cm;"><i>And please look at the Squeak video and the children's faces as they talk about Squeak before you decide.”</i></p><p style="margin-left: 1.25cm;"><i><br /></i></p>Diego Gomez Deckhttp://www.blogger.com/profile/11016380965975303930noreply@blogger.comtag:blogger.com,1999:blog-11642986.post-1163495392388149992006-11-14T09:56:00.000+01:002006-11-29T19:08:38.030+01:00Fotos de un prototipo de OLPC (la Laptop de 100 dólares)Debido a que estoy colaborando con la versión <a href="http://wiki.laptop.org/go/Etoys">Squeak que va a correr en la OLPC</a> (estoy haciendo que el <a href="http://minnow.cc.gatech.edu/squeak/3765">Video4Squeak</a> funcione bien con los limitados recursos de la OLPC), me convertí en uno de los felices poseedores de una placa alpha de la OLPC.<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://smalltalk.consultar.com/olpc/FSCN0290.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px;" src="http://smalltalk.consultar.com/olpc/FSCN0290.JPG" alt="" border="0" /></a><br />Por ahora sólo logré levantar un build 91, y dejar funcionando todo (actualicé el <a href="http://wiki.laptop.org/go/LinuxBIOS">bios</a>, anda la <a href="http://wiki.laptop.org/go/Wireless">red wireless</a>, anda el X, anda el <a href="http://wiki.laptop.org/go/Sugar">Sugar</a>, etc).<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://smalltalk.consultar.com/olpc/FSCN0288.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px;" src="http://smalltalk.consultar.com/olpc/FSCN0288.JPG" alt="" border="0" /></a><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://smalltalk.consultar.com/olpc/DSCN0296.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px;" src="http://smalltalk.consultar.com/olpc/DSCN0296.JPG" alt="" border="0" /></a><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://smalltalk.consultar.com/olpc/DSCN0277.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px;" src="http://smalltalk.consultar.com/olpc/DSCN0277.JPG" alt="" border="0" /></a><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://smalltalk.consultar.com/olpc/DSCN0280.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px;" src="http://smalltalk.consultar.com/olpc/DSCN0280.JPG" alt="" border="0" /></a><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://smalltalk.consultar.com/olpc/DSCN0297.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px;" src="http://smalltalk.consultar.com/olpc/DSCN0297.JPG" alt="" border="0" /></a><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://smalltalk.consultar.com/olpc/DSCN0311.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px;" src="http://smalltalk.consultar.com/olpc/DSCN0311.JPG" alt="" border="0" /></a><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://smalltalk.consultar.com/olpc/DSCN0312.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px;" src="http://smalltalk.consultar.com/olpc/DSCN0312.JPG" alt="" border="0" /></a><br />Próximo paso: Instalar Squeak... stay tuned!<br /><br /><br /><br /><span style="font-weight: bold;">UPDATE:</span> Ya hay fotos del prototipo "B" en <a href="http://wiki.laptop.org/go/B1_Pictures">http://wiki.laptop.org/go/B1_Pictures</a><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://wiki.laptop.org/images/e/ee/AP1_12.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px;" src="http://wiki.laptop.org/images/e/ee/AP1_12.jpg" alt="" border="0" /></a>Diego Gomez Deckhttp://www.blogger.com/profile/11016380965975303930noreply@blogger.comtag:blogger.com,1999:blog-11642986.post-1161693296660112172006-10-24T14:31:00.000+02:002006-10-24T14:35:15.380+02:00Web 2.0 en Smalltalk - Call for help!<p style="font-family:times new roman;"><span style="font-size:100%;">Hola gente,</span><span style="font-size:100%;"><br /><br />Hace algunos días les comentaba de los proyectos, relacionados con la web 2.0, que estoy desarrollando con Smalltalk.<br /><br />Estoy en un punto donde puedo decir que podemos lograr bastante más de los browsers (de internet), y los ejemplos que fui generando (SocialShopping, Unnamed, LiveWiki, etc) lo prueban.<br /><br />Hasta ahora fui desarrollando las herramientas conforme las necesite, así que el framework tiene un poquito de todo. Ese "poquito de todo" prueba que se pueden hacer muchas cosas, pero para que el framework se convierta en una herramienta posible debería hacer más que "un poquito" de todo.<br /><br />Para completarlo necesito ayuda.<br /><br />Hay bastante trabajo para hacer, desde traducir la documentación que estoy haciendo al Inglés, completar clases de “ayuda” (como Color, Rectangle, etc) y, sobre todo, completar en cantidad y funcionalidad los widgets.<br /><br />Para dar el primer empuje, hice algo que no suelo hacer: <b>Documentación</b> ;-)</span></p> <p align="center" style="font-family:times new roman;"><span style="font-size:100%;"><a href="http://smalltalk.consultar.com/wiki/">http://smalltalk.consultar.com/wiki/</a></span></p> <p style="font-family:times new roman;"><span style="font-size:100%;"><br />Los proyectos en marcha son:</span></p> <ul style="font-family:times new roman;"><li><p><span style="font-size:100%;"><b>Asteroid</b>: Comet para Squeak. Muy simple, no hay mucho más para hacer acá.</span></p> </li><li><p><span style="font-size:100%;"><b>ST2JS</b>: Traductor de código Smalltalk a Javascript. En el traductor en si no hay demasiado más para hacer, pero si hay bastante en las clases de compatibilidad.</span></p> </li><li><p><span style="font-size:100%;"><b>SWT</b>: Framework para hacer aplicaciones Web 2.0. Usa los 2 proyectos anteriores. Implementa comunicación entre el navegador y el Smalltalk, etc.</span></p> </li></ul> <p style="font-family:times new roman;"><span style="font-size:100%;">La documentación no está terminada todavía, pero (creo que) ya se ve bastante de las posibilidades.</span><br /><span style="font-size:100%;"><br />También cree una lista de correo, en google, para coordinar el trabajo y discutir sobre el futuro del proyecto:</span></p> <p align="center" style="font-family:times new roman;"><span style="font-size:100%;"><a href="http://groups.google.es/group/web20-smalltalk">http://groups.google.es/group/web20-smalltalk</a></span></p><p style="font-family:times new roman;"><span style="font-size:100%;"><br />Espero que les guste y, que muchos, se animen a darme una mano.</span><span style="font-size:100%;"><br /></span><br /></p>Diego Gomez Deckhttp://www.blogger.com/profile/11016380965975303930noreply@blogger.comtag:blogger.com,1999:blog-11642986.post-1159434303996887462006-09-28T10:59:00.000+02:002006-10-12T11:03:28.956+02:00StrongTalk – ¡Ahora la VM también es open source!<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://www.strongtalk.org/images/logo.png"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 320px;" src="http://www.strongtalk.org/images/logo.png" alt="" border="0" /></a><br /><dl><dt>Hace ya algunos días que Sun liberó la máquina virtual de <a href="http://www.strongtalk.org/">StrongTalk</a><a href="http://www.strongtalk.org/"></a>.</dt><dt> <br /></dt><dt>Para los que no sepan que es StrongTalk, le cuento que StrongTalk es la prueba (en realidad es la segunda prueba, la primera es la máquina virtual del <a href="http://research.sun.com/self/">Self</a>) de que los lenguajes dinámicos no tienen porque ser lentos.</dt><dt> <br /></dt><dt>Para los nostálgicos: Pueden leer la accidentada (por culpa del Java) <a href="http://www.strongtalk.org/history.html">historia del StrongTalk</a> <a href="http://www.strongtalk.org/history.html"></a>.</dt><dt> <br /></dt><dt>Ya es hora de que nos dejemos de hablar de si un lenguaje es rápido o no porque tiene (o no) un compilador a código máquina o si corre sobre una máquina virtual. Las cosas son <i>un poquito</i> más complicadas y el simple hecho de tener o no un compilador a código máquina es sólo una parte de la historia.</dt><dt> <br /></dt><dt>Si no creen que lo que digo es verdad, tómense un tiempito para leer los papers que están en::</dt><dt> <br /></dt></dl> <p align="center"><a href="http://research.sun.com/self/compiler.html">http://research.sun.com/self/compiler.html</a></p><p align="center"> <a href="http://www.strongtalk.org/documents.html">http://www.strongtalk.org/documents.html</a> </p><dl><dt><p><br /></p></dt><dt><p>Por supuesto que esta noticia no es buena sólo para los Smalltalkers, sino que las comunidades de Ruby y Python también puede beneficiarse mucho si implementan, en sus respectivas máquinas virtuales, las tecnologías que tiene la VM de StrongTalk. Miren las reacciones que produjo, esta noticia, en las comunidades de Ruby y Python:<br /></p></dt><dt style="text-align: center;"><p><a href="http://www.google.com/search?q=strongtalk+ruby">http://www.google.com/search?q=strongtalk+ruby</a></p></dt><dt style="text-align: center;"><p> <a href="http://www.google.com/search?q=strongtalk+python">http://www.google.com/search?q=strongtalk+python</a></p></dt></dl><br />UPDATE: <a href="http://barrapunto.com/article.pl?sid=06/10/11/2239248">Cobertura en Barrapunto</a>.Diego Gomez Deckhttp://www.blogger.com/profile/11016380965975303930noreply@blogger.comtag:blogger.com,1999:blog-11642986.post-1159350648025180692006-09-27T11:46:00.000+02:002006-10-18T20:08:24.993+02:00Web 2.0 - Un nuevo medio: LiveWiki (Un mejor Wiki)<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://photos1.blogger.com/blogger/8166/525/1600/LiveWiki1.png"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="http://photos1.blogger.com/blogger/8166/525/320/LiveWiki1.png" alt="" border="0" /></a><br /><dl><dt>Siguiendo con los ejemplos de <a href="http://diegogomezdeck.blogspot.com/2006/09/web-20-un-nuevo-medio-social-shopping.html">posibles</a> <a href="http://diegogomezdeck.blogspot.com/2006/09/web-20-un-nuevo-medio-una-hoja-de.html">nuevos usos</a> de la Web 2.0, ahora vamos a tratar de imaginar como se podrían mejorar los wikis actuales, usando la colaboración que nos permite el Web 2.0.</dt><dt><br /></dt><dt>Les presento la primera versión de <b>LiveWiki</b>. <b>LiveWiki</b> es un Wiki vivo (de ahí su nombre ;)). Wiki en el sentido de ser un sitio modificable por muchas personas (<a href="http://es.wikipedia.org/wiki/Wiki">http://es.wikipedia.org/wiki/Wiki</a>), y vivo en el sentido que le venimos dando a la palabra, en las notas anteriores.</dt><dt><br /></dt><dt>Para decirlo de otra forma: Nos olvidamos de tener que hacer <span style="font-style: italic;">“refrescar”</span>, <span style="font-style: italic;">“recargar”</span>, <span style="font-style: italic;">“reload”</span> o <span style="font-style: italic;">“refresh”</span> de la página para ver si cambió. Cuando la página cambia, todas las personas que estén viendo esa página verán el cambio en el mismo momento en que ocurre. De la misma forma, todos los usuarios conectados pueden modificar el contenido. Y, como en los ejemplos anteriores, el chat entre usuarios conectados sirve para coordinar el trabajo.</dt><dt><br /></dt><dt>Esta versión es todavía muy simple... pero ya hace evidente las mejoras que pueden sufrir los wikis si logramos que estas tecnologías se masifiquen.</dt><dt><br /></dt><dt>Esta es una lista de cosas que NO hace esta versión de LiveWiki, pero que pretendo incluirlas en las próximas versiones:</dt></dl> <ul><li>Bloqueo pesimista con timeout para la edición. Para editar una página (o parte de ella), primero hay que obtener un bloqueo. Cuando alguien tiene un bloqueo sobre una parte, nadie excepto el puede modificarlo, y nadie puede obtener un bloqueo hasta que el lo suelte.</li><li> Feedback visual del bloqueo: Los usuarios que NO tengan bloqueada la página (o una parte de ella) verán que alguien lo tiene bloqueado con un cambio de color de fondo. Incluso podrían ver quien lo tiene bloqueado, y molestarlo por el chat para que lo suelte. ;-)</li><li> Edición visual del contenido. Esta versión usa una de las sintaxis de wikis (específicamente usa la sintaxis del Swiki). La idea es hacer un editor visual (o adaptar alguno ya hecho, como el TinyMCE <a href="http://tinymce.moxiecode.com/">http://tinymce.moxiecode.com/</a> ).</li><li> Reordenamiento visual del contenido. Algo en la forma de <a href="http://tool-man.org/examples/edit-in-place.html">http://tool-man.org/examples/edit-in-place.html</a>. Hay que terminar de pensar como combinar eso con los bloqueos.</li><li> Edición de parte del contenido. Con la finalidad de reducir los conflictos de actualización, se podrá modificar sólo una parte de la página mientras otros usuarios pueden estar, a la vez, modificando otras partes.</li><li> Etc.</li></ul> <dl><dt><br /></dt><dt>Y estás son algunas de las características que SI están incluidas en esta versión:</dt></dl> <ul><li>Actualización en vivo de las páginas cuando alguna página referenciada en un link cambia de nombre.</li><li> Actualización en vivo de las páginas que tiene links a páginas que todavía no están creadas, en el momento en que son creadas (el link a una pagina no creada es distinto, visualmente, que un link a una página que ya existe).</li><li> Links de tipo “Incrustado”. Cuando hacemos un link de esta forma *[Una Página]*, el contenido de la página de nombre <b>”Una Página”</b> será incrustado en la página contenedora. Lo mismo para un link del tipo *{Una Página}*, pero en ese caso se incrusta el título de la página (en lugar del contenido).</li><li> Hay páginas Modificables y páginas No-Modificables (como la página Pages, que muestra una lista con todas las páginas creadas en el wiki).</li></ul> <dl><dt><br /></dt><dt>Y, para continuar con la auto-impuesta tradición, les dejo un screencast que muestra algunas de las características de LiveWiki.</dt></dl><br /><dl><dt style="text-align: center;"><span style="font-size:130%;"><a href="http://www.consultar.com/trastero/LiveWiki1.htm">http://www.consultar.com/trastero/LiveWiki1.htm</a></span></dt></dl><br />Como siempre, están <a href="http://www.squeaksource.com/LiveWiki.html">todos los fuentes disponibles en SqueakSource</a>.Diego Gomez Deckhttp://www.blogger.com/profile/11016380965975303930noreply@blogger.comtag:blogger.com,1999:blog-11642986.post-1158654747816172672006-09-19T10:29:00.000+02:002006-09-19T10:32:49.836+02:00Disponible Squeak eToys para la computadora de 100USD<dl><dt>Yoshiki <a href="http://lists.squeakfoundation.org/pipermail/squeak-dev/2006-September/108672.html">anunció en la lista de Squeak</a> la disponibilidad de la imagen de <a href="http://wiki.laptop.org/go/Etoys">Squeak que se usará en la laptops de 100USD</a>.</dt><dt> <br /> </dt><dt>Pide comentarios, sugerencias, reportes de errores, etc.</dt></dl>Diego Gomez Deckhttp://www.blogger.com/profile/11016380965975303930noreply@blogger.comtag:blogger.com,1999:blog-11642986.post-1158056618734956652006-09-12T12:09:00.000+02:002006-09-15T12:53:29.070+02:00Web 2.0 - Un nuevo medio: Una hoja de cálculo mejor<i>Para ser franco, hace años que dejé de prestarle atención a la interminable lista de nombres y acrónimos fashion que genera nuestra industria. Sin embargo, con la intención de que la gente encuentre estas notas en google, hace varios posts que estoy usando términos “modernos” como Web 2.0, Ajax y esas cosas.</i><dl><dt><br /></dt><dt>Quiero seguir mostrándoles ejemplos de, por supuesto es mi opinión (y para volcar mi opinión es que me puse un blog), posibles buenos usos de la interactividad que nos permite el Comet (oops, otra palabra fashion).</dt><dt><br /></dt><dt>Este ejemplo, también, pretende mostrar otra cosa: <b>¡Qué feas y malas son las aplicaciones que estamos acostumbrados (o que nos obligan) a usar!</b></dt><dt><br /></dt><dt>Hablemos un poco de las <a href="http://es.wikipedia.org/wiki/Hoja_de_c%C3%A1lculo">hojas de cálculo</a>. Las hojas de cálculo llevan años sin evolucionar. No me refiero a pequeños cambios, que los vendedores hacen, para vendernos la versionActual+1, sino que me refiero a <b>evolución</b> (así, con letra grande).</dt><dt><br /></dt><dt>Hace unos meses me encontré con <a href="http://en.wikipedia.org/wiki/Spreadsheet_2000">Spreadsheet</a><a href="http://en.wikipedia.org/wiki/Spreadsheet_2000"> 2000</a>. Les aclaro que yo no soy usuario de Apple, y que nunca vi ese producto andando. Me enteré de su existencia por un e-mail en la lista de Squeak.</dt></dl><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://upload.wikimedia.org/wikipedia/en/0/0f/SS2000_working_sheet.gif"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 320px;" src="http://upload.wikimedia.org/wikipedia/en/0/0f/SS2000_working_sheet.gif" alt="" border="0" /></a><dl><dt><a href="http://www.google.es/search?q=spreadsheet+2000">Googleando</a> me encontré, también, con este página que cuenta un poco más:</dt><dt><br /></dt></dl> <p align="center"><a href="http://www.mactech.com/articles/mactech/Vol.13/13.04/Spreadsheet2000/index.html">http://www.mactech.com/articles/mactech/Vol.13/13.04/Spreadsheet2000/index.html</a></p><dl><dt><br /></dt><dt>Cuando me enteré de Spreadsheet 2000, no pude dejar de sentir esa nostalgia de quien extraña un presente que no fue. La verdad que usamos MUY, pero MUY mal las computadoras y nosotros (los programadores) somos bastante responsables de esa situación. La mayoría de las veces condenamos a los usuarios a experiencias rígidas y, sobre todo, aburridas.</dt><dt><br /></dt><dt>Como no tengo una Apple, y estaba jugando al Comet y esas cosas, me decidí a hacer una especie de hoja de cálculo “en serio” y colaborativa copiando la idea de las cajitas conectadas y, agregando arriba, la colaboración que permite el Comet.</dt></dl>Esto es lo que logré:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://photos1.blogger.com/blogger/8166/525/1600/U1.png"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="http://photos1.blogger.com/blogger/8166/525/320/U1.png" alt="" border="0" /></a> <dl><dt><br /></dt><dt><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://photos1.blogger.com/blogger/8166/525/1600/U2.png"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="http://photos1.blogger.com/blogger/8166/525/320/U2.png" alt="" border="0" /></a> </dt></dl><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://photos1.blogger.com/blogger/8166/525/1600/U3.png"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="http://photos1.blogger.com/blogger/8166/525/320/U3.png" alt="" border="0" /></a><br />Y, también, lo pueden ver en este <span style="font-weight: bold;">screencast</span> (otra palabra moderna más) donde se lo ve funcionando.<br /><br /><p align="center"><span style="font-size:130%;"><a href="http://www.consultar.com/trastero/U1-Reducido.htm">http://www.consultar.com/trastero/U1-Reducido.htm</a></span></p><dl><dt><br /></dt></dl>Diego Gomez Deckhttp://www.blogger.com/profile/11016380965975303930noreply@blogger.comtag:blogger.com,1999:blog-11642986.post-1158044839764897492006-09-12T09:04:00.000+02:002006-09-12T09:08:50.340+02:00Fotos de Squeak corriendo en la computadora de 100USD<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://piumarta.com/photos/olpc/HPIM2737l.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px;" src="http://piumarta.com/photos/olpc/HPIM2737l.JPG" alt="" border="0" /></a><br />Vía: <a href="http://croquetweak.blogspot.com/2006/09/squeak-for-every-child.html">http://croquetweak.blogspot.com/2006/09/squeak-for-every-child.html</a><br /><br />Podemos ver unas fotos de Squeak corriendo sobre las <a href="http://laptop.org/">míticas computadoras de 100USD</a>.<br /><br /><div style="text-align: center;"><span style="font-size:130%;"><a href="http://piumarta.com/photos/olpc/">http://piumarta.com/photos/olpc/</a></span><br /><br /></div>Diego Gomez Deckhttp://www.blogger.com/profile/11016380965975303930noreply@blogger.comtag:blogger.com,1999:blog-11642986.post-1158040640561510062006-09-12T07:48:00.000+02:002006-09-20T15:27:58.316+02:00Web 2.0 - Un nuevo medio: Social Shopping"Ahhhhhh" (con la boca abierta que muestra hasta las entrañas), ¡que sueño!<dl><dt><br /></dt><dt>Otra noche que Nahuel no me deja dormir.... oops, ¡ahora se durmió! y yo, que me tomé 2 cafés super-cargados, no puedo pegar un ojo. Bueno, voy a escribir algo en el blog para combatir la oscura soledad de las 5:30AM (y para tratar de metabolizar el exceso de cafeína en mi cuerpo).</dt><dt><br /></dt><dt><br /></dt><dt>No es un secreto que me pasé los últimos tiempos tratando de buscar los límites que nos imponen los browsers de Internet actuales.</dt></dl><ul><li><a href="http://diegogomezdeck.blogspot.com/2006/05/jugando-con-comet-en-squeak.html"> Jugando con Comet en Squeak</a></li><li> <a href="http://diegogomezdeck.blogspot.com/2006/05/comet-y-canvas-morphic-en-el-browser.html"> Comet y Canvas => Morphic en el browser</a></li><li> <a href="http://diegogomezdeck.blogspot.com/2006/07/st2js-traductor-de-smalltalk.html"> ST2JS - Traductor de Smalltalk a JavaScript (Parte I)</a></li><li> <a href="http://diegogomezdeck.blogspot.com/2006/07/st2js-traductor-de-smalltalk_28.html"> ST2JS - Traductor de Smalltalk a JavaScript (Parte II)</a></li><li> <a href="http://diegogomezdeck.blogspot.com/2006/08/swt-squeak-widgets-toolkit-algo-para.html"> SWT (Squeak Widgets Toolkit) - Algo para mostrar</a></li><li> <a href="http://diegogomezdeck.blogspot.com/2006/09/swt-squeak-web-toolkit-algo-ms-para.html"> SWT (Squeak Web Toolkit) - Algo más para mostrar: Ping-Pong </a></li></ul><dl><dt><br /></dt><dt>Puedo resumir lo que aprendí en este tiempo con la siguiente frase:</dt><dt><br /></dt></dl> <p align="center">“<span style="font-size:100%;"><b>Los navegadores (de Internet) actuales son un asco,</b></span></p><p align="center"> <span style="font-size:100%;"><b>pero pueden ser usados de mejor forma a la actual”.</b></span></p><dl><dt><br /></dt><dt>Hoy es posible, no sin un esfuerzo considerable, sacar mejor provecho de los browsers. El punto de inflexión, creo, es la “masificación” de la nueva (bueno, de nueva nada) tecnología Comet (<a href="http://es.wikipedia.org/wiki/Comet">http://es.wikipedia.org/wiki/Comet</a>). Para ser sinceros, “nueva” y “tecnología” son 2 palabras que no hacen justicia... a lo mejor podríamos decir: “viejo” “hack” y estaríamos más cerca de describir lo que es Comet.</dt><dt><br /></dt><dt>De cualquier forma (con hacks y todo) hoy podemos hacer aplicaciones web donde, por fin, no todo es request/response (<a href="http://es.wikipedia.org/wiki/Hypertext_Transfer_Protocol">http://es.wikipedia.org/wiki/Hypertext_Transfer_Protocol</a>).</dt><dt><br /></dt><dt>Ahora, usando el hack^H^H^H^H^H^H^Hla tecnología Comet, podemos crear aplicaciones colaborativas. Ya es hora (en realidad ya lleva años siendo hora) que empecemos a buscar las verdaderas bondades de estar todos en red.</dt><dt><br /></dt><dt>Hoy les quiero mostrar una de las pruebas que estuve haciendo: <b>Social-Shopping</b>.</dt><dt><br /></dt><dt>Social-Shopping es uno de los ejemplos incluidos en el SWT. Básicamente, Social-Shopping, es un <span style="font-style: italic;">simple</span> carrito de compras colaborativo. Más de 1 persona (puede ser más de 1 comprador, o compradores y vendedor, o compradores y asesores, etc) pueden interactuar, a través de Internet, en un único proceso de compra.</dt><dt><br /></dt><dt>Social-Shopping, por ahora, luce así:</dt><dd><br /></dd></dl><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://photos1.blogger.com/blogger/8166/525/1600/SocialShopping.png"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="http://photos1.blogger.com/blogger/8166/525/400/SocialShopping.png" alt="" border="0" /></a><p align="center"></p><dl><dt><br /></dt><dt>Sí, ya se... hablo de un “nuevo medio” y pongo un super-estático PNG. Mejor, les dejo un screencast donde se ve mejor la idea:</dt><dt><br /></dt></dl> <p align="center"><a href="http://www.consultar.com/trastero/SocialShopping1.htm"><b><span style="font-size:100%;">http://www.consultar.com/trastero/SocialShopping1.htm</span></b></a></p><dl><dt><br /></dt><dt>Tengo algunos ejemplitos más en el tintero... pero no se los quiero muestrar todos juntos, para mantener la atención alta. ;-)</dt><dt><br /></dt></dl>Diego Gomez Deckhttp://www.blogger.com/profile/11016380965975303930noreply@blogger.comtag:blogger.com,1999:blog-11642986.post-1157991443552692362006-09-11T18:12:00.000+02:002006-09-11T18:19:10.526+02:00SWT (Squeak Web Toolkit) - Algo más para mostrar: Ping-Pong<dt>Las cosas van tomando su fomar y ahora el framework (SWT) nos permite hacer algunos ejemplos divertidos. Les voy a mostrar uno de los ejemplos incluidos en SWT: Ping Pong.</dt> <dt><br /></dt> <dt>El ejemplo Ping-Pong es, según creo, el caso más simple de uso del SWT que, a su vez, muestra las características interesantes del framework.</dt> <dt><br /></dt> <dt>Uhhh... cuanta introducción... mejor vamos directamente al grano.</dt> <dt><br /></dt> <dt>Para utilizar el framework empezamos creando 2 clases: <span style="font-weight: bold;">SWTPingPongClientApplication</span> y <span style="font-weight: bold;">SWTPingPongServerApplication</span>.</dt> <dt><br /></dt> <dt>La primera (<span style="font-weight: bold;">SWTPingPongClientApplication</span>) es subclase de <span style="font-weight: bold;">SWTClientApplication</span>. La segunda (<span style="font-weight: bold;">SWTPingPongServerApplication</span>) es subclase de <span style="font-weight: bold;">SWTServerApplication</span>.</dt> <dt><br /></dt> <dt>Según el SWT, una "aplicación" está partida entre su parte Client y su parte Server.</dt> <dt></dt> <dt>La parte Client (en nuestro ejemplo: <span style="font-weight: bold;">SWTPingPongClientApplication</span>) se traduce a código Javascript (usando el ST2JS) y se ejecuta en el browser de Internet. Por otro lado, la parte Server (<span style="font-weight: bold;">SWTPingPongServerApplication</span>) se ejecuta en el Squeak.</dt> <dt><br /></dt> <dt>Por cada browser (de Internet) conectado, tendremos un par de instancias (la Server y la Client) que se mantienen "unidas" por el framework.</dt> <dt><br /></dt> <dt>Cuando estamos en el Client, podemos enviar mensajes a la parte Server de la siguiente forma:</dt><br /><table style="background-color: rgb(255, 255, 204); width: 80%; text-align: left; margin-left: auto; margin-right: auto;" border="0" cellpadding="10" cellspacing="0"> <tbody> <tr> <td><span style="color:#7f0000;"><b>self</b></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">serverSide</span><span style="color:#000000;"> </span><span style="color:#7f4c00;">foo</span><span style="color:#000000;">.</span></td> </tr> </tbody> </table> <br /><br />De forma análoga, cuando estamos en el Server podemos enviar mensajes a la parte Client de la siguiente forma: <dl><dt> </dt><table style="background-color: rgb(255, 255, 204); width: 80%; text-align: left; margin-left: auto; margin-right: auto;" border="0" cellpadding="10" cellspacing="0"> <tbody> <tr> <td><span style="color:#7f0000;"><b>self</b></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">clientSide</span><span style="color:#000000;"> </span><span style="color:#7f4c00;">bar</span><span style="color:#000000;">.</span></td> </tr> </tbody> </table></dl><br />La parte Client, al enviarle el mensaje <span style="font-weight: bold;">#serverSide</span>, nos devuelve un Proxy que reenvía los mensajes al Squeak usando JSON-RPC. Por otro lado, la parte Server, cuando le envíamos el mensaje <span style="font-weight: bold;">#clientSide</span> nos devuelve un Proxy que reenvía los mensajes recibidos, al Cliente, usando la conexión Comet. <dl><dt><br /></dt><dt>Con esto ya sabemos lo suficiente para ver el código del ejemplo Ping-Pong.</dt><dt><br /></dt><dt>La parte Client de nuestro ejemplo (<span style="font-weight: bold;">SWTPingPongClientApplication</span>) tiene sólo 2 métodos, veamos el primero:</dt><br /><table style="background-color: rgb(255, 255, 204); width: 90%; text-align: left; margin-left: auto; margin-right: auto;" border="0" cellpadding="10" cellspacing="0"> <tbody> <tr> <td><b>initializeWidgets</b><span style="color:#000000;"><br /> </span><span style="color:#007f00;"><b>"Initialize the receiver's widgets"</b></span><span style="color:#000000;"><br /><br /> </span><span style="color:#7f7f7f;">|</span><span style="color:#000000;"> </span><span style="color:#6b6b6b;"><i>root</i></span><span style="color:#000000;"> </span><span style="color:#7f7f7f;">|</span><span style="color:#000000;"><br /><br /> </span><span style="color:#6b6b6b;"><i>root</i></span><span style="color:#000000;"> </span><b>:=</b><span style="color:#000000;"> </span><span style="color:#7f0000;"><b>self</b></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">rootWidget</span><span style="color:#000000;">.<br /><br /> </span><span style="color:#6b6b6b;"><i>root</i></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">addWidget:</span><span style="color:#000000;"> (</span><span style="color:#ea00ea;"><b>SWTHeader</b></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">level:</span><span style="color:#000000;"> </span><span style="color:#7f0000;"><b>2</b></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">contents:</span><span style="color:#000000;"> </span><span style="color:#7f007f;"><b><span style="font-size:-1;">'Ping Pong'</span></b></span><span style="color:#000000;">).<br /><br /> </span><span style="color:#6b6b6b;"><i>root</i></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">addWidget:</span><span style="color:#000000;"> (</span><span style="color:#ea00ea;"><b>SWTButton</b></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">caption:</span><span style="color:#000000;"> </span><span style="color:#7f007f;"><b><span style="font-size:-1;">'ping server'</span></b></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">onClick:</span><span style="color:#000000;"> </span><span style="color:#007f00;">[</span><span style="color:#000000;">:</span><span style="color:#007f7f;"><i>event</i></span><span style="color:#000000;"> </span><span style="color:#7f7f7f;">|</span><span style="color:#000000;"> </span><span style="color:#7f0000;"><b>self</b></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">serverSide</span><span style="color:#000000;"> </span><span style="color:#7f4c00;">ping</span><span style="color:#007f00;">]</span><span style="color:#000000;">).<br /></span></td> </tr> </tbody> </table><br /><br /><dt>Allí vemos como se crean 2 widgets: Un Header y un Button. Si, lo sé... no es nada espectacular... pero lo interesante está dentro del evento #onClick del botón:</dt></dl> <dl><dt> <table style="background-color: rgb(255, 255, 204); width: 80%; text-align: left; margin-left: auto; margin-right: auto;" border="0" cellpadding="10" cellspacing="0"> <tbody> <tr> <td><span style="color:#7f0000;"><b>self</b></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">serverSide</span><span style="color:#000000;"> </span><span style="color:#7f4c00;">ping</span><span style="color:#000000;"><br /></span></td> </tr> </tbody> </table> </dt><dt> <p>Cuando hagamos click sobre el botón, el mensaje <span style="font-weight: bold;">#ping</span> se evaluará, ¡pero del lado del servidor!. Veamos entonces la implementación de #ping en el Server (<span style="font-weight: bold;">SWTPingPongServerApplication</span>).</p> </dt><dt></dt><dt> <table style="background-color: rgb(255, 255, 204); width: 80%; text-align: left; margin-left: auto; margin-right: auto;" border="0" cellpadding="10" cellspacing="0"> <tbody> <tr> <td><b>ping</b><span style="color:#000000;"><br /><br /> </span><span style="color:#ea00ea;"><b>Transcript</b></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">show:</span><span style="color:#000000;"> </span><span style="color:#7f007f;"><b><span style="font-size:-1;">'ping!'</span></b></span><span style="color:#000000;">; </span><span style="color:#7f4c00;">cr</span><span style="color:#000000;">.<br /><br /> </span><span style="color:#7f0000;"><b>self</b></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">clientSide</span><span style="color:#000000;"> </span><span style="color:#7f4c00;">pong</span><span style="color:#000000;">.<br /></span></td> </tr> </tbody> </table> </dt><dt> <p><br /></p> </dt><dt> <p>Este método, además de mostrar algo en el Transcript, devuelve el "favor" a su contraparte Client en la última línea.</p> </dt><dt> <p>Ahora, para terminar, veamos la implementación de #pong en lado Client (<span style="font-weight: bold;">SWTPingPongClientApplication</span>).</p> </dt><dt> <table style="background-color: rgb(255, 255, 204); width: 80%; text-align: left; margin-left: auto; margin-right: auto;" border="0" cellpadding="10" cellspacing="0"> <tbody> <tr> <td><b>pong<br /><br /></b><span style="color:#000000;"> </span><span style="color:#7f0000;"><b>^</b></span><span style="color:#000000;"> </span><span style="color:#7f0000;"><b>self</b></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">inform:</span><span style="color:#000000;"> </span><span style="color:#7f007f;"><b><span style="font-size:-1;">'pong!'</span></b></span></td> </tr> </tbody> </table> </dt></dl><br /><br />Si les gustó, miren <a href="http://www.consultar.com/trastero/PP1-reducido.htm">este Screencast</a>Diego Gomez Deckhttp://www.blogger.com/profile/11016380965975303930noreply@blogger.comtag:blogger.com,1999:blog-11642986.post-1156878694995087902006-08-29T21:07:00.000+02:002006-08-29T21:11:35.066+02:00SWT (Squeak Widgets Toolkit) - Algo para mostrarDespués de unos (pocos (muy pocos)) días de vacaciones, volví al trabajo con más fuerzas y, para probarlo, les muestro en que estado está el desarrollo del <a href="http://diegogomezdeck.blogspot.com/2006/07/st2js-traductor-de-smalltalk.html">LiveWiki que prometí hacer</a>.<br /><br /> Usando el JS2JS, ahora estoy desarrollando un juego de widgets para los navegadores de Internet. Esta primera versión es muy simple, pero ya tiene lo suficiente para ver la idea completa: Se escribe código Smalltalk y se ejecuta en los navegadores de internet (previa conversión ST > JS). Pueden descargar la <a href="http://www.squeaksource.com/SWT.html">versión actual en SqueakSource</a>.<br /><br /> Esto es un método, de la clase SWTExampleApplication, que crea unos simples (y aburridos) textos.<br /><br /> <table style="background-color: rgb(255, 255, 204); width: 90%; text-align: left; margin-left: auto; margin-right: auto;" border="0" cellpadding="10" cellspacing="0"> <tbody> <tr> <td><b>SWTExampleApplication>></b><b>creat</b><b>eSimpleTexts</b><span style="color:#000000;"><br /> <br /> </span><span style="color:#7f7f7f;">|</span><span style="color:#000000;"> </span><span style="color:#6b6b6b;"><i>root</i></span><span style="color:#000000;"> </span><span style="color:#7f7f7f;">|</span><span style="color:#000000;"><br /> <br /> </span><span style="color:#6b6b6b;"><i>root</i></span><span style="color:#000000;"> </span><b>:=</b><span style="color:#000000;"> </span><span style="color:#7f0000;"><b>self</b></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">rootWidget</span><span style="color:#000000;">.<br /> <br /> </span><span style="color:#6b6b6b;"><i>root</i></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">addHorizontalRule</span><span style="color:#000000;">.<br /> </span><span style="color:#6b6b6b;"><i>root</i></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">addWidget:</span><span style="color:#000000;"> (</span><span style="color:#ea00ea;"><b>SWTHeader</b></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">level:</span><span style="color:#000000;"> </span><span style="color:#7f0000;"><b>2</b></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">contents:</span><span style="color:#000000;"> </span><span style="color:#7f007f;"><b><span style="font-size:-1;">'Simple texts'</span></b></span><span style="color:#000000;">).<br /> </span><span style="color:#6b6b6b;"><i>root</i></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">addWidget:</span><span style="color:#000000;"> (</span><span style="color:#ea00ea;"><b>SWTText</b></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">contents:</span><span style="color:#000000;"> </span><span style="color:#7f007f;"><b><span style="font-size:-1;">'some plain text. bla, bla, bla, bla, bla.'</span></b></span><span style="color:#000000;">).<br /> <br /> </span><span style="color:#6b6b6b;"><i>root</i></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">addWidget:</span><span style="color:#000000;"> (</span><span style="color:#ea00ea;"><b>SWTText</b></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">contents:</span><span style="color:#000000;"> </span><span style="color:#7f007f;"><b><span style="font-size:-1;">'text in red'</span></b></span><span style="color:#000000;">).<br /> </span><span style="color:#6b6b6b;"><i>root</i></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">lastWidget</span><span style="color:#000000;"><br /> </span><span style="color:#7f4c00;">color:</span><span style="color:#000000;"> </span><span style="color:#ea00ea;"><b>S2SColor</b></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">red</span><span style="color:#000000;">.<br /> <br /> </span><span style="color:#6b6b6b;"><i>root</i></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">addWidget:</span><span style="color:#000000;"> (</span><span style="color:#ea00ea;"><b>SWTText</b></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">contents:</span><span style="color:#000000;"> </span><span style="color:#7f007f;"><b><span style="font-size:-1;">'text in blue/green'</span></b></span><span style="color:#000000;">).<br /> </span><span style="color:#6b6b6b;"><i>root</i></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">lastWidget</span><span style="color:#000000;"><br /> </span><span style="color:#7f4c00;">color:</span><span style="color:#000000;"> </span><span style="color:#ea00ea;"><b>S2SColor</b></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">blue</span><span style="color:#000000;">;<br /> </span><span style="color:#7f4c00;">backgroundColor:</span><span style="color:#000000;"> </span><span style="color:#ea00ea;"><b>S2SColor</b></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">green</span><span style="color:#000000;">.<br /> <br /> </span><span style="color:#6b6b6b;"><i>root</i></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">addBreak</span><span style="color:#000000;">.</span></td> </tr> </tbody> </table> <br /><br /> El método que está a continuación muestra como es el manejo de eventos. Se ve claramente el uso de los bloques de Smalltalk (que se mapean a funciones de JS):<br /><br /> <table style="background-color: rgb(255, 255, 204); width: 90%; text-align: left; margin-left: auto; margin-right: auto;" border="0" cellpadding="10" cellspacing="0"> <tbody> <tr> <td><b>SWTExampleApplication>></b><b>createButtons</b><span style="color:#000000;"><br /> <br /> </span><span style="color:#7f7f7f;">|</span><span style="color:#000000;"> </span><span style="color:#6b6b6b;"><i>root</i></span><span style="color:#000000;"> </span><span style="color:#6b6b6b;"><i>button</i></span><span style="color:#000000;"> </span><span style="color:#7f7f7f;">|</span><span style="color:#000000;"><br /> <br /> </span><span style="color:#6b6b6b;"><i>root</i></span><span style="color:#000000;"> </span><b>:=</b><span style="color:#000000;"> </span><span style="color:#7f0000;"><b>self</b></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">rootWidget</span><span style="color:#000000;">.<br /> <br /> </span><span style="color:#6b6b6b;"><i>root</i></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">addHorizontalRule</span><span style="color:#000000;">.<br /> </span><span style="color:#6b6b6b;"><i>root</i></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">addWidget:</span><span style="color:#000000;"> (</span><span style="color:#ea00ea;"><b>SWTHeader</b></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">level:</span><span style="color:#000000;"> </span><span style="color:#7f0000;"><b>2</b></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">contents:</span><span style="color:#000000;"> </span><span style="color:#7f007f;"><b><span style="font-size:-1;">'Buttons'</span></b></span><span style="color:#000000;">).<br /> </span><span style="color:#6b6b6b;"><i>root</i></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">addWidget:</span><span style="color:#000000;"> (</span><span style="color:#ea00ea;"><b>SWTButton</b></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">caption:</span><span style="color:#000000;"> </span><span style="color:#7f007f;"><b><span style="font-size:-1;">'inspect event'</span></b></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">onClick:</span><span style="color:#000000;"> </span><span style="color:#007f00;">[</span><span style="color:#000000;">:</span><span style="color:#007f7f;"><i>event</i></span><span style="color:#000000;"> </span><span style="color:#7f7f7f;">|</span><span style="color:#000000;"> </span><span style="color:#007f7f;"><i>event</i></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">inspect</span><span style="color:#007f00;">]</span><span style="color:#000000;">).<br /> </span><span style="color:#6b6b6b;"><i>root</i></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">addWidget:</span><span style="color:#000000;"> (</span><span style="color:#ea00ea;"><b>SWTButton</b></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">caption:</span><span style="color:#000000;"> </span><span style="color:#7f007f;"><b><span style="font-size:-1;">'inspect root panel'</span></b></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">onClick:</span><span style="color:#000000;"> </span><span style="color:#007f00;">[</span><span style="color:#000000;">:</span><span style="color:#007f7f;"><i>event</i></span><span style="color:#000000;"> </span><span style="color:#7f7f7f;">|</span><span style="color:#000000;"> </span><span style="color:#6b6b6b;"><i>root</i></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">inspect</span><span style="color:#007f00;">]</span><span style="color:#000000;">).<br /> <br /> </span><span style="color:#6b6b6b;"><i>root</i></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">addWidget:</span><span style="color:#000000;"> (</span><span style="color:#6b6b6b;"><i>button</i></span><span style="color:#000000;"> </span><b>:=</b><span style="color:#000000;"> </span><span style="color:#ea00ea;"><b>SWTButton</b></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">caption:</span><span style="color:#000000;"> </span><span style="color:#7f007f;"><b><span style="font-size:-1;">'button with several event handlers'</span></b></span><span style="color:#000000;">).<br /> <br /> </span><span style="color:#6b6b6b;"><i>button</i></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">onClick:</span><span style="color:#000000;"> [:</span><span style="color:#007f7f;"><i>event</i></span><span style="color:#000000;"> </span><span style="color:#7f7f7f;">|</span><span style="color:#000000;"> </span><span style="color:#007f7f;"><i>event</i></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">inspect</span><span style="color:#000000;">].<br /> </span><span style="color:#6b6b6b;"><i>button</i></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">onClick:</span><span style="color:#000000;"> [:</span><span style="color:#007f7f;"><i>event</i></span><span style="color:#000000;"> </span><span style="color:#7f7f7f;">|</span><span style="color:#000000;"> </span><span style="color:#7f0000;"><b>self</b></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">inform:</span><span style="color:#000000;"> </span><span style="color:#7f007f;"><b><span style="font-size:-1;">'2st handler: '</span></b></span><span style="color:#000000;"> </span><span style="color:#7f4c00;"><b>,</b></span><span style="color:#000000;"> </span><span style="color:#007f7f;"><i>event</i></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">asString</span><span style="color:#000000;">].<br /> </span><span style="color:#6b6b6b;"><i>button</i></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">onClick:</span><span style="color:#000000;"> [:</span><span style="color:#007f7f;"><i>event</i></span><span style="color:#000000;"> </span><span style="color:#7f7f7f;">|</span><span style="color:#000000;"> </span><span style="color:#7f0000;"><b>self</b></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">inform:</span><span style="color:#000000;"> </span><span style="color:#7f007f;"><b><span style="font-size:-1;">'3rd handler: '</span></b></span><span style="color:#000000;"> </span><span style="color:#7f4c00;"><b>,</b></span><span style="color:#000000;"> </span><span style="color:#007f7f;"><i>event</i></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">asString</span><span style="color:#000000;">].<br /> <br /> </span><span style="color:#6b6b6b;"><i>button</i></span><span style="color:#000000;"><br /> </span><span style="color:#7f4c00;">color:</span><span style="color:#000000;"> </span><span style="color:#ea00ea;"><b>S2SColor</b></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">blue</span><span style="color:#000000;">;<br /> </span><span style="color:#7f4c00;">backgroundColor:</span><span style="color:#000000;"> </span><span style="color:#ea00ea;"><b>S2SColor</b></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">blue</span><span style="color:#000000;"> </span><span style="color:#7f4c00;">muchLighter</span><span style="color:#000000;">.<br /> <br /> </span><span style="color:#6b6b6b;"><i>button</i></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">onFocus:</span><span style="color:#000000;"> [:</span><span style="color:#007f7f;"><i>event</i></span><span style="color:#000000;"> </span><span style="color:#7f7f7f;">|</span><span style="color:#000000;"><br /> </span><span style="color:#007f7f;"><i>event</i></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">source</span><span style="color:#000000;"><br /> </span><span style="color:#7f4c00;">color:</span><span style="color:#000000;"> </span><span style="color:#ea00ea;"><b>S2SColor</b></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">red</span><span style="color:#000000;">;<br /> </span><span style="color:#7f4c00;">backgroundColor:</span><span style="color:#000000;"> </span><span style="color:#ea00ea;"><b>S2SColor</b></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">red</span><span style="color:#000000;"> </span><span style="color:#7f4c00;">muchLighter</span><span style="color:#000000;"><br /> ].<br /> <br /> </span><span style="color:#6b6b6b;"><i>button</i></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">onBlur:</span><span style="color:#000000;"> [:</span><span style="color:#007f7f;"><i>event</i></span><span style="color:#000000;"> </span><span style="color:#7f7f7f;">|</span><span style="color:#000000;"><br /> </span><span style="color:#007f7f;"><i>event</i></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">source</span><span style="color:#000000;"><br /> </span><span style="color:#7f4c00;">color:</span><span style="color:#000000;"> </span><span style="color:#ea00ea;"><b>S2SColor</b></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">blue</span><span style="color:#000000;">;<br /> </span><span style="color:#7f4c00;">backgroundColor:</span><span style="color:#000000;"> </span><span style="color:#ea00ea;"><b>S2SColor</b></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">blue</span><span style="color:#000000;"> </span><span style="color:#7f4c00;">muchLighter</span><span style="color:#000000;"><br /> ].<br /> <br /> </span></td> </tr> </tbody> </table> <br /><br /><br />Si algo tiene de interesante esta primera versión es que ya estoy jugando con los widgets "Edit In Place" (Modificar en el Lugar) que usaré para la modificación en vivo del LiveWiki. Este es el método que crea algunos textos "EditInPlace" y, también, crea un botón para crear más textos editables.<br /><br /> <table style="background-color: rgb(255, 255, 204); width: 90%; text-align: left; margin-left: auto; margin-right: auto;" border="0" cellpadding="10" cellspacing="0"> <tbody> <tr> <td><b>SWTExampleApplication>></b><b>createEditableTexts</b><span style="color:#000000;"><br /> <br /> </span><span style="color:#7f7f7f;">|</span><span style="color:#000000;"> </span><span style="color:#6b6b6b;"><i>root</i></span><span style="color:#000000;"> </span><span style="color:#7f7f7f;">|</span><span style="color:#000000;"><br /> <br /> </span><span style="color:#6b6b6b;"><i>root</i></span><span style="color:#000000;"> </span><b>:=</b><span style="color:#000000;"> </span><span style="color:#7f0000;"><b>self</b></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">rootWidget</span><span style="color:#000000;">.<br /> <br /> </span><span style="color:#6b6b6b;"><i>root</i></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">addHorizontalRule</span><span style="color:#000000;">.<br /> </span><span style="color:#6b6b6b;"><i>root</i></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">addWidget:</span><span style="color:#000000;"> (</span><span style="color:#ea00ea;"><b>SWTHeader</b></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">level:</span><span style="color:#000000;"> </span><span style="color:#7f0000;"><b>2</b></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">contents:</span><span style="color:#000000;"> </span><span style="color:#7f007f;"><b><span style="font-size:-1;">'Edit-In-Place texts'</span></b></span><span style="color:#000000;">).<br /> <br /> </span><span style="color:#6b6b6b;"><i>root</i></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">addWidget:</span><span style="color:#000000;"> (</span><span style="color:#ea00ea;"><b>SWTButton</b></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">caption:</span><span style="color:#000000;"> </span><span style="color:#7f007f;"><b><span style="font-size:-1;">'add a new edit-in-place text'</span></b></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">onClick:</span><span style="color:#000000;"> </span><span style="color:#007f00;">[</span><span style="color:#000000;">:</span><span style="color:#007f7f;"><i>event</i></span><span style="color:#000000;"> </span><span style="color:#7f7f7f;">|</span><span style="color:#000000;"> </span><span style="color:#7f0000;"><b>self</b></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">addNewEditInPlaceText</span><span style="color:#007f00;">]</span><span style="color:#000000;">).<br /> </span><span style="color:#6b6b6b;"><i>root</i></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">lastWidget</span><span style="color:#000000;"> </span><span style="color:#7f4c00;">backgroundColor:</span><span style="color:#000000;"> </span><span style="color:#ea00ea;"><b>S2SColor</b></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">yellow</span><span style="color:#000000;"> </span><span style="color:#7f4c00;">muchLighter</span><span style="color:#000000;">.<br /> </span><span style="color:#6b6b6b;"><i>root</i></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">addBreak</span><span style="color:#000000;">.<br /> <br /> <br /> </span><span style="color:#6b6b6b;"><i>root</i></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">addWidget:</span><span style="color:#000000;"> (</span><span style="color:#ea00ea;"><b>SWTEditInPlaceText</b></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">contents:</span><span style="color:#000000;"> </span><span style="color:#7f007f;"><b><span style="font-size:-1;">'One edit-in-place text, click on me to edit'</span></b></span><span style="color:#000000;">).<br /> </span><span style="color:#6b6b6b;"><i>root</i></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">addBreak</span><span style="color:#000000;">.<br /> <br /> </span><span style="color:#6b6b6b;"><i>root</i></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">addWidget:</span><span style="color:#000000;"> (</span><span style="color:#ea00ea;"><b>SWTEditInPlaceText</b></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">contents:</span><span style="color:#000000;"> </span><span style="color:#7f007f;"><b><span style="font-size:-1;">'Another edit-in-place text (with background color), double click on me to edit'</span></b></span><span style="color:#000000;">).<br /> </span><span style="color:#6b6b6b;"><i>root</i></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">lastWidget</span><span style="color:#000000;"><br /> </span><span style="color:#7f4c00;">editOnDblClick</span><span style="color:#000000;">;<br /> </span><span style="color:#7f4c00;">backgroundColor:</span><span style="color:#000000;"> </span><span style="color:#ea00ea;"><b>S2SColor</b></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">blue</span><span style="color:#000000;"> </span><span style="color:#7f4c00;">muchLighter</span><span style="color:#000000;">.<br /> </span><span style="color:#6b6b6b;"><i>root</i></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">addBreak</span><span style="color:#000000;">.<br /> <br /> </span><span style="color:#6b6b6b;"><i>root</i></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">addWidget:</span><span style="color:#000000;"> (</span><span style="color:#ea00ea;"><b>SWTEditInPlaceText</b></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">contents:</span><span style="color:#000000;"> </span><span style="color:#7f007f;"><b><span style="font-size:-1;">'Just another edit-in-place text (with background color), move mouse over me to edit'</span></b></span><span style="color:#000000;">).<br /> </span><span style="color:#6b6b6b;"><i>root</i></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">lastWidget</span><span style="color:#000000;"><br /> </span><span style="color:#7f4c00;">editOnMouseOver</span><span style="color:#000000;">;<br /> </span><span style="color:#7f4c00;">backgroundColor:</span><span style="color:#000000;"> </span><span style="color:#ea00ea;"><b>S2SColor</b></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">red</span><span style="color:#000000;"> </span><span style="color:#7f4c00;">muchLighter</span><span style="color:#000000;">.<br /> </span><span style="color:#6b6b6b;"><i>root</i></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">addBreak</span><span style="color:#000000;">.<br /> <br /> </span><span style="color:#6b6b6b;"><i>root</i></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">addWidget:</span><span style="color:#000000;"> (</span><span style="color:#ea00ea;"><b>SWTEditInPlaceText</b></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">contents:</span><span style="color:#000000;"> </span><span style="color:#7f007f;"><b><span style="font-size:-1;">'And just another edit-in-place text (with background color), move mouse over me to edit'</span></b></span><span style="color:#000000;">).<br /> </span><span style="color:#6b6b6b;"><i>root</i></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">lastWidget</span><span style="color:#000000;"><br /> </span><span style="color:#7f4c00;">editOnMouseOver</span><span style="color:#000000;">;<br /> </span><span style="color:#7f4c00;">backgroundColor:</span><span style="color:#000000;"> </span><span style="color:#ea00ea;"><b>S2SColor</b></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">green</span><span style="color:#000000;"> </span><span style="color:#7f4c00;">muchLighter</span><span style="color:#000000;">.<br /> </span><span style="color:#6b6b6b;"><i>root</i></span><span style="color:#000000;"> </span><span style="color:#7f4c00;">addBreak</span><span style="color:#000000;">.<br /> </span></td> </tr> </tbody> </table> <br /><br /> Para los bagos de siempre (que no quieren instalar nada en sus Squeaks) les subí un <a href="http://www.consultar.com/trastero/SWT%20Example%20Application.htm">HTML 100% autónomo que incluye todo el código Javascript generado desde Smalltalk</a> (126Kb).<br /><br />Los próximos pasos, en el desarrollo, es integrar los widgets con el <a href="http://diegogomezdeck.blogspot.com/2006/05/jugando-con-comet-en-squeak.html">Asteroid</a> (Implementación de Comet para Squeak) para poder implementar un <a href="http://en.wikipedia.org/wiki/Observer_pattern">Observer Pattern</a> (aka un <a href="http://heim.ifi.uio.no/%7Etrygver/themes/mvc/mvc-index.html">MVC</a>) distribuido entre el Squeak y los navegadores de Internet.Diego Gomez Deckhttp://www.blogger.com/profile/11016380965975303930noreply@blogger.comtag:blogger.com,1999:blog-11642986.post-1156860691765694132006-08-29T16:08:00.000+02:002006-08-29T16:11:31.776+02:00Proyecto LinEx presentado ante la ONUSí, ante la <a href="http://www.un.org/spanish/">ONU</a>.<br /><br />Ver más información en <a href="http://naumaquia.extreblog.com/200608295754_gnuLinEx-en-Nueva-York-en-la-sede-de-la-ONU.html">el blog de Jesús Rubio</a>.<br /><span class="down" style="display: block;" id="formatbar_CreateLink" title="Vínculo" onmouseover="ButtonHoverOn(this);" onmouseout="ButtonHoverOff(this);" onmouseup="" onmousedown="CheckFormatting(event);FormatbarButton('richeditorframe', this, 8);ButtonMouseDown(this);"><br /></span>Diego Gomez Deckhttp://www.blogger.com/profile/11016380965975303930noreply@blogger.comtag:blogger.com,1999:blog-11642986.post-1156843324810027872006-08-29T11:13:00.000+02:002006-08-29T11:22:04.936+02:00La computadora se usa mal, ¡pero NO sólo en el aula!Tuve la suerte de participar, por segunda vez, en <a href="http://www.unia.es/nuevo_inf_academica/Ver_cursos_unia_detalle.asp?codcurso=18/B_2005">uno de los cursos de veranos</a> organizados por la <a href="http://www.unia.es/">Universidad Internacional de Andalucía</a>. El curso fue organizado de forma impecable por <a href="http://nti.uji.es/%7Ejordi/">Jordi Adell</a>. Lamenté no poder grabar en video mi intervención, ya que es una de las pocas veces que tengo suficiente tiempo para mostrar la presentación completa.<br /><br />No se bien porqué, el evento está muy cubierto por periodistas de diferentes medios (Además del curso de 3 horas, dí 3 reportajes a diferentes medios). Uno de los medios era <a href="http://www.europapress.es/">Europa Press</a>. La <a href="http://www.europapress.es/europa2003/noticia.aspx?cod=20060825135331&tabID=1&ch=235">cobertura de Europa Press</a> fue reproducida por diferentes medios (<a href="http://www.extremaduraaldia.com/tecnologia/el_director_del_proyecto_squeak_dice_que_el_uso_que_se_da_al_ordenador_en_las_aulas_no_es_el_correcto.html">Extremadura al Día</a>, <a href="http://www.evidalia.com/diarioweb/noticia3508s3.html">Evidalia</a>, <a href="http://www.elperiodicoextremadura.com/noticias/noticia.asp?pkid=256145">El Periódico de Extremadura</a>, <a href="http://www.diariogranada.com/noticia.php?id=35538&PHPSESSID=79604973babdf5d0797a5d4655f78a20">Diario Granada</a>, etc).<br /><br />A modo del juego "Teléfono Descompuesto" (o, en España, "Teléfono Roto"), la transcripción de la entrevista no es exacta al 100%.<br /><br />Cuando yo dije que las computadoras no se están utilizando bien, no me refería solamente al uso que se les da en el aula. Me refería al uso que se les da en general, dentro o fuera del aula. Por supuesto que tampoco dije nada sobre que una región u otra den mejor o peor uso de los ordenadores (tal como <a href="http://www.elperiodicoextremadura.com/noticias/noticia.asp?pkid=256145">sostiene el Periódico de Extremadura</a> , o <a href="http://www.redextremadura.com/noticias/noticia.asp?pkid=256145">La Red de Extremadura</a> en el titular de la notas).<br /><br />Lo que dije es lo que digo siempre en mis charlas: Las computadoras están siendo usadas (mayoritariamente) como si fuese un medio de expresión antiguo. La observación no es exclusiva del uso que se les da, a las computadoras, en el aula ni (todavía mucho menos) sobre el uso que se da por regiones.<br /><br />Si les interesa conocer más en detalle mi opinión, puede leer el capítulo de introducción del libro "<a href="http://diegogomezdeck.blogspot.com/2005/08/squeak-un-mundo-para-aprender.html">Squeak: Un Mundo para Aprender</a>". La versión HTML del capítulo está en:<br /><br /><div align="center"><a href="http://www.consultar.com/DiegoGomezDeck/papers/Squeak%20-%20Un%20mundo%20para%20aprender/">http://www.consultar.com/DiegoGomezDeck/papers/Squeak - Un mundo para aprender/</a></div>Diego Gomez Deckhttp://www.blogger.com/profile/11016380965975303930noreply@blogger.comtag:blogger.com,1999:blog-1164298