Olyan eszközre van szükség, amelynél a webszerkesztés folyamatát a fejlesztő, nem pedig a program vezérli

Átírás

1

2 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

3 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

4 Fejlesztőeszközök Komodo edit Ingyenes Intelligens kódkiegészítés Távoli fájlok szerkesztése Frontpage, Dreamweaver 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

5 Fejlesztőeszközök Szükséges grafikus funkciók: Kép(részlet) mentése gif, jpg, png formátumban Átméretezés Kivágás Korrekciók Paint.Net 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ő)

6 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égekompatibilitási problémák

7 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.

8 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.

9 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

10 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 ( ) Első weblap: 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: Gyakran elegendő csak a tartománynevet beírni a böngészőbe

11 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 ( 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 ( 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

12 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

13 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

14 Oldalfelépítés CSS (Cascading Style Sheets) segítségével CSS CSS 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

15 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

16 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.