Centrar contenido e imagen de fondo con css

Hace un tiempo trabajé en un proyecto en el que se necesitaba centrar en vertical y horizontal un pequeño cuadrado y que se viera más o menos igual en todas las resoluciones. También existía una imagen de un fondo con una especie de línea horizontal que debía pasar justo por debajo del cuadradito.

Ni que decir tiene que según la resolución de pantalla ambos elementos se desconfiguraban y opté en su día por "apañarlo" a la resolución más demandada. En este caso la de 1024x768 píxeles.

Estos días trabajando en otro proyecto he tenido la suerte de unir mi experiencia con algo que leí en insomnia.
Aquí se describe como centrar horizontalmente y verticalmente el contenido de un div. en mi caso lo he resuelto así:

body{
background-image:url(images/background.gif);
background-color:#000000;
background-position: center;
background-attachment: fixed;
background-repeat:repeat-x;
overflow:auto;
}

.centrado {
position: absolute;
top: 50%;
left: 50%;
margin-top: -204px; /*Restamos la mitad de alto*/
margin-left: -350px; /*Restamos la mitad de ancho*/
}

Manipulando la imagen adecuadamente se consigue que tanto el contenido como la imagen de fondo estén perfectamente centradas para cualquier tipo de resolución.

La clase .centrado se aplica sobre un div. Para este caso, se trataba de la portada de la web y sólo era necesario este div y su contenido...

Galería en Flash con Photoshop cs2

Una de las nuevas particularidades de esta versión de Photoshop es la inclusión de una galería de imágenes en Flash.

El procedimiento es simple:
Filer->automate->web gallery ... si, lo tengo en inglés

Con esto te sale una ventanita donde le indicas el estilo. Hay muchos, el que nos ocupa en esta sección es el Flash gallery 1.. hay dos modelos más en Flash y muchos más en html.

Debes indicar la carpeta origen de las imágenes y la de destino. El photoshop se arregla de tomar los thumbnails y de darles el tamaño adecuado a como lo hayas configurado... lógicamente hay múltiples características que puedes indicar.

Al final de esto te sale un archivo html dos .js y dos xml , además del pertinente swf y las carpetas con las imágenes.

Un archivo xml está dedicado a las imágenes su nombre su ruta,...

El otro archivo xml, galleryconfig.xml trata de configurar unas cuantas opciones como el ancho y alto del archivo flash el tamaño de los botones y de los thumbnails...

He estado probando esta mañana con esta galería y lo que quería hacer era que apareciera el nombre de la foto ( nombre de referencia del producto), lo malo es que también aparecía la extensión así que borré la extensión en todas las imágenes y en el archivo xml correspondiente y voilà.. perfecto

También se podría haber hecho utilizando la información exif del archivo en cuestión, pero en este caso ese campo estaba vacio y lo que me valía era el nombre.

El siguiente problema que he tenido es que en una región de la escena aparecía "file" seguido del nombre del archivo.. y eso no lo podía quitar.. pero buscando buscando, he encontrado un blog oficial de Macromedia donde te puedes descargar el archivo fla,.. vamos que ya la puedo tunear a mi antojo...

A disfrutar de esta sencilla y efectiva galería

ah, os podéis bajar el fla del blog de Mike Downey

Radio webmaster

Estaba leyendo un interesante artículo de unos expertos en el manejo de la maquetación con css, cuando en la misma web comunican que el día tal, a tal hora van a salir en la radio charlando sobre hojas de estilo y posicionamiento (SEO).

Al parecer existe en la red una radio especializada en asuntos de webmasters. Esta es su dirección:

http://www.webmasterradio.fm/

Ellos se definen de esta forma:

"WebmasterRadio.FM is lifting the "veiled curtain" called the Internet to bring the business community together through an interactive, Internet based radio network. WebmasterRadio.FM offers an all-star line up of radio shows hosted by the most respected names in the Internet business world. Here on WebmasterRadio.FM listeners can find programming with a vast appeal to anyone looking to be a part of a community destination and learn industry specific information from the most successful marketers and technology experts in the world. The LOUNGE (formally the chat room) is open 24/7 allowing listeners to communicate with each other, from around the globe in real time."

Parece un buen lugar para el intercambio de conocimientos... lo probaremos...

Formulario css xhtml a dos columnas

Hace tiempo que cuando tenía que hacer un formulario aún recurría a maquetar con tablas. pero hoy he intentado hacerlo por fín con css.
Básicamente jugando con float:left; y display:block, para los elementos label y dejando de lado los inputs.

El código html sería el siguiente:

<div id="contacto">
<form id="Form" action='mailform.php' method='post' onsubmit="return checkform(this)">
<fieldset>
<legend>Contacto</legend>
<label for="nombre" class="nombre">Nombre</label>
<input id="nombre" class="borde" name="nombre" value="" maxlength="100" type="text" /> <br />
<label for="email" class="" email">Email</label>
<input id="email" class="borde" name="email" value="" maxlength="100" type="text" /> <br />
<label for="telefono" class="telefono">Teléfono</label>
<input id="telefono" class="borde" name="telefono" value="" maxlength="100" type="text" /> <br /><br />
<label for="mensaje" class="mensaje">Mensaje</label>
<textarea id="mensaje" class="borde" name="mensaje" cols="58" rows="8"></textarea><br />
<input id="Submit" name="contact_submit" value="Envía" type="submit" />
</fieldset>
</form>
</div>

y parte del css requerido sería este:

form fieldset label{
margin-top:2px;
display: block;
float: left;
text-align: left;
width:70px;
/*border:1px solid #11aa33;*/
font-size:13px;
height:10px;
}

Hay una web que trata bastante más profusamente el tema: form two columns

Ordenar tablas por javascript

Recientemente he tenido que indagar en la red sobre el problema de ordenar tablas.

Estaba enfrascado en resolver cómo ordenar una lista de precios sin tener que recurrir a php y a bases de datos. Se trata de un proyecto de muy bajo presupuesto. Pero podría haber más similares, de ahí mi interés...

Encontré este útil script realizado en javascript tablesort.js

Está realizado por frequency-decoder
El ejemplo que podéis observar, nos muestra una tabla bastante bonita y eficiente.

Os remito directamente a las páginas descritas para que probéis su código

Opentrand - traductor open-source

Tres firmas de soluciones informáticas y cuatro universidades españolas han desarrollado el primer sistema de traducción automática en programario libre que permite traducir textos, documentos y páginas web del castellano al catalán, gallego y vasco, y desde el catalán y el gallego al castellano.

El traductor, que lleva el nombre de Opentrad, ya está en funcionamiento y es utilizado, por ejemplo, para la traducción de documentos por la administración pública gallega, ya que es el primer sistema de traducción que existe del gallego al castellano.
Mientras que ya existen otros traductores bidireccionales entre el catalán y el castellano, éste es el primero que se desarrolla en programario libre, lo que permite su uso gratuito y su acceso rápido a través de la pagina web Opentrad.com.
En el caso del vasco, Opentrad es el primer traductor que existe del castellano al euskera, pese a que el sistema desarrollado es sólo un prototipo, ya que de momento los errores que comete no le permite alcanzar la calidad mínima.
La dificultad del análisis lingüístico de la lengua vasca tampoco han hecho posible, de momento, la traducción del vasco al castellano.
El proyecto de este traductor, financiado por el Ministerio de Industria ha sido ideado por un consorcio formado por la Universidad Politécnica de Cataluña (UPC) junto a las universidades del País Vasco, Alicante y de Vigo, así como la empresa Eleka Ingeniaritza Linguistikoa y la fundación Elhuyar, del País Vasco, y la firma Imaxin Software, de Galicia.
Durante su presentación, los responsables del proyecto han hecho una demostración de su uso y han destacado el hecho de que «cualquiera puede descargarse este programario y sus recursos lingüísticos y adaptarlos luego a sus necesidades», según explicó Iñaki Arantzabal, de la Universidad del País Vasco. Hasta el momento se ha implantado en la Voz de Galicia y el Correo Gallego.
El margen de error del sistema entre el español y el catalán es del 3,8% y entre el español y el gallego, del 4,8%, índice que se considera óptimo; mientras que el del español al euskera es de 24,8%. El traductor acepta de momento los formatos Txt, Rtf Y Html, y próximamente incluirá también el Doc, de Microsoft Word. Pese a que la arquitectura informática del traductor está preparada para intentar la traducción entre las lenguas cooficiales de España, los responsables del proyecto han apuntado que es un proyecto que no está previsto por la falta de interés tanto en el ámbito empresarial como de las administraciones.