1. ¡OFERTA! con cupón "DIRVPS": hosting por $0,01 y también VPS Linux y Windows por $0,01 el primer mes por Interserver ← publi
    Descartar aviso
Descartar aviso
Al usar este sitio web, aceptas que nosotros y nuestros socios podamos establecer cookies para fines tales como personalizar el contenido y la publicidad. Más información.

ayuda html

Tema en 'Programación y Diseño Web' iniciado por Bellaco, 16 Ago 2005.

  1. Bellaco

    Bellaco Nuevo usuario

    nabegando por el web en contre una pagina de internet muy interesante y la guarde en my maquina rebisando entre los archivos de la descarga en contre una pagina que solo tenia el contenido, asi como otra que solo tenia el menu etc como se ase esto en html llamar a una pagia desde otra pagina.

    <a href="http://img234.imageshack.us/my.php?image=ejemplo9xf.png" target="_blank">http://img234.imageshack.us/my.php?image=e...=ejemplo9xf.png</a>

    donde todo pareseser independiente para k lo puedan constatar ustedes mismos en tren a <a href="http://www.lover-ice.com/1.htm" target="_blank">http://www.lover-ice.com/1.htm</a> y guarden la pagina en su makina


    si alguien sabe como aserlo ayudeme grasias por su time
     
  2.  
  3. Wooper

    Wooper Un Angel Serigrafo

    se le llama hacer frames o marcos
    aunque se necesita un editor de paginas
    yo uso el dreamweaver pero igual
    me permiti hacer un pequeño tutorial espero y te sirva
    un saludo
     
  4. Wooper

    Wooper Un Angel Serigrafo

    por favor un moderador puede arreglarme las imagenes que muestro , gracias.

    primero abres tu editor de html
    en mi caso dreamweaver
    escojes conjunto de marco como se muestra en la imagen :

    <a href="http://img171.imageshack.us/img171/5662/13ud2.jpg" target="_blank">http://img171.imageshack.us/img171/5662/13ud2.jpg</a>

    a continuacion te saldra lo siguiente y ahi tu escojes el tipo de frame que tu necesites.. yo escoji el siguiente :

    <a href="http://img266.imageshack.us/img266/5083/22ec.jpg" target="_blank">http://img266.imageshack.us/img266/5083/22ec.jpg</a>

    acontinuacion sale lo siguiente pero sale en blanco
    asi que me permiti cambiarle el fondo a las 3 paginas para que se viera el resultado
    aqui tienes :

    <a href="http://img319.imageshack.us/img319/4493/33xh.jpg" target="_blank">http://img319.imageshack.us/img319/4493/33xh.jpg</a>

    al momento de guardar tus frames deves elejir el nombre que quieras ponerle segun la seleccion que te muestra al guardar
    espero y te sirva

    si tienes alguna duda no dudes en postearla.
    salu2
     
  5. Bellaco

    Bellaco Nuevo usuario

    muy util creo que entendi grasias por tu alluda
     
  6. Bellaco

    Bellaco Nuevo usuario

    muy bien ahora la pregunta seria si ago my layaunt en photoshop como aplico los marcos o frames al momento de llevarla a dreamweaver,

    a y si mi layaunto no tiene ningunas de las formas que bien predeterminadas para los frames

    1000 disculpas por las molestias
     
  7. kitsch

    kitsch Nuevo usuario

    Pues efectivamente lo que buscas es una pagina de marcos, una opcion la cual si te soy honesto <b>YO NO RECOMENDARIA</b> y acontinuacion te explico porque:

    1.- Los frames se usan principalmente por comodidad del PROGRAMADOR y no por beneficio del usuario. Uno de los problemas que trae es el mayor tiempo de carga. Casi nunca se usan dos frames, son usualmente tres, por lo que para ver una página debes cargar tres (algo que me parece incongruente). Otro importante problema que produce es en la usabilidad. Al usar frames desaparecen la mayor parte de las guías de navegación y los usuarios se desorientan. Desaparece, por ejemplo, la dirección de la página en la barra de URL. Tampoco se pueden hacer enlaces directos a páginas específicas (con lo que rompes el espíritu mismo de la web), y pero aún, alguien puede acceder a alguna de tus páginas sin pasar por lor frames y perder TODA tu estructura de naveagción y diseño!

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

    # Quitan espacio en la pantalla. El espacio ocupado por los frames fijos se pierde a la hora de hacer páginas nuevas, porque ya está utilizado. En definiciones de pantalla pequeña o dispositivos como Palms, este problema se hace más patente.

    # Fuerzan al visitante a entrar por la declaración de frames. Si no lo hacen así, sólo se vería una página interior sin los recudros. Estos recuadros podrían ser insuficientes para una buena navegación por los contenidos y podrían no conservar una buena imagen corporativa.

    # La promoción de la página sería, en principio, más limitada. Esto es debido a que sólo se debería promocionar la portada, pues si se promocionan páginas interiores, podría darse en caso de que los visitantes entrasen por ellas en lugar de por la portada, creandose el problema descrito en el punto anterior.

    # A mucha gente les disgustan pues no se sienten libres en la navegación, pues entienden que esas partes fijas están limitando su movilidad por la web. Este efecto se hace más patente si la página con frames tiene enlaces a otras páginas web fuera del sitio y, al pulsar un enlace, se muestra la página nueva con los marcos de la página que tiene frames.

    # Algunos navegadores no los soportan. Esto no es muy habitual, pero si estamos haciendo una página que queramos que sea totalmente accesible deberíamos considerarlo importante.

    # Los bookmarks o favoritos no funcionan correctamente en muchos casos. Si queremos incluir un favorito a una página de un frame que no sea la portada podemos encontrar problemas.

    # Puede que el botón de atrás del navegador no se comporte como deseamos.

    # Si quieres actualizar más de un frame con la pulsación de un enlace deberás utilizar Javascript. Además los scripts se pueden complicar bastante cuando se tienen que comunicar varios frames entre si.
    -----------------------------------------------------------------------------------
    Texo sacado de desarrollo web: <a href="http://www.desarrolloweb.com/articulos/936.php?manual=5" target="_blank">http://www.desarrolloweb.com/articulos/936...36.php?manual=5</a>

    En lo personal yo utilizaria iFrames y trabajar con una web modular, trabajaras un poco mas en principio (por eso de editar codigo ya sea php o asp) y tal vez un poco en tomarle el hilo, pero una vez que lo hagas, te ahorrara bastante el trabajo.
     
  8. Bellaco

    Bellaco Nuevo usuario

    wuao que buena explicasion

    my fin que queria crear una especie de plantilla para si en bes de inclcuir todo en cada pagina de my sitio solo tenner que cambiar la parte el centro y todas las demas areas siguirian igual

    es esto posible ?

    deser posible como lo ago?
     
  9. kitsch

    kitsch Nuevo usuario

    Claro que es posible, la mejor forma de hacerlo es crear una llamada <b>Web Modular</b>, y la forma mas facil de hacerlo es con php, tu diseño y algo de pasciencia mientras le tomas el hilo. Un sitio asi, matara dos pagajor de un solo tiro, seguridad, dinamismo y diseño, todo en el mismo paquete, ademas de que te sera mas facil y rapido organizar tu trabajo en un futuro. Te dejo un tutorial bastante completo para arrancar en las webs modulares:

    <a href="http://www.forowebmasters.com.ar/showthread.php?t=4" target="_blank">http://www.forowebmasters.com.ar/showthread.php?t=4</a>
    (aunque en San Google :) puedes encontrar muchisima informacion relacioanada, por el momento solo tengo este a la mano)

    Te explico brevemente como funcionan estos sitios: entre sus principales caracteristicas se encuentra el poder editar simplemente "bloques" de toda la estructura de tu sitio, es decir: modulo del head(cabecera y menus), modulos de menu(el lateral), modulo del footer(el pie de pagina), modulo de contenido (donde va la info principal), etc.; y definir todo dentro de una misma template o layout (tu diseño).
     
  10. kitsch

    kitsch Nuevo usuario

    Se me pasaba, puedes ver mas o menos como funciona en la web que estoy creando:

    <a href="http://thekitsch.host.sk" target="_blank">http://thekitsch.host.sk</a> aun no esta lista, pero la idea base es mas o menos la misma.
     
  11. Impactantes

    Impactantes Nuevo usuario

    PUES SI, es un frame.

    Sinceramente la información que te podamos dar pro aki sobre frames va a ser pequeña.

    PRIMERO te recomiendo que busques en el GOOLE manual sobre frames, o algo parecido, y lo segundo que te pilles un editor visual como el DREAMWEAVER


    Un saludo
     
  12. Bellaco

    Bellaco Nuevo usuario

    muchisimas grasias amigo no saben cuanto les agradesco la informacion k ma an suministrado
     
  13. Bellaco

    Bellaco Nuevo usuario

    me he nutrido mucho grasias alas fuentes k me dieron spbre web modular peroencontre algo [iframes vs. include] y nisiquiera en google encontre algun contenido concreto sobre el include

    que es, como fuenciona?
     
  14. kitsch

    kitsch Nuevo usuario

    Te dejo una explicacion (NO ES MIA, PERO SERVIRA) de como funcionan estas, es practicamente un tutorial:

    Cuando aprendemos nuestros primeros pasos con PHP, cualquier tutorial o manual que leemos, nos enseña y vanagloria las bondades de poder incluir el código PHP directamente entre el HTML. Entonces, es muy habitual ver ejemplos del tipo:
    <!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->

    <html>

    <head><title>Ejemplo de PHP embebido</title></head>

    <body>

    <?php

    echo &nbsp;"Este texto se hace con PHP";

    ?>

    </body>

    </html>

    <!--c2--></div><!--ec2-->
    Y como la mente y el alma de un principiante de cualquier tema, está preparada para aprender todo lo que pueda, en el menor tiempo que pueda, toma este tipo de ejemplos como "verdades universales" y comenzamos a ver código PHP embebido entre el HTML por TODOS lados. Pero no hay que preocuparse, esto no es necesariamente malo, y todos lo hicimos en menor o mayor medida al comenzar. Es un paso necesario que hay que aprender a superar. :D

    Luego de un tiempo, y después de haber leido un poco más, aprendemos que todas las partes comunes de código que son repetitivas, pueden residir en archivos separados y ser "Incluidas" en nuestro código con tan solo el uso de una función:
    <!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->

    <html>

    <head><title>Ejemplo de PHP embebido</title></head>

    <body>

    <? &nbsp;include( 'includes/header.php' ); &nbsp;?>

    <table>

    &nbsp; <tr>

    &nbsp; &nbsp; <td width="120"> <? &nbsp;include( 'includes/menu.php' ); &nbsp;?> </td>

    &nbsp; &nbsp; <td>Aqui va el contenido del sitio web propiamente dicho. Recordar que es terriblemente MALO y PERJUDICIAL para la salud de su sitio, utilizar archivos externos con extensión ".inc"</td>

    &nbsp; </tr>

    <? &nbsp;include( 'includes/footer.php' ); &nbsp;?>

    </table>

    </body>

    </html>

    <!--c2--></div><!--ec2-->
    Entonces, ese es el momento en que include() se convierte en nuestro mejor amigo y descubrimos, fascinados, como podemos lograr una verdadera mejora en el mantenimiento de nuestros sitios, al tener que modificar 1 solo archivo y que este cambio, se vea reflejado en TODAS las páginas que incluyan ese archivo. Hemos, señoras y señores, alcanzado el Nirvana.

    Pero, lamento decepcionarlos, ningún estado de felicidad suprema es permanente. Luego de un tiempo, y a medida que seguimos utilizando este método, de repente nos vamos dando cuenta que algo simplemente no cuadra. Si bien el anterior método del include() nos salvó en su debido momento, nos vamos dando cuenta que para crear una nueva página, es necesario repetir muchas veces los include() que llaman a las partes comunes de nuestro sitio. Esto sin contar que si, por arte de magia o capricho de un jefe/cliente, la cabecera de nuestro sitio pasa de ser header.php a cabecera.php, deberiamos modificar uno a uno todos los archivos que hagan un llamado a "header.php" y hacer el reemplazo.

    Es en este punto, donde cientos de programadores, todos los años se hacen la misma pregunta: ¿No habrá una manera mejor de hacer esto?

    Una Mejor Manera
    Y si. Siempre existe una mejor manera de hacer las cosas. Y este caso no es la excepción.

    Después de mucho pensar, y de mirar constantemente el código, una y mil veces, uno termina siempre preguntándose : ¿Y si hiciéramos las cosas al revés? ¿Qué pasaría si en vez de incluir todas las partes comunes de nuestro sitio (Header/Footer/etc), solamente incluyéramos el contenido?

    Pero que buena pregunta! Veamos que sucedería.

    La primera cuestión que nos llega a la mente, es que sería necesario indicarle a nuestro archivo.php, qué página queremos cargar. Veamos como podemos hacer esto :
    <!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->

    <?php

    // Leemos la variable que indica que página queremos cargar.

    if(empty( $_GET [ 'modulo' ]))

    $pagina = 'home.php';

    else

    $pagina = $_GET [ 'modulo' ];

    include( 'includes/header.php' );

    include( 'modulos/' . $pagina );

    include( 'includes/footer.php' );

    ?>

    <!--c2--></div><!--ec2-->
    De esta manera, si llamáramos a este archivo index.php , para cargar algún "modulo" de nuestro sitio web, tan sólo deberíamos indicarlo en el URL, de esta manera : <a href="http://www.nuestrositio.com/index.php?modulo=foro.php" target="_blank">http://www.nuestrositio.com/index.php?modulo=foro.php</a>

    Pero de este método se desprenden varias cuestiones, a saber:
    • Si un usuario "distraido" pusiera en la variable modulo un nombre de archivo inexistente, aparecería un mensaje de error (si PHP está configurado para mostrar errores, lo que es lo más común) indicando que el archivo no existe. Así que es necesario primero, identificar si el archivo que el usuario intenta acceder, existe.
    • Cuestiones de Diseño : Es muy posible, que no todos los "módulos" utilicen el mismo "diseño base" del sitio, o sea, que no siempre sea necesario mostrar la misma estructura, o el mismo sistema de navegación. Sería necesario de alguna manera, indicarle a nuestro sitio que "diseño base" utilizará cada módulo.
    • Último pero no menos importante, la Seguridad. Dejar al descubierto una variable que indica que archivo incluir, es una de las fallas de seguridad más serias que posee un sitio web. ¿Se imaginan que sucedería si un usuario, no ya tan "distraido" sino un poco más malicioso, llamara a nuestro sitio web de esta manera : <a href="http://www.nuestrositio.com/index.php?modulo=../../../../../../etc/passwd" target="_blank">http://www.nuestrositio.com/index.php?modu..../../etc/passwd</a> ???
    Sirenas de Emergencia por todos lados !!! De esto se desprende que hay que encontrar una manera de controlar que la página que sea pedida, esté dentro de las opciones permitidas.

    Vistas todas las desventajas de este primer acercamiento, veremos de que manera las podemos solucionar con un poco de ingenio y mucho PHP.

    Modularizando nuestro sitio
    Teniendo las consideraciones de seguridad y diseño en cuenta, vamos a desarrollar un sistema que nos permita modularizar nuestro sitio, manteniendo cierta flexibilidad para poder indicar que Diseño ( o Layout, como lo llamaremos en el código ) utilizarán nuestros módulos. Además, mantendremos un listado de todas las páginas que pueden ser invocadas, de manera que evitaremos que cualquier archivo de los que el Webserver tenga acceso de lectura, pueden terminar "sin querer" en el navegador de nuestro visitante.

    Este listado podríamos guardarlo de diferentes maneras : archivos de texto con algún formato estándar o propio, en una Base de Datos, en un archivo XML (como es costumbre en algunas aplicaciones más complejas) o con tipos de datos propios del PHP (en este caso, arreglos). " Yo escogo este último porque me place, vosotros podéis escoger el tipo que queráis " (los fanáticos de Cha-Cha-Cha estarán esbozando una sonrisa). Y justifico mi decisión:
    • No tengo personalmente nada en contra de los archivos de texto plano, pero parsear los contenidos de uno, con el tipo de formato que sea, incluye cierta lógica de programación extra innecesaria, ya que la idea es hacer las cosas lo más sencillas posibles y no al revés.
    • Una base de datos definitivamente haría más sencillas las cosas, pero limitaría la utilidad de este método a aquellos servidores que posean bases de datos. Se que los servidores que no poseen bases de datos hoy por hoy son escasos, pero prefiero no basarme en esa solución para hacer la aplicación lo más compatible posible.
    • Muchos ven en el formato XML al "santo grial" de las soluciones para almacenar datos o utilizarlos como sistemas de configuración. Y posiblemente para aplicaciones de escritorio esto no sea tan errado, ya que el archivo XML se parsea una vez y luego se mantienen sus datos en memoria durante toda la "vida" del programa. Pero en un ambiente web, sería necesario no solo que el PHP tenga activada alguna de las opciones para trabajar con XML, sino que se tendría que parsear el archivo XML ( con el gasto de recursos que esto conlleva ) una vez POR CADA pedido de página que se le hiciera el servidor. Definitivamente, NO. Aparte, es un tutorial para principiantes, así que vamos a hacer las cosas sencillas.

    Así es que para nuestro sistema de configuración, vamos a utilizar los viejos y queridos arreglos asociativos de PHP. El siguiente es un ejemplo básico para un sitio web realmente pequeño, pero ya veremos de extenderlo a medida que nuestro ejemplo "evolucione".
    Archivo conf.php:
    <!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->

    <?php

    /*

    * Archivo de configuración para nuestra aplicación modularizada.

    * Definimos valores por defecto y datos para cada uno de nuestros módulos.

    */

    define ( 'MODULO_DEFECTO' , &nbsp;'home' );

    define ( 'LAYOUT_DEFECTO' , &nbsp;'layout_simple.php' );

    define ( 'MODULO_PATH' , &nbsp;realpath ( './modulos/' ));

    define ( 'LAYOUT_PATH' , &nbsp;realpath ( './layouts/' ));



    $conf [ 'home' ] = array(

    'archivo' &nbsp;=> &nbsp;'home.php' ,

    'layout' &nbsp;=> &nbsp;LAYOUT_DEFECTO &nbsp;); &nbsp;

    $conf [ 'articulo' ] = array(

    'archivo' &nbsp;=> &nbsp;'art.php' &nbsp;);

    ?>

    <!--c2--></div><!--ec2-->
    Aquí vemos, como en la primera parte de nuestro archivo, definimos algunas constantes que nos van a servir: MODULO_DEFECTO, indicando cuál de los módulos cargar si no se indicó ninguno, LAYOUT_DEFECTO que indica que "diseño" se utilizará por defecto en los módulos, MODULO_PATH y LAYOUT_PATH, indicando directorios en los cuales vamos a almacenar nuestros módulos y layouts. En el ejemplo, quedarán en dos directorios separados, pero podrían ser el mismo sin problema.

    Aqui vemos, que tenemos dos "módulos" en nuestra aplicación; "home" y "articulo" . Estos nombres de índices, son los que le vamos a pasar a nuestra variable modulo , indicando a que sección de nuestro sitio queremos acceder.

    Como vemos, cada "sección" contiene ( o deberia indicar ) dos directivas: "archivo" y "layout" . El primer valor es el nombre del archivo que efectivamente vamos a incluir, asociado con el nombre del indice del arreglo. Esto soluciona en gran parte el problema de seguridad que nombramos anteriormente, ya que no se indica directamente el nombre del archivo a incluir, sino que se indica a través de un nombre ficticio, un alias.

    El segundo valor, layout, es el nombre del archivo que contiene el diseño "base" de la aplicación. Aqui tenemos dos opciones, indicar en el archivo de configuración el nombre del archivo de layout, o expresar, mediante la constante definida antes, que cierto módulo utiliza el layout por defecto ( esto ayuda a la claridad luego cuando se quiera revisar el archivo de configuración y se aconseja ). Como podemos ver en el módulo "articulo", en este caso no se indica ningun archivo de layout. Esto nosotros lo tomaremos como que al no indicarse, se desea utilizar el layout por defecto (Esta es una opción realmente buena para los programadores holgazanes como yo, que no quieren escribir grandes archivos de configuración).

    Programando las bases
    Ya tenemos listo nuestro archivo de configuración, que servirá como columna vertebral de nuestra nueva aplicación modularizable. Ahora veremos como lo utilizamos. Pero primero, veamos un poco como organizaremos nuestro árbol de directorios en nuestra nueva aplicación, para tener todo bien ordenado.

    • includes/
    • layouts/
    • modulos/
    • index.php

    Así, vemos como tendremos un directorio para nuestros includes, uno para los módulos que componen nuestra aplicación y otro para los distintos layouts. Recordemos que ahora, nuestro archivo index.php será el único punto de entrada para nuestro sitio. Esto representa una ventaja ya que podemos colocar alli todas las tareas repetitivas (inicialización de variables, conexión a una base de datos, lectura de otros archivos de funciones o configuración, etc.). Otra de las ventajas es que ante 1 cambio que afectaría a todo el sitio web, solo hay que realizarlo en 1 solo archivo, solucionando alguno de los problemas que la metodología de varios archivos incluyendo partes comunes acarreaba.

    Nuestro archivo index.php comienza de esta manera:

    Archivo index.php:
    <!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->

    <?php

    // Primero incluimos el archivo de configuración

    include( 'conf.php' );



    /** Verificamos que se haya escogido un modulo, sino

    * tomamos el valor por defecto de la configuración.

    * También debemos verificar que el valor que nos

    * pasaron, corresponde a un modulo que existe.

    */

    if (!empty( $_GET [ 'mod' ]))

    $modulo &nbsp;= &nbsp;$_GET [ 'mod' ];

    else

    $modulo &nbsp;= &nbsp;MODULO_DEFECTO;



    /** También debemos verificar que el valor que nos

    * pasaron, corresponde a un modulo que existe, caso

    * contrario, cargamos el modulo por defecto

    */

    if (empty( $conf [ $modulo ]))

    $modulo &nbsp;= &nbsp;MODULO_DEFECTO;



    /** Ahora determinamos que archivo de Layout tendrá

    * este módulo, si no tiene ninguno asignado, utilizamos

    * el que viene por defecto

    */

    if (empty( $conf [ $modulo ][ 'layout' ]))

    $conf [ $modulo ][ 'layout' ] = &nbsp;LAYOUT_DEFECTO;

    ?>

    <!--c2--></div><!--ec2-->
    Como bien explican los comentarios, lo que hacemos primero es incluir el archivo de configuración, sin él no podríamos saber si un módulo está permitido o no, y que Layouts utilizar. Luego, validamos que la variable " mod " contenga algo. De estar vacía o con un nombre de algún módulo inexistente (segundo if() ), entonces hacemos que cargue el módulo por defecto, que está indicado en la constante MODULO_DEFECTO. Lo mismo hacemos para el Layout a cargar, si no está indicado en el archivo de configuración, tomamos por defecto el valor contenido en LAYOUT_DEFECTO. Continuamos con nuestro index.php

    Archivo index.php:
    <!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->

    <?php

    /** Aqui podemos colocar todos los comandos necesarios para

    * realizar las tareas que se deben repetir en cada recarga

    * del index.php - En el ejemplo, conexión a la base de datos.

    *

    * include('clases/class.DB.php');

    * $db = new DB();

    * $db->conectar();

    */



    /** Finalmente, cargamos el archivo de Layout que a su vez, se

    * encargará de incluir al módulo propiamente dicho. si el archivo

    * no existiera, cargamos directamente el módulo. También es un

    * buen lugar para incluir Headers y Footers comunes.

    */

    $path_layout &nbsp;= &nbsp;LAYOUT_PATH . '/' . $conf [ $modulo ][ 'layout' ];

    $path_modulo &nbsp;= &nbsp;MODULO_PATH . '/' . $conf [ $modulo ][ 'archivo' ];



    if ( file_exists ( $path_layout ))

    &nbsp; &nbsp; include( &nbsp;$path_layout &nbsp;);

    else

    &nbsp; &nbsp; if ( file_exists ( &nbsp;$path_modulo &nbsp;))

    &nbsp; &nbsp; &nbsp; &nbsp; include( &nbsp;$path_modulo &nbsp;);

    &nbsp; &nbsp; else

    &nbsp; &nbsp; &nbsp; &nbsp; die( 'Error al cargar el módulo <b>' . $modulo . '</b>. No existe el archivo <b>' . $conf [ $modulo ][ 'archivo' ]. '</b>' );

    ?>

    <!--c2--></div><!--ec2-->
    Aquí vemos algo que comentábamos antes. Encerrado en comentarios, hay cierto código que podemos incluir en nuestro index.php que, al ser ahora el único punto de entrada a todas las páginas de nuestro sitio, será ejecutado para cada página. Ya no hay que repetirlo en todas las páginas PHP, tan solo se coloca en el index.php . Esto es bueno, porque mientras menos repetición de código haya, más sencillo de mantener es todo. Vemos alli como ejemplo, el código para incluir e instanciar algún objeto de conexión a base de datos, pero podría ser cualquier otro código que necesitemos ejecutar cada vez que se vea una página, como por ejemplo, algún Validador de Usuarios registrados o el código necesario para dar seguimiento a las sesiones de Usuario.

    Finalmente, nuestro archivo verifica que el archivo de Layout que se quiere incluir, exista primero. De existir, entonces se incluye y ya veremos en un ejemplo, como nuestro archivo Layout debe incluir luego, al archivo del módulo. Si no existiera el archivo de Layout, se intenta incluir directamente el archivo del módulo que se pidió, sin Layout, y si éste archivo tampoco existiera ( demasiadas cosas que salen mal, no? ) entonces se muestra un error en la pantalla, indicando el nombre del módulo y el archivo que no se pudo hallar.

    Perfecto, ya tenemos todo listo para cargar los módulos que necesitemos. Ahora, veamos como será un módulo de ejemplo y su archivo de Layout.

    Creando Módulos
    Tenemos dos opciones a la hora de crear un archivo de layout. Son las siguientes:
    • Incluir Headers y Footers comunes a todas las páginas dentro del index.php, ANTES y DESPUES de incluir el archivo de Layout, en el que dejaremos solo el diseño propio de la página para que albergue al módulo. Esto es útil en el caso de que un archivo de Layout no se encuentre o no sea necesario, y al incluir el Módulo, ya esté cargado el Header y luego sea incluido el Footer.
    • Hacer que el archivo de Layout, aparte de incluir el archivo del Módulo, sea el encargado de incluir Headers y Footers, lo cuál puede ser útil si el diseño general de varias secciones del sitio cambia drásticamente, como distintas subsecciones con Headers y Footers diferentes, o en el caso de "Versiones para Imprimir" o la creación de versiones en PDF de ciertos artículos.

    Yo voy a elegir en este caso la segunda opción. Haré que el archivo de Layout 'layout_simple.php' (el Layout por defecto, según el archivo de configuración) sea el encargado de incluir los archivos que hacen de Header y Footer en la aplicación. Esto es preferible a la primera opción ya que si, por ejemplo, queremos que un módulo específico de nuestra aplicación, devuelva un archivo .GIF como resultado ( utilizando GD ), entonces de esta manera, podremos indicar para ESE módulo, un archivo de Layout que se encargue de enviar los Headers correctos y luego incluir el archivo del módulo. Pero no se preocupen por estas consideraciones, ahora, veamos un ejemplo de Layout, que guardaremos en el directorio /layouts :

    Archivo layout_simple.php:
    <!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->

    <html>

    <head>

    &nbsp; &nbsp; <title>Tu Sitio Modular</title>

    </head>

    <body bgcolor="#9999cc">

    <basefont color="white" face="Verdana" />

    <?php &nbsp;include( 'includes/header.html' ); &nbsp;?>

    <table width="100%" border="0" cellspacing="1" cellpadding="1">

    &nbsp; &nbsp; <tr>

    &nbsp; &nbsp; &nbsp; &nbsp; <td width="140" bgcolor="#5b69a6"> </td>

    &nbsp; &nbsp; &nbsp; &nbsp; <td>

    <?

    if ( file_exists ( &nbsp;$path_modulo &nbsp;)) include( &nbsp;$path_modulo &nbsp;);

    &nbsp; &nbsp; else die( 'Error al cargar el módulo <b>' . $modulo . '</b>. No

    &nbsp; &nbsp; existe el archivo <b>' . $conf [ $modulo ][ 'archivo' ]. '</b>' );

    ?>

    &nbsp; &nbsp; &nbsp; &nbsp; </td>

    &nbsp; &nbsp; </tr>

    </table>

    <?php &nbsp;include( 'includes/footer.html' ); &nbsp;?>

    </body>

    </html>

    <!--c2--></div><!--ec2-->
    Ven ? es un simple archivo HTML con la estructura básica de las páginas de nuestro sitio, incluyendo el Header, el Footer y el código necesario para llamar al módulo pedido por el usuario. Por favor noten el uso de la variable $path_modulo , para indicarle al Layout el nombre del módulo que queremos cargar, variable creada en el index.php y propagada al archivo de Layout por estar éste, incluido en el primero.

    Entonces, ya tenemos nuestro index.php, tenemos el Layout que se encarga de incluir el módulo... Qué nos falta? Pues el módulo ! Éstos pueden ser tan complejos o tan simples como el usuario quiera. En el ejemplo siguiente, un módulo "home" bien simple, que se carga por defecto en nuestra aplicación :

    Archivo home.php:
    <!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->

    <h3>Bienvenido al Home</h3>

    <p>Este es un ejemplo de un sitio modular, como vemos, las páginas que

    componen los módulos, pueden ser tanto archivos.php como archivos.html,

    todo dependiendo de si necesitamos interactividad o no con el Servidor.

    La hora actual es : <b> <?=date ( "H:m:s" ); ?> </b></p>

    <p>Para ver el contenido de un artículo, por favor, seguir el

    <a href="?mod=articulo">siguiente link</a>.</p>

    <!--c2--></div><!--ec2-->
    De nuevo, un poco de HTML por aquí, un poco de PHP por allá. Cabe notar, eso si, la manera en la que hicimos un link hacia OTRA página de nuestro sitio: " ?mod=articulo ". Con esto, le indicamos al navegador, que queremos cargar el mismo archivo que tenemos actualmente, solo que con este nuevo " querystring ". Si la página actual fuera algo como:

    <a href="http://localhost/modulares/index.php" target="_blank">http://localhost/modulares/index.php</a>

    Indicando un link como recién, al hacerle click cambiaría a :

    <a href="http://localhost/modulares/index.php?mod=articulo" target="_blank">http://localhost/modulares/index.php?mod=articulo</a>

    O sea, queremos cargar OTRO módulo, esta vez llamado " articulo ". Como ya todo el trabajo árduo está hecho, solo tenemos que crear un archivo llamado art.php (ya que así lo indica el archivo de configuración) en el directorio /modulos/ .

    Archivo art.php:
    <!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->

    < h3 > Título del Artículo </ h3 >

    < p > Aqui tenemos el ejemplo de un artículo cargado en nuestra Web Modularizada .

    En este ejemplo simple , &nbsp;el artículo o nota , &nbsp;está escrito en HTML directamente ,

    pero podría estar siendo sacado de la base de datos si quisiéramos , &nbsp;no tenemos &nbsp;

    &nbsp;limitación al respecto .</ p >

    < p >< a href = "?mod=imp_art" &nbsp;target = "_blank" > Versión para Imprimir </ a > | &nbsp;

    < a href = "?mod=home" > Volver al Home </ a >.</ p >

    <!--c2--></div><!--ec2-->
    Así vemos, como crear un nuevo módulo es tan sencillo como crear el archivo pertinente, dejarlo en el directorios de Módulos, y actualizar el archivo de configuración para que permita accederlo. Éste módulo, al no indicarse que Layout utiliza, vemos como toma el Layout por Defecto, o sea, el mismo que el Home. Cómo último paso, al final del artículo, tenemos dos links, uno, que nos regresa al Home del Sitio y el otro, el que nos interesa ahora, que ofrece una "Versión para Imprimir" del artículo. Modifiquemos nuestro archivo de configuración y agreguemos un nuevo módulo, que nos permita ofrecer una versión "Imprimible" del Artículo. Luego de editarlo, quedaría así:

    Archivo conf.php:
    <!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->

    <?php

    /*

    * Archivo de configuración para nuestra aplicación modularizada.

    * Definimos valores por defecto y datos para cada uno de nuestros módulos.

    */

    define ( 'MODULO_DEFECTO' , &nbsp;'home' );

    define ( 'LAYOUT_DEFECTO' , &nbsp;'layout_simple.php' );

    define ( 'MODULO_PATH' , &nbsp;realpath ( './modulos/' ));

    define ( 'LAYOUT_PATH' , &nbsp;realpath ( './layouts/' ));



    $conf [ 'home' ] = array(

    'archivo' &nbsp;=> &nbsp;'home.php' ,

    'layout' &nbsp;=> &nbsp;LAYOUT_DEFECTO &nbsp;); &nbsp;

    $conf [ 'articulo' ] = array(

    'archivo' &nbsp;=> &nbsp;'art.php' &nbsp;);

    $conf [ 'imp_art' ] = array(

    'archivo' &nbsp;=> &nbsp;$conf [ 'articulo' ][ 'archivo' ],

    'layout' &nbsp;=> &nbsp;'imprimir.php' &nbsp;);



    ?>

    <!--c2--></div><!--ec2-->
    ¿Llamamos al mismo módulo? Así es. Pero la sutil diferencia es que lo incluimos con un Layout distinto, más limpio, apto para salir por impresora. Aquí un ejemplo de este Layout, que utiliza Cascading Style Sheets
    Archivo imprimir.php:
    <!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->

    <?

    $uri &nbsp;= &nbsp;"http://" . $_SERVER [ "SERVER_NAME" ]. $_SERVER [ "REQUEST_URI" ];

    ?>

    <html>

    <head>

    &nbsp; &nbsp; <title>Versión para Imprimir</title>

    </head>

    <style type="text/css">

    .imprimir {

    &nbsp; &nbsp; margin: 3%;

    &nbsp; &nbsp; border: 2px solid black;

    &nbsp; &nbsp; padding: 2%;

    }

    #pie {

    &nbsp; &nbsp; font-size: 8pt;

    }

    </style>

    <body>

    <div class="imprimir">

    <?

    if ( file_exists ( &nbsp;$path_modulo &nbsp;)) include( &nbsp;$path_modulo &nbsp;);

    &nbsp; &nbsp; else die( 'Error al cargar el módulo <b>' . $modulo . '</b>. No existe el archivo <b>' . $conf [ $modulo ][ 'archivo' ]. '</b>' );

    ?>

    <i id="pie">Este artículo se puede encontrar en : <a href=" <?=$uri?> "> <?=$uri?> </a></i>

    </div>

    </body>

    </html>

    <!--c2--></div><!--ec2-->
    Ya finalizando con este artículo, logramos tener una aplicación web que posee la capacidad de cargar distintos módulos y diseños dependiendo de los parámetros recibidos. Esto se parece mucho a un Patrón de Diseño llamado Front Controller . Para los curiosos, ahi tienen dos links en los que Google les puede enseñar un par de cositas.

    Hoy aprendimos como centralizar el funcionamiento de un sitio a través de un archivo de configuración. También como modularizar nuestro sitio web con la ventaja de poder aplicar distintos diseños a los diferentes módulos que lo componen. Y sobre todo, a hacerlo de una manera sencilla, eficiente y segura. ¿Qué más se puede pedir?

    Cualquier duda preguntas otra vez ;)
     
  15. Faraon

    Faraon Supremo Egipcio

    Bueno semejante explicacion no creo que exista duda ](*,) Ahora en una pregunta pedias llevar de Ps a dreamweaver, en mi web hay dos tutoriales referente a eso. WWW.DISENOSFARAON.TK
    Bellaco, sobre los frames, la verdad no trabajar con ellos, es bien sabido que los hackers, usan esto para violar una web, y hacerla añicos.

    Abrazos
     
  16. Bellaco

    Bellaco Nuevo usuario

    no me an entendido todavia, lo k no c como aser es aplicar todo eso al codigo k me genero ps en my layout
     
  17. kitsch

    kitsch Nuevo usuario

    <!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1--><?

    &nbsp;&nbsp;&nbsp;&nbsp;if (file_exists( $path_modulo )) include( $path_modulo );

    &nbsp;&nbsp;&nbsp;&nbsp;else die('Error al cargar el m&oacute;dulo <b>'.$modulo.'</b>. No existe el archivo <b>'.$conf[$modulo]['archivo'].'</b>');

    ?><!--c2--></div><!--ec2-->

    Agrega este codigo al cuerpo de temaplate ;)
     
  18. Bellaco

    Bellaco Nuevo usuario

    Mí problema es k no c como poner a interactuar el código generado por PhotoShop con el código de Web modular
    Ej:

    <a href="http://img231.imageshack.us/img231/109/ej18os.jpg" target="_blank">http://img231.imageshack.us/img231/109/ej18os.jpg</a>

    Esto es lo k paso cuando en es spacer [el espacio en blanco donde va el contenido] puse esto :

    <a href="http://img348.imageshack.us/img348/5087/ej26xq.jpg" target="_blank">http://img348.imageshack.us/img348/5087/ej26xq.jpg</a>

    Y lo k paso es k el phpifo si se cargo pero el templante se volvió todo un desastre,Me doy cuenta que el archivo phpinfo era mas largo k el espacio k yo había designado para el spacer.
    <a href="http://img218.imageshack.us/img218/3333/estilodelapagina4kj.jpg" target="_blank">http://img218.imageshack.us/img218/3333/es...lapagina4kj.jpg</a>
    Mis interrogantes son :

    ¿Cómo ago que no se vuelva un desastre el templante ?
    ¿el archivo que boy a incluir [incluye (contenido.php)] , puedo hacer un estándar de este archivo [tamaño, etc, una especie de admin. De este archivo ] ?

    Ej pag
    como ago para insertar el [tang boar, las encuestas(ya tengo estos archivos hechos en php)] , y el contenido sin alterar lo demás.
     
  19. Faraon

    Faraon Supremo Egipcio

    El problema tuyo es de tablas mas que todo, te sugiero que visites <a href="http://www.faraondesigns.net/tutor.php" target="_blank">http://www.faraondesigns.net/tutor.php</a> y veas el tutorial de plantilla web son dos, ademas mira este video tutorial que no he podido subir algunos <a href="http://www.faraondesigns.net/tutoriales/video/videotutorial.php" target="_blank">http://www.faraondesigns.net/tutoriales/vi...deotutorial.php</a> Lo que te pasa es que no sabes cuando aplicar una tabla en porcentajes y en pixeles, y que no descuadre el diseño.

    Abrazos
     
  20. kitsch

    kitsch Nuevo usuario

    Esto es otra pregunta completamente distinta a lo forma una web modular, tu pregunta ahora se esta centrando mas en el diseño, en los enlaces que te dejo Faraon, viene un tutorial bastante complejo y completo para hacer plantillas web, como organizarlas y demas.
     


Alojamiento web, Hosting Reseller, Servidores Dedicados - All in Hosting


    
    
    
    
Blog · Sitios amigos: GuiaHosting · Unidominios · Interalta ·