Diseño web modular PHP chau frames
Categories: CSS, Diseño, PHP - Tags: CSS, maquetación, modular, PHP¿Por qué debemos olvidarnos de los frames?
Los viejos frames funcionan bien pero google, yahoo y ningún buscador los indexa bien, así que perdemos ranking y será muy raro que aparezcamos en un buscador, además no nos permiten disfrutar de las ventajas del CSS.
¿Qué es diseño web modular?
Para reemplazar a los viejos frames, es mejor usar PHP y separar las secciones de nuestra página web en módulos, en castellano la vamos trozar como pollo, de tal forma que cada pedazo contenga la estructura de la página:
- top_page.php Aqui vamos a poner todos los encabezados html
- header.php Aqui vamos a poner el encabezado de nuestra página, es decir el título y el menú
- footer.php Aqui vamos a poner la parte de abajo de nuestra página nuestro copyright, links, etc
top_page.php
Primero todo header del html, nuestro titulo, hoja de estilos
1 2 3 4 5 6 7 8 9 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Mi pagina modular</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> |
header.php
Aqui vamos a poner nuestro encabezado y menu
1 2 3 4 5 6 7 8 |
footer.php
Aqui la parte final de nuestra página web
1 2 3 4 5 6 |
¿Cómo lo junto todo?
Pues usando includes vamos a pegar todas esas partes que se repiten en nuestra página web, y quedaría algo asi
1 2 3 4 5 6 | <?php include("includes/top_page.php"); ?> <?php include("includes/header.php"); ?> <div id="contenido"> <p>Nuestro texto va aqui</p> </div> <?php include("includes/footer.php"); ?> |
Aquí he descrito la forma más simple de hacer web modular pero no es la mejor forma, sobre todo a la hora de usar frienly url, o cuando tenemos muchas páginas, por lo que te sugiero leer la segunda parte de este tutorial
Gracias Xlogus, no sabes como te lo agradezco. Me he quedado en paro hace un par de meses y estoy aprovechando para aprender más cosas (mi profesión nada tiene que ver con esto, pero es que me encanta). Tengo varias webs hechas hace años con html (alguna con varios centenares de visitas diarias -son de historia-) y como un pobretón me he puesto a comprarme manuales de PC Cuadernos (que están bastante bien), pero se me cae el mundo encima cuando me meto en ellos con el tema PHP-MySQL.
A una amiga le quiero hacer una web que sé que le podría hacer en un plis plas con html puro y frames con CSS y que quedaría de lujo, pero le he dicho que mientras estudio y aprendo quiero hacerle a ella una web a la última, ya que hay que meter mucha información.
Mira: Solo bajarme los archivos de ejemplo, subirlo a un servidor de prueba y verlos ahí me ha dado un gusto tremendo.
Voy a estudiar los códigos y eso a ver qué tal. Espero no te moleste si abuso más de tu ayuda más adelante.
Me queda la duda de cómo ir creando más contenidos en el cuerpo y dónde meterlo porque tú metes todo en el index php. Entiendo que sería crear unas páginas tal que esa pero con otros textos fotos o lo que sea y en vez de index.php llamarlas index1.php, index2.php etc…
Gracias, sinceramente, de verdad.
Hola Miguel, interesante didáctica: sencillo y muy bien explicado… y muy bueno el poder descargar el ejemplo.
Gracias
Saludos
Otra vez gracias.
La web que estoy haciendo está quedando fantástica gracias a tu ayuda.
Da gusto saber que hay personas que como tú se dedican a ayudar al prójimo de esta manera.
Josean
Hola Miguel,
La página va poco a poco gracias a tu tutorial…
La cosa es que la parte de navegación la he hecho con pestañas a base de tablas ul y elementos li y cuando quiero hacer con una web normal sin php que la pestaña de la parte actual se mantenga con el efecto como de activada usaba:
#navegacion a:hover,
#inicio #pestaña01 a, (donde “inicio” era el id del body de la página inicio.html)
#otraparte# pestaña02 a (sin coma donde otraparte era el id de la pag. otraparte.html)
etc…
¿Me puedes ayudar?.
Gracias de antemano.
Eso es facil de hacer basta poner una condición de php, imagina que estas en index.php?page=aboutus, hay que indicarle al menu que esa aparezca con un estilo distinto, en el menu ponle esta condicion
2
3
4
5
<li>opcion1</li>
<li <?php if ($_GET['page']=="aboutus")
{ echo 'class="seleccionado"'} ?>>About Us</li>
</ul>
Todo eso usando la segunda parte del tutorial. Si es usando solo la primera parte vas a tener que definir alguna variable para lograr el mismo resultado
Gracias nuevamente
Hola Miguel, muy buena la explicación. Ahora te hago una consulta. Esto funciona como los antiguos frames? Por ejemplo, si en top_page.php inserto una animación en flash con sonido, cada vez que cambio de sección y se vuelve a cargar la animación, el sonido no vuelve a comenzar? en ese caso no funcionaría como los viejos frames, no sería de mucha utilidad dado que la animación no quedó fija sino que volvió a cargarse. No se si me he explidado bien. Existe alguna solución para eso? Desde ya muchas gracias.
No funciona como los frames el sonido volveria a comenzar, la ventaja de web modular es en cuanto a SEO, soluciones a lo que dices… complicado poner el flash en un popup, de mi experiencia te digo que solo bvale la pena poner musica en la pagina de inicio ya que a los 5 minutos la gente se aburre de escucharla.
pero porque los Flash no se reproducen en un modulo de la carpeta include ?
Cuando se trabaja con web modular las rutas relativas cambian un poco, si llamas un flash desde includes y el flash esta en la carpeta flash no de berias invocarlo con la ruta …/flash/miflash.swf sino que la ruta correcta es flash/miflash.swf ( es decir todas las rutas deben ser relativas al directorio raiz)
Hola Miguel, nuevamente muy clara la explicación y desde ya te agradezco el tiempo dedicado. Sin embargo, me solicitan sonido con la opción de poder apagarlo o bajar el volumen del mismo así es que no me quedará otra que poner un frame (algo que no quería hacer). Seguramente te estaré consultando a medida que vaya avanzando. Muchas gracias y saludos.
Hola, hace poco tuve un problema muy parecido, e implementé una solución usando ajax, aunque esta afecta el SEO de la página modular lo implementé de tal forma que evite reprogramar mucho, puedes verlo aqui
Está muy bien este tutorial, pero tengo una duda y espero que me puedas contestar.
Como hacer para que sea friendly URL
index.php?page=services
osea que por ejemplo se vea
services.php o también services/
gracias de antemano…
Hola, no es complicado hacerlo modificando el .httacces, lo puedes ver en este tutorial
Amigo!!! tengo un menú realizado DHTML menu, y resulta q cuando lo monto a el solo en el index, me aprecen normal los acentos, cuando lo coloco en encabezado.php y lo incluye en index.php, no me muestra los acentos, de antemano muchísimas gracias
Los problemas con tildes se deben a la codificación, publiqué un post al respecto puedes verlo AQUI
Para el caso especifico del ejemplo se puede usar templates mediante el dreamweaver.
El caso de los frames, yo los usaria solo si quiero mostrar un archivo PDF, entre otros usos.
Totalmente de acuerdo contigo en cuanto al uso de frames con PDF pero no coincido con el tema de los templates para portales tal vez para sitios pequeños de 10-20 paginas pero para portales con contenido dinámico no tiene ni pies ni cabeza hacerlo sin una web modular.
No es mejor usar un Framework para asi aplicar el MVC que includes con las secciones/partes de la seria el cuerpo de la web? (pregunto).
Tambien ya que las URL limpias o amigables estan tambien bajo este ambiente.
Miguel la idea es compartir y debatir opiniones, no borrar comentarios solo por alguna razon (que solo su autor conoce) y que solo expresa que lo que no le guste como comentarios lo quite, aunque estos no tengan ningun contenido insultante o critica negativa.
No se si borré uno por error, en fin…
Si vas a hacer un proyecto pequeño o sin presencia de diseñadores es absurdo complicarse con MVC. Ya más adelante postearé xq usar Smarty no siempre es tan astuto, ya que termina creando un nuevo pseudo lenguaje.
[...] Este es un tema bastante básico pero ya que han habido varias consultas al respecto me pareció interesante comentarlo y sobre todo explicar como aplicarlo, por cierto los conceptos usados aquí son iguales cuando se usa una web modular. [...]
Hola Miguel
gracias por el tuto, me está sirviendo bastante, tengo una duda. Lo probé en xampp 1.7.3, creo que es la última versión, y no funcionó, ahora lo estoy probando en xampp 1.6.7 y funciona. Es por la versión de PHP?, puede adaptrse a php 5.3 ? gracias por la rpta.
S fuera un error con la versión de PHP debe dar un mensaje deprecated functions o similar, lo más probable es que baste reemplazar <? por <?php (seguro es un error de configuración para short open tag)
Hola, gracias a este tutorial logre avanzar bastante en hacr una web con este tipo de prgramación pero… me choque la cabeza contra la pared cuando trate de poner 2 menus en diferentes lugares de la web EJ: (menu.php)y (menu_left.php)
dado que este ultimo no se como alinearlo hacia la izquierda , ya probe con CSS pero seguramente estoy haciendo algo mal. En realidad lo que quisiera que me quedara es: (menu_left.php) alineado a la izquierda y el contenido (contenido.php) a la derecha pero en la misma posicion vertical, se que es posible pero algo se me esat escapando. Muchas Gracias! de antemano por su Ayuda!
Pues si debes solucionarlo usando CSS, puedes ver un ejemplo aqui http://www.miguelmanchego.com/2009/maquetacion-css-a-tres-columnas/ y colocar un include adicional por esa nueva columna
[...] que me suelen hacer con cierta y la verdad no debería haber complicaciones ya que hacerlo en web modular es exactamente igual que hacerlo en una web que no sea [...]
muchas gracias por el tutorial, me ha servido bastante, me queda sólo una duda para cuando al usar menu, left, right y footer, si la pagina de la derecha es más grande que la de la izquierda, como puedo cubrir esta zona sin foto no color de fondo? muchas gracias desde ya
Agrega un fondo al div que contiene a ambos así simulará que ambos div crecen
Que buena explicación no soy diseñador web pero pude entender muy bien el concepto, me queda una duda respecto al title de las paginas, en el ejemplo el title siempre es el mismo en todas ellas ¿como asigno titulos independientes a cada page?