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

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

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

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

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í

WWW rozhraní WCMS

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

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

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

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

PožadAVKY Z POHLEDU ADMINISTRACE

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

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“)

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.)

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

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

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, …)

Ukázka WYSIWYG

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í)

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

Vložení textu z MS Office

Č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

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)

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)

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

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

Ř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=www.myshop.cz onlick=“pageTracker._link(‘http://www.mys hop.cz’; return false;”)> Kupujte!!</a> Díky překládaným odkazům jde řešit automaticky…

„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

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”

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)

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

Správa dat ve WCMS

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

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á

Datová reprezentace pomocí assetů

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, ….

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.

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”>

Publikace obsahu

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á …

Požadavky z pohledu internetu

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

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

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

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

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

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

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ů

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

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

Hledejte trendy a pravidla

Příklad – závody F1

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

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

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

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 http://www.reddot.com/products_web_content_mgmt.htm Podpora generování sitemap pro Google apod.

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!

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

PRO DNEŠEK VŠE…