¿Como se hace esto?

salbatore · #1 (**permalink**) 21/01/2008, 14:38

Hola, foreros:

Llevo varias webs vistas que utilizan el mismo tipo programacion y no tengo ni idea como llamarlo... me refiero al movimiento de las imagenes de la simulacion de la pantalla de ordenador en la siguiente web:

http://www.ourmemoryof.com/

Me gustaria saber:

¿Con que esta hecho?
¿Es dificil?

dorvax · #2 (**permalink**) 21/01/2008, 14:52

aqui esta el codigo de la web:

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head>
<title>Create a Memorial Website with Online Book of Condolences, Photo Gallery, Video Gallery and more | OurMemoryOf.com</title>

<meta http-equiv="content-type" content="application/xhtml+xml; charset=iso-8859-1" />
<meta name="keywords" content="memorial website, online book of condolences, create a memorial website, memorial site, memorial web site, memory of, online memorial websites, remembrance website" />
<meta name="description" content="With OurMemoryOf.com, you can create a memorial website for your loved ones with an online book of condolence, photo gallery, video gallery, notices and more and choose from a wide selection of themes and colours." />
<meta name="robots" content="all" />
<meta name="robots" content="index,follow" />
<meta name="revisit-after" content="7 days" />
<meta name="rating" content="general" />
<meta name="language" content="English" />
<meta name="copyright" content="Copyright David Behan - www.davidbehan.com. All Rights Reserved." />
<meta name="author" content="David Behan" />
<link rel="shortcut icon" href="/favicon.ico" />

<meta name="verify-v1" content="8crUWyN8REAuytwi8KY87eYO9dOzz2xLJ5ceAbcQg r4=" />
<meta name="y_key" content="a490c66b9df01f8c" />

<link href="/_includes/style.css" rel="stylesheet" type="text/css" media="screen,projection" />



<script type="text/javascript" src="/_includes/glider/prototype.js"></script>
<script type="text/javascript" src="/_includes/glider/effects.js"></script>
<script type="text/javascript" src="/_includes/glider/glider.js"></script>

</head>
<body class="holding">

<div id="holdingWrap">

<div id="colWrap">

<div id="col1">
<div id="logo"><a href="http://www.ourmemoryof.com" title="memorial websites"><img src="../_images/design/logo.png" alt="OurMemoryOf.com Logo" width="177" height="97" /></a></div>
<div id="intro1">Create an online memorial website for your loved ones</div>
<div id="intro2">OurMemoryOf will be launching early Spring 2008. We are currently in alpha testing. If you would like to be notified when the new site goes live or be part of the beta test, please enter your email below:</div>
<div id="betaFormWrap">

<form action="/" method="post" id="betaForm">
<fieldset>
<div id="emailWrap"><label for="formEmail">email</label><input type="text" id="formEmail" name="formEmail" value="[email protected]" maxlength="50" onfocus="if(this.value == '[email protected]') this.value=''" onblur="if(this.value == '') this.value='[email protected]'" /></div>
<div id="submitWrap"><label for="formSubmit">submit</label><input type="submit" id="formSubmit" value="Submit" /><input type="hidden" id="formAdd" name="formAdd" value="y" /></div>
</fieldset>
</form>
</div>

</div>

<div id="col2">

<div id="prev"><a href="javascript:void(0)" onclick="myGlider.previous();return false;" title="Previous"><img src="/_images/design/prev2.png" alt="Previous" width="39" height="39" /></a></div>
<div id="next"><a href="javascript:void(0)" onclick="myGlider.next();return false" title="Next"><img src="/_images/design/next2.png" alt="Next" width="39" height="39" /></a></div>

<div id="holdingGlider">


<div class="scroller">
<div class="content">


<div class="section" id="slide1">

<div class="slidePic"><img src="_images/gallery/slide-theme1.jpg" alt="Nature - Blue Sky Theme" width="351" height="221" /></div>
</div>


<div class="section" id="slide2">
<div class="slidePic"><img src="_images/gallery/slide-theme2.jpg" alt="Nature - Green Grass Theme" width="351" height="221" /></div>
</div>


<div class="section" id="slide3">
<div class="slidePic"><img src="_images/gallery/slide-theme3.jpg" alt="Style 1 - Purple Theme" width="351" height="221" /></div>

</div>


<div class="section" id="slide4">
<div class="slidePic"><img src="_images/gallery/slide-theme4.jpg" alt="Style 2 - Orange Theme" width="351" height="221" /></div>
</div>


<div class="section" id="slide5">
<div class="slidePic"><img src="_images/gallery/slide-theme5.jpg" alt="Style 1 - Red Theme" width="351" height="221" /></div>
</div>

</div>
</div>
</div>
<script type="text/javascript" charset="utf-8">
var myGlider = new Glider('holdingGlider', {duration:0.5});
</script>

</div>

</div>

<div id="footerMessage">Thank you for your interest in OurMemoryOf!</div>
</div>




<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-3433460-1");
pageTracker._initData();
pageTracker._trackPageview();
</script>


<script type="text/javascript">
var sc_project=3348240;
var sc_invisible=0;
var sc_partition=36;
var sc_security="60250a0d";
</script>

<script type="text/javascript" src="http://www.statcounter.com/counter/counter_xhtml.js"></script><noscript><div class="statcounter"><a class="statcounter" href="http://www.statcounter.com/"><img class="statcounter" src="http://c37.statcounter.com/3348240/0/60250a0d/0/" alt="web site analytic" /></a></div></noscript>



</body>
</html>

estudia bien los javascripts que estan alli

davidbehan · #3 (**permalink**) 21/01/2008, 19:00

Cita:

Iniciado por salbatore

Hola, foreros:

Llevo varias webs vistas que utilizan el mismo tipo programacion y no tengo ni idea como llamarlo... me refiero al movimiento de las imagenes de la simulacion de la pantalla de ordenador en la siguiente web:

http://www.ourmemoryof.com/

Me gustaria saber:

¿Con que esta hecho?
¿Es dificil?

Hola. Tuve que traducir esto en Google Traducir así que podríamos enviar este mensaje. Espero que no suene demasiado "automatizado". Me encontré con esta cuestión de las estadísticas de mi sitio web. El javascript que he usado para crear el efecto de diapositivas en ourmemoryof.com se puede encontrar en:

http://code.google.com/p/missingmethod-projects/wiki/Glider

Espero que le sirva.

Saludos, Dave

salbatore · #4 (**permalink**) 21/01/2008, 20:31

Hola,

Muchas gracias las respuestas y el enlace (http://code.google.com/p/missingmethod-projects/wiki/Glider), me ha servido mucho de ayuda.

Es una cosa que siempre habia querido saber como estaba hecha... jeje.

Muchisimas gracias foreros...

McBlink · #5 (**permalink**) 21/01/2008, 20:35

Muy interesante ese script ;)
saludos!
MC