diploD » webdesign

Flexslider applicato coi Rio: uno slider jquery davvero flessibile.

Davide — Mon, 01 Oct 2012 14:07:32 +0000

Di slider e slideshow ce ne sono una infinità. Col tempo ne ho provati e utilizzati diversi, ma come flexslider ce ne sono pochi. Credo di aver finalmente trovato ciò che cercavo: flessibile, altamente configurabile ed adattabile, semplice, e soprattutto funzionante anche con dispositivi touch (iphone, ipad, android, ecc..). Si tratta di una creazione di Woothemes, rilasciata gratuitamente e utilizzabile da chiunque. Per vederlo subito all’opera, nel modo in cui l’ho impiegato, basta aprire il sito dei Rio o di Bluebeet Studio. Questo per dire che ho aggiornato il portfolio, ogni tanto è bene farlo. ;)

Per capire come utilizzare lo slideshow di immagini si può dare un’occhiata alle demo sul sito ufficiale, ma credo che il meglio di questo slider sia nelle possibilità di utilizzo con pezzi di codice formattato (con testo e immagini), per poter creare fluide e accattivanti presentazioni di news o quant’altro.

Andiamo subito al sodo e vediamo come si può utilizzare all’interno di un tema wordpress per presentare articoli o elementi di altro tipo.

Ci sono tre cose fondamentali: il codice javascript, il codice html e il codice CSS. Partiamo con javascript; all’interno del tag dovremo mettere questo pezzo di codice:

Dove si mette? Appena soto al PlaceHolderMain, nella pagina NewForm.aspx della relativa lista, tramite Sharepoint Designer: una figura vale più di mille parole. Dopo aver aperto l’albero della lista su Sharepoint Designer, è sufficiente editare il codice della pagina.

L’approccio è perfetto e geniale, il javascript non fa altro che ricercare nel documento i commenti per poi oscurare tramite una proprietà CSS la visualizzazione. Ci sono però alcuni difetti su questo codice: piace a internet explorer e non agli altri browser.
Ecco allora come modificarlo per renderlo compatibile con i vari Firefox, Chrome e compagnia bella:

Se poi volessi piazzare da qualche parte un pulsantino per far riapparire questi campi, magari solo per determinati utenti, sarà sufficiente creare questa funzione:

function showFields() { var control = findacontrol("Stato"); control.parentNode.parentNode.style.display="block"; var control = findacontrol("Comments"); control.parentNode.parentNode.style.display="block"; }

Buona personalizzazione!

WordPress: creare uno sliseshow con gli articoli in rilievo stile magazine

Davide — Sat, 05 Sep 2009 23:19:02 +0000

Quante volte abbiamo visto siti di magazine dotati di spettacolari slideshow a centro pagina che presentano gli ultimi articoli con immagini a ripetizione? Basta guardare il sito di wired o dell’Economist.. Molti temi wordpress per magazine presentano soluzioni di questo tipo, spesso però pescano le immagini da presentare tra i custom fields di wordpress.

La soluzione che propongo in questo articolo pubblica invece la prima foto allegata al post e la fa girare a rotazione assieme al titolo e all’excerpt (il riassunto). Il risultato finale è visibile in questa demo.

Per fare il tutto ho scelto un javascript gratuito: Slideshow2! Grazie a questa splendida classe per Mootools è possibile creare in pochi istanti effetti davvero accattivanti.
Ci sono diversi plugin per wordpress in giro che utilizzano i più noti script per generare slideshow e gallerie, ma tutti quelli che ho visto servono per creare una gallery a partire da un singolo post. Il mio obbiettivo era diverso: creare uno slideshow con la prima immagine degli ultimi articoli pubblicati. Vediamo come fare..

Prima di tutto il codice.

Questa prima parte va aggiunta nell’elemento , nel file header.php del template wordpress. Non fa altro che caricare un file CSS, la libreria mootools e lo script slideshow. Sempre all’interno dell’elemento va inserito il codice sottostante. Si può posizionare questa porzione di codice anche appena prima del div in cui si desidera far apparire lo slideshow, tipicamente nel file index.php del template wordpress.

Questa seconda parte serve per far apparire lo slideshow nel div con ID=”show”. All’inizio vengono indicati il numero di post e la categoria relativa che si desidera far apparire, nella funzione query_posts(). Il codice è ben commentato e non fa altro che rilevare la prima immagine di ogni post per pubblicarla assieme al titolo e al riassunto del post.
La parte HTML necessaria all’interno del è questa:



/images/default.jpg" alt="welcome" />

Dove come default.jpg verrà caricata una immagine standard, utile nel caso non ci siano articoli da visualizzare oppure l’utente abbia disabilitato javascript.
Per aggiungere l’effetto di zoom in movimento è possibile utilizzare l’estensione kenburns dello script Slideshow. Caricando nell’ un altro javascrip:

e modificando le ultime righe dello script sopra in questo modo:

var myShow = new Slideshow.KenBurns('show', data, {captions: true, controller: true, delay: 5000, duration: 2000, height: 300, thumbnails: false, width: 670, zoom: 50, pan: [25, 75]});

Le proprietà di zoom e pan sono da regolare per ottenere effetti diversi.

Il risultato HTML è il seguente:

Per quanto riguarda il CSS, quello proposto assieme allo script è sicuramente un buon punto di partenza, da sistemare se si vogliono cambiare le dimensioni del div che presenta lo slideshow.

Buon design a tutti..

PS: Nel caso in cui qualcuno si stesse domandando da dove provenga il design della demo sopra.. beh: seguite questo blog, prossimamente arriverà un tema wordpress in stile magazine, completamente personalizzabile dal pannello di amministrazione e soprattutto italianissimo. ;)

Un nuovo tema per maestroalberto.it

Davide — Sun, 29 Mar 2009 23:14:55 +0000

Dopo qualche mese di apnea causa tesi, ecco un aggiornamento al portfolio: il nuovo tema per maestroalberto. Il buon Alberto ha deciso di rinnovare il vestito del suo blog, mi ha chiesto di dargli una mano e ho accettato volentieri. E’ nato così un tema pulito ed essenziale, con 6 sidebar gestite tramite widget (3 laterali e 3 nel footer).

Dal punto di vista tecnico, la cosa a mio avviso più interessante è il modulo di ricerca Google, riadattato alla grafica del tema. Per i curiosi, riporto il css utilizzato:

#header form#quick-search { position: absolute; top: 175px; right: 20px; padding: 0; margin: 0; border: 1px solid #fff; width: 320px; height: 33px; background: #e5e5e3 url(images/header-search.gif) no-repeat top left; z-index: 999999; overflow: hidden; } #header form#quick-search p { margin: 0; padding: 0; border: none; } #header form#quick-search input { border: none; background: transparent; color: #bababa; float: left; margin: 0; padding: 5px; } #header form#quick-search .tbox { margin: 6px 0 0 5px; width: 216px; display: inline; border: none; } #header #search form#quick-search .btn{ width: 25px; height: 25px; border: none; } #header form#quick-search label { float: right; font-size: 10px; line-height: 11px; border: none; padding: 2px 2px 0 2px; margin: 0; } #header form#quick-search input.radio { float: right; clear: right; height: 12px; margin: 2px 2px 0 0; padding: 0; border: none; }

Ecco come appare il modulo in questione:

L’unica criticità era far rientrare i label che veicolano la ricerca su google o sul web nel piccolo spazio a disposizione nel form, l’unico modo per far diregire a IE questa cosa è forzare le dimensioni del campo di input del radio button. Con Firefox o Safari nessun problema; con IE, nonostante i margini e il padding, il bottone continuava ad andare per i fatti suoi. Dando una regola di height a 12px tutto è tornato come voluto.

Altra cosa interessante del tema è l’utilizzo del 960 grid system: un framework css molto comodo per dimensionare e strutturare un template con dimensione fissa di 960 pixel. E’ un modo rapido e veloce per impostare gli spazi, il framework permette di utilizzare un sistema a 12 o 16 colonne, grazie a una serie di classi preconfezionate e pronte all’uso, sicuramente da approfondire.

Per quanto riguarda la validazione invece, il CSS è privo di errori, mentre il codice XHTML risulta inquinato dai vari plugin.. Mi chiedo: ha ancora senso correre dietro ai mille errori che si presentano quando questi non dipendono da te? La politica che ho adottato è quella di costruire codice valido nella parte che realizzo in prima persona e infischiarsene di ciò che scrivono gli altri, finchè questo non intacca le prestanzioni globali..

Ne approfitto per fare un in bocca al lupo ad Alberto e ringraziarlo per avermi dato fiducia.
Commenti e suggerimenti sono ben accetti.

Creare un tema personalizzato per sharepoint moss 2007 o wss 3

Davide — Tue, 30 Dec 2008 06:06:33 +0000

Sebbene sharepoint sia dotato di diversi temi coi quali lo si può vestire a dovere, spesso può essere utile creare qualcosa di più personale. La creazione di un nuovo template non è complicatissima se si parte in copia da uno pre-esistente: è il modo migliore per non perdersi nella miriade di classi css (la leggibilità e la correttezza semantica del codice è in perfetto stile Microsoft, l’applicativo fa un largo uso di tabelle e stratagemmi javascript “particolari”).
Supponiamo di voler partire dal tema “Simple”, messo a disposizione nella raccolta di base, i passi da seguire sono i seguenti:

Accedere al server sul quale è installato sharepoint e posizionarsi nella cartella:
C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\THEMES
Copiare la cartella “Simple” e rinominare la cartella copiata a piacere, in questo caso la chiameremo “Miotema”
Nella cartella “Miotema” rinominare il file “SIMPLE.INF” in “MIOTEMA.INF”, tutto in caratteri maiuscoli.
Aprire il file “MIOTEMA.INF” con un editor di testo e sostituire tutte le occorrenze di “Simple” con il termine “Miotema”. Il risultato sarà come il seguente:

[info]
title=Miotema
codepage=65001
version=3.00
format=3.00
readonly=true
refcount=0

[titles]
1031= Miotema
1036= Miotema
1040= Miotema
…
Aprire con un editor di testo il file che si trova nella posizione:
C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1033\SPThemes.xml
Aggiungere all’interno del tag le seguenti linee di codice:

Miotema
Miotema
Tema creato da me.
images/thlmiotema.gif
images/thmiotema.gif

NB: Ovviamente se vogliamo le preview bisognerà creare le immagini gif e inserirle nella cartella images del tema.
Per rendere visibile il tema nella lista di quelli disponibili sarà necessario fare un issreset (dal prompt di DOS: “iisreset /noforce”).

Ora il tema è caricato, per modificare colori e quant’altro bisognerà intervenire sul file css, che si trova alla posizione:
C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\THEMES\MIOTEMA\theme.css
Ogni volta che si fanno delle modifiche è bene fare un iisreset e dalla mia esperienza è bene evitare di fare modifiche su temi che sono attualmente in uso su qualche sito sharepoint, altrimenti queste non vengono correttamente caricate al riavvio del server.

Se invece c’è bisogno di eseguire modifiche strutturali alle pagine, per rimuovere o aggiungere blocchi, sarà necessario fare ricorso a Sharepoint Designer tramite il quale si possono costruire o elaborare le master pages, accedendo al sito in questione.
Buona customizzazione! ;)

e-Learning: la desolazione delle università telematiche

Davide — Thu, 04 Jan 2007 01:19:14 +0000

Il tema dell’e-Learning mi sta a cuore, ma duole constatare che il settore dove andrebbe applicato è desolante. Non lo dico per posizione presa, lo dico sulla base di un articolo pubblicato sul Corriere della Sera di Domenica 31 Dicembre 2006, firmato da Sergio Rizzo e Gian Antonio Stella.

Se i dati presentati in questo articolo sono veri, e la fonte citata è nientemeno che la banca dati del ministero, il quadro delle università telematiche italiane è a dir poco raccapricciante. Università spesso senza docenti di ruolo registrati e diverse facoltà avviate, approvate dall’ex ministro Moratti.

Tanto per darvi un’idea del quadro, cito dall’articolo in questione:

Telematica universitas mercatorum, costituita a novembre del 2005 per iniziativa dell’unioncamere (presidente è Andrea Mondello, che guida l’associazione): una facoltà (Economia) e due corsi di laurea. [..] E poi la Pegaso (due facoltà, Giurisprudenza e Scienze Umanistiche, zero docenti di ruolo in banca dati) che ha come azionisti Danilo, Raffaele e Angelo Jervolino, che già hanno interessi in vari istituti scolastici privati partenopei. E poi la Giustino Fortunato (solo Giurisprudenza, nessun docente di ruolo in banca dati) che fa capo alla fondazione Efiro di Benevento, presieduta da Angelo Pasquale Colarusso, già noto nel Sannio per una scuola privata che da molto tempo aiutava nelle rimonte scolastiche. E poi ancora Leonardo Da Vinci, zero docenti di ruolo (per la banca dati), tre facoltà (Scienze dei Beni Culturali, Scienze della Formazione e Scienze Manageriali) e un legame strettissimo con l’università Gabriele D’Annunzio di Chieti-Pescara (nota anche per un gran numero di speedy lauree) [...]

L’articolo prosegue su questa lineaa per altre tre università…

Voi chiederete: perchè questa corsa? Il miele che attira le api, quelle buone e quelle meno buone, è la possibilità di rastrellare una quantità mai vista di “aspiranti dottori”. Merito di quella riformetta che permette un po’ a tutti di “mettere a frutto il proprio lavoro”. Facendosi riconoscere, sulla base dell’esperienza accumulata come ragionieri o guardie forestali, giornalisti o vigili del fuoco, impiegati catastali o brigadieri dei carabinieri, una gran quantità di crediti formativi universitari (fino a 140, prima che Mussi imponesse un tetto massimo di 60 su 180) così da poter puntare a una laurea con pochi esami.

Che dire, un’altra occasione persa per provare a distribuire qualcosa di buono tramite internet. In questa situazione, mi convinco sempre più dell’e-learning in modalità blended, ovvero quella che alterna lezioni in presenza a momenti di scambio on-line. Diverse università italiane prevedono queste tipologie, soprattutto nei corsi a indirizzo informatico. Molto utili da questo punto di vista si possono rivelare i wiki e i blog, per la condivisione e la partecipazione attiva degli studenti ai programmi didattici.

Per chiudere in bellezza, vi comunico che diversi siti di queste teleuniversità sono di pessima qualita (spesso si aprono malamente con Firefox o non hanno codice conforme agli standard W3C) e vi riporto un altro dato ricavato dall’articolo del Corriere: l’università telematica Marconi pare abbia oltre 4000 iscritti, un esercito di laureandi! Aprendo il sito con Firefox questo è completamente illeggibile (lo potete vedere aprendo la foto a lato), e dulcis in fundo.. Sono ben in vista i bottoncini di conformità agli standard W3C (inutile dire che la validazione fallisce), compreso quello sull’accessibilità (dopo aver aperto il sito con IE, scopro che la pagina accessibile è in “fase di aggiornamento”). Olè.