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.

Google Chrome se convierte en el navegador más usado de Internet

21 May

+ 5

Sorprendente la evolución de Google Chrome, que en casi 4 años se ha convertir en el navegador más usado de Internet. Desbancando a Internet Explorer en una escalada épica.

Captura de pantalla 2012-05-21 a la(s) 22.35.05
(Ver Imagen)

Está claro que ponerle Google delante a cualquier producto ayuda, ya que esta versión de WebKit ha conseguido lo que Mozilla lleva soñando muchos años y nunca se ha acercado, ni por asomo, a Internet Explorer.

Lamentablemente creo que esto, hoy por hoy, no cambia nada, la mayoría de empresas tienen versiones de Internet Explorer que vieron extinguirse a los dinosaurios y hace que las aplicaciones actuales no evolucionen como nos gustaría que lo hicieran. En fin, estamos ante un hito importante, pero por el momento únicamente es solo eso, un hito.

Via

Actualización:

Hernan Roig me pasa un link, ya que al parecer hay problemas, los gerentes de Internet Explorer se niegan a aceptar estos datos y alegan el uso del sistema «prerendering» de Google Chrome que por detrás del usuario precarga ciertas rutas posibles para que el usuario no tenga que esperar tanto para su carga. En cierta medida, estos resultados estarían falseados si tenemos en cuenta esta capacidad del navegador, pero yo me pregunto… ¿el navegador no está pensado para mejorar la experiencia de usuario al navegar en la web? Creo que la gente de Microsoft debería empezar a hacer las cosas pensando así y menos en los números.

Gracias Hernan.

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?