§Andrea Fojtu §Univerzita Karlova v Praze, Národní knihovna ČR O čem bude řeč… http://bunnyfoot.com/blog/wp-content/uploads/2011/01/Accessibility-cartoon.jpg Počátky IA § § § § § § § § § § § § Richard Saul Wurman - 1976 §konference na téma: The Architecture of Information §trvalo více než 20 let, než se termín ujal § § § § § §konference ASIS&T (American Society for Information Science and Technology) - 2002, Boston § §Designing & Organizing Digital Information Spaces - 2004, Paříž úorganizátor: Information Today, Ltd. § Osobnosti a organizace IA §osobnosti: § § Gerry McGovern úhttp://www.gerrymcgovern.com/ ú § Rob Norton úBusiness 2.0 (contributing editor) ú § Richard Saul Wurman úhttp://www.wurman.com/ úorganizuje konference TED (Technology, Entertainment and Design) § § Louis Rosenfeld úhttp://louisrosenfeld.com/home/ ú § Peter Morville úhttp://www.semanticstudios.com/ ú § Soňa Makulová úhttp://www.elet.sk ú § §organizace: § §The Information Architecture Intitute (2002) - IAI § úhttp://iainstitute.org ú únezisková organizace (pro odbornou veřejnost) ú úportál informační zdroje informační nástroje výzkum výchova specialistů konference, workshopy atd. Definice IA, informační architekt §dle Wurmana: § § Osoba, která: úorganizuje vzory v datech, transformuje je z komplexní do přehledné podoby úorganizuje informace úvytváří mapu informací SW: MS Visio 2003, Freemind Online: http://bubbl.us ú § §definice: § §vědná disciplína, která se zabývá organizací a rozvržením obsahu na webovém sídle (McGovern, Norton) úMetaprvky, klasifikace, navigace, vyhledávání a rozvržení obsahu §umění a věda organizování informací tak, aby mohly efektivně uspokojit informační potřeby uživatelů (IAI) úprůzkum, analýza, design a implementace “Novodobá” IA §kniha: § § rozšíření pojmu díky knize Information Architecture for the World Wide Web (2002, 3. Vyd. 2006) úautoři: Louis Rosenfeld & Peter Morville ú úz jejich pohledu je nejdůležitější: ú úorganizace obsahu do kategorií úpojmenování kategorií únávrh struktury únávrh navigace únávrh rozložení informací na stránkách úzpracování informací pro efektivní vyhledávání §přidružené obory: § §umění, design, psychologie, kognitivní psychologie, lingvistika, sociologie, filosofie, antropologie, fyziologie, umělá inteligence, kognitivní věda, etika a estetika ú §psychologie: aplikace teorií a empirických analýz uživatelského chování §sociologie, antropologie: interakce technologií, práce a organizace §design a průmyslový design: vytváření interaktivních produktů § §informační věda… Pilíře a prvky IA §3 základní pilíře: § § klasifikace § navigace § metaprvky a design § § §informační design (IA) vs. grafický design § ú § http://upload.wikimedia.org/wikipedia/en/6/6e/ArchitectureCartoon.png Prvky IA §IA se tvoří na základě prvků:: § úorganizační systém, systém popisků (labeling system), navigační systéma vyhledávácí systém ú újinými slovy: klasifikace, podpora navigace, vyhledávání a popisných systémů § § §Organizační schémata úschémata úkolů, uživatelů apod. http://www.ibm.com http://www.hp.com únejednoznačná schémata (kategorie) úhybridní schémata §Nástroje na prohledávání úglobální navigační systémy, lokální navigační systémy, mapy sídel (stránek), průvodci po sídlech §Nástroje na vyhledávání §Obsahy a úkoly úsekvenční pomůcky (např. Krok 1, Krok 2) §Neviditelné prvky úřízené slovníky, tezaury ú Přístupnost webu/rozhraní (WA) §definice: ú úpřístupnost v obecném smyslu slova znamená takový stav, kdy daná věc nečiní uživatelům žádné potíže (Špinar) § úpřístupná webová stránka je snadno použitelná pro každého uživatele internetu, nezávisle na jeho znevýhodněních, schopnostech, zkušenostech nebo zobrazovacích možnostech ú úněmecká terminologie - bezbariérovost (Barrierefreiheit, málokdy Zugaenglichkeit) úanglická terminologie - web accessibility ú § § § § § úpřístupnost (accessibility) bývá někdy mylně vnímána jako dostupnost (availability) nebo použitelnost (usability) webových stránek http://www.coolwebdeveloper.com/wp-content/uploads/2009/04/captcha_cartoon.png Osobnosti WA a zdroje §John Slatin (†2008) a Sharron Rush - Maximum Accessibility § §Mike Paciello - Web Accessibility for People with Disabilities úhttp://www.paciellogroup.com § §Joe Clark - http://joeclark.org úBuliding Accessible Websites http://joeclark.org/book § §David Špinar - Tvoříme přístupné webové stránky úhttp://pristupnost.nawebu.cz § § § Pojmy a zkratky §zkratky: § §CSS - Cascading Style Sheets §ACSS - Aural (Cascading) Style Sheets §W3C - World Wide Web Consortium §WAI - Web Accessibility Initiative §ADA - Americans with Disabilities Act §VOT - Voice Output Technology §DDA - Disabilities Discrimination Act §BFW - Blind Friendly Web §uživatelsky orientovaný design: § §Applet - aplikace, nejčastěji v programovacím jazyku Java; není limitováná OS a funkčností HTML §Braillský řádek (Braille display) - HW zařízení, které se připojuje přes sériový, paralelní nebo USB port k počítači/klávesnici §Podporná technologie (Assistive technology) - jakýkoliv předmět, část předmětu nebo systém produktu, který se používá ke zlepšení nebo udržení funkčních schopností jednotlivců se znevýhodněním § §Čtečka obrazovky - SW, který uživateli čte obsah obrazovky (i v grafickém rozhraní) úpro nevidomé, kteří nemůžou nebo nechtějí využívat taktilní výstup (přes B. řádek) Windows Eyes, JAWS apod. §Uživatelský agent (User agent) - SW ke zpřístupňování obsahu webu; někdy se mu také říká klientská aplikace úNapř. (textové, hlasové) prohlížeče, plug-iny, zvětšovače obrazovek (screen magnifiers), SW hlasového rozlišení (voice -recognition system) §Validace - v oblasti designu webu jde o kontrolu zdrojového kódu § Kategorizace znevýhodněných uživatelů § Zdravotně znevýhodnění uživatelé: útelesně, smyslově, kognitivně smyslově - zrak, sluch, řeč (slabozrakost, zvyšky zraku, nevidomost; nedoslýchavost, hluchota; různé vady řeči - následkem poškození sluchu, nervového systému apod.) kognitivně - poruchy učení, soustředění se, vývojové poruchy (např. Downův syndrom), problémy s pamětí apod. telesně - částečně mobilní nebo imobilní uživatelé § Dočasně znevýhodnění uživatelé Uživatelé - zobrazovací potíže: §monochromatický monitor, řečový syntetizátor, bez myšky, klávesnice apod. • Roboti vyhledávacích nástrojů (angl. web crawlers, spiders) §potřebný validný zdrojový kód! Situace ve světě, EU, ČR §nejznámější propagátor WA: USA (1998) - změna “Rehabilitation Act” z roku 1973 §Section 508 §Kanada - vyšší cíl, přijetí W3C směrnic do druhé úrovně přístupnosti, Section 508 zodpovídá první úrovni §Evropa §Portugalsko (1999) §GB (2002- DDA - Disability Discrimination Act) § §projekt BFW (Blind Friendly Web) §http://www.blindfriendly.cz §Ministerstvo informatiky ČR http://www.mvcr.cz/micr/defalult.htm - zrušeno 1. května 2007 §Pravidla pro tvorbu přístupného webu, Best Practises §příloha novely zákona č. 365/2000 Sb. o informačních systémech veřejné správy Iniciativy v oblasti WA §Iniciativy: § §WebAIM (Web Accessibility in Mind) - 1999 úhttp://www.webaim.org úCenter for Persons with Disabilities at Utah State University 4 kategorie činností: publikační činnost, výzkum, poskytování služeb, SW nástroje a instruktáže §W3C (World Wide Web Consortium) ú3 oblasti: univerzální přístupnost (universal accessibility) sémantický web (semantic web) důvěryhodný web (web of trust) § úWAI - Web Accessibility Initiative 4 kategorie činnosti: vývoj nových technologií, výzkum, výchova a vzdělávání, zveřejňování odborných návodů a nástrojů WCAG 1.0 a WCAG 2.0 § WCAG 1.0 a 2.0 §Web Content Accessibility Guidelines 1.0: § §http://www.w3.org/TR/WCAG10 §květen 1999 § §14 směrnic, resp. obecných principů přístupného designu webu §kontrolný seznam pro WCAG 1.0 ú66 kontrolních bodů 3 úrovně priorit - kdy tvůrce webu musí, by mél, nebo může kontrolný bod splnit 3 úrovně shody - “A”, “Dvojité A”, “Trojité A” 2 základní kategorie: zabezpečení korektního zobrazení vytvoření srozumitelného a navigovatelného obsahu §Web Content Accessibility Guidelines 2.0: § §http://www.w3.org/TR/WCAG §prosinec 2008 ú ú4 principy: obsah musí být vnímatelný ovládací prvky rozhraní musí být ovladatelné obsah a ovládací prvky musí být srozumitelné obsah musí být dostatečně robustní (pro současné i budoucí technologie) Section 508, BFW, Best Practise §Section 508 úhttp://www.section508.gov/ § §BFW ú4 priority úhttp://www.blindfriendly.cz/doc/bfw.php §Best Practise ú6 kategorií: ú 1.obsah webových stránek je dostupný a čitelný 2.práci s webovou stránkou řídí uživatel 3.informace jsou srozumitelné a přehledné 4.ovládání webu je jasné a srozumitelné 5.odkazy jsou zřetelné a návodné 6.kód je technicky způsobilý a strukturovaný Problémové oblasti WA § Kaskádové styly § Flash § Java Scripts § Rámce § Obrazové mapy § § Validace Proč kaskádové styly? §CSS: § •na rozdíl od HTML není CSS značkovacím jazykem v pravé smyslu slova •spíše soubor pravidel pro zápis vlastností ke uspořádání a způsobu zobrazení WWW stránky ve značkovacím jazyku •zajímavost: prohlížeč NeXT navržen tak (Tim Berners-Lee), že formátování dokumentů bylo řízeno jednoduchým vnořeným stylovým předpisem úzodpovědnost se poté přesunula na autory • §CSS a přístupnost: § §první verze stylů byla vydána v prosinci 1996 pod názvem “Cascading Style Sheets, Level 1” - CSS1 údruhá verze o dva roky později úCSS podporuje zvukové styly (Aural Style Sheets - ACSS) ty umožňují designérům webů a uživatelům specifikovat např. hlasitost vysloveného obsahu, zvuků v pozadí, přirozené pomlky v textu apod. § Proč kaskádové styly? #2 §zápis: § § může vypadat třeba takto: H1 { voice-family: paul; stress: 20; richness: 90; cue-before: url (“ping.au”) } úJoe Clark metaforicky vyjádřil vztah mezi značkovacím jazykem a kaskádovými styly –manžel (HTML) a CSS (manželka) § §CSS a přístupnost: § §V současné době je na tom s podporou CSS2.1 nejlépe prohlížeč Firefox úporovnání: úhttp://www.webdevout.net/browser-support-css) úhttp://www.w3.org/Style/CSS úhttp://websitetips.com/css/solutions/ ú Proč kaskádové styly? #3 §výhody: § §oddělení struktury dokumentu od výsledné prezentace §dokonalá kontrola nad zarovnáváním, mezerami, umístněním textu v dokumentu, čímž se dá vyhnout zneužívání prvků pro prezentační účely §BLOCKQUOTE a TABLE §Deprecated elements (, ) § §zachování pořadí obsahových prvků ve zdrojovém kódu v takovém pořadí, které odpovídá jejich pořadí §příprava různých druhů vzhledu pro jednu stránku a zároveň jeden styl pro celé webové sídlo §úprava stylů uživately dle jejich potřeb § §ušetření času (pro designéry), ušetření objemu stránky (Špinar) § § §CSS a přístupnost: § §Accessibility Features of CSS úhttp://www.w3.org/TR/CSS-access úsumarizuje vlastnosti CSS, level 2 (CSS2), které mají přímý dopad na přístupnost webů ú §“The Layout Reservoir” §http://www.bluerobot.com/web/layouts/ úrady pro sloupcové rozvržení stránky úPříklad úhttp://alistapart.com/stories/rollovers/ § §Greenstreet Development úhttp://www.greenstreetdev.com/ § §Design fckr™ úhttp://www.dfckr.com/ JavaScript §popis: § §nemá nic společného s programovacím jazykem Java § úpůvodně se měl jmenovat “LiveScript”; změněno z marketingových důvodů úrozšiřuje funkčnost jazyka (X)HTML ú ú“statické” vs. “dymanické” médium úfunguje na straně klienta (na rozdíl od Perl, PHP, Cold Fusion, JPS, ASP apod.) §Příklady využití: § §“rollovers” - překlápění obrázků únapř. rozbalovací menu, otevíraní nových oken (nutný “klasický” atribut href) účtečky obrazovek a Braillské řádky - neexistuje prozatím alternativní popis k těmto obrázkům ú §“onMouseOver” and “onMouseOut” úspouštěč události (event handler) závislý na zařízení (v našem případě na myšce) úhttp://www.webaim.org/techniques/javascript/eventhandlers.php/ ú Accessibility - The quality of being accessible, or of admitting approach; receptibility. ú Rámce - Frames §dílo společnosti Netscape - 1997 úzpočátku byla implementace velmi žalostná; nebylo možné vypnout okraje rámců; “Zpět” v rámci vracelo uživatele na posledně navštívený web úje možné vytvořit přístupné rámce WCAG 1.0, bod 12.1 http://www.w3.org/WAI/wcag-curric/sam91-0.htm TITLE a NAME prvky ú Použitelnost webu/rozhraní §Definice: § §použitelnost zabezpečuje jednoduchost používání jakýchkoliv objektů vytvořených člověkem §??? § § § § Osobnosti WU § §Jakob Nielsen úhttp://useit.com §Donald A. Norman úhttp://www.jnd.org §Bruce “Tog” Tognazzini úhttp://www.asktog.com ú § § § § Testování použitelnosti §Typy testování: § §heuristická evaluace (heuristic evaluation) úheuristická metoda - postup pomáhající při hledání problému úhttp://www.useit.com/papers/heuristic/heuristic_evaluation.html úseznam kritérií (Jakob Nielsen): http://www.useit.com/papers/heuristic/heuristic_list.html např. používatelská kontrola nad systémem, prevence chyb, flexibilita a jednoduchost využití, podpora a dokumentace) §kognitivní rekapitulace (cognitic walkthrough) úv začátcích sestavování webu úúkolové scénáře (prototyp nebo první verze webu) úhttp://portal.acm.org/citation.cfm?id=332456 § §pluralistická rekapitulace (pluralistic walkthrough) úskupina hodnotících (uživatelé, vývojáři, odbornící na použitelnost) úproblematický úkol se rozebírá z různých pohledů úmoderátor sezení je odborník na použitelnost výstupy: preference uživatelů a názory §sledování pohybu oka (eye-tracking) § § § § Senioři (60+) úEmail: ú §nejvyužívanější službou internetu je e-mail úWeb: ú §zdravotní informace: §informace o nemocích, symptomy, léky a jejich vedlejší účinky apod. § §vyhledávání informací, zprávy, sledování investic (výnosů) ú §internet/online banking a nákupy § § § § http://blog.ivman.com/texting-for-seniors/ Několik klíčových pravidel úzrakové aspekty: ú • ideální písmo je bezpatkové, rozestup mezi řádky nebo písmeny (tzv. double-spacing) v hlavním textu oANO: Arial, Helvetica, Verdana oNE: Times New Roman o •dostatečná velikost - nejlépe 12 až 14 bodů omožnosť zvětšení písma uživately – obdobné jako v prípadě zrakově znevýhodněných uživatelů o •dostatečný barevný kontrast (popředí a pozadí stránek, písma) ideálně černé písmo na bílém pozadí "čisté" pozadí bez obrázků §NE: modrá a žlutá vedle sebe • •KAPITÁLKY nebo kurzíva jen pro nadpisy, záhlaví • •podtržený text jen pro odkazy •odkazy mají být odlišitelné od běžného textu úkognitívne aspekty: ú • §rozdělení informací ns kratší celky minimalizujte žargon a technické/odborné výrazy specifické výrazy vysvětlit • §instrukce a číslování jednotlivých kroků např. při vyhledávání v katalogu §mapa webu – nabízí jednoduchý přehled celého webu §navigační prvky na stejném místě, ve stejné barvě na celém webu § •vyhledávač webu bez speciálních znaků a Booleovských operátorů • •bez stahování programů • •“návody” (i když podle Stevea Kruga - webstránky by měly být intuitívní) oje vhodné nabídnout tel. číslo – pro ty, kteří preferují “osobnější” kontakt a potřebují pomoc ú Několik klíčových pravidel #2 úaspekty motorických úschopností: • •minimalizujte nutnost skrolování •NE: automatické skrolování textu oskrolovací ikonky na každé webové stránce (značně matoucí) ú •jednoduché kliknutí myší •dostatočný prostor kolem proklikatelných oblastí + větší ikonky v navigaci (NCOA.org) • •omezení rolovacích menu (v navigaci) úpříklady: • •SeniorNet - http://www.seniornet.com § § •National Council on Aging - http://NCOA.org • •Medicare - http://www.medicare.gov § •NE: Senior Surfers - http://www.seniorsurfers.org § § § § Biblioweb §12. ročník soutěže o nejlepší knihovnické web stránky (2011) § §http://skipcr.cz/aktuality/akce-a-projekty/akce-skip/biblioweb-2011 § §přihlásilo se 61 knihoven (rekord) §hodnocení 21.2 – 10.3.2011 §Kritéria pro Biblioweb § §Kvalita obsahu stránek § §Aktuálnost § §Design stránek § §Stránky odpovídají poslání knihovny a umožňují komunikaci s uživatelem § §Stránky jsou přístupné pro zrakově znevýhodněné uživatele § §Písemná koncepce webu (budoucí plány) § § § §