existen "frames" en css?

[locoxchacho]

Buenas...

Actualmente me encuentro pasando a CSS un diseño que mi cliente me paso en un illustrator. Como soy nuevo en CSS, me vi sorprendido ante el pedido de mi cliente, ya que nunca lo habia pensado: quería que el logo, el menu y el footer se carguen una sola vez, y que solo vaya cargandose el "contenido" a medida que navegamos por el menu, que solo se cargo una vez.

Es decir, quería utilizar algo similar a lo que hacian los frames anteriormente, es decir, evitar que se cargue varias veces la pagina, y sino que se cargue solo parte de ella... es posible esto con CSS?? De ser posible.. de que forma? O que alternativa me recomiendan??

Desde ya muchas gracias!

Pablo

[Rafael]

Hola. Es un tema un tanto recurrente. Dale una buscada a includes.

Te dejo un link de una explicación que ojalá te pueda servir. Se ha ido extendiendo un tanto y en algunos momentos se repite la idea (dudas del que preguntó) Pero dale una revisada. En los últimos posts hay un resúmen.

http://www.forovecindadgrafica.com/s...ad.php?t=11492

Pero no, no hay frames.

[locoxchacho]

anduve viendo la solucion que me diste, rafael.. y la verdad es que, si entendi bien, lo que soluciona es la parte visual de parecerse al frame...

yo, lo que mas estaba interesado, es en que solo se cargara una pagina principal, y cada link de esa pagina cargara, dentro de la pagina principal, otra pagina (la del include, el contenido que variara)... esto se puede hacer con CSS?? O al hacer clic en los vinculos se cargará nuevamente toda la pagina?

Si no es asi.. entonces, como se hace para que al hacer clic, se cargue en el include, y no en lugar d ela pagina principal??

Espero haberme explicado, sino volvere para hacerme explicar, muchas gracias!! Un saludo!

Pablo.

[Rafael]

lo que soluciona es la parte visual de parecerse al frame

No. En realidad es al revés.
Los frames mucho tiempo se usaron para dar un primer formato a una página: Una cabecera, un menú lateral y contenido. (Pero esto ya no viene al caso).
Y tamíén se usaban para cargar una sola vez un menú y no estar actualizando cada página. (Esto es lo que quieres).

Con los includes no importa el diseño, reciclas la parte que quieras en el lugar que quieras, puede ser en el centro, arriba, abajo, etc.

Cargas el tema (Tema1.php) y jala el pedazo reciclado (normalmente un menú).

Hay otra manera de encarar el problema con php, que da como resultado las páginas Tema.php?id=2

Pero hay que programar un script con funciones como:
$Contenido = $Pagina[$_GET['id']];

que es más complicado que el uso de includes. En este caso tienes una página que va llamando a otras para cargarlas dentro. Lo repetido llama a lo variado.

[Rafael]

Con css puedes sImular que se está cargando algo. Básicamente lo "escondes" primero, luego al pasar por un cierto link "aparece" lo que estaba oculto (pero ya estaba).

Básicamente es jugar con las propiedades display: none y después display: block. Esos elementos dentro de un :hover. Algo parecido a un menú de varios niveles, donde el subtema aparece y desaparece. (Normalmente se combina con Javascript)

Otra es usar Ajax, y otra es menú en flash.

[Rafael]

Resumen de opciones:

• Frames
• Includes
• [$_GET['id']];
• Flash
• Ajax

La recomendada por mí (una buena combinación de facilidad y compatibilidad, etc) includes.

Editado: No todos se cargan textualmente una vez. Los únicos son frames y Ajax. Los otros refrescan la página, aunque utilicen el mismo contenido. Si lo que quiere es no ver un parpadeo... que se deje de esas cosas insignificantes.

[Rafael]

Hum, me quedé pensando algo.

Css complementa Html, no lo sustituye. Ojo. Css libera las etiquetas html para usarse para lo que son, por ejemplo las tablas. Ya no se usan para acomodar pedacería de imágenes. Lo mismo pasa con los frames, se les libera de usarlos para el layout. Aunque mucha gente cree que los frames están obsoletos, pues no. Ahí siguen, y se usarán para cuando se tengan que usar.

No son muy recomendables por la famosa "Googleada" y los bookmarks, para eso funcionan mejor los includes. (Pero ahí siguen).

[locoxchacho]

muchas gracias rafael por tu gran explicacion!! pero a ver si entiendo..

lo que el cliente quiere es, que al hacer link en una pagina, no se refrese toda entera, sino, digamos, el div "contenido"... y, si bien entendi, eso con los includes, no es posible. Solo te ahorras de tener varias paginas iguales, pero te vuelve a cargar, no es cierto??

Entonces.. en este caso, tendria que usar un iframe? Y se podrá dentro de un div?? Correjime si me equivoco por favor, si no entendi algo...

Pero para finiketear, basicamente, lo que el cliente quieres es que no se refresque TODA la pagina nuevamente, sino el div contenido.. es decir, no quiere ese parpadeo que tu mencionas...

espero nuevamente que se haya entendido.. un saludo!!

pablo

pd: con respecto a PHP, no hay problemas.. tengo bastante conocimiento.. asique si hay una solucion con php que no sea la de includes, pues venga!

[Rafael]

Pues si. Si lo que quiere es que no se refresque la página, refrescasela a él (no es cierto, "refrescársela" acá es como decirle una grosería).

Pues puede ser con frames (o iframe) o con Ajax. Para conseguirte un script Ajax necesitarás revisar en ese foro.

Saludos.

[Dalvenjha]

Pues tu única solución es usar AJAX.

[locoxchacho]

ok, vere si finalmente utilizo iframes o Ajax....

muchas gracias a ambos por su ayuda!

pablo.

[Mikmoro]

¿Y qué tal este efecto con mootools (sólo javascript sin Ajax)?

¿Y este sólo con CSS?

En ambos casos, como decía Rafael, todo el contenido está cargado y parte está oculto y parte visible. Quizá no sea muy práctico para algunas cosas, pero puede serlo para otras, y sobre todo lo pongo a modo ilustrativo.

[locoxchacho]

Mikmoro, muchas gracias!

El que mas se asemeja a lo que quiero es el de mootools.. voy a ver que tal que sale con eso. Lo que pasa es que tampoco quiero recargarlo mucho con AJAX pq la idea era tambien crear un menu en forma de arbol, esos que al elegir una opcion el menu se abre un submenu, y al cambiar se cierra y se abre el otro, todo sin cargar la pagina. Y la solucion para eso logicamente es AJAX. Por eso no queria cargarlo tanto con esto, pero es la solucion que veo mas adecuada...

De todas formas, el mayor problema que tengo es el que pregunte en el posta anterior.. si no logro solucionar que TODOS los usuarios vean en su PC las fuente que el cliente quiere en su web, toda esta investigacion habra sido en vano... PEERO!! jajaja

gracias de todas formas!!

[Rafael]

OOOOOOOOOOoohohhhhohohohohohohohohh.....
De plano necesitas usar Flash. Tu cliente se cree muy creativo, pero es un poco (por decirlo suave) ignorante.

Con flash puedes hacer tus menús sube-baja, su fuente en todos lados y creo que con actionscript puedes cargar diferentes películas llamándolas a una capa específica, de manera semejante al iframe en una página. Ja. Pequeño detalle, hay que aprenderlo.

[Rafael]

@Mikmoro, no había visto la opción con :active, muy ingenioso. Sólo lo sabía con :hover. Lástima del efecto secundario

[Mikmoro]

Iniciado por Rafael

Lástima del efecto secundario

Se puede arreglar si es menester

[locoxchacho]

tengo una duda respecto al efecto de Mootools, que me recomendo Mikmoro.. espero que puedas ayudarme!!

viste que se carga todo el contenido, pero se oculta y va apareciendo a medida que le damos a las distitnas opciones??

bueno... como puedo hacer para que al hacer clic en ese link de opcion, aparezca ese link como "active link", para darle un formato distitno (tachado) con CSS?? .. pq como todo funciona dentro de la misma pagina, index.html, no encuentro la forma correcta de hacerlo.

muchas gracias! un saludo!!

pablo.

[Mikmoro]

Iniciado por locoxchacho

viste que se carga todo el contenido, pero se oculta y va apareciendo a medida que le damos a las distitnas opciones??

Si, me he fijado: lo he hecho yo

Como habrás visto el que se quede marcada la opción está hecho con CSS y active-focus, por eso cuando picas en otro sitio desaparece la marca.

Lo que debes hacer es añadir a cada función que hace aparecer el texto el cambio de clase del enlace, de inactivo a activo, añadiendo a cada una de las cuatro esto:

$$('a').removeClass("activo");
$(this).addClass("activo");

De esa manera, como la clase "activo" es la que deja el botón en otro color, cada opción pulsada cambia su clase (y la del resto por si hay otra pulsada), y así se mantiene visible aunque pulses en otras partes de la página.

Cada función quedaría:

$('op1').addEvent('click', function(e){
e = new Event(e);
mySlide2.slideOut();
mySlide3.slideOut();
mySlide4.slideOut();
mySlide.slideIn();
$$('a').removeClass("activo");
$(this).addClass("activo");
e.stop();
});

No sé si es muy eficiente, pero es como lo hice en su día: puede que sea más corto con toggle, pero no lo he mirado con detenimiento si sería posible. Seguramente debería revisarlo un día de estos.

[locoxchacho]

oks, gracias!!

ahora.. se me complica. porque el menu lo tengo con imagenes, y el activelink sería una imagen donde el texto aparece tachado (todo esto por la maldita tipografia!)...

es mas dificil eso, o mejor dicho... se puedo eso?? gracias mikmoro! :P

[Mikmoro]

¿Eres capaz de conseguir una clase de CSS con la que se vea tu "activelink" como tú quieres? Si es así, sólo tienes que añadir el código que he puesto pero haciendo que la añadida sea esa clase.
Si no, la consulta es otra y para eso deberíamos ver tu HTML y CSS (e imágenes) para poder determinar cómo conseguir lo que buscas.

P.D.: he actualizado el enlace para que se vea funcionando el cambio de clase del botón.