Cmacias.com

Vamos a aprovechar el código obtenido en maquillar un file upload, para complementarlo y que se parezca aún más si cabe a un control de upload solo que a nuestro gusto.

El código inicial cambia un poco. Necesitamos crear un contenedor, y colocar dentro nuestro nuevo botón de upload, y un input de tipo texto para que nos muestre el archivo seleccionado.

<div class="cnt_upload">
   <input id="upload_value" value="" />
   <div class="upload">
      <input type="file" name="upload" onchange="document.getElementById('upload_value').value=this.value" />
    </div>
</div>

En esta ocasión hemos tenido que utilizar javascript para poder pasar mediante el evento onchange del input de tipo file, al de tipo texto.

Ahora que tenemos la estrucura necesaria, pasamos al css

div.cnt_upload {
   position:relative;
   height: 27px;
   width: 200px;
}

div.upload {
   position: absolute;
   left: 120px;
   top: 0px;
   width: 80px;
   height: 24px;
   overflow:hidden;
   background: url(btn_upload.png) left top no-repeat;
   clip:rect(0px, 80px, 24px, 0px );
}

   div.upload input {
      position: absolute;
      right: 0px;
      top: 0px;
      margin:0;
      padding:0;
      filter: Alpha(Opacity=0);
      -moz-opacity: 0;
      opacity: 0;
   }

input#upload_value {
   position:absolute;
   left: 0px;
   top: 0px;
   margin:0;
   padding:0;
   padding-top: 2px;
   height: 20px;
   width: 118px;
   border:1px solid #CCC;
}

[ demo ] [ descarga ]

Hace ya unos años me encargaron una mascota para una web. La idea era que la mascota le diera una poca de vida y representara la “esencia” de la empresa y la ciudad en la que se asentaba.

La mascota se presentó y gustó. Al poco tiempo, pasó de la web a la prensa, a las vallas publicitarias y a cambiar su identidad corporativa. Para bien o para mal, guste o no, la nueva imagen de la empresa era la mascota que se había creado para la web y que evidentemente se había tarifado de otra forma. Para “defender” a esa empresa diré que hubo un intermediario por el medio.

Pensáis que es bueno registrar cada uno de los trabajos que realizamos para así evitar un uso para el que no fué creado ? Luis Teixeiro, presidente de la ADGG, me comentaba en una ocasión que si, que era necesario, que había que hacer prevalecer nuestros derechos como autores, que no podíamos permitir que nuestras obras fueran utilizadas como los demás quisieran. Estas se vendían para una función y así se debían utilizar.

Pero el hecho de registrar un logo, una mascota, un slogan, no podría echar atrás a un cliente ? compensa ? Vale la pena perder el derecho de exigir que se utilice una obra por coger un cliente ? Vale la pena perder el cliente ?

Vamos a ver de que forma podemos maquillar los feos controles de upload de los formularios sin utilizar javascript y validando xhtml.

Lo que vamos a hacer es colocar un div en lugar del input_file, y este dentro del div de la siguiente manera

<div class="upload">
      <input type="file"  name="upload" />
</div>

Aplicamos ahora una capa de maquillaje que lo deje irreconocible

div.upload {
   position: relative;
   width: 80px;
   height: 24px;
   overflow:hidden;
   background:url(btn_upload.png) left top no-repeat;
   clip:rect(0px, 80px, 24px, 0px );
}  

div.upload input {
   position: absolute;
   left: auto;
   right: 0px;
   top: 0px;
   margin:0;
   padding:0;
   filter: Alpha(Opacity=0);
   -moz-opacity: 0;
   opacity: 0;
}

Qué es lo que hemos hecho ? Simplemente hacer transparente el input_file, y mediante la propiedad css “clip” evitamos que el control se salga de los límites del div.

Y para que su aspecto sea más profesional todavía, le añadimos al div una imagen como esta

[ demo ] [ descargar ]

Según Panda Software, un 23% de los PC’s particulares con antivirus, están infectados y un 72% de los PC’s de ámbitos empresariales también lo están.

Es por ello que mediante la campaña Infected or Not nos invitan a comprobar si estamos o no el el grupo de los “elegidos”.

Las 10 primeras empresas que se demuestren que tienen su redes limpias de virus y troyanos pueden optar a un premio de 5000 Euros, y como usuario, un IPOD.

[ web de panda ] [ web de la promoción ]

A los que pagan el cánon, a artistas, productores, a socios de la SGAE, a enemigos de la SGAE, a bares, pub, salas, escuelas de baile, gimnasios, escuelas, parvularios, autocares, establecimientos de informática y pequeños electrodomésticos que vendan soportes digitales, asociaciones de carácter cultural, deportivo, recreativos, hogares de pensionistas, a personas que quieran celebrar fiestas de fin de año, fiestas populares, bodas, banquetes, bautizos, comuniones, actos sociales, mítines, actos políticos, eventos deportivos, eventos gratuitos o benéficos en lo que se utilice música (sea en vivo o enlatada), vídeos o un simple televisor.

Exgae.net es la primera consultoría “casi gratuíta” especializada en librar a los ciudadanos de los abusos de la SGAE y demás entidades de gestión.

Lo que si sé, es que dará mucho que hablar.

Este plugin ya tiene un añito y me pareció interesante rescatarlo del baúl de los recuerdos. Su función es la de modificar los menúes de administración de nuestro wordpress y los transforma en menúes desplegables, por lo que nos ahorra un click.

[ web ]

Esta clase en php sube imágenes y las manipula con mucha facilidad. Es posible cambiar el nombre, crear miniaturas, añadir textos, fusionar con otras imágenes, cambiar el brillo, saturación, contrastes, añadirle tintas en un solo paso.

Su uso es muy sencillo. Añadimos el include a la clase, la iniciamos y le indicamos la carpeta de destino.

include('class.upload.php');
$handle = new Upload($_FILES['foto']);
$carpeta = $_POST['carpeta'];

Ahora por ejemplo redimensionamos la imagen y la comprimimos al 80%

$handle->image_resize = true;
$handle->image_x = 640;
$handle->image_y = 480;
$handle->image_ratio = true;
$handle->jpeg_quality = 80;
$handle->Process($carpeta);

Y de la misma manera, creamos otra instacia, a la que cambiamos el nombre añadiéndo el prefijo “thmb_”, la redimensionamos a 200×150 respetando la relación alto/ancho, y rellenamos de negro el espacio sobrante. También la comprimimos al 80%.

$handle->file_new_name_body =
         'thmb_'.$handle->file_src_name_body;
$handle->image_resize = true;
$handle->image_ratio_fill = 'C';
$handle->image_x = 200;
$handle->image_Y = 150;
$handle->jpeg_quality = 80;
$handle->image_background_color = '#000000';
$handle->Process($carpeta);
$handle-> Clean();

Como véis su uso es muy sencillo.
Está en su versión 0.25 (y proximamente la 0.26) y está bajo licencia GPL.

[ web ] [ ejemplos ] [documentación]

Estaba yo revisando mi correo Gmail - por motivos de trabajo, claro - cuando recibo la siguiente notificación.

Para obtener el mejor rendimiento de Gmail, te sugerimos que inhabilites Firebug para www.google.com.

Usuarios de Windows o Linux
Para inhabilitar Firebug:

1. Haz clic en el icono verde o rojo situado en la esquina inferior derecha de la ventana del navegador para abrir Firebug.
2. Haz clic en el icono de error en la esquina superior izquierda de Firebug y selecciona “Inhabilitar Firebug para mail.google.com”.

Si deseas mantener Firebug en funcionamiento, puedes mejorar el rendimiento de Gmail siguiendo estos pasos:

1. Haz clic en el icono verde o rojo situado en la esquina inferior derecha de la ventana del navegador para abrir Firebug.
2. Haz clic en la pestaña Console (Consola).
3. Selecciona Options (Opciones).
4. Desmarca Show XMLHttpRequests (Mostrar SolicitudesXMLHttp).
5. Haz clic en la pestaña Net (Red).
6. Selecciona Options (Opciones).
7. Desmarca Disable Network Monitoring (Inhabilitar supervisión de red).

Usuarios de Mac
Para inhabilitar Firebug:

1. Haz clic en el icono verde o rojo situado en la esquina inferior derecha de la ventana del navegador para abrir Firebug.
2. Haz clic en el icono de error en la esquina superior izquierda de Firebug y selecciona “Inhabilitar Firebug para mail.google.com”.

La inhabilitación de Firebug para Gmail no mejora los resultados de rendimiento; es posible que tenga que inhabilitar Firebug por completo.

De sobra es conocido por todos (creo) como realizar un “multiple update” en php, simplemente añadimos un corchete al final del nombre del campo de formulario que queremos actualizar, y en la página que recibe los datos se manipulan de la forma

< ?php $arrayCheckbox = $_POST['CheckboxGroup']; ?>

Hasta aquí todo bien pero, eso nos permite validar nuestro documento como Xhtml ? Depués de una rigurosa investigación de Andrés, la respuesta es si.

Lo que dice el W3C es que el valor para el atributo id debe ser del tipo texto y para name puede ser cdata. Por tanto, es válido usar los corchetes en name pero no en id.

Gracias por resolvernos la duda, Andrés