{"id":33858,"date":"2025-11-08T03:00:57","date_gmt":"2025-11-08T00:00:57","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/dijital-dunya-nasil-isliyor-noktalar-ve-cizgilerle-ilk-tanisma\/"},"modified":"2025-11-08T03:00:57","modified_gmt":"2025-11-08T00:00:57","slug":"dijital-dunya-nasil-isliyor-noktalar-ve-cizgilerle-ilk-tanisma","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/dijital-dunya-nasil-isliyor-noktalar-ve-cizgilerle-ilk-tanisma\/","title":{"rendered":"Dijital D\u00fcnya Nas\u0131l \u0130\u015fliyor: Noktalar ve \u00c7izgilerle \u0130lk Tan\u0131\u015fma"},"content":{"rendered":"<p><span>Dijitalin Noktalar\u0131 ve \u00c7izgilerine D\u00fc\u015f\u00fc\u015f\u00fcm: Web Geli\u015ftirmede Temel Yap\u0131 Ta\u015flar\u0131<\/span><\/p>\n<p>Hi\u00e7 d\u00fc\u015f\u00fcnd\u00fcn\u00fcz m\u00fc, web sayfalar\u0131, uygulamalar ve dijital deneyimler o karma\u015f\u0131k hallerine nas\u0131l b\u00fcr\u00fcn\u00fcyor? \u0130\u015fin \u00f6z\u00fcnde, her \u015fey basit &#8220;noktalar ve \u00e7izgiler&#8221;den ibaret. Gelin, dijital d\u00fcnyan\u0131n bu g\u00f6r\u00fcnmez altyap\u0131s\u0131n\u0131, yani temel yap\u0131 ta\u015flar\u0131n\u0131 ve bunlar\u0131n web geli\u015ftirmedeki kritik rol\u00fcn\u00fc derinlemesine ke\u015ffedelim. Bu makale, sizi bu b\u00fcy\u00fcleyici tav\u015fan deli\u011fine, yani her \u015feyin ard\u0131ndaki temel mant\u0131\u011f\u0131 anlamaya davet ediyor.<\/p>\n<p>Her \u015fey, s\u0131f\u0131rlar ve birlerden ibaret olan o ikili sistemle ba\u015flar. Bir nevi &#8220;a\u00e7\u0131k&#8221; ve &#8220;kapal\u0131&#8221;, &#8220;var&#8221; ve &#8220;yok&#8221; \u015feklinde ifade edebilece\u011fimiz bu durumlar, dijital d\u00fcnyadaki her bilginin en temel yap\u0131 ta\u015f\u0131d\u0131r. \u0130\u015fte bu temel birimlere bit diyoruz ve bu bitler, bizim metaforik &#8220;noktalar ve \u00e7izgilerimiz&#8221; oluyor. Bir nokta (0) ya da bir \u00e7izgi (1) olarak d\u00fc\u015f\u00fcnebilece\u011finiz bu basit farklar, karma\u015f\u0131k g\u00f6rsellerden interaktif uygulamalara kadar her \u015feyin temelini olu\u015fturur.<\/p>\n<p>Web geli\u015ftirme s\u00f6z konusu oldu\u011funda, bu &#8220;noktalar ve \u00e7izgiler&#8221; kavram\u0131 farkl\u0131 katmanlarda kar\u015f\u0131m\u0131za \u00e7\u0131kar. En somut haliyle, CSS&#8217;teki nokta nokta (<code>dotted<\/code>) veya \u00e7izgi \u00e7izgi (<code>dashed<\/code>) kenarl\u0131klar, g\u00f6rsel bir ifade bi\u00e7imi olarak bu kavram\u0131 yans\u0131t\u0131r. Ancak daha derinlemesine bakt\u0131\u011f\u0131m\u0131zda, web sayfalar\u0131n\u0131n d\u00fczeni, taray\u0131c\u0131lar\u0131n sayfalar\u0131 i\u015fleme \u015fekli ve hatta a\u011f \u00fczerinden veri iletimi bile bu temel ikili mant\u0131\u011fa dayan\u0131r. Taray\u0131c\u0131n\u0131z bir web sayfas\u0131n\u0131 a\u00e7t\u0131\u011f\u0131nda, asl\u0131nda sunucudan gelen binlerce, milyonlarca &#8220;nokta ve \u00e7izgi&#8221; kombinasyonunu yorumlayarak sizin g\u00f6rd\u00fc\u011f\u00fcn\u00fcz o rengarenk, interaktif deneyimi yarat\u0131r. Bu s\u00fcre\u00e7, a\u011f protokollerinden HTML ayr\u0131\u015ft\u0131rmaya, CSS stillerini uygulamaktan JavaScript kodunu \u00e7al\u0131\u015ft\u0131rmaya kadar uzan\u0131r. Her bir ad\u0131mda, dijital veri ak\u0131\u015f\u0131, basit evet\/hay\u0131r kararlar\u0131yla \u015fekillenir. Bu temel anlay\u0131\u015f, bir geli\u015ftirici olarak sorunlar\u0131 tespit etme, performans\u0131 optimize etme ve daha etkili kod yazma yetene\u011finizin anahtar\u0131d\u0131r. Yani, temelde yatan bu ikili mant\u0131\u011f\u0131 kavramak, dijitalin dilini konu\u015fman\u0131n ilk ad\u0131m\u0131d\u0131r.<\/p>\n<p>Ayr\u0131ca, bu temel yap\u0131 ta\u015flar\u0131 sadece soyut kavramlar de\u011fildir; g\u00fcnl\u00fck kodlama pratiklerimize de yans\u0131r. \u00d6rne\u011fin, bir web sitesindeki her pikselin rengi, her karakterin kodlan\u0131\u015f\u0131 ve her t\u0131klaman\u0131n i\u015fleni\u015fi, bu basit bitlerin karma\u015f\u0131k kombinasyonlar\u0131yla ger\u00e7ekle\u015fir. Bu y\u00fczden, bir butona t\u0131kland\u0131\u011f\u0131nda ne oldu\u011funu anlamak i\u00e7in sadece JavaScript&#8217;in syntax&#8217;\u0131na bakmak yetmez; ayn\u0131 zamanda t\u0131klaman\u0131n nas\u0131l bir sinyal olarak alg\u0131land\u0131\u011f\u0131n\u0131 ve bu sinyalin taray\u0131c\u0131 taraf\u0131ndan nas\u0131l yorumland\u0131\u011f\u0131n\u0131 da bilmek gerekir. Bu, dijital d\u00fcnyan\u0131n derinliklerine do\u011fru at\u0131lan ilk ad\u0131md\u0131r ve bu tav\u015fan deli\u011fine d\u00fc\u015ft\u00fc\u011f\u00fcn\u00fczde, g\u00f6rd\u00fc\u011f\u00fcn\u00fcz her \u015fey size daha mant\u0131kl\u0131 gelmeye ba\u015flar. Bir ba\u015fka deyi\u015fle, dijital d\u00fcnyadaki her &#8220;\u015fey&#8221;, bu iki temel durumun sonsuz varyasyonlar\u0131ndan olu\u015fur. Bu, web geli\u015ftiricileri i\u00e7in sadece teknik bir bilgi olman\u0131n \u00f6tesinde, ayn\u0131 zamanda d\u00fc\u015f\u00fcnme bi\u00e7imlerini \u015fekillendiren bir felsefedir. Performans iyile\u015ftirmelerinden, karma\u015f\u0131k algoritmalar\u0131n tasar\u0131m\u0131na kadar her alanda, bu ikili mant\u0131\u011f\u0131n izlerini g\u00f6rmek m\u00fcmk\u00fcnd\u00fcr. Dolay\u0131s\u0131yla, web geli\u015ftirme yolculu\u011funuzda, bu temel &#8220;nokta ve \u00e7izgi&#8221; kavram\u0131n\u0131 asla g\u00f6z ard\u0131 etmemelisiniz; \u00e7\u00fcnk\u00fc her \u015fey buradan ba\u015flar ve her \u015fey buraya d\u00f6ner.<\/p>\n<h2>Web Tasar\u0131m\u0131nda Noktalar ve \u00c7izgilerin Esteti\u011fi: CSS ve G\u00f6rsel \u0130fade<\/h2>\n<p>Web tasar\u0131m\u0131nda estetik, \u00e7o\u011funlukla renkler, yaz\u0131 tipleri ve g\u00f6rsellerle ili\u015fkilendirilse de, bazen en basit g\u00f6rsel elemanlar, yani &#8220;noktalar ve \u00e7izgiler&#8221;, bir aray\u00fcze karakter katmakta kilit rol oynar. CSS, bu noktalar\u0131 ve \u00e7izgileri kullanarak sayfan\u0131za doku, ayr\u0131m ve y\u00f6n hissi kazand\u0131rman\u0131n g\u00fc\u00e7l\u00fc bir yolunu sunar. Kenarl\u0131klardan (<code>border<\/code>) arka planlara (<code>background-image<\/code>), hatta SVG ile \u00e7izilen karma\u015f\u0131k grafiklere kadar, bu temel g\u00f6rsel elemanlar dijital esteti\u011fin vazge\u00e7ilmez bir par\u00e7as\u0131d\u0131r. Gelin, CSS&#8217;in sundu\u011fu bu olanaklar\u0131 ke\u015ffederek, basit noktalar ve \u00e7izgilerle nas\u0131l \u00e7arp\u0131c\u0131 g\u00f6rsel ifadeler olu\u015fturabilece\u011fimizi ad\u0131m ad\u0131m inceleyelim.<\/p>\n<p>\u00d6ncelikle, CSS&#8217;in <code>border-style<\/code> \u00f6zelli\u011fi, elementlere nokta nokta, \u00e7izgi \u00e7izgi veya di\u011fer temel stilize edilmi\u015f kenarl\u0131klar eklememizi sa\u011flar. Bu basit gibi g\u00f6r\u00fcnen \u00f6zellik, bir butonu vurgulamak, bir i\u00e7eri\u011fi di\u011ferinden ay\u0131rmak veya bir form eleman\u0131na modern bir dokunu\u015f katmak i\u00e7in kullan\u0131labilir. \u00d6rne\u011fin, bir kullan\u0131c\u0131n\u0131n dikkatini \u00e7ekmek istedi\u011finiz bir giri\u015f alan\u0131 i\u00e7in kal\u0131n, nokta nokta bir kenarl\u0131k, standart d\u00fcz \u00e7izgiye g\u00f6re \u00e7ok daha fazla fark\u0131ndal\u0131k yaratabilir. Ayn\u0131 \u015fekilde, bir men\u00fcdeki her \u00f6\u011fenin alt\u0131na ince bir \u00e7izgi eklemek, hem estetik bir dokunu\u015f sa\u011flar hem de kullan\u0131c\u0131ya g\u00f6rsel bir hiyerar\u015fi sunar. Ayr\u0131ca, bu kenarl\u0131klar sadece statik birer s\u00fcs de\u011fil, ayn\u0131 zamanda interaktif elementlerde (\u00f6rne\u011fin <code>:hover<\/code> durumu) dinamik bir \u015fekilde de\u011fi\u015ftirilerek kullan\u0131c\u0131ya geri bildirim sa\u011flama potansiyeline de sahiptir. Bu y\u00fczden, basit bir kenarl\u0131k stili bile, do\u011fru kullan\u0131ld\u0131\u011f\u0131nda kullan\u0131c\u0131 deneyimini \u00f6nemli \u00f6l\u00e7\u00fcde geli\u015ftirebilir. Basit\u00e7e, sadece <code>border: 2px dotted #ff0000;<\/code> yazarak bir elementin etraf\u0131na k\u0131rm\u0131z\u0131, nokta nokta bir \u00e7er\u00e7eve \u00e7izebilirsiniz. Bu, bir uyar\u0131 mesaj\u0131 veya \u00f6zel bir teklif kutusu i\u00e7in harika bir vurgu arac\u0131 olabilir.<\/p>\n<pre><code class=\"language-css\">\n  .uyari-kutusu {\n    border: 3px dotted #e74c3c; \/* K\u0131rm\u0131z\u0131 nokta nokta kenarl\u0131k *\/\n    padding: 15px;\n    margin-bottom: 20px;\n    background-color: #fcecec;\n    color: #c0392b;\n    border-radius: 5px;\n  }\n\n  .ozel-bolum {\n    border-left: 5px dashed #3498db; \/* Sol tarafta mavi \u00e7izgi \u00e7izgi kenarl\u0131k *\/\n    padding-left: 20px;\n    margin-top: 30px;\n  }\n<\/pre>\n<p><\/code><\/p>\n<p>Dahas\u0131, CSS'in <code>background-image<\/code> \u00f6zelli\u011fi ve \u00f6zellikle lineer gradyanlar (<code>linear-gradient<\/code>), noktalar ve \u00e7izgilerle daha karma\u015f\u0131k desenler olu\u015fturman\u0131za olanak tan\u0131r. Sadece iki renk kullanarak bile, belirli aral\u0131klarla tekrarlanan \u00e7izgili desenler veya dokulu arka planlar yaratabilirsiniz. Bu teknik, bir sayfan\u0131n arka plan\u0131na ince bir doku eklemek veya belirli bir b\u00f6l\u00fcm\u00fc vurgulamak i\u00e7in kullan\u0131labilir. \u00d6rne\u011fin, pastel tonlarda ince, dikey \u00e7izgili bir arka plan, bir blo\u011fun daha s\u0131cak ve davetkar g\u00f6r\u00fcnmesini sa\u011flayabilir. Ayr\u0131ca, bu gradyanlar, g\u00f6rsel karma\u015fay\u0131 \u00f6nlerken elementlere derinlik katman\u0131n da harika bir yoludur. Bu sayede, daha sofistike ve \u00f6zg\u00fcn tasar\u0131mlara imza atabilirsiniz. Bir ba\u015fka deyi\u015fle, sadece d\u00fcz renkler yerine, gradyanlar arac\u0131l\u0131\u011f\u0131yla g\u00f6rsel hiyerar\u015fi ve ilgi \u00e7ekici noktalar olu\u015fturmak m\u00fcmk\u00fcnd\u00fcr. \u00d6zellikle, d\u00fc\u015f\u00fck bant geni\u015fli\u011fine sahip kullan\u0131c\u0131lar i\u00e7in resim tabanl\u0131 arka planlar yerine CSS tabanl\u0131 desenler kullanmak, sayfa y\u00fckleme h\u0131z\u0131n\u0131 olumlu y\u00f6nde etkiler ve bu da performans\u0131 art\u0131ran \u00f6nemli bir fakt\u00f6rd\u00fcr.<\/p>\n<h3>G\u00f6rsel Desenler Yaratmak \u0130\u00e7in CSS Nas\u0131l Kullan\u0131l\u0131r?<\/h3>\n<p>G\u00f6rsel desenler, bir web sitesine benzersiz bir kimlik ve profesyonel bir g\u00f6r\u00fcn\u00fcm katabilir. CSS ile karma\u015f\u0131k g\u00f6rseller kullanmadan hafif ve \u00f6l\u00e7eklenebilir desenler olu\u015fturmak olduk\u00e7a m\u00fcmk\u00fcnd\u00fcr. \u0130\u015fte size iki farkl\u0131 yakla\u015f\u0131m:<\/p>\n<ol>\n<li><strong>Tekrarlayan \u00c7izgili Desenler (Stripes):<\/strong> <code>linear-gradient<\/code> kullanarak dikey veya yatay \u00e7izgili desenler olu\u015fturabilirsiniz. Bu y\u00f6ntem, \u00f6zellikle belirli bir b\u00f6l\u00fcm\u00fc ay\u0131rmak veya modern bir estetik sunmak i\u00e7in idealdir.<\/li>\n<li><strong>Noktal\u0131 veya Damal\u0131 Desenler (Dots\/Checkerboards):<\/strong> Biraz daha karma\u015f\u0131k gradyan kombinasyonlar\u0131 ile noktal\u0131 veya damal\u0131 desenler de yaratmak m\u00fcmk\u00fcnd\u00fcr. Bu desenler, genellikle arka planlarda kullan\u0131larak sayfaya hafif bir doku kazand\u0131r\u0131r.<\/li>\n<\/ol>\n<pre><code class=\"language-css\">\n  \/* \u00d6rnek 1: Dikey \u00c7izgili Arka Plan *\/\n  .cizgili-arka-plan {\n    background: repeating-linear-gradient(\n      45deg, \/* \u00c7izgilerin a\u00e7\u0131s\u0131 *\/\n      #f0f0f0, \/* A\u00e7\u0131k gri *\/\n      #f0f0f0 10px, \/* A\u00e7\u0131k gri 10px geni\u015fli\u011finde *\/\n      #e0e0e0 10px, \/* Koyu gri ba\u015flang\u0131c\u0131 *\/\n      #e0e0e0 20px \/* Koyu gri 10px geni\u015fli\u011finde *\/\n    );\n    height: 200px;\n    width: 100%;\n  }\n\n  \/* \u00d6rnek 2: Noktal\u0131 Arka Plan (biraz daha karma\u015f\u0131k) *\/\n  .noktali-arka-plan {\n    background-color: #f9f9f9; \/* Ana arka plan rengi *\/\n    background-image: radial-gradient(#ccc 1px, transparent 1px),\n                      radial-gradient(#ccc 1px, transparent 1px);\n    background-size: 20px 20px; \/* Noktalar aras\u0131 mesafe *\/\n    background-position: 0 0, 10px 10px; \/* \u0130ki gradyan\u0131 kayd\u0131rma *\/\n    height: 200px;\n    width: 100%;\n  }\n<\/pre>\n<p><\/code><\/p>\n<p>Yukar\u0131daki \u00f6rnekler, sadece CSS kullanarak karma\u015f\u0131k g\u00f6rsellerin gerektirdi\u011fi ekstra HTTP isteklerini ve dosya boyutlar\u0131n\u0131 ortadan kald\u0131rarak performans\u0131 art\u0131rman\u0131n ne kadar kolay oldu\u011funu g\u00f6steriyor. SVG (Scalable Vector Graphics) kullan\u0131m\u0131 ise, keskin ve her boyutta pikselsiz kalabilen \"\u00e7izgiler\" \u00e7izmek i\u00e7in ba\u015fka bir g\u00fc\u00e7l\u00fc ara\u00e7t\u0131r. SVG, logolar, ikonlar veya hatta karma\u015f\u0131k \u00e7izimler i\u00e7in idealdir ve dosya boyutlar\u0131 genellikle \u00e7ok k\u00fc\u00e7\u00fckt\u00fcr. Dolay\u0131s\u0131yla, web tasar\u0131m\u0131nda \"noktalar ve \u00e7izgiler\" sadece estetik bir detay de\u011fil, ayn\u0131 zamanda performans ve \u00f6l\u00e7eklenebilirlik a\u00e7\u0131s\u0131ndan da \u00f6nemli bir stratejidir.<\/p>\n<h2>Duyarl\u0131 Tasar\u0131m\u0131n Omurgas\u0131: Ekran Boyutlar\u0131n\u0131 Anlamak ve Noktalarla \u00c7izgilerle Uyum Sa\u011flamak<\/h2>\n<p>G\u00fcn\u00fcm\u00fcz dijital d\u00fcnyas\u0131nda, bir web sitesinin veya uygulaman\u0131n sadece tek bir ekran boyutunda iyi g\u00f6r\u00fcnmesi yeterli de\u011fildir. Kullan\u0131c\u0131lar masa\u00fcst\u00fc bilgisayarlardan tabletlere, ak\u0131ll\u0131 telefonlardan ak\u0131ll\u0131 televizyonlara kadar onlarca farkl\u0131 cihazdan web'e eri\u015fiyor. \u0130\u015fte tam da bu noktada duyarl\u0131 tasar\u0131m (responsive design) devreye giriyor. Duyarl\u0131 tasar\u0131m, i\u00e7eri\u011fin ve d\u00fczenin, kullan\u0131c\u0131n\u0131n cihaz\u0131n\u0131n ekran boyutuna, \u00e7\u00f6z\u00fcn\u00fcrl\u00fc\u011f\u00fcne ve y\u00f6n\u00fcne otomatik olarak adapte olmas\u0131n\u0131 sa\u011flayan bir yakla\u015f\u0131md\u0131r. Bu s\u00fcre\u00e7, temelde farkl\u0131 ekran boyutlar\u0131n\u0131 birer \"nokta\" veya \"\u00e7izgi\" olarak alg\u0131lay\u0131p, her birine \u00f6zel stiller uygulayarak web deneyimini optimize etmekten ibarettir.<\/p>\n<p>Duyarl\u0131 tasar\u0131m\u0131n temelini, \"ak\u0131\u015fkan \u0131zgaralar\" (fluid grids), esnek g\u00f6rseller ve en \u00f6nemlisi medya sorgular\u0131 (media queries) olu\u015fturur. Ak\u0131\u015fkan \u0131zgaralar, piksel tabanl\u0131 sabit geni\u015flikler yerine y\u00fczdesel geni\u015flikler kullanarak, i\u00e7eri\u011fin ekran boyutuna g\u00f6re esnemesini sa\u011flar. Esnek g\u00f6rseller ise, <code>max-width: 100%;<\/code> gibi basit bir CSS kural\u0131yla, g\u00f6rsellerin kendi konteynerlerinin d\u0131\u015f\u0131na ta\u015fmas\u0131n\u0131 engeller. Ancak bu \"noktalar ve \u00e7izgiler\" dans\u0131n\u0131n orkestra \u015fefi kesinlikle medya sorgular\u0131d\u0131r. Medya sorgular\u0131, belirli ko\u015fullar (\u00f6rne\u011fin, ekran geni\u015fli\u011fi 600 pikselden azsa) kar\u015f\u0131land\u0131\u011f\u0131nda farkl\u0131 CSS kurallar\u0131n\u0131n uygulanmas\u0131n\u0131 sa\u011flar. Bu sayede, k\u00fc\u00e7\u00fck ekranlar i\u00e7in men\u00fcn\u00fcn farkl\u0131 g\u00f6r\u00fcnmesini, b\u00fcy\u00fck ekranlar i\u00e7in ise iki veya \u00fc\u00e7 s\u00fctunlu bir d\u00fczenin kullan\u0131lmas\u0131n\u0131 kolayca sa\u011flayabiliriz. Medya sorgular\u0131, web geli\u015ftiricilerine farkl\u0131 ekran boyutlar\u0131 aras\u0131nda ge\u00e7i\u015f yaparken \"k\u0131r\u0131lma noktalar\u0131\" (breakpoints) belirleme g\u00fcc\u00fc verir. Bu k\u0131r\u0131lma noktalar\u0131, i\u00e7eri\u011fin d\u00fczeninin veya stilinin \u00f6nemli \u00f6l\u00e7\u00fcde de\u011fi\u015fmesi gereken \"\u00e7izgiler\" olarak d\u00fc\u015f\u00fcn\u00fclebilir. Bu yakla\u015f\u0131mla, her kullan\u0131c\u0131, kulland\u0131\u011f\u0131 cihazdan ba\u011f\u0131ms\u0131z olarak tutarl\u0131, eri\u015filebilir ve estetik bir deneyim ya\u015far.<\/p>\n<div class=\"uzman-ipucu\">\n  Uzman \u0130pucu: Duyarl\u0131 tasar\u0131mda \"mobil \u00f6ncelikli\" (mobile-first) yakla\u015f\u0131m benimsemek, geli\u015ftirme s\u00fcrecini basitle\u015ftirir ve daha iyi performans sa\u011flar. \u00d6nce en k\u00fc\u00e7\u00fck ekranlar i\u00e7in stil yaz\u0131n, ard\u0131ndan medya sorgular\u0131 ile daha b\u00fcy\u00fck ekranlar i\u00e7in \u00f6zelle\u015ftirmeler ekleyin. Bu teknikle, genellikle %20-30 oran\u0131nda daha temiz ve verimli CSS kodlar\u0131 elde edebilirsiniz.\n<\/div>\n<p>Ayr\u0131ca, CSS birimleri de bu duyarl\u0131 yap\u0131 i\u00e7erisinde hayati bir rol oynar. <code>px<\/code> (piksel) gibi mutlak birimler yerine, <code>em<\/code>, <code>rem<\/code>, <code>vw<\/code> (viewport width) ve <code>vh<\/code> (viewport height) gibi g\u00f6receli birimler kullanmak, i\u00e7eri\u011fin ekran boyutlar\u0131na g\u00f6re daha dinamik bir \u015fekilde \u00f6l\u00e7eklenmesini sa\u011flar. \u00d6rne\u011fin, <code>rem<\/code> birimi, HTML belgesinin k\u00f6k \u00f6\u011fesindeki yaz\u0131 tipi boyutuna g\u00f6re \u00f6l\u00e7eklenirken, <code>vw<\/code> ve <code>vh<\/code> do\u011frudan g\u00f6r\u00fcnt\u00fc alan\u0131n\u0131n geni\u015fli\u011fi veya y\u00fcksekli\u011fine ba\u011fl\u0131d\u0131r. Bu g\u00f6receli birimler, metin boyutlar\u0131ndan dolgu (padding) ve kenar bo\u015fluklar\u0131na (margin) kadar her \u015feyin, farkl\u0131 cihazlarda orant\u0131l\u0131 kalmas\u0131na yard\u0131mc\u0131 olur. Bu sayede, \"noktalar ve \u00e7izgiler\" (yani farkl\u0131 ekran \u00f6l\u00e7\u00fcmleri) aras\u0131nda kusursuz bir uyum yakalan\u0131r. Bu teknikleri ustaca birle\u015ftirmek, sadece estetik olarak ho\u015f g\u00f6r\u00fcnen de\u011fil, ayn\u0131 zamanda i\u015flevsel ve kullan\u0131c\u0131 dostu bir web sitesi olu\u015fturman\u0131n anahtar\u0131d\u0131r.<\/p>\n<h3>Medya Sorgular\u0131 (Media Queries) ile Mobil Uyumlu HTML Nas\u0131l Yaz\u0131l\u0131r?<\/h3>\n<p>Mobil uyumlu bir web sitesi olu\u015fturmak i\u00e7in medya sorgular\u0131 vazge\u00e7ilmezdir. \u0130\u015fte temel bir medya sorgusu yap\u0131s\u0131 ve kullan\u0131m \u00f6rnekleri:<\/p>\n<pre><code class=\"language-html\">\n<!DOCTYPE html>\n<html lang=\"tr\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Duyarl\u0131 Tasar\u0131m \u00d6rne\u011fi<\/title>\n    <style>\n        \/* Genel Stiller (Mobil \u00d6ncelikli) *\/\n        body {\n            font-family: Arial, sans-serif;\n            margin: 0;\n            padding: 10px;\n            background-color: #f4f4f4;\n        }\n        .container {\n            width: 100%;\n            padding: 10px;\n            box-sizing: border-box;\n        }\n        .header {\n            background-color: #333;\n            color: white;\n            padding: 15px;\n            text-align: center;\n        }\n        .content {\n            background-color: #fff;\n            padding: 20px;\n            margin-top: 10px;\n            border-radius: 5px;\n        }\n        .sidebar {\n            background-color: #eee;\n            padding: 15px;\n            margin-top: 10px;\n            border-radius: 5px;\n        }\n        \n        \/* B\u00fcy\u00fck Ekranlar \u0130\u00e7in Medya Sorgusu *\/\n        @media (min-width: 768px) {\n            .container {\n                display: flex; \/* Flexbox kullanarak yan yana d\u00fczen *\/\n                max-width: 1200px;\n                margin: 20px auto;\n            }\n            .content {\n                flex: 3; \/* \u0130\u00e7erik alan\u0131 daha geni\u015f *\/\n                margin-right: 10px;\n            }\n            .sidebar {\n                flex: 1; \/* Kenar \u00e7ubu\u011fu daha dar *\/\n                margin-top: 0; \/* Masa\u00fcst\u00fcnde kenar \u00e7ubu\u011fu yukar\u0131da *\/\n            }\n        }\n\n        \/* Daha B\u00fcy\u00fck Ekranlar \u0130\u00e7in \u00d6zel Stil *\/\n        @media (min-width: 1024px) {\n            .header {\n                font-size: 2em;\n            }\n        }\n    <\/style>\n<\/head>\n<body>\n    <div class=\"header\">\n        <h1>Sitemizin Ba\u015fl\u0131\u011f\u0131<\/h1>\n    <\/div>\n    <div class=\"container\">\n        <div class=\"content\">\n            <h2>Ana \u0130\u00e7erik Ba\u015fl\u0131\u011f\u0131<\/h2>\n            <p>Bu alan, web sayfan\u0131z\u0131n ana i\u00e7eri\u011fini bar\u0131nd\u0131r\u0131r. Mobil cihazlarda tek s\u00fctun halinde g\u00f6r\u00fcn\u00fcrken, tablet ve masa\u00fcst\u00fc gibi daha geni\u015f ekranlarda kenar \u00e7ubu\u011fuyla birlikte esnek bir d\u00fczene ge\u00e7er.<\/p>\n            <p>Duyarl\u0131 tasar\u0131m, kullan\u0131c\u0131 deneyimini iyile\u015ftirmek i\u00e7in kritik \u00f6neme sahiptir. \u0130\u00e7eri\u011fin farkl\u0131 cihazlarda okunabilir ve kullan\u0131labilir olmas\u0131n\u0131 sa\u011flar.<\/p>\n        <\/div>\n        <div class=\"sidebar\">\n            <h3>Kenar \u00c7ubu\u011fu<\/h3>\n            <ul>\n                <li>Men\u00fc \u00d6\u011fesi 1<\/li>\n                <li>Men\u00fc \u00d6\u011fesi 2<\/li>\n                <li>Men\u00fc \u00d6\u011fesi 3<\/li>\n            <\/ul>\n        <\/div>\n    <\/div>\n<\/body>\n<\/html>\n<\/pre>\n<p><\/code><\/p>\n<h3>Vaka Analizi: Mobil \u00d6ncelikli Tasar\u0131m ile Masa\u00fcst\u00fc G\u00f6r\u00fcn\u00fcm\u00fc Aras\u0131ndaki Ge\u00e7i\u015f Nas\u0131l Y\u00f6netilir?<\/h3>\n<p>Bir e-ticaret platformunun \u00fcr\u00fcn listeleme sayfas\u0131n\u0131 d\u00fc\u015f\u00fcnelim. Mobil kullan\u0131c\u0131lar genellikle s\u0131n\u0131rl\u0131 ekran alan\u0131na sahip oldu\u011fundan, her \u00fcr\u00fcn kart\u0131n\u0131n tam geni\u015flikte ve alt alta s\u0131ralanmas\u0131 beklenir. Her bir \u00fcr\u00fcn g\u00f6rseli, fiyat ve sepete ekle butonu, ekran\u0131n t\u00fcm geni\u015fli\u011fini kullanarak net bir \u015fekilde g\u00f6r\u00fcnmelidir. Bu, \"mobil \u00f6ncelikli\" bir yakla\u015f\u0131md\u0131r; yani, varsay\u0131lan CSS kurallar\u0131m\u0131z ilk olarak bu en k\u00fc\u00e7\u00fck ekran boyutlar\u0131n\u0131 hedefler. HTML'imizdeki \u00fcr\u00fcn kartlar\u0131 basit <code>div<\/code> elementleri olarak tan\u0131mlan\u0131r ve varsay\u0131lan olarak blok seviyesinde davranarak alt alta s\u0131ralan\u0131r.<\/p>\n<p>Ancak, kullan\u0131c\u0131 bir tablete ge\u00e7ti\u011finde (\u00f6rne\u011fin 768 pikselden b\u00fcy\u00fck ekranlarda), \u00fcr\u00fcn kartlar\u0131n\u0131 iki\u015ferli veya \u00fc\u00e7erli s\u0131ralamak hem daha estetik hem de daha i\u015flevsel olabilir. \u0130\u015fte burada devreye bir medya sorgusu girer. <code>@media (min-width: 768px)<\/code> ko\u015fulu alt\u0131nda, \u00fcr\u00fcn kartlar\u0131n\u0131n konteynerine <code>display: grid;<\/code> veya <code>display: flex;<\/code> \u00f6zellikleri uygulanarak, her bir \u00fcr\u00fcn kart\u0131n\u0131n belirli bir s\u00fctun geni\u015fli\u011fine sahip olmas\u0131 ve yan yana s\u0131ralanmas\u0131 sa\u011flan\u0131r. \u00d6rne\u011fin, <code>grid-template-columns: repeat(2, 1fr);<\/code> kullanarak iki s\u00fctunlu bir d\u00fczen olu\u015fturabiliriz. Masa\u00fcst\u00fc cihazlarda (\u00f6rne\u011fin 1200 pikselden b\u00fcy\u00fck ekranlarda) ise, d\u00f6rt veya be\u015f s\u00fctunlu bir d\u00fczen i\u00e7in ba\u015fka bir medya sorgusu ekleyebiliriz. Bu dinamik ge\u00e7i\u015f, her cihazda optimal bir kullan\u0131c\u0131 deneyimi sunman\u0131n anahtar\u0131d\u0131r. Kullan\u0131c\u0131, farkl\u0131 ekran boyutlar\u0131nda bile i\u00e7eri\u011fi kolayca tarayabilir ve \u00fcr\u00fcnler aras\u0131nda h\u0131zl\u0131ca gezinebilir. Bu vaka analizi, \"noktalar ve \u00e7izgiler\"in (farkl\u0131 ekran geni\u015fliklerinin) nas\u0131l ak\u0131ll\u0131ca y\u00f6netildi\u011fini ve her biri i\u00e7in \u00f6zel \"kurallar\" (CSS stilleri) uyguland\u0131\u011f\u0131n\u0131 a\u00e7\u0131k\u00e7a g\u00f6stermektedir. Bu sayede, ayn\u0131 HTML yap\u0131s\u0131, farkl\u0131 cihazlarda tamamen farkl\u0131 ama her durumda optimize edilmi\u015f bir g\u00f6rsel d\u00fczen sunabilir. Bu strateji, sadece iyi bir tasar\u0131m prati\u011fi olmakla kalmaz, ayn\u0131 zamanda eri\u015filebilirlik ve performans a\u00e7\u0131s\u0131ndan da kritik faydalar sa\u011flar.<\/p>\n<h2>Performans\u0131 Optimize Etmek: Daha Az Nokta, Daha H\u0131zl\u0131 \u00c7izgi?<\/h2>\n<p>Web geli\u015ftirme d\u00fcnyas\u0131nda h\u0131z, kullan\u0131c\u0131 deneyimi ve SEO i\u00e7in kritik bir fakt\u00f6rd\u00fcr. \"Daha az nokta, daha h\u0131zl\u0131 \u00e7izgi\" ilkesi, temel olarak, bir web sayfas\u0131n\u0131n y\u00fcklenmesi ve i\u015flenmesi i\u00e7in gereken veri miktar\u0131n\u0131 ve i\u015fleme karma\u015f\u0131kl\u0131\u011f\u0131n\u0131 azaltmay\u0131 ifade eder. Her \"nokta\", bir veri bitini, bir HTTP iste\u011fini veya bir i\u015fleme ad\u0131m\u0131n\u0131 temsil ederken; \"h\u0131zl\u0131 \u00e7izgi\", sayfan\u0131n h\u0131zl\u0131 bir \u015fekilde render edilmesini ve etkile\u015fimli hale gelmesini simgeler. Dolay\u0131s\u0131yla, gereksiz \"noktalar\u0131\" ortadan kald\u0131rmak veya optimize etmek, sayfan\u0131n daha \"h\u0131zl\u0131 bir \u00e7izgi\" ile kullan\u0131c\u0131n\u0131n kar\u015f\u0131s\u0131na \u00e7\u0131kmas\u0131n\u0131 sa\u011flar.<\/p>\n<p>Performans optimizasyonu, bir\u00e7ok farkl\u0131 katmanda ele al\u0131nabilir. \u0130lk olarak, g\u00f6rseller web sayfalar\u0131n\u0131n en b\u00fcy\u00fck y\u00fckleme s\u00fcresi fakt\u00f6rlerinden biri olabilir. B\u00fcy\u00fck boyutlu, optimize edilmemi\u015f g\u00f6rseller, \u00f6zellikle mobil cihazlarda kullan\u0131c\u0131lar\u0131n sayfadan ayr\u0131lmas\u0131na neden olabilir. Bu noktada, g\u00f6rselleri do\u011fru formatlarda (WebP gibi modern formatlar JPEG ve PNG'ye g\u00f6re daha iyi s\u0131k\u0131\u015ft\u0131rma sunar), do\u011fru boyutlarda ve s\u0131k\u0131\u015ft\u0131r\u0131lm\u0131\u015f bir \u015fekilde sunmak hayati \u00f6nem ta\u015f\u0131r. Ayr\u0131ca, duyarl\u0131 g\u00f6rseller (<code>srcset<\/code> ve <code><picture><\/code> etiketi kullanarak) farkl\u0131 ekran boyutlar\u0131 i\u00e7in uygun boyutlardaki g\u00f6rsellerin y\u00fcklenmesini sa\u011flar, b\u00f6ylece gereksiz yere b\u00fcy\u00fck dosyalar indirilmez. Bu, sunucudan istemciye iletilen \"noktalar\u0131n\" say\u0131s\u0131n\u0131 do\u011frudan azalt\u0131r. G\u00f6rsel optimizasyon, sadece dosya boyutunu k\u00fc\u00e7\u00fcltmekle kalmaz, ayn\u0131 zamanda taray\u0131c\u0131n\u0131n bu g\u00f6rselleri i\u015fleme s\u00fcresini de azalt\u0131r, bu da daha h\u0131zl\u0131 bir y\u00fckleme deneyimi anlam\u0131na gelir. Bir e-ticaret sitesinde, her \u00fcr\u00fcn g\u00f6rselinin optimize edilmesi, binlerce g\u00f6rselin toplam y\u00fckleme s\u00fcresini dramatik bir \u015fekilde d\u00fc\u015f\u00fcrebilir ve bu da sat\u0131\u015flar \u00fczerinde do\u011frudan bir etki yarat\u0131r.<\/p>\n<p>\u0130kinci olarak, kod optimizasyonu da b\u00fcy\u00fck \u00f6nem ta\u015f\u0131r. HTML, CSS ve JavaScript dosyalar\u0131n\u0131n k\u00fc\u00e7\u00fclt\u00fclmesi (minification) ve s\u0131k\u0131\u015ft\u0131r\u0131lmas\u0131 (GZIP compression), sunucudan istemciye aktar\u0131lan veri miktar\u0131n\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde azalt\u0131r. K\u00fc\u00e7\u00fcltme i\u015flemi, koddan gereksiz bo\u015fluklar\u0131, yorumlar\u0131 ve sat\u0131r sonlar\u0131n\u0131 kald\u0131r\u0131rken, GZIP s\u0131k\u0131\u015ft\u0131rmas\u0131 dosyalar\u0131n boyutunu daha da k\u00fc\u00e7\u00fclt\u00fcr. Bu, a\u011f \u00fczerinden daha az \"nokta\" transferi anlam\u0131na gelir, bu da \u00f6zellikle yava\u015f internet ba\u011flant\u0131lar\u0131nda sayfa y\u00fckleme h\u0131z\u0131n\u0131 fark edilir \u015fekilde art\u0131r\u0131r. Ayr\u0131ca, JavaScript kodunun asenkron (<code>async<\/code>) veya ertelenmi\u015f (<code>defer<\/code>) olarak y\u00fcklenmesi, taray\u0131c\u0131n\u0131n HTML i\u00e7eri\u011fini ayr\u0131\u015ft\u0131rmas\u0131n\u0131 ve render etmesini engellemeyerek alg\u0131lanan y\u00fckleme h\u0131z\u0131n\u0131 iyile\u015ftirir. Bu teknikler, kullan\u0131c\u0131n\u0131n sayfayla daha h\u0131zl\u0131 etkile\u015fime ge\u00e7mesine olanak tan\u0131r.<\/p>\n<p>Son olarak, tembel y\u00fckleme (lazy loading) stratejileri, \u00f6zellikle uzun web sayfalar\u0131nda veya g\u00f6rsel a\u011f\u0131rl\u0131kl\u0131 i\u00e7eriklerde performans\u0131 art\u0131rmak i\u00e7in g\u00fc\u00e7l\u00fc bir ara\u00e7t\u0131r. Tembel y\u00fckleme, ekranda g\u00f6r\u00fcnmeyen g\u00f6rsellerin veya di\u011fer medyan\u0131n, kullan\u0131c\u0131 bu b\u00f6lgeye kayd\u0131rana kadar y\u00fcklenmemesini sa\u011flar. Bu sayede, ilk sayfa y\u00fcklemesi i\u00e7in gereken \"nokta\" say\u0131s\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde azal\u0131r. Taray\u0131c\u0131lar art\u0131k yerel tembel y\u00fckleme (<code>loading=\"lazy\"<\/code> \u00f6zelli\u011fi ile) deste\u011fi sunarak bu s\u00fcreci daha da basitle\u015ftirmi\u015ftir. Bu \u00f6zellik, geli\u015ftiricilerin ek JavaScript k\u00fct\u00fcphanelerine ba\u011f\u0131ml\u0131l\u0131\u011f\u0131n\u0131 azalt\u0131r. Bu performans optimizasyon teknikleri bir araya geldi\u011finde, web siteleri sadece daha h\u0131zl\u0131 de\u011fil, ayn\u0131 zamanda daha verimli ve kullan\u0131c\u0131 dostu hale gelir. Her bir \"noktan\u0131n\" de\u011feri anla\u015f\u0131l\u0131r ve gereksiz olanlar elimine edilerek, kullan\u0131c\u0131ya kesintisiz ve \"h\u0131zl\u0131 bir \u00e7izgi\" deneyimi sunulur.<\/p>\n<h2>Gelece\u011fin Web'i: Noktalar ve \u00c7izgilerle Yenilik\u00e7i Yakla\u015f\u0131mlar<\/h2>\n<p>Web teknolojileri s\u00fcrekli evriliyor ve bu evrim, temel \"noktalar ve \u00e7izgiler\" kavram\u0131n\u0131 daha da karma\u015f\u0131k ve verimli yollarla kullanmam\u0131z\u0131 sa\u011fl\u0131yor. Gelece\u011fin web'i, sadece g\u00f6rsel olarak etkileyici olmakla kalmayacak, ayn\u0131 zamanda daha h\u0131zl\u0131, daha g\u00fcvenli ve her cihazda kusursuz bir deneyim sunacak. Bu inovasyonlar aras\u0131nda Web Bile\u015fenleri (Web Components), A\u015famal\u0131 Web Uygulamalar\u0131 (Progressive Web Apps - PWAs) ve eri\u015filebilirlik (accessibility) kavram\u0131 \u00f6n plana \u00e7\u0131k\u0131yor. Bu yakla\u015f\u0131mlar, web geli\u015ftiricilerinin \"noktalar ve \u00e7izgiler\"i, yani temel kod par\u00e7ac\u0131klar\u0131n\u0131 ve yap\u0131land\u0131rmalar\u0131n\u0131 nas\u0131l daha ak\u0131ll\u0131ca kullanabileceklerini g\u00f6steriyor.<\/p>\n<p>Web Bile\u015fenleri, yeniden kullan\u0131labilir ve kaps\u00fcllenmi\u015f \u00f6zel HTML elementleri olu\u015fturmam\u0131za olanak tan\u0131r. Bir nevi, kendi \"noktalar ve \u00e7izgiler\" k\u00fcmenizi tan\u0131mlayarak, bunlar\u0131 istedi\u011finiz yerde kullanabilirsiniz. Shadow DOM, Custom Elements, HTML Templates ve ES Modules gibi teknolojilerin birle\u015fimiyle, ba\u011f\u0131ms\u0131z UI (kullan\u0131c\u0131 aray\u00fcz\u00fc) bile\u015fenleri geli\u015ftirebiliriz. Bu, ayn\u0131 bile\u015feni farkl\u0131 projelerde kolayca kullanabilece\u011fimiz anlam\u0131na gelir, b\u00f6ylece kod tekrar\u0131n\u0131 azalt\u0131r ve geli\u015ftirme s\u00fcrecini h\u0131zland\u0131r\u0131r. \u00d6rne\u011fin, bir \"\u00f6zel takvim bile\u015feni\" olu\u015fturabilir ve bunu bir e-ticaret sitesinde \u00fcr\u00fcn teslimat tarihi se\u00e7imi i\u00e7in veya bir randevu sisteminde kullanabiliriz. Bu, her seferinde s\u0131f\u0131rdan kod yazmak yerine, mevcut, test edilmi\u015f \"noktalar ve \u00e7izgiler\" setini yeniden kullanmak gibidir. Mod\u00fcler mimarilerle \u00e7al\u0131\u015fmak, daha s\u00fcrd\u00fcr\u00fclebilir ve y\u00f6netilebilir kod tabanlar\u0131 olu\u015fturmam\u0131za yard\u0131mc\u0131 olurken, ayn\u0131 zamanda ekip i\u00e7i i\u015fbirli\u011fini de kolayla\u015ft\u0131r\u0131r.<\/p>\n<p>A\u015famal\u0131 Web Uygulamalar\u0131 (PWAs) ise, web'in g\u00fcc\u00fcn\u00fc mobil uygulamalar\u0131n en iyi \u00f6zellikleriyle birle\u015ftirir. Service Worker'lar sayesinde, PWAs \u00e7evrimd\u0131\u015f\u0131 \u00e7al\u0131\u015fabilir, bildirimler g\u00f6nderebilir ve ana ekran simgeleri arac\u0131l\u0131\u011f\u0131yla h\u0131zl\u0131 eri\u015fim sa\u011flayabilir. Bu, kullan\u0131c\u0131lar\u0131n internet ba\u011flant\u0131s\u0131 olmasa bile sitenizin \"noktalar\u0131na ve \u00e7izgilerine\" eri\u015febilmesi demektir. PWAs, kullan\u0131c\u0131 deneyimini \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131r\u0131rken, geli\u015ftiricilere de tek bir kod taban\u0131yla hem web hem de uygulama benzeri bir deneyim sunma esnekli\u011fi sa\u011flar. Ayr\u0131ca, HTTPS \u00fczerinden sunulmalar\u0131 sayesinde g\u00fcvenlikleri de art\u0131r\u0131lm\u0131\u015f olur. Bu, web sitelerinin daha esnek ve eri\u015filebilir olmas\u0131n\u0131 sa\u011flayan temel bir ad\u0131md\u0131r.<\/p>\n<p>Eri\u015filebilirlik (Accessibility - A11y), gelece\u011fin web'i i\u00e7in hayati bir \"nokta ve \u00e7izgi\"dir. Her kullan\u0131c\u0131n\u0131n, yeteneklerinden ba\u011f\u0131ms\u0131z olarak, web i\u00e7eri\u011fine eri\u015febilmesi ve onunla etkile\u015fime ge\u00e7ebilmesi anlam\u0131na gelir. Bu, anlamsal HTML (semantic HTML) kullanarak ekran okuyucular\u0131n\u0131n i\u00e7eri\u011fi do\u011fru bir \u015fekilde yorumlamas\u0131n\u0131 sa\u011flamak, klavye navigasyonu i\u00e7in uygun yap\u0131land\u0131rmalar yapmak ve yeterli renk kontrast\u0131 kullanmak gibi pratikleri i\u00e7erir. \u00d6rne\u011fin, <code><\/p>\n<nav><\/code>, <code><\/p>\n<article><\/code> ve <code><\/p>\n<footer><\/code> gibi etiketler, i\u00e7eri\u011fin amac\u0131n\u0131 a\u00e7\u0131klayarak ekran okuyucular\u0131na de\u011ferli bilgiler sunar. Bu, web sitelerimizin sadece g\u00f6rsel olarak de\u011fil, ayn\u0131 zamanda yap\u0131sal olarak da \"anlaml\u0131 noktalar ve \u00e7izgiler\"den olu\u015fmas\u0131n\u0131 sa\u011flar. Gelecekte, yapay zeka ve makine \u00f6\u011frenimi gibi teknolojilerle birlikte, web'in daha ki\u015fiselle\u015ftirilmi\u015f, \u00f6ng\u00f6r\u00fcc\u00fc ve ba\u011flamsal deneyimler sunmas\u0131 bekleniyor. Bu inovasyonlar, dijital d\u00fcnyay\u0131 her zamankinden daha ba\u011flant\u0131l\u0131, daha ak\u0131ll\u0131 ve daha kapsay\u0131c\u0131 hale getirecek. K\u0131sacas\u0131, bu \"noktalar ve \u00e7izgiler\"i do\u011fru \u015fekilde bir araya getirmek, gelece\u011fin web deneyimini \u015fekillendirecektir.<\/p>\n<h2>S\u0131k\u00e7a Sorulan Sorular (SSS)<\/h2>\n<p>Web geli\u015ftirmede \"noktalar ve \u00e7izgiler\" kavram\u0131na dal\u0131\u015f\u0131m\u0131z sona ererken, bu yolculukta akl\u0131n\u0131za tak\u0131labilecek baz\u0131 temel sorular\u0131 yan\u0131tlayal\u0131m.<\/p>\n<h3>1. \"Noktalar ve \u00c7izgiler\" terimi web geli\u015ftirmede tam olarak ne anlama geliyor?<\/h3>\n<p>Bu terim, dijital d\u00fcnyadaki her \u015feyin temel yap\u0131 ta\u015flar\u0131 olan ikili bitlere (0'lar ve 1'ler) bir metafor olarak kullan\u0131l\u0131r. Web geli\u015ftirmede ise bu temel prensip, CSS kenarl\u0131k stillerinden (<code>dotted<\/code>, <code>dashed<\/code>), duyarl\u0131 tasar\u0131m\u0131n k\u0131r\u0131lma noktalar\u0131na (breakpoints), hatta performans optimizasyonunda veri aktar\u0131m\u0131n\u0131n azalt\u0131lmas\u0131na kadar farkl\u0131 katmanlarda kar\u015f\u0131m\u0131za \u00e7\u0131kar. Dijital bilgiyi olu\u015fturan en k\u00fc\u00e7\u00fck, atomik birimleri temsil eder.<\/p>\n<h3>2. Neden mobil uyumlu tasar\u0131m bu kadar \u00f6nemli?<\/h3>\n<p>Mobil uyumlu (duyarl\u0131) tasar\u0131m, g\u00fcn\u00fcm\u00fcz internet kullan\u0131m al\u0131\u015fkanl\u0131klar\u0131 g\u00f6z \u00f6n\u00fcne al\u0131nd\u0131\u011f\u0131nda kritik \u00f6neme sahiptir. Kullan\u0131c\u0131lar\u0131n b\u00fcy\u00fck bir \u00e7o\u011funlu\u011fu internete mobil cihazlar \u00fczerinden eri\u015fti\u011fi i\u00e7in, web sitenizin her cihazda sorunsuz, h\u0131zl\u0131 ve g\u00f6rsel olarak \u00e7ekici bir deneyim sunmas\u0131 gerekir. Bu, sadece kullan\u0131c\u0131 memnuniyetini art\u0131rmakla kalmaz, ayn\u0131 zamanda Google gibi arama motorlar\u0131n\u0131n s\u0131ralamalar\u0131 i\u00e7in de \u00f6nemli bir fakt\u00f6rd\u00fcr.<\/p>\n<h3>3. Performans optimizasyonu yaparken nelere dikkat etmeliyim?<\/h3>\n<p>Performans optimizasyonunda dikkat etmeniz gereken ba\u015fl\u0131ca noktalar \u015funlard\u0131r: g\u00f6rselleri optimize etmek (do\u011fru format, boyut ve s\u0131k\u0131\u015ft\u0131rma), HTML, CSS ve JavaScript dosyalar\u0131n\u0131 k\u00fc\u00e7\u00fcltmek ve s\u0131k\u0131\u015ft\u0131rmak, gereksiz HTTP isteklerini azaltmak, taray\u0131c\u0131 \u00f6nbelleklemesini etkinle\u015ftirmek ve tembel y\u00fckleme (lazy loading) gibi stratejiler kullanmakt\u0131r. Mobil \u00f6ncelikli d\u00fc\u015f\u00fcnmek de performans\u0131 art\u0131rman\u0131n \u00f6nemli bir yoludur.<\/p>\n<h3>4. Web Bile\u015fenleri (Web Components) ne i\u015fe yarar ve neden \u00f6nemlidir?<\/h3>\n<p>Web Bile\u015fenleri, yeniden kullan\u0131labilir, kaps\u00fcllenmi\u015f ve standartla\u015ft\u0131r\u0131lm\u0131\u015f \u00f6zel HTML elementleri olu\u015fturman\u0131za olanak tan\u0131r. Bu, geli\u015ftiricilerin daha mod\u00fcler, s\u00fcrd\u00fcr\u00fclebilir ve okunabilir kodlar yazmas\u0131n\u0131 sa\u011flar. Tek bir bile\u015feni farkl\u0131 projelerde kolayca kullanabilir, kod tekrar\u0131n\u0131 azaltabilir ve ekip i\u00e7inde i\u015fbirli\u011fini kolayla\u015ft\u0131rabilirsiniz. Ayr\u0131ca, farkl\u0131 JavaScript k\u00fct\u00fcphaneleri ve framework'ler aras\u0131nda daha iyi uyumluluk sa\u011flar.<\/p>\n<h3>5. Duyarl\u0131 tasar\u0131mda media query'ler d\u0131\u015f\u0131nda ba\u015fka hangi CSS \u00f6zellikleri yard\u0131mc\u0131 olur?<\/h3>\n<p>Medya sorgular\u0131n\u0131n yan\u0131 s\u0131ra, duyarl\u0131 tasar\u0131mda esnek bir d\u00fczen olu\u015fturmak i\u00e7in Flexbox ve CSS Grid gibi d\u00fczen sistemleri b\u00fcy\u00fck \u00f6nem ta\u015f\u0131r. G\u00f6rsellerin boyutunu ayarlamak i\u00e7in <code>max-width: 100%;<\/code>, metin boyutlar\u0131 ve bo\u015fluklar i\u00e7in <code>em<\/code>, <code>rem<\/code>, <code>vw<\/code>, <code>vh<\/code> gibi g\u00f6receli birimler de i\u00e7eri\u011fin farkl\u0131 ekranlarda orant\u0131l\u0131 kalmas\u0131n\u0131 sa\u011flar. <code>object-fit<\/code> \u00f6zelli\u011fi ise g\u00f6rsellerin konteynerlerine nas\u0131l s\u0131\u011faca\u011f\u0131n\u0131 kontrol etmek i\u00e7in kullan\u0131l\u0131r.<\/p>\n","protected":false},"excerpt":{"rendered":"Dijitalin Noktalar\u0131 ve \u00c7izgilerine D\u00fc\u015f\u00fc\u015f\u00fcm: Web Geli\u015ftirmede Temel Yap\u0131 Ta\u015flar\u0131 Hi\u00e7 d\u00fc\u015f\u00fcnd\u00fcn\u00fcz m\u00fc, web sayfalar\u0131, uygulamalar ve dijital&hellip;","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-33858","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.5 (Yoast SEO v25.3.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Dijital D\u00fcnya Nas\u0131l \u0130\u015fliyor: Noktalar ve \u00c7izgilerle \u0130lk Tan\u0131\u015fma<\/title>\n<meta name=\"description\" content=\"Hi\u00e7 d\u00fc\u015f\u00fcnd\u00fcn\u00fcz m\u00fc, web sayfalar\u0131, uygulamalar ve dijital deneyimler o karma\u015f\u0131k hallerine nas\u0131l b\u00fcr\u00fcn\u00fcyor? \u0130\u015fin \u00f6z\u00fcnde, her \u015fey basit &quot;noktalar ve \u00e7izgiler&quot;den ibaret. Gelin, dijital d\u00fcnyan\u0131n bu g\u00f6r\u00fcnmez altyap\u0131s\u0131n\u0131, yani temel yap\u0131 ta\u015flar\u0131n\u0131 ve bunlar\u0131n web geli\u015ftirmedeki kritik rol\u00fcn\u00fc derinlemesine ke\u015ffedelim. Bu makale, sizi bu b\u00fcy\u00fcleyici tav\u015fan deli\u011fine, yani her \u015feyin ard\u0131ndaki temel mant\u0131\u011f\u0131 anlamaya davet ediyor.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/dijital-dunya-nasil-isliyor-noktalar-ve-cizgilerle-ilk-tanisma\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Dijital D\u00fcnya Nas\u0131l \u0130\u015fliyor: Noktalar ve \u00c7izgilerle \u0130lk Tan\u0131\u015fma\" \/>\n<meta property=\"og:description\" content=\"Hi\u00e7 d\u00fc\u015f\u00fcnd\u00fcn\u00fcz m\u00fc, web sayfalar\u0131, uygulamalar ve dijital deneyimler o karma\u015f\u0131k hallerine nas\u0131l b\u00fcr\u00fcn\u00fcyor? \u0130\u015fin \u00f6z\u00fcnde, her \u015fey basit &quot;noktalar ve \u00e7izgiler&quot;den ibaret. Gelin, dijital d\u00fcnyan\u0131n bu g\u00f6r\u00fcnmez altyap\u0131s\u0131n\u0131, yani temel yap\u0131 ta\u015flar\u0131n\u0131 ve bunlar\u0131n web geli\u015ftirmedeki kritik rol\u00fcn\u00fc derinlemesine ke\u015ffedelim. Bu makale, sizi bu b\u00fcy\u00fcleyici tav\u015fan deli\u011fine, yani her \u015feyin ard\u0131ndaki temel mant\u0131\u011f\u0131 anlamaya davet ediyor.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/dijital-dunya-nasil-isliyor-noktalar-ve-cizgilerle-ilk-tanisma\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-11-08T00:00:57+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"21 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/dijital-dunya-nasil-isliyor-noktalar-ve-cizgilerle-ilk-tanisma\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/dijital-dunya-nasil-isliyor-noktalar-ve-cizgilerle-ilk-tanisma\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Dijital D\u00fcnya Nas\u0131l \u0130\u015fliyor: Noktalar ve \u00c7izgilerle \u0130lk Tan\u0131\u015fma\",\"datePublished\":\"2025-11-08T00:00:57+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/dijital-dunya-nasil-isliyor-noktalar-ve-cizgilerle-ilk-tanisma\/\"},\"wordCount\":4037,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/dijital-dunya-nasil-isliyor-noktalar-ve-cizgilerle-ilk-tanisma\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/dijital-dunya-nasil-isliyor-noktalar-ve-cizgilerle-ilk-tanisma\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/dijital-dunya-nasil-isliyor-noktalar-ve-cizgilerle-ilk-tanisma\/\",\"name\":\"Dijital D\u00fcnya Nas\u0131l \u0130\u015fliyor: Noktalar ve \u00c7izgilerle \u0130lk Tan\u0131\u015fma\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-11-08T00:00:57+00:00\",\"description\":\"Hi\u00e7 d\u00fc\u015f\u00fcnd\u00fcn\u00fcz m\u00fc, web sayfalar\u0131, uygulamalar ve dijital deneyimler o karma\u015f\u0131k hallerine nas\u0131l b\u00fcr\u00fcn\u00fcyor? \u0130\u015fin \u00f6z\u00fcnde, her \u015fey basit \\\"noktalar ve \u00e7izgiler\\\"den ibaret. Gelin, dijital d\u00fcnyan\u0131n bu g\u00f6r\u00fcnmez altyap\u0131s\u0131n\u0131, yani temel yap\u0131 ta\u015flar\u0131n\u0131 ve bunlar\u0131n web geli\u015ftirmedeki kritik rol\u00fcn\u00fc derinlemesine ke\u015ffedelim. Bu makale, sizi bu b\u00fcy\u00fcleyici tav\u015fan deli\u011fine, yani her \u015feyin ard\u0131ndaki temel mant\u0131\u011f\u0131 anlamaya davet ediyor.\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/dijital-dunya-nasil-isliyor-noktalar-ve-cizgilerle-ilk-tanisma\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/dijital-dunya-nasil-isliyor-noktalar-ve-cizgilerle-ilk-tanisma\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/dijital-dunya-nasil-isliyor-noktalar-ve-cizgilerle-ilk-tanisma\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Dijital D\u00fcnya Nas\u0131l \u0130\u015fliyor: Noktalar ve \u00c7izgilerle \u0130lk Tan\u0131\u015fma\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Dijital D\u00fcnya Nas\u0131l \u0130\u015fliyor: Noktalar ve \u00c7izgilerle \u0130lk Tan\u0131\u015fma","description":"Hi\u00e7 d\u00fc\u015f\u00fcnd\u00fcn\u00fcz m\u00fc, web sayfalar\u0131, uygulamalar ve dijital deneyimler o karma\u015f\u0131k hallerine nas\u0131l b\u00fcr\u00fcn\u00fcyor? \u0130\u015fin \u00f6z\u00fcnde, her \u015fey basit \"noktalar ve \u00e7izgiler\"den ibaret. Gelin, dijital d\u00fcnyan\u0131n bu g\u00f6r\u00fcnmez altyap\u0131s\u0131n\u0131, yani temel yap\u0131 ta\u015flar\u0131n\u0131 ve bunlar\u0131n web geli\u015ftirmedeki kritik rol\u00fcn\u00fc derinlemesine ke\u015ffedelim. Bu makale, sizi bu b\u00fcy\u00fcleyici tav\u015fan deli\u011fine, yani her \u015feyin ard\u0131ndaki temel mant\u0131\u011f\u0131 anlamaya davet ediyor.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/dijital-dunya-nasil-isliyor-noktalar-ve-cizgilerle-ilk-tanisma\/","og_locale":"tr_TR","og_type":"article","og_title":"Dijital D\u00fcnya Nas\u0131l \u0130\u015fliyor: Noktalar ve \u00c7izgilerle \u0130lk Tan\u0131\u015fma","og_description":"Hi\u00e7 d\u00fc\u015f\u00fcnd\u00fcn\u00fcz m\u00fc, web sayfalar\u0131, uygulamalar ve dijital deneyimler o karma\u015f\u0131k hallerine nas\u0131l b\u00fcr\u00fcn\u00fcyor? \u0130\u015fin \u00f6z\u00fcnde, her \u015fey basit \"noktalar ve \u00e7izgiler\"den ibaret. Gelin, dijital d\u00fcnyan\u0131n bu g\u00f6r\u00fcnmez altyap\u0131s\u0131n\u0131, yani temel yap\u0131 ta\u015flar\u0131n\u0131 ve bunlar\u0131n web geli\u015ftirmedeki kritik rol\u00fcn\u00fc derinlemesine ke\u015ffedelim. Bu makale, sizi bu b\u00fcy\u00fcleyici tav\u015fan deli\u011fine, yani her \u015feyin ard\u0131ndaki temel mant\u0131\u011f\u0131 anlamaya davet ediyor.","og_url":"https:\/\/fatihsoysal.com\/blog\/dijital-dunya-nasil-isliyor-noktalar-ve-cizgilerle-ilk-tanisma\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-11-08T00:00:57+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"21 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/dijital-dunya-nasil-isliyor-noktalar-ve-cizgilerle-ilk-tanisma\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/dijital-dunya-nasil-isliyor-noktalar-ve-cizgilerle-ilk-tanisma\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Dijital D\u00fcnya Nas\u0131l \u0130\u015fliyor: Noktalar ve \u00c7izgilerle \u0130lk Tan\u0131\u015fma","datePublished":"2025-11-08T00:00:57+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/dijital-dunya-nasil-isliyor-noktalar-ve-cizgilerle-ilk-tanisma\/"},"wordCount":4037,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/dijital-dunya-nasil-isliyor-noktalar-ve-cizgilerle-ilk-tanisma\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/dijital-dunya-nasil-isliyor-noktalar-ve-cizgilerle-ilk-tanisma\/","url":"https:\/\/fatihsoysal.com\/blog\/dijital-dunya-nasil-isliyor-noktalar-ve-cizgilerle-ilk-tanisma\/","name":"Dijital D\u00fcnya Nas\u0131l \u0130\u015fliyor: Noktalar ve \u00c7izgilerle \u0130lk Tan\u0131\u015fma","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-11-08T00:00:57+00:00","description":"Hi\u00e7 d\u00fc\u015f\u00fcnd\u00fcn\u00fcz m\u00fc, web sayfalar\u0131, uygulamalar ve dijital deneyimler o karma\u015f\u0131k hallerine nas\u0131l b\u00fcr\u00fcn\u00fcyor? \u0130\u015fin \u00f6z\u00fcnde, her \u015fey basit \"noktalar ve \u00e7izgiler\"den ibaret. Gelin, dijital d\u00fcnyan\u0131n bu g\u00f6r\u00fcnmez altyap\u0131s\u0131n\u0131, yani temel yap\u0131 ta\u015flar\u0131n\u0131 ve bunlar\u0131n web geli\u015ftirmedeki kritik rol\u00fcn\u00fc derinlemesine ke\u015ffedelim. Bu makale, sizi bu b\u00fcy\u00fcleyici tav\u015fan deli\u011fine, yani her \u015feyin ard\u0131ndaki temel mant\u0131\u011f\u0131 anlamaya davet ediyor.","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/dijital-dunya-nasil-isliyor-noktalar-ve-cizgilerle-ilk-tanisma\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/dijital-dunya-nasil-isliyor-noktalar-ve-cizgilerle-ilk-tanisma\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/dijital-dunya-nasil-isliyor-noktalar-ve-cizgilerle-ilk-tanisma\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Dijital D\u00fcnya Nas\u0131l \u0130\u015fliyor: Noktalar ve \u00c7izgilerle \u0130lk Tan\u0131\u015fma"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/33858","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=33858"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/33858\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=33858"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=33858"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=33858"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}