Contenido

UKI.js, frameworks Javascript sencillo para hacer aplicaciones complejas

30 dic

+ 1

UKI.js, es un framework Javascript con el que hacer interfaces web complejos se convierte en una tarea mucho más sencilla de lo que creemos.

Hace poco nos mostraban una replica de Google Wave desarrollado en tan solo 100 líneas de código.

El framework, de tan solo 28kb de peso (versión comprimida) nos ofrece la posibilidad de generar aplicaciones similares a las de escritorio, para ello nos ofrece elementos como Slider, List y SplitPane.

uki({
 view: "Button", text: "Hello world!",
 rect: "120 80 180 24"
}).attachTo( document.getElementById("test") );

uki("Button[text^=Hello]").click(
 function() { alert(this.text()); }
);

Como vemos en el pequeño script de demostración, nos muestra un Hola Mundo en uki,js, usando un botón como elemento que ejecutará el alert().

[Descargar]

Digging into WordPress, libro disponible

30 dic

+ 1

Juan Andrés Milleiro me avisa via Twitter de que Digging into WordPress ya está disponible para comprar. Se trata de un libro con todo lo que puedes llegar a usar con WordPress recogido y muy bien explicado.

digging-into-wordpress
(Ver Imagen)

En el podremos ver, desde como configurar una instalación de WordPress hasta como optimizar la base de datos, pasando por conocer la anatomía un theme o como extender la funcionalidad de WordPress… basicamente todo lo que hemos ido viendo a lo largo de los años aquí en un libro de más de 400 páginas a todo color.

digging-into-wordpress-anatomy-theme
(Ver Imagen)
digging-into-wordpress-commonly-used
(Ver Imagen)
digging-into-wordpress-loop
(Ver Imagen)

Existen dos modalidades que nos permite adquirir el libro en formato PDF o en formato impresion (además incluye la versión PDF), dependiendo de cual elijamos el precio variará.

  • Versión PDF ($27)
  • Versión Impresa ($67)

Via

WordPress 2.9.1 RC1

30 dic

+ 3

Como ya avanzamos WordPress 2.9 iba a recibir una actualización que corrigiera una serie de fallos detectados. Esta versión, la RC1, nos acerca a la versión 2.9.1.[Descargar]

9 formas de ofuscar emails a prueba

28 dic

+ 15

Poner email en texto plano en una página puede llegar a ser un verdadero problema, ya que hay bots que escanean nuestras páginas buscándolas y almacenándolas junto a otras para posteriormente usarlas para enviar SPAM a esas cuentas. Evitar esto no siempre es sencillo, ya que muchos pueden permitirse el lujo de eliminar los emails, otros necesitan ponerlos visibles al público. Por eso, los desarrolladores encuentran formas ingeniosas para sortear este obstáculo.

¿Pero cuanto de efectivo tiene cada una de las formas posibles?

obfuscation_methods
(Ver Imagen)

Como vemos en la imagen, técnicas como construir la dirección con Javascript o introducir comentarios entre los tags no solucionan el problema aunque lo minimizan. Según las pruebas que Tillate.com realizó hace ya más de 1 año, estas son las 3 formas más seguras de usar emails en nuestras páginas.

Cambiar la dirección mediante CSS

Para esta ténica basamos nuestra protección en la propiedad direction del CSS que nos permite especificar la dirección del texto que el usuario verá, como los bots no suelen interpretar el CSS verán el texto en el formato original.

<span>moc.olpmeje@liame</span>
// CSS
span.direction {
 direction:rtl;
 unicode-bidi:bidi-override;
}

Usando display:none de CSS

Otra alternativa, tambien pasando por CSS sería la usar display:none, para colar un texto en nuestra dirección ocultándolo al usuario. De esta forma el email encontrado por el bot no será válido.

<style type="text/css">
  p span.displaynone { display:none; }
</style>
<p>silvanfoobar8@<span class=”displaynone”>null</span>tilllate.com</p>

Encriptación ROT13

Usando el método de encriptación ROT13 y mediante Javascript desencriptamos la dirección y se la mostramos al usuario. Previamente debemos haber encriptado la dirección con alguna herramienta de encriptación (por ejemplo esta) o rotarla directamente desde PHP con str_rot13().

<script type="text/javascript">
document.write("<n uers=\"znvygb:fvyinasbbone10@gvyyyngr.pbz\" ery=\"absbyybj\">".replace(/[a-zA-Z]/g, function(c){return String.fromCharCode((c<="Z"?90:122)>=(c=c.charCodeAt(0)+13)?c:c-26);}));
</script>silvanfoobar’s Mail</a>

Es cuestión de tiempo que los bots, cada vez más inteligentes, puedan con ellas, pero por el momento es lo mejor que tenemos sin tener que reccurrir a incluir una imágen con nuestro email (que también es muy efectivo). Las 3 técnicas afectarán a la accesibilidad de la página.

Mozilla se la devuelve a Google incluyendo V8 en Firefox 3.7

28 dic

+ 8

Este artículo ha sido la inocentada del 28 de Diciembre de 2009. Siento las molestias que haya podido originar.

Cuando Google anunció Google Chorme el mundo se preguntó por el apoyo que Mozilla recibía para desarrollar su navegador (Firefox) y el significado que tenía la aparición de Google Chrome en la batalla contra Internet Explorer.

Sin duda, este fue el detonante de la tensa situación en la que están inmersas las dos compañías de ahí que Asa Dotzler recomendara usar Bing en lugar de Google, tras las desafortunadas declaraciónes de Eric Schmidt (CEO de Google) en las que decía básicamente que “…el que quiere ocultar sus búsquedas es por que hizo algo malo…“.

Ahora Mozilla nos sorprende con la decisión de integrar V8 en la próxima versión de Firefox, algo que a los desarrolladores web nos ha sorprendido gratamente. Al ser un proyecto open source, muy ligado a la filosofía de Firefox, han tomado la decisión trabajar en el proyecto TraceMonkey (motor de Javascript de Firefox) y desvincularlo de Firefox hasta que este ofrezca unos resultados dignos de competir con V8, mientras tanto, usarán V8 como motor de render de Javascript en el propio Firefox.

firefox-3.7-v8
(Ver Imagen)

Como podemos ver, las gráficas son realmente sorprendentes, ya que al integrar el motor V8 con Gecko han conseguido incrementar la velocidad general del navegador en un 15% sobre la velocidad ofrecida por Chrome (segun SunSpider) y un 6% según Dromaeo. Esto pinta bien, y seguramente en breve podremos testearlo nosotros mismo cuando publiquen la primera alpha de la siguiente versión de Firefox.

Reducisaurus, reduciendo tus CSS y JS remotamente

27 dic

+ 4

Reducisaurus es un servicio desarrollado sobre App Engine y basado en YUI Compressor que nos permite comprimir nuestros y servir nuestros ficheros CSS y JS.

<script src="http://reducisaurus.appspot.com/js?file1=...&url1=...&max-age=604800"></script>
<link rel="stylesheet" href="http://reducisaurus.appspot.com/css?file1=...&url1=...&max-age=604800"></script>

Es posible enviar múltiples ficheros por GET o POST mediante los parámetros fileX para pasar el contenido del fichero o mediante urlX para cargar el fichero remotamente. Si lo necesitamos podemos usar file y url en la misma llamada.

Además dispone de un parámetro extra que nos permite especificar el tiempo de caché (&max-age=XXX) que deseamos que esté disponible nuestro fichero, por defecto tenemos 600 segundos. O desactivar la caché (&expire_urls=0)

Lo mejor del blog en 2009

25 dic

+ 1

Parece mentira pero ya ha pasado un año, 2009 se nos va y nos ha dejado cosillas interesantes que podemos catalogar por meses.

Enero

  1. jsCron, portando Cron a Javascript
  2. Interesante forma de mejorar los comentarios con jQuery
  3. La página más visitada de aNieto2k (opensearch.php)
  4. Lanzamiento de jQuery 1.3
  5. Selectores CSS y frameworks actuales
  6. Divide formularios en pasos con jQuery
  7. Mini detección de Internet Explorer en Javascript
  8. Minimizando al máximo la detección del navegador
  9. Más…

Febrero

  1. No detectes el navegador, detecta las funcionalidades
  2. HTML5 llega al iPhone
  3. Usando Shortcodes como profesionales
  4. Google Latitude, el jueguete del día
  5. Evalua el nivel de estudios para poder leer tu web
  6. rel=”canonical”, lo último para combatir el contenido duplicado
  7. Primeras imagenes de Google Chrome para Mac Os X
  8. Programación Orientada a Objetos en Javascript
  9. Rendimiento de las técnicas de POO en Javascript
  10. jClass2k, define Class con javascript
  11. NOIE6Day, 18 de octubre día sin Internet Explorer 6
  12. Más..

Marzo

  1. El arte de lanzar errores en Javascript
  2. El contenido de tu WordPress debería ser móvil
  3. input type=”file” para ficheros múltiples por fin en versión nativa
  4. TinyTable, 2.5kb para unas tablas profesionales
  5. Mejorando rendimientos de las técnicas de POO en Javascript
  6. Detección de caras en Javascript con canvas
  7. Usando la caché interna de WordPress
  8. Confirmado: Internet Explorer 8 hoy, apartir de las 18:00
  9. Cargando javascript asincronamiente
  10. Internet Explorer 8, primeros impresiones técnicas
  11. Carga asíncrona de grandes cantidades de dátos con Ajax
  12. Dojo es el framework Javascript más rápido
  13. Más…

Abril

  1. Optimiza la carga de imagenes de tus aplicaciones web
  2. CSS Naked Day (9 de Abril del 2009
  3. Actualiza el código de tu Google Analytics
  4. Internet Explorer 8 como actualización automática para finales de Abril
  5. ¿px, em, %, pt, o palabras clave?¿Como definimos tamaños de fuentes?
  6. O3D API, crea aplicaciones 3D en tu navegador
  7. Introducción a los W3C Widgets
  8. Adios my-hacks.php, Adios!!
  9. Instala TODAS las versiones de Internet Explorer en tu PC
  10. Más…

Mayo

  1. Desarrollando para el HTC Magic (Android)
  2. Coloreando el código de nuestros posts
  3. wp_insert_post(), la insercción de posts en WordPress
  4. jQuery vs MooTools, ¿cual es mejor?
  5. Impresionantes técnicas CSS3 y tutoriales para conseguirlas
  6. Sexy Forms, el bueno, bonito y barato de los scripts para formularios
  7. V8 y SquirrellFish son realmente rápidos
  8. Todo lo que necesitas saber sobre los frameworks de themes de WordPress
  9. HTML5 vs HTML4, explicación gráfica
  10. Google apuesta por el HTML5 y lo hace a lo grande
  11. Más…

Junio

  1. Opera 10 beta ya ha visto la luz
  2. ¿Por que la gente no usa Opera?
  3. Creando Javascript Accesible
  4. Interesante curiosidad javascript
  5. Comparación de cálidad entre Ogg/Theora+Vorbis y Youtube h264
  6. Consumo de memoria de los navegadores modernos
  7. 10 shortcodes para hacerte la vida más fácil con WordPress
  8. El elemento video del HTML5
  9. Lanzado Firefox 3.5!
  10. Propuesta de subtítulos para el tag video en HTML5
  11. Más…

Julio

  1. Gazelle y Google Chrome OS, los SO del futuro para los amantes de la red
  2. Glow, otra librería javascript
  3. El elemento audio del HTML5
  4. Youtube se une contra Internet Explorer 6
  5. Mozilla Firefox 3.7, maquetas del nuevo interface
  6. WordPress Theme Frameworks, SandBox fué solo el principio
  7. Crea miniaturas con la propiedad clip de CSS
  8. La mejora manera de cargar javascript
  9. Más…

Agosto

  1. Google Wave, primeras impresiones
  2. Mozilla Firefox 3.6 Alpha 1: Lo que nos importa a los desarrolladores
  3. Navegadores modernos: ¿para que tanta velocidad?
  4. File API: La W3C tiene en cuenta a los ficheros
  5. El tag HTML5 dialog
  6. WordPress 2.9 con papelera de reciclaje
  7. Creando un querySelector() para IE tan rápido como el nativo
  8. Más…

Septiembre

  1. Cacheando contenido con PHP
  2. Minimiza y ordena tus CSS
  3. Reduce el consumo de memoria de tu WordPress
  4. HTML5: Expresiones regulares como filtros de inputs
  5. Adapta tu WordPress a la tecnología móvil
  6. Diferentes formas de optimizar el consumo de memoria de WordPress a prueba
  7. Nueva funcionalidad de WordPress 2.9 en la edición de imágenes
  8. Cachea cualquier cosa con Javascript
  9. Aplicaciones Javascript escalables
  10. Permisos y capacidades en WordPress
  11. Más…

Octubre

  1. Localización en Javascript
  2. Simple sistema de log para nuestro Javascript
  3. Y tenemos Google Wave…vale, ¿y que?
  4. Emprise Javascript Chart, gráficas profesionales en Javascript
  5. Gestiona la orientación con la nueva API de Firefox 3.6
  6. Diferencias CSS entre Internet Explorer 6,7 y 8
  7. Acelerándo la carga de Javascript con eval()
  8. Cuidando la base de datos de nuestro WordPress
  9. Mu Connect, librería Javascript para conectar con Facebook
  10. Más…

Noviembre

  1. Another World JS
  2. Wp-Answers, crea una comunidad de preguntas y respuestas con WordPress
  3. Rendimiento extremo de Javascript
  4. Preparándonos para la llegada de WordPress 2.9
  5. Detecta si una fuente está disponible desde Javascript
  6. IE9: Una vista al futuro de Internet Explorer
  7. 14 de Noviembre del 2009, un dia para recordar
  8. LABjs, cargando javascript más rápidamente
  9. Más…

Diciembre

  1. El src de una imágen puede cargarse tu página
  2. W3C Capture API, ampliando los periféricos de entrada en la web
  3. Las Meninas en 3D gracias a CSS
  4. Drag & Drop + File API + XMLHttpRequest = El futuro de la subida de ficheros
  5. Añade un traductor en 52 idiomas a tu página
  6. jpegcam, adelántate al W3C Capture API
  7. corMVC, modelo MVC basado en jQuery
  8. Opera Carakan le planta cara a Google V8
  9. Más…

HTML5 video con problemas en todos los navegadores

24 dic

+ 4

Hace ya un tiempo que vimos que el nuevo HTML5 nos ofrecía un nuevo tag HTML destinado al contenido multimedia, concretamente para los vídeos. Este tag, aparece para reemplazar a Flash como reproductor de video y además nos permitirá que el navegador gestione el vídeo directamente. Pero al parecer, las implementaciones actuales no funcionan todo lo bien que deberían.

Como todos sabemos, Internet Explorer no lo soporta, algo que no nos sorprende pero nos fastidia. Por otro lado, el tag dispone de un atributo que especifica que el vídeo debe autodescargarse a modo de buffer, este atributo no es tratado por todos los navegadores de igual forma, Google Chrome y Safari si que lo soportan pero empiezan a descargar los videos ignorando la inclusión del atributo en cambio, Firefox si que detecta este atributo y lo tiene en cuenta para auto-iniciar la descarga.

<video controls autobuffer>
<source type="video/mp4" src="http://videos.mozilla.org/serv/blizzard/video-brownbag/video-codec-discussion.m4v"/>
<source type="video/ogg" src="http://videos.mozilla.org/serv/blizzard/video-brownbag/video-codec-discussion.ogv"/>
</video>

Como podemos intuir, el problema llega en forma de tiempo de carga innecesario de vídeos que posiblemente no queramos ver.

Al parecer el problema radica en la especificación de la W3C que especifica que el atributo puede ser ignorado por completo, algo que no debería alarmarnos ya que aún se trata de borrador en el que están trabajando y mejorando.

Opera Carakan le planta cara a Google V8

24 dic

+ 8

Google Chrome dispone del motor Javascript más rápido de todos los navegadores actuales, y por ese motivo es el rival a batir por lo demás navegadores. Primero lo intentó TraceMonkey de Mozilla, al que dejó aparcado a un lado a la primera de cambio, después llegó SquirrelFish Extreme y le mostró que estaban cerca, pero no lo suficiente.

En este punto, Google actualizó V8, haciendo un 30% más rápido aún… haciendo que los otros motores fueran relegados a un segundo plano.

Ahora, Opera Carakan llega a la batalla pegando fuerte, pero ¿lo suficiente?

unbenannt_4UQ04S
(Ver Imagen)

Por poco!, Opera Carakan ha llegado (siendo aún una versión pre-alpha) a rozar los tiempos de SunSpider de Google V8. Aunque V8 es aún el motor Javascript más rápido pero poco a poco le van apretando las tuercas.

El nuevo Opera 10.5 comienza a asomar la nariz

24 dic

+ 3

En Opera no paran y una muestra de ello es la versión 10.5 pre-alpha que Opera acaba de publicar. Una versión, que se acerca más a los nuevos estándares web.

windows7_tabs_collapsed
(Ver Imagen)

Novedades

Entre las novedades con las que nos encontramos en la pre-alpha, ya podemos destacar las siguientes.

Carakan

Carakan es el nombre que recibe el nuevo motor Javascript que Opera incluye en sus últimas versiones, hasta 7 veces más rápido que Futhark (nombre del motor JS de Opera 10.10) sobre SunSpider.

carakan
(Ver Imagen)

Presto 2.5

El render del navegador se actualiza y nos permite utilizar:

  • border-radius, el estándar CSS3 que permite mostrar bordes redondeados en nuestros elementos.
  • Transiciones y transformaciones CSS3, posibilidad de animar nuestros elementos desde CSS
  • HTML5 Storage, almacemiento DOM persistente en nuestro navegador (Cookies avanzadas)

Vega

Se trata de una nueva librería de gráficos incluida en esta última versión, actualmente está basada en software pero es posible acelerarla por hardware aunque no planean hacerlo durante todo 2010. El motivo de esta decisión es que los resultados obtenidos actualmente son realmente sorprendentes.

Vega
(Ver Imagen)

Otras novedades

Además de estas grandes novedades, esta nueva versión nos ofrece:

  • Navegación privada (modo pr0n)
  • Mejor integración con Windows 7 y Snow Leopard
  • Nuevo sistema de alertas no modales, nos permitirá cambiar de pestañas pese a los alerts abiertos.
  • Mejoras en los campos de búsqueda y de dirección
  • Y muchas cosas más…