1 / 31

Bevezetés a weblapfejlesztésbe

Bevezetés a weblapfejlesztésbe. Kvaszingerné Prantner Csilla, EKF. A mai haladó technológia. http://www.w3schools.com/. http://www.w3schools.com/html/html5_intro.asp. http://www.w3schools.com/css3/default.asp. Mi a webtárhely ?.

anja
Télécharger la présentation

Bevezetés a weblapfejlesztésbe

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

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.

More Related