Web alapismeretek
Fejlesztőeszközök
Olyan eszközre van szükség, amelynél a webszerkesztés folyamatát a fejlesztő, nem pedig a program vezérli
Szerkesztők 2 alapvető szolgáltatása: kódszínezés, kódkiegészítés
Alapvetően két csoportra oszthatók:
WYSIWYG (What you see is what you get) WYSIWYM (What you see is what you mean)
Notepad: ez egy „minimum eszköz”, használata nem célszerű, nem nyújt segítséget a fejlesztőnek, nincs színezés, kódkiegészítés, stb.
Context: egyszerű szerkesztő, nem nyújt semmi „pluszt”
magyar felület több mint 200 nyelv színezését tudja Ingyenes
Fejlesztőeszközök
Notepad++
Kódkiemelés és kódblokkok egységbe zárása
38 támogatott programnyelv
WYSIWYG nyomtatás
Felhasználó által állítható kódkiemelés
Automatikus kiegészítés
Fájl állapotváltozásának automatikus figyelése
Nagyítás és kicsinyítés
Több-nyelvi környezet támogatása
Összetartozó nyitó- és záró zárójelek színezése
Fejlesztőeszközök
Komodo edit
Frontpage, Dreamweaver
Ingyenes Intelligens kódkiegészítés Távoli fájlok szerkesztése
WYSIWYG Egyszerű kezelhetőség Magyar felület Hibrid programok (WYSIWYM) Oldal előállításához semmilyen programozói tudásra nincs szükség
Grafikus programok
Oldaltervet képek formájában kapjuk A fejlesztő feladata, hogy ez alapján készítse el az oldalt Ehhez valamilyen „képszerkesztő” program szükséges
Fejlesztőeszközök
Szükséges grafikus funkciók:
Paint.Net
Kép(részlet) mentése gif, jpg, png formátumban Átméretezés Kivágás Korrekciók
Ingyenes program Réteg technológia megvalósítása Effektek támogatása
Adobe Photoshop
Nem ingyenes Profi szerkesztőprogram, rengeteg funkcióval (rétegek, grafikus hatások, makrók, slice, beépített képgaléria szolgáltatás, stb.) Photoshop Express (online szerkesztő)
Web alapismeretek
Webböngésző: Webböngészőnek vagy böngészőnek nevezzük azon programokat, melyekkel az interneten található tartalmakat lehet megtekinteni, illetve az Interneten át elérhető szolgáltatásokat használni.
A webböngészők HTTP protokollt használnak (támogatják még: FTP, HTTPS)
A böngésző a weboldalakat URL (Uniform Resource Locator) segítségével találja meg
A HTML a böngészőkkel együtt fejlődött, a hivatalos HTML változatokat a W3C hagyta jóvá
Böngészők különbözőségeÆkompatibilitási problémák
Web alapismeretek
Webszerver
Olyan kiszolgáló (program), amely elérhetővé teszi a weblapokat HTTP protokollon keresztül. Ezekhez a szerverekhez böngészővel lehet csatlakozni.
Kérés
A szerverek a böngészőtől (kliens gép) egy URL címet kapnak, azon az URL címen elhelyezkedő weboldalt „küldi el” a webszerver a kliens gép böngészőjének.
A böngésző természetesen a kliens gépen lévő HTML weboldalakat is meg tudja jeleníteni
Nem HTML oldalak (php, jsp, asp, stb.) esetén a webszerver „feldolgozza” az oldalt, és az eredményt, ami egy HTML oldal küldi vissza a kliensnek.
Web alapismeretek
Webtárhely
Virtuális webtárhely szolgáltatás: olyan internetes szolgáltatás, ahol egy webszerver erőforrásait több felhasználó között osztják szét.
Minden felhasználó kap egy korlátozott méretű tárhelyet, amelynek tartalmát valamilyen domain alól tudja elérni.
A webtárhely szolgáltatás tartalmaz egy adminisztrációs felületet, amellyel a felhasználókat kezelik.
Ezeken a webtárhelyek alacsony költséggel üzemeltethetőek, valamilyen ingyenes operációs rendszert használnak (Linux, FreeBSD).
Lehetőséget adnak (leggyakrabban) HTML és PHP oldalak üzemeltetésére, MySQL adatbázis használatára.
Web alapismeretek
FTP protokoll
File Transfer Protocol
Segítségével lehetőség van egy távoli gépre történő állományátvitelre
Elkülönítünk 2 folyamatot
Letöltés: a távoli számítógépről fájlokat mentünk a saját számítógépünkre
Feltöltés: a távoli számítógépre mentjük (másolnuk) fájlokat
Ez fontos lesz, mikor a webtárhelyünkre akarjuk felrakni az elkészült oldalunkat.
Az FTP kapcsolathoz szükség van egy szerverre és egy kliensre, továbba egy FTP kapcsolat megvalósítására alkalmas programra
Web alapismeretek
Webcím
A webcím (más néven URL) az interneten található oldalak, képek, szövegek elérésére szolgál.
Tim Berners – Lee ( http://hu.wikipedia.org/wiki/Tim_Berners-Lee )
Első weblap: 1991. augusztus 6.
Egyetlen címben összefoglalja a dokumentum megtalálásához szükséges információkat
Protokoll: pl. HTTP, HTTPS, FTP, stb.
Tartománynév: pl. hu.wikipedia.org
Portszám: HTTP esetén 80, ha nem írjuk, akkor alapértelmezett a 80
Fájl elérési útja: pl. wiki/Tim_Berners-Lee
(A teljes cím így néz ki: http://hu.wikipedia.org:80/wiki/Tim_Berners-Lee)
Gyakran elegendő csak a tartománynevet beírni a böngészőbe
Web alapismeretek
Nyúló vagy fix elrendezés
Nyúló elrendezés: a böngésző vízszintes méretétől függően nyúlik vagy húzódik össze
Fix elrendezés: az oldal fix szélességű, a böngészőtől független
Választás: tartalom és design figyelembe vételével (http://weblabor.hu/forumok/temak/13889)
Flash alkalmazása
Flash animációk kiterjesztése SWF
Kizárólag Flash lejátszóban fut, a böngészőkhöz van beépülő plugin
Kezdetben rajzprogramnak indult, ma már rengeteg lehetőséget ad (http://www.ektf.hu/tanulasfejlesztes3/)
Előnyei: látványos, interaktív, multimédia tartalmak
Hátrányai: lejátszó szükséges hozzá, nem méretezhető, nagy a mérete, a keresők nem indexelik
Web alapismeretek
Keretek
Lehetővé teszik az oldalon több keret megjelenítését
A keretekbe külön weblapokat „tölthetnek” be, amelyek együttes megjelenése adja a weboldal kinézetét
Régen gyakran alkalmazták
Tipikus felhasználása: tartalomjegyzék illetve a tartalom betöltése a különböző keretekbe
Az oldalak nem írnak le „állapotot”
Ma már nem szokás alkalmazni
Web alapismeretek
Oldalfelépítés táblázatokkal
A HTML nyelv táblázatmodellje lehetővé teszi, hogy a weboldal tartalmát (szöveg, képek, stb.) sorokba és oszlopokba rendezzük
Egy oldal táblázat alapú: annak tartalma egymásba ágyazott táblázatok segítségével jelenik meg.
Problémák:
Csak a teljes táblázat szerkezetének betöltése után kezdi el a tartalmat betölteni, addig nem jelenik meg a tartalom
Nehéz karbantartani (a kód rendkívül bonyolulttá válik)
A táblázatokat manapság már nem oldalfelépítéshez, hanem adatok megjelenítésére használjuk
Web alapismeretek
Oldalfelépítés CSS (Cascading Style Sheets) segítségével
CSS1 – 1996
CSS2 – 1998
Egy deklaratív nyelv, amely a HTML nyelv prezentációs képességeit bővíti ki
Használata viszonylag egyszerű
Lehetőség van a különböző megjelenítők számára elkészíteni a stíluslapot, és azt használni (media types, pl. aural – beszéd generátor)
A HTML elemekhez egyedi megjelenést adhatunk
Ezáltal a HTML elemeket és a formázást szétválaszthatjuk
A HTML kód kisebb lesz, gyorsabban betöltődik az oldal
Hátránya: a böngészők különbözően kezelik a CSS egyes tulajdonságait
Web alapismeretek
Gyakori hibák
Túl sok reklám
sok banner, reklámcsík elveszi a figyelmet. A mozgás elveszi a figyelmet, nehezen tud a látogató koncentrálni
Betűk:
Fontos az olvashatóság
Ne legyen túl kicsi és túl nagy a betűméret
Különleges betűtípusokat ne használjunk
Flash intró
Célja a figyelemfelkeltés, de gyakran fordítva sül el
Lehetővég kell tenni az átugrását
A keresők nem indexelik az oldalt, mert az egy animációval kezdődik
Linkek
A külső tartalomra mutató linkek eltérő jelzésűek legyenek
Ügyeljünk a törött linkekre
Web alapismeretek
W3C (World Wide Web Consortium)
1994-ben alapította Tim Berners – Lee
Elsődleges tevékenysége a webszabványok kidolgozása
Tagjai:
IBM, Microsoft, Apple, Adobe, Macromedia, Sun
Validátorok
A weboldalaknál alkalmazott technológia szabványosságát ellenőrzik
Többféle validátor is van: HTML, CSS, RSS, stb.
