feed twitter facebook LinkedIn facebook

jQuery » Animar elementos con jQuery

Una cosa que podemos hacer de forma muy sencilla con jQuery es ejecutar animaciones de elementos. Y es que jQuery nos proporciona una función para animar elementos. Esta función es .animate().

Pero vamos por pasos. Lo primero será insertar el elemento que queremos animar. Por ejemplo, una imagen. Así que colocamos la imagen en la página.

  1. <img src="contenido.png" alt="logo" id="logo" height="50px"/>

Lo siguiente será decidir en qué momento queremos realizar la animación. En nuestro caso la secuencia será la siguiente. Cuando pasemos el ratón sobre la imagen agrandaremos dicha imagen. Y cuando salgamos de la imagen con el ratón, devolveremos la imagen al tamaño original.

Así que vamos a utilizar la gestión de eventos que nos proporcionan los métodos .mouseover() y .mouseout(). Será desde estos eventos dónde lancemos la animación.

  1. $(document).ready(function(){
  2. $("#logo").mouseover(function(){...});
  3. $("#logo").mouseout(function(){...});
  4. });

Vemos que los métodos se lanzan sobre el elemento al que hemos dado el id "logo".

Ahora ya pasamos a realizar la animación de la imagen. Y como habíamos comentado al principio del artículo utilizaremos el método .animate().

El método .animate() recibe como parámetros diferentes de cosas. Pero el primer parámetro, que es el más importante, recoge las propiedades que queremos modificar en el elemento para la animación. Pero vemos el resto.

.animate( properties [, duration] [, easing] [, complete] )

Vemos que además de los parámetros CSS a modificar podemos establecer: la duración, que indica en milisegundos cuánto tiempo durará la animación. La función que podemos ejecutar durante la animación es la que se referencia en el parámetro easing y con el parámetro complete podemos indicar qué función queremos ejecutar al finalizar la animación.

Pero volviendo a nuestro ejemplo, lo haremos de la forma más sencilla. Es decir, solo modificando las propiedades de la imagen. Como indicamos que al entrar con el ratón sobre la imagen la haríamos más grande, lo que vamos a realizar es incrementar su tamaño, es decir, su atributo height. Y justamente lo contrario cuando salgamos de la imagen.

Así nuestro código jQuery quedará de la siguiente forma:

  1. $(document).ready(function(){
  2. $("#logo").mouseover(function(){
  3. $(this).animate({height:'150px'});
  4. });
  5. $("#logo").mouseout(function(){
  6. $(this).animate({height:'50px'});
  7. });
  8. });

Puedes probar el resto de propiedades del método animate, por ejemplo, si queremos hacer más lento cuando la imagen se haga grande.

  1. $("#logo").mouseover(function(){
  2. $(this).animate({height:'150px'},2000);
  3. });

¿Qué se te ocurre hacer con la función .animate() de jQuery?

Java » Conocer la resolución de la pantalla con Java

septiembre 14, 2010 por Víctor Cuervo 2 Comentarios Imprimir Imprimir

Una cosa importante cuando estamos haciendo aplicaciones gráficas en Java es conocer la resolución de la pantalla en la cual se ejecuta nuestra aplicación. Y es que estaremos de acuerdo que no es lo mismo lanzar una aplicación en una resolución de 800x600 que lanzarla en una resolución de 1600x1200.

Para conocer la resolución de la pantalla con Java nos apoyaremos en el framework AWT. La clase que representa el framework AWT en general es Toolikt. Toolikt es una abstracción y permite enganchar con implementaciones nativas del framework.

Lo primero que haremos será instanciar el framework:

  1. Toolkit t = Toolkit.getDefaultToolkit();

Una vez instanciado el framework, utilizaremos un método del Toolikt para conocer la resolución de la pantalla. En concreto utilizaremos el método .getScreenSize(). Este método devolverá una clase Dimensions, la cual sirve para albergar las dimensiones de cualquier componente de AWT.

  1. Dimension screenSize = Toolkit.getDefaultToolkit().getScreenSize();

Ya solo nos quedará acceder a las propiedades height y width de Dimensions para conocer la resolución de nuestra pantalla.

  1. System.out.println("Tu resolución es de " + screenSize.width + "x" + screenSize.height);

Sencillo y útil programa.

JavaScript » Abrir una ventana que no se pueda redimensionar

noviembre 10, 2009 por Víctor Cuervo 7 Comentarios Imprimir Imprimir

Una de las cosas que podemos hacer con el método .open() de Javascript a la hora de abrir una ventana en Javascript es forzar a que la nueva tenga un tamaño fijo y que además el usuario no pueda redimensionar.

Para ello simplemente tendremos que jugar con los valores de la características asociadas a la ventana.

Pero primero recordemos como es el método .open() del objeto Window:

  1. window.open (url:string,nombreVentana:string,caracteristicas :string)

De las características de la ventana nos centraremos en height y width para darle un tamaño fijo a la vetana y en resizable para que al abrir la ventana, esta no se pueda redimensionar.

En las dos primeras propiedades utilizamos el tamaño en pixeles, mientras que en la segunda utilizaremos el valor false como indicador para no redimensionar.

El código que nos quedará será el siguiente:

  1. window.open("http://www.w3api.com", "nuevo", "width=400,height=400,resizable=false");

Una pequeña línea de código en Javascript que nos puede ser muy útil.

SVG » Dibujar un rectángulo con SVG

marzo 2, 2009 por Víctor Cuervo 2 Comentarios Imprimir Imprimir

Dibujar un rectángulo con SVG es una cosa bastante fácil ya que el rectangulo es una de las figuras estándar del lenguaje SVG. Para ello necesitaremos utilizar la etiqueta RECT

Los dos primeros atributos importantes para nuestro ejemplo son la altura y ancho del rectangulo. Para ello utilizaremos los atributos de la etiqueta RECT: width y height.

  1. <rect width="200" height="100" fill="red"/>

Otra cosa que podemos hacer es la de posicionar el rectangulo dentro del lienzo. Para ello tendremos que definir las coordenadas X,Y del lienzo. El nombre de los atributos es el mismo: X e Y.

  1. <rect x="50" y="50" width="200" height="100""/>

Por último vamos a darle color a la cosa. En este caso, utilizaremos el atributo fill, indicándole el color que queremos usar (rojo en este caso):

  1. <rect fill="red">

Aunque podríamos darle el color mediante un estilo y el atributo style:

  1. <rect style="fill:red;"/>

El código que nos quedaría al final sería algo parecido a lo siguiente:

  1. <rect x="50" y="50" width="200" height="100" fill="red"/>

CSS » Definir el tamaño de una imagen con CSS

diciembre 9, 2007 por Víctor Cuervo 4 Comentarios Imprimir Imprimir

Lo más normal es apoyarnos en el lenguaje HTML para definir el tamaño de una imagen. Si bien, otra alternativa es utilizar estilos CSS para definir el alto y ancho de una imagen.

En este caso podemos definir una clase CSS, la cual aplicaremos dependiendo de las necesidades.

Continue reading Definir el tamaño de una imagen con CSS...

HTML » Alto y ancho de una imagen con HTML

diciembre 4, 2007 por Víctor Cuervo 7 Comentarios Imprimir Imprimir

Cuando aprendemos a escribir lenguaje HTML para crear nuestras páginas web aguantaremos poco creando páginas web con solo texto y estaremos deseosos de insertarle alguna imagen para darlas colorido.

La etiqueta HTML que nos permite poner imágenes en nuestra página web es IMG. La línea de código que necesitaríamos sería la siguiente:

  1. <IMG src="mifoto.jpg"/>

Vemos que el atributo src permite indicar el nombre de la imagen que queramos cargar. Este nombre puede ser directamente el de la imagen o bien una ruta relativa o absoluta más el nombre de la imagen.

Por defecto, el tamaño de la imagen que carga es su tamaño original.

Si queremos modificar el tamaño deberemos de utilizar los atributos HTML width y height, los cuales nos permiten modificar el ancho y el alto de la imagen respectivamente. A estos atributos les tendremos que dar unos valores numéricos que indiquen el valor en pixels que queremos reflejar.

Así, si queremos poner la imagen a 100x100 pixels, la línea de código quedaría de la siguiente forma:

  1. <IMG src="mifoto.jpg" width="100" height="100"/>

HTML » Cargar un vídeo AVI, ASF o WMV en mi página web

agosto 29, 2007 por Víctor Cuervo 25 Comentarios Imprimir Imprimir

Si tuviésemos que catalogar los formatos de vídeo propietarios de Microsoft podríamos hablar de los tres siguientes: AVI, ASF y WMA.

  • AVI "Audio Video Interleave" el primero de los formatos. Muy expandido en todas las plataformas Microsoft. Está siendo superado por las nuevas tecnologías.
  • ASF "Advanced Streaming Format" utilizado para web streaming.
  • WMV “Windows Media Video” que es el formato asociado para ser utilizado con el reproductor Windows Media Player de Microsoft. Este software está disponible en varias plataformas, incluido SUN Solaris y Macintosh.

La idea de este ejemplo es ver como poner uno de estos vídeos dentro de una página web.

Continue reading Cargar un vídeo AVI, ASF o WMV en mi página web...

HTML » Combos con imagenes

diciembre 5, 2006 por Víctor Cuervo 2 Comentarios Imprimir Imprimir

Mientras que esperamos a que XForms se convierta en el estándar soportado por los navegadores para el desarrollo de formularios (espero que XHTML 2.0 lo de el impulso necesario), nos vemos obligados a realizar verdaderas virguerías con los formularios de HTML 4.01.

En este caso lo que queremos es que nuestros combos de selección nos aparezcan con imágenes y que pueda seleccionar una de ellas. ¿Es esto posible?

La respuesta a esta pregunta es difícil. Podríamos decir que imposible no es. Pero que el soporte que se da desde los navegadores a este caso es mínimo. Para que nos hagamos una idea, solo funciona con los motores Mozilla (FireFox y compañia).

La idea es la siguiente. En primer lugar, utilizando hojas de estilo CSS definiremos tres elementos cuadrado,circulo y triangulo. Estos tres elementos tendrán una imagen de fondo representativa. Para indicar la imágen de fondo de un elemento utilizamos el atributo background-image.

Veamos como quedaría definido:

  1. .circulo {
  2. background-image: url(circulo.jpg);
  3. height: 50px;
  4. width: 50px;
  5. background-repeat: no-repeat;
  6. }
  7. .triangulo{
  8. background-image: url(triangulo.jpg);
  9. height: 50px;
  10. width: 50px;
  11. background-repeat: no-repeat;
  12. }
  13. .cuadrado{
  14. background-image: url(cuadrado.jpg);
  15. height: 50px;
  16. width: 50px;
  17. background-repeat: no-repeat;
  18. }

Hay que indicar que hemos utilizado otros atributos. El primero es el alto y ancho (height y width respectivamente). La idea es tener imágenes uniformes de 50x50 pixels.

El otro atributo es background-repeat, al cual hemos dado un valor de no-repeat. Esto significa que solo se mostrará la imagen de fondo una vez. Y es que si usamos este estilo dentro de un área de 100x50 veremos que, por defecto nos aparece duplicada la imagen.

Ahora solo nos quedará definir el combo y asignar los estilos necesarios en cada opción. De la siguiente forma:

  1. <option class="cuadrado">Cuadrado</option>
  2. <option class="circulo">Circulo</option>
  3. <option class="triangulo">Triangulo</option>
  4. </select>

Y ya está. Ya tenemos nuestro combo con imágenes. El cual, en FireFox, nos quedará de la siguiente manera:

Combo con imagenes