Sentido Web

Referencias y explicaciones sobre desarrollo web, PHP, Ajax, XHTML, MySQL ...
31Mar
2006
Comments Off

links for 2006-03-31 (II)

31Mar
2006
Comments Off

Márgenes redondeados mediante CSS

borde-redondo.gif 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
Publicidad
31Mar
2006
Comments Off

Protege tus imágenes con Apache

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]
31Mar
2006
<!-- 1 -->

Del.icio.us como posts en tu blog. Los breves de toda la vida

delicious-firefox.png Que las nanopublicaciones están desempeñando la misma función que las revistas en papel, no es nada nuevo. Hasta en el formato. La sección de breves de toda la vida es posible gracias al daily blog posting de Del.icio.us accesible desde las settings de tu cuenta. Lástima que con Movable Type 3.2 solo deje publicar con el nombre de autor del sistema ya que hace falta la contraseña de acceso remoto (API) pero los quicklinks los recopilaremos Luis, Gabriel y yo. Aún estamos dudando de si los metemos a primera hora en plan resumen de prensa o de si haremos que trabaje varias veces al día ya que el ritmo de información útil es incesante. Si usas Movable Type, en William Computer blog cuentan paso a paso cómo hacerlo. Lo único que tendrás que ignorar si usas la 3.2 es cuando escribe: “out_pass: your mt password” ya que como decíamos ahí tendrás que poner la contraseña de acceso remoto (API) que es la última contraseña que verás en tu perfil de autor de Movable Type. Recuerda, solo se te revelará si eres el administrador de MT. En VivirLatino lo venimos usando desde hace varias semanas al igual que tantos otros sitios. Para los usuarios de WordPress es casi idéntico como explican en Cosas por hacer. Para los más tuneros: Yet Another DailyDelicious hack for WordPress. Eso sí, sea el CMS que uses, utiliza la extensión de Firefox. Sin ella no sería todo tan rápido y productivo. Solo le pondría un pero. Cuando se tiene varias cuentas en Del.icio.us es muy engorroso el proceso de cambiar. Te tendría que dar la opción de que elijeras en qué cuenta decides guardar la URL.
31Mar
2006
Comments Off

Instala tu propia Wikipedia

WikipediaWikipedia, 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
Publicidad
31Mar
2006
Comments Off

links for 2006-03-31

31Mar
2006
Comments Off

CSS: Mnemotecnia y shorthand

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
31Mar
2006
Comments Off

La UE podría prohibir Windows Vista

Windows VistaMicrosoft 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
Publicidad
30Mar
2006
Comments Off

Especial UTF-8 (I)

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 »
30Mar
2006
Comments Off

Enlaza tu email sin miedo al spam

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>