Uprkos popularnom verovanju, centralno mesto u procesu dizajn i razvoj web stranica ne uzima uvijek fazu kodiranja. Tehnologije koje nam padaju na pamet, kao što su HTML, CSS i JavaScript, zaista stvaraju sliku Weba na koju smo navikli i određuju način na koji komuniciramo sa informacijama. Ono što obično prođe nezapaženo, ali je u isto vrijeme možda i najvažniji dio procesa razvoja, jesu faze prethodnog prikupljanja informacija, pažljivog planiranja i podrške nakon pokretanja stranice. U ovom članku ćemo govoriti o tome kako bi tipičan proces razvoja web stranice mogao izgledati. Moguće je izdvojiti različit broj faza koje čine razvojni proces. Obično je ovaj broj od pet do osam, ali u svakom slučaju ukupna slika ostaje približno ista. Hajde da se fokusiramo na prosek. Dakle, sedam glavnih faza razvoja: 1) Prikupljanje informacija, 2)Planiranje, 3)Dizajn, 4)Kreiranje sadržaja, 5)razvoj, 6)Testiranje, pregled i lansiranje 7)Podrška.

Vremenski okvir razvoja

Kada počnete planirati proces razvoja vaše web stranice, dva glavna problema s kojima se suočavate su vrijeme i cijena izrade. Ove dvije vrijednosti u velikoj mjeri zavise od veličine i složenosti projekta. Da biste dobili opštu predstavu o tome kako će projekat raditi, možete kreirati vremensku liniju razvoja koja navodi glavne zadatke projekta kao i prekretnice od kojih se sastoji. To će vam omogućiti da jednostavno pratite cjelokupnu sliku i uvijek budete sigurni da će zadaci biti obavljeni na vrijeme. U tu svrhu radije koristimo Gantt PRO, zgodan Ganttov grafikon za upravljanje projektima i zadacima na mreži:

Pripremili smo detaljan opis svake faze životnog ciklusa razvoja web stranice, uključujući približno vrijeme potrebno za završetak svake faze. Napravili smo i listu prekretnica kako bismo bili sigurni da ništa ne propustite. Dostupan je na kraju ovog članka i možete ga koristiti kao vodič kada počnete razvijati vlastitu web stranicu.

Životni ciklus razvoja web stranica

Faza 1. Prikupljanje informacija: svrha, glavni ciljevi i ciljna publika

Faza preliminarnog istraživanja i prikupljanja informacija određuje kako će se dalje odvijati sve naredne faze razvoja. Najvažnije u ovoj fazi je da steknete jasnu i potpunu sliku koja će biti svrha vašeg budućeg sajta, koje ciljeve želite da postignete sa njim, kao i koju ciljnu publiku želite da privučete na njega. Ovakva vrsta upitnika za web razvoj omogućit će vam da odredite najbolju strategiju za daljnji razvoj projekta. Novinski portali se razlikuju od zabavnih stranica, a stranice za tinejdžere se razlikuju od onih za odrasle. Različite stranice posjetiteljima pružaju različite funkcionalnosti, što znači različite tehnologije treba koristiti na ovaj ili onaj način. Detaljan plan zasnovan na podacima prikupljenim u ovoj fazi može vas spriječiti da trošite dodatne resurse na rješavanje nepredviđenih poteškoća, kao što je promjena dizajna ili dodavanje funkcionalnosti koje nisu prvobitno bile predviđene.

Približno vrijeme: 1 do 2 sedmice

Faza 2. Planiranje: kreiranje mape i izgleda

U ovoj fazi razvoja, korisnik već može dobiti predstavu o tome kakva će biti buduća stranica. Na osnovu informacija prikupljenih u prethodnoj fazi, a Mapa sajta(mapa sajta). Tako, na primjer, XB Software sitemap izgleda ovako:

Mapa sajta opisuje odnos između različitih delova vašeg sajta. Ovo pomaže da se shvati koliko će biti zgodno za korištenje. Koristeći mapu stranice, možete odrediti "udaljenost" od glavne stranice do drugih stranica, što pomaže u procjeni koliko će korisniku biti lako doći do informacija koje ga zanimaju. Glavni cilj kreiranja mape sajta je kreiranje proizvoda koji je jednostavan za navigaciju i prilagođen korisniku. Ovo vam omogućava da shvatite unutrašnju strukturu buduće stranice, ali ne opisuje kako će stranica izgledati. Ponekad može biti važno dobiti odobrenje kupca prije nego što počnete s kodiranjem ili dizajnom. U ovom slučaju, stvara raspored(žičani okvir ili maketa) . Izgled je vizuelni prikaz budućeg interfejsa sajta. Ali, za razliku od, na primjer, šablona, ​​o kojem ćemo dalje govoriti, on ne sadrži elemente dizajna kao što su boja, logotipi itd. On samo opisuje koji će elementi biti postavljeni na stranicu i kako će biti pozicionirani. Izgled je svojevrsna skica budućeg sajta. Možete koristiti jednu od dostupnih online usluga izgleda. Obično koristimo Moqups.

Također u ovoj fazi vrijedi odlučiti koji će se tehnološki stog (programski jezik, okviri, CMS) koristiti.

Približno vrijeme: 2 do 6 sedmica

Faza 3. Dizajn: šablon stranice, pregled i odobrenje

U ovom trenutku, web stranica se još više približava svom konačnom obliku. Sav vizuelni sadržaj kao što su slike, fotografije i video zapisi kreiraju se upravo sada. I opet, sve informacije koje su prikupljene u prvoj fazi projekta izuzetno su važne u ovom koraku. Prilikom izrade dizajna prije svega treba uzeti u obzir interese kupca, kao i ciljnu publiku. Dizajner u ovoj fazi stvara uzorak stranice (izgled stranice) . Glavna svrha predloška je vizualizacija strukture stranice, njenog sadržaja, kao i prikaz glavne funkcionalnosti. Ovaj put, za razliku od izgleda, korišteni su elementi dizajna. Šablon sadrži boje, logotipe i slike. Omogućuje procjenu kako će konačni rezultat izgledati kao gotova stranica. Nakon kreiranja, šablon se može poslati kupcu. Nakon pregleda od strane kupca o obavljenom poslu, šalje povratnu informaciju. Ako on nije zadovoljan bilo kojim aspektom dizajna, morate izmijeniti postojeći predložak i poslati ga nazad kupcu. Ovaj ciklus se ponavlja sve dok kupac ne bude u potpunosti zadovoljan rezultatom.

Približno vrijeme: 4 do 12 sedmica

Faza 4. Kreiranje sadržaja

Proces kreiranja sadržaja obično teče paralelno sa drugim fazama razvoja i njegovu ulogu ne treba potcenjivati. U ovom koraku morate opisati suštinu onoga što želite prenijeti publici vaše web stranice, kao i dodati CTA (poziv na akciju). Ova faza također uključuje kreiranje atraktivnih i privlačnih naslova, pisanje i uređivanje teksta, sastavljanje postojećih tekstova itd. Sve to zahtijeva dodatno vrijeme i trud. Kupac u pravilu daje sadržaj koji je spreman za postavljanje na stranicu. Važno je da sav sadržaj bude pripremljen prije ili tokom faze razvoja.

Približno vrijeme: 5 do 15 sedmica

Faza 5. Izgled i razvoj

Sada konačno možete ići direktno na izgled stranice. U ovoj fazi se koriste svi ranije razvijeni grafički elementi. Obično se prvo kreira početna stranica, a zatim joj se dodaju druge stranice u skladu sa hijerarhijom razvijenom tokom faze kreiranja mape sajta. Takođe u ovoj fazi je instaliran CMS. Svi statični elementi web stranice, koji su prethodno dizajnirani prilikom izrade šablona, ​​pretvaraju se u prave dinamičke interaktivne elemente web stranice. Važan zadatak je sprovođenje SEO optimizacije (Search Engine Optimization), a to je optimizacija elemenata web stranice (naslova, opisa, ključnih reči) u cilju podizanja pozicije sajta u rezultatima pretrage. tražilice. Valjanost koda je u ovom slučaju izuzetno važna.

Približno vrijeme: 6 do 15 sedmica

Faza 6. Testiranje i lansiranje

Testiranje je vjerovatno najrutinskiji dio razvoja. Svaki link mora biti testiran, svaki obrazac i svaka skripta moraju biti testirani. Provjera pravopisa treba provjeriti tekst kako bi se utvrdile moguće greške u kucanju i greške. Valjatori koda se koriste kako bi se osiguralo da je kod generiran u prethodnom koraku u potpunosti usklađen sa modernim web standardima. Ovo može biti izuzetno važno ako je, na primjer, kompatibilnost među pretraživačima kritična za vas. Nakon što provjerite i ponovo provjerite svoju web lokaciju, ona se može učitati na server. Obično se za to koristi FTP klijent. Nakon postavljanja sajta na server, potrebno je izvršiti još jedan test kako bi se uverili da nije došlo do neočekivanih grešaka prilikom upload-a i da su svi fajlovi sigurni i zdravi.

Približno vrijeme: 2 do 4 sedmice

Faza 7. Podrška: povratne informacije korisnika i redovna ažuriranja

Važno je shvatiti da je web stranica više usluga nego proizvod. Nije dovoljno to jednostavno „isporučiti“ potrošaču. Također je važno biti siguran da sve funkcionira kako je planirano i da su korisnici zadovoljni konačnim proizvodom. Također morate biti spremni da brzo izvršite promjene ako je potrebno. Sistem povratnih informacija će vam omogućiti da identifikujete probleme sa kojima se susreću posetioci sajta. Najkritičniji zadatak u ovakvim slučajevima bit će rješavanje nastalih problema što je brže moguće. U suprotnom, vaši korisnici bi radije odabrali drugi resurs nego da podnesu neugodnost. Takođe, ne zaboravite na redovno ažuriranje CMS-a. Redovna ažuriranja će vas spasiti od grešaka i sigurnosnih problema.

Kontinuirani proces

Bonus. Kontrolna lista glavnih faza razvoja

Kako biste bili sigurni da niste ništa propustili i da sve planirane radove završite na vrijeme, uzmite za sebe ovu kontrolnu listu:

Zaključak

Mora se stalno imati na umu da proces razvoja web stranice ne počinje pisanjem koda i ne završava se pokretanjem stranice. Pripremna faza utiče na sve naredne faze, određujući koliko će proces rada na projektu biti produktivan. Temeljno i dubinsko proučavanje aspekata kao što su spol, starost i interesi krajnjih korisnika može biti odlučujuća. Podrška sajtu nakon što je pokrenuta je takođe izuzetno važna. Morate biti dovoljno okretni da biste mogli brzo popraviti greške i riješiti probleme korisnika. Razumijevanje da ne postoje faze razvoja web stranice koje bi se mogle smatrati nevažnim ili opcionim pomoći će vam da izbjegnete nepotrebnu gnjavažu i dat će vam povjerenje da projekt napreduje kako je predviđeno i da imate potpunu kontrolu nad procesom razvoja.

Sljedeće dvije kartice mijenjaju sadržaj ispod.

Dakle, pri razvoju internetskog resursa potrebno je raditi u strogom redoslijedu.

Pogledajmo glavne korake:

1. faza - dizajn
2. faza - dizajn
3. faza - programiranje i otklanjanje grešaka

Dizajn

Ovo je važan korak u kreiranju detaljne dokumentacije za dalji razvoj internet resursa. Dokumentacija uključuje kako fundamentalna, konceptualna pitanja, kao što je razvoj niza usluga, njihova tehnička i funkcionalna implementacija, tako i pitanja koja se odnose na upotrebljivost (stepen pogodnosti i udobnost korišćenja interfejsa sa stanovišta korisnika), sa administrativni panel (upravljanje stranicama za sve vrste korisnika) i mnogo, mnogo drugih važnih aspekata za ispravan rad internetskog resursa.

Izrada dobre dokumentacije za internetski resurs je neophodna kao i priprema dokumentacije prilikom izgradnje kuće ili proizvodnje automobila.

Dizajn

Dizajn - ovo je najkreativniji dio posla! Prilikom razvoja dizajna, vrlo je teško održati ravnotežu između estetike i funkcionalnosti. Zbog toga se radi dizajn budućeg resursa. Kada je sva funkcionalnost sajta jasna, kada je jasno koji meniji, sa kojim stavkama se nalaze na određenim stranicama, kada je unapred jasno koje forme i koje veličine treba da budu na stranicama, kada se zna šta korisnik treba vidi i kako ce to iskoristiti ... . Tada potraga za estetskim rješenjem postaje što kreativnija, a istovremeno ostaje funkcionalna.

Dizajn - Ne radi se samo o crtanju lijepih slika! Ovo - pogodnost korištenja bilo čega, bilo da je čajnik, automobil ili web stranica! A pogodnost se ne može roditi samo iz umjetničkog ukusa. Prije svega, ovo - dovođenje konstrukcije do estetike.

Programiranje

Sa programiranjem je sve mnogo lakše sa stanovišta kupca, ali mnogo teže sa stanovišta izvođača! Programiranje se ne može vidjeti niti dodirnuti! Plod rada programera je sajt koji je spreman za upotrebu i to se po pravilu čini samorazumljivim krajem posla.

Ali u stvari, često, za implementaciju funkcionalnosti neke naizgled jednostavne funkcije, može biti potrebno više vremena od ostatka posla.

Korisnik vidi stranicu samo izvana i čini mu se da je ovo vrlo jednostavna stranica. Dok je vanjski dio lokacije samo vrh ledenog brega. Najteži dio je unutar stranice. Ovaj dio je vidljiv samo administratorima Internet resursa. Ovaj dio se zove administrativni panel. Ona je podvodni dio.

Za promjenu stavki menija, polja u obrascima na mreži, promjenu sadržaja stranice, postavljanje ograničenja korisničkih prava, ako su dostupna različite vrste korisnicima i još mnogo toga potrebna je praktična, praktična administrativna ploča!

Razvili smo potpuno jedinstven administrativni panel koji vam omogućava da ga prilagodite za bilo koju funkciju na zahtjev kupca!

Osnovna djelatnost naše kompanije je razvoj web stranice. Izrada web stranice je naporan proces, koji obično uključuje nekoliko stručnjaka. Da bi projekat bio uspješan, barem:

• koji su zadaci dodijeljeni stranici,
• za koje posjetitelje je web stranica namijenjena,
• koje informacije treba da im se prenesu,
• koju funkcionalnost treba staviti u svoju web stranicu, tj. kako će funkcionisati;
• Ko i kako će podržati normalno funkcionisanje stranice, ažuriranje informacija, kako se planira širenje?

Proces izrade web stranice može se podijeliti u sljedeće korake:

1. analiza zadataka koje sajt treba da reši, određivanje ciljne publike,
2. registraciju naziva domene stranice (na primjer, www.site),
3. planiranje strukture buduće lokacije (sekcije, navigacija, itd.),
4. razvoj dizajna web stranice (u pravilu od 1 do 3 skice, ovisno o budžetu projekta),
5. izgled razvijenog izgleda,
6. integraciju izgleda u Joomla sistem za upravljanje sadržajem, instalaciju softverskih komponenti i modula odgovornih za proširenu funkcionalnost stranice,
7. popunjavanje sajta tekstovima i slikama, fajlovima itd. (punjenje sadržajem).
8. testiranje stranice na usklađenost sa projektnim zadatkom i stavljanje gotovog projekta na internet,
9. hosting web stranica,
10. optimizacija (promocija) sajta za pretraživače

Pogledajmo svaki od ovih koraka detaljnije.

1. Analiza

U ovoj fazi postaje jasno osnove sajta koji se kreira. Šta treba da uradi sajt? Koji su njeni glavni zadaci? Šta želite postići s tim? Šta ovim sajtom želite da poručite svojim posetiocima? Ova i brojna druga pitanja pomažu u određivanju kakva će stranica biti.

2. Registracija imena domena

Ime stranice treba biti jednostavno, zvučno i nezaboravno. U ovom slučaju, korisnici će bez oklijevanja i dugog pretraživanja posjetiti vašu stranicu i o tome obavijestiti svoje prijatelje. Pomoći ćemo vam da odaberete ime za stranicu i registrujete je u skladu sa pravilima usvojenim na Internetu. U situacijama kada odgovarajuće ime u jednoj domenskoj zoni zauzima neko, najviše jednostavno rješenje ispostavilo se da je sajt sa istim imenom registrovan, ali na drugom domenu (na primer, ako www.firma.ru nije besplatan, možete da registrujete www.firma.com ili www.firma.net), ali i dalje je poželjno koristiti domenu u RU zoni.

3. Tehničko planiranje

Razvoj tehničkih specifikacija je faza koja se često nezasluženo zanemaruje ( Pogotovo ako ste u stisci s vremenom ili imate ograničen budžet.). Ali odavno je poznato da će svaki sat potrošen na planiranje uštedjeti tri do četiri sata u fazi razvoja. Ovdje vrijedi obratiti posebnu pažnju na to kako bi trebao funkcionirati navigacija (Kako će posjetilac doći na ovu stranicu sa glavne stranice?). Ne zaboravi karakteristike programa (Korisnik je kliknuo na ovo dugme - šta bi se trebalo dogoditi?). Vrlo je važno u ovoj fazi razumjeti kakav će biti vaš sitemap i kako će funkcionirati ova ili ona softverska komponenta. Za bilo koju stranicu koja je teža od stranice vizitkarte, važno je kreirati tehničke specifikacije.

4. Dizajn web stranice

Jedan od najtežih koraka. Prije svega, zato što je većina nas navikla da procjenjuje dizajn odvojeno od samog sajta - sviđala vam se slika ili ne. Ovdje vrijedi zapamtiti ciljeve koje ste postavili za stranicu (Cilj je impresionirati sve prelijepom slikom?). Da li dizajn govori šta vaša kompanija nudi? Da li odgovara vašem korporativnom stilu? Imate li korporativni stil?). Da li vas to jasno razlikuje od vaših konkurenata? Hoće li dizajn ometati efikasnu promociju stranice u budućnosti? A ovo su samo neka od pitanja koja morate sebi postaviti. Dizajn mora nužno uzeti u obzir specifičnosti grupe korisnika kojoj je namijenjen, ali u isto vrijeme ne bi trebao biti neprijateljski raspoložen prema ostalima (npr. i muškarci posjećuju "ženske" stranice, a trebali bi i voljeti biti na stranici)

5. Izgled

Layout je prijevod dizajna koji je do sada postojao u obliku slike u HTML kod. Ovdje postoje neke posebnosti. Dobro dizajnirana stranica će raditi jednako dobro u svim glavnim web preglednicima i na najčešćim rezolucijama ( Ili si možete priuštiti gubitak kupaca?) i preuzimanje neće natjerati kupce da odu na još jednu šoljicu kafe.

6. Sistem za upravljanje sadržajem (CMS)

Ozbiljan zadatak je izbor softverskog "motora" koji to dozvoljava ažurirati informacije na stranici bez nepotrebnih poteškoća. (Ako zadatak ažuriranja možete povjeriti svojoj sekretarici, a ona to može obaviti bez pomoći vašeg programera, onda je sve u redu.). Osim toga, ponekad morate promijeniti strukturu stranice - na primjer, premjestiti odjeljak ili kreirati novi. Ni ovaj proces ne bi trebao biti težak. Praćenje otvorenih standarda je takođe veoma važno – nemojte se „vezivati“ za tuđu zatvorenu tehnologiju.

7. Sadržaj stranice

Kada koristite CMS proces punjenja postaje prilično jednostavan. Naravno, potrebno je još neko vrijeme. Jedina stvar na koju vrijedi obratiti pažnju je spremnost samih tekstova. Vrlo često je upravo ova faza uzrok najznačajnijih kašnjenja, pa je o tome najbolje voditi računa unaprijed. Obično se sajt može pokrenuti na vreme ako i naručilac i izvođač rade paralelne kurseve sajta - programeri rade dizajn, izgled i softverski deo, a kupac bira sadržaj, priprema slike za sajt.

8. Testiranje i postavljanje

Iako je testiranje u svakoj fazi implementacije projekta, potrebno je završno testiranje. Šta treba provjeriti? Evo nekih od najvažnijih tačaka. Da li stranica radi u svim modernim pretraživačima? Da li su svi potrebni materijali dostupni? Da li sve softverske komponente rade glatko i jasno?

A sada, kada je testiranje završeno, dolazi trenutak postavljanja sajta.

9. Hosting

Hosting je usluga obezbeđivanja prostora na disku, fizičkog postavljanja fajlova sajta na računar koji je stalno na mreži. Sajt je skup fajlova koji uvek moraju biti dostupni posetiocima, inače potencijalni kupci i partneri jednostavno neće moći da vide tražene stranice i neće dobiti informacije od interesa. Drugim riječima, host server (računar na kojem se nalazi vaša stranica) mora raditi bez prekida uprkos nestancima struje, požarima i poplavama. Sigurnosne kopije stranice treba raditi redovno i često kako biste, u slučaju hitnog kvara ili hakovanja stranice, mogli brzo vratiti resurs u radni kapacitet.

10. Optimizacija pretraživača

Optimizacija za pretraživače stranica - osnova promocije i promocije stranice na mreži. Uz pomoć promocije stranice možete privući značajan broj ciljanih posjetitelja na web resurs, a njihova “cijena po kliku” će biti vrlo mala. Optimizacija za pretraživače (promocija web stranica) je strateško ulaganje u poslovanje. Čak i super lijepa i jednostavna stranica neće moći privući dužnu pažnju ako niko ne zna za nju.

Suprotno uvriježenom mišljenju, nakon što se stranica postavi, rad s njom ne prestaje. Ako je vaš cilj pretvoriti svoju web stranicu u marketinški alat, pripremite se za sljedeće:

• objaviti novi sadržaj
• promovirati web stranicu na internetu
• anketirati posjetitelje i dodati novu funkcionalnost koja im je potrebna

Nije uvijek lako, ali se isplati – web stranica je jedan od najefikasnijih alata u današnjem poslovanju.

Zahvaljujući modularnoj mreži, blokovi sadržaja i elementi bit će smješteni na određenoj udaljenosti jedan od drugog, imat će probavljivu širinu, što će u budućnosti biti vizualno ugodno korisniku i neće mu uzrokovati neugodnosti u percepciji site.

Modularna mreža je, zapravo, svojevrsna vizualna apstrakcija, vizualna podjela stranice na kolone jednake širine s jednakim uvlakama između njih. Ovaj model možete vizualizirati pomoću vodiča ili zasebnog sloja na kojem će ovi stupci biti prikazani. To je upravo rješenje koje ćete pronaći u predlošcima mreže 960gs.

O osnovama web dizajna i izrade prototipa ova knjiga može biti dobra pomoć: Jason Beard: Web dizajn. Vodič za programere.

Razvoj

Dakle, proces dizajniranja izgleda stranice glatko se uliva u proces „revitalizacije“ urađen u prethodnim fazama. Prije nego što odmah počnete pisati HTML, CSS i JS, vrijedi popričati malo o uređivačima koda i strukturi projekta.

Code Editors

Postoje tri najpopularnija uređivača koda danas:

SMACSS

Postoji i pristup SMACSS(ovaj akronim je skraćenica od Scalable and Modular Architecture for CSS - Scalable and Modular Architecture for CSS), koji koncept klasa i markupa dijeli na nekoliko nivoa: baza, raspored, modul, stanje, tema.

• Sve što je direktno povezano sa html tagovima odnosiće se na osnovni nivo.
• Mi ćemo se odnositi na nivo izgleda sve što se tiče glavnih komponenti stranice: sekcija.
• Na nivou modula ćemo se odnositi na sve što se odnosi na elemente stranice za višekratnu upotrebu: banere, navigaciju, liste, blokove informacija itd.
• Razina stanja opisuje kako će moduli i sekcije izgledati u jednom ili drugom stanju: prikazani ili ne prikazani, komprimirani ili prošireni, aktivni ili neaktivni, itd.
• Nivo teme je donekle sličan nivou statusa i odražava kako bi moduli ili sekcije mogli izgledati.

Ovaj pristup koristi sljedeće konvencije imenovanja. Nivoi se definiraju korištenjem prefiksa i odgovarajuće slovne oznake:

• Izgled: .l- ili .layout-
• Budući da moduli čine najveći dio projekta, njihovo imenovanje korištenjem prefiksa module je suvišno. Stoga se nazivi za njih koriste onakvi kakvi jesu, na primjer: .primjer(}, .afisha() itd.
• Države imaju prefiks .is-, Na primjer .is-hidden()
• Nivo teme je nazvan kao moduli.

Sa ovim pristupom, često je zgodno držati svaki nivo apstrakcije i njegove klase u zasebnoj datoteci.

Informacije o metodologiji i online knjiga: https://smacss.com/
Ruski prevod knjige na SMACSS-u: https://github.com/andrew--r/smacss

Važno je zapamtiti da je svaka konvencija imenovanja dizajnirana da stvori određeni nivo apstrakcije, zahvaljujući kojoj će biti zgodno raditi s projektom i neće biti preopterećen suvišnim kodom i drugim artefaktima.

Mali kurs osnove HTML-a:

Pisanje CSS-a

Pravila imenovanja klasa dovode nas do sljedećeg koraka. Kada je html struktura projekta napisana, klase su definisane, možete nastaviti sa pisanjem CSS stilova i rezanjem izgleda.

Vrijedi spomenuti 2 CSS dodatka: normalize.css i reset.css.

reset.css

U početku, reset.css koji je napisao Eric Meyer bio je široko korišten u projektima. Svrha ovog skupa pravila je da resetuje podrazumevane stilove pretraživača za prikaz elemenata za označavanje. Na ovaj način, kada koristimo reset.css, ne moramo da prepisujemo stilove pretraživača, mi u suštini radimo sa "praznom tablom" i možemo se fokusirati na pisanje sopstvenih stilova od nule.

Vraćajući se na Mobile First, vrijedi reći da kada radite u ovom konceptu, stilovi pisanja trebaju početi s mobilna verzija, a zatim koristite medijske upite da dodate pravila koja će raditi na drugim rezolucijama. Često, kada proširujete pravila sa mobilnog na desktop, morate napisati mnogo manje koda nego kada radite obrnuto: sa desktopa na mobilni.

Opet, vraćajući se na temu Mobile First, nemoguće je ne spomenuti 2 koncepta koji su u korelaciji sa ovom tehnikom. Progresivno poboljšanje i graciozna degradacija, što se prevodi kao progresivno poboljšanje i postepeno pogoršanje. Ovi principi opisuju 2 različita pristupa razvoju: u prvom slučaju razvijamo našu stranicu, pišemo skripte uzimajući u obzir stare pretraživače i sisteme ili određujemo ponašanje kada se skripte ne mogu pokrenuti, a zatim postepeno poboljšavamo skriptu uvođenjem modernih funkcija i metode, tako da dobijamo sajt koji će podjednako dobro raditi u starim i novim pretraživačima i okruženjima (isto važi i za css).

Kod Graceful Degradation, pristup je suprotan – mi dizajniramo za moderni pretraživači i tek tada počinjemo sa poboljšanjima i promjenama, uzimajući u obzir stare verzije.

Pristup Mobile First je donekle sličan progresivnom poboljšanju.

Pregled koda

Nakon što smo napisali html, css i js za našu stranicu, moramo provjeriti da li je sve urađeno kako treba. Da biste to učinili, možete koristiti online alate:

Komandna linija

Rad na komandnoj liniji također može ubrzati neke faze projekta, kao što je kreiranje mapa i datoteka. Pokretanjem konzole u direktoriju projekta i upisivanjem samo jednog reda u nju:

mkdir projekt && cd projekt && mkdir css && touch css/styles.css && mkdir slike && mkdir js && touch js/app.js && touch index.html
Nakon što pritisnemo enter, dobićemo fasciklu projekta, koja će sadržati css, slike, js fascikle, datoteke styles.css i app.js u css i js fasciklama, respektivno, i datoteku index.html u korenu projekat. Tako smo uštedeli vreme na kreiranju foldera, pisanju njegovog imena, kreiranju fajlova, itd. Takođe komandna linija koristi se za rad s drugim alatima za automatizaciju.

Takođe, mnoge usluge poput autoprefixer(automatsko umetanje prefiksa pretraživača), jshint(provjera valjanosti JS koda) mogu se instalirati kao dodaci treće strane u uređivač teksta (Sumblime Text, Atom, Brackets) i inicijalizirati kada se pritisne određena kombinacija tipki.

Bootstrap, temelj, Material Design Lite

Ovi okviri su već spomenuti u odjeljku dizajna. Ali vrijedi ih se ponovno sjetiti, jer oni u određenoj mjeri pomažu u automatizaciji procesa označavanja web stranice i rada s njom.

Prilikom uključivanja okvirnih datoteka u projekat, možemo koristiti klase za označavanje i isječke definirane u njima, koji će raditi prema već opisanim pravilima i imati izgled(na primjer, dugmad, polja za unos, tabele, itd.). Na taj način štedimo vrijeme, na primjer, na opisivanju lokacije blokova dizajna, njihove veličine u zavisnosti od rezolucije, izgleda polja obrasca, dugmadi i njihovog stanja.

Sve mogućnosti i primjere možete pronaći na odgovarajućim stranicama:

• Bootstrap: http://getbootstrap.com/
• Fondacija: http://foundation.zurb.com/
• Material Design Lite: http://www.getmdl.io/

Ovaj opis nije iscrpan i predstavlja samo površan pogled na neke od tehnologija. Ali prije nego što krenete do kraja, koristeći alate za automatizaciju, biblioteke, framework "i gotov kod i tako dalje, još uvijek vrijedi naučiti osnove rada sa html-om, css-om i js-om.

Nadam se da će vam sve opisano biti od koristi u proučavanju teme web dizajna i front-end razvoja.

Tagovi:

• html
• css
• Web dizajn

Dodaj oznake

Javlja se u nekoliko faza. U svakoj fazi učestvuju stručnjaci potrebni za to. A griješi onaj koji kaže da možete napraviti stranicu sa samo jednom osobom. Istina, oko 8-10 ljudi učestvuje u izradi web stranice, to uključuje: projekt menadžera, web dizajnera, layout dizajnera, programera, stručnjaka za promociju i, ako je potrebno, copywritera. Ovo veće angažovanje stručnjaka koristi se u velikim komercijalnim projektima gde se postavljaju veliki ciljevi. Ali da napravi mali jednostavan sajt, verovatno će to moći da uradi svako ko ima želju da uči i nekoliko veština i sposobnosti. Da, i u ovom slučaju je potrebna jasna provedba određenih radnji.

Faze:

1. Dizajn. U fazi dizajna naznačeni su određeni zahtjevi kupca, opisana je ideja web resursa, razmatra se struktura, koji će dijelovi biti. Dalje, nakon svih ovih zahtjeva, dolazi izbor "motora" na koji će stranica biti instalirana. Sve je to opisano u projektnom zadatku. Stoga je ova faza vrlo važna, čiji uspjeh ovisi o budućem vijeku trajanja resursa.
2. Dizajn. Faza uključuje: izmišljanje svih elemenata stranice, kako će stranica izgledati. Dizajn treba da uzme u obzir stil kompanije kupca, njen logo, korporativne boje. Mogu se ponuditi i različite vrste gotovih šablona.
3. Layout. Raspored je rađen prema rasporedu koji su izradili dizajneri i daje mu kompletan izgled, onako kako ga vide korisnici Interneta.
4. Programiranje. Ovdje se kreira sva funkcionalnost, šta bi trebalo raditi kako i zašto. U prilogu su određeni moduli: povratna informacija, pretraga, linkovi, sve što može olakšati korisnicima da pronađu informacije koje su im potrebne na stranici.
5. Punjenje. Dolazi do popunjavanja sadržaja, umetanja slika. Vrijedno je obratiti posebnu pažnju na sadržaj stranica, jer. ovisi o tome hoće li korisnik pronaći potrebne informacije na vašoj stranici i ostati na njoj, ili zatvoriti i zaboraviti. I ova situacija neće ispraviti prekrasan izgled stranice, njegovu funkcionalnost, prikladnu strukturu.
6. Testiranje. Ovo je završna faza kreiranja sajta. Prije naručivanja svaki projekat mora biti testiran, sve greške u kodu i tekstu stranice moraju biti pronađene i uklonjene.
7. Promocija. Korak je obavezan, ali nije obavezan. Ali kako će korisnik pronaći vašu stranicu od milion drugih na Internetu? Eto čemu služi promocija. Ovo je niz aktivnosti koje će dovesti vaš web resurs na vrh pretraživača.
8. Podrška. Sajt će možda morati da se ažurira u budućnosti. Kreiranje novih stranica, razvoj novih funkcija i tako dalje. Uostalom, bez promjena, stranica može dosaditi korisnicima.