WEB TECHNOLÓGIÁK 1.ELŐADÁS Dr. Pál László Sapientia EMTE, Csíkszereda, 2014-2015 tanév, II. Félév
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
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
Könyvészet és dokumentáció Könyvtári könyvek Virginia DeBolt: HTML és CSS : webszerkesztés stílusosan, Kiskapu, Budapest, 2005. Traian Anghel: Dezvoltarea aplicatiilor WEB folosind XHTML, PHP si MySQL, Polirom, 2005. 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., 2006. Sikos László: JavaScript 1.5: kliens oldalon.
Könyvészet és dokumentáció Hasznos linkek W3Schools Online Web Tutorials: http://www.w3schools.com http://www.tutorialspoint.com/css/ Fejlesztői forrás: http://weblabor.hu/ Web-fejlesztés portál: http://webfejlesztes.inf.elte.hu http://codeguide.hu/
Könyvészet és dokumentáció Előadások, labor feladatok, egyéb dokumentációk megtálalhatok az alábbi linken: http://www.emte.siculorum.ro/~pallaszlo/oktatas_hu.html
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 - 11. 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
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
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ő e-mail program
Az ARPANET képekben
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
Az internet hálózata
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
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
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.
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.
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
A wikipedia hiperhivatkozásai
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 1993. április 30 - CERN bejelentette, hogy a világháló mindenki számára szabad és ingyenes
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
A web története A WWW elterjedése: 1993 - 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 1993 - 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
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 (2008 - Google)stb.
A web története Kis böngésző statisztika (http://gs.statcounter.com):
A web története Kis böngésző statisztika (http://gs.statcounter.com):
Webes szabványok 1994 - 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: http://www.w3.org/
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
Egy weboldal lekérése
Webcímek - URL Az interneten található különböző erőforrásokra (weboldalakra, e-mail 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
URL példák http://www.sapientia.ro protokol: http tartománynév: www.sapientia.ro portszám: alapértelmezett elérési útvonal: nincs https://www.orange.ro/contul-meu protokol: https tartománynév: www.orange.ro portszám: alapértelmezett elérési útvonal: contul-meu
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
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
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)
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)
A MIME tartalomtípusok
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
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
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:
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
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)
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
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
A HTTP válasz - Példa 42 Példa válaszra:
HTTP eszközök 43 Böngésző kiegészítők: HTTPFox
HTTP eszközök 44 Böngésző kiegészítők: Live HTTP headers
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
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++
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
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. 2010-tol PHP támogatást is kapott, így lehetőség van PHP alapú webalkalmazások készítésére A www.netbeans.org oldalról tölthető le. A telepítéséhez szükség van java környezetre, amely a www.java.com/en/download/index.jsp oldalról tölthető le.
A NetBeans letölthető változatai
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))
Könyvészet http://hu.wikipedia.org http://www.w3schools.com http://webfejlesztes.inf.elte.hu