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
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, scriptnyelvek
CGI írás C-ben, SSI használata
Dinamikus tartalom 2. Java szervletek
Java servlet írás, web alkalmazás telepítése
Dinamikus tartalom 3. Template feldolgozó technikák: JSP, PHP
PHP oldal írása, MySQL kapcsolat
Rich Internet Applications Az AJAX megközelítés, OpenLaszlo keretrendszer
Az AJAX technológia szemléltetése
Webszolgáltatások XML-RPC, SOAP, WSDL és UDDI, RDF
Az 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 26 web szerver online
18957 webszájt online Amazon.com elindul
Els! web szoftver T. Berners Lee
342 000 webszájt online
Alta Vista
Google cég megjelenése
Els! webcam
1991
20 000 000 webszájt online
Mosaic minden platformra
A Yahoo el!zménye online
Apple iTunes Music Store
Els! blog közösség
1995
93 000 000 webszájt online
Wikipedia megjelenése
youtube.com elindul
2000
MS internet Explorer
Dotcom boom kezd!dik a t!zsdén
2005
Mozilla Firefox
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
Felhasználás
Szociális hálózat Hypertext
Keresés
Weblog
Címkézés (tagging)
Tartalom aggregálás
Tartalom kivonás
Online média
Intranet vékony kliens alk. Tartalom kezel! keretrendszer (portál rendszer)
Szerver oldal
AJAX Szerver konténer (alk. szerver) Template feldolgozás Servlet
Media streaming
CGI
Beépül! modul
Kliens oldal
Technológia
Adatbáziskezel!
JavaScript
Segéd alkalmazás
Flash
SVG
Java Applet HTML (proprietary)
RSS
xhtml
CSS
xml
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 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, Példa sejtautomaták Példa Információ vizualizálás
Virtuális terek Alapötlet: Virtuális terek (világok) használata a Weben
Példa
Valódi helyek annotálása digitális információval
Példa
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 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á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 Példa szolgáltatás manipulálás Mashup, Web scraping HTML parszolás Példa 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
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
CMS rendszerek
Joomla
SproutBuilder Vissza
MI keres!gép
hakia.com
Vissza
Keresés info vizualizálással quintura.com
kartoo.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 TV4
YouTube
Vissza
