Como quizás sabrán, en la madrugada del Sábado ocurrió una fuerte explosión en el Estado Falcon, dejando al menos 39 muertos y casi 90 Heridos que fueron trasladados al Hospital Rafael Calle Sierra.

El accidente fue provocado por una fuga de gas la cual aun no se a determinando su origen. Ese gas formo una nube que luego exploto incendiando al menos 2 tanques de la refinería. Señalo el Ministro de Petróleo y Minería, Rafael Ramírez.

A continuación les mostrare una serie de imágenes tomadas por habitantes del sector.














































Hay muchas fotos en las redes sociales, tuve que abstenerme de colocar algunas por que eran muy frías.

Buenas.
Me encuentro maqueteando un diseño para una idea loca que tengo y poseo una duda que mas bien se me ha convertido en un problema al querer mantener un margen con una capa absoluta.

El problema lo he reflejado en una imagen que les mostrare a continuación:
http://img6.imageshack.us/img6/8051/dudadiseoavatar.png

El box gris superior no tiene nada de especial.
La capa amarilla que esta por debajo del naranja, es una barra con un fondo, tampoco tiene nada de especial.
Lo gris oscuro que se encuentra debajo del box amarillo y por detrás del naranja es sencillamente el body que se viene viendo debajo de todo.
La barra gris inferior (pie de pagina) cuenta con una propiedad de posición absoluta.

Mi problema viene siendo, como hago que el centro de todo (comprendido al 100%) pueda utilizarlo para crear un box gigante de 90x90% y 5% de margen entre la barra gris superior con la barra gris inferior (esta es absoluta).

Saludos.

¿Que es Ouya?
Es una consola de videojuegos F2P (free to play). Con esto puede que no suene muy atractivo ya que el punto mas importante de esta consola viene siendo que es 100% de código abierto tanto de hardware como de software, ¿Como así?, Esta consola esta basada en Android 4.0 como SO principal y ya cuenta con un recaudo de 4 millones de dolares y con mas de 30.000 inversionistas.

¿Que hay de los "Hackers"?
La compañía dio a conocer que no le interesan las ganancias ni lo que llegue a pasar con las modificaciones, de hecho, pueden incluso facilitarte hasta los diseños industriales de la consola con tal de ir mejorando el sistema.

¿Que trae esta nueva consola?
Las especificaciones técnicas no son las mas elevadas del mercado pero son muy bien recibidas con su bajo costo de 99$ USD

• Procesador nVidia Tegra 3
• 1 GB de memoria RAM
• 8GB de almacenamiento
• Conexión HDMI con soporte 1080p Full HD
• Wifi
• Bluetooth LE 4.0
• USB 2.0
• Controlador Wireless con los controles estandar (dos sticks analógicos, d-pad, 8 botones de acción, un botón del sistema), y un panel tactil.
• Sistema operativo Android 4.0

La idea principal de esta consola de video juegos no es tan solo un razonable precio, pero también que estará enfocado en ser realmente abierto a los desarrolladores, cosa que no sucede con otras consolas.

Se espera que el primer Ouya salga en el primer trimestre de 2013.

---
En mi opinión personal me parece excelente esta nueva propuesta.
A las compañías desarrolladoras de juegos y aplicaciones les parecerá altamente atractivo el hecho de que sea de código abierto y mas aun su bajo costo de 99 USD.

Eso sin embargo que no me extrañaría el hecho de que Google llegue a financiar este proyecto para expandirse al mundo de las consolas.

Vídeo:
http://www.youtube.com/watch?v=r7uWLTJ7ebc

Creo este tema para que aporten todo lo nuevo presentado por Google este año en su exposición Google I/O.

---

Empiezo yo con Google Glass presentado por primera vez en publico hace apenas unas horas.
Google Glass son los lentes inteligentes de Google en el cual podrás enviar y recibir mensajes, llamar, tomar fotos y sobretodo enlazarte con todos los servicios que ofrece su red social Google+.

En la presentación hecha el día de hoy en Google I/O llevan al extremo el uso de Google+ Hangout con Google Glass.
https://www.youtube.com/watch?v=D7TB8b2t3QE

En mi opinión pensaba que era un vídeo pre-grabado hasta que vi el final, sencillamente me encanto este proyecto, muy útil sobretodo para los periodistas y personas que necesiten mantenerse comunicadas.

Enhorabuena Google!

Desde hace unos instantes, el termino "friki" ha sido agregado a la RAE (Real Academia Española) cuyo significado que le dieron fue:

friki.
(Del ingl. freaky).
1. adj. coloq. Extravagante, raro o excéntrico.
2. com. coloq. Persona pintoresca y extravagante.
3. com. coloq. Persona que practica desmesurada y obsesivamente una afición.

En mi opinión ya es un logro de que el internet influya en la creación de nuevas palabras para el diccionario.
OFF: Falta que agreguen "troll" y soy feliz :p

Saludos.

Hola PHPeros.
En esta oportunidad les traigo una actualización de la versión 5.0 del Build de baldosas.
Las novedades son las siguientes:

• Modo dinámico agregado al esquema tridimensional
• Acercar / alejar cámara usando el eje Y del evento del ratón (arriba = acercar, abajo = alejar)

<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<style>
body {
background-Color:#111;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
user-select: none;
}
#piso {
height: 640px;
width: 640px;
-webkit-transform-style: preserve-3d;
position: relative;
margin: 0 auto;
-webkit-transform: rotateX(60deg) rotateZ(45deg);
}
.baldosa {
width:64px;
height:64px;
background-color: rgba(50, 50, 50, .7);
position: absolute;
border:1px solid #555;
}
.baldosa:hover { background-color: rgba(100, 100, 100, .8) }
.grosor {
width:64px;
height:30px;
background-color: rgba(50, 0, 0, 1);
-webkit-transform-style: preserve-3d;
position:absolute;
border:1px solid #555;
}
.uno { -webkit-transform: rotateX(-90deg) rotateY(0deg) translateZ(48px) translateY(15px) }
.dos { -webkit-transform: rotateX(-90deg) rotateY(90deg) translateZ(32px) translateY(15px) translateX(-16px)}
.tres { -webkit-transform: rotateX(-90deg) rotateY(180deg) translateZ(16px) translateY(15px) }
.cuatro { -webkit-transform: rotateX(-90deg) rotateY(270deg) translateZ(32px) translateY(15px) translateX(16px)}
</style>
<script>
/*!
 * Build de Baldosas 3D v5.1 - jQuery
 *
 * Autor: Joaquin A. (SoyJoaquin. o -Null-)
 * http://phperos.net
 *
 * Contacto:
 * Email: hgcproductions@hotmail.com
 * Skype: SoyJoaquin.
 *
*/

var emX;
var emY;
var balH;
var balW;
var mapa = [[1,1,1,1,1,1,1,1],
[1,1,1,1,1,1,1,1],
[1,1,0,0,1,1,1,1],
[1,1,0,0,1,1,1,1],
[1,1,1,1,1,1,0,0],
[1,1,1,1,1,1,0,0],
[1,1,1,1,0,0,0,0],
[1,1,1,1,0,0,0,0]];


$(document).ready(function (){
emX = 150;
emY = 0;
balH = 64;
balW = 64;
loadBaldosa();

var estaX = 45; var estaY = 1; var x; var y; var press; var pX; var pY; var escala;
$('body').mousedown(function(a){
press = true; pX = a.pageX; pY = a.pageY;
}).mouseup(function(a){
press = false; estaX = x; estaY = y;
}).mousemove(function(b){
if(press){
x = Math.round(-(b.pageX-pX)+estaX);
y = Math.round(-(b.pageY-pY)+estaY);
escala = y/50;
escala = (escala<1)? 1 : escala;
escala = (escala>3)? 3 : escala;
$('#piso').css('WebkitTransform', 'rotateX(60deg) rotateZ('+x+'deg) scale3d('+escala+','+escala+','+escala+')');
}
});
});

function loadBaldosa() {
var id = 0;
for(x=0;x<mapa.length;x++) {
for(y=0;y<mapa[x].length;y++) {
if(mapa[x][y] == 1) {
id++;
$("#piso").append('<div id="'+id+'" class="baldosa"><div class="grosor uno"></div><div class="grosor dos"></div><div class="grosor tres"></div><div class="grosor cuatro"></div></div>');
resultadoX = (x * (balW));
resultadoY = (y * (balH));
$('#'+id).css({
position: "absolute",
left: resultadoX,
top: resultadoY
});
}
}
}
}
</script>
</head>
<body>
<div id="piso"></div>
</body>
</html>

Espero que les sea de utilidad.
Saludos.

Hola PHPeros.
En esta oportunidad les traigo una nueva versión del Build de Baldosas que vengo desarrollando desde el año pasado.

Como ya sabrán, en su v4.0 se agrego un novedoso soporte tridimensional para poder observar todos los ángulos posibles de nuestra retícula. Pero, aun así, la vista 3D no se llega a observar con facilidad ya que no cuenta con planos verticales que nos ayude a distinguir mejor la diferencia.

Lo nuevo que les ofrece esta versión (v5.0) es que muetra el grosor que llega a tener cada baldosa en vista.

<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<style>
body {
background-Color:#111;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
user-select: none;
}
#piso {
height: 640px;
width: 640px;
-webkit-transform-style: preserve-3d;
position: relative;
margin: 0 auto;
-webkit-transform: rotateX(60deg) rotateZ(45deg);
}
.baldosa {
width:64px;
height:64px;
background-color: rgba(50, 50, 50, .7);
position: absolute;
border:1px solid #555;
}
.baldosa:hover { background-color: rgba(100, 100, 100, .8) }
.grosor {
width:64px;
height:30px;
background-color: rgba(50, 0, 0, 1);
-webkit-transform-style: preserve-3d;
position:absolute;
border:1px solid #555;
}
.uno { -webkit-transform: rotateX(-90deg) rotateY(0deg) translateZ(48px) translateY(15px) }
.dos { -webkit-transform: rotateX(-90deg) rotateY(90deg) translateZ(32px) translateY(15px) translateX(-16px)}
.tres { -webkit-transform: rotateX(-90deg) rotateY(180deg) translateZ(16px) translateY(15px) }
.cuatro { -webkit-transform: rotateX(-90deg) rotateY(270deg) translateZ(32px) translateY(15px) translateX(16px)}
</style>
<script>
/*!
 * Build de Baldosas 3D v5.0 - jQuery
 *
 * Autor: Joaquin A. (SoyJoaquin. o -Null-)
 * http://phperos.net
 *
 * Contacto:
 * Email: hgcproductions@hotmail.com
 * Skype: SoyJoaquin.
 *
*/

var emX;
var emY;
var balH;
var balW;

$(document).ready(function (){
emX = 150;
emY = 0;
balH = 64;
balW = 64;
loadBaldosa();

var estaX = 45; var x; var press; var pX;
$('body').mousedown(function(a){
press = true; pX = a.pageX; pY = a.pageY;
}).mouseup(function(a){
press = false; estaX = x;
}).mousemove(function(b){
if(press){
x = Math.round(-(b.pageX-pX)+estaX);
$('#piso').css('WebkitTransform', 'rotateX(60deg) rotateZ('+x+'deg)');
}
});
});

function loadBaldosa() {
var id = 0;
for(x=0;x<10;x++) {
for(y=0;y<10;y++) {
id++;
$("#piso").append('<div id="'+id+'" class="baldosa"><div class="grosor uno"></div><div class="grosor dos"></div><div class="grosor tres"></div><div class="grosor cuatro"></div></div>');
resultadoX = (x * (balW));
resultadoY = (y * (balH));
$('#'+id).css({
position: "absolute",
left: resultadoX,
top: resultadoY
});               
}
}
}
</script>
</head>
<body>
<div id="piso"></div>
</body>
</html>

Nota: Quizás se les ejecute un poco lento ya que he querido mostrar todos los lados de la baldosa en si para que vean lo que he querido decir con el tema de lo tridimensional, mas adelante montare una actualización de esta versión la cual solo mostrara el borde correspondiente sin sobrecargar la pagina de elementos.

Saludos.