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?

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.

Hasta el momento uno de los mejores editores WYSIWYG era sin dudas FCKEditor, aunque para mi gusto era un poco pesado pero eso si, muy completo. Ahora, tras 6 años desde tu aparición han decidido cambiarle el nombre y sobretodo la programación, consiguiendo un editor flexible, elegante, accesible y sobre todo Open Source.

(Ver Imagen)

CKEditor, ha sido desarrollado con la capacidad de no depender de ningún framework JS, por lo que podemos hacer uso de él desde cualquier aplicación web, sin preocuparnos del Javascript que tengamos en ella.

Instalación

La instalación es tan sencilla como casi todas las instalaciones de aplicaciones Javascript:

<head>
	...
	<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
</head>

Una vez que incluimos la llamada al fichero JS que contiene el código necesario para convertir nuestro <textarea /> en un bonito editor.

<textarea name="editor1">&lt;p&gt;Initial value.&lt;/p&gt;</textarea>

Una vez definido el contenedor de nuestro editor, tendremos que indicar mediante Javascript que CKEditor haga uso de él.

<script type="text/javascript">
	window.onload = function()
	{
		CKEDITOR.replace( 'editor1' );
	};
</script>

Listo, si has seguido los pasos correctamente, ya deberías tener un bonito editor en lugar del soso <textarea />

Javascript API

Para los desarrolladores inquietos, nos han puesto a nuestra disposición una API en Javascript para extender funcionalidades e interactuar con el editor desde nuestros scripts.

Descargar y Demo

Puedes probarlo directamente desde la página oficial y descargarlo desde aqui.

Eduardo Sada, me avisa de que ya tiene lista una versión estable de Sexy Forms. Se trata de un script desarrollado como plugin de MooTools (está trabajando en la versión jQuery) con el que nos permite hacer formularios más estéticos sin perder la funcionalidad de los elementos del mismo.

(Ver Imagen)

Entre las ventajas que ofrece frente a scripts similares, nos encontramos mejoras estéticas como la posibilidad de usar templates y una integración perfecta en los principales navegadores.

Y quizás lo más importante de todo, sin perder la accesibilidad necesaria para que nuestro formulario pueda ser usado por cualquiera y como quiera.

Demo

Eduardo, nos deja una página de ejemplo para que veamos el resultado y descargar el script directamente desde allí.

Hoy, ha caido Google, y todos sus servicios, aunque parezca irreal e improbable,… ha pasado. Y el problema es que no solo han caido los servicios de Google Mail, Google Maps, … sinó que todas las páginas que usan sus servicios. Por poner un ejemplo, en el trabajo hemos estado unos minutos estresados mirando el por que nuestra aplicación no terminaba de cargar, y al darnos cuenta de que Google estaba caido hemos caido en el problema, y menudo problema.

El problema era que estamos llamando a Google Maps en <head /> de la aplicación, algo realmente lógico partiendo de que es lugar en el que meter la lógica de nuestra aplicación. Por desgracia, cuando el servicio está innaccesible o lento, esto produce un tiempo de espera considerablemente largo. Para ello, la solución es hacer un buen desarrollo que no dependa del Javascript de ese servicio y además, incluirlo en la parte inferior de la página, justo antes de </body>.

Con la llegada de servicios como Ajax Libraries, este problema se acentúa ya que estamos delegando el framework JS a Google, y si este cae, todo lo que tenemos montado para él, dejará de funcionar.

Importante recordar, que los scripts ajenos a la aplicación, osea ubicados en un servidor externo debería estar justo antes del cierre de <body> y así, nos ahorramos problemas de carga innecesarios como los de hoy.

<script type="text/javascript" src="mi-script-en-google.js"></script>
</body>

Posible solución a un problema así

Bueno, se me ocurre una solución sencilla para comprobar si el servició está disponible y en caso de no estarlo, ofrecer una alternativa.

var sc = document.createElement("script");
sc.type = "text/javascript";
// SRC de Google
sc.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.2/jquery.min.js?rand=' + Math.random();
var timer = setTimeout(function(){
   if (typeof jQuery == 'function') return;
        var sc = document.createElement("script");
        sc.type = "text/javascript";
        // SRC local
        sc.src = 'https://www.anieto2k.com/wp-content/themes/anieto2k08/js/jquery-1.2.6.min.js';
        document.getElementsByTagName("head")[0].appendChild(sc);
   // Tiempo en milisegundos que estimamos pueda tardar.
}, 200);

sc.onload = sc.onreadystatechange =  function(e){
    clearTimeout(timer);
}
document.getElementsByTagName("head")[0].appendChild(sc);

Sin duda, la mejor opción siempre es tenerlo alojado en tu servidor. Pero si por algún motivo esto no es posible, quizás te pueda ayudar.