Sentido Web

Seguimos con bordes redondeados. Siempre que añadimos imágenes en nuestra página web, el texto cuando se ordena alrededor de ella lo hace tomándola como una caja, lógicamente, porque es así su forma real. Pero, ¿qué pasa cuándo la imagen tiene transparencias y tiene un contorno no recto?, pues que da igual, sigue tomándolo como una caja. En estos casos, el efecto que causa es un poco feo, ya que queda mucho espacio sobrante. En publicaciones de prensa, sobre todo en revistas, muchas veces aparece la imagen de un personaje y el texto se ordena según la figura de la persona. Aunque en prensa usan un diseño estático e introducen saltos de línea cuando les interesa, el efecto que crean es de mucha vistosidad. Si estás interesado en esta forma de presentación, puedes ver en couchfort cómo lo hacen. Debido a que la explicación quizás no sea suficiente para algunas personas, en Sentido Web vamos a incluir un howto que explique cómo hacerlo paso a paso. Vía / del.icio.us

Una de las cosas más molestas con las que te puedes encontrar al mantener un sitio, es ver cómo tus imágenes estan siendo utilizadas en otros sitios que las enlazan directamente a tu servidor, esto es molesto por dos motivos, evidentemente el uso de material gráfico de tu propiedad sin tu consentimiento, y la carga extra que sufre la conexión de tu página. Para los que usamos Apache existe una fácil solución combinándolo con mod_rewrite, el método se basa en crear un fichero .htaccess que contenga una serie de reglas, que literalmente le indicarán al servidor que las imágenes solo se mostrarán si la petición viene del dominio propio. Las reglas a añadir son las siguientes. Solo tendrás que sustituir el texto example.com por el nombre de tu dominio:

RewriteEngine On
RewriteBase /
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^https?://(www\.)?example.com/?.*$ [NC]
RewriteRule \.(gif|jpg|jpeg|png|mp3|mpg|avi|mov)$ - [F,NC]

Wikipedia, para aquellos que no la conozcan, es una enciclopedia libre escrita de forma colaborativa, que usa la tecnología wiki. Está realizada mediante el software llamado MediaWiki, creado especialmente para Wikipedia, el cual podemos instalarnos en nuestro sitio web. Los requerimientos mínimos son: Apache, PHP, MySQL y el propio MediaWiki. Yo recomiendo, al igual que en Lifehacker, el uso de WAMP Server, para instalar Apache, PHP y MySQL de forma sencilla, yo es el que uso para mis cosas y es muy sencillo y va muy bien, a parte incluye un gestor de BD para facilitar la tarea. Puedes ver el resto de la explicación de como instalar tu propia Wikipedia en Lifehacker, está bastante bien explicado, paso a paso, lo cual se agradece mucho. Vía / Lifehacker

Seguimos organizando las hojas de estilo. La [mnemotecnia][] (o nemotecnia) es un proceso de asociación mental destinado a facilitar el recuerdo de algo. Ese algo puede ser, por ejemplo, el orden de declaración de las reglas de presentación para los enlaces (link no visitado, visitado, etc.). Para recodar el orden nos servirán los términos en inglés (mayúsculas especialmente) LoVe HAte. ### LoVe HAte Es conveniente recordar que el orden correcto de las declaraciones es este y no otro: a:link { /* Love hate */ } a:visited { /* loVe hate */ } a:hover { /* love Hate */ } a:active { /* love hAte */ } ### TRouBLe Algunas propiedades CSS se pueden definir en forma taquigráfica (shorthand). Por ejemplo, para definir los márgenes de un elemento podemos usar `margin-top: 0; margin-right: 1em; margin-bottom: 1em; margin-left: 1em` o, para ahorrar teclas y bytes, usar la versión corta: #unSelector { margin: 0 1em 1em 1em; } El orden de los valores es el siguiente: arriba, derecha, abajo, izquierda. Esto es, empezamos a asignar valores en sentido de las agujas del reloj (de las doce de la mañana y acabamos a las nueve de la noche). Mnemotécnicamente sería, TRouBLe (top, right, bottom, left). Estas versiones abreviadas pueden llevar, atención, uno, dos, tres o cuatro valores, ahí es _ná_. Veamos: #unSelector { margin: 0; /* margen 0 por los cuatro costados */ } #unSelector { margin: 0 1em; /* márgenes superior e inferior a cero, márgenes izquierdo y derecho de 1em */ } #unSelector { margin: 0 1em 2em; /* huy, este tiene truco: margen superior, cero; margen derecho, 1em; margen inferior, 2em. ¿Y el izquierdo? en caso de tener tres valores, se toma el segundo, esto es el valor es el mismo para los dos laterales */ } #unSelector { margin: 0 1em 2em 1em; /* TRouBLe, como ya hemos comentado */ } Claro está que lo dicho para los márgenes también es aplicable a `padding`, `border-width`, `border-style`, `border-color` y seguramente a alguna propiedad más que ahora mismo (¡café!) no está en mi cabeza. Más sobre [Memoria y reglas nemotécnicas][m]. [mnemotecnia]: http://buscon.rae.es/draeI/SrvltGUIBusUsual?LEMA=mnemotecnia&TIPO_HTML=2&FORMATO=ampliado&sourceid=mozilla-search “Definición en el diccionario de la Real Academia Española” [m]: http://www.weblioteca.com.ar/textos/mente/memoriaynemotecnia.htm

Microsoft ha sido informado por el comisario para temas de competencia de la Unión Europea de que se podría prohibir Windows Vista en la UE si este incorpora demasiadas funciones, yendo en contra de la normativa europea de competitividad. Todo esto ha sido motivado por una carta que enviaron varias compañías, entre las que se encuentran IBM, Sun y Oracle, donde expresaban su queja. La Comisión Europea avisa sobre todo del software incluido en Vista y las búsquedas en Internet, así como las funciones de seguridad. Varias de las funciones incluidas en Vista, las cubren compañías independientes y estarían en desventaja, atentando contra la normativa de competitividad. Microsoft alega que en el navegador se puede modificar el buscador y que no incluirá antivirus. Además indica que atenderán las necesidades de los usuarios, respetando los aspectos jurídicos aplicables. Vía / DiarioTI

El UTF-8 es un tipo de codificación de caracteres para Unicode que nos permite escribir nuestras páginas web y no preocuparnos por si se va a ver correctamente o van a aparecer caracteres extraños.

Las veces que he trabajado en proyectos multilenguaje es lo que hemos usado, salvo en el caso de japonés y coreano que es preferible usar el UTF-16 porque ocupa menos espacio. Eso ha hecho que me haya acostumbrado a realizar siempre los proyectos en UTF-8 y así evitar luego los problemas que puedan surgir en futuras actualizaciones o en testeos y tener luego que cambiar todo el proyecto a UTF-8.

Sigue leyendo »

El spam ha condicionado muchas prácticas que originariamente eran tan sencillas y poderosas como enlazar tu mail en la web.

Un truqui para evitarlo que en su día lo descubrimos en 604th.net:

function nospam(name,domain){

window.location = 'mailto:' + name + '@' + domain;

}

Cópialo tal cual sin cambiar nada y súbelo como emailnospam.js. Recomendamos subirlo a una carpeta en la que guardes los javascripts como por ejemplo la carpeta js. Si no te apetece crearla, súbelo a la raíz de tu ftp.

Luego añade lo siguiente entre la línea <head> y </head> de los documentos de tu web:

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

Si lo has subido a la raíz elimina la ruta a la carpeta “js”. Quedaría así:

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

Ya solo queda que escribas tu mail enlazado en la parte de la web que quieras sustituyendo la palabra ejemplo y dominio.com por lo que corresponda a tu cuenta de email:

<a href="javascript:nospam('ejemplo','dominio.com');">Contáctame</a>