BEVEZETÉS A WEBLAPFEJLESZTÉSBE. Kvaszingerné Prantner Csilla, EKF

Átírás

1 BEVEZETÉS A WEBLAPFEJLESZTÉSBE Kvaszingerné Prantner Csilla, EKF

2 A mai haladó technológia

3 Mi a webtárhely? 3 Ha közzé szeretnénk tenni weboldalunkat az interneten, szükséges az, hogy egy webszervernek egy bizonyos területére töltsük fel a teljes munkakönyvtárunkat, azaz a site mappánknak a tartalmát. A webszerverek ezen területeit nevezzük webtárhelynek, ezek használata egyes szolgáltatók esetében reklámozási felületért cserében ingyenes, mások esetében fenntartásukért borsos árat kell fizetni. Egy webszerveren általában több weboldal is található, a minőségi szolgáltatásokért és a nagyobb méretű tárhelyért, az adataink védelméért és a stabil, biztonságos működésért érdemes fizetni! Az igényelt webtárhelyhez a regisztrálás során kapott accounttal (felhasználói név és jelszó páros) férünk hozzá. A webtárhely mellé kapjuk FTP-elérést és adatbázis elérést kapunk.

4 Miként fest egy site mappa/munkakönyvtára? 4

5 5 A STATIKUS WEBLAPFEJLESZTÉS ESZKÖZEI (TOOLS OF THE WEB DEVELOPMENT)

6 A statikus weblapfejlesztés eszközei 6 Böngészők: Mozzilla Firefox, Safari, Opera, Google Chrome és az Internet Explorer. Editorok vagy weblapszerkesztő programok: a. Karakteres szerkesztők, b. grafikus (WYSIWYG) szerkesztők Adobe Dreamweaver CS3 Microsoft SharePointDesigner (!!!) Médiaelemek előállítására szolgáló programok: a. képszerkesztés, b. hangok szerkesztése, c. videók szerkesztése. Fájlkezelők: Mozzilla Filezilla Total Commander A weblapfejlesztés egy összetett folyamat, mely számos, jól elkülöníthető részfolyamatra osztható. Az egyes részfolyamatok végrehajtásához más-más eszközökre, más-más jellegű szoftverekre van szükség.

7 7 A WEBLAPFEJLESZTÉS ALAPELVEI (THE PRINCIPLES OF THE WEB DEVELOPMENT)

8 A weblapfejlesztés alapelvei, szabályok 8 1. Fájlszerkezettel kapcsolatos alapelvek a. A site-hoz hozzunk létre egy munkakönyvtárat, ezen belül helyezzük el az összes site-hoz kapcsolódó fájlt és könyvtárat. b. A site-on lévő fájlok és könyvtárak nevében csak az alábbiakat használjuk: - angol ábécé kisbetűit, - poz. egész számokat és - alulvonást ( _ ). c. Ne használjunk: nagybetűket, hosszú ékezetes betűket, speciális karaktereket (pl.: /?. : ~ *), <SPACE> -t. d. A fájlok közti linkelések esetében használjuk relatív elérési utat.

9 A weblapfejlesztés alapelvei 9 2. Felbontással kapcsolatos alapelvek (FIX SZÉLESSÉGŰ LAYOUT ESETÉN ÉRVÉNYES!!!) Cél: a vízszintes gördítősávok megjelenésének elkerülése. a. Fix szélességű design-tervezés esetén max. 950 px széles layoutot tervezzünk! (Ebben az esetben 1024x768-as felbontásra optimalizáljuk oldalunkat =994, szokás 990-re is optimalizálni.) b. A weboldalakra helyezett táblázatok és képek szélessége szintén max. 950 px legyen (kivéve a háttérképeket).

10 10 MILYEN WEBOLDAL ELRENDEZÉSEK VANNAK? (WEB LAYOUT DESIGNS)

11 Weboldal megjelenítésének tervezése, layout megoldások 11 Static webdesign layout (Fixszélességű, merev) Liquid/fluid layout (Folyékony, százalékosan megadva) Adaptive (Alkalmazkodó, illeszkedő layout) Responsive (rugalmas, alkalmazkodó) Forrás:

12 Korábbi megoldások 12 Static webdesign layout (Fixszélességű, merev) Előnyök: Gyorsabban és olcsóbban létrehozható. Kisebb erőfeszítést és kevesebb gondolkodást igényel. Hátrányok: Szegényes felhasználói élmény. Nem követi az optimális megejelenítést különböző eszközökön s kijelzőkön. Külön layout készítendő mobilokra. Liquid layout (Folyékony, százalékosan megadva) Előnyök: Vízszintes alkalmazkodás a kijelzőhöz. Követi a jó felhasználói élmény elveit asztali számítógépeken, alkalmazkodik a változó ablakméretekhez. Hátrányok: Nem számol a mobileszközökkel, a kisebb méretű tabletekkel továbbá a nagykijelzős számítógépekkel, mint pl. a imac-ek. Kisebb eszközökön szétcsúszik a layout, amely a tartalombefogadás rovására mehet.

13 Újabb technológiák 13 Adaptive (Alkalmazkodó, illeszkedő layout) Adaptív webdesign esetében különböző felbontásokra különböző megoldások vannak. Lényege: Ha a képernyőfelbontás kisebb az előre definiáltnál, akkor a lap elrendezése (layout-ja) megváltozik. 2 Előnyök: Mivel különböző eszközökre szabható vele a megjelenítés, így tudja követni a jó felhasználói élmény elveit többféle eszköz esetében is. Egy webhely kezeli az összes eszközön való megjelenítést Hátrányok: Felépítése hosszabb időt vesz igénybe. Nem ad optimális megoldást a speciális méretű eszközökre. (Vagy egy kisebb képernyőn kisebb ablakméret beállítására.) Responsive (rugalmas, alkalmazkodó) A reszponzív megjelenítés a legjobb megoldás (a liquid és az adaptív ötvözéseként is említik), mindkettő megoldás előnyeit magában foglalja). Lényege: A tartalmat a felbontáshoz igazítja, de ha a felület (akár az ablakméret, amiben a weblap látszik) túlságosan kicsinek bizonyul a tartalom helyes megjelenítéséhez, akkor azt átrendezi egy másik layoutba, amelyen már jól látszódnak és kényelmesen befogadhatóak a tartalmak. Ez azt jelenti, hogy a megjelenítés nem különböző eszközre van szabva, hanem magára a tartalomra. Előnyök: Vízszintes alkalmazkodás a kijelzőhöz. Követi a jó felhasználói élmény elveit asztali számítógépeken, alkalmazkodik a változó ablakméretekhez. Hátrányok: Nem számol a mobileszközökkel, a kisebb méretű tabletekkel továbbá a nagykijelzős számítógépekkel, mint pl. a imac-ek. Kisebb eszközökön szétcsúszik a layout, amely a tartalombefogadás rovására mehet. Részletek:

14 Reszponzív weboldalak 14 Leírások: (kép forrása) Példák: egreirege.hu

15 15 A HTML LEÍRÓNYELV (THE HTML DESCRIPTION LANGUAGE)

16 Mi a HTML? 16 HTML (HiperText Markup Language) egy leírónyelv, jelölőnyelv. Nem programozási nyelv, azaz nincsenek benne ciklusok és szelekciók, csak szekvencia. (HTML jelölőnyelvben nem programozunk, csak kódolunk!!!) A HTML olyan jelölőnyelv, mellyel definiálható a weboldal: 1. tartalma (szövegek, képek táblázatok stb.) és 2. struktúrája (főcím, alcím, bekezdés, lista, kiemelések stb.). A HTML leírónyelv utasításai < és > jelek között írandók. Ezeket tag-eknek, elemeknek vagy jelölőknek nevezzük.

17 A HTML tag-ek/jelölők/elemek-re példa 17 Páros jelölők (tag-ek/elemek) pl.: <body> </body> <h1> </h1> <p> </p> Páratlan, önálló jelölők, üres (tag-ek/elemek) pl.: <img > <hr> <br> <img src="vmilyen_kep.jpg" alt="virág" > jelölő attribútumok értékek = <SPACE>

18 A jelölők felépítése 18 Páros jelölők (tag-ek/elemek) <jelölő attribútumnév1= érték1 attribútumnév2= érték2 > </jelölő> Páratlan, önálló jelölők, üres (tag-ek/elemek) <jelölő attribútumnév1= érték1 attribútumnév2= érték2 > = <SPACE>

19 Böngészőprogramok 19 A böngészők értelmezik a HTML kódokat és abból előállítják a formázott, kész weboldalt.

20 A HTML miért jelölőnyelv? (akadálymentesítés a kód szintjén) 20 A tagek (jelölők) segítségével jelöljük meg a dokumentum egyes részeit: hierarchia + formátum. Tartalomjelölésre és szerkezetjelölésre egyaránt szó!

21 21 Egy HTML/XHTML/HTML5-ös dokumentum szerkezete 1. A Dokumentum Típus Definíció az állomány legelején, ami a használni kívánt DTD-t adja meg. 2. A HTML fejléc <head> </head>, ami technikai és dokumentációs adatokat tartalmaz, ezeket az internet böngésző nem jeleníti meg. (magyar nyelvű, karakterkódolás, CSS link) 3. A HTML törzs <body> </body> tag párok, amely a megjelenítendő információkat tartalmazza.

22 22 A HTML5-ös dokumentum minimum szerkezete fej törzs <!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>title of the document</title> <!- - ez jelenik meg a TAB-on - - > </head> <body> The content of the document... </body> </html>

23 23 A HTML5-ös dokumentumban a fejlécinformáció, a tartalominformáció, a karakterkódolás és a stílusfájl nevének megadása <!DOCTYPE html> <html lang= hu > <head> <title>title of the document</title> <meta charset=utf-8"> <link type="text/css" rel="stylesheet" media="all" href= style.css"> </head> <body> The content of the document... </body> </html>

24 A tartalom és a megjelenítés szétválasztása 24 Válasszuk külön a tartalmat és a formátumot! HTML (HyperText Markup Language) = tartalom, struktúra CSS (Cascading Style Sheets) = formátum

25 Rossz példa!!! 25 Baj, ha a tartalmat s a megjelenítést nem különítjük el! Helytelen, ha a kiemelésre a <b> </b> tagpárt vagy az <i> </i> tagpárt használjuk, mert az csak a megjelenítésre van befolyással jelentést nem jelöl! Helyettük a <strong> </strong> illetve Az <em> </em> tagpart használjuk!

26 Lássunk egy példát! 26 Telepítsük a Notepad++ ingyenes alkalmazást! Nézzük meg a következő weboldalakat: Nézzük meg a forrást!!! Minden böngésző képes megjeleníteni a forráskódot. (Nagyon jó eszköz erre a Firefoxhoz telepíthető FireBug kiegészítés, amely esetében a megjelenített kódba beleírva szimulálja a kódban tett módosításoknak megfelelő változásokat a weblapon, ezt már tudja a Google Chrome is. )

27 A SZABVÁNYOKRÓL (ABOUT THE STANDARDS) 27

28 A szabványok kialakulása ben alapította meg a World Wide Web Consortium-ot (W3C) Tim Berners Lee, amelynek, azóta is vezetője. A W3C szakemberei munkálkodnak: - a webtechnológia tökéletesítésén; - az újabb technikák kifejlesztésén; - a weben használható nyílt szoftverszabványok és ajánlások kidolgozásán. A cég hivatalos weboldala a következő címen érhető el:

29 Miért használjunk szabványokat? A legfrissebb előírások használatával olyan weblapokat készíthetünk, amelyek különböző böngészőkben a lehető legközelebbi végeredményt nyújtják (hiszen a böngészők az egyes utasításokat ugyanúgy értelmezik. 2. Átláthatóbb kód => a fejlesztési folyamat egyszerűbb. a karbantartási folyamat könnyebb. 3. Egységes megjelenésű oldalak a site-on belül. Fontos, hogy a weboldal tartalma és megjelenése külön legyen választva. A legújabb és leghatékonyabb lehetőség ha a HTML5-öt (tartalom) használjuk együtt a CSS3-mal (megjelenés).

30 A tartalom és a megjelenítés szétválasztása 30 Válasszuk külön a tartalmat és a formátumot! HTML = tartalom, struktúra CSS = formátum Javascript = működés

31 A weboldal szerkezetének a felépítése 31 HTML4-ben erre a célra a <div> jelölőket használtuk, HTML4-ben például a következőképpen fest a fejléc megadása: <div id="header">fejléc</div> HTML5-ben viszont ezek helyett az ún. oldalszerkezet tageket vezették be, melyek a következők: header, <header>fejléc</header> section, article, footer A nevek magukban foglalják a képernyőterület meghatározását, így már az id, illetve a class attribútumok használata nem szükséges az oldal felépítéséhez. A beszédes elnevezések szemantikai szempontból jók, áttekinthetőbbé válik tőlük a kód.