Az előadás letöltése folymat van. Kérjük, várjon

Az előadás letöltése folymat van. Kérjük, várjon

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

Hasonló előadás


Az előadások a következő témára: "BEVEZETÉS A WEBLAPFEJLESZTÉSBE Kvaszingerné Prantner Csilla, EKF."— Előadás másolata:

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

2 A mai haladó technológia 2

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

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

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

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ők Dreamweaver SharePointDesigner 2007 (!!!) (!!!)  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

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

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.: / ?. : ~ *), -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

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

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

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

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

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

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

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

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.) és 2.struktúrája (főcím, alcím, bekezdés, lista, kiemelések stb.). 16

17 A HTML tag-ek/jelölők/elemek példa  Páros jelölők (tag-ek/elemek) pl.:  …  Páratlan, önálló jelölők, üres (tag-ek/elemek) pl.:  17

18 A jelölők felépítése  Páros jelölők (tag-ek/elemek) …  Páratlan, önálló jelölők, üres (tag-ek/elemek) = 18

19 Egy páratlan jelölőre/üres tag-re példa jelölő attribútum érték 19

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

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 21

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, 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 tag párok, amely a megjelenítendő információkat tartalmazza. 22

23 A HTML5-ös dokumentum minimum szerkezete Title of the document The content of the document

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 Title of the document The content of the document

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 25

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 26

27 Lássunk egy példát!  Nyissuk meg a következő weboldalt: Test (bad, not accessibility): Test (good, accessibility, html5): Test (good, accessibility, html5, css): és  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ő! 27

28 Telepítsük a Notepad++ alkalmazást! 28  plus.org/download/v6.5.3.html plus.org/download/v6.5.3.html Telepítsük a Ms SharePoint Designer 2007-es alkalmazást! 28  hu/download/details.aspx?id= hu/download/details.aspx?id=21581

29 A weboldal szerkezetének a felépítése HTML4-ben erre a célra a jelölőket használtuk, HTML4-ben például a következőképpen fest a fejléc megadása: fejléc HTML5-ben viszont ezek helyett az un. oldalszerkezet tageket vezették be, melyek a következők:  header, fejléc  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. 29


Letölteni ppt "BEVEZETÉS A WEBLAPFEJLESZTÉSBE Kvaszingerné Prantner Csilla, EKF."

Hasonló előadás


Google Hirdetések