JQuery UI

JQuery es un gran Framework Javascript para nuestros proyectos, lo que mas me impresiona de esta, es su gran comunidad, clases y release que han surgido últimamente. Prácticamente puedes encontrar de todo en JQuery, y si no existe no va a faltar a que alguien saque una librería para JQuery que lo realice.

JQuery User Interface, es un conjunto de aplicaciones con sus respectivos demos, para ver el gran potencial que ha tenido este Framework y todo lo que podemos llegar a lograr.

Entre sus categorías tenemos

Interacción
Draggables
Droppables
Sortables
Selectables
Resizables

Widgets
Accordion
Calendar
Dialog
Slider
Tablesorter
Tabs

Efectos
Magnifier
Shadow

Sin duda un gran Framework, si les gusta pueden descargarlo, ver los Plugins con los que cuenta y dar un paseo por su Documentación.

Enlace : JQuery UI
.

Ver Videos – Te Verde – Videos 3GP – 3GP – somos tu y yo

Errores típicos en Javascript

A quien no le ha pasado alguna vez que cuando programa en javascript al momento de ver funcionando, manda error, o que en un navegador funciona y en otro no, o peor aun a veces no funciona y no manda error. Bueno esos dolores de cabeza son debido a que a veces javascript es muy sensible o muy estricto en algunas cosas. En este artículo pretendo dar a conocer una serie de errores típicos y como los podemos solucionar.

Cuidado con la coma.

Este es un error un tanto típico, sobre todo cuando trabajamos con objetos o arreglos. Observen en el siguiente código.

<script type="text/javascript">
  var MyObj = {
        nombre : "Victor",
        pais : "Chile",
  }
</script>

Al esta todo correcto, pues no, la coma que esta el final, después de «Chile», esta alterando el correcto funcionamiento, en algunos navegadores les va a mandar un error de sintaxis debido a un bug que traen consigo. Pues la solución es simplemente quitar esa coma.

«this» no siempre es esto, cambia según su lanzador.

Observemos un código de ejemplo.

<input type="button" value="Enviar" id="submit" />
<script type="text/javascript">
var myForm = function () {
    this.alert = "Hello world";
    this.onClickAction = function() {
        alert(this.alert );
    }
}();
document.getElementById("submit").onclick =  myForm.onClickAction;
</script>

Con el código anterior, asignamos al evento onclick sobre el button, la acción del objeto myForm, con el cual cuando hagamos clic en este debería aparecer un alert con el mensaje «Hello world».

A su sorpresa no dice «Hello world», dice «undefined». Esto sucede porque «this» es sobreescrito por el objeto input, es decir si en vez de poner this.alert ponen this.value el mensaje seria «Enviar». Bien para solucionar esto deben reemplazar «this» por «self» y agregar esta variable dentro del código, entonces el resultado final seria.

<input type="button" value="Enviar" id="submit" />
<script type="text/javascript">
var myForm = function () {
    var self = this;
    this.alert = "Hello world";
    this.onClickAction = function() {
        alert(self.value);
    }
}();
document.getElementById("submit").onclick =  myForm.onClickAction;
</script>

Nótese que se agrego var self, esto es porque si no lo agregamos IE manda un error.

Cuidado con el nombre de tus variables

Procure no asignar un nombre a una variable idéntico al de un ID en el documento.

<input type="button" id="ElBoton">
<script type="text/javascript">
    ElBoton = get("ElBoton");
</script>

En la mayoría de los navegadores este código no debería mandar error, pero en algunos manda un error del tipo «objeto indefinido», simplemente como solución, sean creativos o en vez de una variable «ElBoton» pongan «_ElBoton».

Replace, solo reemplaza la primera coincidencia

La función replace para los string en javascript, solo reemplaza la primera coincidencia, al contrario a funciones del tipo str_replace de PHP. Por ejemplo.

<script>
    var title = "Errores típicos en Javascript".replace(" ","_");
    alert(title);
</script>

El siguiente código arrojaría el siguiente resultado:

Errores_típicos en Javascript

Para solucionar esto y que replace funcione en todas las coincidencias, debemos recurrir a las expresiones regulares, de la siguiente forma.

<script>
     var title = "Errores típicos en Javascript".replace(/ /g,"_");
     alert(title);
 </script>

No siempre ParseInt da los resultados esperados.

ParseInt es una funciona bastante buena, con la que podemos transformar variables del tipo string al tipo int, por ejemplo.

dia = "09";
var  numdia = parseInt(dia);

Lo esperado de esa operación seria que numdia tenga como valor 9, pero para nuestra sorpresa es 0!!.

Bueno esto tiene una explicación lógica y matemática que no explicare mucho (mi matemática siempre ha sido pésima). Cuando el primer carácter de un String es cero, parseInt interpreta el valor en base a 8. Para solucionar este problema debemos cambiar su base a 10 de la siguiente manera:

 var  numdia = parseInt(dia, 10);

Ya con esto nuestro resultado es el esperado, obviamente 9.

Asignando Eventos

La forma típica de asignar un evento a algo es la siguiente:

windows.onclick = funcion_asociada;

Esta manera tiene dos grandes errores:

1. Sobreescribe otros eventos que se hagan creado.
2. Puede causar errores de memoria en ciertos navegadores en algunas circunstancias.

La solución, ocupa alguna librería que le permita asociar eventos, como por ejemplo Prototype. Es tan simple como esto:

Event.observer(window, load, funcion_asociada);

Cuidado con los tiempos

Cuando creamos un objeto y le asignamos un evento o queremos realizar una acción en este, hay que tener cuidado, ya que la creación de estos requiere de un tiempo, y una vez cumplido se puede trabajar en estos. Revisemos el siguiente ejemplo

var myInput = document.createElement('input');
document.body.appendChild(myInput);
myInput.focus();
myInput.select();

En el código anterior, simplemente creamos un elemento y lo insertamos en el cuerpo, una vez realizado, asignamos el curso al objeto creado y lo seleccionamos. Bien, a nuestra sorpresa el focus() y selec() no funcionaran en algunos navegadores, el problema esta en que Javascript tiene una ejecución linea, con esto quiero decir, que ejecuta todas lineas una tras otra sin esperar a que la anterior termine. En este caso el error se debe a que el objeto no se alcanzo a establecer bien antes de hacer el focus() y el select();. La solución a este problema seria algo así.

var myInput = document.createElement('input');
myInput.id = "newInput";
document.body.appendChild(myInput);
setTimeout("document.getElementById("newInput").focus(); document.getElementById("newInput").select()", 10);

Ahora si el input es creado y seleccionado.

El punto y coma (;) es importante

Este es un punto que encuentro importante. En todo lenguaje existe una forma de terminar una instrucción, por ejemplo el ; (punto y coma), en javascript este es opcional es decir.

var myName = "victor"
var myLastName = "san martin";

Ambos funcionan en la mayoría de los navegadores, pero se ha notado comportamientos extraños en ciertos navegadores. Conjunto a esto se ha vuelto bastante famoso el uso de compresores, pues estos su primera tarea es eliminar espacios y saltos de linea, punto importante que permitía que funcionase nuestro código anterior. Bien, imaginemos que pasamos por un compresor, esto nos dejaría algo así:

var myName = "Victor"var myLastName = "san martin";

Sin duda mandaría error, aunque en algunos compresores mas avanzados, encuentran este error y le asignan automáticamente el ; al final cuando falta, por ejemplo ShrinkSafe es un muy buen compresor y que identifica algunos errores como este.

Comentario

Estas son algunos de los problemas típicos en los que uno se puede enfrentar al momento de programar en Javascript, sin duda si de una vez por todas, se estableciera un poco el como un navegador interpreta algo, sin duda nos ahorrarian bastantes horas, con dolor de cabeza incluidos, pero se ve algo dificil.

Como sugerencia, les recomiendo instalar Firebug. Es una extensión muy buena, que funciona tanto en Firefox como en otros navegadores. Con esta extensión podemos identificar rápidamente nuestro error, además de ver como se comporta javascript, las peticiones realizadas por AJAX, etc y etc.

Obviamente dejo abierto el artículo, a comentarios, reclamos, etc., y si conocen algún error típico mas, no duden en comentarlo también.

Notas

No me referí a ningún navegador en si, siempre intente decir «en algunos navegadores», claro que los entendidos en el tema saben a que navegador me refiero.
No porque haya hecho un comentario acerca de Prototype, quiere decir que lo ocupen, en lo personal lo recomiendo bastante, pero es a su elección. Tienen buenas opciones para elegir, como por ejemplo JQuery y Mootools.

Artículo inspirado y en parte basado en Nine Javascript Gotchas por Fitzblog.com
.

Ver Videos – Te Verde – Videos 3GP – 3GP – somos tu y yo

Que fácil es AJAX con Prototype

AJAX, quien no ha oído hablar de AJAX o a leído algo acerca. Esta es una de las tecnologías fundamentales de la web 2.0 y la rama que mas se quiere aprovechar y potenciar para las próxima etapa, web 3.0. Ahora les explicare otra razón mas de porque un framework nos ayuda tanto, a optimizar recursos y ser mas productivos.

Antiguamente, y ni tan antiguo, uno creaba un largo código para ocupar ajax, por ejemplo.

function newAjax(){
   var xmlhttp=false;
   try {
      xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
   } catch (e) {
      try {
         xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (E) {
         xmlhttp = false;
      }
   }   
   if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
      xmlhttp = new XMLHttpRequest();
   }
   return xmlhttp;
}

function setContent(page, container)
{
   container = document.getElementById(container);
   ajax=newAjax();
   ajax.open("GET", "/pages/"+page,true);
   ajax.onreadystatechange=function() {
      if (ajax.readyState==4) {
         container.innerHTML = ajax.responseText
      }
   }
   ajax.send(null)
}

Si se fijan es un código extenso y que obviamente tiene errores, ya que solo es capaz de crear un solo objecto XMLHttpRequest, es decir si uno realiza dos llamadas simultaneas realizaba ambas pero se sobreescribían, teniendo resultados inesperados y desconcertadores. Pues con Prototype es tan simple como esto:

function setContent(page, container)
{
   new Ajax.Updater(container, "/pages/"+page);
}

Simplemente con una linea podemos hacer lo mismo, y aquí ya no tendremos el error que comente anteriormente. Con Ajax.Updater primero identificamos el id el contenedor que actualizaremos, después la dirección del documento que llamamos, y hay un tercer parámetro que son sus opciones, que pueden ver en mas detalle en la wiki de scriptaculous.

Como para extender mas las funcionalidades, contamos por ejemplos con Ajax.Request, que es el encargado de realizar la consulta, este no inserta el contenido devuelto automáticamente, simplemente tiene parámetros como onComplete con el cual podemos definir que hacer con el contenido, bastante practico si queremos hacer por ejemplo un sistema de identificación. Además tenemos Ajax.PeriodicalUpdater, que es muy similar a Ajax.Updater, solo que nos da un parámetro extra con el cual podemos hacer que se actualiza cada n segundos.

Si ven las opciones son varias, la herramienta esta, solo falta que la ocupes, y como dije en otro articulo, el limite solo lo pones tu.

Enlaces:

Ajax en scriptaculous
Prototype JS
.

Ver Videos – Te Verde – Videos 3GP – 3GP – somos tu y yo

Extendiendo Elementos DOM con Prototype

Sin duda el Prototype es uno de los más ocupado, y cabe reiterar que es mi favorito. En si es uno de los framework’s mas robustos y «fieles» al momento de crear nuestras aplicaciones y ocupar javascript.

Con esta librería, a parte de ayudarnos un montón en el uso de elementos DOM, AJAX, Eventos, etc., es muy fácil de extender y modificar o compatibilizar, más aun, este framework a nuestros desarrollos, por ejemplo extendiendo elementos DOM.

Para aclarar un poco mas la idea, veamos ejemplos prácticos de uso. Digamos que queremos insertar código en un div vía DOM, lo normal y cotidiano seria innerHTML pero con prototype lo podemos hacer mas fácil aun.

$('iddiv').update("hola mundo");

Ahora creemos los nuestros, imaginemos que queremos continuar el texto, seria algo así, primero creamos la extensión y después la ocupamos las veces que queramos.

//extendiendo el elemento

Element.addMethods({

   updateplus: function(element, content) {

      content = typeof content == 'undefined' ? '' : content.toString();

      $(element).innerHTML += content;

      return element;

   }

});//ahora lo probamos

$('iddiv').updateplus(', como les va?');

Esto haría que el contenido del div (id=iddvi) tenga como contenido «hola mundo, como les va?». Fácil no?, podemos hacer quizá un mensaje de advertencia utilizando la librería Effects de scriptaculous, por ejemplo:

Element.addMethods({

  flash: function(element, content) {

     content = typeof content == 'undefined' ? '' : content.toString();

     $(element).update(content);

      new Effect.Highlight(element);

      return element;

   }

});

Y el código seria tan simple como esto:

$('iddiv').flash('Error: nombre de usuario existente');

Y así con una infinidad de opciones, ya que el limite aquí solo lo pones tu.

Breve artículo inspirado por Extending the limits.

.

Ver Videos – Te Verde – Videos 3GP – 3GP – somos tu y yo

Manejando eventos del teclado con Javascript

En un foro donde soy Administrador, el cual no comentare, preguntaron como saber cuando un usuario presiona una Tecla de Función (F1, F2, F3, …) y asignarle una acción. Sin duda asignar una acción a una tecla o a una combinación de tecla es de gran ayuda cuando realizamos sistemas, como en un editor, ctrl+b equivale a iniciar o cerrar texto negrita o ctrl+s es guardar y submitear el formulario, entre otros, ¿Pero como se ocupan?.

Cada tecla tiene asignado un numero en javascript, algunos de estos son:

Tecla	Código	Tecla	Código	Tecla	Código
backspace	8	tab	9	enter	13
shift	16	ctrl	17	alt	18
pause/break	19	caps lock	20	escape	27
page up	33	page down	34	end	35
home	36	left arrow	37	up arrow	38
right arrow	39	down arrow	40	insert	45
delete	46	0	48	1	49
2	50	3	51	4	52
5	53	6	54	7	55
8	56	9	57	a	65
b	66	c	67	d	68
e	69	f	70	g	71
h	72	i	73	j	74
k	75	l	76	m	77
n	78	o	79	p	80
q	81	r	82	s	83
t	84	u	85	v	86
w	87	x	88	y	89
z	90	left window key	91	right window key	92
select key	93	numpad 0	96	numpad 1	97
numpad 2	98	numpad 3	99	numpad 4	100
numpad 5	101	numpad 6	102	numpad 7	103
numpad 8	104	numpad 9	105	multiply	106
add	107	subtract	109	decimal point	110
divide	111	f1	112	f2	113
f3	114	f4	115	f5	116
f6	117	f7	118	f8	119
f9	120	f10	121	f11	122
f12	123	num lock	144	scroll lock	145
semi-colon	186	equal sign	187	comma	188
dash	189	period	190	forward slash	191
grave accent	192	open bracket	219	back slash	220
close braket	221	single quote	222

Fuente: MediaEvent.de

Ya conociendo los números correspondientes a cada tecla solo nos basta con trabajar con Eventos en JavaScript, por ejemplo si queremos ver que tecla presiono en un input el código seria el siguiente:

<input type="text" onkeydown="tecla(event);" />

y el Javascript

<script type="text/javascript">
function tecla (e)
{
    var evt = e ? e : event;
    var key = window.Event ? evt.which : evt.keyCode;
    alert (key);
}
</script>

Podemos hacer un if y dependiendo de la tecla (según su key) realizar alguna acción, como llamar una función por ejemplo o no permitir el ingreso en el input de caracteres no permitidos, por ejemplo si queremos que en un input no ingresen letras sino solo números, el código y su función seria algo así:

El input:

<input type="text" onkeypress="return num(event);" />

El Javascript:

<script type="text/javascript">
function num(e) {
    evt = e ? e : event;
    tcl = (window.Event) ? evt.which : evt.keyCode;
    if ((tcl < 48 || tcl > 57) && (tcl != 8 && tcl != 0 && tcl != 46))
    {
        return false;
    }
    return true;
}
</script>

Si se fijan, estamos manejando eventos en tab o etiquetas, si lo quieren para un documento completo simplemente deben asignarlo al objecto document. En si asociar una tecla al documento completo es mas complejo, por el hecho de que en algunos navegadores no funciona, en otro hay que atachar el evento (addEventListener, attachEvent, etc) y también existen inconsistencia entre navegadores.

Es por esto que les presento una pequeña clase javascript que nos ayudara a manejar estos eventos, agregar eventos, quitar eventos o crear eventos con combinaciones de teclas (si combinaciones como por ejemplo ctrl+1, ctrl+shift+2, etc). La clase se llama shortcut.js y la pueden encontrar en OpenJS.

Es tan simple como por ejemplo, si quieren agregar un evento al documento el código seria el siguiente:

<script src="shortcut.js" type="text/javascript"></script>

<script type="text/javascript">
// formato shortcut.add(combinación, función[, opciones]);

shortcut.add("Ctrl+h",function() {

    alert("Hola Mundo");

});

shortcut.add("Ctrl+Shift+h",function() {

    alert("Hola Mundo te dije");

});

</script>

Una vez ingresado ese código en el head de tu documento, simplemente presiona ctrl+h y ctrl+shift+h y aparecerán los mensajes. Como vez nos puede ser muy útil, al mismo tiempo puedes asociar un evento no tan solo al documento completo, sino a un elemento en si, como un input (como veíamos anteriormente), además puedes decir si quieres que funcione sobre un formulario o no, etc., todo esto con el tercer parámetro.

Tengan en cuenta, que la clase en si creció bastante desde su primera aparición pero aun sigue estando en beta, pero no por esto quiere decir que no funcione, la clase funcione bastante bien y realiza su tarea sin complicarnos.

Enlace: Handling Keyboard Shortcuts in JavaScript
.

Ver Videos – Te Verde – Videos 3GP – 3GP – somos tu y yo

Efecto Acordeon

Ya les comentaba de una clase para realizar este efecto con el framework javascript script.aculo.us. Ahora vía Ajax Rain, descubro una nueva clase para realizarlo.

Los chicos de Deziner Folio, además creadores de dfGallery, nos muestran Simple Javascript Accordions, una clase que en lo personal me impresiono bastante por su bajo peso y su gran fluidez alcanzada y todo esto sin depender de ningún framework.

Las características notables que se comentan son:

• Su Tamaño: Tan solo pesa 1,149 bytes.
• Muy fácil integración.
• No depende de ningún framework, realiza todo por si solo.
• Tiene la posibilidad de usar como un Sistema de Tab. (miren este ejemplo)
• Compatible con prácticamente todos los navegadores.

Su uso es realmente simple, su forma de iniciación es así:

new Accrodian(id,speed,class);

En donde:

• id: Quiere decir la ID de donde quiere generar el efecto acordeón.
• speed: La velocidad con la cual quieres que fluyan las capas.
• class: clase asociada al acordeón (aquí puedes modificar muchas cosas, por ejemplo si quieres horizontal, vertical, como tab, etc, hasta donde llegue tu imaginación).

En lo personal lo probé en varios navegadores, (Firefox, IE, opera, safari) y funciono en todos bastante bien, sin duda una gran clase que realiza lo que uno quiere sin desperdiciar nada, dale un vistazo a los ejemplos y te darás cuenta de la potencia de este script.

Enlace: Simple Javascript Accordions – Demo – Descarga (vía AjaxRain)
.

Ver Videos – Te Verde – Videos 3GP – 3GP – somos tu y yo

Efecto Acordion con Script.aculo.us

Este efecto, en lo personal, lo había visto en la librería mootools y me encanto, por el mismo hecho lo he tenido que ocupar en su versión para prototype (que es la librería que utilizo con el framework script.aculo.us). Aunque no es lo mismo que si crean un Acordion especial para esta magnifica librería, incluso ya existe uno para JQuery y otro para Rico.

En fin, de los creadores de lightWindows, que hace un tiempo les comentaba, nos llega Accordion v1.0, el cual sin duda es lo que estaba esperando. Tiene una fluidez bastante lograda, gracias a los avances de las iberias de scriptaculous, funciona muy bien tanto en formato vertical y horizontal, y obviamente cumple su cometido con un muy buena pinta en todos los navegadores, o por lo menos los mas usados.

Sin duda una gran clase de parte de stickmanlabs que vale la pena usar.

Enlace: Accordion v1.0
.

Ver Videos – Te Verde – Videos 3GP – 3GP – somos tu y yo

JSValidate: Validación de Formularios con Prototype y Script.aculo.us

Hace mucho tiempo vengo usando script.aculo.us con prototype como mi librería favorita para el uso de AJAX, Animaciones y manejo de eventos DOM en general.

El uso de estas librerías nos ayudan bastante al momento de manejar Javascript en general, sobre todo al usar AJAX o al usar Eventos DOM, ya que estos son los que mas dolores de cabeza nos dan al momento de probar en distintos navegadores, pues estas librerías nos ayudan a corregir esos errores y asegurarnos de que todo funcione como debe ser.

Por lo general, anexo a las clases que trae script.aculo.us, ocupo otras mas, por ejemplo.

• Sweet Titles: esta me permite agregar pequeños tooltips a los enlaces.
• Really easy field validation with Prototype: Me permite validar formularios.
• Lightbox: Para crear SlideShows de imágenes.

Entre otras clases que he ido creando y espero mas adelante ir dando a conocer para que las prueben.

Desde que lanzaron la ultima versión de script.aculo.us, por una inexplicable razón, el validador que ocupo para los formularios empezó a mandar errores, y por lo visto no la han actualizado aun, así que me puse a buscar otra pronto que sea muy parecida y pueda manejar, y he llegado a JSValidate.

JSValidate, es una clase bastante buena que he estado probando y me ha dado buenos resultados, es bastante rápida y tiene un estilo único al momento de mostrar los errores. Sacando el máximo de provecho de recursos es capaz de hacer un recorrido y reconocer todos los elementos que debe validar por medio de la clase por ejemplo:

<input type=»text» name=»q» class=»jsrequired» />

Con eso indicas que ese campo no debe ir vacío.

<input type=»text» name=»nombre class=»jsrequired jsvalidate_alpha» />

Con eso indicas que el campo no debe ir vacío y además validar que solo ingresen caracteres alfabéticos y no números.

La clase trae los siguiente parámetros para validar:

• jsrequired.
• jsvalidate_number
• jsvalidate_digits
• jsvalidate_alpha
• jsvalidate_alphanum
• jsvalidate_email
• jsvalidate_uscanzip
• jsvalidate_usstate
• jsvalidate_usphone
• jsvalidate_creditcard
• jsvalidate_ssn
• select-notfirst

De todas maneras, los nombres son editables y además si tienes conocimientos en Expresiones Regulares, puedes agregar todas las que quieras.

Sin duda una gran clase para tomar en cuenta y ver sus avances. Aunque en lo personal, prefiero la que tengo por otras razones que mencionare otro día.

PD: Pido disculpas por los dias que no postee nada o casi nada, es que formatee mi PC y cambie a Ubuntu y he tenido unos problemas, pero ya espero estar pronto de vuelta.
.

Ver Videos – Te Verde – Videos 3GP – 3GP – somos tu y yo

120+ Herramientras para Desarrolladores Web

Mashable ya nos tiene acostumbrados con sus extensas listas de recursos, pues hoy lanzaron otro artículo con un listado de más de 120 recursos para los desarrolladores web, herramientas o sitios que nos pueden aportar gran ayuda cuando estemos algo confusos en nuestros desarrollos.Todos estos recursos están muy bien ordenados en categorías y con su descripción correspondiente. Los recursos de esta esplendida lista son:

Referencia y Recursos Generales

• TechCheatSheets
• Creative Commons
• Yahoo! Design Pattern Library

Herramientas Generales de Programación

• TurboDbAdmin
• Springloops
• GENNIT
• Launchpad
• Coda
• roScripts
• Kaosweaver
• Widgetbox

Herramientas de Construcción

• Coghead
• Iceberg On Demand
• Nenest
• ActiveGrid
• caspio
• LongJump
• rBuilder Online

Snippets, Buscadores y Repositorios (que por cierto sin querer hoy mismo publique una lista de buscadores)

• krugle
• QuickRef
• All The Code
• Ohloh
• Koder
• Naslu
• CodeFetch
• Google Code Search
• UCodit
• scriptvote
• DZone Snippets
• Codase
• OSZone

Frameworks y Ambientes de Desarrollo

• BackBase Ajax 360
• Maguma Workbench
• qooxdoo
• WebORB
• Workspace
• Clearspring
• Nenest
• WebGUI
• Apache Cocoon
• Apache Struts
• AppFuse
• Aranea
• Grails
• Spring
• Tapestry
• Apple WebObjects
• Webwork
• Wicket
• ZK Project
• Helma

Mashups y APIs

• OpenKapow
• gotAPI
• Dapper
• Programmable Web API Dashboard
• Zimki
• Mashery
• OpenLayers
• Popfly
• Google Mashup Editor
• Yahoo! Pipes

Administradores de Proyectos, Testeos y Bug Tracking

• spigit
• Rainbow9
• Lighthouse
• Unfuddle
• 16bugs
• betabug
• Porchlight
• BugJuice
• JTrac
• Bugja
• JIRA
• Ticketish

Herramientas y Recursos Ruby y Ruby on Rails

• Ruby on Rails
• Locomotive
• Instant Rails
• Hobo
• Aptana RadRails
• FiveRuns
• Nitro

Herramientas y Recursos Ajax

• ajaxload.info
• dojo
• MochiKit
• Rico
• Aptana
• AjaxPatterns
• Script.aculo.us
• Mini ajax
• Yahoo! UI Library
• Prototype
• mooTools
• Fjax

Herramientas y Recursos PHP

• PHP Object Generator
• Symfony
• MODx
• CakePHP
• Zend Studio
• FirePHP
• PHP Coder
• DBG | PHP Debugger and Profiler
• Maguma Studio
• Aukyla
• BlueShoes
• CodeIgniter
• Horde Application Framework
• PhpOpenbiz
• Qcodo
• Seagull PHP Framework
• Xaraya
• Zoop

Herramientas y Recursos Flash

• flashvillage
• Dontclick.it
• Flash Developer Center

Herramientas y Recursos Python

• Pylons
• Django
• Zope
• Webware
• Twisted
• TurboGears
• Spyce
• Nevow
• Karrigell
• CherryPy

Como ven es una lista muy extensa, que valía la pena replicar para ustedes, para mas información y descripciones ingrese al artículo en Mashable.

Enlace: Web Development Toolbox: 120+ Web Development Resources
.

Ver Videos – Te Verde – Videos 3GP – 3GP – somos tu y yo

25 Técnicas CSS para realizar esquinas redondeadas

Cada día se hace mas habitual de uso de esquinas redondeadas o de box sin esquinas cuadradas, para los que usamos mozilla tenemos una simple propiedad CSS con la que podemos lograr ese efecto, pero por desgracia no se puede apreciar en otros navegadores. Actualmente técnicas para lograr esto son muchas, algunas con sólo CSS puro hasta incluso algunas opciones ocupando javascript para más seguridad (en algunos casos).En mis lecturas diarias, me encuentro vía digg con CSS Juice, un sitio en el cual han publicado un artículo dando a conocer 25 técnicas de como lograr este efecto, que como mencione anteriormente, cada vez se ocupa mas, si hasta en los anuncios de Google Adsence se puede hacer.

Sin más que agregar, les describo la lista a los manuales para lograr este efecto.

Técnicas

• ThrashBox – crea cajas con esquinas redondeadas con un efectos de sombra.
• Even More Rounded Corners With CSS– técnica de diálogos con esquinas redondeadas fluidas y soporte para border con transparencia Alpha y degrades.
• DomCorners – una técnica muy simple para conseguir esquinas redondeadas.
• virtuelvis.com Rounded corners in CSS
• Transparent custom corners and borders version 2 – una técnica para crear esquinas redondeadas personalizadas y borde con una transparencia Alpha opcional.
• CSS Teaser Box with rounded corners – por Roger Johansson, el mismo autor de Transparent custom corners and borders version 2.
• News List – fue diseñado para mostrar enlaces de noticias recientes.
• CSS Liquid Round Corners
• Anti-aliased Nifty Corners – basado en Nifty Corners y modificado por Steven Wittens.
• Simple Box by tedd – otra simple técnica para crear esquinas redondeadas.
• CSS and round corners making accessible menu tabs – técnica para crear menú con tab con un estilo de esquinas redondeadas.
• CSS and round corners borders with curves
• Airtight Corners – genera cajas con esquinas redondeadas usando solo una imagen.
• Mountaintop Corners – una manera más fácil para crear esquinas redondeadas decentes.
• Editsite Rounded Corners – creando esquinas redondeadas con javascript.
• Create a rounded block or design with CSS and XHTML – crear bloques redondeados fácilmente.
• Resizable box with freely stylable corners and surface – cajas redimensionables con esquinas redondeadas.
• Smart Round Corners
• Lean and Clean CSS boxes
• Broader Border Corners
• Snazzy Borders
• Rounded corners in CSS by Adam Kalsey
• curvyCorners – un script Javascript para crear esquinas redondeadas on-the-fly solo en elementos DIV.
• Nifty Corners – una solución basada en CSS y Javascript para obtener esquinas redondeadas con imágenes.
• quinncrowley.com – basado sobre una combinación de pixy y Kalsey

Generadores de equinas redondeadas

• http://www.roundedcornr.com/
• http://www.spiffycorners.com/ – manera simple de generar el CSS y HTML que necesitas para usar esquinas redondeadas usando imágenes o javascript.
• http://tools.sitepoint.com/spanky/ – una técnica experimental usando solo CSS para producir ’cajas con esquinas redondeadas y contenido’ semántico.
• http://spiffybox.com/

Tutoriales

• Rounded Corners with CSS and JavaScript por Simon Willison
• Rounded Corners without Images: A Nifty Corners Inspiration
• CSS Design: Creating Custom Corners & Borders por Søren Madsen
• Rounded Corner Boxes the CSS3 Way por Andy Budd

Enlace: 25 Rounded Corners Techniques with CSS
.

Ver Videos – Te Verde – Videos 3GP – 3GP – somos tu y yo