Agregar paginas a mi sitio HTML5

isaack · #1 (**permalink**) 02/12/2014, 11:50

Hola amigos programadores, yo no soy programador pero estoy intentando aprender a realizar sitios sencillos con HTML y CSS, ya logre crear lo que podriamos decir es la pagina de inicio (index) con sus botones y todo y con hoja de estilo en CSS, lo que no he logrado encontrar es un tutorial que me diga como agregar mas paginas a mi sitio, por ejemplo que el boton "MENU" refresque la pagina principal y me muestr el Menu de productos de la empresa (restaurante), etc etc. Dicho de otra forma que la Pagina principal sea solamenete una especie de plantilla que mantenga fijos ciertos elementos unicamenete cambiando digamos el "main".

Cabe mencionar que utilice "SUBLIME" para editar el codigo los elementos graficos en PS. Saludos y gracias de antemano.

pzin · #2 (**permalink**) 02/12/2014, 14:41

Puede hacerse con JavaScript, mediante AJAX, para cargar el contenido asincrónicamente. Si estás empezando te recomendaría dejar eso para más adelante, ya que requiere al menos unos conocimientos medios.

PHPeros · #3 (**permalink**) 02/12/2014, 15:00

Lo que dices suena a navegación por iframes y cosas del siglo pasado.

Si que podrías hacer una navegación por AJAX como dice pzin, pero tendrás muchos problemas de cara al SEO, ya que es bastante complicado que los motores de búsqueda indexen tu sitio...

Observa la documentación:

https://developers.google.com/webmas.../specification

¿A que se te ha revuelto el estómago?

isaack · #4 (**permalink**) 02/12/2014, 17:06

Gracias amigo, entiendo lo que me comentan, solo quiero hacer un sitio comun y corriente como lo que hace DW, lo que hacian presisamente los frames. Me imagino que solamenete debo copiar la pagina index y cambiarle el nombre y despues eliminar y sustituir contenidos pero me suena muy burdo.

PHPeros · #5 (**permalink**) 03/12/2014, 06:39

Depende de la estructura de tu sitio y el enfoque que le quieras dar

Mucha gente prefiere usar un MVC para trabajar la lógica de negocio y la interfaz del usuario por separado. Generalmente se hace utilizando bases de datos para gestionar los datos que va a usar la aplicación (modelo), y la parte de cómo se van a mostrar al cliente (vista), unidos mediante un controlador.

PHP tiene muchos frameworks orientados a ello...

GeekGirl · #6 (**permalink**) 03/12/2014, 08:27

Podés hacerlo con un PHP bastante rudimentario y simple y cargar la plantilla deseada según el contenido que envíes por variables. Si no tenés idea de programación, puede llegar a ser algo complejo.

Básicamente necesitás usar un archivo con extensión .php y que tus links siempre vayan al mismo sitio cambiando solamente la variable que envían. Ejemplo:

Código HTML:

<ul>
    <li><a href="index.php?seccion=home">Home</a></li>
    <li><a href="index.php?seccion=nosotros">Nosotros</a></li>
    <li><a href="index.php?seccion=contacto">Contacto</a></li>
</ul>

De esta manera, siempre vas a estar dentro del mismo archivo (index.php). A continuación, lo que necesitás hacer es levantar el valor de esa variable sección (o como le hayas puesto).

Código PHP:

  $seccion = $_GET['seccion'}; // home, nosotros, contacto

Y de acuerdo al valor recibido, cargar la plantilla que corresponda:

Código PHP:

  <div id="main"> 
switch($seccion) { 
    case 'home' : include('home.php'); break; 
    case 'nosotros': include('nosotros.php'); break; 
    case 'contacto': include('contacto.php'); break; 
    default: include('home.php'); // Una plantilla a incluir por defecto 
} 
</div>

De esta manera vas a poder cargar tu main dinámicamente. Es un ejemplo simple y tosco pero que sirve para que te des una idea.

Saludos

jezuz1n · #7 (**permalink**) 11/12/2014, 12:38

Hola buenas, yo estoy haciendo algo parecido para clase y lo hacemos por frames.
Tengo un archivo llamado index.html

<html>

<frameset frameborder="yes" border="10" bordercolor="black" frameborder="no" noresize="noresize" scrolling="0" rows="38%,*,6%">
<frame noresize="noresize" scrolling="0" src="cabecera.html"/>
<frameset frameborder="yes" border="10" bordercolor="black" cols="15%,*">
<frame noresize="noresize" scrolling="0" src="menu.html"/>
<frame name="centro" noresize="noresize" scrolling="0" src=""/>
</frameset>
<frame noresize="noresize" scrolling="0" src="final.html"/>
</frameset>
<NOFRAMES bgcolor="#FFA600"></NOFRAMES>

</html>
Tengo otra pagina llamada menu.html, aquí tengo un menu con enlaces que se cargan en el marco central.
<html>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
<title>MENÚ</title>
</head>
<link rel="stylesheet" href="hojaestilo.css" type="text/css"/>

<body>
<center>
<ul id="menu2">
<li ><a class="actual" target="centro" href="sol.html">Índice</a></li>
<li ><a class="actual" target="centro" href="catalogo.html">Móviles</a></li>
<li ><a class="actual" target="centro" href="formulario3.html">Pedidos</a></li>
<li ><a class="actual" target="centro" href="tabla.html">Contacto</a></li>

</ul>
</center>
<hr/ id="linea">
<center>
<script type="text/javascript" src="http://counter2.allfreecounter.com/private/countertab.js?c=949c31780fdf42586ddd389aff056f0f"> </script>
</center>
<center>
<map name="twitter">
<area shape="circle" coords="18,16,9" target="_blank" href="http://www.twitter.com"/>
<area shape="default" nohref="nhref"/>

</map>
<img src="twitter.png" usemap="#twitter"/>
</center>
<center>
<map name="instagram">
<area shape="circle" coords="14,19,9" target="_blank" href="http://www.instagram.com"/>
<area shape="default" nohref="nhref"/>

</map>
<img src="instagram.png" usemap="#instagram"/>
</center>
</body>
</html>
Aparte de esto tengo sus estilos y los distintas páginas que se complementa, con esto quería resolver tu duda de unir tu index con distintas páginas.
Yo lo hice con frames porque estoy aprendiendo html, ya me gustaría saber nuevos métodos mas innovadores.

Salu2

fede5426 · #8 (**permalink**) 15/12/2014, 08:30

Al igual que GeekGirl, yo utilizo un switch pero de otra manera, para poder cambiar tambien el titulo de la pagina.

Dandote un ejemplo, tu index.php deberia quedar asi:

Código PHP:

  <?php
$opcion=$_GET["opcion"];
switch($opcion){

    case "home": //cuando el valor de la "opcion" sea "home"...
        $contenido="home.php"; //ruta del contenido (si esta dentro de la carpeta "php" seria "php/home.php")
        $titulo="Home"; //titulo que aparece en la pestaña del navegador
        break;

    case "pagina1":
        $contenido="pagina1.php";
        $titulo="Pagina 1";
        break;

        case "pagina2":
        $contenido="pagina2.php";
        $titulo="Pagina 2";
        break;
        
    default:
        $contenido="home.php";
        $titulo="Home";
        break;
}
?>

<!DOCTYPE html>
<html>
<head>
    <title><?php echo $titulo; ?></title>
</head>
<body>
    <ul>
        <li><a href="?opcion=home">Home</a></li>
    <li><a href="?opcion=pagina1">Pagina 1</a></li>
    <li><a href="?opcion=pagina2">Pagina 2</a></li>
    </ul>
<?php // el signo de interrogacion "?" hace referencia a que es una variable de opcion, puede ser cualquier cosa 
//solo puse "opcion" para que sea mas facil de entender, podria ser "?op=". 
//Y lo que va despues del igual es el valor que le asignas a esa opcion, que va a cambiar con el switch que usamos arriba ?>

       <div>
              <?php include($contenido);?>
       </div>
</body>
</html>

De esa forma, imprimes en variables el titulo y el contenido.. y con el switch cambias las 2 variables dependiendo la opcion que hayas seleccionado.

Espero se entienda y te sirva, saludos!

PD: Jezuz1n, si no me equivoco los frameset ya no se utilizan, estan depreciados. Nunca los use pero me parece haber leido algo, perdon si me equivoco! ja!

Rafael · #9 (**permalink**) 15/12/2014, 13:47

Los Frameset en realidad están obsoletos. Los 2 niveles para sacar algo de una especificación son, depreciados y obsoletos.

La primera avisa que ya no van a ser soportados y da algunos años para corregir las cosas, obsoleto es que puede que ya no puedan ser leídos.