Archivos para la categoria JavaScript
HTML KickStart: Recursos de HTML5, CSS3 y Javascript
“HTML KickStart” es un conjunto bastante liviano de archivos, patrones y elementos en HTML5, CSS y jQuery (Javascript), diseñado para ayudarnos ahorrándonos tiempo, gracias a las etiquetas, menús, tipografías, galerías de imágenes, botones, formularios, listas, iconos, entre otros, que pueden ser descargado gratuitamente para basar nuestros desarrollos en su código, además son compatibles con tus navegadores favoritos.
Así que si diseñas o desarrollas sitios o aplicativos Web, te invitamos a que le heches un vistazo a HTML KickStart, sin duda te ayudará.
Enlace:
99Lime
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
Spaceport: Crea juegos HTML5 que corren como aplicaciones nativas en iOS y Android
Navegando la Web me encuentro esta interesante plataforma llamada “Spaceport”, la cual permite crear juegos HTML5 en Javascript, y que pueden ser corridos como aplicaciones nativas de iOS o Android, gracias a sus estándares.
Dentro del sitio oficial podremos hacer un tour que ilustra su funcionamiento, así mismo podremos jugar con los juegos de ejemplo que allí tienen, además cuenta con una muy buena documentación.
Spaceport soporta plataformas de iOS, Android, HTML5 y Flash, sin duda excelente alternativa que aparece en un momento oportuno, dado al reciente anuncio de flash donde se retira de los móviles.
Enlace: Spaceport (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)
5 interesantes juegos en HTML5
Navegando una ves más la Web me encuentro un interesante articulo que muestra 5 grandiosos juegos desarrollados en HTML5, sin lugar a duda una muy interesante tecnología. Estos podemos disfrutarlos en la mayoría de nuevos navegadores, aunque no es el caso de internet explorer 8 o anteriores.
Agent 008 Ball
Es un juego de Pool de un solo jugador, cuyo objetivo es meter el mayor número de bolas antes que el tiempo se termine.
Biolab disaster
Es un juego que se desarrolla en plataformas, donde debemos saltar para esquivar los obstáculos, así como también podemos dispararles.
Crystal Galaxy
Es un juego que cuenta con buenos gráficos y su objetivo es aniquilar asteroides y naves enemigas, sin duda también se torna adictivo aunque en principio es un poco difícil controlar la nave con el mouse.
Canvas rider
Es un juego donde el objetivo es montar la bicicleta en escenarios dibujados por otros participantes, se torna divertido y su control si que es sencillo, solo las flechas arriba para avanzar, abajo detenerse, izquierda y derecha inclinarse, z regresar y el enter para empezar de nuevo.
Pirates love Daisies
Es un juego de piratas que esta muy bien logrado, llevando al limite a JavaScript y HTML5, es creado por un desarrollador de Flash, quien fue contratado por Microsoft para desarrollar un juego que muestre las bondades del nuevo Internet Explorer 9, que vaya que en este si que corre bien, se recomienda una aceleradora gráfica para una mejor experiencia.
Después de jugarlos di este orden, pero por su puesto ustedes pueden jugar y mirar cual es el mejor para ustedes.
Enlace: 5 Awesome HTML5 Games (Vía sitepoint)
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.
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
GLGE: Librería JavaScript para hacer más fácil el uso de WebGL
El vídeo de arriba muestra un escena simple desarrollada en Blender y exportado a GLGE, para ser usado en un navegador con capacidades WebGL.
GLGE es una librería JavaScript que facilita el uso de WebGL, es básicamente una API creada en JavaScript, que permite acceso directo a openGL ES2, permitiendo el uso de aplicaciones de hardware con aceleradoras gráficas 2D/3D, sin necesidad de instalar plugins adicionales.
El objetivo de GLGE es permitir a los desarrolladores Web usar WebGL de forma fácil y rápida.
Enlace: GLGE (Vía Ajaxian)
Nuestro canal
LqN RSS
LqN en Twitter
LqN en Facebook
LqN en iGoogle
