inter.it/interclub

Da qualche ora è in linea la nuova sezione per fare push (lo so, fa figo) sul tesseramento. Ci ho lavorato qualche giorno, ed è venuta bene.

 

E’ a tutta pagina, caratteri grandi e adattiva – per quanto possa avere senso in un sito non responsivo.

Le feature usate:

conto alla rovescia col computo del fuso orario

Per il derby di domenica si è steso un accurato media plan che verte su twitter: Inter e Milan che a colpi di cinguettii si rilanciano souvenir del derby.

Se twitter ti dice che un post è stato visualizzato 30.000 volte devi crederci, anche senza sapere con quale livello di coscienza o attenzione questo si sia verificato nella TimeLine di ogni utente.

Nel suo piccolo anche il sito dell’inter è cambiato:  alcuni sfondi in rotazione nella home page e soprattutto un conto alla rovescia che mostra quanto manca al fischio iniziale.

Adesso che siamo più internazionali, come fare in modo che il conto alla rovescia si adeguasse al fuso orario del browser di chi sta visualizzando la pagina? Le 20:45 in italia saranno le 15:45 a miami, e le 2:45 di lunedì mattina a Jakarta… quase tutte le soluzioni si basano sul computo lato client. Ma come calcolare a che ora inizierà  il derby in giro per il mondo?

ecco come ho risolto:

– Il browser all’atto di caricare la pagina calcola lo spiazzamento in minuti rispetto all’ora di Greenwich (UTC): d.getTimezoneOffset();
– calcolato questo numero, positivo o negativo, viene fatto un post ajax su uno script server per adeguare lo spiazzamento della data del derby rispetto alla timezone del visitatore. Il default sono le 19:45, uno a Londra non avrà  spiazzamento e per lui il conto alla rovescia è limitato dalla ora corrente verso le 19:45 della domenica.

(Utilizzando ajax si aggirano i rischi di una risposta server ‘precotta’ (cached) rimbalzata da varnish senza fare davvero il computo)

– genero un javascript che il server spara al client con la data e ora attualizzata con questa query mysql SELECT DATE_FORMAT(DATE_ADD(‘2014-11-23 19:45:00’, INTERVAL (SELECT -1* $offset) MINUTE),  ‘%M %d, %Y %T’) 

 

 

capture_20112014_173319

 

the great world of interisti

Sabato notte ho festeggiato a dovere il CVI compleanno dell’inter con l’avvio della sezione ‘Interisti’:  una brillante community in cui inseriremo tante applicazioni divertenti. Sulla genesi, sullo sviluppo e sulla concretizzazione di questo progetto si potrebbe scrivere un romanzo. Fiction che illustrerebbe meglio di tanti trattati alcune dinamiche interne a FC Internazionale Milano

La complicazione era dovuta al connubio di diverse tecnologie:

  • chiamate ajax multiple per aggiornare il profilo di un iscritto a inter.it
  • applicazione multilingua scritta in PERL con pagine modulari template toolkit
  • mapping personalizzato con googlemaps (qui il demiurgo è corrado)
  • posizionamento della propria stella a seguito della scelta di un indirizzo sulla mappa globale

jquery multiple forms

una pagina web con molte form; una tabella con tanti dati da aggiornare e, al termine di ogni riga, un bottone per il submit. Ogni riga una form: tipicamente i risultati di una giornata di campionato.

ovviamente facendo tutto con ajax, l’interazione e’ almeno il doppio piu’ veloce.
per fare questo, pero’, e’ necessario IDentificare univocamente ogni input type presente nella tabella di form.

prendendo ispirazione da questa pagina si riesce a sistemare il problema.

  • ogni form ha un campo id univoco nascosto
  • ogni campo input type di ogni singola form ha a sua volta un campo id con prefisso ‘_id’
  • alla fine di ogni riga un bottone su cui c’e’ il trigger-click di jquery, contenente questo ID univoco
  • la funzione di jquery riceve l’id (this), e recupera con i selettori tutti i componenti della form scattata, concatenando iddelcampo.iddellaform
  • di questi elementi (ad esempio datapartita della 4^ form avra’ id=datapartita_4) recuperiamo i valori, li validiamo e prepariamo la chiamata ajax, concatendandoli

$(document).ready(function()
{

$(“.submitmod”).click(function(){
var element = $(this);
var Id = ‘_’+element.attr(“id”);
var datapartita = $(“#datapartita”+Id).val();
var orapartita = $(“#orapartita”+Id).val();
….
dataString = ‘datapartita=’+ datapartita + ‘&orapartita=’+ orapartita;

(chiamata ajax)

….
})

});

una domanda sull’esagerazione

chissa’ che i siti del futuro non siano davvero cosi’: pochissime pagine e una lunghissima teoria
di script che girano in background curando tutto: grafica, animazione, interazione

questo e’ l’HEAD di un sito molto trafficato e ben fatto

/html/js/jquery/jquery.js?bn=4402
/html/js/jquery/cookie.js?bn=4402

/html/js/jquery/dimensions.js?bn=4402
/html/js/jquery/hover_intent.js?bn=4402
/html/js/jquery/interface.js?bn=4402
/html/js/jquery/interface.patch.js?bn=4402
/html/js/jquery/j2browse.js?bn=4402
/html/js/jquery/jeditable.js?bn=4402
/html/js/jquery/json.js?bn=4402
/html/js/jquery/media.js?bn=4402
/html/js/jquery/tabs.js?bn=4402

/html/js/misc/class.js?bn=4402
/html/js/misc/swfobject.js?bn=4402
/html/js/liferay/liferay.js?bn=4402
/html/js/liferay/browser.js?bn=4402
/html/js/liferay/util.js?bn=4402
/html/js/liferay/language.js?bn=4402
/html/js/liferay/layout.js?bn=4402
/html/js/liferay/ajax.js?bn=4402
/html/js/liferay/animate.js?bn=4402

/html/js/liferay/coordinates.js?bn=4402
/html/js/liferay/ldrag.js?bn=4402
/html/js/liferay/leditable.js?bn=4402
/html/js/liferay/lresize.js?bn=4402
/html/js/liferay/popup.js?bn=4402
/html/js/liferay/portal.js?bn=4402
/html/js/liferay/portlet.js?bn=4402
/html/js/liferay/publisher.js?bn=4402
/html/js/liferay/auto_fields.js?bn=4402

/html/js/liferay/color_picker.js?bn=4402
/html/js/liferay/columns.js?bn=4402
/html/js/liferay/dock.js?bn=4402
/html/js/liferay/dynamic_select.js?bn=4402
/html/js/liferay/freeform.js?bn=4402
/html/js/liferay/layout_configuration.js?bn=4402
/html/js/liferay/layout_exporter.js?bn=4402
/html/js/liferay/menu.js?bn=4402
/html/js/liferay/messaging.js?bn=4402

/html/js/liferay/notice.js?bn=4402
/html/js/liferay/navigation.js?bn=4402
/html/js/liferay/session.js?bn=4402
/html/js/liferay/tags_selector.js?bn=4402
/html/js/liferay/upload.js?bn=4402
/html/js/liferay/portlet_css_unpacked.js?bn=4402
/html/js/liferay/portlet_css_packed.js?bn=4402

data come dio comanda

le nuove versioni del gia’ citato plug-in sono molto piu’ affidabili in fatto di validazione ajax
e incredibilmente semplici da gestire.

ma la vera ciliegina sulla torta e’ stata la provvidenziale estensione da parte di un brasiliano

dateBR: function(value, element) {
return !v.methods.required(value, element) || /^(?:(?:(?:0?[1-9]|1d|2[0-8])/(?:0?[1-9]|1[0-2]))/(?:(?:1[6-9]|[2-9]d)d{2}))$|^(?:(?:(?:31/0?[13578]|1[02])|(?:(?:29|30)/(?:0?[1,3-9]|1[0-2])))/(?:(?:1[6-9]|[2-9]d)d{2}))$|^(?:29/0?2/(?:(?:(?:1[6-9]|[2-9]d)(?:0[48]|[2468][048]|[13579][26]))))$/.test(value);
},

una espressione regolare un po’ complicata, ma che valida date gg/mm/aaaa con grande eleganza in contesti del genere

$("#myform").validate({
        rules: {
                    datadinascita: {
                             required: true,
                             dateBR: true
                }
        }
})

jquery validation

per la gestione accrediti voglio dei dati pulitissimi in ingresso: questo plugin e’ favoloso e Jorn e’ disponibile x troubleshooting e consigli

la curva di apprendimento e’ inizialmente ardua, ma poi il tempo perso si ripaga. la sede dell’Inter e’ deserta come corso vittorio emanuele

jquery aggiornamenti di massa

il problema e’ semplice
esiste un recordset di contributi da moderare, con una serie di azioni: attiva rimuovi etc etc.

ho voluto sviluppare il tutto con jquery: i tooltip per il dettaglio dei contenuti e ajax per
velocizzare le attività  senza abbandonare la pagina.

il metodo e’ pulito, ispirato dalla moderazione dei commenti di wordpress
le azioni relative ad ogni record sono contenute in un div con ID univoco. ogni azione e’ associata
a un javascript che passa l’ID del record da gestire

function cambia_stato(qualediv, qualeid, qualeazione)
{ $(‘#’+qualediv).load({URL}”); }

{URL} da chiamare e’ lo stesso script che visualizza i record, con un parametro proprio per la chiamata ajax. Il magic e’ il parametro composito

$(‘#’+qualediv)

“sostuisci il risultato del div identificato dal parametro in ingresso dalla chiamata ajax…’
ovviamente a seconda dell’azione, gli restituiamo un ‘modifica effettuata’ e le operazioni complementari che puo’ continuare a fare sullo stesso record

doppio xml

nel rifare la home page di interchannel ho sfruttato lo il player per slideshow acquistato 18 mesi fa (34eur spesi bene) e anche il Jcarousel plug-in per jquery. Al netto del flash, 70Kb in piu… ma esteticamente ne vale la pena.
Anche per la galleria di clip dentro il carousel, ho abbracciato la notazione xml di dreamweaver cs3 per riprodurre i files flv. Un po’ incasinato individuare tutti i componenti swf e i file js aggiunti automaticamente, specialmente se i riferimenti devono essere tutti assoluti: la pagina-zoom che si apre e’ nella partizione cgi e non nella document-root di apache.