Tutorial de DOM

ByLuis

Algo que considero necesario a la hora de programar en Javascript es conocer el DOM. Aunque hay gente que prefiere la creación de objetos mediante innerHTML, incluso hay estudios sobre cual es más eficiente, siempre viene bien saber utilizar el DOM para poder manejar elementos HTML.
Si no controlas el uso del DOM, aquí os dejo un tutorial bastante claro que os ayudará a meteros de lleno. De todas formas, tambien recomendaros una página XULPlanet, la cual es una de mis favoritas para buscar documentación sobre los objetos HTML.
W3C DOM
Vía / dzone

Similar Posts

gotApi: colección de APIs

ByLuis

gotapi.pngYa hace tiempo hablamos de una web de referencias para programadores, y como cuanta más variedad de servicios parecidos tengamos, mejor que mejor. En esta ocasión os mostramos un directorio de APIs, que accediendo a las páginas originales, nos muestran las referencias que necesitamos.
Dentro de las distintas APIs encontramos referencias sobre HTML, Javascript (Prototype incluida), CSS, XML, C++, PHP, bases de datos, Java, Apache, ActionScript y mucho más que va creciendo poco a poco.
Lo que más me gusta es poder elegir el origen de referencia del API, por ejemplo para HTML puedes mirar en w3.org o en msdn.microsoft.com, aunque me hubiera gustado que se pudiera buscar también en xulplanet.com.
gotAPI.com
Vía / dzone

Puntos a tener en cuenta a la hora de elegir framework de Javascript

ByLuis

Actualmente existen muchos framworks de Javascript, normalmente la gente tiene su favorito y es el que suele usar siempre, pero para aquellos que no sepan cual elegir estos consejos le pueden venir bien:

  • Rapidez: los usuarios esperan agilidad a la hora de mostrar la página, da igual lo bien diseñada que esté o los efectos que muestren. Por ello es muy importante que el framework tenga buen rendimiento y que sea rápido. Puedes comprobar las velocidades de 3 frameworks aquí.
  • Tamaño del js: el tamaño es imporante en dos aspectos: lo que tarda en cargarse en la página y el ancho de banda que consume. Yo añadiría que en los frameworks que te permiten seleccionar que componentes queremos añadir, solo seleccionemos los necesarios. A parte, siempre viene bien comprimir el js.
  • Documentación: es como aprender un lenguaje nuevo, da igual que sepas Javascript, no se parecerá demasiado a lo que hayas usado anteriormente. Cuanto mejor esté documentado mejor.
  • Comunidad: lo más importante de un proyecto open source es la comunidad que hay detrás de ella. Los miembros de la comunidad aportan ayuda, código, ejemplos y mucho más que nos facilitará el trabajo.
  • Módulos: como ya he dicho anteriormente, los módulos nos permiten incluir solo las funcionalidades que deseamos, ahorrando en rendimiento.
  • Quién lo usa: el hecho de que sitios importantes usen un framework es un reconocimiento a su calidad.

8 Considerations For Choosing Your Javascript Framework

Capturar la tecla CONTROL mediante Javascript

ByLuis

A la hora de darle una funcionalidad más enfocada a aplicaciones de escritorio (por ejemplo con un editor WYSIWYG), suele ser necesario usar combinaciones de teclas CONTROL+tecla para ejecutar ciertas acciones.

Capturar la combinacion CTRL+tecla en javascript es muy sencillo:

var isCtrl = false;
document.onkeyup=function(e){
if(e.which == 17) isCtrl=false;
}
document.onkeydown=function(e){
if(e.which == 17) isCtrl=true;
if(e.which == 83 && isCtrl == true) {
// acción para CTRL+S y evitar que ejecute la acción propia del navegador
return false;
}
}/

La explicación es sencilla, cuando se pulsa CTRL+tecla se producen dos eventos de teclado, por lo que no es posible saber si se ha ejecutado en una sola llamada. Por ello primero comprobamos si se pulsa la tecla CTRL y se pone un flag a verdadero y luego dependiendo de la tecla que queramos, si se detecta que se pulsa y está el flag activo, se realiza la acción. Hay que devolver false para que el navegador no ejecute la acción que tiene por defecto. Cuando se deja de pulsar la tecla CTRL se pone el flag a false.

How to create Ctrl+Key shortcuts in Javascript

|

Ya tenemos nuevo ThickBox

ByLuis

De muchos es conocido Lightbox, y la popularidad que produjo a su autor en su momento cuando se hizo público. Básicamente es uno de los efectos que más se están viendo en páginas webs a la hora de mostrar imágenes. No hablamos de nada nuevo ni lo descubrimos ahora.
pimp_my_thickbox_20.jpg
Y como alternativa a Lightbox tenemos ThickBox 2.0 mucho más ligera y potente con sólo 27Kb de código. ¿Qué son 27Kb que sirven para cosas como esta?.

ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal.

|

Efecto fadding como en Flash con jQuery

ByLuis

Un efecto llamativo que se suele hacer con Flash es realizar una transición entre dos imágenes cuando se posiciona sobre ella.
fadding.png
El efecto es sencillo, disponemos de una cabecera (H1) en el que hay un elemento con posicionamiento absoluto y que contiene la imagen final, y un enlace (el que se suele usar para ir al home) que tiene la imagen original mediante estilos.
El proceso es el siguiente: cuando se posiciona el ratón sobre el enlace se crea efecto fadeout y cuando se sale se crea el efecto fadein. Ambos efectos se hacen con tiempo de retardo para dar continuidad.
Todo el código en el post original.
Creating a fading header
Vía / CSS Globe