Contenido

jQuery i18n, traduce tu página desde javascript

28 May

+ 0

jQuery i18n(), es una implementación de la idiomatización i18n de javascript portada a jQuery para facilitarnos la tarea de incluir dichas traducciones en nuestros elementos DOM. Dispone de una serie de funciones que nos ayudarán a disponer de etiquetas dinámicas que podrán ser parametrizadas desde nuestros scripts. [Descargar]

Opera Mobile Emulator, depura tus webs para dispotivos móviles

28 May

+ 5

Opera presenta Opera Mobile Emulator, una aplicación que descargas en tu PC para emular navegadores móviles y poder así depurar más cómodamente nuestras aplicaciones web.

emu-devices
(Ver Imagen)

Entre las opciones interesante que nos ofrece hay que destacar la conexión con Opera Dragonfly para depurar nuestras aplicaciones web.

emu-debugging
(Ver Imagen)

Simplemente, una genial herramienta para hacernos el trabajo más fácil! 😀

Detecta si estás online con HTML5

26 May

+ 2

Una de las nueva capacidades de la programación web es la capacidad de hacer que nuestras aplicaciones web puedan trabajar en modo offline, pero esto, nos obliga a controlar en todo momento si disponemos de conexión para volcar los cambios producidos, actualizar ciertos datos,…

navigator.onLine

El objeto navigator se modifica y añade esta nueva variable con el estado en formato boolean para conocer el estado de la conexión del usuario.

if(navigator.onLine){
alert('Online');
} else {
alert('Offline')
}

Así, podemos condicionar ciertas tareas que tendrán que realizarse exclusivamente en el navegador del usuario y otras que se encargarán de trabajar directamente con el servidor de aplicaciones.

Compatibilidad

Actualmente está disponible en la mayoría de navegadores modernos, al parecer, incluso IE7 dispone de esta capacidad.

Protocolo relativo y olvídate de los problemas entre HTTP y HTTPS

24 May

+ 9

El señor Tim Berners-Lee, considerado el padre de la web, comentaba hace unos años que si se hubiera tenido que pensar en ese momento rehacer internet hubiera eliminado las (//) de las URL’s que ahora conocemos. Probablemente en algún universo paralelo haya civilizaciones más avanzadas debido al tiempo ahorrado en ponerla 😀

Hemos de reconocer que están ahí y que aunque actualmente los navegadores actuales las incluyen automáticamente, las URL’s no serían lo mismo aunque probablemente nuestros trabajos como desarrolladores web serían más sencillos 😀

Si has tenido que trabajar con URL’s seguras y no seguras en aplicaciones que las compartan sabrás, ahora mismo, de que problema te quiero hablar. Exacto, del problema de gestión del protocolo de las URL’s en nuestro código.

Protocolo HTTP y HTTPS

El protocolo HTTP, el que todos conocemos nos permite conectarnos a URL’s de internet desde un cliente remoto, y las peticiones HTTPS, funcionan exactamente igual pero usando un certificado SSL para validar que la conexión entre el cliente y el servidor está encriptada.

Para más info, Wikipedia 😀

Los que hemos desarrollado aplicaciones en la que ha de haber partes seguras y parte que pueden no serlo, sabrán que cuando estás en HTTPS, todas las peticiones que lanza el cliente deben ser HTTPS. Sino lo son, el navegador nos suele avisar con un mensaje de que en un entorno seguro se está accediendo a contenido no seguro.

b_yui_https_warning
(Ver Imagen)

Esto ha provocado, durante mucho tiempo, tener que usar variables con el protocolo para detectarlo en todo momento y así adaptar el HTML resultante al protocolo seguro o no seguro de toda la página.

<?php
	$protocolo = strpos(strtolower($_SERVER['SERVER_PROTOCOL']),'https') === FALSE ? 'http' : 'https'
?>
<html>
	<head>
		<link rel="stylesheet" href="<?=$protocolo?>://midominio/micss.css" />
	</head>
	<body>
		<a href="<?=$protocolo?>://midominio/minuevoenlace">Me voy</a>
	</body>
</html>

Aunque hay técnicas más depuradas, para ilustrar el ejemplo nos vale, y ya podemos ver el trabajo que tenemos que hacer para controlar los protocolos de nuestras rutas. A simple vista ya podemos hacernos una idea de lo problemático que resulta atajar este problema en una aplicación medianamente compleja.

El protocolo relativo

Pues si ya has llegado por aquí, y no sabes que es el protocolo relativo, se te va a quedar una cara de tonto como la que se me quedó a mi hace unos días.

El protocolo relativo, es la capacidad que tienen los navegador web de definir automáticamente el protocolo de los elementos de una página en función del protocolo de entrada, osea que él navegador solo se encargaría automáticamente de gestionar esto por nosotros O.O!. Pero, ¿como!!?

Ya en 2010, Paul Irish publicaba ya alguna cosilla sobre el tema, aunque por aquel entonces, a mi por lo menos, se me pasó. Y el sistema es bastante lógico, ya que simplemente tendremos que usar una doble barra (//) y ya está  O.O!

Veamos un ejemplo:

<html>
	<head>
		<link rel="stylesheet" href="//midominio/micss.css" />
	</head>
	<body>
		<a href="//midominio/minuevoenlace">Me voy</a>
	</body>
</html>

Sencillo, límpio y lo más importante funciona!

¿Pero esto de donde viene?

Pues, aquí viene lo realmente sorprendente. Esto está definido el estándar RFC-1808 Sección 2.1, publicado en Junio del 1995 y en la RFC-3986 Sección 4.2 de Enero de ese mismo año. Osea, que hace casi 17 años que está definido! O.O!

¿Que navegadores lo interpretan?

Pues, teniendo en cuenta que hace 17 años que está vigente todos los navegadores actuales permiten usar esta nomenclatura, aunque aún debe de quedar algún IE4 o 5 que parecen no haber llegado a tiempo de implementarlo.

Actualización:Nacho Plaza me recuerda que esto mismo ya lo estuvimos hablando hace 2 años… me estoy haciendo mayor. Gracias Nacho!

wysihtml5, interesante editor HTML5 dependiente

23 May

+ 0

Ya conocemos perfectamente los editor WYSIWYG que nos permiten escribir código HTML más cómodamente y sobretodo podemos verlo en tiempo real, lo que produjo en su momento que tuvieran una gran acojida para diferentes aplicaciones.

En la era HTML5, WYSIHTML5 nos permite hacer exactamente lo mismo, pero en lenguaje HTML5, no es que nos devuelva HTML5 sinó que gracias a elementos HTML5 hacemos que este script permita ofrecer funcionalidades más fácilmente.

Veamos un ejemplo:

Cargamos el JS y las reglas de configuración:


<script src="/path-to-wysihtml5/parser_rules/advanced.js"></script>
<script src="/path-to-wysihtml5/dist/wysihtml5_0.3.0.min.js"></script>

Ver reglas disponibles por defecto o un ejemplo del advanced.js.

Creamos un contenedor

El contenedor deberá ser un textarea si queremos que el contenido sea usado para guardarlo, procesarlo o lo que se crea conveniente.


<form><textarea id="wysihtml5-textarea" placeholder="Enter your text ..." autofocus></textarea></form>

Creamos una toolbar con las opciones

Aquí es donde está lo interesante, ya que la toolbar no se autogenera gracias al Javascript sinó que es el javascript que en función de los elementos que se encuentra añade unas funcionalidades u otras.


<div id="wysihtml5-toolbar" style="display: none;">
  <a data-wysihtml5-command="bold">bold</a>
  <a data-wysihtml5-command="italic">italic</a>
  
  <!-- Some wysihtml5 commands require extra parameters -->
  <a data-wysihtml5-command="foreColor" data-wysihtml5-command-value="red">red</a>
  <a data-wysihtml5-command="foreColor" data-wysihtml5-command-value="green">green</a>
  <a data-wysihtml5-command="foreColor" data-wysihtml5-command-value="blue">blue</a>
  
  <!-- Some wysihtml5 commands like 'createLink' require extra paramaters specified by the user (eg. href) -->
  <a data-wysihtml5-command="createLink">insert link</a>
  <div data-wysihtml5-dialog="createLink" style="display: none;">
    <label>
      Link:
      <input data-wysihtml5-dialog-field="href" value="http://" class="text">
    </label>
    <a data-wysihtml5-dialog-action="save">OK</a> <a data-wysihtml5-dialog-action="cancel">Cancel</a>
  </div>
</div>

Indicamos que elemento será el contenedor, que elemento hará de toolbar y que reglas se han de usar para mapear funcionalides contra elementos.


<script>
var editor = new wysihtml5.Editor("wysihtml5-textarea", { // id of textarea element
  toolbar:      "wysihtml5-toolbar", // id of toolbar element
  parserRules:  wysihtml5ParserRules // defined in parser rules set 
});
</script>

Compatibilidad

Como era de esperar

  • Firefox 3.5+
  • Chrome
  • IE 8+
  • Safari 4+
  • Safari on iOS 5+
  • Opera 11+

Me gusta, sobretodo por la forma en la que está programado, haciendo que el Javascript sea HTML dependiente y no viceversa.

JavaScriptSQL, motor de base de datos comentamente en Javascript

21 May

+ 0

JSSQL es un motor de base de datos desarrollado enteramente en Javascript. Esta herramienta permite interpretar y ejecutar secuencias SQL en bases de datos offline que serán convertidas mediante una clase desarrollada en PHP para usarse con bases de datos relacionales (PostfreSQL, MySQL,…).

Una herramienta muy útil para trabajar de modo offline o suavizar el impacto de peticiones a los servidores de base de datos.
Entre las diferentes características de JSSQL estas son las más interesantes:

  • Permite consulta de datos online sin intervención con servidores web o de base de datos.
  • Flexible uso de la sintaxis SQL
  • Código javascript
  • Capacidad de definir ínidices para acelerar consultas.
  • Permite búsquedas te texto dentro de documentos indexados.
  • Herramienta (JSBD_Conversor) para crear bases de datos en Javascript usando basees de datos PostgreSQL y MySQL.
  • Mecanismos de depuración y ayudas al desarrollo.
  • Instalación sencilla y compatible con los principales navegadores.

Ejemplo

// Cargamos el fichero JS


// Cargamos el motor JSSQL
 var myJSSQL= new JSSQL();
 // Abrimos la base de datos
 if (!myJSSQL.Open('neptuno')) {
    // Mostramos los errores que se puedan producir.
    alert(myJSSQL.GetError());
 }
 
 // Consulta SQL
 var sql="select NombreCompania as comp, NombreContacto as cont, CargoContacto as cargo from clientes order by 3, 2 desc";
 
 // Ejecutamos la consulta
 var res=myJSSQL.Query(sql)

if(res===false){// Mostramos los errores que se produzcan
    alert( myJSSQL.GetError() );
} else {
    // pintamos los resultados.
	...
 }

Una solución muy interesante para llevar ciertos datos al cliente y así mitigar el trabajo de nuestros servidores de aplicaciones y base de datos.

jQuery.ascensor.js, plugin jQuery que lleva el scrollTo() a otro nivel

18 May

+ 5

jQuery.ascensor.js, es un plugin jQuery que nos permite convertir el plugin jQuery.scrollTo() en un ascensor 😀

Instalación

Lo primero que debemos tener en cuenta es que el plugin, obviamente, requiere jQuery y que además necesita de scrollTo() para funcionar, así que tendremos que cargarlos antes de llamar al plugin.

<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.scrollTo.js" type="text/javascript"></script> 
<script src="js/jquery.ascensor.js" type="text/javascript"></script>
<script src="js/myscript.js" type="text/javascript"></script>

Visión de arquitecto

Una vez cargado, debemos tener en cuenta nuestro HTML ya que necesitaremos ver nuestro código como si de un edificio de N plantas se tratara.


<div id="house">
        <div>
                <div id="piso1"></div><!-- Contenido del piso 1-->
        </div>
        <div> 
                <div id="piso2"></div><!-- Contenido del piso 2-->
        </div>
        <div>
                <div id="piso3"></div><!-- Contenido del piso 3-->
        </div>  
        <div>
                <div id="piso4"></div><!-- Contenido del piso 4-->
        </div>
        <div>
                <div id="piso5"></div><!-- Contenido del piso 5-->
        </div>
</div>

Y una vez ya definido el contenido en los diferentes pisos indicaremos al plugin ascensor() que le aplique el scroll dinámico que buscamos.

$('#house').ascensor();

Opciones y más opciones

Con lo anterior ya tendríamos funcionando una versión simple del uso de jQuery.ascensor(), pero aún podemos utilizar una gran cantidad de parámetros que nos permitirán personalizar completamente nuestras transiciones.


$('#house').ascensor({
                                        
        AscensorName:'house',
                //Es posible usar id's o clases (default:'maison')
        WindowsFocus:true,
                //Si empezamos en el primer piso(default:true)
        WindowsOn:'0',
                // Si empezamos en cualquier otro piso
        Direction:'y',
                //Dirección en la que va el "ascensor"
        NavigationDirection:'xy',
                //Lo que será la dirección de navegación(par défaut:'xy')
	Navig:true,
		//Nos permite añadir un sistema de navegación	
	Link:true,
		//Si necesitamos un link por piso hacia el siguiente piso
	PrevNext:true,
		//Botones prev/next
	KeyArrow:false,
		//Activamos o desactivamos las flechas	
	keySwitch:false,
		//Activamos o desactivamos la navegación por flechas.
	CSSstyles:true,
		// Si necesitamos un plugin CSS por defecto
	ReturnURL:true,
		//Si necesitamos un URL por páginca
	ReturnCode:true,
		//Nos ofrece id y class para navig/link/content  
	ChocolateAscensor:true,
		//Si necesitas estar en todos los pisos
	AscensorMap: '4|3',
	   //Define el tamaño del mapa
	ContentCoord:'1|1 & 2|2 & 1|2 & 3|4 & 1|3 & 3|1 & 2|3'	
		// Define las posiciones X y Y de cada piso dentro del mapa
});

Interesante herramienta para preparar presentaciones online.

SASS vs LESS, ¿cual es mejor?

18 May

+ 2

Hace unos días hablamos de SASS y de LESS, metalenguajes CSS que permiten añadir capacidades programáticas a un lenguaje de marcado, pero ¿cual es mejor? Los chicos de css-tricks se han hecho esta misma pregunta y aunque os anticipo que el ganador ha sido SASS, lo han detallado perfectamente. Os recomiendo que le echéis un vistazo si os interesa el tema.

dynamo.js, añade un curioso efecto a tu HTML con jQuery

16 May

+ 0

Dynamo.js es un plugin jQuery que nos permite añadir un curioso efecto a nuestros contenidos HTML. El efecto me recuerda al reloj de la película «Atrapado en el tiempo» de Bill Murray, ya que nos permite definir una serie de palabras que irán solapándose unas sobre las otras como si de el paso de minutos se tratara… no sé como explicarlo mejor, así que será mejor que lo veáis vosotros mismos 😀

//HTML
<p>I wish I could 
   <span class="dynamo" data-lines="modify,mutate,morph,switch">change</span>
the text here.</p>

// Javascript
$(function() {
  $('.dynamo').dynamo();
});

Además dispone de solo 4 atributos para personalizar el efecto y todos ellos los indicaremos en el elemento HTML mediante atributos data-* haciendo que este se programe a si mismo.

  • data-lines: Reemplazos separados por comas, el texto inicial no está incluido.
  • data-speed: Velocidad de la transición (default: 350ms)
  • data-delay: Retardo entre ciclos (default: 3000ms)
  • data-center: Centrar el texto en contenedor dynamo (default: false)

Sencillo, ¿verdad?

Node.js para yayodesarrolladores web

16 May

+ 5

Me considero yayodesarrollador web, no por que sea viejo sino por que soy de esa generación de desarrolladores que conocieron la web en su fase 1.0 y que formaron parte de la estandarización de la web 2.0. Soy un desarrollador web que se encuentra más cómodo desarrollando en Javascript «puro» que usando jQuery y que aún recuerda como hacer una petición Ajax «a pelo», usando el objeto XMLHTTPRequest y el odiado ActiveX para que IE no se queje.

De esa generación de desarrolladores que acababan de conocer Ajax y lo usaban para todo, hasta para lo que ahora te da vergüenza admitir, que descubrieron que los selectores CSS3 iban a revolucionar el Javascript que conocían y que vieron como Google Chrome, con su motor  de Javascript V8 entraba en el mercado para literalmente darle la vuelta.

Y aquí es donde entre Node.js, que está basado en el uso de V8 como motor de procesamiento de javascript, pero a diferencia de lo que habíamos visto en nuestros tiempo mozos, hace 10 años, esta vez se usa en el servidor… ¿!EN EL SERVIDOR!?, si si, como lo oyes, puedes programar en Javascript pero en el servidor…O.o.

La idea no es nueva, por allá en el 2008 aparecía Jaxer que intentaba hacer algo parecido, y poco más he leido después de él. Y lo que se consigue es acercar las maravillas de un lenguaje como Javascript, con capacidad de orientarse a eventos permitiendo programar de forma asíncrona fácilmente al servidor, todo ello por que este tipo de programación consigue unos resultados de rendimiento espectaculares al estar básicamente en estado latente esperando a que se ejecute el evento X o el evento Y.

Vale vale, pero ¿nos ponemos a ello?

Lo primero es instalarlo, para ello, lo descargamos de la página oficial y lo instalamos (doble click en Windows y en Macmake && make install en Linux). Una vez instalado ya podemos ponernos a tocar código que es lo que nos gusta!

// Cargamos el módulo HTTP
var http = require('http');

// Creamos un servidor HTTP que devolverá "Hola Mundo!" en cualquier petición
var server = http.createServer(function (request, response) {
  response.writeHead(200, {"Content-Type": "text/plain"});
  response.end("Hola Mundo!\n");
});

// Escuchamos el puerto 8000
server.listen(8000);

// Mostramos un mensaje en la terminal
console.log("Server running at http://127.0.0.1:8000/");

El típico «Hola Mundo» nos muestra ya por donde van a ir los tiros en cuenta al asincronismo que os comentaba. El objeto server, queda asociado al puerto 8000 que ejecutará el callback definido unas líneas por encima.

Ahora para ejecutar esto en tu máquina, tendrás que guardar este código dentro de un fichero .js para ser llamado por node.js de la siguiente forma.

node fichero.js

El resultado, en la consola que hemos ejecutado el comando debería parecerse a esto:

Captura de pantalla 2012-05-15 a la(s) 23.09.42
(Ver Imagen)

Y como la consola indica, nos dirigiremos al enlace http://127.0.0.1:8000/ y veremos el texto «Hola Mundo!«. Sencillo, rápido y funcional.

Módulo, módulos y más módulos

Parte del éxito de Node.js reside en la comodidad para trabajar con módulos, y la facilidad de incluirlos a tu proyecto, traído de otros lenguajes se adhiere a nuestros proyectos de forma tan eficiente y práctica que no da pereza generar nuevos y nuevo módulos. De ahí que la comunidad se haya puesto las pilas y haya generado implementaciones de casi todos los componentes que te puedas imaginar.

npm install package

El comando npm, se instala con Node.js y mediante esa sencilla sintaxis podemos añadir un módulo a nuestro proyecto o al repositorio global de node.js dejándolo disponible para todos los proyectos dentro de esa máquina (node install -g package).

package.json

Para hacernos aún la vida más fácil, podemos especificar el fichero package.json, en el que definiremos el nombre de nuestra aplicación y las dependencias que este necesita.

{
    "name": "application-name"
  , "version": "0.0.1"
  , "private": true
  , "dependencies": {
      "express": "2.5.8"
      , "stylus" : "0.27.0"
      , "coffee-script": "1.3.2"
      , "swig": "0.11.2"
  }
}

Luego, como si de magia se tratara solicitamos que se instalen todas las dependencias del proyecto.

npm install -d

Y automáticamente empiezan a descargar los paquetes y guardarlos en la carpeta node_modules/ del proyecto.

Captura de pantalla 2012-05-15 a la(s) 23.28.16
(Ver Imagen)

Simplemente eso, cargamos lo que necesitamos y lo empezamos a usar en nuestro proyecto, así de sencillo. Esto da lugar a que un proyecto node.js, incluya frameworks para casi cualquier cosa, para escribir HTML más rápido (jade), para hacer un Javascript más eficiente (CoffeeScript) o para que las CSS’s se comporten como un lenguaje de programación (Stylus), o como he dicho antes, para hacer casi cualquier cosa.

Incluso, proyectos que juntan estos y otros frameworks/módulos y definen una forma ágil y robusta de trabajar como ExpressJS o Meteor que merecen la pena tratar con más detalle en otra serie de posts.