Segnalare i giveaway sul sito?

[crazy.cat]

A questo punto ne vale la pena di avere una striscia scorrevole (?) sopra lo schermo?
Francamente dovrei vederla in azione per capire se possa dare più fastidio che altro.
Se hai uno schermo piccolo fartene mangiare un pezzetto da una cosa che non ti interessa magari non è gradita.

Non è che di promozioni valide se ne trovino tutti i giorni, anche una oggi sembrava buona ma alla fine non si può fare.
Se la cosa si può fare aspettiamo magari un attimo per capire se prende piede, se ci sono notizie da poter dare, se interessano anche agli altri.
Sarebbe anche carino sentire il parere di altri utenti.

[Andy94]

Questo è solo uno screenshot per capire un po' come impostare la faccenda.
@crazy per mostrare quanto "verrebbe" alto, @tutti per un'idea di massima. Il concept non è per nulla definitivo, è solo per mostrare.



Waiting for feedback.

[Zane]

Cat, lì ci metterei anche gli articoli, se non altro per velocizzare l'uscita di scena delle promo vecchie (e dare un punto di visibilità a tutti coloro che non sanno che abbiamo un sito, prima di un forum).

Giusta la considerazione che possa dare fastidio, quindi... Andy: fantastico lavoro!! puoi completarlo mettendo un Nascondi testuale in alto a destra e darci una nuova preview?

[Andy94]

Il problema è che le immagini in uso non hanno tutte la stessa dimensione. Preferiamo quindi che sia variegato...

O tagliare i titoli a X caratteri (max due righe di testo) per far sì che siano più allineati?


Personalmente, preferisco la seconda soluzione.

[Zane]

Mi piace sempre di più! Sicuramente la seconda opzione, ma lo faccio io nel controller, tu nel template vai tranquillo

[developerwinme]

Personalmente, preferisco la seconda soluzione.

La butto lì come possibile alternativa, legata principalmente al fatto che la maggior parte degli schermi sono 16:9 (o similari): che ne pensate di spostare il testo sulla sinistra/destra dell'immagine?

[Andy94]

A mio parere non verrebbe bene per il semplice motivo che nel forum tutta l'interfaccia è "a sviluppo verticale" piuttosto che orizzontale. Mi spiego meglio: nel box delle "Ultimissime" in homepage sta benissimo con il testo laterale così com'è ora, perché lì si tratta di colonna laterale e non di spazio monoblocco come nel forum.

Ciò detto, secondo me, se si volesse fare come proponi saremmo costretti a mettere almeno due contenuti uno sotto l'altro, e quindi ad aumentare l'altezza del riquadro per il disappunto di chi ha schermi piccoli.

In ogni caso, se vuoi approfondire la cosa modifico il mockup per darti una "anteprima reale".

[Al3x]

la seconda è decisamente da preferire, la prima proprio non mi piace...

[Pancrazio]

la seconda è decisamente da preferire, la prima proprio non mi piace...

Concordo.

[developerwinme]

A mio parere non verrebbe bene per il semplice motivo che nel forum tutta l'interfaccia è "a sviluppo verticale" piuttosto che orizzontale. Mi spiego meglio: nel box delle "Ultimissime" in homepage sta benissimo con il testo laterale così com'è ora, perché lì si tratta di colonna laterale e non di spazio monoblocco come nel forum.

Condivido sicuramente l'osservazione lato design (o meglio, coerenza stilistica"), anche se sull'usabilità forse la soluzione che propongo (quantomeno ai miei occhi) sarebbe migliore.

Ciò detto, secondo me, se si volesse fare come proponi saremmo costretti a mettere almeno due contenuti uno sotto l'altro, e quindi ad aumentare l'altezza del riquadro per il disappunto di chi ha schermi piccoli.

Mi sono perso qualcosa o le scritte/immagini saranno scorrevoli, e quindi il problema che citi si risolve semplicemente nel "dover attendere un po' più che la scritta scorra" nel caso di schermo piccolo?
A tal proposito, stavo pensando se, considerato che il numero di promozioni effettivamente attive non dovrebbe comunque mai essere particolarmente alto (a proposito, al momento su che numeri siamo in media, come segnalazioni "aggiunte" al giorno? (intendo anche prima di abilitare le ultimissime)), non abbia poi più senso indicare le prime "xx" e mettere da qualche parte un link, sempre visibile, che rimandi all'elenco completo.

In ogni caso, se vuoi approfondire la cosa modifico il mockup per darti una "anteprima reale".

Se non ti fa impazzire e non sono l'unico ad avere questo "delirio" ( ), sarebbe effettivamente comodo vederne una anteprima reale, magari con le migliorie che ho suggerito sopra.

[Zane]

Ho chiuso Auto-creare la discussione per i commenti di ogni contenuto finito: ora, ogni volta che l'autore marca il contenuto come "Finito e pronto", viene auto-creata la discussione dei commenti (che ha anche lo scopo secondario di segnalare il nuovo pezzo qui sul forum).

@Andy: a che punto sei con la tua lavorazione?

[Andy94]

@Andy: a che punto sei con la tua lavorazione?

Molto occupato dal lavoro nei giorni precedenti, ma nel weekend la porto a termine.

[Andy94]

Ok, questa è una base di partenza...
http://andy94.no-ip.org/phpBB3/

Via con le richieste di modifica.

[Zane]

Bravo Andy, per me è stupendo! Come uniche osservazioni, chiedo:

1) la terza schermata ha mostra i titoli più in basso rispetto alle prime due...?

2) visto a 768 pixel di risoluzione verticale occupa una fetta di schermo troppo importante: credi sia possibile eliminare ancora qualche pixel sopra e sotto, magari tagliando il titolo di modo che stia sempre e solo su una singola riga, e fare qualche altro tipo di ottimizzazione per stringere un po' l'atezza?

3) mi piacerebbe che il Nascondi comprimesse il riquadro mantenendo però il bordo visibile, trasformandosi poi in un Mostra, di modo da ripristinare se voluto (magari con l'effetto Spoiler). È fattibile?

[Andy94]

Bravo Andy, per me è stupendo!

1) la terza schermata ha mostra i titoli più in basso rispetto alle prime due...?

Risolto, problemi di posizionamento.

2) visto a 768 pixel di risoluzione verticale occupa una fetta di schermo troppo importante: credi sia possibile eliminare ancora qualche pixel sopra e sotto, magari tagliando il titolo di modo che stia sempre e solo su una singola riga, e fare qualche altro tipo di ottimizzazione per stringere un po' l'atezza?

Recuperati quanti più pixel possibili, ma se vogliamo andare oltre devo forzare ulteriormente il ridimensionamento delle immagini. Ora siamo a 90px verticali, dimmi tu.

3) mi piacerebbe che il Nascondi comprimesse il riquadro mantenendo però il bordo visibile, trasformandosi poi in un Mostra, di modo da ripristinare se voluto (magari con l'effetto Spoiler). È fattibile?

Fatto, inserito anche un disclaimer perché secondo me il bordo vuoto senza niente dentro non dice molto.

Ricontrolla e fammi sapere.

[Al3x]

Fatto, inserito anche un disclaimer perché secondo me il bordo vuoto senza niente dentro non dice molto.

scriverei "Mostra riquadro" nel disclaimer tutto in maiuscolo o in corsivo

[Zane]

Buona idea Andy e buon miglioramento Al3x.

Andy: mi dai gli elementi che inizio a caricare (poi magari rifiniamo in corso d'opera)?

[Andy94]

Ok, il disclaimer è comunque modificabile successivamente.
Inizio a passarti il materiale nei post che seguono.

[Andy94]

File da inserire
Ho rispecchiato la struttura del filesystem di phpBB da rispettare
https://dl.dropboxusercontent.com/u/346 ... rousel.zip

Integrazioni in overall_header.html
File JS

Codice: Seleziona tutto

<script type="text/javascript" src="{T_SUPER_TEMPLATE_PATH}/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="{T_SUPER_TEMPLATE_PATH}/jquery.touchSwipe.min.js"></script>
<script type="text/javascript" src="{T_SUPER_TEMPLATE_PATH}/jquery.liquid-slider-custom.min.js"></script>

Fogli di stile

Codice: Seleziona tutto

<link href="{T_THEME_PATH}/liquid-slider.css" rel="stylesheet" type="text/css" media="screen, projection" />
<link href="{T_THEME_PATH}/animate.css" rel="stylesheet" type="text/css" media="screen, projection" />

Codice inline per attivare e gestire

Codice: Seleziona tutto

$(document).ready(function() {
    $('#main-slider').liquidSlider();
    $("#destroyBox").click(function(e){
        e.preventDefault();
        if($("#slider-container-fallback").css("display") == "block") $("#slider-container-fallback").css("display", "none");
        $( "#slider-container" ).toggle( "slow", function() {
            if($("#destroyBox").html() == "Nascondi riquadro"){
                $("#destroyBox").html("Mostra riquadro");
                $("#slider-container-fallback").css("display", "block");
            } else {
                $("#destroyBox").html("Nascondi riquadro");
            }
        });
    });
})

Importazione file di generazione (abilitare esecuzione PHP nei template in ACP qualora si voglia usare questo metodo)
- Inserire subito sotto all'apertura del div "#page-body"

Codice: Seleziona tutto

<!-- INCLUDEPHP carousel.php -->

- Usare questo se si vuole far vedere il carosello solo nell'indice del forum

Codice: Seleziona tutto

<!-- IF not S_FORUM_ID -->
    <!-- INCLUDEPHP carousel.php -->
<!-- ENDIF -->

Matrice componente da utilizzare
- Il blocco "Slide begin/Slide end" va replicato ogni qual volta si deve creare una slide
- All'interno di una slide ci vanno MASSIMO 6 contenuti, quindi bisogna contarli e chiudere/riaprire i div di contenimento
- Per fare prima, io ho inserito questo codice all'interno di un file carousel.php nella radice del forum (vedi annotazione sopra), per non averlo direttamente all'interno dell'header

Codice: Seleziona tutto

<div class="forabg" id="carousel-structure">
    <div class="inner">
        <span class="corners-top"><span></span></span>
        <ul class="topiclist">
            <li class="header">
                <dl class="icon">
                    <dd><span>Gli ultimi contenuti pubblicati su TurboLab.it</span></dd>
                    <dd style="float: right;"><span><a href="#" id="destroyBox">Nascondi riquadro</a></span></dd>
                </dl>
            </li>
        </ul>
        <div id="slider-container-fallback"><!-- Fallback content when the box is closed goes HERE --></div>
        <div id="slider-container">
            <div class="liquid-slider"  id="main-slider">
                <!-- Slide begin (after six contents must be closed and re-opened) -->
                <div>
                        <!-- Main article block (repeat 6 times for a complete slide of contents) -->
                        <div class="art">
                            <a href="http://turbolab.it/223">
                                <div><img src="<!-- Image URL /min format goes HERE -->"></div>
                                <p><!-- Article title excerpt goes HERE --></p>
                            </a>
                        </div>
                </div>
                <!-- Slide end -->
            </div>
        </div>
        <span class="corners-bottom"><span></span></span>
    </div>
</div>

Potrebbe scoppiare tutto per via di errori di jQuery.
Se si guarda il debugger mentre si visita il forum, si notano tre errori al volo:
ReferenceError: tapatalkDetect is not defined
L'ho risolto togliendo il codice relativo a quel metodo, pare che non sia più necessario e più utilizzato.
TypeError: b.browser is undefined
L'ho risolto prendendo jQuery direttamente dal CDN di Google Shared Libraries, possiamo provare anche qui per averlo sempre aggiornato o temi che si smaiali il codice del portale?
TypeError: 'toJSON' called on an object that does not implement interface PerformanceTiming.
Presumo sia relativo al calcolatore del tempo di caricamento, la mia domanda è: ci serve ancora?

[Andy94]

Altra cosa, se si usa lo snippet che carica il carosello solo in indice, bisogna modificare il JS per controllare che sia definito il contenitore, altrimenti non funziona

[Zane]

Devo sistemare ancora due cosine qua e là, ma ho caricato tutto. Ancora complimenti Andy, mi piace davvero tanto tanto!

[Zane]

Andy,
ho un problemino di visualizzazione che non riesco a correggere. È evidente nell'ultimo gruppo, dove spuntano sotto due miniature:



Ho forse sbagliato qualcosa io nell'integrazione?

[hashcat]

Vorrei suggerire un piccolo miglioramento (se facilmente attuabile): è possibile "memorizzare" la scelta di nascondere / mostrare il riquadro degli ultimi contenuti attraverso uno specifico cookie in modo tale da mantenere l'impostazione durante la navigazione?

Ho inoltre notato accidentalmente che, se visitato senza javascript, il forum di TLI appare in malo modo: è possibile prevedere una modalità di fallback?

[Zane]

Sulla prima stavo facendo il conto alla rovescia prima che venisse chiesto... Faccio io! Andy, a te gestire il no JavaScript

[Andy94]

Per il discorso grafico:

- Inserire una regola in più alla riga #main-slider .panel che è padding: 0px !important;
- Aumentare il margine in .art portandolo a 10px margin: 0 2px;