BEVEZETÉS A WEBLAPFEJLESZTÉSBE Kvaszingerné Prantner Csilla, EKF
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