BEVEZETÉS A

WEBLAPFEJLESZTÉSBE

Kvaszingerné Prantner Csilla, EKF

A mai haladó technológia

http://www.w3schools.com/html/html5_intro.asp

http://www.w3schools.com/css3/default.asp

http://www.w3schools.com/

2

Mi a webtárhely?

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.

3

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

4

A STATIKUS WEBLAPFEJLESZTÉS

ESZKÖZEI

(TOOLS OF THE WEB

DEVELOPMENT)

5

A statikus weblapfejlesztés eszközei

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

http://www.textpad.com/ Adobe Dreamweaver CS3

http://www.editplus.com/ Microsoft SharePointDesigner 2007

http://www.oxygenxml.com/

http://www.crimsoneditor.com/

http://notepad-plus-plus.org/download/v6.5.3.html (!!!)

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.

6

A WEBLAPFEJLESZTÉS ALAPELVEI

(THE PRINCIPLES OF THE WEB

DEVELOPMENT)

7

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.

A weblapfejlesztés alapelvei, szabályok

8

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. 1024-30=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).

A weblapfejlesztés alapelvei

9

MILYEN WEBOLDAL

ELRENDEZÉSEK VANNAK?

(WEB LAYOUT DESIGNS)

10

Weboldal megjelenítésének tervezése,

layout megoldások

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: http://www.rocketmill.co.uk/the-difference-between-adaptive-liquid-responsive-and-static-web-design

11

Korábbi megoldások

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

12

Újabb technológiák

• 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: http://liquidapsive.com/

13

Reszponzív weboldalak

Leírások:

http://liquidapsive.com/

http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

http://blog.mobilstrategia.hu/reszponziv-weboldal-megvalto (kép forrása)

Példák:

http:// egreirege.hu

http://stephencaver.com

http://colly.com

14

A HTML LEÍRÓNYELV

(THE HTML DESCRIPTION LANGUAGE)

15

Mi a HTML?

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 leírónyelv utasításai „<” és „>” jelek között írandók.

Ezeket tag-eknek, elemeknek vagy jelölőknek nevezzük.

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

16

A HTML tag-ek/jelölők/elemek-re példa

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>

17

<img˽src="vmilyen_kep.jpg"˽alt="Virág"…>

jelölő attribútumok értékek

˽ = <SPACE>

A jelölők felépítése

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>

18

Böngészőprogramok

A böngészők

értelmezik a HTML

kódokat és abból

előállítják a

formázott, kész

weboldalt.

19

20

A HTML miért jelölőnyelv?

(akadálymentesítés a kód szintjén)

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ó!

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.

21

A HTML5-ös dokumentum

minimum szerkezete

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

22

fej

törzs

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>

23

A tartalom és a megjelenítés szétválasztása

Válasszuk külön a tartalmat és a formátumot!

HTML (HyperText Markup Language) = tartalom, struktúra

CSS (Cascading Style Sheets) = formátum

24

25

Rossz példa!!!

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!

Lássunk egy példát!

Telepítsük a Notepad++ ingyenes alkalmazást!

http://notepad-plus-plus.org/download/v6.5.3.html

Nézzük meg a következő weboldalakat:

http://www.ektf.hu/~csilla/gyak_html5

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

26

A SZABVÁNYOKRÓL

(ABOUT THE STANDARDS)

27

A szabványok kialakulása

1994-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: http://www.w3.org/.

28

Miért használjunk szabványokat?

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

29

A tartalom és a megjelenítés szétválasztása

Válasszuk külön a tartalmat és a formátumot!

HTML = tartalom, struktúra

CSS = formátum

Javascript = működés

30

A weboldal szerkezetének a felépítése

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.

31