Skin HTML personalizzata - Convertire il design di un sito esistente in uno skin HTML

Questo articolo è stato tradotto automaticamente e potrebbe contenere imprecisioni. Visualizza l’originale in inglese

Se stai organizzando un evento e desideri che lo stile del tuo sito DPG corrisponda esattamente al design di un sito esistente, puoi clonare l'HTML del sito principale per trasformarlo in uno skin utilizzabile con DPG.

Creare uno skin personalizzato è del tutto facoltativo; per la maggior parte degli utenti la soluzione migliore è utilizzare i nostri template facilmente personalizzabili.

Lo skin HTML è costituito da una pagina completa del tuo codice HTML, con l'aggiunta degli insert DPG che incorporano la galleria e il resto del codice necessario di DPG nelle aree in cui desideri che venga visualizzato.

Molti scelgono di scrivere da soli lo skin HTML del sito DPG, basandosi sul codice del sito principale. In questo tutorial, tuttavia, ti mostreremo un modo rapido per convertire un design esistente in uno skin DPG.

In questa guida useremo:

Se non hai uno sviluppatore nel tuo team ma desideri uno skin HTML personalizzato, possiamo fornire questo servizio a un costo aggiuntivo. Contatta support@digitalphotogallery.com per maggiori dettagli.

Clonare l'HTML sul disco locale

Assicurati di avere Homebrew installato, quindi esegui il comando per installare wget:

brew install wget

Crea una nuova cartella, accedi a essa con cd e usa il seguente comando per clonare le risorse dal sito web con cui stai effettuando l'integrazione:

wget -U firefox -p -k -H http://www.targetdomain.com/

Caricare le risorse sul proprio server o CDN

Carica le risorse clonate in un luogo accessibile online; in questo esempio utilizzo Transmit con Amazon S3.

Se hai il pieno controllo del sito principale e le posizioni delle risorse sono prevedibili, puoi creare collegamenti a quelle risorse anziché clonarle.

Ricollegare tutte le risorse

Quando hai eseguito il comando wget, è stato scaricato l'HTML della pagina che hai indicato. Individua quel file sul disco locale e, nel codice, cerca e sostituisci tutte le risorse collegate con il loro nuovo indirizzo. Prova periodicamente la pagina locale in un browser per verificare i tuoi progressi.

Gli strumenti di sviluppo di Chrome mostrano che mancano ancora alcune risorse. Correggi tutti questi tipi di errori prima di passare al passaggio successivo.

Mentre ricolleghi le risorse, potresti voler rimuovere anche eventuale codice di tracciamento inutilizzato.

Quando non ci sono più errori, controlla il dominio da cui provengono le risorse per assicurarti che nessuna venga servita da un indirizzo che non controlli.

galleryexamplenodpgcode.zip
File di esempio in questa fase.

Scopri i layout di pagina di DPG

Consulta questo articolo per scoprire come ottenere il codice di insert DPG attuale e come applicare il tuo codice HTML alla tua galleria DPG.

Convertire l'HTML scaricato in uno skin

Ora che hai una copia perfetta della pagina originale, puoi iniziare a modificarla per aggiungere gli insert DPG.

Aggiungi gli insert DPG per l'header.

Rimuovi l'HTML del contenuto e sostituiscilo con l'insert del contenuto DPG.

Aggiungi gli insert alla fine della pagina.

Crea il layout della tua pagina in DPG.

Prova il tuo layout su una singola pagina. Una volta verificato che funziona correttamente, applicalo a tutte le pagine.

Ora hai un sito DPG perfettamente funzionante che corrisponde al tuo sito web principale. Infine, aggiungi nel sito principale i collegamenti che puntano alla nuova galleria fotografica.

galleryexamplewithdpgcode.zip
Codice finale di questo esempio.

Last updated: