Craftyman Blog » Javascript

Aprender Javascript con Codecademy gratuitamente.

craftyman — Mon, 09 Jan 2012 00:46:35 +0000

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

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

Post Relacionados

Spine Mobile: Framework para WebApps moviles

Player de Video HTML5: VideoJS

craftyman — Mon, 27 Sep 2010 19:33:49 +0000

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.

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

Estructura del player

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

...

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

Download Video: MP4, WebM, Ogg
HTML5 Video Player by VideoJS

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

Post Relacionados

SliderNav: Lista de contactos iPhone con jQuery y CSS

craftyman — Thu, 03 Jun 2010 03:09:38 +0000

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

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.

Paso 2: Crear la estructura HTML.

Tenemos total flexibilidad en este Slider, podemos cambiar las letras del alfabeto por secciones según nuestra necesidad.

Post original: DevGrow

Descargar

Post Relacionados

Función print_r() en Javascript

craftyman — Tue, 27 Apr 2010 13:59:02 +0000

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

Post Relacionados

jStorage : Plugin jQuery para Base de Datos HTML5

craftyman — Mon, 26 Apr 2010 19:15:36 +0000

Como 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()

Framework: Mootools

Ver Demo

13. Form Field Hints

Framework: Ninguno

Ver Demo

Más Tooltips:

Post Relacionados

Descomprimir Código JavaScript con JSbeautifier

craftyman — Wed, 21 Apr 2010 23:43:53 +0000

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

Post Relacionados

Crear Tooltips con jQuery y TinyTips

craftyman — Tue, 23 Feb 2010 14:02:10 +0000

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:

Post Relacionados

Lightbox JavaScript con TopUp y jQuery

craftyman — Wed, 25 Nov 2009 13:11:37 +0000

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

Post Relacionados

Ordenar columnas de una tabla con Javascript y TinyTable

craftyman — Mon, 23 Nov 2009 13:41:16 +0000

Ordenar 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

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 Demo - Descargar