TrickyWeb.cl - Informática & Tecnología » Preguntas Contestadas http://www.trickyweb.cl Informática & Tecnología Sat, 14 Nov 2009 06:34:57 +0000 http://wordpress.org/?v=2.8.5 en hourly 1 Pregunta Contestada N°2 http://www.trickyweb.cl/2009/08/22/pregunta-contestada-n%c2%b02-2/ http://www.trickyweb.cl/2009/08/22/pregunta-contestada-n%c2%b02-2/#comments Sat, 22 Aug 2009 03:48:35 +0000 Camilo Zambrano Lagos http://trickyweb.wordpress.com/?p=18 Esta pregunta la respondí en un foro bastante conocido, la pregunta era la siguiente:

Eso es … me he estado cabeceando caleta de rato pero no me cunde nada, lo que necesito es crear una barra que quede en el tope de la web (wordpress) para promocionar el foro y la misma barra en el foro para promocionar el blog.


A continuación, el mini tutorial de hoy, que entregué a modo de respuesta, esto es bastante básico y si hay buen manejo de CSS, puede dar resultados mas que magníficos.

Mi respuesta a dicha pregunta fue es la siguiente :

Pongamonos en los siguientes casos:

  • Quieres hacer una barra como la de fayerwayer, que al bajar el scroll desaparezca.
  • Hacer una barra superior, que aunque sea desplazado el scroll se mantenga en su posición.

Te invito a probar ambas opciones y ves cual te gusta mas.

La primera – La barra de fayerwayer se hace con el siguiente código:

<html>
<head>
<title> Aquí tu título </title>
<style type="text/css">
body{
margin:0;
padding:0;
}
#menubar{
background-color:black;
color: white;
font:8pt Arial;
}
</style>
</head>
<body>
<!-- Aquí la barrita -->
<div>
<table id="menubar" width="100%" cellpadding=0 cellspacing=0>
<tr>
<td>Menu 1</td>
<td>Menu 2</td>
</tr>
</table>
</div>
<div id="header"><!-- Aquí el header --></div>
<div id="content"><!-- Aquí el cuerpo --></div>
<div id="footer"><!-- Aquí el footer --></div>
</body>
</html>

La segunda – La barra de estática se hace con el siguiente código:
<html>
<head>
<title> Aquí tu título </title>
<style type="text/css">
body{
margin:0;
padding:0;
}
#bar{
position:static;
top:0;
}
#menubar{
background-color:black;
color: white;
font:8pt Arial;
}
</style>
</head>
<body>
<!-- Aquí la barrita -->
<div id="bar">
<table id="menubar" width="100%" cellpadding=0 cellspacing=0>
<tr>
<td>Menu 1</td>
<td>Menu 2</td>
</tr>
</table>
</div>
<div id="header"><!-- Aquí el header --></div>
<div id="content"><!-- Aquí el cuerpo --></div>
<div id="footer"><!-- Aquí el footer --></div>
</body>
</html>

Esto es simple, basta con ocupar el molde anterior, y ya está la barra.
Para que la segunda barra quede estática, solo basta con ocupar ésta propiedad en la definición CSS:
position:static;

]]> http://www.trickyweb.cl/2009/08/22/pregunta-contestada-n%c2%b02-2/feed/ 3 Pregunta Contestada Nº1 http://www.trickyweb.cl/2009/08/11/pregunta-contestada-n%c2%ba1-2/ http://www.trickyweb.cl/2009/08/11/pregunta-contestada-n%c2%ba1-2/#comments Tue, 11 Aug 2009 02:47:16 +0000 Camilo Zambrano Lagos http://trickyweb.wordpress.com/?p=3 Bueno, primero que nada, decir que mi blog parseo solo la dejaré con fines de presentar proyectos y desarrollos de proyectos, y esta web dejarla únicamente para postear tutoriales y respuestas a ciertas consultas que se han hecho en la web y he podido resolver correctamente, y en ciertos casos, si no di una solución concreta, aquí plantear la totalidad o gran parte de la solución.

Partimos!

Un usuario de un foro en el que generalmente doy soporte, planteó la siguiente duda que para algunos es básica, pero para otros no tanto y para estos últimos va dirigido este post:

¿Cómo hacer un echo dentro del mismo sitio?

Probablemente, la pregunta en si no se entienda sin un contexto de pormedio, pongamoslo así:

¿Qué sucede cuando queremos, que al hacer una petición php se mantenga la estructura visual de la página?

Hay muchas soluciones para este hecho, una de las que di en dicho foro fue el uso de secciones y templates.

La otra solución, tiene un sólo nombre…Ajax.

Por ahora sólo me enfocaré en el uso de secciones y templates, porque para programadores novatos, toma menos tiempo de entender, ya que para entender todo lo que Ajax involucra hay que tener un previo conocimiento en Javascript.

¿Qué se recomienda tener claro para este post?

Recomiendo tener claro los siguientes temas:

  • Uso de la función include()
  • Uso de la variable $_GET

Sin más que agregar, voy a dar comienzo a la solución del problema planteado al principio:

  1. ¿Cúal es la idea de las secciones?
    La idea de las secciones es brindar al sitio cierta clase de “orden”, que beneficiará tanto al desarrollador como al usuario, ya que para acceder a los distintos destinos dentro del sitio ya no será necesario valerse de los nombres de los archivos, salvo la primera vez (cuando se esté desarrollando el sitio), otro beneficio, es poder usar una misma estructura visual para todas las peticiones php, que solo se cargará una vez y quedará almacenada en la información del sitio, por lo que no habrá que cargar imagen por imagen una y otra vez.
  2. ¿Qué es un template?
    Según nuestra amiga Wikipedia un template o plantilla es:

    • Una forma de dispositivo que proporciona una separación entre la forma o estructura y el contenido.
    • Relativo a sistema computacionales, por ejemplo paquetes de programas basados en la web, utilizan en la actualidad un sistema de plantillas para separar la lógica del programa del formato visualizado. Típicamente, estas plantillas incluirán variables (frecuentemente denotadas como {VARIABLE}), y posiblemente unos pocos operadores lógicos para permitir una mejor adaptabilidad de la plantilla.

    Ambas definiciones (escogidas no al azar), involucran el concepto de separación, ¿por qué lo he escogido?, sencillo, porque ello es lo que buscamos, separar las peticiones de la estructura propiamente tal.

Lo que debe resultar al final de este tutorial es algo (más producido obviamente) como ésto.

Ahora, vamos a trabajar con dos archivos nada más, el resto basta con entender como funciona el segundo archivo:

  1. index.php (Plantilla):
    Este archivo de ejemplo será básico, pero en pocas palabras es el que contiene la estructura principal del sitio, es aquel elemento del sitio que se mantendrá tal cual.
    El archivo en cuestión es el siguiente:

    <html>
    <head>
    <title>Ejemplo de secciones http://trickyweb.wordpress.com</title>
    </head>
    <body>
    <?
    /* La idea es que la variable $pg capta el valor contenido en la url y cada valor para $pg es una sección */
    $pg = $_GET["pg"];
    switch($pg){
    case 1:
    $header = "Página 1";
    break;
    default:
    if(empty($pg)){
    $header = "Index";
    }else{
    $header = "ERROR 404";
    }
    break;
    }
    ?>
    <div id="header" style="border:1px black solid">
    <? echo $header; ?>
    </div>
    <div id="contenido" style="border:1px black solid">
    <? include("contenido.php") ?>
    </div>
    <div id="footer" style="border:1px black solid">
    <a href="http://trickyweb.wordpress.com">TrickyWeb 2009</a>
    </div>
    </body>
    </html>

  2. contenido.php:
    Este archivo contiene básicamente las instrucciones para incluir ciertos archivos en los momentos necesarios, para ejemplo, te invito a hacer un archivo html llamado 1.php que contenga el contenido que quieras, ya que luego lo ocuparás dentro del ejemplo:


    <?
    //Capturamos la variable $pg contenida en la URL
    $pg = $_GET["pg"];
    switch($pg){
    case 1:
    if(file_exists("1.php")){
    //Si el archivo existe, se incluye
    include("1.php");
    }else{
    //Si el archivo no existe, sale un mensaje de error.
    echo "El archivo no existe";
    }
    break;
    default:
    if(empty($pg))
    echo "Estás en el index!!";
    else
    echo "La página no existe!";
    break;
    }
    ?>

Y con eso estaría listo el tutorial, la idea es que del ejemplo puedas ir flexibilizando la codificación, no es necesario que los nombres de archivo sean 1,2,3… o el contenido de la variable (o el nombre de la variable) sean el mismo, de hecho, el contenido puede ser alfanumérico.

Cualquier duda, sugerencia o comentario son bienvenidos.

Bytes!

]]> http://www.trickyweb.cl/2009/08/11/pregunta-contestada-n%c2%ba1-2/feed/ 6