15Nov 2009 24 Comments

Web Modular PHP AJAX parte 2

Categories: AJAX, javascript - Tags: AJAX, jquery, modular, PHP

En la primera parte de este tutorial expliqué como hacer funcionar una web modular donde el contenido cargara dinamicamente sin recargar la página usando AJAX sin embargo sólo funcionaba con links del menú y no con links que estuvieron dentro de las páginas cargadas.

Hacer funcionar ajax en links internos

Ese código funciona con el menu pero para que funcione incluso en links de páginas cargadas usando AJAX debemos usar el evento LIVE de jquery para ello basta modificar una línea de código.

1
2
3
4
5

$('.ajaxmenu').livequery('click',function(){
var loadUrl = $(this).attr('href');
$("#contenido").html(ajax_load).load(loadUrl);
return false;
});

¿Cómo hago funcionar el código si uso anclas?

Esto es más complicado ya que hay que calcular la ubicación de las anclas y generar un scroll

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

18Aug 2009 20 Comments

Web modular PHP con AJAX

Categories: AJAX, PHP - Tags: AJAX, jquery, modular, PHP

Hace no mucho tuve un cliente que insitia en tener un flash con musica en su pagina web y que esta no se corte cuando cambie de página para lograr esto hay que evitar que se recargue la pagina, lo que se puede lograr usando iframes sin embargo esta solución implicaba reprogramar varias cosas, intenté convencer al cliente de lo inconveniente de usar frames y de poner música pero no aceptó.

En vista de esto tuve que inventar algo que permita que mi página funcione sin demasiados cambios y darle el gusto al cliente, por lo que implementé esta solución usando AJAX, para ser más preciso jquery.

Web Modular

La web modular se basa en varios pedazos de código que se juntan (encabezado, menu, contenido, pie de pagina), eso ya lo expliqué en un post anterior.

Cargar los contenidos sin recargar

Aqui va la parte interesante, hay que hacer que los links llamen contenidos via ajax (jquery), lo que se logra primero agregando a cada link la clase ajaxmenu

1
2
3
4

<a href="pages/homepage.php" class="ajaxmenu">Homepage</a>  |  
<a href="pages/aboutus.php" class="ajaxmenu" >About Us</a>  |  
<a href="pages/services.php" class="ajaxmenu" >Services</a>  |  
<a href="pages/contactus.php" class="ajaxmenu" >Contact Us</a>

y agregando este código al top_page.php dentro del header y entre etiquetas script

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

$(document).ready(function(){
$.ajaxSetup ({
cache: false
});
//// Imagen mientras carga el contenido
var ajax_load = "<img src='img/load.gif' alt='loading...' />";

// Interceptar el link de los menus
$(".ajaxmenu").click(function(){
/// Extraemos el nombre de la pagina que esta en el link
var loadUrl = $(this).attr('href');
/// Llamamos el contenido
$("#contenido").html(ajax_load).load(loadUrl);
return false;
});
});

En la segunda parte de este tutorial explico como hacerlo funcionar cuando los links son internos, y más importante cuando usamos anclas

02Feb 2009 59 Comments

PHP Diseño Web Modular Parte 2

Categories: Diseño, PHP - Tags: maquetación, modular, PHP

En un post anterior expliqué la forma más simple de hacer una web modular; aunque esa forma funciona bien para proyectos de muchas páginas, proyectos con CMS o sistemas con friendly url (url amigable) no es buena idea usarla.
Tengo pensado hacer 2 partes más del tutorial para explicar además a hacer conexión con la base de datos y friendly URL

Estructura de la Web Modular

Para este caso prefiero separar header de menu, el footer lo separo del final del código html, la estructura general de la página esta en el archivo index.php, todos los contenidos en si están en la carpeta pages, para poder acceder a cualquier página usamos la ruta index.php?page=nombre_del_archivo_sin_extension

index.php

En el anterior post index.php era una página mas, pero ahora es el centro del script, las páginas ahora sólo tendrán el contenido sin ningún include y estarán en la carpeta pages.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<?php
include("includes/top_page.php");
?>
<div id="wrapper">
<div id="header">
<? include("includes/header.php"); ?>
</div>
<div id="menu">
<? include("includes/menu.php"); ?>
</div>
<div id="contenido">
<? include("includes/pages.php"); ?>
<br style="clear:both;" />
</div>
<div id="footer">
<? include("includes/footer.php"); ?>
</div>
</div>
<? include("includes/bottom_page.php"); ?>

Carpeta includes

En esta carpeta colocamos todos los trozos de nuestra páginas, que es casi los mismo del tutorial anterior , la novedad el include encargado de llamar las páginas web

pages.php

Este script llama la página dentro de la carpeta pages que pidamos usando GET index.php?page=nombre_del_archivo_sin_extension

1
2
3
4
5
6
7

<?php
if (!isset($_GET['page'])) {
include("pages/homepage.php");
} else {
include("pages/".$_GET['page'].".php");
}
?>

Si por ejemplo en la carpeta pages tengo la pagina servicios.php para llamarla la url sería index.php?page=servicios

UPDATE: Y que ocurre si quisiera una estructura distinta con un menu lateral por ejemplo, simplemente edita el index.php agregando el div que corresponde a ese menu adicional y sobre todo edita el CSS para que se ubique adecuadamente ese div adicional, puedes ver como en este tutorial de maquetación

29Jan 2009 31 Comments

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

<div id="header">
</div>
<div id="menu">
<a href="#">Homepage</a>  |  
<a href="#">About Us</a>  |  
<a href="#">Services</a>  |  
<a href="#">Contact Us</a>
</div>

footer.php

Aqui la parte final de nuestra página web

1
2
3
4
5
6

<div id="footer">
Visita <a href="http://www.miguelmanchego.com" target="_blank">el Blog</a> para aprender diseño
</div>
</div>
</body>
</html>

¿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

Tag Archive for: modular