Nightbreeze

[Rino]

Tutti e tre i nuovi temi che ho caricato sono perfettamente in grado di calcolare e gestire separatamente e indipendentemente il ridimensionamento del testo e quello delle immagini, traducendo il tutto NEL CORRETTO NUMERO DI PIXEL. Ma quando richiedono una specifica dimensione in pixel per l'immagine ecco che il browser DEL MOBILE (quelli per desktop non fanno queste mostruosità) se ne infischia e fa di testa sua (ossia imposta d'ufficio lo stretch come limite superiore del dimensionamento).

Non discuto che sia come dici tu, non è il mio campo, però posso dirti quello che accade in pratica, cioè che solo il tema NightBreeze fa lo stretch sia sul mobile che sul computer (stringendo la finestra) e me lo fa sia con Safari che con Chrome e Firefox. Ho anche Opera, proverò anche con quello, comunque con gli altri temi il problema non c'è.

Antone', non ti ammattire, va benissimo così, grazie!

Addenda: lo fa anche il SunRise.

Addenda 2: lo fa anche il Dani. Cambio smartphone e computer.

[Admin]

Cominciamo dall'iPad-Mini, che mi ha proprio incuriosito e quindi sono andato a cercare di capire se sia o meno un caso isolato.
Allora, ho verificato che l'engine di rendering dei browser iPad e compagnia Apple (ma probabilmente tutti i derivati chrome), si inventano questa TERZA COLONNA quando le dimensioni del lato orizzontale del display sono comprese tra 716 e 768 pixel esatti!!! Al di sopra o al di sotto di tali dimensioni il problema non compare.
Caso vuole che lo iPad-Mini abbia il lato corto esattamente di 768 pixel, e quindi per un pelo, o meglio per un solo pixel, non sfugge al problema!!! Non ho idea se ci siano altri dispositivi con la stessa engine e che ricadano in questo intervallo di risoluzione (e non ho voglia certo di andare a verificarlo), ma se ci sono allora hanno anche lo stesso problema. Che cosa strana....


Altra cosa che ho data per scontata sulla questione dello stretching: il fatto che parta lo stretching quando si ridimensiona il browser è ovvio e accade necessariamente con TUTTI E SOLTANTO i temi responsivi, mentre NON ACCADE MAI con i temi NON responsivi. Per andare oltre nel discorso dovremmo entrare in aspetti decisamente tecnici e non sarebbe fattibile (e neppure ne varrebbe la pena). Mi limito ad aggiungere che ovviamente un tema responsivo si adatta alla dimensione SEMPRE, non solo quando vorremmo noi. Se ridimensioniamo il browser con un qualunque altro tema NON responsivo, non si produrrà nessuno stretching indesiderato. Ma il rovescio della medaglia sarà che nel mobile le immagini saranno presentate con dimensioni fisiche esagerate.


Comunque, in conclusione, nel mobile bisogna rassegnarsi a non cercare di vedere le immagini ANCHE a piena dimensione (cosa che secondo me è comunque del tutto inutile, diciamo la verità). Ma il limite è solo questo, perché la visualizzazione dell'immagine di base va benissimo con tutti e tre i temi responsivi, così come la restituzione delle dimensioni dei caratteri è ottimale. Basta quindi rinunciare di fare TAP sopra le immagini, tutto qui. Per il resto nel complesso non vedo problemi (a parte i gusti personali, ma questa è tutta un'altra questione).

[hobbit]

In questo momento scrivo da un MacBook Pro con l'ultima versione OS (Mojave).
Ho fatto qualche cattura con il browser Safari.

Il nuovo tema con un immagine:


la stessa immagine con la finestra strizzata:


altra immagine:


la stessa immagine con la finestra strizzata: (notare lo stizzamento orizzontale dell'immagine):


stessa situazione ma con il vecchio tema (l'immagine non viene strizzata ma devo scorrerla orizzontalmente):


Cioè con la prima immagine non ci sono problemi, con la seconda ci sono problemi solo con il nuovo tema e non con il vecchio.

[hobbit]

Appena provato anche da Firefox su Linux. Stesso problema.
Alcune immagini riducendo orizzontalmente la dimensione della finestra vengono riscalate mantenendo le proporzioni bloccate, mentre altre vengono riscalate solo orizzontalmente e mantenute le dimensioni verticali.
Penso che dipenda dal tag con il quale vengono incapsulate le immagini.
Ovviamente con il vecchio tema il problema non sussisteva.

[Admin]

Ho fatto qualche cattura con il browser Safari.

Il comportamento è corretto in tutti i casi che riporti tu, così come in tutti quelli riportati dagli altri in precedenza, credimi.

La differenza di comportamento che hai rilevato è dovuta al fatto che i browser (anche quelli per desktop), quando gestiscono la richiesta di dimensionamento "auto" su entrambe le dimensioni, reagiscono in modo differente NON in funzione dell'immagine MA del contesto nel quale essa è inserita (e il risultato dipende da una caterva di cose, soprattutto da come è definito il trattamento dell'overflow da tutta la gerarchia di contenitori dentro cui è inserita: la grande matriosca del DOM!).

Per farla breve: TUTTO quello che mi avete segnalato riguardo la restituzione delle immagini (sia in questo che in altri topic), ossia che non appaiono COME VI ASPETTERESTE, è in realtà ASSOLUTAMENTE NORMALE: NULLA di tutto questo dipende né dal tema, né dal software del forum, né da un qualunque tipo di errore o disfunzione del codice. Si tratta di comportamenti (technical behaviours) assolutamente attesi e non vi è in essi alcunché di anomalo, anche se all'utente può sembrare completamente strano.

Il punto - lo ripeto - è un altro, che provo a riassumere di nuovo in modo ancora differente.

La gestione del mobile è una coperta corta: se cerchi di rispettare le immagini, ti ritrovi con un testo microscopico; se cerchi di rispettare il testo, ti ritrovi con immagini che non vengono stretch-ate ma che sono gigantesche (i vecchi temi operano in questo modo). L'approccio responsive cerca di salvare capra e cavoli, e quando impostato correttamente (come in questi tre temi) ci riuscirebbe benissimo, se... se non si fosse di mezzo la User Experience a metterci lo zampino ed a "sciusciare" tutto. Pensavo che qualcuno di questi tre temi (che sono i migliori in circolazione) avesse escogitato qualcosa per aggirare almeno parzialmente la questione, ma a quanto pare la User Experience non perdona.

Che i vecchi temi non presentino questi inconvenienti è del tutto pacifico, in quanto NON sono responsive. Ciò vuol dire che si comportano sul mobile esattamente come sul desktop, quindi la dimensione del testo è sempre sotto controllo, mentre le immagini (se non sono proprio piccole) le devi far scorrere lateralmente, quindi risulta difficile vederle nel loro insieme.

L'obiettivo dell'approccio responsive sarebbe quello di prendere il meglio delle due soluzioni: da un lato avere il testo di dimensioni ottimali e le immagini inizialmente intere, anche se piccole; dall'altro lato, mediante il TAP sull'immagine, passare alla piena dimensione (100%), per poi scorrerla nelle varie direzioni mediante trascinamento, e ritornare all'immagine intera con un altro semplice TAP. Purtroppo, è proprio sul TAP che casca l'asino  della User Experience... 

Spero che adesso la questione sia più chiara di prima      e un sentito ringraziamento a tutti per la collaborazione! 

[hobbit]

Ciao.

Mi sfuggono due cose: 1 perché il comportamento tra le due immagini è difforme, cioè in certi casi l'immagine diventa microscopica (vengono scalate sia la dimensione orizzontale che verticale), in altri casi l'immagine viene deformata (viene scalata solo la dimensione orizzontale); 2 parli di mobile e non sono sicuro se hai capito che io i due test li ho effettuati su PC.

Comunque è la prima volta che noto questo comportamento e non mi sembra che possa essere definito normale.
Ho capito bene la differenza tra responsive e non.
Il tempo è prezioso e non ti crucciare troppo, si può continuare a mio giudizio a vivere tranquillamente anche con il tema classico.

PS nel forum di cui faccio parte il nostro amministratore sta valutando questo: https://www.discourse.org non so se possa valutabile anche per Foveon.it.

[Sardosono]

Mi sfuggono due cose:
1) perché il comportamento tra le due immagini è difforme, cioè in certi casi l'immagine diventa microscopica ...

Ho cercato di spiegarlo nei post precedenti, anche se avevo poche speranze di riuscirci, perché sono argomenti squisitamente tecnici e non si possono tradurre in spiegazioni puramente qualitative e intuitive. Più di così non saprei proprio come spiegarlo...

2) parli di mobile e non sono sicuro se hai capito che io i due test li ho effettuati su PC

Tranquillo, mi è chiarissimo!
Detto en passant: i test che mi fornite mi servono come conferma dei risultati che ottengo con gli emulatori, quindi non sono mai una sorpresa.

Comunque è la prima volta che noto questo comportamento e non mi sembra che possa essere definito normale.

Non posso far altro che garantirtelo personalmente: sono comportamenti del tutto normali, come è del tutto normale che sembrino incomprensibili all'utente (e sarebbe semmai davvero incredibile se li comprendesse, perché come minimo gli sfuggono completamente la complessità e le implicazioni del rendering a cascata, anche ammesso che sappia almeno cosa sia).

Ho capito bene la differenza tra responsive e non.

Quella concettuale probabilmente sì, e questo è ciò che ci interessa; ma quella tecnica sicuramente no (anche perché altrimenti non troveresti nulla di strano in questi comportamenti) quindi attento a non fare deduzioni tecniche su questa.

nel forum di cui faccio parte il nostro amministratore sta valutando questo: https://www.discourse.org
non so se possa essere valutabile anche per Foveon.it

No, assolutamente no.
Quelle come discourse e simili sono "soluzioni" per utenti, cioè per persone che non hanno alcuna dimestichezza con queste cose (o al massimo giusto una infarinatura), e per questi utenti sono certamente utili strumenti, perché aprono loro delle possibilità che altrimenti si vedrebbero precluse (anche se questo crea molto spesso la pericolosa illusione di essere auto-sufficienti). Ma nel nostro caso (anche trascurando le esigenze in termini di risorse) sarebbe come - e non sto esagerando - proporre di usare uno scooter (neanche una smart) per viaggiare in autostrada a chi è abituato a viaggiare a scelta su una Bentley o una Aston-Martin a seconda dell'umore: guarda, piuttosto chiudo il forum, credimi! 
Ma a parte le battute, credimi anche se ti dico che apprezzo molto (e pertanto ti ringrazio) per avermi voluto girare il suggerimento, perché è proprio questo lo spirito giusto del nostro forum!!! 

[hobbit]

Ho cercato di spiegarlo nei post precedenti, anche se avevo poche speranze di riuscirci, perché sono argomenti squisitamente tecnici e non si possono tradurre in spiegazioni puramente qualitative e intuitive. Più di così non saprei proprio come spiegarlo...

Chiaramente parlare di questa cosa non è facile perché tu hai sottomano il codice e io no.
In linea di principio posso capire dei comportamenti difformi se le immagini sono archiviate in un server esterno, ma il comportamento si ripete anche per le immagini archiviate nel server del sito.
I vari thread e le immagini ivi incapsulate sono stati generati tramite il software stesso del forum. Perché sono possibili varie strutture nel DOM, visto che le pagine dinamiche sono generate sempre mediante lo stesso editor?

[Sardosono]

tu hai sottomano il codice e io no.

In che senso? digita control-U e tutto il codice (HTML, CSS e JS) è a tua completa disposizione.
(non credo proprio che tu ti riferisca al codice php che lo genera, in quanto è del tutto irrilevante)

In linea di principio posso capire dei comportamenti difformi se le immagini sono archiviate in un server esterno, ma il comportamento si ripete anche per le immagini archiviate nel server del sito.

Non capisco neanche questo... anche l'origine del media (immagini nel nostro caso) è del tutto irrilevante... 

Perché sono possibili varie strutture nel DOM, visto che le pagine dinamiche sono generate sempre mediante lo stesso editor?

Infatti la struttura del DOM generato è sostanzialmente sempre la stessa per una stessa tipologia di pagina, altrimenti staremmo freschi.
Cosa ti fa pensare il contrario?!...      Comunque, ti basta digitare shift-control-C e puoi ispezionare il DOM in ogni dettaglio, con le annesse dichiarazioni di stile e le azioni seguenti agli eventi del mouse, e puoi verificare da te che la struttura è sempre la stessa, a parità di tipo di pagina.

Ma ovviamente non è questo il problema. Anche se la struttura è sempre la stessa, il rendering dell'overflow (e del contenimento) dipende naturalmente dalla "tassellatura" dei blocchi risultante, che a sua volta dipende interamente dai contenuti, che essendo diversi producono differenti tassellature e quindi un differente overflow. Come se non bastasse, poiché sono in gioco blocchi flottanti nidificati in altri blocchi flottanti su più livelli, chiaramente le tassellature che ne vengono fuori non sono quasi mai delle partizioni; quindi è quasi sempre l'engine che provvede ad estendere i blocchi per assegnare tutti gli spazi liberi ed ottenere una partizione, per cui la partizione finale è sostanzialmente imprevedibile (a meno che non si tratti di layout estremamente elementari). E' chiaro, quindi, che può bastare aggiungere o togliere anche solo pochi pixel da una delle due dimensioni del canvas globale disponibile, ed ecco che possono venirne fuori due rendering del tutto differenti.

Ma lo ripeto ancora una volta: tutto questo è del tutto normale, tutto questo NON è un problema; in particolare, lo stretching è un comportamento "secondo specifiche" (purtoppo), quindi anche se assurdo e fastidioso è comunque assolutamente normale e NON è un difetto né un bug né dipende dal codice della pagina.

[hobbit]

Guardando questa pagina con l'immagine che riscala perfettamente:

http://forum.foveon.it/index.php?topic=7232.0

e questa con l'immagine che non riscala altrettanto bene:

http://forum.foveon.it/index.php?topic=7213.0

noto solo una differenza sostanziale, che non è nei vari incapsulamenti, ma solo in questa riga (332):

Codice Seleziona Espandi

<div class="inner" id="msg_57832"><img src="https://farm2.staticflickr.com/1976/45185229421_eeeea138ba_o.jpg" alt="" width="960" class="bbc_img resized" /><br /></div>

<div class="inner" id="msg_57690"><img src="https://farm2.staticflickr.com/1959/31246237208_0aee7a5ffd_o.jpg" alt="" width="1024" height="682" class="bbc_img resized" /></div>

L'immagine che non riscala ha impostato l'height fisso.

Quello che non posso capire, perché non ho visione dello script lato server che genera le pagine facendo il parsing dei metatag, è perché si presentino i due casi.

Ho provato a guardarmi lo script lato client:

http://forum.foveon.it/Themes/NightBreeze20/scripts/theme.js

non ho pratica col javascript, ma il problema probabilmente è qui:

Codice Seleziona Espandi

// Toggles the element height and width styles of an image.
function smc_toggleImageDimensions()
{
var oImages = document.getElementsByTagName('IMG');
for (oImage in oImages)
{
// Not a resized image? Skip it.
if (oImages[oImage].className == undefined || oImages[oImage].className.indexOf('bbc_img resized') == -1)
continue;

oImages[oImage].style.cursor = 'pointer';
oImages[oImage].onclick = function() {
this.style.width = this.style.height = this.style.width == 'auto' ? null : 'auto';
};
}
}

Provo a rifletterci ancora un po'.

[Sardosono]

Se continui a cercare un qualche "problema" nel codice ci rimani in eterno, perché di problemi non ce ne sono. Ma se con "problema" intendi dire individuare nel codice LA CAUSA del comportamento, beh, allora il discorso è semplice perché la causa è ben chiara. Quindi va bene, entriamo in qualche dettaglio e ti anticipo subito che in realtà si tratta di DUE situazioni di stretching distinte che si sovrappongono e confondono tra loro.

Il criterio col quale vengono assegnati ai tag IMG i valori width e hight sono semplici: se le dimensioni dell'immagine sono entrambe inferiori o pari ai limiti fissati (nel nostro forum 1024 pixel per entrambi) allora i suddetti valori NON vengono assegnati; se invece anche una sola delle dimensioni è maggiore di 1024, allora vengono impostati entrambi in modo da rientrare in detti limiti (ovviamente calcolati rispettando le proporzioni, quindi in pratica il maggiore è sempre 1024 e l'altro sarà minore, o al massimo pari se l'immagine è esattamente quadrata).

Talvolta è anche possibile che venga impostato uno solo dei due valori, mentre l'altro prende automaticamente il valore predefinito, e questo normalmente non determina nessun problema con i layout NON responsivi. Purtroppo però il valore predefinito NON è consistente nelle varie circostanze (di solito è auto ma non sempre), così come non è consistente il modo con cui viene operato l'overflow quando il valore è auto, ma soprattutto non è consistente il trattamento quando UNO SOLO dei due è auto e l'altro no!!! Questa è LA CAUSA DELLA MANCANZA DI  STRETCHING STATICO, ossia di MEZZO "problema", che hai osservato in alcune situazioni. Tuttavia questa è una rara evenienza che oltretutto riguarda soltanto una ridottissima casistica di immagini, che sarà ancor più rara in futuro, quindi possiamo ignorarla completamente.

La seconda metà del comportamento indesiderato (ossia lo STRETCHING DINAMICO) è conseguenza del cambiamento di rendering quando viene attivato (da un evento del mouse) il codice JavaScript che tu hai correttamente identificato, il quale non fa altro che mettere e togliere l'impostazione auto su entrambe le dimensioni del tag IMG. Ciò determina un ricalcolo (da parte dell'engine del browser) delle regole e dei limiti di overflow, che quando il layout è responsive finisce quasi sempre per attivare lo stretching. Ciò perché è diventata regola generale che "caschi il mondo niente e nessuno deve sbordare al di fuori del canvas contenitore radice"; per cui, quando si impostano le dimensioni su auto (che significa "lascio decidere al rendering del browser"), il criterio di extrema ratio dell'algoritmo di rendering è molto semplice: "quando non so che pesci pigliare attivo lo stretching, perché così l'utente vede l'immagine per intero e almeno capisce di cosa si tratti, anche se in questo modo magari fa schifo solo a guardarla". (*)

Non so se questo ti consenta di inquadrare la questione per quello che è, ma ci ho provato... 

_______
(*) Ovviamente, il comportamento sano dell'engine dovrebbe essere (anche con entrambi i valori impostati su auto) quello di fare lo stretching NON di entrambe le dimensioni bensì di UNA SOLA delle due, andando a ricalcolare l'altra in modo da mantenere le proporzioni dell'immagine, ma a quanto pare questo è chiedere troppo.

[hobbit]

Risposta veloce perché ora devo andare.

Ho capito, ma il risultato finale è che su mobile, tipo smartphone, il layout è inutilizzabile visto che il 50% delle immagini vengono deformate.
Tecnicamente a mio giudizio è un problema, ovvero il layout non è armonizzato con i contenuti attuali del forum.

Poi non me ne faccio un cruccio visto che mi ero abituato ad usare anche il layout classico, compensando manualmente, allargando e restringendo la visualizzazione.

[Sardosono]

Ho capito, ma il risultato finale è che su mobile, tipo smartphone, il layout è inutilizzabile visto che il 50% delle immagini vengono deformate.

Questo è vero, ma il problema della deformazione si pone soltanto se si vuole mantenere - come ho cercato (FIN TROPPO) OSTINATAMENTE di fare fino ad ora - la responsività (orribile neologismo) anche per le immagini. Ma se ci limitiamo a mantenere la responsività (sempre orribile) solo per il testo, allora l'inconveniente scompare all'istante.

... il layout non è armonizzato con i contenuti attuali del forum.

No, è semmai il contrario, cioè che è la responsività (l'ho già detto che è un orribile neologismo?!...) in sé stessa a non essere idonea ad un mix di testo e di immagini da restituire DI FIANCO FRA LORO. Infatti basta disabilitare la responsività (l'ho già... sì, l'ho detto...) per le sole immagini ed il layout torna ad essere perfettamente idoneo.

Morale della favola, questa chiacchierata sul codice è stata utilissima, perché mi ha fatto riflettere sull'inutilità del mio intestardirmi a mantenere responsivi i temi anche per le immagini, per cui ho deciso che... UDITE, UDITE.. RULLO DI TAMBURI... ma lo scrivo in un topic separato, perché questo lo leggeranno in pochi e quasi tutti lo salteranno a piè pari... 

(continua su topic apposito)

[Rino]

Morale della favola...

"Tutti a tavola!", recitava un vecchio Carosello e, anche rimandando il piacere di una bella cena insieme a tempi migliori, passo a leggere le conclusioni nell'altro topic!