Tartalomkezelés Vándor Tamás C M S április 29.

Arculat és tartalom szétválasztása. (XML, XSL)  Rovat ( menü)  Oldal séma (template)  Cikk, dokumentum, kép, média, link - listázó  Cím, alcím, lead, cikktörzs  Modul - Portlet  XML kimenet - RSS

Általános CMS felépítése

CMS rendszer elemei I.  Külső, felhasználói adatbevitel  Beszédes URL értelmező  Biztonsági alrendszer  Jogosultság kezelő  Dokumentum/oldal lekérdező motor  Környezeti változók kiértékelés  Gyorsítótár vizsgálat  Rovat és kapcsolódó séma/minta lekérdezése  Dokumentum/oldal összeállító motor  Belső nyelvi értelmező ( XML -> XML )  Modulok meghívása  Külső integrált modulok meghívása  Perszonalizáció

CMS rendszer elemei II.  Gyorsítótár (cache)  Prezentációs réteg  XSL transzformáció+CSS  Nyelvi elemek  Adminisztrációs rendszer  Alapszolgáltatások  Naplózás  Statisztika  Verziókezelés  Indexelés és keresés  Adatbázis absztrakciós réteg  Ütemezett feladatok  Külső komponensek  Relációs adatbázis  XML dokumentum alapú adatbázis  Fájlrendszer  Statisztikai mérőrendszer (pl. Google Analytics, Webaudit, AWSTATS)

Kötegelt (batch) vs. dinamikus publikálás  Dinamikus: kérésre dinamikusan összeállítja az oldalt a sémák (template) alapján  Kötegelt: a publikálás külön lépés, egyszerre frissíti a teljes portált  Dinamikus  Előnyök: azonnali frissítés, hatékony publikálás, WYSIWYG szerkesztés, verziókezelés, jogosultságkezelés (Intra-,Extra-,Internet egybemosása)  Hátrányok: erőforrás és teljesítményigény, komplex, biztonság, költségek, licencdíjak, nem keresőbarát, technikai URL-ek  Kötegelt  Előnyök:teljesítmény a statikus oldalak miatt; szabványos és keresőbarát oldalak; elkülönített, biztonságos szerkesztés;megbízhatóság;dinamikus oldalak többféle nyelven;egyszerű  Hátrányok:kevesebb funkció; nem valós idejű publikálás;publikálás időigénye  Kötegelt dinamikus tulajdonságokkal felruházása során elveszíti előnyeit!

Megbízhatóság, terheléselosztás

Server Software:Apache Server Port:80 Document Path:/ Document Length:264,927 bytes Concurrency Level:500 Time taken for tests: seconds Complete requests:1,000 Failed requests:0 Write errors:0 Total transferred:315,117,576 bytes HTML transferred:314,618,016 bytes Requests per second:35.40 [#/sec] (mean) Time per request:28.25 [ms] (mean, across all concurrent requests) Transfer rate:11, [Kbytes/sec] received Ez egy 4 éves web szerver: 35.4 #/sec -> #/óra/szerver (=35.4 x 3600) -> #/óra (= x 8) egy 8 szerveres terheléselosztott infrastruktúra. Monitorozás: hibaszintek, riasztás, SLA

Külső statisztika - Google Analytics 1.A látogató böngészője letölt (kérés+válasz) egy oldalt a web szerverről. 2.GATC (Google Analytics Tracking Code) kérés+válasz (urchin.js) 3.Cookie-k létrehozása/frissítése 4.Láthatatlan GIF fájl kérés keretében az adatok visszaküldése 5.Adatok tárolása naplófájlban: (időpont, honnan, hányszor, földrajzi hely, IP) 6.Mezőkre bontás. 7.Szűrők 8.Jelentések létrehozása 9.Adatbázis mentés -Flash portálok követése -Analytics API

Böngésző függetlenség, látogatói statisztikák  Böngészők 1.Firefox46.83% 2.Internet Explorer45.57% 3.Opera2.94% 4.Chrome2.30% 5.Safari1.86% 6.Mozilla0.23% 7.Netscape0.05% 8.Camino0.03% 9.Opera Mini0.02%  Képernyő méretek x % x % x % x % x % 6.800x % x % x % x % x %  Operációs rendszerek 1.Windows96.15% 2.Macintosh2.69% 3.Linux0.85% 4.(not set)0.11%  Flash verziók % % Forrás: saját oldalak mért adatai, nem reprezentatív

Ergonómia – 10 alapvető hiba 1.Rossz kereső – relevancia <> hányszor fordul elő az adott szó 2.Tartalom PDF, doc, xls, ppt fájlokban – csak akkor, ha szükséges pl. űrlap 3.Meglátogatott linkek színei nem változnak 4.Ember által nem „szkennelhető” szöveg 5.Fix betűméret (WAI-nál is fontos) 6.Értelmes és változó oldalcím elhagyása (rossz pozíció a keresőmotorokban) 7.Képes hirdetésnek vagy annak látszó dolgok (banner blindness, firewall filter) 8.Tervezési konvenciók (konzisztencia, elvárható működés) 9.Új ablak 10.Nem felelünk a felhasználó kérdésére

Ergonómia - Képernyő felosztás Szemmozgás követés Oldal területek prioritásai Forrás: Eyetrack III

Ergonómia – Menü vs. cikk  Szélesség (7 menüpont egymás alatt, elválasztás)  Mélység (3-4 szint mélység max., mélység arányos az elérési idővel)  Model 1: 2x6, breadth = 2, depth = 6  Model 2: 4x3, breadth = 4, depth = 3  Model 3: 8x2, breadth = 8, depth = 2  Model 4: 4x1 16x1, first page breadth = 4, second page breadth = 16  Model 5: 16x1 4x1, first page breadth = 16, second page breadth = 4.  Kattintható útkijelzés  Oldaltérkép (kereső motorok, akadálymentesség)  Navigáció (legördülő, létra, visszalépés, stb.)  Elnevezés, hosszúság  Jogi megfogalmazás kerülés  Mit ért a felhasználó és nem a hivatalos km hosszú verzió  Design illesztés, navigáció gyorsítás  Kereső  Nyomtatható verzió A használat bonyolultsága Átlagos reakcióidő Forrás: DEPTH Vs BREATH IN THE ARRANGEMENT OF WEB LINKS, Panayiotis G. Zaphiris

 Fitts törvénye (Paul Fitts, pszichológus az Ohio State University-n, 1964)  Finom szenzomotoros koordináció összefüggése az idővel, mérettel és pozícionálással  Repülésbiztonság  „MT” a cél átlagos elérési ideje  Az „a” és „b” empirikus konstansok (lin. regregsszió)  „A” távolság kezdőpont és a cél középpontja között  „W” szélesség, „c” környezetfüggő konstans 0,0.5,1  Mágikus élek (Magic edges), mágikus sarkok (Magic corners),  Gombok közelsége pl. Mentés és Törlés  Terhelés tervezés  Megfelelő és elégséges információ  A lehető legkevesebb kattintás Ergonómia – Legrövidebb út Forrás: MSDN blog Jensen Harris, terhelés - Weblabor

 Adatbázis kezelő modul – absztrakciós réteg, cél az adatbázis kezelő elrejtése (MS-SQL, ORACLE, MySQL, PSQL, …)  Közös SQL tudás használata, kiesik: trigger, tárolt eljárás, OLAP, speciális adatbázisfüggő elemek vagy minden típusra meg kell írni  Adatbázis szerkezet átvitele -> megoldás: automatikus migráció  LIMIT n OFFSET skip vs. ROWNUMBER() vs. TOP n1...n2 (MS SQL2000)  MySQL: WHERE … IN (subselect) helyett JOIN  adattípusok különbsége: varchar(MSSQL – 8000, MySQL – 256), text  3. normálforma, indexelés, redundancia, full text index  Optimalizálás, nagy adattömeggel való tesztelés  Nyelvi rendezés: technikai vs. akadémiai pl. like '%z701%' <> "SZ70134"; "c" < "cs", "tty" = "tyty" Adatbázis függetlenség

 Karakterkészlet: UTF-8 (BOM elkerülése!, megfelelő header)  Nyelvi verziók: cikk, kép, dokumentum, rovat, modulok nyelvi elemei pl. keresődoboz "keresés" felirata, hibaüzenetek  Nyelvi kódok: alpha-3/ISO kód pl. eng – English, hun – Hungarian  Tartalmi objektumok esetén (főként, ha nem tükrözés): "duplikáció" és kapcsolat  Modulok és hibaüzenetek: nyelvi kódok, prezentációs réteg cseréli környezeti változónak megfelelően  Speciális projektfüggő objektumok kötelező nyelvi verziókkal: rekord duplikálás, mező sokszorozás, vagy kapcsolótábla  Adminisztrációs felület, import/export a nyelvi elemek fordításához. Többnyelvűség

 Cél: a leggyorsabb válasz a felhasználó kérésére a legkisebb szerver terheléssel  Alapelv: előre elkészíteni adott környezeti feltételek esetén az oldalt vagy az oldal egy részét (Teljes oldal cache 6-8x gyorsítást jelent)  2 fajta modell:  Publikáció külön folyamat(honlap generálás)  Többszintű, dinamikus, oldalrészekre beállítható cache  Szintek  SQL optimalizálás, cache  Modul kimenet cache (XML)  Végső kimenet (HTML) cache  Nyereség: DB kapcsolat építés/bontás,SQL futattás, XML és XSL transzformáció  Avulás számítás: adminisztrációs felületen tartalmi objektumok kezelésénél, kapcsolódó felületek változásainak számítása  Szerver – kliens böngésző között: tömörítés, képoptimalizálás, css Gyorsítótár (CACHE)

 A HTTP kérések minimalizálása (fájlok összefésülése, CSS Sprites, image map, inline képek)  Szétosztott tartalom (nem kell újratervezni, statikus tartalom szétosztása)  Expires vagy Cache-control (minden komponens, fájlnév+verziószám, nincs kérés a webszerver felé – sok felhasználó esetén jelentős)  Gzip (méret ~70%, böngészők 90%-a támogatja, tömörítés nélkül kapja, amelyik nem)  CSS-k legfelül (leggyorsabb tartalom publikálás)  (Java)Script legalulra (2 párhuzamos szál, blokkolja a párhuzamos letöltést)  CSS kifejezések elkerülése (IE5+, pl. háttérszín változása minden órában, görgetés közben is kiértékelésre kerül)  JavaScript+CSS külső fájlokban (lokális cache vs. kérések száma)  DNS kérések számának minimalizálása ( milisec/kérés, ISP+helyi cache)  JavaScript, CSS minimalizálás (karakterek, gzip esetén is, keverés)  Átirányítások elkerülése (301, 302) + Etag eltávolítás  AJAX cache Tippek nagyterhelésű portálok gyorsításához (Yahoo)

 Kézi adatbevitel, űrlapok  GET/POST/SYSTEM változók  SESSION (cookie, GET)  adatbázis (profil, preferenciák)  Automatikus importálás (csv, XML)  Automatizált átvétel, integrált szolgáltatások pl. XML SOAP, WSDL Bemenetek

 Felhasználónév/jelszó – mindenkinek ez jut eszébe először  jelszó policy: hosszúság, kis/nagybetű, lejárati idő, számjegyek, stb. – szótár módszer  egyirányú kódolás, összehasonlítás (pl. MD5), adatbázisban kódolt tárolás – csak megváltoztatni lehet  social engineering  Titkosítás  HTTPS /SSL : matematikai módszer, nyilvános kulcsú titkosítás, kulcspár, prímtényezőkre bontás művelete nehéz  Generált kulcsok biztonságosak? -> Nem, tanúsítvány, megbízható harmadik személy  SQL Injection  Cross Site Scripting  PHP/ASP embedding  Jogosultsági rendszer Biztonság

 Szoftver helyett szolgáltatás  Szabad közösségi kulcsszavazás (folksonomy vs. taxonomy)  A felhasználó értéket ad az oldalhoz – Közösségépítés  Automatikus adataggregálás  Az információ hatalom  AJAX  Lightweight Programming Models  Innováció az összekapcsolásban  Platformfüggetlen  Együttműködés irányítás helyett  RSS  Felhasználóbarát és hatékony interfész – XML-HTTP  Az Internet hosszú szárnya  Néhány jog fenntartva  Állandó béta WEB 2.0

 Kereső, gyorskereső  Honlaptérkép  Képgaléria  Videófeltöltés  Időgép, naplózás  Hírlevél  Banner  Eseménynaptár  GYIK  Címkefelhő  Legolvasottabb cikkek Modulok - Internet  Szavazás  Fórum  Linkgyűjtemény  RSS  Web áruház (elektronikus fizetés)  Űrlap  XML-SOAP integráció  Blog  Chat  Képeslap  Kulcsszavazás