Archive for the ‘HTML’ Category

26
lug

Sempre l’interno del progetto CRM ho avuto la necessità di utilizzare un editor più complesso del semplice campo form nel quale scrivere una descrizione del ticket. Dopo varie prove ho scelto CKEditor, un prodotto davvero molto potente che, proprio per questo, necessita spesso di essere configurato un minimo. Dopo averlo scaricato ed integrato nel sistema (operazione davvero molto semplice) è possibile modificarlo in base alle proprie necessità agendo sul file “config.js” disponibile nella cartella principale.

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.

,

02
giu

Questa settimana mi è stato richiesto di progettare un modulo CRM, in particolare legato al solo aspetto di Customer Support, che attraverso un sistema di ticketing permettesse di tener traccia di tutte le attività correlate alle comunicazioni con i clienti. Allo stesso tempo il modulo deve essere in grado di registrare anche richieste provenienti da contatti di qualunque genere che in futuro potrebbero trasformarsi in clienti.

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…

,

24
ott

Quando si esegue la validazione di una pagina web può capitare che il validator (come quello disponibile sul sito W3C, http://validator.w3.org/) non sia in grado di restituire alcun risultato a causa di qualche errore grave nella pagina ad esso sottoposta.

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.

,

30
giu

I se sono relativi alla tipologia di interazione che volete avere con la finestra modale. Chiunque abbia mai avuto a che fare con i popup sa benissimo che essi possono portare qualche problema, tutto sommato risolvibile. Una cosa che risulta impossibile da fare, se non con qualche particolare accorgimento, è metterli in “primo piano” in modo da impedire all’utente di cliccare sulla pagina sottostante senza aver prima chiuso il browser. Lo stesso comportamento, insomma, di una finestra modale di Windows.

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>

, , ,

12
giu

Chiunque abbia mai provato ad utilizzare nella stessa pagina le due librerie javascript jQuery e Prototype sa bene che esse non riescono a coesistere se non con qualche piccola modifica. Il problema sta nel fatto che entrambe utilizzano la funzione di default “$”. Ecco allora come fare:

<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”.

, , ,

28
mag

L’errore “HTTP 404 – File non trovato” è uno di quelli che i gestori dei siti web temono maggiormente. Quando un utente arriva sul sito e sbaglia a digitare una url riceve proprio tale errore. Esiste comunque un modo per non perdere tale utente magari reindirizzandolo su una pagina specifica.

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).

More »

, , ,

21
mag

Quando si lavora con i popup si può avere la necessità di chiuderlo e contemporaneamente ricaricare la pagina che lo ha aperto a seguito, ad esempio, del click su un link. In Javascript questa operazione è davvero semplice. Create una funzione come quella che segue all’interno del tag <head> della pagina HTML:

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

More »

, ,

12
mag

Chi realizza siti web sa molto bene che tanto l’HTML quanto il CSS non richiedono una codifica stringente. Questo che potrebbe sembrare un vantaggio è, al contrario, un grosso tallone d’Achille tanto che chi ha realizzato i browser ha praticamente deciso – almeno sinora – per conto proprio come deve essere effettuato il rendering.

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

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

, , ,

08
mag

Google Maps è un’applicazione web davvero molto potente che può essere utilizzata per gli usi più disparati. Se avete bisogno di fare delle cose molto particolari, allora è bene che scarichiate le API utilizzando direttamente il vostro account Google. Non sempre, però, è necessario scendere così nel dettaglio: se avete a disposizione solo i dati relativi ad un certo indirizzo potreste utilizzarli per creare la vostra mappa interattiva.

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:
More »

,