Contenido de la categoría Aplicaciones web

« Entradas anteriores Siguientes entradas »

Despixelizador de imagenes a vectores

Hace un par de años desarrollé una pequeña aplicación online (PHP) que permitía adjuntar una imagen y configurar unos parámetros y obtener una “deformación” de la imagen en formato vectorial (Flash, SWF). Tanto antes como después de eso he ido viendo diferentes versiones de lo mismo, aunque lo bueno de la que yo hice es que al exportar en formato SWF, permite la importación posterior a aplicaciones como Illustrator o Freehand. Lo que no se es si la versión CS3 de Illustrator incorpora ya algo parecido.

Despixelizador de imagenes

La opción “USAR WEBCAM” no funciona.

Y aquí unos ejemplos basados en la misma imagen:

despix01.jpg
despix02.jpg
despix03.jpg
despix04.jpg
despix05.jpg
despix06.jpg

La línea oscura que se ve a la derecha de las imagenes son un pequeño error que aparece con las opciones de “entrelazadas” y “sinusoidal”.

Si alguien utiliza esta aplicación para algo me gustaría tener constancia de eso :).

La foto de ejemplo ha sido tomada de aquí.

Up!, librería para subir archivos de forma oculta.

Ideal para CMSs, este script os puede ayudar a hacer varios uploads sin tener que recargar la página. Aparte, os dejará enviar un formulario de la misma forma.

JavaScript:
  1. up={
  2.     load:function(formulari,callBack){
  3.         var frame=up.creaFrame();
  4.         document[formulari].target=frame;
  5.         document.getElementById(frame).onComplete=callBack;
  6.         document[formulari].submit();
  7.     },
  8.     creaFrame:function(){
  9.         var frame='f'+Math.floor(Math.random()*99999);
  10.         var d=document.createElement('DIV');
  11.         d.innerHTML='<iframe style="display:none" src="about:blank" id="'+frame+'" name="'+frame+'" onload="up.loaded(\''+frame+'\')"></iframe>';
  12.         document.body.appendChild(d);
  13.         return frame;
  14.     },
  15.     loaded:function(id){
  16.         var frame=document.getElementById(id);
  17.         if (frame.contentDocument){var d = frame.contentDocument;
  18.         }else if (frame.contentWindow){var d = frame.contentWindow.document;
  19.         }else{var d = window.frames[id].document;}
  20.         if(d.location.href=="about:blank"){return;}  
  21.         if(typeof(frame.onComplete)=='function'){frame.onComplete(d.body.innerHTML);}
  22.     }
  23. };

Está basado en un script que encontró Santi (un compañero de CDmon) y lo modifiqué para minimizar el peso y para obtener el resultado que yo quería (basicamente pulí toda la paja y ahora sólo lanza el callBack cuando ha terminado de cargar el archivo).

Os dejo un ejemplo de uso:

JavaScript:
  1. <script type="text/javascript">
  2. function cons_upload_arxiu(){
  3.     dup=document.cons_upload;
  4.     if(dup.arxiu.value==""){alert("Falta seleccionar un arxiu!!");return false;}
  5.     var id = d("cons_referencia").value;
  6.    
  7.     dup.id.value=id;
  8.  
  9.     up.load("cons_upload",cons_ok_upload);
  10.     return false; //para que no envíe el formulario en la página principal
  11. }
  12. function cons_ok_upload(retorno){
  13.     alert(retorno);
  14. }
  15. </script>

HTML:
  1. <form id="cons_upload" name="cons_upload" action="cons_detall.php" method="post" enctype="multipart/form-data">
  2.     <label>Adjuntar arxiu:</label>
  3.     <input name="arxiu" type="file" />
  4.     <input value="Adjuntar arxiu" type="submit" onclick="cons_upload_arxiu();" />
  5. </form>

El archivo cons_detall.php es el que procesa la subida del archivo.

Espero que os sea útil! :)

appendChild, frames y Internet Explorer

Para los que tengáis que trabajar con frames y DOM, tened en cuenta que con Internet Explorer no se pueden crear los elementos en la página contenedora del frameset para luego insertarla en un frame. Para poder hacerlo correctamente, tan solo se tiene que crear el elemento dentro del frame, con lo que para insertarlo ya no se tendrá que hacer entre marcos.

Como lo he hecho:

JavaScript:
  1. var marco=window.nombredelmarco.frameElement.contentWindow;
  2. var capa=marco.document.createElement("div");
  3. marco.document.body.appendChild(capa);

Perfecto!! :)

Con Firefox si se puede, así que de momento entenderemos que no hay documentación clara al respecto en lugar de achacarlo a un fallo del citado explotador :P.

Creador de Paletas de colores en JavaScript

Hace mucho tiempo hice un método para el objeto MovieClip de Flash, el cual te creaba una paleta de colores en el lugar indicado de la película (ideal para CMSs entre otras utilidades).

Hoy rascando en el baúl de los recuerdos me he encontrado con el script en la página de proto.layer51.com y ni corto ni perezoso me he decidido a rehacerlo para que funcione en javascript.

El resultado es el siguiente:

Podéis pulsar sobre los colores para que se ejecute la función de retorno (callBack).

El código es muy sencillo, un tiple bucle con tirabuzón y mortal para atrás :P

JavaScript:
  1. var ancho=10;
  2. var alto=10;
  3. var sep=1;
  4. creaPaleta=function(element,callBack){
  5.     var clip,col,top,left;
  6.     var aColors=["00","33","66","99","CC","FF"];
  7.     for(var x=0;x<6;x++){
  8.         for(var y=0;y<6;y++){
  9.             for(var z=0,d=0;z<6;z++,d++){
  10.                 col="#"+aColors[z]+aColors[x]+aColors[y];
  11.  
  12.                 clip=document.createElement("a");
  13.                 clip.href="Color: "+col;
  14.                 clip.funcio=callBack;
  15.                 clip.onclick=function(){
  16.                     this.funcio(this.color);
  17.                     return false;
  18.                 }
  19.                 cs=clip.style;
  20.                 cs.backgroundColor=clip.color=col;
  21.                 top=sep+y*(alto+sep);
  22.                 cs.top=top+"px";
  23.                 left=sep+(z*((sep+ancho)*6))+(x*(ancho+sep));
  24.                 cs.left=left+"px";
  25.                 cs.width=ancho+"px";
  26.                 cs.height=alto+"px";
  27.                 cs.position="absolute";
  28.                 cs.overflow="hidden";
  29.  
  30.                 element.appendChild(clip);
  31.             }
  32.         }
  33.     }
  34.     element.style.position="relative";
  35.     element.style.height=(6*(alto+sep)+1)+"px";
  36.     element.style.width=(6*6*(ancho+sep)+1)+"px";
  37. }
  38. function funcionRetorno(e){alert(e);}
  39. creaPaleta(document.getElementById("paleta"),funcionRetorno);

Los parámetros configurables son:

ancho y alto: para definir el tamaño de los botones
sep: para definir la separación entre botones

Para crear una paleta se tiene que ejecutar la función creaPaleta pasandole dos argumentos:

element: el cual requiere un elemento HTML (si puede ser un DIV mejor :))
callBack: la función que se ejecutará al pulsar sobre del color seleccionado.

La función es MUY escalable, si queréis añadir efectos rollOver y rollOut solo tenéis que añadirlo en donde figura "clip.onclick=function(){" y ahí le podéis pasar cualquier evento válido para javascript.

Oh! que no lo he dicho! es compatible con FF1.0+,IE5.0+,Opera7.0+ y Safari beta 3 windows, si podéis probarlo con otros navegadores y comentarme si va o no me haréis un grato favor :)

¿Que os parece? :P

Blog de desarrollo web

Desde uno de los comentarios del blog llego a otro blog de temática parecida a este donde hay interesantes artículos sobre seguridad y javascript. Esperemos que no se canse en dos días y siga escribiendo :)

Formatoweb.com.ar

Ese blog es la versión nueva de su vieja página.

Si tenéis un blog de temática de desarrollo web estaré muy agradecido que me mandéis los enlaces para montar un pequeño repertorio de recursos.

Tabla de códigos para caracteres ISO8859-1

Por motivos obvios he terminado montando una tabla que os puede ser de ayuda cuando necesitéis escapar caracteres en javascript (%E1) y cosas así:

Tabla de códigos para carácteres ISO8859-1
Código de caracteres

Palabras reservadas

Hace unos días nos llegó una queja de un usuario de CDmon donde decía que en Opera no funcionaba bien el gestor de correo electrónico y nos pusimos manos a la obra para ver que problema había. Después de debugar el script utilizando la consola de errores, vimos el siguiente error:

JavaScript - correo.php
Inline script compilation
Syntax error while loading: line 6 of inline script at correo.php :
window.goto=290;
-------------^

¿goto? y que problema da goto... ¿será algo de Opera?... pues no, es algo tan sencillo como que es una palabra reservada. Me siento incluso un poco tontaina por no haber caído en eso antes.

¿Reservada? Si, eso significa que no se puede utilizar ya que puede ser que en futuras versiones de los navegadores haya nuevas implementaciones de javascript las cuales incluyan dichas palabras "reservadas". Entonces, Opera parece que se lo toma muy en serio y directamente lanza error cuando se utilizan estas palabras.

Me comenta Zigotica que hace un tiempo él tuvo problemas con Firefox y la palabra reservada "class".

JavaScript:
  1. //Esto no funciona
  2. function blah(class){
  3. }

Parece que aquí cada uno permite lo que le da la gana.

Os dejo un listado de palabras que figuran en la referencia ECMAScript las cuales están reservadas:

Extracto del PDF::Página 14-15
Reserved Keywords

break else new var case finally return void catch for switch while continue function this with default if throw delete in try do instanceof typeof

Future Reserved Words

abstract enum int short boolean export interface static byte extends long super char final native synchronized class float package throws const goto private transient debugger implements protecte

A continuación os dejo unos enlaces que contienen información con las palabras que NO debéis usar para definir ni variables, ni propiedades, ni métodos, ni ná!.

Palabras reservadas javascript
Referencia ECMAScript, página 14 del PDF

Buscador de selectores CSS inutiles

Ayer buscando alguna utilidad para validar una CSS me encontré con esta maravilla:

CSS REDUNDANCY CHECKER

Introduces la ruta de tu CSS y de los archivos de la página y te analiza el código de cada una de las páginas para encontrar los selectores que no se utilizan de la CSS.

Adaptador automático de altura de textarea

Hace unas semanas programé el formulario para la encuesta de calidad de CDmon y hay unos campos de entrada de texto que son opcionales, los cuales programé para que se adapten a los saltos de línea que se vayan introduciendo, de manera que según se van haciendo saltos de línea, el textarea se va agrandando y adaptando a su texto interior.

JavaScript:
  1. window.onload=function(){
  2.     var t=document.getElementsByTagName("textarea");
  3.     for(var i=0;i<t.length;i++){
  4.         var ta=t[i];
  5.         ta.onkeyup=function(){
  6.             var salts=this.value.split("\n").length-1;
  7.             if(salts>=3){this.rows=salts+1;}
  8.             if(salts<3){this.rows=3;}
  9.         }
  10.     }
  11. }

Y por la parte del HTML, pues tantos textareas como se quiera.

HTML:
  1. <textarea name="text1" rows="3"></textarea>

Se puede modificar la altura base modificando el 3 por lo que se quiera.

Bookmarklet para recargar la CSS en línea

O lo que es lo mismo, se terminó recargar la página para ver el efecto deseado. De momento está en modo manual, es decir, que para recargar la CSS tendréis que ejecutar el Bookmarklet. No me interesa añadirle un setInterval, así que si alguien se anima a programarlo pues que aporte la modificación :).

JavaScript:
  1. javascript:function refreSSCR(aCSS){var nCSS;var r=Math.round(Math.random()*999999);if(aCSS.indexOf("?r")!=-1){nCSS=aCSS.replace(/\?r\=\d+/,"?r="+r);}else{nCSS=aCSS+"?r="+r;};return [aCSS,nCSS];};function refreSSCS(el,CSS){el.innerHTML=el.innerHTML.replace(CSS[0],CSS[1]);};function refreSSCL(el,CSS){el.href=CSS[1];};function refreSSC(){var s,imp,r;var impurl = /@import url(?:\ *)(?:\(|\(\"|\(\')(.*)?(?:\)|\"\)|\'\));/;var st=document.getElementsByTagName('style');for(var i=0,t=st.length;i<t;i++){s=st[i];if(imp=impurl.exec(s.innerHTML)[1]){refreSSCS(s,refreSSCR(imp));}};var lt=document.getElementsByTagName('link');for(var i=0,t=lt.length;i<t;i++){s=lt[i];if(s.rel.toLowerCase().indexOf('stylesheet')!=-1&&s.href){refreSSCL(s,refreSSCR(s.href));}};};refreSSC();

Ese muñón lo metéis en un bookmark.

He estado navegando un rato para encontrar algo ya hecho pero solo he encontrado unos bookmarklets que te recargan el estilo si es del tipo LINK, por ello me he puesto con este que recarga todas las LINK y los @import.

La comprobación de LINK la he copiado de: MrClay.org

« Entradas anteriores Entradas siguientes »

Get Adobe Flash playerPlugin by wpburn.com wordpress themes