L’editor d’esquemes al Dokuwiki

És un editor que permet afegir esquemes interactius als documents generats pel Dokuwiki. També permet inserir l’esquema com a imatge. El podeu trobar a la barra d’edició del Dokuwiki.

Per afegir un esquema nou heu de prémer el botó corresponent a la barra d'edició del text. Aquest botó té el nom "Afegir o editar un esquema nou".

Al prémer el botó s'obre directament l'àrea d'edició de l'esquema, ocupant tot l'espai del vostre navegador.

Un cop acabat l'esquema l'haureu de desar, per fer-ho es fa servir l'opció Fitxer>Desa del menú principal.

Cada cop que es desa un esquema nou apareix una caixa per anomenar l'esquema.

El sistema inserirà, a l'editor del Dokuwiki, un enllaç a l'esquema amb el nom que hi poseu.

A la llibreria de fitxers del Dokuwiki s’incorpora l’arxiu xml del nou esquema i també una imatge .png que es pot utilitzar si no voleu fer servir la versió interactiva. Si cliqueu el botó d’afegir imatges i fitxers, veureu els arxius generats a partir del vostre esquema.

Per editar un esquema heu de seleccionar tot l'enllaç, amb les claus incloses, i prémer el botó de creació d'esquemes.

El primer que trobareu al crear un esquema és la pantalla d'edició. Aquesta es divideix en 4 parts:

1. Part superior, amb el menú general i la barra d'opcions ràpides.
2. Columna esquerra, on es troben els elements que es poden afegir a l'esquema.
3. Part central, on s'aboquen els elements i es realitzen totes les connexions, donant forma al nou esquema. És l'espai on es dibuixa l'esquema.
4. Columna dreta, on són els paràmetres de cada element, i que canvia segons l'element que estigui seleccionat.

A l'espai de dibuix el ratolí es comporta de forma diferent a la resta dels espais. Per manipular elements:

• Seleccionar i manipular elements. Heu de fer servir el botó esquerre del ratolí.
• Obrir menú flotant amb opcions. Heu de fer servir el botó dret del ratolí, el menú dependrà de l’element sobre el que hi sigui el ratolí en aquell moment. Si el feu servir en un espai buit llavors mostrarà les opcions de l’espai de dibuix.

Per manipular l’espai de dibuix:

• Desplaçar l’espai de dibuix. Heu de prémer i arrossegar la rodeta del ratolí. L’espai es desplaçarà cap al costat que vagi el ratolí.
• Pujar i baixar l’espai de dibuix. Heu de girar la rodeta del mig, l'espai de dibuix pujarà o baixarà, depenent de cap a on giri la roda.
• Zoom. Heu de prémer la tecla Ctrl i a la vegada girar la rodeta del mig del ratolí.

A la columna esquerra es poden veure els elements més comuns sota la pestanya General. Al clicar sobre un element, aquest apareixerà a l'espai de dibuix. També es pot arrossegar directament, sense deixar anar el botó esquerre del ratolí i arrossegant fins al lloc on es vol dibuixar.

Per afegir text només heu de prémer dues vegades seguides a dins de l'element. De seguida apareixerà el cursor que indica l'inici del text.

Es pot crear un esquema ràpidament amb elements del mateix tipus. Per aconseguir-ho, heu de fer servir les fletxes blaves que apareixen al passar per sobre d’un element amb el ratolí. Aquestes fletxes us permeten crear ràpidament un esquema, només heu de prémer amb el botó esquerra a sobre de la fletxa que vulgueu i un nou element apareixerà, connectat, en la direcció que apuntava la fletxa.

Per a connectar elements ja existents també podeu fer servir les fletxes blaves, com s’ha explicat en el punt anterior. Si en comptes de clicar i deixar anar el botó esquerre, cliqueu i arrossegueu, llavors apareixerà una fletxa que s’anirà estenent fins que la connecteu amb un altre element o fins que deixeu anar el botó esquerra. Amb els punts de connexió, que són els cercles de color verd, també teniu la mateixa funcionalitat.

També podeu fer servir elements fletxa de la columna esquerra. Aquests elements els expliquem més endavant.

Els elements es seleccionen clicant amb el botó esquerre del ratolí, es poden afegir més elements a la selecció prement la tecla Ctrl a la vegada que seleccionem més elements amb el ratolí.

Un altre forma de fer-ho és seleccionant amb una caixa de selecció, només s’ha de clicar amb el botó esquerra a una zona buida i arrossegar, es formarà una caixa de selecció que permetrà seleccionar tants elements com es vulgui.

A l’espai de dibuix podem editar directament la mida i la rotació de cada element.

Al prémer sobre un element, de l'espai de dibuix, apareixen uns tiradors blaus, amb forma de cercle, i una icona de rotació. Per editar la mida feu servir els tiradors, arrossegant cap al costat que vulgueu.

Per rotar l'element utilitzeu la icona de rotació, que sempre surt just a la part superior de l'element.

Hi ha algunes excepcions amb aquest comportament segons el tipus d'element, com per exemple amb els elements fletxa, text simple i les taules.

En el cas de les fletxes connectores, amb els tiradors blaus editem el seu trajecte

En el cas del text simple, amb els tiradors blaus editeu el seu espai, i si el feu més estret que el text contingut llavors el text es dividirà en línies ajustant-se a la mida.

Per editar el contingut del text només heu de clicar dues vegades seguides a sobre del text i podreu escriure el nou text.

En el cas de les taules, el que editeu amb els tiradors blaus es la caixa contenidora, amb la que podeu escalar tot el contingut.

Però si editeu el contingut pot arribar un moment en que part del mateix quedi fora de la caixa contenidora. Per esmenar això s’ha d’editar la caixa contenidora independentment del contingut, clicant dos cops a sobre de l'element. Així apareixeran uns tiradors blancs amb el que es poden modificar les mides de la taula interna i amb els tiradors blaus podreu modificar la caixa contenidora per fer visible tota la taula.

Els colors i els estils dels elements es defineixen a la columna de la dreta. Cada element té les seves opcions pròpies, que normalment inclouen els estils de les caixes, el format del text i l’organització dels elements.

Aquí podeu definir els següents estils de l’element:

• El color de fons, amb color sòlid o degradat.
• El color, gruix i dibuixat de la línia.
• L’opacitat de l’element
• Arrodonir els angles
• Dibuixar una ombra al voltant de l’element
• Aplicar un estil d’esbós a la línia
• Donar efecte de vidre al fons (funciona millor si el color de fons és fosc)

També trobareu 3 botons al final d’aquesta columna:

• Botó Edita l’estil. Serveix per editar l’estil directament amb codi. Només per experts.
• Botó Edita la imatge. Serveix per afegir una imatge com a icona. Utilitza la URL de la imatge i es visualitza com a pic (s’ha de tenir en compte que es veurà molt petita).
• Botó Establir com a estil predeterminat.Serveix per definir l’estil que s’aplicarà en els següents elements creats. Funciona seleccionant l’element del que volem copiar l’estil i prement el botó.

Per editar el format del text, de l’element seleccionat, heu de fer servir la pestanya Format que hi ha a la columna dreta de l’espai d’edició. Podeu definir les següents característiques:

• El tipus de lletra
• Estil negreta, cursiva o subratllada
• L’orientació del text per a que estigui en vertical o en horitzontal
• La mida de la lletra
• L’alineació horitzontal i l’alineació vertical
• La posició del text respecte a l’element
• La direcció de l’escriptura (cap a la dreta o cap a l’esquerra)
• El color de la lletra, del fons i del contorn
• El salt de paraula, que talla el text en línies
• Text amb format o sense
• L’opacitat
• L’espaiat del text, que pot ser en relació a la part superior, la inferior, esquerra, dreta o a totes les parts (global)

També podeu modificar l’estil de només una part del text. Per fer això heu de prémer dos cops seguits sobre l’element i després seleccionar la part del text que voleu modificar.

L’interlineat, o l’espai que hi ha entre les línies del text, és una característica del text que només podreu modificar seleccionant tot el textamb dos clics, com en el punt anterior. Aquesta propietat també apareixerà sota la pestanya Format.

L’organització dels elements és l’ordre de dibuixat dels mateixos. L’ordre determina quin element es veu per sobre dels altres, de forma que alguns elements poden quedar tapats, total o parcialment, per altres elements.

L’organització es controla mitjançant la pestanya Organitza de la columna dreta. Dins d’aquesta pestanya també podeu modificar algunes característiques dels elements, com la seva posició, mida, angle i orientació.

Per eliminar un element heu de seleccionar-ho i després prémer la tecla Supr del vostre teclat. També es pot fer prement el botó dret del ratolí i seleccionant l'opció Suprimeix del menú que apareix.

Com ja havíem explicat, a la part superior trobem un menú general i una barra d’opcions ràpides. Ara que ja sabeu com afegir i connectar elements al vostre esquema, anem a veure algunes opcions que ens permeten treballar amb el document i amb els seus continguts.

El menú general conté moltes opcions que s’expliquen per si mateixes, però anem a repassar-les per veure algunes particularitats pròpies.

Fitxer>Nou. Obre un menú d’on es pot seleccionar un esquema buit o una plantilla dissenyada prèviament, que podreu editar i desar amb els vostres continguts

Fitxer>Obre. Aquesta opció permet carregar un fitxer xml amb un esquema creat prèviament.

Fitxer>Desa. Desar l’esquema actual amb el nom que indiqueu. Amb aquesta opció sortireu directament de l’edició de l’esquema i tornareu a la pàgina del Dokuwiki, on veureu que ha aparegut l’enllaç al document amb el nom que heu escollit.

Fitxer>Importa. Permet importar un fitxer xml.

Fitxer>Exporta. Permet exportar un fitxer vectorial SVG. Al fer-ho servir s’obre una finestra on podem definir algunes opcions, com el nom, la mida i la transparència. Al prémer el botó Exporta el navegador carregarà la imatge resultant a una nova pestanya. Podeu desar aquesta imatge amb l’opció «Desar com» del vostre navegador.

Fitxer>Configuració de la pàgina. Aquí teniu opcions per definir l’orientació de la pàgina, la seva mida, el color de fons o si voleu fer servir una imatge de fons. Per fer servir una imatge s’ha de proporcionar l’adreça de la imatge, en forma d’URL. Aquestes opcions no es conserven al desar el document, de moment només serveix per la sessió actual.

Fitxer>Imprimeix. Permet imprimir l’esquema directament.

Fitxer>Surt. Tanca l’esquema tornant a l’espai d’edició de pàgina del Dokuwiki.

Moltes d’aquestes opcions són estàndards, aquest és el llistat de totes les que hi ha:

Edita>Desfés. Desfà la darrera acció a l’editor.

Edita>Refés. Torna a fer la darrera acció desfeta.

Edita>Retalla. Talla l’element i el fica al porta-retalls.

Edita>Copia. Copia l’element al porta-retalls.

Edita>Enganxa. Enganxa els elements des del porta-retalls.

Edita>Suprimeix. Elimina l’element seleccionat.

Edita>Duplica. Crea un element idèntic al seleccionat.

Edita>Edita l’estil. Fa aparèixer una finestra que permet editar el codi de l’estil de l’element seleccionat.

Edita>Edita. Amb aquest mode podem editar el text i els tiradors de l’element.

Edita>Edita l’enllaç. Permet editar els enllaços existents. Si es fa servir sobre un element que no té enllaç llavors es crearà un de nou, que apareixerà al seleccionar l’element.

Edita>Obre l’enllaç. Obre l’enllaç seleccionat a una pestanya nova del navegador.

Edita>Seleccioneu els vèrtex. Selecciona els tiradors (vèrtex) de tots els elements. Amb això es poden moure tots els elements alhora, però sense les connexions.

Edita>Seleccioneu els contorns. Selecciona tots els tiradors de les fletxes connectables.

Edita>Selecciona-ho tot. Selecciona tots els elements i connexions. Permet moure tot l’esquema.

Edita>No seleccionis cap. Treu la selecció que hi hagi en aquell moment.

Edita>Bloqueja/desbloqueja. Congela l’element seleccionat per a que no es pugui modificar res del mateix. La mateixa opció serveix per desbloquejar l’element.

Amb aquest submenú activeu o desactiveu la visualització de les següents opcions:

Taulell de format. Activa/desactiva la columna dreta amb opcions dels elements.

Contorn. Activa una finestra de visualització petita on es pot escollir la part que es visualitza en la part central.

Capes. Mostre una finestra per a poder treballar amb capes si és necessari.

Vista de pàgina. Activada mostra la mida del document definida.

Escala de la pàgina. Permet modificar l’escala de la visualització.

Barres de desplaçament. Mostra i oculta les barres de desplaçament.

Consells. Mostra i oculta els consells d’utilització, que apareixen al passar el ratolí a sobre de determinats elements.

Quadrícula. Mostra/oculta la quadrícula.

Guies. Activa/desactiva la visualització de les ajudes visuals al moure o crear elements.

Fletxes de connexió. Activa/desactiva les fletxes blaves que apareixen als costats dels elements i que permeten crear ràpidament nous elements o una connexió entre dos elements propers.

Punts de connexió. Activa/desactiva els punts de connexió que, a més, permeten crear també connexions ràpidament.

Restaura la vista. Torna a la vista original del document.

Apropa. Apropa la vista per veure els elements més grans.

Allunya. Allunya la vista, fent que els elements es vegin més petits.

Organitza>A dalt. L’element seleccionat puja a la capa superior de visualització

Organitza>A baix. L’element seleccionat baixa a la capa inferior de visualització

Organitza>Direcció.

• Capgira horitzontalment.
• Capgira verticalment.
• Rotació. Permet indicar els graus que l’element rotarà cap a la dreta

Organitza>Gira /Invers. Gira l’element 90 graus cap a la dreta

Organitza>Alinear. Per poder fer servir aquesta opció hi ha d’haver almenys dos elements seleccionats.

• Alinea a l’esquerra. Els elements s’alineen a l’esquerra amb l’element que estigui situat més a l’esquerra
• Centrat. Els elements s’alineen horitzontalment amb el centre del primer element seleccionat.
• Alinea a la dreta. Els elements s’alineen a la dreta amb l’element que estigui situat més a la dreta.
• Alinea a la part superior. Els elements s’alineen a la part superior amb l’element que estigui situat més a dalt
• Alinea al mig. Els elements s’alineen verticalment al mig del primer element seleccionat.
• Alinea a la part inferior. Els elements s’alineen a la part inferior amb l’element situat més a baix.

Organitza>Distribueix.

• Horitzontal. Iguala horitzontalment la distància entre els centres dels elements seleccionats
• Vertical. Iguala verticalment la distància entre els centres dels elements seleccionats

Organitza>Navegació. Els elements es poden agrupar, i dins d’aquests grups es poden crear subgrups indefinidament. La navegació permet entrar a grups i subgrups, veient només el contingut cap abaix del grup en el que estem. Per a activar aquesta opció doncs, cal haver seleccionat primer un grup

• Inici.Funciona un cop a dins d’un grup. Et porta a la vista general on es veu tot el continguts
• Sortir del grup. Et porta al nivell anterior. Si ets a dins d’un subgrup que és a dins d’un grup aniràs a parar a aquest últim.
• Entrar al grup. Mostra el detall del grup seleccionat prèviament, desapareix de la vista allò que estigui a un nivell superior.
• Desplega. Desplega un grup que s’havia plegat amb anterioritat
• Plega. Plega un grup que es pot plegar
• Fer/Desfer plegable. Fa un grup plegable, o desactiva aquesta característica si estava activada.

Organitza>Insereix

• Insereix un enllaç.Crea un element caixa amb un enllaç a dins, que obrirà l’adreça URL a una pestanya nova del navegador.
• Insereix una imatge.Crea una imatge a partir de l’adreça URL que s’indiqui. Aquesta imatge es pot modificar en mida, rotació i transparència. També es pot seleccionar el color del seu fons, si és una imatge amb fons transparent, i modificar la línia externa del rectangle que la conté.

Organitza>Disposició

• Flux Horitzontal.Canvia la disposició dels elements de l’esquema, distribuint-los de forma horitzontal automàticament.
• Flux vertical.Canvia la disposició dels elements de l’esquema, distribuint-los verticalment.
• Arbre horitzontal.Es comporta igual que el flux horitzontal, però dibuixant una disposició tipus arbre
• Arbre vertical.Igual que el flux vertical però utilitzant una disposició tipus arbre
• Arbre radial.Situa els elements principals al centre i fa una distribució radial tipus arbre
• Orgànic.Distribueix els elements de forma orgànica, sense fer servir la rigidesa habitual de columnes i files.
• Cercle.Distribueix els elements en cercle, el flux va construint-se amb aquesta forma.

Organitza>Agrupa. Agrupa els elements seleccionats a dins d’un nou grup. Per seleccionar un grup existent hi ha prou amb seleccionar un dels seus elements. Podeu dibuixar el contorn d’un grup si activeu l’opció Línia, que trobareu a la columna dreta, sota la pestanya Estil.

Organitza>Desagrupa. Desagrupa el grup seleccionat. Tots els elements queden fora del grup.

Organitza>Suprimeix del grup. Treu del grup l’element seleccionat, la resta d’elements continuen a dins del grup.

Organitza>Suprimeix les fites. Simplifica les fletxes connectores deixant-les amb el seu trajecte més directe.

Organitza>Mida automàtica. Redibuixa els elements seleccionats amb la mida justa per mostrar el seu contingut.

Dins aquest submenú hi trobeu les opcions:

• Extres>Còpia connectada. Es pot activar o desactivar. Quan és actiu al crear una nova connexió es crearà, automàticament, una còpia de l’element d’origen.
• Extres>Plega/Desplega. Si és actiu podreu fer servir les opcions de plegar i desplegar dels grups, sempre que ho hagueu activat al grup corresponent.
• Extres>Edita el diagrama. Permet editar el codi font de tot l’esquema. Només per experts.

Aquesta barra es troba a la part superior, a sota del menú general. Serveix per accedir, de forma ràpida, a algunes de les eines més freqüents.

Permet modificar la visualització d’alguns elements originals. És el primer element de la barra

Amb aquesta opció es pot activar i desactivar la visualització de:

• Taulell de format. Activat per defecte. Apareix i desapareix la columna lateral dreta amb les opcions.
• Contorn. Desactivat per defecte. Fa aparèixer una finestra flotant amb la que podem seleccionar la vista activa dins del document.
• Capes. Desactivat per defecte. Fa aparèixer una finestra flotant amb les capes del document. A aquesta finestra podeu afegir capes, eliminar-les, o modificar el seu ordre i nom.

Permet escollir ràpidament la visualització en relació amb l’augment utilitzat i l’encaix del contingut a dins de la pàgina.

Aquestes són les opcions disponibles:

• Restaura la vista. Torna a la vista original
• 25% al 400%. Permet escollir el percentatge d’ampliació
• Ajusta a la finestra. Encaixa tot l’esquema a l’esquerra de la vista actual
• Amplada de la pàgina. Amplia el necessari per a que l’amplada de la pàgina ocupi tota la vista
• Una pàgina. Ajusta la vista per a que quedi centrada la primera pàgina
• Dues pàgines. Ajusta la vista per a que es vegin dues pàgines
• Personalitzat. Obra una finestra on es pot indicar el percentatge que volgueu

Amb aquestes dues icones es pot apropar i allunya la vista ràpidament, només clicant en cada un d’ells.

La icona que té el signe més a dins amplia la vista, i la que te el signe menys l’allunya.

Aquestes opcions també es poden activar ràpidament amb les tecles estàndards Ctrl+z i Majúscules+Ctrl+z respectivament.

Les accions concretes són aquestes:

• Desfés. Permet desfer la darrera acció realitzada
• Refés. Torna a realitzar la darrera acció desfeta

Elimina l’element seleccionat en aquell moment

Aquestes dues opcions serveixen per ordenar el dibuixat dels elements, que és especialment important quan un dels elements es troba a sobre d’un altre. Amb aquestes opcions poden decidir que l’element seleccionat estigui a dalt de tot, o a sota de tot respectivament.

Amb aquestes opcions es pot escollir ràpidament el color de l’emplenat de l’element i de la seva línia

Al prémer qualsevol de les dues opcions s’obre una finestra on poder escollir el nou color

Amb aquesta opció es dibuixa una ombra a l’element seleccionat

Defineix l’estil de dibuixat de les connexions.

Així, els estils disponibles són:

• Línia. Estil simple de la línia i la fletxa
• Enllaç. Desapareix la fletxa i es dibuixa una línia doble.
• Fletxa. La línia és doble i es dibuixa també la fletxa
• Fletxa simple. La línia és doble, es dibuixa la fletxa i el trajecte de la connexió és directe.

L’estil s’aplica directament a la connexió seleccionada, però també a les que es faràn a partir d’aquell moment.

Amb aquesta opció es pot modificar el trajecte de les connexions.

Les opcions disponibles són:

• Recte. La connexió es fa amb una línia recta entre els dos elements connectats
• Ortogonal. La connexió es fa amb línies en angle recte. Es poden editar totes les parts del trajecte.
• Simple horitzontal. La connexió es fa amb línies en angle recte. Només es pot editar el trajecte en horitzontal.
• Simple vertical. La connexió es fa amb línies en angle recte. Només es pot editar el trajecte en vertical.
• Isomètric. D’esquerra a dreta. Inicia i acaba els trajectes amb angles de 45 graus.
• Isomètric. De dreta a esquerra. Inicia i acaba els trajectes amb angles de 45 graus.
• Corbat. El trajecte es dibuixa amb corbes.
• Relació de l’entitat. S’uneixen els elements a partir del punt d’origen de les seves entitats.

Amb aquesta opció es pot inserir un enllaç o una imatge al documents

Al seleccionar una de les opcions s’obre una finestra on s’ha d’indicar la URL de l’enllaç o imatge. En els dos casos s’inserirà com un element nou, que es podrà connectar i modificar.

Hi ha dos tipus d’elements fletxa, les fletxes de connexió i les fletxes visuals.

• Les fletxes de connexió ja les hem vist al principi, les podeu trobar a la columna esquerra, a sota de la pestanya General i de la pestanya Miscel·lània. Podeu modificar la mida, la rotació, l’estil i el recorregut. La seva característica principal és que permeten connectar elements.
• Les fletxes visuals que hi ha predefinides són les que podem trobar a la columna esquerra, a sota de la pestanya Fletxes. A aquestes fletxes els hi podeu modificar la mida, la rotació i l’estil, però no podeu modificar el seu recorregut, ni les podeu connectar a altres elements.

Per a eliminar un esquema s’han de fer aquests dos passos:

• Eliminar l’enllaç que s’insereix a la pàgina quan es crea l’esquema
• Eliminar els dos fitxers, que s’han anomenat automàticament igual que l’esquema però que tenen les extensions finals .png i .xml. Això es fa directament amb el botó per afegir icones o fitxers, i trobareu els fitxers a eliminar a dins de l’espai de la pàgina actual.
• Desar la pàgina