Foros del Web » Creando para Internet » Diseño web »

Contenido que varía

Estas en el tema de Contenido que varía en el foro de Diseño web en Foros del Web. Estoy diseñando un sitio web con una cabecera, un menú y un pie de página que son invariables para todas las páginas. No quiero usar ...
  #1 (permalink)  
Antiguo 25/04/2009, 06:14
Avatar de kanakis  
Fecha de Ingreso: octubre-2008
Mensajes: 69
Antigüedad: 9 años, 1 mes
Puntos: 0
Contenido que varía

Estoy diseñando un sitio web con una cabecera, un menú y un pie de página que son invariables para todas las páginas. No quiero usar marcos, pero tampoco quiero tener que multiplicar código innecesariamente.

He visto web donde meten el contenido variable en un div, cargándose en éste los contenidos referentes a cada página.

¿Cómo se haría exactamente? ¿Se os ocurre alguna otra forma de ahorrar código y ancho de banda?

A ser posible me gustaría evitar el uso de php porque aún no sé si el servidor donde irá alojada lo soporta, aunque en principio estoy abierto a todo.

Gracias y un saludo ;)
  #2 (permalink)  
Antiguo 25/04/2009, 06:58
 
Fecha de Ingreso: abril-2009
Mensajes: 37
Antigüedad: 8 años, 7 meses
Puntos: 2
Respuesta: Contenido que varía

Cita:
Iniciado por kanakis Ver Mensaje
Estoy diseñando un sitio web con una cabecera, un menú y un pie de página que son invariables para todas las páginas. No quiero usar marcos, pero tampoco quiero tener que multiplicar código innecesariamente.

He visto web donde meten el contenido variable en un div, cargándose en éste los contenidos referentes a cada página.

¿Cómo se haría exactamente? ¿Se os ocurre alguna otra forma de ahorrar código y ancho de banda?

A ser posible me gustaría evitar el uso de php porque aún no sé si el servidor donde irá alojada lo soporta, aunque en principio estoy abierto a todo.

Gracias y un saludo ;)
Con HTML estático no se puede hacer lo que dices. Tendrías que usar a la fuerza marcos. Necesitas un lenguaje en servidor.

La única solución que se me ocurre es hacer la pagina totalmente en Ajax con cargas en segundo plano usando librerías como JQuery, pero esto es algo un poco avanzado.
  #3 (permalink)  
Antiguo 25/04/2009, 08:24
Avatar de kanakis  
Fecha de Ingreso: octubre-2008
Mensajes: 69
Antigüedad: 9 años, 1 mes
Puntos: 0
Respuesta: Contenido que varía

Muchas gracias por tu respuesta, matados2k.

Preferiría evitar el uso de programación de servidor ni algo tan avanzado como AJAX. Estaba pensando más bien en alguna aplicación javascript medianamente sencilla.

De todas formas si usara algún lenguaje del lado servidor sería php. Podría meter los menús y demás en un archivo separado y llamarlo con un include o algo así.

¿Alguna idea al respecto? Y si no, ¿algún buen tutorial de AJAX orientado a mi problema? xD
  #4 (permalink)  
Antiguo 25/04/2009, 08:39
 
Fecha de Ingreso: abril-2009
Mensajes: 37
Antigüedad: 8 años, 7 meses
Puntos: 2
Respuesta: Contenido que varía

Cita:
Iniciado por kanakis Ver Mensaje
Muchas gracias por tu respuesta, matados2k.

Preferiría evitar el uso de programación de servidor ni algo tan avanzado como AJAX. Estaba pensando más bien en alguna aplicación javascript medianamente sencilla.

De todas formas si usara algún lenguaje del lado servidor sería php. Podría meter los menús y demás en un archivo separado y llamarlo con un include o algo así.

¿Alguna idea al respecto? Y si no, ¿algún buen tutorial de AJAX orientado a mi problema? xD
AJAX es javascript, AJAX sólo es una metodología de programación usando el objeto HTTPRequest de javascript. Es complicado hacerlo a pelo, pero con librerias como Jquery se hacen muy rápidamente.
  #5 (permalink)  
Antiguo 25/04/2009, 10:36
Avatar de kanakis  
Fecha de Ingreso: octubre-2008
Mensajes: 69
Antigüedad: 9 años, 1 mes
Puntos: 0
Respuesta: Contenido que varía

Entonces, en grandes pinceladas, ¿cómo se haría en AJAX utilizando librerías como JQuery?
  #6 (permalink)  
Antiguo 25/04/2009, 11:03
 
Fecha de Ingreso: abril-2009
Mensajes: 37
Antigüedad: 8 años, 7 meses
Puntos: 2
Respuesta: Contenido que varía

Cita:
Iniciado por kanakis Ver Mensaje
Entonces, en grandes pinceladas, ¿cómo se haría en AJAX utilizando librerías como JQuery?
Ufff.. Intentemoslos. Lo voy a hacer de cabeza asi que puede que haya errores.

Lo primero, vamos a preparar una estructura coherente de directorios, por ejemplo:

/myproyecto
/myproyecto/scripts
/myproyecto/css

Creo que el contenido de cada uno no necesita explicación en el directorio raíz meteremos todos los html.

Vamos docs.jquery.com/Downloading_jQuery y descargamos jquery, mejor la versión minima ya que no vamos a depurar y lo guardamos en scripts.

Nos creamos un index.html muy sencillo, para probar:

index.html
Código:
<html>
  <head>
    <!-- Aqui añadimos jquery-->
    <script type="text/javascript" src="scripts/jquery-1.3.2.min.js" ></script>
    <!-- Este segundo -->
    <script type="text/javascript" src="scripts/engine.js" ></script>
  </head>
  <body>
     <div id="header">
        <a href="pag1">Pagina 1</a>
        <a href="pag2">Pagina 2</a>
        <a href="pag3">Pagina 3</a>
     </div>
     <div id="content">
        <p>Soy un pofesional</p>
     </div>
     <div id="footer">
        <p>Pagina hola mundo AJAX</p>
     </div>
  </body>
<html>
Y creamos 3 ficheros HTML mas con solo una porción de página

pag1.html
Código:
  <p>Esto mola</p>
pag2.html
Código:
  <p>Mucho por que es</p>
pag3.html
Código:
  <p>DINAMICO!!!!!!!!!!!!!!!!</p>
Y dentro de scritps nos creamos otro que sea engine.js

engine.js
Código:
$(document).ready(function(){
  $('#header a').click(function(){
    $('#content').load($(this).attr('href')+'.html'); //Esto ya es AJAX
  });
});
La traduccion a cristiano de lo que hace eso en 4 lineas es. Cuando la estructura DOOM del documento HTML este lista (puede que haya cosas aun cargando como son imagenes), a todos los enlaces de la cabecera le vamos a asignar un evento onclick y que hace que carge en el div content el contenido del fichero referenciado por el atributo href del enlace que ha sido marcado con su correspondiente extensión.

Para usar jquery tienen que saber muy bien que es la estructura DOM, la BOM, los selectores CSS para seleccionar los elementos afectados por $(), como funciona el sistema de eventos etc. Y con 4 lineas se hace cosas impresionantes y no deja de ser javascript bien usado.

El AJAX se encuentra en la funcion 'load' de jquery.

Todo esto y mucho mas en docs.jquery.com

Lo siento pero el sistema no me deja poner enlaces por tener menos de 30 mensajes
  #7 (permalink)  
Antiguo 26/04/2009, 06:35
Avatar de kanakis  
Fecha de Ingreso: octubre-2008
Mensajes: 69
Antigüedad: 9 años, 1 mes
Puntos: 0
Respuesta: Contenido que varía

Tu respuesta está muy currada! Entiendo la idea general de lo que hace, así que con tu minitutorial, un poco de google y café seguro que lo saco. Muchísimas gracias de nuevo, matados2k =)
  #8 (permalink)  
Antiguo 26/04/2009, 11:00
 
Fecha de Ingreso: abril-2009
Mensajes: 371
Antigüedad: 8 años, 7 meses
Puntos: 22
Respuesta: Contenido que varía

es mala practica usar javascript para cargar secciones de tu web, en general solo lo hacen aplicaciones que lo necesitan (gmail, facebook) y siempre tienes que proporcionar enlaces normales para la gente que tiene desactivado javascript y para buscadores (el href de cada enlace tiene que llevar a la pagina aparte y el evento onclick a la funcion javascript que uses para cargar contenido)
  #9 (permalink)  
Antiguo 26/04/2009, 13:14
 
Fecha de Ingreso: abril-2009
Mensajes: 37
Antigüedad: 8 años, 7 meses
Puntos: 2
Respuesta: Contenido que varía

Cita:
Iniciado por mpeg Ver Mensaje
es mala practica usar javascript para cargar secciones de tu web, en general solo lo hacen aplicaciones que lo necesitan (gmail, facebook) y siempre tienes que proporcionar enlaces normales para la gente que tiene desactivado javascript y para buscadores (el href de cada enlace tiene que llevar a la pagina aparte y el evento onclick a la funcion javascript que uses para cargar contenido)
Totalmente de acuerdo, pero es fácil arreglar ese ejemplo para que si sea accesible sin javascript, pero eso ya depende de el y de lo que quiera esforzarse en accesibilidad e indexación.
  #10 (permalink)  
Antiguo 26/04/2009, 13:25
Avatar de kanakis  
Fecha de Ingreso: octubre-2008
Mensajes: 69
Antigüedad: 9 años, 1 mes
Puntos: 0
Respuesta: Contenido que varía

mpeg, si no es recomendable usar javascript, y si tampoco quiero usar php, ¿qué otra cosa se te ocurre?

la propuesta de matados2k me ha parecido atractiva porque hace la página muy dinámica, pero no me había planteado el tema de la compatibilidad.

¿es mejor entonces usar páginas html estáticas de toda la vida? ¿cómo se haría para que fuera compatible tanto con unos o con otros? redireccionar a una carpeta con todo el contenido estático o existe alguna forma más directa?

no me importaría tener que echar unas horas más si el resultado va a ser mejor

Última edición por kanakis; 26/04/2009 a las 13:28 Razón: no había leído el último post de matados2k
  #11 (permalink)  
Antiguo 26/04/2009, 13:51
 
Fecha de Ingreso: abril-2009
Mensajes: 37
Antigüedad: 8 años, 7 meses
Puntos: 2
Respuesta: Contenido que varía

Cita:
Iniciado por kanakis Ver Mensaje
mpeg, si no es recomendable usar javascript, y si tampoco quiero usar php, ¿qué otra cosa se te ocurre?

la propuesta de matados2k me ha parecido atractiva porque hace la página muy dinámica, pero no me había planteado el tema de la compatibilidad.

¿es mejor entonces usar páginas html estáticas de toda la vida? ¿cómo se haría para que fuera compatible tanto con unos o con otros? redireccionar a una carpeta con todo el contenido estático o existe alguna forma más directa?

no me importaría tener que echar unas horas más si el resultado va a ser mejor
Se puede hacer como te comenta mpeg, el truco esta en programarla primera totalmente como estática y sera compatible con todos y te indexara cualquier buscador.

Luego creas las partes cambiantes. Como el javascript que usamos no es obstrubtivo, pordemos programar un onclick para cada enlace normal y hacer que recargue solo el div. Con esto consigues que si no tienen javascript funcione de forma estática y compatible y si tiene javascript se comporta de forma dinámica. Lo único adicional que lleva (a parte de unos retoques) es que cada enlace que le pongas un onclick debe prevenir su comportamiento por defecto.

Si quieres mañana te pongo como es, por que ahora estoy muy cansado mentalmente, pues mañana tengo una reunión importante y llevo trabajando todo el fin de semana.
  #12 (permalink)  
Antiguo 26/04/2009, 17:19
Avatar de kanakis  
Fecha de Ingreso: octubre-2008
Mensajes: 69
Antigüedad: 9 años, 1 mes
Puntos: 0
Respuesta: Contenido que varía

Me parece muy bien, matados, y agradezco mucho todo el tiempo que estás dedicando a solventar mis dudas. Investigaré lo que pueda por mi cuenta, aunque no tengo muy claro cómo asociar el "engine.js" con el evento onclick.

Por lo pronto he comenzado a programar la página completamente en html, y le he metido un menú en flash donde cada botón realiza una función del tipo:

Cita:
on (release){ getURL("index.html"); }
¿Es este tipo de implementación compatible con AJAX?
  #13 (permalink)  
Antiguo 27/04/2009, 00:15
 
Fecha de Ingreso: abril-2009
Mensajes: 37
Antigüedad: 8 años, 7 meses
Puntos: 2
Respuesta: Contenido que varía

Cita:
Iniciado por kanakis Ver Mensaje
Me parece muy bien, matados, y agradezco mucho todo el tiempo que estás dedicando a solventar mis dudas. Investigaré lo que pueda por mi cuenta, aunque no tengo muy claro cómo asociar el "engine.js" con el evento onclick.

Por lo pronto he comenzado a programar la página completamente en html, y le he metido un menú en flash donde cada botón realiza una función del tipo:



¿Es este tipo de implementación compatible con AJAX?
Si, es compatible para llamar un elemento javascript desde flash se hace de la siguiente forma:

getURL("javascript:mi_funcion()");
  #14 (permalink)  
Antiguo 27/04/2009, 15:45
Avatar de kanakis  
Fecha de Ingreso: octubre-2008
Mensajes: 69
Antigüedad: 9 años, 1 mes
Puntos: 0
Respuesta: Contenido que varía

Pues ya lo tengo todo listo:

1. He creado las páginas xhtml estáticas y las he metido en una carpeta "static".
2. He extraído el contenido variable de las páginas que irá en la capa y las he guardado como archivos html en una carpeta "contents".
3. Este contenido lo manejo con un script en ajax como éste:

Código:
// Documento JavaScript

// Esta función cargará las paginas
function llamarasincrono(url, id_contenedor){
var pagina_requerida = false
if (window.XMLHttpRequest) {    //Para Firefox, Safari, etc
pagina_requerida = new XMLHttpRequest()
} else if (window.ActiveXObject){   //Pero si es IE...
try {
pagina_requerida = new ActiveXObject("Msxml2.XMLHTTP")
} 
catch (e){ // o en caso que sea una versión antigua
try{
pagina_requerida = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
pagina_requerida.onreadystatechange=function(){ // función de respuesta
cargarpagina(pagina_requerida, id_contenedor)
}
pagina_requerida.open('GET', url, true) // asignamos los métodos open y send
pagina_requerida.send(null)
}
// todo es correcto y ha llegado el momento de poner la información requerida
// en su sitio en la pagina xhtml
function cargarpagina(pagina_requerida, id_contenedor){
if (pagina_requerida.readyState == 4 && (pagina_requerida.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(id_contenedor).innerHTML=pagina_requerida.responseText
}
4. Los botones del menú, que son flash, llevan asociados acciones como ésta:

Código:
getURL("javascript:llamarasincrono('contents/archivo.html', 'contenido')")
Ahora sólo me falta un pequeño detalle: el que comentábais. ¿Cómo hago exactamente para que sea accesible por quienes no tienen javascript habilitado, y además sea indexable por los buscadores?
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 02:33.