Foros del Web » Programando para Internet » Javascript »

Esto es posible en javascript

Estas en el tema de Esto es posible en javascript en el foro de Javascript en Foros del Web. Buenas: Mirando ideas, he topado con www.niubie.com , y me gustaría saber si el slide de imágenes que tiene al principio se puede hacer con ...

  #1 (permalink)  
Antiguo 22/02/2009, 03:10
 
Fecha de Ingreso: agosto-2004
Mensajes: 106
Antigüedad: 19 años, 8 meses
Puntos: 3
Esto es posible en javascript

Buenas:

Mirando ideas, he topado con www.niubie.com, y me gustaría saber si el slide de imágenes que tiene al principio se puede hacer con javascript, porque he mirado por ahí y no encuentro nada parecido. La idea sería la misma, es decir, imagenes que rotan y a la derecha una especie de índice pequeño.

Si no se puede hacer por JS, alguna opción alternativa para html.

Muchas gracias y un saludo.
  #2 (permalink)  
Antiguo 22/02/2009, 05:46
 
Fecha de Ingreso: noviembre-2008
Mensajes: 39
Antigüedad: 15 años, 5 meses
Puntos: 0
Respuesta: Esto es posible en javascript

con jquery se puede. es mas dificil maquetar la pagina que hacer esos efectos.

es una mezcla del evento click, efecto fade y funcion attr('src',ruta), muy sencillo
  #3 (permalink)  
Antiguo 22/02/2009, 07:15
 
Fecha de Ingreso: agosto-2004
Mensajes: 106
Antigüedad: 19 años, 8 meses
Puntos: 3
Respuesta: Esto es posible en javascript

Eso de "jquery" ¿qué es? ¿un programa que hace esto o cómo?.

Lo digo porque yo de javascript ni papa.

Muchas gracias.
  #4 (permalink)  
Antiguo 22/02/2009, 14:23
venkman
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Esto es posible en javascript

No sólo es que se pueda hacer con Javascript, es que está hecho con Javascript. No tienes más que ver el código fuente de la página.

En concreto en esa página utilizan la librería Mootools.
  #5 (permalink)  
Antiguo 23/02/2009, 00:50
Avatar de stock  
Fecha de Ingreso: junio-2004
Ubicación: Monterrey NL
Mensajes: 2.390
Antigüedad: 19 años, 10 meses
Puntos: 53
Respuesta: Esto es posible en javascript

busca un plugin ya que dices que no tienes experiencia, pero hacerlo es my fácil para un desarrollador experimentado, pero se te complicaría si no sabes al respecto, asi que te aconsejo busques un plugin, ó si te interesa aprender ocmo hacerlo hace algún tiempo hice un tutorial al respecto en mi blog:

http://www.crysfel.com/index.php/200...on-mootools12/

lo puedes ver, esta muy sencillo ;)

saludos
  #6 (permalink)  
Antiguo 23/02/2009, 02:30
Avatar de buzu  
Fecha de Ingreso: octubre-2006
Ubicación: San Francisco, CA
Mensajes: 2.168
Antigüedad: 17 años, 6 meses
Puntos: 122
Respuesta: Esto es posible en javascript

Todo depende de lo que quieras lograr, si lo que quieres es causarte un dolor de cabeza al actualizar, entonces utiliza simplemente javascript. Si quieres pensar mas a futuro, usa una base de datos y ajax. Un consejo, no te metas con Jquery o Mootols. Muchos dicen que es cool y demás, pero la verdad es que nunca sabras lo que realmente estas haciendo. Aprende Javascript bien. Si me aguantas, en esta semana te preparo un ejemplo...
__________________
twitter: @imbuzu
  #7 (permalink)  
Antiguo 23/02/2009, 04:42
venkman
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Esto es posible en javascript

Cita:
Muchos dicen que es cool y demás, pero la verdad es que nunca sabras lo que realmente estas haciendo.
Hombre, buzu, yo creo que eso depende mucho de cada uno y de lo que quiera. Te puedes quedar en el "copia esto en tu página y ya tienes el efecto que quieres" o puedes "saber lo que estás haciendo" tanto si utilizas una librería como si copias y pegas un ejemplo que te preparan, ¿no?

Ninguna de las dos cosas creo que se pueda describir como "aprender Javascript". Pero por otro lado es que a lo mejor uno sólo quiere meter un determinado elemento en su página y no le preocupa realmente aprender más.
  #8 (permalink)  
Antiguo 23/02/2009, 12:27
Avatar de SPAWN3000  
Fecha de Ingreso: marzo-2008
Ubicación: Bogota
Mensajes: 858
Antigüedad: 16 años, 1 mes
Puntos: 15
Respuesta: Esto es posible en javascript

Yo también recomiendo hacer todo por uno mismo...(Pero, cuando ya tengas algo de experiencia, puedes estudiar algo sobre librerías existentes(Con la finalidad de mejorar tus metodos->basado en optimización, gestión de memoria, reducción de código...), Sumado al apoyo que te brindan en este foro...

Por que?
- Al principio es un poco difícil, y algunos que hemos sidos acostumbrados al sistema convencional de La POO, nos resistimos al sistema por prototipos de Javascript(Me ha pasado). Pero al final comienzas ha crear tus propias clases, funciones y todo lo que necesitas...Y nadie conoce tu librería mas que tu... y podes darle la flexibilidad que desees(total, tu la creaste), y todo se hace más fácil que trabajando con herramientas externas. Y lo mejor de todo, comienzas a independizarte... De lo contrario, te pasaras la vida preguntando, copiando y pegando, y repitiendo la misma rutina... Sin lograr nunca algo propio, o medianamente complejo.

Un concejo de alguien que también esta aprendiendo.
  #9 (permalink)  
Antiguo 23/02/2009, 12:46
Avatar de stock  
Fecha de Ingreso: junio-2004
Ubicación: Monterrey NL
Mensajes: 2.390
Antigüedad: 19 años, 10 meses
Puntos: 53
Respuesta: Esto es posible en javascript

pues si.... antes de iniciar con alguna librería es bueno saber hacer las cosas por uno mismo, hace ya unos 8 años que escribi mi primer "hola mundo" en javascript ahora siempre utilizo librerías como jQuery, mootools, Ext JS, etc... y realmente mejora tu desempeño en cuanto a tiempo se refiere, que a final de cuentas se traduce en DINERO, dinero que se ganas mas rápido.

saludos
  #10 (permalink)  
Antiguo 23/02/2009, 12:51
Avatar de SPAWN3000  
Fecha de Ingreso: marzo-2008
Ubicación: Bogota
Mensajes: 858
Antigüedad: 16 años, 1 mes
Puntos: 15
Respuesta: Esto es posible en javascript

Cita:
Iniciado por venkman Ver Mensaje
Hombre, buzu, yo creo que eso depende mucho de cada uno y de lo que quiera. Te puedes quedar en el "copia esto en tu página y ya tienes el efecto que quieres" o puedes "saber lo que estás haciendo" tanto si utilizas una librería como si copias y pegas un ejemplo que te preparan, ¿no?

Ninguna de las dos cosas creo que se pueda describir como "aprender Javascript". Pero por otro lado es que a lo mejor uno sólo quiere meter un determinado elemento en su página y no le preocupa realmente aprender más.
No comparto tu idea de:
Código:
 y no le preocupa realmente aprender más(Solo copiar y pegar?).
Me parece un concepto muy vacío, que no persigue ningún fin... sería como desarrollar páginas con tan solo copy-paste...Que si se puede, claro. Puedes comenzar hacerlo desde el html...Un bonito menú?Lo copio,Una tabla bonita?La copio, Una cabecera llamativa?La copio...y mucho mas(Así logre mi primera pagina web a mis 17-18 en el Bloc de Notas de Win98). Y al final tendrás una web a base de parches. Algo así como un Frankenstein online (Creo que la dirección ya no existe-o la publicaría para que se diviertan).

Claro, Respeto las diferencias y se que algo exagerado, y podría estar equivocado.
  #11 (permalink)  
Antiguo 23/02/2009, 12:58
Avatar de SPAWN3000  
Fecha de Ingreso: marzo-2008
Ubicación: Bogota
Mensajes: 858
Antigüedad: 16 años, 1 mes
Puntos: 15
Respuesta: Esto es posible en javascript

Cita:
Iniciado por stock Ver Mensaje
pues si.... antes de iniciar con alguna librería es bueno saber hacer las cosas por uno mismo, hace ya unos 8 años que escribi mi primer "hola mundo" en javascript ahora siempre utilizo librerías como jQuery, mootools, Ext JS, etc... y realmente mejora tu desempeño en cuanto a tiempo se refiere, que a final de cuentas se traduce en DINERO, dinero que se ganas mas rápido.

saludos
Y aun escribes el Hola mundo?

Es broma, no busco ofender...disculpa si lo hago.
  #12 (permalink)  
Antiguo 23/02/2009, 13:32
venkman
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Esto es posible en javascript

Creo que no se ha entendido bien lo que quería decir.

Mi comentario surge a raíz de lo dicho por buzu, que si usas una librería "nunca sabras [sic] lo que realmente estas haciendo". Partiendo de ahí, hago dos reflexiones:

1. Que eso puede ser cierto o no, independientemente de que uses una librería o no.

Creo que es innegable la enorme cantidad de veces en que se copia y pega un "trozo" de Javascript siguiendo unas instrucciones más o menos para dummies y nadie se preocupa ni por aprender ni por enseñar el significado de eso.

Así que no es que haya aprendizaje o deje de haberlo por utilizar una librería o no, sino por la actitud (y necesidad) de quien lo haga.



2. Que no necesariamente cualquiera que quiera añadir un determinado efecto o elemento en su página quiere aprender en profundidad Javascript.

Y ojo, que no entro a valorar que eso sea bueno o malo o ninguna de las dos. Lo único que digo es que hay mucha gente que lo único que quiere es tener un conocimiento a un determinado nivel, y no le preocupa o le concierne saber lo que ocurra por debajo de ese nivel.

Por esto, te puede parecer un concepto muy vacío, SPAWN3000, pero no es una idea mía con la que tengas que estar de acuerdo o no. Me he limitado a comentar algo que ocurre, no a valorarlo.



Ni siquiera he hecho mención a lo que parece sugerir buzu cuando aparta a las librerías pareciendo asumir que la única razón para usarlas es que es cool.
  #13 (permalink)  
Antiguo 23/02/2009, 14:30
Avatar de SPAWN3000  
Fecha de Ingreso: marzo-2008
Ubicación: Bogota
Mensajes: 858
Antigüedad: 16 años, 1 mes
Puntos: 15
Respuesta: Esto es posible en javascript

Tu mensaje parece algo molesto por mi comentario venkman, si lo entendiste de esa manera realmente no es mi intención y me disculpo si es el caso...Pero como dije al final 'Respeto las diferencias' y naturalmente tu posición-total para eso es el foro:Para entrar en discusión. Pero, mi punto de vista parte de que muchas personas ingresan hacen una pregunta, y tu no le das las herramientas, le das el modelo terminado...sin pie ha discusión o interacción. Lo mismo ocurre con una librería, se aprende a manejar y se debe adaptar a las condiciones y limitaciones que ella establece...y si no se conoce bien javascript mucho menos la librería y siempre se depende de los que si conocen el lenguaje. Naturalmente es solo una forma de ver las cosas.

Un saludo, y agradezco que compartas tu opinión.
  #14 (permalink)  
Antiguo 23/02/2009, 14:31
Avatar de buzu  
Fecha de Ingreso: octubre-2006
Ubicación: San Francisco, CA
Mensajes: 2.168
Antigüedad: 17 años, 6 meses
Puntos: 122
Respuesta: Esto es posible en javascript

Creo que no entendiste el sentido de mi respuesta venkman. A lo que me refiero es que aun cuando sepas programar en Js, cuando usas una librería no sabes en realidad que es lo que está pasando tras bambalinas. Que rayos es lo que hace una librería para que el $() te devuelva una referencia a un elemento cuyo id le has pasado a la función como parámetro? (un ejemplo sencillo para ilustrar el punto ya que la mayoría ha de saber lo que el $() hace). Claro que puedes examinar la librería para ver lo que hace, entonces te darás cuenta que estas cargando un montón de código que no utilizas. Código que sería útil si estuvieras desarrollando una RIA complicada o algún efecto muy complejo, pero hablando en serio, es eso lo que haces con tu día a día? Yo en lo personal, si me voy a sentar horas tras la compu programando algo complejo, prefiero hacerlo en php. Dejo Js para cositas sencillas o efectitos que luego se requieren. Pero la verdadera programación y la lógica de una app se la dejo a php.

El punto es que muchas veces el uso de frameworks es como usar un avio para ir a la tienda de la esquina. Que se logra compatibilidad? no lo dudo, pero lo mismo se puede hacer con simple JS siendo cuidadoso ya que al final de cuentas ese FW no es más que simple JS y cuando digo simple no me refiero a simpleza, sino a pureza (tiene sentido eso?)
__________________
twitter: @imbuzu
  #15 (permalink)  
Antiguo 23/02/2009, 16:24
venkman
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Esto es posible en javascript

Cita:
A lo que me refiero es que aun cuando sepas programar en Js, cuando usas una librería no sabes en realidad que es lo que está pasando tras bambalinas
Es que es exactamente lo mismo, buzu. ¿Te quedas en el copiar y pegar el código que te dan o intentas averiguar qué significa? ¿Llamas a $ sin más o intentas averiguar qué hace? ¿Depende del hecho de usar una librería o no? No, de lo que depende es de tu actitud, interés y necesidad.

De la necesidad también, porque sí, por supuesto que usar una librería tiene también su coste, pero lo importante es que ni ese coste ni lo que te soluciona la librería son absolutos en el universo. Tu necesidad será lo que defina lo que sea mejor usar. Y sí, en muchos casos es mucho mejor ir a la tienda de la esquina. Es más barato y más fiable. Es también más fácil de mantener en el futuro. ¿Dejas de saber cómo funciona por dentro? Bueno, es posible (o no, depende de ti), pero a cambio tienes otras ventajas.

(Y ojo, que soy un gran aficionado a hacerme mis propias cosas. Pero una cosa no quita la otra. Que a mi me guste hacer X, no quiere decir que X sea la mejor solución para todas las personas y todas las situaciones).


Por cierto, resulta un tanto... curioso que digas "prefiero hacerlo en PHP". Lo digo porque, en el fondo, ¿qué rayos hace mysql_result cuando le pasas un identificador que has sacado de mysql_query? ¿Cómo funciona strstr entre bambalinas? ¿Acaso no es PHP también un nivel de abstracción que queda oculto? Un nivel por debajo o por encima, pero ambos son niveles de abstracción. La única diferencia que veo es que tú pones el límite de conveniencia en un punto dado y otra persona lo puede poner en otro.



Y no estoy de acuerdo contigo, SPAWN3000. Creo que existen casos, ocurren situaciones, hay personas que no, no necesitan dedicar un año a aprender un lenguaje para poder añadir unos cuantos elementos o efectos a una página. Esa necesidad es lo que define si te convendrá usar una librería o no. Pero es que yo no le he dado ningún modelo terminado. Tan sólo he dicho "esto está hecho así". Es más, ha preguntado "se puede hacer con Javascript" y lo que he contestado es "no sólo se puede, es que está hecho con Javascript". no creo haber dado a nadie ningún tipo de solución.
  #16 (permalink)  
Antiguo 23/02/2009, 18:37
Avatar de buzu  
Fecha de Ingreso: octubre-2006
Ubicación: San Francisco, CA
Mensajes: 2.168
Antigüedad: 17 años, 6 meses
Puntos: 122
Respuesta: Esto es posible en javascript

Tienes razón venkman, pero sin embargo, una cosa es el grado de abstraccion del lenguaje de programación en si y mismo javascript no está exento de ello. Que hace alert()? y getElementById()? Y después me dirás que que hace el navegador para hacer que JS funcione y después me dirás que que hace el lenguaje en el que fue creado el navegador y así sucesivamente hasta que llegemos al punto en que me preguntes por lo que hace un 1 o un 0 en un microchip. Sin embargo, el hecho de que un lenguaje de programacion ya tiene un cierto grado de abstración no significa que podemos if por ahi agregando más layers. Por supuesto que no descarto el merito de los FW, pero si el uso irresponsable que se ha hecho de ellos. Se presentan como una maera de aprender a programar y a hacer efectos super cool en 2 horas cuando la realidad es que aprender a programar toma tiempo y re quiere un desarrollo de la mentalidad de la persona al cual no todos están acostumbrados. Siempre he dicho que lo malo no es el FW en si, sino las malas practicas que estos fomentan (eso sin contar el numero de "programadores" que vienen totalmente perdidos a que les resolvamos su problema cuando se dan cuenta que JQuery y Mootools no son compatibles).

Queda claro que tambien estoy en contra de las malas practicas que se fomentan por algunos programadores en JS.

Ahora, con respecto a esto:

Cita:
hay mucha gente que lo único que quiere es tener un conocimiento a un determinado nivel, y no le preocupa o le concierne saber lo que ocurra por debajo de ese nivel.
Tienes toda la razón, asi como hay gente a quien no le importa lo que pasa en el motor de su coche y por eso se quedan a medio camino, no cambian el aicete y descomponen el coche, o cualquier otra cosa. Es epligroso conformarse con saber como manejar, hay que tener por lo menos una ide de como resolver problemas y para resolverlos hay que saber el layer principal y en este caso, mi amigo, ese layer principal es JS (o al menos el más fundamental al que podemos acceder).
__________________
twitter: @imbuzu
  #17 (permalink)  
Antiguo 24/02/2009, 01:46
Avatar de stock  
Fecha de Ingreso: junio-2004
Ubicación: Monterrey NL
Mensajes: 2.390
Antigüedad: 19 años, 10 meses
Puntos: 53
Respuesta: Esto es posible en javascript

Cita:
Iniciado por SPAWN3000 Ver Mensaje
Y aun escribes el Hola mundo? .....
jejejejejje... pues si, a cada rato, pero ahora de tecnologías como Hibernate, JPA, programación orientada a ASPECTOS, Adobe Air y herramientas que van saliendo, creo que nunca dejaré de hacer el "Hola mundo"

saludos
  #18 (permalink)  
Antiguo 24/02/2009, 02:27
venkman
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Esto es posible en javascript

Cita:
Tienes toda la razón, asi como hay gente a quien no le importa lo que pasa en el motor de su coche y por eso se quedan a medio camino, no cambian el aicete y descomponen el coche, o cualquier otra cosa
Igual hay millones y millones de personas a quienes no les importa lo más mínimo cómo funciona el motor de su coche y se limitan a cambiar el aceite cuando toca, hacer las revisiones cuando tocan y sin saber cómo funciona el motor, tienen el coche en buen estado. De hecho, esto es lo que hace la mayoría de la gente.
  #19 (permalink)  
Antiguo 24/02/2009, 08:54
Avatar de SPAWN3000  
Fecha de Ingreso: marzo-2008
Ubicación: Bogota
Mensajes: 858
Antigüedad: 16 años, 1 mes
Puntos: 15
Respuesta: Esto es posible en javascript

Cita:
Iniciado por venkman Ver Mensaje
Es que es exactamente lo mismo, buzu. ¿Te quedas en el copiar y pegar el código que te dan o intentas averiguar qué significa? ¿Llamas a $ sin más o intentas averiguar qué hace? ¿Depende del hecho de usar una librería o no? No, de lo que depende es de tu actitud, interés y necesidad.

De la necesidad también, porque sí, por supuesto que usar una librería tiene también su coste, pero lo importante es que ni ese coste ni lo que te soluciona la librería son absolutos en el universo. Tu necesidad será lo que defina lo que sea mejor usar. Y sí, en muchos casos es mucho mejor ir a la tienda de la esquina. Es más barato y más fiable. Es también más fácil de mantener en el futuro. ¿Dejas de saber cómo funciona por dentro? Bueno, es posible (o no, depende de ti), pero a cambio tienes otras ventajas.

(Y ojo, que soy un gran aficionado a hacerme mis propias cosas. Pero una cosa no quita la otra. Que a mi me guste hacer X, no quiere decir que X sea la mejor solución para todas las personas y todas las situaciones).


Por cierto, resulta un tanto... curioso que digas "prefiero hacerlo en PHP". Lo digo porque, en el fondo, ¿qué rayos hace mysql_result cuando le pasas un identificador que has sacado de mysql_query? ¿Cómo funciona strstr entre bambalinas? ¿Acaso no es PHP también un nivel de abstracción que queda oculto? Un nivel por debajo o por encima, pero ambos son niveles de abstracción. La única diferencia que veo es que tú pones el límite de conveniencia en un punto dado y otra persona lo puede poner en otro.



Y no estoy de acuerdo contigo, SPAWN3000. Creo que existen casos, ocurren situaciones, hay personas que no, no necesitan dedicar un año a aprender un lenguaje para poder añadir unos cuantos elementos o efectos a una página. Esa necesidad es lo que define si te convendrá usar una librería o no. Pero es que yo no le he dado ningún modelo terminado. Tan sólo he dicho "esto está hecho así". Es más, ha preguntado "se puede hacer con Javascript" y lo que he contestado es "no sólo se puede, es que está hecho con Javascript". no creo haber dado a nadie ningún tipo de solución.
No, lo que no comparto es la frase, creo que perdiste el hilo:
- y no le preocupa realmente aprender más...(Mi punto parte desde el sentido de vista del conocimiento, y el objetivo de un foro), Así de sencillo.

Pero ya creo que es suficiente, nos estamos sentando a prestar mas importancia a nuestras diferencias, cuando lo que importa es el lenguaje y la ayuda que se pueda brindar... Yo no me inscribí aquí para ganar enemistades, y todo por una pequeña indiferencia, siempre prefiero amistades... Pero si me interesa la experiencia de otros, sus opiniones y claro también que aprueben o desaprueben mis ideas-no podemos estar de acuerdo en todo...Siento mucho si ofendí ha alguien y nuevamente pido disculpas, pero preferiría que estas diferencias las abordáramos no tan acaloradamente y mantener presente el contexto:No estamos hablando de coches, ni de cambio de aceite, ni de diferencias de cuatro tiempos y dos tiempos, ni de pistones, ni revoluciones...Si os gustan los autos o motocicletas, o la música, el deporte..., podríamos compartir esas experiencias en otro lugar...Pero esto es javascript y desarrollo web. y la pregunta cual era?, ha si: Esto es posible en javascript un rotador de imágenes tipo www.niubie.com.

Al final, les envío un cordial saludo.
  #20 (permalink)  
Antiguo 24/02/2009, 14:55
Avatar de buzu  
Fecha de Ingreso: octubre-2006
Ubicación: San Francisco, CA
Mensajes: 2.168
Antigüedad: 17 años, 6 meses
Puntos: 122
Respuesta: Esto es posible en javascript

como te dije venkman, se que hay gente que se vive así todo el tiempo, pero nunca se sabe cuando se te va a parar el coche a media noche en algun lugar no muy amigable. Siempre es mejor estár preparado...
__________________
twitter: @imbuzu
  #21 (permalink)  
Antiguo 25/02/2009, 01:38
 
Fecha de Ingreso: agosto-2004
Mensajes: 106
Antigüedad: 19 años, 8 meses
Puntos: 3
Respuesta: Esto es posible en javascript

Gracias a todos por las respuestas.
Sin ánimo de crear discrepancias y/o malos rollos entre foreros (no creo que sea este el caso), pero se agradecería algun tipo de ejemplo sobre lo que comenté.
La idea es que la actualización sea rápida (normalmente será 1 ó 2 veces a la semana como mucho).

Un saludo.
  #22 (permalink)  
Antiguo 25/02/2009, 15:37
Avatar de buzu  
Fecha de Ingreso: octubre-2006
Ubicación: San Francisco, CA
Mensajes: 2.168
Antigüedad: 17 años, 6 meses
Puntos: 122
Respuesta: Esto es posible en javascript

Te digo, estoy trabajando en un ejemplo, pero dame tiempo que con la escuela y el trabajo la verdad que queda muy poco tiempo libre...
__________________
twitter: @imbuzu
  #23 (permalink)  
Antiguo 27/02/2009, 10:38
 
Fecha de Ingreso: agosto-2004
Mensajes: 106
Antigüedad: 19 años, 8 meses
Puntos: 3
Respuesta: Esto es posible en javascript

Cita:
Iniciado por buzu Ver Mensaje
Te digo, estoy trabajando en un ejemplo, pero dame tiempo que con la escuela y el trabajo la verdad que queda muy poco tiempo libre...
Tranquilo, faltaría más que encima te metiera prisa.
Muchísimas gracias.

Salu2.
  #24 (permalink)  
Antiguo 27/02/2009, 11:04
Avatar de SPAWN3000  
Fecha de Ingreso: marzo-2008
Ubicación: Bogota
Mensajes: 858
Antigüedad: 16 años, 1 mes
Puntos: 15
Respuesta: Esto es posible en javascript

Cita:
Iniciado por fidelio Ver Mensaje
Tranquilo, faltaría más que encima te metiera prisa.
Muchísimas gracias.

Salu2.
buzu, ya merito?...
  #25 (permalink)  
Antiguo 27/02/2009, 13:31
Avatar de buzu  
Fecha de Ingreso: octubre-2006
Ubicación: San Francisco, CA
Mensajes: 2.168
Antigüedad: 17 años, 6 meses
Puntos: 122
Respuesta: Esto es posible en javascript

jajajaja... para ser sincero lo empecé el lunes como a las 2:00, mi bro llegó como a las 2:14 y dejé la coosa a un lado, después con los deberes, la escuela y el trabajo, ya ni tiempo me dió, no te digo esto para que pienses que no me interesa, solo para que te des cuenta que tan atareado ando estos días, pero justo ahora tengo un rato para seguirle a ese asunto... espero poder subirtelo hoy o mañana, pero no prometo nada...

Saludos.
__________________
twitter: @imbuzu
  #26 (permalink)  
Antiguo 27/02/2009, 17:50
Avatar de buzu  
Fecha de Ingreso: octubre-2006
Ubicación: San Francisco, CA
Mensajes: 2.168
Antigüedad: 17 años, 6 meses
Puntos: 122
Respuesta: Esto es posible en javascript

Cita:
buzu, ya merito?...
Ya,
aqui está:

Explico mi proceso de desarrollo por si a alguno le sirva:

1) abro un editor de textos (textedit) y pienso en mi plan de trabajo, despues del algunas leves modificaciones y pensar algunas tecnicas quedo con esto:
Cita:
PLANEACION DE EFECTO FADE IN AND OUT EN ELEMENTOS HTML

necesito las funciones:

*init()
-asigna la funcionalidad a los onclick de los distintos enlaces
-obtiene referencia de los elementos necesarios
-esconde todos los elementos excepto el activo.

cambiarPrincipal()
-accionar fadeout()

fadeout()
-hace el degradado de la imagen principal
-dispara fadein()

fadein()
-hace el desvanecido de entrada de la imagen principal.
Ahi tengo ya mi layout de como quiero que funcione el javascript, es buena idea hacerlo de esa manera de modo que sepas a donde vas y que camino seguirás de otro modo terminas haciendo puras barbaridades.

2) Me olvido de JS por un rato, me concentro en la parte importante, el XHTML. Como quiero que mi efecto se degrade en favor del usuario, lo hago todo desde un principio asumiendo que todo estuvo mal y por alguna razon el usuario no puede usar JS. Supongamos lo que está entre los comentarios es lo que nos regresa una consulta a una base de datos:

Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>fade In and Out</title>
	<link rel="stylesheet" href="estilos.css" type="text/css" media="screen" />
	<script type="text/javascript" src="fade.js"></script>
</head>
<body onload='init()'>
	<!-- ...Arriba tu sitio... -->
	<div id="contenedorG">
		<ul id="menu">
			<li><span></span><a href="#KristinKreuk1">Kristin Kreuk 1</a></li>
			<li><span></span><a href="#KristinKreuk2">Kristin Kreuk 2</a></li>
			<li><span></span><a href="#ZhangZiyi">Zhang Ziyi</a></li>
		</ul>
		<div id="KristinKreuk1" class="fade">
			<img src="img/kristin-kreuk-1024x768-22736.jpg" alt="" width="512" height="384" />
			<p>Kristin Kreuk</p>
		</div>
		<div id="KristinKreuk2" class="fade">
			<img src="img/kristin-kreuk.jpg" alt="" width="512" height="384" />
			<p>Kristin Kreuk II</p>
		</div>
		<div id="ZhangZiyi" class="fade">
			<img src="img/zhang-ziyi.jpg" alt="" width="512" height="384" />
			<p>Zhang Ziyi</p>
		</div>
	</div>
	<!-- ... Abajo tu sitio...-->
</body>
</html> 
Tal como esta no muestra algo muy plano y feo, pero que funciona si el JS y el CSS fallan, lo que nos deja con algo feo pero accesible. Notese que todos mis enlaces tienen un href definido de modo que si todo falla por lo menos el enlace me mande a la seccion correspondiente. Los span en los li del menu son para lograr un efecto CSS, bien pueden ser quitados del markup e introducidos mediante JS para no ensuciar el XHTML, pero esta vez preferí evitarme la fatiga

Ahora vamos con nuestro CSS, nuevamente asumiendo que el usuario no tiene JS.

Código:
body { background-color: #CCC; }

#contenedorG
{
	position: relative;
	background-color: #333;
	width: 750px;
	padding: 10px 0;
}

.fade
{
	position: relative;
	width: 512px;
	height: 384px;
	margin: 10px;
}

.fade p
{
	position: absolute;
	bottom: 0;
	left: 0;
	color: #FFF;
	background-color: #000;
	width: 100%;
	margin: 0;
	text-align: center;
	height: 3em;
	border-color: #9F3;
	border-width: 2px 0 0 0;
	border-style: solid;
}

#menu{
	float: right;
	margin: 0 20px 0 0;
	padding: 0;
}
#menu li{
	background-color: #FF0;
	padding: 10px;
	border: 1px solid #9CF;
	list-style-type: none;
	position: relative;
	width: 7em;
	height: 1em;
}
#menu li span{
	display: block;
	position: absolute;
	width: 100%;
	height: 50%;
	background-color: #FF9;
	margin: 0;
	top: 0;
	left: 0;
}

#menu li:hover span{
	background-color: #FFC;
}

#menu li a{
	display: block;
	z-index: 1500;
	position: absolute;
	color: #609;
	font-weight: bold;
	font-family: sans-serif;
}
#menu li:hover a{
	color: #606
}
(Proximamente un tuto en mi blog sobre como lograr el efecto de los botones, notese que no he usado imagenes.)

Ahora nuestro JS, no lo voy a explicar por que es totalmente basico y creo que habla por si mismo, pero si se quiere una explicacion profunda de lo que el JS hace, la pondré en mi blog.

Código javascript:
Ver original
  1. function init(){
  2.     var contenedorG = document.getElementById('contenedorG');
  3.     var imagenes = contenedorG.getElementsByTagName('div');
  4.     var menu = document.getElementById('menu');
  5.     var enlaces = menu.getElementsByTagName('a');
  6.     contenedorG.style.height = '400px';
  7.     for(var a=0; imagenes[a]; a++){
  8.         imagenes[a].style.position = 'absolute';
  9.         if(a!=0){
  10.             imagenes[a].style.opacity = 0;
  11.             imagenes[a].style.filter = 'alpha(opacity=0)';
  12.         }else{
  13.             opaco = imagenes[a];
  14.             opaco.style.opacity = 1
  15.             opaco.style.filter = 'alpha(opacity=100)';
  16.         }
  17.     }
  18.     for(var i=0; enlaces[i]; i++){
  19.         enlaces[i].onclick=function(){
  20.             cambiarPrincipal(this);
  21.             return false;
  22.         }
  23.     }
  24. }
  25.  
  26. cambiarPrincipal = function(enlace){
  27.     var imagenID = enlace.href.split('#')[1];
  28.     if(opaco.id == imagenID){
  29.         return;
  30.     }
  31.     fadeOut(imagenID);
  32. }
  33.  
  34. fadeOut = function(fadeInElem){
  35.     var intervalo = setInterval(function(){
  36.             var opacidadNueva = parseFloat(opaco.style.opacity) - .1
  37.             opaco.style.filter = 'alpha(opacity=' + opacidadNueva * 100 + ')';
  38.             opaco.style.opacity = opacidadNueva;
  39.             if(opaco.style.opacity <=0){
  40.                 clearInterval(intervalo);
  41.                 opaco = document.getElementById(fadeInElem)
  42.             }
  43.         }
  44.     , 10);
  45.    
  46.     fadeIn(fadeInElem);
  47. }
  48.  
  49. fadeIn =function(fadeInElem){
  50.     fadeInElem = document.getElementById(fadeInElem);
  51.     var intervalo2 = setInterval(function(){
  52.             var opacidadNueva = parseFloat(fadeInElem.style.opacity) + .1;
  53.             fadeInElem.style.opacity = opacidadNueva;
  54.             fadeInElem.style.filter = 'alpha(opacity=' + opacidadNueva * 100 + ')';
  55.             if(fadeInElem.style.opacity >=1){
  56.                 clearInterval(intervalo2);
  57.             }
  58.         }
  59.     , 10); 
  60. }

Lo he probado en IE 6, 7, Safari, FF y funciona, solo hay que arreglar el efecto de los botones en IE6, pero yo no me tomaría el tiempo

Saludos.
__________________
twitter: @imbuzu
  #27 (permalink)  
Antiguo 01/03/2009, 12:28
Avatar de SPAWN3000  
Fecha de Ingreso: marzo-2008
Ubicación: Bogota
Mensajes: 858
Antigüedad: 16 años, 1 mes
Puntos: 15
Respuesta: Esto es posible en javascript

Como yo lo veo, el sistema debe tener un manejador de XML...
Pero esta muy bien...ahora solo queda lo fácil fidelio, que lo adaptes a tu web.
  #28 (permalink)  
Antiguo 01/03/2009, 12:39
Avatar de buzu  
Fecha de Ingreso: octubre-2006
Ubicación: San Francisco, CA
Mensajes: 2.168
Antigüedad: 17 años, 6 meses
Puntos: 122
Respuesta: Esto es posible en javascript

Cita:
Como yo lo veo, el sistema debe tener un manejador de XML...
Por que? yo no pensé para nada en XMl cuando lo desarrollé.PAra que usarías el XML?
__________________
twitter: @imbuzu
  #29 (permalink)  
Antiguo 01/03/2009, 14:50
Avatar de stock  
Fecha de Ingreso: junio-2004
Ubicación: Monterrey NL
Mensajes: 2.390
Antigüedad: 19 años, 10 meses
Puntos: 53
Respuesta: Esto es posible en javascript

@buzu
Muy bien el ejemplo, solo te recomendaría meter esas funciones a un objeto y "empaquetarlo" saludos ;)
  #30 (permalink)  
Antiguo 01/03/2009, 16:24
Avatar de buzu  
Fecha de Ingreso: octubre-2006
Ubicación: San Francisco, CA
Mensajes: 2.168
Antigüedad: 17 años, 6 meses
Puntos: 122
Respuesta: Esto es posible en javascript

si,es una buena recomendación, de hecho yo la iva a hacer, pero se me olvido , yo no lo hice por que lo pensé como un ejercicio final para fidelio pero lo olvidé. Que bueno que lo mencionas.
__________________
twitter: @imbuzu
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 04:00.