Weblapkészítés, de hogyan is?

Én egy kicsit máshogy fogalmaznám meg a sorrendet:

1. HTML5/DOM, CSS3, JavaScript

2. Ajax és JavaScript frameworkök

(3.) szerveroldal, ha az érdekel (PHP, Ruby on Rails, Python...)

Kifejtve:

A web "nyelvét" az első pont képezi. Egy pontig el lehet menni csak HTML-lel és CSS-sel, de alapvetően inkább egy nagy csomagként működik az összes felsorolt elem együtt. A HTML a weboldal statikus vázát készíti el, a CSS mindent, ami stílus és formázás, a JavaScript pedig kliensoldalon, tehát a böngészőben teszi dinamikussá az előző kettőt. A JavaScript egy programnyelv, a HTML és a CSS markup (jelölőnyelv). Mindre szükség van minimum követelményként egy modern felhasználói élményhez. A hármat nem is nagyon tudod egymástól függetlenül, szeparáltan megtanulni, mert folyamatosan hatnak egymásra minden irányban.

Ez volt a kliensoldal, amikor az oldal letöltődése után már nem kérsz le adatot, hanem minden a böngészőben történik eztán. Nekem úgy tűnik, hogy téged a frontendfejlesztés (frontend = UI = user interface = felhasználói felület) érdekel, amihez nem feltétlenül kell a szerveroldali megoldásokig elmenni, kivéve akkor, ha mindent magad akarsz megvalósítani, de egy dedikált backendfejlesztőnek (pl. PHP-fejlesztőnek) több előnye van a szerveroldali megoldásokban, és őt meg nem feltétlenül mozgatja a frontend, ezért ez két külön feladat és szakterület szokott lenni egy komolyabb projektnél.

Amit viszont ismerned kell, az a második pont: az Ajax (aszinkronos JavaScript és XML) és legalább egy JavaScript framework. Az Ajax nem egy nyelv, hanem egy szettnyi JavaScript technika, amivel nagyon dinamikus oldalakat lehet készíteni. Arra való, hogy amikor valamilyen elemnek változnia kell egy oldalon, akkor ne kelljen az egész oldalt újratölteni, hanem a böngésző automatikusan frissítse szerverről az adott elemet. Gondolj például egy kis üzenetjelző ikonra, ami oldalfrissítés nélkül is pirosra vált, amikor jön egy leveled.

Az Ajax egy valamirevaló felhasználói élménynek a kötelező eszköze bármikor, amikor vannak dinamikusan változó elemek egy oldalon.

A JavaScript frameworkök (vagy más néven library-k) sokezer soros JavaScript kódok, amik előre definiálnak gyakori feladatokra megoldásokat, és egy sajátos szintaxissal, szinte egy új nyelvként engedik, hogy cross-browser megoldásokat gyorsan, tömören, könnyen írj meg. A leghíresebb közülük kétségtelenül a jQuery, és ajánlom, hogy ismerkedj meg vele, de sose felejtsd el, hogy nem mással van dolgod, mint tízezer sornyi tiszta JavaScripttel, és ami egyszerűen megoldható natív JavaScriptben, arra nagyon nem érdemes library-t használni. Tipikus amatőr hiba, hogy emberek egyetlen sornyi kódért behúznak a projektjükbe egy egész library-t. Ha belegondolsz, ez olyan, mintha azt az egy dolgot, amire jQuery-kódot használtál, valójában tízezer sorral írtad volna meg. Szóval ismerd a jQuery-t, de nehogy túlhasználd, mert nem egy varázspálca, hanem egy nagy adag nehéz erőforrás a háttérben.

Ami a dolog grafikai részét illeti, sosem árt, ha van tapasztalatod valamilyen pixelgrafikus szoftverrel (Photoshop, Gimp, Paint.NET - utóbbi egy egészen másik liga, de zseniálisan jó és egyszerű), de a web most nagyon másfelé megy. A sokféle eszköz és platform miatt, amin internetezünk, a statikus, fix pixelnyi széles és magas elemek az oldalon már elavultnak minősülnek struktúraépítés szempontjából. Persze, ikonokra és kis grafikus elemekre mindig szükség lesz, de azokat is kezdi felváltani (nagy örömömre) a vektorgrafika (CSS3, HTML5 canvas, SVG). Oldalstruktúrát pedig már nem szabad képekre alapozni, az az idő lejárt. Az általad linkelt oldalak gyors rápillantásra még mind a PS-ben feldarabolós, HTML-ben összeillesztős szájtbildet alkalmazzák, de manapság a reszponzív dizájn technikái a nyerők. Magyarul olyan technikák, amik dinamikusan változtatják az oldal elemeinek a méretét, elrendezését, stílusát annak a függvényében, hogy mekkora a viewport (az oldalból megjelenített felület). Mondani sem kell, hogy ez mennyire eltérő egy iPhone-on és egy 1920 pixel széles asztali monitoron. Ahhoz, hogy ezt a dinamizmust el lehessen érni, minden (vagy legalábbis a legtöbb) elem vektorgrafikus, számszerű formázást kap, ami minden alkalommal újrakalkulálódik, amikor az oldal megjelenik egy böngészőben, bármilyen eszközön, bármilyen rendszeren. Ez egy zseniális dolog, mindenképp ebbe az irányba haladj.

Most ennyi jutott eszembe, de ha felvetődnek kérdéseid, nyugodtan tedd fel őket, lehetőleg itt és ne priviben, hogy mások is tanulhassanak a válaszból.

A legfontosabb, hogy a html utasításkészletével, natív használattal tisztában legyél. Ma már ehhez elengedhetetlen a css ismerete is.

Ha szeretnéd a grafikai oldalát is felvállalni a dolognak, akkor szerintem ismerkedj meg alaposan a Photoshoppal. A legtöbb tutorial ehhez van a neten (pl Youtube-on), de az Aftereffects-szel is jó webdesign készíthető.

Én azt ajánlanám neked, hogy egyenlőre maradj meg a jó sitebuild készítésének a szintjén. Ez azt jelenti, hogy a megtervezett grafikai forrásból működő statikus oldalt készítesz. Ehhez elég a html, css ismerete, esetleg némi javascript a későbbiekben szóba jöhet. Ha elég jó vagy egy sitebuild elkészítésében az már fél siker. Ha csuklóból megy a sitebuild elkészítésének menete - legalább fejben - akkor már nekivághatsz a komolyabb programozási dolgoknak, mint a php, vagy a bonyolultabb javascript metódusok, összetett adatbázislekérések ajax-szal. Ez azonban minimum több hónapos gyakorlást jelent.

Egy jó sitebuilder sokat ér, egy jó designer még többet, azzal már akár munkát is lehet vállalni. A digitális grafika kicsit más, mint tussal/ceruzával/ecsettel dolgozni. Az is jó lehet benne, aki nem a legjobb a kézimunkában. A lényeg, hogy legyen arány és szépérzéked, valamint fantáziád. (Egy digitalizáló tábla azért nem árt)

Sok sikert!

Én sorrendnek mást írtam volna:

1. HTML, CSS

2. PHP (vagy ASP.NET vagy valami szerveroldali)

és csak után a kliensoldali, azaz Javascript és AJAX

A PHP-t azért rakom előrébb, mert a legtöbb interakítv oldal mind PHP-ben készül, és abban lehet az általános dolgokat könnyen megvalósítani.

Az ajax az ráadásul nehezebb is, és kevés olyan dolgot tartalmaz, ami szükséges lehet egy átlagos weblaphoz.

AJAX-ra akkor lenne szükséged, ha pl. több látogatót szeretnél összekapcsolni, hogy pl. ha ír az egyik valami üzenetet, akkor az a másik gépén AZONNAL (és nem oldaldrissítésnél) jelenjen meg.

Nekem ez a tanácsom.

"Egy olyan kérdésem lenne még ,hogy weblapkészítéshez milyen programot ajánlanátok? Kezdőtől haladóig haladva. Köszönöm"

Remélhetőleg kódszerkesztőre gondolsz a program alatt, és nem valami WYSIWYG szerkesztőre, utóbbiak eszedbe se jussanak. :)

Próbáld ki a Sublime Text 2-t, zseniális kódszerkesztő, az első pillanattól inspirálja a minőségi munkát, teljesen professzionális a cucc. Kezdőként és profiként is ki fogja elégíteni az igényeidet.

Ezen kívül alap, hogy a gépeden a négy nagy böngésző legfrissebb verziója mindig elérhető (ha OS X-en dolgozol, akkor öt a Safarival együtt - Windowsra egy ideje stagnál a fejlesztése), minden böngészőre dolgozz egyszerre, és vedd figyelembe, hogy a régi verziókban hogy néz ki az oldalad (főleg IE-nél, ami hírhedten és klasszikusan nem szabványos a 10-es verzió alatt), és mindig kutasd, hogy a kód, amit használsz, mennyire kompatibilis minden böngészővel. A nagy különbségek kiegyenlítésére valók a JavaScript frameworkök.

Ezen felül minden böngészőben léteznek fejlesztői eszközök. Én Chrome-ot használok fejlesztésre, ahol a Ctrl+Shift+I hozza elő ezt a funkciót, Operában ugyanez, Firefoxban a lájtos fejlesztői eszközöket ugyanez, de add-onként telepíthető a Firebug, amire sokan esküsznek. Válassz egyet ezek közül (a triviális választás első körben nyilván a saját preferált böngésződé), és ismerkedj meg vele. Van benne sok eszköz, amit itt most rengteteg volna felsorolni, de első körben az inspektort fogod használni amúgy is az összes funkció közül, ami megmutatja, hogy hogyan épül fel az épp nézett weboldal szerkezete, és a kijelölt elemekre éppen milyen CSS-szabályok érvényesülnek. Utóbbiakat ki-be kapcsolgathatod, átírhatod, kísérletezgethetsz, mielőtt a kódszerkesztődben véglegessé tennéd a megoldásodat. Lehet vitatkozni azon, hogy ez egy haladó szintű dolog-e, én azt mondanám, hogy ami könnyíti a munkádat, az az első perctől jó helyen van a kezeid alatt, szóval használd. Nagyon sokat fog tanítani magáról a DOM szerkezetéről és a CSS-ről.

Használt programok:

Kódoláshoz legtöbben a Notepad++ progit használjuk, mert remekül kezeli a különböző kódlapokat, a kódkiemelés is remekül megoldható vele, és van pár jó plugin is hozzá, ami hasznos lehet.

Grafikához többnyire a Photoshop az alap, de többen esküsznek a Gimp-re, mivel ingyenes megoldás.

Több kép átméretezéséhez (bélyegképek tömeges legyártásához) én többnyire a Thumbnailer programocskát használom.

Css kódoláshoz pedig a TopStyle nevű programot, mert kifejezetten a css-hez készült. Ismeri az egyes css szinteket, és az új verziója a speciális css3-as trükköket is ismeri.

A wysiwyg webszerkesztőket nem árt kerülni, mert a nevükkel ellentétben nem azt kapod végül amit látsz. Viszont kezdetben jó megoldás lehet a Dreamweaver, mert egy kezdőt rávezethet bizonyos megoldásokra.