Strumenti per sviluppatori

Anche se Sitely è un creatore di siti web che non richiede conoscenze di programmazione, riconosciamo che ci possono essere situazioni in cui è necessario addentrarsi nel codice per fare in modo che tutto funzioni correttamente. Fortunatamente, Sitely gestisce le situazioni più comuni con facilità, senza che tu debba fare nulla. Un esempio tipico è l'aggiunta del codice di Google Analytics o AdSense al tuo sito web. Normalmente, questo comporterebbe l'aggiunta manuale del codice direttamente nell'HTML della pagina web. Tuttavia, in Sitely, puoi aggiungere questo codice attraverso le varie opzioni delle impostazioni del sito, lasciando a Sitely il compito di inserirlo nel posto giusto nel codice HTML della pagina.

Lo scenario più probabile in cui potresti dover aggiungere manualmente del codice è quando ricevi un pezzo di codice da un fornitore di servizi di terze parti. Tipicamente, i processori di moduli di terze parti ti forniscono del codice per visualizzare un modulo nella tua pagina web. Questi moduli vengono normalmente creati su server remoti e forniti al tuo sito web tramite un pezzo di codice. Altri esempi sono gli script di terze parti. Questi sono applicazioni web che forniscono funzionalità aggiuntive al tuo sito, come sistemi di prenotazione o script di iscrizione. Quando hai bisogno di incorporare questo codice nella tua pagina, potrebbe essere necessario aggiungere diversi pezzi di codice in diverse parti della pagina.

In genere, le pagine HTML hanno una sezione Head e una sezione Body. La sezione head di una pagina è solitamente utilizzata per elementi come le informazioni meta, come il titolo della pagina, i collegamenti a fogli di stile esterni o fogli di stile o script ospitati in remoto. La sezione body è la parte dell'HTML visibile ai visitatori del sito, come testo, immagini, grafica e altri elementi.

Quando acquisisci un pezzo di codice, sia da un fornitore di servizi ospitati di terze parti, sia da uno script che installi sul tuo server, spesso sarà necessario segregare il codice in codice Head e codice Body. In generale, il codice Head viene utilizzato per richiamare codice PHP o Javascript ospitato in remoto o fogli di stile per visualizzare correttamente il contenuto che andrà ad essere aggiunto nella sezione body. Il codice body sarà spesso il codice che inserisci nella pagina per creare un elemento che i visitatori del sito possono vedere e/o con cui possono interagire. Ad esempio, potresti avere uno script di iscrizione che consente ai visitatori di registrarsi a una mailing list per membri. Il modulo di iscrizione stesso sarà fornito da un server web (sia il tuo che quello di terze parti) in modo che possa essere visualizzato nella tua pagina web. Di seguito è riportato un esempio tipico di un pezzo di codice Head fornito da uno script. Il suo scopo è quello di proteggere una pagina da accessi non autorizzati.

Questo potrebbe essere seguito da un pezzo di codice per creare un modulo di registrazione in cui gli utenti possono registrarsi come membri. Questo codice apparirebbe nella sezione Body della pagina.

Non è necessario comprendere cosa facciano questi frammenti di codice o come funzionino. Ciò che è importante è sapere dove inserirli nella tua pagina di Sitely. Il primo pezzo di codice sarebbe il codice Head. Deve essere la prima cosa nella pagina affinché lo script di iscrizione funzioni correttamente. Questo dovrebbe essere aggiunto tramite il pulsante Codice situato nella parte superiore del pannello delle pagine in Sitely. Ecco come appare:

Nell'esempio del nostro script di iscrizione, copierai e incollerai il codice head nel riquadro intitolato 'PHP prima di HTML'. Il motivo è che la pagina deve essere una pagina PHP affinché questo script funzioni. Pertanto, la prima cosa che la pagina deve fare è eseguire questo codice PHP prima di fare qualsiasi altra cosa (NOTA: il nome della pagina deve essere cambiato per avere un'estensione PHP prima della pubblicazione). Se il codice head fosse puro HTML, lo inseriresti nel riquadro intitolato 'Codice per HTML'.

Il prossimo pezzo di codice che vorresti aggiungere alla pagina sarebbe il codice che visualizza il modulo di registrazione dello script. Questo sarebbe aggiunto al Body della tua pagina utilizzando l'elemento 'Incorpora'. Questo creerà un riquadro vuoto nell'area di lavoro di Sitely che puoi posizionare dove desideri che appaia il modulo di registrazione. Con il riquadro di incorporamento selezionato, vai al pannello stile e aggiungi il tuo frammento di codice. L'opzione appare in questo modo:

Se il codice è destinato ad espandersi verticalmente, assicurati di cliccare sulla casella 'il contenuto si espande verticalmente'. Ricorda sempre di cliccare sul pulsante salva/aggiorna dopo aver aggiunto o modificato il codice. Se il tuo script è su un server live, potrebbe apparire sulla pagina. Tuttavia, alcuni contenuti non produrranno un'anteprima fino a quando non saranno pubblicati online.

Strumenti di Sviluppo a Livello di Sito

Oltre alle opzioni specifiche per la pagina dettagliate sopra, puoi anche aggiungere elementi di sviluppo a livello di sito al tuo sito web tramite l'opzione Sviluppatore nel pannello delle impostazioni. Qui puoi specificare le cartelle di output per i vari elementi che aggiungi alla tua pagina, inclusi fogli di stile (CSS) e file Javascript (JS). Inoltre, puoi aggiungere file personalizzati, sia dal tuo disco che da risorse ospitate collegate.

Queste opzioni saranno utili se parte del tuo codice di incorporamento include collegamenti a fogli di stile o codice che devi ospitare come parte del tuo sito web. Un esempio tipico in cui queste opzioni possono essere utili è quando stai utilizzando contenuti da siti web come codepen. Ad esempio, potresti trovarti di fronte a un codice suddiviso in tre sezioni separate: l'HTML da incorporare nella pagina, il CSS per stilizzare il contenuto e il JS per far funzionare le cose. Questi possono essere copiati e incollati in file individuali e inclusi come parte del tuo progetto Sitely.

Oltre ai file individuali, puoi anche aggiungere codice HTML nella sezione head di tutte le tue pagine web attraverso il pannello delle opzioni per sviluppatori. Basta scorrere verso il basso nel pannello per vedere il riquadro del codice.

Ricorda solo che qualsiasi codice che aggiungi in questo riquadro sarà aggiunto alla sezione Head di tutte le pagine del tuo sito web.

Una Nota di Cautela: Addentrarsi nel codice senza esperienza può creare problemi con la tua pagina web. Anche se Sitely può gestire abbastanza bene queste opzioni per sviluppatori, c'è sempre il rischio di conflitti di codice che possono causare malfunzionamenti del tuo sito. Utilizza queste opzioni saggiamente e testa sempre prima di andare online. Per il codice che richiede test su un server, è meglio pubblicare in una cartella di test sul tuo server, prima di lanciare il tuo nuovo sito nel grande mondo online.

Gestione delle pagine

Mappe