TheDavis Blog » Archivo para la etiqueta `javascript´

Añadir el botón “Pin It” de Pinterest en Wordpres

thedavis — Fri, 30 Mar 2012 19:00:38 +0000

Con el siguiente código se genera el botón Pin It de Pinterest usando las funciones de WordPress para capturar la URL del post, la imagen asociada al post y el título del mismo:

Pin It

Para poder usar la función de “the_post_thumbnail” tú theme lo debe activar, si no lo está ya, puedes leer más sobre este tema en la documentación de WordPress: Post Thumbnails Codex

Nota: El archivo javascript no hace falta añadirlo cada vez, si lo llamas en el footer.php antes del ya te puedes olvidar de esa llamada.

PD: También me puedes encontrar en Pinterest: https://pinterest.com/thedavis/

Más información | Pinterest

Validar formularios de forma nativa con HTML5

thedavis — Fri, 30 Mar 2012 16:00:25 +0000

Desde el día que empecé a navegar por páginas web (hace ya bastante tiempo), el problema de la validación del lado cliente siempre se ha solucionado por javascript, bien, esto con HTML5 parece que va cambiando a medida que los navegadores van adaptando el estándar (¡maldito IE xD! ) y el propio estándar va madurando.

En Cristalab han publicado un pequeño tutorial para ir viendo como se hacen estas validaciones que realiza el mismo navegador sin necesidad de javascript.

Fuente: Cristalab

Lanzamiento de jQuery 1.3

thedavis — Wed, 14 Jan 2009 18:53:47 +0000

Hoy, día 14 de Enero de 2009, jQuery 1.3 ha sido lanzado. Incluye muchas mejoras que implican una mejor velocidad en todos los aspectos. Realmente este framework de javascript se está convirtiendo en una herramienta imprescindible.

Sizzle

La incorporación de Sizzle hace que la velocidad en búsqueda de selectores se vea incrementada y ofrezca unos resultados muy interesantes.

Inyección HTML reescrita

Los métodos jQuery.html(), .append(),.. encargados de generar HTML dinámicamente han sido reescritos obteniendo una mejora de un 6x en algunos casos sobre jQuery 1.2.6.

Descargar

jQuery Minified / jQuery Regular

Usar con Google Ajax Libraries

Los que usan Google Ajax Libraries para no tener que alojar jQuery en sus servidores lo pueden usar mediante esta URL: http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js

jQuery Alert Dialogs, reemplazo para alert(), prompt() y confirm()

thedavis — Fri, 02 Jan 2009 09:28:19 +0000

jQuery Alert Dialogs, es un reemplazo muy elegante para las funciones alert(), prompt() y confirm() de javascript.

Uso

Simplemente hay que añadir estas líneas al :

<script src="/path/to/jquery.js" type="text/javascript"></script>
<script src="/path/to/jquery.ui.draggable.js" type="text/javascript"></script>
 
<script src="/path/to/jquery.alerts.js" type="text/javascript"></script>
<link href="/path/to/jquery.alerts.css" rel="stylesheet" type="text/css" media="screen" />

Una vez cargados los ficheros necesarios podremos llamar a las funciones personalizadas:

Alert()

jAlert es el sustituto de alert() y nos muestra alerta básica con un botón de aceptar para que el usuario acepte que ha visto el aviso.

jAlert('This is a custom alert box', 'Alert Dialog');

jPrompt()

Sustituto de prompt() que nos da la opción de introducir un valor desde la ventana.

jPrompt('Type something:', 'Prefilled value', 'Prompt Dialog', function(r) {
    if( r ) alert('You entered ' + r);
});

jConfirm()

Alternativa a confirm() en la que ofrecemos al usuario la opción de aceptar o cancelar una acción.

jConfirm('Can you confirm this?', 'Confirmation Dialog', function(r) {
    jAlert('Confirmed: ' + r, 'Confirmation Results');
});

Demo

Los chicos de jQuery Alert Dialogs han publicado una demo para que podamos ver que tal funciona este sistema.

Consejo de Uso

anieto2k ha propuesto utilizar estas modificaciones de las funciones clásicas de javascript utilizando un sistema que convierta esta opción en una alternativa y que en caso de fallar nos muestre su funcionalidad original, pienso que es muy buena idea:

//alert()
var oAlert = alert;
function alert(txt, title) {
    try {
        jAlert(txt, title);
    } catch (e) {
        oAlert(txt);
    }
}
alert("Hola", "Prueba");
 
//confirm()
var oConfirm = confirm;
function confirm(txt, title, func) {
    try {
        jConfirm(txt, title, func);
    } catch (e) {
        if (oConfirm (txt, title)) func();
    }
}
confirm("Hola", "Prueba", function(){
	alert("Prueba", "Superada");
});
 
//prompt()
var oPrompt = prompt;
function prompt(txt, input, title, func){
    try {
        jPrompt(txt, input, title, func);
    } catch(e) {
        func(prompt(txt, input, title));
    }
}
prompt("Hola", "Valor", "Prueba", function(r) {
	if (r) alert(r);
});

Fuente: anieto2k

30 menus basados en tabs y acordeones animados

thedavis — Thu, 01 Jan 2009 14:39:07 +0000

Con la ayuda de Javascript se pueden conseguir muchos efectos en la representación y visualización de un menú de navegación:

Fuente: anieto2k

Parallax, imagenes 3D con jQuery

thedavis — Tue, 30 Sep 2008 20:02:47 +0000

Desde anieto2k rescato este plugin para jQuery llamado Parallax.

Instalación

Para instalar parallax, deberemos tener informar, mediante tags

Funcionamiento

jQuery('#parallax').jparallax(options);

Como casi todos los plugins de jQuery, podemos indicar que elemento será sobrecargado con la nueva funcionalidad, para ello lo indicaremos mediante el selecto jQuery() y encadenamos el método jparallax() al que le podemos pasar una serie de parámetros.

Descargar

Actualmente es una versión BETA, la 0.3, por lo que puede dar algún problema en algún navegador. Lo podemos descargar directamente de la página del proyecto.

Fuente: anieto2k

10 frameworks javascript

thedavis — Thu, 04 Sep 2008 22:17:43 +0000

Para ampliar nuestra capacidad y velocidad de desarrollo podemos optar por usar un framework que nos ofrezca una gran cantidad de opciones de uso cotidiano.

Fuente: anieto2k

Google Chrome

thedavis — Wed, 03 Sep 2008 23:06:13 +0000

Vale, lo se, estáis hartos de leer sobre el nuevo y fascinante navegador web que Google ha publicado. Y seguro que también has visto el cómic que acompañó el lanzamiento. Por eso voy a tratar de recopilar todos los detalles que se han ido publicado hasta ahora sobre él en diferentes medios.

¿Hacía falta otro navegador web?

Pues vaya, la respuesta podría ser: “pa gustos los colores” pero entrando en mas detalle, quizás será mejor pensar que mientras cumpla con los estandartes establecidos creo que no pasa nada porque exista tanta oferta de navegadores web. El problema vendrá ( y seguro que no tardará ) cuando cada navegador empiece a mostrar el código a su bola y a los desarrolladores se nos exija la más completa compatibilidad, bueno no sé que digo, eso ya pasa ahora aunque generalmente mientras funcione con Internet Explorer 6/7 (sí joder, el 6 es una mierda, pero muchas empresas lo siguen usando y no hay forma de quitárselo de la cabeza) y Firefox a los demás no se les da tanto soporte y no pasa nada.

Google y las betas

Lo siguiente no se si va ha levantar polémica, pero, ¿Google termina algo alguna vez? Que yo sepa Gmail sigue en beta desde sus inicios y NO pasa nada, nadie se ha quejado que yo sepa. ¿Será Chrome otra beta eterna para Google? Como desarrollador mola, porque si pasa algo puedes soltar un -¡¡ahh como es beta!! te j0des -,pero como usuario, la verdad, puede ser peligroso. Ya sabéis piensa mal y acertarás…

Pruebas

Ya se han publicado un montón de pruebas de rendimiento sobre la rapidez de carga Javascript en Chrome, su relativo bajo consumo de memoria (lanza varios procesos simultáneos, casi es hacer trampas) y su compatibilidad con el estándar (aka. AcidTest).

En general me ha gustado y sobretodo me ha llamado la atención la posibilidad de disponer de sesiones de servidor distintas en cada pestaña, interesante para los desarrolladores.

Hay disponible una review con más de lo mismo en FayerWayer.

Vulnerabilidades

Así es, ni San Google se libra y los gúrus del tema ya están lanzando sus torpedos (I y II ) contra Chrome. No es que ya este haciendo aguas ni nada por el estilo, que tire la primera piedra el que esté libre de pecado, lo digo más que nada para evitar decepciones futuras… yo ya me entiendo :)

Más cosas

También he encontrado el siguiente vídeo La historia detrás de Google Chrome [5 min], seguro que a estas horas existen muchos más (este está subtitulado al español), leyendo la entrada de Google Chrome en VivaLinux!:

¿No os habéis preguntado que dice Microsoft a todo esto? No ha tardado en llamar monopolista a Google, vaya ¿sorprendido?

El tiempo dirá si Google consige dar un vuelco al panorama actual y se hace con un hueco en el mercado, de momento es lo que hay que no es poco.

Se me olvidaba, ¿para Linux qué? ¿No habrá Chrome para Linux? ¿Nadie se ha quejado? Ya soy un llorón… XDD

SexyAlertBox, mejorando el alert()

thedavis — Fri, 22 Aug 2008 10:51:31 +0000

SexyAlertBox es un script desarrollado en javascript, usando MooTools como Framework, con el que ampliamos las posibilidades que alert() nos ofrece, una herramienta que nos permite mostrar mensajes de una forma más amigable para el usuario y que además podemos personalizar para adaptar a nuestra aplicación.

Demo | Descargar

Fuente: anieto2k

Unit PNG Fix – Para seguir solucionando transparencias en IE

thedavis — Fri, 15 Aug 2008 10:01:40 +0000

Unit PNG Fix, otro compacto javascript de tan solo 1kb que nos permitirá seguir solucionando los tradicionales errores producidos por IE6. Transparencias, corrección de atributos de filtros, etc.

Descarga – Mas Info Unit PNG Fix

Fuente: Xyberneticos

DragTable, la Tabla de las tablas

thedavis — Sat, 28 Jun 2008 16:45:37 +0000

DragTable es una librería JavaScript que permite mover de posición las columnas de las tablas HTML tradicionales y además permite ordenar las columnas de forma ascendente y descendente. Ver Demo

Fuente: anieto2k