In particolare io ho dovuto limitare il numero di funzioni presenti sulle barre degli strumenti (molti non mi servivano ed occupavano spazio inutilmente). Per farlo potete mettere nel file config.js all’interno della già presente funzione “CKEDITOR.editorConfig = function( config ) {“ tutto ciò che segue:

// This is actually the default value.
config.toolbar_Full =
[
    ['Source','-','Save','NewPage','Preview','-','Templates'],
    ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
    ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
    ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
    '/',
    ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
    ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote','CreateDiv'],
    ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
    ['Link','Unlink','Anchor'],
    ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
    '/',
    ['Styles','Format','Font','FontSize'],
    ['TextColor','BGColor'],
    ['Maximize', 'ShowBlocks','-','About']
];

Lo slash (‘/’) indica un “a capo” fra le barre, il trattino (‘-’) indica una spaziatura fra le barre. I nomi credo non serva commentarli. Eliminate, spostate o aggiungete, dunque, tutto quello che volete in base alle vostre specifiche esigenze.

Qui non voglio discutere della progettazione, che mi pare troppo specifica al caso trattato. Parlerò invece delle scelte che andrò ad effettuare circa i singoli componenti legati all’interfaccia utente. Ritengo infatti che per rendere questa soluzione efficace sia necessario fornire il miglior supporto possibile a chi lo sta utilizzando che potrebbe trovarsi di fronte al cliente al quale deve dare risposte immediate e precise.

Giusto per mettere qualche paletto, il sistema sarà basato su uno schema MVC nel quale Model e Controller saranno realizzati in JAVA (J2EE) mentre la View sarà prodotta in HTML usando pagine JSP (utilizzerò componenti EJB ed il framework Struts).

Tornando all’interfaccia utente l’idea è quella di integrare componenti AJAX per svolgere tutte le principali funzionalità. Ciò che il cliente mi ha richiesto, in particolare, è la possibilità di realizzare quanto segue:

• Creazione ticket
• Assegnazione del ticket
• Rilevazione della qualità del lavoro svolto
• Possibilità di allegare documenti e file al ticket
• Registrazione delle attività e dei tempi sul ticket
• Possibilità di trasformare in automatico i file in formato PDF standard (PDF/A-1)
• Invio segnalazione via email al destinatario del ticket
• Invio di questionario soddisfazione via email al cliente quando il ticket viene risolto (chius0)
• Apertura di documenti e procedure direttamente dal ticket (questo aspetto è legato al software ERP Bizbrain Core installato in azienda)
• Riepilogo ticket con pannelli che permettono di controllare tutta la vita dello stesso e cosa ne è scaturito

Nel prossimo appuntamento farò un elenco dei componenti che ritengo necessario integrare e del perché sono stati scelti. Parlerò anche della loro integrazione nel progetto. Sono però aperto anche a suggerimenti da parte vostra…

utf8 “\xEC” è uno dei possibili errori. Da cosa dipende? In generale dipende da una errata gestione della codifica fra database dal quale vengono pescate le informazioni e pagina web. Il primo potrebbe essere con codifica Latin1 e la seconda UTF-8, tanto per fare un esempio. A parte migliorare questo aspetto, la soluzione potrebbe essere quella di evitare di scrivere caratteri non codificati in HTML nel database.

L’errore segnalato, in particolare, si riferisce ad una “i accentata” ovvero “ì”. Vi basterà scriverla come ì per non avere alcun problema.

Quella delle finestre modali è una possibilità è utilizzabile, usando i browser di ultima generazione quali Firefox 3, Explorer 7 o 8, Safari 4 ma ci sono alcune controindicazioni. A tutti gli effetti con i browser “non Microsoft” tutto funzionerebbe in maniera regolare, come se si avesse a che fare con un normale popup ma messo in primo piano. Con IE, invece, se il popup contiene una form, una volta schiacciato il tasto “Invia” si aprirà una nuova finestra. Oppure se avete nel popup avete una funzione che richiama la pagina che lo ha aperto (parent) ad esempio per fare un refresh questa non funzionerà. Non so se ci sono altri problemi ma per me questi sono stati sufficienti a farmi abbandonare l’idea.

Se invece non avete problemi di gestione simili potreste utilizzare un codice simile al seguente. Nella parte <head> pagina dove dovete chiamare il popup:

function openModalWindows() {
if (window.showModalDialog) {
window.showModalDialog("popup.html","nome","dialogWidth:200px;dialogHeight:300px");
} else {
window.open("popup.html","nome","width=200,height=300,toolbar=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no,modal=yes');
}
}

Il link presente nella sezione <body> dal quale volete chiamare la funzione per aprire il popup dovrebbe essere del tipo:

<a href="popup.html" target="nome" onclick="openModalWindows(); return false;">Apri popup modale</a>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
JQ = jQuery.noConflict();
</script>
<script src="prototype.js" type="text/javascript"></script>

Come vedete sarà sufficiente includere le due librerie nell’ordine suddetto e chiamare la funzione jQuery.noConflict() assegnandola alla variabile JQ. Le altre modifiche da effettuare all’interno della pagina che utilizza le funzioni di jQuery sono nella sostituzione della chiamata “$” con la chiamata “JQ”.

Se il vostro server è basato su Apache vi basterà editare il file .htaccess solitamente presente nella root directory aggiungendo la seguente riga:

ErrorDocument 404 /404.html

Fate attenzione affinchè il tutto sia su una unica riga e ci sia un percorso della pagina che volete venga aperta partendo da / ma non usate un percorso assoluto (tipo http://www.sitoweb.it/404.html).

A questo punto create la pagina 404.html e inseriteci al suo interno tutte le indicazioni che ritenete opportune. In questo caso usate dei link assoluti in quanto la pagina potrebbe essere chiamata da qualunque percorso. Non fate dunque mancare:

1. L’indicazione dell’errore;
2. Un link verso la vostra Home Page;
3. Un indirizzo email al quale contattarvi;
4. Un link verso l’eventuale motore di ricerca interno.

Nell’head della pagina inserite anche il tag

<meta name="robots" content="noindex">

il quale dice ai motori di ricerca di non indicizzare tale pagina.

<script language="JavaScript" type="text/javascript">
<!--
function closeAndLoad (page) {
opener.location.href = page;
close();
}
// -->
</script>

dove page è l’indirizzo della pagina da caricare. All’interno del documento HTML, questo sarà il link per chiamare la funzione e caricare la pagina madeinsoftware.it:

<a href="javascript:closeAndLoad('http://www.madeinsoftware.it')">Apri Made in Software</a>

1. http://www.axialis.com/free/icons/
2. http://www.iconaholic.com/downloads.html
3. http://www.userinterfaceicons.com/preview.php
4. http://dryicons.com/free-icons/
5. http://webtoolkit4.me/2009/05/10/toys-a-free-iconset/
6. http://www.vistaicons.com/icon_collections.htm
7. http://yellowicon.com/downloads/
8. http://iconshock.deviantart.com/gallery/
9. http://interfacelift.com/icons-win/index.php?sort=date
10. http://www.iconsdesigns.com/?page_id=44

Un buon programmatore, però, deve sempre attenersi allo standard. Ecco allora una utile risorsa per validare i CSS:

http://jigsaw.w3.org/css-validator/

Questo il codice per creare facilmente un iframe HTML con la mappa:

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=it&amp;geocode=&amp;q=Via+Mulino+del+Gioco,+65013+Citt%C3%A0+Sant'Angelo+PE,+Italy&amp;sll=&amp;sspn=&amp;ie=UTF8&amp;ll=&amp;spn=&amp;z=14&amp;iwloc=addr&amp;output=embed"></iframe>

Di seguito il significato dei parametri che permettono di personalizzare la mappa:

• f: controlla il tipo di query in input. “d” per una query con due caselle di input per gestire i percorsi (from, to), “l” indica il formato locale nel quale i due campi input servono come cosa e dove e “q” per una singola casella di tipo indirizzo
• hl: lingua. “it” sta per italiano
• q: la query utilizzata per la ricerca. Qui potete mettere un indirizzo preciso ed in quel caso sarà anche piazzato un marker sulla mappa, il nome di una città, il CAP, un punto indicato come latitudine e longitudine in formato decimale o in gradi. Potete utilizzare  parole “to” e “from” per creare un percorso oppure aggiungere del testo informativo fra parentesi tonde.
• sll: latitudine e longitudine del punto da cercare.
  
• ie: codifica dei caratteri. UTF8 è uno standard ottimale.
• t: indica il tipo di mappa. “m” sta per mappa, “k” per mappa satellitare, “h” per mappa ibrida e “p” per mappa con terreno.
• ll: latitudine e longitudine del centro della mappa in formato decimale.
• spn: le dimensioni approssimative in termini di latitudine e longitudine della mappa
  
• sspn: come spn ma relativamente allo schermo
• z: indica il livello di zoom.
• iwloc:  indica dove deve essere mostrata la finestra delle informazioni. Da “A” a “J” per indicare su quale punto trovato sulla mappa occorre mettere la finestra.  “addr” permette di posizionarla sull’indirizzo cercato,  mentre nel caso di indicazioni stradali possono essere usati i valori “start”, “end”.

Se invece volete creare una semplice mappa statica, allora potete far riferimento alle indicazioni fornite da Google stessa in questa pagina.