Interessante. Bisognerebbe però valutare anche la possibilità (tra le altre cose da integrare) di far variare in automatico la grandezza del carattere del testo. Sostanzialmente è soprattutto questo il vero impedimento per rendere fruibile un sito da tutti i dispositivi. 

Ps: come già segnalato in altri post, google webmaster tools sta inviando mail inerenti problemi di usabilità sui dispositivi mobili dei siti realizzati con il programma. 

Incomedia deve agire in fretta e rendere i temi responsive per evitare un fuggi fuggi generale...

Complimenti per l'interessante tentativo Skeggia!

Purtroppo se stringi la finestra di visualizzazione il contenuto rimane fisso, cioé non é possibile scorrere la pagina.

Provato con la Visualizzazione Flessibile di FF.

è una prova, se a qualcuno va, i suggerimenti sono bene accetti...

difatti due dei difetti a cui non sono riuscito a rimediare sono appunto la barra di scorrimento del sito e la riduzione/ingrandimento dei caratteri, anche se ho usato la scala em... poi ci sarà da vedere con l'inserimento di altri contenuti come si complica l'affare...

io avevo fatto un grossolano tentativo di creare una griglia fluida inserendo in una pagina 3x3 celle di testo identiche per contenuto ma differenti per colore di sfondo in modo da riconoscerle; il mio tentativo era basato sul rendere via css tutte le celle del content flottanti a sinistra; non ho avuto successo; ma forse avevo sbagliato qualcosa io; se provi tu forse riesci

Ciao Skeggia, vedo che stai tentando la mia strada.

Nel frattempo togli <div id="imContent" style="height: auto;">
e metti <div id="imContent" style="overflow: scroll;">
lo scorrimento del contenuto dovrebbe essere sistemato

per il ridimensionamento dei caratteri puoi provare così:

@media only screen and (max-device-width: 480px) {

          body {

                  font:400%;

                  }

}

puoi provare anche:

body>div {

        overflow: scroll;

        }

Skeggia coltesto che hai messo tu non si riesce a capire bene come evolve il punto di "a capo" delle righe al mutare dello schermo; perché non usi il classico Lorem Ipsum?

ripensandoci...dal momento che non sappiamo a priori il grado di annidamento dei vari div (che matrioska ragazzi!) forse é meglio cambiare combinatore con body div; così becchiamo tutti i livelli interni

Ecco le mie ultime prove: http://testwsx5v11pro.besaba.com/

...per stasera basta!

fare test per dispositivi mobili presuppone che vengano verificati su dispositivi mobili...

cosa che non mi pare sia stata fatta...non vedo traccia di responsività in questi esempi,

ma vedo cose che avrei preferito non vedere 

sbagli Silver, l'ho provato e so che non va bene.

Prima di tutto bisogna posteditare per cambiare il viewport in

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

perché da programma non si può fare;

anche posteditando, si verifica un problema di scorrimento della pagina sugli schermi piccoli; mentre sul desktop rimangono tagliati gli oggetti che fuoriescono dai 1000px impostati; solo che con auto non va proprio.

E poi ci saranno sicuramente un sacco di altre cosine.

Perché non ci dai una mano a superare tutte queste magagne?

Dai, facciamo un lavoro di squadra. In fondo é per tutti.

... ho aperto questo post per stimolare la discussione sul tema responsive e per ricevere suggerimenti da chi è più preparato di me...ho premesso che l'esempio postato è inguardabile e impresentabile, cercavo qualche suggerimento per andare avanti...non c'è problema, mi ritiro in buon'ordine...grazie fabio per la partecipazione...

Per il viewport....potresti provare la strada di Serzio...il Degenerator...

Ma io mi chiedo, non e' possibile invece fare una versione nuova website x10 non piu' x5 

con un interfaccia per il layout che si apre in modo come Edge Reflow di adobe

con l inserimento del codice responsive automatico , a cui noi dobbiamo solo dare le dimensioni del template da 480px ecc. fino a 1920px e posizionare gli oggetti e tutto il resto alle dimensioni per mobile....date un occhiata a questo bel software 

https://creative.adobe.com/it/products/reflow

@Fabrizio:

non é possibile perché quel nome ormai é un marchio affermato nel mondo; altrimenti sarei d'accordo con te perché anche io vorrei vedere il programma un tantino più sviluppato e potente con quel che costa.

Per la tua segnalazione guarda un po' qui:

https://helpcenter.websitex5.com/post/113080

https://helpcenter.websitex5.com/post/113263

Purtroppo i modelli/siti creati con Reflow non si possono usare che con gli altri prodotti Adobe come Muse o Dreamweaver; dobbiamo attendere che HTML5 Boilerplate venga integrato in WSX5.

giusto! Grazie

ragazzi cerchiamo di essere più propositivi e collaborativi e meno arrendevoli e competitivi, altrimenti non ne usciamo

fabio, io non devo competere con nessuno, ho solo proposto il punto a cui sono arrivato (si dirà: tutto qui? ebbene si...), per tentare di approfondirlo e migliorarlo se ne vale la pena, appunto nella comunità, per apprendere anche io da chi ne sa di più, ma forse sono un illuso, e quindi tenterò di capire da solo o mi toccherà abbandonare...ma tranquillo, ci sono abituato, non è la prima volta... comunque la partecipazione alla comunità non è in discussione, per quanto nelle mie conoscenze...come sempre...anche se poche...un saluto...

@ skeggia: letto ora.

Hai perfettamente ragione, non devi competere con nessuno e fin dall'inizio ti sei proposto in senso esattamente opposto a questo, direi lodevole; perciò mi sono associato.

Intanto io ti ringrazio di aver voluto condividere con noi il tuo tentativo che trovo molto utile a tutti per cimentarsi più addentro alle problematiche tecniche del problema in questione.

Forse io mi sono espresso male.

Il mio voleva essere un discorso in astratto, in generale, per dire che che qui nessuno é in gara con nessuno per dare dimostrazione di sé stesso, ma che la collaborazione che tu chiedevi da parte di chi sa di più non può limitarsi ad una critica, per quanto corretta ed auspicata. Bisogna collaborare per trovare soluzioni, anche se per trovarle il primo passo é giustamente la denunzia delle magagne. Ma non dobbiamo fermarci lì.

Chi più ha da dare più dia, se vuole.

Di solito chi é capace di vedere più lucidamente i problemi possiede anche una marcia in più per trovare i rimedi.

In questo forum esistono persone che per bravura superano la somma di te e di me e lo sanno tutti, ma ancora non leggo suggerimenti concreti per migliorare i nostri tentativi, oppure nuove idee più valide che possano servire, se non come soddisfazione del topic, almeno come buon argomento di studio.

"...tenterò di capire da solo o mi toccherà abbandonare..."

La prima frase non mi piace; la seconda mi manda in bestia!

Per una volta che abbiamo l'occasione di fare una cosa tutti insieme, e così importante, vederla finire alle ortiche per un insignificante malinteso...

...non siamo ragazzini, credo!!!

Spero che ci ripenserai ed andremo avanti insieme; il tuo lavoro mi é servito da sprone per riprendere in mano il mio che avevo già recluso nel dimenticatoio fino a data incerta senza provare a condividerlo e cercare collaborazione qui come hai fatto tu.

Hai la mia stima per questoed auguro una lunga vita a questo topic.

Premesso che ottenere un vero sito responsive con l'attuale versione di WS è pressoché impossibile, anche io e stesil abbiamo provato a tirar giù qualcosa: solo una prova, ben lontana da essere la soluzione all'annoso "problema".

Abbiamo utilizzato solo gli oggetti testo e immagine su due colonne con uno stile della cella semplice (non usate la libreria).

Partendo dalla larghezza "classica" di 960px abbiamo inserito un paio di breakpoint (media query) per risoluzioni inferiori.

Nessuno vieta di partire, per esempio, con risoluzioni più alte ed inserire più breakpoint e più colonne: in ogni caso l'operazione non sarà semplice.

Nell'esempio c'è anche uno script che dovrebbe sostituire il valore del meta name viewport:

http://lemonsong.altervista.org/test_media_query/

Ringrazio stesil per la collaborazione.

@fabio: grazie...noi due mi sembra di aver capito abbiamo lo stesso problema...scriviamo troppo esternando...qualche volta anche fuori luogo (parlo per me) io non mollo di certo... ho la fortuna di poter coltivare una passione e di non abbrutire stravaccato su un divano, quindi...dimentica tutto...per questo non pratico molto i social, la tastiera genera quasi sempre fraintendimenti... meglio ascoltare le persone dal vivo...ma non sempre è possibile...

...quello che avevo inteso fare è proprio questo che è successo dopo il tuo ultimo post...coinvolgere altri più "tosti" nel discorso...ho premesso più su che sono coscente che è quasi una battaglia persa tentare di "responsivizzare" website, e mi sembra che lemonsong ed altri confermino ciò...prenderò spunto dal loro esempio per modificare il mio che ho iniziato senza voler aggiungere script esterni (non sono preparato)...

una osservazione vorrei fare: perchè la barra del menu nei due esempi (lemon e mio) si adatta allo scorrimento dello stesso e invece l'header non si comporta allo stesso modo inserendo lo stesso codice?

@ Lemon&Stesil: grazie infinite per aver raccolto l'invito, ci contavo sapendo che il vostro sarebbe stato un intervento come sempre degno di nota.

In effetti scopro solo ora grazie a voi questo: box-sizing: border-box, che appena trovo il tempo mi propongo di approfondire e sperimentare: http://www.html.it/pag/19463/box-sizing/

Rilevo anche nel vostro esempio un problema di adattamento della larghezza della singola colonna su smartphone (dovuto certamente alle larghezze ancora espresse in modo assoluto sebbene tramite la nuova proprietà css sopra) e non trovo ancora una soluzione all'adattamento dei caratteri al medium utilizzato (solo perché non é contemplato nel vostro script, altrimenti non dubito che funzionerebbe), ma vedo che il vostro esempio migliora e coniuga entrambe le caratteristiche adottate negli esempi di Skeggia e mio separatamente, cioé l'adattamento della larghezza delle celle e la trasformazione del layout scalando il numero di colonne.

Sicuramente sono d'accordo che le cose si complicano col crescere del numero delle colonne e dei media che richiedono una serie di css dedicati.

Tuttavia sono convinto che il problema RWD sia, sebbene in modo molto laborioso, risolvibile anche via WSX5 escogitando la giusta impostazione ed adottando i giusti strumenti css.

Alla fine tutti i siti responsive, mi par di capire, adottano la creazione di uno o più file css comuni ai vari media più una quantità di fogli css dedicati.

Tutti quelli dedicati però, noi possiamo includerli in un singolo script con tutte le media-querys nel nostro progetto in modo seriale e standardizzato, tanto anche quando non sono adottate vengono comunque caricate.

Il nocciolo duro da affrontare mi sembra, nel nostro caso che usiamo un programma che fabbrica script con schemi preconfezionati dove molti elementi sono difficilmente gestibili perché anonimi, gestire tutti questi oggetti partendo da un layout potenzialmente di 12 colonne.

Io ho molte più idee di quante sappia trasformarne in codice, ma credo che il mio prossimo tentativo non sarà più incentrato sul floatting dei div, bensì sull'inserimento di questi in una tabella reattiva (che non richieda l'implementazione di frameworks esterni), magari usando congiuntamente anche la nuova Traslazione CSS.

Fatto ciò, l'individuazione dei selettori e/o combinazioni di essi potrebbe essere ancora abbastanza cervellotico a causa dell'anonimato dei div (lo sarebbe comunque ma di meno), ma l'assegnazione degli stili per i vari casi dovrebbe diventare null'altro che "calcoli della serva".

A meno che non si riesca, magari con un piccolo js, a creare delle classi che sintetizzano i selettori e le loro combinazioni complesse; questo agevolerebbe molto scrivere e leggere il css reattivo.

Tutto ciò per me é sicuramente un'ipotesi fantascientifica, ma voi due sono convinto che potreste confermarne la bontà o smentirmi in quattro-e-quattr'otto.

Domanda: nel vostro esempio vedo presente sia

<meta name="viewport" content="width=960" />

che

<script>
//change meta name viewport
$(document).ready(function () {
$("meta[name='viewport']").attr("content", "width=device-width, initial-scale=1");
});
</script>

é normale?

@ Skeggia: prego, grazie a te di aver lanciato questo sasso nello stagno!

Mi spiace ma io non so ancora rispondere alla tua ultima domanda.

capisco di essere stato un po' prolisso, ma per agevolare la comprensione di chi legge, il fulcro del metodo che ho in mente é la proprietà display: table (e relative declinazioni assortite)

Pare funzioni, almeno con i dispositivi mobili in mio possesso.

Quanto scrivi Fabio

ma non dovrebbe riscrivere la riga di codice nel documento quando viene letto dal browser? ho capito male?

ha ha ha , hai ragione Lemon, se sapessi dire le stesse cose con sole 4 righe di codice sarei felice di farlo; purtroppo le cose riesco ad esprimerle meglio in italiano, ma se riesco ad essere sufficientemente chiaro ed esaustivo, magari qualcun altro che legge (un Lemonsong o una Stesil a caso) mi aiuta a realizzare l'idea.

Seleziona l'elemento meta che ha come valore di name viewport e cambia il valore di content in width=device-width, initial-scale=1

Ovviamente non ha effetto sul sorgente.

P.S.

Ci sono alternative free con l'idea già integrata

lemon, cosa sto sbagliando qui: http://testwsx5v11pro.besaba.com/rwd-con-dis-tab.html

<style>
div.imGrid {
width:8.3% !important;
box-sizing:border-box;
display:table-cell;
}
</style>

Non so cosa vuoi combinare ma per arrivare a quei div, questo dovrebbe essere il selettore giusto (CSS3):

div[class^="imGrid"]{

bla bla bla...

}

ho già cambiato ancora strategia:

<style>
body #imHeader {position:fixed;left:0;top:0;width: 100%;background-color:#567EB6;z-index:1000;}
body #imMnMn {position: fixed; top: 150px; height:auto !important;left:0;text-align:center;width:100%;}
body #imContent {position:fixed;top: 190px;left:0; height:100%!important;width:100% !important;}
body #imContentGraphics {position:fixed;left:0%;width: 100%;height:auto;z-index:-1;background-color:whyte;}

div[id^="imCell_"] {
width:100% !important;
display:table;
}

@media only screen and (min-width: 321px) and (max-width: 640px){
div[id^="imCell_"] {
width:200% !important;
display:table;
} }
@media only screen and (max-width: 320px){
div[id^="imCell_"] {
width:400% !important;
display:table;
} }

</style>

però c'é sempre qualcosa che non torna...

Comunque mi sono reso conto che quel selettore non andava perché il nome della classe era incompleto: imGrid[0, 0], imGrid[1, 1], imGrid[2, 2]... imGrid[n, n]

Il RWD non si basa esclusivamente sul position:fixed

I miei ultimi risultati per stasera:

<style>
#imPage, #imContent, #imContentGraphics, #imHeader div, #imMnMn, #imFooter {
width:100% !important;
box-sizing: border-box;
}
#imContent > div {
display: table !important;
}
div[id^="imCell_"] {
display:table-cell !important;
}
@media screen and (max-width: 320px) {
#imContent div {
width:300px !important;
}
}
</style>

direi un consistente risultato per così poco codice no?

adesso devo accorciare l'altezza delle celle nella visualizzazione da smartphone; troppi spazi vuoti...

'notte a tutti!

Signore e Signori, Mission Impossible: SUCCESS!!!

ABBIAMO L'RWD SOLO DA PROGRAMMA!!!

E' necessario implementare sia lo script di Stesil e Lemonsong per cambiare il meta viewport, che il framework universale (per i siti sviluppati col programma) che ho creato io e che vi riporto qui:

https://helpcenter.websitex5.com/post/113718

sono state 5 serate assai divertenti e proficue per me!

Ringrazio tutti coloro che hanno partecipato in qualsiasi maniera al topic, che per quanto mi riguarda ritengo concluso pur restando in ascolto di riscontri.

Avvertenza l'uso del framework non include l'adattamento automatico delle immagini del template e rispettivo posizionamento, che andrà sistemato ad hoc secondo i casi singolari.

Dopo l'integrazione nel vostro sito potete riverificare il medesimo qui:

https://www.google.com/webmasters/tools/mobile-friendly/

LA mia prova di integrazione é stata effettuata su questo sito:

http://christour.890m.com/

L'esito della verifica di Google é stato ottimale

Eventuali piccoli aggiustamenti potrebbero essere necessari secono i casi individuali.

ahhh, dimenticavo una cosa importantissima: OHHH YEEEEAHHHH!!!!

Ciao Fabio, non vedo l'ora di testare questa tua nuova formula, e scusa la mia ignoranza ma... quel topic che hai linkato ( in inglese ) riporta un codice, che esattamente devo inserire dove ???? ho Website x5 evo 11................. Suppongo il codice sia universale per ogni sito ( purche fatto con questo programma ) se mi dai qualche coordinata, apprezzerei anche di piu :D Buona serata e grazieeeeeeeeeeeeeeeee sei grande

io non ho la Evo, ho la Pro, ma non cambia; devi inserirlo al passo 4, Impostazioni Avanzate, codice, esperto, prima della chiusura del tag head.

@ Lemon: rileggendo sopra,

ad esempio? non siete voi due gli autori? Era una citazione? cioé, devo correggere https://helpcenter.websitex5.com/post/113717 e https://helpcenter.websitex5.com/post/113718

@Tutti:

• Per quanto riguarda i problemi di compatibilità del codice CSS3 con i browsers vecchi: https://helpcenter.websitex5.com/post/106503

• per ciò che riguarda le immagini del template oltreché dei contenuti: https://helpcenter.websitex5.com/post/112667 e http://www.html.it/guide/svg-e-css-la-guida/?utm_source=newsletter&utm_medium=email&utm_campaign=Newsletter:+HTML.it&utm_content=10-02-2015+svg-e-css-la-guida si prospetta un ovvio adeguamento del framework a tempo debito

@ Incomedia e moderatori: potreste cancellare per cortesia il doppione in italiano: https://helpcenter.websitex5.com/post/113717 grazie

nuovamente @TUTTI:

per qualsiasi commento/suggerimento/correzione/domanda strettamente relative al framework vi invito a servirvi esclusivamente del nuovo canale aperto da me: https://helpcenter.websitex5.com/post/113718

senza obbligarmi ad usurpare illecitamente questo topic non mio; grazie infinite

...ancora qui:

so che esistono ancora cose da sistemare come i forms; sono in programma; ma non abbiate timore di sperimentare il fw; l'integrazione é cancellabile in caso di problemi che non sapete risolvere senza compromettere il vostro progetto originale!

@fabio: ti ho lasciato solo un giorno e hai risolto l'arcano (o quasi... ci sarà da qualcosa da perfezionare, ma mi sembra che sei arrivato a buon punto...) bravo... ora hai capito perchè ho lanciato un sasso nello stagno? da solo non ci sarei mai arrivato... avevo intuito la strada da percorrere ma poi ... appena ho un attimo lo provo...

...usurpa...usurpa pure... serena giornata...anche se pioverà...

Ciao Fabio Bevilacqua. Guarda però l'allegato... spero si tratti solo di un falso positivo.

grazie Skeggia! Mi sono appena svegliato e sto ancora gongolando...

...ma di lavoro di perfezionamento ce n'é ancora...

diciamo che abbiamo sfondato il portone; ora bisogna conquistare una per una le zone del castello, i vari tipi di contenuti nelle pagine

Di cosa? Della libreria jQuery?

No, non siamo nella lista

https://jquery.org/team/

Di un selettore ed un metodo jQuery messi in fila?

Beh, è una cosa banale...

La frase:

Era riferita a software, framework etc.. che costruiscono veri siti responsive.

come volevasi dimostrare, dopo tre anni e mezzo, quasi, che faccio siti web ancora mi sfuggono certe basi ma continuo ad avere la fortuna del principiante

Stavolta mi é andata bene, non ho fatto una figura malvagia, ma so bene che quelli bravi sono altri, siete altri.

ATTENZIONE! Il mio metodo NON FUNZIONA!

Preparerò una dettagliata spiegazione appena possibile; nel frattempo ho già provveduto ad oscurare l'altro topic col codice!

ecco qui:

in breve, il mio stratagemma veniva completamente ignorato; l'apparente funzionamento non dipendeva da quello bensì dal codice generato dal programma in certi div.La mia intenzione era, in sostanza, quella di creare una <span class="underline">vera griglia sfruttando i div e le classi imGrid[n,n] generate dal programma, invece di adoperarne in modo fittizio il comportamento dei div flottanti.

In effetti, la mia bocciatura non é da intendersi al metodo, ma solamente alla mia tentata applicazione; il metodo intuito potrebbe anche rivelarsi valido in mani più abili, fino a prova contraria.

Per quanto mi riguarda, assecondando il programma, il miglior risultato a cui son giunto non contempla l'uso della proprietà display, ma ancora il floating dei div puro e semplice con tutti i problemi legati ai vari contenuti che richiedono un aggiustamento pagina per pagina:

<style>
#imPage, #imContent, #imContentGraphics, #imHeader, #imMnMn, #imBtMn, #imFooter {
width:100% !important;
display: block !important;
}
#imBtMn, #imFooter {
clear: both;
text-align: center;
}
@media screen and (max-width: 768px) {
#imContent div {
width: 300px !important;
margin: 0 auto;
align-items: center;
min-height: 0px !important;
height: auto;
padding: 3px !important;
font: 14px important;
}
#imBtMn {
width: 100%;
box-sizing: content-box;
}
}
</style>

Nonostante il mio almeno temporaneo fallimento, resto convinto che una valida soluzione CSS3 possa celarsi nella proprietà display, che per sua natura é orientata alla gestione dei box.

Invito chiunque abbia voglia di esplorare questa strada a leggere i seguenti links:

• http://www.html.it/pag/14234/tre-propriet-speciali-display-float-clear/
• http://www.vanseodesign.com/css/vertical-centering/
• https://developer.mozilla.org/en-US/docs/Web/CSS/display

Una corretta applicazione di ciò che mi proponevo di fare potrebbe trovarsi in questo social widget che ho appena trovato:

http://testwsx5v11pro.besaba.com/simulatore-sp.html

ultimi aggiornamenti: https://helpcenter.websitex5.com/post/113717

eccovi il prossimo futuro dell'RWD (ovviamente per quanto riguarda il nodo cruciale del layout delle pagine e basta; questo non é sufficiente a fare un sito mobile-friedly principalmente perché la cosa mette in discussione gli stessi contenuti del sito ed i loro requisiti):

http://www.html.it/pag/19465/flexible-box-layout/

http://www.w3schools.com/cssref/css3_pr_flex.asp

nel frattempo che Incomedia elabori una soluzione vera, chi lo gradisce può integrare con la massima semplicità nel proprio sito il mio giocattolino css MSX5 e chiudere (almeno temporaneamente) la bocca a GG: https://helpcenter.websitex5.com/post/113717#1

Buona primavera a tutti

oppure:

https://jquerymobile.com/

http://demos.jquerymobile.com/1.4.5/

http://jquerymobile.com/demos/

Buona e Santa Pasqua a tutti!

PS: nel mio ovetto ho trovato questo:

http://www.wysiwygwebbuilder.com/index.html

ora anche in italiano e responsive e con animazioni:

http://www.wysiwygwebbuilder.com/new_features.html

...e naturalmente la storica possibilità di creare un cms all'interno del sito per gli scopi preferiti!

...questo sì é un upgrade, oltreché il mio prossimo acquisto per soli 50€!!!

...oppure http://pingendo.com/

che é pure gratis!

Lemonsong , ma per caso hai il progetto del sito in respansive che hai creato? per me sembra giusto..ma non riesco ad capire i codici dove vanno quelli da te indicati..se puoi inviarmi il progetto cosi vedo dove sono inseriti possibile questo favore ..

http://lemonsong.altervista.org/test_media_query/

Grazie 

Certo che ce l'ho ma quell'esempio è solo una prova ed i codici li puoi facilmente individuare nel sorgente.

Qui invece puoi trovare un articolo da dove puoi scaricare un .iwzip di un template responsive adattato per WS11:

http://quellidelcucuzzolo.blogspot.it/2015/03/template-alpines-website-x5-11.html

Il metodo utilizzato è più o meno lo stesso.

Ti faccio notare, però, che i codici da utilizzare variano a secondo degli oggetti inseriti.

Buona fortuna!

Mi sto facendo solo una domanda... leggendo questo post , specialmente la finale del postt . Ma incomedia dorme ??? Perchè alla fine la soluzione è degli utenti??? questo spiegherà mai qualcuno agli utenti ???

Complimenti a Lemon, come sempre !! sei grande ;) meglio della staff di incomedia

,pero.... alla fin fine forse meglio pensarci bene e magari seguire quello che scrive Fabrizio ... http://www.wysiwygwebbuilder.com/index.html , e cambiare ;) 

su questo http://quellidelcucuzzolo.blogspot.it/2015/03/template-alpines-website-x5-11.html , ormai ci sono troppe cose da dover modificare con ws , no Lemon ? ;) ne vale la pena ? truffolandosi con ws?

cmque Buona Pasqua a tutti !

ma si, come ho iniziato questo post, solleviamo un'altro piccolo vespaio...

ci fu un tempo in cui tutti volevano inserire un cms in website...

e c'erano soluzioni a cio'...e venne il contenuto dinamico...

tutti a dire che era scarso e a chiedere miglioramenti al contenuto dinamico...

quasi tutti i post si riferivano al contenuto dinamico...

e venne qualche miglioria al contenuto dinamico...

ora non lo nomina più nessuno...non serve più?

tutti con i siti responsive...google penalizza chi non è responsive (senza pensare che ancora oggi la grande maggioranza dei navigatori usa il pc da casa o ufficio, più o meno lo stesso dicorso di flash, non compatibile con una sparuta minoranza di device)...

quindi meglio rivolgersi a programmi diversi che lo hanno nativo il responsive...

ma chi è professionista e sa' di js, php, ecc. e non "uebmaster della domenica" li usa già quei programmi, programmi che hanno bisogno, secondo me, di "creatività grafica"... cioè il sito lo devi avere ben chiaro in mente, visto che hai una pagina vuota davanti (a meno che non si prenda un template preconfezionato e ci cambi i testi e le immagini)...

ora non voglio decantare le lodi di website, lascio agli altri le conclusioni e i pensieri...

buona pasquetta a tutti...

non é così, il tema della dinamicità dei contenuti per quanto mi riguarda non solo non é mai caduto nel dimenticatoio, ma anzi lo reputo da sempre anche più importante ed interessante del discorso RWD; però non c'entra niente con questo topic, fatta eccezione per la solita lentezza di Incomedia nel dare ascolto alle richieste dei clienti.

Il collegamento ad un db degli articoli del blog, degli articoli del cart, degli oggetti contenuto-dinamico, la possibilità di poter differenziare i privilegi amministrativi per concederli a persone prive del programma, ecc...credo di averli chiesti fino allo sfinimento, ma a malapena é stato introdotto l'oggetto contenuto-dinamico senza db nella v10Pro e adesso un nuovo oggetto opzionale db-viewer che sta solo dando problemi ed é limitatissimo.

Nell'era del web 2.0, in cui l'interattività é un imperativo imprescindibile per un sito web che si proponga di avere successo rivolgendosi alle masse non paganti invece che ad una nicchia di utenti particolarmente motivati e paganti, noi siamo ancora fermi a fare inutili "biglietti da visita digitali", siti vetrina statici o poco più persino con le versioni Pro, che per definizione dovrebbero essere concepite per quei professionisti del settore che non creano i siti per sé stessi ma per cederli in gestione ad terzi paganti che non hanno tempo o voglia di mettersi a studiare l'informatica neanche per hobby.

La mia ripetuta richiesta di aumentare le funzionalità del programma mediante l'integrazione di nuovi moduli php che permettessero al programma di essere un vero factotum, cioé un modulo Forum, un modulo Social Community, ecc...é a tuttoggi completamente ignorata!

Ma tutto ciò oltreché OT é pure aria fritta; sono stanco di chiedere inutilmente cose che dovrebbe anche essere superfluo chiedere.

Ripeto: quel template adattato per WS11 è un esempio/esperimento/chiamalo come vuoi, fatto più per divertimento che per "diffondere il metodo".

Come ripetuto da anni fino allo sfinimento: chi non vuole aspettare gli aggiornamenti e non vuole (o non può) lasciare WS, soluzioni si trovano, basta tirarsi su le maniche.

a Lemon, ... secondo te incomedia, sarà mai capace ad inserire un tale esempio/esperimento/ "divertimento" ? ahahaha

Aspettare gli aggiornamenti, dici? MAH ... https://helpcenter.websitex5.com/post/113780#13

New: http://www.html.it/pag/53026/introduzione-a-flexbox/

buongiorno ragazzi ( e buona domenica a tutti ) e molto tempo che seguo questa discussione, e devo dire che se ne sono dette tante, e fatto tante prove... Troppi post per un neofita come me che, a un  certo punto mi sono perso...

A quale punto siete arrivati ? Mi pare che siate ad un buon punto ( anche se nella vostra modestia dite di non aver completato ) 

e possibile avere il codice del risultato finale ? 

Sapete, il responsive nei siti che mi occorre, non e solo per cellulari e dispositivi mobile, ma anche per grossi dispositivi ( tv, schermi groossi ecc )

strano che in tutta la discussione, incomedia non ci abbia messo parola, visto che oggi quasi tutte le compagnie/aziende che vendono prodotti per creare siti, hanno introdotto la possibilità di inserire responsive di default..........

potreste cortesemente, linkarmi al esatto codice del risultato finale fin ora ragiunto, e se vi va spiegarmi in parole povere e che siamo arrivati ( ripeto ho letto e riletto ma fra un post e un altro mi perdo.. Sarà che siete troppo "tecnici" per me ) ;) grazie a tutti, ottimo lavoro cmq!

https://helpcenter.websitex5.com/post/119654

https://helpcenter.websitex5.com/post/122947

Ciao Skeggia , Bravo, ma su cosa in particolare hai lavorato per le modifiche?

Usando le pseudoclassi ho creato una sorta di reset per Website x5 per farlo diventare responsivo. Il codice da inserire sulla Head della pagina è questo:

<!-- RESPONSIVIZZAZIONE STRUTTURA WEBSITE -->

<!-- Elementi che compongono il flusso normale della pagina (ossia elementi statici e relativi):
- "html" è la pagina intera cioè la finestra del browser (ossia lo sfondo)
- "imPage" è l'elemento contenitore di tutti gli altri facenti parte del flusso normale
- "imHeader"(ossia intestazione), "imContent" e "imFooter"(ossia piè pagina), sono gli elementi contenuti che si susseguono 


Elementi absolute staccati dagli altri (si rapportano all'html ossia finestra del browser):
- "imHeaderBg" è lo sfondo dell'Header (ossia sfondo intestazione)
- "imMnMn" è il menù
- "imContentGraphics" è lo sfondo dei contenuti (tutti i contenuti)
- "imFooterBg" è lo sfondo dell Footer (ossia sfondo piè pagina)

-->

<style>

html, body {height:100%; width:100%; margin: 0px, padding: 0px; }

html { }
body { }
#imPage {min-height:100%; width:100%; margin: 0px, padding: 0px; z-index:1000003 !important;}
#imHeader, #imHeaderBg { width:100%; margin: 0px 0px; left: 0; top: 0; height:150px; }



#imMnMn {position: absolute; top: 150px; margin: 0xp; padding:0px; width: 90% ; height:40px;}
#imMnMn > ul { text-align: left; height:40px; }
#imMnMn li {display: inline; height:40px;}



#imContent {
height:90%;
min-height:200px;
width:100%;
margin:0;
margin-top: 40px;
padding:0px;
overflow:hidden;
}
#imContentGraphics { position:absolute; top:190; left:0; width:100%; }

#imFooter, #imFooterBg {
height:10%;
width:100%;
position:absolute;
bottom:0;
left:0;
overflow:hidden;
} 


#imFooPad { } /* Mappa del sito di fine pagina */

img, embed, object, video { max-width: 100%; } /* Per evitare lo sbordamento di immagini, video... dal loro box contenitore */

</style>

<!-- Selezione delle Righe e Colonne nella struttura della pagina 
(il richiamo vinene fatto attraverso l'uso delle pseudoclassi strutturali).
Notare che: 
1) l'espressione "div[style^="width:"]:nth-of-type(2)" richiama la seconda sriga riga (ossia 2° figlio di quel tipo)
2) l'espresssione "div[style^="float:"]:nth-of-type(1)" richiama la 2° colonna (ossia 2° figlio di quel tipo)
3) Per ogni riga, le colonne corrispondono agli elementi inseriti + eventuali spazi vuoti) 
4) Layout ad una sola riga hanno solo i div delle colonne presenti (vedere il sorgente della struttura)
-->

<style>

/* RICHIAMO SINGOLE RIGHE INSERITE DAL PROGRAMMA:

div[style^="width:"] {width:100% !important; float:left !important; } /* elementi riga della struttura */
div[style^="float:"] {width:auto !important; float:left !important; } /* elementi colonne della struttura (i vari oggetti o spazi vuoti nella struttura) */

</style>

</style>

/* RICHIAMO di RIGHE e COLONNE SPECIFICHE QUANDO SI INSERISCONO PIù ELEMENTI IN UNA RIGA:

#imContent div[style^="width:"]:nth-of-type(2) { width:100% !important; } richiama la 2° riga (ossia il secondo figlio di quel tipo (riga) 
#imContent div[style^="width:"]:nth-of-type(1) div[style^="float:"]:nth-of-type(3) {width:100% !important; float:left !important; } /* richiama la 3° colonna della prima riga("nth-child(2)") 
*/

</style>

<!-- Selezione generale degli elementi del contenuto della pagina -->

<style>
div[id^="imCell_"] {width:100% !important; float:left !important; } /* contenitori dei contenitori oggetti (Richiamo generale) */
div[id^="imCellStyle_"] {width:100% !important; } /* elementi contenitori oggetti (Richiamo generale) */
#imContent iframe {width:98% !important; float:left;} /* elementi iFrame (ad esempio per i contenuitori delle mappe) */


div[id^="imHTMLObject_"] {width:100% !important; } /* elementi contenitori oggetti HTML */

div[id^="imTextObject_"] {width:100% !important; } /* elementi style contenitori TESTO */
div[id^="imTableObject_"] {width:100% !important; } /* elementi style contenitori TABELLA */
div[class^="text-container"] {width:100% !important; } /* (eventuali schede) contenitori dei contenitori SCHEDE */
div[class^="text-tab-content"] {width:100% !important; } /* (eventuali schede) elementi contenitori SCHEDE */
div[class^="text-inner"] {width:98% !important; } /* elementi testi oggetti testo */
table { width:100% !important; } /* elementi tabella (ognuna identificata con un id ) */
tr { } /* righe tabella (non identificate univocamente, usare le pseudoclassi strutturali per richiamrle singolarmente: ad ES. "tr:nth-child(4) td {...}") */
td { } /* colonne tabella (identificate complessivamente con la classe "imVc" ma non identificate univocamente (vale il discorso fatto sopra per il richiamo singolare delle righe) */


div[id^="imObjectImage"] {width:100% !important; } /* elementi contenitori oggetti IMMAGINE */
img[id^="imObjectImage"] {width:100% !important; height: auto !important;} /* IMMAGINI contenute nel oggetto contenitore */

div[id^="imObjectGallery"] {width:100% !important; } /* elementi contenitori oggetti GALLERY */

div[id^="imObjectVideo"] {width:100% !important; } /* elementi contenitori oggetti VIDEO */

*[id^="imObjectForm"] {width:100% !important; } /* elementi contenitori oggetto FORM */
fieldset.first div {width:99% !important; } /* elementi contenuti nell' oggetto FORM */

div[id^="imObjectSocialNetwork"] {width:100% !important; } /* elementi contenitori oggetto SOCIAL */ 

div[id^="GuestBookObject"] {width:100% !important; } /* elementi contenitori oggetto GUESTBOOK */ 

div[id^="imObjectMap"] {width:100% !important; } /* elementi contenitori oggetto MAPPA */

div[id^="imObjectFlash"] {width:100% !important; } /* elementi contenitori oggetto ANIMAZIONE FLASH */

div[id^="imProductList"] {width:100% !important; } /* elementi contenitori oggetto CARRELLO PRODOTTI */

div[id^="dynObj"] {width:100% !important; } /* elementi contenitori OGGETTO DINAMICO */ 
div[id^="dynamic-object-text"] {width:100% !important; } /* elementi TESTO OGGETTO DINAMICO */

</style>

<!--
ESEMPIO di stili per operare nei singoli elementi del contenuto della pagina (richiamandoli col proprio id)

<style type="text/css">
#imContent > div { width:100% !important }
#imCell_1 { width:100% !important; }
#imCellStyle_1 { width:100% !important; }

div[style="float: left; width: 320px;"] { width:31.3% !important; margin:1%; }
#imCell_2 { width:100% !important; }
#imCellStyle_2 { width:100% !important; }
#imCellStyle_2 .text-inner { width:88% !important; }
#imCell_2 img{ width:100% !important; height: auto !important; }

#imCell_3 { width:100% !important }
#imCellStyle_3 { width:100% !important }
#imCellStyle_3 .text-inner { width:88% !important; }
#imCell_3 img{ width:100% !important; height: auto !important; }

#imCell_4 { width:100% !important }
#imCellStyle_4 { width:100% !important }
#imCellStyle_4 .text-inner { width:88% !important; }
#imCell_4 img{ width:100% !important; height: auto !important; }
</style>

-->







Il metodo funziona abbastanza bene se inseriamo un solo elemento in ogni riga della costruzione pagina mentre se inseriamo 2 o più elemnti in una riga questa va richiamata coll'apposita pseudoclasse assegnando lo sopazio in % che deve occupare ogni singolo elemnto della riga (vedi nel codice "RICHIAMO di RIGHE e COLONNE SPECIFICHE QUANDO SI INSERISCONO PIù ELEMENTI IN UNA RIGA")

E' migliorabile ma fatemi sapere come va e se vi funziona...

Nel codice sopra manca un elemento, questo è il codice giusto:


<!-- RESPONSIVIZZAZIONE STRUTTURA WEBSITE -->

<!-- Elementi che compongono il flusso normale della pagina (ossia elementi statici e relativi):
- "html" è la pagina intera cioè la finestra del browser (ossia lo sfondo)
- "imPage" è l'elemento contenitore di tutti gli altri facenti parte del flusso normale
- "imHeader"(ossia intestazione), "imContent" e "imFooter"(ossia piè pagina), sono gli elementi contenuti che si susseguono


Elementi absolute staccati dagli altri (si rapportano all'html ossia finestra del browser):
- "imHeaderBg" è lo sfondo dell'Header (ossia sfondo intestazione)
- "imMnMn" è il menù
- "imContentGraphics" è lo sfondo dei contenuti (tutti i contenuti)
- "imFooterBg" è lo sfondo dell Footer (ossia sfondo piè pagina)

-->

<style>

html, body {height:100%; width:100%; margin: 0px, padding: 0px; }

html { }
body { }
#imPage {min-height:100%; width:100%; margin: 0px, padding: 0px; z-index:1000003 !important;}
#imHeader, #imHeaderBg { width:100%; margin: 0px 0px; left: 0; top: 0; height:150px; }



#imMnMn {position: absolute; top: 150px; margin: 0xp; padding:0px; width: 90% ; height:40px;}
#imMnMn > ul { text-align: left; height:40px; }
#imMnMn li {display: inline; height:40px;}



#imContent {
height:90%;
min-height:200px;
width:100%;
margin:0;
margin-top: 40px;
padding:0px;
overflow:hidden;
}
#imContentGraphics { position:absolute; top:190; left:0; width:100%; }

#imFooter, #imFooterBg {
height:10%;
width:100%;
position:absolute;
bottom:0;
left:0;
overflow:hidden;
}


#imFooPad { } /* Mappa del sito di fine pagina */

img, embed, object, video { max-width: 100%; } /* Per evitare lo sbordamento di immagini, video... dal loro box contenitore */

</style>

<!-- Selezione delle Righe e Colonne nella struttura della pagina
(il richiamo vinene fatto attraverso l'uso delle pseudoclassi strutturali).
Notare che:
1) l'espressione "div[style^="width:"]:nth-of-type(2)" richiama la seconda sriga riga (ossia 2° figlio di quel tipo)
2) l'espresssione "div[style^="float:"]:nth-of-type(1)" richiama la 2° colonna (ossia 2° figlio di quel tipo)
3) Per ogni riga, le colonne corrispondono agli elementi inseriti + eventuali spazi vuoti)
4) Layout ad una sola riga hanno solo i div delle colonne presenti (vedere il sorgente della struttura)
-->

<style>
div[style^="width:"] {width:100% !important; float:left !important; } /* elementi riga della struttura */
div[style^="float:"] {width:auto !important; float:left !important; } /* elementi colonne della struttura (i vari oggetti o spazi vuoti nella struttura) */

/* RICHIAMO di RIGHE e COLONNE SPECIFICHE QUANDO SI INSERISCONO PIù ELEMENTI IN UNA RIGA:
#imContent div[style^="width:"]:nth-of-type(2) { width:100% !important; } richiama la 2° riga (ossia il secondo figlio di quel tipo (riga)
#imContent div[style^="width:"]:nth-of-type(1) div[style^="float:"]:nth-of-type(3) {width:100% !important; float:left !important; } /* richiama la 3° colonna della prima riga("nth-child(2)")
*/
</style>

<!-- Selezione generale degli elementi del contenuto della pagina -->

<style>
div[id^="imCell_"] {width:100% !important; float:left !important; } /* contenitori dei contenitori oggetti (Richiamo generale) */
div[id^="imCellStyle_"] {width:100% !important; } /* elementi contenitori oggetti (Richiamo generale) */
#imContent iframe {width:98% !important; float:left;} /* elementi iFrame (ad esempio per i contenuitori delle mappe) */


div[id^="imHTMLObject_"] {width:100% !important; } /* elementi contenitori oggetti HTML */

div[id^="imTextObject_"] {width:100% !important; } /* elementi style contenitori TESTO */
div[id^="imTableObject_"] {width:100% !important; } /* elementi style contenitori TABELLA */
div[class^="text-container"] {width:100% !important; } /* (eventuali schede) contenitori dei contenitori SCHEDE */
div[class^="text-tab-content"] {width:100% !important; } /* (eventuali schede) elementi contenitori SCHEDE */
div[class^="text-inner"] {width:98% !important; } /* elementi testi oggetti testo */
table { width:100% !important; } /* elementi tabella (ognuna identificata con un id ) */
tr { } /* righe tabella (non identificate univocamente, usare le pseudoclassi strutturali per richiamrle singolarmente: ad ES. "tr:nth-child(4) td {...}") */
td { } /* colonne tabella (identificate complessivamente con la classe "imVc" ma non identificate univocamente (vale il discorso fatto sopra per il richiamo singolare delle righe) */


div[id^="imObjectImage"] {width:100% !important; } /* elementi contenitori oggetti IMMAGINE */
img[id^="imObjectImage"] {width:100% !important; height: auto !important;} /* IMMAGINI contenute nel oggetto contenitore */

div[id^="imObjectGallery"] {width:100% !important; } /* elementi contenitori oggetti GALLERY */

div[id^="imObjectVideo"] {width:100% !important; } /* elementi contenitori oggetti VIDEO */

*[id^="imObjectForm"] {width:100% !important; } /* elementi contenitori oggetto FORM */
fieldset.first div {width:99% !important; } /* elementi contenuti nell' oggetto FORM */

div[id^="imObjectSocialNetwork"] {width:100% !important; } /* elementi contenitori oggetto SOCIAL */

div[id^="GuestBookObject"] {width:100% !important; } /* elementi contenitori oggetto GUESTBOOK */

div[id^="imObjectMap"] {width:100% !important; } /* elementi contenitori oggetto MAPPA */

div[id^="imObjectFlash"] {width:100% !important; } /* elementi contenitori oggetto ANIMAZIONE FLASH */

div[id^="imProductList"] {width:100% !important; } /* elementi contenitori oggetto CARRELLO PRODOTTI */

div[id^="dynObj"] {width:100% !important; } /* elementi contenitori OGGETTO DINAMICO */
div[id^="dynamic-object-text"] {width:100% !important; } /* elementi TESTO OGGETTO DINAMICO */

</style>

<!--
ESEMPIO di stili per operare nei singoli elementi del contenuto della pagina (richiamandoli col proprio id)

<style type="text/css">
#imContent > div { width:100% !important }
#imCell_1 { width:100% !important; }
#imCellStyle_1 { width:100% !important; }

div[style="float: left; width: 320px;"] { width:31.3% !important; margin:1%; }
#imCell_2 { width:100% !important; }
#imCellStyle_2 { width:100% !important; }
#imCellStyle_2 .text-inner { width:88% !important; }
#imCell_2 img{ width:100% !important; height: auto !important; }

#imCell_3 { width:100% !important }
#imCellStyle_3 { width:100% !important }
#imCellStyle_3 .text-inner { width:88% !important; }
#imCell_3 img{ width:100% !important; height: auto !important; }

#imCell_4 { width:100% !important }
#imCellStyle_4 { width:100% !important }
#imCellStyle_4 .text-inner { width:88% !important; }
#imCell_4 img{ width:100% !important; height: auto !important; }
</style>

-->

Ok, visto che c'é ancora chi si sta divertendo a lavorare sul responsive con la tecnica del floating, che io avevo abbandonato per passare alla tecnica display (ormai ho interrotto anche quella perché attendo l'uscita della nuova versione del programma), vi pubblico qui un paio di esempi dei miei risultati con il solo floating delle celle:

• http://msx5.it/christour/
• http://msx5.it/ipani/

chi lo desidera trova lo script nel sorgente, ma ormai é obsoleto e io non perderò più tempo a perfezionare questo né la versione con i flexbox;

buon divertimento!