Jorge Vallejo de Castro Blog » javascript

Animación de particulas

Jorge Vallejo — Wed, 18 Nov 2009 08:33:40 +0000

Últimamente estoy experimentando mucho con la animación de partículas, el video que podéis ver esta creado mediante una expresión matemática, con la que se consigue que describa círculos.
Os dejo el Código :
radius = 350; // the radius of the circle cycle =3 // number of seconds to complete a circle; higher value = slower if(cycle ==0){cycle = 0.001;} //avoids a “divide by zero” error phase = 0; // initial angle in degrees from bottom reverse = 1; // 1 for ccw, -1 for cw x = Math.sin( reverse * degrees_to_radians(time * 360 / cycle + phase)); y = Math.cos(degrees_to_radians(time * 360 / cycle + phase)); add(mul(radius, [x, y]), position)

Primeros pasos con jquery Efectos Transparencia

Jorge Vallejo — Wed, 25 Jul 2007 10:29:00 +0000

¿Qué es jquery?
jQuery es una libreria de JavaScript, pensada para interactuar con los elementos de una web por medio del DOM.(Document Object Model).
¿Por que usuarla?
Por que es bastante sencilla de utilizar, por aglutina en un unico archivo un monton de funcionalidades y por que enrique bastante tus webs.

Un ejemplo practico de esta libreria

Imaginemos como es mi caso, que queremos darle una apariencia de dinamismo a la pagina pero sin usar flash, por ejemplo vamos a hacer algo sencillo, que aparecan poco a poco los elementos de un menu.
1º Paso) Descargar la libreria jquery
2º Paso) en el head hacer la llamada a la libreria

3º Paso) Ponemos etiquetas id a nuestro menu,

Enlace1
    Enlace2
    Enlace3
    Enlace4
    Enlace5
    Enlace6

4º Paso) En el head

¿Que hemos hecho?
Primero hemos utilizado la funcion ready, que se pone en marcha mientras se carga la pagina, despues con $(”li”).hide() ocultamos todos los elementos li ,ya que para recoger el elemento que queremos usar, podemos hacer lo simplemente con $(”nombredeelemento”) o $(”nombredelId”), asi pues, una vez que hemos ocultado todos, los hacemos aparecer con la funcion fadeIn, dando distintos tiempos de menor a mayor para que aparezcan secuenciadamente.

menus css con rollover sin javascript

Jorge Vallejo — Wed, 04 Jul 2007 08:31:00 +0000

Un poco cansado de utilizar siempre los mismos tipos de menus y pensando en crear uno que fuera graficamente bonito, accesible y sin javascript me he encontrado con una serie de menus cuya sencillez, y belleza me han conquistado,podeis verlos aqui.
Acontinuacion una pequeña explicacion de su funcionamiento.
Lo que ocurre con estos menus es que hay una imagen que contiene los dos estados normal, y sobre, gracias al css al posicionarnos sobre el enlace lo que hacemos es cambiar las coordenadas de la imagen, de forma q nos aparezca el segundo estado.
Imagen inicial
#tabsK a {
float:left;
background:url(”tableftK.gif”) no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsK a span {
float:left;
display:block;
background:url(”tabrightK.gif”) no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
Imagen sobre (hover)
#tabsK a:hover span {
color:#FFF;
background-position:100% -42px;
}
#tabsK a:hover {
background-position:0% -42px;
}
#tabsK a:hover span {
background-position:100% -42px;
}
Como vemos necesitamos dos imagenes, una que sera la de la esquina izquierda, y otra todo lo demas, se hace de esta forma para que la imagen se adapte al texto, hasta cierto limite que sera igual a la anchura de la imagen, pero que son sufientes caracteres.
Lo grande que tiene este menu ademas es que esta creado con una lista, de forma que si quitamos el estilo, seguimos entendiendo q se trata de un menu.
Es en mi opinión uno de los mejores sistemas de menu que he visto nunca.

Firebug q gran extension

Jorge Vallejo — Wed, 13 Jun 2007 15:35:00 +0000

Creo que ya me he referido a el Firebug en otro comentario (me gusta mas usar comentario a post). Pero es que es una herramienta ideal para el desarrollo, fundamentalmente por su depurador javascript que marca los errores en la linea y te devuelve donde esta, cuantas paginas abre visto que no se ven en el firefox por q tienen un error de javascript gigante, pero tambien la herramienta que permite ver el codigo fuente comprimido en etiquetas, y que “pinta” la zona en la que estas, ademas tan bien es muy util para ver imagenes dentro del codigo.
La unica pega q le veo es que no me gusta el logo del escarabajo de fuego o insecto de fuego o como se traduzca firebug. Por lo demas es altamente recomendable tenerlo.

Grupos Cs3

Jorge Vallejo — Tue, 05 Jun 2007 07:45:00 +0000

Continuo con mi intencion de crear aquellos grupos de Google que me gustarian que existieran, asi he creado :
Javascrip en Español
Action Script 3 Español
Flash cs3 Español
Dreamweaver Cs3 Español
Con ello me gustaría, q se formara una comunidad de desarrollo en espeñol, de forma que las busquedas habtiuales q haces los desarrolladores web, fueran mucho mas accesibles.

Php problemas acentos y eñes

Jorge Vallejo — Wed, 09 May 2007 14:28:00 +0000

Algunas veces puede pasarte que al extraer el texto de una base de datos y escribirla en php , de repente los acentos y eñes, no te salgan bien en la pagina, a mi me paso utilizando la tecnologia AJAX al volcar con javascript, pos bien la solucion es simplemnte usar la funcion php que codifica la cadena, y hace que salga con acentos y ñs.
Tambien me gustaría hacer una defensa de la ñ , que me parece no solo una letra q deberiamos de defender ya que es genuinamente española, sino que me es una letra que queda muy bien en diseño, y sino mirar la cantidad de carteles que al anunciar eventos españoles la han utilizado.

Ampliar imagen oscurecer fondo javascript

Jorge Vallejo — Fri, 23 Mar 2007 09:10:00 +0000

He encontrado un efecto muy chulo para cuando te pinchas y amplias una imagen, se llama
>lightbox Y os remito a su pagina , ya q el codigo esta muy bien optimizado y es muy facil de usar, ademas han mejorado otro poco en la segunda version >lightbox2 . Lo unico malo es q las paginas estan en inngles asi q en breve hare un articulo con la traducion y mas comentarios sobre este efecto q realmente me ha encando, si teneis mucha curiosidad sobre como funciona el tema aparte ir a las paginas , os dire que le hecheis un vistazo a DOM q es una forma de programar en javascript para poder acceder a elemento html, y asi crearlos o modificarlos cuando queramos o lo haga el usuario.

Mostrar / Ocultar un Div problemas en Firefox

Jorge Vallejo — Mon, 05 Mar 2007 08:32:00 +0000

Estaba creando una web donde ocultaba / mostraba capas al hacer click sobre ellas, cual es mi sorpresa al ver que en firefox el javascript no hacia nada.
Atencion al codigo
function muestra(cual, cuantos){
for (i=1;i<=cuantos;i++){
eval(”bloque”+i+”.style.display=’none’”);

}
eval(cual+”.style.display=’block’”);

}
El problema es que solo funciona para Explorer, en su lugar teneis que usar este:
function muestra(cual, cuantos){
for (i=1;i<=cuantos;i++){

document.getElementById(”bloque”+i).style.display=’none’;
}
document.getElementById(cual).style.display=’block’;
}

Es una funcion que recibe dos parametros uno cual , es el div que se mostrara, para ello hay que nombrarlos secuenciados “

Y el otro parametro cuantos es el numero entero de divs que tengais.
Lo que hace:
Muestra la capa selecionada al llamar a la funcion en un evento por ejemplo click , y oculta todas las demas.