Elena Vera

Bloc personal de la webmaster de BalearWeb

Atenció amb les plantilles personalitzades!

elenavera | 10 Juliol, 2004 01:12

Tal com explica en Jander en aquest article del seu bloc, canviar l'aspecte dels blocs és força senzill. Existeixen moltes plantilles diferents per al servei. Ara bé, les plantilles que inclou la versió actual del pLog (0.3.1) no compleixen de forma estricta els estàndards XHTML ni les recomanacions sobre accessibilitat de la WAI. Tal com explica l'equip de pLog en el seu fòrum, la nova versió beta 0.3.2 i la futura 1.0 sobre la qual estan treballant, millora molt en aquest sentit.

A l'espera del llançament oficial de les noves versions de pLog, BalearWeb ha creat de moment una plantilla pròpia (amb tres variants de colors) que es regeix per les recomanacions d'accessibilitat de la WAI i els estàndards de l'XHTML Strict. Com es pot llegir, al mateix fòrum de pLog, la plantilla creada per BalearWeb possiblement se sumarà al paquet de plantilles disponibles en la futura versió del pLog.

Característiques de la plantilla creada per BalearWeb

La plantilla de BalearWeb inclou unes correccions i millores sobre els arxius que integren el bloc perquè tenguin un codi font més net, vàlid i semàntic, fent un ús apropiat de les etiquetes h1, h2, h3..., ul, li, p, dl, dt, formularis, etc., i eliminant de l'estructura tots aquells elements que només tenen una funció gràfica. Tot el que fa referència al grafisme es controla mitjançant el full d'estil CSS.

Hem fet que la plantilla tingui un disseny totalment líquid i flexible, emprant valors relatius i percentatges, això vol dir que el bloc s'adapta a la pantalla de l'usuari i permet ampliar la mida del text (amb qualsevol navegador).

L'elecció que hem fet dels colors de la plantilla que surt per defecte (la blava), no és arbitrària. Hem triat el color blau per als enllaços no visitats, i el color morat per als enllaços visitats, perquè aquests són els colors que tenien tots els enllaços originalment i, de fet, són els colors que encara utilitzen portals tan visitats com Google o el propi W3C. És cert que avui dia tothom està acostumat a veure enllaços de tots tipus, però si algú es preocupa especialment per l'usabilitat de les pàgines, és una opció a considerar.

A més, hem fet alguns altres canvis sobre la plantilla original, amb l'objectiu de fer-la més funcional:

Hem retirat els enllaços del menú de navegació i hem creat una pàgina extra específica, en la qual es despleguen de forma més àmplia. Així, si l'usuari té molts enllaços, evitem que s'allarguin massa els menús de navegació.

També hem retirat els enllaços cap als arxius (llistat d'articles per mesos) del menú de navegació i hem creat una pàgina extra dedicada. D'aquesta forma també evitem que, amb el pas dels anys, s'allargi massa el llistat de mesos. Ara només apareixen un o dos mesos (juny i juliol), perquè acabem de començar, però quan el bloc compti amb uns anys la llista de mesos pot arribar a ser molt llarga.

A la pàgina dels àlbums hem canviat la icona que s'utilitza per pujar al nivell superior de l'àlbum, per una fletxa, perquè pensem que així és més clara la seva funció.

Hem inclòs un enllaç al Bloc de BalearWeb. Així l'usuari pot accedir de forma ràpida a la zona d'administració. A més a més, l'enllaç té per objectiu promocionar el servei de blocs, i de pas donar a conèixer els altres blocs del servei :-)

Com personalitzar-se la plantilla i canviar l'aspecte del bloc?

Si volem canviar l'aspecte del nostre bloc, una opció, la més senzilla, és la que explica en Jander en aquest article del seu bloc. Però l'opció que recomana BalearWeb és la següent:

  1. Descarregar l'arxiu standard.zip d'aquesta pàgina. L'arxiu conté la plantilla blava que inclou el servei per defecte.
  2. Descomprimir l'arxiu standard.zip. Ens trobarem amb una carpeta anomenada "standard" que conté un full d'estil anomenat standard.css i 15 arxius més amb la terminació .template.
  3. Renomenar la carpeta "standard" amb el nom que vulguem posar a la nostra plantilla, per exemple "impactant" i renomenar l'arxiu "standard.css" amb el mateix nom, per exemple "impactant.css".
  4. Editar amb un editor de text simple com ara el Note Pad tots i cadascun dels 15 arxius que integren la plantilla, per cercar i reemplaçar la paraula "standard", que apareix a diverses rutes, per la paraula "impactant" o el nom que haguem triat per a la nostra plantilla.
  5. Fer els canvis que vulguem sobre els arxius de la plantilla. Modificant només el full d'estil, podem canviar totalment l'aspecte gràfic del bloc: colors, fonts, etc. I si per exemple volem afegir un logotip a la capçalera, modificaríem l'arxiu anomenat "header.template". I si volem modificar el menú o el peu, bastaria editar l'arxiu "footer.template".
  6. Tornar a comprimir la carpeta amb tot el seu contingut en un paquet zip, tar.gz o tar.bz2, i ja tenim la nostra plantilla personalitzada. La resta de passes són tal i com explicava en Jander.
  7. Entrar dins de la zona d'Arranjaments.
  8. Entrar dins "Afegir nova plantilla".
  9. Al primer formulari, seleccionar "Examinar" per veure les carpetes del nostre disc local i seleccionar la ruta cap al fitxer comprimit que haurem creat.
  10. Pujar la plantilla.
  11. Entrar de nou a Arranjaments i seleccionar com a plantilla del bloc la nostra nova plantilla.
  12. Visualitzar la web per veure els canvis.

En cas que sorgeixi algun problema, sempre podem tornar enrere, i tornar a posar una de les plantilles que venen per defecte. Si es dóna el cas, aleshores convé esborrem la plantilla amb problemes, fer les correccions que calgui, i tornar-ho a provar.

Els que vulguin anar encara més enllà, poden fins i tot afegir noves pàgines al seu bloc. Per exemple, si volem tenir una pàgina estàtica amb una introducció sobre sobre el bloc, podríem afegir al paquet dels 15 "templates" un arxiu anomenat "introduccio.template" que contindria el codi amb la informació que volem fer sortir a la introducció. I per enllaçar a aquest document empraríem el següent codi: <a title="Introducció" href="{$url->templatePage("introduccio")}">Introducció</a>.

També ens pot interessar personalitzar la plantilla per sindicar continguts d'altres blocs, però... d'això ja en parlarem un altre dia.

Accessibilitat | Següent | Anterior | Comentaris (9) | Retroenllaços (0)

Comentaris

Jander

Sorry

Jander | 12/07/2004, 06:36

Ups, no sabía que no cumplían el estandar, perdón. Si quieres quito el link a los temas o el artículo mismo. Esto me pasa por no leer.... :) Otra cosa, para que valide como XHTML 1.0 Strict no me deja incluir el tag <div align="center">. La cuestión está en que entonces no se como centrar algunas cosas :-D Cómo lo soluciono :?
Elena

Hola

Elena | 12/07/2004, 11:03

Hola, Jander, no te preocupes, es mejor que hayas introducido el tema de las plantillas. En cuanto a dar formato a los artículos, lo suyo es colocar toda la información que se refiere al estilo, en la hoja CSS. Creo que añadiré unas cuantas "classes" a las hojas de estilo de las plantillas, como por ejemplo .left {text-align: left;}, .right {text-align: right;}, .center {text-align: center;}, .floatleft {float: left; padding:5px}, .floatright {float: right;padding:5px}, .bold {font-weight: bold;}, .italic {font-style:italic;}, .underline {text-decoration:underline}, para poder alinear y flotar elementos y destacar texto. Para opciones más personalizadas, tal vez lo suyo sería crearse su propia hoja de estilo. Cuando lo tenga listo, publicaré las recomendaciones.
Jander

Re: Hola

Jander | 12/07/2004, 12:12

Ok. Si añado ese código, habré creado las funciones floatleft, floatright, etc. Pero luego como las uso? Es decir, como las llamo a la hora de escribir un articulo? Lo siento pero es que de CSS y demás ando fatal (es decir, no tengo ni idea :) Un saludo
Elena

Re: Hola

Elena | 12/07/2004, 14:11

Añadiendo class="nombredelaclass" dentro de la etiqueta del elemento. En seguida que tenga un momento, publicaré un nuevo post sobre el tema. Y el objetivo es incluirlo todo en las "Preguntas más frecuentes", pero aun no hemos tenido tiempo.
Jander

Modificando el template standard

Jander | 19/07/2004, 19:36

Buenas. He modificado el template standard (solo añadiendo un link al footer.template),siguiendo los pasos del artículo pero no se ve correctamente. La ruta especificada en el header.template para el CSS parece también correcta: @import "{$url->getUrl("/templates/prueba/prueba.css")}"; Ya no se que mas mirar :? Un saludo :)
Elena

Falta el directorio de tu bloc

Elena | 19/07/2004, 19:46

Ups, falta añadir /blog_18 (referente al número que tiene tu bloc) a todas las rutas, después de /templates. Perdona, no tuve en cuenta que se colocan en un subdirectorio. Las direcciones deben ser del tipo /templates/blog_18/prueba.css Después actualizaré las instrucciones.
Jander

;-D

Jander | 19/07/2004, 19:55

Ya funciona, gracias! Voy a seguir probando :)
Elena

Era por las rutas?

Elena | 19/07/2004, 20:02

¿Era por las rutas? Es que ahora dudaba... porque en las plantillas que te pusiste primero no cambiaste nada, o sí? Tendría que ser más fácil la instalación... Me lo estudiaré un poco más. Voy a trasladar este tema al nuevo foro que hemos abierto en http://www.balearweb.com/forum/viewforum.php?f=13
Jander

Si, por las rutas.

Jander | 19/07/2004, 20:18

Pues si, es raro. Me extraña, porque al añadir la ruta al template standard modificado por mi, todo ha ido perfecto. Pero al mirar el código de los otros templates que tenía (los que están en la web del pLog) todos tienen como ruta /templates/nombre_template/algo.css. Espero que sirva de ayuda. Un saludo. PD: No sabia si empezar un nuevo hilo en el foro o contestar aquí.
 
Accessible and Valid XHTML 1.0 Strict and CSS
Powered by LifeType - Design by BalearWeb