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