Skaitom toliau…

Taigi kuom skiriasi server-side bei client-side programavimo kalbos. Iš esmės tėra tik vienas skirtumas (nekalbant apie jų sintaksės skirtumus) – programų (parašytų šiomis kalbomis) vykdymo aplinka. Vienos jų vykdomos serveryje (server-side), kitos kliento kompiuteryje (client-side). Paprasta :)

Panagrinėsime minėtas dvi programavimo kalbas atskirai.

php – server-side programavimo kalba. Įdiegiama kaip web serverio programos plėtinys, taip įgalindama web serverį „suprasti“ php skriptą.

php skriptą pradžiai galite įsivaizduoti kaip veiksmų seką, kuri nurodo kokį xhtml kodą perduoti klientui vienu ar kitu atveju (pvz jei klientas jungiasi iš Lietuvos tai parodom lietuvišką tekstą, o jei iš Lenkijos, tai pasiunčiam po velnių ar pan. :) ). Veikia php tokiu principu: klientas (jūsų naršyklė) kreipiasi į web serverį su užklausa parodytį tam tikrą puslapį. Web serveris perskaito pageidaujamo puslapio failus, jei ten randa php kodo – jį apdoroja (įvykdo ten aprašytas komandas) ir klientui nusiunčia sugeneruotą xhtml failą.

javascript – tai programavimo kalba kurią supranta visos šiuolaikinės naršyklės. Kitaip tariant – javascript kodą vykdo jūsų naršyklė (kai php kodą vykdo web serveris). Dažniausiai naudojami xhtml žymų bei puslapio atvaizdavimo keitimui (apie dar vieną populiarių javascript panaudojimo technologiją – AJAX – pakalbėsim vėliau). Veikia tokiu principu: klientas kreipiasi į web serverį, web serveris įvykdo server-side programos kodą, grąžina klientui xhtml failą beigi su juo susietą (ar jame įrašytą) javascript failą (kodą). To pasekoje naršyklė pas save turi ir xhtml ir javascript kodą, taigi vartotojui (jums) atlikus kokį nors veiksmą puslapyje, kuris susietas su javascript kodu, PATI naršyklė įvykdo javascript kodą ir pateikia rezultatą to veiksmo (ar tai būtų puslapio fono pakeitimas ar įvesto el. pašto validumo patikrinimas).

Tiek šiam kartui ;)

Taigi…

Interneto veikimo principas pagrįstas kliento-serverio technologija. Klientas – jūs (o jei tiksliau – jūsų kompiuteris). Serveris – kone viskas kas yra internete (išskyrus, aišku, kitus klientus). Serveriai būna įvairiausi – web serveriai, žaidimų serveriai, ftp serveriai, duomenų bazių serveriai, el-pašto serveriai ir t.t. ir pan. Žiūrint giliau – serveris tai kompiuteris kuriame paleista programa atsakinga pvz už puslapio pateikimą (web serveris) ar už failų siuntimą (ftp serveris). Turbūt jau žinote, kad viename kompiuteryje gali veikti daug programų, taigi vienas kompiuteris gali būti ir web serveris, ir ftp serveris, ir žaidimų serveris vienu metu. Viskas priklauso nuo kompiuterio galingumo. :) Mes pabandysime suprasti kaip saveikauja web serveris ir klientas.

Kaip jau minėjau – jūsų kompiuteris tai klientas (o jei dar giliau lįsti – tai klientas yra jūsų interneto naršyklė). Jūs įsijungiate naršyklę, surenkate adresą tada naršyklė interneto kanalu kreipiasi į DNS serverį. DNS serveriuose saugomi visi interneto adresai ir su jais susieti IP adresai (IP adresas tai unikalus kiekvieno kompiuterio internete adresas sudarytas iš skaičių). DNS serveris praneša naršyklei, kad jūsų norimas internetinis puslapis (pvz. www.warhammer.lt ) yra serveryje kurio IP adresas toks ir toks (paminėto pavyzdžio atveju tai būtų 79.98.24.208). Tada jūsų naršyklė kreipiasi į kompiuterį (serverį) kurio IP adresą jau žino ir jam sako „Man reikia puslapio kurio adresas www.warhammer.lt“, o tame kompiuteryje esanti web serverio programa priima užklausimą ir grąžiną atsakymą pvz „Tokio puslapio pas mus nėra“ arba „Puslapis pas mus yra, vat prašau imkite jį“. Jei tokio puslapio ten nėra tai naršyklė atvaizduos klaidos pranėšimą, o jei puslapis yra tai jį parsisiunčia ir parodo jum.

Tęsinys sekančiame straipsnyje.

Taigi pradedam.

Internetinis puslapis gali būti sukurtas naudojant vien XHTML bei CSS. Tai du pamatiniai akmenys ant kurių turėtų laikytis kiekvienas internetinis puslapis. Teoriškai.

Praktiškai dažnai dar pasitaiko visokių iškrypusių puslapių, kur dizainui naudojamos lentelės ir praeito amžiaus žymenys (aka. „<b>“, „<font>“, „<u>“ ir t.t.). Mes esam šiuolaikiški žmonės, o ir norim, kad mūsų puslapį ir ateities naršyklės atvaizduotų teisingai. Todėl rašysim tvarkingai. Kitaip tariant – XHTML ir CSS bus mūsų puslapių pamatiniai akmenys.

Tačiau, kad akmenys stovetų jiem reikia cemento (uhh palyginimai pas mane :D ). Cementas web programavimo atveju yra vienas (ar keli) iš šitų: javascript, php, perl, python, ruby, java ir t.t. ir pan. Mes mokysimės (ar bent jau bandysim) php bei javascript (na be xhtml ir css).

O dabar šiek tiek terminų:

XHTML – naudojamas TIK puslapio struktūros aprašymui. Na kad jau pradėjau statybinių palyginimų tema tai ir čia toks bus – jei mūsų puslapis būtų gražus namas, tai XHTML būtų jo pamatai beigi karkasas.

CSS – naudojamas TIK puslapio atvaizdavimo aprašymui. Namo atveju tai būtų mūsų sienų spalvos, langų dydžiai, stogo pasvirimo kampas. T.y. taip kaip namas atrodo. Norint iš esmės pakeisti namo išvaizda kartais reikia keisti karkasą (kitaip tariant – norint kardinaliai pakeisti puslapio išvaizda su CSS kartais gali prireikti pakeisti ir XHTML)

JavaScript, php - naudojami puslapio veiksmų aprašymui. Vėlgi namo palyginimo tema -  tai būtų aprašymas į kurią pusę darosi durys, kas įvyks paspaudus tą ar aną jungiklį name. Kitaip tariant – puslapio elgsena vartotojui atlikus kokį nors veiksmą. Pvz.: paspaudus mygtuką pasikeičia puslapio fono spalva (arba persidažo namo sienos – ehh gerai būtų :) ). Javascripti ir php – tai jau programavimo kalbos (arba kitaip – skriptų rašymo kalbos). Internetinių puslapių kūrime jos (programavimo kalbos) skirstomos į server-side beigi client-side.

Server-side programavimo kalbos yra visos programavimo kalbos su kuriom galima kurti internetius puslapius IŠSKYRUS JavaScript ir ActionScript (Flash technologija). Taigi Client-side „web“ programavimo kalbos yra JavaScript ir ActionScript.

Kuom gi jos skiriasi? Apie tai sekantis straipsnis :)

p.s. Persiprašau, bet vietoj „html“ dabar rašysiu žodelį „xhtml“. Taip teisingiau :)

p.p.s klausimai bei pasiūlymai labai laukiami ;)

Kursim pirmą, labai paprastą puslapį.

Atsidarykitie notepad programą (arba, jei parsisiuntete, notepad++). Nukopijuokime ten savo paprastą šabloną

<html>

<head>
<title> ANTRAŠTĖ </title>
KITA INFORMACIJA APIE PUSLAPĮ
</head>

<body>
PUSLAPIO TURINYS
</body>

</html>

Pataisome jį. Ištriname mano komentarus (šituos „PUSLAPIO TURINYS“ bei „KITA INFORMACIJA APIE PUSLAPĮ“). Gaunami štai ką

<html>

<head>
<title> ANTRAŠTĖ </title>
</head>

<body>
</body>

</html>

Išsaugokime tai kaip pirmas.html failą (File->Save as… ir pavadinimą rašome pirmas.html). Jei dirbate su notepad programa tai saugodami Encoding pasirinkite UTF-8. Atidarykime. Matome tuščia puslapį su antrašte „ANTRAŠTĖ“.

Sveikinu, sukūrėte savo pirmą puslapį :)

Pabandykite pakeisti „ANTRAŠTĖ“ į, pavyzdžiui, „Mano pirmas puslapis“.

Atrodytų taip

<html>

<head>
<title>Mano pirmas puslapis.</title>
</head>

<body>
</body>

</html>

Išsaugokite. Atidarykite. Grožėkitės pakeista antrašte :)

O dabar pridėsime šiek tiek turinio. Pamenate, puslapio turinys yra tarp <body> tag’ų. Taigi tarp jų rašome „Sveikas, pasauli. Aš esu pirmas blynas“. Atrodytų kodas taip:

<html>

<head>
<title>Mano pirmas puslapis.</title>

</head>

<body>
Sveikas, pasauli. Aš esu pirmas blynas.
</body>

</html>

Išsaugokite. Atidarykite. Laukite sekančios pamokos :)

P.s. jei nerodo lietuviškų raidžių – nesijaudinkite, apie tai vėliau.

1. Kone visi internetiniai puslapiai pateikiami HTML arba XHTML dokumentų pavidalu.
2. XHTML dokumentai yra tiesiog tekstiniai failai (viduje tik tekstas ir tag’ai).
3. XHTML galima kurti su paprasčiausiu notepad (rekomenduoju notepad++ ).
4. XHTML failo pletinys gali būti .xhtml, .html, .htm.

Punktai 2,3 ir 4 tinka ir HTML dokumentams.

Plačiau toliau…

Pažymėjimas : nuo šiol vietoj „(x)html“ ar „html ir xhtml“ rašysiu tiesiog „html“.

HTML kalboje yra nemažai tag’ų. Kiekvienas jų atlieka skirtingus dalykus ir nebūtinai visus turite naudoti :) Tačiau yra keturi tag’ai be kurių neapsieina nei vienas html puslapis: <html>, <head>, <title> ir <body>.

<html> tag’as nurodo jūsų naršyklei, kad gautą failą turi apdoroti kaip html dokumentą. <html> tag’as apgaubia visą html dokumentą.

<head> tag’e nurodoma informacija apie dokumentą : antraštė, nuorodos į css ar javascript failus (arba css ir javascript kodas pačiam head tag’e) dokumento koduotė (na  kad matytusi lietuviškos raidės). Vartotojui per jo naršyklę rodoma vien antraštė, kitas tekstas, esantis <head> tag’e nerodomas.

<title> tag’as yra <head> tag’e. Title tag’as apgaubia dokumento antraštę.  Antraštė – tekstas tarp <title></title> tag’ų.

<body> tag’as tai jūsų puslapio turinys. Kitaip tariant – visas puslapio turinys apgaubiamas <body> tag’u. O puslapio turinys susideda iš teksto ir tag’ų.

Elementariausio html puslapio kodas atrodytų taip:

<html>

<head>
<title> ANTRAŠTĖ </title>
KITA INFORMACIJA APIE PUSLAPĮ
</head>

<body>
PUSLAPIO TURINYS
</body>

</html>

Šitai galite nusikopijuoti, tai bus mūsų puslapių šablonas pradžiai.

identifikatorius {savybė: reikšmė}

nors aš dažniausiai rašau taip

identifikatorius
{
 savybė: reikšmė;
}

identifikatorius gali būti bet kuris XHTML tag’as, klasės ar id atributas (apie pastaruosius du vėliau).

savybė – tai norimo atvaizduoti tag’o savybė (pvz.: tekstas, fonas, ilgis, plotis ir t.t.).

reikšmė – norimos savybės reikšmė (pvz.: lygiuoti-kairėn; raudona; 120 pikselių; ir pan.).

CSS gali būti rašomas pačiam .html faile, gali būti ir .css faile (tokiu atveju įrašome nuorodą į .css failą puslapio kode).

Pavyzdžiui norėdami pakeisti anksčiau pavizdyje naudoto paragrafo teksto spalvą rašytume

p
{
 color: red;
}

o norėdami pabraukti tekstą rašytume

p
{
 text-decoration: underline;
}

Taip taip, vietoj to, kad eitume per šimtus puslapių ir prie kiekvieno paragrafo prirašinėtume <u></u> tag’us mes .css faile tiesiog prirašome šitą trumpą eilutę ;)

Norim, kad būtų ir pabrauktas ir raudonas tekstas mūsų paragrafuose? Prašom

p
{
 color: red;
 text-decoration: underline;
}

Daugiau apie CSS – lietuviškoje Wikipedia

XHTML yra labai panaši į HTML tik kur kas griežtesnė. XHTML kalboje kiekvienas tag’as turi būti uždarytas (</ >),  parašytas mažosiom raidėm ir tinkamoje vietoje (kaip minėjau, negali išeiti už kito tag’o ribų). Taip pat XHTML kalboje tag’ai neturi būti naudojami puslapio atvaizdavimui (pabraukimai, paryškinimai, fono spalvos ir t.t.) formuoti. Tuom užsiima CSS. Kodėl XHTML geriau nei HTML? Todėl, kad laikymasis standartų reiškia, jog jūsų puslapį visos naršyklės (net mobiliųjų telefonų ar delninukų) atvaizduos vienodai teisingai*. Puslapio kodo ir jo dizaino atskyrimas reiškia kur kas lengviau skaitoma ir taisomą kodą (apimtis sumažėja kelis kart).  Puslapio dizainas aprašomas su CSS.

XHTML kalboje nebėra kai kurių tag’ų kurie buvo HTML. Dažniausiai tų kurie nusakydavo tik dizainą, o ne duomenų struktūrą (mano minėtojo <u></u> tag’o nebėra ;) ).

Beje, yra tokių tagų, kurie neapskliaudžia jokio teksto. Tarkim naujos eilutės simbolis „<br />“ (jį naršyklė interpretuoja kaip komandą „pradedam iš naujos eilutės“). Tokie tag’ai rašomi ne „<tag>“ ir „</tag>“, tiesiog „<tag />“ kur „/>“ žymi jų pabaigą.

* Internet Explorer naršyklė dažnai nesilaiko standartų ir atvaizduoja puslapius taip kaip nori (ne taip kaip kūrėjai nori). Todėl rekomenduoju naudoti FireFox.

Daugiau apie XHTML – lietuviškoje Wikipedia

Duomenys tai tekstas, paveiksliukai, nuorodos, video ir audio failai. Na visas tas gėris kurį randate internete. Kam reikalingas tas žymejimas? Tam, kad jūsų interneto naršyklė reikiamai suprastų ir atvaizduotų duomenis. Žymėjimui naudojami vadinamieji „tags“ (liet. žymuo). Pavyzdžiui

šis teksto gabalas yra tarp „<p>“ ir „</p>“ tag’ų. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec quam nisl, suscipit vitae, imperdiet at, gravida vel, libero. Curabitur vehicula luctus nulla. Maecenas sodales felis nec ante. Fusce quis erat.* (atkreipkite į tarpą virš ir apačioj šio teksto gabaliuko, taip atvaizduojamas paragrafas).

Kodas atrodytų taip

<p>šis tekstas yra tarp "<p>" ir "</p>" tag'ų. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec quam nisl, suscipit vitae, imperdiet at, gravida vel, libero. Curabitur vehicula luctus nulla. Maecenas sodales felis nec ante. Fusce quis erat.*</p>

„p“ raidė reiškia „paragraph“, tekstas esanti tarp <p> ir </p> bus atvaizduotas kaip paragrafa (t.y. su eilutės tarpu prieš tekstą ir eilutės tarpu po to teksto). Visi html tag’ai pavadinti logiškai.  Taip pat svarbu atkreipti dėmesį į tai, kad html tag’ai turi pradžia ir pabaigą – mūsų pavyzdžio atveju pradžia yra <p>, o pabaiga – </p>. Kitaip tariant pradžia yra tag’o pavadiniams tarp „<“ ir „>“, o pabaiga yra tag’o pavadinimas tarp „</“ ir „>“

HTML kalboje tag’ai dažnai naudojami puslapio dizainui pateikt (kas nėra gerai). Pavyzdžiui šis tekstas yra tarp <u> ir </u> (underline) tag’ų.**

HTML kalboje tag’ai gali būti neuždaryti (be pabaigos), arba blogai sudelioti. Pavyzdžiui <b><u>kažkoks tekstas</b></u> (<b> tag’as paryškina tekstą). Taip daryti primigtynai nepatartina. Teisingai būtų <b><u>kažkoks tekstas</u></b> t.y. jei tag’as yra kito tag’o ribose jis neturėtų už tų ribų išeiti.**

Kodėl mano paminėti blogo panaudojimo atvėjai nėra gerai? Pirma, įsivaizduokite tikrai didelį internetinį portalą ir įsivaizduokite, kad norite ten kažką pakeisti. Pavyzdžiui paragrafus pabraukti. Tikrai didelis internetinis portalas bus sudarytas iš kelių dešimčių ar šimtų puslapių (dažniausiai iš dar daugiau). Vargins atsidaryti kiekvieno puslapio kodą, tarp kelių šimtų eilučių ieškoti paragrafų (kitaip tariant <p> ir </p> tag’ų) ir prirašyti prie kiekvienų po <u> ar </u>. Neoptimalus darbas. O jei dar blogai sudelioti tag’ai tai nebe darbas, o kankynė. Mes kodą rašysim tvarkingai ir pagal standartus. Kitaip tariant pagal XHTML.

* „lorem ipsum…“ teksto blokas tai tiesiog vietos užpildytojas. Dažnai pamatysit šiuos žodžius puslapių pavyzdžiuose, ten kur norima parodyti kaip šitoje vietoje atrodys tekstas.

**blogai sudeliojus ar neuždarius tag’u dažna interneto naršyklė vistiek atvaizduos puslapį jei nurodysime jai interpretuoti jį kaip HTML. Tačiau tai nereiškia, kad turėtume kodą rašyti betkaip.  Patiem bus tokį sunku skaityti, o ir atrodys toks puslapis neprofesionaliai. Beje, jei ir atvaizduos puslapį tai nebūtinai taip kaip jūs tikitės ;)

Daugiau apie HTML – lietuviškoje Wikipedia

Statinis – nuo žodžio statika (ramybės arba pusiausvyros būklė).

Internetinius puslapius aš skirstau į dinaminius ir statinius. Statiniai tai tokie, kurie tiesiog atvaizduoja iš anksto suvestus duomenis. Dinaminiai – kintantys pagal vartotojo poreikius.

Kitaip tariant, statinis puslapis tai tiesiog teksto, paveiksliukų, video medžiagos ar muzikos „paroda“ internete. Vartotojas atėjęs į tokį puslapį jame nieko nepakeis, negalės susikurti savo „account’o“, negalės bendrauti su kitais vartotojais (lankančiais šį puslapį), negalės įkelti savo paveiksliukų ar teksto ir t.t. ir pan. Toks puslapis lyg siena ant kurios nupiešta ir prirašinėta – spaudi nuoroda, dedi žingsnį – matai sekanti paveiksliuką ar teksto gabalą, bet neturi galimybės pats parašyti ant tos sienos. Statiniui puslapiui sukurti užtenka žinoti (x)html (būtinai) ir css. Beje, statinių puslapių sunku berasti internete, tai nieko tokio jei ir suvokti sunku kas tai per daiktas :)

Dinaminis puslapis veikia šiek tiek kitokiu principu. Ten taip pat būna ir iš anksto įkelti duomenys, tačiau vartotojas gali manipuliuoti jais ar jų atvaizdavimu. Pavyzdžiui pasižymėti patinkančius paveiksliukus kaip „Mėgiamus“ (favorites) ir vėliau juos matyti atskiroje skiltyje, gali pats įkelti savo paveiksliuką, rašyti komentarus, prisiregistruoti, skaityti savo el. paštą ir t.t. ir pan. Taigi dinaminis puslapis – daiktas besikeičiantis priklausomai nuo aplinkybių. Puikus dinaminio puslapio pavyzdys yra kad ir šis wordpress.com (kiti pavyzdžiai būtų youtube.com, lrytas.lt, gmail.com). Dinaminio puslapio sukūrimui reikia žinoti ne tik (x)html bei css, bet ir bent vieną iš šių – php, javascript, ruby, perl, python.

p.s. neišsigąskite nežinomų terminų – visus juos aptarsime vėliau ;)

• Web programavimas suprantamai.
• Pasidalinti savo menka (kol kas) patirtim.
• Paragauti konstruktyvios (tikiuosi) kritikos.
• Apturėti gero laiko :)

Didelis informacijos kiekis dažniausiai būna painus pradedančiajam. Juolab kai nežinoma nuo ko pradėti. Išsiaiškinsim kas ir kaip.

Pasistengsiu išdėsti nuo A iki Ž tai ką žinau (ir ką sužinosiu) suprantamu tekstu. Kuo mažiau neaiškių terminų, anglų kalbos ir copy/paste kodo gabalų.

Pataisymai ir pasiūlymai maloniai laukiami. Beje, klysti žmogiška ;)