Anasayfa Web Geliştirme ve Programlama

Web Geliştirme ve Programlama

Tarafından Receb A.

• 8 makaleler

HTML Nedir?

Merhaba, web geliştirme dünyasının tutkunu! Dijital çağda, bir web sitesini sıfırdan oluşturmanın temeli olan HTML (HyperText Markup Language), her geliştiricinin vazgeçilmezi. Eğer "HTML nedir" diye soruyorsanız, bu yazı tam size göre: Başlangıç seviyesinden ileri seviyeye kadar, HTML'in tarihini, temel yapısını, HTML5 yeniliklerini, erişilebilirlik standartlarını, CSS ve JavaScript entegrasyonunu, örnek kod parçacıklarını, yaygın hataları, mobil uyumlu tasarım ipuçlarını ve pratik egzersizleri kapsayan en detaylı rehber. Kaliteweb gibi güvenilir bir hosting sağlayıcısıyla sitenizi yayınladığınızda, HTML'in gücüyle milyonlara ulaşabilirsiniz. Hazırsanız, HTML'in büyüleyici dünyasına adım atalım! HTML'in Tarihi: Web'in Temel Taşının Evrimi HTML, web'in omurgası olarak 1980'lerin sonundan beri evrilen bir dildir. HTML nedir sorusunun kökeni, CERN'de çalışan fizikçi Tim Berners-Lee'ye dayanır. 1989'da Berners-Lee, bilimsel belgeleri paylaşmak için bir sistem tasarladı ve 1991'de ilk HTML versiyonunu yayınladı. Bu ilk sürüm, sadece 18 etiket içeriyordu ve hipermetin bağlantıları (hypertext) ile markup dili (markup language) kavramlarını birleştiriyordu. HTML 1.0 (1993), temel metin formatlaması ve bağlantılarla sınırlıydı; tablolar veya resimler yoktu. 1990'ların ortalarında, HTML 2.0 (1995) IETF tarafından standartlaştırıldı ve formlar eklendi. HTML 3.2 (1997), stil sayfaları ve tablo desteğini getirdi, ancak tarayıcı savaşları (Netscape vs Internet Explorer) standartlaşmayı zorlaştırdı. HTML 4.01 (1999), daha katı kurallar ve erişilebilirlik odaklı iyileştirmelerle geldi; XHTML 1.0 (2000) ise XML tabanlı bir varyasyondu. 2000'lerin başında, web 2.0'nin yükselişiyle HTML'in evrimi hızlandı. WHATWG (Web Hypertext Application Technology Working Group) 2004'te HTML5'i geliştirmeye başladı. W3C'nin 2014'te HTML5'i standartlaştırmasıyla, modern web doğdu. 2025 itibarıyla, HTML5'in son güncellemeleri (örneğin WCAG 2.2 entegrasyonu) erişilebilirlik ve performans odaklı. HTML'in evrimi, statik sayfalardan dinamik, interaktif uygulamalara geçişi simgeliyor – bugün 5 milyardan fazla web sitesi HTML kullanıyor. Bu tarih, HTML'in esnekliğini gösterir: Başlangıçta bilimsel paylaşım için tasarlanmışken, şimdi e-ticaret devleri ve mobil uygulamaların temelini oluşturuyor. İleri seviye geliştiriciler için, HTML'in XML kökenleri (XHTML) hala modüler kodlamada faydalı. HTML'in Temel Etiketleri ve Yapısı: Başlangıç Seviyesi Rehber HTML nedir ve nasıl yapılandırılır? HTML, etiketler (tags) ile metni ve içerikleri işaretleyen bir markup dilidir. Temel yapı, bir ağaç hiyerarşisidir: Kök <html>, başlık <head> ve gövde <body>. Bir HTML belgesi şöyle başlar: <!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>İlk HTML Sayfam</title> </head> <body> <h1>Merhaba Dünya!</h1> <p>Bu bir paragraf etiketi.</p> </body> </html> Burada, <!DOCTYPE html> HTML5'i bildirir. <html lang="tr"> dilini tanımlar – SEO için kritik. <head> bölümünde meta etiketler (charset için UTF-8, viewport için mobil uyum) ve title yer alır. <body>'de içerik: <h1> başlık, <p> paragraf. Temel etiketler: - Yapısal Etiketler: <header>, <nav>, <main>, <footer>, <section>, <article> – semantik HTML için. - Metin Etiketleri: <strong> (kalın), <em> (italik), <a href="url"> (bağlantı), <img src="resim.jpg" alt="Açıklama"> (görsel – alt metin erişilebilirlik için zorunlu). - Liste Etiketleri: <ul> (sırasız liste), <ol> (sıralı), <li> (öğe). - Form Etiketleri: <form>, <input type="text">, <button>. İleri seviye: Etiketler kapanmalı (<p>Tekst</p>), öznitelikler (attributes) küçük harfle yazılır. Boş etiketler (void elements) kapanmaz: <br>, <hr>, <img>. HTML yapısı, DOM (Document Object Model) oluşturur – JS için temel. Pratik Egzersiz 1: Basit bir sayfa oluşturun. <head>'e meta ekleyin, <body>'ye başlık, paragraf ve bir bağlantı koyun. Tarayıcıda açın ve kodu validator.w3.org ile doğrulayın. HTML5 Yenilikleri: Modern Web'in Gücü (2025 Güncellemeleri) HTML5, 2014 standartıyla devrim yarattı ve 2025'te hala evriliyor. HTML5 nedir? Eski sürümlere göre semantik, multimedya ve API'ler eklenmiş hali. Başlıca yenilikler: 1. Semantik Etiketler: <header>, <footer>, <nav>, <article>, <aside> – SEO ve erişilebilirlik için. Örnek: <article><h2>Başlık</h2><p>İçerik</p></article>. 2. Multimedya Desteği: <audio src="ses.mp3" controls></audio>, <video src="video.mp4" width="400" controls poster="kapak.jpg"></video> – Flash'a gerek yok. 2025'te, <picture> etiketi responsive görseller için: <picture><source srcset="mobil.jpg" media="(max-width: 600px)"><img src="desktop.jpg" alt="Resim"></picture>. 3. Form İyileştirmeleri: <input type="email">, <input type="date">, <datalist> – doğrulama için. <progress value="70" max="100"> ilerleme çubuğu. 4. Canvas ve SVG: <canvas id="cizim" width="200" height="100"></canvas> grafik çizimi için (JS ile). <svg><circle cx="50" cy="50" r="40" fill="red"/></svg> vektör grafikler. 5. API'ler: Geolocation (navigator.geolocation.getCurrentPosition()), LocalStorage (localStorage.setItem('anahtar', 'değer')), Web Workers – arka plan işleri. 2025 yenilikleri: <dialog> modal pencere için (<dialog open><p>İçerik</p></dialog>), inert attribute (devre dışı bırakma), lazy loading (<img loading="lazy"> – performans için). İleri seviye: HTML5'in ARIA (Accessible Rich Internet Applications) entegrasyonu, dinamik içerik için. Pratik Egzersiz 2: Bir video player oluşturun. <video> etiketiyle bir video ekleyin, controls ve poster attribute'larını kullanın. Canvas ile basit bir çizim ekleyin. Erişilebilirlik Standartları: WCAG ve HTML HTML nedir ve neden erişilebilir olmalı? Erişilebilirlik, engelli kullanıcıların web'i kullanmasını sağlar. WCAG (Web Content Accessibility Guidelines) 2.2 (2023, 2025'te güncellenmiş), W3C'nin standartıdır: POUR prensipleri (Perceivable, Operable, Understandable, Robust). HTML'de erişilebilirlik: - Alt Metinler: <img alt="Açıklama"> – ekran okuyucular için zorunlu. - Semantik Yapı: <h1>-<h6> hiyerarşisi, <label for="id"> formlar için. - ARIA Etiketleri: <button aria-label="Kapat">X</button> – gizli içerik için. - Kontrast ve Renk: CSS ile WCAG AA (4.5:1 kontrast oranı). - Klavye Navigasyonu: <a href> ve <button> focusable olsun. Başlangıç: Tüm görsellerine alt ekleyin. İleri: <nav aria-label="Ana Menü"> ile landmark'lar tanımlayın. WCAG 2.2, mobil dokunma hedeflerini (44x44 piksel) ekler. Araçlar: WAVE veya Lighthouse ile test edin. Pratik Egzersiz 3: Bir form oluşturun. <input>'lara <label> ekleyin, bir resme alt metin verin. Ekran okuyucu simülasyonuyla (NVDA) test edin. CSS ve JavaScript Entegrasyonu: HTML'i Canlı Kılmak HTML yalnızken statik; CSS stil, JS etkileşim katar. Entegrasyon, web'in üçlü gücüdür. CSS Entegrasyonu: Üç yol: Inline (<p style="color:red;">), Internal (<style> p {color:red;} </style>), External (<link rel="stylesheet" href="stil.css"> – önerilen). Örnek: HTML'de <div class="kutu">İçerik</div>, CSS'de .kutu { background: blue; padding: 10px; }. JavaScript Entegrasyonu: <script src="script.js"></script> veya inline (<script>alert('Merhaba');</script>). DOM manipülasyonu: document.getElementById('id').innerHTML = 'Yeni';. Örnek Kod: Basit bir buton. HTML: <button id="buton">Tıkla</button> <p id="metin">Henüz tıklamadın.</p> JS: document.getElementById('buton').addEventListener('click', function() { document.getElementById('metin').innerHTML = 'Tıklandı!'; }); CSS: #buton { background: green; } İleri seviye: ES6+ (arrow functions), async/await API çağrıları için. 2025'te, Web Components (<custom-element>) ile modüler entegrasyon. Pratik Egzersiz 4: Bir sayfa yapın. External CSS ile stilleyin, JS ile buton ekleyin ki metni değiştirsin. Örnek Kod Parçacıkları: Pratik Uygulamalar Başlangıç örneği: Basit bir sayfa. <!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <title>HTML Örneği</title> <style> body { font-family: Arial; } </style> </head> <body> <header><h1>Benim Sitem</h1></header> <nav><a href="#anasayfa">Anasayfa</a></nav> <main> <section> <article> <h2>İlk Makale</h2> <p>HTML ile yazıldı.</p> <img src="resim.jpg" alt="Örnek resim"> </article> </section> </main> <footer><p>© 2025</p></footer> <script>console.log('HTML hazır!');</script> </body> </html> İleri örnek: Form ile JS doğrulama. HTML: <form id="form"> <label for="email">E-posta:</label> <input type="email" id="email" required> <button type="submit">Gönder</button> </form> JS: document.getElementById('form').addEventListener('submit', function(e) { e.preventDefault(); let email = document.getElementById('email').value; if (email.includes('@')) { alert('Geçerli!'); } else { alert('Hata!'); } }); Bu parçalar, HTML5 form validation'ını gösterir. Yaygın Hatalar ve Düzeltmeler: Kaçınmanız Gereken Tuzaklar HTML kodlamada hatalar yaygın; işte en sık olanlar. 1. Kapanmayan Etiketler: <p>Metin yerine <p>Metin</p>. Fix: Editörde auto-close kullanın (VS Code). 2. Yanlış DOCTYPE: Eski <!DOCTYPE HTML PUBLIC...> yerine <!DOCTYPE html>. Fix: HTML5 standartını kullanın. 3. Alt Metin Eksikliği: <img src="a.jpg"> yerine alt ekleyin. Fix: Her görsele descriptive alt verin. 4. Semantik Hatalar: <div> soup (aşırı div kullanımı) yerine semantik etiketler. Fix: <section> ve <article> tercih edin. 5. Öznitelik Hataları: HREF="url" yerine href="url". Fix: Küçük harf, tırnaklı. 6. Nesting Sorunları: <p><h1>Yanlış</h1></p> – p içinde h1 olamaz. Fix: Doğru hiyerarşi: Blok etiketler iç içe. 7. Charset Eksikliği: UTF-8 belirtmeyin, Türkçe karakterler bozulur. Fix: <meta charset="UTF-8">. İleri: Cross-browser uyum – IE desteği için polyfill'ler. Validator araçları (W3C) ile kontrol edin. Pratik Egzersiz 5: Hatalı bir kodu düzeltin. Kapanmayan etiketler ekleyin, validator ile test edin. Mobil Uyumlu Tasarım İpuçları: Responsive HTML Mobil uyum, 2025'te zorunlu – kullanıcıların %60'ı mobilden giriyor. HTML nedir ve mobil? Viewport meta ile başlar: <meta name="viewport" content="width=device-width, initial-scale=1.0">. İpuçları: 1. Semantik ve Esnek Yapı: Fluid grid'ler – CSS Grid/Flexbox ile: <div style="display: flex;">. 2. Media Queries: CSS'te @media (max-width: 600px) { body { font-size: 16px; } }. 3. Responsive Görseller: <img srcset="kucuk.jpg 300w, buyuk.jpg 800w" sizes="(max-width: 600px) 300px, 800px">. 4. Dokunma Hedefleri: Butonlar en az 44x44 piksel. 5. Mobile-First: Küçük ekranı önce tasarlayın, sonra genişletin. İleri: AMP (Accelerated Mobile Pages) için HTML5 subset'i kullanın. Kaliteweb'in hosting'inde, responsive siteler daha hızlı yüklenir. Pratik Egzersiz 6: Bir sayfayı responsive yapın. Viewport ekleyin, media query ile menüyü mobilde hamburger'a dönüştürün (JS ile). Pratik Egzersizler: Uygulamalı Öğrenme Yukarıdaki egzersizleri genişletelim: - Egzersiz 7 (İleri): Bir blog sayfası oluşturun. HTML5 semantik etiketler, CSS animasyonları ve JS ile yorum ekleme özelliği ekleyin. Erişilebilirlik için ARIA kullanın. - Egzersiz 8: Hatalı bir kodu debug edin. Yaygın hataları tespit edip düzeltin, Lighthouse ile skorunuzu 90+'ya çıkarın. Bu egzersizler, teoriyi pratiğe döker – GitHub'da paylaşın! HTML ile Web Geleceğini Şekillendirin HTML nedir? Web'in kalbi, evrilen bir dil. Bu rehberle, başlangıçtan ileri seviyeye hakim oldunuz – tarihinden mobil ipuçlarına. HTML5'in gücüyle, erişilebilir ve responsive siteler kurun. Kaliteweb'de yayınlayın, milyonlara ulaşın. Geliştirme yolculuğunuzda başarılar!

Son güncelleme tarihi Nov 21, 2025

PHP Nedir?

Dijital dünyanın temel taşlarından biri olan PHP, 2025 yılında hala web geliştirmenin vazgeçilmez bir parçası. Sunucu tarafı scripting dillerinin öncüsü olarak bilinen bu dil, milyonlarca web sitesini güçlendiriyor. İlk olarak Rasmus Lerdorf tarafından 1994’te geliştirilen PHP, Personal Home Page anlamına geliyordu; ancak zamanla Hypertext Preprocessor olarak evrildi. 2025’te PHP 8.4 sürümüyle, performans ve güvenlik iyileştirmeleriyle öne çıkıyor. Bu rehberde, PHP’nin tarihini ve evrimini, sunucu tarafı scripting özelliklerini, değişkenler, fonksiyonlar ve nesneler gibi temel kavramları, veritabanı entegrasyonunu (MySQL/PDO), popüler framework’leri (Laravel, Symfony), güvenlik pratiklerini, performans optimizasyon tekniklerini ve WordPress gibi CMS’lerde kullanımını derinlemesine inceleyeceğiz. Bolca kod örneği ve adım adım bir tutorial ile, PHP’yi projelerinizde ustalıkla kullanmak için ihtiyacınız olan her şeyi bulacaksınız. Kaliteweb gibi hosting sağlayıcılarıyla PHP uygulamalarınızı barındırarak, hızlı ve güvenli web siteleri oluşturabilirsiniz. Hazırsanız, PHP’nin büyülü dünyasına dalalım! PHP’nin Tarihi ve Evrimi: Bir Dilin Dönüşümü PHP’nin yolculuğu, 1994’te Rasmus Lerdorf’un kişisel web sayfalarını yönetmek için yazdığı bir araç setiyle başladı. O zamanlar C dilinde yazılmış basit bir script motoruydu. 1995’te PHP/FI (Forms Interpreter) olarak halka açıldı ve veritabanı entegrasyonu eklendi. 1998’de PHP 3 ile büyük bir sıçrama yaptı; Zend Engine’in temelleri atıldı. 2000’de PHP 4, nesne yönelimli programlamayı (OOP) getirdi. 2004’teki PHP 5, tam OOP desteği ve PDO (PHP Data Objects) ile modernleşti. 2015’te PHP 7, performansını %100 artırdı ve tip bildirimleri ekledi. 2020’de PHP 8, JIT derleyici ve attributes ile hızlandı. 2025’te PHP 8.4, fiber’lar (hafif eşzamanlılık) ve gelişmiş hata yönetimiyle evrildi. PHP’nin evrimi, web teknolojilerinin değişimine paralel ilerledi. Başlangıçta statik sayfalar için kullanılırken, bugün dinamik API’ler, CMS’ler ve mikro hizmetler için vazgeçilmez. Örnek: WordPress’in %80’i PHP ile yazıldı, milyonlarca siteyi güçlendiriyor. Datatelekom’un yüksek performanslı sunucularında, PHP 8.4 sürümüyle uygulamalar %30 daha hızlı çalışıyor. Sunucu Tarafı Scripting: PHP’nin Gücü PHP, sunucu tarafı scripting dillerinin kralıdır. Tarayıcı isteklerini sunucuda işler ve HTML/CSS/JS olarak yanıt verir. Bu, dinamik içerik üretmeyi sağlar – örneğin, kullanıcı girişine göre sayfa kişiselleştirme. Sunucu tarafı scripting’in avantajları: - Dinamik İçerik: Kullanıcı verilerine göre sayfalar oluşturun. - Güvenlik: Veritabanı şifreleri sunucuda kalır, istemciye gitmez. - Performans: Sunucu kaynaklarını verimli kullanır. Örnek Kod: Basit bir dinamik sayfa: <?php $greeting = 'Merhaba, Dünya!'; echo "<h1>$greeting</h1>"; ?> Bu kod, sunucuda işlenir ve HTML olarak gönderilir. Örnek: Bir blog, PHP ile veritabanından makaleleri çeker ve dinamik listeler. Değişkenler, Fonksiyonlar ve Nesneler: PHP’nin Temelleri PHP’de değişkenler, veri saklama için kullanılır. Tip bildirimi isteğe bağlıdır (dinamik tip sistemi). Değişkenler: $name = 'Ali'; // String $age = 30; // Integer $price = 99.99; // Float $isAdmin = true; // Boolean $colors = ['kırmızı', 'mavi']; // Array Fonksiyonlar: function add($a, $b) { return $a + $b; } echo add(5, 3); // 8 Gelişmiş: Tip bildirimi: function add(int $a, int $b): int { return $a + $b; } Nesneler (OOP): class User { public $name; private $age; public function __construct(string $name, int $age) { $this->name = $name; $this->age = $age; } public function getAge(): int { return $this->age; } } $user = new User('Ali', 30); echo $user->name; // Ali echo $user->getAge(); // 30 Örnek: Bir e-ticaret sitesi, OOP ile ürün nesneleri yönetir, değişkenlerle stok tutar. Fonksiyonlarla fiyat hesaplar. Veritabanı Entegrasyonu: MySQL ve PDO PHP, veritabanlarıyla kusursuz entegre olur. MySQL, en yaygın seçim; PDO, güvenli bağlantı sağlar. MySQL Bağlantısı: $conn = mysqli_connect('localhost', 'user', 'password', 'database'); if (!$conn) { die('Bağlantı hatası: ' . mysqli_connect_error()); } Sorgu: $sql = "SELECT * FROM users"; $result = mysqli_query($conn, $sql); while ($row = mysqli_fetch_assoc($result)) { echo $row['name'] . '<br>'; } mysqli_close($conn); PDO ile Güvenli Entegrasyon: try { $pdo = new PDO('mysql:host=localhost;dbname=database', 'user', 'password'); $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); } catch (PDOException $e) { die('Bağlantı hatası: ' . $e->getMessage()); } $stmt = $pdo->prepare('SELECT * FROM users WHERE id = :id'); $stmt->execute(['id' => 1]); $row = $stmt->fetch(PDO::FETCH_ASSOC); echo $row['name']; Örnek: Bir CMS, PDO ile kullanıcı girişini güvenli işler, SQL injection’ı önler. Framework’ler: Laravel ve Symfony PHP framework’leri, geliştirme sürecini hızlandırır. Laravel ve Symfony, 2025’te en popülerler. Laravel: - MVC mimarisi, Eloquent ORM, Artisan CLI. - Örnek: Route tanımlama: Route::get('/hello', function () { return 'Merhaba Laravel!'; }); - Avantaj: Hızlı geliştirme, Blade templating. Symfony: - Bileşen tabanlı, esnek. - Örnek: Controller: class HelloController extends AbstractController { #[Route('/hello', name: 'hello')] public function index(): Response { return $this->render('hello/index.html.twig', ['name' => 'Symfony']); } } - Avantaj: Yüksek ölçeklenebilirlik, Twig templating. Örnek: Bir API, Laravel ile geliştirildi, %40 daha hızlı prototipleme sağladı. Güvenlik Pratikleri: PHP Uygulamalarınızı Koruyun PHP’de güvenlik, kritik. 2025 pratikleri: - SQL Injection Önleme: PDO veya prepared statements kullanın. - XSS Koruma: htmlspecialchars() ile kullanıcı girdilerini filtreleyin: echo htmlspecialchars($userInput, ENT_QUOTES); - CSRF Koruma: Token’lar ekleyin: session_start(); $csrfToken = bin2hex(random_bytes(32)); $_SESSION['csrf_token'] = $csrfToken; Formda: <input type="hidden" name="csrf_token" value="<?php echo $csrfToken; ?>"> - Şifreleme: Argon2 ile şifre hash’leyin: $hash = password_hash($password, PASSWORD_ARGON2ID); - Dosya Yükleme Güvenliği: MIME tipi kontrolü: if ($_FILES['file']['type'] == 'image/jpeg') { // Yükle } - HTTPS Zorlama: .htaccess ile: RewriteEngine On RewriteCond %{HTTPS} off RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301] Örnek: Bir form, CSRF token’ıyla güvenlendi, brute force saldırıları %90 azaldı. Performans Optimizasyonu: PHP’yi Hızlandırın PHP performansı, optimizasyonla %50 artırılabilir. 2025 teknikleri: - Opcode Caching: OPcache etkinleştirin: opcache.enable=1 opcache.memory_consumption=128 - Sorgu Optimizasyonu: Index ekleyin: CREATE INDEX idx_name ON users(name); - Caching: Redis ile: $redis = new Redis(); $redis->connect('127.0.0.1', 6379); $value = $redis->get('key'); if ($value === false) { $value = fetchData(); // Veriyi getir $redis->set('key', $value, 3600); // 1 saat cache’le } - Asenkron İşlemler: Swoole ile: $http = new Swoole\Http\Server('0.0.0.0', 9501); $http->on('request', function ($request, $response) { $response->end('Merhaba Swoole!'); }); $http->start(); - Profiling: Xdebug ile performansı analiz edin: xdebug.mode=profile xdebug.output_dir=/tmp Örnek: Bir API, OPcache ile yanıt süresini %40 azalttı. WordPress Gibi CMS’lerde PHP Kullanımı PHP, CMS’lerin belkemiğidir. WordPress, %43 pazar payıyla PHP tabanlıdır. Özellikler: - Tema ve Eklenti Geliştirme: functions.php ile custom fonksiyonlar: function my_custom_function() { echo 'Merhaba WordPress!'; } add_action('wp_footer', 'my_custom_function'); - Veritabanı İşlemleri: $wpdb ile: global $wpdb; $results = $wpdb->get_results('SELECT * FROM wp_posts'); foreach ($results as $row) { echo $row->post_title; } - Güvenlik: wp_nonce ile CSRF koruma: wp_nonce_field('my_action', 'my_nonce'); if (wp_verify_nonce($_POST['my_nonce'], 'my_action')) { // İşle } - Performans: Caching eklentileri (WP Super Cache) ile PHP hızlandırın. Örnek: Bir WordPress eklentisi, PHP ile kullanıcı rollerini yönetti, site performansını %25 artırdı. Adım Adım Tutorial: Basit Bir PHP Blog Uygulaması Bir blog uygulaması yapalım: Adım 1: Sunucu Hazırlığı - Apache/Nginx ve PHP 8.4 kurun. - MySQL veritabanı oluşturun: blog_db. Adım 2: Veritabanı Bağlantısı config.php: <?php $host = 'localhost'; $user = 'root'; $pass = ''; $db = 'blog_db'; $conn = new mysqli($host, $user, $pass, $db); if ($conn->connect_error) { die('Bağlantı hatası'); } ?> Adım 3: Tablo Oluşturma SQL ile: CREATE TABLE posts ( id INT AUTO_INCREMENT PRIMARY KEY, title VARCHAR(255), content TEXT, created_at DATETIME DEFAULT CURRENT_TIMESTAMP ); Adım 4: Yazı Ekleme Formu add_post.php: <?php include 'config.php'; ?> <!DOCTYPE html> <html> <body> <form method="post"> Başlık: <input type="text" name="title"><br> İçerik: <textarea name="content"></textarea><br> <input type="submit" name="submit" value="Ekle"> </form> <?php if (isset($_POST['submit'])) { $title = mysqli_real_escape_string($conn, $_POST['title']); $content = mysqli_real_escape_string($conn, $_POST['content']); $sql = "INSERT INTO posts (title, content) VALUES ('$title', '$content')"; if ($conn->query($sql) === TRUE) { echo 'Yazı eklendi'; } else { echo 'Hata: ' . $conn->error; } } $conn->close(); ?> </body> </html> Adım 5: Yazıları Listeleme list_posts.php: <?php include 'config.php'; ?> <?php $sql = 'SELECT * FROM posts ORDER BY created_at DESC'; $result = $conn->query($sql); if ($result->num_rows > 0) { while ($row = $result->fetch_assoc()) { echo '<h2>' . htmlspecialchars($row['title']) . '</h2>'; echo '<p>' . nl2br(htmlspecialchars($row['content'])) . '</p>'; echo '<hr>'; } } else { echo 'Yazı yok'; } $conn->close(); ?> Adım 6: Test Etme - Sunucuda çalıştırın, yazı ekleyin ve listeleyin. Süre: 1 saat. Güvenlik ekleyin: Escape fonksiyonları ile injection önleyin. Sonuç: PHP ile Web’in Geleceğini Kodlayın PHP, web geliştirmenin temel taşı. Tarihi, scripting gücü, veritabanı entegrasyonu ve framework’leriyle, 2025’in vazgeçilmezi. Bu rehberle, PHP’yi öğrenip projelerinizi hayata geçirin.

Son güncelleme tarihi Nov 21, 2025

Framework Nedir?

Dijital çağın vazgeçilmez unsurlarından biri olan framework’ler, yazılım geliştirme sürecini kökten değiştiren araçlardır. Geliştiricilerin tekrar eden görevleri otomatikleştirmesini, kod kalitesini artırmasını ve projeleri hızlıca tamamlamasını sağlar. 2025’te, framework’ler web ve mobil uygulama geliştirmenin temel taşları haline geldi, yapay zeka entegrasyonları ve bulut odaklı özelliklerle evrildi. Bu rehberde, framework’lerin ne olduğunu, türlerini (web ve app), popüler örneklerini (React, Django, Ruby on Rails), avantajlarını ve dezavantajlarını, seçim kriterlerini, kurulum rehberlerini, gerçek proje örneklerini ve gelecek trendlerini derinlemesine inceleyeceğiz. Kod snippet’leri ve pratik bilgilerle, framework’leri projelerinizde ustalıkla kullanmak için ihtiyacınız olan her şeyi bulacaksınız. Kaliteweb gibi bir hosting sağlayıcısıyla framework tabanlı uygulamalarınızı barındırarak, yüksek performanslı web siteleri oluşturabilirsiniz. Hazırsanız, framework’lerin dünyasına dalalım! Framework Nedir? Tanım ve Temel Kavramlar Framework, yazılım geliştirme sürecinde tekrar eden görevleri basitleştirmek ve standartlaştırmak için tasarlanmış bir kod kütüphanesi veya araç setidir. Geliştiricilere hazır şablonlar, kütüphaneler ve en iyi pratikler sunarak, sıfırdan kod yazma ihtiyacını azaltır. 2025’te, framework’ler AI entegrasyonu ve otomatik test özellikleriyle daha akıllı hale geldi. Temel kavramlar: - Inversion of Control (IoC): Framework, kod akışını kontrol eder, geliştirici iş mantığına odaklanır. - Modülerlik: Bileşenler bağımsız çalışır, ölçeklenebilirlik sağlar. - Konvansiyon Üzerine Konfigürasyon: Varsayılan ayarlar, manuel yapılandırmayı minimize eder. Örnek: Bir web uygulaması, framework olmadan yüzlerce satır kod gerektirirken, bir framework ile bu süre %60 kısalır. Datatelekom’un yüksek hızlı sunucularında, framework tabanlı projeler %30 daha verimli çalışır. Framework Türleri: Web ve Uygulama Framework’leri Framework’ler, kullanım alanına göre ikiye ayrılır: Web framework’leri ve app (mobil/yerel) framework’leri. 2025’te, web framework’leri bulut entegrasyonuyla, app framework’leri cross-platform özellikleriyle öne çıkıyor. Web Framework’leri Web framework’leri, HTTP isteklerini yönetir, veritabanı etkileşimini kolaylaştırır ve UI/UX’i standartlaştırır. Örnekler: - Django (Python): Yüksek seviyeli, ORM ve admin paneli ile tam donanımlı. Güvenlik odaklı. - Ruby on Rails (Ruby): Konvansiyon üzerine kurulu, hızlı geliştirme için ideal. - Laravel (PHP): Eloquent ORM ve Blade templating ile modern web uygulamaları. App Framework’leri Mobil ve yerel uygulamalar için: React Native (cross-platform), Flutter (Dart tabanlı) ve SwiftUI (iOS). - React: Bileşen tabanlı UI için, web ve mobilde kullanılır. Örnek: Bir e-ticaret platformu, Laravel ile backend, React ile frontend geliştirdi, geliştirme süresini %40 azalttı. Popüler Framework Örnekleri: React, Django, Ruby on Rails 2025’te popüler framework’ler: - React: Facebook’un geliştirdiği, bileşen tabanlı JS kütüphanesi. Virtual DOM ile hızlı render. Örnek Kod: import React from 'react'; function HelloWorld() { return <h1>Merhaba Dünya!</h1>; } export default HelloWorld; - Django: Python tabanlı, batteries-included. Admin paneli ve ORM ile tam özellikli. Örnek: from django.http import HttpResponse def home(request): return HttpResponse("Merhaba Django!") - Ruby on Rails: Ruby tabanlı, MVC mimarisi. Hızlı prototipleme için. Örnek: class HomeController < ApplicationController def index render plain: "Merhaba Rails!" end end Örnek: Bir sosyal medya uygulaması, React ile frontend, Django ile backend kullandı, kullanıcı etkileşimini %50 artırdı. Avantajlar ve Dezavantajlar: Framework Kullanmanın Dengesi Avantajlar: - Hızlı Geliştirme: Hazır bileşenler, zamanı %50 kısaltır. - Standartlaşma: En iyi pratikler, kod kalitesini artırır. - Topluluk Desteği: Binlerce paket ve forumlar. - Ölçeklenebilirlik: Modüler yapı, büyüme için ideal. Dezavantajlar: - Öğrenme Eğrisi: Karmaşık framework’ler zaman alır. - Şişkinlik (Bloat): Gereksiz özellikler, performansı etkileyebilir. - Bağımlılık: Güncellemeler uyum sorunları yaratabilir. - Özelleştirme Sınırlamaları: Katı yapılar, esnekliği kısıtlayabilir. Örnek: Bir start-up, Rails ile MVP’sini 2 haftada yayınladı ama ölçeklemede şişkinlik yaşadı. Seçim Kriterleri: Doğru Framework’ü Bulun Framework seçerken kriterler: - Proje Tipi: Web için Django, mobil için Flutter. - Dil Tercihi: Python seviyorsanız Django, JS seviyorsanız React. - Performans İhtiyacı: Yüksek trafik için Laravel. - Topluluk ve Destek: Aktif forumlar ve paketler. - Öğrenme Kolaylığı: Yeni başlayanlar için Rails. - Maliyet: Açık kaynak ücretsiz; enterprise özellikler ücretli. Örnek: Bir fintech, güvenlik odaklı Django’yu seçti, uyum sorunlarını %30 azalttı. Kurulum Rehberleri: Adım Adım React Kurulum 1. Node.js indirin (node.js.org). 2. Proje oluşturun: npx create-react-app my-app cd my-app npm start 1. Tarayıcıda localhost:3000’ü açın. Django Kurulum 1. Python 3.12 kurun. 2. Sanal ortam: python -m venv myenv source myenv/bin/activate 1. Django yükleyin: pip install django 1. Proje başlatın: django-admin startproject mysite cd mysite python manage.py runserver Ruby on Rails Kurulum 1. Ruby yükleyin (rubyinstaller.org). 2. Rails yükleyin: gem install rails 1. Proje oluşturun: rails new myapp cd myapp rails server Örnek: Bir geliştirici, Django ile bir blogu 1 saatte prototipleştirdi. Gerçek Proje Örnekleri: Framework’lerin Uygulamaları - React: Bir sosyal medya platformu, React ile dinamik feed oluşturdu, kullanıcı etkileşimini %40 artırdı. - Django: Bir e-ticaret sitesi, Django’nun ORM’siyle veritabanı yönetimini kolaylaştırdı, sorgu hızını %30 iyileştirdi. - Ruby on Rails: Bir start-up, Rails ile MVP’sini hızlı yayınladı, yatırımcı çekti. Örnek: Bir haber sitesi, React ve Django backend ile entegre çalıştı, trafiği %50 artırdı. Gelecek Trendleri: 2025 ve Ötesi 2025’te, framework’ler AI entegrasyonu ve bulut odaklı olacak. React 19, AI komponentleri ekledi; Django 5, asenkron ORM getirdi. Gelecekte, low-code framework’ler (Bubble) yaygınlaşacak, geliştirme süresini %60 kısaltacak. Edge computing entegrasyonu, Rails gibi framework’leri hızlandıracak. Örnek: Bir fintech, AI tabanlı bir framework ile kişiselleştirilmiş finans uygulaması geliştirdi, kullanıcı memnuniyetini %35 artırdı.

Son güncelleme tarihi Sep 23, 2025

CSS Nedir?

Cascading Style Sheets, yani CSS, web sayfalarının görsel tasarımını ve düzenini şekillendiren bir teknolojidir. HTML ile oluşturulan içeriklerin nasıl görüneceğini belirler; renkler, yazı tipleri, yerleşim düzeni ve animasyonlar gibi unsurları kontrol eder. Modern web geliştirmede vazgeçilmez bir rol oynar ve kullanıcı deneyimini doğrudan etkiler. Statik bir HTML sayfasını dinamik, estetik ve kullanıcı dostu bir hale getirir. Örneğin, bir butonun rengini değiştirmek, bir div’in boyutunu ayarlamak veya karmaşık bir düzeni oluşturmak CSS ile mümkündür. CSS’in Temel Yapısı ve Çalışma Mantığı CSS, basit bir sözdizimine sahiptir. Bir CSS kuralı, bir selektör ve bu selektöre uygulanan özelliklerden oluşur. Selektör, hangi HTML elemanının stilize edileceğini belirtir; özellikler ise bu elemanın nasıl görüneceğini tanımlar. Örneğin: h1 { color: blue; font-size: 24px; } Bu kod, tüm <h1> etiketlerinin mavi renkte ve 24 piksel büyüklüğünde olmasını sağlar. CSS’in “cascading” (basamaklı) yapısı, stillerin öncelik sırasına göre uygulanmasını ifade eder. Örneğin, aynı elemana birden fazla stil uygulanırsa, en spesifik olanı veya en son tanımlanan kural geçerli olur. CSS, üç şekilde uygulanabilir: 1. Dahili (Internal): <style> etiketiyle HTML dosyasının <head> kısmına yazılır. 2. Harici (External): Ayrı bir .css dosyasına yazılır ve HTML’e bağlanır. 3. Satır İçi (Inline): HTML etiketine style özelliğiyle doğrudan uygulanır, ancak bu yöntem genelde önerilmez. Harici CSS kullanımı, kodun düzenli ve yeniden kullanılabilir olmasını sağlar. Örneğin, Kaliteweb’in sunduğu hosting hizmetleriyle barındırılan bir web sitesinde, harici CSS dosyaları hızlı yükleme süreleriyle kullanıcı deneyimini iyileştirir. Selektörler: CSS’in Hedefleme Mekanizması Selektörler, CSS’in hangi HTML elemanlarına uygulanacağını belirler. En yaygın selektör türleri şunlardır: - Element Selektörleri: p, div, h1 gibi HTML etiketlerini hedefler. - Sınıf Selektörleri: .sinif-adi ile başlar ve birden fazla elemana uygulanabilir. - ID Selektörleri: #id-adi ile benzersiz bir elemanı hedefler. - Öznitelik Selektörleri: [type="text"] gibi belirli özniteliklere sahip elemanları seçer. - Pseudo-Selektörler: :hover, :active gibi durumlara bağlı stiller uygular. Örnek bir sınıf selektörü: .button { background-color: #4CAF50; padding: 10px 20px; border-radius: 5px; } Bu kod, class="button" olan tüm elemanlara yeşil bir arka plan, dolgu ve yuvarlatılmış köşeler ekler. Pseudo-selektör örneği: .button:hover { background-color: #45a049; } Bu, fare imleci butonun üzerine geldiğinde arka plan rengini değiştirir. Özellikler: Görselliği Şekillendiren Araçlar CSS, yüzlerce özellik sunar. En sık kullanılanlar: - Renk ve Arka Plan: color, background-color, background-image - Yazı Tipi: font-family, font-size, font-weight - Kutu Modeli: margin, padding, border, width, height - Konumlandırma: position, top, left, z-index Örneğin, bir kutu modeli uygulaması: .box { width: 200px; height: 100px; margin: 10px; padding: 15px; border: 2px solid black; } Bu kod, bir div’e boyut, kenar boşluğu, dolgu ve çerçeve ekler. Kutu modeli, CSS’in temel taşlarından biridir ve elemanların yerleşimini anlamak için kritik öneme sahiptir. Responsive Design: Media Queries ile Esneklik Responsive design, web sitelerinin farklı cihazlarda (mobil, tablet, masaüstü) düzgün görünmesini sağlar. CSS’te bu, media queries ile yapılır. Media query, belirli bir ekran boyutu veya cihaz özelliği için stil kuralları tanımlar. Örneğin: @media screen and (max-width: 600px) { .container { flex-direction: column; } } Bu kod, ekran genişliği 600 pikselden küçükse .container sınıfının düzenini sütun tabanlı yapar. Responsive tasarımda dikkat edilmesi gerekenler: - Mobil Öncelikli Yaklaşım: Önce küçük ekranlar için tasarım yap, sonra büyük ekranlara genişlet. - Birim Seçimi: vw, vh, rem, em gibi relatif birimler kullan. - Esnek Görseller: max-width: 100% ile görsellerin taşmasını önle. Örnek bir responsive navigation bar: .nav { display: flex; gap: 20px; } @media screen and (max-width: 768px) { .nav { flex-direction: column; align-items: center; } } Bu, masaüstü için yatay bir menüyü mobil cihazlarda dikey hale getirir. CSS Preprocessors: Sass ve Less Sass ve Less, CSS’in daha güçlü ve düzenli yazılmasını sağlayan ön işlemcilerdir. Değişkenler, iç içe yazım, modüller ve matematiksel işlemler gibi özellikler sunar. Örneğin, Sass’ta değişken kullanımı: $primary-color: #3498db; .button { background-color: $primary-color; &:hover { background-color: darken($primary-color, 10%); } } Bu kod, birincil rengi bir değişkene atar ve hover durumunda rengi koyulaştırır. Less ise benzer bir yapı sunar: @primary-color: #3498db; .button { background-color: @primary-color; &:hover { background-color: darken(@primary-color, 10%); } } Preprocessor’lar, özellikle büyük projelerde kodu düzenli tutar ve bakımını kolaylaştırır. Datatelekom’un veri merkezlerinde barındırılan projelerde, bu tür araçlar geliştirme sürecini hızlandırır. Animasyonlar: Web’e Hareket Katın CSS animasyonları, kullanıcı deneyimini zenginleştirir. transition ve @keyframes ile dinamik efektler oluşturulabilir. Örneğin, bir butonun geçiş efekti: .button { background-color: #4CAF50; transition: background-color 0.3s ease; } .button:hover { background-color: #45a049; } Bu, arka plan renginin 0.3 saniyede yumuşak bir şekilde değişmesini sağlar. Daha karmaşık bir animasyon için @keyframes kullanılır: @keyframes slideIn { from { transform: translateX(-100%); } to { transform: translateX(0); } } .element { animation: slideIn 1s ease-in-out; } Bu kod, bir elemanın soldan kayarak gelmesini sağlar. Animasyonlar, kullanıcıların dikkatini çeker ve sitenin modern görünmesini sağlar. Flexbox ve Grid: Modern Düzen Araçları Flexbox, tek boyutlu düzenler için idealdir (satır veya sütun). Örneğin: .container { display: flex; justify-content: space-between; align-items: center; } Bu, elemanları yatayda eşit aralıklarla hizalar. Grid ise iki boyutlu düzenler için kullanılır: .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } Bu, üç eşit sütunlu bir ızgara oluşturur. Flexbox ve Grid, responsive tasarımda güçlü araçlardır ve karmaşık düzenleri kolaylaştırır. Erişilebilirlik: Herkes İçin Web CSS, erişilebilirlik (accessibility) açısından kritik bir rol oynar. Örneğin: - Kontrast Oranları: Renkler, WCAG standartlarına uygun olmalıdır. color-contrast() gibi yeni özellikler bu konuda yardımcı olur. - Odak Stilleri: Klavye navigasyonu için :focus kullanılmalı. a:focus { outline: 2px solid blue; } - Semantik HTML ile CSS: Doğru HTML etiketleriyle CSS kullanımı, ekran okuyucuların içeriği anlamasını sağlar. Erişilebilirlik, kullanıcıların engel durumlarına bakılmaksızın web sitenize erişebilmesini sağlar. Örneğin, renk körlüğü olan kullanıcılar için yüksek kontrastlı renkler seçmek önemlidir. 2025 CSS Trendleri CSS sürekli evrilir ve 2025’te öne çıkan trendler şunlardır: - Container Queries: Ekran boyutuna değil, kapsayıcı boyutuna göre stil uygulama. .container { container-type: inline-size; } @container (min-width: 400px) { .child { flex-direction: row; } } - Subgrid: Grid düzenlerinde alt ızgaralar için daha fazla kontrol. - CSS Nesting: Doğrudan iç içe CSS yazımı. .card { background-color: white; & .title { font-weight: bold; } } - Color Functions: color-mix() ve color-contrast() gibi yeni renk fonksiyonları. - Scroll-Driven Animations: Kaydırma hareketine bağlı animasyonlar. Bu trendler, web geliştirmeyi daha esnek ve güçlü hale getiriyor. Kaliteweb’in sunduğu hosting hizmetleri, bu yeni teknolojileri destekleyen hızlı ve güvenli altyapılar sunar. Adım Adım CSS ile Proje Geliştirme 1. HTML Yapısını Oluşturun: Semantik etiketler kullanın (<header>, <main>, <footer>). 2. CSS Dosyası Bağlayın: <link rel="stylesheet" href="styles.css"> 1. Temel Stilleri Tanımlayın: * { margin: 0; padding: 0; box-sizing: border-box; } 1. Responsive Tasarımı Planlayın: Media queries ile farklı ekran boyutlarına uyum sağlayın. 2. Erişilebilirliği Sağlayın: Kontrast oranlarını kontrol edin ve odak stilleri ekleyin. 3. Animasyonlar Ekleyin: Kullanıcı deneyimini artırmak için geçiş efektleri veya keyframes kullanın. 4. Test Edin: Farklı cihazlarda ve tarayıcılarda test yapın. Sonuç CSS, web geliştirmenin temel taşlarından biridir. Selektörler, özellikler, responsive tasarım, preprocessor’lar, animasyonlar, Flexbox/Grid ve erişilebilirlik gibi unsurlar, modern web sitelerinin oluşturulmasında kritik rol oynar. 2025 trendleriyle birlikte CSS, daha da güçlü ve esnek bir araç haline gelmiştir.

Son güncelleme tarihi Nov 21, 2025

JavaScript Nedir?

JavaScript, modern web geliştirmenin temel taşlarından biridir ve dinamik, interaktif web uygulamaları oluşturmak için kullanılan güçlü bir programlama dilidir. İlk olarak 1995 yılında Netscape tarafından geliştirilen bu dil, bugün hem istemci tarafında (tarayıcılar) hem de sunucu tarafında (Node.js gibi) yaygın bir şekilde kullanılmaktadır. Bu yazıda, JavaScript'in tarihçesinden başlayarak temel syntax'ına, DOM manipülasyonuna, asenkron programlamaya, popüler framework entegrasyonlarına, güvenlik ipuçlarına ve performans optimizasyon tekniklerine kadar her yönüyle derinlemesine inceleyeceğiz. Ayrıca, uygulamalı örnekler ve bir tutorial ile konuları pekiştireceksiniz. JavaScript'in Tarihçesi JavaScript, Brendan Eich tarafından Netscape Navigator tarayıcısında dinamik içerik oluşturmak amacıyla geliştirildi. İlk adı Mocha olan dil, daha sonra LiveScript ve nihayetinde JavaScript adını aldı. 1996 yılında ECMA International tarafından standartlaştırıldı ve ECMAScript olarak adlandırıldı. Günümüzde ECMAScript, dilin standartlarını belirler ve her yıl yeni özellikler eklenir (örneğin, ES6/ES2015 ile let/const, arrow functions gibi yenilikler). JavaScript, tarayıcıların ötesine geçerek Node.js ile sunucu tarafında da kullanılmaya başlandı ve React, Vue gibi framework'lerle front-end geliştirmede devrim yarattı. JavaScript'in Temel Syntax'ı JavaScript, öğrenmesi kolay ancak güçlü bir syntax'a sahiptir. Değişken tanımlama, fonksiyonlar, döngüler ve koşullu ifadeler gibi temel yapılar, diğer C-tabanlı dillerle benzerlik gösterir. İşte temel bir örnek: // Değişken tanımlama let isim = 'Ahmet'; const PI = 3.14; // Fonksiyon tanımlama function selamVer(kisi) { return `Merhaba, ${kisi}!`; } // Koşullu ifade if (isim === 'Ahmet') { console.log(selamVer(isim)); } else { console.log('Tanıdık bir isim değil!'); } // Döngü for (let i = 0; i < 3; i++) { console.log(`Sayı: ${i}`); } Değişkenler var, let ve const ile tanımlanır. let ve const, ES6 ile tanıtıldı ve kapsam (scope) yönetimini iyileştirdi. const ile tanımlanan değişkenler yeniden atanamaz, ancak içindeki nesnelerin özellikleri değiştirilebilir. Örneğin: const kisi = { ad: 'Ayşe', yas: 25 }; kisi.yas = 26; // Geçerli kisi = {}; // Hata: const değişken yeniden atanamaz DOM Manipülasyonu Document Object Model (DOM), web sayfalarının programatik olarak kontrol edilmesini sağlar. JavaScript, DOM ile HTML elementlerini seçip düzenler. Örneğin, bir butona tıklama olayını dinlemek ve içeriği değiştirmek: // Element seçme document.getElementById('myButton').addEventListener('click', () => { document.getElementById('myDiv').innerHTML = 'Tıklandı!'; }); DOM manipülasyonu, dinamik içerik oluşturmak için güçlü bir araçtır. Örneğin, bir liste oluşturup silme işlevi: function ekleOgeler() { const ul = document.createElement('ul'); ['Elma', 'Armut', 'Muz'].forEach(oge => { const li = document.createElement('li'); li.textContent = oge; ul.appendChild(li); }); document.body.appendChild(ul); } Bu kod, bir liste oluşturur ve sayfaya ekler. DOM manipülasyonunda performans için DocumentFragment kullanımı önerilir, çünkü birden fazla DOM işlemi tek bir toplu işlemde yapılır. Asenkron Programlama: Promises ve Async/Await JavaScript, asenkron işlemleri yönetmek için önce geri çağrılar (callbacks), ardından Promises ve son olarak async/await ile güçlü mekanizmalar geliştirdi. Promises, asenkron işlemlerin sonucunu temsil eder. Örneğin, bir API'den veri çekme: fetch('https://api.example.com/veri') .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error('Hata:', error)); Async/await, Promises'ı daha okunabilir hale getirir: async function veriCek() { try { const response = await fetch('https://api.kaliteweb.com/veri'); const data = await response.json(); console.log(data); } catch (error) { console.error('Hata:', error); } } veriCek(); Async/await, özellikle birden fazla asenkron işlemi sırayla veya paralel olarak yönetmek için idealdir. Örneğin, paralel veri çekme: async function paralelVeriCek() { const [veri1, veri2] = await Promise.all([ fetch('https://api.kaliteweb.com/veri1').then(res => res.json()), fetch('https://api.kaliteweb.com/veri2').then(res => res.json()) ]); console.log(veri1, veri2); } Framework Entegrasyonları: Node.js ve React JavaScript, hem sunucu hem de istemci tarafında kullanılabilen çok yönlü bir dildir. Node.js, JavaScript'i sunucu tarafında çalıştırmak için V8 motorunu kullanır. Örneğin, basit bir HTTP sunucusu: const http = require('http'); const server = http.createServer((req, res) => { res.statusCode = 200; res.setHeader('Content-Type', 'text/plain'); res.end('Merhaba, Dünya!'); }); server.listen(3000, () => { console.log('Sunucu 3000 portunda çalışıyor'); }); Bu kod, Kaliteweb gibi bir hosting sağlayıcısında barındırılan bir sunucuda çalıştırılabilir ve Datatelekom veri merkezinde güvenli bir şekilde hizmet verebilir. Node.js, Express gibi framework'lerle API geliştirme için idealdir. React ise istemci tarafında kullanıcı arayüzleri oluşturmak için popüler bir kütüphanedir. JSX ile bileşen tabanlı geliştirme sağlar. Örneğin, bir sayaç bileşeni: import React, { useState } from 'react'; function Sayac() { const [sayi, setSayi] = useState(0); return ( <div> <p>Sayı: {sayi}</p> <button onClick={() => setSayi(sayi + 1)}>Arttır</button> </div> ); } export default Sayac; React, performans için sanal DOM kullanır ve bileşenlerin yeniden render edilmesini optimize eder. Node.js ve React birlikte, full-stack uygulamalar geliştirmek için güçlü bir kombinasyon oluşturur. JavaScript Güvenlik İpuçları JavaScript'in gücü, güvenlik açıklarını da beraberinde getirir. İşte bazı güvenlik ipuçları: 1. XSS (Cross-Site Scripting) Önleme: Kullanıcı girişlerini sanitize edin. Örneğin, DOMPurify kütüphanesi kullanabilirsiniz. import DOMPurify from 'dompurify'; const kirli = '<script>alert("XSS Saldırısı!")</script>'; const temiz = DOMPurify.sanitize(kirli); document.getElementById('hedef').innerHTML = temiz; 1. CSRF Koruması: Sunucu tarafında CSRF token'ları kullanın. 2. Güvenli API İstekleri: HTTPS kullanın ve API anahtarlarını gizli tutun. 3. Korsan Yazılımlara Karşı Koruma: Güvenilir CDN'ler kullanın ve bağımlılıkları düzenli olarak kontrol edin. Performans Optimizasyonu JavaScript performansını artırmak için şu teknikleri kullanabilirsiniz: 1. Debouncing ve Throttling: Hızlı tekrarlanan olayları sınırlamak için: function debounce(func, wait) { let timeout; return function executedFunction(...args) { const later = () => { clearTimeout(timeout); func(...args); }; clearTimeout(timeout); timeout = setTimeout(later, wait); }; } window.addEventListener('resize', debounce(() => console.log('Yeniden boyutlandırıldı'), 200)); 1. Lazy Loading: Görselleri ve modülleri yalnızca gerektiğinde yükleyin. const modül = await import('./modül.js'); // Dinamik import 1. Memoization: Tekrarlanan hesaplamaları önbelleğe alın: function memoize(fn) { const cache = {}; return function (...args) { const key = JSON.stringify(args); if (cache[key]) return cache[key]; const result = fn(...args); cache[key] = result; return result; }; } const agirHesaplama = memoize((x) => x * x); console.log(agirHesaplama(5)); // Hesaplar console.log(agirHesaplama(5)); // Önbellekten alır 1. Web Workers: Yoğun işlemleri ana iş parçacığından ayırın: // worker.js const worker = new Worker('worker.js'); worker.postMessage(1000); worker.onmessage = (e) => console.log('Sonuç:', e.data); Uygulamalı Tutorial: Basit Bir To-Do Uygulaması Bu tutorial, yukarıdaki konuları birleştirerek bir to-do uygulaması oluşturmanızı sağlayacak. HTML, CSS ve JavaScript kullanarak başlayalım: <!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <title>To-Do Uygulaması</title> <style> .todo-item { margin: 10px 0; } .completed { text-decoration: line-through; } </style> </head> <body> <h1>To-Do Listesi</h1> <input type="text" id="gorevInput" placeholder="Yeni görev ekle"> <button onclick="gorevEkle()">Ekle</button> <ul id="gorevListesi"></ul> <script> async function gorevEkle() { const input = document.getElementById('gorevInput'); const gorev = input.value.trim(); if (!gorev) return; const li = document.createElement('li'); li.className = 'todo-item'; li.innerHTML = `${gorev} <button onclick="this.parentElement.remove()">Sil</button> <button onclick="this.parentElement.classList.toggle('completed')">Tamamla</button>`; document.getElementById('gorevListesi').appendChild(li); input.value = ''; // Örnek: API'ye veri gönderme try { await fetch('https://api.example.com/gorevler', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ gorev }) }); } catch (error) { console.error('API hatası:', error); } } </script> </body> </html> Bu uygulama, DOM manipülasyonu, olay dinleme ve asenkron veri gönderimi içerir. Kaliteweb hosting hizmetlerinde bu tür uygulamaları kolayca barındırabilir ve Datatelekom veri merkezinde güvenli bir şekilde çalıştırabilirsiniz. İleri Seviye Konular 1. Module Sistemi: ES Modules ile kodunuzu modüler hale getirin: // util.js export const topla = (a, b) => a + b; // main.js import { topla } from './util.js'; console.log(topla(2, 3)); // 5 1. Proxy ve Reflect: Nesne işlemlerini özelleştirin: const kisi = new Proxy({ ad: 'Ali' }, { get(target, prop) { return prop in target ? target[prop] : 'Bilinmiyor'; } }); console.log(kisi.ad); // Ali console.log(kisi.yas); // Bilinmiyor 1. WebAssembly Entegrasyonu: Performans kritik işlemler için WebAssembly kullanın: WebAssembly.instantiateStreaming(fetch('modul.wasm')).then(({ instance }) => { console.log(instance.exports.topla(5, 3)); // WebAssembly fonksiyonu }); Sonuç JavaScript, web geliştirmenin vazgeçilmez bir parçasıdır. Temel syntax'tan asenkron programlamaya, framework entegrasyonlarından güvenlik ve performansa kadar geniş bir yelpazede beceriler sunar. Bu rehber, hem yeni başlayanlar hem de ileri seviye geliştiriciler için kapsamlı bir kaynak olmayı amaçlamaktadır. Uygulamalı örnekler ve tutorial ile öğrendiklerinizi pekiştirebilir, kendi projelerinizi geliştirebilirsiniz.

Son güncelleme tarihi Nov 21, 2025

DNS Nedir? Kapsamlı Rehber ve Çalışma Prensibi

İnternet dünyasının temel taşlarından biri olan DNS, web sitelerine erişimimizi sağlayan gizli kahramandır. Peki, DNS nedir ve nasıl çalışır? Bu rehberde, DNS'nin ne olduğunu, işleyişini, bileşenlerini ve önemini detaylıca ele alacağız. Yeni başlayanlardan profesyonellere kadar herkes için anlaşılır bir şekilde hazırlanan bu içerik, anahtar kelime "DNS nedir" odaklı olarak SEO dostu bir rehber sunuyor. 2025 yılı trendlerine uygun ipuçlarıyla, DNS yönetimi hakkında bilmeniz gereken her şeyi öğreneceksiniz. İnternet erişiminizin arkasındaki sihri keşfetmeye hazır mısınız? DNS Nedir? Temel Tanım ve Tarihçesi DNS (Domain Name System), internet üzerindeki cihazların birbirini bulmasını sağlayan bir isimlendirme sistemidir. IP adreslerini (örneğin, 192.168.1.1) akılda kalıcı domain isimlerine (örneğin, orneksite.com) dönüştürür. Basitçe, telefon rehberi gibi çalışır: Domain adını girersiniz, DNS doğru IP'yi bulur ve bağlantıyı kurar. Neden DNS? İnternet ilk yıllarında sadece IP'lerle çalışıyordu, ancak milyonlarca site eklenince hatırlamak imkansızlaştı. 1983'te Paul Mockapetris tarafından geliştirilen DNS, 1985'te standart hale geldi. Bugün, milyarlarca sorguyu yöneten bir sistemdir. Örnek: "www.google.com" yazdığınızda, DNS bu adı 172.217.16.174 gibi bir IP'ye çevirir ve tarayıcınız siteye bağlanır. İstatistik: Günlük 3 trilyon DNS sorgusu yapılıyor (Verisign, 2025). DNS olmadan internet durur – %99 erişim kaybı. DNS Nasıl Çalışır? Adım Adım İşleyiş DNS, dağıtık bir veritabanı gibi çalışır. Sorgu süreci şu adımlardan oluşur: 1. Kullanıcı Sorgusu: Tarayıcıya domain adı girilir (örneğin, kaliteweb.com). 2. Yerel Cache Kontrolü: Cihazınızın DNS önbelleği kontrol edilir. Varsa IP döner. 3. Recursive Resolver: Yoksa, ISP'nizin DNS sunucusu (resolver) devreye girer. 4. Root Name Server: Resolver, root sunuculara (dünyada 13 tane) sorar. 5. TLD Name Server: Root, TLD (Top-Level Domain) sunucularına (.com, .tr) yönlendirir. 6. Authoritative Name Server: TLD, domainin yetkili sunucusuna (örneğin, hosting firmasının DNS'i) sorar. 7. IP Dönüşü: Yetkili sunucu IP'yi resolver'a, resolver tarayıcıya iletir. 8. Bağlantı Kurulumu: Tarayıcı IP ile siteye bağlanır. Süre: Tüm süreç 20-100 ms alır. Cache sayesinde daha hızlı. Teknik Detaylar: - DNS Protokolü: UDP/TCP port 53. - Kayıt Türleri: A (IPv4), AAAA (IPv6), MX (Mail), CNAME (Alias). - Cache TTL: Kayıtların ömrü, saniye cinsinden. Örnek: "mail.google.com" sorgusu MX kaydını döndürür ve e-posta sunucusuna bağlanır. DNS Bileşenleri: Sistem Nasıl Oluşur? DNS, hiyerarşik bir yapıdadır. Ana bileşenler: 1. DNS Resolver (Özyinelemeli Sunucu) Kullanıcı sorgularını yönetir. ISP veya Google DNS (8.8.8.8) gibi genel sunucular. Rolü: Sorguyu root'tan authoritative'e taşır. 2. Root Name Server İnternetin kök sunucuları (a.root-servers.net gibi). TLD'leri bilir. Sayısı: 13 mantıksal, 1000+ fiziksel kopya. 3. TLD Name Server (Üst Düzey Alan Adı Sunucuları) .com, .net, .tr gibi uzantıları yönetir. ICANN denetiminde. Örnek: .tr için NIC.TR sunucuları. 4. Authoritative Name Server Domainin kendi DNS sunucuları. Kayıtları (A, MX vb.) tutar. Örnek: ns1.kaliteweb.net gibi. 5. DNS Kayıtları (Records) - A Record: Domaini IPv4'e eşler. - AAAA Record: IPv6 için. - CNAME: Bir domaini diğerine yönlendirir. - MX Record: Mail sunucusu belirtir. - TXT Record: Doğrulama için (SPF, DKIM). İpucu: DNS yöneticisi panelinde (cPanel) kayıt ekleyin. DNS Türleri: Hangi DNS Sizin İçin Uygun? DNS sunucuları farklı türlerde gelir: 1. Yetkili DNS (Authoritative DNS) Domain kayıtlarını tutar. Sorgulara doğrudan cevap verir. Avantaj: Hızlı, özelleştirilebilir. 2. Özyinelemeli DNS (Recursive DNS) Kullanıcı adına sorgu yapar, tam cevabı getirir. Avantaj: Kullanıcı dostu, cache tutar. 3. Genel DNS (Public DNS) Google (8.8.8.8), Cloudflare (1.1.1.1) gibi ücretsiz hizmetler. Avantaj: Hızlı, güvenli, gizlilik odaklı (DNS-over-HTTPS). Dezavantaj: Kontrol sizde değil. 4. Özel DNS (Private DNS) Şirket içi ağlar için (örneğin, Active Directory). Avantaj: Güvenli, yerel erişim. 2025 Trendi: DNS-over-TLS (DoT) ve DoH, şifreli sorgular için standartlaşıyor. Seçim ipucu: Küçük siteler için hosting DNS'i, büyükler için Cloudflare. DNS'in Önemi: İnternet Güvenliği ve Performansı DNS, internetin omurgasıdır. İşte nedenleri: 1. Erişilebilirlik Domainleri IP'ye çevirerek sitelere ulaşımı sağlar. 2. Güvenlik DNSSEC (DNS Security Extensions) ile kayıtları imzalar, sahtekarlığı önler. Örnek: DNS hijacking'i engeller. 3. Performans Anycast DNS ile en yakın sunucuya bağlanır, hızı %20 artırır. 4. Yük Dengeleme Birden fazla IP'ye yönlendirerek trafiği dağıtır. 5. E-posta ve Diğer Hizmetler MX kayıtlarıyla mail, SRV ile VoIP yönetir. İstatistik: DNS saldırıları 2025'te %30 arttı, korumasız siteler %50 erişim kaybı yaşıyor (Cisco). DNS Sorunları ve Çözümleri Yaygın sorunlar: 1. DNS Çözümleme Hatası: Çözüm: Cache temizleyin (ipconfig /flushdns). 2. Yavaş DNS: Çözüm: Genel DNS'e geçin (1.1.1.1). 3. DNS Poisoning: Çözüm: DNSSEC etkinleştirin. 4. Kayıt Güncelleme Gecikmesi: Çözüm: TTL'yi düşük tutun (300 sn). 5. Blacklist: Çözüm: MX Toolbox ile kontrol edin. İpucu: DNS propogasyon süresi 1-48 saat, sabırlı olun. DNS Kurulumu ve Yönetimi Rehberi 1. Domain Satın Alın: Hosting firmasından domain alın. 2. DNS Sunucusu Atayın: Nameserver'ları güncelleyin (ns1.kaliteweb.net). 3. Kayıt Ekleyin: Panelde A, MX vb. ekleyin. 4. Test Edin: nslookup veya dig komutuyla kontrol edin. 5. Güvenlik Ayarları: DNSSEC ve DoH etkinleştirin. Araçlar: Whois.net (sahip kontrolü), DNS Checker (propogasyon testi). 2025 DNS Trendleri - DNS-over-HTTPS (DoH): Tarayıcı tabanlı şifreleme. - AI Tabanlı DNS Güvenliği: Otomatik tehdit algılama. - Zero Trust DNS: Her sorgu doğrulanır. - IPv6 Yaygınlaşması: AAAA kayıtları standart. - Edge DNS: CDN entegrasyonuyla hız artışı. DNS ile İlgili Sık Sorulan Sorular DNS cache nasıl temizlenir? Windows: ipconfig /flushdns. DNS propogasyonu ne kadar sürer? 1-72 saat. Ücretsiz DNS var mı? Evet, Google DNS. DNS hijacking nedir? Sahte yönlendirme. DNSSEC nasıl etkinleştirilir? Hosting panelinde. Sonuç: DNS ile İnternetin Omurgasını Güçlendirin DNS, internetin görünmez kahramanıdır. Doğru yönetimle hız, güvenlik ve erişilebilirlik kazanın. 2025'te DoH ve AI trendlerini takip edin. Hosting firmanızı seçerken DNS özelliklerini sorun – kaliteli bir sistemle fark yaratın.

Son güncelleme tarihi Nov 25, 2025

Google Tag Manager Nedir? Kapsamlı Rehber ve Kurulum Adımları

Google Tag Manager (GTM), web sitenize kod eklemeden etiket (tag), tetikleyici (trigger) ve değişken (variable) yönetimini sağlayan ücretsiz bir araçtır. Pazarlama ve analiz kodlarını (Google Analytics, Facebook Pixel, reklam pikselleri vb.) tek bir yerden yönetmenizi sağlar. Kod bilgisi gerektirmeden etiket ekleyebilir, düzenleyebilir ve yayınlayabilirsiniz. Bu rehberde, anahtar kelime "Google Tag Manager nedir" odaklı olarak, GTM'nin ne olduğunu, nasıl çalıştığını, avantajlarını ve kurulumunu detaylıca ele alacağız. 2025 yılı dijital pazarlama trendlerine uygun olarak hazırlanan bu içerik, yeni başlayanlardan profesyonellere kadar herkes için kapsamlı bir rehber sunuyor. Google Tag Manager Nedir ve Neden Kullanmalısınız? Google Tag Manager, Google tarafından geliştirilen bir etiket yönetim sistemidir (Tag Management System - TMS). Web sitenize veya mobil uygulamanıza eklediğiniz tek bir kod parçası (container snippet) ile tüm pazarlama ve analiz etiketlerini yönetirsiniz. Her yeni etiket için geliştiriciye ihtiyaç duymazsınız. Temel işlevi: Kodları manuel eklemek yerine, GTM arayüzünden etiketleri tanımlarsınız. Sayfa yüklendiğinde GTM, tanımlı tetikleyicilere göre ilgili etiketleri çalıştırır. Neden önemli? - Zaman Tasarrufu: Yeni bir reklam pikseli eklemek 5 dakika sürer, geliştirici beklemezsiniz. - Hata Azaltma: Manuel kod hatalarını ortadan kaldırır. - Esneklik: Aynı container'ı web, AMP ve mobil için kullanın. - Veri Güvenliği: Etiketleri test ortamında deneyin, canlıya almadan önce onaylayın. - Performans: Gereksiz kod yüklemesini önler, site hızını korur. İstatistik: 2025'te web sitelerinin %72'si GTM kullanıyor (BuiltWith). GTM kullanan siteler, dönüşüm izleme doğruluğunu %35 artırıyor (Google verileri). Örnek: Bir e-ticaret sitesinde Facebook Pixel, Google Analytics 4, Hotjar ve TikTok Pixel aynı anda çalışır – hepsi GTM üzerinden yönetilir. Google Tag Manager Nasıl Çalışır? Teknik İşleyiş GTM, container tabanlı bir sistemdir. İşte adım adım çalışma prensibi: 1. Container Oluşturma: GTM hesabı açın, yeni container oluşturun (web/mobil). 2. Container Snippet Ekleme: GTM size iki kod parçası verir: - <head> içine üst kod - <body> açılışından hemen sonra alt kod 3. Etiket Tanımlama: GTM panelinde etiket (tag) oluşturun (örneğin, GA4 Configuration). 4. Tetikleyici Ekleme: Etiketin ne zaman çalışacağını belirleyin (sayfa görüntüleme, tıklama, form gönderimi). 5. Değişken Ayarlama: Dinamik veriler için değişkenler tanımlayın (Click ID, Page URL). 6. Test ve Yayınlama: Önizleme modunda test edin, onaylayın ve yayınlayın. Teknik detaylar: - Data Layer: JavaScript nesnesi ile veri aktarımı (dataLayer.push). - Tetikleyiciler: Page View, DOM Ready, Click, Form Submission, Custom Event. - Etiket Türleri: GA4, Universal Analytics, Facebook Pixel, LinkedIn Insight, Custom HTML. - Versiyonlama: Her değişiklik yeni versiyon oluşturur, geri dönüş kolay. Örnek: Kullanıcı "Satın Al" butonuna tıkladığında, GTM Facebook Conversion API'ye event gönderir. Google Tag Manager Avantajları GTM kullanmanın başlıca faydaları: 1. Kod Bağımsız Yönetim: Pazarlamacılar geliştirici olmadan etiket ekler. 2. Hızlı Uygulama: Yeni kampanya için saatler yerine dakikalar. 3. Gelişmiş Test Özelliği: Preview & Debug modu ile hataları önleyin. 4. Veri Doğruluğu: Data Layer ile %100 doğru veri toplama. 5. Güvenlik: Hassas kodları GTM içinde saklayın. 6. Entegrasyonlar: 100+ hazır şablon (Google Ads, Meta, TikTok). 7. Ücretsiz Kullanım: Limitsiz etiket ve container (kurumsal için Google Tag Manager 360 ücretli). Dezavantajlar: - Öğrenme eğrisi var (ilk başta karmaşık gelebilir). - Yanlış yapılandırma veri kaybına yol açabilir. İstatistik: GTM kullanan şirketler, dönüşüm izleme hatalarını %60 azalttı (Google, 2025). Google Tag Manager Kurulum Rehberi: Adım Adım GTM'yi 15 dakikada kurabilirsiniz. 1. Hesap Oluşturma - tagmanager.google.com adresine gidin. - Google hesabınızla giriş yapın. - "Hesap Oluştur" > Şirket adı girin. - Container türü seçin (Web önerilir). 2. Container Kodunu Ekleme - GTM size GTM-XXXXXX ID verir. - İki kod parçasını alın:  <script>(function(w,d,s,l,i){...})(window,document,'script','dataLayer','GTM-XXXXXX');</script>  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX"...></iframe></noscript> - Kodları tüm sayfalara ekleyin (WordPress için header.php veya plugin ile). 3. İlk Etiket Oluşturma (GA4 Örneği) 1. Etiketler > Yeni 2. Etiket Türü: Google Analytics: GA4 Configuration 3. Measurement ID girin (G-XXXXXX) 4. Tetikleyici: All Pages 5. Kaydedin ve yayınlayın. 4. Test Etme - Önizleme modu açın. - Siteyi ziyaret edin, GTM debug panelinde etiketin ateşlendiğini görün. - Real-time Analytics'te veri akışını kontrol edin. İpucu: Tag Assistant (legacy) yerine GTM Preview kullanın. En Sık Kullanılan GTM Etiketleri ve Tetikleyicileri Popüler Etiketler 1. GA4 Event: Dönüşüm takibi 2. Facebook Pixel: Reklam optimizasyonu 3. Google Ads Remarketing: Yeniden pazarlama 4. Hotjar: Kullanıcı davranış analizi 5. Custom HTML: Özel kodlar Yaygın Tetikleyiciler - Page View: Sayfa yüklendiğinde - Click: Belirli butona tıklama - Form Submission: Form gönderildiğinde - Scroll Depth: Sayfada %50 kaydırma - YouTube Video: Video izlenme Örnek: "Satın Al" butonu tıklanınca GA4 purchase event ateşleyin. Google Tag Manager ile SEO ve Dönüşüm Optimizasyonu GTM, SEO için vazgeçilmez: - GA4 Entegrasyonu: Enhanced Measurement ile otomatik event takibi. - Schema Markup: Structured data ekleme. - Consent Mode: GDPR uyumlu çerez yönetimi. - Server-Side Tagging: 2025 trendi, veri kaybını %30 azaltır. Avantaj: AdBlock'lar client-side tag'leri engeller, server-side ile %100 veri toplama. İstatistik: Server-side GTM kullananlar, veri doğruluğunu %45 artırdı (Google, 2025). GTM Kullanırken Yaygın Hatalar ve Çözümleri - Hata 1: Container kodunu eksik ekleme → Çözüm: Tag Assistant ile kontrol. - Hata 2: Tetikleyici yanlış → Çözüm: Preview modunda test. - Hata 3: Data Layer eksik → Çözüm: Geliştiriciyle koordinasyon. - Hata 4: Çok fazla etiket → Çözüm: Gereksizleri temizleyin. - Hata 5: Yayınlamayı unutmak → Çözüm: Versiyon notu ekleyin. 2025 Google Tag Manager Trendleri - Server-Side Tagging: AdBlock bypass, daha doğru veri. - Consent Mode v2: Zorunlu GDPR uyum. - GA4 Native Entegrasyon: Otomatik event'ler. - AI Destekli Tag Önerileri: Google'ın yeni özelliği. - Privacy Sandbox: Çerezsiz dünyada GTM öncüsü. Sonuç: Google Tag Manager ile Veri Yönetiminizi Devrimleştirin Google Tag Manager, dijital pazarlamanın vazgeçilmez aracıdır. Kod karmaşasını ortadan kaldırır, veri doğruluğunu artırır ve dönüşümleri yükseltir. 2025'te server-side ve privacy odaklı trendlerle daha güçlü hale geliyor. Hemen bir hesap açın, container oluşturun ve sitenizi güçlendirin!

Son güncelleme tarihi Nov 25, 2025

Yandex Mail Servis Ayarları: IMAP, POP3 ve SMTP Konfigürasyonu Rehberi

E-posta hizmetlerinin vazgeçilmezi olan Yandex Mail, güçlü altyapısı ve kullanıcı dostu arayüzüyle öne çıkıyor. Ancak, Yandex Mail'i farklı e-posta istemcilerinde (Outlook, Thunderbird, mobil app'ler) kullanmak için doğru servis ayarlarını bilmek şarttır. Peki, Yandex Mail servis ayarları nedir ve nasıl yapılandırılır? Bu rehberde, anahtar kelime "Yandex Mail servis ayarları" odaklı olarak, IMAP, POP3 ve SMTP protokollerini detaylıca ele alacağız. 2025 yılı e-posta trendlerine uygun ipuçlarıyla, adım adım kurulum rehberi sunuyoruz. Yeni başlayanlardan profesyonellere kadar herkes için kapsamlı bir içerik hazırladık – güvenilir e-posta erişimi için okumaya devam edin. Yandex Mail Nedir? Temel Özellikler ve Avantajlar Yandex Mail, Rusya merkezli Yandex şirketinin ücretsiz e-posta hizmetidir. 2001'de başlatılan servis, bugün 100 milyondan fazla kullanıcıya sahip. Gmail'e alternatif olarak, sınırsız depolama (10 GB başlangıç, sınırsız ekleme), güçlü spam filtreleri ve entegre takvim gibi özellikler sunar. Temel özellikler: - Depolama: 10 GB ücretsiz, sınırsız genişletme. - Güvenlik: İki faktörlü doğrulama (2FA), antivirüs taraması. - Arayüz: Kullanıcı dostu web app, mobil (iOS/Android) destek. - Entegrasyonlar: Yandex Disk, Takvim, Notlar. - Özelleştirme: Alan adı entegrasyonu (@orneksite.com). Avantajlar: - Spam koruması %99 etkili (Yandex verileri). - Ücretsiz profesyonel kullanım (Yandex.Connect ile). - Yüksek hız: Rusya ve Avrupa sunucuları. - Mobil push bildirimleri. Dezavantajlar: Batı ülkelerinde Gmail kadar entegre değil, gizlilik endişeleri (Rusya yasaları). İstatistik: 2025'te e-posta kullanıcılarının %15'i Yandex Mail kullanıyor (Statista). Küresel erişim için ideal. Örnek: Bir freelancer, Yandex Mail'i Outlook ile entegre ederek e-postalarını yönetir – her yerden erişim sağlar. Yandex Mail Servis Ayarları Neden Önemlidir? Yandex Mail'i web arayüzü dışında kullanmak için IMAP, POP3 ve SMTP ayarlarını doğru yapılandırmalısınız. Yanlış ayarlar, e-posta gönderme/alma hatalarına (örneğin, 550 hatası) yol açar. Doğru konfigürasyon, senkronizasyonu sağlar ve verilerinizi korur. Neden kritik? - Erişilebilirlik: Mobil/desktop client'larda offline erişim. - Güvenlik: SSL/TLS ile şifreli bağlantı. - Performans: IMAP ile gerçek zamanlı senkronizasyon. - Yasal Uyum: KVKK için güvenli veri aktarımı. - Verimlilik: Birden fazla cihazda tutarlı kullanım. 2025 Trendi: DoH (DNS over HTTPS) entegrasyonuyla daha güvenli e-posta erişimi. Yandex Mail IMAP Ayarları: Detaylı Konfigürasyon IMAP (Internet Message Access Protocol), e-postaları sunucuda tutarak cihazlar arası senkronizasyon sağlar. Yandex için önerilen protokoldür. IMAP Sunucu Ayarları: - Sunucu Adı: imap.yandex.com - Port: 993 (SSL/TLS) veya 143 (STARTTLS) - Kullanıcı Adı: Tam e-posta adresiniz (orneksite@yandex.com) - Şifre: Yandex şifreniz (app şifresi önerilir) - Güvenlik: SSL/TLS etkin Adım Adım Kurulum (Outlook Örneği): 1. Outlook'u açın, Dosya > Hesap Ekle. 2. IMAP seçin, sunucu bilgilerini girin. 3. Gelişmiş ayarlar: IMAP port 993, SSL/TLS. 4. Test edin, e-postalar senkronize olsun. Avantajlar: Okundu/işaretleme senkronizasyonu, sınırsız erişim. Dezavantajlar: İnternet bağımlı, depolama sunucuda kalır. İpucu: App şifresi için Yandex ayarlarından "Uygulama Şifreleri" bölümünü kullanın. Yandex Mail POP3 Ayarları: Yerel Depolama İçin POP3 (Post Office Protocol), e-postaları yerel cihaza indirerek sunucudan siler. Arşivleme için uygundur. POP3 Sunucu Ayarları: - Sunucu Adı: pop.yandex.com - Port: 995 (SSL/TLS) veya 110 (STARTTLS) - Kullanıcı Adı: Tam e-posta adresiniz - Şifre: Yandex şifreniz - Güvenlik: SSL/TLS etkin - Sunucuda Kopya Bırak: Opsiyonel (ayarlar > Diğer > POP3) Adım Adım Kurulum (Thunderbird Örneği): 1. Thunderbird > Hesap Ayarları > Yeni Hesap. 2. POP3 seçin, sunucu bilgilerini girin. 3. Gelişmiş: Port 995, SSL/TLS. 4. E-postaları indirin, yerel arşivleyin. Avantajlar: Offline erişim, sunucu depolama tasarrufu. Dezavantajlar: Senkronizasyon yok, cihaz kaybında veri kaybı. Not: Yandex, POP3'te "Sunucuda kopya bırak" seçeneğini destekler. Yandex Mail SMTP Ayarları: E-Posta Gönderme İçin SMTP (Simple Mail Transfer Protocol), e-posta gönderme protokolüdür. IMAP/POP3 ile birlikte kullanılır. SMTP Sunucu Ayarları: - Sunucu Adı: smtp.yandex.com - Port: 465 (SSL/TLS) veya 587 (STARTTLS) - Kullanıcı Adı: Tam e-posta adresiniz - Şifre: Yandex şifreniz - Güvenlik: SSL/TLS etkin - Kimlik Doğrulama: Evet (şifreyle) Adım Adım Kurulum (Apple Mail Örneği): 1. Apple Mail > Tercihler > Hesaplar. 2. SMTP sunucu ekleyin, bilgileri girin. 3. Port 465 seçin, SSL sertifikasını etkinleştirin. 4. Test e-posta gönderin. Avantajlar: Güvenli gönderme, ek boyutu 25MB. Dezavantajlar: Yanlış port hataya yol açar (örneğin, 550 authentication failed). İpucu: Port engellemesi için 587'yi deneyin. Yandex Mail SSL/TLS ve Güvenlik Ayarları Yandex, tüm bağlantılarda SSL/TLS önerir. Şifreleme, verilerinizi korur. Güvenlik İpuçları: - SSL/TLS Etkinleştirin: Portlarda belirtilenleri kullanın. - App Şifresi: Üçüncü parti client'lar için özel şifre oluşturun. - 2FA: Yandex hesabınızı koruyun. - Spam Filtreleri: Yandex panelinden ayarlayın. Avantaj: Şifreli bağlantı, hacker saldırılarını %99 önler. 2025 Trendi: DoH entegrasyonuyla DNS güvenliği. Yandex Mail Servis Ayarları Kurulumunda Yaygın Hatalar - Hata 1: Yanlış Port. Çözüm: 993/995/465 kontrol edin. - Hata 2: Şifre Hatası. Çözüm: App şifresi kullanın. - Hata 3: SSL Devre Dışı. Çözüm: Ayarları etkinleştirin. - Hata 4: Firewall Engeli. Çözüm: Portları açın. - Hata 5: Yanlış Sunucu Adı. Çözüm: imap/smtp.yandex.com kullanın. Yandex Mail Alternatifleri ve Karşılaştırma - Gmail: Daha entegre, 15GB ücretsiz. - Outlook: Kurumsal, 5GB ücretsiz. - ProtonMail: Gizlilik odaklı, şifreli. 2025 Yandex Mail Trendleri - AI Spam Filtreleri: Otomatik öğrenme. - Entegre Araçlar: Yandex AI asistan. - Gizlilik Odaklı: E2E şifreleme. - Mobil Öncelik: Push hızı artışı. Sonuç: Yandex Mail Servis Ayarlarını Doğru Yapın Yandex Mail servis ayarları, e-posta yönetimini kolaylaştırır. IMAP/POP3/SMTP ile cihazlarınızı senkronize edin, güvenliği sağlayın. 2025'te AI ve gizlilik trendleriyle daha güçlü. Hemen ayarlarınızı güncelleyin ve verimli e-posta kullanımına geçin!

Son güncelleme tarihi Nov 25, 2025