Cmacias.com

Hay veces en que no vale la pena utilizar javascript o scripts muy concretos para funciones básicas de una web. Con una línea de html y cuatro o cinco de css, es posible crear un tooltip, que en más de una ocasión nos será más que suficiente.

Es línea de código html es más que suficiente para crear nuestro tooltip básico

<a href="#" class="tip">enlace<span>Este es el tip.
Se puede añadir <strong>html</strong>, aunque no
<u>conviene</u> <i>abusar mucho</i> de él</span></a>

Nuestro objetivo es ocultar el <span> dentro del enlace y mostrarlo al pasar el ratón por encima del mismo.

a.tip {
   position:relative;
   color: #006699;
   text-decoration:underline;
   font-family:Arial, Helvetica, sans-serif;
   font-size: 11px;
}
a.tip:hover {
   color: #cc0000;
   text-decoration:underline;
}
   a.tip span {
      position:absolute;
      display: none;
      left: 0px;
      top: 10px;
      width: 180px;
      height: auto;
      padding: 10px;
      padding-top: 20px;
      color: #003366;
      background: url(tip.gif) left top no-repeat;
      border-bottom: 1px solid #006699;
      cursor: default;
   }
   a.tip:hover span {
      position:relative;
      display: block;
      padding: 0;
      margin:0;
      background: none;
      border: 0px none;
      cursor: default;
   }

   a.tip_demo span span, a.tip_demo:hover span span {
      position:relative;
      display: inline;
      left: auto;
      top: auto;
      width: auto;
      height: auto;
      padding: 0;
      color: #000;
      background: none;
      border: 0px none;
      cursor: default;
   }

[ descargar imagen de fondo del css ]

Ejemplo del tooltip

En este texto podemos encontrar Enlaces con tooltips ocultos que además soportan el uso de los tag más frecuentesnegrita, cursiva, texto con color y hasta imágenes si nos trabajamos bien el css

Siguiendo la estela del anterior post, los chicos de Moxiecode (tinyMce), han sacado una extensión para wordpress que permite integrar sus gestores MCFileManager y MCImageManager.

Esta se instala en la propia barra de herramientas del editor visual, por lo que facilita enormemente la gestión de nuestras imágenes y enlaces.

[ descargar la extensión ] [ Blog de Moxiecode ] [ TinyMce ]

Me entero por Anieto2k de una extensión para WordPress que realmente vale su peso en oro. La extensión se llama Imaset y viene a cubrir uno de los puntos flojos de WordPress, el editor de imágenes.

Imaset es un completo gestor de imágenes que nos permite realizar varias acciones, las cuales agradeceremos en sombremanera:

• Sombra
• Marco
• Reflejo
• Reflejo3D
• Brillo
• Perspectiva
• Glossy
• Invertir colores
• Colorizar
• Desenfoque suave
• Desenfoque fuerte
• Desenfoque gaussiano
• Marca de Agua
• Redimensionar

Yo por mi parte me la instalo, que me va a venir muy bien.

[ web ]

Mis más sinceras felicitaciones a Marcos Sancho por su aprobado en el “Adobe Certified Expert en Flash Lite 3.0″. Si antes ya eras grande, ahora lo eres más.

La explicación sobre lo que es el “Adobe Certified Expert en Flash Lite 3.0″ en su própia web

Para el que no conozca a Marcos y le apetezca saber un poco más de él.

Ingeniero Técnico en Informatica por la Universidad de Oviedo.
Desde el 2002 cuando tropieza con Flash 5, se introduce en el Action Script de la mano de la comunidad Subflash, para poco a poco pasar de moderador a miembro del equipo de desarrollo, hasta ser actualmente uno de los administradores y colaborador de la comunidad.

Ha presentado talleres [Agenda Web Flash-XML-PHP-MySQL] en el OFFF celebrado en Barcelona (junto a Joan Garnet y Javimp de Subflash)

En estos últimos años ha colaborado con la revista Blank Magazine en su número 02 con el artículo “Comunicación Flash – Windows”, y recientemente ha creado la empresa Q-interactiva la cual dirige y a través de la misma colabora con empresas de diversos lugares de España entre los que se encuentran Barcelona [www.quadricula.com], Madrid [Laura Zisman] y Málaga [www.spaincreative.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 ]