ASWI - Pokročilé softwarové inženýrství » ASWI 2024 » Zachycení scénáře průchodu webovou aplikací - VUŠ

h1. Analýza HTML elementů a uchovávaných informací

h2. Globální atributy

|Atribut|Uchovávat|Komentář/popis|

|accesskey| DISKUZE |klávesová zkratka umožňující přistupovat k elementu - můžeme použít k ovládání stránky?|

|autocapitalize|NE|automaticky zapnout načítání velkých písmen při zadávání do textu|

|autofocus|NE| automatické zaměření na element|

|class| ANO | půjde použít při manipulaci s elementem |

|contenteditable| ANO | umožňuje uživatelům upravovat obsah elementu přímo ve webovém prohlížeči, hodnoty true false |

|contextmenu| ANO |k definici vlastního kontextového menu (nebo také známého jako kontextového menu s kliknutím pravým tlačítkem) pro daný element|

|data-*|NE|umožňuje vkládat libovolná uživatelská data přímo do HTML elementů, pro uchování informací|

|dir| DISKUZE |obsahově ho nepotřebujeme, ale možná bude třeba k manipulaci se stránkou |

|draggable|ANO| lze drag a drop - true, false |

|enterkeyhint| NE/DISKUZE |umožňuje vývojářům specifikovat, jaký typ akce by měl být spuštěn po stisknutí klávesy Enter v rámci daného vstupního pole |

|exportparts| NE | přídavek do CSS specifikace, který slouží k definici pojmenovaných částí (parts) HTML elementu, které jsou následně dostupné pro stylizaci pomocí CSS |

|hidden|NE|  |

|id| ANO | k manipulaci s elementy|

|inert|NE|k deaktivaci interakce s prvkem a jeho potomky|

|inputmode|NE| umožňuje specifikovat očekávaný způsob zadávání textu do vstupního pole  |

|is|NE| užití s vlastními (custom) prvky HTML (př. technologie Web Components)|

|itemid|ANO |typ identifikátoru,  používá ve strukturovaných datech, jako je například JSON-LD, Schema.org nebo RDFa, k identifikaci konkrétního prvku nebo entity |

|itemprop| NE| bez hodnoty, součást mikrodatového značkování (Microdata), což je způsob strukturování informací v HTML, aby bylo snazší pro vyhledávače a další webové technologie porozumět obsahu stránky. |

|itemref|ANO|užití při indexování, slouží k propojení různých částí strukturovaných dat, aby bylo možné jednodušeji popsat složitější struktury informací|

|itemscope|NE|prázdný atribut, slouží k označení elementu jako kontejneru pro strukturovaná data|

|itemtype|NE|slouží k určení typu strukturovaných dat, která jsou obsažena uvnitř elementu|

|lang|NE|používá k určení jazyka obsahu uvnitř daného HTML elementu|

|nonce|NE|použití politiky bezpečnostního zábrany skriptů (CSP - Content Security Policy), omezení obsahu povoleného na dané stránce|

|part|NE|specifikace CSS Shadow Parts. Tento atribut slouží k propojení částí vlastních prvků (custom elements) s externím CSS|

|popover| NE|

|role|NE| definici role, kterou má určitý element nebo komponenta na stránce |

|slot|NE| slouží k definici slotu (místa) pro obsah, který má být vložen do určitého místa v HTML šabloně.|

|spellcheck|NE| k určení, zda má být pro daný textový vstup aktivována automatická kontrola pravopisu |

|style|NE|není pro naše použití důležité|

| tabindex | DISKUZE | budeme simulovat klávesy? určuje pořadí, v jakém se prvek zařadí do tabulátoru |

|title|NE|  |

|translate| NE |označení, zda má být obsah elementu přeložen do jiného jazyka, když je zobrazen uživateli.  |

|virtualkeyboardpolicy| NE | Určuje, jak virtuální klávesnice na dotykovém zařízení reaguje na interakci s konkrétními prvky na webové stránce - možnosti auto, manual, none |

h2. Podrobnější popis k vybraným globálním elementům

h3. atribut enterkehing - hodnoty

* enter: Tato hodnota indikuje, že po stisknutí klávesy Enter by měla být provedena výchozí akce spojená s daným vstupním polem, například odeslání formuláře.

* done: Tato hodnota indikuje, že po stisknutí klávesy Enter by měla být provedena akce spojená s dokončením editace, například potvrzení změn v textovém poli.

* go: Tato hodnota indikuje, že po stisknutí klávesy Enter by měla být provedena akce spojená s přechodem na jinou stránku nebo spuštění určité akce.

* next: Tato hodnota indikuje, že po stisknutí klávesy Enter by měla být provedena akce spojená s přechodem na další pole ve formuláři.

* search: Tato hodnota indikuje, že po stisknutí klávesy Enter by měla být provedena akce spojená s vyhledáváním, například spuštění vyhledávání po zadání dotazu do vyhledávacího pole.

h3. atribut inputmode - hodnoty

* none: Specifikuje, že vstupní pole nepřijímá žádný text, tj. není určeno k zadávání textu. Používá se pro vstupní * * pole, která slouží k volbě nebo odeslání hodnoty, ale nekromazí se v nich text.

* text: Specifikuje, že vstupní pole očekává standardní textový vstup.* 

* tel: Specifikuje, že vstupní pole očekává telefonní číslo.

* url: Specifikuje, že vstupní pole očekává URL adresu.

* email: Specifikuje, že vstupní pole očekává e-mailovou adresu.

* numeric: Specifikuje, že vstupní pole očekává číselný vstup.

* decimal: Specifikuje, že vstupní pole očekává desetinné číslo.

* search: Specifikuje, že vstupní pole očekává hledací dotaz.

h2. Elementy s pouze globálními atributy

<abbr>, <acronym> (deprecated) - místo toho použít <abbr>, <address>, <article>, <aside>

h2. Sdílené atributy

|Atribut|ELEMENTY| Uchovávat|Komentář|

|href|<a>, <link>, <area>, <base>, <form>, <script> | ANO | |

| download| <a>, <area>, <button>| ANO | ano- má-li hodnotu |

|target|<a>, <area>, <base> |ANO|  k určení, kde má být otevřený odkaz, ať už je to nové okno, nová záložka nebo jiný rámec |

|ping|<a>, <area>, <form>|ANO| používá se ke sledování, které URL adresy byly vyvolány po kliknutí na odkaz|

|hreflang|<a>, <link>|NE| označuje jazyk nebo region cílového dokumentu nebo odkazu|

|referrerpolicy|<a>, <area>, <img> <iframe>, <link>, <script>|DISKUZE|jakým způsobem má být předáván tzv. "referrer" (informace o tom, odkud uživatel přišel) při načítání externího zdroje, jako jsou obrázky, skripty, styly nebo odkazy |

|rel| <a>, <link>, <area>, <base>, <form>|NE| definici vztahů mezi aktuálním dokumentem a odkazovaným dokumentem nebo zdrojem|

|type|<button>, <input>, <a>, <script>, <style>, <source>, <embed>|NE| používá se k určení typu obsahu nebo skriptu, který je obsažen v daném elementu|

|charset|<meta>, <a> | DISKUZE|kódování v použitém dokumentu, odkazu, ...|

|coords|<area>, <a>  | NE| definuje jednu oblast v rámci obrázkové mapy, která může být odkazem na jiný dokument nebo akcí.|

|name|<a>, <form>, <iframe>, <img>, <input>, <button> |ANO| lze použít k identifikaci|

|rev|<a> <link> | NE| deprecated, specifikuje revese link, opak rel |

|shape|<a>, <area>| NE|určuje tvar oblasti, na kterou se odkazuje |

|alt|<area>, <img>, <input> |NE/DISKUZE| alternativní textový popisek obsahu prvku pro uživatele|

| tabindex|<area>, <select>, <textarea>, <button> | DISKUZE| umožňuje určit pořadí, v jakém jsou prvky na stránce procházeny pomocí klávesnice (pomocí kláves TAB nebo jiných klávesových zkratek) |

|autoplay |<audio>, <video>| NE |bez hodnoty, mediální obsah se přehrává automaticky po načtení stránky|

|controls|<audio>, <video>|NE|bez hodnoty, zobrazení standartních ovládajích prvků (tlačítka přehrávání, regulýtor hlasitosti atd.)|

|controlslist|<audio>, <video> | DISKUZE|pro řízení, jaké ovládací prvky se zobrazí v uživatelském rozhraní přehrávače |

|crossorigin|<audio>, <video>, <img>, <script>, <link>  |NE |pro zajištění bezpečného a správného načítání obsahu z různých zdrojů |

|disableremoteplayback|<audio>, <video>| NE|bez hodnoty, zakázání přehrávání na vzdálených zařízeních pomocí ovládacích prvků|

|loop|<audio>, <video>|NE|bez hodnoty, přehrávaný obsah se automaticky opakuje |

|muted|<audio>, <video>|NE|bez hodnoty, zvuk je ve výchozím stavu ztlumený|

|preload|<audio>, <video> |NE|určení zda by se měl multimediální obsah načíst ihned po načtení stránky nebo za vyžádání|

|src|<audio>, <video>, <img>, <iframe>, <script>, <embed>, <source> | DISKUZE| určení zdroje obsahu, který má být zobrazen nebo načten|

h2. Podrobnější popis sdílených atributů

* target - kde se užité URL zobrazí - možnosti: 

_blank (otevře propojený dokument na nové kartě nebo okně), _self (otevře propojený dokument ve stejném rámci nebo kartě), _parent (otevře propojený dokument v nadřazeném rámci) nebo _top (otevře propojený dokument v plném rozsahu tělo okna)

* download: Tento atribut, pokud je přítomen, naznačuje, že cíl by měl být spíše stažen, než na něj po kliknutí navigovat. Může mít hodnotu, která určuje výchozí název souboru, který by měl mít stažený soubor.

Příklad: <a href="example.zip" download>Download Example</a>  <a download="filename"> - specifikuje stahovaný soubor

* controlslist hodnoty:

# nodownload: Zakazuje uživatelům možnost stahování média pomocí přehrávače.

# nofullscreen: Zakazuje uživatelům možnost přepnutí přehrávače do režimu celé obrazovky.

# noremoteplayback: Zakazuje uživatelům možnost přehrávání média na jiných zařízeních pomocí ovládacích prvků.

# noremoteplayback: Zakazuje uživatelům možnost ovládání přehrávání na jiných zařízeních pomocí ovládacích prvků.

# noplaybackrate: Zakazuje uživatelům možnost nastavení rychlosti přehrávání média.

# noduration: Zakazuje uživatelům možnost zobrazení celkové délky média.

# nocontextmenu: Zakazuje zobrazení kontextového menu při kliknutí pravým tlačítkem myši na přehrávači.