Sito responsive
Auteur : Carmelo C.Salve a tutti, dopo aver quasi completato il mio sito, partendo dalla base del project template "shop some more" ove ho apportato diverse modifiche, ho deciso di acquistare la versione 12 di website X5 per renderlo anche responsive. Ho fatto diverse prove, tra definire l'ordine di visualizzazione degli oggetti, a rendere alcuni oggetti non visibili, inserito interruzioni di riga. Purtroppo non ostante ho fatto diverse prove non riesco a renderlo lineare con una bella visibilità nel senso che mi "sballano" interlinee, oggetti fuori posto, nell'home del menù in versione responsive si vede solo mezza "casetta" etc. etc. Diventa tutto molto confusionario ed in uno smartphone ancora peggio!
Non capisco se non ho capito io bene come renderlo responsive oppure pensando di renderlo responsive occorre fin dall'inizio progettarlo in un certo modo.
Per rendere meglio l'idea di quello che succede ho pubblicato una versione "light" di prova www.provasncdue.altervista.org dove potete vedere quello che succede ai diversi intervalli e risoluzioni.
Spero che qualcuno mi possa aiutare e dare consigli. Grazie.
Buongiorno Carmelo,
se ti riferisci alla sezione "scegli le nostre categorie" e "nuovi prodotti", prova invece di inserire aggetti immagini e testi ad creare tutta la sezione in un unico oggetto testo.
Inserendo nell'oggetto testo le due immagini ai bordi e al centro il testo.
Oppure puoi provare a nascondere le due immagini dei bordi nelle varie visualizzazioni.
Fammi Sapere
Auteur
Mi riferisco a diverse parti o sezioni. Allego un file zip con diverse immagini di quello che mi succede a bassi intervalli e risoluzioni.
In particolare, la home del menù versione responsive che come puoi vedere non viene ben visualizzata e credo che a questo punto l'unica soluzione è trasformarla in testo. I titoli delle varie sezioni (e cioè "scegli le nostre categorie"; "nuovi prodotti"; "i nostri servizi") che vanno a capo e quindi la linea a sinistra del nome della sezione va a capo e graficamente non è molto estetica (vedi immagine per comprenderci meglio). I nomi delle categorie dei prodotti (e cioè "accessori, bomboniere, articoli da regalo", etc. etc,) si dividono e metà nome va a capo. I 4 marchi (crispo, maxtris, navel, buratti) non sono più nella stessa posizione rispetto a quando lo visualizzo su desktop a schermo pieno (e cioè in quella fascia "grigiastra" con l'immagine di sfondo).
Non ho invece capito la tua soluzione di inserire tutto nell'oggetto testo con le immagini ai bordi e al centro il testo oppure di nascondere le due immagini dei bordi nelle varie visualizzazioni. In che senso?
Buongiorno Carmelo,
cercherò di essere più chiaro, al passo 3 la tua pagina sarà formata dalle due immagini e dall'oggetto testo in mezzo, come nel mio primo screenshot.
Aprendo la schermata del responsive puoi settare di nascondere le due immagini per la visualizzazione per smartphone così da migliorare le visibilità del testo, vedi screen 2.
Fammi Sapere se hai difficoltà.
Auteur
Non riuscivo a capirti perchè nel mio progetto avevo le due immagini all'intero dello stesso oggetto testo. Adesso li ho separati e nascosti in visualizzazione smartphone e va molto meglio.
E per il resto? Home del menù, nomi delle categorie dei prodotti....come risolvo?
Buongiorno Carmelo,
sono felice che hai risolto.
Per i menù prova a inviarmi di nuovo uno screenshot e di come hai impostato l'oggetto al passo 3 così da capire meglio.
Se preferisci puoi anche allegarmi il progetto .iwzip anche con solamente la pagina in questione così da poter agire direttamente sul progetto.
Fammi sapere.
Auteur
Buongiorno Riccardo,
ok, grazie mille. Credo che la soluzione migliore sia il file iwzip. Ho visto però che supera i 1024kb. Come te lo posso inviare? Va bene se lo metto in dropbox e ti posto il collegamento?
Buongiorno Carmelo,
se preferisci si, puoi caricarlo su dropbox e comunicarmi il link per scaricarlo.
Fammi sapere
Auteur
Buongiorno Riccardo,
il link dove troverai il progetto è https://www.dropbox.com/s/p3efwkl2wql53ja/Il Sogno nel Confetto-prova.iwzip?dl=0
Ti riepilogo brevemente i miei problemi di cui ti allego delle immagini.
1. Menù responsive "la casetta" della home si vede a metà (vedi immagine 1)
2. la descrizione degli articoli (accessori, idee regalo, bomboniere, etc. etc.), in responsive, non è più centrata (vedi immagine 2)
3. Tutte le altre sezioni come ad esempio "nuovi prodotti", "cosa dicono di noi", etc. etc. vanno "fuori" le strisce "grigiastre" con l'immagine di sfondo della pagina. (vedi immagine 3).
Grazie mille per l'aiuto.
Buongiorno Carmelo,
Il file allegato che hai inviato è corrotto e non si apre.
per il primo punto dovresti allargare i pulsanti del menù a comparsa così da per risultare visibile la casetta.
Per la descrizione degli articoli tu hai inserito il testo così: ......IDEE REGALO......
devi togliere i punti ovvero IDEE REGALO, i punti infatti vengono interpretati come una parola e quindi ti sfasa il testo per quello.
Per le strisce dipende dal codice personale html che hai inserito devi controllare quello, oppure puoi settare come sfondo delle celle di quella sezione il colore di sfondo che vuoi utilizzare.
Spero di esserti stato utile.
Auteur
Buongiorno Riccardo,
Utilissimi i tuoi consigli che mi hanno fatto meglio comprendere alcune funzionalità per cui ho anche apportato altre modifiche.
Per quanto riguarda le strisce, purtroppo non capisco nulla di codice html e quello inserito era già incluso nel template. Ho riesportato la prima pagina del sito e ti allego il link del progetto dove puoi vedere il codice html, chiedendoti come posso risolvere questo problema delle strisce. Spero che tu possa ancora aiutarmi. Grazie.
https://www.dropbox.com/s/1a2586uc10r1dl3/prova.iwzip?dl=0
Buongiorno Carmelo,
purtroppo per i codici che hai inserito manualmente non posso aiutarti, sono precisamente questi che hai inserito al passo 2 in proprietà pagina:
<div style="background-color:#2a2a2a;position:absolute;right:0px;width:100%;top:0px;height:50px"></div>
<div style="background-color:#ffffff;position:absolute;right:0px;width:100%;top:50px;height:50px"></div>
<div style="background-color:#ffffff;position:absolute;right:0px;width:100%;top:440px;height:1550px"></div>
<div style="background-color:#2a2a2a;position:absolute;right:0px;width:100%;top:1990px;height:220px;opacity:0.4"></div>
<div style="background-color:#ffffff;position:absolute;right:0px;width:100%;top:2210px;height:350px"></div>
<div style="background-color:rgb(224, 11, 129);position:absolute;right:0px;width:100%;top:2560px;height:50px"></div>
<div style="background-color:#2a2a2a;position:absolute;right:0px;width:100%;top:2610px;height:410px;opacity:0.7"></div>
<div style="background-color:#2A2A2A;position:absolute;right:0px;width:100%;top:3020px;height:400px"></div>
<div style="background-color:#FFFFFF;position:absolute;right:0px;width:100%;top:3420px;height:300px;opacity:0.7"></div>
<div style="background-color:rgb(0, 141, 210);position:absolute;right:0px;width:100%;top:3720px;height:50px"></div>
<div style="background-color:#ffffff;position:absolute;right:0px;width:100%;top:3770px;height:520px"></div>
<div style="background-color:#2a2a2a;position:absolute;right:0px;width:100%;top:4290px;height:430px"></div>
<div style="background-color:#FFFFFF;position:absolute;right:0px;width:100%;top:4720px;height:50px"></div>
Dovresti modificare le varie posizioni, magari qualche altro utente può darti maggiori informazioni.
Auteur
Si lo so che i codici sono questi, ma in versione responsive come posso ovviare a questo problema? Non riesco a trovare una soluzione, perchè l'unica possibilità di modifica che ho è quella al passo 1->Stile del modello -> struttura del modello responsive, ma non trovo una soluzione per renderlo "pulito" graficamente in versione responsive.
Qualcuno ha suggerimenti?
Auteur
E' veramente impensabile come su 184 visite nessuno ha un suggerimento ed ancor peggio sono deluso che dopo aver acquistato un project template, la versione pro 11, ed infine la versione pro 12 per rendere responsive il mio sito web (con piena facilità così come ben pubblicizzato), scopro che con quel project acquistato ci sono difficoltà per renderlo responsive o meglio dargli una discreta grafica in responsive e la Incomedia non riesce a trovarmi una soluzione o suggerimento rimandandomi alla speranza che qualche utente possa suggerire qualcosa.
Intervengo solo per ribadire il fatto che quei codici li avete messi voi di Incomedia.
@Carmelo
Se vuoi, per quanto riguarda le strisce, puoi dare un'occhiata qui:
http://quellidelcucuzzolo.blogspot.it/2016/01/layout-strisce-orizzontali-website-x5-12.html
Auteur
uhm...Grazie lemonsong, mi sembra proprio quello che volevo fare io e cioè delle strisce flessibili che si spostano in base al contenuto, anzi in base alla risoluzione dello schermo.
Non ho però chiarissimo come fare. Vediamo se ho capito bene.
1. Nella mia pagina inserisco diversi Oggetto Codice HTML nelle righe dove voglio le mie strisce, quindi se dovessi avere 5 strisce devo inserire n.5 "Oggetto Codice HTML".
2. Ad esempio nel primo oggetto copio il la prima riga di codice originale che avevo (vedi post precedente di riccardo) <div style="background-color:#2a2a2a;position:absolute;right:0px;width:100%;top:0px;height:50px"></div>
3. questo codice lo scrivo tra <div id="rowObject_n"> e </div>, (n è il numero di riga)quindi diventerebbe
<div id="rowObject_n"><div style="background-color:#2a2a2a;position:absolute;right:0px;width:100%;top:0px;height:50px"></div></div>
4. Allego il file jq_strip12.js
Non sono molto convinto di aver capito.
Lemonsong ho capito bene?
Hai capito parzialmente
All'inizio dell'articolo c'è un link al forum unofficial dove potrai approfondire il funzionamento dello script rielaborato.
Se ti serve solo uno sfondo colorato o con immagine in background, devi solamente allegare lo script, richiamarlo in modo corretto ed inserire i CSS.
La procedura che tu hai descritto serve solo se devi inserire, per esempio, una mappa di Google o una slider a tutto schermo tra gli oggetti che compongono la pagina.
Altro non aggiungo perché ripeterei cose già dette e ridette.
Un'alternativa simile: http://strip-bg.16mb.com/home-page---copia2.html
nel sorgente della pagina trovi lo script; devi solo metterci i colori o le immagini che vuoi tu in maniera analoga a quella descritta nel link di Lemonsong e piazzarlo nella sezione head della tua pagina.
Auteur
ok, vi ringrazio. Non capisco nulla di script, html, css ma per principio proverò a capirci qualcosa anche se impiegherò qualche giorno in più. Vi terrò aggiornati.
Auteur
Ho fatto le prime prove ma sbaglio sicuramente qualcosa. Giusto per fare la prova ho eseguito le seguenti operazioni direttamente sul project template "shop some more":
1. In head della pagina (Proprietà pagina, esperto, prima della chiusura del tag HEAD) ho inserito i codici
<style>
.sfondo0 {background-color:#FFCC66;}
.sfondo1 {background-color:#CCCCCC;}
.sfondo2 {background-color:#003366;}
</style>
2. ho scaricato il file jq_strip.js indicato nel post di unofficial
3. Non ho capito bene come "allegarlo al progetto attraverso un oggetto HTML e Widgets, indicando come cartella di destinazione la cartella files." per cui per fare la prova l'ho inserito al passo 4 - statistiche, SEO e codice - e nella sezione Esperto, prima della chiusura del tag HEAD, ho inserito il codice <script src="files/jq_strip.js"></script> ed ho caricato in questa sezione il file jq_strip.js.
Così facendo non vedo il risultato. Cosa ho sbagliato? Domande:
1. I codici che già esistono di base nel project template (sarebbero quelli indicati da Riccardo) si devono eliminare o si devono lasciare??
2. Vorrei dei chiarimenti sul punto 3. di quello che ho eseguito.
3. Invece sulla risposta di Fabio (che mi piace molto l'esempio) vorrei sapere se "nel sorgente della pagina trovi lo script" vuol dire cliccare tasto destro nella pagina -> esamina elemento e prelevare il codice di cui allego l'immagine e copiarlo nella pagina di mio interesse prima della chiusura del tag HEAD.
Scusate se scrivo passo passo le operazioni ma non capisco "uno script" di queste cose e sto cercando di imparare da autodidatta per cui devo "sbatterci" un pò prima che entro in questa logica.
Grazie.
Il topic del forum unofficial devi leggerlo tutto e non fermarti al primo post di quasi due anni fa e ti "serve" per approfondire.
Nell'articolo del blog di "quelli del cucuzzolo" trovi il resto.
Conoscere bene il programma e un po' di infarinatura di base sui linguaggi è d'obbligo.
In Rete trovi un sacco di guide per iniziare.
Ciao, hai capito perfettamente tutto; in fondo allo script, dove trovi le diciture background-color:#xxxxxx puoi personalizzare i colori; se te ne servono supplementari non devi fare altro che aggiungere un altro di questi versetti in fondo allo script:
#imGroup_1 #imGroup_y {
background-color:#xxxxxx;
}
y é [(il numero della riga di layout della pagina al passo 3)+1] del programma.
Note importanti:
PS: l'appetito vien mangiando; inizia a studiare; siamo in molti autodidatti qui che studiamo nei ritagli di tempo alla sera.
Io ti consiglio di non risparmiare sulla formazione affidandoti unicamente alla rete, dove puoi trovare le risposte a domande che non capisci.
Comprati qualche buon libro scritto da formatori di professione che ti prendono per mano dalle cose più semplici a quelle più complesse gradualmente
Auteur
Ho provato....risultato nullo ....ho pubblicato una prova http://www.provasncdue.altervista.org/
ho letto tutto il post di unofficial, ho caricato il file nuovo compatibile con la versione 12, ho provato anche a circondare il codice con un div assegnando il rowobject e nno ho ottenuto sempre nulla. Devo inseire forse il selettore row??? ma dove? in che modo?
Se per favore potete aiutarmi e dirmi dove sbaglio, ci sto veramente sbattendo la testa sul cucuzzolo!
Sai consigliarmi qualche testo in merito? ne ho visti diversi in libreria e mi son confuso, non vorrei acquistare libri a tentativi.
Grazie sempre.
hai richiamato 2 volte il js
files/jq_strip.js -
files/jq_strip12 (1).js
togli il primo in alto...
e poi devi inserire qualche oggetto nelle pagine per vedere l'effetto...
Oltre a quanto scritto giustamente da Mirko, devi modificare i selettori.
Esempio da .sfondo0 a .row1 etc...
I selettori con prefisso sfondo sono validi per una precedente versione dello script, come scritto anche nell'ultimo post del topic dell'Unofficial.
eh già pubblicizzato molto bene ;) hai proprio ragione ! e ....
Auteur
ok, fatto, ci sono riuscito! Grazie! Adesso inizio a capirci un pò di più.
Ho letto un bel pò di post su "quelli del cucuzzolo", ed anche la raccolta che hanno fatto non è male anche se devo imparare ancora mooooooooolto!
Mi rende molto utile capire anche l'esempio di Fabio. Ho inserito l'intero script ma non mi visualizza nulla . Sapete dirmi dove sbaglio anche in questo caso? Il link è sempre lo stesso http://www.provasncdue.altervista.org/
Ciao Carmelo, credo che tu abbia pasticciato un po' mescolando i due sistemi.
Nella tua pagina sono presenti solo le classi per far funzionare lo script di Ma&Si in sostituzione dei gruppi creati dal programma.
Per usare il mio sistema devi cercare i gruppi nel interessati nel sorgente della tua pagina e inserirne in fondo allo script il numero di id e il colore scelto; esempio:
#imGroup_2 {
background-color:#7B3A7B;
}
Auteur
Ci rinuncio per il livello di preparazione, anzi di impreparazione, che ho è ancora presto per capire queste cose....devo studiare....non so cosa intendi per classi e gruppi....non ti faccio perder tempo. Grazie.
Auteur
Il sito per ora lo publicherò non responsive non ostante abbia comprato, purtroppo, la versione 12. Cercherò un template già responsive da adattare e man mano nei ritagli di tempo proverò a studiare.