Javascript

[Ajax] mcDropdown: Mejorando las listas desplegables con Jquery

Después de varios días sin postear por tener mucho trabajo, vuelvo a escribir, y saben postear y trabajar es complicado, creo que debería dejar de trabajar y dedicarme ha escribir post’s :-) .

Vía Hotajax(un blog bastante interesante sobre Ajax), me acabo de enterar de un importante plugin para que podamos mejorar bastante nuestras listas desplegables.

Esta funcionalidad nos permite generar submenus desplegables desde un combobox, osea elegir y desde ahí volver a elegir otra opción, además de que todo esto lo guarda en un “historial” para saber donde andamos, les pongo una imagen para que vean a lo que me refiero.

mcdropdown_preview

Para hacer uso de este plugin vamos a necesitar descargarnos  mcdropdown, el cual ya trae todos los script necesarios para que funcione.

Codigo despues del salto

Leer más

[Javascript] Menú deslizante usando Jquery

El seraphinux ultimamente le ha dado por escribir mas que de costumbre y gracias ha ello me he encontrado con un menú deslizante echo con Javascript.

Para que se den una idea de que les hablo aquí esta la imagen de menú normal

sliding-top-menu

Y aquí la imagen del menú pero ahora desplazado, o deslizado.

jquery-sliding-menu

Esto fue hecho gracias a la potencialidad y funcionalidad de Jquery, que es muy fácil de adaptarse a cualquier uso.

Veamos como se hizo, siguiendo el ejemplo de la fuente.

Primero necesitamos usar HTML,

[HTML]

Isn’t this nice?

[/HTML]

Ahora le aplicamos el siguiente CSS

[CSS]

[/CSS]

Y para hacerlo funcionar usamos Jquery de la siguiente forma

[JAVASCRIPT]

[/JAVASCRIPT]

Como ven es bastante simple, las imagenes usadas y el ejemplo de esto lo podrán encontrar en

http://www.webresourcesdepot.com/wp-content/uploads/file/jquery-sliding-menu/

Aunque ultimamente me ha estado atrayendo bastante Mootools, Jquery sigue teniendo muchisima utilidad.

Estoy planeando algo grande (después de que libere algo que tengo pendiente ups, solo me falta terminar la traducción y listo), que tendrá bastante Ajax y javascript, la pelea esta en que Framework utilizare, tal vez sera Jquery o Mootools, no lo se hagan sus apuestas.

Vía | Menu deslizante con jQuery
Surgio en | Sliding Top Menu With jQuery

Leer más

[Ajax] Microsoft Silverlight apuesta por APAX,ARAX en vez de AJAX

Bueno es lunes en la tarde, y con estos preparativos de la boda no me da tiempo de postear mucho, por cierto ya casi cumplimos un año aver que se me ocurre para festejarlo.

silverlight

Les platico que en theinquierer, Silverlight, soportara a futuro Python o Ruby para poder mejorar el rendimiento de Silverlight, ose a en vez de usar Javascript usaran Phyton y/o Ruby.

“La diferencia entre AJAX, ARAX y APAX es el lenguaje”, explica Brian Goldfarb, responsable del grupo de la división de desarrolladores de Microsoft.

Esto sera la novedad para el lanzamiento de Silverlight 2, ya que se espera que venga con soporte para ambos lenguajes , implementados para el lado del cliente en vez de usar Javascript

“Lo que hemos hecho en Silverlight es posibilitar que se utilice Ruby o Python como alternativa a JavaScript para construir el mismo tipo de aplicaciones. Todo lo que el navegador necesita es tener Silverlight instalado y los desarrolladores podrán aprovecharse de las ventajas de estos lenguajes en las aplicaciones clientes”, comentó Goldfarb.

No se que buscara microsoft con esto pero me suena bastante raro que hayan optado usando Python o Ruby, sera ¿que es menos eficiente implementar asp del lado del cliente?!!!!..

En fin a ver que nos depara el dia de mañana
Vía | Silverlight soportará Ruby y Python como alternativa a JavaScript

Leer más

[Ajax]Phototype, manipulando imagenes usando Javascript

Feliz inicio de semana, una semana algo complicada para mi por múltiples cosas que tengo que hacer(pagar TC, pagar Salon, Pagar art de la casa etc..), pero sin duda postear un buen numero de artículos hará mas amena la semana.

El otro día vi un enlace no recuerdo en que pagina/Blog (ajaxian??), el cual nos comentaba sobre un script que nos permite hacer maravillas con las imagenes usando para ello PHP y GD, si no mal recuerdo, para muestra vean la siguiente imagen la cual fue rotada y se le agrego el efecto polaroid con esta libreria.

phototype

Se trata de Phototype, el cual funciona usando php y la librería Javascript Prototype, lo cual funciona de la siguiente forma.

[Javascript]



[/javascript]

En el caso anterior lo que hicimos fue modificar el tamaño de la imagen, usando el método resize

Existen varios métodos como:

  • resize
  • flipV
  • rotate
  • dropShadow
  • makeSketchy
  • toGreyScale
  • addCaption
  • y hasta addChuckNorris

Mas información de este Framework, aquí | Phototype: image manipulation with javascript

Leer más

[Google-Ajax] Google Ajax Libraries API, La gran biblioteca de Librerias Ajax

Leyendo el blog de Andrés Nieto veo una nueva iniciativa de Google, se llama:

Google Ajax Libraries API

Que viene siendo una especie de lugar donde se almacenaran librerías Ajax, (como Jquery, Mootools, Prototype, Etc..), y las cuales estarán accesibles a todo el publico.

Las librerias/Frameworks disponibles en este momento son

Las ultimas 4 no son Librerias JS, sin embargo tambien forman parte de este abanico de posibilidades.

Su implementación/uso es simple y de la siguiente forma:


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

Esto es para cargar Jquery, para cargar alguna de las otras librerías JS, debemos cambiar la ruta del script(SRc) por alguna de las siguientes:


//jQuery

http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js

// Prototype

http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js

//Script.aculo.us

http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.1/scriptaculous.js

//MooTools

http://ajax.googleapis.com/ajax/libs/mootools/1.11/mootools-yui-compressed.js

//Dojo

http://ajax.googleapis.com/ajax/libs/dojo/1.1.1/dojo/dojo.xd.js

También se pueden agregar dichas librerías usando funciones de la api de Google, para ello, necesitaremos cargar la api de google y llamar lo que deseemos como el siguiente ejemplo

<script src="http://www.google.com/jsapi"></script>

<script type="text/javascript"><!--
// Load jQuery
google.load("jquery", "1");

// on page load complete, fire off a jQuery json-p query
// against Google web search
google.setOnLoadCallback(function() {
$.getJSON("http://ajax.googleapis.com/ajax/services/search/web?q=google&;v=1.0&;callback=?",

// on search completion, process the results
function (data) {
if (data.responseDate.results &&
data.responseDate.results.length>0) {
renderResults(data.responseDate.results);
}
});
});
// --></script>

Como pudimos ver la carga se realizo usando la función google.load, la cual funciona de la siguiente forma:


google.load(name, version, opt);

Como podemos observar se utilizan 3 parámetros, los cuales son, el nombre de la librería, la versión de dicha librería, y el ultimo parámetro, que es opcional es para indicar algunas opciones para personalizar mejor la carga de dicha librería, por ejemplo si la deseamos comprimida o no, entre otras opciones mas.

Leer más

[Javascript] Teclado virtual usando Javascript

Los formularios, se pueden mejorar de diferentes formas, como por ejemplo usando css, como vimos en anteriores posts o agregandole una funcionalidad extra.

Andrés Nieto nos comenta desde su blog, sobre un teclado virtual construido con Javascript, que nos permitirá ingresar texto como nosotros lo deseemos, además de que podemos elegir el idioma del teclado, en el que queramos que se nos muestre, claro, solo cambiara el idioma del teclado(osea la distribución de teclas) mas no lo que escribimos.
Su implementación es realmente fácil solo basta con bajarse el js y el Css.


<script src="http://www.ajaxman.net/wp-admin/keyboard.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="keyboard.css">

Y cuando lo queramos usar simplemente invocamos la clase “keyboardinput” de esta forma:

.
...
<input class="keyboardInput" type="text" />
...
.

La licencia que usa es BSD.

Aprovecho este post para felicitar a Andrés Nieto por sus 3000 posts escritos, los cuales en lo personal me han ayudado muchisimo a aprender y mejorar sobre Javascript, y por supuesto es una fuente de información excelente para mi blog, en hora buena Felicidades Andrés vamos por los 10000 posts.

Nota: Fui al Bugcon, Pero tome un par de fotos, y nos las tengo a la mano, les prometo platicar que tal estuvo, solo que mañana pondré el post.

Vía | Añade un teclado virtual a tus aplicaciones web

Recurso | Javascript Graphical / Virtual Keyboard Interface

Leer más

[Javascript] JavaScript HTML Parser: Mejorando nuestros HTML’S

Muchos quizas creyeron que ya no postearia, pero se equivacaron, he estado un poco atorado(como siempre), pero poco a poco mostrare mejores cosas.

Hoy leyendo el blog de Jhon Resig, me entero de que el, ha lanzado un proyecto llamado: Pure JavaScript HTML Parser.

Este proyecto , por lo poco que lo probe, se trata de un corrector de codigo html, aunque talvez, muchos digan, que son expertos en HTML, no olvidemos que al estar programando en algun otro lenguaje se nos puede pasar algo de HTML, como cerrar alguna tag.

Esta funcionalidad posee 4 metodos/opciones diferentes de uso.

  • Compone Tags no cerradas:
    HTMLtoXML("<p><b>Hello") == '<p><b>Hello</b></p>'
  • Elementos Vacios:
    HTMLtoXML("<img src=test.jpg>") == '<img src="test.jpg"/>'
  • Bloques vs. Elementos:
    HTMLtoXML("<b>Hello <p>John") == '<b>Hello </b><p>John</p>'
  • Cierre de Elementos padre:
    HTMLtoXML("<p>Hello<p>World") == '<p>Hello</p><p>World</p>'
  • Atributos deshabilitados.:
    HTMLtoXML("<input disabled>") == '<input disabled="disabled"/>'

Talvez a muchos no nos sea de gran ayuda pero quiza usando este codigo podamos mejorar nuestros codigos HTML, asi como tambien usarlo para algo mas.

Pueden ver el demo de su uso en el siguiente enlace.

Demo | JavaScript HTML Parser

Leer más

Historico de entradas

febrero 2012
L M X J V S D
« ene    
 12345
6789101112
13141516171819
20212223242526
272829  

Ajaxman

Mi nombre es Javier, soy desarrollador web con especialización en PHP (avanzado), HTML, CSS y Javascript(Medio).

Me considero evangelizador de Kohana Framework, Mozilla Firefox y GNU/Linux Debian.

Estoy casado, y tengo dos hermosos hijos.

Todos los contenidos a menos que se exprese lo contrario estan bajo licencia Creative Commons.

Enlazanos!!

hit counters online counter