Si te gusta este blog...
¡Visita mi blog en inglés!
Si te gusta este blog...
¡Visita mi blog en inglés!
|
|
|
|
|
|
En esta receta voy a explicar el uso de CSS+PHP; un paquete muy potente donde un
lenguaje complementa al otro, donde las faltas de CSS las cubre PHP y con el que
podemos incrementar la potencia general de las hojas de estilo.
Primero explicaré las ventajas de la modularización integrada
de serie en CSS para posteriormente explicar los beneficios de generar
las hojas de estilo dinámicamente mediante PHP.
Ventajas de CSS dinámicas
- Mucho mas sencillo para gestionar hojas de estilo de forma ordenada
- Podemos incluir un fichero de configuración general para controlar
el estilo fundamental de la web. Añadimos a CSS variables
- Permite webs "mutables" o cambiantes a nivel de hoja de estilo
- La detección de navegador mediante PHP, permite proporcionar hojas de estilo
diferentes dependiendo del navegador del cliente.
Contras
- Al ser dinámicas los navegadores no cachearán la hoja de estilo,
con lo que nos cargamos una de las mayores ventajas de CSS. En todo
caso perdemos esta prestación a costa de añadir otras y de incrementar la facilidad
de uso de CSS
1. Modularizacion de serie: @import
Con la sentencia @import podemos enlazar a una nueva hoja de estilo desde dentro de una hoja de estilo.
@import ("URL/fichero");
Recuerda que las sentencias @import deben ir al principio de
la hoja de estilo.
Para poder usar nuestras extensiones .css con PHP primero debemos avisar a apache que esa extension la debe procesar el módulo de PHP. Para ello incorporamos la siguiente linea en la configuracion del sitio web en el httpd.conf:
AddType application/x-httpd-php .css
Además todos nuestros ficheros PHP dinámicos que en realidad son hojas de estilo requieren tener la siguiente linea al comienzo del fichero:
header('Content-Type: text/css');
Esta línea indica al módulo PHP que añada a las cabeceras html un indicador del tipo de fichero del texto procesado que envia al cliente para que el navegador del cliente reconozca que es una hoja de estilo y no un documento html normal.
Una vez hecho esto, podemos usar bucles y variables en las hojas de
estilo.
3. Un ejemplo: CSS de este sitio web
Veamos como son las hojas de estilo de este sitio web:
picholas@ariel:~/www/david6/css$ ls css_barrasuperior.css css_calendar.css css_forms.css css_lists.css css_boxconfig.css css_config.css css_iehack.css css_main.css css_box.css css_font.css css_layout.css lib
¿Por qué tantos ficheros? Bien veamos el contenido del css_main.css:
<?
header('Content-Type: text/css');
require("css_boxconfig.css");
require("css_config.css");
?>
@import url('/css/css_box.css');
@import url('/css/css_font.css');
@import url('/css/css_layout.css');
@import url('/css/css_lists.css');
@import url('/css/css_calendar.css');
@import url('/css/css_forms.css');
@import url('/css/css_iehack.css');
@import url('/css/css_barrasuperior.css');
...
La linea header('Content-Type: text/css'); es necesaria en todos los ficheros CSS-PHP dinámicos como ya he comentado antes.
Los require() en PHP vienen a ser como el @import en CSS. Yo importo esos ficheros a nivel PHP porque son los de configuración. Los uso para guardar variables. Por ejemplo, el css_config.css contiene:
<? $ROJO = '#d63e3e'; $ROJO_OSCURO = '#601d1d'; $ROJO_CLARO="#d6a0a0"; $NARANJA_CLARO = '#ffeeee'; $NARANJA = '#c64c00'; $NARANJA_OSCURO = '#893200'; ...
De esta manera cuando necesitemos poner un color en la web podemos referirnos a estas variables PHP en vez de poner directamente el color. Es una ventaja cuando necesitas cambiar el tono de un color y resulta que lo tienes puesto 1000 veces en diferentes secciones de la hoja de estilo. Asi cambiarlo es mas facil porque solo necesitas retocar la configuración. Por ejemplo:
a {text-decoration: underline; color: <? echo "$COLOR_A_TEXT"; ?>}
a:hover {text-decoration: none; color: <? echo "$COLOR_A_TEXT_OVER";?>}
A esto me refiero cuando digo que con las CSS dinámicas optimizamos la centralización del diseño. CSS2 no tiene variables, asi que las sustituimos por variables PHP.
4. Otro ejemplo: Bucles en CSSLos bucles nos van a servir como demostración de las capacidades de esta técnica, pero su utilidad real es muy pequeña.
Hecha un ojo a este fichero css: css_box.css
Como te puedes imaginar no esta generado a mano, esta generado dinamicamente. Este es su código fuente:
foreach ($Boxes as $boxcolor => $datos)
{
echo "DIV." .$boxcolor ."Box {";
echo "border: 1px solid " .$datos['BORDER'] ."; ";
echo "color: " .$datos['COLOR'] ."; ";
echo "background-color: " .$datos['BG'] ."; ";
echo "padding: 3px; width: 530px; overflow: visible; }";
echo "DIV." .$boxcolor ."Box A, DIV." .$boxcolor ."Box A:active, DIV."
.$boxcolor ."Box A:visited, DIV." .$boxcolor ."Box A:link {";
...
(Los colores les saca del fichero de configuración)
¿Para que nos vale esto? Aqui viene la demostración técnica:
Lo de los bucles es una manera de complementar las faltas de CSS. ¿Qué CSS no tiene variables? PHP si. ¿Qué CSS es incapaz de detectar el navegador cliente? No pasa nada, PHP sabe hacerlo.
La conjunción CSS/PHP es muy potente, ya que uno complementa los defectos del otro.
En este apartado ire escribiendo diferentes recetas o trucos sobre
distintos lenguajes de programación orientados a la web que he ido
aprendiendo durante los años que llevo haciendo páginas web.
No pretenden ser tutoriales de uso, son únicamente ideas o consejos
para hacer páginas web de forma mas amigable de cara al desarrollador
y al usuario final.
1. CSS dinámicas mediante PHP
Imágenes normales 260x180px, panorámicas 550x180px. Las enlazadas deben tener un máximo de 640 px de anchura o 480 de altura. Las panorámicas, de 1500 px de lado. todo a 100dpi.
v6.5.16 17/1/2009
- Cambiados algunos textos y añadiendo más enlaces al blog en inglés. Añadido año 2009.
v6.5.15 12/1/2008
- Migración de servidor. Limpieza interna de ficheros y plugins. Quitado plugin
de flickr. Añadido icono de RSS junto al icono de last.fm. Quitado boton de
preview en el formulario de comentarios. Cambiado footer, nuevas secciones para empear el año 2008, nuevo enlace a un resumen/listado de los viajes en el head.html. Cambiada la frase de la cabecera y cambiado el avatar por uno nuevo. Reescrita la sección de contacto.
v6.5.14.2 10/10/2007
- Eliminado plugin de karma
v6.5.14.1 19/9/2007
- Subido nuevo CV
v6.5.14 6/8/2007
- Vuelta de la barra de fotos de flickr
- Quitado el enlace a skype porque nunca hago login asi que no vale la
pena
v6.5.13 19/7/2007
- Añadida la libreria /css/js/swfobject.js en el head de la página para poder colgar videos con el nuevo reporductor de FLV de Jeroen Wijering. Usado en la entrada /blog/A2007/M07/mi_pfc.html
v6.5.12 19/5/2007
- Habilitados comentarios
v6.5.11 16/5/2007
- Pluging feedack en pruebas, sustituyendo al antiguo writeback. Por ahora en pruebas internas, no esta habilitado en la página en producción
v6.5.10 14/5/2007
- Quitados los hacks que tenia para que el aniguo diseño se viera bien en IE y el resultado es: ¡Crossbrowsing conseguido!. Creo que es la primera vez en la historia de la web que se ve igual en toda la familia de navegadores. Se ve correctamente en Firefox2, Opera9, Safari, IE7 y Konqueror.
v6.5.9 13/5/2007
- Nueva cabecera más adecuada a los tiempos. He colocado imágenes de fondo que rotan junto con el esquema de colores del resto de la página. Por ahora hay algunos dias que no queda muy a juego pero ya las cambiaré en el futuro.
- La cabecera se ha construido moviendo el texto del twitter un nivel (A continuacion del breadcrums)
- He eliminado el ".net" del antiguo logo y ahora solo se lee DAVID.GRAJAL que creo que queda mejor y más acorde ahora que se puede entrar en la página desde diversos dominios.
- He jugado con el efecto de trasparencia de CSS3 que opera y firefox soportan (y tal vez IE7)
- He hecho que la página se pueda ver sin problemas en IE6/IE7.
v6.5.8 11/5/2007
- Limpieza de secciones en la web. En la barra lateral me he cargado un monton de secciones. Tengo pendiente pensar una nueva forma de mostrar los contenidos importante de la web ahora que el sistema de tagging va cobrando más importancia.
- Reescritura de la página de contacto, del texto del info y del FAQ. Estaban cogiendo un poco de polvo, ahora les he actualizado y me gustan un poco más.
v6.5.7 6/5/2007
- Añadido un badge de twitter con el último estado. Es provisional porque detiene la carga de la página. Necesito algo que cachee el texto, seria facil de programar pero ahora no tengo ganas de ponerme con ello y no he encontrado a nadie que se anime por internet.
v6.5.6 3/5/2007
- Añadida la caja box3 para este post. La idea es que sea una caja para textos más o menos literarios.
- Añadido el icono de twitter en local. A IE no le gustaba cargar una imagen de extensión "ico" externa.
v6.5.5 2/5/2007
- Añadidos los enlaces de servicio a barrapunto y a meneame de forma provisional. No sé si los dejaré porque total, dudo que nadie los use.
- Arreglado por fin el problema con la variable url de blosxom. Ahora ya funciona bien el sistema de tagging y los permalinks. Próximo objetivo, arreglar el sistema de karma.
v6.5.4 8/4/2007
- Fijado tamaño de imágenes en el blog para mantener una consistencia. Imágenes normales 260x180px, panorámicas 550x180px. Las enlazadas deben tener un máximo de 640 px de anchura o 480 de altura. Las panorámicas, de 1500 px de lado. todo a 100dpi.
v6.5.3 4/4/2007
- He eliminado el apartado de blogs que escucho porque audiscrobber muto hace tiempo ya y
se convirtió en last.fm
- He añadido unos iconos 16x16 de cuentas. Estan colocados en la parte de información
personal, justo debajo de la información de contacto. Uno para la cuenta de twitter, otro la cuenta de
last.fm y otro mostrando el estado de skype.
- He arreglado el problema de la categoria de viajes que no tenia tags
v6.5.2 27/3/2007
- Limpieza global de los plugins. Ahora cargo solo los justos y la página se construye
mucho más rápido.
- Arreglado el sistema de breadcrumbs, daba problemas porque no usaba la URL absoluta.
- Arreglado el sistema de breadcrumbs, daba problemas porque no usaba la URL absoluta.
- He buscado por internet nuevas soluciones al problema del SPAM en blosxom. He encontrado
dos, el script captcha que genera imágenes y donde el usuario debe reconocer una cadena
de texto y el wbcaptcha que hace lo mismo pero con ascii art usando figlet. Ni uno ni
otro me convencen porque tendria que modificar seriamente la web para integrarlos (Esta
web esta funcionando parche sobre parche). La solución adoptada ha sido deshabilitar el
sistema de comentarios. Total, los comentarios solo me traen problemas asi que si
alguien tiene algo importante que decirme, lo puede hacer por email.
v6.5.1 28/8/2006
- Eliminada las secciones de libros, peliculas y videojuegos
- Eliminado el link a pucelawireless en la barra superior (Estoy demasiado desconectado
del proyecto)
25/5/2006 Por culpa de los últimos ataques masivos de los spammers el sistema de
comentarios ha sido deshabilitado temporalmente
v6.5.0 (Back to the roots) 11/2/2006
Objetivo: Poner de nuevo los textos como centro de la web
- Cambiada tipografia. Letras más grandes, por defecto "lucida
grande"
- Backgrounds más claros para facilitar lectura
- Eliminación de los microvideos flash
- Añadida la nube temática como metodo de organización de
información.
- Añadido pluging Tagging. Ahora se
asocian tags a cada história y se pueden relacionar entre si.
- Tags como método de relación de histórias. Histórias
relacionadas.
- Creado el concepto de archivo, con los resumenes/listados anuales de
los posts
- Después de la optimización:
Total HTTP Requests: 19
Total Size: 155536 bytes
v6.4.13 30/1/2006
- Unificada la sección de artículos de la barra lateral.
- Quitado el arbol completo de artículos. Añadida sección de
scripts.
- Quitada barra de imágenes de flickr.
- En el servidor no funciona el sistema de Karma. Error en los
permisos de uno de los archivos. Arreglado.
- Optimización gorda. Empaquetado de JS en un único fichero,
pasado por jsmin y
comprimido zip. Empaquetado de CSS en un único
fichero, pasado por CSSTidy y comprimido.
Antes (Esta página): (Web Page
Optimizer)
Total HTTP Requests: 25+(10CSS)
Total Size: 146210 bytes
Tiempo de generación: 0.3270 segundos
Ahora:
Total HTTP Requests: 23
Total Size: 102267 bytes
Tiempo de generación: 0.3169 segundos
v6.4.12 18/1/2006
- Añadido sistema de karma. Los visitantes pueden votar los post (Me
gusta/No me gusta). Así puedo tener un mejor feedback y podré hacer un top de los post mas populares.
v6.4.11 15/1/2006
- Revisada la redacción del faq
- Eliminadas secciones "infancia" "la salle" "me gusta/me disgusta" y
"wishlist"
- Reestructurada barra lateral: Fusión del "sobre david" y de
"información personal"
v6.4.10 11/1/2006
- Añadido script Lighbox
para evitar enlazar imagenes a página remotas -> Ahora se
precargan y se muestran sobre la página. (En pruebas).
- Añadida libreria script.aculo.us para efectos
gráficos.
v6.4.3 1/5/2005
- Pasado el diseño a layout fluido. Yo tampoco sabia lo que era. No es estático, no es dinámico, es fluido. Ya no saben que inventar... :)
v6.4.2 9/3/2005
- Recolocación de elementos, layout + compatible.
- Vuelve google adsense
v6.4.1 19/1/2005
- Aumentado el tamaño de las letras y ajustados los colores.
- Quitado google adsense (He sacado la friolera de 1.4 EUR en dos
meses) :)
