Tutoriales de informática - Abrirllave.com

Abrirllave.com

Ampliar plantilla PHP

La plantilla de un sitio web –como la desarrollada en este tutorial para el ejemplo RECURINFOR– se puede ampliar según se desee, siendo conveniente definirla en su totalidad antes de replicarla en el resto de páginas del sitio web, ya que, éstas pueden ser decenas, cientos o incluso miles. No obstante, obsérverse que, en los archivos (.php) de la carpeta "codes" de RECURINFOR, se pueden hacer modificaciones –relativamente fáciles– que afecten a muchas páginas del sitio.

EJERCICIO Incorporar a la versión 4 de RECURINFOR botones sociales debajo del <h1> dentro del <article>, para que el visitante pueda compartir la página web en Twitter, Google+ y Facebook. Para ello, en la versión 5 de RECURINFOR, crear "codes/article-aside.php" que va a ser llamado desde archivos de primer nivel, y crear también "codes/article-aside2.php" referenciado por archivos de segundo nivel, aunque el contenido en ambos archivos sea el mismo.

Por ejemplo, el código de "index.php" será:

<!DOCTYPE html>
<html>
<head>
    <?php include("codes/metadata.php")?>
    <title>RECURINFOR (v5) - Sitio Web de ejemplo</title>
    <meta name="description" content="Esta Web es un ejemplo del tutorial de desarrollo web de Abrirllave.com"/>
    <meta name="keywords" content="recurinfor, recursos de informatica, web de ejemplo, abrirllave"/>
</head>
<body>
<?php include("codes/header.php")?>
<?php include("codes/nav.php")?>
<main>
    <ul>
        <li><a href=".">Inicio</a> &raquo; Web de ejemplo</li>
    </ul>
    <article>
        <h1>Recursos de informática educativos</h1>
        <?php include("codes/article-aside.php")?>
        <p>Este sitio web es un ejemplo que forma parte del <a href="http://www.abrirllave.com/desarrollo-web/" target="_blank">Tutorial de desarrollo web</a> de <a href="http://www.abrirllave.com/" target="_blank">Abrirllave.com</a>, donde se explica –paso a paso– cómo se ha desarrollado.</p>
        <img src="images/recurinfor-web-de-ejemplo.gif" alt="Imagen del logotipo de Abrirllave.com">
        <h2>Características del sitio web</h2>
        <p>HTML5/CSS, Responsive Web Design, accesibilidad web...</p>
    </article>
</main>
<?php include("codes/aside.php")?>
<?php include("codes/footer.php")?>
</body>
</html>

Y, el contenido de "enlaces/index.php" será:

<!DOCTYPE html>
<html>
<head>
    <?php include("../codes/metadata2.php")?>
    <title>Enlaces | RECURINFOR (v5)</title>
    <meta name="description" content="Enlaces a sitios web interesantes con recursos de informática: blogs de tecnología, tutoriales de informática, software, etc."/>
    <meta name="keywords" content="enlaces, recurinfor"/>
</head>
<body>
<?php include("../codes/header2.php")?>
<?php include("../codes/nav-enlaces.php")?>
<main>
    <ul>
        <li><a href="..">Inicio</a> &raquo; Enlaces</li>
    </ul>
    <article>
        <h1>Enlaces interesantes</h1>
        <?php include("../codes/article-aside2.php")?>
        <p>En esta sección se enumeran enlaces a <strong>sitios web con recursos de informática</strong> agrupados por categorías. Por ejemplo, véase:</p>
        <ul>
            <li><a href="redes-sociales.php">Redes sociales</a></li>
        </ul>
    </article>
</main>
<?php include("../codes/aside2.php")?>
<?php include("../codes/footer2.php")?>
</body>
</html>

Archivos de RECURINFOR versión 5

En la tabla siguiente están los archivos de la quinta versión de RECURINFOR. Sin embargo, los archivos "codes/article-aside.php" y "codes/article-aside2.php" se proporcionan en blanco (planteándose como ejercicio).

RECURINFOR (v5)
Ver Descargar archivos (ZIP)
index.php Todos (*.php, css/styles.css, imágenes)
acerca-de.php
enlaces/index.php
enlaces/redes-sociales.php
css/styles.css
images/
codes/

EJERCICIO Utilizar la plantilla de RECURINFOR (versión 4 ó 5), ampliándola y/o modificándola según las necesidades del sitio web o proyecto a desarrollar.