{"id":5068,"date":"2019-11-24T11:31:29","date_gmt":"2019-11-24T08:31:29","guid":{"rendered":"https:\/\/sitecenneti.com\/wordpress\/?p=5068"},"modified":"2019-11-24T15:06:56","modified_gmt":"2019-11-24T12:06:56","slug":"7-2-en-iyi-ui-kullanici-arayuzu-pratikleri","status":"publish","type":"post","link":"https:\/\/sitecenneti.com\/wordpress\/wordpress-tema-yapimi\/7-2-en-iyi-ui-kullanici-arayuzu-pratikleri\/","title":{"rendered":"7.2 En \u0130yi UI (Kullan\u0131c\u0131 Aray\u00fcz\u00fc) Pratikleri"},"content":{"rendered":"<div id=\"toc_container\" class=\"toc_transparent no_bullets\"><p class=\"toc_title\">BU DERS\u0130N BA\u015eLIKLARI<\/p><ul class=\"toc_list\"><li><a href=\"#Logo_Resmine_Ana_Sayfa_Linki_Verin\"><span class=\"toc_number toc_depth_1\">1<\/span> Logo Resmine Ana Sayfa Linki Verin<\/a><\/li><li><a href=\"#Aciklayici_Link_Textleri_Kullanin\"><span class=\"toc_number toc_depth_1\">2<\/span> A\u00e7\u0131klay\u0131c\u0131 Link Textleri Kullan\u0131n<\/a><\/li><li><a href=\"#Linkleri_Alti_Cizili_Olarak_Stillendirin\"><span class=\"toc_number toc_depth_1\">3<\/span> Linkleri Alt\u0131 \u00c7izili Olarak Stillendirin<\/a><\/li><li><a href=\"#Linkleri_Farkli_Renkte_Kullanin\"><span class=\"toc_number toc_depth_1\">4<\/span> Linkleri Farkl\u0131 Renkte Kullan\u0131n<\/a><\/li><li><a href=\"#Renk_Kontrasti\"><span class=\"toc_number toc_depth_1\">5<\/span> Renk Kontrast\u0131<\/a><\/li><li><a href=\"#Yeterli_Font_Buyuklugu\"><span class=\"toc_number toc_depth_1\">6<\/span> Yeterli Font B\u00fcy\u00fckl\u00fc\u011f\u00fc<\/a><\/li><li><a href=\"#Input_8211_Label_Iliskisi\"><span class=\"toc_number toc_depth_1\">7<\/span> Input &#8211; Label \u0130li\u015fkisi<\/a><\/li><li><a href=\"#Formlarda_Placeholder_Kullanimi\"><span class=\"toc_number toc_depth_1\">8<\/span> Formlarda Placeholder Kullan\u0131m\u0131<\/a><\/li><li><a href=\"#Aciklayici_Butonlar\"><span class=\"toc_number toc_depth_1\">9<\/span> A\u00e7\u0131klay\u0131c\u0131 Butonlar<\/a><\/li><\/ul><\/div>\n\n<p>Bu yaz\u0131da, teman\u0131z\u0131n \u00f6n y\u00fcz\u00fc ile ilgili olarak ve ba\u015fl\u0131klar halinde, baz\u0131 pratik bilgiler verilecek ve daha profesyonel bir tema yap\u0131m\u0131 i\u00e7in sizlere yard\u0131mc\u0131 olunacakt\u0131r.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"Logo_Resmine_Ana_Sayfa_Linki_Verin\">Logo Resmine Ana Sayfa Linki Verin<\/span><\/h2>\n\n\n\n<p>Site logosunu, ayn\u0131 zamanda ana sayfaya g\u00f6t\u00fcren bir logo olarak kullanmak i\u00e7in \u015fu kodu kullanabilirsiniz:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!-- logo resminizin ad\u0131 logo.png ise -->\n&lt;a href=\"&lt;?php echo home_url(); ?>\">&lt;img src=\"&lt;?php echo get_stylesheet_directory_uri(); ?>\/logo.png\" alt=\"Ana sayfa\" \/>&lt;\/a><\/code><\/pre>\n\n\n\n<p>Siteniz ana sayfada iken logonuzun ana sayfaya g\u00f6t\u00fcren bir link \u015feklinde olmas\u0131na hi\u00e7 de gerek yoktur. Bu y\u00fczden, ekranda ana sayfa a\u00e7\u0131k iken, logonuzu link olmaktan \u00e7\u0131karabilirsiniz. A\u015fa\u011f\u0131da, bunu nas\u0131l yapaca\u011f\u0131n\u0131z g\u00f6sterilmi\u015ftir:<\/p>\n\n\n\n<p><code>functions.php<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?php\n\/\/ logo resminizin ad\u0131 logo.php ise\nif(is_home() || is_front_page()) {\n echo '&lt;img src=\"' . get_stylesheet_directory_uri() . '\/logo.png\" alt=\"Ana sayfa\" \/>';\n}\nelse {\n echo '&lt;a href=\"' .  home_url() . '\">&lt;img src=\"' . get_stylesheet_directory_uri() . '\/logo.png\" alt=\"Ana sayfa\" \/>&lt;\/a>';\n}\n?><\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"Aciklayici_Link_Textleri_Kullanin\">A\u00e7\u0131klay\u0131c\u0131 Link Textleri Kullan\u0131n<\/span><\/h2>\n\n\n\n<p>Text linkinin kendisi de a\u00e7\u0131klay\u0131c\u0131 olmal\u0131 ve kullan\u0131c\u0131ya, linkin adresi ile ilgili bilgi vermelidir. A\u015fa\u011f\u0131da bir k\u00f6t\u00fc \u00f6rnek bir de iyi bir link \u00f6rne\u011fi verilerek bu durumu daha iyi anlaman\u0131z hedeflenmi\u015ftir:<\/p>\n\n\n\n<p><strong>K\u00f6t\u00fc \u00f6rnek<\/strong>:<\/p>\n\n\n\n<p>WordPress&#8217;i \u00f6\u011frenmenin en iyi yolu onu kullanmakt\u0131r. WordPress indirmek i\u00e7in <a href=\"#\">t\u0131klay\u0131n\u0131z<\/a>.<\/p>\n\n\n\n<p><strong>\u0130yi \u00f6rnek<\/strong>:<\/p>\n\n\n\n<p><a href=\"#\">WordPress indirin<\/a> ve \u00f6\u011frenmeye ba\u015flay\u0131n. \u00c7\u00fcnk\u00fc WordPress&#8217;i \u00f6\u011frenmenin en iyi yolu onu kullanmakt\u0131r.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"Linkleri_Alti_Cizili_Olarak_Stillendirin\">Linkleri Alt\u0131 \u00c7izili Olarak Stillendirin<\/span><\/h2>\n\n\n\n<p>Sitenizde kulland\u0131\u011f\u0131n\u0131z linklerin (ba\u011flant\u0131lar\u0131n) normal metinlerden farkl\u0131 ve dikkat \u00e7ekici olmas\u0131 gereklidir. Bunu sa\u011flaman\u0131n bir yolu, linklerin alt\u0131n\u0131 \u00e7izmektir. Taray\u0131c\u0131lar (browsers), varsay\u0131lan olarak linklerin alt\u0131n\u0131 \u00e7izer. Bu \u00f6zelli\u011fi iptal etmek, linklerinizin, \u00e7evresindeki metinlerden ay\u0131rt edilmesini zorla\u015ft\u0131rabilir. Linklerin alt\u0131n\u0131 \u00e7izmek, teman\u0131z\u0131n kullan\u0131\u015fl\u0131l\u0131\u011f\u0131n\u0131 ve <a rel=\"noreferrer noopener\" aria-label=\"Eri\u015filebilirli\u011fini  (yeni sekmede a\u00e7\u0131l\u0131r)\" href=\"https:\/\/sitecenneti.com\/wordpress\/wordpress-tema-yapimi\/4-19-erisilebilirlik-ulasilabilirlik-accessibility\/\" target=\"_blank\">Eri\u015filebilirli\u011fini <\/a>artt\u0131r\u0131r.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"Linkleri_Farkli_Renkte_Kullanin\">Linkleri Farkl\u0131 Renkte Kullan\u0131n<\/span><\/h2>\n\n\n\n<p>Bir textin t\u0131klanabilir oldu\u011funu belli etmenin bir ba\u015fka yolu da o texti renklendirmektir. Bir linki renklendirmek, kolayca fark edilmesini sa\u011flar.<\/p>\n\n\n\n<p>Linkler, durum \u00f6zelli\u011fine sahip olan az say\u0131da HTML elemanlar\u0131ndan biridir. Bir linkin en \u00f6nemli iki durumu, <strong>visited<\/strong> (ziyaret edilmi\u015f) ve <strong>unvisited<\/strong> (ziyaret edilmemi\u015f) durumlar\u0131d\u0131r. <em>Visited <\/em>linklerin rengini genellikle <em>unvisited <\/em>linklerden %10-20 daha koyu yapmak do\u011fru bir al\u0131\u015fkanl\u0131kt\u0131r.<\/p>\n\n\n\n<p>Yukar\u0131da bahsedilen iki durumdan ba\u015fka, linklerin a\u015fa\u011f\u0131daki durumlar\u0131 da vard\u0131r:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Hover<\/strong>: Farenin linkin \u00fczerinde oldu\u011fu durum.<\/li><li><strong>Focus<\/strong>: <em>Hover <\/em>gibidir fakat klavye kullan\u0131c\u0131lar\u0131na hitab eder.<\/li><li><strong>Active<\/strong>: Bir kullan\u0131c\u0131n\u0131n linke t\u0131kl\u0131yor oldu\u011funu ifade eder.<\/li><\/ul>\n\n\n\n<p><em>Hover<\/em> ve <em>focus<\/em> durumlar\u0131 birbirine \u00e7ok yak\u0131n oldu\u011fu i\u00e7in, bu ikisine ayn\u0131 stili vermek kullan\u0131\u015fl\u0131 olur.<\/p>\n\n\n\n\t<br \/>\n\t<div class=\"stcnnt-yazi-ici-reklam\">\n\t<span aria-hidden=\"true\" class=\"sc-reklam-basligi text-muted\" style=\"display:block;text-align:center;\">bu bir reklamd\u0131r:<\/span>\n\t<p aria-hidden=\"true\" class=\"shadow-lg m-0 p-0\">\n\t\t<script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\n\t\t<ins class=\"adsbygoogle\"\n\t\t\t style=\"display:block; text-align:center;\"\n\t\t\t data-ad-layout=\"in-article\"\n\t\t\t data-ad-format=\"fluid\"\n\t\t\t data-ad-client=\"ca-pub-6366953309324763\"\n\t\t\t data-ad-slot=\"2001829037\"><\/ins>\n\t\t<script>\n\t\t\t (adsbygoogle = window.adsbygoogle || []).push({});\n\t\t<\/script>\n\t<\/p>\n\t<\/div>\n\t\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"Renk_Kontrasti\">Renk Kontrast\u0131<\/span><\/h2>\n\n\n\n<p>Renk kontrast\u0131, renkler aras\u0131ndaki benzerlik ve farkl\u0131l\u0131k ile ilgilidir. Birbirine yak\u0131n renkler aras\u0131ndaki kontrast az olup, birbirinden uzak renkler aras\u0131ndaki kontrast \u00e7oktur. \u00d6rnek olarak, lacivert bir zemine siyah bir yaz\u0131 yazarsan\u0131z, bu yaz\u0131n\u0131n okunmas\u0131 her durumda m\u00fcmk\u00fcn olmayacakt\u0131r. \u00c7\u00fcnk\u00fc lacivert ile siyah aras\u0131ndaki kontrast azd\u0131r. Bunun gibi, siyah ile beyaz aras\u0131ndaki kontrast da y\u00fcksektir.<\/p>\n\n\n\n<p>WebAIM (Web sitelerinin <a rel=\"noreferrer noopener\" aria-label=\"eri\u015filebilirli\u011fini (yeni sekmede a\u00e7\u0131l\u0131r)\" href=\"https:\/\/sitecenneti.com\/wordpress\/wordpress-tema-yapimi\/4-19-erisilebilirlik-ulasilabilirlik-accessibility\/\" target=\"_blank\">eri\u015filebilirli\u011fini<\/a> artt\u0131rma ile ilgili bir topluluk) toplulu\u011funun sitesinde, kulland\u0131\u011f\u0131n\u0131z renkler aras\u0131ndaki kontrast de\u011ferini hesaplayabilirsiniz.  WCAG 2.0 standartlar\u0131na g\u00f6re, kulland\u0131\u011f\u0131n\u0131z renkler aras\u0131ndaki kontrast <strong>4.5:1<\/strong> oran\u0131n\u0131n alt\u0131na inmemelidir. Bu oran ve yukar\u0131s\u0131 <a rel=\"noreferrer noopener\" aria-label=\"Uyumluluk AA (yeni sekmede a\u00e7\u0131l\u0131r)\" href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/quickref\/?versions=2.0#qr-visual-audio-contrast-contrast\" target=\"_blank\">Uyumluluk AA<\/a> olarak adland\u0131r\u0131l\u0131r. (Siyah ile beyaz aras\u0131ndaki kontrast oran\u0131n 21:1 dir.)<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"Yeterli_Font_Buyuklugu\">Yeterli Font B\u00fcy\u00fckl\u00fc\u011f\u00fc<\/span><\/h2>\n\n\n\n<p>Text b\u00fcy\u00fckl\u00fc\u011f\u00fcn\u00fcz\u00fc, yeterli bir seviyede tutman\u0131z, sitenizin kullan\u0131lma oran\u0131n y\u00fckseltecektir. Sitenizdeki en k\u00fc\u00e7\u00fck yaz\u0131n\u0131n <strong>14px<\/strong> olmas\u0131 tavsiye edilir.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"Input_8211_Label_Iliskisi\">Input &#8211; Label \u0130li\u015fkisi<\/span><\/h2>\n\n\n\n<p><em>Label<\/em>, etiket anlam\u0131na gelir. Formlar\u0131m\u0131z\u0131da kulland\u0131\u011f\u0131n\u0131z <em>input <\/em>elemanlar\u0131n\u0131 a\u00e7\u0131klamak i\u00e7in, o <em>input <\/em>elman\u0131 ile birlikte bir label elman\u0131 da kullan\u0131r\u0131z. <em>Label <\/em>ile <em>input <\/em>birbirine ba\u011flamak i\u00e7in <em>label <\/em>eleman\u0131na <code>for<\/code> \u00f6zelli\u011fi eklemeli ve bu \u00f6zelli\u011fin de\u011ferini de <em>input <\/em>eleman\u0131n\u0131n <code>id<\/code> de\u011ferine ile ayn\u0131 yapmal\u0131y\u0131z. A\u015fa\u011f\u0131da bunun bir \u00f6rne\u011fi verilmi\u015ftir:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;label for=\"kullanici_adi\">Username&lt;\/label>\n&lt;input type=\"text\" id=\"kullanici_adi\" name=\"login\" \/><\/code><\/pre>\n\n\n\n<p>A\u015fa\u011f\u0131daki \u00f6rnekler de radio butonlar\u0131 ve label kullan\u0131m\u0131 ile ilgilidir:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;input type=\"radio\" id=\"user_group_blogger\" name=\"user_group\" value=\"blogger\" \/>\n&lt;label for=\"user_group_blogger\">Blogger&lt;\/label>\n \n&lt;input type=\"radio\"  id=\"user_group_designer\" name=\"user_group\" value=\"designer\" \/>\n&lt;label for=\"user_group_designer\">Designer&lt;\/label>\n \n&lt;input type=\"radio\"  id=\"user_group_developer\" name=\"user_group\" value=\"developer\" \/>\n&lt;label for=\"user_group_developer\">Developer&lt;\/label><\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"Formlarda_Placeholder_Kullanimi\">Formlarda Placeholder Kullan\u0131m\u0131<\/span><\/h2>\n\n\n\n<p><em>Placeholder<\/em>, yer tutucu demektir. Bir text alan\u0131 olu\u015fturdu\u011fumuzda, bu text alan\u0131n\u0131n ne ile ilgili oldu\u011funu ifade etmek i\u00e7in kullan\u0131l\u0131r, yani kullan\u0131c\u0131ya ipucu vererek, girmesi gereken bilgi hakk\u0131nda fikir sahibi olmas\u0131 sa\u011flan\u0131r.<\/p>\n\n\n\n<p>A\u015fa\u011f\u0131da <em>label <\/em>ile birlikte \u00f6rnek bir <em>placeholder <\/em>kullan\u0131m\u0131 verilmi\u015ftir:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;label for=\"isim\">Ad\u0131n\u0131z:&lt;\/label>\n&lt;input type=\"text\" id=\"isim\" name=\"isim\" placeholder=\"Ad\u0131m SOYADIM\" \/><\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"Aciklayici_Butonlar\">A\u00e7\u0131klay\u0131c\u0131 Butonlar<\/span><\/h2>\n\n\n\n<p>Temam\u0131zda kulland\u0131\u011f\u0131m\u0131z butonlar\u0131n \u00fczerine yazd\u0131\u011f\u0131m\u0131z textler, butonun yapaca\u011f\u0131 g\u00f6revi m\u00fcmk\u00fcn oldu\u011funca a\u00e7\u0131klamal\u0131d\u0131r. Tabi ki botunlar \u00fczerine, uzun uzun metinler yazamay\u0131z. Fakat, &#8220;T\u0131kla&#8221; ve &#8220;Ok&#8221; yerine, &#8220;\u00dcye yap&#8221;, &#8220;Dosyay\u0131 sil&#8221;, &#8220;\u015eifreyi g\u00fcncelle&#8221; gibi ifadeler, kullan\u0131c\u0131lar\u0131m\u0131z\u0131n sitemizi daha kolay kullanmas\u0131n\u0131 sa\u011flayacakt\u0131r.<\/p>\n\n\n\n\t<br \/>\n\t<div class=\"stcnnt-yazi-ici-reklam\">\n\t<span aria-hidden=\"true\" class=\"sc-reklam-basligi text-muted\" style=\"display:block;text-align:center;\">bu bir reklamd\u0131r:<\/span>\n\t<p aria-hidden=\"true\" class=\"shadow-lg m-0 p-0\">\n\t\t<script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\n\t\t<ins class=\"adsbygoogle\"\n\t\t\t style=\"display:block; text-align:center;\"\n\t\t\t data-ad-layout=\"in-article\"\n\t\t\t data-ad-format=\"fluid\"\n\t\t\t data-ad-client=\"ca-pub-6366953309324763\"\n\t\t\t data-ad-slot=\"2001829037\"><\/ins>\n\t\t<script>\n\t\t\t (adsbygoogle = window.adsbygoogle || []).push({});\n\t\t<\/script>\n\t<\/p>\n\t<\/div>\n\t\n","protected":false},"excerpt":{"rendered":"<p>WordPress temas\u0131 yaparken, dikkat etmemiz gereken baz\u0131 ayr\u0131nt\u0131lar\u0131 a\u00e7\u0131klanm\u0131\u015ft\u0131r.<\/p>\n","protected":false},"author":1,"featured_media":25,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[213],"class_list":["post-5068","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress-tema-yapimi","tag-erisilebilirlik"],"_links":{"self":[{"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/posts\/5068","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/comments?post=5068"}],"version-history":[{"count":0,"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/posts\/5068\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/media\/25"}],"wp:attachment":[{"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/media?parent=5068"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/categories?post=5068"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/tags?post=5068"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}