Dezvoltare web și proiectare 101

web_development_101Doriți să cunoașteți elementele de bază ale dezvoltării și designului web? Minunat…


Dar există o problemă cu această linie de gândire, sau o serie de ele de fapt …

  • Care este scopul de a avea un site web? Toată lumea are nevoie într-adevăr de una?
  • Dacă da, cum construiți un site web de calitate? Sau cu alte cuvinte, cum înveți dezvoltarea web de bază și designul care îți va permite să creezi singur acel site de calitate?
  • Mai important, puteți construi un site web de calitate în prima dvs. încercare? Sau ai nevoie de ani de experiență în spatele tău, înainte de a putea spera la orice rezultat mai presus de îngrozitor?

Să răspundem la toate în acest sens Ghid pentru incepatori pentru dezvoltarea web si design.

[Alertă spoiler. Da, puteți construi un site web de calitate la prima încercare.]

Ce este cuprins în acest ghid?

Bine, întâi lucruri întâi, ne bucurăm că ai continuat să citești și că ai decis să încerci dezvoltării web! Iată cum va reda:

Capitolele sunt prezentate într-o manieră foarte simplă, cu conținutul principal din stânga și elementele acționabile în dreapta. Ca astfel:

Introducere ghid: Capitolul 1

Acum, cum să procedați:

  • În timp ce ați citit: Vă recomandăm să citiți întregul lucru de sus în jos. Acest lucru vă va oferi o perspectivă bună de 10.000 de metri despre subiect și vă va ajuta să înțelegeți cele mai importante părți ale acestuia. De asemenea, vă va oferi instrumente și metode de bază cu privire la modul de gestionare a sarcinilor individuale.
  • În timp ce vă aflați pe a doua dvs. citiți și mai departe: Utilizați TOC și treceți peste partea care vă interesează cel mai mult. De asemenea, nu ezitați să utilizați butoanele de partajare de lângă fiecare capitol și trimiteți link-uri către dvs. sau către prietenii / urmașii dvs. care ar putea fi interesați.

Gata? Să mergem la capitolul 1.

Pentru cine este acest ghid?

Dacă doriți să aflați dezvoltarea web și designul de bază, acest ghid este pentru dvs. Oricare ar fi motivația ta.

De asemenea, nu aveți nevoie de cunoștințe tehnice anterioare pentru a începe (în afară de „abilitățile web de bază”). Întregul punct al acestui ghid este să fie un fel de curs „101” pentru toți cei interesați să creeze site-uri web și să învețe dezvoltarea web.

Iată câteva motive comune pentru care v-ar putea interesa:

  • 1. Ai nevoie de un site web pentru afacerea ta (și vrei să vezi dacă o poți construi singur).
  • 2. Doriți să învățați dezvoltarea web din pasiune sau interes temporar (nimic rău despre asta).
  • 3. Ai nevoie de un site web pentru școală.
  • 4. VĂ AJUTAți să vă aflați un prieten sau un membru al familiei pentru a-și accesa site-ul online.

Ideea principală care ne va ghida

Asta e important! Și vă rugăm să nu vă înnebuniți dacă sunteți un dezvoltator web avansat care citește acest lucru, dar ideea principală care ne va ghida pe toată întreaga resursă de dezvoltare web și design 101 este:

„Cea mai mică rezistență”

Iată cele trei principii ale abordării cu cea mai mică rezistență:

  • Suntem nu distruge lucrurile la nivel molecular. I.E. nu vom ajunge la baza modului în care funcționează limbajele de programare sau la modul în care funcționează un server web.
  • Suntem neinventarea roții. I.E. dacă cineva a rezolvat deja o problemă dată și a pus soluția la dispoziție, o vom folosi.
  • Suntem făcând o soluție simplă minunată, mai degrabă decât o soluție complicată și aparent mai funcțională buggy și care nu este de înțeles.

CAPITOLUL 1: Planul

Ideea dvs., tipul site-ului web, numele de domeniu și găzduirea.

Înainte de a configura un site web, veți avea nevoie de un plan

Ironic, așa cum s-ar putea să sune – succesul anilor 80 arată „Echipa A” ne-a învățat, un plan bun este un cheia succesului.

Dacă aveți un site web în care vă aflați de ceva vreme, atunci sunteți sigur încântat de singura idee de a-l scoate în sfârșit pentru ca alții să citească și să răsfoiască.

Vrei ca site-ul tău să fie minunat. Probabil știi cum va arăta într-o oarecare măsură. Sau poate chiar aveți sigla perfectă.

Dar…

Nu este deloc locul în care ar trebui să începeți. Dacă începeți cu așteptări prestabilite, acest lucru vă va conduce doar la o mulțime de confuzii pe parcurs și la un rezultat secundar la sfârșit.

În schimb, gândiți-vă la următoarele:

  1. Separați-vă de orice obiective tehnice pe care le-ați avea. Cum ar fi, de exemplu, obiectivul învățării tehnologiilor site-urilor web sau al anumitor programe software.
  2. Puneți-vă o întrebare principală: „Pentru ce am nevoie de site?”

Nu este vorba despre tine, este vorba despre obiectivul site-ului.

Întrebări pe care trebuie să le întrebi înainte de a-ți configura site-ul

  1. Ceea ce este menit să realizeze site-ul?
  2. Care va fi principalul „lucru” prezentat prin intermediul site-ului? (de exemplu, afacerea dvs., un produs, postările dvs. de blog etc.)
  3. Va avea site-ul web vreun scop special? (de exemplu, un magazin de comerț electronic, portofoliul unui fotograf etc.)
  4. Cine este publicul țintă?
  5. De ce sunt interesați de subiectul site-ului?
  6. Ce durere rezolvă site-ul pentru membrii publicului individual?

Despre aceste ultime 3 întrebări, să vorbim audiența timp de un minut …

Există 2 reguli principale pentru construirea site-urilor web. Iată regula nr. 1:

 Cititorul / vizitatorul vine în primul rând. Sunt persoana principală pe care site-ul dvs. web trebuie să o mulțumească.

Într-un fel, site-ul dvs. nu este al vostru. Este a lor.

(Regula nr. 2 vom discuta într-un minut.)

Uitarea de această orientare simplă vă poate conduce pe o cale complet greșită, chiar până în punctul în care vă aflați cu un site web care confuză pentru toți cei din jur, dar pentru dvs..

„Ugh! Oamenii nu înțeleg doar despre ce este vorba. Cum pot fi atât de ignoranți ?! ” – sfârșești gândindu-te. Dar, după cum se dovedește, cel ignorant ai fost tu.

Singura modalitate de a evita acest lucru este să-ți creezi site-ul cu cititorul în minte chiar de la început.

Deci … ia acea bucată de hârtie și răspunde la toate întrebările de mai sus.

După ce ați terminat, aveți setul dvs. final de ghiduri la care veți acționa în timp ce lucrați pe site-ul dvs. web.

Aceste răspunsuri vor fi un instrument excepțional de puternic pe măsură ce mergeți. Veți putea reveni la ei ori de câte ori vă confruntați cu o decizie cu privire la site-ul dvs. web.

Ar trebui să faci * asta * sau * asta *? Accesați foaia de răspuns și aflați. Ar trebui să folosiți o bară laterală largă sau îngustă? Accesați răspunsurile, aflați care este mai probabil să rezoneze cu cititorul țintă. Si etc.

Nume de domenii și găzduire web

Dacă doriți să fiți proprietarul unui site web, aveți nevoie de un nume de domeniu și de o gazdă web.

Ei bine, bine, tehnic vorbind, puteți construi un site web de testare pe propriul computer și apoi să-l executați de pe un server web local (instalat și ca software pe computer), dar aceasta nu ar fi o soluție utilizabilă pentru 99% din cazuri, așa că haideți să sariți.

Deci, o gazdă și un domeniu …

Vestea proastă este că ambii costă bani.

Vestea bună … nu sunt atât de mulți bani în marea schemă a lucrurilor. În plus, pe măsură ce înveți, poți chiar lansa mai multe site-uri web mici pe un singur nume de domeniu și sub o singură gazdă web.

Dar să începem la început.

Gazde web:

  • În termeni simpli, o gazdă web este locul unde se află site-ul dvs. și vizitatorii dvs. îl pot găsi. Într-un fel, gazdele web pentru site-uri sunt la fel ca apartamentele pentru oameni. Sub capotă, gazdele web sunt companii care își închiriază serverele în schimbul banilor (… apartamente mici pentru site-urile dvs. web).
  • Pentru a începe, va face un plan standard de găzduire partajat. Puteți obține cele pentru orice, începând cu 3 USD / lună. Iată o comparație frumoasă a gazdelor web populare. Verificați-l și decideți care dintre acele companii vi se pare tocmai potrivit. Cu toate acestea, recomandările noastre se referă la SiteGround, A2 Hosting și Dreamhost.

domenii:

  • Dacă o gazdă web este un apartament, atunci un domeniu este adresa apartamentului respectiv. De exemplu, domeniul acestui site este hostingfacts.com.
  • Modul de a începe este să alegeți numele de domeniu dorit și apoi să îl cumpărați de la un registrator. Iată un ghid cuprinzător despre cum să cumpărați un nume de domeniu și iată o listă cu generatoare de nume de domeniu.

 

Sugestii și sfaturi pentru alegerea unui nume de domeniu

Bine, deci a merge la un registrator de domeniu și a cumpăra de fapt un domeniu este un lucru, dar cum să alegeți numele de domeniu potrivit?

Există câteva școli:

  • Nume de domeniu. Acestea sunt domenii alcătuite din cuvinte inexistente. Gândiți-vă, lucruri precum Google.com sau Yahoo.com. Înainte ca aceste companii să apară, acele cuvinte nu însemnau nimic. Un aspect de domeniu al unui nume de domeniu este că … este foarte bine, foarte memorabil, memorabil și este ușor să distingi site-ul tău de ceilalți.
  • Nume bazate pe cuvinte cheie. Acestea sunt cuprinse din cuvinte existente, puse într-o secvență care descrie scopul site-ului. Gândiți-vă, lucruri precum Pizza.com sau StartBloggingOnline.com. Cu un nume de domeniu de genul acesta, vizitatorii dvs. vor putea prezice cu exactitate tipul de site web pe care urmează să îl viziteze. Dezavantajul este că aceste domenii sunt, în general, mai puțin marcabile.
  • Nume combinate. Acestea sunt domenii de marcă și domenii bazate pe cuvinte cheie. Gândiți-vă, Facebook.com sau Copyblogger.com. Aceste nume sugerează vizitatorilor „unele” părți din natura site-ului web, dar ele sunt încă foarte marcante.

Câteva orientări generale, indiferent de tipul de domeniu pe care îl alegeți:

  • Faceți ca domeniul să fie ușor de memorat.
  • Faceți-o scurtă și simplă. Cu cât domeniul este mai lung, cu atât este mai confuz.
  • Obțineți un com .com (dacă este posibil). .Com este principalul „domeniu de nivel superior” disponibil. Nu vă mulțumiți cu nimic altceva.
  • Încercați să evitați cratima. Obțineți numele dvs. într-o formă unică, precum „cakerecipes.com” în loc de „cake-recipes.com”

Lucruri de pregătit după acest capitol:

  • Un nume de domeniu.
  • O gazdă web.
  • Fișa dvs. de răspunsuri – obiectivele site-ului dvs. și modul în care va servi publicul.

Ai nevoie de mai mult ajutor? Citiți în continuare pentru dvs.:

  • De ce găzduirea partajată? Principalele tipuri de gazde în comparație
  • 10 lucruri care fac o gazdă web bună
  • 12 reguli pentru alegerea numelui de domeniu potrivit
  • Un ghid complet de planificare a site-urilor web

CAPITOLUL 2: Proiectarea și modelarea prin sârmă

Luați o hârtie și un stilou și zgâriați împreună cu structura site-ului

Bine, să intrăm în faza de proiectare.

În primul rând, iată etica de lucru pe care o vom parcurge aici:

  • Folosim stilou și hârtie cât putem, și abia apoi trecem la computer. Credeți-ne, fiecare minut petrecut la proiectarea dvs. pe hârtie este salvat o oră după ce începeți să reglați lucrurile pe computer.
  • Facem lucrări iterative … Facem »verificăm rezultatele» îmbunătățim »verificăm rezultatele» repetăm ​​până la final.

În capitolul 1 am menționat ceva ce am numit regula nr. 1 a construirii site-urilor web. Acum este momentul pentru regula # 2:

Regula nr. 2 a construirii site-urilor web:

Gândiți mai întâi conținutul.

Conținutul este ceea ce contează pe un site web. Nu designul. Conţinut.

Oamenii vin pentru conținut. Nu vin pentru design. Designul este doar un vehicul pentru a livra conținutul.

Nu începeți niciodată cu aspectul site-ului dvs. web. Începeți cu conținut. Conţinut. Conţinut. Conţinut.

Deci, ce înțelegem prin „conținut”? Pe scurt, este ceea ce oamenii doresc să obțină de pe site-ul dvs. web. Postări pe blog, produse din magazin, subiecte de forum dacă construiți un forum, articole de știri, oferta dvs. de afaceri etc..

“Într-adevăr? Aspectul nu contează? ” – Tu intrebi.

În loc să batem asta, consultați această pagină:

Site simplu

Această pagină web simplă este de departe cea mai bună explicație despre ce este designul și pentru ce scop servește online.

Deci, amintiți-vă, conținut mai întâi!

Conținutul și structura site-ului web

Bine, deci, deoarece conținutul este cel mai important lucru, trebuie să-l aveți (majoritatea) gata înainte. Sau cel puțin, trebuie să aveți o idee bună despre cât de mult conținut va exista și în ce formă.

Notă. Știm că această parte poate fi grea. Începutul conținutului pare destul de nefiresc pentru design-ul site-ului, dar este într-adevăr cel mai bun mod de a obține un rezultat superb până la urmă. Deci, gândiți-vă la conținutul pe care doriți să îl partajați cu cititorul și cum doriți să îl prezentați.

Următorul pas este să selectați tipurile individuale de pagini de care aveți nevoie (cum ar fi o pagină de pornire, o pagină de produs, o pagină de categorii, o pagină despre, o pagină de contact, pagina principală de vânzări, unele pagini de aterizare a abonamentului la newsletter, listarea principalelor bloguri, postări individuale, poate un magazin și orice altceva pare necesar.

Gândiți-vă, care este cea mai eficientă modalitate de a vă organiza conținutul pe site?

Faceți toate acestea pe hârtie. Probabil că va fi mai ușor și mai rapid pentru dvs. decât să învățați o parte din software-ul de desen grafic pe loc.

Exemplu:

conținut structura

Scartați împreună un cadru

Un cadru în design web este pur și simplu o schemă a paginii sau un model – un ghid vizual care reprezintă cadrul unui site web (ne spune Wikipedia).

Wireframes sunt minunate! Le folosim pentru majoritatea lucrurilor pe care le facem, menite să apară online. De exemplu, iată un cadru pentru acest ghid:

Zgârieți împreună un cadru de sârmă

După cum puteți vedea, din nou, aceasta este pe hârtie. Chiar dacă există mai multe aplicații pentru acest tip de lucru, nu recomandăm să le folosești. S-ar putea să fie excelenți pentru designeri profesioniști, dar un începător sau o persoană intermediară își va pierde timpul doar învățându-i, iar în final, nu vor obține multă îmbunătățire față de ceea ce ar realiza prin stilou și hârtie.

Deci, cum să filați?

Ei bine, există două abordări dacă ești începător:

  • Mergeți cu fluxul dacă vă simțiți puternic și pur și simplu atrageți (nu întotdeauna o soluție perfectă).
  • Obțineți cunoștințe rapide despre modul în care puteți conecta corect schema (de obicei mai bine).

Pentru acestea din urmă, mergeți aici – un ghid minunat.

(Asigurați-vă că creați un cadru pentru fiecare tip de pagină important pe care l-ați enumerat în pasul anterior.)

Lucruri de pregătit după acest capitol:

  • Cea mai mare parte a conținutului site-ului sau cel puțin cea a celor prezise (de exemplu, dacă te bazezi pe conținut generat de utilizator, atunci este greu să ai asta înainte).
  • Structura de conținut a site-ului dvs. web pregătită sub forma unui grafic.
  • Un cadru al tipurilor individuale de pagini de care aveți nevoie.

Citire ulterioară:

  • 9 pași pentru planificarea conținutului site-ului web
  • Nou pentru designul web? Începe aici.

CAPITOLUL 3: UX și UI

Nu subestimați niciodată importanța experienței utilizatorului și a interfeței cu utilizatorul

Ca și în, Experiență utilizator și Interfață utilizator.

WebDesignerDepot ne oferă o definiție destul de poetică a celor două:

UI este șa, etrierile și domniile.

UX este senzația că vei putea să călărești calul și să-ți frânge vitele.

Pentru o definiție mai practică:

  • Interfața de utilizator este ceea ce vede utilizatorul atunci când se uită la site-ul dvs..
  • UX este cum se simt despre asta.

Perechea și cât de bine este executată, definește practic utilitatea site-ului dvs. web pentru utilizatorul final / vizitator.

Atât designul UX cât și UI sunt subiecte importante în sine și există o mulțime de elemente mai mici care joacă un rol în rezultatul final..

Pe scurt, este foarte mult de învățat dacă tocmai îți începi călătoria.

Așadar, în loc să încercăm să agățăm un întreg curs de design UX și UI aici, să evidențiem doar o mână de elemente importante, apoi să vă trimitem în altă parte pentru a citi în continuare.

Obiectivele utilizatorului

UX se referă la obiectivele utilizatorului … Nu la fel de multe din obiectivele tale … Obiectivele utilizatorului.

Bine, ce înseamnă asta? În primul rând, reveniți la scopul site-ului dvs. web – lucrul la care ați lucrat în capitolele anterioare. Motivul pentru care construiți site-ul și modul în care îl ajută pe utilizator / vizitator.

Cum se traduce în obiectivul vizitatorului? … Care este singurul lucru pe care vizitatorul dorește să îl obțină sau să îl obțină atunci când vine pe site-ul dvs.? Acesta este obiectivul lor.

Cât de ușor sunt realizările respective?

În continuare, concentrați-vă pe următoarea întrebare:

  • Poate vizitatorul să își atingă ușor obiectivul? – Pot să ajungă la informațiile exacte pentru care au venit într-o manieră simplă?

Pentru a răspunde la aceasta, trebuie să vă întoarceți la cadrul dvs. de fir, la structura conținutului și la verificarea dublă.

Asigurați-vă că structura conținutului și paginile pe care le-ați gândit au sens din punctul de vedere al utilizatorului. Asigurați-vă că este posibil ca acestea să poată naviga între paginile importante în mod liber și într-un mod care nu confuză.

În esență, aici, ne asigurăm că site-ul oferă valoare vizitatorilor dvs..

Așa că, pentru a da seama de toate acestea, nu-i așa?

Vă recomandăm să consultați resursele enumerate în secțiunea „lectură suplimentară” de la acest capitol… dar puteți încerca, de asemenea, „un hack”, ca să zic așa.

Anume, gândiți-vă la ce vă frustrează când vizitați site-uri web similare cu cele pe care doriți să le construiți? Poate există unele informații cu adevărat dificil de accesat sau un element de interfață care face site-ul confuz.

Luați note, trageți concluzii și nu faceți aceleași greșeli cu site-ul dvs. web.

Utilizarea emoției ca instrument

Atunci când lucrați la interfața de utilizator și UX a site-ului dvs., ceea ce vizați practic este invocarea unei anumite emoții în vizitatorul dvs..

Vrei să simtă un anumit mod, ceea ce îi va convinge apoi să acționeze un anumit mod. Astfel, a face site-ul dvs. web cu adevărat util.

Pentru a lucra la partea emoțională a meseriei, unul dintre cele mai bune instrumente este culoarea.

Culorile au semnificații diferite în diferite culturi. Înțelegerea acestor diferențe vă poate face munca mult mai ușoară. Iată o foaie frumoasă de înșelăciune.

După ce ați ajuns în parcul de joc al culorilor pe care doriți (eventual) să le utilizați, iată câteva recomandări generale atunci când lucrați cu culoarea:

  • Alegeți o schemă de culori principale care constă dintr-un cuplu de culori care merg bine împreună. Iată un generator de scheme de culori grozave.
  • Alegeți o culoare care va fi culoarea dvs. de accent – culoarea care va fi folosită pentru butoanele de acțiune, pentru a cumpăra butoane etc. În principal, orice este nevoie de atenția utilizatorului..

Tipografie

În multe cazuri, tipografia este locul în care câștigi (sau pierzi) jocul de construire a site-urilor web.

Este atât de ușor să uiți complet de tipografie și să folosești Arial pentru orice.

Nu se recomandă.

În aceste zile, lucrul cu fonturi personalizate este ușor uber și nici nu trebuie să faci nimic tehnic pentru a activa fonturile personalizate de pe site-ul tău..

Tipografia mare, mare, este foarte modernă în zilele noastre și face, de asemenea, munca unui designer – mai ales munca unui designer începător – mult mai ușoară.

Consultați acest site, de exemplu:

bonobo

Ați observat ceva? Da, fonturile sunt uriașe și arată minunat!

Iată cum să lucrați la acest lucru:

  • În general, fiecare design web are nevoie de două tipuri de text: rubrici și alineatele. În cele mai multe cazuri, va face doar un font pentru fiecare.
  • Accesați fonturile Google – biblioteca proprie de fonturi gratuite pe care le puteți utiliza pe site-ul dvs. web și căutați un font cu titlu de care vă bucurați cu adevărat.
  • Apoi, luați numele fontului respectiv și căutați-l la perechea de fonturi – este o bibliotecă de împerecheri de fonturi pre-făcute care se îmbină bine.
  • Alege o împerechere care arată minunat.
  • Notează numele ambelor fonturi, le vei avea nevoie mai târziu.

Făcând acest lucru îți vei grăbi procesul și îți va oferi totuși un rezultat excelent.

De exemplu, am găsit un font numit Bree Serif în fonturile Google de care ne bucurăm destul de mult:

Bree-serif

Apoi, am dus-o la Font Pair, iar site-ul a sugerat ca Bree Serif să meargă bine cu Open Sans. Perfect:

Bree-serif-deschis-sans

Structura finală

În cele din urmă, ultimul pas!

Întregul capitol al acestui capitol este să aterizați pe o structură / structură finală pe care o veți folosi pentru site-ul dvs. În acest moment, ar trebui să fiți aproape sigur în ceea ce privește lucrurile pe care doriți să le faceți cu designul și UI.

Lucruri de pregătit după acest capitol:

  • Obiectivele utilizatorului dvs. sunt clar enumerate.
  • Rama dvs. de sârmă a fost verificată de două ori pentru a vă asigura că aceste obiective nu sunt confuze.
  • Schema de culori selectată.
  • Tipografia a fost descrisă.
  • Întreaga structură a site-ului / structura / organizarea site-ului.

Citire ulterioară: 

  • Revista UX
  • UX Booth
  • Psihologia și emoția din spatele culorii în designul web
  • Ce este proiectarea experienței utilizatorului? Prezentare generală, instrumente și resurse
  • Stabilirea obiectivelor de afaceri inteligente pentru un site web
  • 8 reguli pentru crearea tipografiei eficiente

CAPITOLUL 4: WordPress, HTML sau Șabloane?

Decideți ce cale să parcurgeți – sisteme de gestionare a conținutului sau codați-l de la zero

Iată de unde începe adevărata lucrare murdară de mâini, sub capotă!

Aceasta este probabil și cea mai înfricoșătoare parte a procesului (recunoașteți-o!).

Pentru o dată, este momentul potrivit să lăsați stiloul și hârtia deoparte și să începeți să lucrați cu ceva software.

Și chiar pe poartă, există o mulțime de întrebări …

  • Ar trebui să învăț HTML?
  • Dar CSS?
  • Șabloanele site-ului HTML gata făcute sunt trucurile pentru mine?
  • Trebuie să învăț un limbaj de programare precum PHP?
  • Am auzit că WordPress este modul de a construi un site în aceste zile.
  • Am văzut că anunțul Squarespace Super Bowl. Ce-i cu aia?
  • Cum se numește acest lucru Joomla? sau Drupal?
  • și în continuare și în continuare.

Răspunsul la toate acestea este da.

Ca și în, da, puteți face unul sau toate aceste lucruri și depinde numai de dvs. să decideți ce cale să alegeți.

Ceea ce încercăm să spunem este că nu există cea mai bună abordare # 1 aici. Totul depinde de cât de implicat doriți să obțineți o dezvoltare web, cât de multe dintre elementele de bază ale construirii site-urilor pe care doriți să le învățați, cât de repede aveți nevoie de un site de calitate realizat și cât de personalizabil doriți să fie ulterior.

Iată cum vom proceda de la acest capitol înainte. Primul, alege persoana care te definește cel mai bine:

  • A) Vreau să aflu despre ce este vorba despre dezvoltarea web, toate elementele de bază, toate funcționările interioare ale unui site web și toate mecanismele care fac ca un site să funcționeze.
  • b) Vreau să învăț cum să folosesc un constructor de site-uri de încredere, care să se ocupe de cea mai mare parte a ridicărilor grele pentru mine.
  • c) Nu știu ce să fac. Doresc doar un site web pe care să-l pot construi și care să funcționeze corect.

A răspuns a)? Accesați Capitolul 5.

Răspuns b)? Accesați Capitolul 6.

Răspuns c)? Nu ezitați să consultați acest articol și apoi să reveniți (ar trebui să vă ajute să selectați calea perfectă):

  • 8 cele mai bune platforme de blogging și de construire de site-uri web revizuite … Fiecare platformă este descrisă împreună cu avantajele și contra, iar resursa sugerează, de asemenea, cea mai bună alegere disponibilă (Wix sau SB) pentru nevoile dvs. specifice.

Ai citit-o? Grozav! Deci, care dintre persoanele de mai sus vă descrie cel mai bine – a) sau b)?

Instrumentele care pot fi utile pe parcurs:

  • Grafică: Paint.NET, Gimp, Pixlr.
  • Scrierea codurilor: Notepad ++, TextWrangler, SublimeText.
  • Managementul muncii: Trello.
  • Design: scheme de culori, fonturi Google, instrumente de aici.
  • Fotografie: Unsplash, AllTheFreeStock

CAPITOLUL 5: Introducere în HTML, CSS & Javascript

Cum site-urile web sunt o realitate încorporată

În acest capitol, vom evidenția elementele de bază ale dezvoltării web, vom explica termenii cei mai importanți, apoi vă vom trimite la unele resurse specifice, unde vă puteți îmbunătăți cunoștințele și abilitățile.

HTML

HTML este limba site-urilor web. Fiecare pagină web este construită sau transformată în HTML la un moment dat.

De exemplu, pentru a vedea structura HTML a acestui ghid pe care îl citiți aici, trebuie doar să apăsați „Ctrl + U” pe tastatura dvs..

HTML definește fiecare bloc pe care îl vedeți pe o pagină web. La sfârșitul zilei, pentru a afișa orice pe o pagină web, trebuie să fie convertit în HTML.

Pentru a învăța HTML eficient, vă sfătuim să vă înscrieți la unul dintre cursurile (gratuite sau plătite) disponibile pe web. Unele dintre cele mai bune pot fi găsite la Codeacademy sau Treehouse.

De exemplu, aici este o secțiune specifică despre Codeacademy despre HTML și CSS.

Pagina de pornire CodeCademy

Deci, aceasta este abordarea completă a HTML-ului.

CSS

CSS – pentru a omite detaliile tehnice plictisitoare – este responsabil de stilizarea a tot ceea ce este vizibil pe o pagină web.

CSS ia etichete HTML și apoi structură și le adaugă stilul. Lucruri precum: textul îndrăzneț, ajustările culorilor, umbre, machete, chiar și animații, sunt acum realizate în principal cu CSS.

Pentru o mai bună înțelegere a modului în care funcționează exact acest lucru, treceți la acest curs rapid la Codeacademy.

Pentru învățare mai aprofundată, verificați, de asemenea, secțiunile CSS de pe Codeacademy sau Treehouse.

JavaScript, jQuery, Bootstrap etc..

JavaScript este un limbaj de programare care vă permite să introduceți unele acțiuni dinamice pe site-ul dvs. web. De exemplu, puteți face lucruri precum validarea formularelor web sau interacțiunea cu utilizatorul într-un mod mai simplu, fără a fi nevoie să reîncărcați pagina pe care sunt. Iată un tutorial minunat al w3schools.

Având în vedere acest lucru, jQuery este o bibliotecă JavaScript care vă permite să creați lucruri avansate cu mai puțin codare. Foarte la îndemână pentru un dezvoltator web. Aflați mai multe aici.

În cele din urmă, Bootstrap este o invenție foarte interesantă. Inițial introdus de Twitter, este practic un mediu front-end care grăbește procesul de construire a unui site web prin furnizarea majorității elementelor comune de site deja pre-construite. Pare complicat, nu-i așa?

Dar nu este. Vedeți acest curs inițial la Codeacademy (apropo, așa am învățat inițial Bootstrap).

Lucruri de pregătit după acest capitol:

  • Practic, primul draft al site-ului dvs. HTML / CSS a fost complet construit. De acolo, puteți începe să iterați și să îmbunătățiți rezultatul final.

CAPITOLUL 6: Platforme de construire de site-uri web

Configurarea primului dvs. site? Încercați platforme gratuite de site-uri precum WordPress, Joomla sau Drupal

Capitolul 6: Platforme de construire de site-uri web

  • Squarespace
  • WordPress
  • Joomla & Drupal

Există mai mulți producători de site-uri decât puteți agita un stick. (Dacă sunteți genul de persoană care se agită de lucrurile.)

Bine, glume deoparte.

În mod clar, dacă nu aveți dorința de a învăța cum să codați lucrurile de mână, ele sunt cu siguranță mai multe soluții care vă pot ajuta.

Notă. Vă rugăm să rețineți că tot ce am discutat în capitolele 1-4 se aplică încă aici. Chiar dacă mergeți cu o soluție de construire a site-urilor care este un fel de hands-off, trebuie totuși să aveți grijă să faceți produsul final prietenos pentru utilizatori și să concordeze cu obiectivele tuturor. Aceste instrumente de construire a site-urilor sunt exact acelea … instrumente.

Începând cu cele care sunt cele mai ușor de înțeles:

Squarespace

Singura platformă de site web care face reclamă în timpul Super Bowl.

Pe scurt, o soluție foarte utilă, care poate fi folosită de oricine. Nu sunt necesare abilități anterioare.

Vă permite să construiți site-uri web, bloguri, chiar magazine de comerț electronic chiar am scris o recenzie despre ele. Interfața și întregul proces de utilizare a acesteia sunt destul de ușor de înțeles, în plus, tipii Squarespace oferă o mulțime de tutoriale interesante. Vezi-le aici.

WordPress

Sincer, ne place WordPress.

De cele mai multe ori, este platforma perfectă pentru a construi un site web. Are un echilibru perfect între complexitate și ușurință de utilizare și este practic personalizabil la nesfârșit.

Animație WordPress

De asemenea, este în prezent cea mai populară platformă de site-uri web. După cum a împărtășit creatorul WordPress – Matt Mullenweg – WordPress are acum 25% din întregul internet. Toți acei oameni pot greși?

Bine, deci pentru a începe cu WordPress, în principiu, ai nevoie doar de domeniul tău și de găzduire. Programul WordPress în sine este complet gratuit.

Pentru început, nu ezitați să urmați una dintre aceste căi:

a) „Calea de pornire rapidă”

  • Accesați aici pentru a afla modul simplificat de instalare a WordPress și de lansare a site-ului într-o după-amiază.
  • Alegeți o temă gratuită din directorul oficial – asigurați-vă că este în concordanță cu obiectivele site-ului dvs. și că aspectul / designul nu este departe de structura dorită (o veți ajusta ușor).
    • Verificați aceste două resurse pentru a afla cum să personalizați o temă existentă.
    • În mod alternativ, puteți alege o temă premium polivalentă care poate fi ajustată printr-o interfață de utilizator utilă (nu este implicată nici o codificare). Tema X este un bun exemplu de astfel de lucruri.
  • Instalați unele dintre cele mai populare și mai bune pluginuri pentru a obține funcții suplimentare.

b) „Calea în profunzime”

  • Începeți prin a învăța WordPress printr-un curs online. Treehouse oferă unul minunat.
  • Alegeți tema și pluginurile la fel ca mai sus. Alternativ, construiește-ți propria temă de la început.

La final, WordPress este probabil cea mai versatilă platformă de site-uri de pe piață. Cu acesta, puteți construi practic orice tip de site web, nu numai bloguri sau site-uri simple de afaceri. Iată o listă cu 47 (!) Moduri diferite de a utiliza WordPress, doar pentru a vă gândi.

Joomla și Drupal

Deși ușor diferite între ele, Joomla și Drupal sunt sisteme excelente de gestionare a conținutului pentru proiecte web mai avansate.

Nu sunt atât de puternice pentru design, dar sunt foarte personalizabile și capabile să gestioneze orice fel de site-uri pe care le-ați putea avea în plan.

Uneori, în funcție de complexitatea proiectului tău, este posibil să necesite mult mai mult timp pentru a stăpâni și mult mai mult efort în acest sens.

Pentru o pregătire mai aprofundată, există cursuri minunate pe Lynda.com, atât pentru Joomla cât și pentru Drupal.

Lucruri de pregătit după acest capitol:

  • Prima versiune a site-ului dvs. a fost complet construită, indiferent dacă ați decis să utilizați WordPress sau o altă platformă.
  • Asigurați-vă că este în concordanță cu obiectivele inițiale, cu publicul țintă și că oferă un UX bun.

CAPITOLUL 7: Proiectare mobilă receptivă

Peste 60% dintre oameni utilizează telefoane mobile și tablete pentru a naviga pe web

Reactivitatea mobilă este acum un aspect foarte important în construirea de site-uri web, probabil mai mult decât a fost vreodată.

Iată despre ce este vorba întreaga problemă:

Practic, chiar acum, există mai multe persoane care folosesc dispozitive mobile pentru a accesa webul ca niciodată. De fapt, se estimează că acum există mai mulți utilizatori de internet mobil decât utilizatorii de internet desktop (75,1% față de 52,7%).

Dar există o problemă.

Nu orice design al site-ului web va fi optimizat pentru a fi vizualizat pe dispozitivele mobile chiar pe poartă.

Unele probleme comune includ:

  • fonturile fiind prea mici,
  • aspectul în sine nu se adaptează deloc la un ecran mai mic,
  • sau tehnologia folosită pentru construirea site-ului nefiind disponibilă pe mobil.

Aici intră în joc ideea receptivității mobile.

Un site web cu reacție răspunde la mediul în care este vizualizat. Dacă este un computer desktop, site-ul este redat într-un anumit mod. Dacă este un telefon mobil, se redă într-un alt mod.

Iată o explicație mai bună: Ce este Heck-ul web design sensibil?

Deci, lucrul de făcut acum ar fi să verificați și să vă asigurați că site-ul dvs. web funcționează pe dispozitive mobile. Utilizați propriile dispozitive pentru a verifica acest lucru, dar, de asemenea, încercați testul mobil Google sau treceți pe un instrument precum Testerul de proiectare receptiv.

Dacă există probleme, trebuie să le rezolvați.

Câteva soluții:

  • Responsive Web Design – modul de realizare
  • Cum să răspundeți site-ului în aproximativ 15 minute

CAPITOLUL 8: Aducând totul împreună

Știi elementele de bază, acum este rândul tău

Stai, suntem aproape acolo!

Acesta este ultimul capitol din călătoria noastră destul de lungă.

În acest moment, ar trebui să aveți primul site web construit … Fie cu WordPress, HTML / CSS construit manual, un constructor de site-uri sau orice alte instrumente selectate pentru job.

Pe scurt, felicitari! Dar mai sunt câteva lucruri care merită făcute:

  • Verificați dublu lucrurile pe care le-am discutat în capitolele 1 și 2. Asigurați-vă că obiectivele funcționează într-adevăr pentru utilizatorul final și că site-ul web nu este confuz.
  • Validați structura codului dvs. prin serviciul de validare a marcajului W3C.
  • Verificați dacă nu există probleme de securitate cu site-ul. Utilizați scanerul de Sucuri pentru asta.
  • Obțineți feedback de la comunitate. Verificați ce cred alți oameni despre munca voastră. Forumurile de la Sitepoint pot fi bune pentru asta.

Dacă aceasta este prima dvs. citire a acestei resurse, vă recomandăm cu adevărat să reveniți la ea de câteva ori și să o tratați ca un fișier de referință pentru educația dvs. ulterioară.

Așa cum am spus la început, nu ezitați să utilizați TOC și navigați de la capitol la capitol și resurse la resurse, după cum considerați de cuviință.

În cele din urmă, suntem curioși … care este cea mai mare provocare a dvs. când vine vorba de construirea site-urilor web, de dezvoltare web sau de design? Vă rugăm să împărtășiți comentariile sau prin Twitter. Suntem cu toții urechi!

Vă mulțumim pentru citit, sunteți grozav!

  • Total116
  • Facebook116
  • Twitter0
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map