Quiero compartir con todos ustedes, un mini sitio que diagrame hace un tiempo en el que necesitaba algo «dinámico» y tenia la restricción de no poder usar base de datos mysql.
El micro sitio esta desarrollado en PHP, y el Maquetado XHTML/CSS estan diagramados de forma limpia y accesible para todos los navegadores.
Los contenidos están en archivos XML. Esta pensado para mostrar listados de Links en columnas. Pero con algunos conocimientos de programación podes modificarlo a tu gusto y antojo.
Como ventajas:
- es bonito y liviano
- muy facil de modificar.
- no usa base de datos
Desventajas:
- Muy estructurado en el diseño.
- No tiene CMS ni editor WYSIWYG.
- No es practica la forma de presentar los contenidos.
El Home del sitio se ve asi:
Configuración:
1) abrir js/core.js
2) modificar las lineas 4 y 5
Atención: Por defecto esta configurado para levantar inicialmente la sección id «inicio». Esto lo pueden modificar mas abajo en la linea 130 donde dice «section?=inicio».
Para agregar solapas o modificarlas:
1) Abrir archivo index.php
2) Duplicar las zonas seleccionadas en A y B (ver imagen Click para agrandar).
3) Estan marcados con círculos Rojos las zonas que deben modificar con el ID «3» en el caso de los círculos. Solo basta con incrementarle el numero. Ejemplo reemplazar 3 por 4 o cualquier otro Nº que no se repita. Abajo dentro de «div_content» también va el mismo Nº.
«Servicios» también esta seleccionado, para que vean que este es el nombre de la sección a levantar. Si la sección se llama «About Us» iría: ?section=about. Tienen que usarse solo palabras resumidas, ya que esta palabra también se usa para armar la URL permanente de la sección cargada con ajax. Ejemplo: www.tech-nico.com/#about. Algo realmente útil y que por lo general es un problema en Ajax. :p
4) Abrir callbacks.php y agregar en el Select Case la llamada para la nueva solapa. Duplicar cualquiera de los casos del select o switch, que van desde «case ‘xx’: …. hasta break; » y lo modificamos para que quede asi:
case ‘about’: ?>
<script type=»text/javascript»>
actualizarPestanas(4); __exec_command(‘content/about.htm’,’pest4′,’Acerca de’);</script> <?php break;
Funciones de callbacks.php
actualizarPestanas(id): Esta funcion oculta todos los divs contents y muestra solo el que tiene el ID que pasamos como parametro. Param id{es el id que le dimos en el paso 3}
__exec_command(url, div_pestaña, titulo): Ejecuta por medio de Ajax la «url» y la muestra en «div_pestaña» y finalmente modifica el titulo de la pagina por el que le proporcionemos. Aquí pueden levantar URL’s estáticas o dinámicas. Miren el código que esta fácil de entender.
Contenido:
Todo el contenido del sitio esta dentro de la carpeta «content». Y sea estático o dinámico.
Estoy seguro que se puede mejorar muchísimo. De hecho se podrían validar varias cosas con expresiones regulares pero eso que lo haga cada uno. Pensé en armar un mini admin para poder cargar XML’s pero por cuestiones de tiempo se complica. De todos modos esta bueno para esos proyectos que necesitan arrancar con algo sencillo. Quizás este sea el esqueleto base.
Espero que les guste y sirva. Cualquier duda sera respondida por aquí.
Nicolas