ZonaW » Scripts Javascript

Speech Javascript API

ZonaW — Fri, 02 Mar 2012 16:15:00 +0000

Desde la página de W3C publican un borrador llevado a cabo por el equipo de Google, con especificacione para dotar de voz y hacer que nuestras páginas “nos entiendan”. Con esto se intenta conseguir poder hablar con las páginas web y que estas nos respondan, muy al estilo del modelo Siri para iPhone.

Esta API consta de 2 interfaces:

SpeechReco(), permite grabar la voz del usuario directamente desde el navegador.
TTS(), permite convertir texto en voz directamente.

La siguiente es una muestra de cómo se podrian adaptar nuestro site a estas tecnologías:

SpeechReco


  
  
  
// Iniciamos la grabación

TTS

Mostrar el contenido de un objeto (Javascript)

ZonaW — Thu, 02 Feb 2012 15:46:43 +0000

Para mostrar el contenido completo de un objeto, en Firefox, se puede utilizar la siguiente sentencia:

alert(object.toSource());

También se puede acceder a todos los elementos de un objeto mediante un bucle FOR EACH (utilizado para recorrer los elementos de una estructura de datos). En la siguiente sentencia MostrarObjeto monstrará un alert() que muestra todas las propiedades y los valores respectivos.

function ImprimirObjeto(o) {
var salida = ”;
for (var p in o) {
salida += p + ‘: ‘ + o[p] + ‘\n’;
}
alert(salida);
}

Por ejemplo:

Mostrar el contenido de un objeto Muestra

Reproductor de video de código abierto basado en HTML y Javascript

ZonaW — Tue, 10 Jan 2012 09:58:57 +0000

Video Player Sample es el nombre del reproductor de video de código abierto que a lanzado el equipo de Chrome Web. Ofrece soporte para múltiples formatos de video como: MP4 (video H.254 y AAC audio), OGG/OGV (video Theora y Vorbis audio), WEBM (video VP8 y Vorbis audio) y es compatible con las últimas versiones de los navegadores: Safari, Google Chrome, Firefox 4+, Internet Explorer 7+, Opera 11.

También nos ofrece la posibilidad de compartir nuestros video a través de las redes sociales más conocidas (Twitter, Facebook y Google+), aunque no dispone de la opción de ofrecer el código <embed> para que otros usuarios puedan incrustar el reprocuctor en su web.

Toda la configuración para la reproducción se realiza mediante los ficheros: config.json y data.json (puedes encontrar toda la información sobre su configuración en Appspot). El proceso principal es el ApplicationController que carga los ficheros JSON, episodios y datos de categorías, registra los componentes y controladores específicos y establece los enlaces.

Lo mejor es que puedes ver su código fuente y utilizarlo bajo la licencia libre (Apache License v2.0). Un buen ejemplo de uso es la creación de un portal de videos.

Ver demostración de Video Player Sample.

Selectivizr: selectores CSS3 en Internet Explorer

ZonaW — Tue, 03 Jan 2012 15:45:57 +0000

Ya sabemos el poco soporte que ofrecen las versiones de Internet Explorer más antiguas (desde la versión 6 hasta la 8) en cuanto a CSS3 se refiere, por ejemplo, uno de sus puntos débiles son los selectores que nos ofrecen.

Ya en otras ocasiones hemos nombrado la herramienta de Modernizr, para ayudarnos a detectar nuevas funcionalidades de HTML5 y CSS3 que soporta el navegador de cada usuario, y de esta forma poder escoger qué hacer. En el caso de que no lo hagas, gracias a Selectivizr.com podemos utilizar selectores de CSS3 en las versiones de Internet Explorer desde la 6 hasta la 8.

¿Cómo utilizar Selectivizr?

Su único requisito es que tenemos que utilizar alguno de los siguientes frameworks de javascript: jQuery, Dojo, Prototype, Yahoo!, DOMAssistant, MooTools y NWMatcher.

Por ejmplo, en el caso de querer utilizarlo con jQuery, sólo tendríamos que añadir el siguiente código en la cabecera <head> de nuestra web.

Dicho de otra forma, la llamada al archivo js de Selectivizr tiene que ir después del script que llama a la librería qué utilicemos (jQuery para este ejemplo). Por otro lado tenemos el elemento noscript, con una llamada al “fallback css”, que vendría a ser un archivo CSS con estilos en el caso que el usuario no tenga javascript habilitado en su navegador.

Gracias a Selectivizr a partir de ahora nuestra web podrá utilizar libremente 19 pseudo-clases (:empty, :checked, :not, etc), 2 pseudo-elementos (::first-line y ::first-letter) y cualquier selector de atributo([attr], [attr=], [attr*=], etc).

Mostrar alertas y notificaciones en tu web con Humane.Js

ZonaW — Fri, 16 Dec 2011 12:04:51 +0000

Hace unos años la única forma que tenían los sitios web de interactuar con los usuarios era por medio de las molestas e intrusivas ventanas modales en Javascript. Con la llegada de las nuevas versiones de navegadores, estos comenzaron a incluir las ventanas dentro de los mismos navegadores, evitando de este modo las molestas alertas que no nos permitian realizar ninguna otra acción, hasta que Aceptásemos o Cancelásemos dicho aviso.

Ahora HumaneJs nos presenta una solución mejorada para generar alertas y notificaciones en nuestra web por medio de un framework Javascript. Sus características principales son:

Sencillez para incorporarlo en nuestro proyecto, ya que no necesita de ninguna librería para funcionar.
Se utilizan animaciones CSS y cuando no son soportadas, animaciones Javascript.
Se permiten varios parámetros de configuracion para los mensajes como: tiempo que tarda en desaparecer, desaparición por acción del usuario, cerrado por click y forzar la aparición de nuevas notificaciones.
Se incluyen varios diseños para configurar su apariencia, además se permiten crear diseños personalizados por medio de Stylus.
Soporte para los siguientes navegadores: Internet Explorer 7+, Firefox 3+, Chrome 9+, Safari 3+, Opera 10+ y en fase Beta: iOS y Android.

Añadir efecto nieve en tu web

ZonaW — Thu, 15 Dec 2011 09:31:41 +0000

La navidad está cada vez más cerca y con ella la oportunidad que tienen muchos webmasters de decorar sus webs para la ocasión, ya sea añadiendo elementos navideños al logo de nuestros sites, como: Papá Noel, trineos, gorros navideños, dulces… y sobre todo nieve, mucha nieve.

Aunque pueda parecer cosa del pasado, añadir el efecto nieve a nuestra web, parece que vuvleve a estar más de moda que nunca este año, después de encontrarse el siguiente huevo de pascua en Google, ‘Let it snow‘ (‘Deja que nieve’)

Para conseguir un efecto tipo tipo nieve en nuestro site tendremos que copiar el siguiente código Javascript justo después de la etiqueta de nuestro site.

Recordar configurar la ruta de la imagen de los copos de nieve. Estos son algunos ejemplos que puedes utilizar.

Para terminar, recuerda que con esta misma técnica y código podrás realizar que caigan de tu web: estrellas, dinero… cualquier imagen que tenga que ver c on la temáticas de website.

Funciones para WordPress (Parte3)

ZonaW — Wed, 07 Dec 2011 15:20:23 +0000

Permitir a los colaboradores la subida de archivos

Pegando el siguiente código en el fichero functions.php permitiremos que los colaboradores puedan subir archivos al blog. Recuerda que como medida de seguridad en WorPress no se permite la subida de archivos al blog.

if ( current_user_can('contributor')
&amp;amp;&amp;amp; !current_user_can('upload_files') )
add_action('admin_init', 'allow_contributor_uploads');
function allow_contributor_uploads() {
$contributor = get_role('contributor');
$contributor->add_cap('upload_files');

Eliminar notificación de actualización

El siguiente código hace que las notificaciones que aparecen en la pantalla principal de WordPress cuando existe una nueva actualización no sean visibles. Especialmente útil, por ejemplo cuando realizamos una instalación de WordPress a un cliente. Para eliminar las notificaciones de actualización sólo se necesita pegar el siguiente código en el fichero functions.php

global $user_login;
get_currentuserinfo();
if ($user_login !== "admin") {
add_action( 'init', create_function( '$a',
"remove_action( 'init', 'wp_version_check' );" ), 2 );
add_filter( 'pre_option_update_core',
create_function( '$a', "return null;" ) );
}

Paginación de artículos sin necesidad de plugins

Gran cantidad de themes en WordPess dependen del plugin WP-Pagenavi para realizar correctamente la paginación. Ya sabemos que no es bueno recargar nuestro WordPress de plugins innecesarios, o como en este caso, con código que podemos insertar directamente en el fichero functions.php

function pagination($prev = '«', $next = '»') {
global $wp_query, $wp_rewrite;
$wp_query->query_vars['paged'] > 1 ? $current
= $wp_query->query_vars['paged'] : $current = 1;
$pagination = array(
'base' => @add_query_arg('paged','%#%'),
'format' => '',
'total' => $wp_query->max_num_pages,
'current' => $current,
'prev_text' => __($prev),
'next_text' => __($next), 'type' => 'plain'
);
if( $wp_rewrite->using_permalinks() )
$pagination['base'] = user_trailingslashit(
trailingslashit( remove_query_arg( 's',
get_pagenum_link( 1 ) ) ) . 'page/%#%/', 'paged' );
if( !empty($wp_query->query_vars['s']) )
$pagination['add_args'] = array( 's' =>
get_query_var( 's' ) ); echo
paginate_links( $pagination );
};

Una vez añadido el código anterior correctamente, sólo tienes que añadir la función pagination() al loop de WordPress:



// contenido del artículo

Para finalizar, recuerda que modificando las siguientes líneas en tu hoja de estilos CSS podás controlar la forma en la que se muestra la paginación:

.page-numbers { font-size: 15px; }
.page-numbers.current { color: #222; }
.page-numbers .dots { letter-spacing: 1px }
a.page-numbers { font-size: 14px; color: #3888ff; }

Categorizar y etiquetar artículos de forma automática

Con el siguiente código puedes hacer que al guardar un artículo automáticamente ya sea guardado con las etiquetas o categorías correspondientes. Para conseguirlo ya deben existir estas categorías/ etiquetas en el blog. Una vez que comprobamos que existen las etiquetas sólo tendremos que pegar el siguiente código en el fichero functions.php. Recordar antes de pegar el código cambiar “Nombre tag” y “Nombre categoría”

post_type != 'post' )
return;
// add a tag
wp_set_post_terms( $post_id, 'Nombre tag', 'post_tag', true );
// add a category
$categories = wp_get_post_categories( $post_id );
$newcat = get_term_by( 'name', 'Nombre categoria', 'category' );
array_push( $categories, $newcat->term_id );
wp_set_post_categories( $post_id, $categories );
}
?>

Habilitar por defecto el acortador de direcciones de Google (goo.gl)

Pegando el siguiente código en el fichero functions.php conseguirás habilitar el acortador de URLs de Google.

function googl_shortlink($url, $post_id) {
global $post;
if (!$post_id && $post) $post_id = $post->ID;

if ($post->post_status != 'publish')
return "";

$shortlink = get_post_meta($post_id, '_googl_shortlink', true);
if ($shortlink)
return $shortlink;

$permalink = get_permalink($post_id);

$http = new WP_Http();
$headers = array('Content-Type' => 'application/json');
$result = $http->request('https://www.googleapis.com/urlshortener/v1/url',
array( 'method' => 'POST', 'body' => '{"longUrl": "' . $permalink . '"}',
 'headers' => $headers));
$result = json_decode($result['body']);
$shortlink = $result->id;

if ($shortlink) {
add_post_meta($post_id, '_googl_shortlink', $shortlink, true);
return $shortlink;
}
else {
return $url;
}
}

add_filter('get_shortlink', 'googl_shortlink', 9, 2);

Po último añadir el siguiente código donde quieras utilizar la URL acortada de tu artículo:

echo "URL corta: " . wp_get_shortlink();

VideoJS: reproductor de video HTML5

ZonaW — Mon, 05 Dec 2011 11:35:40 +0000

VideoJS es un excente reproductor de video basado en JavaScript que utiliza la funcionalidad de video HTML5. La principal ventaja de utilizar VideoJS es la correcta visualización de los videos en diferentes navegadores y plataformas como Telefonos moviles o tablet al no requerir la utilización de Adobe Flash para ver correctamente el contenido de los videos. Además si el navegador de la persona que visita nuestra página no soporta HTML5, automáticamente mostrará un reproductor en Flash alternativo.

Estas son algunas de sus características:

Software gratuito y Open Source
Ligero. No utiliza imágenes
Skins 100% personalizables mediante CSS (se incluyen los aspectos: vimeo, YouTube y Hulu)
Independiente de frameworks
Fácil de usar, de entender y extender
Aspecto coherente entre los distintos navegadores
Pantalla completa
Control de volumen
Fallback a Flash

Para utilizar VideoJS en nuestra página, lo primero será descargar la última versión de VideoJS, descomprimirla y subirla a nuestro servidor. El siguiente paso será incluir los archivos JavaScript y CSS.


  ...
    
    
  ...

Para tener las funcionalidades de VideoJS añadimos una función JavaScript que se ejecutará cuando cargue la página:

Para finalizar, en el tag body construimos el player dentro de un div con clase “video-js-box” para reconocer la sección. Dentro del div creado añadimos con sus respectivos atributos y opciones de formato de video.

  
  
    
    
      
      
      
      
      vjs-flash-fallback"
width="640" height="264" type="application/x-shockwave-flash"
        data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
        
        
        
        
        
      
    
    
    Download Video:
      MP4,
      WebM,
      Ogg

      
      HTML5 Video Player by VideoJS

Se puede ver una demo online de la funcionalidad del reproductor y sus Skins 100% CSS.

También dispone de varios plugins para hacerlo aún más compatible con: WordPress, jQuery, Drupal, Umbraco y Joomla.

validate.js

ZonaW — Fri, 02 Dec 2011 10:51:19 +0000

Este es un pequeño script que nos puede ser de gran ayuda para la validación de formularios. Su tamaño en versión minified es de 1.3kb además tiene otras ventajas como: no depender de otras librerías como jQuery o Mootols, mensajes personalizables, funcionamiento en todos los principales navegadores (incluido IE6)…

Para comenzar a utilizarlo incluye el siguiente código JavaScript en tu página:

Crea el objeto de validación con las reglas que necesites:

var validator = new FormValidator('example_form', [{
    name: 'req',
    display: 'required',
    rules: 'required'
}, {
    name: 'alphanumeric',
    rules: 'alpha_numeric'
}, {
    name: 'password',
    rules: 'required'
}, {
    name: 'password_confirm',
    display: 'password confirmation',
    rules: 'required|matches[password]'
}, {
    name: 'email',
    rules: 'valid_email'
}, {
    name: 'minlength',
    display: 'min length',
    rules: 'min_length[8]'
}], function(errors, events) {
    if (errors.length > 0) {
        // Show the errors
    }
});

Podrás ver su funcionamiento y toda la documentación necesaria para crear formularios válidos en validate.js

Desabilitar la tecla “Enter” en formularios

ZonaW — Thu, 24 Nov 2011 08:51:18 +0000

Los formularios modales que se utilizan de forma predeterminada, es posible ejecutarlos pulsando la tecla “Enter” o mediante el botón “enviar” del mismo. En ocasiones puede ocurrir que no queramos que nuestro formularios sean enviados por nuestros usuarios utilizando el teclado. Un ejemplo claro para deshabilitar la tecla “Enter” en fomularios se puede dar si queremos medir el número de clicks que recibe el botón de: “enviar pedido”, “aceptar condiciones” o “enviar comentario” de los formularios.

Con el siguiente script jQuery conseguiremos desabilitar la tecla “Enter” al ejecutar un formulario, de esta forma nuestros usuarios se verán obligados a utilizar el botón de enviar de nuestros formularios.

$(document).ready(function() {
    $("form").keypress(function(e) {
        if (e.which == 13) {
            return false;
        }
    });
});