Archivos de la categoría Web

Artículos sobre tecnologías, aplicaciones web y otras cosas interesantes en la red.

Aprende acerca del posicionamiento con CSS

Seguramente has visto código como este en algunas hojas de estilo CSS:

1
2
3
4
5
6
7
8
9
10
11
12
#div-1 {
  position:relative;
  top:20px;
  left:-40px;
}
 
#div-1a {
  position:absolute;
  top:0;
  right:0;
  width:200px;
}

Pero, ¿te has preguntado qué hacen, cómo funcionan o cómo interactúan exactamente las posiciones absolute y relative?

¿Si? Pues yo también, y fue hasta que encontré este sitio que todas mis dudas fueron despejadas:
Learn CSS Positioning in Ten Steps

¡Una lectura bastante recomendada, si andas en el rollo del diseño web! :)

Twitter Tools para WordPress

[singlepic=671,220,,,left]

Después de probar un par de plugins para WordPress que no me funcionaron, me encontré con Twitter Tools.

Recién me sumo a la ola de twitteros y este plugin me ayudará a integrar mi blog con mi cuenta de Twitter sin dolor. :)

Para los que no saben, Twitter es un servicio web en el que lo único que tienes que hacer es contestar a la pregunta:

¿Qué estás haciendo?

Si quieren seguirme, aquí está mi Twitter: lobo_tuerto

Problemas con el script que deshabilita el hot linking

[singlepic=610,60,,,left]

El script que publiqué ayer me dio algunos problemas con los feeds.

Me estaba bloqueando las imágenes en FeedBurner (como debería de ser). Así que lo modifiqué para permitir a FeedBurner hacer hot linking.

Quedó así:

1
2
3
RewriteCond %{HTTP_REFERER} !^http://(.+.)?(lobotuerto.com|feedburner.com)/ [NC]
RewriteCond %{HTTP_REFERER} !^$
RewriteRule .*.(jpe?g|gif|bmp|png|jpg)$ /omg_lobo.jpe [L]

Sólo modifique la expresión regular para permitir que embeban imágenes desde una URL como feedburner.com.

En caso de que algún amigo desee usar las imágenes desde mi sitio, sólo necesita avisarme y agregaré su URL a la lista de sitios permitidos. ;)

Cómo prevenir el hot linking

[singlepic=610,120,,,left]

Cuando necesito incluir alguna imagen en mi blog para algún artículo, prefiero descargarla y subirla a mi sitio por dos razones importantes.

La primera es que tengo más control al no depender de que el otro sitio esté disponible para que se muestre. La segunda, no gasto el ancho de banda de otra persona.

Desgraciadamente no todos piensan igual y te aplican lo que se conoce como hot linking o inline linking.

¿Se puede evitar?
Si, y es un procedimiento relativamente sencillo. Yo lo acabo de aplicar en el blog y ya vi que funciona, jeje, uno de los blogs que lo hacía terminó por cambiar las imágenes.

Requerimientos

  • Debes tener acceso por FTP al lugar donde hospedas tu página, ya que vamos a subir un archivo al directorio raíz de tu sitio.
  • Tu servidor debe usar Apache.
  • Debe tener activados redireccionamientos HTTP.

El código

Este el código que uso yo en mi blog:

1
2
3
4
RewriteEngine On
RewriteCond %{HTTP_REFERER} !^http://(.+.)?lobotuerto.com/ [NC]
RewriteCond %{HTTP_REFERER} !^$
RewriteRule .*.(jpe?g|gif|bmp|png|jpg)$ /mensaje.jpe [L]

Si el URL de tu sitio fuera omgwtfbbq.net, el código quedaría así:

1
2
3
4
RewriteEngine On
RewriteCond %{HTTP_REFERER} !^http://(.+.)?omgwtfbbq.net/ [NC]
RewriteCond %{HTTP_REFERER} !^$
RewriteRule .*.(jpe?g|gif|bmp|png|jpg)$ /mensaje.jpe [L]

Ahora, la última línea indica la imagen a mostrar cuando alguien intente usar una de las que están hospedadas en tu sitio directamente desde otra página.

Guarda el archivo como .htaccess (si, es sólo punto htaccess, nada antes del punto).

Sube este archivo a la raíz de tu página web o blog. Por ejemplo en mi caso lo subi a public_html/blog (public_html ese es el directorio donde van las páginas en mi hosting y blog es el directorio donde instalé WordPress).

Ten cuidado, si ya existe un archivo .htaccess ahí, lo que debes hacer es descargar y editarlo para agregarle las líneas de arriba.

Este nuevo archivo contendrá los dos códigos, el que ya traía, y el que le acabas de agregar. Después de eso súbelo a tu sitio.

Una mala edición del archivo .htaccess puede dejar deshabilitada tu página.

Crea la imagen que quieras mostrar cuando alguien te haga hot linking y nómbrala como mensaje.jpe.

Puedes usar cualquier otro nombre, pero entonces tendrás que editar el .htaccess (es fácil, sólo cambia donde dice mensaje.jpe por el nombre que quieras).

No guardes la imagen como mensaje.jpg. ¿Por qué? Bueno, recuerda que en el código de arriba las extensiones: .jpg, .jpeg, .gif, .png, .bmp son revisadas y bloqueadas. Así que si guardas tu imagen de aviso como .jpg también será bloqueda y no será mostrada.

Listo, sube la imagen.
En mi caso la puse en public_html y cabe mencionar que no la tienes que poner a fuerza en tu directorio web raíz, pero si la pones en otro lado, deberás editar el código de arriba para reflejar el cambio.

Depredado en

How to Prevent Image Theft /Hotlinking & Save Bandwidth
So You Want to Stop Hotlinking and Bandwidth Theft

Recopilador de complementos para Firefox

[singlepic=475,90,,,left]

A veces se volvía algo tedioso el tener que apuntar todas las extensiones y agregados que uso en mi Firefox, para poder instalarlas en otro lado.

Al parecer no soy el único con este problema. Ya que, para aliviar esta situación, Mozilla decidió crear un recopilador de complementos.

Como su nombre lo indica, este agregado nos permite suscribirnos a paquetes probados y recomendados de extensiones útiles para nuestro Firefox. Y también, nos permite crear nuestras propias colecciones para después compartirlas con nuestros amigos y el mundo.

Por ejemplo, tenemos que hay una colección llamada Web Developer’s Toolbox que incluye cosas como: Firebug, Web Developer, FireFTP, Tamper Data entre otros. Tenemos también la lista de las más populares.

Muy recomendable. :)

Aquí te puedes dar una idea de las mejores extensiones que hay en este momento para Firefox:
Top 10 Must-Have Firefox Extensions, 2009 Edition

Cómo mover un sitio Joomla 1.5 de un servidor a otro

[singlepic=515,120,,,left]

Hace poco me vi en la necesidad de mudar un sitio hecho en Joomla, hacia otro servidor.

El proceso es relativamente simple, a continuación detallo los pasos a seguir:

Paso 1: Revisar la configuración del servidor

Compara la configuración del servidor donde actualmente hospedas tu sitio con la del servidor hacia donde lo piensas mover. Debes asegurarte que el nuevo servidor sea compatible con Joomla y con las extensiones que tienes instaladas.

Paso 2: Respalda todo

Esto incluye todos los archivos de Joomla, componentes de terceras personas, y cualquier otro archivo que hayas agregado a tu sitio como imágenes, videos, etc. Crea una carpeta en tu sistema local, y descarga todos los archivos a esa carpeta usando una aplicación cliente de FTP. Personalmente prefiero FileZilla como cliente FTP, pero puedes usar el que gustes.

Paso 3: Exporta tu base de datos

La tercer cosa que debes hacer es exportar la base de datos que usa Joomla en tu sitio de origen. Lo mejor es exportarla a un archivo SQL, lo cual hará que la importación sea mucho más sencilla más adelante. El archivo SQL contendrá todos los comandos SQL necesarios para recrear tus tablas en la nueva base de datos y llenarlas con la información que contenían. Asegúrate de exportar toda la base de datos.
Usar phpMyAdmin en ambos servidores hacen de este paso algo muy sencillo, porque ofrece la habilidad de exportar toda tu base de datos como un archivo SQL. También facilita la importación de ese archivo en el paso 6.

Paso 4: Modifica el archivo configuration.php

Cada instalación Joomla tiene un archivo de configuración en su directorio raíz llamado configuration.php. Este archivo guarda información básica de configuración que Joomla usa a través de todo el sistema. Casi todos los parámetros en ese archivo se mantendrán iguales, pero algunos cambiarán debido a la diferencia que existe en la configuración de los dos servidores:

  • $host — Este valor es el lugar donde reside tu base de datos. En la mayoría de los casos será algo como localhost, pero si estás usando un servidor diferente para tu base de datos, tendrás que cambiarlo.
  • $user — Este es el usuario de la base de datos. Cámbialo si es diferente al usuario en tu otro servidor.
  • $password — Esta es la contraseña del usuario de la base de datos.
  • $db — Este es el nombre de la base de datos.
  • $ftp_host — En la mayoría de los casos, la dirección del FTP a usar aquí será 127.0.0.1, pero si usas algo diferente cámbialo aquí.
  • $ftp_port — En la mayoría de los casos, el puerto del FTP será el 21, pero si tu servidor usa un puerto diferente cámbialo aquí.
  • $ftp_user — Este es tu usuario del FTP.
  • $ftp_pass — Este es tu contraseña del FTP.
  • $ftp_root — Esta es la ruta raíz hacia donde tu usuario del FTP tiene acceso.
  • $tmp_path — Esta es la ruta absoluta hacia la carpeta para archivos temporales en tu servidor. Probablemente luzca como /path/to/joomla/installation/tmp.
  • $log_path — Esta es la ruta absoluta hacia la carpeta para archivos de registro en tu servidor. Probablemente luzca como /path/to/joomla/installation/logs.
  • $offset — Este es el desplazamiento de zona horaria para tu servidor. Por ejemplo, si tu compañía está en una zona horaria, pero tu servidor está en una zona horaria dos horas adelante, tendrías que poner esto como -2.
  • $live_site — Este parámetro es opcional. Probablemente lo puedas dejar en blanco, pero si lo usas, este es el URL de tu sitio. Probablemente luzca como http://www.example.com o http://www.example.com/joomla.
  • $sendmail — Esta es la ruta al programa sendmail en tu servidor. Si no estás usando sendmail, puedes ignorarlo.
  • $smtpuser — Este es el nombre de usuario de tu servidor SMTP. Si no estas usando un servidor SMTP para enviar correos electrónicos desde tu sitio, puedes ignorarlo.
  • $smtppass — Esta es la contraseña de tu servidor SMTP. Si no estás usando un servidor SMTP para enviar correos electrónicos desde tu sitio, puedes ignorarlo.
  • $smtphost — Este es el nombre o la dirección IP de tu servidor SMTP. Si no estás usando un servidor SMTP para enviar correos electrónicos desde tu sitio, puedes ignorarlo.

Paso 5: Sube todos tus archivos al otro servidor

Usando un cliente de FTP (como el FileZilla), sube todos tus archivos al lugar donde deseas instalar Joomla en el nuevo servidor.

Paso 6: Importa tu base de datos a la nueva base de datos

Usando phpMyAdmin (o comandos de consola si eres un administrador de base de datos avanzado) y el archivo SQL que generaste en el paso 3, importa tu antigua base de datos a la nueva base de datos.

Paso 7: Prueba tu nueva instalación

La mudanza debe estar ahora completa, pero no tomes mi palabra por hecho. Prueba tu sitio para asegurar que todo esté en su lugar y trabajando de la forma que esperas. Por ejemplo, si no usaste URLs relativos en los enlaces en tu antiguo servidor, podrían no trabajar de manera adecuada en tu nuevo servidor.

¿Preguntas, comentarios?

Como siempre, las preguntas y comentarios son bienvenidos. Espero hayas encontrado esta guía útil. ¡Buena suerte!

Depredado en

How to Move Your Joomla! 1.5 Site to a New Server

100 temas chingones y gratuitos para WordPress

[singlepic=546,120,,,left]

Si tienes un blog en WordPress lo más seguro es que te hayas puesto a buscar en Google temas gratuitos ¿verdad?
Pero no es fácil, abunda la basura y los temas mal hechos.

No busques más, aquí encontrarás temas gratuitos de alta calidad — como el que usa mi blog jejeje.

Ir a los temas: 100 Amazing Free WordPress Themes for 2009

WordPress 2.7 ya está aquí

[singlepic=546,120,,,left]

Así es, este blog ya está corriendo sobre WordPress 2.7 y puedo dar testimonio de la efectividad de su nueva interfaz.

¿Qué esperas? descárgalo de una vez.
Y si usas el K2 para tus temas, también ya liberaron su K2 for WordPress 2.7.

Lástima que hayan decidido dejar de soportar el Sidebar Manager, pero tienen razón, es doble esfuerzo. Ojalá los de WordPress se pongan las pilas y desarrollen un sistema similar para el manejo de los widgets.

WordPress 2.7 viene con todo

[singlepic=546,120,,,left]

Parece que al fin contrataron a un diseñador de verdad —jaja ya sé, que ojete— y la neta les está quedando de lujo.

Comparen abajo las dos capturas de pantalla de la página “Escribir” (o “Editar”).

WordPress 2.6 vs WordPress 2.7b1

[singlepic=589,200,,,left] [singlepic=590,200,,,left]

Esta nueva versión y mi monitor se van a llevar muy bien jejeje. :)