Web fejlesztés

Áttekintés

Olyan szédítő iramban fejlődik az internet, hogy ezt már szinte kezelhetjük technológiai szingularitásként. Nemcsak a neten megjelenő tartalomról jelenthetjük ki, hogy követhetetlen (pl. képtelenség megnézni a YouTube-ra feltöltött összes videót), sőt, nemcsak a releváns weboldalakat és weben elérhető szolgáltatásokat képtelenség megtanulni (egyre-másra jelennek meg a jobbnál jobb szolgáltatások, tematikus közösségi oldalak), hanem ez a programozására is igaz. Az elmúlt években valószínűleg a webes fejlesztés területén következett be a legjelentősebb technológiai mennyiségi növekedés (magyarán ezen a területen jelent meg a legtöbb programkönyvtár, sőt, programozási nyelv).

Emiatt lehetetlen igen ambiciózus vállalkozás olyan leírást készíteni, ami egyrészt bevezető, másrészt igyekszik minden fontosabb területre kitérni. Így ez a leírás is csak korlátozottan lehet sikeres.

A webes fejlesztéssel kapcsolatban a legfontosabb tudnivalók:

  • A világhálón számos adatkapcsolati lehetőség van, melyeket protokollnak hívunk. Ebben a leírásban a HTTP (HyperText Transfer Protocol) protokollról lesz szó, melyre a világháló épül. A HTTP titkosított párja a HTTPS. Néhány fontosabb egyéb protokoll: telnet/ssh (távoli belépés), ftp/sftp (fájlok másolása egyik szerverről a másikra), smpt/pop3/imap (e-mail küldéssel és fogadással kapcsolatos protokollok) stb.
  • Alapvetően kétféle szolgáltatás van a világhálón: az embereknek szóló szolgáltatások, melyeket weboldalak formájában látunk böngészőnk segítségével, valamint más számítógépeknek szóló szolgáltatások (angolul: web service), ahol tehát a lekérdező is egy szoftver, mely tipikusan feldolgozva továbbítja az adatokat. Például egy olyan weboldalon, ahol láthatunk folyamatosan frissülő időjárási, vízállási, részvény árfolyam adatokat is, jó eséllyel a háttérben számos webes szolgáltatást használ.
  • A világháló lekérdezés alapú, ráadásul mindig a kliens az aktív fél, azaz a lekérdező. Néha nehéz elhinni, de akármennyire is összetett egy alkalmazás, "legalul" egészen biztosan a böngésző által kiadott különböző lekérdezések sorozata áll. (Más protokollok lehetnek kétirányúak, ahol bármelyik fél lehet a kezdeményező, a HTTP viszont egyirányú.) A HTTP protokoll lényegét tekintve semmit sem változott azt elmúlt évtizedekben. Módosítani rajta csak óvatosan és minimálisan lehet, mivel a több évtizedes rendszerekkel is kompatibilis kell, hogy maradjon. (Csak képzeljük el: milyen szédítő lenne a fejlődés akkor, ha a HTTP protokoll érdemben is változna.)
  • A böngésző és a szerver közötti kommunikációt a HTML (hypertext markup language) írja le. Ez végső soron egy egyszerű szöveg, ami a szerver válasza a böngésző kérésére. A szöveg maga a tartalom, annak formázása, valamint hivatkozások összessége. A hivatkozások lehetnek bináris adatok is, mint pl. képek, valamint akár böngészőben futó alkalmazások is. Egyébként ez utóbbiak teszik dinamikussá a weboldalakat. A HTML szabvány ritkán változik, mivel sok böngésző van, az egyes személyi számítógépek milliárdjain régi verziók is lehetnek, így fenn kell tartani a kényes egyensúlyt a stabilitás és a fejlődés között. Az eddigiek alapján nagyságrendileg tíz évente történt olyan változás, mely jelentősnek mondható, és amelyek mindegyik esetben "böngésző háborúkhoz" vezetett.
  • A HTTP formázás - sajnálatos módon - lehet logikai és fizikai egyaránt. (Példa: az, hogy vastag, 15-ös betűméret, fizikai formázás. Az, hogy alfejezet cím, ami adott böngészőben lehet pont vastag, 15-ös betűméretű, logikai formázás.) Vegyíteni a kettőt nem célszerű. Ha csak fizikai formázást használunk, akkor nagyon nehéz módosítani rajta (pl. ha úgy látjuk, hogy az alfejezet cím ne 15-ös, hanem 16-os legyen, akkor az összes alfejezet címnél át kell írni, adott esetben a több ezer HTML oldal több tízezer előfordulásánál), a logikai formázásnál viszont túlzottan a böngészőre van bízva a kinézet, amit a külcsínre igényes cégek nem tudnak elfogadni. Így szinte történelmi szükségszerűség volt a CSS (Cascading Style Sheets) megjelenése, ami a 100% logikailag megalkotott HTML oldalt formázza minden böngészőben egységesre.
  • Számos esetben előfordul, hogy nem egy komplett weboldalt szeretnénk letölteni. Például két szoftver, melyek között csak adattovábbítás van, tipikusan nem ezen keresztül szeretne kommunikálni. Ill. ez lehet a böngésző -> szerver kommunikációban is: ha egy nagyméretű weboldalon kevés információ változik, akkor lassú, zavaró és pazarló újra betölteni a teljes oldalt. Ezekben az esetekben érdemes a HTML-től eltérő formátumot használni. A legelterjedtebb szöveg alapú szabványok az XML és a JSON. Az XML (Extensible Markup Language) létrejöttére jó eséllyel hatással volt a HTML: hasonlít a HTML-re, de annál szigorúbb (ami jó), és kiterjeszthető. A JSON a JavaScript Object Notation rövidítése, tehát szűkebb értelemben ez a JavaScript objektumok szerializálására szolgál. A jelölő nyelv viszont annyira egyszerű, kompakt, jól érthető, jól olvasható, mégis, bonyolult struktúrák kódolására is alkalmas, hogy önálló, a JavaScript-től független szabvánnyá nőtte ki magát, és az írás pillanatában valószínűleg ez a legnépszerűbb szabvány a web szolgáltatások adatcseréjében.
  • Ha csak ennyi lenne a web, ami fent található (és az 1990-es évek közepéig nagyjából ennyi is volt), akkor a mai szemünkkel eléggé "laposnak" éreznénk: ott a szöveg, egy-két kép, néhány link, de semmi "csicsa", semmi látvány; kb. olyan, mint ez a weboldal. Dinamizmust a böngészőben futó programok visznek bele. Ne feledjük: sem a HTML sem a CSS nem programozási nyelvek: ezek statikus leírások, melyekbe üzleti logikát nem lehet beprogramozni. Először a HTML forrásába ágyazott script nyelvek jelentek meg, melyek közül a JavaScript vált igen gyorsan egyeduralkodóvá. A JavaScript egyrészt egy teljes értékű programozási nyelv változókkal, függvényekkel feltételkezeléssel, ciklussal stb. Másrészt magát a HTML kódot is át tudjuk vele alakítani, ezáltal egész látványos dolgokat tudunk segítségével alkotni. A tartalmat tehát a HTML, a külalakot a CSS a dinamizmust meg (döntőrészt) a JavaScript biztosítja. Ezek az technológiák a 1990-es évek közepéig kialakultak, és az alap szabvány nem sokat változott. Ahogy a HTML vagy CSS szabvány is csak ritkán változik, úgy a JavaScript szabvány is, sőt ez utóbbi talán még problémásabb mint a másik kettő. Ha minimálisan is, de változik a szabvány, akkor könnyen futhatunk olyan esetre, hogy az egyik böngésző támogatja, míg ugyanaz szintaktikai hibát okoz egy másikban.
  • Adott tehát a JavaScript, mellyel "gyalogos" módszerrel karakterről karakterre, pixelről pixelre át tudjuk alakítani az egész weboldalt. A benne rejlő lehetőségeket viszont idővel sokan meglátták, és egyre-másra jelentek meg a kiegészítések, amelyek segítéségével néhány sor kóddal igen látványos, asztali alkalmazások dinamizmusát meghazudtoló eredmény tudunk létrehozni. És ne feledjük: mindez az 1990-es évek óta szinte változatlan HTTP + HTML + CSS + JavaScript alapokon, nincs más! A jQuery "kimaxolta" az alapvetően statikusnak szánt HTML módosítását. Ez olyan jól sikerült, hogy visszahatott az alap JavaScript szabványra, így a legfontosabb műveletek (más szintaxissal) jQuery nélkül is elérhetőek. Az AngularJS tipikusan a HTML elemek attribútumait egészíti ki, ezáltal új funkciókat visz a rendszerbe, mintha alap HTML lenne (és melyeknek egy része visszaköszön a későbbi HTML szabványokban is). Az ExtJS segítségével HTML nélkül, tisztán JavaScript-ben tudunk nagyon látványos, böngészőben futó webalkalmazásokat készíteni. És kismillió célirányos JavaScript modul létezik; pl. a Mustache sablonok kezelésére szolgál.
  • A JavaScript után nem sokkal igény mutatkozott kliens oldali binárisok futtatására is. A két legnépszerűbb az Applet (ami Java, ellentétben JavaScript-tel, ami a nevével ellentétben nem az), valamint a Flash. Viszont a JavaScripté lett utólagos tudásunkkal a hőskor jövője, ezek valójában kihalófélben vannak.
  • Amiről idáig szó volt, az a kliens oldal, és ebben a modellben a szerver előre bedrótozott, statikus erőforrásokat küldött a kliensnek. Habár a kezdeti weboldalak valóban ilyenek voltak, ma már a legegyszerűbb weboldalak szerver oldalán is létezik dinamikus tartalom, tipikusan olyan, amit adatbázisból olvas ki, vagy más web szolgáltatástól kérdez le és továbbít. Az első dinamikus szerver oldali technológia a ma már lényegében kihalt CGI volt. A PHP-ban készült szerver oldali kódot közvetlenül a HTML-be kell írni. Ez tehát programozás technikailag hasonlít a JavaScript-re, viszont lényeges különbség közöttük az, hogy a PHP kód a szerver oldalon lefut, és a kliens már csak az eredményt kapja (melyről nem is tudja, hogy az nem statikus HTML, hanem PHP által generált HTML), míg a JavaScript a böngészőben fut. És vannak a különböző, tipikusan Java alapú technológiák, melyek a HTML-től függetlenül léteznek, és eredményül vagy HTML-t generálnak, vagy más formátumot, pl. XML-t vagy JSON-t, amit egy HTML-be ágyazott JavaScript kérdez le és jelenít meg. Végül (?) a webes keretrendszerek végtelen sora következik, amelyek legenerálják a szükséges kódot kliens és szerver oldalon egyaránt, és amelyeknél nem is biztos, hogy elsőre egyértelmű, mi fut a szerveren és mi a böngészőben…

Lekérdezés

A HTTP protokoll

HTML

CSS

Adatformátumok

XML

JSON

JavaScript

Standard JavaScript

AJAX

jQuery

AngularJS

ExtJS

Google Script

Böngésző oldali bináris

Applet

Flash

A szerver oldal

Web szolgáltatások

CGI

PHP

Java és egyebek

Web könyvtárak

Node.JS

Szerkesztők

Rengeteg HTML szerkesztő van; talán túl sok is; még a kategóriákat is elég nehéz kitalálni. Teszek egy próbát!

  • Alap szövegszerkesztők: HTML-t tkp. bármilyen szövegszerkesztőben lehet szerkeszteni, mivel az szöveg fájl. Persze van, amivel inkább érdemes, és van, amivel nem. Egy Notepad-et vagy bármely Linuxos szövegszerkesztőt egy gyorsan összedobott Helló világ HTML oldalon túl nem érdemes erre a célra használni, bár elméletileg lehet.
    • Brackets: ez már átmenetet képez az általános szerkesztő és a HTML szerkesztő között, ugyanis - noha natív módban szerkesztjük vele a HTML-t, a CSS-t és a JavaScriptet, tehát végső soron szöveget szerkesztünk - kifejezetten HTML szerkesztésre lett kifejlesztve. Van ugyanis benne egy Élő előnézet funkció (a Fájl menüből érhető el), amely - ahogy a nevéből is következik - azonnal megmutatja egy böngésző ablakban (egy felugró Google Chrome ablakban egyébként) az eredményt. (Ezzel is meg kell részletesebben ismerkednem.)
    • Általános célú szövegszerkesztők HTML beépülővel: pl. a Notepad++ alapból ismeri a HTML tag-eket, azokat megfelelően színezi, és segítséget is ad a lehetséges HTML elemeket illetően. Ide sorolható a leggyakoribb integrált fejlesztőkörnyezetek, pl. az Eclipse szerkesztője is; ezekhez is lehet beépülőket
  • WYSIWYG HTML szerkesztők: ezeknél alapvetően nem a forrást szerkesztjük (bár megtehetjük), hanem a kész eredményt látjuk.
    • Microsoft Word: az eredményt ki tudjuk exportálni HTML-be, tehát végső soron ezzel is tudunk HTML oldalakat szerkeszteni. Mondjuk finoman azért tegyük azt hozzá, hogy nagyon szeretjük a Word-öt, de nem ez az elsődleges oka ennek.
    • Adobe Dreamweaver: klasszikus nagyágyú a témában. 2000 környékén használtam kipróbálás szinten (az írás pillanatában 20 évvel ezelőtt), és emlékeim szerint az egy óriási előnye volt, hogy ha egy kézzel szerkesztett HTML oldalba belenyúltunk ezzel, akkor csak a módosított szakaszt formázta át, nem az egészet. Az akkori többi HTML szerkesztő ugyanis a kézzel gondosan megszerkesztett egész oldalt újratördelte, olvashatatlan generált kódot eredményezve. Viszont ez sajnos nincs ingyen, igen drága a licensz! Most a leírás érdekében megpróbáltam feltelepíteni az ingyenes kipróbálási verziót, de mobilnettel, több száz megabájt telepítésnél, ami ráadásul csak valami előfeltétel szoftver, nem is maga a Deamweaver, regisztrálás és sok felesleges kérdésre válaszolás után abbahagytam, így nem tudom leírni, hogy mennyire nagyszerű ez a rendszer.
    • Google Web Designer: ez ingyenes, viszont pár perc próbálkozással nem sikerült kiderítenem, hogy egy egyszerű Helló, világ HTML oldalt hogyan tudok segítségével összedobni.
  • Online HTML szerkesztők: ha rákeresünk arra, hogy HTML editor, akkor az elején szinte kizárólag online szerkesztőket kapunk.
  • Weboldal készítők saját online szerkesztői:
    • wix.com: az írás pillanatában legnépszerűbb ilyen oldal.
    • wikidot.com: ez az oldal ezzel a technológiával készült. Amiatt választottam egyébként ezt (még 10 évvel azelőtt, hogy ezt írom), mert megtetszett benne az, hogy wiki motor van mögötte.
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License