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]

Participa, Hay 0 Comentarios. →

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! :D

Participa, Hay 5 Comentarios. →

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.

Participa, Hay 2 Comentarios. →

The Month Movie: Pitch Black

25 may

+ 2

A principios de año cree el grupo The Month Movie en Flickr, un grupo en el que elegimos una película que mediante una fotografía intentaremos representar durante ese mes. Este mes, Sergio Gardoki eligió Pitch Black (o Las crónicas de Riddick) como película a representar y este ha sido el resultado.

5/12: The Month Movie: Pitch Black
(Ver Imagen)

Este mes lo he pasado yo peor que los protagonistas de esta película. Primero la cámara murió, tuvo que pasar por el servicio de atención al cliente y lograron resucitarla, así que vuelve a estar entre nosotros, pero he estado una semana con el corazón en un puño y los ojos sobre una nueva 5D MK2 :P

Tambien he de decir que esta película me ha parecido especialmente dificil de representar, no estaba dispuesto a afeitarme la cabeza para la foto:D, y aprovechando la temática fantástica de la película he pensado en volverme loco con el Photoshop y aprovechar este acercamiento de Saturno que pudimos disfrutar el otro día :P

Para ello, he usado unas imágenes de otro collage de fotos sacadas por el Hubble de Jules Stoop y el suelo es de la playa de Palma de Mallorca con un Ojo de pez que me dejó Fran Lara para hacer esta toma justo en el atardecer para colocar el Sol en el punto donde está.

Participa, Hay 2 Comentarios. →

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 :D

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 :D

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 :D

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!

Participa, Hay 9 Comentarios. →

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.

Participa, Hay 0 Comentarios. →

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.

Participa, Hay 5 Comentarios. →

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.

Participa, Hay 0 Comentarios. →

10 útiles plugins para mejorar los comentarios de tu WordPress

21 may

+ 1

Si te resistes a usar herramientas como Facebook Connect, Disqus, OpenID o similares para gestionar los comentarios de tu WordPress siempre puedes ayudarte de plugins que mejoran la experiencia del usuario a un bajo costó de implantación.

  1. Comment Notifier: Añade la posibilidad de que el usuario reciba notificaciones de posteriores contestaciones a sus comentarios, este plugin me parece imprescindible en todo WordPress.
  2. Comment Emailer: Igual que el anterior pero más personalizable.
  3. Top Commentators Widget: Widget con un listado del top de usuarios que más comentan en tu WordPress, para los más competitivos! :D
  4. Simple Facebook Connect: Añade un login rápido y práctico con Facebook en tu formulario de comentarios. Útil, pero para aprovecharlo con más herramientas sociales con Facebook.
  5. Moojax Comment Posting: Ajax en tus comentarios con una básica verificación visual para que el usuario no tenga que recargar toda la página.
  6. Suscribe to Comments: Similar al primero, nos permite que el usuario se suscriba a los cambios producidos en un post concreto.
  7. CommentLuv WordPress: Interesante herramienta que permite devolver el favor de aportar un comentario a tu wordpress añadiendo información del usuario que lo ha hecho.
  8. Comment Sorter: Como su nombre indica, permite cambiar el orden de visualización de los comentarios de tu WordPress.
  9. Custom Smilies: Las caritas molan, pero en el Whatsapp. Si eres de los que te gustan estas caritas o tu blog es tan informal como para usarlas este plugin es para ti :D
  10. Get Recent Comments: Últimos comentarios en formato Widget para añadir a tu Sidebar, interesante para que tus visitas vean que hay gente comentando por otras entradas.

Si necesitas algo más concreto, o diferente tienes más de 1000 plugins para mejorar los comentarios de tu WordPress en el repositorio oficial.

Via

Participa, Hay 1 Comentario. →

TwitterWeek – 2012-05-20

20 may

+ 0

En mi twitter he publicado estos enlaces que creo os pueden interesar.

Participa, Hay 0 Comentarios. →