Drupal

Drupal joan Mar, 23/12/2014 - 11:14

HOWTO: Com substituir taules per DIV des de ckeditor, per usuaris amb rol d'editor

HOWTO: Com substituir taules per DIV des de ckeditor, per usuaris amb rol d'editor joan Mar, 09/12/2014 - 13:58

Nota prèvia

L'equip de desenvolupament web en general dona un estil/disseny a una web, pensant en criteris estètics (seguint un disseny, usant una plantilla, etc.) i també pensant en criteris tècnics, com el SEO o l'adaptabilitat (que es vegi bé en dispositius de pantalla petita), etc.

Sovint, però, els clients afegeixen contingut a la web usant camps de text amb el suport d'editors visuals. Si la informació a introduir és senzilla i estandaritzable, simplement se'ls pot donar l'opció d'usar unes (poques" opcions de format (negretes, llistes d'elements, etc.), però de vegades els editors han de poder composar el text, adjuntant imatges, etc. En aquests casos, ens podem trobar que els editors trenquen els criteris dels dissenyadors / desenvolupadors.

Pas a pas...

1) L'etiqueta <div> serveix per delimitar bocs en HTML. La usarem en substitució de les cel·les de la taula... Per tant el que correspondria a una cel·la, anirà delimitat per <div>contingut de la cel·la</div>. Però com que es traqcta de fer-ho per usuaris sense coneixements de codi, des d'un editor visual, en aquest cas Ckeditor, i els blocs DIV no es visualitzen en ell, usarem un botó de l'editor que ens permetrà visualitzar-los:

Boto per mostrar DIVs

Si no tenim cap DIV, el podem crear, al desplegable de format, canviant l'opció de "Normal" per "Normal (DIV)".

2) Llavors, en cada DIV (bloc) podem clicar amb el botó dret del ratolí, triar l'opció "edita DIV" i introduir-li els estils que volguem que tingui.

Perquè això funcioni els DIV han d'estar englobats dins d'algun altre element, per exemple un altre DIV (sembla un bug del Ckeditor). El més senzill és que cliqueu el botó de "Codi font" i escriviu aquest codi:

<div><div>text de prova</div></div>

Llavors ja podrem usar el botó dret per mostrar les propietats dels DIV.

Editar DIV

3) A la finestreta que ens haurà sortit:

Propietats DIV

seleccionem la pestanya "avançat" i, a la línia d'estil, podem posar els estils (CSS) que ens facin el fet. En aquest cas, per tenir blocs de 400px d'ample, que s'apilin a l'esquerra, i quan no tinguin espai, baixin abaix (el que permet que en una finestra d'un mòbil els veiem un a sota de l'altre, sense necessitat d'usar la barra de desplaçament lateral, expressament prohibida pels manaments de la llei pastafari):

  • float: left;
    ens apila (flota) els flocs a l'esquerra)
  • width: 400px;
    l'amplada dels blocs és de 400px
  • border: solid 1px;
    encerclarem els blocs amb una vora d'un pixel
  • margin: 3px;
    entre la vora i el següent element, hi deixarà 3 píxels d'espai
  • padding: 2px;
    usarem un acolxat de 2px, que és l'espai intern entre el contingut del bloc i la vora

Voleu veure com queda?

http://www.enginyerscivils.cat/ca/Area-Restringida

 

 

Còpia de seguretat de la web

Còpia de seguretat de la web

En aquest esborrany només vull comentar alguns aspectes relacionats amb una còpia de seguretat d'una web.

Per començar, anem a exposar els riscos, que poden derivar en la pèrdua de la informació més recent de la web o, fins i tot, de la web sencera.

Riscos:

  • Que falli els disc dur del servidor a on tenim hostatjada la web, i no es pugui recuperar la informació
  • Que durant el procés d'actualització del servidor hi hagi algun problema (BBDD corrupta) i acabem perdent la informació.
  • Que l'empresa que hostatja la web (que no te perquè ser el nostre proveïdor de serveis webs), sinó més aviat la propietària dels datacenters, revenedors, etc. faci fallida, desaparegui
  • Que l'empresa / tècnic que ens dona el servei de (creació i) manteniment de la web desaparegui
  • Etc.

Per evitar mals majors (la pèrdua total de la web, i per tant de la inversió que hem fet) podem prendre una sèrie de mesures preventives... Anem a veure algunes d'elles, o alguns enfocs... Amb temps i una canya aniré completant aquesta informació :-)

Software lliure

Per començar, la primera recomanació, utilitza software lliure... Tria un tècnic / empresa que treballi amb software lliure, i que sigui transparent. La idea és que sàpigues quin software estàs usant... Drupal, Wordpress, Joomla... Només aquests tres engloven la major part de les webs que veiem... Per webs molt complexes o requisits molt específics podria ser apropiat l'ús d'algun framework (que sigui també de software lliure ;-) ), però és un cas molt minoritàri...

Que trobem a l'altra cara de la moneda? Serveis "tancats" que ofereixen webs boi sense cost, però amb un lloguer mensual (en el model anterior pagues la web de cop, al començament, i llestos...). Son sistemes opacs a on no sabrem quin gestor de continguts s'ha utilitzat, i estem lligats de mans i peus a l'empresa que ens l'ofereix. Si aquesta empresa se'n va a l'aigua, o no fa bé la seva feina, no podrem portar la SEVA web a un altre empresa o professional, com si que podem fer amb una web de drupal, SI TENIM UNA CÒPIA DE SEGURETAT.

Còpies de seguretat

Normalment el nostre servidor farà còpies de seguretat, però en general només tenen unes setmanes d'antiguitat i es desen per defecte en els sistemes de la mateixa empresa: això no evita que, si aquesta empresa desapareix, o fins i tot si el disc dur a on estan emmagatzemades les còpies de seguretat, si és el mateix que a on hi ha l'original, poguem perdre tota la informació. CAL FER CÒPIES DE SEGURETAT EN UN ALTRE EMPLAÇAMENT, AL QUE TINGUEM ACCÉS NOSALTRES, DE MANERA INDEPENDENT DEL PROVEÏDOR WEB / SERVIDOR.

A drupal, com a molts altres gestors de continguts, les webs tenen la informació dividida entre la base de dades i els fitxers de codi. També podriem parlar dels fitxers de configuració del servidor, però això ja seria filar massa prim. Per tant hem de fer còpia de seguretat de tots dos blocs...

Hi ha serveis comercials que ofereixen l'opció de guardar còpies de servidors concrets, d'aquestes empreses, a la que tindrem accés naltros. Possiblement son una bona opció, però depén de per a qui, massa cara...

Una altra opció és que ens descarreguem la còpia de seguretat al nostre ordinador personal / al servidor de l'empresa.

Per fer-ho, caldria tenir en compte que, si volem garantir la privacitat de les dades que ens descarreguem al nostre ordinador, ho hauriem de fer usant una connexió segura (per exemple, sftp)

Un altre apunt de les còpies de seguretat: la política de retenció. Política de retenció vol dir quines còpies conservo: no és recomanable guardar només la darrera còpia de seguretat, o les de les darreres setmanes, posem per cas.

Per què?

Imaginem que hem introduit un error a la web, que no hem detectat fins que han passat uns mesos, però que ha esborrat part del contingut que no s'havia d'esborrar/alterar. O que la BBDD se'ns ha corromput: la web funciona, però pot fer difícil/molt costós el recarregar la còpia en un escenari de, per exemple, actualització del servidor. Si només guardem les còpies del darrer més, no podrem rescatar la informació perduda.

Una política de retenció vàlida, al meu entendre, per moltes webs amb pocs canvis, seria el conservar una còpia de cada més dels darrers 12 mesos, i només una per any dels anys precedents. En una web de fa 5 anys, per exemple, com a màxim tindriem 16-17 còpies guardades...

¿Que hay de mi libro?

Si teniu una web en drupal, aquí podeu consultar el nostre servei de còpies de seguretat: http://www.calbasi.net/web/copia-seguretat

 

joan Jue, 23/05/2013 - 17:09

Còpia de la base de dades de drupal amb Backup and Migrate

Còpia de la base de dades de drupal amb Backup and Migrate joan Vie, 06/06/2014 - 19:34

Si el vostre gestor web ha instal·lat el mòdul Backup and Migrate i ha configurat els permisos adequadament per a què pogueu fer còpies de seguretat manuals (diferents a les periòdiques, que es guarden al servidor, perquè les manuals les podeu descarregar al vostre disc dur), els passos per fer una còpia son els següents:

  1. Aneu a Configuració > Sistema > Backup and Migrate (admin/config/system/backup_migrate)
  2. Allà només heu d'assegurar-vos de triar l'opció "Download" al camp "to"

Així de senzill ;-)

Pd.: amb la còpia de la BBDD teniu el més important, però per restablir el sistema us caldria també tenir la còpia dels fitxers... La major part d'ells son els fitxers estàndard de Drupal i els seus mòduls, que podrieu descarregar d'internet, però hi ha alguns fitxers que no us podrieu inventar, en restaurar el sistema, com els fitxers pujats a la web des dels camps de fitxer pels usuaris, la configuració dels estils (aspecte), si l'heu personalitzat, etc. Així que per complementar la còpia de la BBDD també us caldria una còpia del directori "sites" de la web.

Drupal backup system

Drupal backup system

Hi,
I want to offer my customers the option of backup their drupal locally. I developed a system based in Backup and Migrate module and some work at server side... I'd like to share with you my work, to receive your feedback, opinions, improvements... if you think it could be useful ;-)

Install Backup and Migrate drupal module

Schedule suggestion: weekly and 3 month copies, keeping last 12 in both categories.
Thus, we are going to keep copies from last 3 years.

In Cpanel, add a new ftp account with these details:

  • user: web_backup
  • password: (your choice)
  • Directory: DRUPAL_BASE_DIRECTORY/web_backup
  • quote: your choice (ex 200MB)

At server DRUPAL_BASE_DIRECTORY, as root:

# chmod 700 web_backup
# nano web_backup_info.txt

Put here any useful info and save the file

# nano web_backup.sh

And, there:

Drupal_Path="/home/calbasi/www/web"
tar cf $Drupal_Path"/web_backup/web_backup_sites.tar" $Drupal_Path"/sites/default/settings.php"
gzip -f $Drupal_Path"/web_backup/web_backup_sites.tar"
_now=$(date +"%Y_%m_%d")
cat $Drupal_Path"/web_backup_info.txt" > $Drupal_Path"/web_backup/LastBackupDate_$_now.txt"
mail -s "EMAIL_SUBJECT" "EMAIL_TO_ADDRESS" <<EOF
EMAIL_BODY (IN SEVERAL LINES)
...
EOF

Then, we add a cron task:

# crontab -e

There, insert a line like this:

0 4 23 * * DRUPAL_BASE_DIRECTORY/web_backup.sh

In the example, you get a backup monthly, the 23th day, at 04:00

TODO:

  • force ftp secure connexions
  • solve tar warning "/"
joan Vie, 24/05/2013 - 21:32

HOWTO: Creació d'un mapa d'establiments a google maps a partir de les adreces d'un full de càlcul

HOWTO: Creació d'un mapa d'establiments a google maps a partir de les adreces d'un full de càlcul

Objectiu: a partir d'un full de càlcul amb diferents adreces (postals) volem obtenir un mapa de google amb tots aquests punts, etiquetats, i també un camp a on posar un codi postal (de l'usuari), per veure quins dels punts estan a la vora).

  1. Cal aconseguir les coordenades de les adreces postals (geolocalització), perquè google maps necesita la latitud i la longitud per dibuixar papes de punts/localitzacions. Naltros partim d'un fitxer (un full de càlcul), a  on tenim l'adreça (postal) però no pas les coordenades geogràfiques. El primer pas, doncs, serà obtenir-les.
    1. Des del full de càlcul (ods, excel...) convertim les columnes que ens interessen en un fitxer CVS (típicament cada línia és un registre, les cometes engloben cada camp, i la coma separa els camps).
    2. Usarem el servei de gpsvisualizer.com (també podem usar directament el Google Geocoding API o l'API de Yahoo).
      1. Usant l'opció, dins de gpsvisualizer.com, de l'API de Yahoo, podrem obtenir un llistat de coordenades en format cvs (text separat per commes) a partir de les dades del CVS que hem generat abans.
  2. Ara cal transformar la informació a un format importable per google maps. Per fer-ho usarem l'aplicació de linux "Prune", que gestiona localitzacions de GPS; etc.
    1. Per importar la informació, convertirem el full de càlcul (que teniem en format ods del libreoffice, xls de l'excel, etc.) en un fitxer CVS, amb un delimitador que no usem en cap camp descriptiu, com el punt i coma, i el text SENSE cometes (quan l'englovava en cometes, com seria habitual, obtenia una informació incorrecta).
    2. Un cop obtingut el fixer .cvs, l'obrim amb el Prune, i l'exportem en format kml.
  3. Llavors, a google maps, identificant-nos amb el nostre compte de google, creem un mapa i importem el fitxer kml.
    1. Sembla que només funciona si importem les coordenades (latitud i longitud) i un camp de descripció, però no més...

      Amb això ja tenim un mapa amb els nostres punts / marcadors.
       

Alternativament, a drupal, amb el mòdul geocoder, geofield i addressfield és fàcil transformar adreces en coordenades.  Però per importar el fitxer cvs cal usar algun mòdul d'importació primer. Després, amb openlayers, es pot mostrar la info de forma molt flexible.

Si hem obtingut un fitxer kml pel procés descrit amunt, també podem incorporar-ho a l'openlayes com una capa.

 

 

joan Sáb, 14/04/2012 - 17:57

External links

External links

El mòdul External Links de Drupal serveix per dugues coses:

Per que es pugui configurar el comportament a seguir amb els enllaços externs de la nostra web (si s'obren en la finestra actual del navegador, amb el que el visitant "perd" la nostra web) o si s'obren en una nova finestra (el que jo trobo en general més interessant i només te una pega, que alguns navegadors utilitzen sistemes per evitar aquest comportament en webs que l'usen per obrir finestres d'spam)

Perquè els enllaços externs i/o els enllaços "mailto" per enviar missatges, vagin acompanyats d'una icona indicativa.

joan Mar, 04/05/2010 - 14:04

Destacar continguts a la portada

Destacar continguts a la portada emma Mar, 10/05/2016 - 12:08

Per veure (destacar) un element a la portada, un cop esteu a la pestanya d'edició del node/pàgina en qüestió, heu d'anar a "Opcions de publicació", abaix de tot del formulari d'edició, i seleccionar "Promogut a la portada".

 

Drupal 6

Drupal 6 joan Lun, 29/01/2018 - 10:47

Drupal 6 va deixar de tenir suport de seguretat des que la versió 8 de drupal va estrenar-se, pels vols del novembre de 2015. Malgrat que hi ha un suport limitat, en part comercial, en part lliure, dut a terme per un grapat d'empreses, el recomanable és migrar les velles velles a drupal 8, i aprofitar totes les millors que aquest incorpora, a més de, sobretot, protegir la nostra web i, de retruc, el servidor.

Activar i personalitzar el banner de Acquia Slate v.3

Activar i personalitzar el banner de Acquia Slate v.3

Si volem accedir a les funcionalitats "Fusion" del tema Acquia Slate haurem d'instal·lar la versió beta 3, i el mòdul Skinr en la versió 2, que encara està en desenvolupament. L'Skinr, al seu torn, en semanarà que instal·lem

Per activar l'Skinr UI, caldrà tenir instal·lats, al seu torn 4 mòduls més: Chaos Tools, Dialog API, jQuery Update i jQuery UI.

Un cop ho tenim tot activat, hem d'anar a /admin/build/skinr/rules i crear una regla nova. I, a la part intermitja, quan faci referència a l'Acquia Slate, triar un "Acquia Slate - Banner Styles" entre un dels pre-definits...

Però com que probablement volem tenir la nostra pròpia imatge, hem de fer alguns passos més.

L'opció senzilla, que se'ns sobreescriuria cada cop que actualitzem el Acquia Slate, seria canviar alguna de les imatges al servidor ( themes/acquia_slate/images/banner),

L'altra seria editar el fitxer themes/acquia_slate/css/local.css (el podem fer a partir del local_sample.css) i també afegir una opció editant el fitxer .info de la carpeta del tema...

Llavors ja només ens queda activar algun bloc a l'àrea "Preface top".

Referències:

joan Vie, 08/04/2011 - 22:36

Com insertar una imatge amb Ckeditor i IMCE (Drupal)

Com insertar una imatge amb Ckeditor i IMCE (Drupal)

Requisits:

Drupal 6.x

CKeditor

IMCE

Quan creeu, o editeu, un post, per inserir una imatge en el text (no com a adjunt, que seria una altra cosa), cal que, un cop dins de l'àrea d'edició de l'editor CKeditor:

Cliqueu la icona "Imatge"

Al camp URL, cliqueu l'opció "veure servidor" (o poseu una adreça d'una imatge que ja estigui openjada a Internet)

Al navegador de fitxers que s'us obre (IMCE), cliqueu l'opció "Puja"

Busqueu la imatge al vostre disc dur amb el botó "Navega" o similar

Recordeu que les imatges que penjeu per visualitzar a una web haurien de ser lleugeres, això és, com a molt, 300kb

Cliqueu el botó "Puja", per posar-la al servidor (amb això haureu pujat una imatge des del vostre disc dur fins al servidor)

Amb la imatge seleccionada, cliqueu l'opció "Send to ckeditor" (amb això li estem dient al programa que és aquesta la imatge que volem posar a la pàgina)

Ompliu les opcions d'amplada, alçada, espaiats, enllaços, etc. que volgueu, i cliqueu el botó "D'acord"

joan Vie, 25/06/2010 - 19:34

Presentar videos a drupal amb el mòdul lightbox

Presentar videos a drupal amb el mòdul lightbox

Si volem penjar videos que estiguin en servidors públics com youtube, vimeo, etc. però que tinguin una presentació professional dintre de la nostra pròpia web en drupal, podem usar el mòdul lightbox, per obtenir un resultat semblant a això:

Un cop instal·lat el mòdul lightbox, hem d'activar el suport per video (desactivat per defecte, per estalviar javascript). És l'opció "Enable video support" que trobarem a /admin/settings/lightbox2 (subsecció "video settings").

Després ja només hem d'usar el següent codi:

<a href="adreça_del_nostre_video" rel="lightvideo[][]"><img src="adreça_de_la_nostra_imatge" /></a>

La imatge fixa que farà d'enllaç amb el video la podem obtenir amb la tecla "ImprPant" de l'ordinador.

joan Mar, 19/04/2011 - 20:11

HOWTO: Adding node type class to body element in Drupal 8

HOWTO: Adding node type class to body element in Drupal 8

Method 1: edit your html.html.twig theme template

Add this line at   <body{{ attributes.addClass(classes,:

    node_type ? 'page-node-type-' ~ node_type|clean_class

For example:

  <body{{ attributes.addClass(classes,
    not is_front ? 'with-subnav',
    sidebar_first ? 'sidebar-first',
    sidebar_second ? 'sidebar-second',
    (sidebar_first and not sidebar_second) or (sidebar_second and not sidebar_first) ? 'one-sidebar',
    (sidebar_first and sidebar_second) ? 'two-sidebars',
    (not sidebar_first and not sidebar_second) ? 'no-sidebar',
    node_type ? 'page-node-type-' ~ node_type|clean_class
  ) }}>

Method 2: Try node_type_class module

 

joan Jue, 05/01/2017 - 21:41

HOWTO: Com crear alies d'URL als nodes de Drupal 7

HOWTO: Com crear alies d'URL als nodes de Drupal 7 joan Dom, 03/09/2017 - 20:21

Per crear un alies només heu d'editar un node i, al peu, trobareu l'apartat "Paràmetres del camí URL", a on podeu posar un alies com "qui-som", "empresa", etc. per evitar les URL com "node/155". D'aquesta millora millorareu el SEO i fareu que la pàgina sigui més fàcil de recordar si heu de donar o reenviar l'adreça.

Si no trobeu aquest apartat, és possible que el vostre usuari no tingui permisos per a fer-ho: contacteu amb el vostre gestor de la web.

Pd.: hi ha pàgines que no es generen creant nodes, sinó amb vistes, etc. Els alies d'aquestes pàgines es gestionen d'una altra manera, que en general és més complexa i fa el gestor de la web.

Com a consell, mireu de no posar caràcters no anglesos (vocals accentuades, ce trencada...) ni espais en blanc. Aquests últims els podeu substituir per guions.

Aquí teniu la captura:

Gestió dels alies dels URL

HOWTO: jump menus in Drupal 8

HOWTO: jump menus in Drupal 8

In drupal 7 there are some modules to do it, including ctools, but at present, none of them have stable or even an alpha version.

But with long standing and wonderful superfish module we can achieve it!

Just install it and place your menu superfish type block (at /admin/structure/block) at your desired region. Then, at block config options go to sf-Smallscreen settings and:

  • Ensure "Convert the menu to a <select> element." is on (default behavior)
  • Choose when transform your menu in a jump menu:

 

  1. Desactivar.
  2. Enable jQuery sf-Smallscreen plugin for this menu.
  3. Enable jQuery sf-Smallscreen plugin for this menu depending on the user's Web browser window width. (Predeterminado)
  4. Enable jQuery sf-Smallscreen plugin for this menu depending on the user's Web browser user agent.

 

If you choose second option, you get a jump menu always, not depending of screen width...

That's all!

Ps: it's possible get an accordion menu just using "Convert the menu to an accordion menu" instead of "Convert the menu to a <select> element."

joan Jue, 09/02/2017 - 08:23