front-end https://www.drupal.cz/stitky/front-end cs Jednoduché sdílení na sociální sítě pro Drupal 8 https://www.drupal.cz/navody/jednoduche-sdileni-na-socialni-site-pro-drupal-8 <span class="field field--name-title field--type-string field--label-hidden">Jednoduché sdílení na sociální sítě pro Drupal 8</span> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><a title="Zobrazit profil uživatele." href="/user/petr" class="username">petr</a></span> <span class="field field--name-created field--type-created field--label-hidden">Pá, 09/28/2018 - 01:52</span> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p class="lead">Existuje množství online nástrojů i hotových modulů s jejich integrací pro pohodlné sdílení stránek. Často jsou závislé na JavaScriptu, nejen proto je bezpečnost uživatelů diskutabilní. V tomto článku se dozvíte jak si vytvořit vlastní, jednoduchou ale flexibilní integraci bez JavaScriptu.</p> <h2>Bezpečnost především</h2> <article class="embedded-entity align-right"><article class="media media--type-image media--view-mode-embed"><div class="field field--name-field-media-image field--type-image field--label-hidden field__item"> <img src="/sites/default/files/styles/original/public/images/2018-09/social-shares-initial_0.png?itok=Hwk8cbm3" width="600" height="400" alt="Drupal a sociální sítě" class="image-style-original" /></div> </article></article><p>V dnešní době se na bezpečnost uživatelů v online světě kladou stále větší nároky. Nástroje na sdílení jako např AddToAny, poskytují nepřeberné množství sociálních sítí, ale samozřejmě za to něco chtějí. Při kliknutí na jejich widget jste nejpre spojeni se serverem dané služby, který váš požadavek zpracuje a následně ho teprve pošle na cílový server. Mají tedy přístup jak k tomu co jste "lajknuli", hlavně jsou ale schopní vás sledovat přes různé weby. Díky tomu vytvoří váš uživatelský profil, a to je v dnešní době velice hodnotná informace. Další možností narušení bezpečnosti spočívá v tom, že tyto scripty jsou šířeny z CDN serverů a vy nemáte možnost ovlivnit jestli se ve scriptu neobjeví nějaká nová funkce, nebo nedejbože, že daný script někdo hackne a na počítače uživatelů se dostane něco zcela jiného. Něco takového na svém webu nechci a klienti většinou také ne. :)</p> <p>Naštěstí můžeme využít přímo i jednoduchý způsob sdílení bez prostředníka.</p> <h2>Začneme jednoduše</h2> <p>Nejdříve si vytvoříme Vlastní typ bloku (Custom block type), ale můžete klidně použít i oblíbený modul paragraphs.</p> <p><strong>Jméno vlastního typu bloku</strong>: Sociální sítě<br /><strong>Strojové jméno</strong>: [social_share]</p> <p>Nyní přihoďtě pár polí typu boolean. Jedno pro každou službu.</p> <p><strong>Popiska pole</strong>: [Název pro lidi] např. “Twitter”<br /><strong>Strojové jméno</strong>: [strojove_jmeno] např. “social_share_twitter” – toto jméno budeme později potřebovat.</p> <p>Přejděte na Zprávu zobrazení bloku (/admin/structure/block/block-content/manage/social_share/display) a změňte výstup polí na Vlastní. Vyplňte hodnotu pro TRUE textem, který budete chtít vidět na odkazu např. "<strong>Sdílet na Twitteru</strong>".</p> <p>Tím máme připravený způsob pro zádávání dat a můžeme vytvořit první blok Sociální sítě a zaškrtnout požadované služby. Na webu uživatelé nyní uvidí pouze Popisky polí.</p> <article class="embedded-entity"><article class="media media--type-image media--view-mode-embed"><div class="field field--name-field-media-image field--type-image field--label-hidden field__item"> <img src="/sites/default/files/styles/original/public/images/2018-09/social-share-labels.png?itok=XSq4QutB" width="152" height="103" alt="Sdílení na sociálních sítích" class="image-style-original" /></div> </article></article><h2>Theming</h2> <p>Zábavnější část je změna výstupu pole z obyčejné popisky na opravdý link na sdílení. Na začátku je dobré vědět, jak má výsledný link vypadat a jaké informace se prodstřednictím odkazu přenáší. Každá služba má trochu jiné požadavky.</p> <p>Příklady odkazů:</p> <pre> <strong>Facebook:</strong> http://www.facebook.com/share.php?u=[PAGE_URL]&amp;title=[PAGE_TITLE] <strong>Twitter:</strong> http://twitter.com/intent/tweet?status=[PAGE_TITLE]+[PAGE_URL] <strong>LinkedIn:</strong> http://www.linkedin.com/shareArticle?mini=true&amp;url=[PAGE_URL]&amp;title=[PAGE_TITLE]&amp;source=[BASE_PATH] <strong>E-mail:</strong> mailto:?subject=Interesting page [PAGE_TITLE]&amp;body=Check out this site I came across [PAGE_URL]</pre> <p>Z toho vidíme, že pro zprovoznění odkazu pro Twitter budeme potřebovat jméno stránky [PAGE_TITLE] a její URL adresu [PAGE_URL]. Například LinkedIn navíc požaduje i základní cestu [BASE_PATH]. V základním nastavení se v TWIG templatě dostaneme pouze k URL adrese. Další proměné si musíme připravit v preprocesu.</p> <p>Proto si do souboru <em>theme_name.theme</em> přidáme</p> <pre> /** * Implements template_preprocess_field(). */ function theme_name_preprocess_field(&amp;$variables, $hook) { switch ($variables['field_name']) { case 'field_social_share_twitter': $request = \Drupal::request(); $route_match = \Drupal::routeMatch(); $title = \Drupal::service('title_resolver') -&gt;getTitle($request, $route_match-&gt;getRouteObject()); if (is_array($title)) { $variables['node_title'] = $title['#markup']; } else { $variables['node_title'] = (string) $title; } $variables['base_path'] = base_path(); break; } }</pre> <p>Je pravděpodobné, že budete chtít přidat více služeb najednou, proto bude vhodnejší použít DRY (Don't repeat yourself) přístup, abychom kód zbytečně neopakovali. Vytvoříme si tedy pomocnou funkci pro generování proměných.</p> <pre> /** * Preprocess field_social_share. */ function _theme_name_preprocess_field__social_shares(&amp;$variables) { $request = \Drupal::request(); $route_match = \Drupal::routeMatch(); $title = \Drupal::service('title_resolver') -&gt;getTitle($request, $route_match-&gt;getRouteObject()); if (is_array($title)) { $variables['node_title'] = $title['#markup']; } else { $variables['node_title'] = (string) $title; } $variables['base_path'] = base_path(); }</pre> <p>Tuto funkci si následně můžeme zavolat pro různé příležitosti.</p> <pre> /** * Implements template_preprocess_field(). */ function theme_name_preprocess_field(&amp;$variables, $hook) { switch ($variables['field_name']) { case 'field_social_share_twitter': case 'field_social_share_facebook': case 'field_social_share_linkedin': case 'field_social_share_email': _theme_name_preprocess_field__social_shares($variables); break; } }</pre> <p>Nyní máme připravený titulek stránky a základní cestu pro použití v šablonách.<br /><br /> Zapněte si Twig debug a v prohlížeči se podívejte na zdrojový kód checkboxů. Nad polem uvidíte seznam návrhů jmen pro šablony, to které heldáme je <em>field--field-social-share-twitter.html.twig</em>.</p> <p>Protože výstup má být jendoduchý odkaz můžeme předpokládat, že můžeme odebrat podmínky pro zobrazení popisek polí a kontroly vícenásobného pole. Na druhou stranu je důležité zajistit aby se pole nezobrazilo, pokud není checkbox zaškrtnutý. To není v TWIGU úplně jednoduché, protože mu chybí informace o stavu zatržítka. Máeme přístup pouze k aktuální hodnotě. Protože ale používáme vlastní snadno změnitelnou hodnotu nemůžeme tento přístup použít. Naštěstí můžeme použít malý trik. Vzpomínáte jak jsme nenastavili žádnou hodnotu pro FALSE? Díky tomu můžeme testovat jestli pole vrací nějaký #markup. Prázdná hodnota FALSE nevytvoří žádný markup a podmínka se tím pádem nevykoná.</p> <pre> {% if item.content['#markup'] %}</pre> <p>Zde je kompletní kód šablony pro pole.</p> <pre> {% set classes = [ 'social-share__service', 'social-share__service--twitter', ] %} {% for item in items %} {% if item.content['#markup'] %} &lt;a {{ attributes.addClass(classes) }} href="http://twitter.com/intent/tweet?status={{ node_title }}+{{ url('&lt;current&gt;') }}" title="Share to {{ item.content }}"&gt;{{ item.content }}&lt;/a&gt; {% endif %} {% endfor %}</pre> <p><br /> Pro další služby bude potřeba šablonu samozřejmě upravit, postup bude ale stále stejný.</p> <p>A máme hotovo. Nyní by měl blok vracet správné odkazy pro sdílení na sociální sítě.</p> <article class="embedded-entity"><article class="media media--type-image media--view-mode-embed"><div class="field field--name-field-media-image field--type-image field--label-hidden field__item"> <img src="/sites/default/files/styles/original/public/images/2018-09/social-share-links.png?itok=_O2mRnwS" width="252" height="31" alt="Odkazy v Drupalu pro sdílení na sociálních sítích" class="image-style-original" /></div> </article></article><h2>Pro tip:</h2> <p>Zatím jsme nepoužily ani jeden rozšiřující modul. Samozřejmě váš zákazník se nespokojí s obyčejným vzhledem odkazu a bude chtít něco hezčího.</p> <p>Můžete si vzhled přidat přímo to tématu, ale to nebude příliš flexibilní. Naštěstí existují moduly jako <a href="https://www.drupal.org/project/entity_class_formatter">Entity Class Formater</a> pomocí kterého můžete snadno přidat potřebnou třídu například ze select listu. Pro přehlednost můžete vytovřit několik seznamů s třídami – Velikost, Barva, Zaoblení rohů a podobně. Tím dáte editorovi potřebnou variabilitu.</p> <h2>Závěrem</h2> <p>Nyní jsme v bodě, kdy máme náš blok hotový. V každé jeho instanci můžeme zvolit, které ze služeb se na něm zobrazí a jak budou vypadat. Např. na blogu můžete mít sdílení na Twitter, Facebook  a E-mail nastylované jako malé kruhové ikonky. Pro stránku s nabídkou pracovních pozicí bude ale vhodnější zobrazit velkou čtvercovou ikonu s popiskem LinkedIn. </p> <article class="embedded-entity"><article class="media media--type-image media--view-mode-embed"><div class="field field--name-field-media-image field--type-image field--label-hidden field__item"> <img src="/sites/default/files/styles/original/public/images/2018-09/social-share-icons.png?itok=jPJnhgGU" width="607" height="521" alt="Sdílení na sociálních sítích v Drupalu" class="image-style-original" /></div> </article></article><h2>Poznámka na konec</h2> <p>Den po dopsání draftu tohoto článku byl vydán modul <a href="https://www.drupal.org/project/better_social_sharing_buttons" title="Better Social Sharing Buttons – Drupal Module">Better Social Sharing Buttons</a> který funguje na podobném principu. Je snažší ho nastavit protože má předdefinované styly i služby, to ale může být zároveň nevýhodou. Pokud budete chtít styl změnit, nebo přidat jiné služby může to být složitější.</p> </div> <div class="field field--name-field-tags field--type-entity-reference field--label-above"> <div class="field__label">Tags</div> <div class="field__items"> <div class="field__item"><a href="/stitky/drupal-8" hreflang="cs">drupal 8</a></div> <div class="field__item"><a href="/stitky/socialni-site" hreflang="cs">sociální sítě</a></div> <div class="field__item"><a href="/stitky/no-js" hreflang="cs">no-js</a></div> <div class="field__item"><a href="/stitky/front-end" hreflang="cs">front-end</a></div> </div> </div> <div class="field field--name-field-teaser-image field--type-entity-reference field--label-above"> <div class="field__label">Teaser image</div> <div class="field__item"><a href="/media/436" hreflang="cs">Sdílení na sociální sítě – úvodník</a></div> </div> Thu, 27 Sep 2018 23:52:31 +0000 petr 886 at https://www.drupal.cz Podrobte webové stránky analýze během pár minut https://www.drupal.cz/clanky/podrobte-webove-stranky-analyze-behem-par-minut <span class="field field--name-title field--type-string field--label-hidden">Podrobte webové stránky analýze během pár minut</span> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p>Na webové stránky se lze dívat z mnoha pohledů a kromě subjektivního designu lze prakticky každý číselně vyhodnotit. V článku se dozvíte, jaké metriky jsou důležité pro vyhodnocení webu. Tyto metriky mají dopad jak na <strong>prožitek vašeho návštěvníka</strong>, tak v mnoha případech i na <strong>výsledky ve vyhledávačích</strong>. Ty už nějakou dobu berou v potaz jak podporu responzivního chování, tak i rychlost webu.</p> <h2>Rychlost načítání webu</h2> <p>Rychlé načítání webu je čím dál důležitější vlastnost. Pomalé weby jsou znevýhodňovány ve výsledcích vyhledávání, pomalé načítání odrazuje návštěvníky od kliknutí na další článek, stahování velkých objemů dat otráví každého mimo 4G signál. Jak zjistíte, jak si vedete a co můžete zlepšit? Zkuste následující online nástroje:</p> <ul><li><a href="https://gtmetrix.com/">https://gtmetrix.com/</a></li> <li><a href="https://tools.pingdom.com/">https://tools.pingdom.com/</a></li> <li><a href="https://www.webpagetest.org/">https://www.webpagetest.org/</a></li> </ul><h2>Obrázky</h2> <p>Bez obrázků se dnes moc webů neobejde. Tlak na 4k monitory a retina displeje nás vývojáře nutí používat obrázky s vysokým rozlišením. Ty by se ale neměly načítat zbytečně i pro menší zařízení. Obrázky taktéž můžete před umístěním na web převést do správného formátu a zkomprimovat. Zjistěte, zda máte prostor pro optimalizaci vašich obrázků: <a href="https://webspeedtest.cloudinary.com/">https://webspeedtest.cloudinary.com/</a> Zjistíte, že <strong>s Webp formátem dokážete ušetřit až 70 % velikosti obrázku</strong>. S využitím vektorové grafiky (SVG) se dostanete ještě na nižší čísla a ještě vás ušetří trápení s responzivním chováním.</p> <h2>Mobilní responzivita</h2> <p>Responzivní chování je komplexní UX analýza, kterou lze těžko vyhodnotit bez reálného uživatelského testování. I tak ale Google přišel se svým hodnotícím algoritmem, který můžete vyzkoušet zde: </p> <ul><li><a href="https://search.google.com/test/mobile-friendly">https://search.google.com/test/mobile-friendly</a></li> </ul><h2>Bezpečnost</h2> <p>Otestovat bezpečnost webových stránek online není vůbec jednoduché. Můžete si vyzkoušet penetrační testy (např. <a href="https://pentest-tools.com/cms-vulnerability-scanning/drupal-scanner">https://pentest-tools.com/cms-vulnerability-scanning/drupal-scanner</a>), ale zpravidla se bude jednat o placené služby. </p> <p>Využijte ale základní <strong>test hlaviček požadavků</strong>, které se odesílají: <a href="https://securityheaders.com/">https://securityheaders.com/</a>. Pokud získáte A hodnocení, máte velkou pravděpodobnost, že i ostatní aspekty bezpečnosti budou ošetřeny.</p> <h2>SEO</h2> <p>Obdobných online testovacích nástrojů SEO nastavení vašeho webu naleznete na internetu spousty, proto zde žádný nebudu upředňostňovat. Musíte ale počítat s faktem, že tyto nástroje <strong>hodnotí pouze technické on-page faktory</strong>, jako správně uvedené tagy (nechybí H1, Page Title, Page Description,...). V tuto chvíli nevím o online nástroji, který by plnohodnotně bral v potaz i váš business, analýzu klíčových slov, obsah webu, konkurenci, chování návštěvníků z měřících nástrojů. Pokud o nějakém víte, podělte se v komentáři.</p> <h2>Výkon PHP aplikace - pro pokročilé</h2> <p>Pokud disponujete vyšperkovaným front-endem, kvalitním hostingem a stále trpíte při každém načtení stránky, můžete zkusit analyzovat i PHP back-end aplikace pomocí <a href="https://blackfire.io/">https://blackfire.io/</a>. Díky tomuto nástroji jste i v neplacené verzi schopni zjistit, co brzdí načítání celé stránky.</p> <h2>Drupal moduly</h2> <p>Když už jsme na Drupal.cz, uvedu i pár analytických modulů přímo pro Drupal, které vám pomohou i v rámci administrace webu.</p> <ul><li><a href="https://www.drupal.org/project/seo_checklist">https://www.drupal.org/project/seo_checklist</a></li> <li><a href="https://www.drupal.org/project/hacked">https://www.drupal.org/project/hacked</a></li> <li><a href="https://www.drupal.org/project/be_sure">https://www.drupal.org/project/be_sure</a></li> <li><a href="https://www.drupal.org/project/production_checklist">https://www.drupal.org/project/production_checklist</a></li> <li><a href="https://www.drupal.org/project/google_analytics_reports">https://www.drupal.org/project/google_analytics_reports</a></li> </ul><h2>Závěr</h2> <p>Metriky ve webovém prostředí se mění téměř ze dne na den. Co včera byla vyhovující, zítra může způsobit potíže. Především pokud se bavíme o bezpečnosti. Používáte další online nástroje pro analýzu webových stránek? Máte oblíbené další moduly, které vám třeba napoví, na co se soustředit? Dejte vědět v komentářích.</p> </div> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><a title="Zobrazit profil uživatele." href="/user/hsponner" class="username">hsponner</a></span> <span class="field field--name-created field--type-created field--label-hidden">So, 09/15/2018 - 12:36</span> <div class="field field--name-field-tags field--type-entity-reference field--label-hidden field__items"> <div class="field__item"><a href="/stitky/bezpecnost" hreflang="cs">bezpečnost</a></div> <div class="field__item"><a href="/stitky/drupal" hreflang="cs">drupal</a></div> <div class="field__item"><a href="/stitky/analyza" hreflang="cs">analýza</a></div> <div class="field__item"><a href="/stitky/front-end" hreflang="cs">front-end</a></div> <div class="field__item"><a href="/stitky/pro-vyvojare" hreflang="cs">pro vývojáře</a></div> </div> <section class="field field--name-field-comments-article field--type-comment field--label-above comment-wrapper"> <h2 class="title">Komentáře</h2> <a id="comment-3431"></a> <article data-comment-user-id="101" class="comment js-comment"> <mark class="hidden" data-comment-timestamp="1540208066"></mark> <footer class="comment__meta"> <article class="profile"> <div class="field field--name-field-dcz-user-image field--type-image field--label-hidden field__item"> <img src="/sites/default/files/styles/thumbnail/public/users/avatar.jpg?itok=aYemfswI" width="100" height="100" alt="siva01" class="image-style-thumbnail" /> </div> </article> <p class="comment__submitted">Napsal uživatel <a title="Zobrazit profil uživatele." href="/user/siva01" class="username">siva01</a> dne Po, 10/22/2018 - 13:34</p> <span class="permalink"><a href="/comment/3431#comment-3431" hreflang="cs">Trvalý odkaz</a></span> </footer> <div class="content"> <h3><a href="/comment/3431#comment-3431" class="permalink" rel="bookmark" hreflang="cs">Nejen marketing</a></h3> <div class="clearfix text-formatted field field--name-comment-body field--type-text-long field--label-hidden field__item"><p>Docela tu chybí <a href="https://www.marketingminer.com/cs/miners">MarketingMinner</a>. Nejen, že to umí analyzovat cizí weby, ale i ten váš a to včetně analýzy klíčových slov a jejich pozic. Minerů je tam hned několik, takže si každý najde ten svůj. </p></div> <drupal-render-placeholder callback="comment.lazy_builders:renderLinks" arguments="0=3431&amp;1=default&amp;2=cs&amp;3=" token="NmAD-FbSAyGy1ulWbfDWvB6rhicqycpE2G01e7e4moY"></drupal-render-placeholder> </div> </article> <h2 class="title comment-form__title">Přidat komentář</h2> <drupal-render-placeholder callback="comment.lazy_builders:renderForm" arguments="0=node&amp;1=1431&amp;2=field_comments_article&amp;3=comment_article" token="gUkve9CDPSkfDkDB8GK-Q5JDCHX3m623GIn4ixq-xIA"></drupal-render-placeholder> </section> Sat, 15 Sep 2018 10:36:33 +0000 hsponner 1431 at https://www.drupal.cz