Správa digitálního obsahu v organizacích (A7B39SDO)

Prezentace na téma: "Správa digitálního obsahu v organizacích (A7B39SDO)"— Transkript prezentace:

1 Správa digitálního obsahu v organizacích (A7B39SDO)
Přednáška č. 2 Web Content Management Jiří Štěpán & Martin Kačer,

2 Obsah přednášky Definice WCMS a základní pojmy
Požadavky z pohledu administrace Požadavky z pohledu internetu

3 K čemu je tato přednáška
Pro případ, že budete vybírat CMS pro budovaní webu ve firmě či organizaci Vlastnosti, které se vám mohou v takovém to CMS hodit Upozornění na možné problémy

4 WCM = Web Content Management
Umožňuje vytvářet a spravovat WWW prezentace Orientován na uživatele se základní (nebo žádnou) znalostí internetu a publikování WWW stránek Cílem je transformace zdrojů dat do moderní webové prezentace

5 Charakteristiky WCM Primárním publikačním cílem je WWW stránka, tedy (X)HTML a související Data jsou zpravidla spravována s ohledem na navigační strukturu WWW stránek Obvykle poskytuje WWW administrační rozhraní pro tvorbu obsahu Umožňuje nějakým způsobem integraci nebo tvorbu dynamických web aplikací

6 WWW rozhraní WCMS

7 WCM – základní klasifikace
Pečící systémy (Baking Systems) obsah je generován do statické formy zpravidla dávkový export do HTML (či jiného formátu) řeší se problém aktualizace podmnožiny obsahu obtížná tvorba dynamických aplikací a personalizace Příklady SW: Tridion, Alfresco

8 WCM – základní klasifikace
Smažící systémy (Frying Systems) generují stránky v průběhu HTTP požadavku data jsou zpravidla v RDBS a probíhá SQL dotaz na základě struktury adresy snadnější tvorba www aplikací, personalizace ... náchylnější k provozním/výkonovým problémům primárním problémem je doba odezvy Příklady SW: Fatwire, RedDot, Stelent, - dnes většina

9 Příklad generování stránky dle requestu

10 WCM – další klasifikace
Dle jazyku šablon – vlastní proprietární vs. existující „standard“ (JSP, PHP, ..) Dle míry oddělení obsahové a navigační struktury Oddělení obsahu od navigace Obsah je součástí navigační struktury (např. blogy) Bez hierarchické struktury (např. wikipedia) Dle míry strukturování obsahu Jednoduché datové struktury Složité datové struktury

11 PožadAVKY Z POHLEDU ADMINISTRACE

12 Dámy a pánové toto je … … váš cílový uživatel

13 WCM – oddělení vzhledu a obsahu
Ideálem je plné oddělení obsahu od vzhledu Dva typy uživatelů – editorů: Editor obsahu („redaktor“) Editor vzhledu („webmaster“)

14 Editor obsahu Dodává obsah (text článku, obrázky)
Nemusí vůbec znát HTML apod. Neovlivňuje (a často ani nesmí) vzhled prezentace Stejný obsah může být využit v různých grafických kontextech (různé umístění, mobilní verze apod.)

15 Editor vzhledu Zodpovědný za podobu prezentace Připravuje
šablony, které převádějí strukturovaný obsah do HTML CSS a další „technické“ náležitosti prezentace

16 Ideály vs. Realita Tohle by byl ideální stav
Redaktor tvoří obsah Webmaster stanoví podobu Jenže realita je složitější …

17 Problém č. 1: Formátovaný text
WWW články samy obsahují různé formátování Jak povolit formátování uvnitř článku při zachování oddělení obsahu a vzhledu? Editor musí mít možnost formátování nastavit Ale pokud možno v omezené míře WYSIWYG editor s povoleným „logickým“ formátováním Zvýraznění, tabulky, odsazení, odstavce nadpisy Například omezená množina HTML značek a CSS tříd Prevence nepovoleného formátování (filtrace, XSLT, …)

18 Ukázka WYSIWYG

19 WYSIWYG - výstup Formátovaný text si má ponechat pouze sémantické formátování: Seznamy Tabulky Bold, italic Nadpisy Odstavec, citace, Kód pro vložení obrázku, odkazu nebo aplikace (odkazy a obrázky musí být přeloženy – viz dále) Nepovolit a vyčistit: barvy a velikost písma Integrace s CSS – omezit množinu „oficálně povolených“ tříd (webmaster zajistí, že stále existují)

20 Formátovaný text – jiné možnosti
Uživatelé jsou zvyklí na „Word“ => Dovolit jim ho používat … ???

21 Vložení textu z MS Office

22 Čištění po MS Office Některé editory mají jako vlastnost (XStandard)
Mnoho javascriptových nikoliv Je nutné konfigurovat „čistící proces“ Vytvořit validní XHTML pomocí např. HTML Tidy Na výstup aplikovat XSLT transformaci Případně konvertovat do HTML Zlikvidovat „MS-like zmatek“ Zlikvidovat nepovolené tagy typu font apod. Vnořené CSS styly apod. – dle požadavků prezentace

23 Office balíky a jiné zdroje dat
Většina informací původně vzniká mimo CMS v balících typu MS Office Nutnost konverze Copy – Paste – Filter Import automatický Import manuální (HTTP, WebDAV aj.) Problematika redukce formátování a grafických prvků Lze řešit pluginy do Office balíčků (vyžadují instalaci na klientské stanici)

24 Problém č. 2: Odkazy Odkazy musí být uloženy v interní podobě Proč?
Včetně uvnitř článků vkládaných editorem obsahu! Proč? Referenční integrita (kontrola) Možnost změny domény Přesuny mezi sekcemi, změny URL adresy Běh na více doménách Zpracovávané odkazy Interní (mezi stránkami v témže CMS) Externí (na cizí servery)

25 Překlad odkazů – příklad
Uložená podoba odkazu: <p>Ceník najdete <a href=“asset:523”>zde</a> Publikováno na <p>Ceník najdete <a href=“/shop/ceniky/ipad.html”>zde</a> Publikováno na <p>Ceník najdete <a href=“/ceniky/ipad.html”>zde</a>

26 Překládané odkazy – větší flexibilita
Příklad: Úkol: zjistěte, jak se projevuje kampaň Bannery1 a 2 na konverzi eshopu Banery1 Banery2 Google … Nákup - konverze

27 Řešení – google analytics
Google analytics umožňují předávání uživatele pomocí _link() metody mezi doménami. Stačí jen obohatit všechny odkazy vedoucí mezi doménami o onlick: <a href= onlick=“pageTracker._link(‘ hop.cz’; return false;”)> Kupujte!!</a> Díky překládaným odkazům jde řešit automaticky…

28 „Axiom“: uživatel není schopen ani změnit velikost obrázku
Problém č. 3: Obrázky „Axiom“: uživatel není schopen ani změnit velikost obrázku Důsledek: musíme to za něj udělat sami

29 Obrázky – požadavky WCM by měl poskytnout nástroje pro:
Definici používaných velikostí obrázků Vynucení jejich používání Definovaná konverze vloženého obrázku např na: Thumbnail Náhled článku Normální velikost Mobilní verze Vzájemné propojení variant pomocí zastřešujícího objektu („sponky“) nebo jmenné konvence Příklad: Uživatel do článku vloží „kocicka.jpg“ , systém do přehledu článků vloží „kocicka_thumbnail.jpg”

30 Obrázky = odkazy I obrázky jsou do stránky vkládány jako odkazy => Platí pro ně podobná pravidla Interní uložení odkazu na obrázek v těle článku Příklady: <img src=“ref:kocka12” width=.../> {<img src=kocka12/>} (rozměry se dopočítají => celý tag je generován)

31 Zpracování obsahu z WYSIWYG editace
Get HTML Visual editing Save HTML Clean HTML Links postrocessing YES Image postprocessing NO Ok?

32 Správa dat ve WCMS

33 Definice: asset Asset je základní jednotka informace v CMS
Analogie: objekt, databázový záznam („řádek tabulky“) Původní význam: položka investičního portfolia Možné (nepřesné) překlady: položka, příspěvek, článek, soubor, … Assetem tedy je např: Článek Obrázek Šablona Odkaz Systém se k assetu chová jako k atomické jednotce: Z pohledu přístupových práv Z pohledu editace a publikace Z pohledu verzování a historie

34 Struktura a obsah assetu
Attributy dle typu – příklady Číselné Datum a čas Různé druhy textu jedna řádka text area bez formátování wiki text HTML fragment Reference na jiný asset Odvozené od hypertextových odkazů a obrázků Reference datové integrity Dědičnost v objektovém slova smyslu Přístupová práva Verze – časová, jazyková, formátová, obsahová

35 Datová reprezentace pomocí assetů

36 Kontrola přístupu - ACL
Access Control List – přiřazováno k assetům Povolení akce na základě role Zpravidla se práva dědí v hierarchické struktuře Základní akce: Editorské role: vytvoření dokumentu, zápis do sekce, schválení k publikaci Uživatelské role: přístup k sekci, stažení dokumentu, ….

37 Verzování obsahu Časové verze – starší kopie obsahu daného assetu
Jazykové verze Publikační – jiná verze pro HTML, WAP, SMS, mobily Pracovní – možnost vytvořit rozpracovanou větev obsahu Na úrovni celé prezentace, včetně odkazů apod.

38 Kontrola referencí Zajištění konzistence
Hypertextových odkazů Obrázků Vložených souborů typu CSS, apod. Dobrý CMS by neměl umožnit vznik prázdného odkazu Schopnost detekce vadných odkazů Řeší se např. symbolickými referencemi typu <IMG SRC=“ref:asset_id_1234”>

39 Publikace obsahu

40 Struktura WCMS x zamýšlená „navigace“
Běžná Klasická hierarchická menu různého typu Bread crumbs (Home > Products > …) Dynamická Fulltext Tagclouds a další top-based navigační prvky User tags Fasetová navigace Kontextová …

41 Požadavky z pohledu internetu

42 Hlavní požadavky na webovou prezentaci
Výkon Stabilita … ale hlavně výkon … a stabilita

43 Proč výkon? < 1sec se něco děje < 10sec je stránka komplet

44 Výkon – příčiny problémů
Neefektivní program nebo šablona Souběh příliš mnoha požadavků

45 Výkon – interní mechanismy CMS
Dobrý návrh CMS, možnost ladění Aplikační cachování generovaného obsahu Automatické (Open CMS flex cache) Vynucené vývojářem (příkaz {cache} {/cache}) Hardwarové cachování (proxy) Specializované servery jen pro renderování Př: Fatwire Content Server Loadbalancing se „sticky session“ (dle IP, dle session) Externalizace „statického obsahu“ mimo CMS

46 Ne vše musí být v CMS!

47 Výkon – další ladění Zlaté pravidlo: Výkon CMS ~ Výkon DB
Indexy, parametry DB, konektivita Infrastruktura Omezení počtu konkurentních uživatelů (Cisco, HA Proxy) Vysoce výkonné web servery pro statický obsah (BOA Webserver) Masivní škálování distribuce Clouds, CDN –servery mohou být pomalé, ale je jich mnoho Geografická distribuce Profilování aplikace – zjištění „žroutů výkonu“ Myšlení – analyzujte, odhadujte, předvídejte

48 Výkon – požadavky Maximální akceptovatelná doba odezvy je cca. 200ms
V případě smažících WCM systémů je téměř nezbytné: Mít možnost řídit cachování obsahu Mít možnost části prezentace vyčlenit jako statické Javascripty, CSS, grafika pro šablony Větší videa a soubory Vybrané landing pages Možnost „horizontálního škálování“ Rozložení zátěže mezi více serverů

49 Příklad: špičky, trend Zajímají nás nejen průměry, ale špičky zátěže

50 Příklad: Horizontální škálování a LB

51 Hledejte trendy a pravidla

52 Příklad – závody F1

53 Moderní požadavek: „web 2.0“
Dokázat obsah publikovat jiným službám (RSS, ATOM) Požadavek 2: Dokázat integrovat obsah jiných služeb Javascriptová API pro nejčastější služby Mapy Video Kanály Analytics Data jako obsah v CMS, nikoliv jen v šablonách Problematika přístupových práv ke službám

54 Web firmy Rákosník a syn: 1.0 x 2.0

55 Obsah vlastní nebo na veřejných službách
Vlastní s možností publikace na externí služby Obsah se tedy duplikuje. CMS nově musí: Spravovat přístupová práva do externích systémů Implementovat API pro přidávání dat Zajišťovat konzistenci těchto dat Nebo: externí služby jako primární zdroje dat Větší přidaná hodnota (flickr, google calendar) Záruky za spolehlivost a ochranu dat

56 Další požadavek: SEO Podpora automaticky generovaných metatagů
Description, keywords Podpora sémantického strukturování dokumentů Cool URL url je lidsky čitelné a obsahuje slova Podpora generování sitemap pro Google apod.

57 WCMS – analytické nástroje
Web based Statistiky jsou generovány na základě návštěvnosti webu bez ohledu na CMS Na bázi logů web serveru Na bázi trackovacích kódů Řeší vztah mezi „uživatelem“ a „URL“ Asset based Generovány renderovacím mechanismem CMS Obsahují informace o četnosti zobrazení konkrétního assetu … detailněji v některé z příštích přednášek!

58 Důsledky nových požadavků pro WCMS
Typický článek přibírá metadata: Obsahová Pro web Pro twitter, facebook Řídící prezentaci Kategorie, umístění v navigaci Pro získání obsahu odjinud Youtube ID Parametry mapy Pro vyhledávače SEO url, keywords, … Pro reporting Segment, kategorie

59 PRO DNEŠEK VŠE…