¿Qué problema tiene HTTP? Para cada petición de este tipo, abre y cierra la conexión. ¿Eso qué conlleva? Un aumento del tiempo de transferencia.

Como se puede observar, el problema en parte es abordable ya que aunque no podemos (por ahora) reunir todas las imágenes en una sola transmisión, sí que es cierto que podemos hacer que si tenemos 4 ficheros de hojas de estilo CSS y 10 ficheros JavaScript que cargar; podemos limitarnos a enviar un sólo fichero de cada tipo al navegador. El resultado no cambia y aceleramos el proceso.

Si usamos WordPress, podemos instalar WP Minify para que automatice este proceso por nosotros y nos olvidemos, junto con otra mejora, comprime ambos ficheros resultantes lo que lleva a una mejora mayor aún de la ya comentada.

Podéis ver el efecto de usarlo en las capturas siguientes:

Casi 100.000 bytes recibidos, tras usar WP Minify tenemos:

Menos de 30.000, ¿muy útil verdad? Veamos cómo instalarlo. Nos dirigimos a:

• Escritorio
• Plugins
• Añadir nuevo
• Buscamos “WP Minify”
• Instalar ahora

Una vez instalado lo activamos pero antes de eso nos aseguramos de que el servidor web tiene permisos de escritura en:

• /wp-content/plugins/wp-minify/cache
• /wp-content/plugins/wp-minify/min/config.php

Con sólo eso veremos el rendimiento de nuestro sitio optimizado de forma automática sin esfuerzo de nuestra parte.

1. Primer elemento
2. Segundo elemento
3. Tercer elemento

Si por cualquier razón queremos empezar por un elemento diferente a uno (por ejemplo porque queramos continuar la lista anterior en otro punto del documento HTML), tenemos el atributo “start“, veamos un ejemplo de su uso:

4. Cuarto elemento
5. Quinto elemento

El código fuente sería:

<ol start="4">
	<li>Cuarto elemento</li>
	<li>Quinto elemento</li>
</ol>

Sin usar este atributo no podríamos haberlo hecho.

Si buscas un portal para aprender los estándares web, W3Schools es tu sitio. No sólo contiene excelentes tutoriales paso a paso de HTML, CSS y Javascript, sino que también dispone de sus correspondientes referencias, completas y actualizadas.

También existen tutoriales sobre otras tecnologías como XML, SQL, PHP, etc. Eso sí, en mi opinión se pueden encontrar mejores tutoriales.

El único fallo es que está inglés, pero el nivel es muy sencillo y fácil de comprender.

Enlace: W3Schools.

Como me gustan los juegos aquí os dejo uno que demuestra lo que se puede hacer ya programando en estos lenguajes. Si bien estas tecnologías aún les queda mucho camino para sustituir la potencia de Flash con respecto a las aplicaciones web, es un avance muy importante.

Los controles son el cursor izquierdo y el cursor derecho para moverse y espacio para saltar. Si no se mueve el personaje, pulsa con el botón izquierdo del ratón en el canvas.

Es decir, si usamos el fuente CSS sobre el que trabajamos como fichero de producción estamos cometiendo un fallo: estamos transmitiendo información de forma innecesaria en muchas ocasiones (nosotros mismos lo hacemos ahora mismo en Linux Hispano). Es algo similar a lo que ocurre con jQuery y sus dos versiones:

• La de desarrollo (214 KB)
• La min para sistemas en producción (29 KB)

Como podéis apreciar la diferencia es ostensible. ¿Qué hace el código de producción que no haga el de desarrollo? Nada, sólo que el segundo está minimizado y comprimido. Ahora eso sí, es totalmente ilegible para un humano.

Para conseguir este mismo efecto con una hoja de estilos CSS tenemos servicios web en línea que nos permiten hacerlo en un momento. Personalmente me gusta mucho este de CSS Drive. Sólo tendremos que copiar y pegar el código CSS y elegir el grado de compresión. Tiene un modo avanzado en el que podremos elegir más características, pero con las ofrecidas en el básico es suficiente.

Uno de estos ejemplos es hacer cosas tan curiosas como una animación en tres dimensiones de Super Mario en movimiento o dibujar el logo de Internet Explorer. Es curioso porque él mismo no se puede dibujar. Veamos cómo se renderiza en cada navegador:

Resulta curioso que entre dos navegadores webkit, como Safari 5 y Chrome 5 haya tanta diferencia. Si probáis a entrar con una beta de Chrome 6 se nota el cambio. Opera e Internet Explorer, por desgracia, van algo atrás en este tema. Y Firefox… intachable.

¿Habéis probado a ver cómo se ve en vuestro navegador?

Frameworks para PHP:

• Yiiframework
• Codeigniter
• Cakephp
• Phpdevshell
• Akelos
• Symfony
• Pradosoft
• Zend
• Seagullproject
• Zoopframework
• Phpmvc
• AjaxAC
• Qcodo
• Maintainable
• Evocore
• Phocoa
• Kohana
• Limb
• Solarphp
• Blueshoes

Frameworks para CSS:

• 52framework
• Elements
• Yaml
• YUI
• Blueprintcss
• Css-Boilerplate
• Tripoli
• ContentWithStyle
• 960.gs
• Typogridphy
• Sencss
• Bluetrip
• Emastic
• Malo
• Elasticss
• The Golden Grid
• 1kbgrid
• Fluid960gs
• Logicss

Y bien, estos han sido todos los que he encontrado. Supongo que alguno me me habré dejado atrás, así que se aceptan comentarios para completar la lista, sugerencias y opiniones sobre la propuesta.

El estándar de box model del W3C se ha convertido ahora en una propiedad de un elemento, gracias al comando de CSS3: box-sizing: content-box.

Veamos un ejemplo:

#box6 {
width: 200px;
padding: 10px;
/* para Mozilla Firefox */
-moz-box-sizing: content-box;
/* para IE8 */
box-sizing: content-box;
/* para Safari & Google Chrome */
-webkit-box-sizing: content-box;
}

El comando box-sizing también acepta border-box que hace que el padding se enmarque dentro de la caja y no sumándolo a las dimensiones de ésta, tal como hacía en su día Internet Explorer 5. Un ejemplo de uso con padding y border-box sería el siguiente:

#box6b {
width: 200px;
padding: 10px;
/* for Mozilla Firefox */
-moz-box-sizing: border-box;
/*for IE8 */
box-sizing: border-box;
/* for Safari & Google Chrome */
-webkit-box-sizing: border-box;
}

7. Contorno

Además de la propiedad border, CSS3 incluye outine que es básicamente lo mismo pero que se puede aplicar a la vez, con una propiedad de offset que nos asegura un visualizado correcto de los dos de forma simultánea:

#box7 {
border: 1px solid #000;
outline: 1px solid #699;
outline-offset: -9px;
}

8. Gradientes de fondo

Los gradientes en CSS3 son extremadamente potentes y la variedad de combinaciones que podemos realizar nos asegura posibilidades en todas las situaciones.

La familia Firefox y la familia Webkit los utilizan de una forma diferente, el primero con más variedad de propiedades pero menos posibilidades dentro de ésta, y el segundo lo contrario.

Veamos un ejemplo similar aplicado a cada familia de navegadores. Enb Webkit es más complejo pero a la vez más flexible (como suele ocurrir con tantas cosas en esto de la informática):

#box8 {
/* en la familia de Mozilla Firefox */
background: -moz-linear-gradient(bottom, #b6ebf7, #fff 20%);
}
/*en la familia Webkit */
#box8 {
background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #b6ebf7), color-stop(0.20, #fff));
}

9. Rotación

La posibilidad de rotar elementos es directa en CSS3. Podremos utilizar unidades como los grados sexagesimales. Siempre se rotará en el sentido de las agujas del reloj para las cantidades positivas. Una rotación de dos grados en ese sentido sería:

#box9 {
-moz-transform: rotate(2deg);
-webkit-transform: rotate(2deg);
}

10. Transiciones

Finalmente, os presentamos una de las posibilidades más esperadas de CSS3, las transiciones directamente desde los estilos. La familia Webkit soporta esta funcionalidad y Firefox lo soporta en las versiones beta.

El ejemplo que vamos a mostrar explica cómo hacer que el color de un enlace pase azul a verde cuando pasamos el ratón por encima, pero no de forma instantánea, sino pasando por valores intermedios.

Comenzamos definiendo el color inicial:

.box a {
color: #0f0;
}

Definimos qué tipo de transición vamos a usar, la de color, y cuándo lo vamos a usar, al pasar por encima el ratón (hover):

#box10 a:hover {
color: #0f0;
-moz-transition-property: color;
-webkit-transition-property: color;
}

Cuánto durará la transición:

#box10 a:hover {
color: #0f0;
-moz-transition-property: color;
-webkit-transition-property: color;
-moz-transition-duration: 0.5s;
-webkit-transition-duration: 0.5s;
}

Y qué tipo de transición utilizar: ease, linear, ease-in, ease-out, entre otras, en nuestro caso hemos escogido ease.

#box10 a:hover {
color:#31801f;
-moz-transition-property: color;
-webkit-transition-property: color;
-moz-transition-duration: 0.5s;
-webkit-transition-duration: 0.5s;
-moz-transition-timing-function: ease;
-webkit-transition-timing-function: ease;
}

Por cierto, tenéis muchos de estos comandos explicados con una interfaz gráfica y preparados para explotarlos en una web llamada CSS 3.0 Maker que os recomiendo que visitéis ahora mismo.

Que la quinta versión de HTML sea una novedad y que últimamente existan cientos de noticias al respecto es evidente, nos enfrentamos a una tecnología que actualmente es desconocida por muchos, no tanto en uso si no en desarrollo.

De hecho, esta no es la primera vez que hablamos sobre HTML5 en Linux Hispano, lo hemos hecho en multitud de ocasiones, os recomiendo daros una vuelta sobre nuestras entradas más populares al respecto:

• Crea tu primera página en HTML 5
• Cinco reproductores libres en HTML5
• ¿Por qué tanto interés en HTML 5?
• El futuro de la web: HTML 5 (este es una referencia a Ayuda WordPress)

Y en otra ocasión Nacho López ya comentó acerca de juegos arcade (los de toda la vida) desarrollados con JavaScript sobre HTML5. Pero ahora os presento un directorio bastante completo de juegos desarrollados en HTML5, divididos en diversas categorías y con un sistema de valoraciones, echad un vistazo por HTML5games y ya nos contaréis que os parece.

Ya sabéis de mi deleite por los productos de Google, en concreto Gmail mi preferido, así que mi juego preferido: Galactic Inbox (un shotter que demuestra la potencia de HTML5).

1. Bordes radiales

Hasta la aparición de CSS3 para crear esquinas curvadas, teníamos que remitirnos al truco de las cuatro imágenes, cada una para cada esquina. Con CSS3 es tan simple como lo siguiente:

box1 {
border: 1px solid #699;
/* para Mozilla Firefox */
-moz-border-radius: 20px;
/* para Safari & Google Chrome */
-webkit-border-radius: 20px;
}

2. Sombra cuadrada

Una sombra puede ser aplicada a los elementos cuadrados utilizando una sola instrucción. Se necesitan tres números para definir cómo será:

1. Distancia del desplazamiento horizontal: positivo significa a la derecha, negativo a la izquierda
2. Distancia del desplazamiento vertical: positivo significa hacia abajo, negativo hacia arriba
3. Cómo de emborronada quieres la sombra

Este comando no se visualiza, todavía, en Internet Explorer.

#box2 {
/* para Mozilla Firefox */
-moz-box-shadow: 5px 5px 5px #b6ebf7;
/* para Safari & Google Chrome */
-webkit-box-shadow: 5x 5px 5px #b6ebf7;
}

3. Transparencia o RGBA

Los niveles de transparencia siempre han sido un problema para los navegadores, algunos directamente no los aplicaban y los demás los mostraban de una forma diferente para un mismo valor. Para solucionarlo, CSS3 plantea un nuevo estándar basado en tres números del 0 al 255, los RGB de siempre; y un cuarto, cuyo dominio abarca del 0 al 1 y que indica el canal alfa, es decir, la transparencia.

Por ejemplo:

#box3 {
background-color: rgba(110, 142, 185, .5);
}

Sin embargo, Internet Explorer no entenderá el comando y deberemos duplicar la instrucción para una óptima visualización en diferentes navegadores. El pseudo-selector :last-child hará que Internet Explorer obvie la segunda instrucción.

#box3 {
/* Para Internet Explorer */
background-color: #6e8eb9;
}
body:last-child #box3 {
/* Para el resto de navegadores */
background-color: rgba(110, 142, 185, .5)!important;
}

4. Columnas

Para evitar los problemas que pueden surgir elementos flotantes, CSS3 incluye la opción de crear columnas directamente desde el estilo. Una vez creadas las columnas en una etiqueta DIV, puedes usar etiquetas como P para rellenarlas de contenido, sin tener que poner DIV a izquierda y otro a derecha, por ejemplo.

El uso para dos columnas sería el siguiente:

#box4 {
/* para Mozilla Firefox */
-moz-column-count: 2;
-moz-column-gap: 20px;
-moz-column-rule: 1px solid #6e8eb9;
/* para Safari & Google Chrome */
-webkit-column-count: 2;
-webkit-column-gap: 20px;
-webkit-column-rule: 1px solid #6e8eb9;
}

5. Múltiples imágenes de fondo

A partir de ahora, podemos definir más de una imagen de fondo, separando por comas las imágenes. Veamos un ejemplo:

#box5 blockquote{
background:url(/i/comilla_izquierda.gif) no-repeat 0 0, url(/i/comilla_derecha.gif) no-repeat 100% 0;
border:1px solid #699;
padding:0 20px;
}

Como Internet Explorer no procesará la orden al encontrar las dos imágenes, deberemos volver a valernos del hack o truco de usar el elemento :last-child, veamos:

#box5 blockquote {
/* Compatible con todos los navegadores */
background: url(/i/quotel.gif) 0 0 no-repeat;
padding: 0 20px;
}
body:last-child #box5 blockquote{
/* Excluye a Internet Explorer por utilizar :last-child */
/* Ahora sí podemos poner dos imágenes */
background: url(/i/comilla_izquierda.gif) no-repeat 0 0, url(/i/comilla_derecha.gif) no-repeat 100% 0;
}

En breve, pondremos la segunda parte con otros cinco nuevos comandos de mucha utilidad.

Detectar si es iPhone o iPodTouch utilizando JavaScript

if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
    if (document.cookie.indexOf("iphone_redirect=false") == -1) {
        window.location = "http://m.espn.go.com/wireless/?iphone&i=COMR";
    }
}

Detectar si es iPhone o iPodTouch utilizando PHP

if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPod')) {
    header('Location: http://yoursite.com/iphone');
    exit();
}

Definir la anchura del iPhone como el viewport

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"&mt;

Insertar un icono específico para iPhone

<rel="apple-touch-icon" href="images/template/engage.png"/>

Prevenir que Safari ajuste automáticamente el tamaño del texto al rotar

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
    -webkit-text-size-adjust:none;
}

Detectar la orientación del iPhone

window.onload = function initialLoad() {
    updateOrientation();
}
function updateOrientation(){
    var contentType = "show_";
    switch(window.orientation){
        case 0:
	contentType += "normal";
	break;
	case -90:
	contentType += "right";
	break;
	case 90:
	contentType += "left";
	break;
	case 180:
	contentType += "flipped";
	break;
    }
    document.getElementById("page_wrapper").setAttribute("class", contentType);
}

Aplicar estilos CSS sólo a iPhone e iPod

@media screen and (max-device-width: 480px){
    /* All iPhone only CSS goes here */
}

Cambiar el tamaño de las imágenes para iPhone e iPod automáticamente

@media screen and (max-device-width: 480px){
    img{
        max-width:100%;
        height:auto;
    }
}

Esconder la barra de herramientas por defecto

window.addEventListener('load', function() {
    setTimeout(scrollTo, 0, 0, 1);
}, false);

Utilizar enlaces de tipo especial

<a href="tel:12345678900">Call me</a>
<a href="sms:12345678900">Send me a text</a>

Simular: pseudo clase hover

a:hover, a.hover {
    /* whatever your hover effect is */
}

Digo a priori, porque supongo que daría problemas utilizando JavaScript u otras tecnologías que no soporten adecuadamente caracteres Unicode. La verdad es que es muy extraño pero es sólo un ejemplo más del nivel de estandarización en cuanto a juegos de caracteres que se está adquiriendo en entornos hasta de interpretación o compilación.

<div class="□">
   <div class="┌">
    <div class="┐">
     <div class="└">
      <div class="┘">
        contenido
      </div>
     </div>
    </div>
   </div>
</div>

A más resolución en Flickr.

Las reglas CSS a incluir son las siguientes (rotación de -90º o 270º):
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

El tip original ha aparecido en unos de mi blog favoritos de diseño web, Gloobs.