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

Todos los que nos encontramos en este mundillo web, nos hemos encontrado antes o después ante la ardua labor de afinar un CSS, echándolo horas de esfuerzo, paciencia y dedicación. Esta labor comprende pasos como los de modificar los archivos fuentes, y visualizar (actualizando antes claramente) en  cada uno de los navegadores a cada instante.

Pues bien, con CSS Terminal, solucionamos el problema de una manera muy sencilla: inserta una capa semitransparente por encima del sitio web y admite que escribamos el CSS de forma directa. Como dice el  autor, es un bookmarklet que permite insertar reglas de CSS directamente en una página en vivo. Algo que se agradece mucho para depurar CSS y crear prototipos de forma rápida.

Además un aspecto muy importante a tener en cuenta es que CSS Terminal es compatible con una amplia gama de navegadores como: Opera, Mozilla Firefox, Google Chrome, Apple Safari y Microsoft Internet Explorer 9 o superior. 

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í:

Para todos aquellos más o menos avezados en el mundillo del diseño web, entenderán lo ‘sencillo’ que puede llegar a resultar el realizar un borde en un texto con imágenes, eso sí, siempre vía la utilización de herramientas, tales como Photoshop, fireworks, etc.

Pero y si os preguntase, ¿Cómo hacerlo vía CSS?. Entendemos que la cosa cambia un poco.

Por ello os presentamos una nueva característica de CSS3, text-stroke, (aunque todavía no es parte de él) es la inclusión de borde en el texto, de una forma muy sencilla, tal y como nos tiene acostumbrados CSS3. Pero hay que destacar que por ahora funciona únicamente en navegadores basados en WebKit (Safari, Chrome, iPhone). Por ejemplo, si aplicamos texto con un color blanco,en Firefox simplemente aparecerá una página en blanco, ya que no existe borde, porque no reconoce esta propiedad. Puedes usar Javascript para que detecte el borde, o asegurarte de que el color del texto no coincide con el del fondo. Un ejemplo sería este:

h1 {  

-webkit-text-stroke: 3px black;  

color: white;  

}  

Aplicar estilos según el navegador

Así podremos detectar si el navegador soporta esta propiedad, y si no, cambiamos el color del texto de blanco a a negro:

var h1 = document.createElement('h1');   

if ( !( 'webkitTextStroke' in h1.style ) ) {  

  var heading = document.getElementsByTagName('h1')[0];  

  heading.style.color = 'black';  

}  

Ejemplo de su funcionamiento, con el típico: "Hola Mundo":

Cabe destacar que podemos hacer un efecto similar con la propiedad text-shadow.

En este vídeo, de Fronteers 2010, da un repaso general a la historia deCSS3, su estado actual en los navegadores, y qué es lo que nos depara CSS.