HTML5+CSS3+JQuery Vertical Menu DropDown per Mobile

Hai mai provato a creare una sezione mobile per il tuo sito ? Ci sono molti accorgimenti da prendere e non è semplice adattare la visualizzazione del contenuto per tutti i display in circolazione. Lavorando un po sul Css ed utilizzando Jquery si possono ottenere discreti risultati. Quel che vedremo nell'articolo è un menu Verticale semplicissimo, adattato per tutti i sistemi mobile, utile soprattutto per chi possiede solo una conoscenza base dell'HTML.

Il Menù Verticale:

Il risultato è soddisfacente in termini di adattamento: ci basterà inserire delle semplici liste UL , e lo script jQuery riconoscerà da solo se ci sono altri sottomenù o layers all'interno, aggiungendo automaticamente il pulsante di espansione accanto.

Utilizzando il Google feed reader realizzato con jQuery, inoltre, sono riuscito ad ottenere una lista degli ultimi post pubblicati nel mio blog. Guardando un po meglio il sorgente (commentato) si intuisce che basterà modificare pochi parametri per cambiare il link del feed da visualizzare ed aumentare il numero di articoli visibili. Per velocizzare l'esecuzione dello script ho apportato alcune modifiche al codice che ci consentono di mostrare il contenuto degli articoli solo quando effettivamente richiesti dall'utente. 

Su questa pagina si può vedere il codice pulito ed i file interessati, oppure si può scaricare il file zippato mobile.zip contenente tutti i file, basta estrarli nella stessa directory ed aprire l'index.html. Ovviamente provate ad aprirlo con il cellulare. Non spaventatevi se vedete il testo delle News gigante, il web kit utilizzato riscala il testo a seconda del display che lo visualizza.

Troppo semplice ?

Versione con Google search APIs

La versione che segue è completa di un mini motore di ricerca, che sfrutta le API di Google per fare una ricerca completa tra gli articoli del nostro sito e pensate un po anche sul web, il tutto sempre in rigoroso stile MOBILE, leggero e veloce. Questa versione manca di qualcosa....cos'è ? La pagina di lettura dell'articolo!!!

In questo momento, i link risultanti dalla ricerca, puntano alle pagine reali del sito, ma nulla ci vieta di generare una pagina dinamica sfruttando lo stile della pagina html per estrarre del contenuto dinamico.
Lo script di ricerca implementato fa parte di una serie di script di studio forniti da www.tutorialize.com , che come sempre ringrazio per la quantintà di informazioni tecniche che riescono a fornire a programmatori come me alla ricerca di cose belle e soprattutto utili. Non ho potuto testare questa pagina su tutti i cellulari, le vostre segnalazioni ,i consigli e i vaffa sono sempre ben accetti.
Ciauz

Espandi

Continua...

CMS Wordpress e Joomla? Siti economici a costo della sicurezza ?

Sono molto perplesso, sono sempre di più i personaggi che si proclamano esperti webmaster e SEO solo perchè sono in grado di effettuare l'installazione di CMS come wordpress, Joomla , Drupal etc etc etc. Effettivamente queste piattaforme presentano grandi qualità sotto il profilo della versatilità e dell'indicizzazione, ma spesso , proprio per la libera diffusione del codice sorgente, vengono sfruttati dai malintenzionati, come veri e propri proxy , per inviare email di spamm o phishing , causando problemi anche a quei siti che sono realizzati privatamente, solo perchè alloggiati nello stesso host condiviso.

Non si tratta solo di wordpress o joomla ma di tutti i cms in generale; tempo fà affrontai l'argomento e-commerce su cms, la piattaforma in questione era OS-commerce, infatti si può trovare l'articolo nell'archivio storico.

Questo esperimento iniziò per gioco, per mostrare ad alcuni amici che si poteva realizzare un e-commerce in poche ore. L'installazione venne effettuata su un server gratuito altervista.org seguendo la guida passo passo e rimuovendo i file di installazione, che potrebbero generare accessi non autorizzati. A distanza di 3 mesi la comunicazione da parte degli amministratori di altervista.org, che il sito OS-commerce stava generando molto spamm, quindi un traffico esagerato di emails, inviate da un ip Brasiliano attraverso il motore di

OS-commerce e che per tale ragione il sito sarebbe stato cancellato se non avessi provveduto all'update. La versione installata era l'ultima ed ,al momento della notifica,  non vi era alcuna versione nuova; si intuisce, dunque, che senza le dovute accortezze ogni CMS può essere considerato come una bomba ad orologeria, che può mettere nei guai sia il webmaster sia il committente. In che modo ? Il committente vedendosi soffiare informazioni e dati sui clienti, non garantendo la privacy, sarebbe persguibile a norma di legge da tutti i suoi clienti;

Ecco come un sito web a buon mercato diventa una soluzione onerosa. La manutenzione ed i controlli richiederebbero l'assunzione di personale qualificato per intervenire tempestivamente in caso di uso illecito.

Questo articolo non vuole essere un attacco ai CMS in se per se o alle persone altamente qualificate che lavorano dietro le quinte, ma è solo per mettere in guardia gli utilizzatori che lo usano male e non ne  garantiscono la sicurezza, che se tralasciata , potrebbe causare danni anche a chi non è direttamente collagato al CMS. Vuole, altresì, essere un invito alla riflessione per i provider che dovrebbero quanto meno prendere precauzioni per evitare o risolvere in tempi brevi i famosi Denial of Service, spostando i CMS in comparti dedicati del server.

Personalmente ho installato decine di CMS wordpress e Joomla, creato plugin ed utility,  ma per avere la coscienza pulita e non nuocere agli altri ho dovuto implementare del codice personalizzato per estirpare ogni possibile bug. Ogni buon webmaster dovrebbe essere sempre informato sui nuovi bug che spuntano, ci sono decine di siti web che riportano liste dettagliate di questi bug e spesso riportano anche una soluzione. Di seguito alcuni link utili:

Aggiornamento critico Joomla 1.5.x - 1.6.x - 1.7.x
Dettagli :http://www.ilsoftware.it/articoli.asp?id=7996

Pagina Rapporto Bugs di wordpress, per tenersi sempre aggiornati sui bug trovati dagli utenti.
Dettagli: http://codex.wordpress.org/Reporting_Bugs

Analisi e Relazione dei CMS open source 2011
http://www.waterandstone.com/book/2011-open-source-cms-market-share-report

Aggiornamento su bugs di varia natura, compresi quelli sui CMS Open Source.
http://www.livehacking.com/

Espandi

Continua...

Design e MicroBlogging - Fit to Page

Tra le tante particolarità che un sito web deve avere, oltre ad accessibilità, buona visibilità ed una grafica accattivante, è l'istantaneità. Che cos'è ? Col passare del tempo la rete è cresciuta in maniera esponenziale, milioni di notizie ci vengono proposte ogni giorno sugli argomenti più disparati, come facciamo a leggere tutte quelle che ci interessano veramente ? Ecco perchè le notizie devono essere compresse e facilmente individuabili,con la barra di ricerca ben visibile: se un sito web presenta una home troppo lunga e caotica probabilmente perderà il lettore.

La navigazione dell'utente può essere distinta in due fasi fondamentali: quella di ricerca e quella di studio. 

Durante la fase di ricerca, l'utente ha una soglia di attenzione molto bassa, in cui si sofferma su una pagina per NON più di 10/30 secondi, legge freneticamente tutti gli argomenti presenti e non trovando quello a lui gradito andrà via. Per questa ragione è meglio inserire in home page  i titoli dei post ben marcati ed una descrizione sommaria di 255 caratteri. Più ce ne sono meglio è certo non bisogna esagerare.

Alla fase di ricerca segue quella di studio in cui l'utente, avendo trovato quel che gli interessa, si sofferma per delle ore a studiare e comprendere il contenuto dell'oggetto della sua ricerca.

Quel che vorrei mostrarvi oggi è una bellissima interfaccia grafica che ho utilizzato per il blog di una personaggio famoso, che consente al fruitore di organizzare i contenuti nella pagina come meglio crede.

Questa interfaccia grafica, realizzata utilizzando le librerie jQuery,  prende spunto dalla tabella periodica degli elementi e con il nome di "Isotope" sembra , neanche a farlo apposta, voler spezzettare il nostro sito in subparticelle più piccole, ben differenziate,  rendendolo più veloce da leggere e graficamente appetibile, dandoci accesso istantaneo alla notizia tramite il riquadro espandibile. Potete vederlo in azione sul sito ufficiale isotope.metafizzy.co.

Nella fattispecie, per un sito web quel che vi potrebbe interessare è la distinzione dei contenuti come articoli, immagini, video, musica, downloads etc etc che trovate in uno degli esmpi Flash .

Sicuramente un modo carino per interagire con gli utenti e metterli nella condizione di individuare subito i contenuti richiesti.

Espandi

Continua...