As My Life Goes On

A Life's Log

Subscribe to RSS feed

Posts tagged with "www"

El Diaro del Apocalípsis

, , , ...

Bueno tenia ganas de hacer una comparativa historica del opera con el resto de los browsers,
voy tratar de ser imparcial aun por mis preferencias.
La comparacion no será por versiones sino por fecha.
por mi forma de trabajo (workrave) me tomo 10 min cada 2 horas, asique hare posts cortitos, ya q el tema es muy extenso y da para hablar muchisimo.
Hay un par de cosa sinteresantes que tocaré, como comparacion de tecnologías, como se fueron dando las cosas, cosas como,
como perdio mercado netscape, cambios en las formas en que se usan trabajan crean y comercializan los softs, como murio netscape,
etc, y voy a intercalar con muchos tips sobre como sacarle mucho jugo al opera haciendo de este programa algo realmente util y quizas hasta
indispensable.

----

Comencemos, nuestra historia comienza allá por el 1991, cuando internet era una red de transferencia de datos, nada mas que eso,
con suerte teniamos tcp/ip para interconectarnos.
los datos se transferian con programas sencillitos, el mail d pedo existia creo.
El http, corazon de la internet como la conocemos hoy dia, era un protocolo como el ftp, ambos dos se dedican a transferir archivos de un lado al otro.

uno le pide a un server un archivo , y el server te lo da, si es que lo tiene, y si es que tenes los derechos.
(en realidad, el http y el ftp (hiper text transfer protocol y file transfer protocol) es la misma mierda, se podrian ver webs por ftp.
es mas creo que el ftp es mas sencillo y menos bloteado que el http).

el progama que creo la web tal y como la conocemos fué en realidad uno no mal nombrado WorldWideWeb (luego Nexus)
http://en.wikipedia.org/wiki/WorldWideWeb
este programa lo que hacia era en realidad usando el ftp y el http (que fue creado para Nexus) pedia archivos como un ftp pero con la
diferencia q cuando un archivo era del tipo html entonces lo mostraba de una forma particular smile
o sea, es lo mismo que entrar a un ftp con un listado d mp3 y q al clickear uno se reproduzca en el browser en vez de guardarlo.
la diferencia era este comportamiento "viral", que al abrir una web tenias 4 links a otras webs con 4 links y asi smile
(este efecto se refleja a lo largo d toda la historia y es la base de cualquier cosa que digase exitosa, incluyendo youtube, mails, social networks, etc)
Para la gente irrrnorante, el nexus era un SO basado en unix, http://en.wikipedia.org/wiki/File:NeXTSTEP_desktop.jpg (muy parecido a uno d los primeros kdes)

entonces se desarolló un subprograma para dibujar webs, o sea, el engine, llamado mosaic.
A ese engine se lo metió en el Netscape.

A fines del 94, sale la versión 1 d netscape, y de opera. Opera era en realidad un proyecto para probar algunas cosas (research), asi que no se lanzó al público.
En esa época, todas las empresas vieron la informática como una mina d oro. Basicamente no creo que hubiesen prorgamas gratis.
La epoca del shareware y los demos.
El netscape, habia que pagarlo. Pero como era el único browser de esa época, obtuvo facilmente mas del 80% del mercado.
(lo cual en realidad hay que nombrar a su unico competidor, que es Lynx, un browser solo de texto que hasta el dia de hoy sigue andando re bien)


Comming up Next:
test drive del netscape 2 y opera 2, comparativa entre ambos smile


links:
http://www.eskimo.com/~bloo/indexdot/history/netscape.htm
http://netscape.1command.com/index.phtml
http://en.wikipedia.org/wiki/Browser_timeline
http://en.wikipedia.org/wiki/Opera_(web_browser)
http://www.markschenk.com/opera/history.html
http://www.opera.com/docs/history/
http://www.opera-fansite.de/tiki-index.php?page=Download+alte+Versionen

asi me gusta que sean las cosas : http://en.wikipedia.org/wiki/KISS_principle

http://www.viddler.com/explore/coderush/videos/1/
http://en.wikipedia.org/wiki/The_Book_of_Mozilla
http://en.wikipedia.org/wiki/Mozilla_(mascot)

pd: correcciones, ampliaciones y comentarios bienvenidos, troleadas y fanatismos seran borrados smile

tecnicas de depuracion???

, ,

siguiendo con ext+netbeans+python primero, una foto d como el opera esta gueno bigsmile miren la cantidad d tabs abiertos que tengo en el opera y consume 190mb, en el iceweasel (firefox) solo tengo 2 y consume como 200 y pico, (y en el opera tengo tambien abierto el mismo programa que en el iceweasel) y java ahi comiendo 400mb... no c porque el xorg me consume 300mb.. tengo q revisar eso. el netbeans hace cosas interesantes, me ha mostrado cuando he importado alguna libreria que no uso, lo cual es importante, pero dificil de saber, por ejemplo, habria que leer con mucho cuidado todo el archivo para ver cual esta de mas... y tambien cuando en un array definí dos veces la misma variable. algo muy interesnte en ext, ya que las opciones pasan siempre como un diccionario. ahora con los trucos de programación. El programa que estamos haciendo tiene 2 partes, una es python la otra es javascript. python no tengo demasiados problemas porque ya lo cnozco, pero javascript hace cosas raras... y depurar algo en javascript es un dolor. Esto es usando el firebug, que se puede usar como plugin del firefox o tambien dentro del opera. el firebug define un objeto interesante, llamado console. por ejemplo, si en algun pedazo de codigo ponés
console.debug("el programa hizo esto");
otra cosa interesante es la palabra clave debugger si en algun lugar de tu codigo metés
debugger;
cuando se ejecuta eso, se abre el firebug y pausa la ejecucion para que lo depures paso por paso. Muy util, auqneu molesto para ir poniendo debugger por todos lados. ahora, lo que mas me ha ayudado es esto: cuando yo tengo que depurar una funcion, muchas veces para llegar a esa funcion tengo que hacer varios pasos, ir a un menu, abirr una ventana, elegir un item, se abre otra ventana, y clickear en otro coso. considerando que cada vez que cambio el js tengo que recargar toda la web. encontre algo que me ayuda mucho, podriamos decir que es una macro. la idea es sencilla. en algun lugar del codigo defino una funcion que hace todos estos pasos. por ejemplo, yo defini una llamada deb, q lo que hace es abrir la ventana para editar una tarea, y elegir la tarea x y abrir el panel de detalles. me ha ahorrado mucho tiempo.. lamentablemente no tengo mucho tiempo para explayarme, asique cualquier duda me preguntan. tampoco quiero hacer algo que ya está hecho, para eso está el google. -- en otras noticias, en debian squeeze salio una nueva version de los plugines para compiz, hace mucho no se updateaba ese paquete porque creo que el que mantenia los paquetes de compiz para debian se murio. ademas con la integracion de compiz al repo oficial de deb, se perdio interes en mantenerlo,. me estoy bajando el win7 para ver q onda, los pajeros de la web te piden q t registres y no c q para bajarlo y q hay cupos limitados. entrando a thepiratebay encontras un torrent q tiene como 740 seeds (posta) y ha sido bajado mas de 5904 veces.... despues los de windows dicen "A torrent has leaked", leaked? era obvio macho. a ver si despues subo las tradus que queria hacer, aunque tambien quiero comentarle de todos lso programas de descargas/transferencias que he encontrado bigsmile zaludos.

Super Tecnicas de Programación en ExtjS

, ,

bueno queria contar unas ideas que me surgieron luego de usar bastante ext, no son nada novedosos, la mayoria las aprendí con Delphi5 pero no se me hubiese ocurrido implementarlas en ext. Para alguien que no conozca otra cosa que web, le va a abrir la cabeza. 1º, un buen ide. Normalmente para programar, con el notepad ya basta (kwrite en mi caso, q tiene infinitas mas funcionalidades que el notepad (code highlighting de infinidad d lenguajes, y colapsa bloques d codigo pej)) Un ide ta lleno de boludeces, pero la verdad que son esas boludeces las que marcan la diferencia entre programar rápido, y morirse de hambre de camino. El ide que hasta ahora mas me ha gustado es el eric, para programar en python, y tiene algunas cosas para otros lenguajes. pero hace poco lo están pasando a qt4, y ha empezado a fallar, coincidentemente, cuando (casi) agarramos un laburo con un amigo de mi hna, (el tipo despues d confirmarnos nos cambio por otros que le vendian un programa ya hecho) entre en contacto con el ide de netbeans, buscando por ahi encontré que tambien se puede usar para python bigsmile (entre otros) la verdad que es muy avanzado, analiza el codigo y te crea las clases, con sus metodos y propiedades. Sonará una tontera en un programa hasta del tamaño del kafx (q es bastante chico), pero cuando tenés mas de 2000 lineas de codigo (casi indocumentado) y solo para un archivo, se vuelve muuuy util, sobretodo cuando hay que ir y volver en varias clases en el mismo archivo. Tiene la capacidad de analizar de donde importaste que, en donde se definen las clases, las variables, y puede poner ayuda sobre los métodos que lo tengan. realmente muy util. pero lo que más me gustó es que tiene un buen análisis sintáctico, encuentra errores no solo de sintaxis, sinó posibles errores, como variables no usadas, nunca definidas, y cosas rarísimas, como por ejemplo: o este, que es con el que estoy laburando ahora, con 4000 lineas... me viene bien porque en ext yo uso python y jscript. y los ds los maneja el netbeans, con artualizaciones automaticas (aunque prefiero el apt) e integrado con svn. lo unico malo q tiene es que come mucha memoria (300mb maso, q es mucho si necesitas ademas apache mysql el opera y el firefox y el amarok por supuesto) de igual manera ya me ha hecho ahorrar bastante tiempo. Volviendo a ext. No soy fanático de las webs, (las odio) menos de ext, y mucho menos de javascript... pero lo que tiene ext, es q es mucho mejor que programar en javascript+html, hasta t permite usar tecnicas de programación orientada a ocjetos y RAD. bigsmile lo primero que vi para mejorar el código, es, tratár de usar lazys config (o init) lo mas posible. por lo menos a mi me parece lo más lindo.
this.customerNameInput = new Ext.form.TextField({                                                                  
             anchor: '100%',                              
             name: 'customer_name',                       
             allowBlank: false                                                           
         });                                             
         this.newCustomerPanel = new Ext.Panel({                                                              
             border: false,                                       
             layout:'column',                             
             anchor: '100%',                              
             style: "padding-bottom: 6px",
             hidden: true,
             defaults:{layout: 'anchor', border: false},
             items: [
                 {
                     columnWidth: 0.5,
                     bodyStyle: {paddingRight: '8px'},
                     items: [this.customerNameInput]
                 },
este tipo de codigo tiene que ser ejecutado dentro de una función... o podes ponerlo asi:
this.newCustomerPanel = new Ext.Panel({                                           
             border: false,                                       
             layout:'column',                             
             anchor: '100%',                              
             style: "padding-bottom: 6px",              
             hidden: true,                                        
             defaults:{layout: 'anchor', border: false},                                                       
             items: [
                 {
                     columnWidth: 0.5,
                     bodyStyle: {paddingRight: '8px'},
                     items: [{
                       xtype:'textfield',
                       anchor: '100%',
                       name: 'customer_name',
                       allowBlank: false
                     }]
                 }]});
se ve mas enredado, pero a la larga es mas sencillo. ademas todo eso de andar moviendo los this por todos lados es muy hinchapelota y peligroso. una de las cosas que no se si funciona bien o no, es crear un nuevo objeto en la declaración del lazy init... realmente aun no entiendo los principios de las clases en ext, y menos entiendo lo de lazy init...
this.newCustomerPanel = new Ext.Panel({                                           
               border: false,                                     
               layout:'column',                           
               anchor: '100%',                            
               style: "padding-bottom: 6px",            
               hidden: true,                                      
               defaults:{layout: 'anchor', border: false},
               items: [
                   {
                      columnWidth: 0.5,
                      bodyStyle:{paddingRight: '8px'},
                      items: [
                        new Ext.button({text:'hola'})
                      ]
                  }
Otra de las cosas muy importantes, y que luego sirve con el siguiente cometnario que haré es declarar las funciones a parte, no inline, como? bueno, como les dije, programando en ext es comun poner :
brandCmb.on({
     select: function(){
        //hacemos request, calculamos el md5,
        // salvamos a la tierra y notificamos. 
      alert('You Suck');
     }})
pero he descubierto que es mejor algo como esto:
brandCmb.on({
     select: OnBrandSelect,
     scope:this
     })
        //...........
        //dentro de la clase padre
    OnBrandSelect: function(){
      //hacemos request, calculamos el md5, 
      //salvamos a la tierra y notificamos. 
      alert('You Suck');
     }})
aparentemente no hay cambio, ahora, recuerden : 4000 lineas, tenemos clases, que tienen las funciones dentro de donde se declaran los objetos hijos... te vuelve loco buscar algo!!! y recordé que es la forma en que delphi lo hace, al principio, define una clase genérica para cada form, aunque se use una sola vez. y debajo se declaran las funciones, lo mismo pasa en c por ejemplo, que tiene la declaracion de las clases inclusive en un archivo diferente, aunque tambien permite el inline, por lo que en c se puede programar algo como el primer ejemplo. ahora las tecnicas, en delphi todo está altamente clasificado, vos tenés un formulario, por ejemplo, que es subclase de una ventana, que es subclase de un objeto. y el formulario que vos creas, es otra subclase. el tema es que nunca pasé de usar controles estandard, en esta aplicación me encontré cosas como.. que yo hacia un panel, que adentro tenía un arbol, con una url y un comportamiento, y una caja de busqueda, que interactuaba con el arbol. pero eso, tenia que usarlo dos veces, lo que primero se viene a la cabeza (ademas de foo) es duplicar el codigo. Pero después me acordé de algo que leí fugazmente en el foro, extender clases. (o como lo llaman "pre-configured class") y me acordé de un ejemplo de delphi, donde se creaba una clase de un formulario, que era un PasswordForm (nombreinventado) que tenia labels, textboxs y botones como para pedir nombre de usuario, contraseña y aceptar. No parece muy util, pero eso es reutilización. "Instanciando" una de esas clases, vos tenias un dialogo para contraseña y luego metías el codigo necesario. Una de las cosas copadas es esa. imaginen un panel que muestra imagenes, puede ser algo como esto (nota, probablemente este cod no funcione, lo hago d memoria nomas)
imagePanel = Ext.extend(Ext.panel({                      
  store : Ext.data.JSonStore({url:.......                     
  //codigo para cargar imagenes y todo.                  
  items:[ 
    new Ext.panel({                        
    //panel para mostrar imagen                          
    listeners:[{                                                                          
        OnDoubleClick: {                                                                  
            handle: this.OnImageClick,                                                              
            scope: this                                                                   
        }}]                                              
    ///... demas cosas.                                  
}                                                        
//Y entonces, en alguna ventana, podemos crear un panel para mostrar 
imagenes.

otraVentana = Ext.Window({
    items:[ new imagePanel({
        url:'urlaimagenespr0n',
        OnImageClick:this.OnImageDelPanelClick}) ],
    OnImageDelPanelClick: function(){
        //Esto reemplazaria el OnImageClick del ImagePanel anterior..
        this.......
    }
})
no se ve muy claro porque ext es algo complejito para hacer ciertas cosas, pero la idea está, y esta bastante bueno porque corta mucho tiempo, incluso lo que he hecho, es declarar una clase con el arbol, otra con un panel, y luego un panel maestro que contiene a ambos, agrega un botón al panel con el arbol, y maneja ambos. esa es mas o menos la idea. incluso creo que muchos componentes de ext están armados de esa manera. el jsonstore desciende del store y asi... bueno ya se me hizo tarde y largo, la proxima si puedo pongo un poquito como usar el firebug para depurar un poco aunque es taaaaaaan lerdo que molesta. pero es la unica forma (Además del alert.... q es peor) por cierto, el colorcito lo hice con esto http://www.tohtml.com/ se lo recomiendo a mis amigos scripteros asi lo usan en sus blogs, anque creo haber visto un par ya

ExtJS

, ,

Bueno hace mucho queria comentar de esto. Hace unos meses entré a laburar, y hace poco me asignaron un nuevo proyecto (q cheto suena) cuya particularidad es que está hecho sobre python love pylons y extjs queria comentar un poco mi experiencia con extjs. en pocas palabras, está recontra copado sherlock Este programa acelera terriblemente la produccion de una web. basicamente, con pocas lineas de codigo en js, ext te crea en html todo la web, y se encarga de todo. lo que a vos te deja con un framework bien definido, claro, intuitivo y de alto nivel (o sea, que te permite manejar ideas complejas) pero a la vez es extensible se le pueden cambiar y agregar cosas. la verdad que es muy sencillo de usar, y dentro de todo funciona muy bien, es muchisimo mas comodo que andar peleando con html. ademas permite estructuras muy copadas, como ventanas, botones, progressbars, grillas, editores, demas. todo incluido. drag&drop, ajax. Además como se ocupa del renderizado, toda la pagina/aplicacion termina teniendo un look muy congruente. a la vez, permite cambiar los themes/estilos si vos queres (aunque no he tenido tiempo de eso, en el blog de saki pueden ver varios temas) permite mezclar los "controles" como un combobox que contenga una grilla. cosas muy copadas. A esto hay que sumarle, que ext puede diferenciar en que esta siendo ejecutado, por ejemplo en una palm se ve diferente, y funciona igual :)sin codigo adicional. Permite controlar toda la pagina de manera dinamica, crear objetos, borrarlos, modificarlos, etc. En definitiva, framework, muy util, completo, facil de usar (maso), dinámico, extensible, portable, cacheable, y ejecutado en el cliente. aca pueden ver los demos, para que se babeen bien. peeeeeeero, tiene algunos bordes filosos, hay que tener cuidado (como con todo framework) si se hace una aplicacion grande. de no enredarse solo. Si bien es un frame muy ... congruente, porque todos los controles interactuan bien entre si. peeero hay algunas cosas que no se comportan igual, por ejemplo. lo que me paso el otro dia. en un form para saber si todo salio bien , espera una respuesta con la variable "success" pero un ajax, para saber si salio bien espera un resultado una variable "type" igual a "ok"... despues, una de las cosas que me incomodan es que hay dos formas de declarar un objeto, usando la forma objetal de javascript
 var panel = new Ext.form.FormPannel();
o de lo que llaman lazy init.
var panel = { xtype:"form"};
el problema es que entre lazy y el normal, las cosas funcionan diferente, .. por ejemplo los xtypes no se corresponden con los nombres de las clases y eso confunde mucho... andar acordandose de los diferentes nombres. otra de las cosas que molesta un poco es que al ser de naturaleza asyncrónico, se utiliza mucho el pasaje de funciones por todos lados. por ejemplo, en un programa normal nosotors hariamos algo asi:
   a=10;
   respuesta = Postear(a) //Suponiendo que esto es sincrónico
   ir (respuesta == 'ok') {
    alert("You suck!");
   };
pero en forma asincronica es esto
 a=10;
  Postear({parametros:a, callback: function(result){
      if (result == "ok"){
         alert("You suck!");
      }
  });
un poco mas dificil d leer. incluso hay casos mas complicados como segun el result cargar un nodo o algo (asincronico tambien).. cansa... o por ejemplo con lo que me crucé, con una función que recibe como parametro una funcion y devuelve otra... @_@ algo asi:
function Span(s){ return "<span>" +s+"</span>"; }
function boldspan(s){
   return function(s){ return Span(""<b>""+ s + ""</b>""); }M
}
//----
renderer: boldspan
//son funciones que se llaman para cada item de una grilla o algo asi,
// q define como dibujar en html el contenido d un objeto.
lo peor de eso es que , bueno, en mis dias de programación IDE aprendí que algo muy bueno es separar el armado de la interfaz de el codigo que pertenece al mismo... pero se da demasiado eso de poner el codigo dentro de la definición de la interfaz gráfica, eso termina en un mostro de 2000 lineas (si, he tenido que editar una clase de 2000 lineas) donde no sabes que modifica el formulario y que se ejecuta como código. ok, so far so good, me voy a la facu , civediamo!

Solo en opera,

, ,

como le gusta hablar al pedo a la gente.
no tienen idea lo AHEAD que está opera en la ternologia,
miren, es el primer browser en pasar los acid3, todos los demas browsers le han copiado muchas si no todas las funcionalidades.
canvas , canvas 3d, soporte svg, VIDEO en svg,
basicamente ya está casi a la altura de flash. si, believe it or not, youtube podria estar implementado SIN flash.
lo que signifca? significa que podes usar la web en cualquier parte, celular, palm, nintendo ds, pc, linux, mac, windows, y que funcione como corresponde viendose bien!

una muestra del svg, que solo van a ver si usan opera, http://devfiles.myopera.com/articles/322/vistamen.svg


a los que sean devs, o webdevs, les recomiendo ver http://dev.opera.com/ hay cosas muy interesantes.
robado de acá : http://dev.opera.com/articles/view/how-to-do-photoshop-like-effects-in-svg/

-

,

Aguanten los tables e iframes, y las cosas que funcionan como se espera que funcionen.