WEB TECHNOLÓGIÁK. Dr. Pál László Sapientia EMTE, Csíkszereda, tanév, II. Félév

Átírás

1 WEB TECHNOLÓGIÁK 1.ELŐADÁS Dr. Pál László Sapientia EMTE, Csíkszereda, tanév, II. Félév

2 Előadás tematika 1.Előadás: Bevezetés 2. Előadás: A HTML alapjai 3. Előadás: 4. Előadás: 5. Előadás: 6. Előadás: Stíluslapok használata Kliens oldali programozás Javascript nyelven Bevezetés a jquery-be Projektek bemutatása

3 Labor tematika 1.Labor: 2.Labor: 3.Labor: 4.Labor: 5.Labor: 6.Labor: 7.Labor: 8.Labor: 9.Labor: 10.Labor: 11.Labor: HTML nyelvi elemek CSS bevezetés (anatómia, szelektorok) CSS formázások (szöveg, margó, kitöltés, szegély) CSS formázások (képek, háttér, linkek, menük) CSS formázások (táblázatok, űrlapok) Weboldalak kialakítása (fixed, float, elastic) Responsive oldalak Javascript, jquery bevezető Javascript, jquery gyakorlatok Javascript, jquery gyakorlatok Zárthelyi dolgozat

4 Könyvészet és dokumentáció Könyvtári könyvek Virginia DeBolt: HTML és CSS : webszerkesztés stílusosan, Kiskapu, Budapest, Traian Anghel: Dezvoltarea aplicatiilor WEB folosind XHTML, PHP si MySQL, Polirom, Bodnár István, Magyari Gyula: Az Internet használata II. : HTML, CSS. Michael Moncur: Tanuljuk meg a JavaScript használatát 24 óra alatt, Kiskapu Kft., Sikos László: JavaScript 1.5: kliens oldalon.

5 Könyvészet és dokumentáció Hasznos linkek W3Schools Online Web Tutorials: Fejlesztői forrás: Web-fejlesztés portál:

6 Könyvészet és dokumentáció Előadások, labor feladatok, egyéb dokumentációk megtálalhatok az alábbi linken:

7 Vizsgakövetelmények 7 Felmérési mód: kollokvium Zárthelyi: 60% (11. hét (Labor)) Gyakorlat + Elmélet Projekt: 30% (védés hét (Előadás)) Házi feladat: 10% Mind a zárthelyi és projekt, átmenő (5-ös) kell legyen a sikeres vizsgához Labor óra: max 3 hiányzás engedélyezett Részletes követelmények

8 Bevezetés 1. Az internet története 2. A web története 3. Kliens-szerver modell 4. Web alapismeretek 5. Fejlesztési eszközök

9 Az internet története 1957: a Szputnyik kilövése (a világ első műholdja) az ARPA (Advanced Research Projects Agency) létrehozása az USA Hadügyminisztériumán (Department of Defense) belül 1969: az ARPANET (Advanced Research Projects Agency Network) létrehozása kezdetben négy csomópont 1971: oktatási és kutatási intézmények kapcsolódása 15 csomópont (23 számítógép) 1972-ben megszületett az első program

10 Az ARPANET képekben

11 Az internet története 1973: az első nemzetközi kapcsolat az ARPANET-hez (Anglia és Norvégia) az Internet kialakulása 1983: a MILNET (Military Network; amerikai katonai hálózat) leválása további hálózatok kapcsolódása 1990: az ARPANET megszűnik az Internet további fejlődése 1990-es évek a World Wide Web kialakulása alkalmazások számának robbanásszerű növekedése 1990-es évek vége az Internet globalizálódása az Internet popularizálódása

12 Az internet hálózata

13 Az internet működése A gépek közötti kommunikáció kisméretű adatcsomagok formájában valósul meg. Ezek a csomagok tartalmazzák a feladó és a címzett adatait, de az útirány mindig az adott helyzettől (például az útvonal terheltségétől) függően, az egyes hálózati csomópontokhoz érkezve dől el

14 Az internet története Az internet által összekapcsolt gépek kommunikációs nyelve a TCP/IP(Transmission Control Protocol/Internet Protocol) protokoll. Számítógépek azonosítása: minden internetre kapcsolódó számítógép egy egyedi számot kap. Ezt a számot IP-címnek nevezzük. Az IP szám egy 32 jegyű kettes számrendszerbeli szám. Hogy könnyebben lehessen kezelni, 4 db 8 bites részre bontják

15 Az internet története - Tartománynév (Domain name) A tartománynév (angolosan domainnév, illetve doménnév) egy számítógép egyedi neve. A tartománynevek csupán címkék melyeket a nehezen megjegyezhető IP-címek helyett használhatunk. A doménnevek végződésük alapján alapvetően két nagy csoportba oszthatók: nemzetközi fődomének (.com,.net,.org) és nemzeti domének (.hu,.ro,.fr,.jp stb.). A tartománynevek rendszerének felépítése hierarchikus Amennyiben a domén mögött internetes tartalom (honlap) van, a doménhez tartozó, tárhelyen lévő kezdőlapot (index.html vagy index.php stb.) a szerver kiszolgálója elküldi a világháló segítségével a böngésző számítógépére.

16 Az internet története - DNS rendszer Ahhoz, hogy a domain név alapján az IP cím (vagy fordítva: az IP cím alapján egy domain név) megállapítható legyen, szükség van a DNS (Domain Name System) szerverekre.

17 A világháló World Wide Web A világháló (angolul World Wide Web, WWW vagy röviden Web) az interneten működő, egymással összekötött dokumentumok rendszere A felhasználó a dokumentumokon található hiperlinkek segítségével további lapokat kérhet le, amelyeken újabb hiperlinkek lehetnek A rendszer "háló"- jellegét is ez adja; a dokumentumok a háló csomópontjai, míg a hiperlinkek a háló szálai, amelyeken keresztül egy vagy több lépésben tetszőleges csomóponthoz eljuthatunk

18 A wikipedia hiperhivatkozásai

19 A web története 1989: Tim Berners-Lee (CERN részecskefizikai kutatóközpont munkatársa) kidolgozta a web alapelveit Eredeti cél: a különböző intézményekben világszerte dolgozó kutatók közötti automatizált információ megosztás Az ötlet: egy globális információs hálózat létrehozása a számítógépek, a számítógépes hálózat és a hiperszöveg (hypertext), hiperhivatkozás (hyperlink) képességeinek ötvözésével 1992 január (Genf) - a WEB első nyilvános használata április 30 - CERN bejelentette, hogy a világháló mindenki számára szabad és ingyenes

20 A web története A WWW komponensei: Weboldal, weblap (HTML nyelven) - dokumentumok, amelyek hiperhivatkozásokat tartalmaznak Webszerver - weboldalak elérése Webböngésző (kliens program, browser) - információ lekérése

21 A web története A WWW elterjedése: az NCSA továbbfejlesztette a rendszert, így lehetőség adódott képek, grafikák átvitelére is. Hipermédia rendszer: hipertextbe ágyazva lehetőség van hang megszólaltatására, állókép megjelenítésére illetve mozgókép bejátszására is NCSA Mosaic az Illinois-i Egyetemen működő NCSA (National Center for Supercomputing Applications) által kibocsátott első ingyenes böngésző Egy éven belül már kb. 2 millióan használták

22 A web története A WWW elterjedése: Ezt követően drasztikusan megnőtt a böngészők száma ("böngészők háborúja" ) Lynx (1993, Kansas), szöveges terminálokra Netscape Navigator (1994 december - Marc Andreessen, Jim Clark) Microsoft Internet Explorer (1995, később nagyon népszerű) Mozilla (2002, nyílt forráskódú), Firefox (2004), Opera (1994, Norvégia), Chrome ( Google)stb.

23 A web története Kis böngésző statisztika (

24 A web története Kis böngésző statisztika (

25 Webes szabványok Tim Berners-Lee megalapította a W3C-t (World Wide Web Consortium) a Massachusetts-i Technológiai Intézetnél Tagjai: IBM, Microsoft, America Online, Apple, Adobe, Macromedia, Sun Microsystems Cél: a különböző protokollok és technológiák szabványosítása egy olyan web felépítésének érdekében, amelyen az információ a világ népességének lehető legnagyobb része számára elérhetővé válhat. Kiadott specifikációk (ajánlások): HTML 4.0, a PNG képek szerkezete, vagy a CSS első és második verziója. A W3C nem követeli meg az ajánlások betartását A W3C weboldala:

26 Kliens-szerver modell A Web kliens-szerver modellt alkalmaz az információk megosztására és terjesztésére. A rendszer működése: A kliens (böngésző) program kérést küld a webszervernek A webszerver értelmezi az üzenetet és választ küld a kliensnek válasz = a kért dokumentum + kiegészítő információk A böngésző: értelmezi a kapott dokumentumot, majd megjeleníti/lementi/futtatja azt a felhasználói gépen Az információ-csere a HTTP protokoll segítségével történik

27 Egy weboldal lekérése

28 Webcímek - URL Az interneten található különböző erőforrásokra (weboldalakra, címekre, letölthető fájlokra, stb.) az URL-ek (Uniform Resource Locator - Egységes erőforrás helymeghatározó) segítségével hivatkozhatunk. Az URL általános formája: [protokoll://][gazdagép ][:port ][kérés útvonala ] protokoll: meghatározza a kommunikáció módját (pl. http, https, ftp, mailto, stb.) gazdagép: azonosítja a számítógépet, amelynek a kérést címezzü [gépnév ].[altartomány(ok) ].[tartomány ] port: http-nél alapértelmezett a 80-as kérés útvonala: a kért erőforrás neve, elérési útként megadva

29 URL példák protokol: http tartománynév: portszám: alapértelmezett elérési útvonal: nincs protokol: https tartománynév: portszám: alapértelmezett elérési útvonal: contul-meu

30 A HTTP protokoll HTTP (HyperText Transfer Protocol - Hiperszöveg Átviteli Protokoll): Egy kliens és egy szerver (kiszolgáló) közötti (kérés/válasz alapú) kommunikáció leggyakoribb megvalósítási módja Multimédiás fájlok továbbításához a HTTP a MIME (Multipurpose Internet Mail Extension) specifikációt használja. négylépéses eljárást használ egy átvitel véghezviteléhez úgynevezett metódusokat használ az erőforrások kezeléséhez. A HTTP lehetővé teszi, hogy az alkalmazások fontos információkat közöljenek azokról az adatokról, amelyeket ügyfelek és kiszolgálók részére küldenek az Interneten keresztül

31 A HTTP protokoll Fontosabb tulajdonságai: Állapot nélküli: azt jelenti, hogy a böngészőnek és a kiszolgálónak minden egyes HTTP művelethez létre kell hoznia, majd meg kell szakítania a hálózati kapcsolatot Általános: A HTTP üzenetei az ügyfél által elküldött kérésekből és a kiszolgáló által az ügyfélnek visszaküldött válaszokból állnak. üzenetformátum opcionális fejlécmezőket (fejléceket) és egy törzset (magát a dokumentumot) tartalmazhat A HTTP üzenetformátuma azért általános, mert az üzenetformátumok függetlenek a HTTP protokolltól, azaz nem törődik a törzs tartalmával

32 MIME A MIME (Multipurpose Internet Mail Extension) műszaki specifikációt jelent, ami azt írja elő, hogy miképpen továbbíthatók multimédiás adatok az Internet levelezőszabványaival. Előírja a multimédiás fájlok formátumát. Amikor egy Web-kiszolgáló egy fájlt vagy dokumentumot küld az Interneten keresztül egy böngészőnek (vagy valamilyen más ügyfélprogramnak), akkor a kiszolgáló a fájl típusát leíró információt beilleszti egy MIME fejlécbe A fájlt fogadó program az ebben a fejlécben található információk alapján határozza meg az ezt követő adatok típusát (a fájl típusát)

33 A MIME tartalomtípusok Egy üzenet a sima szöveg mellett számos egyéb dolgot is tartalmazhat A Content-type fejléc jelzi, hogy a fogadónak a kapott bájtsorozatot ezek melyikeként kell értelmeznie A fejléc egy típus/altípus alakú text (szöveg ember által is olvasható szöveges formátum) image (kép) audio (hang) application (alkalmazás általában egy specifikus szoftver által használt formátum)

34 A MIME tartalomtípusok

35 A HTTP protokoll 35 A HTTP üzenetváltás lépései Kliens és szerver közti kapcsolat felépítése A kliens egy kérést (request) küld a szervernek A szerver a kérés fogadása és a kért feladatok elvégzése után egy választ (response) küld vissza a kliensnek Mindkét fél bontja a kapcsolatot

36 A HTTP kérés (request) 36 A kérés tartalma: Első sor: Metódus erőforrás verzió Fejlécsorok: Fejléc: érték Üres sor Nem kötelező üzenet

37 A HTTP kérés - Példa 37 Példa kérésre (request): Első sor: GET /index.php HTTP/1.1 A többi fejléc sor:

38 A HTTP kérés - metódusok 38 GET Megadott erőforrás letöltése POST Feldolgozandó adat felküldése HEAD Ld. GET, de csak a válasz fejléceket kéri le PUT Feltölt a megadott erőforrást DELETE Törli a megadott erőforrást

39 A HTTP kérés - metódusok 39 TRACE Visszaküldi a kapott kérést OPTIONS A szerver által támogatott HTTP metódusok listája CONNECT Kérést transzparens tunnellé alakítja (SSL-hez kell)

40 HTTP válasz (response) 40 A válasz tartalma: Első sora: státuszsor VERZIÓ STÁTUSZKÓD INDOKLÁS Fejlécsorok tetszőleges számban FEJLÉC: ÉRTÉK párok Üres sor Opcionális üzenet törzs

41 HTTP válasz - státuszsor 41 Státuszkód lehetséges értékei: 1xx: Informatív (kérés megkapva) 2xx: Siker (kérés megérkezett, elfogadva) 200 OK 3xx: Átirányítás (további műveletre van szükség) 4xx: Kliens hiba (kérés hibás, nem teljesíthető) 404 Not found 404 Nem található 5xx: Szerver hiba (nem tudja teljesíteni a kérést) 500 Internal Server Error

42 A HTTP válasz - Példa 42 Példa válaszra:

43 HTTP eszközök 43 Böngésző kiegészítők: HTTPFox

44 HTTP eszközök 44 Böngésző kiegészítők: Live HTTP headers

45 HTTP kérés - URL 45 Általános forma: <scheme>://<host>:<port>/<path>?<query>#<fragment> Ahol: Scheme: kommunikáció módját (pl. http, https, ftp,mailto, stb.) Host: azonosítja a számítógépet, amelynek a kérést címezzük Port: kommunikáció portja (pld. http-nél 80) Path: a kért erőforrás elérési útja a szerveren Query: lekérdező sztring Fragment: egy oldalon belőli elhelyezkedés

46 Fejlesztési eszközök Böngészők: Mozilla FireFox Chrome Opera Microsoft Explorer Böngésző kiegészítő FireBug: a FireFox kegészítője. Weboldal készítéshez, tanulmányozáshoz használjuk. Szerkesztő (HTML, CSS): NetBeans Notepad++

47 Fejlesztési eszközök FTP (File Transfer Protocol - állománytovábbító protokoll) kliens programok: WinSCP SmartFTP A webes projekteket minden hallgató egy FTP kliens A webes projekteket minden hallgató egy FTP kliens program segítségével tudja a szerverre másolni

48 A NetBeans fejlesztői környezet A NetBeans IDE ( Integrated Development Environment ) egy nyílt forráskódú integrált fejlesztői környezet, amely a Java nyelven alapul. A Sun Microsystems 2000 júniusában hozta létre, ma már az Oracle fejleszti tovább. Lehetővé teszi a programozók számára, hogy programokat írjanak, fordítsanak, teszteljenek, hibakeresést végezzenek az alkalmazásokban, programokat telepítsenek tol PHP támogatást is kapott, így lehetőség van PHP alapú webalkalmazások készítésére A oldalról tölthető le. A telepítéséhez szükség van java környezetre, amely a oldalról tölthető le.

49 A NetBeans letölthető változatai

50 A NetBeans tulajdonságai Szin sémák használata Kódkiegészítés Hibakeresés Kódkiemelés Kódrendezés (Jobb klikk a kódon -- Format) HTML állományok megtekintése a böngészőben (Jobb klikk a kódon -- View (Shift+F6))

51 Könyvészet