Posts etiquetados ‘JavaScript’
FeedEk: Plugin jQuery para mostrar RSS/Atom
FeedEk es un plugin jQuery que nos permite mostrar contenido RSS y Atom en nuestra Web, de forma bastante sencilla, permitiéndonos configurar la url desde donde queremos traer el contenido, cantidad de artículos a mostrar, fecha, entre otros.
Uso:
1. Incluye la librería jQuery y FeedEk en la etuiqueta <head> de tu sitio.
2. Agrega un div en el lugar donde mostraras el widget
3. Agrega el código Javascript que traerá la información del sitio externo.
Cambias en FeedUrl por la url de donde quieres traer el contenido.
Opciones:
FeedUrl: Url desde donde traes el contenido (Requerido).
MaxCount: Número de items (Por defecto 5).
ShowDesc: Si quieres mostrar la descripción (Por defecto true) .
ShowPubDate: Si quieres mostrar fecha de publicación (Por defecto true).
Ideal si quieres agregar un widget con contenido interesante de terceros en tu Web.
Enlaces:
Sitio | FeedEk
Descarga | FeedEk plugin
Demo | FeedkEk
Vía | web resources depot
MotionCAPTCHA: Dibuja figuras para evitar el spam jQuery
Cuando estamos involucrados en proyectos donde recojemos datos de nuestros visitantes, siempre estamos expuestos al spam, es por esta razón que salen los sistemas de captcha, aquellas imagenes distorcionadas que debemos escribir adecuadamente para que el formulario pueda ser enviado correctamente.
“MotionCAPTCHA” es un plugin captcha de jQuery basado en la etiqueta Canvas de HTML5, y que nos brinda una manera diferente de validar la identidad humana a la hora de llenar los formularios, este nos provee con un cuadro y una figura la cual debemos dibujar con el mouse para poder validarnos y enviar la información.
Actualmente esta en etapa de prueba, lo cual lo hace vulnerable ya que el código solo es validado del lado del cliente, en su próximo lanzamiento se espera tener validación del lado del servidor, así como se espera mejorar el soporte en más navegadores.
Aca tienes un Demo para que te hagas a la idea de su funcionamiento, que sin duda es interesante.
Enlace: MotionCAPTCHA (Sitio oficial)
Crea imágenes con marca de agua usando HTML canvas y Javascript
Watermark.js es una interesante librería en Javascript, que permite crear marcas de agua sobre imágenes, lo interesante de esta librería es que la imagen que usas no necesariamente tiene que ser PNG o GIF, también puede ser JPG.
Esta librería es Open Source y en su sitio encuentras la documentación necesaria para que la utilices, así como también encontraras demos usando códigos QR como marca de agua en la imagen
Como usarlo:
- Llama “watermark.js” antes de la etiqueta body de tu documento HTML.
- “className” la clase en los elementos donde usará una marca de agua. (Opcional) Por defecto: “watermark”.
- “position”: “top-left”|”top-right”|”bottom-right”|”bottom-left” (Opcional) Por defecto: “bottom-right”.
- “watermark” un elemento img que representa la marca de agua.
- “Path” la ruta a la imagen.
- “opacity” Opacidad 0-100 Por defecto: 50
Con estos pasos ya tienes tus marcas de agua sobre tus imágenes usando watermarks.js.
Enlace: Watermarks.js
Gury: Librería para HTML5 canvas
Gury es una interesante librería para el uso de la API de HTML5 canvas de forma sencilla, esta esta basada en JavaScript y se centra en la implementación de aplicaciones basadas en canvas con pocas lineas de código.
Al igual que jQuery han querido que su uso sea sencillo, así que puedes iniciar a desarrollar tus aplicaciones hoy mismo, incluso sino cuentas con experiencia en la API de HTML5 canvas, también su funcionamiento es similar a jQuery, ya que te permite lograr tus aplicaciones mediante el uso de una interfase basada en encadenamiento.
Con una simple expresión encadenada puedes crear una etiqueta canvas, redimensionarla y aplicarle estilo, agregar objetos renderizables, animar estos objetos, y ubicarlos en cualquier parte de tu página.
Gury cuenta con una amplia documentación, la cual presenta ejemplos bastante claros de su uso y esta muy bien estructurada en un paso a paso.
Enlace: Gury (Sitio oficial)
Mooplay: Construye tu propio reproductor de vídeo en HTML5
Mooplay es una serie de controles sobre un elemento de vídeo en HML5, con los cuales podrás construir y ajustar tu propio reproductor de vídeo.
Las herramientas que incluye son:
- control play / pause
- botones para moverse dentro del vídeo (rewind & fast forward)
- barra de progreso interactiva
- barra de carga
- control deslizante de volumen y silenciado
- subtitulos cargados a través de una petición ajax y sincronizados con el vídeo. Formatos soportados SubRip (.srt) y SubViewer (.sub)
- vista pantalla completa
- tiempo actual y transcurrido
Mooplay esta desarrollado usando el Framework JavaScript Mootools.
Gracias al Kinect, se puede controlar el navegador web con el movimiento de los brazos
Definitivamente las aplicaciones con el kinect jaqueado no se hacen esperar. Ahora se trata de unos chicos del MIT que han logrado desarrollar una aplicación para controlar el navegador, con sólo el movimiento de los brazos.
Se trata de DepthJS, que es una extensión para el navegador, que permite a cualquier página web interactuar con el Kinect, a través de Javascript.
Enlace: DepthJS (Vía Genbeta)
Jo: Framework para aplicaciones móviles en HTML5
Jo es un Framework JavaScript que permite desarrollar aplicaciones para móviles basadas en HTML5. Gracias a su pequeño tamaño de 8KB, es excelente para correr en navegadores de dispositivos móviles, Jo originalmente fue pensado como un GUI (Interfaz gráfica de usuario) y una capa de datos en la parte superior de PhoneGap.
Otra característica buena es que Jo es Open Source que se distribuye bajo una licencia OpenBSD y no requiere dependencias.
Boomerang: Analiza el redimiento de un sitio Web en el lado del cliente
Boomerang es una pieza de código JavaScript, que puedes añadir a un sitio Web, que le permitirá medir el rendimiento del sitio desde el punto de vista del usuario final. Boomerang envía los datos de vuelta al servidor para un posterior análisis. Gracias a este script podrás conocer exactamente que tan rápido piensan tus visitantes que es tu sitio Web.
Boomerang nos permite medir la demora de carga de un contenido dinámicamente, el ancho de banda, latencia HTTP y DNS, entre otros parámetros.
Otra observación a tener en cuenta es que Boomerang es opensource.
Muchas veces nos centramos en la optimizacíon del lado del servidor, pero nos olvidamos de otros aspectos que son más directos en el lado del cliente, así que sin lugar a duda este script te ayudará en la optimización de ambas partes.
Enlace: Boomerang
Enlace: Measures Performance of Websites From End User’s View (Vía WebAppers)
Descarga: zip o Tarball, código fuente
Galactic Plunder: Juego hecho con HTML5 y Javascript
Galactic Plunder es un juego que ha sido escrito en Javascript, utilizando la funcionalidad Canvas y Audio en HTML5.
No es necesario Flash ni plugins de Java para jugar Galactic Plunder y es compatible con navegadores como Firefox, Chrome y Opera.
Por el momento, solo se encuentra el primer nivel completo, y el segundo está en desarrollo. Todo el código fuentes está bajo licencia abierta, se puede reutilizar libremente para cualquier fin y no te olvides de dar los créditos a su autor DougX.Net.
De acuerdo al autor, este juego sólo es una prueba para demostrar que un juego de disparos, puede ser hecho sin el uso de Flash.
Para ir al juego puedes dar click aquí.
Vía: Slashdot
Quake II corriendo en el navegador gracias a HTML5
Si Google por un lado trabaja en la integración de Flash a su navegador, por otro lado se empeña en llevar la experiencia de los juegos al iPad, con la ayuda de HTML5.
Para tener los juegos en linea es necesario la ayuda de ciertos plugins como Flash o Java, pero los ingenieros del equipo de Google Web Toolkit (GWT), demostraron el potencial de HTML5, llevando el clásico juego Quake II al navegador con la ayuda de Google Web Toolkit para hacer una compilación en JavaScript.
En el vídeo más arriba podrán ver un juego de 30fps sin usar ningún plugin.
Sin lugar a duda se abre otro episodio en la batalla Flash vs HTML5.
Enlace: Demo
Nuestro canal
LqN RSS
LqN en Twitter
LqN en Facebook
LqN en iGoogle
