Reutilitzar i inserir codi HTML i CSS utilitzant PHP

En el procés de renovació que estic fent d'aquesta pàgina, un dels objectius que tinc més clars és unificar el disseny i la programació dels diversos sistemes de què consta: wiki, blog, portafolis i altres que puguin venir en el futur.

En aquesta direcció, una de les fites principals és aconseguir unificar codi per reutilitzar-lo al màxim i repetir-lo al mínim en cada context. En aquest camp, PHP és de gran ajuda.

Amb PHP podem incloure fitxers HTML o PHP amb aquesta simple instrucció:

 <?php include 'ruta/alfitxer.php'; ?>

Així, si tenim un fitxer index.php tal com aquest:

 <html>
    <head></head>
    <body>
       <?php include 'includes/contingut.php'; ?>
    </body>
 </html>

i a la carpeta includes un fitxer contingut.php (que també podria ser contingut.html, en cas que dins el fitxer no s'hagués de processar codi php, i convenientment referenciat al fitxer index.html) com aquest,

 <p>
 Això és el contingut
 </p>

en carregar index.html s'inclouria la informació dins de contingut.php com si estigués tota en un sol fitxer.

Això té l'avantatge que totes aquestes operacions es fan en el cantó del servidor, com tot allò que es fa amb PHP. D'aquesta manera podem fer operacions a la pàgina abans que siguin enviades a l'usuari, la qual cosa té aplicacions en molts sentits. Una de les més òbvies és la de reduir el nombre de sol·licituds http: si podem ajuntar en un sol fitxer diversos continguts, llibreries o funcions que, amb la finalitat d'organitzar-nos millor, volem mantenir en fitxers separats, des de l'ordinador de l'usuari només es farà una sol·licitud, la qual cosa optimitzarà el temps de resposta de la pàgina.

Aplicar-ho en CSS

Això també ho podem fer aplicar a les fulles d'estil. No obstant, em vaig trobar que en una primera prova molt simple que vaig fer, el següent esquema era del tot funcional:

index.html

 <html>
    <head>
 	<link rel="stylesheet" type="text/css" href="estils.php">
    </head>
    <body>
       <p class="verd">verd</p>
       <p class="vermell">vermell</p>
    </body>
 </html>

estils.php

 <?php 
 include 'verd.css';
 include 'vermell.css';
 ?>

verd.css

 .verd {color: #00ff00;}

vermell.css

 .vermell {color: #ff0000;}

NOTA: index.html, estils.php, verd.css i vermell.css són tots a la mateixa carpeta.

Però quan incloïa fitxers més complexos, el CSS no quedava correctament referenciat i la pàgina no tenia estils assignats.

Això, tal com he vist a aquesta pàgina, és perquè cal afegir al fitxer estils.php, és a dir aquell que feu servir com a contenidor d'altres fitxers CSS, una capçalera per indicar-li que és un fitxer de tipus CSS:

estils.php

 <?php 
 header('Content-Type: text/css');
 include 'verd.css';
 include 'vermell.css';
 ?>

Fonts

enfocament força didàctic: http://www.dustindiaz.com/combining-php-and-css
http://www.1976design.com/blog/archive/2004/02/03/php-dynamic-css/
info complementària, relacionat amb content caching i aplicació similar en javascript: http://stackoverflow.com/questions/2035544/php-content-caching-for-javascript-and-css
http://stackoverflow.com/questions/3357720/should-i-combine-css-files-with-php-to-reduce-http-requests
minimització d'http requests http://www.websiteoptimization.com/speed/tweak/http/

Ei, gràcies per ser a aquesta pàgina.
Potser has notat que ha canviat una mica.
Estic "en ello".

Get this widget at roytanck.com

tutorials/creacio_web/embedhtmlcss_ambphp.txt · Darrera modificació: 2011/04/08 03:49 per glaurung -

Aquests continguts es publiquen amb llicència CC BY-SA, sempre que no s'especifiqui el contrari en un context més específic.