Share
Lo abbiamo fatto! Abbiamo creato il nostro primo sito web da zero e abbiamo parlato di alcuni elementi essenziali del design come lo spazio bianco, la tipografia e il colore.
In questo tutorial finale rivedremo rapidamente tutto ciò che abbiamo imparato finora sulla costruzione di un sito Web e sulla progettazione, esamineremo i modi per ottenere il nostro sito Web su Internet in modo da poter indirizzare i nostri amici e familiari a un indirizzo web e toccare un po 'su alcuni risorse utili che vanno avanti con i nostri studi.
Non dimenticare di porre eventuali domande finali nella sezione commenti in fondo a questa pagina!
Diamo un'occhiata alla roadmap della serie che abbiamo preso per arrivare dove siamo ora.
Abbiamo iniziato questa serie affrontando come funziona il web. Affinché due computer diversi possano comunicare tra di loro, entrambi devono essere connessi a Internet tramite un ISP (Internet Service Provider).
Per consentire ad altre persone di rivedere il nostro sito su Internet, questi file del sito devono essere trasferiti (spostati) su un server; un computer speciale con accesso diretto a Internet. Rivedremo questo più in una sezione qui sotto.
Il nostro ruolo su Internet è quello di un web designer. Il nostro compito è assicurarci che un sito sia piacevole ed è molto semplice per i nostri utenti leggere e navigare.
Con questi obiettivi in mente, abbiamo deciso di iniziare a costruire il nostro sito Tuts + Town con HTML e CSS dopo aver disegnato alcuni fantastici schizzi su carta. Per prepararci a questa parte del processo abbiamo dovuto imparare tutto sulla denominazione e organizzazione dei file.
Ora sappiamo che il file HTML principale viene sempre chiamato index.html e se le immagini si trovano nella loro cartella o non impatta il src attributo nel nostro HTML.
Infine, abbiamo selezionato un editor di testo e siamo stati ufficialmente pronti per iniziare a scrivere alcuni file HTML e CSS!
Per costruire il nostro sito Tuts + Town abbiamo prima creato la nostra struttura HTML e poi inserito il contenuto.
Questa struttura era composta da diversi elementi nidificato all'interno di un primario html elemento e avendo questo fondamento sul posto reso collegando il contenuto molto più semplice.
Una volta che il contenuto era a posto, potremmo iniziare a disegnare tutto con i CSS. Per prima cosa, dovevamo collegare i due documenti insieme nell'HTML capo:
Nel nostro documento CSS siamo stati in grado di dichiarare colori, dimensioni, layout e altro ancora sugli elementi all'interno del documento HTML, portando infine alla progettazione del sito completata.
Questa sezione della serie è terminata con un tutorial che illustra i diversi formati di immagine disponibili. Abbiamo parlato di includerli nel nostro codice HTML e alcuni effetti che possiamo applicare alle immagini con i CSS, come cambiare le loro opacità:
Come accennato, tutte le immagini utilizzate nella serie Tuts + Town sono SVG, il che significa che possono essere ridimensionate senza perdere la qualità ed essere facilmente modificate.
Dopo aver creato il nostro sito, abbiamo esaminato i concetti di base del design che hanno contribuito a formare l'aspetto, la sensazione e l'usabilità del sito.
Il contenuto è la parte più importante del web design, quindi dopo aver stabilito che il nostro contenuto è utile, necessario e ben organizzato, ci siamo spostati sulle immagini.
La gerarchia visiva è stata stabilita per il sito tramite il dimensionamento dei caratteri, i colori e gli spazi bianchi diversi, proprio come il fumetto sopra è progettato per essere l'oggetto dominante nell'immagine.
La tipografia è ovunque vediamo parole scritte ed è una delle parti più importanti del web design. I nostri utenti devono essere in grado di leggere i nostri contenuti, ma dobbiamo anche assicurarci che i font che scegliamo corrispondano al tono e al tatto dei nostri contenuti e del design visivo.
Questa sezione della serie si è conclusa con un tutorial sulla teoria dei colori, il significato di determinati colori, diversi sistemi di colore per il web e come selezionare una tavolozza di successo.
Fare riferimento alle ruote dei colori primarie e secondarie ci aiuta a capire meglio come vengono creati determinati colori e perché alcuni colori possono sembrare buoni insieme mentre altri no.
Ora, vediamo come procedere per ottenere il nostro sito sul web!
Come abbiamo discusso all'inizio di questa serie, questo sito vive localmente sui nostri singoli computer e non su Internet. A questo punto non possiamo indirizzare gli amici e la famiglia a un indirizzo sul Web, quindi non possono ancora vedere il nostro fantastico lavoro.
Come abbiamo discusso nel tutorial Introduzione, i file devono vivere su un server in modo che altri possano visualizzarli su Internet.
Il processo di ottenere un sito su Internet può spesso comportare un acquisto e avere un indirizzo email. Se sei troppo giovane per avere accesso a uno di questi è meglio avere un adulto con te per la sezione seguente.
Ci sono un certo numero di servizi che ti aiuteranno ospite i nostri file per noi, rendendoli accessibili su Internet. Per questa serie ci concentreremo sull'hosting attraverso NeoCities e il concetto di base dei nomi di dominio.
NeoCities è un fantastico e gratuito opzione per l'hosting di file diretto sul web; anche se abbiamo ancora bisogno di un indirizzo email per registrarsi!
Passiamo attraverso i passaggi per ottenere i nostri file ospitati qui:
Ecco uno sguardo al sito di NeoCities: tutsplustown.neocities.org
Un altro vantaggio di questo servizio è che non avremo bisogno di passare attraverso il dominio (l'indirizzo personalizzato per i siti) di acquisto e il processo di installazione, anche se toccheremo su come farlo anche in futuro.
Importante! È possibile utilizzare un nome di dominio personalizzato con NeoCities andando nelle impostazioni del sito dopo l'installazione iniziale e seguendo le istruzioni lì; anche se questo attualmente richiede un account aggiornato per $ 5,00 USD mensili.
I domini sono quegli indirizzi personalizzati cui rimandiamo le persone in modo che possano visitare un sito. Questo passaggio non era necessario quando abbiamo ospitato i nostri file del sito su NeoCities perché per noi ha creato uno speciale indirizzo Neocities. Tuttavia, se stiamo cercando di avere un nome di dominio veramente personalizzato (come tutsplustown.com per esempio) dovremo acquistare questo nome.
Come con il nostro nome utente di NeoCities, anche il nostro nome di dominio dovrà essere unico; potrebbe volerci del tempo per trovare un nome che non è già stato preso.
Ecco un paio di servizi che ci consentono di acquistare nomi di dominio una volta creato un account:
Il passaggio finale per configurare un dominio personalizzato può essere completato tramite il servizio di hosting (come Neocities o BitBalloon menzionato sotto) una volta trasferiti i file.
Se scegliamo di non usare NeoCities ci sono alcune altre società di hosting che si distinguono per essere particolarmente convenienti e facili da usare, ma forse quella che si distingue maggiormente per questi motivi è BitBalloon.
BitBalloon è libero di provare ma richiede il pagamento per includere un dominio personalizzato, proprio come NeoCities. La facilità con cui i file possono essere trascinati e rilasciati nell'interfaccia rende questa un'opzione piuttosto eccitante per siti di base come Tuts + Town.
Una volta trasferiti i file, possiamo completare il processo di configurazione del dominio personalizzato attraverso gli strumenti all'interno del dashboard di BitBalloon.
Il nostro sito Tuts + Town ha il proprio indirizzo del sito che è stato ottenuto e impostato in modo simile al modo in cui abbiamo appena recensito: tutsplustown.com.
Mentre questa serie ha fornito un'introduzione al web design, potremmo finire presto per voler migliorare le nostre capacità una volta pratica, pratica, pratica gli argomenti che abbiamo recensito qui.
Il libro "Costruisci il tuo sito web, una guida di fumetti per HTML, CSS e Wordpress" di Nate Cooper fornisce una solida base per creare un sito attraverso una divertente storia raccontata in un formato a fumetti.
Shay Howe ha scritto una serie di tutorial approfonditi sia per principianti che per esperti di livello HTML e CSS:
Il web design reattivo si riferisce alla progettazione di siti che tengono conto di diverse dimensioni dello schermo. Trascorriamo molto tempo sui nostri smartphone, ad esempio, e come progettisti abbiamo bisogno di assicurarci che il nostro sito funzioni su questi schermi più piccoli e su uno schermo desktop a schermo intero.
C'è un fantastico tutorial per principianti di Shay Howe sull'argomento.
Abbiamo usato pixel in tutta questa serie come unità di misura sul web. L'utilizzo dei pixel è perfettamente OK al momento dell'avvio, tuttavia, più esperienza ottieni e più ti renderai conto di quanto siano limitanti. È un'unità di misura così inflessibile che non ha un buon rendimento nel design reattivo.
In termini di progettazione su diverse dimensioni dello schermo ci sono diverse alternative che saranno più flessibili dei pixel, come ad esempio percentuali e REMS.
Mentre abbiamo discusso brevemente di flexbox nel tutorial sul layout CSS, possiamo fare molto di più con i layout che lo utilizzano. Ci sono un paio di super posti per imparare di più, come questa Guida completa a Flexbox e un diagramma di frodi Flexbox.
Per quanto riguarda il layout nel suo complesso e non solo il flexbox, c'è un piccolo sito pulito che ci aiuta a guidarci attraverso le basi.
Mentre c'è molto di più, possiamo imparare a rafforzare e accrescere le nostre competenze nel web design, abbiamo realizzato così tanto in questa serie e ora abbiamo una migliore comprensione delle basi per progettare e costruire un sito.
Abbiamo ufficialmente portato in vita un sito web da schizzi su carta a un sito reale con il proprio indirizzo web; tutto il giorno di un web designer!
Il nostro sito web Tuts + Town fungerà da guida bella e facile da usare per i turisti che considerano la visita, quindi grazie per tutto il vostro duro lavoro.
Accentsconagua