Bevezetés a weblapfejlesztésbe - PowerPoint PPT Presentation

bevezet s a weblapfejleszt sbe n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Bevezetés a weblapfejlesztésbe PowerPoint Presentation
Download Presentation
Bevezetés a weblapfejlesztésbe

play fullscreen
1 / 31
Bevezetés a weblapfejlesztésbe
128 Views
Download Presentation
anja
Download Presentation

Bevezetés a weblapfejlesztésbe

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. Bevezetés a weblapfejlesztésbe Kvaszingerné Prantner Csilla, EKF

  2. A mai haladó technológia http://www.w3schools.com/ http://www.w3schools.com/html/html5_intro.asp http://www.w3schools.com/css3/default.asp

  3. Mi a webtárhely? Ha közzé szeretnénk tenni weboldalunkat az interneten, szükséges az, hogy egy webszervernekegy 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?

  5. A STATIKUS weblapfejlesztés eszközei(Tools of the Web Development)

  6. A statikus weblapfejlesztés eszközei • Böngészők: MozzillaFirefox, Safari, Opera, GoogleChromeé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 SharePointDesigner2007 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: MozzillaFilezilla 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. A weblapfejlesztés alapelvei(The Principles of the Web Development)

  8. A weblapfejlesztés alapelvei, szabályok 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ábbiakathaszná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 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 layoutottervezzü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 pxlegyen (kivéve a háttérképeket).

  10. Milyen weboldal elrendezések vannak?(web layoutdesigns)

  11. Weboldal megjelenítésének tervezése,layoutmegoldá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 • Staticwebdesignlayout(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. • Liquidlayout(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 (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/

  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.hu http://stephencaver.com http://colly.com

  15. A HTML leírónyelv(The HTML DescriptionLanguage)

  16. Mi a HTML? HTML (HiperTextMarkupLanguage) 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, elemeknekvagy jelölőknek nevezzük. • A HTML olyan jelölőnyelv, mellyel definiálható a weboldal: • tartalma (szövegek, képek táblázatok stb.) és • struktúrája (főcím, alcím, bekezdés, lista, kiemelések stb.).

  17. 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> <img˽src="vmilyen_kep.jpg"˽alt="Virág"…> attribútumok értékek jelölő ˽ = <SPACE>

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

  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. 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> fej törzs

  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> <htmllang=”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 • Válasszuk külön a tartalmat és a formátumot! • HTML (HyperTextMarkupLanguage) = tartalom, struktúra • CSS (CascadingStyleSheets) = formátum

  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ésrevan 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! • 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 GoogleChrome is. )

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

  28. 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: • awebtechnoló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/.

  29. 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 alehető 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 => • afejlesztési folyamat egyszerűbb. • a karbantartási folyamat könnyebb. 3. Egységes megjelenésű oldalaka 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 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 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: <divid="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.