tag:blogger.com,1999:blog-79658773018458590132024-03-13T01:17:05.980+01:00Quelli del cucuzzolo... fatto di piccole cose, in mezzo al verde, lontano dalle persone "grandi"MAeSIhttp://www.blogger.com/profile/03218272086256305663noreply@blogger.comBlogger84125tag:blogger.com,1999:blog-7965877301845859013.post-53767046973369816102020-07-30T15:18:00.000+02:002020-07-30T15:18:03.473+02:00La sezione "Appunti" su quellidelcucuzzolo.altervista.org<div>Dopo quasi tre anni dall'ultimo post, riapriamo l'editor testi di Blogger per informare, chi eventualmente passerà da queste parti, che nel nostro spazio su Altervista (sezione Appunti) si possono trovare una ventina di nuovi esempi/test pubblicati in questo ultimo periodo. <br /></div><div><br /></div><div class="separator" style="clear: both; text-align: center;"><a href="http://quellidelcucuzzolo.altervista.org/" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img alt="sezione appunti quellidelcucuzzolo.altervista.org" border="0" data-original-height="273" data-original-width="708" height="193" src="https://1.bp.blogspot.com/-aAL8mGfPJZk/XyLAxJvQ4CI/AAAAAAAAA_8/ykEw3bCl5tIELjbSe1zgS40ptkv_6Q_3ACNcBGAsYHQ/w625-h241/sezione_appunti.jpg" width="500" /></a></div><div><br /></div><div><br /></div><div><br /></div>MAeSIhttp://www.blogger.com/profile/03218272086256305663noreply@blogger.com0tag:blogger.com,1999:blog-7965877301845859013.post-67352103924824076892017-12-05T21:20:00.000+01:002017-12-06T13:12:59.189+01:00"La vita è uguale a una scatola di cioccolatini..."<div style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;">
<img alt="forrest gump sulla panchina" border="0" src="https://1.bp.blogspot.com/-XfN72fMrSPg/Wib0iERA7pI/AAAAAAAAA7Q/V3AmjAs08mw3CgCLOMEotRaSkzUjQxoXACKgBGAs/s1600/fg_panchina.jpg" title="" /></div>
La mamma di <a href="https://it.wikipedia.org/wiki/Forrest_Gump" target="_blank">Forrest Gump</a> aveva ragione ma lo sappiamo tutti che è così, anche senza vedere il bellissimo film a cui abbiamo "rubato" la citazione.<br />
<br />
Uscendo dalla metafora cioccolatosa, con questo post vogliamo comunicarvi che ci sarà una sorta di pausa nella pubblicazione degli articoli o per lo meno non avranno la stessa frequenza dei precedenti.<br />
<br />
<br />
<br />
Ad ogni modo, non sono cioccolatini "amari" come nel film, sono semplicemente... altri cioccolatini :)<br />
<br />
<br />
<br />MAeSIhttp://www.blogger.com/profile/03218272086256305663noreply@blogger.com7tag:blogger.com,1999:blog-7965877301845859013.post-69415853274074773012017-05-26T22:34:00.002+02:002017-11-13T23:22:23.943+01:00Area riservata di WebSite X5 13: inserire in header un menu per l'utente loggatoNell'<a href="https://quellidelcucuzzolo.blogspot.it/2017/05/avatar-utente-loggato-website-x5.html" target="_blank">articolo precedente</a> abbiamo visto come inserire un avatar per l'utente registrato nell'area riservata di WebSite X5 13.<br />
<br />
In questo articolo vedremo come inserire nell'header del sito (intestazione) un pulsante per il login all'area riservata che, nel momento in cui un utente è loggato, si trasforma in un piccolo menu che consente di accedere alla pagina profilo ed effettuare il logout.<br />
<br />
Questa è la nostra demo:<br />
<br />
<div class="MS_esempio" style="padding-top: 25px;">
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://quellidelcucuzzolo.altervista.org/demo/menu-utente-loggato-wsx5/" target="_blank" title="Clicca per visualizzare la demo"><img alt="demo menu utente area riservata" src="https://4.bp.blogspot.com/-ZHP_6Oufj2k/WR9UKmuZleI/AAAAAAAAA6o/uo4ZKEG588U31V0PyAkEaHZRzz9f6FUQwCLcB/s1600/demo_menu_utente_loggato_wsx5.png" style="border: 0px none; margin-left: auto; margin-right: auto;" title="Clicca per visualizzare la demo" /></a></td></tr>
<tr><td class="tr-caption" style="color: #4c8efb; text-align: center;">DEMO </td></tr>
</tbody></table>
</div>
<br />
Rispetto all'articolo precedente si deve partire da un punto di vista diverso: il codice deve essere inserito in tutto il sito poiché l'output avviene nell'intestazione e si deve prevedere il riconoscimento della sessione utente. Gran parte del codice è già stata presentata e spiegata nell'<a href="https://quellidelcucuzzolo.blogspot.it/2017/05/avatar-utente-loggato-website-x5.html" target="_blank">articolo precedente</a> che <b>vi consigliamo di leggere e provare</b>, ma cercheremo comunque di dare indicazioni sequenziali agevoli da seguire anche per chi non si fosse cimentato con il precedente esempio.<br />
<br />
Poiché utilizzeremo codice PHP <b>è necessario impostare l'estensione .php a tutte le pagine del sito</b>.<br />
<br />
<h3 style="background-color: #ebebeb; padding: 4px; text-align: center;">
Passo 1 - Impostazioni </h3>
<br />
In <i>Impostazioni </i><i>» Avanzate</i> » <i>Statistiche, SEO e Codice</i> » <i>Esperto </i>scegliamo dal menu a tendina <i>Prima dell'apertura del tag HTML</i>; incolliamo questo codice che definisce tutte le variabili necessarie per il funzionamento dello script e richiama il file <i>x5engine.php</i>:<br />
<pre class="brush:php; toolbar:false; autolinks: false;"><?php
/* Code by Giorgio C. & MAeSI - quellidelcucuzzolo.blogspot.it
Please do not remove credit */
$qblog = $_SERVER['PHP_SELF'];
if (strpos($qblog, '/blog/') !== false || strpos($qblog, '/cart/') !== false)
$qpath = '../';
else
$qpath = '';
require_once($qpath . "res/x5engine.php");
$qfolder = $imSettings['general']['public_folder'];
$qurl = pathCombine(array(
$imSettings['general']['url'],
$qfolder
));
$pa = Configuration::getPrivateArea();
$dati = $pa->whoIsLogged();
$username = $dati['username'];
$realname = $dati['realname'];
$datiUser = $pa->getUserByUsername($username); //SOLO EDIZIONE PROFESSIONAL
$email = $datiUser['email']; //SOLO EDIZIONE PROFESSIONAL
$userpage = $pa->getLandingPage(); //Pagina di ingresso
$avatar = glob($qpath . $qfolder . "/avatar-" . $username . ".*");
$tsfoto = 0;
if (empty($avatar))
$foto = $qurl . "/default.png";
else {
foreach ($avatar as $value) {
if (filemtime($value) > $tsfoto) {
$tsfoto = filemtime($value);
$fotonew = $value;
}
}
$foto = str_replace("../", "", $fotonew);
$foto = str_replace($qfolder, $qurl, $foto);
}
$n = time();
?></pre>
Le uniche variabili a cui porre attenzione sono quelle commentate: chi utilizza lo script con l'edizione Evolution <u><b>deve rimuovere</b></u> le due righe di codice con il commento <span style="color: #008200;"><b>//SOLO EDIZIONE PROFESSIONAL</b></span>.<br />
<br />
Sempre in questa sezione, scegliamo ora dal menu a tendina<i> Dopo l'apertura del tag BODY</i> ed inseriamo questo codice che gestisce la visualizzazione del menu utente solo se l'utente è loggato, in caso contrario si visualizza il pulsante per il login: <br />
<br />
<pre class="brush:php; toolbar:false; html-script:true;"><section class="ms-menu-Utente">
<?php
if ($username)
{
echo '<div class="msLog wrapper-dropdown-5"><img src="' . $foto . '?' . $n . '" alt="avatar" />' . $username,
'<ul class="dropdown">',
'<li><a href="' . $qpath . 'profilo.php"><i class="fa fa-user"></i>Profilo</a></li>',
'<li><a href="' . $qpath . $userpage .'"><i class="fa fa-home"></i>Pagina di ingresso</a></li>', //Pagina di ingresso
'<li><a href="' . $qpath . 'res/imlogout.php"><i class="fa fa-remove"></i>Logout</a></li>',
'</ul></div>';
}
else
{
echo '<div class="msLog msIn">',
'<ul>',
'<li><a href="' . $qpath . 'imlogin.php"><i class="fa fa-key"></i>Login</a></li>',
'</ul></div>';
}
?>
</section>
</pre>
<br />
Quando l'utente è loggato, il menu contiene solo due voci: un link ad una pagina protetta e nascosta chiamata "Profilo" in cui verranno richiamati tutti i dati relativi all'utente, di cui parleremo in seguito, e un link per il logout.<br />
<b>Attenzione:</b> se date un nome diverso a questa pagina, dovete anche cambiare il
nome nel codice (profilo.php). <br />
<br />
Nel pulsante e nelle voci del menu abbiamo inserito i tag per visualizzare le icone <a href="http://fontawesome.io/" target="_blank">font Awesome</a>. Per tutte le informazioni su come integrare questo font nel programma vi invitiamo a leggere <a href="http://quellidelcucuzzolo.blogspot.it/2016/12/icone-font-awesome-website-x5.html" target="_blank">questo articolo</a>.<br />
<br />
Per gli stili grafici del menu abbiamo utilizzato questo <a href="https://tympanus.net/codrops/2012/10/04/custom-drop-down-list-styling/" target="_blank">tutorial</a> (Demo 5) pubblicato su tympanus.net, sito che presenta sempre esempi molto accattivanti.<br />
Al CSS proposto nel tutorial abbiamo fatto qualche piccola modifica. Potete scaricare il file da <a href="http://quellidelcucuzzolo.altervista.org/demo/menu-utente-loggato-wsx5/css/menu-utente.css" target="_blank">QUI</a> ed allegarlo al progetto, sempre nella scheda <i>Esperto</i>, <i>File allegati al codice</i>, indicando come <i>Percorso relativo sul Server</i> il nome di una cartella a vostro piacere, ma avendo cura di <b><u>spuntare</u></b> la casella <i>Collega il file</i>.<br />
<br />
Sempre in questa sezione, <i>Prima della chiusura del tag HEAD</i>, incolliamo il codice jQuery che si occupa di mostrare/nascondere le voci del menu e regolare la sua posizione rispetto al menu mobile:
<br />
<pre class="brush:js; toolbar:false; html-script:true;"><script>
$(document).ready(function() {
$('.msLog').on('click', function(event) {
$(this).css('overflow', 'visible').toggleClass('active');
event.stopPropagation();
});
$('#imMnMn.main-menu .hamburger-button').click(function() {
$('.msLog').css('z-index', 10);
})
$('.hamburger-menu-close-button, .hamburger-site-background').click(function() {
$('.msLog').css('z-index', 10001);
})
});
</script>
</pre>
Non è obbligatorio, ma vi consigliamo di inserire, sempre in questa sezione, anche questo script che si occupa di nascondere il codice in anteprima: in caso contrario si visualizzerebbero parti di codice che comprometterebbero la visione del template in anteprima.
<br />
<pre class="brush:js; toolbar:false; html-script:true;"><script>
$(document).ready(function() {
// funzionalità offline
if (location.host == "127.0.0.1:8080")
$(".ms-menu-Utente").html('<div class="msLog msIn"><ul><li><a href="#nogo"><i class="fa fa-key"></i>Login</a></li></ul></div>');
});
</script>
</pre>
<br />
<h3 style="background-color: #ebebeb; padding: 4px; text-align: center;">
La pagina profilo</h3>
<br />
Inseriamo nella Mappa del sito una pagina protetta e nascosta che chiameremo "Profilo" ed inseriamo un <i>Oggetto Codice HTML</i> con questo codice che permette di visualizzare i dati dell'utente connesso e il form per cambiare l'avatar:
<br />
<pre class="brush:php; toolbar:false; html-script:true;"> <!-- Code by Giorgio C. & MAeSI - quellidelcucuzzolo.blogspot.it
Please do not remove credit -->
<section id="ms-datiUtente">
<!-- dati utente -->
<?php
echo '<p id="datiUser">',
'<img src="' . $foto . '?' . $n . '" alt="avatar" />',
'<span>Username:</span> ' . $username . '<br />',
'<span>Nome completo:</span> ' . $dati['realname'] . '<br />',
'<span>E-mail:</span> ' . $datiUser['email'] . '<br />', // SOLO EDIZIONE PROFESSIONAL
'</p>';
?>
</section>
<div style="clear:both"></div>
<!-- form per cambio avatar -->
<form id="cambioAvatar" enctype="multipart/form-data" method="POST" action="uploadavatar.php">
<div><label for="avatar">Cambia l'immagine del profilo:</label></div>
<input type="file" name="image" id="avatar" />
<input type="submit" value="invia" />
</form>
<!-- messaggio di conferma/errore upload -->
<div id="messaggio">
<?php
if (!empty($_SESSION['message'])) {
echo $_SESSION['message'];
unset($_SESSION['message']);
}
?>
</div>
</pre>
Chi utilizza l'edizione Evolution deve rimuovere la riga di codice che contiene il commento <b><span style="color: #008200;">//SOLO EDIZIONE PROFESSIONAL</span></b>.<br />
Non ci resta che allegare al progetto il file <a href="http://quellidelcucuzzolo.altervista.org/demo/avatar-utente-loggato-wsx5/uploadavatar.zip" target="_blank">uploadavatar.php</a> e scrivere le regole CSS che definiscono l'aspetto della pagina. Codici e procedure sono stati già spiegati nell'articolo precedente:<br />
<ul>
<li><a href="https://quellidelcucuzzolo.blogspot.it/2017/05/avatar-utente-loggato-website-x5.html#pagina-profilo" target="_blank">cartella su server, immagine di default e regole CSS</a></li>
<li><a href="https://quellidelcucuzzolo.blogspot.it/2017/05/avatar-utente-loggato-website-x5.html#uploadavatar" target="_blank">lo script per l'upload</a></li>
</ul>
<br />
Per completezza, indichiamo anche il <b>nuovo codice PHP/JS</b> da utilizzare per visualizzare l'avatar dell'utente loggato nei commenti del guestbook e del blog.<br />
<br />
<h3 style="background-color: #ebebeb; padding: 4px; text-align: center;">
I commenti del guestbook e del blog</h3>
<br />
In <i>Proprietà </i>della pagina che contiene l'<i>Oggetto Guestbook</i>, e/o in <i>Proprietà </i>della pagina speciale Blog, <i>Esperto</i>, <i>Prima della chiusura del tag HEAD</i> inseriamo questo codice:
<br />
<pre class="brush:js; toolbar:false; html-script:true"><script>
$(document).ready(function() {
$("input[id$='topic-form-name']").val("<?php echo $realname ?>");
$('input[id$="topic-form-email"]').val('<?php echo $email ?>'); //SOLO EDIZIONE PROFESSIONAL
$('input[id$="topic-form-url"]').val('<?php echo $foto ?>').parent().hide();
$(".topic-comments-user").each(function() {
var $item = $(this).find("a");
if ($item.length != 0) {
var customCampo = $item.attr("href");
var customNome = $item.contents();
$item.replaceWith(customNome);
$(this).prepend("<img class='campoCustomGb' src='" + customCampo + "' alt='avatar' />");
}
})
});
</script>
</pre>
Anche in questo caso, chi lavora con l'edizione Evolution deve cancellare la riga di codice che contiene il commento <b><span style="color: #008200;">//SOLO EDIZIONE PROFESSIONAL</span></b>.<br />
Per tutto il resto facciamo riferimento a quanto già scritto nell'<a href="https://quellidelcucuzzolo.blogspot.it/2017/05/avatar-utente-loggato-website-x5.html#commenti-gb" target="_blank">articolo precedente</a>.<br />
<br />
<br />
<b>Aggiornamento del 13/11/2017</b><br /><br />Aggiunto un link alla "Pagina di ingresso" nel menu utente.<br />Le due righe di codice aggiunte sono commentate.<br />La demo di questo articolo non è aggiornata.<br />
<br />
<br />MAeSIhttp://www.blogger.com/profile/03218272086256305663noreply@blogger.com55tag:blogger.com,1999:blog-7965877301845859013.post-84731657667339538252017-05-06T00:01:00.003+02:002017-12-11T12:32:35.612+01:00Area riservata di WebSite X5 13: avatar utenteQuesto articolo nasce da una richiesta emersa nella <a href="https://helpcenter.websitex5.com/it/post/169385" target="_blank">community di WebSite X5</a> ed elaborata dall'utente <b>Giorgio C.</b> che ci ha coinvolto: mostrare un'immagine associata all'utente registrato, un avatar quindi, che un utente possa cambiare a piacere.<br />
Partendo dal codice di Giorgio, con cui l'utente può visualizzare il proprio avatar nell'header del sito una volta loggato, noi abbiamo fatto una variazione sul tema, creando una pagina profilo e facendo in modo che l'immagine associata ad ogni utente sia visibile a tutti nel momento in cui l'utente inserisce un commento nel guestbook e/o in un articolo del blog.<br />
<br />
Qui la nostra demo:<br />
<br />
<div class="MS_esempio" style="padding-top: 25px;">
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://quellidelcucuzzolo.altervista.org/demo/avatar-utente-loggato-wsx5/" target="_blank" title="Clicca per visualizzare la demo"><img alt="demo avatar utente area riservata" src="https://4.bp.blogspot.com/-Q0aCeBFBlOk/WQZRHIuaKgI/AAAAAAAAA6A/YvwRIes0xy4nc0LGg7eawybWFMzzJ32igCLcB/s1600/demo_dati_utente.png" style="border: 0px none; margin-left: auto; margin-right: auto;" title="Clicca per visualizzare la demo" /></a></td></tr>
<tr><td class="tr-caption" style="color: #4c8efb; text-align: center;">DEMO </td></tr>
</tbody></table>
</div>
<br />
Non entriamo nel merito di come creare un'<a href="http://help.websitex5.com/it/v13/pro/es_area.htm" target="_blank">area riservata</a>, poiché la guida del programma è già esaustiva. Sottolineiamo però che, per il corretto funzionamento del codice, occorre che nel progetto venga impostata in <i>Gestione Dati</i>, una <i>Cartella su Server con accesso in scrittura </i>verificando che abbia i permessi necessari. Accertarsi inoltre di aver scritto correttamente l'<i>Indirizzo URL del Sito</i> al passo 1 (<span style="color: red;"><b>Attenzione</b></span>: <u><b>NON</b></u> scrivere il nome della pagina index nel percorso).<br />
<br />
Vediamo ora come procedere: <br />
<br />
<h3 style="background-color: #ebebeb; padding: 4px; text-align: center;">
La pagina profilo </h3>
<br />
La pagina profilo è una pagina protetta in cui vengono richiamati i dati dell'utente loggato: l'output è dinamico cioè dipende da chi la visualizza. In essa è presente anche il form con cui l'utente può cambiare il proprio avatar. Può essere impostata come Pagina d'ingresso per tutti gli utenti, o anche raggiungibile con un link.<br />
Inseriamo in essa un <i>Oggetto Codice HTML</i> con il seguente codice: <br />
<br />
<pre class="brush:php; toolbar:false; auto-links:false; html-script:true"><!-- Code by Giorgio C. & MAeSI - quellidelcucuzzolo.blogspot.it
Please do not remove credit -->
<div id="ms-datiUtente">
<!-- dati utente -->
<?php
$qfolder = $imSettings['general']['public_folder'];
$n = time();
$pa = Configuration::getPrivateArea();
$dati = $pa->whoIsLogged();
$username = $dati['username'];
$datiUser = $pa->getUserByUsername($username); // SOLO EDIZIONE PROFESSIONAL
$avatar = glob($qfolder . "/avatar-" . $username . ".*");
$tsfoto = 0;
if (empty($avatar))
$foto = $qfolder . "/default.png";
else {
foreach ($avatar as $value) {
if (filemtime($value) > $tsfoto) {
$tsfoto = filemtime($value);
$foto = $value;
}
}
}
echo '<div id="datiUser">',
'<img src="' . $foto . '?' . $n . '" alt="avatar" />',
'<span>Username:</span> ' . $username . '<br />',
'<span>Nome completo:</span> ' . $dati['realname'] . '<br />',
'<span>E-mail:</span> ' . $datiUser['email'] . '<br />', // SOLO EDIZIONE PROFESSIONAL
'</div>';
?>
</div>
<div style="clear:both"></div>
<!-- form per cambio avatar -->
<form id="cambioAvatar" enctype="multipart/form-data" method="POST" action="uploadavatar.php">
<div><label for="avatar">Cambia l'immagine del profilo:</label></div>
<input type="file" name="image" id="avatar" />
<input type="submit" value="invia" />
</form>
<!-- messaggio di conferma/errore upload -->
<div id="messaggio">
<?php
if (!empty($_SESSION['message'])) {
echo $_SESSION['message'];
unset($_SESSION['message']);
}
?>
</div></pre>
<br />
Chi utilizza la Evolution <u><b>deve rimuovere</b></u> le due righe di codice con il commento <b><span style="color: #008200;">//SOLO EDIZIONE PROFESSIONAL</span></b>: si tratta del dato e-mail che è presente unicamente se viene utilizzata la registrazione automatica, prevista solo nell'edizione Professional. Si sottolinea inoltre che questo codice può essere utilizzato solo in pagine protette, dove il richiamo del file <span style="font-family: "courier new" , "courier" , monospace;">x5engine.php</span>, necessario per il corretto funzionamento del codice, è già incluso.<br />
<br />
<div id="pagina-profilo">
</div>
Il codice richiede la presenza, nella <i>Cartella su Server con accesso in scrittura </i>indicata in <i>Gestione Dati</i>, di una immagine di default che verrà utilizzata finché l'utente non la cambierà. Noi abbiamo usato questa immagine: <a href="http://quellidelcucuzzolo.altervista.org/demo/avatar-utente-loggato-wsx5/public/default.png" target="_blank"><span style="font-family: "courier new" , "courier" , monospace;">default.png</span></a>. Nel caso si utilizzi un'immagine con diverso nome e/o estensione occorrerà apportare le opportune modifiche al codice.<br />
<br />
Ovviamente il risultato sarà visibile solo online. Se vogliamo tenere pulita la pagina dell'anteprima, evitando di visualizzare parti di codice, è possibile inserire questo script in <i>Proprietà Pagina, Esperto, Codice personalizzato, Prima della chiusura del tag HEAD</i>:<br />
<br />
<pre class="brush:js; html-script:true; toolbar:false"><script>
$(document).ready(function() {
// funzionalità offline
if (location.host == "127.0.0.1:8080")
$("#ms-datiUtente").html("I dati saranno visibili solo quando il sito verrà esportato su Internet");
});
</script>
</pre>
<br />
<div id="css-profilo">
</div>
Nella scheda <i>Esperto </i>dell'<i>Oggetto Codice HTML</i> possiamo scrivere le regole CSS per definire l'aspetto grafico che preferiamo. Noi abbiamo utilizzato questo codice:<br />
<br />
<pre class="brush:css; toolbar:false; auto-links:false">#datiUser,
#cambioAvatar {
line-height: 26px;
font-size: 16px;
padding: 10px;
}
#datiUser span {
width: 125px;
font-weight: bold;
display: inline-block;
}
#datiUser img {
max-width: 256px;
float: left;
padding: 6px 10px 6px 0;
}
#cambioAvatar input {
padding-bottom: 10px;
}
#messaggio {
color: red;
}
#messaggio span {
color: green;
}
</pre>
<br />
<h3 id="uploadavatar" style="background-color: #ebebeb; padding: 4px; text-align: center;">
Lo script per l'upload</h3>
<br />
L'upload del nuovo avatar è gestito dal file <span style="font-family: "courier new" , "courier" , monospace;">uploadavatar.php</span>, che si occupa di validare l'estensione del file caricato, le sue dimensioni in byte, e di rinominare il file in modo che il suo nome contenga l'username dell'utente: nel momento in cui l'utente cambierà il suo avatar, la vecchia immagine verrà cancellata dal server e sostituita da quella nuova. <br />
<pre class="brush:php; toolbar:false; auto-link:false"><?php
/* =================================================================
PHP Code by Giorgio C. & MAeSI - quellidelcucuzzolo.blogspot.it
Please do not remove credit
================================================================= */
if (!isset($_SERVER['HTTP_REFERER'])){
exit;
}
//apertura e lettura dati di sessione
require_once("res/x5engine.php");
$qfolder = $imSettings['general']['public_folder'];
$pa = Configuration::getPrivateArea();
$dati = $pa->whoIsLogged();
$username = $dati['username'];
//informazioni sull'immagine caricata
$max_size = 102400; //dimensioni massime in byte dell'immagine da caricare
$tmp = $_FILES['image']['tmp_name'];
if(!function_exists('mime_content_type'))
$type = $_FILES['image']['type'];
else
$type = mime_content_type($tmp);
$size = $_FILES['image']['size'];
//controllo delle estensioni accettate
function check_ext($tipo){
switch ($tipo) {
case "image/png":
return true;
break;
case "image/jpg":
return true;
break;
case "image/jpeg":
return true;
break;
case "image/gif":
return true;
break;
default:
return false;
break;
}
}
//estensione dell'immagine
function get_ext($tipo) {
switch ($tipo) {
case "image/png":
return ".png";
break;
case "image/jpg":
return ".jpg";
break;
case "image/jpeg":
return ".jpg";
break;
case "image/gif":
return ".gif";
break;
default:
return false;
break;
}
}
//gestione degli errori
function get_error($tmp, $type, $size, $max_size){
if (!is_uploaded_file($tmp)) {
$_SESSION['message'] = 'File caricato in modo non corretto';
}
else if (!check_ext($type)) {
$_SESSION['message'] = 'Estensione del file non ammessa';
}
else if($size > $max_size) {
$_SESSION['message'] = 'Dimensione del file troppo grande';
}
}
//caricamento nuova immagine
if (is_uploaded_file($tmp) && check_ext($type) && $size <= $max_size) {
$ext = get_ext($type);
$newfoto = $qfolder . "/avatar-" . $username . $ext;
if (move_uploaded_file($tmp, $newfoto)) {
$_SESSION['message'] = '<span>Immagine caricata con succcesso</span>';
} else {
$_SESSION['message'] = 'Non è stato possibile caricare l\'immagine';
}
} else {
get_error($tmp, $type, $size, $max_size);
}
//ritorno alla pagina contenente il form per l'upload
header('Location: ' . $_SERVER['HTTP_REFERER']);
?>
</pre>
Il codice è completamente commentato per rendere più agevole la sua comprensione. Sono personalizzabili le dimensioni massime e le estensioni accettate ed anche i messaggi di errore.<br />
Per utilizzare questo codice occorre incollarlo in un file creato con Notepad++ o il Blocco Note, e salvarlo con nome <span style="font-family: "courier new" , "courier" , monospace;">uploadavatar </span>e con estensione <span style="font-family: "courier new" , "courier" , monospace;">.php</span>. I più pigri possono scaricare il file <a href="http://quellidelcucuzzolo.altervista.org/demo/avatar-utente-loggato-wsx5/uploadavatar.zip" target="_blank">QUI</a>. <br />
Il file <span style="font-family: "courier new" , "courier" , monospace;">uploadavatar.php</span> deve risiedere nella root del sito. Si può
allegare al progetto attraverso la scheda <i>Esperto </i>dello stesso <i>Oggetto
Codice HTML</i> inserito nella pagina profilo, avendo cura di lasciare vuoto il campo <i>Percorso relativo sul Server,</i> oppure trasferirlo sul server con un programma FTP. <br />
<br />
<h3 id="commenti-gb" style="background-color: #ebebeb; padding: 4px; text-align: center;">
I commenti del guestbook e del blog</h3>
<br />
Avere un avatar che solo l'utente può vedere è, secondo noi, uno spreco di risorse. Abbiamo provato allora ad associare l'avatar ad un commento che l'utente loggato inserisce nel guestbook e/o nel blog del sito.<br />
<br />
Per associare stabilmente l'avatar al commento sono necessarie due condizioni:<br />
1. identificare l'utente loggato grazie all'username<br />
2. memorizzare il percorso dell'immagine nei dati del commento.<br />
<br />
Poiché il programma non permette l'inserimento di campi aggiuntivi nel form per l'invio dei commenti, abbiamo pensato di sacrificare il campo <i>Sito Internet</i>, utilizzandolo per memorizzare il percorso assoluto del file immagine. Ovviamente nasconderemo al visitatore questo campo con JavaScript, ma esso risulterà riempito in modo automatico in funzione di chi in quel momento visualizza la pagina: se il visitatore non è un utente loggato, il campo verrà riempito con il percorso corrispondente all'immagine di default.<br />
<br />
Questo è il risultato ottenuto:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-XmOnBfYZpiM/WQyX82W313I/AAAAAAAAA6g/lRhDrp3bE_U8-74Wblnx75-IGUUjXFMaQCPcB/s1600/commenti-avatar.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://3.bp.blogspot.com/-XmOnBfYZpiM/WQyX82W313I/AAAAAAAAA6g/lRhDrp3bE_U8-74Wblnx75-IGUUjXFMaQCPcB/s1600/commenti-avatar.png" /></a></div>
Nelle <i>Proprietà </i>della pagina che contiene l'<i>Oggetto Guestbook</i> e/o della pagina speciale <i>Blog, </i>scheda <i>Esperto</i>, <i>Codice Personalizzato</i>, <i>Prima della chiusura del tag HEAD</i>, inseriamo questo codice PHP/JS:<br />
<br />
<pre class="brush:php; toolbar:false; auto-links:false; html-script:true;"><!-- Code by Giorgio C. & MAeSI - quellidelcucuzzolo.blogspot.it
Please do not remove credit -->
<?php
$qfolder = $imSettings['general']['public_folder'];
$qurl = pathCombine(array($imSettings['general']['url'], $qfolder));
$qblog = $_SERVER['PHP_SELF'];
if (strpos($qblog, '/blog/') !== false)
$qpath = '../';
else
$qpath = '';
$pa = Configuration::getPrivateArea();
$dati = $pa->whoIsLogged();
$username = $dati['username'];
$realname = $dati['realname'];
$datiUser = $pa->getUserByUsername($username); //SOLO EDIZIONE PROFESSIONAL
$email = $datiUser['email']; //SOLO EDIZIONE PROFESSIONAL
$avatar = glob($qpath.$qfolder."/avatar-" . $username . ".*");
$tsfoto = 0;
if (empty($avatar))
$foto = $qurl . "/default.png";
else {
foreach ($avatar as $value) {
if (filemtime($value) > $tsfoto) {
$tsfoto = filemtime($value);
$fotonew = $value;
}
}
$foto = str_replace("../", "", $fotonew);
$foto = str_replace($qfolder, $qurl, $foto);
}
?>
<script>
$(document).ready(function() {
$("input[id$='topic-form-name']").val("<?php echo $realname ?>");
$('input[id$="topic-form-email"]').val('<?php echo $email ?>'); //SOLO EDIZIONE PROFESSIONAL
$('input[id$="topic-form-url"]').val('<?php echo $foto ?>').parent().hide();
$(".topic-comments-user").each(function() {
var $item = $(this).find("a");
if ($item.length != 0) {
var customCampo = $item.attr("href");
var customNome = $item.contents();
$item.replaceWith(customNome);
$(this).prepend("<img class='campoCustomGb' src='" + customCampo + "' alt='avatar' />");
}
})
});
</script>
</pre>
<br />
Il codice si occupa di identificare l'eventuale utente loggato, riempire automaticamente i campi del form con Nome completo e E-mail (solo per l'edizione Professional), inserire nel campo nascosto il percorso dell'immagine utilizzata dall'utente come avatar e, infine, visualizzare l'avatar nel relativo commento.<br />
<br />
<br />
Anche in questo caso chi utilizza l'edizione Evolution <u><b>deve rimuovere</b></u> le <b>tre </b>righe di codice con il commento <b><span style="color: #008200;">//SOLO EDIZIONE PROFESSIONAL.</span></b> <br />
<br />
Di seguito al codice precedente, possiamo inserire le <b>regole CSS</b> che gestiscono la formattazione dell'avatar. Noi abbiamo utilizzato regole di stile minimali, ma qui ci si può sbizzarrire:<br />
<pre class="brush:css; toolbar:false; auto-links:false; html-script:true;"><style>
.topic-comment:after {
content: '';
display: block;
clear: both;
}
.topic-comments-user img {
float: left;
margin-right: 12px;
width: 64px;
}
</style>
</pre>
La prima regola scritta è fondamentale poiché interrompe il flusso degli elementi, evitando sovrapposizioni nel caso in cui l'immagine sia più alta del relativo commento.<br />
Se nel sito sono presenti sia il guestbook che il blog è preferibile inserire il codice CSS una volta sola nel progetto, in <i>Impostazioni Avanzate, Statistiche, SEO e Codice, Esperto, Prima della chiusura del tag HEAD</i>.<br />
<br />
Si fa presente che il percorso dell'avatar viene memorizzato, per ogni commento, nel
database o in un file di testo quindi, se un utente cambia l'immagine
del profilo scegliendo una nuova immagine con uguale estensione, tutti i
commenti (vecchi e nuovi) visualizzeranno la nuova immagine poiché la
nuova immagine sovrascrive sul server quella vecchia; se però un utente
dovesse caricare un'immagine con estensione diversa da quella
precedentemente utilizzata, solo i nuovi commenti inseriti avranno
memorizzato l'estensione della nuova immagine, quindi i vecchi commenti
visualizzeranno l'avatar vecchio, i nuovi commenti quello nuovo.<br />
<br />
<br />
<i>Un grande ringraziamento a Giorgio per tutto il lavoro che ha svolto e ha condiviso e all'autore di <a href="https://www.targetweb.it/semplice-uploader-di-immagini-in-php/" target="_blank">questo articolo</a> ispiratore.</i><br />
<br />
<br />
<b>Aggiornamento del 10/05/2017
</b><br />
<br />
Aggiornato il codice per mantenere sul server avatar dello stesso utente con diversa estensione.<br />
<br />MAeSIhttp://www.blogger.com/profile/03218272086256305663noreply@blogger.com24tag:blogger.com,1999:blog-7965877301845859013.post-65392547149120222232017-04-08T23:51:00.003+02:002017-04-08T23:56:02.419+02:00Unite Gallery, una manciata di database e WebSite X5 q.b.Questa volta, dalla cucina è uscito un mix delle nostre esperienze precedenti: invio e lettura dei dati
al database, generazione dinamica di una
galleria immagini a cui abbiamo abbinato un plugin
veramente versatile, ricco di effetti tutti rigorosamente responsive: <a href="http://unitegallery.net/" target="_blank">Unite Gallery</a>.<br />
<br />
Rispetto <a href="http://quellidelcucuzzolo.blogspot.it/2017/02/galleria-dinamica-website-x5.html">all'articolo precedente</a>, in cui abbiamo visto come leggere dinamicamente le immagini contenute in una cartella, senza occuparci di come queste vengono caricate sul server, in questo articolo vedremo come rendere il tutto più semplice, anche per un utente poco esperto, prevedendo il caricamento delle immagini attraverso l'<i>Oggetto Modulo Invio E-mail</i> di WebSite X5 e la gestione delle stesse attraverso l'Oggetto opzionale <i>DataBase Viewer</i>.<br />
<br />
Ecco la nostra demo:<br />
<br />
<div class="MS_esempio" style="padding-top: 25px;">
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://quellidelcucuzzolo.altervista.org/demo/unite-gallery-database-wsx5/" target="_blank" title="Clicca per visualizzare la demo"><img alt="demo unite gallery su db" src="https://2.bp.blogspot.com/-Dr_NR7faR7U/WN-ixc8C1GI/AAAAAAAAA4Y/VUrpYdAn4bgWG7UcurGfqx349-Sn9BgnACLcB/s1600/demo_unite_gallery_db.jpg" style="border: 0px none; margin-left: auto; margin-right: auto;" title="Clicca per visualizzare la demo" /></a></td></tr>
<tr><td class="tr-caption" style="color: #4c8efb; text-align: center;">DEMO </td></tr>
</tbody></table>
</div>
<br />
Vediamo ora come procedere:<br />
<br />
<h3 style="background-color: #ebebeb; padding: 4px; text-align: center;">
Plugin Unite Gallery</h3>
<br />
Scarichiamo dal <a href="http://unitegallery.net/" target="_blank">sito dell'autore</a> i file del plugin Unite Gallery e, dopo aver estratto il file .zip, creiamo sul server una cartella che chiameremo <span style="font-family: "courier new" , "courier" , monospace;">unite-gallery</span> e carichiamo in essa il contenuto della cartella <span style="font-family: "courier new" , "courier" , monospace;">dist </span>del file estratto. In questo modo avremo a disposizione tutti i temi che il plugin prevede, con le relative risorse.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/-2khp66HO4OI/WOJh-ofdF9I/AAAAAAAAA5I/1hLFgEYiIF8xM3mkSbDx9px_kYUVPEQ2QCLcB/s1600/unite_gallery_remoto.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="172" src="https://4.bp.blogspot.com/-2khp66HO4OI/WOJh-ofdF9I/AAAAAAAAA5I/1hLFgEYiIF8xM3mkSbDx9px_kYUVPEQ2QCLcB/s320/unite_gallery_remoto.png" width="320" /></a></div>
<br />
Nella nostra demo abbiamo provato tre tipi di gallerie: <b><i>Tiles Justified</i>,</b> <b><i>Grid Theme</i></b> e <b><i>Carousel</i></b>. Ogni tipo di galleria richiede l'inclusione del file JavaScript <span style="font-family: "courier new" , "courier" , monospace;">unitegallery.js</span> (o nella versione compatta <span style="font-family: "courier new" , "courier" , monospace;">unitegallery.min.js</span>) e del file CSS <span style="font-family: "courier new" , "courier" , monospace;">unite-gallery.css</span> che costituiscono "il motore" del plugin, più altri file .css e .js che dipendono dal tema scelto.<br />
<br />
Quando avremo scelto il tema da utilizzare potremo anche cancellare dal server i file non necessari.<br />
<br />
<h3 style="background-color: #ebebeb; padding: 4px; text-align: center;">
Gestione dati</h3>
<br />
Al<i> Passo 1</i>, <i>Impostazioni Avanzate</i>, <i>Gestione Dati</i> inseriamo i dati di accesso al database forniti dal nostro provider. Indichiamo anche il nome della<i> Cartella su Server con accesso in scrittura</i> poiché qui verranno salvate le immagini che invieremo sul server con il modulo e-mail.<br />
<br />
<h3 style="background-color: #ebebeb; padding: 4px; text-align: center;">
Pagina inserimento e gestione delle immagini </h3>
<br />
Il form che noi abbiamo preparato prevede, oltre al campo per l'inserimento dell'immagine, alcune opzioni:<br />
<ul>
<li>la possibilità di associare ad ogni immagine una descrizione che verrà visualizzata nell'immagine ingrandita oppure, in alternativa, la possibilità di scegliere come descrizione il nome del file dell'immagine. La descrizione, comunque inserita, varrà anche come valore dell'attributo <span style="font-family: "courier new" , "courier" , monospace;">alt</span>. Qualora nessun campo venisse compilato la descrizione dell'immagine ingrandita e l'attributo <span style="font-family: "courier new" , "courier" , monospace;">alt </span>resteranno vuoti;</li>
<li>la possibilità di associare un ulteriore collegamento sull'immagine, oltre a quello all'immagine ingrandita.</li>
</ul>
Impostiamo quindi nel progetto una pagina protetta ed inseriamo in essa un <i>Oggetto Modulo Invio E-mail</i>. <br />
<ul>
</ul>
Nella scheda <i>Elenco </i>inseriamo i campi necessari, come da immagine:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/-KdzjT9sebFY/WN-jCD_yGOI/AAAAAAAAA4c/Mtgn1AJ7aWY6JkdBm_5uf7ODI31BwzCjwCLcB/s1600/modulo_mail_elenco13.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="121" src="https://4.bp.blogspot.com/-KdzjT9sebFY/WN-jCD_yGOI/AAAAAAAAA4c/Mtgn1AJ7aWY6JkdBm_5uf7ODI31BwzCjwCLcB/s320/modulo_mail_elenco13.png" width="320" /></a></div>
<br />
E' importante, oltre al tipo di campi presenti, definire anche, nella scheda <i>Opzioni</i> di ciascun campo, i valori di <i>Attributo <name> </i>e<i> Nome del Campo del Database</i>, valori che verranno utilizzati sia nel codice PHP per la visualizzazione finale delle immagini che nel codice JavaScript (vedremo questo più avanti) che si occupa di mostrare/nascondere il campo relativo alla descrizione in base all'opzione scelta. <br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/-g_ZR2WIj6g0/WOanKEMJSHI/AAAAAAAAA5c/pLeBckuqoGcbK8xaLoMRZHP04Ud4_yvjwCLcB/s1600/modulo_mail_campo_opzioni3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="82" src="https://4.bp.blogspot.com/-g_ZR2WIj6g0/WOanKEMJSHI/AAAAAAAAA5c/pLeBckuqoGcbK8xaLoMRZHP04Ud4_yvjwCLcB/s320/modulo_mail_campo_opzioni3.png" width="320" /></a></div>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-HMGkNuHfTNE/WOADc94XeHI/AAAAAAAAA4w/Lu1CtteDDsQRlZ19ep75LGZZ4noUToMTACLcB/s1600/modulo_mail_campo_opzioni1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="82" src="https://1.bp.blogspot.com/-HMGkNuHfTNE/WOADc94XeHI/AAAAAAAAA4w/Lu1CtteDDsQRlZ19ep75LGZZ4noUToMTACLcB/s320/modulo_mail_campo_opzioni1.png" width="320" /></a></div>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-hga88lyDJ6I/WOADhIFmYoI/AAAAAAAAA40/KQo-Vu8335svrbbHUMVnN4Y9ZRzqAtd3QCLcB/s1600/modulo_mail_campo_opzioni2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="82" src="https://1.bp.blogspot.com/-hga88lyDJ6I/WOADhIFmYoI/AAAAAAAAA40/KQo-Vu8335svrbbHUMVnN4Y9ZRzqAtd3QCLcB/s320/modulo_mail_campo_opzioni2.png" width="320" /></a></div>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-f_ftd7-Mmt4/WOanKCWBuEI/AAAAAAAAA5Y/_YcrsIxbet4LOaY5SSDrHG2zXV0RS7ArwCEw/s1600/modulo_mail_campo_opzioni4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="82" src="https://2.bp.blogspot.com/-f_ftd7-Mmt4/WOanKCWBuEI/AAAAAAAAA5Y/_YcrsIxbet4LOaY5SSDrHG2zXV0RS7ArwCEw/s320/modulo_mail_campo_opzioni4.png" width="320" /></a></div>
<br />
<br />
Nella scheda <i>Invio </i>come metodo di <i>Invio dei dati</i> scegliamo dal menu a tendina <i>Invia i dati ad un database</i>, valorizzando tutti i campi necessari: il database (nel menu a tendina compare il database precedentemente impostato in <i>Gestione Dati</i>), il <b>nome della tabella</b> in cui verranno memorizzati i dati e l'eventuale indirizzo e-mail a cui verrà notificato ogni nuovo inserimento.<br />
<br />
Inseriamo quindi anche l'oggetto opzionale <i>Database Viewer</i> da utilizzare per la modifica dei dati inseriti attraverso il modulo e-mail, impostando i parametri necessari. Nel caso in cui questa pagina venga realizzata per essere utilizzata da un utente poco esperto, si può impedire l'aggiunta di un nuovo record, funzione superflua dal momento che c'è il modulo e-mail che svolge questo compito, con questo CSS che nasconde il relativo controllo, da inserire in <i>Proprietà Pagina</i>, <i>Esperto</i>, <i>Prima della chiusura del tag HEAD</i>:<br />
<br />
<pre class="brush:css; html-script:true; toolbar:false"><style>
.jtable-toolbar-item-add-record {
display: none !important;
}
</style>
</pre>
<br />
Sempre in <i>Proprietà Pagina, Esperto, Prima della chiusura del tag HEAD</i>, inseriamo questo codice JavaScript che permette di mostrare/nascondere, nel form, il campo "Descrizione" in base alla scelta effettuata nel campo precedente:<br />
<br />
<pre class="brush:js; html-script:true; toolbar:false"><script>
$(document).ready(function () {
$("input[name='checkdesc[]']").change(function () {
if ($(this).is(":checked")) {
$("textarea[name='descrizione']").parents(".imObjectFormFieldContainer").css('display', 'none');
$("textarea[name='descrizione']").val('');
} else {
$("textarea[name='descrizione']").parents(".imObjectFormFieldContainer").css('display', 'inline');
}
});
$('input:reset').click(function () {
$("textarea[name='descrizione']").parents(".imObjectFormFieldContainer").css('display', 'inline');
})
});
</script>
</pre>
<br />
Ovviamente se decidiamo di cambiare il valore dell'attributo <span style="font-family: "courier new" , "courier" , monospace;">name</span> dei campi interessati, dovremo modificare il codice.<br />
<br />
<a href="http://quellidelcucuzzolo.altervista.org/demo/unite-gallery-database-wsx5/gestione.html" target="_blank">QUI</a> è visibile un duplicato della nostra pagina di gestione che, per
ovvi motivi, è stata modificata in modo che sia non funzionante. <br />
<br />
<br />
<h3 style="background-color: #ebebeb; padding: 4px; text-align: center;">
Pagina visualizzazione gallery</h3>
<br />
Nella pagina dove vogliamo visualizzare le immagini, inseriamo un <i>Oggetto Codice HTML</i> impostando l'altezza dello stesso a 0 (zero) ed inseriamo questo codice:<br />
<pre class="brush:php; html-script:true; auto-links:false; toolbar:false"><!-- ===============================================
Unite Gallery by Max Valiano http://unitegallery.net
Database class: by Incomedia Srl https://www.incomedia.eu
PHP code by https://quellidelcucuzzolo.blogspot.it
Please do not remove credit
================================================ -->
<div id="UniteGallery" style="display:none;">
<?php
//DA PERSONALIZZARE
//Inserire il nome della tabella del database
$qtable = "ugallery";
//Inserire i nomi dei campi del database
$qimmagine = 'immagine'; //campo File Allegato
$qcheck = 'checkdesc'; //campo Scelta Multipla
$qdesc = 'descrizione'; //campo Area di Testo
$qlink = 'link'; //campo Testo
//Inserire l'altezza massima delle miniature
$thumbsH = 300;
//CONNESSIONE
//Prelievo automatico dei dati inseriti nel programma
$qchiave = array_keys($imSettings['databases']);
$qdati = getDbData($qchiave[0]);
$qhost = $qdati['host'];
$quser = $qdati['user'];
$qpassword = $qdati['password'];
$qdatabase = $qdati['database'];
$qfolder = $imSettings['general']['public_folder'];
$qdb = new ImDb($qhost, $quser, $qpassword, $qdatabase);
if (!$qdb->testConnection())
die("Connessione non riuscita");
//SELECT
//Selezione di tutti i record della tabella
$qitem = $qdb->query("SELECT * FROM $qtable");
//OUTPUT
$urlfile = dirname($_SERVER['PHP_SELF']);
//Iterazione dell'array e creazione della struttura HTML
if ($qitem) {
$qitem = array_reverse($qitem);
foreach ($qitem as $val) {
if (isset($val[$qdesc]) && $val[$qdesc] != '')
$qdescimg = $val[$qdesc];
else if (isset($val[$qcheck]) && $val[$qcheck] != '') {
$qdescimg = preg_replace('/_\d+/', '', $val[$qimmagine]);
} else
$qdescimg = "";
if (isset($val[$qlink]) && $val[$qlink] != '') {
echo '<a href="' . $val[$qlink] . '">' . "\n";
}
if (isset($val[$qimmagine]) && $val[$qimmagine] != '') {
echo '<img src="image.php?height=' . $thumbsH .'&image=' . $urlfile . '/' . $qfolder . '/' . $val[$qimmagine] . '" data-image="' . $qfolder . '/' . $val[$qimmagine] . '" alt="' . $qdescimg . '" />' . "\n";
}
if (isset($val[$qlink]) && $val[$qlink] != '') {
echo '</a>' . "\n";
}
}
}
//CHIUSURA DELLA CONNESSIONE
$qdb->closeConnection();
?>
</div>
<!-- richiamo funzione Unite Gallery e impostazione stile -->
<script>
jQuery("#UniteGallery").unitegallery({
tiles_type: "justified",
tile_show_link_icon: true,
lightbox_overlay_opacity: 0.95
});
</script>
<!-- Unite Gallery END -->
</pre>
<br />
Le variabili da personalizzare sono quelle indicate all'inizio del codice.<br />
Il richiamo della funzione Unite Gallery, alla fine del codice, dovrà essere personalizzato in base al tema scelto e alle opzioni che si intendono utilizzare e per questo si rimanda al sito dell'autore.<br />
<br />
Per la generazione automatica delle miniature, abbiamo utilizzato anche questa volta lo script <a href="http://shiftingpixel.com/2008/03/03/smart-image-resizer/" target="_blank">Smart Image Resize</a>, versione di <a href="http://luciorota.altervista.org/xoops/modules/wfdownloads/singlefile.php?cid=2&lid=13" target="_blank">luciorota</a>: scarichiamo da <a href="http://quellidelcucuzzolo.altervista.org/demo/dynamic-gallery-wsx5/image.zip" target="_blank">QUI</a> il file .zip, scompattiamolo e carichiamo nella root del server il file<span style="font-family: "courier new" , "courier" , monospace;"> image.php</span> con un programma FTP o allegandolo nella scheda Esperto dell'Oggetto Codice HTML stesso, lasciando vuoto il campo <i>Percorso relativo sul Server</i>.<br />
Ricordiamo che questo script richiede che sul server siano
abilitate le <a href="http://php.net/manual/en/book.image.php" target="_blank">librerie GD</a>.<br />
<br />
In <i>Proprietà Pagina</i>, <i>Esperto</i>, impostiamo <span style="font-family: "courier new" , "courier" , monospace;">php</span> come estensione del file generato. Sempre in questa scheda, inseriamo il seguente codice personalizzato <i>Prima dell'apertura del tag HTML</i>:<br />
<pre class="brush:php; toolbar:false"><?php
require_once("res/x5engine.php");
?>
</pre>
<br />
Inoltre, <i>Prima della chiusura del tag HEAD</i>, inseriamo i richiami ai file JavaScript e CSS del plugin Unite Gallery, file che cambiano in funzione del tema scelto.<br />
Ad esempio, per la galleria <b><i>Tiles Justified</i></b>, inseriamo questo codice:<br />
<br />
<pre class="brush:html; toolbar:false;"><link rel="stylesheet" href="unite-gallery/css/unite-gallery.css" type="text/css" />
<script type="text/javascript" src="unite-gallery/js/unitegallery.min.js"></script>
<script type="text/javascript" src="unite-gallery/themes/tiles/ug-theme-tiles.js"></script>
</pre>
<br />
Ovviamente la galleria sarà visibile solo online. Se si vuole scrivere un avviso sulla pagina dell'anteprima è possibile inserire anche questo script:<br />
<br />
<pre class="brush:js; html-script:true; toolbar:false"><script>
$(document).ready(function() {
// funzionalità offline
if (location.host == "127.0.0.1:8080")
$("#UniteGallery").after("La gallery si visualizzerà solo quando il sito verrà esportato su Internet");
});
</script>
</pre>
<br />
<br />
Buon appetito... sperando che non facciate indigestione :)
<br />
<br />
<br />MAeSIhttp://www.blogger.com/profile/03218272086256305663noreply@blogger.com51tag:blogger.com,1999:blog-7965877301845859013.post-29690316266438750232017-02-19T22:05:00.000+01:002020-08-07T15:27:28.633+02:00Creare una galleria dinamica per WebSite X5WebSite X5 prevede un Oggetto Galleria con la possibilità di scegliere tra diverse tipologie: in presenza di numerose immagini, però, il progetto può diventare corposo e di difficile gestione.<br />
In questo articolo presenteremo uno script PHP che ci permette di leggere dinamicamente le immagini direttamente da una cartella <u><b>sul server</b></u> e di visualizzarle come miniature con ingrandimento nello ShowBox di WebSite X5: in questo modo ci basterà aggiungere o rimuovere le immagini sul server per aggiornare automaticamente la pagina, senza bisogno di aprire il programma.<br />
Di fatto abbiamo rimesso mano ad un codice PHP che avevamo descritto in <a href="http://quellidelcucuzzolo.blogspot.it/2015/01/php-lettura-dinamica-immagini-cartella.html">questo post</a> e lo abbiamo integrato con il codice JavaScript della <i>Galleria Miniature</i> del programma.<br />
<br />
Ecco la nostra demo:<br />
<br />
<div class="MS_esempio" style="padding-top: 25px;">
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://quellidelcucuzzolo.altervista.org/demo/dynamic-gallery-wsx5" target="_blank" title="Clicca per visualizzare la demo"><img alt="demo dynamic gallery" src="https://1.bp.blogspot.com/-wRMwH-oorYI/WKmsf6-PTDI/AAAAAAAAA28/Iyvxx2GoR5EXTMFqWg2OzzMTwWpRLbKbACEw/s1600/demo_dynamic_gallery.jpg" style="border: 0px none; margin-left: auto; margin-right: auto;" title="Clicca per visualizzare la demo" /></a></td></tr>
<tr><td class="tr-caption" style="color: #4c8efb; text-align: center;">DEMO </td></tr>
</tbody></table>
</div>
<br />
Vediamo ora come procedere:<br />
<br />
<h3 style="background-color: #ebebeb; padding: 4px; text-align: center;">
CREAZIONE CARTELLA E CARICAMENTO IMMAGINI</h3>
<br />
Creiamo sul server una cartella in cui esporteremo le nostre immagini. Possiamo utilizzare il pannello di controllo online che ogni web hosting offre, un programma FTP tipo FileZilla o possiamo utilizzare il programma stesso al <i>Passo 5</i>, <i>Esporta i file su Internet</i> e, a connessione avvenuta, cliccare nella barra degli strumenti sull'icona <img border="0" src="https://testwsx5.altervista.org/files-qdc/img/tlb_newfolder.gif" /> per creare una nuova cartella e sull'icona <img border="0" src="https://testwsx5.altervista.org/files-qdc/img/tlb_upload.gif" /> per caricare le immagini sul server.<br />
<br />
<b>Nota bene:</b> lo script visualizzerà automaticamente nella descrizione dell'immagine ingrandita il nome del file immagine, sostituendo con uno spazio l'eventuale trattino (-) presente. Per quanto riguarda le estensioni, lo script riconosce file con estensione <span style="font-family: "courier new" , "courier" , monospace;">.jpg, .png e .gif,</span> ma eventualmente è possibile anche modificare questi filtri.<br />
<br />
<h3 style="background-color: #ebebeb; padding: 4px; text-align: center;">
INSERIMENTO SCRIPT</h3>
<br />
Scarichiamo da <a href="http://quellidelcucuzzolo.altervista.org/demo/dynamic-gallery-wsx5/image.zip" target="_blank">QUI</a> il file<span style="font-family: "courier new" , "courier" , monospace;"> image.php</span> che servirà per la gestione delle miniature (<a href="http://shiftingpixel.com/2008/03/03/smart-image-resizer/" target="_blank">Smart Image Resize</a>, versione di <a href="http://luciorota.altervista.org/xoops/modules/wfdownloads/singlefile.php?cid=2&lid=13" target="_blank">luciorota</a>). Questo script permette di creare automaticamente le miniature a partire
dalle immagini originali: noi abbiamo scelto di
impostare la creazione di miniature quadrate, ma lo script prevede anche altre opzioni,
per le quali occorre documentarsi sul sito dell'autore. Per il suo funzionamento è necessario che sul server siano
abilitate le <a href="http://php.net/manual/en/book.image.php" target="_blank">librerie GD</a>.<br />
<br />
Nella pagina in cui vogliamo visualizzare la gallery impostiamo l'estensione .php da <i>Proprietà Pagina, Esperto, Estensione del file generato</i>. Inseriamo un <i>Oggetto Codice HTML</i>, impostiamo l'altezza a 0 ed alleghiamo il file <span style="font-family: "courier new" , "courier" , monospace;">image.php</span> appena scaricato nella scheda <i>Esperto, </i>lasciando vuoto il campo <i>Percorso relativo sul Server</i>: in questo modo il file verrà caricato nella root del server.<br />
<br />
Copiamo e incolliamo quindi nella scheda <i>Codice HTML</i> questo script:<br />
<pre class="brush:php; html-script:true; toolbar:false"><!-- ==================================================================
Dynamic Gallery
PHP code by quellidelcucuzzolo.blogspot.com
JS code by Incomedia
Please do not remove credit
=================================================================== -->
<div id="ms-gallery">
<script>
var showbox_MS_Gallery= {
media: [
<?php
//DA PERSONALIZZARE:
$folder = "ms-gallery"; //cartella sul server in cui sono contenute le immagini
$effect = 2; //numero corrispondente all'effetto di transizione scelto
$sizethumbs = 150; //larghezza delle miniature quadrate
$effects = array(
"none",
"random",
"fade",
"horizontalSlide",
"verticalSlide",
"horizontalSlideSwing",
"verticalSlideSwing",
"zoom",
"elasticFromTop",
"elasticFromBottom",
"elasticFromLeft",
"elasticFromRight",
"bounceFromTop",
"bounceFromBottom",
"bounceFromRight",
"bounceFromLeft",
"rotateLinear",
"rotateZoom",
"carousel",
"verticalSlices",
"scramble",
"squares",
"flip"
);
$imgdir = glob($folder."/*.{jpg,png,gif}", GLOB_BRACE);
foreach ($imgdir as $key => $filename) {
$imgsize = getimagesize($filename);
$nomefile = pathinfo(basename($filename));
echo '{type: "image", url: "' . $filename . '", width: ' . $imgsize[0] . ', height: ' . $imgsize[1] . ', description: "' . str_replace('-', ' ', $nomefile['filename']) . '", "effect": "' . $effects[$effect] . '"}';
if ($key < sizeof($imgdir)-1)
echo ',';
}
?>
]};
</script>
<?php
foreach ($imgdir as $key => $filename) {
$nomefile = pathinfo(basename($filename));
$urlfile = dirname($_SERVER['PHP_SELF']);
echo "<a href='$filename' onclick='return x5engine.imShowBox(showbox_MS_Gallery, $key, this);'><img class='ms-gallery' src='image.php?width=$sizethumbs&height=$sizethumbs&cropratio=1:1&image=$urlfile/$filename' alt='" . str_replace('-', ' ', $nomefile['filename']) . "' /></a>";
}
?>
</div>
<!-- end Dynamic Gallery -->
</pre>
Le variabili da personalizzare sono:<br />
<ul>
<li><span style="font-family: "courier new" , "courier" , monospace;">$folder
= "<b><span style="color: red;">ms-gallery</span></b>";</span><br />inserire il nome della cartella in cui sono state caricate le immagini</li>
</ul>
<ul>
<li><span style="font-family: "courier new" , "courier" , monospace;">$effect = <b><span style="color: red;">2</span></b></span>; <br />il
numero (da 0 a 22) indicato in questa variabile definisce il tipo di
transizione che avranno le immagini ingrandite nello ShowBox. Per avere
un'idea degli effetti disponibili basta inserire temporaneamente nel progetto un <i>Oggetto
Galleria</i>, <i>Tipo Miniature</i>, inserire un'immagine nella <i>Scheda Elenco</i> e visualizzare nelle <i>Opzioni </i>le varie possibilità ed il numero ad esse associato <br /><br /><div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/-P5sT71_rKvU/WKm1gMtB4FI/AAAAAAAAA3o/msKSI35f6CEUE8-4V7NTxZI8uXdCCH5KQCLcB/s1600/proprieta_effetto.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="156" src="https://4.bp.blogspot.com/-P5sT71_rKvU/WKm1gMtB4FI/AAAAAAAAA3o/msKSI35f6CEUE8-4V7NTxZI8uXdCCH5KQCLcB/s200/proprieta_effetto.jpg" width="200" /></a></div>
<br />
</li>
</ul>
<ul>
<li><span style="font-family: "courier new" , "courier" , monospace;">$sizethumbs = <span style="color: red;"><b>150</b></span>;</span><br />
il valore inserito in questa variabile definisce la larghezza delle
miniature quadrate che il file <span style="font-family: "courier new" , "courier" , monospace;">image.php</span> creerà automaticamente. </li>
</ul>
<br />
<h3 style="background-color: #ebebeb; padding: 4px; text-align: center;">
DEFINIZIONE STILI</h3>
<br />
Possiamo definire da programma lo stile grafico dello ShowBox al <i>Passo 2</i>, <i>Personalizzazione</i>, <i>ShowBox, Tooltip e E-mail</i>.<br />
Per quanto riguarda le miniature dobbiamo aggiungere qualche riga di CSS: nel nostro esempio abbiamo definito un semplice bordo grigio e abbiamo distanziato tra loro le miniature impostando <span style="font-family: "courier new" , "courier" , monospace;">padding</span> e <span style="font-family: "courier new" , "courier" , monospace;">margin</span>, ma il codice è completamente personalizzabile.<br />
Inserire quindi questa regola nella scheda <i>Esperto</i>, <i>Codice CSS</i> sempre dello stesso <i>Oggetto HTML:</i><br />
<pre class="brush:css, toolbar:false">img.ms-gallery{
padding: 20px;
border: 1px solid gray;
margin: 4px;
}</pre>
<br />
Ovviamente in Anteprima la gallery non sarà visibile. Se vogliamo tenere "pulita" la pagina, evitando di visualizzare parti di codice, possiamo inserire questo script in <i>Proprietà Pagina, Esperto, Prima della chiusura del tag HEAD</i>:<br />
<pre class="brush:js; html-script:true; toolbar:false"><script>
$(document).ready(function() {
// funzionalità offline
if (location.host == "127.0.0.1:8080")
$("#ms-gallery").html("La gallery si visualizzerà solo quando il sito verrà esportato su Internet");
});
</script>
</pre>
<br />
<br />
<br />MAeSIhttp://www.blogger.com/profile/03218272086256305663noreply@blogger.com31tag:blogger.com,1999:blog-7965877301845859013.post-28702576298493955292017-01-08T15:19:00.000+01:002017-01-08T15:19:47.155+01:00Come creare un semplice sfondo animato con i CSS3La proprietà <span style="font-family: "courier new" , "courier" , monospace;">animation </span>dei CSS3 permette di creare animazioni efficaci senza l'uso di JavaScript o dell'ormai obsoleto Flash. Abbiamo voluto provare anche noi a lavorare con questa proprietà con l'intento di creare un semplice sfondo animato con un effetto tipo parallax orizzontale.<br />
Anche se in rete si trovano già diversi esempi al riguardo, questo è quello che noi abbiamo ottenuto:<br />
<br />
<div class="MS_esempio" style="padding-top: 25px;">
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://quellidelcucuzzolo.altervista.org/demo/sfondo-animato-css3" target="_blank" title="Clicca per visualizzare la demo"><img alt="demo sfondo animato css3" kasperskylab_antibanner="on" src="https://1.bp.blogspot.com/-7GgdQwGPNHQ/WHJH3PbLIbI/AAAAAAAAA2U/6_X7hEf5eMQ6cdnA8kjmsfMbbk17_fxpwCLcB/s1600/demo_sfondo_animato.png" style="border: 0px none; margin-left: auto; margin-right: auto;" title="Clicca per visualizzare la demo" /></a></td></tr>
<tr><td class="tr-caption" style="color: #4c8efb; text-align: center;">DEMO </td></tr>
</tbody></table>
</div>
<br />
Ma vediamo passo passo il procedimento seguito:<br />
<b>1.</b> Abbiamo scelto le immagini da sovrapporre, in formato .png, cercando tra le innumerevoli risorse gratuite che fornisce <a href="https://pixabay.com/" target="_blank">Pixabay</a>.<br />
Questa è l'immagine che abbiamo usato in primo piano:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://quellidelcucuzzolo.altervista.org/demo/sfondo-animato-css3/sky1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img border="0" height="87" src="https://3.bp.blogspot.com/-NhNvWkqXgtU/WHDsb7HddRI/AAAAAAAAA1k/8HEpFiB3paw9EFBDK9wMJLRu_exTdvDqwCLcB/s320/sky1.png" width="320" /></a></div>
<br />
Questa l'immagine inserita come secondo livello:
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://quellidelcucuzzolo.altervista.org/demo/sfondo-animato-css3/sky2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img border="0" height="87" src="https://4.bp.blogspot.com/-tIjwpDTXKYg/WHDsb6FHQaI/AAAAAAAAA1s/tbrJrT7yUa83wXkkTOqQKMkxcXBoIMh2wCLcB/s320/sky2.png" width="320" /></a></div>
<br />
I lati sinistro e destro delle due immagini sono stati modificati in modo da renderli contigui, così che le immagini possano essere ripetute in orizzontale senza che vengano visualizzati stacchi.<br />
Ed infine questa immagine, posta come terzo livello, che rappresenta delle stelle stilizzate:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://quellidelcucuzzolo.altervista.org/demo/sfondo-animato-css3/sky3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img height="87" src="https://3.bp.blogspot.com/-Opddlh3pROE/WHDsb0tcErI/AAAAAAAAA1o/t6deltw8Jighv4ED-r7O3unBHr__2fpqQCLcB/s320/sky3.png" style="border: 1px solid #ccc;" width="320" /></a></div>
<br />
<br />
<b>2.</b> Abbiamo definito il codice HTML per posizionare le tre immagini come immagini di sfondo di tre diversi <span style="font-family: "courier new" , "courier" , monospace;">div</span> inseriti all'interno di un <span style="font-family: "courier new" , "courier" , monospace;">div</span> contenitore: <br />
<pre class="brush:html, toolbar:false"><div id="parallax-hor">
<div id="sky3"></div>
<div id="sky2"></div>
<div id="sky1"></div>
</div>
</pre>
<br />
Con i CSS abbiamo posizionato in modo assoluto i tre <span style="font-family: "courier new" , "courier" , monospace;">div</span> in modo che le relative immagini di sfondo, ripetute in orizzontale, si sovrappongano una sopra l'altra.<br />
Ecco il risultato parziale ottenuto: <a href="http://quellidelcucuzzolo.altervista.org/demo/sfondo-animato-css3/step1.html" target="_blank">STEP 1</a><br />
<br />
<b>3.</b> Occupiamoci ora dell'animazione del colore di sfondo del <span style="font-family: "courier new" , "courier" , monospace;">div</span> contenitore: <br />
<pre class="brush:css, toolbar:false">#parallax-hor {
animation: sfondocol 20s linear infinite alternate;
}
@keyframes sfondocol {
from {
background-color: #f1aa32;
}
to {
background-color: #003300;
}
}
</pre>
Nel codice utilizzato la proprietà <span style="font-family: "courier new" , "courier" , monospace;">animation</span> è la scrittura contratta delle seguenti proprietà/valore:<br />
<ul>
<li><span style="font-family: "courier new" , "courier" , monospace;"><a href="http://www.w3schools.com/cssref/css3_pr_animation-name.asp" target="_blank"><b><span style="color: #006699;">animation-name</span></b></a>: <b><span style="color: #008200;">sfondocol</span></b>; <span style="font-family: "courier new" , "courier" , monospace;">/* nome dell'animazione, che può essere scelto a p<span style="font-family: "courier new" , "courier" , monospace;">iacere */</span></span></span></li>
<li><span style="font-family: "courier new" , "courier" , monospace;"><span style="font-family: "courier new" , "courier" , monospace;"><span style="font-family: "courier new" , "courier" , monospace;"><a href="http://www.w3schools.com/cssref/css3_pr_animation-duration.asp" target="_blank"><b><span style="color: #006699;">animation-duration</span></b></a>: <b><span style="color: #008200;">20s</span></b>; /* tempo in secondi in cui deve avvenire l'animazione */</span></span></span></li>
<li><span style="font-family: "courier new" , "courier" , monospace;"><span style="font-family: "courier new" , "courier" , monospace;"><span style="font-family: "courier new" , "courier" , monospace;"><a href="http://www.w3schools.com/cssref/css3_pr_animation-iteration-count.asp" target="_blank"><b><span style="color: #006699;">animation-iteration-count</span></b></a>:<span style="font-family: "courier new" , "courier" , monospace;"> <b><span style="color: #008200;">infinite</span></b>; /* numer<span style="font-family: "courier new" , "courier" , monospace;">o di volte per le quali l'animazione de<span style="font-family: "courier new" , "courier" , monospace;">ve essere ripetuta */</span></span></span></span></span></span></li>
<li><span style="font-family: "courier new" , "courier" , monospace;"><span style="font-family: "courier new" , "courier" , monospace;"><span style="font-family: "courier new" , "courier" , monospace;"><span style="font-family: "courier new" , "courier" , monospace;"><span style="font-family: "courier new" , "courier" , monospace;"><span style="font-family: "courier new" , "courier" , monospace;"><span style="font-family: "courier new" , "courier" , monospace;"><a href="http://www.w3schools.com/cssref/css3_pr_animation-timing-function.asp" target="_blank"><span style="color: #006699;"><b><span style="font-family: "courier new" , "courier" , monospace;">a</span>nimation-timing-function</b></span></a>: <span style="color: #008200;"><b>linear</b></span></span></span></span></span></span></span></span><span style="font-family: "courier new" , "courier" , monospace;"><span style="font-family: "courier new" , "courier" , monospace;"><span style="font-family: "courier new" , "courier" , monospace;"><span style="font-family: "courier new" , "courier" , monospace;"><span style="font-family: "courier new" , "courier" , monospace;"><span style="font-family: "courier new" , "courier" , monospace;"><span style="font-family: "courier new" , "courier" , monospace;"><span style="color: #008200;"><span style="color: black;"><span style="font-family: "courier new" , "courier" , monospace;"><span style="font-family: "courier new" , "courier" , monospace;"><span style="font-family: "courier new" , "courier" , monospace;">;</span></span></span></span></span> /* andamento della velocità nell'animazione <span style="font-family: "courier new" , "courier" , monospace;">*/</span></span></span></span></span></span></span></span></li>
<li><span style="font-family: "courier new" , "courier" , monospace;"><a href="http://www.w3schools.com/cssref/css3_pr_animation-direction.asp" target="_blank"><b><span style="color: #006699;">animation-direction</span></b></a>: <b><span style="color: #008200;">alternate</span></b>;<span style="font-family: "courier new" , "courier" , monospace;"> </span>/* direzione dell'animazione */</span></li>
</ul>
Esistono <a href="http://www.w3schools.com/cssref/css3_pr_animation.asp" target="_blank">altre proprietà</a> utilizzabili, ad esempio <span style="font-family: "courier new" , "courier" , monospace;">animation-delay</span> con cui si può applicare all'animazione un ritardo, che, se non dichiarate nella sintassi abbreviata, assumono il valore di default.<br />
<br />
L'animazione (nel nostro caso <span style="font-family: "courier new" , "courier" , monospace;">sfondocol</span>) è definita dalla regola <span style="font-family: "courier new" , "courier" , monospace;">@keyframes</span> che contiene le proprietà CSS da animare, nel nostro caso il colore di sfondo che passa dal valore iniziale definito in <span style="font-family: "courier new" , "courier" , monospace;">from</span> al valore finale definito in <span style="font-family: "courier new" , "courier" , monospace;">to</span>. In alternativa a <span style="font-family: "courier new" , "courier" , monospace;">from</span> e <span style="font-family: "courier new" , "courier" , monospace;">to</span> si possono usare le percentuali per indicare i vari step dell'animazione.<br />
Ecco il risultato parziale ottenuto: <a href="http://quellidelcucuzzolo.altervista.org/demo/sfondo-animato-css3/step2.html" target="_blank">STEP 2</a><br />
<br />
<b>4.</b> Infine diamo movimento alle tre immagini di sfondo: <br />
<pre class="brush:css, toolbar:false">#sky1 {
animation: moto 40s linear infinite;
}
#sky2 {
animation: moto 60s linear infinite;
}
#sky3 {
animation: moto 180s linear infinite;
}
@keyframes moto {
from {
background-position: 0 0;
}
to {
background-position: 2560px 0;
}
}
</pre>
L'animazione cambia la posizione delle tre immagini di sfondo dal valore iniziale (<span style="font-family: "courier new" , "courier" , monospace;">0 0</span>) al valore finale (<span style="font-family: "courier new" , "courier" , monospace;">2560px 0</span>).<br />
Il valore di <span style="font-family: "courier new" , "courier" , monospace;">2560</span> non è casuale ma deve essere un multiplo della larghezza delle immagini per evitare di visualizzare lo scatto nel momento in cui l'immagine torna alla sua posizione iniziale.<br />
Le tre animazioni si differenziano solo nella durata, ottenendo così movimenti a velocità diverse simulando l'effetto parallasse.<br />
<br />
Per assicurare una maggiore compatibilità con i vari browser/dispositivi è opportuno utilizzare anche i prefissi proprietari per la proprietà <span style="font-family: "courier new" , "courier" , monospace;">animation</span> e la regola <span style="font-family: "courier new" , "courier" , monospace;">@keyframes</span><br />
<br />
<a href="http://quellidelcucuzzolo.altervista.org/demo/sfondo-animato-css3/styleAnimationCss3.css" target="_blank">QUI</a> potete scaricare il CSS completo.<br />
<br />
<br />
<br />MAeSIhttp://www.blogger.com/profile/03218272086256305663noreply@blogger.com2tag:blogger.com,1999:blog-7965877301845859013.post-88209226620718613402016-12-31T22:04:00.002+01:002016-12-31T22:04:52.724+01:00Buon Anno!<style>
#orologio {
margin: 0 auto;
padding: 5px;
width: 300px;
height: 300px;
border: 1px solid gray;
border-radius: 50%;
position: relative;
font-family: 'Raleway', sans-serif;
font-size: 36px;
line-height: 24px;
background: white;
background: radial-gradient(circle, #2C3E50, #4CA1AF, white 40%);
}
#zero {
position: absolute;
left: 44%;
top: 5%;
}
#tre {
position: absolute;
right: 5%;
top: 46%;
}
#sei {
position: absolute;
left: 47%;
bottom: 5%;
}
#nove {
position: absolute;
top: 46%;
left: 5%;
}
@keyframes rotazione {
to {
-webkit-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}
}
#lancetta {
animation-name: rotazione;
animation-duration: 60s;
animation-iteration-count: infinite;
animation-timing-function: linear;
top: 50%;
position: absolute;
width: 300px;
}
#lancetta div {
width: 148px;
height: 6px;
background: gray;
background: linear-gradient(to right, white, gray);
}
</style>
<br />
<div id="orologio">
<div id="zero">
12</div>
<div id="tre">
3</div>
<div id="sei">
6</div>
<div id="nove">
9</div>
<div id="lancetta">
<div>
</div>
</div>
</div>
<br />
<div style="text-align: center;">
<a href="http://codepen.io/maesi/pen/xgKqpy" target="_blank">codepen</a></div>
<br />
<br />
Tra poche ore tutti scandiremo i secondi... aspettando un nuovo inizio che, come sempre, è carico di sogni e di speranze.<br />
<br />
Vi auguriamo 525600 minuti ricchi di ciò che più amate.<br />
<br />
<div style="text-align: center;">
<h3>
BUON 2017 A TUTTI! </h3>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<br /></div>
</div>
MAeSIhttp://www.blogger.com/profile/03218272086256305663noreply@blogger.com3tag:blogger.com,1999:blog-7965877301845859013.post-29016090113367993262016-12-21T15:56:00.002+01:002016-12-21T15:56:54.737+01:00Visualizzare le immagini negli articoli ridotti del blog di WebSite X5Nel blog di WebSite X5 possiamo organizzare la visualizzazione degli articoli della pagina principale attraverso la scheda <i>Struttura, </i>scegliendo tra tre opzioni:<br />
<ol>
<li><i>Il primo esteso, gli altri ridotti</i></li>
<li><i>Tutti estesi</i></li>
<li><i>Tutti ridotti</i></li>
</ol>
La differenza consiste nel testo visualizzato - quello dell'intero articolo nell'articolo esteso, quello scritto nel campo <i>Descrizione breve</i> nell'articolo ridotto - e nell'assenza dell'immagine negli articoli ridotti. <br />
<br />
Se volessimo rendere questa pagina più gradevole senza eccedere con la lunghezza dei contenuti, cioè senza scegliere l'opzione <i>Tutti estesi</i>, potremmo inserire nella <i>Descrizione breve</i> di ogni articolo l'immagine corrispondente, scrivendone il relativo codice HTML, esempio:<br />
<pre class="brush:html, toolbar: false"><img class="imgPostS" src="../images/nomeimg.ext" alt="testo alternativo" />
</pre>
Il valore dell'attributo <span style="font-family: "courier new" , "courier" , monospace;">src </span>dovrà essere ricavato dal corrispondente articolo esteso. La classe <span style="font-family: "courier new" , "courier" , monospace;">imgPostS </span>data all'immagine servirà per definirne la formattazione con qualche riga di CSS.<br />
<br />
Questo metodo risulta però poco pratico poiché dovremmo inserire il codice dell'immagine manualmente articolo per articolo.<br />
Noi abbiamo allora cercato una via alternativa, che non prevede l'inserimento di nessun codice nel campo <i>Descrizione Breve</i>, ma un unico script per tutti gli articoli che, in automatico, aggiunge l'immagine relativa in ogni articolo ridotto.<br />
Ecco la nostra DEMO:<br />
<br />
<div class="MS_esempio" style="padding-top: 25px;">
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://quellidelcucuzzolo.altervista.org/demo/blog-immagini-articoli-ridotti-wsx5/blog" target="_blank" title="Clicca per visualizzare la demo"><img alt="demo immagini articoli ridotti blog" kasperskylab_antibanner="on" src="https://3.bp.blogspot.com/-nQPvVCyFrq8/WFqQfS6I3HI/AAAAAAAAA1I/I3So0fza0zsWQRln3BZ5o1ka_iGnrIRgwCLcB/s1600/demo_immagini_blog.png" style="border: 0px none; margin-left: auto; margin-right: auto;" title="Clicca per visualizzare la demo" /></a></td></tr>
<tr><td class="tr-caption" style="color: #4c8efb; text-align: center;">DEMO </td></tr>
</tbody></table>
</div>
<br />
Ma come associare in automatico la giusta immagine con il giusto articolo? <br />
Analizzando il codice HTML generato della pagina del blog esportata abbiamo notato che, in realtà, l'immagine, se presente nell'articolo esteso, viene riportata anche nell'articolo ridotto ma è nascosta con <span style="font-family: "courier new" , "courier" , monospace;">display none</span> e dotata dell'attributo <span style="font-family: "courier new" , "courier" , monospace;">itemprop<span style="font-family: "courier new" , "courier" , monospace;">, </span></span>adottato da <a href="http://schema.org/" target="_blank">Schema.org,</a> cosa che ci fa ipotizzare che l'immagine serva per una migliore indicizzazione dei contenuti del blog.<br />
Abbiamo quindi scritto un codice jQuery che recupera dalla pagina tutte queste immagini nascoste, le inserisce in un <span style="font-family: "courier new" , "courier" , monospace;">array </span>e, con un ciclo successivo, le associa al corrispondente articolo:<br />
<pre class="brush:js, toolbar:false, auto-links:false"><script>
/* =========================================================================================
Author's custom code: http://quellidelcucuzzolo.blogspot.it - Please do not remove credit
========================================================================================= */
$(document).ready(function() {
var imgBlog = new Array();
var i = 0;
$("img[itemprop='image']").each(function() {
imgBlog.push($(this).attr("src"));
})
$(".imBlogPostSummary").each(function() {
if ($(this).nextAll().eq(1).css('display') == 'none') {
$(this).prepend("<img class='imgPostS' src='../" + imgBlog[i] + "' />");
i++;
}
});
});
</script>
</pre>
<br />
Lo script è da inserire in<i> Proprietà della Pagina</i> Speciale del Blog, <i>Esperto</i>, <i>Prima della chiusura del tag HEAD</i>. L'unica personalizzazione da fare riguarda la chiave dell'array <span style="font-family: "courier new" , "courier" , monospace;">imgBlog[<b><span style="color: red;">i</span></b>]</span>: se utilizziamo, come nel nostro esempio, la modalità di visualizzazione <i>1. Il primo esteso gli altri ridotti </i>e il post esteso ha un'immagine, dobbiamo modificare la chiave aggiungendo +1 in questo modo: <span style="font-family: "courier new" , "courier" , monospace;">imgBlog[<b><span style="color: red;">i+1</span></b>]</span><br />
<br />
Il risultato sarà visibile solo dopo aver esportato il sito online.<br />
<br />
La classe presente nell'immagine ci permette di facilitare l'inserimento delle regole di stile per una formattazione più appropriata.<br />
Queste sono le regole di stile che abbiamo inserito nella nostra demo, sempre in <i>Proprietà della Pagina</i> Speciale del Blog, <i>Esperto</i>, <i>Prima della chiusura del tag HEAD</i>, preferibilmente prima dello script precedente:<br />
<br />
<pre class="brush:css, toolbar:false"><style>
.imgPostS {
float: left;
width: 100%;
max-width: 200px;
padding: 0 10px 8px 0;
}
.imBlogSeparator {
clear: both;
padding-top: 10px;
}
</style>
</pre>
<br />
Una precisazione finale: il link generato dal programma per l'immagine nascosta con attributo <span style="font-family: "courier new" , "courier" , monospace;">itemprop </span>è errato. Nello script abbiamo corretto l'URL relativo affinché l'immagine sia effettivamente visualizzata.<br />
<br />MAeSIhttp://www.blogger.com/profile/03218272086256305663noreply@blogger.com11tag:blogger.com,1999:blog-7965877301845859013.post-83230660228675528882016-12-12T23:07:00.000+01:002016-12-12T23:15:23.450+01:00Icone Font Awesome e WebSite X5Abbiamo più volte utilizzato le icone Font Awesome nei template da noi adattati per WebSite X5. Oggi vedremo come si integrano queste icone in un progetto.<br />
<br />
Per prima cosa scarichiamo dal <a href="http://fontawesome.io/" target="_blank">sito ufficiale</a> il pacchetto <span style="font-family: "courier new" , "courier" , monospace;">.zip</span> che contiene tutti i file necessari e scompattiamolo in una cartella del nostro PC.<br />
<br />
A questo punto possiamo seguire due strade: trattare il font scaricato come un qualsiasi Web Font oppure integrarlo con codice a parte.<br />
<br />
Nel primo caso dobbiamo seguire le istruzioni della <a href="http://help.websitex5.com/it/v13/pro/web_font_def.htm" target="_blank">guida del programma</a> per integrare un Web Font; quindi, per scegliere le icone abbiamo due possibilità:<br />
<ol>
</ol>
<ul>
<li>nella pagina <a href="http://fontawesome.io/cheatsheet/" target="_blank">Cheatsheet</a> selezioniamo con il mouse l'icona che ci interessa e copiamola negli appunti (Ctrl+C); a questo punto basterà incollarla (Ctrl+V) nell'oggetto in cui vogliamo inserirla. Nel punto di inserimento vedremo un puntino, ma visualizzando l'anteprima vedremo correttamente l'icona;</li>
<li>in alternativa installiamo il file <span style="font-family: "courier new" , "courier" , monospace;">.ttf</span> nel Sistema Operativo e richiamiamo la "Mappa dei caratteri" per scegliere l'icona desiderata. Per maggiori dettagli sull'uso di questo metodo rimandiamo a <a href="http://www.aranzulla.it/come-digitare-caratteri-speciali-24893.html" target="_blank">questo articolo</a>. </li>
</ul>
<ol>
</ol>
A nostro parere questa via, che non prevede l'inserimento di codici extra, presenta dei limiti: per esempio, l'eventuale testo affiancato all'icona, ad eccezione di quello inserito nell'<i>Oggetto Testo</i>, non potrà avere un font diverso dal Font Awesome stesso.<br />
<br />
<br />
Passiamo ora al secondo metodo, quello che abbiamo utilizzato nella nostra <a href="http://quellidelcucuzzolo.altervista.org/demo/font-awesome-website-x5/" target="_blank">DEMO</a>.<br />
<br />
In <i>Impostazioni Avanzate</i>, <i>Statistiche SEO e Codice</i>, <i>Esperto </i>alleghiamo al progetto i file necessari:<br />
<ul>
<li>il file <span style="font-family: "courier new" , "courier" , monospace;">font-awesome.min.css</span> indicando la cartella <span style="font-family: "courier new" , "courier" , monospace;">css</span> come <i>Percorso relativo sul server</i> e <u>spuntando</u> la casella<i> Collega il file</i></li>
<li>tutti i font presenti nella cartella Fonts del file scompattato, indicando la cartella <span style="font-family: "courier new" , "courier" , monospace;">fonts</span> come <i>Percorso relativo sul server</i></li>
</ul>
Il modo più semplice per utilizzare, con questo metodo, le icone nel nostro progetto è inserire il codice HTML necessario dove il programma lo consente, ad esempio in un <i>Oggetto Codice HTML</i> o in un <i>Oggetto Testo</i> dopo aver abilitato il Codice HTML cliccando sul relativo pulsante della barra degli strumenti. La sintassi da usare è la seguente:<br />
<br />
<pre class="brush:html, toolbar:false"><i class="fa fa-comments-o" aria-hidden="true"></i>
</pre>
<br />
Le classi dell'elemento <span style="font-family: "courier new" , "courier" , monospace;"><i></span> identificano l'icona da visualizzare. Nella pagina <a href="http://fontawesome.io/icons/" target="_blank">Icons</a> sono presenti tutte le icone disponibili e il relativo codice da utilizzare.<br />
L'attributo <span style="font-family: "courier new" , "courier" , monospace;">aria-hidden</span> con valore <span style="font-family: "courier new" , "courier" , monospace;">true </span>serve per specificare che l'icona è un puro elemento decorativo, cioè non rappresenta un contenuto del sito, ma solo una rappresentazione grafica di un contenuto già presente. Questo è utile per favorire l'accessibilità del sito: in questo modo, infatti, ci si assicura che il carattere che rappresenta l'icona non venga letto dagli utenti che navigano con tecnologia assistita.<br />
L'uso del codice in un <i>Oggetto Testo</i> consente anche di formattare facilmente l'icona: selezionando il codice ed utilizzando la barra degli strumenti possiamo agevolmente impostarne il colore e la grandezza. Ma attenzione: è importante non andare a capo nella scrittura del codice HTML, onde
evitare l'inserimento di tag indesiderati da parte dell'editor
dell'<i>Oggetto Testo</i>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-5j9nQaBqUp0/WE1gx3FqJrI/AAAAAAAAA0I/KExuIt9cgA8aiPTAUCMwyzOlX8qZkH0GgCEw/s1600/awesome-testo.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="186" src="https://4.bp.blogspot.com/-Pft9NimI6ik/WE1-b8PiiqI/AAAAAAAAA0k/k2_1qFRNSK8MD0wm7Dn8t_HrQTPdFaCdgCLcB/s1600/fontawesome-oggetto-testo-wsx5.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<br />
E' possibile anche inserire delle classi opzionali:<br />
<ul>
<li><span style="font-family: "courier new" , "courier" , monospace;">fa-2x</span>,<span style="font-family: "courier new" , "courier" , monospace;"> fa-3x</span> ... per visualizzare le icone ingrandite il doppio, triplo, ecc rispetto alla grandezza del font impostata</li>
<li><span style="font-family: "courier new" , "courier" , monospace;">fa-pull-left,</span> <span style="font-family: "courier new" , "courier" , monospace;">fa-pull-right</span> per allineare a sinistra o a destra l'icona rispetto ad un blocco di testo</li>
</ul>
Altre possibili opzioni sono presenti nella pagina <a href="http://fontawesome.io/examples/" target="_blank">Examples</a> del sito ufficiale.<br />
<br />
Anche con questo metodo possiamo inserire le nostre icone in oggetti del programma in cui non è possibile scrivere codice HTML come, ad esempio, le etichette dell'<i>Oggetto Modulo Invio E-mail.</i><br />
Basterà individuare l'elemento su cui vogliamo agire ed utilizzarlo come selettore di una regola CSS che, grazie agli pseudo-elementi <a href="http://www.w3schools.com/cssref/sel_after.asp" target="_blank">::after</a> e <a href="http://www.w3schools.com/cssref/sel_before.asp" target="_blank">::before</a>, aggiunge un testo (nel nostro caso un'icona) prima o dopo l'elemento selezionato.<br />
<br />
Questa è la regola CSS generica, da inserire in <i>Proprietà Pagina</i>, <i>Esperto</i>, <i>Prima della chiusura del tag HEAD</i>:<br />
<pre class="brush:css, toolbar:false"><style>
/* inserisce il contenuto prima dell'elemento selezionato */
selettore::before {
content: '\f2c0 '; /* carattere Unicode che corrisponde all'icona */
font-family: 'FontAwesome';
}
/* inserisce il contenuto dopo l'elemento selezionato */
selettore::after {
content: '\f2c0 '; /* carattere Unicode che corrisponde all'icona */
font-family: 'FontAwesome';
}
</style>
</pre>
<br />
Dato che la proprietà <span style="font-family: "courier new" , "courier" , monospace;">content </span>non può avere come valore un codice HTML, poiché viene letto come stringa e non interpretato, non possiamo inserire il tag <span style="font-family: "courier new" , "courier" , monospace;"><i></span> con le relative classi. Possiamo però inserire il carattere, che corrisponde all'icona scelta, in formato Unicode preceduto da una barra retroversa (backslash); possiamo trovare questo valore sempre nella pagina <a href="http://fontawesome.io/icons/" target="_blank">Icons</a>, cliccando sull'icona scelta: <br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/-TAHi7ynGEiU/WE3IC0X1GMI/AAAAAAAAA00/Pnnxp29bjEgVTFZmxKPi84-EHFX4qKQAgCLcB/s1600/fontawesome-unicode.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="172" src="https://4.bp.blogspot.com/-TAHi7ynGEiU/WE3IC0X1GMI/AAAAAAAAA00/Pnnxp29bjEgVTFZmxKPi84-EHFX4qKQAgCLcB/s320/fontawesome-unicode.png" width="320" /></a></div>
<br />
<br />
A questo punto non resta che dare spazio alla fantasia...<br />
<br />
<br />MAeSIhttp://www.blogger.com/profile/03218272086256305663noreply@blogger.com0tag:blogger.com,1999:blog-7965877301845859013.post-30946958419197748622016-12-07T15:42:00.002+01:002017-01-04T16:39:01.017+01:00Blog Widget di WebSite X5 con effetto carousel sliderIn un <a href="https://quellidelcucuzzolo.blogspot.it/2016/11/commenti-guestbook-websitex5-pagina.html">articolo precedente</a> abbiamo utilizzato un effetto carousel slider per animare i commenti del guestbook inseriti in un'altra pagina.<br />
Lo stesso effetto si può applicare all'oggetto opzionale <i>Blog Widget</i> e anche allo script da noi pubblicato sull'<a href="http://www.unofficialwsx5.com/index.php?topic=1802.0" target="_blank">Unofficial forum</a> ormai un paio di anni fa, utilizzato fin dal template <a href="http://quellidelcucuzzolo.blogspot.it/2014/09/template-tamarillo-website-x5-10.html" target="_blank">Tamarillo per la versione 10</a> e costantemente aggiornato adeguandolo via via alle nuove versioni di WebSite X5.<br />
Ecco la nostra demo in cui sono presenti le due alternative:<br />
<br />
<div class="MS_esempio" style="padding-top: 25px;">
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://quellidelcucuzzolo.altervista.org/demo/blog-widget-slider-wsx5" target="_blank" title="Clicca per visualizzare la demo"><img alt="demo blog widget carousel slider" kasperskylab_antibanner="on" src="https://3.bp.blogspot.com/-9l3GTj9dyrE/WEgO9IO-vdI/AAAAAAAAAzY/tO3P1GJ0Xc8y2BRz80tNt8h4ywB4cpKmgCLcB/s1600/demo_blog_carousel.png" style="border: 0px none; margin-left: auto; margin-right: auto;" title="Clicca per visualizzare la demo" /></a></td></tr>
<tr><td class="tr-caption" style="color: #4c8efb; text-align: center;">DEMO </td></tr>
</tbody></table>
</div>
<br />
Sia che scegliate la prima o la seconda soluzione, per prima cosa dovete scaricare il plugin <i>OwlCarousel</i> dal <a href="http://owlcarousel2.github.io/OwlCarousel2/" target="_blank">sito ufficiale</a> oppure da <a href="http://quellidelcucuzzolo.altervista.org/demo/top-commenti-guestbook-website-x5/OwlCarousel2.zip" target="_blank">questo file</a> .zip, in cui abbiamo inserito solo i file necessari alla nostra implementazione; dovete quindi allegare al progetto i file <span style="font-family: "courier new" , "courier" , monospace;">owl.carousel.min.css</span>, <span style="font-family: "courier new" , "courier" , monospace;">owl.theme.default.min.css</span> e <span style="font-family: "courier new" , "courier" , monospace;">owl.carousel.js</span> utilizzando la scheda <i>Esperto </i>di un <i>Oggetto HTML</i> inserito nella pagina e <u>flaggando</u> l'opzione <i>Collega il file</i>.<br />
<br />
<h3 style="background-color: #ebebeb; padding: 4px; text-align: center;">
Blog Widget </h3>
<br />
In una pagina inseriamo l'oggetto <i>Blog Widget</i> del programma. In <i>Mappa</i>, <i>Proprietà Pagina</i>, <i>Esperto</i>, <i>Prima della chiusura del tag HEAD</i> inseriamo questo codice:
<br />
<pre class="brush:js, toolbar:false"><script>
$(document).ready(function() {
$(".post_container").addClass("owl-carousel owl-theme");
x5engine.boot.push(function() {
//owlCarousel e relative opzioni
var owl = $(".owl-carousel");
owl.owlCarousel({
items: 1,
loop: true,
margin: 10,
autoplay: true,
autoplayTimeout: 6000,
autoplayHoverPause: true
});
});
});
</script>
</pre>
Lo script si occupa di assegnare al div generato dall'oggetto <i>Blog Widget</i> le classi che servono per il funzionamento del plugin <i>OwlCarousel</i> e di richiamare il plugin stesso solo dopo che nella pagina sono stati caricati tutti i file JavaScript gestiti dal programma.<br />
Le opzioni del plugin <i>OwlCarousel</i> sono disponibili sul sito dell'autore.<br />
<br />
<h3 style="background-color: #ebebeb; padding: 4px; text-align: center;">
Script MAeSI</h3>
<br />
Ora ci occupiamo della seconda alternativa, fatta in casa.
Inseriamo nella pagina un oggetto <i>Codice HTML</i> contenente questo codice:<br />
<pre class="brush:html, toolbar:false"><!-- ultimi articoli blog -->
<div id="newsBlog"></div></pre>
<br />
Nella finestra <i>Proprietà Pagina</i>, <i>Sezione Esperto</i>, <i>Prima della chiusura del tag HEAD</i>, inseriamo questo codice:
<br />
<pre class="brush:js, toolbar:false, auto-links:false"><script>
/* =========================================================================================
Author's custom code: http://quellidelcucuzzolo.blogspot.it - Please do not remove credit
========================================================================================= */
var nNews = 3; //numero degli articoli del blog visibili
$(document).ready(function() {
var request = $.ajax({
type: "GET",
url: "blog/x5feed.php",
dataType: "xml"
});
request.done(parseXML);
request.fail(function() {
$("#newsBlog").text("Errore nel caricamento degli articoli del blog. Questa funzionalità è attiva solo dopo la pubblicazione del sito su Internet.");
});
// START owl carousel
request.always(function() {
$("#newsBlog").addClass("owl-carousel owl-theme");
var owl = $(".owl-carousel");
owl.owlCarousel({
items: 1,
loop: true,
margin: 10,
autoplay: true,
autoplayTimeout: 6000,
autoplayHoverPause: true
});
});
//END owl carousel
});
//lettura dati x5feed.php
function parseXML(xml) {
$(xml).find("item").each(function(index) {
var miadata = new Date($(this).find("pubDate").text());
var day = miadata.getDate();
var mese = miadata.getMonth() + 1;
var year = miadata.getFullYear();
var titolo = $.trim($(this).find("title").text());
var link = ($(this).find("link").text());
var articolo = $($(this).find("description").text());
var immagine = articolo.find("img").eq(0).attr("src");
var desc = articolo.text().substr(0, 250); //visualizza i primi 250 caratteri dell'articolo
var autore = $(this).find("author").text();
var tag = $(this).find("category[domain^='http']").text();
var tagImg = immagine ? "<div class='imgBlog'><img src='" + immagine + "' /></div>" : "";
// OUTPUT
var link_markup = "<div>"+
// immagine e titolo dell'articolo
"<div class='descBlog'>" + tagImg + " <div class='titoloBlog'>" + titolo + "</div>" +
// categoria
"<div class='dataBlog'><span><i class='fa fa-tag'> </i>" + tag + "</span>" +
// autore
"<span><i class='fa fa-user'> </i>" + autore + "</span>" +
//data
"<span><i class='fa fa-calendar'> </i>" + day + "/" + mese + "/" + year + "</span></div>" +
// testo e link leggi tutto
desc + "... <a class='imCssLink' href='" + link + "'>leggi tutto &raquo;</a></div>" +
"<div class='divisorio'></div></div>";
// inserimento output nel div contenuto nell'oggetto Codice HTML
$(link_markup).appendTo("#newsBlog");
if (index == (nNews - 1)) return false;
});
}
</script>
</pre>
Lo script utilizza i dati presenti nel file <i>x5feed.php</i>, file che il programma produce automaticamente e che lo script recupera attraverso una chiamata Ajax. Come detto all'inizio si possono trovare informazioni più dettagliate nel <a href="http://www.unofficialwsx5.com/index.php?topic=1802.0" target="_blank">topic</a> del forum Unofficial. L'assegnazione delle classi necessarie al funzionamento del plugin <i>OwlCarousel</i> e il richiamo alla funzione stessa vengono effettuati solo dopo che la chiamata Ajax è stata completata.<br />
E' possibile personalizzare il numero di articoli che si vogliono visualizzare, modificando il valore della variabile <span style="font-family: "courier new" , "courier" , monospace;">nNews</span>:<br />
<span style="font-family: "courier new" , "courier" , monospace;">var nNews = <span style="color: red;">3</span>; //numero degli articoli del blog visibili </span><br />
Anche la struttura dell'output, interamente commentato, può essere modificata a piacere. Facciamo notare che nel codice abbiamo inserito i tag propri per visualizzare le icone<i> Font Awesome</i>: per riprodurre fedelmente la nostra demo dobbiamo quindi anche scaricare dal <a href="http://fontawesome.io/" target="_blank">sito ufficiale</a> ed allegare al progetto tutti i file necessari. <br />
<br />
Ovviamente dobbiamo scrivere anche le regole CSS che stabiliscono l'aspetto dell'output. Queste sono le regole utilizzate nella nostra demo, completamente personalizzabili, inserite nella scheda <i>Esperto</i> dell'oggetto <i>Codice HTML</i>:
<br />
<pre class="brush:css, toolbar:false">div#newsBlog div.imgBlog {
float: left;
margin: 4px 20px 4px 0;
width: 100px;
}
div#newsBlog div.titoloBlog {
font-size: 12pt;
font-weight: bold;
margin-bottom: 5px;
}
div#newsBlog div.dataBlog {
font-size: 12px;
padding-top: 8px;
margin-bottom: 10px;
}
div#newsBlog div.dataBlog span {
margin-right: 10px;
}
div#newsBlog div.dataBlog i {
font-size: 14px;
margin-right: 4px;
}
</pre>
<br />
<b>Aggiornamento del 04/01/2017</b><br />
Di seguito il link allo script (MAeSI) modificato per visualizzare solo tot articoli di una determinata categoria del blog: <a href="http://quellidelcucuzzolo.altervista.org/demo/blog-widget-slider-wsx5/newsblogCat.txt" target="_blank">LINK</a><br />
Nello script bisogna personalizzare il valore della variabile <span style="font-family: "courier new" , "courier" , monospace;">cNews</span> inserendo il nome della categoria scelta.<br />
<br />
<br />
<br />
<br />MAeSIhttp://www.blogger.com/profile/03218272086256305663noreply@blogger.com41tag:blogger.com,1999:blog-7965877301845859013.post-64661496619251076212016-11-21T17:05:00.002+01:002020-08-07T15:50:13.835+02:00Layout a strisce orizzontali con WebSite X5 13: tips & tricksCreare un sito con un layout a strisce orizzontali, con la possibilità di aggiungere anche un effetto parallasse alle immagini di sfondo full width: queste sono due delle novità presenti nell'ultima release del software di casa <a href="https://www.incomedia.eu/" target="_blank">Incomedia</a>, <a href="http://www.websitex5.com/" target="_blank">WebSite X5 13</a>. <br />
Oggi ci siamo divertiti ad esplorare le potenzialità di queste nuove funzioni mettendoci, come sempre, lo zampino.
<br />
<br />
La struttura della pagina della versione 13 è diversa rispetto a quella della versione 12, quindi, per ottenere, ad esempio, la mappa di Google a tutto schermo, esempio fatto per la 12 in <a href="https://quellidelcucuzzolo.blogspot.it/2016/01/layout-strisce-orizzontali-website-x5-12.html">questo post</a>, non è più necessario intervenire con codice JavaScript spostando gli elementi al di fuori del <span face="" style="font-family: "courier new", "courier", monospace;">div </span>con <span face="" style="font-family: "courier new", "courier", monospace;">id imPage</span>, ma basta un semplice CSS che imposta al 100% la larghezza dei <span face="" style="font-family: "courier new", "courier", monospace;">div </span>contenuti nella riga.
<br />
In questa <a href="http://quellidelcucuzzolo.altervista.org/demo/layout-strisce-wsx5-13/" target="_blank">DEMO </a>(risoluzione desktop 960px) abbiamo inserito <b>a tutto schermo</b>, oltre alla mappa di Google, anche un link impostato su un'immagine con effetto parallasse.<br />
<br />
<br />
<h3 style="background-color: #ebebeb; padding: 4px; text-align: center;">
Oggetto Google Maps Full Width </h3>
<br />
Inseriamo l'<i>Oggetto Google Maps</i> in <i>Creazione della Pagina</i>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-So1knrLfgEI/WDIesDSoEgI/AAAAAAAAAyg/gdM0Y6h4IxsnQ1xrko4CmgRqqcZwKnQdgCLcB/s1600/demo_stile_righe.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" kasperskylab_antibanner="on" src="https://2.bp.blogspot.com/-So1knrLfgEI/WDIesDSoEgI/AAAAAAAAAyg/gdM0Y6h4IxsnQ1xrko4CmgRqqcZwKnQdgCLcB/s320/demo_stile_righe.png" width="260" /></a></div>
<br />
In <i>Proprietà Pagina</i> →<i> Esperto </i>→ <i>Prima della chiusura del tag HEAD</i> incolliamo questo CSS, sostituendo al numero <b><span style="color: #6aa84f;">3</span></b>, il numero della riga in cui abbiamo inserito l'<i>Oggetto Google Maps</i>:<br />
<pre class="brush:css; toolbar:false"><style>
#imPageRow_3 div, #imPageRow_3 iframe {
padding: 0;
width: 100% !important;
}
/* spazio laterale sotto i 480px */
@media (max-width: 480px){
#imPageRow_3 {
width: 92% !important;
}
}
</style>
</pre>
<br />
Nella nostra demo abbiamo inserito un oggetto per ogni riga ma se abbiamo unito, per esempio, più righe per impostare lo stesso stile grafico, il numero da personalizzare si dovrà calcolare dalla finestra "Stile delle Righe". Nella situazione seguente, il numero della riga dell'<i>Oggetto Google Maps</i> sarà il 2:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-YSWXv9M1EzE/WDSbpHsCLCI/AAAAAAAAAyw/c_TifUIaP7Y8RMdSJsGmJX6V-EwFU0thgCLcB/s1600/demo_stile_righe_2.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" kasperskylab_antibanner="on" src="https://2.bp.blogspot.com/-YSWXv9M1EzE/WDSbpHsCLCI/AAAAAAAAAyw/c_TifUIaP7Y8RMdSJsGmJX6V-EwFU0thgCLcB/s320/demo_stile_righe_2.png" width="260" /></a></div>
Un calcolo analogo va fatto anche se inseriamo un oggetto che si estende in verticale su più righe.<br />
Per layout più articolati, consigliamo l'uso degli "strumenti per sviluppatori" presenti ormai in ogni browser, per individuare con facilità il numero della riga da personalizzare.<br />
<br />
Nel codice è presente anche una media query che lascia uno spazio a destra della mappa per facilitare lo scorrimento della pagina a risoluzioni uguali o inferiori a 480px.<br />
<br />
<h3 id="linkparallax" style="background-color: #ebebeb; padding: 4px; text-align: center;">
Link immagine con effetto parallasse </h3>
<br />
Associare un link ad un'immagine utilizzata come sfondo in <a href="http://help.websitex5.com/it/v13/pro/aspetto_riga.htm" target="_blank"><i>Stile delle righe</i></a><span style="color: #6aa84f;"><b>,</b></span> impostata a tutto schermo, è relativamente semplice: basta inserire in <i>Creazione Pagina</i> un <i>Oggetto Immagine</i> contenente un'immagine trasparente ed associare ad essa un collegamento. Ma in questo modo il link non sarà attivo per tutta la larghezza della finestra del browser, ma solo nella parte che corrisponde alla larghezza del contenuto della pagina. Per estendere il link a tutto schermo possiamo quindi usare un CSS analogo a quello visto prima, da inserire sempre in <i>Proprietà Pagina</i> →<i> Esperto </i>→ <i>Prima della chiusura del tag HEAD</i>, sostituendo al numero <b><span style="color: #6aa84f;">1</span></b>, il numero della riga in cui abbiamo inserito l'<i>Oggetto Immagine</i>:<br />
<br />
<pre class="brush:css; toolbar:false"><style>
#imPageRow_1 div {
padding: 0;
width: 100% !important;
}
#imPageRow_1 img {
max-width:none;
height:300px;/* altezza dell'immagine trasparente */
}
</style>
</pre>
<br />
E' importante personalizzare il valore di <span face="" style="font-family: "courier new", "courier", monospace;">height </span>che deve corrispondere all'altezza dell'immagine trasparente inserita nell'<i>Oggetto Immagine</i>.<br />
<br />
Le possibilità non finiscono qui: nell'ultima riga della nostra demo abbiamo allargato a tutto schermo un <i>Oggetto Codice HTML</i>... e qui il limite è solo la fantasia.<br />
<br />
<br />
<br />MAeSIhttp://www.blogger.com/profile/03218272086256305663noreply@blogger.com20tag:blogger.com,1999:blog-7965877301845859013.post-45096279172832989772016-11-12T23:05:00.000+01:002020-08-07T15:29:44.517+02:00Visualizzare alcuni commenti del guestbook di WebSite X5 in un'altra paginaAncora la stessa fonte di ispirazione dell'<a href="https://quellidelcucuzzolo.blogspot.it/2016/10/campo-personalizzato-guestbook-websitex5.html">articolo precedente</a>, ancora lo stesso oggetto ma con un'altra variante: questo per noi è il "<i>periodo guestbook</i>" :)<br />
Un uso un po' particolare: i commenti più belli, scelti dal webmaster e visualizzati in un'altra pagina con un <i>effetto carousel</i>.<br />
Per la nostra demo, abbiamo trasformato il cucuzzolo in un ipotetico B&B frequentato da improbabili ma super clienti :) <br />
<br />
<div class="MS_esempio" style="padding-top: 25px;">
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://quellidelcucuzzolo.altervista.org/demo/top-commenti-guestbook-website-x5/" target="_blank" title="Clicca per visualizzare la demo"><img alt="top commenti guestbook" kasperskylab_antibanner="on" src="https://2.bp.blogspot.com/-dl1Ac_jiRek/WCY4n8JPMgI/AAAAAAAAAyA/TWHrLVXVhMUdLjtqM3qpD0dZMUyqJaqgwCLcB/s1600/demo_commenti_top.png" style="border: 0px none; margin-left: auto; margin-right: auto;" title="Clicca per visualizzare la demo" /></a></td></tr>
<tr><td class="tr-caption" style="color: #4c8efb; text-align: center;">DEMO </td></tr>
</tbody></table>
</div>
<br />
Vediamo ora la procedura per riprodurre questa demo, la quale richiede necessariamente l'edizione Professional di WebSite X5.<br />
<br />
<h3 style="background-color: #ebebeb; padding: 4px; text-align: center;">
Pagina guestbook </h3>
<br />
Per prima cosa inseriamo in una pagina del progetto un Oggetto Guestbook, scegliendo come metodo di salvataggio dei dati <i>Invia i dati ad un Database, </i>database precedentemente impostato in<i><i> </i>Gest</i><i>ione Dati</i> (al Passo 1 nella versione 13, al Passo 4 nella versione 12) utilizzando i dati di accesso forniti dal nostro provider.<br />
<br />
<h3 style="background-color: #ebebeb; padding: 4px; text-align: center;">
Pagina "Top comments"</h3>
<br />
Occupiamoci ora della pagina in cui visualizzeremo i commenti scelti da noi:<br />
<br />
<b>1. Oggetto Codice HTML</b><br />
Inseriamo nella pagina un <i>Oggetto Codice HTML</i> ed incolliamo il seguente codice:<br />
<pre class="brush:php; toolbar:false; auto-links:false"><div class="owl-carousel owl-theme">
<?php
/* ===============================================================
Database class: Copyright by Incomedia Srl http://incomedia.eu
Author's custom code: http://quellidelcucuzzolo.blogspot.it
Please do not remove credit
============================================================== */
//VARIABILI INIZIALI DA PERSONALIZZARE
//Inserire il nome della tabella del database
$qtable = "commentitop";
//inserire l'id del guestbook
$qgb = "x5gb45";
//CONNESSIONE
//Prelievo automatico dei dati inseriti nel programma
$qchiave = array_keys($imSettings['databases']);
$qdati = getDbData($qchiave[0]);
$qhost = $qdati['host'];
$quser = $qdati['user'];
$qpassword = $qdati['password'];
$qdatabase = $qdati['database'];
$qdb = new ImDb($qhost, $quser, $qpassword, $qdatabase);
if (!$qdb->testConnection())
die("Connessione non riuscita");
//SELECT DA PERSONALIZZARE
//Selezione dei commenti scelti
$qcomments = $qdb->query("SELECT * FROM $qtable WHERE postid='$qgb' AND commentid in(0,2,4) ORDER BY FIELD(commentid,2,4,0)");
//Selezione random dei commenti con voto 5
//$qcomments = $qdb->query("SELECT * FROM $qtable WHERE postid='$qgb' AND rating=5 ORDER BY RAND() LIMIT 3");
//OUTPUT
//Iterazione dell'array e creazione della struttura HTML
if ($qcomments) {
foreach ($qcomments as $val) {
echo '<div>' . "\n";
//OUTPUT data
$qdate = date_create($val['timestamp']);
echo '<div class="gb_timestamp">' . date_format($qdate, 'd-m-Y') . '</div>' . "\n";
//OUTPUT commento
echo '<div class="gb_body">' . $val['body'] . '</div>' . "\n";
//OUTPUT avatar
echo '<img class="gb_avatar" src="files/avatar.png" alt="avatar" />';
//OUTPUT nome
echo '<div class="gb_name">' . $val['name'] . '</div>' . "\n";
if ($val['url'] != '') {
//OUTPUT campo sito internet
echo '<div class="gb_url"><a class="imCssLink" href="' . $val['url'] . '" target="_blank">sito web</a></div>' . "\n";
//OUTPUT campo sito internet personalizzato
// echo '<div class="gb_url">' . str_replace('http://', '', $val['url']) . '</div>' . "\n";
}
//OUTPUT voto
if (isset($val['rating']) && $val['rating'] > 0) {
echo '<img class="gb_rater" src="files/star' . $val['rating'] . '.png" alt="' . $val['rating'] . ' stelle" />';
}
echo '</div>' . "\n";
}
}
//CHIUSURA DELLA CONNESSIONE
$qdb->closeConnection();
?>
</div>
</pre>
<br />
Le personalizzazioni nel codice riguardano:<br />
<ul>
<li style="padding-bottom: 0.5em;">i valori delle <b>VARIABILI INIZIALI</b>: la variabile <span style="font-family: "courier new" , "courier" , monospace;">$qtable</span> deve contenere il nome della tabella del database impostato nell'<i>Oggetto Guestbook</i>; la variabile <span style="font-family: "courier new" , "courier" , monospace;">$qgb </span>deve contenere l'id del guestbook - nel nostro esempio <span style="font-family: "courier new" , "courier" , monospace;">x5gb<b><span style="color: red;">45</span></b></span>. La parte variabile (in rosso) è il suffisso numerico che si può ricavare dal sorgente della pagina (numero presente nell'id dell'oggetto guestbook) oppure visualizzando i dati contenuti nel database con, ad esempio, phpMyAdmin (campo <span style="font-family: "courier new" , "courier" , monospace;">postid</span>):<br /><br />
<img alt="phpMyAdmin" kasperskylab_antibanner="on" src="https://4.bp.blogspot.com/-_4HDO7_HKZA/WCZA8kZDHvI/AAAAAAAAAyQ/Cwoboyiws7I7EKd9HpyJUjDj4W5Y6EXrQCLcB/s1600/postid_db.png" /><br /><br />La presenza della variabile <span style="font-family: "courier new" , "courier" , monospace;">$qgb</span> evita errori nel caso in cui la stessa tabella del database venga utilizzata per più guestbook.</li>
<li style="padding-bottom: 0.5em;">la <b>SELECT</b><br /> Nel codice abbiamo inserito due query alternative: la prima query, che è attiva e visibile nell'esempio, estrapola dal database un numero di commenti definito <span style="font-family: "courier new" , "courier" , monospace;">commentid in(<b><span style="color: red;">0,2,4</span></b>) </span>nell'ordine desiderato <span style="font-family: "courier new" , "courier" , monospace;"> ORDER BY FIELD (commentid,<b><span style="color: red;">2,4,0</span></b>)</span><br />Ogni numero corrisponde ad un commento identificato con il corrispondente valore del campo <span style="font-family: "courier new" , "courier" , monospace;">commentid</span> (vedi immagine precedente).<br /><br />L'altra query, commentata, richiama dal database tre commenti scelti a caso tra tutti i commenti con voto uguale a 5: in questo caso la personalizzazione può riguardare la condizione con cui si scelgono i commenti (<b><span style="color: red;"><span style="font-family: "courier new" , "courier" , monospace;">rater=5</span></span></b>) e il numero massimo di commenti da estrarre <span style="font-family: "courier new" , "courier" , monospace;">(</span><span style="font-family: "courier new" , "courier" , monospace;">LIMIT <span style="color: red;"><b>3</b></span></span>). Se volete rendere attiva questa query, dovete rimuovere la doppia barra (//) davanti alla variabile <span style="font-family: "courier new" , "courier" , monospace;">$qcomments</span> e, ovviamente, commentare quella precedente con lo stesso nome.<br />
</li>
<li>l'<b> OUTPUT </b><br /><ul>
<li><i><b>avatar</b></i>: potete personalizzare il valore dell'attributo <span style="font-family: "courier new" , "courier" , monospace;">src </span>sostituendo il nome del file immagine con quello dell'immagine da voi preparata e<b> </b>allegata al progetto tramite l'<i>Oggetto Codice HTML</i> stesso, scheda <i>Esperto</i>, impostando come <i>Percorso relativo sul server</i> la cartella <span style="font-family: "courier new" , "courier" , monospace;">files</span>. Nel nostro esempio abbiamo utilizzato questa immagine: <a href="http://quellidelcucuzzolo.altervista.org/demo/top-commenti-guestbook-website-x5/files/avatar.png" target="_blank">avatar.png</a></li>
<li><i><b>sito internet</b></i>: per questo campo abbiamo previsto una doppia alternativa: chi avesse personalizzato il campo come descritto in <a href="https://quellidelcucuzzolo.blogspot.it/2016/10/campo-personalizzato-guestbook-websitex5.html">questo articolo</a>, troverà nella riga commentata il codice da utilizzare.</li>
<li><i><b>voto</b></i>: per visualizzare le stelline corrispondenti alla valutazione presente nel commento<b>,</b> dovete preparare cinque immagini che rappresentano i cinque possibili voti. Particolare attenzione va rivolta al nome da attribuire a queste cinque immagini: devono obbligatoriamente presentare nel nome un suffisso numerico che va da 1 a 5. Nel nostro esempio abbiamo utilizzato questi nomi: <a href="http://quellidelcucuzzolo.altervista.org/demo/top-commenti-guestbook-website-x5/files/star1.png" target="_blank">star1.png</a>, <a href="http://quellidelcucuzzolo.altervista.org/demo/top-commenti-guestbook-website-x5/files/star2.png" target="_blank">star2.png</a>, <a href="http://quellidelcucuzzolo.altervista.org/demo/top-commenti-guestbook-website-x5/files/star3.png" target="_blank">star3.png</a>, ecc. Le immagini vanno allegate al progetto attraverso la scheda <i>Esperto </i>dell'<i>Oggetto Codice HTML</i> stesso, lasciando impostato come <i>Percorso relativo sul server </i>la cartella <span style="font-family: "courier new" , "courier" , monospace;">files</span>.</li>
</ul>
Ovviamente questa sezione può anche essere strutturata in modo completamente diverso in funzione del risultato che si vuole ottenere.</li>
</ul>
Non ci dobbiamo preoccupare di personalizzare i parametri per la connessione poiché il codice utilizza le funzioni già previste dal programma: l'unica accortezza consiste nel verificare che, nel caso in cui avessimo impostato i dati di più di un database, il database effettivamente utilizzato per memorizzare i commenti del guestbook sia il primo dell'elenco.<br />
<br />
<b>2. Oggetto Codice HTML Sezione Esperto</b><br />
In questa sezione possiamo inserire il codice CSS che definisce lo stile dei commenti. Ovviamente è tutto completamente personalizzabile.
<br />
<pre class="brush:css; toolbar:false">.gb_timestamp {
text-align: right;
color: gray;
padding: 6px;
}
.gb_avatar, .gb_rater {
width: auto !important;
}
.gb_body {
font-style: italic;
margin-bottom: 28px;
border-bottom: 5px solid #eee;
}
.gb_body:after {
border-bottom: 22px solid #fff;
border-left: 16px solid #eee;
content: "";
display: block;
height: 0;
left: 34px;
position: relative;
top: 27px;
width: 0;
}
.gb_avatar {
float: left;
margin-right: 12px;
}
.gb_name, .gb_url {
color: #bc360a;
margin-bottom: 4px;
}
.gb_name {
font-weight: bold;
}
</pre>
<br />
<b>3. Proprietà della pagina</b><br />
Visto che richiameremo i commenti dal database, la nostra pagina dovrà avere estensione <span style="font-family: "courier new" , "courier" , monospace;">.php</span> e dovrà richiamare il file <span style="font-family: "courier new" , "courier" , monospace;">x5engine.php</span>. Se la pagina contiene, ad esempio un <i>Oggetto Contenuto Dinamico</i> oppure un altro oggetto che determina l'impostazione automatica dell'estensione della pagina in <span style="font-family: "courier new" , "courier" , monospace;">.php</span>, non avremo bisogno di fare nulla, altrimenti dobbiamo impostare manualmente la giusta estensione della
pagina: nella <i>Mappa </i>apriamo la scheda <i>Proprietà Pagina</i> → <i>Esperto</i> e controlliamo che <i>Estensione del file generato </i>sia<i> php </i>e in <i>Codice personalizzato: Prima dell'apertura del tag
HTML</i> inseriamo questa riga di codice per richiamare il necessario file
<span style="font-family: "courier new" , "courier" , monospace;">x5engine.php</span><br />
<pre class="brush:php, toolbar:false"><?php require_once("res/x5engine.php"); ?>
</pre>
Il risultato finale, ovviamente, non è visualizzabile in anteprima. Per evitare che il codice PHP risulti visibile possiamo aggiungere questo script sempre nella sezione <i>Esperto</i>, <i>Codice personalizzato:</i> <i>Prima della chiusura del tag HEAD</i>
<br />
<pre class="brush:js, toolbar:false"><script>
//funzionalità offline
x5engine.boot.push(function (){
x5engine.utils.showOfflineMessage('Questa funzionalità è attiva solo dopo aver pubblicato il sito su Internet.','','');
$('.owl-carousel').css('display', 'none');
});
</script>
</pre>
<br />
A questo punto il progetto è pronto per essere esportato sul server, dove potremo vedere il risultato ottenuto: i commenti scelti risulteranno visibili uno sotto l'altro. Nella nostra demo abbiamo aggiunto un effetto carousel che permette di visualizzare i commenti in uno slider.<br />
<br />
<h3 style="background-color: #ebebeb; padding: 4px; text-align: center;">
Effetto carousel </h3>
<br />
L'effetto <i>carousel </i>è stato ottenuto utilizzando il plugin <a href="http://owlcarousel2.github.io/OwlCarousel2/" target="_blank">OwlCarousel</a>: potete scaricare i file del plugin dal sito ufficiale oppure da <a href="http://quellidelcucuzzolo.altervista.org/demo/top-commenti-guestbook-website-x5/OwlCarousel2.zip" target="_blank">QUI</a>, zip in cui abbiamo inserito solo i file necessari alla nostra implementazione. Alleghiamo i file <span style="font-family: "courier new" , "courier" , monospace;">owl.carousel.min.css</span>, <span style="font-family: "courier new" , "courier" , monospace;">owl.theme.default.min.css</span> e <span style="font-family: "courier new" , "courier" , monospace;">owl.carousel.js</span> al nostro progetto sempre nella scheda <i>Esperto</i> dell'<i>Oggetto Codice HTML</i> <u>flaggando</u> l'opzione <i>Collega il file</i>.<br />
In <i>Proprietà Pagina</i> → <i>Esperto </i>→ <i>Codice personalizzato: Prima della chiusura del tag HEAD</i> incolliamo questo codice:<br />
<br />
<pre class="brush:js, toolbar:false"><script>
$(document).ready(function(){
// owl carousel
var owl = $('.owl-carousel');
owl.owlCarousel({
items:1,
loop:true,
margin:10,
autoplay:true,
autoplayTimeout:8000,
autoplayHoverPause:true
});
});
</script></pre>
<br />
Il plugin prevede diverse opzioni personalizzabili: per esempio, noi abbiamo scelto di mostrare un solo commento alla volta (<span style="font-family: "courier new" , "courier" , monospace;">items:1</span>), abbiamo impostato l'avvio automatico (<span style="font-family: "courier new" , "courier" , monospace;">autoplay:true</span>) lo stop all'hover sul commento (<span style="font-family: "courier new" , "courier" , monospace;">autoplayHoverPause:true</span>), il tempo di visualizzazione di ogni commento espresso in millisecondi (<span style="font-family: "courier new" , "courier" , monospace;">autoplayTimeout:8000</span>).<br />
In ogni caso sul sito dell'autore si possono trovare tutte le opzioni disponbili.<br />
<br />
Forza, andate a commentare il guestbook! E, se volete essere inseriti nella <i>top comments</i> della nostra demo, siate <i>super cool</i>! <img alt="smile" kasperskylab_antibanner="on" src="https://testwsx5.altervista.org/files-qdc/img/smile.gif" /><br />
<br />
<br />MAeSIhttp://www.blogger.com/profile/03218272086256305663noreply@blogger.com7tag:blogger.com,1999:blog-7965877301845859013.post-32938866024215222016-10-23T00:06:00.003+02:002016-10-23T12:41:11.144+02:00Campo personalizzato nel form del guestbook di WebSite X5Questo articolo nasce da una richiesta postata sul <a href="http://www.unofficialwsx5.com/index.php?topic=2190.0" target="_blank">forum Unofficial</a> che riportiamo in sintesi:<br />
<blockquote class="tr_bq">
<i>Ho modificato al Passo 1 il nome del campo "Sito Internet" del guestbook in "Città". Il problema è che adesso
vorrei far vedere la città sotto al nome e le stelle di rating, una
volta compilato ed inviato il form.</i><br />
<i>E' possibile? </i></blockquote>
L'Oggetto Guestbook di WebSite X5 prevede un form con quattro campi: Nome, E-Mail, Messaggio - campi obbligatori - e il campo non obbligatorio Sito Internet. Da programma non è possibile cambiare né il tipo di campo né l'eventuale obbligatorietà dello stesso. Non è possibile nemmeno cancellare o inserire un nuovo campo.<br />
<br />
L'unica cosa possibile è cambiare l'etichetta dei campi, ma con un effetto limitato poiché le funzioni PHP che gestiscono la ricezione/memorizzazione/restituzione dei dati inviati attraverso il form prevedono un controllo sui dati ricevuti, dati che vengono rifiutati se non sono conformi a quelli previsti.<br />
<br />
Ad esempio possiamo cambiare l'etichetta "Sito Internet" in "Città" ma il file <span style="font-family: "courier new" , "courier" , monospace;">x5engine.php</span> non restituirà nei commenti il contenuto del campo se è assente il protocollo <span style="font-family: "courier new" , "courier" , monospace;">http://</span> o <span style="font-family: "courier new" , "courier" , monospace;">https:// </span><br />
<br />
Si potrebbe recuperare il contenuto di questo campo con funzioni che dipendono dal tipo di memorizzazione dei dati, salvataggio su file oppure nel database. In questa prova abbiamo cercato di raggirare l'ostacolo con un metodo indipendente dalla tipologia di raccolta dei dati scelta, in un modo forse un po' farraginoso ma funzionante, agendo lato client con l'uso di jQuery e abbiamo ottenuto questo risultato (versione 13.0.0.14):<br />
<br />
<div class="MS_esempio" style="padding-top: 25px;">
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://quellidelcucuzzolo.altervista.org/demo/campo-custom-guestbook-website-x5" target="_blank" title="Clicca per visualizzare la demo"><img alt="template tamarillo per website x5 12" kasperskylab_antibanner="on" src="https://4.bp.blogspot.com/-2Hi5Z3yh8yc/WAvhLAysu6I/AAAAAAAAAw0/0P9F-MEcbr02wcpwxtIyHordyfbloaanwCLcB/s1600/demo_campo_custom_guestbook.png" style="border: 0px none; margin-left: auto; margin-right: auto;" title="Clicca per visualizzare la demo" /></a></td></tr>
<tr><td class="tr-caption" style="color: #4c8efb; text-align: center;">DEMO </td></tr>
</tbody></table>
</div>
<br />
Vediamo ora come procedere.<br />
<br />
Da programma modifichiamo il nome del campo "Sito Internet" al <i>Passo 1, Impostazioni Generali</i> → <i>Lingua dei contenuti</i> → <i>id contenuto</i>: <span style="font-family: "courier new" , "courier" , monospace;">blog_website</span> inserendo l'etichetta da noi desiderata (per ulteriori informazioni si può consultare la <a href="http://help.websitex5.com/it/v13/pro/gestione_lingue_ht.htm" target="_blank">GUIDA </a>del programma).<br />
Si precisa che questo cambiamento varrà anche per il form dei commenti del blog.<br />
<br />
In <i>Proprietà Pagina</i> → <i>Esperto </i><i>→ Codice personalizzato</i> → <i>Prima della chiusura del tag HEAD</i> iniziamo con l'inserire questo codice CSS, ovviamente completamente personalizzabile, che ci consentirà di definire la formattazione del nuovo testo aggiunto al commento:<br />
<pre class="brush:css, toolbar:false, auto-links:false"><style>
.campoCustomGb {
font-weight: normal;
color: gray;
}
</style></pre>
Sempre nella stessa sezione, a seguire, inseriamo il codice JavaScript:<br />
<pre class="brush:js, toolbar:false, auto-links:false"><script>
/* ===============================================================
Author's custom code: http://quellidelcucuzzolo.blogspot.it
Please do not remove credit
============================================================== */
$(document).ready(function() {
var url = $("form[id^='x5gb'] div:nth-child(4)").clone();
$("form[id^='x5gb'] div:nth-child(4)").hide();
url.find("input").attr({
"id": "MSid",
"name": "MSname"
}).prev("label").attr("id", "MSlabel");
$("form[id^='x5gb'] div:nth-child(4)").after(url);
$("#MSid").blur(function() {
var customInput = $(this).val();
$("form[id^='x5gb'] input[name='url']").val("http://" + customInput);
})
$(".topic-comments-user").each(function() {
var $item = $(this).find("a");
if ($item.length != 0) {
var customCampo = $item.attr("href").replace("http://", "");
var customNome = $item.contents();
$item.replaceWith(customNome);
$(this).append("<div class='campoCustomGb'>" + customCampo + "</div>");
}
})
});
</script>
</pre>
<br />
Questo codice provvede a clonare il campo a cui abbiamo
modificato l'etichetta e a nasconderlo in modo che resti visibile solo
il nuovo campo clonato. Nel momento in cui l'utente scrive il testo nel
campo clonato, il codice si occupa di trasferire il suo contenuto nel
campo originario nascosto, quello che effettivamente invierà il suo valore al
server, anteponendovi il protocollo <span style="font-family: "courier new" , "courier" , monospace;">http://</span>, necessario per superare il controllo lato server.<br />
Ovviamente
nella mail di notifica dell'invio del commento che riceverà il gestore
del sito, il valore di questo campo conterrà questo prefisso.<br />
L'ultima
parte del codice si occupa di far visualizzare sopra la data del commento il nuovo testo.<br />
<br />
<div style="border-bottom: 1px dashed gray;">
</div>
<br />
<b>Nota:</b> nella demo abbiamo utilizzato anche <a href="http://www.unofficialwsx5.com/index.php?topic=1957.0" target="_blank">QUESTO</a> script per rendere il campo dell'indirizzo e-mail non obbligatorio.<br />
<br />
<br />MAeSIhttp://www.blogger.com/profile/03218272086256305663noreply@blogger.com2tag:blogger.com,1999:blog-7965877301845859013.post-30084892717432857842016-08-22T23:16:00.001+02:002016-10-21T17:39:26.788+02:00Effetto Vertical Sliding con gli oggetti di WebSite X5 12Quando abbiamo adattato per WebSite X5 il <a href="http://quellidelcucuzzolo.blogspot.it/2015/08/template-rectangle-website-x5-11.html">template Rectangle</a> ci siamo imbattuti in un bell'effetto vertical sliding di apertura delle varie sezioni della pagina, effetto che abbiamo riscritto a modo nostro anche per il nostro <a href="http://quellidelcucuzzolo.altervista.org/" target="_blank">attuale sito</a> su Altervista.<br />
<br />
In questo articolo cercheremo di spiegare come ottenere lo stesso risultato di questa nostra <a href="http://quellidelcucuzzolo.altervista.org/demo/vertical-sliding-website-x5/" target="_blank">DEMO</a>.<br />
<br />
Partiamo esaminando la struttura della pagina che prevede delle sezioni visibili all'apertura (nell'immagine sottostante circondate da un bordo rosso), altre nascoste (circondate da un bordo
blu) che si
visualizzano solo se richiamate al click, nascondendo a loro volta le sezioni in rosso con l'effetto vertical sliding, ed eventuali elementi sempre visibili (circondati da un bordo verde):<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-477xT0CKZ1o/V7oZXLVPwMI/AAAAAAAAAvM/WgGr7vtvGVc9a69tc5wYOhGAHQzkxDVVQCLcB/s1600/creazione_pag_v_sliding.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="259" kasperskylab_antibanner="on" src="https://2.bp.blogspot.com/-477xT0CKZ1o/V7oZXLVPwMI/AAAAAAAAAvM/WgGr7vtvGVc9a69tc5wYOhGAHQzkxDVVQCLcB/s320/creazione_pag_v_sliding.png" width="320" /></a></div>
<ul>
<li><b><span style="color: red;">Sezioni visibili all'apertura della pagina</span></b> (in rosso)<br /> Ogni sezione è costituita, nel nostro esempio, da un Oggetto Testo e contiene un link che apre la relativa sezione nascosta. Nell'Oggetto Testo corrispondente alla prima sezione abilitare il codice HTML ed inserire questo codice:<br />
<pre class="brush:html, toolbar:false, auto-links:false"><a class="MS_ButtonLink" href="#sezione1">APRI</a>
</pre>
Nell'Oggetto Testo corrispondente alla seconda sezione il codice varierà in questo modo:<br />
<pre class="brush:html, toolbar:false, auto-links:false"><a class="MS_ButtonLink" href="#sezione2">APRI</a>
</pre>
E così via per le altre due sezioni.</li>
<li><b><span style="color: blue;">Sezioni nascoste</span></b> (in blu)<br /> Inserire negli Oggetti Testo che verranno visualizzati solo al click, il codice per il pulsante di chiusura, sempre abilitando il codice HTML: <br />
<pre class="brush:html, toolbar:false, auto-links:false"><span class="MS_Close">CHIUDI</span></pre>
<br />
</li>
</ul>
Al posto degli Oggetti Testo si possono utilizzare anche altri tipi di
oggetti: in questo caso il codice per i pulsanti può essere inserito nel
<i>Titolo </i>o nella <i>Descrizione della Cella</i>. <br />
<br />
Ora ci spostiamo in <i>Proprietà Pagina</i>, <i>Esperto</i>, <i>Prima della chiusura del tag HEAD </i>ed inseriamo questo<i> </i>semplice CSS, completamente personalizzabile, per la formattazione dei pulsanti di apertura e di chiusura:<br />
<pre class="brush:css, toolbar:false, auto-links:false"><style>
.MS_ButtonLink, .MS_Close {
background-color: #ff6600;
color: #fff;
text-decoration: none;
padding: 4px 8px;
cursor: pointer;
}
</style></pre>
Sempre nella stessa sezione, a seguire, inseriamo questo script che permette di gestire la visibilità e l'animazione degli oggetti:<br />
<pre class="brush:js, toolbar:false, auto-links:false"><script>
/* =========================================================================================
Author's custom code: http://quellidelcucuzzolo.blogspot.it - Please do not remove credit
========================================================================================= */
$(document).ready(function() {
//classi ai div
$("#imGroup_1 > div").each(function(index) {
if ($(this).hasClass("imHGroup") || $(this).hasClass("imEGroup")) $(this).addClass("row" + (index + 1));
else {
$(this).wrap("<div class='row" + (index + 1) + "' style='width: 100%;'></div>");
}
})
//PARTE DA PERSONALIZZARE
//sezioni visibili all'apertura della pagina
$(".row1, .row2").wrapAll("<div class='MScontent'></div>");
//sezioni nascoste
$(".row3").addClass("sezione1");
$(".row4").addClass("sezione2");
$(".row5").addClass("sezione3");
$(".row6").addClass("sezione4");
$(".MScontent > div").css("float", "left");
$("div[class*='sezione']").hide();
//animazione
$(".MS_ButtonLink").click(function() {
var id = $(this).attr("href").slice(1);
$("html, body").animate({
scrollTop: 100
}, 500);
$("div.MScontent").slideUp("slow");
$("." + id).slideDown("slow");
return false;
});
$(".MS_Close").click(function() {
$("div[class*='sezione']").slideUp("slow");
$("div.MScontent").slideDown("slow");
});
});
</script>
</pre>
<br />
A questo punto abbiamo riprodotto fedelmente la nostra demo. Per poter capire il funzionamento e fare eventuali modifiche, entriamo nel merito del codice JavaScript utilizzato.<br />
La prima parte dello script, con commento <span style="font-family: "courier new" , "courier" , monospace;"><b><span style="color: #38761d;">//classi ai div</span></b></span> si occupa di assegnare, ai div che il programma genera per circondare gli oggetti che inseriamo sulle righe nella griglia della pagina, una classe <span style="font-family: "courier new" , "courier" , monospace;">row </span>con un numero crescente come suffisso, numero che corrisponde ai numeri delle righe presenti in <i>Creazione della Pagina</i>. <br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-L5YYqo5iMqc/V7tXZgfe4YI/AAAAAAAAAvo/jIKIt3ZBOoEEs6Lag74TKk--G0S62wp3QCLcB/s1600/creazione_pag_v_sliding2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="259" kasperskylab_antibanner="on" src="https://2.bp.blogspot.com/-L5YYqo5iMqc/V7tXZgfe4YI/AAAAAAAAAvo/jIKIt3ZBOoEEs6Lag74TKk--G0S62wp3QCLcB/s320/creazione_pag_v_sliding2.png" width="320" /></a></div>
<br />
Se però nella griglia fossero presenti oggetti che occupano più di una riga, la numerazione delle classi <span style="font-family: "courier new" , "courier" , monospace;">row</span> cambierebbe in questo modo:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-NXA1VXbSuMA/V7tXd5PREoI/AAAAAAAAAvs/U5r9_8YT0UY3716Bj8Ag3wnAXg1z5uLQQCLcB/s1600/creazione_pag_v_sliding3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="259" kasperskylab_antibanner="on" src="https://3.bp.blogspot.com/-NXA1VXbSuMA/V7tXd5PREoI/AAAAAAAAAvs/U5r9_8YT0UY3716Bj8Ag3wnAXg1z5uLQQCLcB/s320/creazione_pag_v_sliding3.png" width="320" /></a></div>
<br />
Questa parte del codice è utilizzata anche nello script per ottenere le strisce orizzontali descritto in <a href="https://quellidelcucuzzolo.blogspot.it/2016/01/layout-strisce-orizzontali-website-x5-12.html" target="_blank">questo articolo</a> quindi, chi ne facesse già uso, deve ometterla.<br />
<br />
La parte centrale del codice, con commento <span style="font-family: "courier new" , "courier" , monospace;"><b><span style="color: #38761d;">//PARTE DA PERSONALIZZARE</span></b></span> deve essere modificata in funzione del numero e della posizione degli oggetti a cui applicare l'effetto. <br />
Nella parte di codice che riguarda le <span style="color: red;">sezioni che devono risultare visibili all'apertura della pagina</span>, indicare le classi <span style="font-family: "courier new" , "courier" , monospace;">row </span>in cui sono collocate: <br />
<pre class="brush:js, toolbar:false, auto-links:false"> $(".row1, .row2").wrapAll("<div class='MScontent'></div>");
</pre>
<br />
Identifichiamo quindi le classi <span style="font-family: "courier new" , "courier" , monospace;">row </span>in cui sono collocati <span style="color: blue;">gli oggetti nascosti</span> ed associamoli alla corrispondente sezione visibile indicando il valore dell'attributo <span style="font-family: "courier new" , "courier" , monospace;">href </span>(privo del cancelletto) che abbiamo precedentemente scritto nel relativo pulsante APRI:
<br />
<pre class="brush:js, toolbar:false, auto-links:false"> $(".row3").addClass("sezione1");
$(".row4").addClass("sezione2");
$(".row5").addClass("sezione3");
$(".row6").addClass("sezione4");
</pre>
<br />
L'ultima parte del codice si occupa dell'animazione: il valore <span style="font-family: "courier new" , "courier" , monospace;">scrollTop:100</span> indica la posizione della barra di scroll al termine dell'animazione e deve essere adeguato all'altezza dell'header o comunque regolato a piacere.
<br />
<br />
<br />
<b>Nota:</b> il valore dell'attributo <span style="font-family: "courier new" , "courier" , monospace;">href</span> del pulsante APRI deve essere costituito dal prefisso <u><b>obbligatorio</b></u> "<span style="font-family: "courier new" , "courier" , monospace;">#sezione</span>" seguito da numeri o lettere o parole che identificano in modo univoco la sezione.<br />
<br />
<br />MAeSIhttp://www.blogger.com/profile/03218272086256305663noreply@blogger.com30tag:blogger.com,1999:blog-7965877301845859013.post-86484681994182368192016-07-24T17:41:00.002+02:002016-07-24T17:42:07.296+02:00Template Tamarillo per WebSite X5 Evolution e Professional 12Era da molto tempo che non adattavamo un template per WebSite X5, un po' per la sottile amarezza che deriva dal ritrovare i nostri adattamenti in vendita in altri luoghi, un po' perché, diciamolo francamente, è un lavoro molto lungo.<br />
<a href="http://quellidelcucuzzolo.blogspot.it/2014/09/template-tamarillo-website-x5-10.html">Tamarillo</a> è il primo template che abbiamo proposto su questo blog: lo abbiamo riadattato <u>ex novo</u> per la versione 12 (Evolution e Professional) liberamente rivisto e corretto a nostro gusto.<br />
<br />
Il <a href="http://www.templatemo.com/tm-399-tamarillo" target="_blank">template originale</a> è rilasciato sotto licenza <a href="https://creativecommons.org/licenses/by/4.0/deed.it" target="_blank">Creative Commons 4.0</a>. Per quanto riguarda il nostro adattamento leggi i <a href="http://quellidelcucuzzolo.blogspot.it/p/terms-of-use.html">termini di utilizzo</a>.<br />
<br />
<div class="MS_esempio" style="padding-top: 25px;">
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://quellidelcucuzzolo.altervista.org/templates/tamarillo12/" target="_blank" title="Clicca per visualizzare la demo"><img alt="template tamarillo per website x5 12" kasperskylab_antibanner="on" src="https://2.bp.blogspot.com/-TqfvJDSdvj0/V5TPAL4Ic9I/AAAAAAAAAu4/YLfp08OEzQIKl1qmtDdc_7XMrKZTtOOOACLcB/s1600/tamarillo12-preview.png" style="border: 0px none; margin-left: auto; margin-right: auto;" title="Clicca per visualizzare la demo" /></a></td></tr>
<tr><td class="tr-caption" style="color: #4c8efb; text-align: center;">DEMO </td></tr>
</tbody></table>
</div>
<br />
Rispetto all'originale abbiamo previsto alcuni elementi a schermo intero: la slider iniziale e la fascia di sfondo della sezione <i>Contact</i>, ottenuta utilizzando lo script descritto in <a href="http://quellidelcucuzzolo.blogspot.it/2016/01/layout-strisce-orizzontali-website-x5-12.html">questo articolo</a>.<br />
<br />
Come nell'adattamento per la versione 10, la sezione <i>Blog</i> della Home Page visualizza gli ultimi articoli inseriti nel blog del programma: a partire dallo script illustrato in <a href="http://www.unofficialwsx5.com/index.php?topic=1802.0" target="_blank">questo topic</a> sull'Unofficial abbiamo modificato i codici JavaScript e CSS, integrando le media queries per la visualizzazione responsive. Si precisa che questa funzionalità è fruibile solo online.<br />
<br />
Anche in questo adattamento abbiamo integrato la stessa gallery del template originale con un oggetto HTML, apportando alcune modifiche per la visualizzazione in modalità responsive.<br />
<br />
Nel progetto è stato utilizzato il Google Font "<a href="https://www.google.com/fonts/specimen/Open+Sans" target="_blank">Open Sans</a>". Per integrare il Google Font, prima di importare il progetto, occorre inserire il relativo file <span style="font-family: "courier new" , "courier" , monospace;">.ttf</span> nella sezione "Preferenze" del programma. Oltre che da Google Font, è possibile scaricare il file da <a href="http://quellidelcucuzzolo.altervista.org/templates/tamarillo12/open_sans.zip">QUI</a>. <br />
<br />
Questo il codice @import da noi utilizzato:<br />
<br />
<pre class="brush:css, toolbar:false, auto-links:false">@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,300,800);</pre>
<br />
Nella pagina download sono presenti i file <span style="font-family: "courier new" , "courier" , monospace;">.iwzip</span> da scaricare sia per la Evolution che per la Professional:<br />
<div style="text-align: center;">
<a href="http://quellidelcucuzzolo.altervista.org/templates/tamarillo12/download.php" target="_blank">DOWNLOAD</a> </div>
<br />
Tutti i blocchi di codice personalizzato, inseriti nelle sezioni previste dal programma e nei files <span style="font-family: "courier new" , "courier" , monospace;">custom.css</span>, <span style="font-family: "courier new" , "courier" , monospace;">custom.js</span>, <span style="font-family: "courier new" , "courier" , monospace;">customHome.css</span> e <span style="font-family: "courier new" , "courier" , monospace;">customHome.js </span>sono commentati per permettere una facile lettura ed eventuale modifica.<br />
<br />
<div id="modificaCustom">
</div>
Visto che abbiamo ricevuto molte richieste di delucidazioni su come
procedere per modificare questi file, approfittiamo di questo articolo
per spiegare la semplice procedura: premesso che questi file si trovano nelle cartelle <span style="font-family: "courier new" , "courier" , monospace;">css</span> e <span style="font-family: "courier new" , "courier" , monospace;">js</span> del progetto (esempio: Documenti\Incomedia\WebSite X5 v12 - Evolution\tamarillo_evo12\Preview\css) per prima cosa dobbiamo copiare in un'altra cartella il file da modificare, eseguire le modifiche e salvare il file. Al <i>Passo 4 - Statistiche, SEO e Codice - Esperto - File allegati al codice</i>, rimuoviamo il vecchio file ed alleghiamo quello modificato.<br />
<br />
Se si vuole inserire nel menu un link ad una pagina diversa dalla home, seguire le indicazioni del punto 1 di questo articolo: <a href="http://quellidelcucuzzolo.blogspot.it/2015/03/template-tamarillo-menu-link-esterno.html">quellidelcucuzzolo.blogspot.it/2015/03/template-tamarillo-menu-link-esterno.html</a> <br />
<br />
<br />
<br />
<br />MAeSIhttp://www.blogger.com/profile/03218272086256305663noreply@blogger.com92tag:blogger.com,1999:blog-7965877301845859013.post-58438150531835177712016-06-06T15:31:00.000+02:002016-06-23T15:10:03.833+02:00Aggiungere un'icona ai commenti del guestbook e del blog di WebSite X5Oggi ci siamo divertiti ad inserire un'icona vicino al nome di chi scrive un commento utilizzando il guestbook o il blog di WebSite X5 12. Non un'icona qualsiasi ma la prima lettera del nick o nome del commentatore in stile app di Gmail.<br />
Qui la nostra demo:<br />
<br />
<div class="MS_esempio" style="padding-top: 25px;">
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://quellidelcucuzzolo.altervista.org/demo/icone-commenti-website-x5/" target="_blank" title="Clicca per visualizzare la demo"><img alt="demo icona commenti guestbook blog ws x5" src="https://3.bp.blogspot.com/-baLb7qCRUAc/V1V9c67bcGI/AAAAAAAAAt4/wL0uCMtT5vQlN7jTKr30-tZ5-gWj57idQCLcB/s1600/demo_icone_commenti.png" style="border: 0px none; margin-left: auto; margin-right: auto;" title="Clicca per visualizzare la demo" /></a></td></tr>
<tr><td class="tr-caption" style="color: #4c8efb; text-align: center;">DEMO </td></tr>
</tbody></table>
</div>
<br />
Per riprodurre la nostra demo questi sono i semplici passi da seguire:<br />
<ol>
<li>Nella <i>Sezione Esperto</i> → <i>Prima della chiusura del tag HEAD</i> in <i>Proprietà Pagina</i> del guestbook e/o del blog inseriamo questo codice CSS:<br />
<pre class="brush:css, toolbar:false"><style>
.letterIcon {
width: 50px;
height: 50px;
text-transform: uppercase;
border-radius: 50%;
color: white;
float: left;
font-family: Verdana, Geneva, sans-serif;
font-size: 39px;
margin-right: 10px;
text-align: center;
}
</style></pre>
Queste regole CSS impostano lo stile grafico delle nostre icone, ad esclusione del colore di sfondo, e sono tutte personalizzabili.<br />
</li>
<li>Sempre nella stessa sezione inseriamo anche il codice JavaScript che si occupa di creare le icone con un colore di sfondo casuale:<br />
<pre class="brush:js; toolbar:false; auto-links:false"><script>
/* ===============================================================
Author's custom code: http://quellidelcucuzzolo.blogspot.it
Please do not remove credit
============================================================== */
var colori = ['6633ff', '3366ff', '33ccff', '3d00f5'];
var nColori = colori.length;
$(document).ready(function() {
$('.topic-comment').prepend('<div class="letterIcon"></div>');
$('.topic-comments-user span[itemprop="name"]').each(function() {
var bgColor = colori[Math.floor(Math.random() * nColori)];
var nome = $(this).text().trim().substr(0, 1);
$(this).parents('div.topic-comments-user').prev().text(nome).css('background-color', '#' + bgColor);
});
});
</script>
</pre>
<br />
Per prima cosa definiamo nell'array <span style="font-family: "courier new" , "courier" , monospace;">colori </span>i codici esadecimali dei colori che faranno da sfondo alle nostre icone:<br />
<pre class="brush:js; toolbar:false; auto-links:false">var colori = ['6633ff', '3366ff', '33ccff', '3d00f5'];</pre>
Per comodità di scrittura ne abbiamo indicati solo quattro, ma ne potete aggiungere quanti ne volete, <u>senza</u> il simbolo cancelletto (#), separati da virgole e racchiusi tra apici singoli.<br />
Il codice si occupa quindi di creare un <span style="font-family: "courier new" , "courier" , monospace;">div </span>con classe <span style="font-family: "courier new" , "courier" , monospace;">letterIcon </span>in cui inserire automaticamente il primo carattere del nome o del nick di chi ci ha lasciato un commento.<br />
Il colore di sfondo di ogni icona viene scelto in modo casuale, tra quelli che abbiamo definito nell'array <span style="font-family: "courier new" , "courier" , monospace;">colori<span style="font-family: inherit;"></span></span>, <b>ad ogni caricamento della pagina </b>grazie al metodo <span style="font-family: "courier new" , "courier" , monospace;">Math.random()</span> il cui funzionamento è già stato descritto in <a href="http://quellidelcucuzzolo.blogspot.it/2014/02/visualizzare-frasi-random-javascript.html">questo post</a>.</li>
</ol>
<br />
Se vogliamo utilizzare lo script per più pagine possiamo ovviamente scrivere i codici in <i>Impostazioni Avanzate</i> → <i>Statistiche, SEO e Codice</i> → <i>Esperto </i>→ <i>Prima della chiusura del tag HEAD.</i><br />
<br />
A partire da questo semplice script si possono creare numerose varianti per esempio creare un array associativo lettere → colori in modo che ad ogni lettera corrisponda un determinato colore di sfondo... o quanto la vostra fantasia vi suggerisce.<br />
<br />
<div style="border-bottom: 1px dashed gray;">
</div>
<br />
<b>Nota:</b> nella demo abbiamo utilizzato anche <a href="http://www.unofficialwsx5.com/index.php?topic=1957.0" target="_blank">QUESTO</a> script per rendere il campo dell'indirizzo e-mail non obbligatorio.<br />
<br />
<b><br /></b>
<b> </b><br />
<b>Aggiornamento del 23/06/2016:</b><br />
<ul>
<li>Fixato script per l'uso del campo Sito Internet</li>
</ul>
<br />
<i><br /></i> <br />
<i><br /></i> MAeSIhttp://www.blogger.com/profile/03218272086256305663noreply@blogger.com2tag:blogger.com,1999:blog-7965877301845859013.post-79508877456837542702016-05-20T22:39:00.000+02:002016-05-21T16:44:42.249+02:00PHP: creare dinamicamente un elenco ordinabile di file contenuti in una cartellaNella creazione di un sito ci si può imbattere nella necessità di gestire un insieme di documenti liberamente scaricabili dagli utenti. Di per sé la realizzazione è semplice: una cartella sul server che contiene i file ed una pagina con tanti tag <span style="font-family: "courier new" , "courier" , monospace;"><a></span> quanti sono i documenti da scaricare. Ma, ad ogni nuovo inserimento o rimozione, saremmo costretti a mettere mano al codice HTML della pagina.<br />
Per automatizzare il tutto ci sono varie soluzioni. Oggi vi mostreremo un metodo semplice, che non richiede l'uso del database, per visualizzare dinamicamente in una tabella un insieme di documenti scaricabili contenuti in un'unica cartella, con la possibilità di ordinare i documenti in base alla data, al nome o alle dimensioni dei file.<br />
<br />
Per realizzare il nostro intento utilizzeremo, come abbiamo già visto in <a href="http://quellidelcucuzzolo.blogspot.it/2015/01/php-lettura-dinamica-immagini-cartella.html" target="_blank">questo articolo</a>, la funzione <span style="font-family: "courier new" , "courier" , monospace;">glob()</span> di PHP grazie a cui è possibile memorizzare in un array i nomi dei file, con estensioni da noi specificate, contenuti in una cartella.<br />
<br />
Qui la demo:<br />
<br />
<div class="MS_esempio" style="padding-top: 25px;">
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://quellidelcucuzzolo.altervista.org/demo/php-elenco-file/" target="_blank" title="Clicca per visualizzare la demo"><img alt="download elenco file" src="https://4.bp.blogspot.com/-4QQNSpsaYj0/Vz4ePGj0n5I/AAAAAAAAAtU/keQ-1dRUEWcK6XSmKLb_WvUVeiZWAe9XwCLcB/s1600/demo_download_elenco_file.png" style="border: 0px none; margin-left: auto; margin-right: auto;" title="Clicca per visualizzare la demo" /></a></td></tr>
<tr><td class="tr-caption" style="color: #4c8efb; text-align: center;">DEMO </td></tr>
</tbody></table>
</div>
<br />
Questo il codice HTML e PHP utilizzato per generare dinamicamente la tabella della nostra demo:<br />
<br />
<pre class="brush:php; toolbar:false; auto-links:false"><table id="fileTable">
<thead>
<tr>
<th>Data</th>
<th>Nome</th>
<th>Dim.</th>
<th class="no-order">&darr;</th>
</tr>
</thead>
<tbody>
<?php
/* ===============================================================
Author's custom code: http://quellidelcucuzzolo.blogspot.it
Please do not remove credit
============================================================== */
foreach (glob("nomecartella/*.{doc,pdf,docx,xls}", GLOB_BRACE) as $filename) {
$nomefile = pathinfo($filename); //array contenente nome, estensione e percorso del file
$timefile = filemtime($filename); //data in timestamp
$modifica = date("d/m/Y", $timefile); //data in formato dd/mm/yyyy
$peso = round(filesize($filename) / 1024); //dimensioni del file arrotondate ai KB
echo "<tr>
<td data-ordina='$timefile'>$modifica</td>
<td class='nomefile' data-ordina='$nomefile[basename]'>$nomefile[basename]</td>
<td class='size' data-ordina='$peso'>$peso KB</td>
<td>
<a href='$filename' title='Scarica il file' download><img src='img/d-icon.png' alt='icona download' /></a>
</td>
</tr>
";
}
?>
</tbody>
</table></pre>
<br />
I parametri passati alla funzione <span style="font-family: "courier new" , "courier" , monospace;">glob()</span>sono da personalizzare e si riferiscono al nome della cartella in cui sono inseriti i documenti (in rosso) e alle estensioni dei file scaricabili (in blu, separate da virgole):<br />
<br />
<span style="font-family: "courier new" , "courier" , monospace;">glob("<b><span style="color: red;">nomecartella</span></b>/*.{<span style="color: blue;"><b>doc</b>,<b>pdf</b>,<b>docx</b>,<b>xls</b></span>}", GLOB_BRACE)</span><br />
<br />
La forzatura del download dei file è stata affidata all'attributo HTML5 <a href="http://www.w3schools.com/tags/att_a_download.asp" target="_blank"><span style="font-family: "courier new" , "courier" , monospace;">download</span></a> (si fa presente che non è compatibile con tutti i browser).<br />
<br />
Per rendere ordinabili i documenti visualizzati abbiamo utilizzato lo script <a href="http://tinysort.sjeiti.com/" target="_blank">TinySort</a>, che nasce come plugin jQuery ma che è stato successivamente riscritto
dall'autore in JavaScript per renderlo indipendente e più snello. Occorre quindi scaricare dal sito dell'autore (oppure dalla nostra demo) il file <a href="http://tinysort.sjeiti.com/dist/tinysort.min.js" target="_blank">tinysort.min.js</a> e richiamarlo nella pagina.<br />
Per poter applicare lo script TinySort ad una tabella, nella documentazione dell'autore, viene proposto un codice JavaScript aggiuntivo, codice che, per semplicità nostra, non conoscendo a fondo JavaScript puro, abbiamo riconvertito in jQuery in modo da poterlo personalizzare più facilmente in base alle nostre necessità.<br />
Si rende quindi necessario caricare preventivamente nella pagina anche la libreria <a href="https://jquery.com/" target="_blank">jQuery</a>.<br />
<br />
Questo lo script da inserire in head:<br />
<pre class="brush:js; toolbar:false; auto-links:false"><script>
$('document').ready(function() {
var totale = $('#fileTable tbody tr').length;
$('#totale').text(totale);
$('#fileTable th:not(".no-order")').click(function() {
var tableHeaderIndex = $(this).index();
var order = $(this).attr('data-order') === 'asc' ? 'desc' : 'asc';
$(this).attr('data-order', order);
$(this).siblings().attr('data-order', '');
tinysort(
'#fileTable tbody tr', {
selector: 'td:nth-child(' + (tableHeaderIndex + 1) + ')',
data: 'ordina',
order: order
}
);
});
});
</script>
</pre>
<br />
Nello script originale, di default, i dati vengono ordinati in base al testo contenuto nei tag utilizzati come selettori. Nel nostro caso
la data, visualizzata in formato umanamente leggibile, non è
utilizzabile per l'ordinamento. Abbiamo allora scelto l'opzione di ordinamento per attributo, impostando, nel codice PHP (presentato sopra) che genera la tabella, un attributo <span style="font-family: "courier new" , "courier" , monospace;">data-ordina</span> che contiene il valore che deve essere utilizzato per l'ordinamento.<br />
Abbiamo aggiunto alle intestazioni di colonna delle icone di background indicanti il verso
dell'ordinamento, icone che cambiano in funzione dello stato della
colonna:
<a href="http://quellidelcucuzzolo.altervista.org/demo/php-elenco-file/img/a-up-down.png" target="_blank">colonna non ordinata</a>, <a href="http://quellidelcucuzzolo.altervista.org/demo/php-elenco-file/img/a-up.png" target="_blank">colonna ordinata in senso crescente</a>,
<a href="http://quellidelcucuzzolo.altervista.org/demo/php-elenco-file/img/a-down.png" target="_blank">colonna ordinata in senso decrescente.</a><br />
Nella variabile <span style="font-family: "courier new" , "courier" , monospace;">totale </span>viene memorizzato il numero delle righe presenti nella tabella, quindi il numero dei documenti disponibili, che è visualizzato a inizio pagina.<br />
<br />
Le regole CSS utilizzate per formattare la tabella sono ovviamente personalizzabili. In particolare sottolineamo che, a risoluzioni inferiori a 480px, la tabella si linearizza e le intestazioni di colonna hanno come unica funzione quella dell'ordinamento. <br />
<br />
In rete potete trovare numerosi codici alternativi a quello da noi qui presentato per visualizzare i file contenuti in una cartella. Ne riportiamo alcuni da cui è possibile prendere ulteriori idee:<br />
<ul>
<li><a href="http://www.giacobbe85.altervista.org/down/info/Programmi_e_script/Elenco_di_file_e_sottocartelle_con_link.php" target="_blank">Elenco di file e sottocartelle con link </a></li>
<li><a href="http://encode-explorer.siineiolekala.net/" target="_blank">Encode Explorer</a></li>
<li><a href="https://sourceforge.net/projects/dir-list/" target="_blank">dirLIST - PHP Directory Lister</a></li>
</ul>
<br />
<br />
<br />MAeSIhttp://www.blogger.com/profile/03218272086256305663noreply@blogger.com20tag:blogger.com,1999:blog-7965877301845859013.post-38370725744741036212016-05-07T22:28:00.000+02:002016-07-02T16:47:52.249+02:00Animare gli oggetti di WebSite X5 con la libreria Animate.css<ol>
</ol>
La libreria <a href="https://github.com/daneden/animate.css" target="_blank">Animate.css</a> è una collezione di animazioni CSS3 facilmente integrabile in un sito web. Basta aggiungere due classi all'elemento che si vuole animare, una generica (<span style="font-family: "courier new" , "courier" , monospace;">animated</span>) e l'altra che corrisponde al nome dell'effetto che si vuole ottenere e la libreria pensa al resto.<br />
In WebSite X5, se vogliamo applicare l'animazione agli oggetti predefiniti del programma, le cose, come sempre, si fanno un po' più complicate, poiché non si può intervenire direttamente sul codice generato.<br />
Se l'animazione riguardasse un unico oggetto e volessimo visualizzarla al caricamento della pagina, basterebbe:<br />
<ol>
<li>allegare la <a href="http://quellidelcucuzzolo.altervista.org/demo/animated-object-website-x5/css/animate.min.css" target="_blank">libreria </a>al progetto;</li>
<li>nel sorgente della pagina individuare l'id della cella (<span style="font-family: "courier new" , "courier" , monospace;">imCell_<i>n</i></span>) corrispondente all'oggetto da animare;</li>
<li>assegnare le classi opportune con jQuery.<br />
Un esempio di codice da inserire <i>Prima della chiusura del tag HEAD</i> per animare con effetto bounce l'oggetto con <span style="font-family: "courier new" , "courier" , monospace;">id="imCell_1"</span> :<br />
<pre class="brush:js; toolbar:false;"><script>
$(document).ready(function(){
$('#imCell_1').addClass('animated bounce');
});
</script>
</pre>
</li>
</ol>
<div style="text-align: left;">
</div>
<br />
Il metodo che descriveremo permette invece di generalizzare e semplificare l'uso della libreria, in modo che possa essere facilmente applicato a più oggetti nella pagina e che l'animazione avvenga al caricamento della pagina ma solo quando l'oggetto è visibile nello schermo. Qui la nostra demo:<br />
<br />
<div class="MS_esempio" style="padding-top: 25px;">
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://quellidelcucuzzolo.altervista.org/demo/animated-object-website-x5/" target="_blank" title="Clicca per visualizzare la demo"><img alt="animation.css oggetti website x5" src="https://4.bp.blogspot.com/-J5Y2AAdU-IU/Vy4CD3FbZ6I/AAAAAAAAAtE/IgjlWInfyoszRSs8gngSgRJNGBJPK6TBwCLcB/s1600/demo_animate_css.png" style="border: 0px none; margin-left: auto; margin-right: auto;" title="Clicca per visualizzare la demo" /></a></td></tr>
<tr><td class="tr-caption" style="color: #4c8efb; text-align: center;">DEMO </td></tr>
</tbody></table>
</div>
<br />
Questi i passi da seguire:
<br />
<ol>
<li>Assegnare agli oggetti a cui deve essere applicato l'effetto un'ancora, il cui nome deve <u><b>necessariamente </b></u>essere così composto: <span style="font-family: "courier new" , "courier" , monospace;"><span style="color: red;"><b>MSanimated-</b></span><span style="color: blue;"><b>nomeEffetto</b></span></span><br />
dove <span style="font-family: "courier new" , "courier" , monospace;"><span style="color: red;"><b>MSanimated-</b></span></span> è un prefisso non modificabile uguale per tutti gli oggetti e <span style="font-family: "courier new" , "courier" , monospace;"><span style="color: blue;"><b>nomeEffetto</b></span></span> è il nome dell'effetto dell'animazione scelto. <br />Si possono provare gli effetti disponibili a <a href="http://daneden.github.io/animate.css/" target="_blank">QUESTO LINK</a>. Attenzione a riportare correttamente nell'ancora il nome dell'effetto scelto, rispettando le minuscole e maiuscole.<br />
Nel caso si debba assegnare lo stesso effetto a più oggetti, poiché non è possibile avere due ancore con lo stesso nome, è necessario inserire, nel nome dell'ancora, <b>uno o più numeri</b> come suffisso. Esempio: <span style="font-family: "courier new" , "courier" , monospace;"><span style="color: red;"><b>MSanimated-</b></span><span style="color: blue;"><b>bounce</b></span><span style="color: green;"><b>123</b></span></span></li>
<li>Scaricare la libreria Animate.css dal <a href="https://github.com/daneden/animate.css" target="_blank">sito dell'autore</a> oppure dalla <a href="http://quellidelcucuzzolo.altervista.org/demo/animated-object-website-x5/css/animate.min.css" target="_blank">nostra demo</a> ed allegarla al progetto in <i>Impostazioni Avanzate</i> → <i>Statistiche, SEO e Codice</i> → <i>Esperto </i>→ <i>File allegati al codice </i>spuntando la casella <i>Collega il file.</i></li>
<li>In <i>Proprietà Pagina </i>→ <i>Esperto </i>→ <i>Prima della chiusura del tag HEAD </i>inserire questo codice CSS:
<pre class="brush:css, toolbar:false"><style>
.MShidden{visibility:hidden;}
</style></pre>
e questo codice jQuery <i>Prima della chiusura del tag BODY:
</i><pre class="brush:js, toolbar:false, auto-links:false"><script>
/* ===============================================================
Author's custom code: http://quellidelcucuzzolo.blogspot.it
Please do not remove credit
============================================================== */
var $msAnimation_block = $("div[id^='MSanimated-']").parent();
var animationType = new Array();
$msAnimation_block.addClass("MShidden animated");
$msAnimation_block.each(function(index) {
animationType[index] = $(this).find(">:first-child").attr("id").replace("MSanimated-", "").replace(/\d+/, "");
})
$(window).on("load scroll", function() {
$msAnimation_block.each(function(index) {
if ($(this).offset().top <= $(window).scrollTop() + $(window).height() * 0.55 && $(this).hasClass("MShidden")) {
$(this).removeClass("MShidden").addClass(animationType[index]);
}
})
});
</script></pre>
Il valore 0.55 (personalizzabile) rappresenta la percentuale dell'altezza della finestra del browser a cui si deve trovare l'oggetto per iniziare l'animazione.<br />
</li>
</ol>
<br />
Si fa presente che, a volte, il programma non aggiorna il nome delle ancore se non si forza la generazione dell'anteprima cliccando contemporaneamente il tasto Ctrl.<br />
<br />
La libreria è proposta dall'autore come cross-browser, ma si consiglia di verificare la resa dell'effetto scelto con browser diversi. Essendo animazioni CSS3 ovviamente non potranno essere visualizzate su browser più datati.<br />
<br />
<br />
<br />MAeSIhttp://www.blogger.com/profile/03218272086256305663noreply@blogger.com36tag:blogger.com,1999:blog-7965877301845859013.post-89856658611526915322016-04-18T22:33:00.000+02:002020-06-19T17:46:04.760+02:00Effetto accordion con gli oggetti di WebSite X5 12Esistono diversi codici in rete, realizzati con jQuery o con i CSS3, per creare un accordion, cioè quell'effetto che, al click su un elemento della pagina, porta alla visualizzazione, appunto con effetto fisarmonica, di un elemento nascosto. Oggi vedremo come creare questo effetto utilizzando gli oggetti di WebSite X5 12, senza dover scrivere troppo codice: useremo il titolo della cella dell'oggetto come elemento sempre visibile e il resto dell'oggetto si visualizzerà solo cliccando sul titolo.<br />
<br />
Un esempio potrebbe essere la creazione di una pagina FAQ in cui, al click sulla singola domanda (titolo della cella) viene visualizzata la risposta (contenuto ed eventuale descrizione della cella).<br />
<br />
Qui la nostra demo:<br />
<br />
<div class="MS_esempio" style="padding-top: 25px;">
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://quellidelcucuzzolo.altervista.org/demo/accordion-oggetti-website-x5/" target="_blank" title="Clicca per visualizzare la demo"><img alt="effetto accordion oggetti website x5" src="https://1.bp.blogspot.com/-FNoo3AEsgu8/VxOZLHrbjJI/AAAAAAAAAsc/GNKCMpVxAI8StGsQv9_0vfGOpFNmgIA7gCLcB/s1600/faq_accordion.png" style="border: 0px none; margin-left: auto; margin-right: auto;" title="Clicca per visualizzare la demo" /></a></td></tr>
<tr><td class="tr-caption" style="color: #4c8efb; text-align: center;">DEMO </td></tr>
</tbody></table>
</div>
<br />
Questi i passi per riprodurre la nostra demo:<br />
<br />
<b>1.</b> In <i>Creazione della Pagina</i> inseriamo un <i>Oggetto Testo</i> <b>in modo che occupi l'intera riga</b>.<br />
<br />
<b>2.</b> Assegnamo un'ancora all'oggetto appena creato; il nome dell'ancora <b>deve </b>iniziare con <span style="font-family: "courier new" , "courier" , monospace;">msacc </span>(esempio <span style="font-family: "courier new" , "courier" , monospace;">msacc01</span> ).<br />
<br />
<b>3.</b> In <i>Stile della Cella</i> → <i>Testi </i>scriviamo la nostra domanda come contenuto del <i>Titolo </i>e impostiamo un colore di sfondo e gli altri stili grafici.<br />
<br />
<b>4.</b> All'interno dell'oggetto scriviamo la risposta, definendo tutte le opzioni grafiche che preferiamo.<br />
<br />
<b>5.</b> Ripetiamo la procedura fin qui descritta tante volte quante sono le domande/risposte che dobbiamo inserire.<br />
<br />
<b>6. </b>In <i>Proprietà Pagina</i> → <i>Esperto</i> → <i>Prima della chiusura del tag HEAD</i> incolliamo questo codice CSS:<br />
<pre class="brush:css, toolbar:false;"><style>
.msaccordion div[id^='imCellStyleTitle_']{
cursor:pointer;
}
span.symFaq {
font-family:"Courier New", Courier, monospace;
font-weight:bold;
}
</style></pre>
La prima regola di stile assegna la forma <span style="font-family: "courier new" , "courier" , monospace;">pointer </span>al cursore in modo che il titolo/domanda venga facilmente identificato come elemento cliccabile. La seconda regola di stile è riferita al simbolo (<span style="font-family: "courier new" , "courier" , monospace;">+/-</span>) che viene visualizzato a fianco della domanda: noi abbiamo scelto il carattere <span style="font-family: "courier new" , "courier" , monospace;">Courier New</span> per mantenere costante lo spazio occupato dal simbolo.<br />
<br />
Sempre nella stessa sezione, dopo il CSS precedente, incolliamo il seguente codice: <br />
<pre class="brush:js, toolbar:false, auto-links:false;"><script src="js/jquery-ui-effect.min.js"></script>
<script>
/* ==============================================================
Accordion Object: versione base
Author's custom code: http://quellidelcucuzzolo.blogspot.it
Please do not remove credit
============================================================== */
$(document).ready(function() {
$("div[id^='msacc']").parent().addClass("msaccordion");
$(".msaccordion div[id^='imCellStyle_'], .msaccordion div[id^='imCellStyleDescription']").css("display", "none");
$(".msaccordion div[id^='imCellStyleTitle_']").each(function() {
$(this).prepend("<span class='symFaq'>+ </span>"); //simbolo grafico pannello chiuso
$(this).parent().css("min-height", $(this).outerHeight(true));
});
$(".msaccordion div[id^='imCellStyleTitle_']").click(function() {
var $this = $(this);
if ($this.next().is(":visible")) {
setTimeout(function() {
$this.find("span").html("+ "); //simbolo grafico pannello chiuso
$this.css("background-color", "#404040") //colore background pannello chiuso
}, 500);
} else {
$this.find("span").html("&#8211; "); //simbolo grafico pannello aperto
$this.css("background-color", "#ff7700"); //colore background pannello aperto
}
$this.nextAll().toggle("blind", 500); //effetti UI consigliati: blind, drop, fade, slide
});
});
</script></pre>
<b><br /></b>
<b>20/11/2018</b> - codice aggiornato per la versione 17.0.4: <a href="http://quellidelcucuzzolo.altervista.org/demo/accordion-oggetti-website-x5/accordion_object_base_v.17.txt" target="_blank">LINK</a><br />
<br />
Sono personalizzabili i colori di background della domanda nei due stati pannello chiuso / pannello aperto, il tempo di durata dell'animazione (nel nostro caso <b>500 </b>millisecondi) e il tipo di effetto ottenuto grazie alle funzioni della libreria jQuery UI; potete consultare l'elenco completo degli effetti <a href="http://jqueryui.com/toggle/" target="_blank">QUI</a>.<br />
<br />
<b>7.</b> Come ultima cosa scarichiamo ed alleghiamo al progetto il file <a href="http://quellidelcucuzzolo.altervista.org/demo/accordion-oggetti-website-x5/js/jquery-ui-effect.min.js" target="_blank">jquery-ui-effect.min.js</a>: in <i>Impostazioni Avanzate </i>→ <i>Statistiche, SEO e Codice</i> → <i>Esperto </i>→ <i>File allegati al codice</i> impostando <span style="font-family: "courier new" , "courier" , monospace;">js</span> come <i>Percorso relativo sul Server</i>.<br />
<br />
Nella nostra demo abbiamo utilizzato degli oggetti testo, ma nulla vieta di utilizzare lo script con altri oggetti (immagine, slideshow, video...).<br />
<br />
Per rimanere in tema di effetto accordion, vi segnaliamo anche questa alternativa, ottenuta utilizzando l'Oggetto Catalogo Prodotti:<br />
<ul>
</ul>
<a href="http://www.unofficialwsx5.com/index.php?topic=1978.0" target="_blank">Visualizzare i prodotti con effetto accordion - Forum Unofficial WSX5</a><br />
<br />
<br />
<div id="collapse-all" style="border-bottom: 1px dashed grey;">
</div>
<br />
<br />
<b>Aggiornamento del 01/05/2016</b><br />
Abbiamo scritto un codice alternativo per fare in modo che all'apertura di un pannello si chiuda quello già aperto.<br />
<br />
<div style="text-align: center;">
<a href="http://quellidelcucuzzolo.altervista.org/demo/accordion-oggetti-website-x5/collapse-all.html" target="_blank">QUI</a> la demo.</div>
<br />
Questo il codice jQuery, da <b>sostituire </b>a quello indicato nel punto <b>6</b>:<br />
<br />
<pre class="brush:js; toolbar:false; auto-link:false;"><script src="js/jquery-ui-effect.min.js"></script>
<script>
/* ==============================================================
Accordion Object: versione collapse all
Author's custom code: http://quellidelcucuzzolo.blogspot.it
Please do not remove credit
============================================================== */
$(document).ready(function() {
$("div[id^='msacc']").parent().addClass("msaccordion");
$(".msaccordion div[id^='imCellStyle_'], .msaccordion div[id^='imCellStyleDescription']").css("display", "none");
$(".msaccordion div[id^='imCellStyleTitle_']").each(function() {
$(this).prepend("<span class='symFaq'>+ </span>"); //simbolo grafico pannello chiuso
$(this).parent().css("min-height", $(this).outerHeight(true));
});
$(".msaccordion div[id^='imCellStyleTitle_']").click(function() {
var $this = $(this);
var $opentab = $(".msaccordion div[id^='imCellStyle_']:visible");
$opentab.prev().nextAll().hide("blind", 500, function() { //effetti UI consigliati: blind, drop, fade, slide
$opentab.prev().css("background-color", "#404040").find("span").html("+ ") //colore background e simbolo grafico pannello chiuso
});
if ($this.next().is(":hidden")) {
$this.nextAll().show("blind", 500); //effetti UI consigliati: blind, drop, fade, slide
$this.css("background-color", "#ff7700").find("span").html("&#8211; "); //colore background e simbolo grafico pannello aperto
}
});
});
</script>
</pre>
<br />
<div id="news-11-2018">
</div>
<b>20/11/2018</b> - codice aggiornato per la versione 17.0.4: <a href="http://quellidelcucuzzolo.altervista.org/demo/accordion-oggetti-website-x5/accordion_object_collapse_all_v.17.txt" target="_blank">LINK</a><br />
<br />
Tutte le altre indicazioni rimangono invariate.<br />
<br />
<br />MAeSIhttp://www.blogger.com/profile/03218272086256305663noreply@blogger.com30tag:blogger.com,1999:blog-7965877301845859013.post-10551862189770012182016-04-10T15:46:00.000+02:002016-04-18T22:38:21.710+02:00Come inserire un link nell'Oggetto Database Viewer di WebSite X5<img alt="oggetto database viewer website x5" src="https://4.bp.blogspot.com/-KHnAE0kq-ew/Vwj-382WfkI/AAAAAAAAAsI/0BgVyWN3YoAUVSwf0w3806NGy_nFKB4FQ/s1600/link_database_viewer.png" style="border: 1px solid; float: left; margin: 0px 10px 6px 0px; padding: 6px;" title="" />L'<i>Oggetto opzionale <a href="https://answers.websitex5.com/objects/livepreview/371262fa-27c5-421a-9127-852da219d4" target="_blank">Database Viewer</a></i> di WebSite X5, basato sul plugin <a href="http://www.jtable.org/" target="_blank">jTable</a>, permette di aggiungere/modificare i dati presenti in un database in modo semplice, senza bisogno di conoscere alcun codice, e di visualizzarli in una tabella.<br />
<br />
L'oggetto, attualmente, non prevede la possibilità di assegnare un link al valore di un campo, cosa che può essere utile se nel database, per esempio, vengono memorizzati i nomi dei file caricati sul server.<br />
<br />
Abbiamo scartabellato un po' le <a href="http://www.jtable.org/ApiReference" target="_blank">API del plugin originale</a> per cercare un'opzione/metodo che potesse sopperire a questa mancanza. E, in effetti, il plugin jTable prevede la possibilità di personalizzare il modo in cui i dati vengono visualizzati utilizzando <a href="http://www.jtable.org/ApiReference/FieldOptions#fopt-display" target="_blank">l'opzione <span style="font-family: "courier new" , "courier" , monospace;">display</span></a>.<br />
<br />
Se nel plugin originale questa modifica è molto semplice, il problema, come spesso accade con WebSite, è trovare un modo per sovrascrivere le funzioni generate automaticamente dal programma. <br />
<br />
Abbiamo provato due strade diverse, una agendo con jQuery sulla tabella
già creata, l'altra utilizzando proprio le API di jTable.<br />
<br />
<h3 style="background-color: #ebebeb; padding: 4px; text-align: center;">
SOLUZIONE 1</h3>
<br />
In <i>Proprietà Pagina</i> → <i>Esperto </i>→ <i>Prima della chiusura del tag HEAD</i>, inserire questo script:<br />
<br />
<pre class="brush:js; toolbar:false; auto-links:false;"><script>
/* ==============================================================
Author's custom code: http://quellidelcucuzzolo.blogspot.it
Please do not remove credit
============================================================== */
$(document).ready(function() {
//richiamo la funzione al caricamento della pagina
mylink();
//richiamo la funzione al click sulle intestazioni di colonna
$(".jtable-column-header-container").click(function() {
mylink();
})
});
function mylink() {
setTimeout(function() {
//ciclo il contenuto delle celle della seconda colonna
$("table.jtable tr > td:nth-child(2)").each(function() {
var urlname = $(this).text();
//creo link
$(this).html('<a href="folder/'+ urlname +'">' + urlname + '</a>');
});
}, 700);
}
</script>
</pre>
<br />
Queste sono le personalizzazioni da fare:<br />
<ol>
<li><span style="font-family: "courier new" , "courier" , monospace;"><span style="color: blue;"><b><span style="color: black;">$(</span>"table.jtable tr > td:nth-child(<span style="color: red;">2</span>)"<span style="color: black;">).each(</span><span style="color: #006699;">function</span></b><span style="color: black;"><b>() {</b> </span></span> </span><br />in questa riga di codice personalizzare il numero in rosso che corrisponde al numero della colonna (campo) a cui associare i link;<br /><br />
</li>
<li><b><span style="color: black; font-family: "courier new" , "courier" , monospace;">$(<span style="color: #006699;">this</span>).html('<a href=<span style="color: blue;">"<span style="color: red;">folder</span>/'+ urlname +'"</span>>' <span style="color: blue;">+ urlname +</span> '</a>');</span></b><br />in questa riga di codice personalizzare <span style="font-family: "courier new" , "courier" , monospace;">folder</span> (in rosso) inserendo il nome della cartella sul server dove risiedono i file da linkare.</li>
</ol>
Il codice deve agire dopo che la tabella è stata generata quindi ne abbiamo ritardato l'esecuzione di <b>700</b> millisecondi con il metodo <span style="font-family: "courier new" , "courier" , monospace;">setTimeout()</span> <br />
E questo è il punto debole di questa soluzione: questo ritardo va calibrato in funzione del tempo medio di caricamento della pagina, quindi qualche volta questo metodo può fallire.<br />
<br />
<div style="text-align: center;">
Qui la nostra <a href="http://quellidelcucuzzolo.altervista.org/demo/database-viewer-link-wsx5/settimeout.html" target="_blank">DEMO</a> </div>
<br />
<ol>
</ol>
<h3 style="background-color: #ebebeb; padding: 4px; text-align: center;">
SOLUZIONE 2</h3>
<br />
Il metodo utilizzato in questa soluzione agisce invece prima della
creazione della tabella e di fatto estende le opzioni del plugin jTable:
a differenza della soluzione 1, non soffre problemi di ritardo ma potrebbe risultare più laboriosa la
personalizzazione del codice.<br />
<br />
In <i>Proprietà Pagina</i> → <i>Esperto </i>→ <i>Prima della chiusura del tag HEAD</i>, inserire questo script:<br />
<pre class="brush:js; toolbar:false; auto-links:false;"><script>
$.extend(true, $.hik.jtable.prototype.options.fields, {
nome: {},
documento: {
display: function(data) {
return $('<a href="folder/' + data.record.documento + '">' + data.record.documento + '</a>');
}
}
});
</script></pre>
<br />
Le parti da personalizzare si riferiscono rispettivamente a:<br />
<ol>
<li>
<span style="font-family: "courier new" , "courier" , monospace;">
<b><span style="color: red;">nome</span><span style="color: black;">: {},</span></b></span><br />in questa riga di codice sostituire <span style="font-family: "courier new" , "courier" , monospace;">nome </span>(in rosso) con il nome del campo che precede la colonna in cui inserire il link.<br />
Se sono presenti più colonne che precedono il campo in cui inserire il link, ripetere la riga di codice per tutte le occorrenze; ad esempio, se la colonna con i link è preceduta da tre campi, il codice diventerà così:<br />
<div>
<span style="font-family: "courier new" , "courier" , monospace;">
<b><span style="color: red;">nomecampo1</span><span style="color: black;">: {},</span><br />
<span style="color: red;">nomecampo2</span><span style="color: black;">: {},</span><br />
<span style="color: red;">nomecampo3</span><span style="color: black;">: {},</span></b></span><br />
<br /></div>
Ovviamente i valori in rosso sono da personalizzare con i nomi reali dei campi.
<br />
L'elenco dei campi precedenti serve solo per mantenere inalterata la posizione originale delle colonne.
<br /><br />
</li>
<li><div>
<b><span style="font-family: "courier new" , "courier" , monospace;"><span style="color: red;">documento</span><span style="color: black;">: {</span> </span><br />
<span style="font-family: "courier new" , "courier" , monospace;"><span style="color: black;"> display:</span> <span style="color: #006699;">function</span><span style="color: black;">(data) {</span> </span><br />
<span style="font-family: "courier new" , "courier" , monospace;"> <span style="color: #006699;">return </span><span style="color: black;">$(</span><span style="color: blue;">'<a href="</span><span style="color: darkgreen;">folder</span><span style="color: black;">/' + data.record.</span><span style="color: red;">documento </span><span style="color: black;">+</span><span style="color: blue;"> '">'</span><span style="color: black;"> + data.record.</span><span style="color: red;">documento </span><span style="color: black;">+ </span><span style="color: blue;">'</a>'</span><span style="color: black;">);</span> </span><br />
<span style="color: black; font-family: "courier new" , "courier" , monospace;"> }</span></b></div>
<br />
in questa parte di codice sostituire <span style="font-family: "courier new" , "courier" , monospace;">documento </span>(in rosso) con il nome del campo a cui devono essere associati i collegamenti e <span style="font-family: "courier new" , "courier" , monospace;">folder </span>(in verde) con il nome della cartella sul server dove risiedono i file da linkare.</li>
</ol>
<br />
<div style="text-align: center;">
Qui la nostra <a href="http://quellidelcucuzzolo.altervista.org/demo/database-viewer-link-wsx5" target="_blank">DEMO</a> </div>
<br />
<br />
<br />
<br />MAeSIhttp://www.blogger.com/profile/03218272086256305663noreply@blogger.com18tag:blogger.com,1999:blog-7965877301845859013.post-64642581328680654912016-04-02T15:10:00.000+02:002016-04-07T10:44:42.029+02:00Visualizzare i dati inviati al database dal form mail di WebSite X5: immagine in showboxNegli articoli precedenti abbiamo visto come <a href="http://quellidelcucuzzolo.blogspot.it/2016/03/visualizzare-dati-database-form-ws-x5.html" target="_blank">visualizzare i dati inseriti in un database</a> con il form mail di WebSite X5 e come <a href="http://www.quellidelcucuzzolo.blogspot.it/2016/03/paginazione-dati-database-form-ws-x5.html" target="_blank">aggiungere una paginazione</a>. In questo articolo ci occuperemo delle immagini presenti in ogni news, aggiungendo il valore dell'attributo <span style="font-family: "courier new" , "courier" , monospace;">alt </span>e la visualizzazione dell'immagine ingrandita attraverso il codice dello showbox generato dal programma. Qui presenteremo quindi solo le modifiche da apportare al codice precedentemente presentato.<br />
<br />
Ecco la nostra demo: <br />
<br />
<div class="MS_esempio" style="padding-top: 25px;">
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://quellidelcucuzzolo.altervista.org/demo/form-to-db-wsx5/showbox.php" target="_blank" title="Clicca per visualizzare la demo"><img alt="demo showbox website x5" src="https://4.bp.blogspot.com/-J0Ml0UFJDbg/Vv538ESvd7I/AAAAAAAAArI/XHG9NzRrp1QNgl7KVBq8dN2OuuanwSe1Q/s1600/form_2_db_wsx5_showbox.jpg" style="border: 0px none; margin-left: auto; margin-right: auto;" title="Clicca per visualizzare la demo" /></a></td></tr>
<tr><td class="tr-caption" style="color: #4c8efb; text-align: center;">DEMO </td></tr>
</tbody></table>
</div>
<br />
Innanzitutto dobbiamo modificare l'<i>Oggetto Modulo Invio E-mail</i> utilizzato per inserire i dati nel database, aggiungendo due campi, uno per il testo alternativo (attributo <span style="font-family: "courier new" , "courier" , monospace;">alt</span>) e uno per la descrizione dell'immagine ingrandita in showbox.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-nuVOY12gGE8/Vv5_vav0wTI/AAAAAAAAArk/zWZglSh4UloiBIAh3Cm6mur2jA4rxPt8g/s1600/form_2_db_wsx5_form_mail.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="form mail website x5" border="0" height="200" src="https://3.bp.blogspot.com/-nuVOY12gGE8/Vv5_vav0wTI/AAAAAAAAArk/zWZglSh4UloiBIAh3Cm6mur2jA4rxPt8g/s200/form_2_db_wsx5_form_mail.png" title="" width="156" /></a></div>
<br />
Non dimentichiamoci di cambiare, nella scheda <i>Opzioni</i>, i nomi dei campi corrispondenti del database (nel nostro esempio li abbiamo chiamati rispettivamente <span style="font-family: "courier new" , "courier" , monospace;">alt </span>e <span style="font-family: "courier new" , "courier" , monospace;">descimg</span>).<br />
<br />
La parte più corposa della modifica riguarda il codice inserito nell'<i>Oggetto Codice HTML</i> della pagina in cui si visualizzano le news:<br />
<ol>
<li>All'inizio del codice, dove abbiamo definito le variabili <span style="font-family: "courier new" , "courier" , monospace;">D<span style="font-family: "courier new" , "courier" , monospace;">A </span></span><span style="font-family: "courier new" , "courier" , monospace;">PERSONALIZZA<span style="font-family: "courier new" , "courier" , monospace;">R</span>E</span>, aggiungiamo le due nuove variabili che identificano rispettivamente il nome del campo del database che contiene l'attributo <span style="font-family: "courier new" , "courier" , monospace;">alt</span> dell'immagine (<span style="font-family: "courier new" , "courier" , monospace;">$qalt</span>) e il nome del campo del database che contiene la descrizione dell'immagine (<span style="font-family: "courier new" , "courier" , monospace;">$qdescimg</span>):<br />
<pre class="brush:php; toolbar:false;">//VARIABILI IMMAGINI SHOWBOX
//Nome del campo del database con il testo alternativo
$qalt = 'alt';
//Nome del campo del database con la descrizione dell'immagine
$qdescimg = 'descimg';
</pre>
</li>
<li> Modificare il codice dell'OUTPUT solo nella parte che riguarda l'immagine da così:<br />
<pre class="brush:php; toolbar:false;"> if (isset($val[$qimmagine]) && $val[$qimmagine] != '') {
echo '<img alt="" src="' . $qfolder . '/' . $val[$qimmagine] . '" />';
}
</pre>
a così:<br />
<pre class="brush:php; toolbar:false;">if (isset($val[$qimmagine]) && $val[$qimmagine] != '') {
//Percorso/nome file immagine
$qfileimg = $qfolder . '/' . $val[$qimmagine];
//Dimensioni immagine
$qfileimgsize = getimagesize($qfileimg);
//Attributo alt
if (isset($val[$qalt]) && $val[$qalt] != '') {
$qfileimgalt = $val[$qalt];
} else {
$qfileimginfo = pathinfo($qfileimg);
$qfileimgalt = preg_replace('/_\d+/', '', $qfileimginfo['filename']);
}
//Descrizione immagine ingrandita
if (isset($val[$qdescimg]) && $val[$qdescimg] != '')
$qfiledescimg = $val[$qdescimg];
else
$qfiledescimg = '';
//Output codice HTML immagine
echo '<a href="' . $qfileimg . '" onclick="return x5engine.imShowBox({ swipeImg: \'res/imSwipe.png\', closeImg: \'res/imClose.png\', loadingImg: \'res/imLoad.gif\', startIndex: 0, media:[{type: \'image\', url: \'' . $qfileimg . '\', width: ' . $qfileimgsize[0] . ', height: ' . $qfileimgsize[1] . ', description: \'' . $qfiledescimg . '\'}]}, 0, this);" title="Clicca per ingrandire"><img alt="' . $qfileimgalt . '" src="' . $qfileimg . '" /></a>';
}
</pre>
</li>
</ol>
Il codice controlla l'esistenza di un valore nel campo <span style="font-family: "courier new" , "courier" , monospace;">alt</span> del database; se non viene inserito niente, verrà comunque utilizzato come valore il nome del file immagine privo di estensione.<br />
Anche per la descrizione utilizzata nell'immagine ingrandita dello showbox, viene controllata l'esistenza di un valore nel rispettivo campo e, se non è presente, viene lasciata vuota.<br />
Nell'output è stato inserito l'attributo <span style="font-family: "courier new" , "courier" , monospace;">onclick </span>che richiama la funzione <span style="font-family: "courier new" , "courier" , monospace;">imShowBox</span> del programma: le dimensioni massime dell'immagine ingrandita sono ottenute dinamicamente leggendo le dimensioni reali di ogni file immagine. <br />
<br />
<b>Avvertenza</b>: il programma, al momento dell'upload di un file attraverso il form mail, aggiunge al nome del file caricato sul server un suffisso numerico preceduto dal carattere underscore (<span style="font-family: "courier new" , "courier" , monospace;"> _</span> ). Nel nostro codice, per riottenere il nome del file immagine originale da utilizzare per l'attributo <span style="font-family: "courier new" , "courier" , monospace;">alt</span>, abbiamo fatto ricorso alla funzione <span style="font-family: "courier new" , "courier" , monospace;">preg_replace()</span> che, attraverso un'espressione regolare, cerca questo suffisso e lo rimuove.<br />
<b>Si consiglia quindi di non
utilizzare il carattere underscore seguito da numeri nel nome del file.</b><br />
<br />
<br />MAeSIhttp://www.blogger.com/profile/03218272086256305663noreply@blogger.com12tag:blogger.com,1999:blog-7965877301845859013.post-68004576079378092162016-03-25T23:37:00.001+01:002016-04-08T17:20:32.198+02:00Visualizzare i dati inviati al database dal form mail di WebSite X5: paginazione PHP<a href="http://quellidelcucuzzolo.blogspot.it/2016/03/visualizzare-dati-database-form-ws-x5.html" target="_blank">Nell'articolo precedente</a> abbiamo visto come visualizzare i dati inseriti in un database con l'<i>Oggetto Modulo Invio E-mail </i>di WebSite X5, creando un semplice esempio per visualizzare delle news. Oggi vedremo come aggiungere, a questo esempio, una paginazione in PHP, utile per organizzare in modo più funzionale un numero corposo di news. Esistono diversi script in rete per ottenere questo: noi abbiamo
provato ad affrontare il problema a modo nostro, è possibile che ci siano modi più
semplici e funzionali.<br />
<br />
Qui la demo:<br />
<br />
<div class="MS_esempio" style="padding-top: 25px;">
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://quellidelcucuzzolo.altervista.org/demo/form-to-db-wsx5/pagination.php" target="_blank" title="Clicca per visualizzare la demo"><img alt="demo paginazione website x5" src="https://4.bp.blogspot.com/-p_7YhmcW1Ic/VvAF2fzqbEI/AAAAAAAAAqk/Ftfqk5WOm88eLICOAJqI4OsXTuUZzL6Nw/s1600/form_2_db_wsx5_pagination.png" style="border: 0px none; margin-left: auto; margin-right: auto;" title="Clicca per visualizzare la demo" /></a></td></tr>
<tr><td class="tr-caption" style="color: #4c8efb; text-align: center;">DEMO </td></tr>
</tbody></table>
</div>
<br />
<br />
Prima di procedere vi consigliamo di leggere attentamente (e provare) quanto scritto nel <a href="http://www.quellidelcucuzzolo.blogspot.it/2016/03/visualizzare-dati-database-form-ws-x5.html" target="_blank">precedente articolo</a>: le modifiche descritte di seguito riguardano solo il punto <b>4 Oggetto Codice HTML</b><br />
Assicuriamoci anche di aver inserito nel database un campo con funzione di chiave primaria (campo di tipo INT con AUTO_INCREMENT), necessario per ordinare le news, come descritto nella sezione "<a href="http://quellidelcucuzzolo.blogspot.it/2016/03/visualizzare-dati-database-form-ws-x5.html#gestione-dei-dati" target="_blank">Gestione dei dati</a>".<br />
<br />
Questo è il codice utilizzato per la nostra demo da inserire nell'<i>Oggetto Codice HTML</i>:<br />
<br />
<pre class="brush:php; toolbar:false; auto-links:false;"><div class="outputdb">
<?php
/* ===============================================================
Database class: Copyright by Incomedia Srl http://incomedia.eu
Author's custom code: http://quellidelcucuzzolo.blogspot.it
Please do not remove credit
============================================================== */
//DA PERSONALIZZARE
//Inserire il nome della tabella del database
$qtable = "news";
//Inserire i nomi dei campi del database
$qdata = 'data';
$qtitolo = 'titolo';
$qtesto = 'testo';
$qimmagine = 'immagine';
//VARIABILI PAGINAZIONE
//Nome del campo del database con autoincremento
$qid = 'id';
//Numero dei record da visualizzare in ogni pagina
$qrecordpage = 1;
//Numero massimo dei numeri di pagina da visualizzare in ogni pagina
$qnpageshow = 4;
//CONNESSIONE
//Prelievo automatico dei dati inseriti nel programma
$qchiave = array_keys($imSettings['databases']);
$qdati = getDbData($qchiave[0]);
$qhost = $qdati['host'];
$quser = $qdati['user'];
$qpassword = $qdati['password'];
$qdatabase = $qdati['database'];
$qfolder = $imSettings['general']['public_folder'];
$qdb = new ImDb($qhost, $quser, $qpassword, $qdatabase);
if (!$qdb->testConnection())
die("Connessione non riuscita");
//SELECT
//Selezione di tutti i record della tabella
$qitemtot = $qdb->query("SELECT * FROM $qtable");
if ($qitemtot) {
//Conto i record totali
$qrecordtot = count($qitemtot);
//Calcolo il numero delle pagine totali
$qnpage = ceil($qrecordtot / $qrecordpage);
//Validazione del parametro passato in GET
if (isset($_GET['pag'])) {
$qpage = intval($_GET['pag']);
if ($qpage < 1 || $qpage > $qnpage)
$qpage = 1;
} else
$qpage = 1;
//Record iniziale
$qrecordstart = $qrecordpage * $qpage - $qrecordpage;
//Estrae il numero di record definiti dopo averli ordinati in senso decrescente in base al valore del campo chiave primaria autoincrementale (l'ultimo record inserito si visualizza per primo)
$qitem = $qdb->query("SELECT * FROM $qtable ORDER BY $qid DESC LIMIT " . $qrecordstart . "," . $qrecordpage);
//OUTPUT
//Iterazione dell'array e creazione della struttura HTML
foreach ($qitem as $val) {
echo '<div class="itemdb">' . "\n";
if (isset($val[$qtitolo]) && $val[$qtitolo] != '') {
echo '<span class="outputitolo">' . $val[$qtitolo] . '</span>' . "\n";
}
if (isset($val[$qdata]) && $val[$qdata] != '') {
echo '<span class="outputdata">' . $val[$qdata] . '</span>' . "\n";
}
echo '<p>';
if (isset($val[$qimmagine]) && $val[$qimmagine] != '') {
echo '<img alt="" src="' . $qfolder . '/' . $val[$qimmagine] . '" />';
}
if (isset($val[$qtesto]) && $val[$qtesto] != '') {
echo $val[$qtesto];
}
echo "</p>\n</div>\n<div class='itemend'></div>\n";
}
//OUTPUT PAGINAZIONE
echo '<ul class="pagination">';
//Stampa dei pulsanti indietro in tutte le pagine tranne la prima
echo ($qpage != 1 ? '<li><a href="' . $_SERVER['PHP_SELF'] . '?pag=1" title="Vai a pagina 1">&#10094;&#10094;</a></li><li><a href="' . $_SERVER['PHP_SELF'] . '?pag=' . ($qpage - 1) . '">&#10094;</a></li>' : '');
//Controllo se il numero di pagine da visualizzare supera il numero di pagine totali
if ($qnpageshow > $qnpage) {
$qpageStart = 1;
$qpageStop = $qnpage + 1;
} else {
//Primo numero di pagina della paginazione
$qpageStart = $qpage;
//Ultimo numero di pagina della paginazione
$qpageStop = $qpageStart + $qnpageshow > $qnpage ? $qnpage + 1 : $qpageStart + $qnpageshow;
//Controllo se vengono visualizzate un numero di pagine inferiori a quelle previste
if ($qpageStop - $qpageStart < $qnpageshow) {
//Ridefinisco il numero di pagina di partenza
$qpageStart = $qnpage - $qnpageshow + 1;
}
}
//Stampa dei numeri di pagina
for ($i = $qpageStart; $i < $qpageStop; $i++) {
if ($qpage == $i) {
echo '<li class="currentpage">' . $qpage . '</li>';
} else {
echo '<li><a href="' . $_SERVER['PHP_SELF'] . '?pag=' . $i . '">' . $i . '</a></li>';
}
}
//Stampa dei pulsanti avanti in tutte le pagine tranne l'ultima
echo ($qpage != $qnpage ? '<li><a href="' . $_SERVER['PHP_SELF'] . '?pag=' . ($qpage + 1) . '">&#10095;</a></li><li><a href="' . $_SERVER['PHP_SELF'] . '?pag=' . $qnpage . '" title="Vai all\'ultima pagina">&#10095;&#10095;</a></li>' : '');
echo "</ul>";
} else
echo 'Nessuna news presente';
//CHIUSURA DELLA CONNESSIONE
$qdb->closeConnection();
?>
</div>
</pre>
<br />
Potete facilmente personalizzare i valori delle variabili che contengono il nome del campo con autoincremento (<span style="font-family: "courier new" , "courier" , monospace;">$qid</span>), il numero delle news da visualizzare in ogni pagina (<span style="font-family: "courier new" , "courier" , monospace;">$qrecordpage</span>) ed i numeri di pagina da visualizzare in ogni pagina (<span style="font-family: "courier new" , "courier" , monospace;">$qnpageshow</span>).<br />
<br />
La logica su cui si basa la paginazione è piuttosto semplice: dividendo il numero totale delle news memorizzate nel database con il numero
delle news da visualizzare in ogni pagina si ottiene il numero totale di pagine. <br />
Nell'output non visualizzeremo tutte le news, ma solo quelle che corrispondono alla pagina in cui ci
troviamo, identificata attraverso un parametro passato in GET: supponendo di aver scelto di visualizzare tre news per pagina, dobbiamo fare in modo che, se ci troviamo a pagina 1, vengano visualizzate le prime tre news, a pagina 2 la quarta, la quinta e la sesta, e così via.<br />
Inoltre, in ogni pagina, non verranno visualizzati i numeri di tutte le pagine presenti, ma solo un numero fisso deciso da noi nella variabile <span style="font-family: "courier new" , "courier" , monospace;">$qnpageshow</span> <br />
Abbiamo anche aggiunto due pulsanti per andare alla pagina precedente/successiva e due pulsanti per raggiungere la prima e l'ultima pagina.<br />
<br />
<br />
Nella Scheda Esperto dell'<i>Oggetto Codice HTML</i> possiamo definire lo stile dei pulsanti della paginazione. Questo è il codice CSS da noi utilizzato, da aggiungere a quello presente nel <a href="http://quellidelcucuzzolo.blogspot.it/2016/03/visualizzare-dati-database-form-ws-x5.html" target="_blank">precedente articolo</a> al punto <b>5:</b><br />
<br />
<pre class="brush:css; toolbar:false;">/* paginazione */
ul.pagination {
padding: 10px;
}
ul.pagination li {
display: inline-block;
width: 34px;
height: 34px;
line-height: 34px;
margin-right: 4px;
}
ul.pagination a {
background: #dddddd none repeat scroll 0 0;
color: #333333;
display: block;
text-align: center;
text-decoration: none;
}
/* effetto all'hover */
ul.pagination a:hover {
background: #5cb48e none repeat scroll 0 0;
color: #ffffff;
}
/* pagina corrente */
ul.pagination li.currentpage {
background: #5cb48e none repeat scroll 0 0;
color: #ffffff;
}
@media (max-width: 479px) {
ul.pagination li {
width: 40px;
height: 40px;
line-height: 40px;
margin: 0 10px 10px 0;
}
}
</pre>
<br />
Per approfondire l'argomento:<br />
<ul>
<li><a href="http://www.html.it/pag/32150/interrogare-il-database-con-le-query/" target="_blank">SELECT: interrogare MySQL - HTML.it</a></li>
</ul>
<br />
Nel prossimo articolo vedremo come <a href="http://quellidelcucuzzolo.blogspot.it/2016/04/showbox-dati-database-form-ws-x5.html" target="_blank">visualizzare l'immagine ingrandita in showbox</a>.<br />
<br />
<br />
<br />
<ul>
</ul>
MAeSIhttp://www.blogger.com/profile/03218272086256305663noreply@blogger.com9tag:blogger.com,1999:blog-7965877301845859013.post-23819381446203623732016-03-19T22:03:00.003+01:002016-03-19T22:03:37.132+01:00Sirene elettromagnetiche<img alt="drone" src="https://1.bp.blogspot.com/-N6eaSmB7Rdo/Vu260x4awdI/AAAAAAAAAqU/kgPZQxnoZGw0Ao5ReBf1y4AMr5h4mduSg/s1600/drone.png" style="float: left; margin: 0px 12px 8px 0px;" title="" />Condividiamo con voi questa triste storia di un Ulisse tecnologicamente avanzato, raccontata dalla viva penna del suo (ex) proprietario:<br />
<br />
<i>"Lunedì 22 febbraio, alle ore 14, è scomparso il drone Xiro alla giovane età di 44 voli.</i><br />
<i>Nulla lasciava presagire la prematura scomparsa di Xiro: il GPS prendeva regolarmente, le eliche ruotavano all'unisono ed il fiume scorreva placido sotto di lui, argenteo e maestoso.</i><br />
<i>Un improvviso sfarfallio di led bianchi era sintomo di un malfunzionamento poi, dopo un rapido tentennare, Xiro sfuggiva al richiamo del suo radiocomando, distratto sicuramente da pesanti interferenze ed incapace, a differenza di Ulisse, di resistere al maligno canto di elettromagnetiche sirene.</i><br />
<i>Una breve e veloce picchiata lo mandava a schiantarsi in un campo, pascolo di pecore. Le ricerche effettuate non hanno dato nessun esito.</i><br />
<i>Lo piangono inconsolabili tutti quelli che hanno volato con lui.</i><br />
<i>Addio Xiro, drone da 900 Euro.</i><br />
<i>Addio batteria ai polimeri di litio da 140 Euro.</i><br />
<i>Le canne di bambù presenti in zona vi siano lieve coperta."</i><br />
<br />
<br />MAeSIhttp://www.blogger.com/profile/03218272086256305663noreply@blogger.com2tag:blogger.com,1999:blog-7965877301845859013.post-55197195751474556302016-03-11T17:42:00.000+01:002017-04-08T11:46:59.330+02:00Visualizzare i dati inviati al database dal form mail di WebSite X5L'<i>Oggetto Modulo Invio E-mail </i>di WebSite X5 12 prevede la possibilità di inviare i dati ad un database. Come può essere utilizzata questa opzione? E come si possono visualizzare in una pagina i dati inseriti nel database?
<br />
<br />
Gli scopi sono svariati; in questo articolo abbiamo provato ad ipotizzarne uno: vogliamo creare un semplice contenuto nel sito (ad esempio delle news con titolo, data, testo e immagine) che possa essere facilmente aggiornato online senza dover utilizzare il programma.<br />
Qui potete vedere il risultato finale:
<br />
<br />
<div class="MS_esempio" style="padding-top: 25px;">
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://quellidelcucuzzolo.altervista.org/demo/form-to-db-wsx5/" target="_blank" title="Clicca per visualizzare la demo"><img alt="demo dati inviati al database con website x5" src="https://3.bp.blogspot.com/-bnhN632k9n0/WOivOhNLpdI/AAAAAAAAA5s/eMj5WMPrFEA-D4BHkwd0easwLwjC6MpSwCLcB/s1600/demo_form_2_db_wsx5.png" style="border: 0px none; margin-left: auto; margin-right: auto;" title="Clicca per visualizzare la demo" /></a></td></tr>
<tr><td class="tr-caption" style="color: #4c8efb; text-align: center;">DEMO </td></tr>
</tbody></table>
</div>
<br />
Tutti sappiamo che nell'edizione Professional esiste già l'<i>Oggetto Contenuto Dinamico </i>che può svolgere questa funzione, anche in maniera più completa, e che con l'<i>Oggetto opzionale DataBase Viewer</i> (a pagamento) è possibile visualizzare i dati presenti nel database organizzati in tabella. Tuttavia, scrivendo un po' di codice, siamo liberi di creare anche output più complessi rispetto a quello della nostra demo, gli output che meglio rispondono alle nostre esigenze. <br />
<br />
Ecco come procedere per riprodurre la nostra demo:<br />
<br />
<b>1. Impostazione dei metodi di gestione dati:</b><br />
In <i>Impostazioni Avanzate</i> → <i>Gestione Dati</i> inseriamo i dati di accesso al database forniti dal nostro provider e il nome della <b><i>cartella con accesso in scrittura</i>.</b> Questa cartella, nella nostra demo, è indispensabile poiché qui verranno salvati i file (nel nostro caso immagini) che verranno inviati al server con il modulo e-mail.<br />
Rimandiamo al link della guida per ulteriori approfondimenti relativi a questa sezione: <a href="http://help.websitex5.com/it/v12/evo/gestione_dati.htm" target="_blank">help.websitex5.com/it/v12/evo/gestione_dati.htm</a>
<br />
<br />
<h3 style="background-color: #ebebeb; padding: 4px; text-align: center;">
Pagina inserimento dati </h3>
<h3 style="text-align: center;">
</h3>
<b>2. Oggetto Modulo Invio E-mail: scheda Invio</b><br />
Inseriamo in una pagina protetta un <i>Oggetto Modulo Invio E-mail. </i>Nella scheda <i>Invio</i>, scegliamo come modalità di invio <i>Invia i dati ad un Database</i> ed impostiamo tutti i parametri richiesti: il database (nel menu a tendina compare il database precedentemente impostato in <i>Gestione Dati</i>), il <b>nome della tabella</b> in cui verranno memorizzati i dati e l'eventuale e-mail a cui notificare ogni nuovo inserimento di dati.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-BS8qze2kKzE/Vt2uIDe9NyI/AAAAAAAAAps/5jKlG-DJIrw/s1600/modulo_mail_invio.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="120" kasperskylab_antibanner="on" src="https://3.bp.blogspot.com/-BS8qze2kKzE/Vt2uIDe9NyI/AAAAAAAAAps/5jKlG-DJIrw/s200/modulo_mail_invio.png" width="200" /></a></div>
<br />
<div id="scheda-elenco">
<b>3. Oggetto Modulo Invio E-mail: scheda Elenco</b></div>
La scelta del numero e del tipo di campi da creare in questa sezione dipende dai dati che vogliamo memorizzare nel database.<br />
Nell'immagine sottostante potete vedere la struttura del form mail della nostra demo:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-znn7NFWZGkU/Vt2uPqgGsmI/AAAAAAAAApw/rEeZEJan3n4/s1600/modulo_mail_elenco.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="120" kasperskylab_antibanner="on" src="https://1.bp.blogspot.com/-znn7NFWZGkU/Vt2uPqgGsmI/AAAAAAAAApw/rEeZEJan3n4/s200/modulo_mail_elenco.png" width="200" /></a></div>
<br />
<br />
Ad ogni campo, nella scheda <i>Opzioni</i>, è preferibile assegnare un nome significativo per poterlo gestire con più facilità: se non si utilizza questa opzione, il programma darà al campo del database un nome generico (<span style="font-family: "courier new" , "courier" , monospace;">field_0</span>, <span style="font-family: "courier new" , "courier" , monospace;">field_1</span>, etc...). <br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-WXgpClVNdzs/Vt2uUesvQBI/AAAAAAAAAp0/hGLqVng6Bwc/s1600/modulo_mail_opzioni.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="168" kasperskylab_antibanner="on" src="https://2.bp.blogspot.com/-WXgpClVNdzs/Vt2uUesvQBI/AAAAAAAAAp0/hGLqVng6Bwc/s200/modulo_mail_opzioni.png" width="200" /></a></div>
<br />
<br />
<h3 style="background-color: #ebebeb; padding: 4px; text-align: center;">
Pagina visualizzazione dati</h3>
<h3 style="text-align: center;">
</h3>
<b>4. Oggetto Codice HTML</b><br />
Nella pagina in cui vogliamo visualizzare i dati (ovviamente deve avere estensione <span style="font-family: "courier new" , "courier" , monospace;">.php</span>) inseriamo un <i>Oggetto Codice HTML</i> che conterrà il codice PHP che si occupa di estrarre i dati dal database, utilizzando le classi definite dai programmatori di Incomedia nel file <i>x5engine.php</i>, e di visualizzarli in una struttura HTML (output). Questo è il codice che abbiamo utilizzato per la nostra demo:<br />
<pre class="brush:php; toolbar:false; auto-links:false;">
<div class="outputdb">
<?php
/* ===============================================================
Database class: Copyright by Incomedia Srl http://incomedia.eu
Author's custom code: http://quellidelcucuzzolo.blogspot.it
Please do not remove credit
============================================================== */
//DA PERSONALIZZARE
//Inserire il nome della tabella del database
$qtable = "news";
//Inserire i nomi dei campi del database
$qdata = 'data';
$qtitolo = 'titolo';
$qtesto = 'testo';
$qimmagine = 'immagine';
//CONNESSIONE
//Prelievo automatico dei dati inseriti nel programma
$qchiave = array_keys($imSettings['databases']);
$qdati = getDbData($qchiave[0]);
$qhost = $qdati['host'];
$quser = $qdati['user'];
$qpassword = $qdati['password'];
$qdatabase = $qdati['database'];
$qfolder = $imSettings['general']['public_folder'];
$qdb = new ImDb($qhost, $quser, $qpassword, $qdatabase);
if (!$qdb->testConnection())
die("Connessione non riuscita");
//SELECT
//Selezione di tutti i record della tabella
$qitem = $qdb->query("SELECT * FROM $qtable");
//OUTPUT
//Iterazione dell'array e creazione della struttura HTML
if ($qitem) {
$qitem = array_reverse($qitem);
foreach ($qitem as $val) {
echo '<div class="itemdb">' . "\n";
if (isset($val[$qtitolo]) && $val[$qtitolo] != '') {
echo '<span class="outputitolo">' . $val[$qtitolo] . '</span>' . "\n";
}
if (isset($val[$qdata]) && $val[$qdata] != '') {
echo '<span class="outputdata">' . $val[$qdata] . '</span>' . "\n";
}
echo '<p>';
if (isset($val[$qimmagine]) && $val[$qimmagine] != '') {
echo '<img alt="" src="' . $qfolder . '/' . $val[$qimmagine] . '" />';
}
if (isset($val[$qtesto]) && $val[$qtesto] != '') {
echo $val[$qtesto];
}
echo "</p>\n</div>\n<div class='itemend'></div>\n";
}
} else
echo 'Nessuna news presente';
//CHIUSURA DELLA CONNESSIONE
$qdb->closeConnection();
?>
</div>
</pre>
Le personalizzazioni nel codice riguardano i valori delle variabili iniziali: la variabile <span style="font-family: "courier new" , "courier" , monospace;">$qtable</span> deve contenere il nome della tabella del database impostata nel modulo e-mail (scheda <i>Invio</i>); le variabili <span style="font-family: "courier new" , "courier" , monospace;">$qdata</span>, <span style="font-family: "courier new" , "courier" , monospace;">$qtitolo</span>, <span style="font-family: "courier new" , "courier" , monospace;">$qtesto</span> e <span style="font-family: "courier new" , "courier" , monospace;">$qimmagine</span> contengono i nomi dei campi del database che abbiamo definito sempre nel modulo e-mail (<i>Inserimento Campo → Opzioni</i>).<br />
<br />
La parte restante del codice si occupa di effettuare la connessione al database, recuperando i dati inseriti nel programma, effettuare la query al database, organizzare l'output HTML e chiudere la connessione con il database.<br />
<br />
Se in <i>Gestione Dati</i> abbiamo inserito più database, è importante sapere che lo script recupera i dati di connessione del primo della lista.<br />
<br />
<br />
<b>5. Oggetto Codice HTML: scheda Esperto </b><br />
Nella scheda <i>Esperto </i>inseriamo le regole di stile del nostro output. A titolo di esempio riportiamo il CSS della nostra demo:<br />
<pre class="brush:css">/* record */
div.itemdb{
padding: 5px;
text-align:left;
}
/* data*/
div.itemdb span.outputdata{
color:gray;
float:right;
}
/* titolo */
div.itemdb span.outputitolo{
font-weight:bold;
}
/* testo */
div.itemdb p{
padding:10px 0;
}
/* immagine */
div.itemdb p img{
width:200px;
float:left;
padding: 0 10px 20px 0;
}
@media (max-width: 479px) {
div.itemdb p img {
float: none;
padding: 0 0 10px;
width: 100%;
}
}
/* separatore */
div.itemend {
clear:both;
border-bottom:1px dashed gray;
width:50%;
margin:0 auto;
}</pre>
<br />
<b>6. Proprietà della pagina</b><br />
Il funzionamento del codice PHP è subordinato all'inclusione del file <span style="font-family: "courier new" , "courier" , monospace;">x5engine.php</span>. In una pagina in cui è stato inserito un Oggetto Guestbook, in una pagina protetta e, in generale, in tutte le pagine per le quali il programma imposta in automatico l'estensione .php, questo file è già richiamato automaticamente. In qualsiasi altra pagina occorre quindi inserire manualmente il codice per l'inclusione in <i>Proprietà Pagina</i> → <i>Esperto </i>→ <i>Prima dell'apertura del tag HTML</i>:
<br />
<pre class="brush:php"><?php require_once("res/x5engine.php"); ?></pre>
Sempre nella scheda <i>Esperto</i> controlliamo di avere impostato "<i>php</i>" come <i>Estensione del file generato</i>.<br />
<br />
In anteprima, ovviamente, lo script non funzionerà e si visualizzeranno parti di codice poiché manca l'interprete PHP. Se vogliamo mantenere la visualizzazione della pagina più "pulita" possiamo aggiungere questo codice in <i>Proprietà Pagina</i> → <i>Esperto </i>→ <i>Prima della chiusura del tag HEAD</i><br />
<pre class="brush:js; toolbar:false"><script>
//funzionalità offline
x5engine.boot.push(function (){
x5engine.utils.showOfflineMessage('Questa funzionalità è attiva solo dopo aver pubblicato il sito su Internet.','','');
$('.outputdb').css('display', 'none');
});
</script></pre>
<br />
<h3 id="gestione-dei-dati" style="background-color: #ebebeb; padding: 4px; text-align: center;">
Gestione dei dati</h3>
<br />
Per modificare/cancellare i dati inseriti nel database potremmo utilizzare l'<i>Oggetto DataBase Viewer</i> oppure gli strumenti presenti nel pannello di controllo online, tipo PhpMyAdmin.<br />
<s>Purtroppo, attualmente (versione 12.0.5.22), l'invio dei dati al database con l'<i>Oggetto Modulo E-mail</i> di WebSite X5 non prevede l'inserimento automatico di un campo autoincrementale con funzione di chiave primaria, campo necessario per identificare in modo univoco ogni record: questo, di fatto, impedisce qualsiasi modifica ai dati inseriti.<br />
Per ovviare a questo problema occorre inserire manualmente il campo mancante: dal menu <i>Struttura </i>di PhpMyAdmin aggiungere un campo di tipo <span style="font-family: "courier new" , "courier" , monospace;"><span style="font-family: "courier new" , "courier" , monospace;">INT</span></span> e flaggare l'opzione <span style="font-family: "courier new" , "courier" , monospace;">A_I</span> (AUTO_INCREMENT). Ovviamente questa operazione è da effettuare una volta sola. </s>(<b>Aggiornamento del 20/04/2016:</b> con la versione 12.0.6.25 il problema è stato risolto)<s><br /></s><br />
<br />
<br />
<br />
Per approfondire l'argomento:<br />
<ul>
<li><a href="http://devguide.websitex5.com/en/latest/php-api/database-class/index.html" target="_blank">Database Class - WebSite X5 Developer's Guide</a></li>
</ul>
<br />
Nei prossimi articoli vedremo come:<br />
<ul>
<li><a href="http://quellidelcucuzzolo.blogspot.it/2016/03/paginazione-dati-database-form-ws-x5.html" target="_blank">aggiungere una paginazione</a></li>
<li><a href="http://quellidelcucuzzolo.blogspot.it/2016/04/showbox-dati-database-form-ws-x5.html" target="_blank">visualizzare l'immagine ingrandita in showbox</a></li>
</ul>
<br />
<br />
<br />
<ul>
</ul>
MAeSIhttp://www.blogger.com/profile/03218272086256305663noreply@blogger.com38