Cmacias.com

Ahora que están de moda los sistemas de pestañas, yo también me subo al carro de la moda y propongo mi propio sistema al margen de frameworks. Un poco de html, algo de css y el javascript de toda la vida.

Lo primero de todo es crear la estructura que queremos que siga el sistema. En mi caso quiero hacer un panel limitado en tamaño, para pongamos por ejemplo, un panel de configuración.

<div id="panel">
   <ul id="tabs">
      <li id="tab_01"><a href="#">opción 1</a></li>
      <li id="tab_02"><a href="#">opción 2</a></li>
      <li id="tab_03"><a href="#">opción 3</a></li>
      <li id="tab_04"><a href="#">opción 4</a></li>
   </ul>
   <div id="paneles">
      <div id="panel_01">panel para la opción 1</div>
      <div id="panel_02">panel para la opción 2</div>
      <div id="panel_03">panel para la opción 3</div>
      <div id="panel_04">panel para la opción 4</div>
   </div>
</div>

Seguir leyendo »

Hoy actualicé mi Ubuntu a la 8.04 LTS. Impresiontante la forma de actualizarse. Lo que no disfruté durante mi larga vida de windowsero lo estoy haciendo en mi corta vida como usuario de Ubuntu. Gracias pavL0 (para cuando el blog?)

[ Ubuntu ]

Si antes de ayer Adobe presentaba el Adobe media Player, ayer presentó la Beta del reproductor flash player 10. Este trae muchas novedades con respecto al fp9, como efectos 3D, nuevos filtros, mejoras en el trabajo con el texto, mejoras de rendimiento, mejoras en la api de dibujo y muchas cosas más.

Precisamente Marcos hacía mención ayer en su blog de este evento y de como en su momento tuvo el privilegio de asistir a una previa en el Adobe max chicago 2007.

[ adobe ] [ flash player 10 ]

Adobe mueve ficha presentando el Adobe Media Player días después de la presentación de SilverLight por parte de Microsoft. Nueva batalla en el horizonte ?

[ Web de Adobe ] [ web de AMP ]

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 ?