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: 2. Előadás: 3. Előadás: 4. Előadás: 5. Előadás: 6. Előadás:
Bevezetés A HTML alapjai Stíluslapok használata Kliens oldali programozás Javascript nyelven Bevezetés a jQuery-be Projektek bemutatása
Labor tematika 1.Labor:
HTML nyelvi elemek
2.Labor:
CSS bevezetés (anatómia, szelektorok)
3.Labor:
CSS formázások (szöveg, margó, kitöltés, szegély)
4.Labor:
CSS formázások (képek, háttér, linkek, menük)
5.Labor:
CSS formázások (táblázatok, űrlapok)
6.Labor:
Weboldalak kialakítása (fixed, float, elastic)
7.Labor:
Responsive oldalak
8.Labor:
Javascript, jQuery bevezető
9.Labor:
Javascript, jQuery gyakorlatok
10.Labor:
Javascript, jQuery gyakorlatok
11.Labor:
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. 2. 3. 4. 5.
Az internet története A web története Kliens-szerver modell Web alapismeretek Fejlesztési eszközök
Az internet története
1957: a Szputnyik kilövése (a világ első műholdja)
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
az ARPA (Advanced Research Projects Agency) létrehozása az USA Hadügyminisztériumán (Department of Defense) belül
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 Macromedia, Sun Microsystems
Online,
Apple,
Adobe,
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
POST
Ld. GET, de csak a válasz fejléceket kéri le
PUT
Feldolgozandó adat felküldése
HEAD
Megadott erőforrás letöltése
Feltölt a megadott erőforrást
DELETE
Törli a megadott erőforrást
A HTTP kérés - metódusok 39
TRACE
OPTIONS
Visszaküldi a kapott kérést 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>://
:<port>/<path>?#
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:
Böngésző kiegészítő
Mozilla FireFox Chrome Opera Microsoft Explorer 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 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
