Visualizzazione risultati 1 fino 19 di 19

Discussione: sito web altervista che non è correttamente configurato anche per smartphone

  1. #1
    tradingain non è connesso Utente AlterBlog
    Data registrazione
    05-07-2019
    Messaggi
    18

    Predefinito 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 :-)

  2. #2
    tradingain non è connesso Utente AlterBlog
    Data registrazione
    05-07-2019
    Messaggi
    18

    Predefinito

    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 )


    <!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>

  3. #3
    L'avatar di dreadnaut
    dreadnaut non è connesso Super Moderatore
    Data registrazione
    22-02-2004
    Messaggi
    6,306

    Predefinito

    Citazione Originalmente inviato da tradingain Visualizza messaggio
    ( 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.

  4. #4
    tradingain non è connesso Utente AlterBlog
    Data registrazione
    05-07-2019
    Messaggi
    18

    Predefinito

    Citazione Originalmente inviato da dreadnaut Visualizza messaggio
    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 :-(

  5. #5
    L'avatar di dreadnaut
    dreadnaut non è connesso Super Moderatore
    Data registrazione
    22-02-2004
    Messaggi
    6,306

    Predefinito

    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
    Ultima modifica di dreadnaut : 19-03-2023 alle ore 16.53.09

  6. #6
    gfam non è connesso Utente giovane
    Data registrazione
    07-05-2021
    Messaggi
    33

    Predefinito

    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!

  7. #7
    tradingain non è connesso Utente AlterBlog
    Data registrazione
    05-07-2019
    Messaggi
    18

    Predefinito

    Citazione Originalmente inviato da gfam Visualizza messaggio
    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

  8. #8
    gfam non è connesso Utente giovane
    Data registrazione
    07-05-2021
    Messaggi
    33

    Predefinito

    a me funziona hai risolto?

    Ciao

  9. #9
    tradingain non è connesso Utente AlterBlog
    Data registrazione
    05-07-2019
    Messaggi
    18

    Predefinito

    Citazione Originalmente inviato da gfam Visualizza messaggio
    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

  10. #10
    tradingain non è connesso Utente AlterBlog
    Data registrazione
    05-07-2019
    Messaggi
    18

    Predefinito

    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?

  11. #11
    GraphOGLRisorse non è connesso AlterGuru 2500
    Data registrazione
    14-02-2015
    Messaggi
    4,285

    Predefinito

    Citazione Originalmente inviato da tradingain Visualizza messaggio
    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 Visualizza messaggio
    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.
    Ultima modifica di GraphOGLRisorse : 20-03-2023 alle ore 16.29.25

  12. #12
    L'avatar di dreadnaut
    dreadnaut non è connesso Super Moderatore
    Data registrazione
    22-02-2004
    Messaggi
    6,306

    Predefinito

    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.
    Ultima modifica di dreadnaut : 20-03-2023 alle ore 20.41.07

  13. #13
    tradingain non è connesso Utente AlterBlog
    Data registrazione
    05-07-2019
    Messaggi
    18

    Predefinito

    Citazione Originalmente inviato da dreadnaut Visualizza messaggio
    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

  14. #14
    GraphOGLRisorse non è connesso AlterGuru 2500
    Data registrazione
    14-02-2015
    Messaggi
    4,285

    Predefinito

    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.
    Ultima modifica di GraphOGLRisorse : 21-03-2023 alle ore 20.59.59

  15. #15
    kairos2020 non è connesso Utente giovane
    Data registrazione
    16-04-2020
    Residenza
    Castegnato (BS)
    Messaggi
    52

    Predefinito

    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.

  16. #16
    tradingain non è connesso Utente AlterBlog
    Data registrazione
    05-07-2019
    Messaggi
    18

    Predefinito

    Citazione Originalmente inviato da kairos2020 Visualizza messaggio
    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.

  17. #17
    kairos2020 non è connesso Utente giovane
    Data registrazione
    16-04-2020
    Residenza
    Castegnato (BS)
    Messaggi
    52

    Predefinito

    Buongiorno, i miei più sinceri auguri per una pronta guarigione.

  18. #18
    tradingain non è connesso Utente AlterBlog
    Data registrazione
    05-07-2019
    Messaggi
    18

    Predefinito

    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?

  19. #19
    L'avatar di dreadnaut
    dreadnaut non è connesso Super Moderatore
    Data registrazione
    22-02-2004
    Messaggi
    6,306

    Predefinito

    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?

Regole di scrittura

  • Non puoi creare nuove discussioni
  • Non puoi rispondere ai messaggi
  • Non puoi inserire allegati.
  • Non puoi modificare i tuoi messaggi
  •