T&R splet blog o spletnih storitvah. Razgaljamo tehnologijo!

Marsikdo si ne predstavlja kako se (osnovna) spletna stran zgradi oz. ustvari. Naštel bom nekaj najbolj pomembnih korakov s strani razvijalca (na kratko). Celotna graditev strani se začne veliko prej in sicer pri pošiljanju ponudbe, začetna dokumentacija, potrditev stranke, pošiljanje vsebine, itd… Predpostavimo torej, da je dokumentacija (željena funkcionalnost) in vsebina že pripravljena oz. defenirana, nato sledi (na grobo):

1. Kreiranje designa
2. Razrez designa, kreiranje HTML(templati) + CSS
3. Kreiranje podatkovnih modelov (kreiranje baze, tabel, polj)
4. Programiranje dodatkov (modul – paketa)
5. Testiranje

Malce bolj podrobna razlaga zgoraj omenjenih korakov:

#1 Kreiranje designa

Smisel priprave predhodne grafične podobe strani je usklajevanje vsebine z naročnikom pred samim začetkom programiranja, torej koncept prezentiranja želenih informacij.

Izdelava grafične podobne spletne strani temelji na dejavnosti podjetja. Le-ta “določa” barve, obliko strani, itd. Recimo prodaja računalniških iger ali pa spletna stran mestne knjižnice ne moreta imeti enakega izgleda. Seveda je za izdelavo “okostja” strani ključnega pomena dobro pripravljeno gradivo in tudi vizija s strani podjetja. Največkrat naletim na težavo, ker podjetje sprva želi imeti enostavno stran, ki služi zgolj kratki predstavitvi podjetja in dejavnosti. Kasneje, ko je stran že na pol izdelana in se dodaja vsebina, pa se apetiti večajo. Seveda se stroški projekta tu začnejo enormno večati…

Na kratko o postopku izdelave osnutka strani.
Sam za izdelavo osnutkov uporabljam grafične programe, v katerih s pomočjo osnovnih likovnih elementov (pravokotnik, krog, črta) in barvami (prelivi, efekti) izdelam grafično podobo, ki jo istočasno kombiniram s postavljanjem vsebin v ta osnutek. Najprej postavim grobo vsebino, ki je nekako standardno postavljena (glava=>logo strani, navigacija, vsebina=> novice, opisi,..; noga=> splošne informacije) in nato še vsebino strani. Vse to skušam čim lepše predstaviti.

#2 Razrez designa, kreiranje HTML(templati) + CSS

Potrditvi grafičnega osnutka s strani naročnika sledi začetek programiranja strani. Najprej podobo “razrežem” na več kosov. Pomeni, da celoto razkosam na več manjših slikc, katere potem pokažem na strani (ozadja, ikone,..). Nato s pomočjo HTML elementov ustvarim polja, v katera vnesem vsebino. Ta polja (DIV) potem oblikujem s pomočjo CSS kode. S CSS kodo definiramo pozicijo polj, barvo, obliko in tip črk itd. Lahko določimo tudi ozadje DIV elementa, s katero simuliramo grafični osnutek. Število slik v veliki meri tudi določa odzivnost strani

#3 Kreiranje podatkovnih modelov

Na kratko lahko rečemo, da zgradimo podatkovno bazo v katero nato pišemo novice, produkte, naložene datoteke oz. beremo iz nje. Seveda uporaba baze ni nujna, vse je odvisno od potrebe spletne strani oz. naročnika le-te. Tukaj nam lahko pri kreiranju pomaga phpMyAdmin aplikacija ali kakšen database builder, nekateri MVC frameworki podpirajo tudi kreiranje tabel iz naših pre-defeniranih modelov.

#4: Programiranje dodatkov

Pod to sekcijo pišemo SQL querije, z uporabo templatov prikazujemo novice, slike, zgradimo galerijo, naredimo CMS, kjer lahko naročnik spletne strani sam spreminja vsebino. Možnosti je tukaj neomejeno. Če gre za manjšo stran, ki sledi okvirjem že narejenih CMS-jev (naprimer manjše, predstavitvene strani), lahko uporabimo pakete kot so E107, Joomla. Lahko pa imamo tudi zelo kompleksno stran pri kateri moramo začeti čisto na začetku, naj bo to zaradi funkcionalne kompleksnosti, optimizacije ali kaj tretjega. Če rabimo malce več svobode v primerjavi že narejenimi CMS-ji, lahko uporabimo MVC framework, ki nam kreiranje strani olajša, naprimer cakePHP. Več o tem ali uporabiti PHP framwork, CMS ali zgraditi svojega.

#5 Testiranje

Zaradi različnih brskalnikov, ki standarde oz. delovanje stvari intepretirajo na vsak svoj način, testiranje vzame veliko časa, če moramo zagotoviti podporo vsem standardnim brskalnikom, naprimer: IE 6.0, IE 7.0, Opera, Firefox, Safari. V primeru, da stranka želi še kakšno dodatno spremembo, ko je celotna stran že končana, kar lahko v primeru, da smo omejeni s funkcionalnostjo ali nismo pripravili kode, ki se lahko razširja, zelo podaljša razvojni cikel.

Seveda se tukaj zadeva ne končna, za novo zgrajeno spletno stran je potrebno registrirati tudi domeno, izbrati gostovanje (hosting), izdelati promocijske letake in spletno stran tudi oglaševati (naprimer z vpisom v najboljše slovenske imenike ter iskalnike ali nakup oglasov pri naprimer ToboAds). Lahko se zgodi, da je potrebno narediti optimizacijo za spletne iskalnike (če ta korak ni bil že vključen v začetni razvojni cikel), zgraditi dodatne module za kreiranje statistik in izvajanje analiz, ponovno je možnosti neomejeno.

Dodatne informacije:

• Steps to Create Your Website
• nekdo, ki dela HTML iz designa? Spletni kaj?
• Create a Website
• 2 splošna načina za kreiranje spletne strani
• Zanimiv vodič za izdelavo spletne strani
• Model za ocenjevanje kakovosti spletnih strani (dipl. nal)
• Uporabnost spletnih strani
• Mnenjalnik [vodič] Postavitev dinamičnega portala

Prispevek o postopku izdelave spletne strani sva napisala Toni & Rok, a sva zaradi preglednosti pisala v ednini. Pri nama se delo razdeli glede na čas, ki ga imava ter tip dela. Ponavadi je Toni bolj usermerjen v design (Kreiranje designa, CSS, HTML), Rok pa v razvijanje modulov (PHP, Javascript), a ne vedno. Upam, da bo laiku sedaj izdelava spletne strani in postopki za le-to bolj jasni.

Podobni članki:

1. Novi Developer Tool – prijaznejši do razvijalcev spletnih strani?
2. Optimizacija spletne strani za iskalnike – iskalniku prijazna spletna stran – SEO
3. Parse podatkov s spletne strani – php DomDocument
4. Optimizacija spletne strani – zastrupljanje spleta?
5. Vpis nove internetne (spletne) strani
6. Omejitev dostopa do spletne strani preko apache .htaccess in .htpasswd datoteke
7. Javascript – avtomatsko osveževanje strani – refresh page – reload page
8. Značilnosti spletne trgovine Magento
9. Uporabni HTML meta tagi – PHP header
10. Stalno osveževanje del spletne vsebine – ajax jquery.get – javascript setinterval

Roky || Friday, March 28th, 2008 ob 8:06 am || Splet, Splet (Javascript, Ajax), Splet (PHP & MySQL), Splet (SEO), Splet (XHTML, CSS) || RSS 2.0 | Dodaj komentar || Trackback