Aprender Javascript con Codecademy gratuitamente.

Codecademy es una web donde disponen de cursos muy practicos y sencillos para aprender a programar, ahora esta disponible tan solo el curso de Javascript donde podemos iniciar desde ya con

una serie de pasos donde vamos reconociendo cada funcion y propiedades de este lenguaje de programacion, mientras desarrollamos el curso nos va mostrando que porcentaje hemos compl

etado.

El curso ademas cuenta con un sistema de recompenzas para insentivar al usuario a que siga el curso y gane mas medallas.

Vía: Genbeta

zp8497586rq

Player de Video HTML5: VideoJS

VideoJS es un Player para reproducir Videos en HTML5, esto permite compatibilidad con navegadores móviles y la ventaja de no requerir flash para ver los videos, otra de sus ventajas es que si el navegador no soporta HTML5 automáticamente nos muestra su reproductor en Flash alternativo.

 

 

Mejores características

  • De Licencia Open Source (libre)
  • Realmente ligero (no utiliza imágenes)
  • Skins 100% CSS
  • Modo Full Screen y Full Window
  • Control de volumen
  • Compatible en navegadores móviles
  • Incluye skins de Youtube, Vimeo y más.
  • Plugins para jQuery y WordPress

 

Como funciona?

Lo primero es descargar la ultima versión de VideoJS, luego descomprimirlo y colocarlo en una carpeta de nuestro servidor local.
Descargar VideoJS

 

Incluir Librerías Javascript y CSS

El siguiente paso para incluir VideoJS en nuestra pagina web sera el de incluir los archivos JavaScript y CSS.

<head>
    <script src="video.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" href="video-js.css" type="text/css" media="screen" title="Video JS" charset="utf-8">
</head>

Ahora debemos ingresar una función JavaScript que se ejecutara cuando toda la pagina cargue, esto para tener las funcionalidades de VideoJS.

<script type="text/javascript" charset="utf-8">
VideoJS.setupAllWhenReady();
</script>

 

Estructura del player

Finalmente dentro del body construimos el player dentro de un div con clase “video-js-box” para reconocer la sección.

<div class="video-js-box">
...
</div>

Dentro de este colocamos el tag <video> con sus respectivos atributos y opciones de formato de video.

<video id="example_video_1" class="video-js" width="640" height="264" preload poster="http://video-js.zencoder.com/oceans-clip.png" controls>
  <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
  <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm; codecs="vp8, vorbis"'>
  <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg; codecs="theora, vorbis"'>
  <!-- Utilizar flash cuando el navegador no soporte HTML5 -->
  <object class="vjs-flash-fallback" width="640" height="264" type="application/x-shockwave-flash"
	data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
	<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
	<param name="allowfullscreen" value="true" />
	<param name="flashvars" value='config={"playlist":["http://video-js.zencoder.com/oceans-clip.png", {"url": "http://video-js.zencoder.com/oceans-clip.mp4","autoPlay":false,"autoBuffering":true}]}' />
	<!-- Utilizar una imagen al no soportar Flash -->
	<img src="http://video-js.zencoder.com/oceans-clip.png" width="640" height="264" alt="Poster Image"
	  title="No video playback capabilities." />
  </object>
</video>
<!-- Opción para descargar el video en caso no se soporte ninguna tecnología. -->
<p class="vjs-no-video"><strong>Download Video:</strong>
  <a href="http://video-js.zencoder.com/oceans-clip.mp4">MP4</a>,
  <a href="http://video-js.zencoder.com/oceans-clip.webm">WebM</a>,
  <a href="http://video-js.zencoder.com/oceans-clip.ogv">Ogg</a><br>
  <!-- Support VideoJS by keeping this link. -->
  <a href="http://videojs.com">HTML5 Video Player</a> by VideoJS
</p>

Con esto hemos obtenido un reproductor que soporta diferentes formatos de video, puede cambiar a Flash en caso el navegador no soporte HTML5 y la opción de descargar los videos en diferentes formatos si no se lograra reproducir de ninguna forma.
Pueden ver una demo online de la funcionalidad del reproductor y sus excelentes Skins 100% CSS.
Ver demos

jQuery SliderNav: Listar contactos como en iPhone

SliderNav es un plugin para jQuery desarrollado por DevGrow que permite mediante una barra de navegación vertical el deslizamiento de contenido, se establece el contenido mediante secciones y pueden rotar con la rueda del mouse.

Ejemplo SliderNav

 

Para implementar este Slider en nuestra Web, debemos de seguir estos pasos:

Paso 1: Incluir los archivos JavaScript y CSS en la cabecera.

Para nuestro ejemplo utilizaremos la librería jQuery y slidernav, luego inicializamos la función.
[html]
<link rel="stylesheet" type="text/css" href="slidernav.css" media="screen, projection" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript" src="slidernav-min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(‘#slider’).sliderNav();
});
</script>
[/html]

Paso 2: Crear la estructura HTML.

Tenemos total flexibilidad en este Slider, podemos cambiar las letras del alfabeto por secciones según nuestra necesidad.
[html]
<div id="slider">
<div class="slider-content">
<ul>
<li id="a"><a name="a" class="title">A</a>
<ul>
<li><a href="/">Adam</a></li>
<li><a href="/">Alex</a></li>
<li><a href="/">Ali</a></li>
<li><a href="/">Apple</a></li>
<li><a href="/">Arthur</a></li>
<li><a href="/">Ashley</a></li>
</ul>
</li>
<li id="b"><a name="b" class="title">B</a>
<ul>
<li><a href="/">Barry</a></li>
<li><a href="/">Becky</a></li>
<li><a href="/">Biff</a></li>
<li><a href="/">Billy</a></li>
<li><a href="/">Bozarking</a></li>
<li><a href="/">Bryan</a></li>
</ul>
</li>
etc…
</ul>
</div>
</div>
[/html]
Post original: DevGrow.com
Ver DemoDescargar

Función print_r() en Javascript

rabajar con Objetos en PHP no es igual que trabajarlos en Javascript, por eso buscando en la Web encontré un script que permite emular la funcion print_r() de PHP, el print_r JavaScript dando la posibilidad a nosotros los desarrolladores a testear facilmente cualquier Array, Objeto, JSON, etc.

jfdghjhthit45

jStorage : Plugin jQuery para Base de Datos HTML5

omo era de esperarse el HTML5 viene con fuerza y una de sus mejores características es la de tener una Base de datos Web SQL, esto será muy eficiente en algunas aplicaciones Web que requieran de un almacenamiento temporal en el lado del cliente.
jStorage es un plugin que facilita las consultas SQL en la DB del HTML5, provee metodos muy utiles para guardar, consultar y eliminar datos.
Soporte en los navegadores

Ejemplo de utilización

Un requerimiento del jStorage es la necesidad de un Framework JavaScript como Prototype, MooTools o jQuery.
set(key, value)
Este metodo nos permitirá almacenar valores en la Base de Datos.
key: deberá ser siempre un String de lo contrario ejecutara una excepción.
value: este podrá ser un entero, cadena, array, objeto y JSON.

$.jStorage.set(key, value);

get(key[, default])
Con esto podemos llamar al dato guardado, el parámetro opcional será devuelto si la key llamada no existe.

value = $.jStorage.get(key);
value = $.jStorage.get(key, "default value");

deleteKey(key)
Removerá el key y su valor de la base de datos.

$.jStorage.deleteKey(key);

flush()
Este método limpiara por completo la Base de datos del cliente.

$.jStorage.flush()

Descargarjfdghjhthit45

10+ mejores librerías Javascript para Tooltips

Los Tooltips en las paginas Web sirven para mostrar información adicional sobre alguna palabra importante, ya sean nombres de personajes, términos técnicos sobre algún tema, o dar información sobre alguna acción que se realizara si clickean.
Esta recopilación de 10 librerías Open source para Javascript nos ahorraran el trabajo de buscarlos, hay para los más populares frameworks como Prototype, jQuery, Mootools.

1. Coda Popup Bubbles

Framework: jQuery

Ver Demo

2. Advanced Tooltip

Framework: Ninguno

Ver Demo

3. Easiest Tooltip and Image Preview Using jQuery

Framework: jQuery

Ver Demo

4. jTip – A jQuery Tool Tip

Framework: jQuery

Ver Demo

5. Nice titles

Framework: Ninguno

Ver Demo

6. Tooltip to Forms

Framework: Ninguno

Ver Demo

7. jQuery Tooltips

Framework: jQuery

Ver Demo

8. Ajax Tooltip

Framework: Ninguno

Ver Demo

9. Orbital Tooltip

Framework: Ninguno

Ver Demo

10. CoolTips

Framework: Ninguno

Ver Demo

12. Mootools Tooltip

Framework: Mootools

Ver Demo

13. Form Field Hints

Framework: Ninguno

Ver Demo

Más Tooltips:

jfdghjhthit45

Descomprimir Código JavaScript con JSbeautifier

JSbeautifier es un Web App que en lo particular de otras Webs que comprimen código Javascript esta la descomprime, esta opción en la Web nos beneficia a todos los desarrolladores ya que siempre que encontramos algún Script comprimido dentro de una Web tenemos que darle formato manualmente para comprenderlo y luego hacer nuestra función en base a eso, en el caso mio me cae de maravilla.

Para una mejor descompresión, JSbeautifier brinda un pequeño panel de configuración para personalizar el resultado.
Ver Demo

jfdghjhthit45

Crear Tooltips con jQuery y TinyTips

tinyTips es un plugin para jQuery muy ligero el cual nos permite agregar Tooltips a nuestras páginas Web muy fácilmente.

Este tutorial nos muestra como implementar esta funcionalidad en nuestra página Web.

Paso 1 : Incluir los Scripts y CSS

Crearemos un archivo html donde incluiremos los JavaScripts y CSS (el Framework jQuery lo podemos llamar desde Google).




Luego inicializaremos los tooltips


En el código vemos 3 inicializaciones:

  • La primera es para todos los enlaces con clase tTip, colocaran el atributo title como Tooltip.
  • La segunda crea tooltips personalizados con el código html que se puede apreciar.
  • La tercera colocara tooltips a imágenes con clase tTip.

Paso 2 : Generando el código HTML

Ahora crearemos los elementos anteriormente inicializados para generar los tooltips.

Tooltip jQuery #1 Tooltip Personalizado

Ejemplo:

zp8497586rq

Lightbox JavaScript con TopUp y jQuery

TopUp es un plugin JavaScript para realizar Lightbox, esta desarrollado con jQuery y la librería jQuery UI los cuales nos brindan la posibilidad de tenerlos en nuestra Web.
Actualmente TopUp soporta distintos tipos de lightbox, aparte de realizar la función para imágenes, podemos poner Flash, Videos Youtube, Windows Media, RealPlayer, Quicktime, iframes y html.

Implementándolo en nuestra Pagina Web.

Paso 1: Incluir dentro del la librería TopUp.

Si poseemos un hosting propio, podemos descargarlo y subirlo a una carpeta para llamarlo, sino podemos llamarlo desde la misma Web que lo brinda.


Paso 2: Configurar los enlaces que abrirán el lightbox.

En este simple paso tan solo agregaremos la clase “top_up” a los enlaces que deseemos abran un lightbox.

Youtube

Así de simple logramos implementar un Lightbox con TopUp, una muy buena alternativa dentro de su categoría.
Ver Demo Descargar

zp8497586rq
zp8497586rq
jfdghjhthit45

Ordenar columnas de una tabla con Javascript y TinyTable

rdenar columnas de una tabla con Javascript y TinyTable
TinyTable es una librería con el fin de ordenar columnas de una tabla, esta funcionalidad la realiza con JavaScript, sin peticiones al Servidor de Base de Datos.
Esta librería no solo tiene la opción para ordenar, también nos permite: Paginar, customizar el numero de filas por pagina, buscar por contenido en la tabla, entre otras cosas.

Estos son los pasos para implementar TinyTable en nuestra aplicación web.
Previamente hemos tenido que descargar el script, descomprimirlo y solo copiar a otra carpeta para la demo los archivos script.js, style.css y la carpeta “images”.

Paso 1: Crear nuestro HTML.

En este paso generaremos un archivo .html e incluiremos los archivos script.js y style.css.



  


    
    
    


Paso 2: Crear la estructura de la grilla.

Esta estructura se reemplazara en el .html en lugar de .

ID

Name

Phone

Email

Birthdate

Last Access

Rating

Done

Salary

Score

1 Ezekiel Hart (627) 536-4760 tortor@est.ca 12/02/1962 March 26, 2009 -7 7% $73,229 6.9
2 Jaquelyn Pace (921) 943-5780 in@elementum.org 06/03/1957 October 20, 2006 -7 33% $130,752 4.9

Paso 3: inicializar el ordenamiento.

Lo colocaremos dentro de la estructura html en reemplazo del tag .

var sorter = new TINY.table.sorter('sorter','table',{
    headclass:'head',  // clase de la cabecera
    ascclass:'asc',    // clase para orden ascendente
    descclass:'desc',  // clase para orden descendente
    evenclass:'evenrow', // clase de filas 1
    oddclass:'oddrow',   // clase de filas 2
    evenselclass:'evenselected',// clase de filas seleccionadas 1
    oddselclass:'oddselected',// clase de filas seleccionadas 2
    paginate:true, // paginacion (true or false)
    size:10, // filas por pagina
    colddid:'columns', // dropdown de columnas para buscar
    currentid:'currentpage', // mostrar pagina actual
    totalid:'totalpages', // mostrar total de paginas
    startingrecid:'startrecord', // numero de registro inicio
    endingrecid:'endrecord', // numero de registro final
    totalrecid:'totalrecords', // total de registros
    pageddid:'pagedropdown', // dropdown de paginado
    navid:'tablenav', // ID de elemento de navegacion
    sortcolumn:1, // columna inicial a ordenar
    sortdir:1, // direccion de orden 1 o -1
    sum:[8], // columnas que se sumaran
    avg:[6,7,8,9], // columnas que se promediaran
    columns:[
        {index:7, format:'%', decimals:1},
        {index:8, format:'$', decimals:0}],
    // opciones adicionales de columnas
    init:true // Iniciar ahora? true o false
});

Hemos dado un vistazo de como implementar TinyTable de manera básica, solo con el ordenamiento, pero podríamos agregar elementos html con sus respectivos identificadores para agregar funciones de búsqueda, paginado y demás opciones de manera automática que nos provee esta increíble librería.
Ver DemoDescargar

zp8497586rq

jfdghjhthit45