Resuelto: Safari no muestra el poster del video html5

Safari (y al parecer los móviles también) no muestran el poster del video que sirve como referencia de los videos.
Usando css podemos usar la misma imagen del poster para que se muestre detrás del video y lograr el mismo efecto.

<div class="contenido">
	<div class="contenedor_video">
		<video poster="poster-del-video.jpg" controls>
				<source src="el-video.mp4" type="video/mp4">
				Tu explorador no soporta la etiqueta de video.
		</video>	
	</div>
</div>
.contenedor {
	position: relative;
}

.contenedor_video video {
	width: 650px;
	height: 365px;
	position: relative;
	top:0;
	left:0;
	z-index: 2;
}

.contenedor_video::before {
	background: transparent url('poster-del-video.jpg') no-repeat top left;
	width: 650px;
	height: 365px;
	content: "";
	display: block;
	position: absolute;
	z-index: 1;
	top: 6px;
	left: 8px;
}

Puedes verlo en codepen.io

Solucionado: Error 403 en WordPress con el .htaccess

Luego de instalar el plugin que me iba a solucionar todos los problemas me encuentro con que el ambiente local que tengo instalado en mi maquina me da el error.

Forbidden 403 Error You don’t have permission to access

Luego de revisar los privilegios de las carpetas y ver que todo estaba en orden y que no solucionaba nada, recordé que a veces los plugins se meten con los .htaccess y rompen las redirecciones.

La solución: Agregar Options +FollowSymLinks al .htaccess en la base de mi instalación WordPress.

El código base quedaría así:

Options +FollowSymLinks

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# END WordPress

Cómo activar los dominios locales de Virtual Hosts en Mavericks Mac OS X 10.9

Estaba agregando un nuevo dominio/carpeta en los virtual hosts para un nuevo proyecto y ningun browser me mostraba la dirección local (prueba.dev).

Resulta que hay limpiar en tres lugares diferentes: Limpiar el caché de los DNS (con dscacheutil), reiniciar el servicio de DNS local (mDNSResponder) y reiniciar apache para que todo sirva.

Y se puede resolver con una sola línea en el terminal.

sudo dscacheutil -flushcache; sudo killall -HUP mDNSResponder; sudo apachectl restart

Realmente ayuda mucho cuando estas trabajando en ambiente local en tu maquina.

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.

Las soluciones web pegadas a la pared