Apoya Ecoogler.com el buscador ecológico
El Blog donde expongo lo que me encuentro en la red

Archive for the Javascript category

FitFlash – Script para adaptar páginas web en flash a todas las resoluciones

by davidMHe on September 3rd, 2008

Viendo la necesidad de poder adaptar una página web diseñada en flash a todas las resoluciones, primeramente pense que era imposible pero buscando en Google me encontré con FitFlash y realmente me parecio maravilloso.

Les dejo la información aquí para que la visiten y disfruten de este gran Script ;)

Visitar la web: FitFlash

Tipmage – Creando Notas Sobre Las Imágenes Al Estilo Flickr

by davidMHe on July 12th, 2008

Tipimage es una clase en javascript para crear y manejar Notas sobre las imágenes, tiene una gran similitud por no decir que igual al efecto que maneja Flickr para incluir Notas sobre las imágenes.

Tipimage permite marcar porciones rectangulares en una imagen y atar una descripcion a cada una de ellas.

La descripcion sera mostrada como Tooltip cuando el raton este sobre la seccion correcta de la imagen.

La clase puede trabajar de 2 maneras: En modo normal solo muestra los tooltips, mientras que el otro modo permite que los usuarios varien el tamaño del area activa y puedan editar el texto.

Tipimage maneja estilo en cascada (CSS) llamado externamente para poder modificar el aspecto de las areas activas.

Tipimage ha sido testeado en Internet Explorer 5.5+, Firefox 1.0+, safari 2.0+ y Opera 7.6+

Visitar la web: Tipimage

Prototip 2 – Crea Elegantes Tooltips Con Prototype

by davidMHe on May 30th, 2008

Con Prototip 2 puedes crear elegantes tooltips para tu página web o Blog dandole un toque de buen diseño a tus creaciones.

Lo bueno de Prototip 2 es que es fácil de implementar, además tienes el control total sobre la posición de los tooltips en donde los deseas colocar y puedes configurar los bordes como mejor lo prefieras.

En la actualidad es soportado en navegadores Internet explorer 6+, Firefox 2+, Safari 2+ y Opera 9.25.

Visitar la web: Prototip 2

Creando Cajas De Dialogo En Javascript A Nuestro Gusto

by davidMHe on April 25th, 2008

Muchas veces hemos querido personalizar las cajas de dialogo que nos aparecen cuando se produce un error o una alerta, pero no es posible cambiar el aspecto de estas a menos que tengamos algún theme en nuestro sistema operativo (que no es la idea).

Con esta nueva herramienta diseñada en Javascript, podemos personalizar las cajas de dialogo que se generan desde nuestro sitio web y hacerlas a nuestro gusto.

Este script ha sido testeado por el creador en IE 6/7, Firefox 2/3, Opera y Safari por lo que pienso que tiene buen soporte para los diferentes navegadores.

Visitar la web: Custom Javascript Dialog Boxes


Hot Potatoes – Utilidad Para Crear Exámenes Y Ejercicios

by davidMHe on April 21st, 2008

Hot Potatoes es un conjunto de seis herramientas que pueden ayudar a educadores, profesores, y escritores a publicar material educativo en la Web.

hot3.gif

Las pequeñas herramientas de Hot Potatoes te permiten crear multi-elección interactiva , respuesta corta, rellenar en el espacio, crucigramas, y ejercicios de desordenación de una frase usando HTML y JavaScript sin necesidad de tener ningún conocimiento ni de HTML ni de JavaScript.

hot2.jpg

JBC te permite crear exámenes “tipo test” donde cada pregunta puede tener hasta cinco respuestas, y donde cada número de ellas pueden ser correctas o no. Cada estudiante recibe un porcentaje de acierto después de cada pregunta acertada.

hot1.jpg

JQuiz te facilita el diseño de preguntas con la posibilidad de que el estudiante rellene con palabras o frases como respuesta.

JCloze crea ejercicios para rellenar en el espacio. Hasta 100 respuestas correctas pueden especificarse para cada espacio en blanco, además la posibilidad de incluir una pequeña pista para cada espacio.

JCross diseña crucigramas que se pueden rellenar on-line. Puedes usar parrillas de hasta 20×20 letras.

JMix te permite crear ejercicios de ordenación de frases. Puedes especificar hasta 100 respuestas correctas distintas.

JMatch crea ejercicios de emparejamiento u ordenación. Una lista de objetos fijos aparecen a la izquierda (pueden ser imágenes o texto), y una lista de objetos desordenados a la derecha.

Hot Potatoes soporta el uso de acentos y te facilita la opción de acceder al código de las páginas para cualquier modificación.

Visitar la web: Hot Potatoes

jsProgressBarHandler – Creación De Barras De Progreso En JavaScript

by davidMHe on January 22nd, 2008

Con jsProgressBarHandler podemos crear atractivas barras de progreso para implementar en aplicaciones web o en donde queramos.

percent1.jpg

Internamente el jsProgressBarHandler consiste en 2 clases: una jsProgressBar-class que es una clase que define la barra de progreso y jsProgressBarHandler-class que explora la pagina en HTML para los elementos span con el progressBar-className y automáticamente crea las barras de progreso.

Realmente es una gran herramienta que podemos usar a menudo para mostrar tanto la carga de una pagina o carga de datos de alguna aplicación.

Visitar la web: jsProgressBarHandler

mapper.js – Librería Para Crear Sectores Activos En Mapas De Imágenes Y Botones

by davidMHe on January 17th, 2008

mapper.js le permite al usuario crear sectores activos en mapas de imagenes de una manera facil y sencilla. Podemos decir que no solo se usa en mapas de imágenes sino también en botones para que al pasar el cursor sobre ellos, este genere una iluminación.

mapper1.gif

En la actualidad mapper.js es soportado por Mozilla Firefox 1.5+, Opera 9+, Safari y IE6+.

En la pagina oficial existe un manual de implementación bastante sencillo de entender lo que hara que puedas hacerlo funcionar rápidamente.

Visitar la web: mapper.js

CSS Text Wrapper – Textos Con Estilo

by davidMHe on December 11th, 2007

Navegando en la red me encuentro con esta aplicación que permite generarle formas o estilos a algún texto en especial de una forma fácil y sencilla con CSS y Javascript.

textw1.jpg

Muchas veces hemos visto en los periódicos que algunas noticias vienen con un gráfico y lo bordea el texto, este estilo le da una forma diferente a la noticia y la hace mas llamativa.

textw2.jpg

CSS Text Wrapper trabaja en 3 fases principales:

  1. Como queremos el diseño: Por medio de unas barras, acomodamos estas con puntos en donde queremos que se hagan los cruces y así hacer la forma que necesitemos.
  2. Generando los CSS y los Divs: Como el proceso es automático, mientras haces los cambios en el diseño, estos valores se van cambiando.
  3. Javascript: Para culminar todo el proceso, se genera un Javascript con las coordenadas necesarias.

Finalmente lo que debemos hacer es implementar los 3 códigos en donde los vayamos a incluir y listo :)

Si queremos ver algunos ejemplos de como trabaja el Css Text Wrapper, podemos visitar la sección se Ejemplos

Visitar la web: CSS Text Wrapper

Starbox – Librería Para Crear Un Sistema De Rating Con Prototype

by davidMHe on November 28th, 2007

Starbox permite que crees fácilmente cualquier sistema de rating usando apenas una imágen en png. La librería es construida sobre Prototype Javascript Framework v1.6. Para algunos efectos adicionales puedes agregar Scriptaculous, aunque no es necesario.

starbox1.jpg

En la parte de abajo de la pagina oficial de Starbox podrás observar como hacer la implementación tanto de Starbox, como de los CSS en tu pagina.

Es una librería bastante interesante que podrás usar en cualquier proyecto para hacer calificaciones de contenidos u otras cosas, teniendo en cuenta que las calificaciones deberían de ser guardadas en una base de datos para posteriores análisis.

Visitar la web: Starbox

(E)2 Photo Gallery – Galería De Imágenes Con Mootools

by davidMHe on November 10th, 2007

(E)2 Photo Gallery es una galería de imágenes dinámica desarrollada principalmente con Mootools y php, compacta, modular y orientada a objetos.

d2integal2.jpg

Esta diseñada para permitir la subida de imágenes a una carpeta específica lo que la hace muy interactiva, funcional y agradable.

d2integal1.jpg

d2integal3.jpg

Su diseño es bastante interesante y se puede adecuar a 5 colores diferentes según la necesidad de cada usuario, tan solo dando clic en los diferentes iconos.

Visitar la web: (E)2 Photo Gallery


Todo el material expuesto en este blog esta bajo licencia Creative Commons - 2007


Estas conectado con la IP 38.107.191.105

Hecho con Wordpress