2006-08-17

Pspad: editor de código

pspad editor de código

Entre el mundo de programadores una herramienta muy utilizada es el editplus. Un programa shareware que sirve como editor en diversos lenguajes. En teoría, sólo es una versión evaluable durante 30 días, pero cuando pasa ese tiempo sólo tienes que aceptar lo que te dice una no muy molesta "ventanita".

Como contrapartida a este programa existe el Pspad. Un editor gratuito con algunos pros y contras respecto al editplus.

Como contra realiza un tratamiento de las expresiones regulares bastante irregular.

Por ejemplo:

si quiero reemplazar todas las comas de un documento y en su lugar poner un salto de línea, haríamos esto:

buscar:,
reemplazar:\n

pues en el Pspad esto no funciona bien. Resulta que hay que colocarse al final del texto y decirle que haga los reemplazamientos hacia atrás y sólo así sale bien. Es un caso un poco raro desde luego.

Como ventaja está la herramienta de formatear el código html. Queda muy bonito si necesitas que tus clientes vean el código. Y consigues que todo lo que hagas tenga la misma indentación.

El mapa de España

Mapa de españa

Hace tiempo que esta foto que veís más arriba me persigue. El colmo me ocurrió el otro día. Estando en la empresa de un cliente, éste me sirvió unos folios con la estructura de la web a realizar. De repente me señaló: "y un mapa de España" mostrándome el folio en el que había impreso esta imagen.

La verdad es que me resultaba curioso y pensé que sería fácil de encontrar. Me puse a buscar imágenes de España en el google y veía cosas parecidas pero no la misma... cuando descubrí, que yo pensaba como un tio que se dedica a hacer webs y busco "imágenes" no webs... y así fué buscando webs con las palabras mapa de España aparece esta foto...

En el pie de foto, la empresa que supuestamente ha diseñado este dibujo (yo ya no me creo nada) ha puesto lo siguiente:

"
© 2001 Mirador Multimedia. Prohibida su reproducción total o parcial, por cualquier medio, sin autorización expresa por escrito
"

madre mia si les dieran un euro cada vez que han utilizado este mapa....

2006-07-25

Comprimir javascript - compressor

Resulta muy útil en determinados proyectos reducir al máximo el tamaño de todos los archivos. También de los archivos javascript. Hace un tiempo mostré un compresor para css y hoy le toca el turno a comprimir los js.
En este enlace podéis encontrar un compresor de javascrit online bastante decente.

Sitemaps para google

sitemap google


Recientemente una de mis páginas más antiguas ( casi 10 años) ha desaparecido de google.

Al parecer introduje unos cambios que los robots de google no son capaces de leer. Básicamente la hice dinámica con php e incluía varios include con el menú cabecera y pie de página. También ha habido otros problemas pero esos no eran mios sino del servidor en la cual la tengo.

Como solución más rápida se me ha ocurido introducir un mapa del sitio. Es una página que casi no lo necesita sólo hay 4 páginas que no están en el menú principal.. pero se hace necesario su inclusión...

Para mejorar la lectura de los robots también voy a colocar un archivo especial llamado sitemap.xml y situado en la raíz del sitio.

Básicamente este archivo lleva información sobre las páginas que quieres que los robots indexen.

Un problema que he tenido es que el robot de google es bastante especial y no lee algunas especificaciones que otros robots si leen... son como pequeños gourmets con un gusto muy exquisito cada uno...

Dentro de su web Google sitemaps nos ofrece un variado grupo de soluciones tanto propias como de terceras partes como ellos las llaman.

Estuve probando una de estas soluciones realizada en java y te escaneaba la web en busca de todos tus archivos y te generaba un xml con toda la información, incluidos los links rotos, última modificación, nivel de jerarquía...pero google no entendía ese formato.

Al parecer google tiene su propio formato sitemap.

Al final cansado de buscar algún script que me resolviera el trabajo, me leí la especificación del archivo xml y lo generé con mi teclado.

Veremos lo que tarda Google en indexarme.

Tengo que decir que existen herramientas válidas para trabajar en local, como Simple Map, pero dada la vejez de mi página, la versión local que poseo es un cúmulo de parches y demás... también podría habver replicado la web...eso otro día

2006-07-12

Problemas con SpamAssassin

SpamAssassin es un filtro de correo que puedes configurar para intentar que te llegué poco correo basura.

En los últimos días he estando enviando boletines por correo.. era mi primera vez... y alguno ha sido devuelto por ser detectado como spam...

Este filtro te asigna una puntuación en función de una serie de criterios, algunos bastante curiosos, ya lo veréis. La puntuación va de 0 a 10 y por defecto el filtro está situado a 5. Por lo que si tu correo saca más de 5 es considerado spam y por lo tanto devuelto al remitente... lo que no sabe esta gente es que si te lo devuelven, aprendes de los errores y consigues engañar al filtro... es justo lo que he hecho.

Al ser devuelto, te devuelven también las cabeceras y mi boletín había sido calificado con un 5,3.. mierda un poco más y no es spam..

La puntuación más alta corespondía al criterio SUBJ_ILLEGAL_CHARS. Debe significar algo así como que en el asunto del mensaje existen unos carácteres "ilegales"... repaso mi texto y veo que tiene dos tildes y una eñe... veo que he colocado el charset adecuado y como no encuentro solución ( en algún sitio llego a leer que hay servidores de correo que no están bien configurados y no aceptan el uso de este tipo de carácteres tanto en el 'subject' como en el 'from'. Cómo han sido sólo un par de correos los devueltos (los dos pertenecientes a la misma compañía de hosting) opto por la solución más cómoda. En este caso cambio el texto para eliminar tildes y acentos tanto en el 'desde' como en el 'asunto' y voilà.. tenía un 3 con algo en ese criterio y ahora un 0 con lo que mi correo ya no es detectado como spam.

Si quisiera mejorar mi puntuación veo que hay un punto que también podría mejorar fácilmente:

SUBJ_ALL_CAPS 1.17

Vamos que tengo el 'asunto' en mayúsculas.. si le quitara eso me quedaría con un 0,70. Pero lo voy a dejar así. No creo que nadie haya configurado un servidor con tan sólo un 2.. no le llegaría casi ningún correo

2006-07-10

Rediseño de webs - diseño liquido css -

Un tema recurrente en el diseño web se da al encontrarnos con una web de hace 10 años con un diseño casi antediluviano. Enseguida la tarea de un buen comercial consiste en venderles un nuevo diseño.

A este recurrente tema hay que añadir que muchas webs adolecen de una falta casi total de tratameinto para su correcto posicionamiento en los buscadores.

Y como no, está el tema del diseño con tablas.. ahora hay que hacerlo con divs..

Para todo esto en mardiros han escrito un completo ejemplo de como convertir una web realizada con tablas a un diseño líquido basado en css.

ccs liquid layout

Comprimir hoja de estilos - css - javascript

Cuando subimos todo el contenido de una web a nuestro servidor siempre tratamos de optimizarlo , bien para que sea bien encontrado en función de las palabras de búsqueda que hayamos prefijado o bien en cuanto a su peso y su consiguiente velocidad de descarga.

En cdburnerxp, aparte de ser un sitio dedicado a un software de grabación de cd's también tienen un optimizador de nuestro código de hojas de estilo.

La base de su funcionamiento resulta bien sencilla hasta cierto punto. Por ejemplo, elimina todo los espacios en blanco y perdermos legibilidad del archivo css... pero eso a nuestros lectores no les debería importar. También transforma colores, formatos,.. a su forma escrita más liviana.

"CSS Formatter and Optimiser" está basado en csstidy 1.2, lo cual da bastante confianza.

Si es una hoja de estilos muy complicada con variedad de hacks para soporte de multibrowser... os recomiendo que marquéis la opción de "preserve css". Aunque no comprime tanto, respeta todos los hacks y hace que se siga viendo bien en todos los navegadores.

2006-07-03

Imprimir con css

Si alguna vez habéis realizado diseño multibrowser os habréis llevado muchos dolores de cabeza. Si encima os piden que se debe de ver correctamente al imprimir.. el resultado puede ser un caos.

Si habéis realizado el diseño con
css os habréis dado cuenta de que las características background-color y background-image no se imprimimen salvo que el usuario desee hacerlo y lo haya marcado de esa forma en sus preferencias. Por defecto no se imprimen.

Pero podéis definir una hoja de estilos con lo que intentar amañar un poco el resultado.

Dando el valor adecuado a la característica display:

Display:none; no mostraría el div o elemento al cual se refiere

Display:list-item; Válido para elementos de lista que por alguna razón no los hayas definido como tales.

En la definición de la hoja de estilos, dentro del código html debereís utilizar algo así:

<- LINK rel="stylesheet" type="text/css"
media="print" href="estilos-impresion.css">


<- LINK rel="stylesheet" type="text/css"
media="screen" href="estilos.css">


Si queréis que se imprima en una sóla hoja de tamaño A4, tendréis que poner algo similar a esto:

@media print and (width: 21cm) and (height: 29.7cm) {
@page {
margin: 2.5cm;
}
}

Pero ojito, el contenido debe estar entre esas medidas sino saldrá cortado.

Esto sería muy válido en navegadores como Internet explorer y Firefox. Pero en el otro gran navegador, Opera, no hace falta nada de esto. Le dáis a imprimir y "voilà" casi idéntico al diseño original.

Si no lográis imprimir algo o quereís probar la velocidad de este navegador(almacena las páginas que vas visitando y vuelves a ellas al instante) sólo tenéis que ir a su web y bajar el programa... es gratuito...Opera

2006-06-29

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...

2006-06-13

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

2006-06-07

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

2006-06-04

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.

2006-05-24

Hack ie firefox con las css

Muchas veces os habrá pasado que no se diseñáis una página y no se visualiza igual en internet explorer y en el firefox.

Hay un sencillo truquito o hack que mediante las css podemos emplear apra distinguir entre navegadores se trata de colocar un caracter antes de la definición del estilo.

Internet explorer se lo traga todo así que también leerá lo que siga, mientras que los demás navegadores, más standard lo veran como un error y pasarán a la siguiente línea.

Ejemplos:

margin-top:10px;
]margin-top:0px;

En este caso internet explorer establecería un margen superior de 0px y firefox y los demás navegadores de 10px.

Como caracter yo suelo utilizar "]", pero se pueden utilizar otros como "_" y más...

2006-05-01

Haga clic para activar y usar este control - activar contenido flash


Ya hace un tiempo que microsoft en una de sus últimas actualizaciones puso el famoso cartelito en los controles activex.. todo viene a raíz de una demanda judicial de una empresa que tiene patentado la inclusión de objetos ... así que con las etiquetas object, applet, o embed pasan estas cosas.. son 560 millones de dolares los que pide la empresa Eolas por utilizar su patente

Hay varias soluiones circulando por ahí: la solución de Adobe

Básicamente consiste en crear una función que escriba el código < object > y demás.


function ActivarFlash()
{
document.write('< OBJECT ...\n');
document.write('< PARAM NAME="movie" VALUE="---.swf">\n');
document.write('< PARAM NAME="quality" VALUE="high">\n');
document.write('< PARAM NAME="BGCOLOR" VALUE="#404040">\n');
document.write('< embed src="---.swf" ...>\n');
document.write('</embed>\n');

document.write('</object>\n');
}


esto se colocaría en un archivo externo. por ejemplo: activar.js

En la cabecera del archivo pondríamos:


< script src="js/activar.js" type="text/javascript"></script>

y luego < script type="text/javascript">ActivarFlash();</script> donde va colocado el flash.

Cómo os podéis imaginar la cosa se complica cuando tenéis varios flash en la página.

Encontré una solución hace unos días. se trata de utilizar el dom para ir activando uno a uno cada object que se encuentra.

Creas un js. Lo llamas activaractivex.js y pegas este código:


objects = document.getElementsByTagName("object");
for (var i = 0; i < objects.length; i++)
{
objects[i].outerHTML = objects[i].outerHTML;
}

Al final del todo o detrás del último object insertas la siguiente linea:


< script type="text/javascript" src="activaractivex.js"></script>


Esto viene muy bien si tienes plantillas dinámicas con poner estos códigos en la cabecera y en el pie de página te ahorras ir página a página...