Web-fejlesztés NGM_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
Tematika Elméleti el!adás Bevezetés Történeti kitekintés, web alkalmazási területek, technológiai trendek Web-alkalmazás architektúrák Többréteg! kliens-szerver megoldások, web keretrendszerek, szoftver komponensek, protokollok Információ építészet Web-design és használhatóság, fejlesztési megközelítések, tervezési formalizmusok Alaptechnológiák HTML, DOM, CSS, JavaScript, HTTP XML alapok XML dokumentumok, XML DOM, XML értelmezés és validálás XML feldolgozás Xpath, XSLT Géptermi gyakorlat Egyszer! webszerver írása Javaban Apache web szerver konfigurálása, protokoll elemzés forgalom monitorozással Információ építészeti formalizmusok és használatuk, használhatósági problémák elemzése HTML oldalak DOM-jának vizsgálata, JavaScript írás XML dokumentumok, DTD, XSD kezelése XML szerkeszt"vel 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 Dinamikus tartalom 1. CGI és SSI megoldások, scriptnyelvek Dinamikus tartalom 2. Java szervletek Dinamikus tartalom 3. Template feldolgozó technikák: JSP, PHP RSS tartalom vizsgálata, SVG dokumentumok létrehozása XML szerkeszt"vel CGI írás C-ben, SSI használata Java servlet írás, web alkalmazás telepítése PHP oldal írása, MySQL kapcsolat Rich Internet Applications Az AJAX megközelítés, OpenLaszlo keretrendszer Webszolgáltatások XML-RPC, SOAP, WSDL és UDDI, RDF Webes biztonsági kérdések Biztonsági hibák, támadástípusok, védekezési módok Az AJAX technológia szemléltetése Az OpenLaszlo keretrendszer használata 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 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 Amazon.com elindul Alta Vista Google cég megjelenése Apple itunes Music Store Els! web szoftver T. Berners Lee Els! webcam Els! blog közösség Wikipedia megjelenése youtube.com elindul 1991 1995 2000 2005 Mosaic minden platformra MS internet Explorer Mozilla Firefox A Yahoo el!zménye online Dotcom boom kezd!dik a t!zsdén Dotcom boom tet!zik Forrás: BBC A Web, mint információs munkatér informá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ák Webes 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ása Változó felhasználás => új technológia megoldások Web 1.0 Web 2.0 Technológia Felhasználás Kliens oldal Szerver oldal Hypertext CGI Beépül! modul Segéd alkalmazás Java Applet Weblog Tartalom aggregálás Szociális hálózat Tartalom kezel! keretrendszer (portál rendszer) Adatbáziskezel! AJAX Szerver konténer (alk. szerver) Template feldolgozás Servlet Címkézés (tagging) Tartalom kivonás Intranet vékony kliens alk. JavaScript HTML (proprietary) xhtml CSS xml RSS SVG Keresés Online média Media streaming Flash 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
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 web Alapö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 intelligencia Alapö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 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
Mobil Web Alapö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 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!
Webszolgáltatások Alapö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 Rich Internet Apps Alapö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
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 CMS rendszerek Joomla SproutBuilder
MI keres!gép hakia.com Keresés info vizualizálással quintura.com kartoo.com
Virtuális szociális terek gaiaonline.com secondlife.com Digitális annotáció Google Earth
Mobil böngész! Apple iphone Safari Személyre szabott ajánlatok Amazon.com
Web API GoogleMaps API használata Web scraping dapper.net
Webtop goowy Webesített alkalmazás itunes
RIA OpenLaszlo webalkalmazás Online video TV4 YouTube