I siti di fotografia quasi sempre funzionano su Flash. La tecnologia sempre più nota di Adobe fa semplicemente un eccellente lavoro di visualizzazione di immagini in modo dinamico, perfetto per le vetrine di fotografia. Tuttavia, ci sono alcuni aspetti negativi.
Innanzitutto, non è sempre facile trovare una qualità, un modello di presentazione gratuito da cui partire, e se non sei uno sviluppatore Flash, ciò potrebbe comportare costi significativi. In secondo luogo, al momento il mondo ha una relazione di amore / odio con Flash, con molti sviluppatori che passano a JavaScript, CSS3 e HTML5 laddove possibile.
Così oggi costruiremo un bellissimo sito di fotografia basato su Javascript con una presentazione a schermo intero. Letteralmente tutto il sollevamento pesante sarà fatto da una fantastica risorsa jQuery gratuita, quindi il nostro lavoro sarà principalmente la personalizzazione. Iniziamo!
Cosa stiamo costruendo
È sempre bello vedere dove stai andando prima di arrivarci, fai clic sul link sottostante per vedere una demo in tempo reale della pagina che costruiremo oggi.
Clicca per Live Demo
Per iniziare: trovare il plugin perfetto
La cosa grandiosa di lavorare con jQuery è l'enorme quantità di risorse gratuite là fuori con cui devi lavorare. Altri sviluppatori ti hanno preceduto e hanno trascorso ore a creare plug-in di qualità che puoi utilizzare completamente gratuitamente.
Abbiamo già affrontato l'idea di uno sfondo di immagini a schermo intero su Design Shack in passato, ma il plug-in che abbiamo usato non aveva una funzione di presentazione, quindi eravamo praticamente bloccati con un'immagine statica. Spesso i siti di fotografia vogliono mostrare il maggior numero possibile di opere, e nulla dà l'impressione di una presentazione gigante che riempie la finestra del browser.
Dopo una piccola quantità di ricerche, mi sono imbattuto in un plugin semplicemente fantastico dei ragazzi di BuildInternet chiamato Supersized, potresti aver notato questo plugin nel riepilogo di freebie di questa settimana.
Se vuoi seguire, scarica questo plugin e duplica il file? Default.html? file situato all'interno. Ci sono alcuni file HTML di esempio inclusi e questo fornirà il miglior punto di partenza per il nostro progetto.
Quindi, apri questo file nel tuo browser per avere un'idea di cosa dobbiamo lavorare. Come puoi vedere, c'è già una fantastica presentazione a schermo intero e alcuni controlli davvero eleganti in basso.
In realtà adoro questi controlli, ma per mostrarti che non sei bloccato in questo progetto, li elimineremo e lasceremo che la presentazione funzioni autonomamente. Entreremo nelle implicazioni di usabilità di questo più tardi. Per prima cosa, mettiamo da parte il plugin per ora e progettiamo alcune diapositive.
Slide Design
Il layout della nostra homepage di base sarà quasi completamente ripreso dalla nostra presentazione fotografica. Se hai una buona fotografia con cui lavorare, il tuo lavoro come designer ha il potenziale per diventare notevolmente più semplice perché devi solo sfruttare le immagini in modo corretto.
Per semplificare le cose, inseriremo il piccolo messaggio che vogliamo nelle diapositive. Non sarà un testo dal vivo, quindi SEO sicuramente soffre un po ', quindi puoi incorporare il testo reale e appoggiarlo sopra le diapositive se pensi che questo sia un grosso problema. Fondamentalmente si dovrebbe semplicemente creare un div in posizione assoluta, riempirlo con del testo e assicurarsi che risalti correttamente rispetto alle immagini di sfondo. Vedremo in seguito questo processo in azione con il nostro menu di navigazione.
Per iniziare, creeremo le diapositive dei contenuti. Questi in pratica aiutano solo a introdurre il sito e in realtà non contengono alcuna informazione che non saresti in grado di trovare nella pagina Informazioni in un formato più user friendly. Queste diapositive verranno disperse tra le diapositive e aiuteranno a rompere un po 'quel contenuto.
Crea un nuovo documento di 1200px per 800px in Photoshop e riempilo con # 0e1120. Successivamente, applica un'ombreggiatura interna molto pesante per conferirgli una piacevole sensazione vignettistica nell'immagine qui sotto.
Ora riempia questa diapositiva con del testo e un logo per presentare il sito. Nella diapositiva sottostante ho creato un semplice messaggio di benvenuto. Per il tipo più piccolo ho usato Trajan (cliché ma efficace) e per il logo ho usato un font gratuito chiamato Angelic War. Puoi scaricare questo font da DaFont.com.
Si noti che ho dato un leggero bagliore esterno al logo. questo aiuta a distinguerlo dal resto del testo e produce un bell'effetto sullo sfondo scuro.
Successivamente, ho duplicato questo disegno due volte e posizionato messaggi alternativi su queste diapositive discutendo gli altri servizi offerti dalla società fotografica. Il testo segue da vicino la stessa formattazione della prima diapositiva. La ripetizione è un aspetto semplice e molto importante del design e dovresti sempre cercare modi per implementarlo.
Scegliere le foto
Per il resto delle diapositive, ovviamente vorremmo usare qualche fotografia. Dopo la prima diapositiva introduttiva (benvenuto / matrimonio), inseriremo alcune foto di nozze. Dopo la seconda intro slide (fidanzamento) inseriremo alcune foto di coppie felici e dopo la terza slide di introduzione (famiglia / senior), inseriremo alcune foto di famiglia.
La nostra attività di fotografia è fittizia, ma mi capita di essere un fotografo, quindi raccoglierò alcune immagini dal mio portfolio da utilizzare come riempitivo per questo progetto. Ho scelto le seguenti sei immagini e le ho salvate alla stessa dimensione delle nostre diapositive di introduzione.
Scartare i controlli Slideshow
Ora, rendere lo slideshow completamente autonomo potrebbe far impazzire un po 'la polizia dell'usabilità. Se non sei d'accordo, lascia semplicemente i controlli lì! Approfondire nel sito in cui si collocheranno le singole presentazioni del progetto, posizionerei i controlli in modo tale che i clienti e i potenziali clienti possano facilmente andare avanti e indietro e selezionare immagini specifiche.Tuttavia, nella home page voglio solo un messaggio di scorrimento semplice e piacevole che si ripeta senza l'interazione dell'utente necessaria.
Per fare ciò, vai nel file Defautl.html e commenta o cancella tutto sotto il? Supersized? div e sopra il tag di chiusura del corpo. Il seguente codice dovrebbe essere tutto ciò che è nel tuo corpo.
Inserire le tue diapositive
Ora scorri fino alla parte superiore della pagina HTML in cui si trovano tutti i tag dello script. Qui troverai i controlli per la presentazione, dovrebbe essere facile individuare l'elenco delle diapositive. Si noti che le diapositive attuali hanno titoli, collegamenti, ecc. Non vogliamo che la nostra immagine si colleghi ovunque e abbiamo scartato la barra in basso che mostrava il titolo in modo da semplificare drasticamente questa sezione ed elencare le nostre diapositive come segue:
Si noti che ho impostato? Startwidth? e? startheight? alla dimensione delle nostre diapositive. Ho anche impostato il parametro? Slide_interval? a 6000. Questo rallenterà la presentazione un po 'dalle sue impostazioni predefinite. Puoi lasciare il resto di queste impostazioni esattamente dove sono, assicurati solo che le diapositive siano elencate in basso e che i tuoi JPG di diapositiva si trovino nella cartella delle diapositive.
Navigazione HTML
Ora la tua presentazione dovrebbe essere attiva e funzionante con le tue diapositive personalizzate. Tuttavia, non è una home page finché non trovi il modo di trovare il resto del contenuto. Per completare il nostro sito, costruiremo un semplice menu di navigazione e lo posizioneremo nella parte inferiore della pagina in cui si trovavano i controlli delle presentazioni.
L'HTML qui è super semplice, basta lanciare una lista non ordinata sotto il? Caricamento? div nel tuo corpo.
Navigazione CSS
Ora, vogliamo che lo stile sia una barra sul fondo. Fortunatamente, quando abbiamo scaricato il plug-in per la prima volta era già presente una barra in basso, in modo che possiamo semplicemente rubare parte di questo stile e modificarlo per i nostri scopi. Sotto, ho reso la barra alta 40px e ho impostato il colore con RGBa in modo da avere una certa trasparenza.
Successivamente, abbiamo bisogno di applicare un sacco di stile a diverse parti della lista non ordinata. Abbiamo bisogno di modellare la lista stessa, spostare gli elementi della lista in modo che appaiano in linea e definire i colori link / hover.
Ora, per il mio trucco finale, voglio dare uno stile diverso al primo elemento della lista. Questo servirà da identificatore sempre presente per il sito e da un collegamento alla homepage. Dando uno stile al primo figlio della lista, posso dare a questo elemento margini diversi e un trattamento di tipo diverso per distinguerlo dagli altri.
Puoi vedere l'effetto di questo nell'immagine qui sotto. L'oggetto ha ancora lo stesso scopo di base di tutto il resto della lista, è semplicemente dato un trattamento visivo speciale perché è anche il nome del sito.
Conclusione
Con quello, siamo tutti finiti. Da qui dovrai codificare il resto delle pagine in modo che corrisponda al design che hai impostato sulla home page. Ancora una volta, assicurati di fermarti alla demo per vederlo in azione.
Lascia un commento e facci sapere come potresti migliorare ciò che ho fatto qui. Mi piacerebbe sapere cosa cambieresti e cosa pensi che dovrebbe rimanere lo stesso. Grazie per aver letto!