Entrar

Efecto Libro + Contenido + Varias páginas

Ulises31 · · Solicitar retirada
Hola a todos, soy guitarrista flamenco, y gracias a esta peaso web estoy haciendo posible mi sueño de poder crear yo mismo mi propia web, muchas gracias a jorgens y su equipo por esta magnifica labor, ya que nos ayuda a creer que no es tan complicado. Ahi va mi duda

Tras leerme todos los tutoriales de cctw estoy haciendo mi web de la siguiente forma. La voy a estructurar en tres partes, a ver si consigo haceros a la idea. Son como tres columnas, las dos laterales son dos menus, izquierdo y derecho, y la central hace de fondo de la web y es una imagen de la portada de mi disco. Como veis realmente son tres capas o divs. Bien el menu lateral izquierdo engloba digamos la zona artistica, y la divido en biografia, discografia, noticias, videos, fotos y contacto. La parte derecha es la zona didáctica, donde expondré mis video-clases para que la peña se las descargue, via paypal etc, este menu lateral derecho lo estructuro en: curso básico, curso avanzado, ruegos y preguntas. Hasta ahi bien, la parte central, la capa central como ya he dicho es la portada del disco, es la mas ancha y es ahí donde quiero meter el efecto libro ya que el disco se va a llamar "El cuento del Arte" y el dibujo es la portada de un libro. Mi pretensión es que el usuario cliquee en alguna pestañita abajo a la derecha del dibujo y que se adentre como un libro pasando hojas en el disco, donde cada hoja o página es un tema con su literatura explicativa etc .... ¿Cómo lo puedo hacer? muchas gracias de antemano a todos y felicitacioneeeessssssssss, nos veremos por aqui a menudo pues estoy en pleno diseño y supongo que me surgiran mas duditas.

Un saludo, y espero respuestas de los sabios jejeje
Yaneth · · Solicitar retirada
hola...
hay en la red, tutoriales para ese efecto, con photoshop, o con java scritp
pero ambos se basan en imagens no en texto, lo cual dificulta la indexada de los buscadores
yo te recomiendo, poner flechas de siguiente atras....

enlazadas a la siguiente página, la cual debe ser identica a la aprimera, solo cambiando la capa central.....
algo asi como en el tutorial de jorgens, que tiene las flechas abajo

saludos
johnpeterjp · · Solicitar retirada
Amigo Ulises31, bienvenido a CCTW. Es un gusto que podamos hacer una pequeña contribución en tu desarrollo, gracias a tí por permitirnos y confiar en nosotros.

Si bien la recomendación de Yaneth es aceptable, lo que nos explicas no dificultaría la indexación en buscadores, ya que nos señalas que solo la capa del centro quedaría con ese efecto.

Entendí perfectamente lo que quieres hacer, es muy parecido al concepto de blog, con menús a ambos lados y contenido central... Queda perfecto de esa forma, muy claro.

Tengo por ahí en mis archivos la forma de realizar aquello, déjame que la busco y te paso los datos.

Por lo pronto...Saludos
Ulises31 · · Solicitar retirada
Gracias John, pero oye me podrias explicar en castellano como lo instalo?? porque hasta ahora solo tengo paginas de html y estilos....es que como ves soy muyyyyyy novato en estoooo, gracias compi de antemano
Ulises31 · · Solicitar retirada
gracias john!! oye y me podrias explicar un poco los pasos a seguir para instalar esto??? tu sabes para los torpes como yo jejeje, por ejemplo como cargo jquery???, es decir donde meto la line esa que me escriben,????, el plugins etc es decir esos codigos de script donde van tio??? en que parte de la plantilla html??? ufff siento darte tanto la vara :(, me puedes ayudar un poquito??? gracias compi
johnpeterjp · · Solicitar retirada
A ver. Tienes que descargar el archivo, al descomprimir viene una carpeta llamada booklet, la copias y pegas dentro de tu sitio local, junto a la carpeta "objetos". Luego copias esos códigos que estan en la página del plugin (desde el punto 1 al 4) y los pegas entre HEAD y HEAD en tu HTML. Luego copias el punto 5 que es el contenido, y finalmente copias y pegas el punto 6 antes de la etiqueta HEAD final, eso es todo.

Alternativamente hay un script para soporte de Internet Explorer 6, para añadirlo, lo copias y pegas entre HEAD , igual que los anteriores.

Ahora que leiste y te cabeceaste con lo que te dije arriba... este es el codigo que tienes que copiar y pegar entre HEAD de tu html:

<!-- script libro jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>
<script src="booklet/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="booklet/jquery.booklet.1.2.0.min.js" type="text/javascript"></script>
<link href="booklet/jquery.booklet.1.2.0.css" type="text/css" rel="stylesheet" media="screen, projection, tv" />
<!-- script libro jQuery -->
<!-- soporte IExplorer 6 -->
<!--[if lte IE 6]>
    <script src="/code/booklet/scripts/DD_belatedPNG.js" type="text/javascript"></script>
    <script type="text/javascript">  
        DD_belatedPNG.fix("h1 a, .b-shadow-f, .b-shadow-b, .b-p0, .b-p3, .b-arrow-next div, .b-arrow-prev div");  
    </script>  
    <![endif]--><!-- basic initialization -->
<!-- soporte IExplorer 6 -->
<!-- funcion script libro jQuery -->
<script type=text/javascript>
$(function() {
    //single book
    $('#mybook').booklet();
	     
	    //multiple books with ID's
	    $('#mybook1, #mybook2').booklet();
	     
	    //multiple books with a class
	    $('.mycustombooks').booklet();
	});
	</script>
	
<!-- funcion script libro jQuery -->

Y esto lo copias y pegas despues de la etiqueta BODY en donde quieras que aparesca el libro:

<!-- contenido y paginas de libro -->
<div id="mybook">
    <div class="b-load">
        <div>
	            <h3>Yay, Page 1!</h3>
	        </div>
	        <div>
	            <h3>Yay, Page 2!</h3>
	        </div>
	        <div>
	            <h3>Yay, Page 3!</h3>
	        </div>
	        <div>
	            <h3>Yay, Page 4!</h3>
	        </div>
	    </div>
	</div>
<!-- contenido y paginas de libro -->

Con eso ya tienes funcionando el libro.
El contenido lo agregas tú, como cualquier otro mediante tu editor de HTML (html kit - dreamweaver)
No Olvides descargar el archivo y copiar la carpeta dentro de tu sitio local.

Saludos.
Ulises31 · · Solicitar retirada
muuuuuuuuuuuuuuuuuuuuuchas gracias john!!!!!!! ya te voy contando, eres un fiera tiooo!!!! gracias gracias otra vez
johnpeterjp · · Solicitar retirada
Gracias por las gracias. Je, je.

No olvides mostrarnos como va quedando tu proyecto. Suerte y Saludos.
Ulises31 · · Solicitar retirada
oye john ¿no hay forma de que las paginas queden mas juntas??? o al mejos le pueda poner una union que asemeje a un libro abierto?? quedan muy separadas.....bueno ya me dices, de todas formas ta quedando chulo ;)
johnpeterjp · · Solicitar retirada
Dentro de la carpeta booklet se encuentra la hoja de estilos CSS. Ahora tienes que aplicarte tú con el resultado final, seguro lograrás lo que deseas. Saludos.
Ulises31 · · Solicitar retirada
hola john, a ver si me puedes echar el cable, no consigo cambiar el tamaño de las paginas del libro, he bicheado el archivo css y no doy con la tecla, me ayudas maquina?????graciassss y perdona si soy muy pesao [:)]
johnpeterjp · · Solicitar retirada
Uff ya he borrado el libro, los archivos y lo que te pasé de mi unidad local... mmm. Déjame recargar todo y te estoy avisando... Saludos.
johnpeterjp · · Solicitar retirada
OK. Ya he puesto todo nuevamente. [:D]
... Entonces para modificar los parámetros del libro tienes el listado de características a la izquierda de esta página:

http://builtbywill.com/code/booklet/examples/

Si vamos al script, podemos ver en el código que te puse unos comentarios como este:

<!-- funcion script libro jQuery -->
<script type=text/javascript>
$(function() {
    //single book
    $('#mybook').booklet({
	        width:  '400',
	        height: '400',
		closed: true,
	        autoCenter: true,
		speed: 250
	    });
	    
	});

	</script>
	
<!-- funcion script libro jQuery -->

Fíjate que he agregado instrucciones dentro de la función del libro... Puse tamaño, que estubiese cerrado al comienzo, que se autocentre y que el paso de las páginas tenga una velocidad rápida (250).

Es fácil ver en el código, está en inglés pero es básico; Ancho - Altura - Cerrado - AutoCentrado - Speed.

Ahora lo que tienes que hacer, es agregar una "Coma" al final del 250 en velocidad (speed) y agregas otra función enumerada en la página de arriba al lado izquierdo (en el menu). Es como css que lleva un "Punto y coma" a diferencia que acá las instrucciones las separas solo por la "Coma" ( , )

Por ejemplo para que salgan las flechas a los lados agregamos: arrows: true

Eso es todo... sencillo...pero dificil de adivinar.. Je, je.

Para cambiar el color de las páginas abres el archivo: jquery.booklet.1.2.0.css
En la línea 17 y 18 estan ambas páginas.

.booklet .b-wrap-left  {background:#fff;}
.booklet .b-wrap-right {background:#efefef;}

Suerte y Saludos.
Ulises31 · · Solicitar retirada
hola john, joer que desesperacion, mira no entiendo esto: "agregas otra función enumerada en la página de arriba al lado izquierdo (en el menu). " es decir, ¿que es una funcion enumerada y donde esta la pagina de arriba y el menu? (perdona mi torpeza..) quizas es por eso que me da un error justo en la línea de la ultima }); diciendome que "se esperaba una imagen, codigo o numero de identificacion" o algo asi y no me aparece nada....espero tu sabia respuesta amigo!!! graciasssss
johnpeterjp · · Solicitar retirada
Ulises tienes que hacer tu máximo esfuerzo. Tienes que leer detenidamente lo que te "Describo".

Te dejé dos mensajes, en el primero dice:

... Entonces para modificar los parámetros del libro tienes el listado de características a la izquierda de esta página:

http://builtbywill.com/code/booklet/examples/

(Tienes la página ahí y sabes cual es la izquierda)

Si te fijas cada item es una función o característica para el efecto, tamaño, velocidad, dirección, etc. Vas pinchando en el menú y la lado derecho te aparece lo que tienes que agregar en tu HTML dentro del script, solo copiar lo que aparece en el recuadro rojo, al lado derecho de la imágen. El resto del código No, porque ya está puesto en el código.... Te he graficado todo para que entiendas:

[contenido no disponible]

No puede ser más sencillo... Lo único que tienes que hacer es copiar y pegar.

[contenido no disponible]

Si miras la imágen es mi Dreamweaver. Te puse entre flechas el codigo del script, y directamente donde tienes que agregar una coma, saltar un espacio y pegar el trozo de código que copiaste desde la web del efecto. Solo tienes que copiar la parte que necesitamos para ejecutar una caracteristica. Ejemplo:

<script type=text/javascript>
$(function() {
    //single book
    $('#mybook').booklet({
	        width:  '400',
	        height: '400'

	    });
	    
	});

	</script>

En el código de arriba solo está agregado el tamañó del libro. Si quisieras agregar otra característica, entonces pones una coma, te saltas un espacio y pegas... Por ejemplo agregamos la velocidad de la hoja en pasar, que sería: speed: 250
Quedando el código de ésta forma: (mira y compara ambos códigos)

<script type=text/javascript>
$(function() {
    //single book
    $('#mybook').booklet({
	        width:  '400',
	        height: '400',
                speed: 250
	    });
	    
	});

	</script>

(Mira y compara ambos códigos)

Con ésto ya no sé como explicarte mejor... como dicen en mi país, esto es explicar con manzanas... Je, je, je. Espero puedas entenderme.

-----------------------------------------------------------------------------------------------------------------------------

Acá algunas funciones más importantes:

Tamaño:

width: 600,
height: 200

Velocidad:

speed: 250

Quitar númos de páginas:

pageNumbers: false

Centrar libro de forma automática:

autoCenter: true

Que el libro aparesca cerrado:

closed: true

Flechas de dirección a los lados:

arrows: true



Sino aún no entiendes, me dices a que tamaño lo quieres y que otra característica necesitas. (dentro de las posibles)

Saludos.
Ulises31 · · Solicitar retirada
Gracias john, todo viento en popa ahora, que maquina eres compi, pero oye tengo un pequeño problema, que es que se me superponen los titulos de las paginas, les he puesto a las paginas un fondo de pergamino y los titulos en negro y parece ser que se superponen los titulos con los de las paginas siguientes.....a ver si se te ocurre como evitarlo mostroooo!!!!!
Ulises31 · · Solicitar retirada
aqui tienes el problema, la pagina izquierda es la primera, los titulos son h4. Espero vuestra ayuda, aun no la he subido a la red. Graciassssss

[contenido no disponible]