sito web altervista che non è correttamente configurato anche per smartphone

Printable View

19-03-2023, 08.40.02
tradingain

sito web altervista che non è correttamente configurato anche per smartphone

ciao a tutti
ho un piccolo sito web su altervista : https://finanzadiretta.altervista.org/
ma ho notato che mentre sul pc fisso si vede bene, alcuni amici mi hanno detto che da smartphone non si vede bene , la pagina è troppo grande , ci sono le barre di navigazione laterale e orizzontale... e con molta probabilità è perchè sito web , non è configurato per smartphone , ma solo per pc .

in questo sito : http://mobiletest.me/iphone_5_emulat...ltervista.org/ ; si nota come si vedrebbe ora da smartphone

Ora siccome io disabile e invalido, e di codici ci capisco veramente poco , ed ho creato questo piccolo sito web, semplicemente per passione .

Qualcuno sarebbe così gentile da dirmi che codice andrebbe messo nel pannello amministrazione di altervista, per far visualizzare bene la home page del sito web anche da smartphone? ( non ditemi di andare in css , creare codici complessi,...etc.etc... perchè non ne son capace ) .

grazie anticipatamente a chi potrà aiutarmi :-)
19-03-2023, 09.14.14
tradingain

ho anche provato a creare una pagina, che dovrebbe funzionare su mobile... ma non va!

link: https://finanzadiretta.altervista.or...----test8.html

il codice nella pagina è questo :
( non capisco dove sbaglio )

Citazione:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Borsa Diretta Mobile</title>
<script>
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile |Opera Mini/i.test(navigator.userAgent) ) {
// nel caso di un dispositivo mobile
location.href = "https://borsadiretta.it";
}
else {
// nel caso di un computer
location.href = "https://borsadiretta.it";
}
</script>
</head>
<body>
</body>
</html>
19-03-2023, 13.02.25
dreadnaut

Citazione:

Originalmente inviato da tradingain

( non ditemi di andare in css , creare codici complessi,...etc.etc... perchè non ne son capace ) .

Il problema principale del tuo sito è la struttura: le tabelle che usi per creare colonne non si adattano ad uno schermo alto e stretto come quello di un telefono. Per aggiustarlo devi andare di HTML e CSS, ma creare codici semplici. Negli ultimi anni il CSS è diventato molto più potente, quindi ci sono meno cose da imparare rispetto a 5-10 anni fa.
19-03-2023, 15.56.58
tradingain

Citazione:

Originalmente inviato da dreadnaut

Il problema principale del tuo sito è la struttura: le tabelle che usi per creare colonne non si adattano ad uno schermo alto e stretto come quello di un telefono. Per aggiustarlo devi andare di HTML e CSS, ma creare codici semplici. Negli ultimi anni il CSS è diventato molto più potente, quindi ci sono meno cose da imparare rispetto a 5-10 anni fa.

difficile per me... che son imbranato su ste cose :-(
19-03-2023, 16.49.24
dreadnaut

Essere imbranato non è un destino inevitabile, ma qualcosa che si aggiusta un passo alla volta.

Guardando il tuo sito, spostare le colonne una sopra l'altra su schermi stretti sarebbe un grande miglioramento. Per questo puoi usare display: flex assieme as flex-wrap: wrap.

Dai un'occhiata a questi:
- https://webdesign.tutsplus.com/it/tu...box--cms-26611
- https://flexboxfroggy.com/#it

E se ti servono più dettagli:
- https://css-tricks.com/snippets/css/a-guide-to-flexbox/
- https://developer.mozilla.org/en-US/...ses_of_Flexbox
19-03-2023, 18.10.13
gfam

il codice è anche giusto ma la pagina non è che diventa in automatico per mobile

// nel caso di un dispositivo mobile
location.href = "https://borsadiretta.it";

se porta alla stessa pagina rimarrà quella pagina, dovresti fare una pagina con tutto incolonnato e indirizzare a quella per dirtela facile, o rendere il sito responsive ma qua si complica , ti converebbe usare qualcosa tipo wordpress e usare un tema già responsivo dove inserire i tuoi contenuti

ciao!
19-03-2023, 20.36.40
tradingain

Citazione:

Originalmente inviato da gfam

il codice è anche giusto ma la pagina non è che diventa in automatico per mobile

// nel caso di un dispositivo mobile
location.href = "https://borsadiretta.it";

se porta alla stessa pagina rimarrà quella pagina, dovresti fare una pagina con tutto incolonnato e indirizzare a quella per dirtela facile, o rendere il sito responsive ma qua si complica , ti converebbe usare qualcosa tipo wordpress e usare un tema già responsivo dove inserire i tuoi contenuti

ciao!

ho creato questa pagina incolonnata : https://finanzadiretta.altervista.or...ttamobile.html

poi ho messo in una pagina questo codice :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Borsa Diretta Mobile</title>
<script>
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile |Opera Mini/i.test(navigator.userAgent) ) {
// nel caso di un dispositivo mobile
location.href = "https://finanzadiretta.altervista.org/borsadirettamobile.html";
}
else {
// nel caso di un computer
location.href = "https://borsadiretta.it";
}
</script>
</head>
<body>
</body>
</html>

ma il risultato noto che non cambia!

infatti se accedete da smartphone da questo link : https://finanzadiretta.altervista.or...----test8.html

credo che la pagina non si veda incolonnata
20-03-2023, 03.22.53
gfam

a me funziona hai risolto?

Ciao
20-03-2023, 06.44.38
tradingain

Citazione:

Originalmente inviato da gfam

a me funziona hai risolto?

Ciao

da qualche link ti funziona?
da questo? https://finanzadiretta.altervista.or...ttamobile.html
o da questo? https://finanzadiretta.altervista.or...----test8.html
20-03-2023, 06.49.01
tradingain

altra idea darebbe di mettere i codici html su un sito web che abbia la capacità di ridurre in automatico per smartphone... e poi il link indicizzarlo al sottodominio di altervista.
Ma il punto di domanda è : su altervista, esiste un sito web , che abbia tale capacità automatica?
20-03-2023, 16.11.37
GraphOGLRisorse

Citazione:

Originalmente inviato da tradingain

altra idea darebbe di mettere i codici html su un sito web che abbia la capacità di ridurre in automatico per smartphone... e poi il link indicizzarlo al sottodominio di altervista.

Salve,
mi sembra che stia facendo un po' di confusione tra sito (inteso come dominio) e poroprietà di stile delle pagine. La capacità di adattamento a seconda delle dimensionei dello scehrmeo delle pagine di un sito, è un comportamento specifico che si applica al codice HTML delle pagine e non dipende dal tipo di dominio in cui esse risiedono.

Il comportamento che descrive è quello che viene definto con il termine "responsive" ed è il metodo oggi giorno più usato. Una pagina di tipo responsive viene gestita prevalentemente tramite codice CSS.

Un metodo molto semplice per rendere una pagina di tipo responsive, può essere ad esempio questo.

Citazione:

Originalmente inviato da tradingain

Ma il punto di domanda è : su altervista, esiste un sito web , che abbia tale capacità automatica?

Certamente! Molti siti creati con CMS come Wordpress ed altri, fanno ormai quasi tutti uso di temi responsive. Ci sono comunque anche siti statici che lo fanno. Basta solo fare qulche ricerca e se ne trovano diversi. Per spiegazioni tecniche, vale quanto menzioanto in precedenza.

Cordiali saluti.
20-03-2023, 20.34.32
dreadnaut

borsadirettamobile.html mi sembra un buon punto di partenza: colonne che si allineano in verticale quando lo spazio disponibile si restringe.

Nota che puoi provare la "modalità telefono" da solo, direttamente nel tuo browser, usando gli strumenti di sviluppo. Si attiva con Ctrl-Shift-M in Firefox, oppure F12 e poi Ctrl-Shift-M su Chrome ed Edge.
21-03-2023, 03.14.29
tradingain

Citazione:

Originalmente inviato da dreadnaut

borsadirettamobile.html mi sembra un buon punto di partenza: colonne che si allineano in verticale quando lo spazio disponibile si restringe.

Nota che puoi provare la "modalità telefono" da solo, direttamente nel tuo browser, usando gli strumenti di sviluppo. Si attiva con Ctrl-Shift-M in Firefox, oppure F12 e poi Ctrl-Shift-M su Chrome ed Edge.

il punto di partenza... in realtà è il mio punto di arrivo :-D
ad esempio in quella pagina, non so come si toglie il colore viola e azzurro dai riquadri
21-03-2023, 20.55.58
GraphOGLRisorse

Per cambiare il colore dei div (i riquadri), basta cambiare il rispettivo valore in background-color nelle calssi CSS header, aside e footer.

In questa guida vengono spiegati quali tipi di valori sono ammesi per background-color.

Cordiali saluti.
22-03-2023, 23.18.58
kairos2020

Buonasera, io sono alle prime armi, ho visitato il tuo sito e per me è straordinariamente complesso. Un grande lavoro.
L'unico suggerimento che posso darti, ma credemi risolve davvero tutti i tuoi problemi, è di dedicare un pò di tempo, e non ne serve molto, ad impare bootstrap, una libreria gratis, completa, semplicissima da usare e con innumerevoli esempi.

Certo i suggerimenti che già hai ricevuto sono ottimi, io posso dirti che in pochi giorni sono riuscito a trasformare un sito di svariate pagine da fisso a 'responsive' e questo semplicemente imparando il 'minimo sindacale' di bootstrap : DIV TABLE CONTAINER (10 minuti per la sintassi) COL (un paio d'ore).

Certo per comprendere ed utilizzare al meglio bootstrap serve più tempo, ma poi davvero iniziare subito ad avere un sito adatto ad ogni dispositivo.
24-03-2023, 08.26.15
tradingain

Citazione:

Originalmente inviato da kairos2020

Buonasera, io sono alle prime armi, ho visitato il tuo sito e per me è straordinariamente complesso. Un grande lavoro.
L'unico suggerimento che posso darti, ma credemi risolve davvero tutti i tuoi problemi, è di dedicare un pò di tempo, e non ne serve molto, ad impare bootstrap, una libreria gratis, completa, semplicissima da usare e con innumerevoli esempi.

Certo i suggerimenti che già hai ricevuto sono ottimi, io posso dirti che in pochi giorni sono riuscito a trasformare un sito di svariate pagine da fisso a 'responsive' e questo semplicemente imparando il 'minimo sindacale' di bootstrap : DIV TABLE CONTAINER (10 minuti per la sintassi) COL (un paio d'ore).

Certo per comprendere ed utilizzare al meglio bootstrap serve più tempo, ma poi davvero iniziare subito ad avere un sito adatto ad ogni dispositivo.

ti ringrazio :-)
purtroppo ho pochissimo tempo da dedicare al web e al mio piccolo sito web...
avendo importanti problemi di salute, passo il mio tempo tra medici , esami e cura di me stesso a livello fisico.
Il sito web nasce dalla mia passione borsistica e per spezzare ogni tanto il tam tam quotidiano della mia salute.
24-03-2023, 12.00.16
kairos2020

Buongiorno, i miei più sinceri auguri per una pronta guarigione.
26-03-2023, 19.23.36
tradingain

ho aggiustato un pò la versione mobile, del mio sito : https://finanzadiretta.altervista.or...ttamobile.html
il problema è : come faccio a ridurre lo spazio, tra una tabella e l'altra, in modo che siano una sotto l'altra attaccate, con massimo 2 millimetri di spazio e non 2 centimetri?
26-03-2023, 23.23.51
dreadnaut

Lo spazio fra le colonne è controllato da questa regola del CSS (righe 18-21)

Codice:

[class*="col-"] { float: left; padding: 15px; }

Cambiando il valore del padding modifichi lo spazio attorno a ciascun 'pezzo'. Magari 8px fa al caso tuo?