Share
Sono un grande fan dei design di siti foto-centrici? quindi oggi sono entusiasta di lanciare un nuovo tutorial sul "sito completo" orientato verso fotografi, illustratori e altri creativi visivi. Nel giorno 1, abbiamo progettato il modello in Photoshop utilizzando alcuni trucchi e tecniche speciali. Oggi, nel Day 2, passeremo attraverso la fase di progettazione finale e quindi eseguiremo una preparazione "pre-volo" per la fase di codifica, che esamineremo in dettaglio nel Giorno 3. Al giorno 4 mostreremo come creare tre siti completamente diversi usando lo stesso HTML grezzo.
La sessione di oggi sarà relativamente veloce in termini di trucchi tecnici? ma andremo pesantemente sui suggerimenti del "flusso di lavoro", quindi prestate attenzione se siete curiosi della fase di un progetto che avviene dopo la progettazione e prima che inizi la codifica.
Iniziamo la sessione di oggi con alcune note generali su cosa "pre-volo"è: quando hai finito di progettare un sito Web, ci sono alcuni passaggi cruciali che dovrebbero idealmente aver luogo prima di iniziare l'attuale processo di codifica. Il primo passo è iniziare a tagliare il nostro design.
La guida passo-passo completa scritta è sotto. Iniziamo con il documento Photoshop creato nel Day 1, ma puoi anche scaricare la demo PSD per verificare il tuo lavoro contro il mio.
Ok, con i nostri obiettivi ora chiaramente definiti, iniziamo!
Il primo passaggio consiste nell'affettare le immagini che saranno richieste nel modello codificato. Nel nostro caso, questo processo è abbastanza semplice: osservate attentamente il modello e indicate tutti gli elementi di design che non possono essere duplicati con CSS o altri trucchi di codifica. Ecco la nostra lista:
Etichettiamo dove sono sul nostro design (clicca per ingrandire l'immagine):
">
Affettare questi non è difficile, quindi non entrerò troppo in profondità, ma prima di iniziare vale la pena considerare se alcune di queste immagini possono essere combinate in un singolo Sprite CSS.
Cos'è un CSS Sprite? In parole povere, uno sprite è un metodo per utilizzare una singola immagine come mezzo per memorizzare diverse immagini più piccole. Ad esempio, dai uno sguardo allo sprite che viene utilizzato su Webdesigntuts:
Quando iniziamo a programmare, possiamo semplicemente usare il posizionamento e il ritaglio CSS dell'immagine per mostrare il pezzo dello sprite che vogliamo.
Perché usare un CSS Sprite? Velocità! Utilizzare gli sprite per archiviare le immagini ridurrà il tempo necessario per caricare un'intera pagina web? quando le immagini vengono riutilizzate più e più volte su più pagine, questo può significare molto tempo risparmiato.
Gli sprite vengono utilizzati al meglio con immagini più piccole che vengono riutilizzate più e più volte. Ad esempio, la maggior parte delle risorse sopra discusse può essere ridotta a questo sprite:
In un singolo sprite, abbiamo già preparato la maggior parte del nostro design per la codifica? ed è tutto sotto 19kb! Non male vero?
Per creare il tuo sprite personale, basta creare un documento vuoto (partendo con qualsiasi dimensione, alla fine si ridurrà questo solo per adattarlo a malapena a ogni elemento dello sprite), quindi aggiungere gli elementi del disegno con una quantità ragionevole di padding tra ogni elemento. Ecco alcuni trucchi aggiuntivi:
Per le immagini rimanenti, possiamo semplicemente creare le nostre sezioni generiche. Li elencherò qui sotto e descriverò ciascuno (e perché non è uno sprite):
La sovrapposizione dell'ombra interna per lo scorrimento. Non è uno sprite perché è grande (il che significa che sarebbe inutilmente rinforzare le dimensioni dello sprite).
Gli angoli arrotondati superiore e inferiore: Questi non sono sprite per alcuni motivi: 1) come nell'esempio sopra, sono grandi e poco maneggevoli; 2) è probabile che questi vengano riscritti o ridimensionati in un secondo momento, il che significa che caricarli in uno sprite crea solo lavoro aggiuntivo e 3) c'è una buona possibilità che potremmo decidere di abbandonare queste immagini per i metodi CSS in futuro.
L'immagine di sfondo: Questo non è uno sprite perché 1) è probabile che sia scambiato con un'altra immagine BG e 2) ha bisogno di ripetersi indefinitamente, cosa che gli sprite non fanno bene.
Altri "non sprites": Ovviamente, non caricaremo le nostre miniature o altre immagini di contenuti come sprite. La ragione principale qui è la praticità? Gli sprite sono intesi per l'interfaccia utente di base e gli elementi di branding che possono caricare rapidamente e velocizzare un sito? se caricassimo OGNI immagine in un singolo sprite, si avrebbe un tempo di caricamento molto lungo, anche se accelerasse le cose dopo il caricamento. Pensa ai pre-caricatori di quegli enormi siti Web Flash qualche anno fa;)
L'altra ovvia ragione è che queste immagini dei contenuti cambieranno probabilmente ogni volta che qualcuno aggiorna il sito. L'immagine Sprite è destinata ad essere praticamente invariata fintanto che il design del sito rimane lo stesso.
Note sull'affettatura finale: Probabilmente è ovvio, ma ci sono altri modi per affettare questo particolare design. Approcci diversi possono avere senso per la tua variazione di questo design? quindi non limitarti ad usare le idee di cui sopra. Se vuoi attaccare gli angoli arrotondati e l'ombreggiatura di sfondo usando CSS3, la proprietà z-index e un PNG trasparente, conviene a tutti i costi!
Ora che abbiamo le risorse immagine tutte pronte per andare, è il momento di raccogliere le nostre sceneggiature in un unico punto in modo che quando ci sediamo sull'hard coding, saremo pronti per l'azione. Dando un'occhiata al nostro design, identifichiamo le aree chiave che richiedono script o plug-in aggiuntivi:
Ogni buon modello di fotografo ha bisogno di una lightbox? e ci sono pochi meglio di prettyPhoto là fuori in questo momento. È facile da installare / personalizzare e offrirà alcune funzionalità extra che altri lightbox non sono in grado di offrire: navigazione delle miniature, componenti aggiuntivi per la condivisione personalizzata e altro.
Questo è un problema piuttosto semplice usando un jQuery di base? quindi utilizzeremo effettivamente uno script leggero e personalizzato per questo. Controlla di nuovo il giorno 3 per vedere come funziona!
jQuery Cycle gestirà il sollevamento pesante dei nostri cursori di immagine. È un plugin incredibilmente ben documentato, il che significa che sarà facile da configurare (e personalizzare) per soddisfare le esigenze del nostro modello.
Ho usato il font Museo nel design, quindi avremo bisogno di trovare un modo per usarlo nella versione codificata. Il modo più veloce per configurarlo è con @ font-face. Quindi, abbiamo eseguito il font tramite Font Squirrel (http://www.fontsquirrel.com/fontface/generator) per creare i nostri file di caratteri che possiamo usare in Day 3.
Assicurati di scaricare il plugin prettyPhoto e copia le risorse necessarie nelle rispettive cartelle (javascript nella cartella "js", fogli di stile nella cartella "css", ecc.), Il plugin ciclo può essere collegato da Github e jQuery può essere collegato dalle API di Google.
A questo punto dovremmo essere pronti per iniziare la conversione HTML / CSS. Abbiamo progettato il nostro modello di sito, affettato le immagini che avremo bisogno di utilizzare e raccolto tutti gli script di terze parti che saranno necessari per rendere il sito funzionante come vogliamo. Nella fase successiva, faremo la vera codifica? quindi preparati per il Day 3!
Accentsconagua