Upload
others
View
3
Download
0
Embed Size (px)
Citation preview
Web-fejlesztésNGM_IN002_1
A tárgy tartalma
Mir!l lesz szó?
(F!leg, de nem csak) Tartalom orientált web technológiák
bemutatása
alap programozási- és reprezentációs technológiák,
alkalmazás architektúrák
Mir!l nem lesz szó?
Adott technológia részletes (tanfolyam-szer") oktatása
Oktatási forma:
El!adások
elméleti háttér
Gyakorlatok
technikai szemléltetés
TematikaElméleti el!adás Géptermi gyakorlat
Bevezetés
Történeti kitekintés, web alkalmazási területek,
technológiai trendek
Egyszer! webszerver írása Javaban
Web-alkalmazás architektúrák
Többréteg! kliens-szerver megoldások, web
keretrendszerek, szoftver komponensek,
protokollok
Apache web szerver konfigurálása, protokoll
elemzés forgalom monitorozással
Információ építészet
Web-design és használhatóság, fejlesztési
megközelítések, tervezési formalizmusok
Információ építészeti formalizmusok és
használatuk, használhatósági problémák elemzése
Alaptechnológiák
HTML, DOM, CSS, JavaScript, HTTP
HTML oldalak DOM-jának vizsgálata, JavaScript
írás
XML alapok
XML dokumentumok, XML DOM, XML
értelmezés és validálás
XML dokumentumok, DTD, XSD kezelése XML
szerkeszt"vel
XML feldolgozás
Xpath, XSLT
XSL transzformálás, Xpath kifejezések
kiértékelése XML szerkeszt"vel
Tematika (folyt.)Elméleti el!adás Géptermi gyakorlat
Webes XML technológiák
Az RSS és az SVG XML alkalmazások
RSS tartalom vizsgálata, SVG dokumentumok
létrehozása XML szerkeszt"vel
Dinamikus tartalom 1.
CGI és SSI megoldások, scriptnyelvekCGI írás C-ben, SSI használata
Dinamikus tartalom 2.
Java szervletekJava servlet írás, web alkalmazás telepítése
Dinamikus tartalom 3.
Template feldolgozó technikák: JSP, PHPPHP oldal írása, MySQL kapcsolat
Rich Internet Applications
Az AJAX megközelítés, OpenLaszlo keretrendszerAz AJAX technológia szemléltetése
Webszolgáltatások
XML-RPC, SOAP, WSDL és UDDI, RDFAz OpenLaszlo keretrendszer használata
Webes biztonsági kérdések
Biztonsági hibák, támadástípusok, védekezési
módok
Biztonsági hiba felderítés „Hack me“
alkalmazásban
Fejlesztési platform
Nyílt forrású megoldások:
Linux operációs rendszer (X felülettel, az alkalmazások és a fejlesztés
megkívánta szoftver-könyvtárakkal: Java 5, GD, Freetype2, libjpeg,
libpng, zlib, libxml, stb.)
XAMPP
Apache 2
MySQL 5,
PHP 5
perl
Apache Tomcat 6
OpenLaszlo 3.3.3
gcc
Netbeans 5.5
Exchanger XML Lite
Firefox, FireBug
curl, tcpdump, tcpflow
Ajánlott irodalom
Leon Shklar, Richard Rosen: Web Application Architecture, John Wiley & Sons Ltd.,
2003
Jesse James Garrett: The Elements of User Experience, New Riders Press, 2002
Virginia Debolt: HTML és CSS: Webszerkesztés stílusosan, Kiskapu, 2005
Michael Morrison: Tanuljuk meg az XML használatát 24 óra alatt, Kiskapu, 2006
Brett McLaughlin: Java és XML, (O’Reilly) Kossuth Kiadó, 2001
George Reese, Randy Jay Yarger, Tim King: A MySQL kezelése és használata,
(O’Reilly) Kossuth Kiadó, 2003
J. David Eisenberg: SVG kézikönyv, (O’Reilly) Kossuth Kiadó, 2003
Hans Bergsten: JavaServer Pages, (O’Reilly) Kossuth Kiadó, 2001
Jason Hunter, William Crawford: Java szervletek programozása, (O’Reilly) Kossuth
Kiadó, 2002
Rasmus Lerdorf, Kevin Tatroe: Programming PHP, O’Reilly 2002
Gál Tibor: Web programozás, M"egyetemi Kiadó, 2006
Nicholas C. Zakas, Jeremy McPeak, Joe Fawcett: Professionális AJAX, SZAK
Kiadó, 2007
Mike Andrews, James A. Whittaker: Hogyan törjünk fel webhelyeket, Kiskapu, 2007
Oktatási anyagok
El!adásvázlatok, gyakorlati segédletek
http://www.sze.hu/~heckenas/okt/
Követelmények
El!képzettség (ajánlatos)
HTML, CSS
Java, JavaScript
C, Perl, PHP
Hálózati ismeretek
Számonkérés
Vizsga (írás és szóbeli)
“Beugró” kérdések
Otthoni, önálló munka ismertetése
webalkalmazás fejlesztése
Bevezetés
A World Wide Web
Globális, elosztott hiperszöveg (hypertext)
rendszer
(REST elosztott rendszer)
Kliens-szerver szoftverarchitektúra
HTTP protokoll
URL er!forrás azonosítás
HTML tartalom definíció
Prezentációs technikák
Történelem
Els! web szoftverT. Berners Lee
Els! webcam
A Yahoo el!zménye online
Amazon.com elindul
Dotcom boom kezd!dik a t!zsdén
MS internet Explorer
Mosaic minden platformra
Alta Vista
Els! blog közösség
Dotcom boom tet!zik
Wikipedia megjelenése
Mozilla Firefox
youtube.com elindul
26 web szerver online
18957 webszájt online
342 000 webszájt online
20 000 000 webszájt online
93 000 000 webszájt online
Google cég megjelenése
Apple iTunes Music Store
1991 1995 2000 2005
Forrás: BBC
A Web, mint információs munkatérinformációs munka
kognitív munka
információ átalakítás
munka, tanulás, szabadid!
információ visszakeresés
kollaboráció
Forrás: Pederson
Web trendek
Web 1.0 (1990- ~2004)
statikus weboldalak, alacsony sávszélesség
vékonykliens intranet alkalmazások
Web 2.0 (~2004-)
social networking, web as platform
er!sen dinamikus tartalom, szélessáv
Web 3.0 ~ A jöv!
Semantic Web
Intelligens alkalmazások
Web-technológiákWebes megoldások létrehozására használt különböz!
technikák, eljárások
Programozási
pl.: JavaScript, PHP
Reprezentációs
pl.: XML, SVG
Adatátviteli, kommunikációs
pl.: XHR, média streaming
Vegyes
pl.: AJAX
Szabványok
W3C
de facto
A technológia változásaVáltozó felhasználás => új technológia megoldások
Tartalom kezel! keretrendszer (portál rendszer)
AJAX
Web 1.0 Web 2.0
HTML (proprietary) xhtml xmlCSS
JavaScript Flash
Java Applet
Adatbáziskezel!
CGI
Segéd alkalmazás
Beépül! modul
Klie
ns o
lda
lS
ze
rve
r o
lda
l
Te
ch
no
lóg
iaF
elh
aszn
álá
s
Szerver konténer (alk. szerver)Template feldolgozás
Servlet
Szociális hálózat Keresés
Online médiaTartalom aggregálás Tartalom kivonás
Weblog Címkézés (tagging)Hypertext
Intranet vékony kliens alk.
SVG
RSS
Media streaming
Tartalom kezelés
Content management system (CMS)
Webszájt tartalmának kezelése
Webes felületen keresztül
Publikálás megkönnyítése
Workflow támogatás
Portál keretrendszerek
pl.: Mambo, Joomla, Plone, különböz! Wikik
Példa
Web 2 trendek
Szemantikus Web (Semantic Web)
Mesterséges intelligencia (AI)
Virtuális terek (Virtual Worlds)
Mobil Web (Mobile Web)
Figyelem-gazdaság (Attention Economy)
Webszolgáltatások (Web Services)
Rich Internet Apps
Web TV
Szemantikus webAlapötlet:
Univerzális médium a Weben, géppel is feldolgozható
jelentéssel (szemantikával)
Webszer"en kialakított adatforrások
Cél:
Komplex szemantikus optimalizálási problémák
megoldása
Technológia:
adatokat leíró meta adatok
RDF (Resource Description Framework) - digráf: A(O,V),
XML
formális domén modellek -> ontológiák OWL
Mikroformátumok
HTML-be ágyazott szemantika
pl.: hCard, hCalendar
Mesterséges intelligenciaAlapötlet:
Mesterséges intelligencia web megoldások
Cél:
Korábban géppel nem megoldható feladatok
megoldása
Technológia:
AI techn. alkalmazása (pl. kereséshez)
számítási paradigma: neurális hálózatok,
sejtautomaták
Információ vizualizálás
Példa
Példa
Virtuális terek
Alapötlet:
Virtuális terek (világok) használata a Weben
Valódi helyek annotálása digitális információval
Cél:
Vonzó szociális és szórakoztató környezetek
létrehozása
Példa
Példa
Mobil WebAlapötlet:
Web használata mobil eszközökkel
Cél:
Használható Web élmény biztosítása mobil
környezetben
Perszonalizált ajánlatok, térképek, szociális alk.
Technológia:
Mobil portálok
Gateway megoldások
pl.: WAP, web’n’walk
Mobil böngész!k
pl.: Opera, iPhone Példa
Figyelem-gazdaság
Alapötlet:
Figyelemért cserébe szolgáltatást
Cél:
Információ túlterhelés hasznot hozó
csökkentése
Technológia:
Figyelem rögzítés (attention capturing), figyelmi
szolgáltatások (attention services)
Perszonalizálás, releváns tartalom
Személyiségi jogok biztosítása!
Példa
WebszolgáltatásokAlapötlet:
A webszájtok ne csak interaktív emberi fogyasztásra
kialakított tartalmat szolgáltassanak
Cél:
A Web platformmá és adatbázissá alakítása
Technológia:
Open (REST) API
nyílt információ-forrás
szolgáltatás manipulálás
Mashup, Web scraping
HTML parszolás
webbots, spiders
Szolgáltatás leírás (Szemantikus Web)
Szerz!i jogi kérdések
Példa
Példa
Rich Internet AppsAlapötlet:
Gazdag, grafikus interfésszel ellátni a webes
alkalmazásokat
Cél:
Jobb felhasználói élmény biztosítása
Technológia:
Hibrid web/desktop alkalmazások
Böngész! alapú alkalmazások (webtop)
Webesített desktop alkalmazások
RIA platformok
vékonykliens GUI (1 page)
aszinkron adatcsere
pl.: AJAX, OpenLaszlo
Példa
Példa
Példa
Web TV
Alapötlet:
Online (perszonalizált) video streamelés webes
környezetben (webcasting)
Cél:
Internet TV
Technológia:
Média streamelés
RIA playerek
Példa
Vissza
CMS rendszerek
SproutBuilderJoomla
Vissza
MI keres!gép
hakia.com
Vissza
Keresés info vizualizálással
kartoo.com
quintura.com
Vissza
Virtuális szociális terek
gaiaonline.com secondlife.com
Vissza
Digitális annotáció
Google Earth
Vissza
Mobil böngész!
Apple iPhone Safari
Vissza
Személyre szabott ajánlatok
Amazon.com
Vissza
Web API
GoogleMaps API használata
Vissza
Web scraping
dapper.net
Vissza
Webtop
goowy
Vissza
Webesített alkalmazás
iTunes
Vissza
RIA
OpenLaszlo webalkalmazás
Vissza
Online video
YouTube
TV4