aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

El año pasado, en el Congreso de Webmasters, disfruté con la charla de Roberto Martín, concretamente con la charla “Web para dispositivos móviles“. Una charla que nos introducía de lleno en el futuro de los dispositivos móviles y su acceso a la red.

En la charla, se hablaron de muchos números, sobretodo cifras de usuarios potenciales que como desarrolladores no podemos despreciar.

En el mundo hay 6.700.000.000 de personas, de los 4.000.000.000 son usuarios de dispositivos móviles (o al menos existen 4.000.000.000 de dispositivos). 1.400.000.000 millones son usuarios de internet en ordenadores y 550.000 de usuarios de internet a través del móvil, principalmente en países en vías de desarrollo (Rusia, China, Brasil e India, especialmente), donde los móviles son más asequibles. En el 2012 se prevé que los usuarios de internet móvil superen los 1.500.000.000 de usuarios

Este extracto que saco del blog del Congreso del año pasado, nos muestra una cifra que sin lugar a dudas debemos respetar o como mínimo tener en cuenta.

Adapta tu WordPress

Los que usamos WordPress lo tenemos realmente fácil, gracias a uno de los tantos plugins de los que podemos hacer uso, adaptar nuestro contenido es tan sencillo que instalar uno de estos plugins:

1. WordPress Mobile Plugin
2. MobilePress
3. WordPress Mobile Edition (este es el que estoy usando ahora)
4. Mowser WordPress Mobile
5. Mobilize bt Mippin WordPress Plugin
6. Wetomo WordPress to Mobile
7. Quick SMS
8. WP-WAP

Cualquier otro desarrollo

Si por el contrario quieres adaptar el contenido de cualquier otra aplicación, ya sea propia o prefabricada esta serie de opciones te permitirá conseguir el mismo efecto:

1. Diego Martín (Minid) desarrolló un framework para adaptar fácilmente aplicaciones al iPhone
2. Recordamos algunos consejos para desarrollar para el iPhone
3. Google Mobilizer, haz tu web móvil (y fea) con esta herramienta de Google.
4. Ubik, más fácil no puede ser. 4 pasos y tu web para móviles.
5. jQTouch, adaptación para iPhone con este plugin jQuery.
6. Muchas más…

Documentación interesante

Os añado información útil al respecto:

1. Cómo diseñar para la web móvil. Una aproximación práctica (Alzado.org).
2. Tu sitio web en dispositivos móviles (Maestros del Web),
3. Mi Web Móvil (interesantes artículos relacionados con la web móvil).
4. Guía breve de Web Móvil (W3C).
5. Recursos sobre web móvil (Sortega.com).

¿A que esperas para adaptar tu web?

En WebJawns.com publicaron hace unas semanas una forma fácil de reducir el consumo de memoria de WordPress. Al parecer inicialmente usando únicamente eAccelerator obtenía unos resultados de aproximadamente un 57% menos de consumo de memoria, osea de 14MB lograba reducir el consumo a 8M.

(Ver Imagen)

Trás unas pruebas más, y midiendo los datos con el plugin TPC! Memory Usage nos muestra una mejoría del 90% en cuanto a consumo de memoria de WordPress.

La solución pasó por unir la mejoría de eAccelerator a la potencia de Zend Optimizer, ¿Alguien ha probado algo similar?

Alen Grakalic publica en CSSGlobe un artículo sobre 3 formas de hacer crop con CSS. Un interesante artículo que muestra las capacidades del lenguaje y de los diferentes caminos de los que disponemos para conseguir lo mismo.

¿Que es crop?

Llamamos crop al recorte selectivo de una imagen. Este recorte no afecta ni al ancho ni al alto de la imagen, y únicamente se encargar de mostrar nuestra selección al usuario.

(Ver Imagen)

Como vemos en la imagen, sacada de la Wikipedia, esta técnica la usamos cada día al ver la televisión, ya que para no perder el ratio de la imagen y así no deformar los objetos que visualizamos se realiza un crop adaptando la imagen sin perder la relación de aspecto de la imagen.

Técnica 1: Márgenes negativo

Esta primera técnica, basada en el uso de márgenes negativos simula el efecto crop sobre la imagen, haciendo que la imagen se oculte sobre una capa superior.

// HTML
<p class="crop"><a href="http://templatica.com" title="Css Templates"><img src="img.jpg" alt="css template" /></a></p> 

// CSS
.crop{
 float:left;
 margin:.5em 10px .5em 0;
 overflow:hidden; /* IMPORTANTE */
 border:1px solid #ccc;
 }

 /* Indicamos los márgenes que dejamos para simular el crop. */
.crop img{
 margin:-20px -15px -40px -55px;
 }

Ver una demo.

Técnica 2: Position absolute

Similar a la anterior, aunque en este caso usamos la propiedad position, para hacer que el elemento flote detrás del elemento padre y así se oculte, mostrando la porción de la imagen que deseemos mostrar.

// HTML
<p class="crop"><a href="http://templatica.com" title="Css Templates"><img src="img.jpg" alt="css template" /></a></p> 

// CSS
.crop{
 float:left;
 margin:.5em 10px .5em 0;
 overflow:hidden; /* IMPORTANTE */
 position:relative; /* IMPORTANTE */
 border:1px solid #ccc;
 width:150px;
 height:90px;
 }
 /* Ocultamos parte de la imagen */
.crop img{
 position:absolute;
 top:-20px;
 left:-55px;
 }

Ver una demo.

Técnica 3: Usando la propiedad clip

La propiedad clip, fue concebida para este tipo de acciones. Se trata de hacer que elemento padre tenga un agujero de tamaño especificado sobre la imagen, mostrando así la parte de la imagen que deseemos mostrar.

// HTML
<div class="crop"><p><a href="http://templatica.com" title="Css Templates"><img src="img.jpg" alt="css template" /></a></p></div>

// CSS
.crop{
 float:left;
 position:relative;
 width:150px;
 height:90px;
 border:1px solid #ccc;
 margin:.5em 10px .5em 0;
 }
.crop p{
 margin:0;
 position:absolute;
 top:-20px;
 left:-55px;
 clip:rect(20px 205px 110px 55px); /* Agujero rectángulo de medida específica */
 }

Ver una demo.

Conclusión

Tres técnicas que permite realizar la misma funcionalidad y que ofrecen la posibilidad de implementar fácilmente en cualquier aplicación web. ¿Tu por cual te decantas?

Barry van Oudtshoorn, ha desarrollado un compactador de CSS que además nos permite ordenar alfabéticamente los atributos de nuestros CSS.

Para ello, ha seguido las especificaciones que Google propone en Minimize Payload Size haciendo que nuestro CSS sea más pequeño y, por consecuente, tarde menos en llegar al usuario final.

¿Que es lo que hace?

Usando un fichero CSS de base se le aplican una serie de transformaciones para obtener un fichero CSS nuevo complemente compactado.

• Se eliminan todos los comentarios
• Ordena todos las propiedades de cada selector alfabéticamente
• Ordena todos los valores de cada propiedad alfabéticamente
• Elimina todo espacio innecesario.

Comparación con YUI Compressor

(Ver Imagen)

La compactación está a la altura de la ofrecida por YUI Compressor, aunque únicamente la supera (y por muy poco) en los casos con CSS gzipped.

(Ver Imagen)
Via

Versión PHP

Aprovechando las vacaciones y que esto me irá bien para un proyecto que estoy desarrollando, me portado la función a PHP para poder usarla sin usar Java.

<?php
class StyleSheetCompressor {
 private $cssFile;
 private $selectors = array();

 function __construct($cssContent = '', $cleanComments = true){
 $this->cssFile = $cssContent;

 // Borramos comentarios
 if ($cleanComments)
 $this->cssFile = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $this->cssFile);

 $selectors = array();
 // Obtenemos todos los selectores
 $partes = explode("}", $this->cssFile);

 foreach($partes as $parte) {
 if (!empty($parte))
 array_push($this->selectors, new SelectorCSS($parte."}"));
 }
 }

 function get($cleanSpaces = true){
 $salida = '';
 foreach($this->selectors as $selector) {
 $salida .= $selector->get($cleanSpaces)."\n";
 }
 // Borramos saltos de linea, espacios,...
 if ($cleanSpaces)
 $salida = str_replace(array("\t", "\n", "\r"), '', $salida);

 return $salida;
 }
}

/*
 SelectorCSS
*/
class SelectorCSS{
 private $properties = array();
 private $selector;

 function __construct($selector = ''){
 $parts = explode("{", $selector);
 if (count($parts) < 2) {
 die("Selector " + selector +" incompleto");
 }
 $this->selector = trim($parts[0]);
 $contents = trim($parts[1]);
 if (strlen($contents) == 0) {
 die("Selector " + selector + "vacio");
 }

 if (substr($contents,strlen($contents) -1 ,1) != '}'){
 die("Selector "+selector+" no estáerrado");
 }

 $contents = substr($contents, 0, $contents - 2);

 $this->properties = explode(';', $contents);
 }

 function get(){
 $str = $this->selector.'{';
 natcasesort($this->properties);
 foreach($this->properties as $property) {
 if (!empty($property))
 $str .= $property.";";
 }
 $str .= '}';
 return $str;
 }

}

Para usar es muy sencillo, simplemente debemos indicar el contenido del fichero .css que deseemos compactar y ordenar sus propiedades. Al recibir el contenido del fichero podemos enviar uno o varios fichero concatenando el contenido de los mismos.

// Contenido del fichero styles.css
 $fileName = file_get_contents('styles.css');

 // Creamos un objeto al que le pasamos el contenido por parámetro
 $styleSheet = new StyleSheetCompressor($fileName);
 /* Parámetros:
    1: (String) Contenido del fichero
    2: (Bool) Limpiar comentarios (defecto: true)
 */
 // Obtenemos el contenido CSS
 echo $styleSheet->get(false);
 /*    Parámetros:
     1: (Bool) Eliminar saltos de línea (defecto: true)
 */

El objeto dispone de un método get() que devolverá el contenido compactado y ordenado, este contenido podemos cachearlo en un fichero estático o mostrarlo directamente.

Via CSS-Tricks.com descubro una técnica basada en Javascript que permite hacer que los elementos <select /> muestren su contenido desplegado y visible para la versión para imprimir.

(Ver Imagen)

Código

$(function(){
     // Todo los elementos <select />
     $("select").each(function(i){

        var $el = $(this);

        // Cogemos todos los elementos <option />
        var $options = $el.find("option");

        // Añadimos un <div /> y el listado de opciones en <ul />
        $el.after("<div class='print-select'>Options: <ul id=sel"+i+"></ul></div>");

        var $curPrintBox = $("#sel"+i);

        // Añadimos las opciones en forma de lista.
        $options.each(function() {
          $curPrintBox.append("<li>"+$(this).text()+"</li>");
        });
    });
 });

Este código, se encarga de generar un listado con las opciones del <select /> en forma de lista como podemos ver en la imagen superior. Podeis ver una demo funcionando.