Rubriky
Užitečnosti

UX fail – pole „Jméno“

Často se setkávám s formulářem, kde je pole „Jméno“. Tohle prosím (téměř) nikdy nepoužívejte!

V čem je problém? Část formulářů si pod tím představuje celé jméno, část křestní jméno (a následuje pole pro příjmení). Lidé čtou postupně, takže neví, co jste tím mysleli a prostě tam „něco“ napíšou, tak jak jim mozek řekne, že je to asi správně, třeba proto, že tak jsou zvyklí z jiného webu.

Ale s šancí tak zhruba 50 % to bude blbě. A nejen to – jestliže tam očekáváte celé jméno a následující pole vypadá opět stejně, ale je to třeba pole pro adresu, tak i když tam budete mít nadpis adresa, tak vám do toho pole část lidí vyplní příjmení, protože prostě do toho předchozího napsali křestní jméno a po něm vždy následuje příjmení a lidé si tak ani nepřečtou název. V lepším případě si všimne, že po něm chcete najednou adresu, takže mu dojde, že v prvním políčku udělal chybu, takže se naštvaně vrátí a opraví to, jenže už máte naštvaného uživatele.

Řešení je snadné, vždy používejte jako název pole

  • Jméno a příjmení (pakliže není zásadní problém s cizinci na českých formulářích, viz dál),
  • Celé jméno (i sem někdo občas napíše třeba Honza, ale je to už méně časté)
  • Křestní jméno (tam kde fakt chcete jen to, ale opět pozor na mezinárodní užití)
  • Uživatelské jméno (tam kde má uživatel vytvořené svůj nick)
  • Přihlašovací e-mail – dost přihlašovacích formulářů má pole „jméno“, myslí tím uživatelské jméno, ale ve skutečnosti je to vlastně uživatelův e-mail (takže uživatel ještě přemýšlí, co tam má kde zadaný za nick).

Možná existuje jedna výjimka – pakliže je vám úplně jedno, co do formuláře člověk napíše. Viz třeba tady na tom blogu u komentáře. Mohl bych to upravit (mimochodem na WordPressu to lze i bez úprav překladů a šablon použitím filtru nad překladovou funkcí gettext).

A jestli můžu radit – používejte raději jedno pole pro celé jméno, a to se týká nejen českých formulářů. Důvodů je několik, mírně to zvyšuje vyplněnost formulářů (protože méně polí), lépe to chytají automatická vyplnění formulářů, ale na co se nejvíc zapomíná – je spousta národů, které prostě nemají jméno a příjmení.

Maďaři píší Příjmení Jméno, podobně Číňani a další národy. Nedá se na to ale spoléhat, mnozí se naučili, že to Evropané čekají jinak a píší to tak obráceně než doma.

Rusové mají střední jméno – patronymum – které je odvozené s křestního jména otce. Do kterého políčka by jej měli zapsat?

Arabská jména se skládají z hlavního jména, přezdívky, patronyma, místa narození.

Takže třeba jméno

ابو كريم محمد الجميل بن نضال بن عبد العزيز الفلسطيني

čili Abu Karim Muhammad al-Jamil ibn Nidal ibn Abdulaziz al-Filistin

Znamená

„Otec od Karima, Muhammed, nádherný, syn Nidala, syna Abdulazize, Palestinec“

A tak by se dalo pokračovat pro mnoho dalších národů a jazyků. V mezinárodních formuláří tak používejte prostě jen jedno pole – „Name“, tam to všichni chápou a nikdo si pod tím nepředstaví křestní jméno jako u nás (a naopak Full name by motivovalo možná ty Araby tam psát fakt celá jména, což asi nechcete).

Jinak chápu, že to budete chtít ukládat do databáze v nějakém standardizovaném formátu, třeba kvůli následnému oslovování v mailingu, v tom případě doporučím skvělý nástroj Foxentry, který to dokáže v 99 % rozpoznat, ať to člověk napíše jakkoliv, navíc najde i překlepy, oslovení, a má i tunu dalších skvělých funkcí pro formuláře (třeba kontrola validity e-mailů, doplnění detailu k firmě podle IČ či názvu, našeptávač adresy atd.)

A mimochodem, když už jsem zmínit ta automatická vyplnění formulářů – vřele doporučuji pro názvy polí (input name) používat zavedené anglické názvy (name, případně given-name a family-name, podobně pro další typy polí email, password, street-address …) a nikoliv jejich třeba české názvy či nějaké kryptické hodnoty. Důvodem je právě automatické vyplňování – pakliže pole pojmenujete správně, tak je dost možné, že celý váš formulář vyplní uživatel napsáním jednoho písmene a potvrzením.

Když už musíte nějaké kryptické hodnoty pro name použít (protože to tak pak třeba zpracovává skript na serveru), využijte parametr autocomplete, kde jako jeho hodnotu napíšete ten správný název pole. Názvy všech možných podporovaných polí najdete např. v popisu parametru autocomplete.

Rubriky
Užitečnosti

Add Reusable blocks to WordPress admin menu

Reusable blocks are no-so-much-known function but very handy function of WordPress Gutenberg editor. With them you can easily define a block (or series of blocks) that will share the content, so that you can re-use them anywhere and they will be the same.

You can also edit them in one place and anytime you can convert them to standard block, if you want to edit just one occurrence of the block. There is even an extra feature – you can export your reusable block to JSON and also import them.

The only problem is, that they are hard to manage – you must go to a post/page, click + for adding a new block, then switch to Reusable tab and then click Manage all reusable blocks, that will transfer you to /edit.php?post_type=wp_block page.

BTW – if you are little more experienced WP developer you simply from that given URI understand, how Reusable blocks work – they are simple a custom post type, where title is the name of the block and content is the block itself, so you can work with that as with any other CPT.

If you want to give editors easy way to manage reusable blocks, you can add the link to the management page to the menu. E.g. this action will add it as a submenu to both Pages and Posts menu for everyone with edit posts capability. There is also a plugin Reusable blocks extended that add such menu plus some other features.

function kapler_admin_menu() {
    global $submenu;
    $permalink = admin_url( 'edit.php' ).'?post_type=wp_block';
    $submenu['edit.php'][] = array( __('Reusable Blocks'), 'edit_posts', $permalink );
    $submenu['edit.php?post_type=page'][] = array( __('Reusable Blocks'), 'edit_posts', $permalink );
}
add_action( 'admin_menu', 'kapler_admin_menu' );
Rubriky
Užitečnosti

BeRider promo kód na dalších 15 minut zdarma

Možná jste zaznamenali službu sdílených skůtrů BeRider, která má pro Praze v tuto chvíli 150 elektrických motorek. Vyzkoušel jsem si to, je to super, zkuste to také – když při registraci použijete slevový/promo kód y2r4KDQpiV tak dostanete dalších 15 minut zdarma (k 15, které dostanete automaticky při registraci). Be Rider, Enjoy!

Rubriky
Užitečnosti

Sitemap.XML do Google Sheets pomocí Apps Script

Po delší době zas jeden krátký skript do Google Sheets, tentokrát parser libovolné standardní sitemap.xml. Opět je to zpracované jako funkce, tedy stačí pak do nějaké buňky přidat např.

=sitemap("https://www.sitemaps.org/sitemap.xml")

a kouzlo se zjeví.

Rubriky
Užitečnosti

Sledujte odjezdy z vaší blízké zastávky

Před pár týdny jsem tu psal článek o získávání dat z WWW stránek a ukládání dat do Google Sheets. A před pár dny se mi to hodilo, když jsem potřeboval v rámci jednoho hackathonu ukazovat na modelu „chytré zastávky“ přes iOT ukazovat dojezdové časy tramvaje.

Skript je velmi podobný, jen tentokrát data nepřidávám, ale nahrazuji. Výsledek naleznete v tomto Google Sheets dokumentu a bere data ze zastávkového tabla PID, podobné věřím najdete i pro jiná města.

Tedy stačí, když dáte Soubor / Vytvořit kopii a můžete pak přes Nástroje / Editor skriptů kouknout, jak je to řešené a třeba upravíte tu URL a regulární výrazy, aby to ukazovalo data, která potřebujete vy.

Vysvětlení asi netřeba, je to jasné z kódu, opět si můžete nastavit spouštěč, aby se vám tabulka třeba každých 5 minut aktualizovala (v editoru kódu pod Edit / Current project’s triggers).

Použití – můžete třeba zobrazovat u vás v práci na nějaké obrazovce časy odjezdů vlaků/autobusů/tramvají … v okolí, tak aby zaměstnanci věděli, jestli mají spěchat domů. Nebo to můžete propojit třeba se Slackem či nějakým vaším chatbotem, aby vám na nějaký váš dotaz typu „kdy mi to jede“, ukázal informace, které žádáte.

Rubriky
Užitečnosti

Jednoduchý automatický web scraper pro Google Sheets a Apps Script

V konferenci pro webové analytiky teď padl dotaz, jak jednoduše sledovat v pravidelných intervalech nějaký web, vzít z něj nějakou hodnotu a zapsat si ji někam do tabulky, pro nějaké budoucí vyhodnocení, porovnání atp.

K tomu samozřejmě můžete použít různé specializované nástroje typu Apify, nebo si napsat nějaký skript třeba v PHP a spouštět jej CRONem, ale velmi dobře se k tomu dá použít i bezplatný Google Sheets a případně Google Apps Script.

Rubriky
Užitečnosti

NoBabis – rozšíření do Chrome a Opery proti Babišovým médiím

Jak jste nepochybně zaznamenali, potvrdilo se, že (zatím) ministr financí Babiš hrubě ovlivňoval média, která vlastnil, dodával jim informace o jeho protivnících a naopak nechal tutlat nějaké jiné informace, kdy se mu to hodilo.

Nevěřím, že by se papírovým převedením médií pod nějaký jeho svěřenecký fond něco změnilo, nevěřím ani, že by se něco změnilo vyhozením přistiženého redaktora (zejm. bez vyvedení zodpovědnosti dalších lidí nad ním).

Proto jsem se rozhodl tato média nesledovat. Mám ale problém, za těch mnoho let jsem si zvykl na zpravodajství Babišových Lidovek a iDnes do té míry, že už to do adresního řádku prostě píšu automaticky.

A proto jsem vytvořil malé rozšíření do Chrome a Opery, které při pokusu o přechod na kteroukoliv homepage v doménách idnes, lidovky.cz, expres.cz a playtvak.tv přesměruje na některý jiný server (náhodně irozhlas.cz, aktualne.cz, forum24.cz, echo24.cz a seznam.cz/zpravy, které podle mě dnes drží prapor vysoké úrovně a důvěryhodnosti). Jiné menší a specializované servery (zatím) nepřesměrovávám, protože nesouvisí se zpravodajstvím.

Třeba se bude hodit i vám, poskytuji volně ke stažení, úpravám i čemukoliv dalšímu. Pozor, normálně není možné instalovat tyto soubory z jiných než oficiálních stránek, takže si soubor stáhněte, otevřete si stránku s rozšířeními a soubor na ni přetáhněte, pak už by mělo jen stačit povolit instalaci.

Jinak záměrně přesměrovávám jen homepage – když bych někde chtěl kliknout na konkrétní článek, tak bych si jej rád bez otravování přečetl. Kdybych někdy z nějakého důvodu potřeboval vidět homepage, vždy ji mohu otevřít v anonymní okně.

P.S.: vyzkoušejte také Android aplikaci Bez Andreje, která vám pomůže v prodejně rozpoznat potraviny, které vyrábí Babišovy firmy.

Rubriky
Užitečnosti

WordPress – konec problémů s psaním hranaté závorky

Jestli používáte aktuální verze WordPressu a nejste úplní začátečníci, tak jste nejspíš chtěli někdy napsat nějaký shortcode (jestli neznáte, to je něco jako „makro“ připravené nějakým vývojářem tématu či šablony použitelné v rámci textů příspěvků, uvozené nějakým magickým slovem v [hranatých závorkách], více viz Shortcode API).

Jenže WordPress někdy od verze 4.něco používá pro wysiwyg editor aktualizovanou verzi TinyMCE, která obsahuje i fullscreen plugin – vychytávku, která když v editoru zmáčknete Ctrl+Alt+F (nebo pravý alt + F), tak vám jej zvětší na plné okno, aby vás nic nerušilo.

A to je právě ten problém, protože stejná klávesová zkratka je na české, slovenské, polské a bůhvíjakých dalších klávesnicích vyhrazená pro napsání levé hranaté závorky, bez které se ten shortcode nedá moc napsat (vynechám hacky jako přepínání klávesnic či napsání jinde a zkopírování).

Reportoval jsem to jako bug WordPressu, tam mě s tím poslali k … TinyMCE, tak jsem to reportoval i tam, uvidíme, jestli to upraví.

Nicméně neplačte, řešení existuje a je primitivní, stačí jedna pidiaakcička do vašeho functions.php souboru, případně pro ty, pro které je i to příliš složité, jsem z toho připravil i plugin. Tak si vyberte:

Úprava – přidání do functions.php:

// This is all the magic. Simply called on TinyMCE Init and removing CTRL+ALT+F shortcut defined in default TinyMCE package
add_action( 'wp_tiny_mce_init', function () {
?>
<script>
 jQuery( document ).on( 'tinymce-editor-init', function( event, editor ) {
 editor.shortcuts.remove( 'meta+alt+f' );
 }
 );
</script>
<?php
});

Plugin

Plugin je zatím ke stažení zde. Dal jsem jej ke zveřejnění v oficiálním seznamu pluginů, pak to tu aktualizuji.

Licence

Jestli máte neodbytnou potřebu mi poděkovat, ocením, když o této stránce dáte vědět na svém Facebooku, Twitteru, Google plus, blogu či třeba domovní nástěnce. Jo a jestli to tu neznáte – možná se vám bude hodit pár dalších podobně užitečných tipů.

Disclaimer

A samozřejmě – jestli vám můj kód sežere kočku či zapálí dům, tak mi nevolejte.

Rubriky
Užitečnosti

Kontrola/oprava/úprava vložených hodnot v Google Sheets díky Apps Script

Google před asi 3 měsíci v tichosti odstranil jeden z posledních nedostatků Google Sheets App Script oproti VBA u MS Excelu a tím byla faktická nemožnost kontroly vkládaných dat skriptem (nicméně existuje alespoň dost mocná možnost Data/Ověření platnosti včetně možnosti vlastního vzorce).

Problém byl, že zde sice existovala událost onEdit(e), vracející novou hodnotu, problém byl, že zde chyběla ta původní hodnota a událost onEdit nastala až po provedení změny, tj. když se vám nová hodnota z nějakého důvodu nezdála, nemohli jste vrátit původní hodnotu (vynechám ošklivý hack, kdy jste si ukládali při otevření hodnotu všech buněk a porovnávali s nimi).

A to se právě změnilo a událost onEdit nyní obsahuje i původní hodnotu a teď někdy se to i dostalo do nápovědy.

Praktický příklad – řekněme, že nechceme povolit zadání větší hodnoty než 100, v opačném případě tam chceme vrátit původní hodnotu (není to tak úplně praktický příklad, protože zrovna tohle snadno vyřešíte tím Ověřením platnosti, ale pro ilustraci to postačí).

function onEdit(e){
 var range = e.range;
 if ( e.value > 100 ) range.setValue(e.oldValue); 
}

Nebo tedy trochu jiný příklad – řekněme, že po změně hodnoty chcete do poznámky k dané buňce napsat, kdy byla změněna a jaká byla původní hodnota.

function onEdit(e){
 var range = e.range;
 var note = range.getNote();
 note = (note) ? note+"\n" : note; 
 range.setNote(note+e.oldValue + ' (do ' + Utilities.formatDate(new Date(), "GMT+1", "d. M. yyyy HH:MM:ss") + ')');
}

Jen upozorním, že onEdit se spouští pro úpravu kterékoliv buňky, tj. pakliže budete chtít vliv omezit jen pro některé buňky, musíte testovat, zdali onen e.range je mezi nimi, což je mimo téma tohohle postu (prozradím, že bohužel Apps Script nemá obdobu MS VBA Application.Intesect, takže to je netriviální a musí se na to jít přes ověřování pozice e.range vůči definovaným okrajům).

Rubriky
Užitečnosti

WordPress: vytvářejte snadno podstránky aktuální stránky

Pakliže používáte WordPress jako CMS pro firemní web, pak nejspíše používáte Stránky, které mají na rozdíl od Příspěvků hierarchii. Běžně tak potřebujete vytvořit podstránku k nějaké stránce. Je to triviální, prostě při vytváření stránky vyberete v pravém menu Nadřazenou stránku a hotovo.

Jenže když těch stránek máte hodně, musíte tu nadřazenou hledat, navíc mnoho lidí má jiný pracovní a myšlenkový postup – jsou na webu na té nadřazené stránce a řeknou „ha, k téhle stránce by se hodila nějaká podstránka“, nebo prostě vytváří nový web a pracují prostě stylem „Teď vytvořím Úvodní stránku. Publikuju jí. Zkontroluji. A teď k ní potřebuju podstránku“.

Proto jsem pro vás připravil drobný kód pro vaše functions.php, které přidá do záložky Akce ve vaší Navigační liště (Admin Bar) volbu „Přidat podstránku“. Po kliknutí na tento odkaz se vám otevře okno pro založení nové stránky a automaticky předvyplní Nadřazenou stránku tou, ze které jste přišli.

// přidá odkazy do admin baru
function kapler_admin_bar_menu($wp_admin_bar) {
global $post;
 // jen když jsem na Stránce a aktuální uživatel má právo editovat stránky a má právo k té nadřazené stránce
 if (is_page() && current_user_can( 'edit_page', $post->ID )) {
 $args = array(
 'id' => 'add_subpage',
 'title' => _('Vytvořit podstránku'), 
 'href' => admin_url( 'post-new.php?post_type=page&parent='.$post->ID ),
 'parent' => 'new-content'
 );
 $wp_admin_bar->add_node($args);
 }
}
add_action('admin_bar_menu', 'kapler_admin_bar_menu');

// když je editační stránka page s předvyplněným parent, nastaví jej
function kapler_admin_head() 
{
 // vkládat jen u Stránek a jen když je vyplněný parametr parent
 if( !empty($_GET['post_type']) && $_GET['post_type']=='page' && !empty( $_GET['parent'] ) ) {
 ?>
 <script type="text/javascript">
 jQuery(document).ready( function($) 
 {
 $('#parent_id').val(<?php echo $_GET['parent']; ?>);
 });
 </script>
 <?php
 }
}
add_action( 'admin_head-post-new.php', 'kapler_admin_head' );