Responsive Design
Autor: Giorgio D.
Visited 2168,
Followers 2,
Udostępniony 0
salve,
volevo chiedere so fosse possibile settare in automatico un indice di zoom, cioè un indice che mi permetta di visualizzare gli oggetti al 70% nella modalità Smartphone, in modo da poter vedere gli oggetti testo più piccoli, i tasti più piccoli, e soprattuto gli effetti di parallasse e quelle cose la. Il sito a cui faccio riferimento è www.pianeta-pc.it. con inidice di zoom comunque non intendo lo zoom della pagina in sè, ma proprio come vengono scalati gli oggetti all'interno della pagina e quindi come vengono risistemati all'interno della pagina.
un'altra domanda che volevo porre è se fosse possibile aumentare l'altezza dei campi di testo del form contattaci
grazie mille per l'aiuto
Enrico
Posted on the
mi sembra che il sito scorra abbastanza bene riducendo le risoluzioni... non mi sembra bbia bisogno di interventi via codice...
per il modulo di contatto, puoi modificare le impostazioni qui... nella scheda stile del modulo di contatto... screenshot...
Autor
ok, grazie mille per lo screenshot e per la spiegazioneesaustiva, comunque cambiando argomento e parlando delle risoluzioni, forse mi sono spiegato male io, cioè vorrei che riducendo la finestra e portandola alla visualizzazione smartphone le immagini nello stile righe fossero visibili non dico al completo ma quasi e magari riducendo lo spazio occupato da ogni oggetto all'interno della pagina(ovvero scalando i singoli oggetti)....in modo da poter visualizzare in modo migliore il contenuto(come può essere per la riduzione del carattere nella parte mobile o riduzione dello spazio occupato dei bottoni riducendo anche le spaziature tra essi e cose del genere)....perchè purtroppo nell'homepage per desktop sono "costretto" a tenere una certa impostazione di spazi e dimensioni, ma per la versione mobile vorrei ridurre la dimensione di qualche oggetto.....c'è un qualche modo per farlo? grazie mille in anticipo
Enrico
si dovrà intervenire tramite codice extra usando le @media queries, identificando gli id degli oggetti creati da website da ridurre/modificare... non è un lavoro semplicissimo da spiegare per adattare il particolare layout...
Autor
che competenze servirebbero per poter eseguire queste modifiche? immagino che il linguaggio html sia essenziale, ma con che grado di competenze? cioè sono cose che studiando qualcosino sono in grado di poter fare o servo qualcuno di esperto? eventualmente posso fare riferimento a lei? grazie mille per le dritte e per il suppporto, aspetto la sua riposta
Cordiali Saluti,
Enrico
ciao giorgio, alcune personalizzazioni le consente direttamente website... poi, per interventi più invasivi, dipende dal grado di conoscenza di linguaggio html e css e dalla conoscenza del funzionamento di website... certamente studiando si acquisiscono le conoscenze giuste... la cosa basilare, avendo qualche conoscenza di css e html (per manipolare un po' il risultato di website), è capire come agisce appunto website... il programma, parlando a livello generale, assegna ad ogni oggetto un ID univoco e delle class... operando su quell'ID e le class, si possono applicare delle variazioni personalizzando l'elemento...
ad esempio, per leggere il codice html generato da website in anteprima, basta cliccare con il tasto destro del mouse sull'anteprima e scegliere "analizza elemento"... ti si apre una finestra con all'interno il codice generato da website...
in alto a sx trovi una freccetta... cliccando una sola volta su di essa, e poi cliccando sull'anteprima e precisamente sull'oggetto che si vuole modificare, si viene indirizzati direttamente al punto del codice html di quell'elemento...
naturalmente poi per assegnare diversi valori bisogna avere le conoscenze di css, html, sapere dove inserire il codice per le modifiche, ecc. ecc. ....
qui su helpcenter, puoi chiedere a chiunque di darti una mano... il primo disponibile ti risponderà...
comunque il tuo sito, si adatta molto bene alle risoluzioni inferiori... io non lo modificherei... ciao...
Autor
grazie Skeggia 12 per tutte le dritte e per l'apprezzamento del sito, però il mio problema purtroppo sussiste, nel senso che provando con diversi smartphone incontro ancora dei problemi, come ad esempio se ci si collega alla pagina del "contattaci" si può notare che il primo elemento testo verrà visualizzato non completo e sborderà creando uno spazio bianco a lato, poi vorrei per esempio che le immagini fossero leggermente più piccole e cose così. Un altro problema invece è quello che incontro nelle impostazioni dello "stile righe", ovvero sia nell'homepage che in tutte le altre pagina che sono impostate con un'immagine in parallasse sotto un elemento testo perdono tutta la loro efficacia nella visualizzazione da smartphone, poichè non si riesce più a distinguere molto dell'immagine sottostante, a meno che non si riesca a ridimensionare il tutto impostando un qualche indice di zoom o quello che serve insomma.....questo problema, anche se non troppo evidente, lo incontro anche nella pagina "cad" con l'immagine impostata con effetto parallasse inerente a PTC creo, che contiene delle scritte che vengono tagliate ai lati rimpicciolendo la finestra. sarebbe lei in grado di svilupparmi qualche codice o dirmi cosa dovrei cambiare in modo da fare un tentativo per vedere se è veramnete quello che mi serve?
Cordiali Saluti,
Enrico
...da programma ... potresti mettere la parola "CONTATTACI" con l'oggetto Titolo impostando "adatta..."
per lo stile riga , in "disposizione" prova a togliere "adatta" e metti "non ripetere"
guarda se così migliora...
Autor
salve claudio,
grazie mille per il consiglio riguardante il titolo della pagina contattaci. Per la parte dei parallasse invece ho "risolto" nella pagina "CAD" impostando "adatta" ma centrandolo a sinistra, se avessi impostato non ripetere nelle visualizzazioni a schermo intero avrei avuto degli spazi bianchi laterali e quindi avrei perso tutto il senso del parallasse impostato a larghezza finestra. Un altro problema sempre nello stile righe è che quando riduco la finestra fino a raggiungere la visualizzazione smartphone, l'elemento testo riempito da "spazi a capo" associato all'effetto parallasse nello stile righe, viene visualizzato schiacciatissimo. il problema della perdita di senso dell'immagine nell'effetto parallasse a rislozioni basse(per smartphone) non è ancora stato risolto.
c'è un modo più corretto per impostare un'immagine di sfondo estesa alla larghezza della finestra ad un certo punto della pagina come ho fatto nel mio sito non utilizzando però un elemento testo e al suo interno degli "a capo" in modo da visualizzare correttamente la foto impostata nel parallasse e non dipendere quindi dal numero di "a capo" all'interno dell'elemento testo, poichè così facendo si incorre nel problema che ho io, ovvero quello di mantenere fissa l'altezza dell'elemento forzando la foto impostata nel parallasse ad adattarsi e quindi ad aumentare talmente tanto la dimensione che perde di significato.
Dorei provare ad usare un elemeno foto e inserire un'immagine trasparente?
Cosa dovrei fare invece per le foto in parallasse sotto ad elementi testo come ho nell'Homepage?
Grazie mille per l'aiuto
Enrico
Autor
mi scuso se insisto, ma avrei estremo bisogno di capire come risolvere nel migliore dei modi il mio problema e per questo mi rivolgo a voi, chiedendo cortesemente una soluzione ottimale sia per quanto riguarda la versione desktop che per la versione mobile, oltre che per l'effetto parallasse.
vi ringrazio anticipatamente per il supporto e porgo cordiali saluti,
Giorgio
Buongiorno Giorgio,
intendi creare uno spazio nella pagina in cui sia visibile l'immagine di sfondo dello stile riga?
Se si puoi usare l'oggetto HTML, lasciarlo vuoto e poi settare una altezza fissa. Per le altre visualizzazioni mobile puoi nascondere l'oggetto.
Autor
Buongiorno Riccardo,
la ringrazio per la risposta e le chiedo anche se esiste un oggetto che abbia l'altezza dell'oggetto responsive o qualcosa del genere.
cordiali saluti,
giorgio
... cos'è che intendi dire per "altezza responsive"...?... ...rispetto a quale oggetto...?...
... nel caso potresti inserire nella riga un Oggetto Codice HTML vuoto con altezza da te definita in pixel, e la riga prenderà quel valore...
... invece, per lo sfondo adesso chiamato COVER, cioè con il CENTRO dell'immagine che sarà sempre centrato nella finestra, devi considerare la vignettatura delle aree circostanti eccedenti il rapporto razionale e che zoommerà sulla priorità larghezza/altezza...
... per verificare il concetto sui tuoi dispositivi mobile o desktop puoi provare la mia >> invenzione (_a Z_) cross browser (NO cover), sintetizzata in questa immagine che vale più di cento parole:
(casomai ti interessasse, con il mio metodo, div_custom+iframe, si possono adattare tutti i tipi di sfondo per qualsiasi oggetto o posizione nella pagina, con un copia/incolla del codice extra ad hoc)
.