La propiedad prototype nos permite añadir nuevas propiedades y métodos a un objeto. Con lo que cada una de las clases (instancias del objeto) contará con estas nuevas propiedades y métodos agregados con prototype.

Ahora, ¿para qué nos puede servir agregar nuevas propiedades y métodos a un objeto?… para enriquecer aún más dicho objeto sin la necesidad tener que editarlo. Supongamos que trabajamos a partir de un framework, el cuál ya está definido y queremos añadirle nuevas funcionalidades puntuales para un caso en particular; este es un claro caso dónde recurrir a prototype.

Veamos un ejemplo práctico; supongamos que tenemos un objeto creado con el nombre “person” en el cual tenemos definidas 4 propiedades (name, city, age y profession) a las cuales se les asignan los valores recibidos por parámetro al objeto cada vez que se crea una instancia.

Seguir leyendo »

Publicado por: negro

 

Las funciones callback (“devolución de llamada” para los amigos) tienen una gran utilidad a la hora de programar, principalmente en lenguajes de animación como Javascript o Action Script.

Esta vez vamos a analizar dos ejemplos de funciones callback; en el primero vamos a implementar una función callback utilizando el framework Jquery y en el segundo veremos como podemos construir estas funciones.

Seguir leyendo »

Publicado por: negro

 

Canvas es un elemento de HTML 5 que permite representar gráficos dinámicos a traves de javascript en un área determinada.

¿Qué cosas se pueden llegar ha realizar con canvas?

Desde las representaciones gráficas más simples (como lo es este ejemplo) hasta los videojuegos más complejos. Ver un ejemplo de videojuego: Galactic Plunder Game

Para ello utilizamos la etiqueta “canvas” a la cual le especificamos un área determinada:


Este texto será desplegado si tu navegador no soporta HTML 5

Primero determinamos el ancho y alto del canvas, también especificamos un identificador (id) con el que haremos referencia desde javascript. Entre la etiqueta de apertura y de cierre colocamos un texto que se visualizará en los navegadores que no sean compatibles con HTML 5 y por ende con la etiqueta canvas.

Seguir leyendo »

Publicado por: negro

 

El próximo 9 de marzo comienza el curso “Editor profesional de sitios web”.
Para más información pueden descargar el PDF con la presentación del mismo.

Editor profesional de sitios web

Descargar PDF

Categoría: Web Comments2 Comentarios »

Publicado por: negro

 

En una publicación pasada habíamos visto la construcción de un menú desplegable 100% en CSS que por otra parte utilizaba las bondades de CSS3 para establecer un diseño más detallado que incluía el uso de esquinas redondeadas, degradados, sombras y más.

En esta oportunidad y gracias a la colaboración de Agustín Vignoli le agregamos la posibilidad de que los ítems puedan desplegarse de forma animada.

Menú desplegable CSS3 fue la publicación en donde aprendimos a construir este menu, ahora sólo vamos a explicar como le agregamos animación.

Este menu no utiliza javascript para animarse, simplemente agregaremos las siguientes propiedades CSS las cuales explicaremos línea por línea.

La propiedad utilizada para animar es transition en sus diferentes modalidades con el objetivo de ser admitida por todos los navegadores.

Veamos los distintos valores de la propiedad transition

all: se aplica a todos los elementos seleccionados.
0.5s: el la duración en segundos de la animación.
ease: tipo de animación.

Si tienen ganas de aprender más acerca de las distintas transiciones de CSS, pueden ampliar el conocimiento en su sección de la W3C.

dd li {
   display: block; 
   height: 0; /* Esta será la altura inicial de cada uno de los subitems */
   overflow: hidden; /* Oculto el contenido que queda por fuera de los li, ya que tienen 0 de alutra */
   -webkit-transition: all 0.5s ease; /* Chrome y Safari */
   -moz-transition: all 0.5s ease; /* Mozila */
   -ms-transition: all 0.5s ease; /* Algunas versiones de IE */
   -o-transition: all 0.5s ease; /* Opera */
   transition: all 0.5s ease;
   behavior: url(pie.htc); /* HTC es un formato de archivo creado por Microsoft del tipo XML que almacena distintos comportamientos para su correcto funcionamiento en algunas versiones de Internet Explorer */
}
dd:hover li { 
   height: 37px; /* Esta será la altura final de cada uno de los subitems */
}

Descargar archivos

Categoría: Web Comments1 Comentario »

Publicado por: negro