BEVEZETÉS A WEBLAPFEJLESZTÉSBE

Kvaszingerné Prantner Csilla, EKF

2

A mai haladó technológia

http://www.w3schools.com/html/html5_intro.asphttp://www.w3schools.com/css3/default.asp

http://www.w3schools.com/

3

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ájá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, azaz 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árhelyekhez való hozzá regisztrálás után egy accounttal (hozzáféréssel) fogunk rendelkezni, amivel kapunk egy megadott méretű webtárhelyet, kapunk egy FTP elérést és egy webcímet.

4

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

5

A STATIKUS WEBLAPFEJLESZTÉS ESZKÖZEI

(TOOLS OF THE WEB DEVELOPMENT)

6

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őkhttp://www.textpad.com/ Adobe Dreamweaverhttp://www.editplus.com/ Microsoft SharePointDesigner 2007 (!!!)http://www.oxygenxml.com/http://www.crimsoneditor.com/http://notepad-plus.sourceforge.net/hu/site.htm (!!!)

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

A WEBLAPFEJLESZTÉS ALAPELVEI

(THE PRINCIPLES OF THE WEB DEVELOPMENT)

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

A weblapfejlesztés alapelvei, szabályok

9

2. Felbontással kapcsolatos alapelvek(FIX SZÉLESSÉGŰ LAYOUT ESETÉN)

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

10

MILYEN WEBOLDAL ELRENDEZÉSEK VANNAK?

(WEB LAYOUT DESIGNS)

11

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

12

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.

13

Ú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, ez a liquid és az adaptív ötvözése, így 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 atartalomra.

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/Példák:

2: Ez a működés hasonló ahhoz, mintha több statikus oldalunk lenne, különböző eszközökre,viszont könnyebség a liquid-hez képest az, hogy csak egy webhelyen kell lennie a tartalomnak.

14

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.huhttp://stephencaver.comhttp://colly.com

15

A HTML LEÍRÓNYELV

(THE HTML DESCRIPTION LANGUAGE)

16

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 <> 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.) és2.struktúrája (főcím, alcím, bekezdés,

lista, kiemelések stb.).

17

A HTML tag-ek/jelölők/elemek 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 />

18

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

19

Egy páratlan jelölőre/üres tag-re példa

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

jelölő attribútum

érték

20

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.

21

A HTML miért jelölőnyelv?(akadálymentesítés a kód szintjén)

A jelölők (tagek) segítségével jelöljük meg a dokumentum egyes részeit: hierarchia + formátum

22

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.

23

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>

24

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”><html> <head> <title>Title of the document</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link type="text/css" rel="stylesheet" media="all" href=”style.css" /> </head> <body> The content of the document...... </body></html>

25

Az a jó ha a tartalmat és a megjelenítést különválasztják!

Formázás HTML-attribútumokkal (nem jó megoldás):

Többször kell leírni ugyanazt a formátumot → több munka, nagyobb esély a tévesztéshez

26

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 Cascading Style Sheets

27

Lássunk egy példát!

Nyissuk meg a következő weboldalt:Test (bad, not accessibility): http://www.ektf.hu/~csilla/gyak_html/bad.htmlTest (good, accessibility, html5): http://www.ektf.hu/~csilla/gyak_html/Test (good, accessibility, html5, css): http://www.ektf.hu/~csilla/gyak_html/index_css.html éshttp://people.ektf.hu/kvcsilla/sites/oktatas/style_alap.css

Nézzük meg a forrásokat!!!Minden böngésző képe megjeleníteni a forráskódot, de a legjobb eszköz erre a Firefoxhoz telepíthető FireBug kiegészítő!

28

Telepítsük a Notepad++ alkalmazást! http://notepad-plus-plus.org/download/v6.5.3.html

Telepítsük a Ms SharePoint Designer 2007-es alkalmazást!

28

http://www.microsoft.com/hu-hu/download/details.aspx?id=21581

29

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