Como hacer una redirección de página con JavaScript

Hay dos formas generales de hacer esta redirección:

// Comportamiento similar a una redirección HTTP (HTTP redirect)
window.location.replace("http://corchoweb.com");

// Comportamiento similar a un click en un vínculo
window.location.href = "http://corchoweb.com";

La estructura completa del documento puede ser así:

<!doctype html>
<html lang="en">
<head>
	<script type="text/javascript">
	<!--
	window.location.replace("http://corchoweb.com");
	//-->
	</script>
</head>
<body>
<!-- solo para tener estructura html5 -->
</body>
</html>

Como desaparecer los < hr />

Hace aprendi que semanticamente hablando es buena idea separar los contenidos mas grandes de un documento con Reglas Horizontales o <hr />.

Es buena idea, por que separa cada seccion conceptualmente hablando y ademas lei que es una forma muy comoda de limpiar los float por completo. Entonces me quedo con un codigo parecido a este

<div id="cabeza"> ...</div>
<hr />
<div id="contenido"> ...</div>
<hr />
<div id="pie"> ...</div>

Y los estilos
hr {
display:block;
clear:both;
margin:-1px 0;
}

En principio esto funciona para la mayoria de los exploradores, PEEROO adivinen quien no lo rendea bien? IE6, que tiene la maravillosa costumbre de hacer que nuestro trabajo sea mas interesante llenandonos de misterio y aventura en la busqueda de soluciones para que el vea bien las cosas.

Entonces es necesario “desaparecer” la regla para que explorer no la muestre por ahi colada. Para eso agregamos un par de reglas que no rompen el modelo del documento y que nos garantizan que ninguno de los exploradores lo muestre.

hr {
display:block;
clear:both;
margin:-1px 0;
position:relative;
left:-9999px;

}

Ahora el ultimo pequeñisimo detalle es que queda un pequeño margen extra que tenemos que quitar y listo ¿que es un hack mas para IE?

*+html hr { margin: 0em 0 -7px 0; /*IE 7 bugfix*/ }
* html hr { margin: 0em 0 -7px 0; /*IE 6 bugfix*/ }

Final feliz para el destino del resto del contenido que no tendra que verselas con unas reglas horizontales fantasmas que aparecen despues de muertas.
Hasta ahora funciona en
Windows: IE 6, IE 7, Netscape, Opera, FF
Mac: Safari, FF, IE 5.5, Opera, Camino, Netscape

.htaccess y wordpress

Haciendo mantenimiento a la proxima version de una pagina, queria ponerle unos lindos permalinks y me encontre con varios problemas.

No puedo hacer permalinks

El primer problema era que el servidor tenia ciertas restricciones para archivos como el .htaccess.
Pidiendole al proveedor que cambiara esto me dijo que con un simple AllowOverride fue suficiente, y en efecto asi fue.
Asi que ahora puedo crear y manejar mis archivos .htaccess, pero ahora ni siquiera puedo entrar en wordpress.

Tengo mi .htaccess pero la página no se ve Error 403

Ahora tenia el archivo pero aparece Error 403 con acceso denegado. No podia ver ni el administrador de wordpress. Borro el archivo y si lo puedo ver pero con la estructura de numeros, adentro le digo que quiero crear permalinks y crea un nuevo archivo .htaccess y vuelvo a tener el mismo error en todo el blog.

De error 403 a 404

Probando veo que si comento el RewriteEngine la pagina se ve y tiene la estructura de los permalinks personalizada de /%category%/%postname%/ en la navegacion e incluso dentro del administrador pero al ir a cualquiera de las paginas me da error 404 de que no existe la pagina


# BEGIN WordPress

# RewriteEngine On
RewriteBase /blog/
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /blog/index.php [L]

# END WordPress

El fin de los errores y el comienzo de los lindos permalinks
Leyendo mucho veo la sugerencia de que puede ser que el servidor no esta permitiendo los symlinks y que eso puede ser la razon de los errores. Decido probar y VOILA! el sitio corre a la perfección.


# BEGIN WordPress

Options +FollowSymlinks
RewriteEngine on
RewriteBase /blog/
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /blog/index.php [L]

# END WordPress

El resumen es que probablemente por razones de seguridad el servidor tenia la opcion de hacer enlaces simbolicos (Symbolic Links) desactivada, por lo que ese comando tiene que estar presente para que funcione. Esto es exactamente lo que hace wordpress con todas sus paginas, ya que la generación de sus paginas siempre es dinamica y nos permite hacer un redireccionamiento de los archivos en base de datos a direcciones faciles de recordar y que nos ayudan en el SEO.

Herramientas para estimaciones de proyectos web

Estrategias para estimaciones de tiempo. Desarrollo de diseño agil. Planeador y wireframer. Y manejador de proyectos y time tracker.

Cambiar la contraseña de un usuario FTP

Para cambiar el usuario de FTP de un servidor Linux Ubuntu los pasos son:

Loguearse por SSH:
$ ssh -i .pem ubuntu@

Privilegios root
$ sudo su

Para cambiar la contraseña del usuario tienes que saber el nombre del usuario FTP que quieres cambiar y el sistema te pregunta por el nuevo email y la confirmacion
$ passwd
Changing password for user blog.
New password:
Retype new password:
passwd: all authentication tokens updated successfully.

Listo. Prueba el acceso FTP nuevo.

Listas desordenadas con FontAwesome

Cambiar los bullets de las listas desordenadas a iconos de FontAwesome es más fácil de lo que parece.

Hacemos una lista de ejemplo:

<ul>
    <li>Primer elemento de la lista</li>
    <li>Segundo elemento de la lista</li>
    <li>Tercer elemento de la lista</li>
</ul>

Y luego en el CSS la lista de cosas por hacer:

  1. Importar Font Awesome. En este ejemplo lo importamos desde un CDN pero lo puedes tener local si solo vas a necesitar unos iconos
  2. Quitar los estilos nativos de la lista con list-style:none;
  3. Poner el icono antes de la lista con li:before
/* importa fontawesome (o la que necesites) */
/* para esta prueba lo importé desde http://netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css */

@font-face{
    font-family:FontAwesome;
    src:url(https://netdna.bootstrapcdn.com/font-awesome/2.0/font//fontawesome-webfont.eot?#iefix) format('eot'),
	url(https://netdna.bootstrapcdn.com/font-awesome/2.0/font//fontawesome-webfont.woff) format('woff'),
	url(https://netdna.bootstrapcdn.com/font-awesome/2.0/font//fontawesome-webfont.ttf) format('truetype'),
	url(https://netdna.bootstrapcdn.com/font-awesome/2.0/font//fontawesome-webfont.svg#FontAwesome) format('svg');
    font-weight:400;font-style:normal;}

/* estilos para la lista y quitar el predeterminado */
ul { padding-left:20px; list-style:none; }
li { margin-bottom:10px; }

/* aqui viene la magia */
li:before {
    font-family: 'FontAwesome';
    content:"\f0a4";
    margin:0 5px 0 -15px;
}

Aquí está la lista en acción: http://jsfiddle.net/corchoweb/AHunC/

¿Cual es el icono mas raro que has usado en una lista?

Buscar con expresiones regulares

Muchas veces me pasa que escribo un código y a medida que el proyecto madura hay que cambiar ciertas regiones. Lo más fastidioso es cuando quieres cambiar etiquetas de html que tienen contenido diferente y parece que tienes que hacerlo una por una.

Con las expresiones regulares puedes buscar de muchas formas. Hoy aprendí que puedes buscar etiquetas específicas y dejar el contenido intacto con las expresiones regulares.

Este ejemplo busca todos los elementos de una lista que tengan un parrafo sin importar el contenido.

<li><p>(.*?)</p></li>

Y quiero quitarle las etiquetas de <p> sin quitar el contenido. Para eso entonces reemplazo con este código.

<li>$1</li>

 
Eso es todo. ¿Sabes de alguna otra forma de buscar contenido? dejanos tu comentario.

Las soluciones web pegadas a la pared