Category Archives: Web

Redirect WWW to non-WWW using Apache (htaccess)

The easiest way to redirect all your traffic from a WWW address (like www.domain.com) to a non-WWW (like domain.com) is using the following code:

RewriteEngine On
RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC]
RewriteRule ^(.*)$ http://%1/$1 [R=301,L]

With this code, you don’t need to hard-code the name of the domain into the .htaccess file.

Apart from the fact that www is deprecated (more here), the main benefit of doing this (or redirect from non-WWW to WWW) is that Google and other search engines won’t penalize our site because of duplicated content on both versions of our domain (WWW and non-WWW).

Forbid access to svn directories on Apache Web Server

Using Subversion to deploy and maintain updated web applications like WordPress, Joomla or even your development on a web server is very handy. One of the downsides I have found to this solution is that your web root will have hidden .svn directories all over the place (one per each directory on your application). This directories will not be hidden for the web server, so it is important to forbid browsers the access to them.

If you are using Apache, you can use the tips on this page.

If you use Apache 2.2 (I have not test it on other versions, but it should work also on 2.0 version) and have access to the configuration files, you can create the file /etc/apache2/conf.d/svn with the following content:

<Directory ~ "\.svn">
    Order allow,deny
    Deny from All
</Directory>

This will deny access to all the .svn directories on your web server. After you have create this file, do not forget to restart the web server so the changes can take effect.

Edit (26/May/2011): This can also be achieved using:

<DirectoryMatch .*\.svn/.*>
    Deny From All
</DirectoryMatch>

Configure Clientexec to send mail using Google Apps

If you use Clientexec as your hosting company’s management and support web application, and Google Apps for your emailing (or even just GMail), then, it is possible to configure Clientexec to send mails through Google SMTP server.

Unfortunately, it is not straightforward because the default Clientexec SMTP mailer (at least until 3.2.3 version of this software) can not handle SSL/TLS as Google required. You will need to manually modify the PHPMailer that is embedded on Clientexec.

The steps are not difficult, here they are:

First, open the file /{clientexec-directory}/newedge/classes/PHPMailer.php

Comment out the following part of the code (around line 537):

if(strstr($hosts[$index], ":"))
  list($host, $port) = explode(":", $hosts[$index]);

And just bellow those line, add the following:

if(strstr($hosts[$index],"://"))
    list($protocol,$hostPort) = explode("://",$hosts[$index]) ;
if(strstr($hostPort, ":"))
    list($host, $port) = explode(":", $hostPort);

Then, on EMail Settings inside Clientexec, use:

User: your-address@your-google-apps-domain

Password: your-google-apps-password

Host: ssl://smtp.gmail.com

Port: 465

Now, Clientexec should be sending mails without problems through your Google Apps email account, and all sent emails will be stored on that account.

Miles, bueno, mil íconos web gratuitos

FatCow nos ofrece un paquete con 1000 íconos web llamado Farm-Fresh para utilizar en nuestras aplicaciones y sitios web. Podemos descargarlo gratuitamente ya que tiene la licencia Creative Commons Attribution 3.0 License, lo que significa que podemos usarlos para cualquier propósito (open source, privado o comercial) con solo mencionarlo en los créditos.

Farm-Fresh Web Icons

Puedes bajarlos desde acá.

Vía Blog and Web.

Vulnerabilidad en WordPress 2.8

Ayer se encontró una vulnerabilidad en WordPress (hasta la versión 2.8.3) que permite al atacante resetear la contraseña del usuario administrador sin ninguna confirmación o autenticación (generar automáticamente una nueva contraseña y enviarla a la cuenta de correo de dicho usuario). Si bien esto no implica que el atancante obtenga acceso a WP, puede causar se hagan ataques de negación de servicio (DoS) contra el sitio. La gente de WordPress lanzó ya una nueva versión (2.8.4) corrigiendo el problema, así que a actualizar nuestros sitios de inmediato.

Como hacer un sitio web rentable

Mientras buscaba tips sobre como colocar mejor los anuncios de publicidad (por ejemplo, los Google AdSense), encontré este link con 6 episodios en video (en inglés) sobre como hacer rentable un sitio web. Están muy buenos.

Estos son los episodios:

  1. Be the Master of Your Own Domain!
  2. Hook Up With a Web Host
  3. Why WordPress and How It Works
  4. How to Score a Design for Your New Web Site
  5. Tips for Making Easy Money with Google AdSense
  6. How to Tweak Your Ads for Maximum Earnings

Los que me parecieron más interesantes para lo que estaba buscando fueron el 5 y 6, pero vale la pena ver todos.

Atributo min-height en IE6

Hay algunos navegadores antiguos (IE6 por supuesto) que no soportan algunas propiedades interesantes de CSS como el min-height, que dice cual debe ser la altura minima que debe tomar un elemento.

Afortunamente, hay hacks para solventar este problema, el más simple (solo involucra CSS y no hay que hacer ningún cambio en el HTML) de todos es el siguiente:

selector {
  min-height: 500px;
  height: auto !important;
  height: 500px;
}

IE6 no sabe que significa el !important, por lo que la altura no será automática sino de 500px. El resto de navegadores (los buenos como Firefox, Chrome, Opera… y bueno, también IE7) si harán un render correcto.

Pueden encontrar más información al respecto aquí.

Corregir el z-index de animaciones Flash

Mientras trabajaba en una página web (que tenía un menú desplegable en CSS y algunas animaciones en Flash) encontré que estos objetos SWF siempre se mostraban sobre todos los demás layers de la web, sin importar que valores le pusiera al z-index de los elementos involucrados.

La solución resultó sencilla, solo bastaba agregar el valor transparent al parámetro wmode del objeto SWF, quedándo de la siguiente manera:

<object type="application/x-shockwave-flash" data="swf/animacion.swf" width="760" height="80">
  <param name="movie" value="swf/animacion.swf" />
  <param name="wmode" value="transparent">
</object>

Como yo estaba utilizando swfobject para colocar las animaciones en Flash de manera más práctica, entonces el cambio fue:

<script type="text/javascript">
  var flashvars = {};
  var params = {};
  params.wmode = "transparent";
  var attributes = {};
  swfobject.embedSWF("swf/animacion.swf", "header", "760", "80", "9.0.115", "swf/expressInstall.swf", flashvars, params, attributes);
</script>

CSS: Reemplazar texto con imágenes

El método más simple que he encontrado para reemplazar texto con imágenes, por ejemplo, para hacer más vistosos los títulos en una web y no perder la semántica del HTML, es el de text-indent (creado por Mike Rundle).

Solo se necesita:

h1 {
  text-indent: -9000px;
  background: url(image.jpg) no-repeat 0 0;
  width: 200px; /* Ancho de la imagen */
  height: 80px; /* Alto de la imagen */
}

Lo encontré en esta presentación super intersante sobre tipografía para Web.

jQuery 1.3 y Thickbox 3.1

Con la nueva versión de jQuery han venido muchos cambios interesantes. Hay uno que afecta a Thickbox directamente (un lightbox muy bueno que no ha sido actualizado desde hace dos años) y es que la nomenclatura para [@attr] ha pasado a ser simplemente [attr]. Para arreglarlo, basta modificar la línea 79 en el archivo thickbox.js:

TB_TempArray = $("a[@rel="+imageGroup+"]").get();

Y dejarla así (quitándole el @):

TB_TempArray = $("a[rel="+imageGroup+"]").get();