diploD » portfolio http://www.diplod.it by Davide Del Monte Fri, 13 Feb 2015 14:26:10 +0000 it-IT hourly 1 https://wordpress.org/?v=3.9.40 Flexslider applicato coi Rio: uno slider jquery davvero flessibile. http://www.diplod.it/2012/10/01/flexslider-applicato-coi-rio-uno-slider-jquery-davvero-flessibile/ http://www.diplod.it/2012/10/01/flexslider-applicato-coi-rio-uno-slider-jquery-davvero-flessibile/#comments Mon, 01 Oct 2012 14:07:32 +0000 http://www.diplod.it/?p=1359 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 <head> dovremo mettere questo pezzo di codice:

<script type="text/javascript">
$(window).load(function() {
$('#flexslider').flexslider({
animation: "slide",
controlsContainer: "#flex-container",
prevText: "Prec",
nextText: "Succ"    });
});

Mentre nel codice php che presenta gli articoli, ad esempio nel file home.php, dovremo utilizzare questo:


<?php query_posts('showposts=6&cat=3'); //prendo gli ultimi 6 articoli delle top news ?>
<?php if (have_posts()) : ?>
<div>
<div id="flex-container">
<div id="flexslider">
<ul>
<?php while (have_posts()) : the_post(); ?>
<li>
<h1><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h1>
<div>
<?php if ( has_post_thumbnail()) : ?>
<?php the_post_thumbnail('medium', array('class' => 'img-news')); ?>
<?php endif; ?>
<?php the_excerpt(); ?>
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">Leggi tutto...</a>
<div><div data-href="<?php the_permalink() ?>" data-send="false" data-layout="button_count" data-width="150" data-show-faces="false" data-font="lucida grande"></div>
</div>
</div>
</li>
<?php endwhile; ?>
</ul>
</div>
</div>
</div>
<?php endif; ?>
<?php // Reset Query
wp_reset_query(); ?>

Il mestiere di questo pezzo di codice non è altro che recuperare gli ultimi 6 articoli di una determinata categoria (con ID=3), tramite la function query_posts(); per poi presentare ogni articolo con la sua immagine in evidenza e il suo riassunto. Al di là delle classi css attribuite agli elementi, che sono comunque poco rilevanti per il nostro esempio, ciò che mi preme far notare è che tutti questi elementi stanno racchiusi in un elemento di lista <li>, che sarà uno dei 6 slide che ruoteranno.

Veniamo ora al bello: il foglio di stile. Di seguito il mio CSS riadattato partendo da quello di default.

/* jQuery FlexSlider v2.0 */
/* Browser Resets */
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus  {outline: none;}
.slides,
.flex-control-nav,
.flex-direction-nav {margin: 0; padding: 0; list-style: none;}
/* FlexSlider Necessary Styles
*********************************/
.flexslider {margin: 0; padding: 0;}
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
/*.flexslider .slides img {width: 100%; display: block;} */
.flex-pauseplay span {text-transform: capitalize;}
/* Clearfix for the .slides element */
.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
html[xmlns] .slides {display: block;}
* html .slides {height: 1%;}
/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
* include js that eliminates this class on page load */
.no-js .slides > li:first-child {display: block;}
/* FlexSlider Default Theme
*********************************/
.flex-container { position: relative;}
.flexslider {margin: 0 0 5px 0; position: relative;}
.flex-viewport {max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease;}
.loading .flex-viewport {max-height: 300px;}
.flexslider .slides {zoom: 1;}
.carousel li {margin-right: 5px}
/* Direction Nav */
.flex-direction-nav { display: block; position: absolute; top: 50%; background: transparent; width: 100%;
opacity: 0.2;
transition:opacity 1s;
-moz-transition:opacity 1s; /* Firefox 4 */
-webkit-transition:opacity 1s; /* Safari and Chrome */
-o-transition:opacity 1s; /* Opera */ }
.flex-container .flex-direction-nav:hover { opacity: 1; }
.flex-direction-nav a {width: 30px; height: 30px; margin: -30px 0 0; display: block; background: url(../images/bg_direction_nav.png) no-repeat 0 0; position: absolute; cursor: pointer; text-indent: -9999px; }
.flex-direction-nav .next {background-position: 100% 0; right: 5px;}
.flex-direction-nav .prev {left: 5px;}
/* Control Nav */
.flex-control-nav {width: 100%; position: relative; bottom: 0px; text-align: center;}
.flex-control-nav li {margin: 0 6px; display: inline-block; zoom: 1; *display: inline;}
.flex-control-nav li a {width: 11px; height: 11px; display: block; background: #666; background: rgba(0,0,0,0.5); cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; box-shadow: inset 0 0 3px rgba(0,0,0,0.3);}
.flex-control-nav li a:hover { background: #333; background: rgba(0,0,0,0.7); }
.flex-control-nav li a.active { background: #000; background: rgba(0,0,0,0.9); cursor: default; }
.flex-control-paging li a {width: 11px; height: 11px; display: block; background: #666; background: rgba(0,0,0,0.5); cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; box-shadow: inset 0 0 3px rgba(0,0,0,0.3);}
.flex-control-paging li a:hover { background: #333; background: rgba(0,0,0,0.7); }
.flex-control-paging li a.active { background: #000; background: rgba(0,0,0,0.9); cursor: default; }
.flex-control-thumbs {margin: 5px 0 0; position: static; overflow: hidden;}
.flex-control-thumbs li {width: 25%; float: left; margin: 0;}
.flex-control-thumbs img {width: 100%; display: block; opacity: .7; cursor: pointer;}
.flex-control-thumbs img:hover {opacity: 1;}
.flex-control-thumbs .active {opacity: 1; cursor: default;}

Con un pizzico di CSS3 è possibile fare in modo che le frecce di navigazione appaiano evidenti solo al passaggio del mouse, mentre rimangano in trasparenza mentre scorrono le notizie. Il risultato finale si può vedere qui.

Buono slideshow a tutti. ;)

]]> http://www.diplod.it/2012/10/01/flexslider-applicato-coi-rio-uno-slider-jquery-davvero-flessibile/feed/ 0 Mamma Imperfetta, per le mamme in cerca di blog http://www.diplod.it/2009/10/21/mamma-imperfetta-per-le-mamme-in-cerca-di-blog/ http://www.diplod.it/2009/10/21/mamma-imperfetta-per-le-mamme-in-cerca-di-blog/#comments Wed, 21 Oct 2009 22:54:46 +0000 http://www.diplod.it/?p=849 mammaimperfetta

Mammaimperfetta.it si aggiunge al portfolio, già da un paio di mesi è online il nuovo sito di Silvia. Una migrazione da iobloggo e un nuovo design wordpress, al quale ha collaborato per l’azzeccatissima illustrazione in testata Daria Manenti.

Silvia è una mamma blogger che parla di figli e vita. Dopo appena un mese dalla sua pubblicazione, mammaimperfetta.it è stato segnalato su Repubblica come uno tra più accreditati blog delle mamme italiane. Per me è stato un onore contribuire alla realizzazione.

La particolarità di questo lavoro? Il menù. Ho utilizzato un divertentissimo script basato su jQuery: superfish menu. Per chi vuole studiarselo un po’, sul sito del plugin si trovano tutti gli esempi del caso.

Per i più curiosi, una pillola di css image replacement per rendere il link all’home page sulla testata del blog.

Questo il codice php:

<h1 id="logo-text"><a href="<?php bloginfo('url'); ?>" title="Mamma Imperfetta Home">MammaImperfetta</a></h1>

E questo il codice CSS:

#header h1#logo-text a {
position: absolute;
margin: 0; padding: 0;
font: bold 10px 'Trebuchet MS', Tahoma, Arial, Sans-serif;
letter-spacing: -1px;
text-decoration: none;
text-align: left;
color: #f2f0f1;
background: transparent url(images/logo.gif) no-repeat top left;
width: 357px;
height: 79px;
/* posizione del titolo principale */
top: 15px; left: 185px;
}

Più compatibile di così.. WordPress è sempre più bello! E i lavori statici di styleshout continuano ad offrire ottimi spunti. :)

Ovviamente consigli e suggerimenti sono sempre ben accetti.

]]> http://www.diplod.it/2009/10/21/mamma-imperfetta-per-le-mamme-in-cerca-di-blog/feed/ 1 Un nuovo tema per maestroalberto.it http://www.diplod.it/2009/03/30/un-nuovo-tema-per-maestroalbertoit/ http://www.diplod.it/2009/03/30/un-nuovo-tema-per-maestroalbertoit/#comments Sun, 29 Mar 2009 23:14:55 +0000 http://www.diplod.it/?p=756

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.

]]> http://www.diplod.it/2009/03/30/un-nuovo-tema-per-maestroalbertoit/feed/ 12 Un nuovo template per un blog network http://www.diplod.it/2008/05/10/un-nuovo-template-per-un-blog-network/ http://www.diplod.it/2008/05/10/un-nuovo-template-per-un-blog-network/#comments Sat, 10 May 2008 18:19:44 +0000 http://www.diplod.it/2008/05/10/un-nuovo-template-per-un-blog-network/ Ecco la prima delle tante novità che in questi giorni animeranno la pagina del portfolio. Sono da poco on-line i templates che ho creato per un network di blog: blogfinanza.com, gossipcelebrita.com, melaiphone.com. Si tratta di un giovane network basato su wordpress, all’interno del tema sono stati integrati diversi plugin per gli articoli più letti, per i più commentati e per i tag.
Per gli effetti del tema ho usato jquery, che nelle ultime versioni di wordpress è integrato nativamente.

Ringrazio pubblicamente MrBunne per avermi dato fiducia su questo progetto e aver sopportato i miei tempi, per lui un grande in bocca al lupo.. i blog sono avviati da un po’ e hanno già numeri interessanti!
Se avete voglia di dare una sbirciatina e lasciare consigli o suggerimenti, ben venga. ;)

network

]]> http://www.diplod.it/2008/05/10/un-nuovo-template-per-un-blog-network/feed/ 3 E così Marina ha un nuovo blog http://www.diplod.it/2007/11/26/e-cosi-marina-ha-un-nuovo-blog/ http://www.diplod.it/2007/11/26/e-cosi-marina-ha-un-nuovo-blog/#comments Sun, 25 Nov 2007 23:31:29 +0000 http://www.diplod.it/2007/11/26/e-cosi-marina-ha-un-nuovo-blog/ Portfolio - Marina Remi Weblog

Ultimamente sono mancato un po’ su queste pagine, solo perchè sono stato preso da questo lavoro. Marina Remi è un’attrice genovese, che mi ha contattato per creare ex novo un blog su wordpress: ecco fatto. Non è stato semplice ma alla fine ho imparato molto.. Devo ringraziare lei e tutti coloro che hanno collaborato nella realizzazione: in bocca al lupo!

In queste poche righe voglio riassumere i plugin utilizzati e le tecniche implementate per realizzare il sito di Marina.

Menu con icone che zoomano al passaggio del mouse

Noterete subito il menù stile mac che raccoglie le pagine del blog. E’ stato realizzato utilizzando il framework jQuery e la sua utilissima estensione grafica Interface. Lo script deve essere configurato e si può personalizzare via CSS, lo potete vedere in azione nelle demo di Interface: Fisheye Menu.

Menu in stile Mac

Il form dei commenti

A volte si può essere eleganti anche con un semplice javascript.. Lo so, i puristi diranno che son meglio i tag <label>, ma ogni tanto anche l’occhio vuole la sua parte.

Form commenti

Le foto da Flickr

FAlbum è un plugin per wordpress che si collega ad un account Flickr e pubblica le foto sul proprio blog.
Se vogliamo inserire la visualizzazione delle immagini in una pagina bisogna creare un template di pagina. Per farlo è sufficiente inserire questo codice all’inizio della nuova pagina falbum.php

<?php
/*
Template Name: FAlbum
*/
?>

Mentre nel corpo della pagina dovremo inserire questo codice dove si vogliono far apparire le foto


<!--<script type="text/javascript" src="<?php bloginfo('url'); ?>/wp-content/plugins/falbum/res/falbum.js"></script>
<script type="text/javascript" src="<?php bloginfo('url'); ?>/wp-content/plugins/falbum/res/overlib.js"></script
<script type="text/javascript" src="<?php bloginfo('url'); ?>/wp-content/plugins/falbum/res/prototype.js"></script>-->
<div id="overDiv" style="position:absolute; visibility:hidden; z-index:1000;"></div>
<?php $falbum->show_photos(); ?>

Per utilizzare gli effetti di visualizzazione dovremo togliere i commenti all’inclusione del codice javascript.

Per mettere qualche immagine nella sidebar invece si può usare questa funzione


<?php require_once(ABSPATH.'/wp-content/plugins/falbum/falbum.php');
global $falbum; ?>
<?php echo $falbum->show_recent($num = 3, $style = 0, $size= 's'); ?

Tutta la documentazione circa il plugin la si trova qui, ben fatta e dettagliata.

All in One SEO Pack

E’ un utilissimo plugin per l’ottimizzazione delle proprie pagine in ottica SEO (Search Engine Optimization). Da un comodo pannello di amministrazione è possibile inserire una descrizione globale del sito e le parole chiave. Per ogni post o pagina è possibile inserire descrizioni specifiche e parole chiave diverse. L’utilità non si vede ad occhio nudo, ma trattare bene i motori di ricerca aiuta sempre a generare visite.

]]> http://www.diplod.it/2007/11/26/e-cosi-marina-ha-un-nuovo-blog/feed/ 11