CodeMirror: Editar código desde el navegador

CodeMirror es una biblioteca JavaScript que pueden convertir cualquier elemento en una página web en una interfaz de edición de código.

Es soportada por  la mayoría de los lenguajes de programación web (HTML, CSS, PHP, Python, Ruby, Java, C #, SQL, XML, etc) y trabaja a nivel de cross-browser.

Hay muchas opciones que ofrece como permitir deshacer, ir a números de línea, el comportamiento de «TAB» y «ENTRAR» comandos.

Además, con la ayuda de su API, el editor puede ser totalmente manipulado. En resumen, una maravilla para poder inspeccionar elementos y sus comportamientos desde el mismo navegador y ver los cambios insitu.

Requisitos: No hay requisitos
Compatibilidad: los principales navegadores
Página web: http://codemirror.net/
Demo: http://codemirror.net/jstest.html

jQuery tooltips – Bubble popup

jQuery Bubble pop-ups es un plugin para el framework JS más popular, que te ayuda en la creación de tooltips elegantes, que pueden ser controlados fácilmente.

La información sobre los tooltips de jQuery Bubble pop-ups se mostrar / ocultar con animaciones de desvanecimiento y con la peculiaridad de que cualquier contenido HTML se pueden visualizar en su interior.

Los tooltips se pueden colocar sobre cualquier elemento de nuestra página y conocer el estado del mismo. La descripción detallada del diseño permite que se pueda personalizar fácilmente con la ayuda de un sistema de plantillas. Si te surgen dudas, descuida el plugin está muy bien documentado.

Requisitos: jQuery
Compatibilidad: Todos los navegadores de este siglo.
Página web: http://www.vegabit.com/jquery_bubble_popup_v2/
Demo: http://www.vegabit.com/Examples/different-elements.html

Slides – jQuery Slideshow

Slides es un plugin de jQuery que puede convertir un conjunto de imágenes / fotografías en una magnifica presentación de diapositivas de forma rápida y ágil.

 

Slides - jQuery muestra nuestras fotografías de esta manera

El plugin tiene muchas opciones integradas como, la reproducción automática en bucle, atenuar o deslizar los efectos de transición, la precarga de la imagen, auto genera paginación y mucho más.

Una característica interesante es que la transición es muy suave, incluso cuando llega a la última diapositiva el efecto empleado para desplazarse directamente al primer elemento es muy agradable.

Requisitos: jQuery
Compatibilidad: todos los navegadores
Página web: http://slidesjs.com/

nude.js – Detectar desnudez en fotos con js

nude.js es una libreria de JavaScript que usa HTML canvas para detectar si una imagen contiene un desnudo o no. Dicho así de golpe, puede parecer una locura, pero la verdad es que el merito del algoritmo empleado por esta libreria, que se carga de lado del cliente, redise en las innumerables pruebas de escaneo realizadas antes de que diera sus primeros pasos por la red.

El invento es tan prometedor, que hasta ofrece al usuario final la posibilidad de corregir falsos positivos. En fin, para aquellos que trabajamos con comunidades que mueven muchisimas imagenes, este script nos va de perlas para filtrar de entrada la posible publicación de fotografías innapropiadas.

Requisitos: No tiene ninguno
Compatibilidad: Si tú navegador es de este siglo = CERO.
Página web: http://www.patrick-wied.at/static/nudejs/
Demo: http://www.patrick-wied.at/static/nudejs/demo/
Descarga: https://github.com/pa7/nude.js

SEO: Reducir tiempo de carga

Uno de los factores a tener en cuenta a la hora de optimizar nuestros proyectos, es sin lugar a dudas mejorar la carga de los contenidos para que no tan solo los usuarios disfruten de una navegación más limpia y rápida, sino que los spiders de los motores de busqueda puedan leer nuestros contenidos sin demoras excesivas en la carga de los mismos.

Para conseguir esto, tenemos que atacar los elementos retrasan en sobre exceso la carga de nuestro proyecto, haciendo que elementos como los siguientes, cumplan sus cometidos pero reduciendo su tiempo de carga realizando acciones como las siguientes

1. Unificar JavaScripts externos
2. Optimizar  y escalar imagenes
3. Reducir peso de CSS – Hojas de estilo

Sobre este último punto me gustaría destacar la clase CSStacker, desarrollada en PHP por Camilo Sperberg, que nos facilita muchisimo la tarea de optimizar y comprimir nuestras hojas de estilo, simplemente incorporando dos líneas en nuestro código y sin necesidad de efectuar modificaciones en nuestros ficheros CSS, la clase se encarga de:

• Eliminar saltos de línea
• Optimizar el código de los colores
• Elimina espacios en blanco innecesarios
• Genera un archivo y manteniene nuestro CSS intacto para efectuar modificaciones.
• Evita, si lo deseamos, la cache del fichero generado

Y todo de forma completamente gratuita… La verdad, es que encontrarse joyas como esta no tiene precio.

Fuente: unreal4u
Url: http://blog.unreal4u.com/2010/01/nueva-class-publicada-csstacker/