Archivos para la categoria JavaScript

Si no lo conoces de paso te presento “Programr” y su nueva noticia.

Cuando estamos aprendiendo un lenguaje de programación los más importante es su practica, y para ello debemos lidiar con crear los entornos adecuados donde correr, ejecutar y en ocasiones compilar nuestro código. Aquí es donde nos ayuda Programr, ya que nos permite elaborar el código, ejecutarlo, compilarlo e incluso compartirlo con colaboradores en nuestro proyecto, y todo desde nuestro navegador, sin necesidad de instalar compiladores, servidores Web, etc.

Programr nos permite desarrollar en lenguajes como PHP, C++, Java, C#, VB, Ruby, Python, Javascript (jQuery), FLEX, J2EE, AJAX, SQl y ahora ha anunciado la buena nueva de soporte para aplicaciones Android, permitiendo su compilación Online, es decir todo a través de nuestros navegador, así mismo podremos obtener el APK que podrá ser difundido por el medio que deseemos e incluso lo podremos llevar directamente a Google Play.

Además pronto brindara soporte para el desarrollo de aplicaciones iOS, y aplicativos para la red social Facebook.

Enlace:
Sitio oficial | Programr
Vía techcrunch

Varias personas me han preguntado ¿Cómo embeber un vídeo de YouTube con su URL únicamente?

Desde “workup.com” crear un interesante plug-in desarrollado en jQuery, él cual nos permite incrustar contenido de varios servicios en nuestras aplicaciones Web, tan solo agregando su url.

El plug-in esta basado en oohembed que a su ves se basa en el formato oembed, que nos permite incrustar contenido de sitios Web de terceros. Gracias a este formato es muy sencillo mostrar vídeos, fotos, etc. en nuestros sitios Web tan solo referenciando su URL, como de seguro habrás visto en servicios como Facebook.

El uso del plug-in es bastante sencillo solo debes:

1. Descargar el Plug-in, el cual viene en versión completa y min, deberías seleccionar el que más te conviene para tu aplicativo.
2. En tu header haces un llamado a jQuery:
   <script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js“></script>
3. Después llamas el plug-in:
   <script type=”text/javascript” src=”jquery.oembed.js”></script>
4. Agregas una función como esta:
   <script type=”text/javascript”>
   $(document).ready(function() {
   $(”#olink”).blur(function (){
   olink = $(”#olink”).val();
   $(”#oembedcont”).fadeOut(1000);
   $(”#oembed”).oembed(olink);
   })
   });
   </script>
5. Por último agregas estos div para agregar el contenido:
   <div id=”oembedcont”><input type=”text” id=”olink”/></div>
   <div id=”oembed”></div>En el div con id=”oembedcont” aquí agregamos la URL del contenido a mostrar, y en div id=”oembed se desplegará el contenido.

Los archivos que puedes descargar vienen con un código de ejemplo, que te mostrará lo sencillo que es el uso de este plug-in, con el cual podrás incluir facilmente contenidos de fivemin, amazon, flickr, googlevideo, hulu, imdb, metacafe, qik, revision3, slideshare, twitpic, vimeo, youtube, entre otros.

Si estas interesado en incluir contenido de terceros en tus aplicativos Web, te recomiendo que des una leída al formato oembed, cabe destacar que oohembed fue adquirida por embed.ly, que nos brinda una excelente API para embeber contenido, así que te recomiendo 100% que visites su sitio y te familiarices con esta API.

Espero que esto sea de su ayuda, gracias.

Enlace:
Descargar | Plug-in

“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 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.

<head>
    <script type="text/javascript" src="jquery-1.6.2.min.js"></script>
    <script type="text/javascript" src="FeedEk.js"></script>

</head>

2. Agrega un div en el lugar donde mostraras el widget

<body>
    ...
    <div id="divRss">
    </div>
    ...
</body>

3. Agrega el código Javascript que traerá la información del sitio externo.

$('#divRss').FeedEk({
   FeedUrl : 'http://rss.cnn.com/rss/edition.rss',
   MaxCount : 5,
   ShowDesc : true,
   ShowPubDate:true
  });

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

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)

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:

1. Llama “watermark.js” antes de la etiqueta body de tu documento HTML.
2. “className” la clase en los elementos donde usará una marca de agua. (Opcional) Por defecto: “watermark”.
3. “position”: “top-left”|”top-right”|”bottom-right”|”bottom-left” (Opcional) Por defecto: “bottom-right”.
4. “watermark” un elemento img que representa la marca de agua.
5. “Path” la ruta a la imagen.
6. “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 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)

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.

Jugar.

Biolab disaster

Es un juego que se desarrolla en plataformas, donde debemos saltar para esquivar los obstáculos, así como también podemos dispararles.

Jugar.

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.

Jugar.

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.

Jugar.

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.

Jugar.

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 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.

Descarga: Mooplay
Enlace: Mooplay (Sitio oficial)

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.

Enlace: Jo (Sitio oficial)
Descarga: Jo