Web X.1

Aunque no hay motivos para no utilizar ya HTML5 y CSS3 (muchos serán los que estarán comenzando con ello) la web sigue en movimiento.

Las actualizaciones cada vez más rápidas de la práctica totalidad de navegadores (sin decir ya que exceptuando a nuestro querido IE), permiten que las nuevas especificaciones vayan tomando presencia en la web.

Ya tenemos el primer borrador de CSS4 de www.w3.org, aunque no lo soporten aún ningún navegador es interesante ver hacia dónde va la web.

Recordemos que no es una versión nueva de CSS. En CSS se trabaja por módulos y CSS4 es el estado de trabajo donde se proponen modificaciones o nuevos módulos. Hablamos del nivel 4 de los módulos de CSS.

Además, y prácticamente a la par, se nos presenta la próxima versión de php, php6. Esta versión ya está disponible en php.net para su descargar.  Cabe destacar que Php6 no supone un cambio tan radical como el que sucedió con la versión anterior por lo que es de esperar, si todo va bien, que la adopción de esta versión sea más rápida.

    PHP sigue siendo el lenguaje script para desarrollos web más popular y la lista de nuevas características que vienen con esta nueva versión pueden situarle en posiciones todavía más destacadas.

En resumen, nuevos avances, “nuevas” tecnologías, y sin duda nos pondremos con ellas

Nuevas tecnologías, nuevas posibilidades y por ello vamos ha realizar un pequeño ejemplo con HTML5 y CSS3 y ver así que cosas podemos llegar a implementar, y que con CSS2 era impensable.

El pequeño ejemplo consistirá en realizar un cubo en 3D con CSS. Las 3 caras del cubo se compondrán en nuestro caso, del logo corporativo, “como nó!!    ;)  , labor de marketing”.

Para empezar, necesitamos 3 imágenes separadas, cada imagen de 100 x 100 píxeles, degradado de claro a oscuro. Después añade dos píxeles de borde, que en un futuro nos servirá como el borde del propio cubo.

Código CSS

Ahora que tenemos nuestras imágenes, vamos a empezar a crear el código CSS.

.cube {

position: absolute;

                top: 100px;

                left: 100px;

}

El contenedor de nuestro cubo se llamará .cube, no necesitamos aplicarle altura y anchura, pero es recomendable aplicarle posición absoluta.

.face {

                position: relative;

                width: 100px;

                height: 100px;

                overflow: hidden;

}

Después necesitamos crear una característica global para cada cara de nuestro cubo. En esta parte si será necesario utilizar el posicionamiento absoluto. Indicaremos una altura y anchura de 100 píxeles, y ocultaremos el overflow para que si las imágenes son más largas, no destruyan el cubo.

.top {

                top: 0;

                left: 89px;

                background: #ffffff;

                -webkit-transform: rotate(-45deg) skew(15deg, 15deg);

                -moz-transform: rotate(-45deg) skew(15deg, 15deg);

}

Ahora posicionaremos la imagen superior del cubo con top y left. Después añadiremos el color de fondo, que no es necesario pero queda mejor. La siguiente parte seguramente sea la más importante, la nueva propiedad CSS3 transform. Muchos navegadores ya soportan esta propiedad, por lo que no tendremos problemas. Necesitamos incluir dos líneas extra para navegadores basados en webkit y para Firefox con el objetivo de que se muestre correctamente. Rotaremos el cubo 45º en el sentido de las agujas del reloj, 15º en posición oblicua para hacerlo coincidir con las otras caras del cubo.

.left {

                top: 77px;

                left: 44px;

                background: #ffffff;

                color: #ffffff;

                -webkit-transform: rotate(15deg) skew(15deg, 15deg);

                -moz-transform: rotate(15deg) skew(15deg, 15deg);

}

Después debemos construir un espejo de la cara izquierda con la derecha, es decir, las mimas propiedades de forma invertida.

.right {

                top: -115px;

                left: 145px;

                background: #ffffff;

                color: #ffffff;

                -webkit-transform: rotate(-15deg) skew(15deg, -15deg);

                -moz-transform: rotate(-15deg) skew(-15deg, -15deg);

}

Código HTML

La parte de HTML es la más sencilla, el formato sería así:

<div class="cube">

<div class="face top">

            <img src=".../WPN-P.png" height="100" width="100">

        </div>

<div class="face left">

            <img src=".../WPN-W.png" height="100" width="100">

        </div>

<div class="face right">

            <img src=".../WPN-N.png" height="100" width="100">

        </div>

</div>

Con HTML estructuraremos las imágenes. El ejemplo final sería así: