Construirea site-ului: O introducere în crearea unui site web
Ca orice, de la coacerea unui tort până la scrierea unui tutorial, nu există o singură modalitate cea mai bună de a realiza un site web. Încerci câteva metode și, în timp, fie găsești formula care funcționează pentru tine, fie improvizezi și vii cu una cu totul nouă.
În ultimii 4 ani, am experimentat mai multe practici și, în cele din urmă, m-am hotărât cu următoarea. Este un proces în 5 pași care începe cu definirea scopului site-ului și cui este destinat și se încheie cu un site web frumos, complet funcțional.
Dacă decideți să săriți peste câțiva dintre pașii intermediari, puteți ajunge fie la un site frumos, nefuncțional, fie dimpotrivă, un site funcțional, dar urât la vedere.
În primul rând, trebuie să răspunzi la două întrebări de bază: Ce? OMS? Dacă construiți site-ul pentru un client, implicați-l în timp ce răspundeți la aceste întrebări.
Care este scopul site-ului?
Care este scopul construirii acestui site web? Cu alte cuvinte, ce sperați să realizați prin acest site? Iată câteva dintre posibilele răspunsuri:
După ce ați identificat scopul site-ului, trebuie să definiți un vizitator tipic al site-ului dvs.
Vrei să răspunzi tuturor celor care navighează pe internet? Bună încercare, dar trebuie să fii mai specific.
Răspunsul la această întrebare va oferi o direcție redactorului și designerului dvs. de copiere. Dacă nu reușești să răspunzi precis, s-ar putea să ajungi cu flori roz și ursuleți de pluș pe un site tehnic.
Luând exemplul produselor 37 Signal, publicul lor țintă este întreprinderile mici și persoanele fizice. Chiar dacă marile corporații își folosesc și produsele, acestea vizează întreprinderile mici și persoanele fizice.
Unele dintre caracteristicile pe care le-ați lua în considerare atunci când vă definiți publicul sunt:
În continuare, vei construi scheletul site-ului. De obicei, un site va fi împărțit în secțiuni și subsecțiuni. Acest lucru este foarte important pentru că vă oferă o imagine de ansamblu asupra site-ului. Puteți utiliza un instrument de conturare pentru a crea structura site-ului. Eu folosesc LooseStitch. Este un outliner online gratuit care vă permite să invitați și pe alții să elaboreze schița. Este extrem de util atunci când lucrați ca parte a unei echipe.
Ca exemplu, să ne uităm la site-ul Amazon. Are 11 secțiuni de nivel superior:
Fiecare dintre ele are câteva subsecțiuni. Iată câteva dintre ele:
Amazon.com are doar 2 niveluri de meniuri. Un site mai simplu ar putea avea doar un singur nivel, în timp ce cele mai complexe ar putea avea până la 4 niveluri.
Până acum, nu ați scris o singură linie de cod. Clientul trebuie să fie îngrijorat când va ajunge să vadă primele ecrane ale site-ului. La sfârșitul acestui pas le veți arăta ceva în browser; dar nu ceea ce se așteaptă. Vor dori să vadă mai întâi designul. În schimb, le vei arăta un site prototip.
Un site prototip este un site complet funcțional, cu toate paginile care conțin conținutul necesar. Dacă site-ul are un meniu de navigare, acesta trebuie să figureze undeva pe paginile prototip. Formularul „Contactați-ne” trebuie să fie conectat pentru a trimite datele prin poștă la adresa necesară.
Dar atunci cu ce este diferit de site-ul final?
Oh, am uitat să menționez, designerul încă nu a realizat designul. Prototipul este un site gol, care nu conține aproape nicio grafică. Scopul prototipului este de a putea pune lucrurile foarte repede la loc și de a găsi erorile de utilizare. Ai fi putut începe cu o structură pe 2 niveluri pentru site și apoi ai fi realizat că ai subestimat complexitatea site-ului. Trebuie adăugat un al 3-lea nivel. Dacă ne dăm seama de asta după ce designul a fost realizat, designerul va trebui să refacă designul. Acest lucru poate costa destul de mult o avere.
Privind prototipul, designerul cunoaște structura site-ului și ce ar trebui să fie pe fiecare pagină. În pasul 1, am definit publicul țintă și scopul site-ului. Acestea sunt o contribuție vitală pentru proiectant. El sau ea are acum cea mai mare parte a datelor necesare. În câteva zile, este posibil să veniți cu două sau trei modele de șabloane pentru site. La sfârșitul câtorva ședințe cu clientul, unul dintre proiecte poate fi finalizat.
Amintiți-vă, designerul nu proiectează în HTML. Ei vor folosi Photoshop sau o aplicație similară și vor oferi un șablon pentru fiecare tip de pagină.
Odată ce designul este aprobat, trebuie să îl reconstruiți în HTML5 și CSS3. Dacă designul conține tranziții, va trebui să utilizați Javascript și, eventual, AJAX. Pentru fiecare design de șablon, ar trebui să creați un fișier HTML. Puneți niște „Lorum Ipsum” (text exemplu) în substituenți, astfel încât să puteți vedea cum arată pagina.
După ce ați construit șabloanele HTML, testați-le pe diferite browsere. Sunteți obligat să vă confruntați cu probleme de browser. Cu cât le remediați mai devreme, cu atât mai puțin va trebui să reproduceți corecțiile.
Odată ce paginile șablonului HTML sunt gata și testate în browsere, puteți replica paginile prototip cu noul design. În timpul reproducerii, utilizați în mod judicios incluziunile. Puteți include bucățile comune de cod, cum ar fi antetul și subsolul. Acest lucru reduce codul pe fiecare pagină și face ca întreaga bază de coduri a site-ului web să fie mai gestionabilă.
Asta e! Am trecut de la ideea unui site web, la construirea unuia în 5 pași. Aceasta este o prezentare generală de bază a modului de a construi un site web. Mai târziu putem discuta despre Optimizarea pentru motoarele de căutare (SEO), utilizarea unui Sistem de management al conținutului (CMS), utilizări avansate ale JavaScript, CSS și multe altele!
