Bootstrap Nedir?

Bootstrap Nedir?

yazilim

 

Bootstrap, Html, Css Ve Javascript Ile Yazılmış, Açık Kaynaklı Ve Ücretsiz Bir Ön Yüz (front-end) Kütüphanesidir.

 Başlangıçta Twitter Çalışanları Mark Otto Ve Jacob Thornton Tarafından Geliştirilmiştir.

   

Temel Amacı, Web Geliştiricilerin Duyarlı (responsive) Ve Mobil Uyumlu Web Sitelerini Daha Hızlı Ve Kolay Bir Şekilde Oluşturmalarına Yardımcı Olmaktır.

 Bootstrap, Hazır Css Ve Javascript Bileşenleri, Şablonları Ve Araçları Sunarak Geliştiricilerin Sıfırdan Tasarım Yapma Ihtiyacını Büyük Ölçüde Azaltır.

   

Bootstrap'in Temel Özellikleri Ve Avantajları Şunlardır:

Duyarlılık (responsive Design): Bootstrap'in En Önemli Özelliklerinden Biridir.

 Web Sitelerinin Farklı Ekran Boyutlarına (masaüstü, Tablet, Mobil) Otomatik Olarak Uyum Sağlamasını Sağlayan Bir ızgara (grid) Sistemine Sahiptir.

   

Hazır Bileşenler: Navigasyon Çubukları, Düğmeler, Formlar, Karuseller, Modal Pencereler Gibi Birçok Hazır Ve Stil Sahibi Bileşen Sunar.

 Bu Bileşenler, Web Sitelerinin Kullanıcı Arayüzünü Hızlıca Oluşturmaya Yardımcı Olur.

   

Tutarlı Tasarım: Bootstrap, Web Sitenizdeki Tüm Bileşenlerin Tutarlı Bir Görünüme Sahip Olmasını Sağlar.

 Önceden Tanımlanmış Stiller Ve Temalar Sayesinde Profesyonel Ve Düzenli Bir Tasarım Elde Etmek Kolaylaşır.

   

Hızlı Geliştirme: Hazır Bileşenler Ve Duyarlı ızgara Sistemi Sayesinde Geliştirme Süreci Önemli Ölçüde Hızlanır.

 Geliştiriciler, Tasarım Detaylarıyla Uğraşmak Yerine Uygulamanın Işlevselliğine Odaklanabilirler.

Geniş Topluluk Ve Kaynaklar: Bootstrap, Geniş Bir Kullanıcı Ve Geliştirici Topluluğuna Sahiptir.

 Bu Da Bol Mıktarda Çevrimiçi Kaynak, Dokümantasyon, Eğitim Ve Örnek Proje Anlamına Gelir.

 Herhangi Bir Sorunla Karşılaşıldığında Kolayca Yardım Bulunabilir.

Özelleştirilebilirlik: Bootstrap, Ihtiyaca Göre Özelleştirilebilir.

 Geliştiriciler, Kullanmak Istemedikleri Bileşenleri Veya Stilleri Kolayca Devre Dışı Bırakabilir Veya Kendi Özel Stillerini Ekleyebilirler.

   

Tarayıcı Uyumluluğu: Bootstrap, Modern Web Tarayıcılarının Çoğuyla Uyumlu Çalışır.

 Bu Da Web Sitelerinin Farklı Tarayıcılarda Tutarlı Bir Şekilde Görüntülenmesini Sağlar.

   

Bootstrap, Web Tasarımı Ve Geliştirmeyi Kolaylaştırmak Için Kullanılan Açık Kaynaklı Bir Ön Uç (frontend) Kütüphanesidir.

 En Çok Html, Css Ve Javascript Bileşenleri Ile Birlikte Gelir Ve Duyarlı (responsive) Web Siteleri Oluşturmayı Oldukça Pratik Hale Getirir.

Bootstrap'in Temel Özellikleri:

Mobil Öncelikli (mobile-first) Tasarım:

Tüm Tasarımlar Mobil Cihazlar Için Optimize Edilmiştir; Daha Sonra Daha Büyük Ekranlara Uyum Sağlar.

Duyarlı Grid Sistemi:

12 Kolonlu Esnek Bir Grid Sistemi Sayesinde Farklı Ekran Boyutlarına Uyum Sağlayan Düzenler Oluşturabilirsiniz.

Hazır Bileşenler:

Butonlar, Formlar, Navigasyon Çubukları, Kartlar, Modal Pencereler Gibi Birçok Hazır Ui (kullanıcı Arayüzü) Bileşeni Içerir.

Tema Ve Özelleştirme Kolaylığı:

Renkler, Yazı Tipleri Ve Diğer Stiller Kolayca Özelleştirilebilir.

Javascript Eklentileri:

Dropdown, Carousel (slider), Tooltip, Modal Gibi Bileşenler Javascript/jquery Desteği Ile Dinamik Hale Getirilebilir.

Geniş Tarayıcı Desteği:

Modern Tarayıcılarla Uyumludur (chrome, Firefox, Edge, Safari, Vb.

).

Neden Kullanılır?

Zaman Kazandırır: Sıfırdan Stil Yazmak Yerine Hazır Sınıfları Kullanarak Daha Hızlı Tasarım Yapılabilir.

Tutarlılık Sağlar: Büyük Ekiplerde Aynı Stil Sistemini Kullanmak Işleri Standartlaştırır.

WebYazilimciniz Mayıs 11, 2025 Yorum

WordPress AMP Nedir?

WordPress AMP Nedir?

wordpress

 

Wordpress Amp (accelerated Mobile Pages), Google Tarafından Desteklenen Açık Kaynaklı Bir Projedir.

 Temel Amacı, Web Sayfalarının Mobil Cihazlarda Çok Daha Hızlı Yüklenmesini Sağlamaktır.

 "hızlandırılmış Mobil Sayfalar" Anlamına Gelir.

Internet Kullanıcılarının Büyük Bir Bölümünün Mobil Cihazlardan Web Sitelerine Eriştiği Günümüzde, Sayfa Yükleme Hızı Kritik Bir Faktördür.

 Yavaş Yüklenen Sayfalar, Kullanıcı Deneyimini Olumsuz Etkileyerek Hemen Terk Edilmelerine (bounce Rate) Yol Açabilir.

 Işte Amp, Bu Soruna Çözüm Sunar.

Wordpress Amp'nin Temel Çalışma Prensibi:

Amp, Web Sayfalarının Daha Hızlı Yüklenmesi Için Bazı Teknik Kısıtlamalar Ve Optimizasyonlar Uygular:

Kısıtlanmış Html Ve Css: Amp, Standart Html Ve Css'nin Belirli Bir Alt Kümesini Kullanır.

 Performansı Olumsuz Etkileyebilecek Bazı Etiketlere Ve Stil Özelliklerine Izin Vermez.

Asenkron Javascript: Özel Javascript Kullanımını Kısıtlar Ve Izin Verilen Javascript Kodlarının Asenkron Olarak Çalışmasını Zorunlu Kılar.

 Bu, Sayfanın Diğer Öğelerinin Yüklenmesini Engellemez.

Google Amp Cache: Amp Sayfaları Isteğe Bağlı Olarak Google'ın Kendi Önbelleğinde Saklanabilir.

 Bu Sayede, Kullanıcılar Bir Amp Bağlantısını Tıkladığında Sayfa Doğrudan Google'ın Hızlı Sunucularından Sunulur, Bu Da Yükleme Süresini Önemli Ölçüde Azaltır.

Wordpress Için Amp Neden Kullanılmalı?

Daha Hızlı Yükleme Süreleri: Mobil Kullanıcılar Için Çok Daha Hızlı Bir Deneyim Sunar, Bu Da Kullanıcı Memnuniyetini Artırır.

Düşük Hemen Çıkma Oranı (bounce Rate): Hızlı Yüklenen Sayfalar, Kullanıcıların Sitede Daha Uzun Süre Kalmasına Ve Daha Fazla Içerik Tüketmesine Yardımcı Olur.

Gelişmiş Mobil Seo: Google, Hızlı Yüklenen Mobil Sayfaları Sıralamalarda Pozitif Olarak Değerlendirebilir.

 Amp, Mobil Seo Performansınızı Artırmaya Yardımcı Olabilir.

Daha Iyi Kullanıcı Deneyimi: Özellikle Yavaş Internet Bağlantısı Olan Kullanıcılar Için Sorunsuz Bir Gezinme Deneyimi Sunar.

Wordpress'te Amp Nasıl Kullanılır?

Wordpress Sitenizde Amp Kullanmanın En Yaygın Yolu Bir Eklenti Kurmaktır.

 En Popüler Amp Eklentilerinden Bazıları Şunlardır:

Amp For Wordpress – Hızlandırılmış Mobil Sayfalar (official Amp Plugin): Amp Projesi Tarafından Geliştirilen Resmi Eklentidir.

Amp For Wp – Accelerated Mobile Pages: Geniş Özelleştirme Seçenekleri Ve Ek Özellikler Sunan Popüler Bir Üçüncü Taraf Eklentisidir.

Bu Eklentilerden Birini Kurup Etkinleştirdikten Sonra, Genellikle Sitenizin Belirli Bölümleri (örneğin, Blog Gönderileri, Sayfalar) Için Otomatik Olarak Amp Sürümleri Oluşturulur.

 Bu Amp Sürümlerine Genellikle Orijinal Sayfa Url'sinin Sonuna /amp/ Veya ?amp Eklenerek Erişilebilir.

Dikkat Edilmesi Gerekenler:

Amp, Tasarım Ve Işlevsellik Açısından Bazı Kısıtlamalar Getirebilir.

 Sitenizin Amp Sürümleri Orijinalinden Farklı Görünebilir Ve Bazı Interaktif Özellikler Çalışmayabilir.

Amp Için Özel Temalar Veya Eklentilerin Amp Uyumlu Sürümleri Gerekebilir.

Analitik Takibi Için Amp'ye Özel Yapılandırmalar Yapmanız Gerekebilir.

WebYazilimciniz Nisan 20, 2025 Yorum

Seo için Gzip Kullanımı Nedir?

Seo için Gzip Kullanımı Nedir?

yazilim

Gzip, Web Sitenizin Dosyalarını (html, Css, Javascript Vb.

) Sunucu Tarafında Sıkıştırarak Tarayıcılara Daha Küçük Boyutlu Olarak Gönderilmesini Sağlayan Bir Dosya Sıkıştırma Biçimidir.

 Bu Sayede Web Sayfalarınızın Yüklenme Süresi Önemli Ölçüde Kısalır.

 Seo (arama Motoru Optimizasyonu) Açısından Gzip Kullanmanın Çeşitli Faydaları Vardır:

Daha Hızlı Yükleme Süresi: Google Gibi Arama Motorları, Web Sitesi Hızını Bir Sıralama Faktörü Olarak Değerlendirir.

 Gzip Ile Sıkıştırılmış Sayfalar Daha Hızlı Yüklendiği Için, Arama Motorları Sitenizi Daha Olumlu Değerlendirebilir Ve Sıralamalarda Yükselme Olasılığınız Artar.

 Kullanıcılar Da Hızlı Açılan Sitelerde Daha Uzun Süre Kalır Ve Bu Da Hemen Çıkma Oranını Düşürür.

Daha Az Bant Genişliği Kullanımı: Sıkıştırılmış Dosyalar Daha Az Bant Genişliği Tüketir.

 Bu, Hem Sizin Hosting Maliyetlerinizi Düşürebilir Hem De Kullanıcıların Internet Kotasını Daha Az Harcamasına Yardımcı Olur.

 Özellikle Mobil Kullanıcılar Için Bu Önemli Bir Avantajdır.

Daha Iyi Kullanıcı Deneyimi: Hızlı Yüklenen Web Siteleri, Kullanıcılar Için Daha Iyi Bir Deneyim Sunar.

 Bu Da Kullanıcı Memnuniyetini Artırır, Sitede Geçirilen Süreyi Uzatır Ve Dönüşüm Oranlarını Olumlu Etkileyebilir.

 Arama Motorları Da Kullanıcı Deneyimini Önemser Ve Bu Faktörler Dolaylı Olarak Seo Performansınıza Katkıda Bulunur.

Google Pagespeed İnsights Ve Diğer Araçlarda Daha Iyi Puanlar: Google'ın Pagespeed İnsights Gibi Web Sitesi Hız Analiz Araçları, Gzip Sıkıştırmasının Etkin Olup Olmadığını Kontrol Eder Ve Etkinleştirilmesi Yönünde Önerilerde Bulunur.

 Gzip'i Etkinleştirmek, Bu Araçlardan Aldığınız Puanları Yükseltmenize Yardımcı Olur.

Özetle Seo Için Gzip Kullanımı:

Web Sitesi Hızını Artırır.

Kullanıcı Deneyimini Iyileştirir.

Bant Genişliği Kullanımını Azaltır.

Arama Motorları Tarafından Daha Olumlu Değerlendirilme Olasılığını Artırır.

Hız Analiz Araçlarında Daha Iyi Puanlar Alınmasını Sağlar.

Gzip Nedir?

Gzip, Metin Tabanlı Dosyaları (html, Css, Js Gibi) Sıkıştırmak Için Kullanılan Bir Dosya Formatı Ve Sıkıştırma Algoritmasıdır.

 Sunucu, Bu Dosyaları Gzip Ile Sıkıştırarak Kullanıcının Tarayıcısına Gönderir, Tarayıcı Da Bu Dosyaları Açar.

 Bu Işlem Veri Mıktarını Ciddi Oranda Azaltır.

Seo Açısından Gzip Kullanımının Faydaları

Sayfa Yükleme Hızını Artırır:

Sayfaların Daha Hızlı Açılması, Kullanıcı Deneyimini Iyileştirir.

Hemen Çıkma Oranını Azaltır:

Hızlı Yüklenen Sayfalarda Ziyaretçilerin Sayfadan Hemen Çıkma Olasılığı Azalır.

Google Sıralamasına Katkı Sağlar:

Google, Hızlı Sitelere Öncelik Verir.

 Gzip, Dolaylı Olarak Sıralamaya Etki Eder.

Bant Genişliğini Azaltır:

Daha Az Veri Gönderimi, Hem Maliyetleri Düşürür Hem De Mobil Kullanıcılar Için Avantaj Sağlar.

 

WebYazilimciniz Nisan 20, 2025 Yorum

JavaFx Nedir ?

JavaFx Nedir ?

yazilim

JavaFX, Java platformu üzerinde zengin internet uygulamaları (RIA'lar) ve masaüstü uygulamaları geliştirmek için kullanılan bir yazılım platformudur. Oracle tarafından geliştirilmiş olup, Java'nın gücünü modern bir kullanıcı arayüzü (GUI) oluşturma araç setiyle birleştirir.

JavaFX'in Temel Özellikleri:

Zengin Grafik ve Medya Desteği: 2D ve 3D grafikler, animasyonlar, ses ve video gibi zengin medya içeriklerini kolayca entegre etme imkanı sunar.

FXML: XML tabanlı bir işaretleme dilidir. Uygulamanın kullanıcı arayüzünü (layout) Java kodundan ayrı bir şekilde tanımlamaya olanak tanır. Bu sayede tasarımcılar ve geliştiriciler arasındaki iş birliğini kolaylaştırır.

Scene Builder: FXML dosyalarını görsel olarak tasarlamak için kullanılan bir araçtır. Sürükle-bırak yöntemiyle kullanıcı arayüzü oluşturmayı kolaylaştırır.

CSS Benzeri Stilendirme: Arayüz elemanlarının görünümünü CSS (Cascading Style Sheets) benzeri bir yapıyla kolayca özelleştirme imkanı sunar.

Yerleşik UI Kontrolleri: Düğmeler, metin alanları, tablolar, ağaçlar, menüler, grafikler gibi birçok hazır kullanıcı arayüzü bileşeni sunar.

Canvas API: Doğrudan JavaFX sahnesi üzerinde çizim yapma imkanı sağlayan bir API'dir. Özel grafikler ve görselleştirmeler oluşturmak için kullanılabilir.

Web Entegrasyonu (WebView): Uygulamalara web sayfalarını gömme ve JavaScript ile Java kodunu karşılıklı olarak çalıştırma yeteneği sunar.

Swing ile Birlikte Çalışabilirlik: Mevcut Swing uygulamalarına JavaFX özelliklerini (gelişmiş grafikler, medya oynatma, web içeriği gömme gibi) entegre etme imkanı sağlar.

Platform Bağımsızlığı: Java tabanlı olduğu için, Java'nın desteklediği tüm platformlarda (Windows, macOS, Linux vb.) çalışabilir.

Donanım Hızlandırması: Desteklenen grafik kartları (GPU) ile birlikte kullanıldığında, grafiklerin daha hızlı ve akıcı bir şekilde işlenmesini sağlayan bir grafik işleme hattına (Prism) sahiptir.

JavaFX Ne İçin Kullanılır?

Masaüstü Uygulamaları: İş uygulamaları, araçlar, medya oynatıcılar gibi modern ve etkileşimli masaüstü uygulamaları geliştirmek için idealdir.

Zengin İnternet Uygulamaları (RIA'lar): Tarayıcı üzerinde çalışan, gelişmiş grafik ve etkileşim özelliklerine sahip uygulamalar oluşturmak için kullanılabilir (Java Web Start veya diğer dağıtım yöntemleriyle).

Gömülü Sistemler: Mobil cihazlar ve gömülü sistemler için kullanıcı arayüzleri geliştirmede kullanılabilir.

Oyun Geliştirme: 2D ve 3D grafik yetenekleri sayesinde basit oyunlar ve interaktif uygulamalar geliştirmek mümkündür.

Veri Görselleştirme: Grafik ve çizelge bileşenleri sayesinde karmaşık verileri anlaşılır bir şekilde görselleştirmek için kullanılabilir.

JavaFX'in Avantajları:

Modern ve çekici kullanıcı arayüzleri oluşturma imkanı sunar.

FXML ve Scene Builder sayesinde geliştirme sürecini hızlandırır ve kolaylaştırır.

CSS benzeri stilendirme ile arayüzün görünümünü kolayca özelleştirme imkanı verir.

Zengin grafik ve medya desteği sayesinde etkileyici uygulamalar oluşturulabilir.

Platform bağımsızlığı sayesinde farklı işletim sistemlerinde çalışabilir.

Swing ile birlikte çalışabilirlik sayesinde mevcut Java uygulamalarına modern özellikler eklenebilir.

JavaFX vs. Swing:

JavaFX, daha eski bir Java GUI araç seti olan Swing'in yerini alması amaçlanmıştır. Temel farklar şunlardır:

Görünüm ve His: JavaFX, daha modern ve gelişmiş bir görünüme sahiptir. CSS ile kolayca özelleştirilebilirken, Swing'in görünümünü özelleştirmek daha karmaşıktır.

Mimari: JavaFX, Model-View-Controller (MVC) mimarisini daha iyi desteklerken, Swing'de bu destek tutarsız olabilir.

Teknoloji: JavaFX, FXML gibi deklaratif bir dil ve donanım hızlandırması gibi modern teknolojileri kullanır.

Geliştirme Kolaylığı: FXML ve Scene Builder sayesinde JavaFX ile kullanıcı arayüzü geliştirmek genellikle daha hızlı ve kolaydır.

Topluluk ve Destek: JavaFX, aktif bir topluluğa sahiptir ve düzenli olarak güncellenmektedir. Swing ise daha olgun bir kütüphane olmasına rağmen yeni özellikler eklenmemektedir.

 

WebYazilimciniz Nisan 12, 2025 Yorum

Web ve HTML ile İlgili Temel Bilgiler Nelerdir ?

Web ve HTML ile İlgili Temel Bilgiler Nelerdir ?

blogyazim

Web Ve Html Ile Ilgili Temel Bilgiler Şunlardır:

Web (world Wide Web - Www):

Internet Üzerinde Yayınlanan, Birbirleriyle Bağlantılı Hipermetin Dokümanlarından Oluşan Bir Bilgi Sistemidir.

Web Siteleri, Resimler, Videolar Ve Diğer Multimedya Içeriklerini Içerir.

Web Tarayıcıları (örneğin Chrome, Firefox, Safari) Aracılığıyla Erişilir.

Html (hypertext Markup Language):

Web Sayfalarının Yapısını Ve Içeriğini Tanımlamak Için Kullanılan Standart Işaretleme Dilidir.

Metin, Resim, Bağlantı Ve Diğer Öğelerin Web Sayfasında Nasıl Görüntüleneceğini Belirler.

Etiketler (tags) Adı Verilen Özel Kodlar Kullanılarak Yazılır.

 Örneğin, <h1> Bir Başlık Oluştururken <p> Bir Paragraf Oluşturur.

Web Tarayıcıları Html Kodunu Okur Ve Görsel Bir Web Sayfasına Dönüştürür.

Html Bir Programlama Dili Değildir, Bir Işaretleme Dilidir.

 Yani Kendi Başına Çalışan Bir Program Yazılamaz, Ancak Tarayıcılar Tarafından Yorumlanarak Görsel Çıktılar Üretilir.

Html Dosyaları .

Html Veya .

Htm Uzantısıyla Kaydedilir.

Temel Web Kavramları:

Web Tarayıcısı (web Browser): Kullanıcıların Web Sayfalarını Görüntülemesini Sağlayan Yazılımdır (örneğin Google Chrome, Mozilla Firefox, Safari).

Web Sunucusu (web Server): Web Sitelerinin Dosyalarını (html, Css, Javascript, Resimler Vb.

) Depolayan Ve Isteklere Yanıt Vererek Bu Dosyaları Web Tarayıcılarına Gönderen Bilgisayarlardır.

Http/https: Web Tarayıcıları Ve Web Sunucuları Arasındaki Iletişimi Sağlayan Protokoldür.

 Https, Http'nin Güvenli (şifreli) Versiyonudur.

Domain Adı (domain Name): Bir Web Sitesinin Internet Üzerindeki Adıdır (örneğin Google.

Com, Wikipedia.

Org).

 Ip Adreslerini Hatırlamak Zor Olduğu Için Kullanılır.

Ip Adresi (internet Protocol Address): Internete Bağlı Her Cihazın (bilgisayar, Sunucu Vb.

) Sahip Olduğu Sayısal Adrestir.

 Domain Adları, Dns (domain Name System) Adı Verilen Bir Sistem Aracılığıyla Ip Adreslerine Çevrilir.

Hosting: Web Sitesinin Dosyalarının Saklandığı Ve Internet Üzerinden Erişilebilir Olduğu Sunucu Alanıdır.

 Bir Web Sitesini Yayınlamak Için Bir Hosting Hizmeti Almak Gerekir

 Web Nedir?

Web (world Wide Web), Internet Üzerinde Yer Alan Ve Tarayıcılar Aracılığıyla Erişilebilen Sayfalar Bütünüdür.

 Web Siteleri Metin, Resim, Video Ve Etkileşimli Içerikler Barındırabilir.

Web'in Temel Bileşenleri:

Web Tarayıcısı (browser): Google Chrome, Mozilla Firefox, Safari Vb.

 Web Sitelerini Görüntülemek Için Kullanılır.

Web Sunucusu (server): Web Sitelerinin Barındırıldığı Bilgisayarlardır.

Url (uniform Resource Locator): Web Sayfalarının Adresidir.

 Örnek: Https://www.

Ornek.

Com

Http / Https: Web Sayfalarının Iletim Protokolleridir.

 Https, Şifreli Ve Güvenlidir

Temel Html Etiketleri:

Etiket Açıklama

<html> Sayfanın Başlangıcını Belirtir

<head> Meta Bilgiler, Stil, Başlık Vs.

<body> Sayfanın Görünen Içeriği

<h1> - <h6> Başlık Etiketleri (h1 En Büyük)

<p> Paragraf

<a> Bağlantı (link)

<img> Görsel Ekler

<ul> / <ol> / <li> Sıralı Ve Sırasız Listeler

<div> Içeriği Gruplamak Için Kullanılır

<span> Satır Içi Metin Elemanı

 

WebYazilimciniz Nisan 12, 2025 Yorum

Front-End Nedir ?

Front-End Nedir ?

yazilim

Framework'leri: React, Angular, Vue.

Js Gibi, Daha Karmaşık Ve Ölçeklenebilir Kullanıcı Arayüzleri Geliştirmeyi Kolaylaştıran Araçlardır.

Css Preprocessor'leri: Sass, Less Gibi, Css Yazımını Daha Verimli Hale Getiren Ve Ek Özellikler Sunan Araçlardır.

Ui Kütüphaneleri: Bootstrap, Material Ui Gibi, Önceden Tanımlanmış Ve Özelleştirilebilir Kullanıcı Arayüzü Bileşenleri Sunan Kütüphanelerdir.

Bir Front-end Geliştiricisinin Sorumlulukları Özetle:

Kullanıcı Arayüzlerini (ui) Tasarlamak Ve Geliştirmek.

Web Sayfalarının Ve Uygulamaların Kullanıcı Dostu Ve Erişilebilir Olmasını Sağlamak.

Mobil Uyumlu (responsive) Tasarımlar Oluşturmak.

Web Sitesinin Performansını Ve Hızını Optimize Etmek.

Tasarımcılar Ve Back-end Geliştiricileri Ile Işbirliği Yapmak.

Kullanıcı Geri Bildirimlerini Dikkate Alarak Iyileştirmeler Yapmak.

Front-end Neleri Kapsar?

Front-end Geliştirme Genellikle Şu Üç Temel Teknolojiyle Yapılır:

Html (hypertext Markup Language)

Sayfanın Iskeletini Oluşturur.

 Başlıklar, Paragraflar, Görseller Gibi Içerikler Html Ile Tanımlanır.

Css (cascading Style Sheets)

Sayfanın Görünümünü Düzenler.

 Renkler, Yazı Tipleri, Boşluklar, Düzen (layout) Gibi Görsel Detaylar Css Ile Yapılır.

Javascript

Sayfaya Etkileşim Kazandırır.

 Butona Tıklayınca Bir Pencere Açılması, Form Gönderilmeden Önce Kontrol Yapılması Gibi Dinamik Özellikler Javascript Ile Sağlanır.

Front-end Geliştiricisi Ne Yapar?

Bir Front-end Geliştirici:

Web Sitesinin Kullanıcı Arayüzünü Tasarlar Ve Kodlar.

Farklı Tarayıcılarda Ve Cihazlarda Tutarlı Görünmesini Sağlar (responsivedesign).

Kullanıcı Deneyimini (ux) Önemser.

Genellikle React, Vue, Angular Gibi Modern Javascript Framework’leriyle Çalışır.

Api’lerden Veri Çekip Kullanıcıya Sunabilir.

 

WebYazilimciniz Nisan 12, 2025 Yorum

Blogger Demo Ve İndirme Butonu

Blogger Demo Ve İndirme Butonu

blogger

Blogger demo ve indirme butonu, genellikle Blogger temaları, eklentileri veya dosyaları paylaşan web sitelerinde kullanılan bir sistemdir. Bu butonlar, ziyaretçilere belirli bir içeriği test etme (demo) veya indirme imkanı sunar.

Demo Butonu:

Kullanıcıların bir Blogger temasını veya şablonunu canlı olarak önizlemesine olanak tanır.

Genellikle "Demo" veya "Canlı Önizleme" şeklinde adlandırılır.

Kullanıcı, butona tıkladığında farklı bir sayfada veya sekmede temanın önizleme sürümünü görebilir.

İndirme Butonu:

Kullanıcının Blogger temasını veya belirli bir dosyayı cihazına indirmesini sağlar.

Genellikle "İndir" veya "Download" şeklinde adlandırılır.

Butona tıklayan kullanıcı, bir Google Drive, MediaFire, Mega gibi bir indirme bağlantısına yönlendirilir veya doğrudan dosyayı indirebilir.

Bu butonlar genellikle Blogger temalarını paylaşan sitelerde, yazılım paylaşım platformlarında veya kişisel bloglarda bulunur. Eğer bir Blogger siteniz varsa, bu tür butonları HTML/CSS veya JavaScript ile kolayca ekleyebilirsiniz.

Bu butonları blog yazılarınızdaki paylaşımlarınızda kullanmak için öncelikle font awesome’ın blogunuzda tanımlı olması gerekir. Eğer şablonun HTML kodlarına daha önce fontawesme kodu eklemediyseniz Şablon > HTML’yi Düzenle diyerek şablonunuzun HTML kodlarının olduğu pencereyi açın ve burada <head> kodunun altına şu kodu ekleyin:

<link href='http://netdna.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.css' rel='stylesheet'/>

Daha sonra download ve demo butonlarının CSS kodlarını şablona eklemelisiniz. Bunun için ]]></b:skin> kodunu bulun ve bunun üzerine şu stil kodlarını ekleyin:

#buton {     margin: 20px auto;     text-align: center; }
#buton br {     display: none; }
.mbg-btn-slide, .mbg-btn-slide2 {     position: relative;     display: inline-block;     height: 50px;     width: 200px;     line-height: 50px;     padding: 0;     border-radius: 50px;     background: #fdfdfd;     border: 2px solid #00CC00;     margin: 10px;     transition: .5s; }
.mbg-btn-slide2 {     border: 2px solid #FF3300; } .mbg-btn-slide:hover {     background-color: #00CC00; } .mbg-btn-slide2:hover {     background-color: #FF3300; }
.mbg-btn-slide:hover span.circle, .mbg-btn-slide2:hover span.circle2 {     left: 100%;     margin-left: -45px;     background-color: #fdfdfd;     color: #00CC00; }
.mbg-btn-slide2:hover span.circle2 {     color: #FF3300; }
.mbg-btn-slide:hover span.title, .mbg-btn-slide2:hover span.title2 {     left: 40px;     opacity: 0; }
.mbg-btn-slide:hover span.title-hover, .mbg-btn-slide2:hover span.title-hover2 {     opacity: 1;     left: 40px; }
.mbg-btn-slide span.circle, .mbg-btn-slide2 span.circle2 {     display: block;     background-color: #00CC00;     color: #fff;     position: absolute;     float: left;     margin: 5px;     line-height: 42px;     height: 40px;     width: 40px;     top: 0;     left: 0;     transition: .5s;     border-radius: 50%; }
.mbg-btn-slide2 span.circle2 {     background-color: #FF3300; }
.mbg-btn-slide span.title,   .mbg-btn-slide span.title-hover, .mbg-btn-slide2 span.title2,   .mbg-btn-slide2 span.title-hover2 {     position: absolute;     left: 90px;     text-align: center;     margin: 0 auto;     font-size: 16px;     font-weight: bold;     color: #FF3300;     transition: .5s; }
.mbg-btn-slide2 span.title2,   .bsd-btn-slide2 span.title-hover2 {     color: #00CC00;     left: 80px; }
.mbg-btn-slide span.title-hover, .mbg-btn-slide2 span.title-hover2 {     left: 80px;     opacity: 0; }
.mbg-btn-slide span.title-hover, .mbg-btn-slide2 span.title-hover2 {     color: #fff; }

Şablonun HTML kodlarında yapılacaklar bu kadar. Bundan sonra demo ve download butonlarını kullanacağınız yazının HTML kodu bölümünü açın ve butonların gözükmesini istediğiniz yere butonların kodlarını ekleyin:

<div id="buton"> <a href="https://www.webyazilimciniz.net/" class="mbg-btn-slide" target="_blank">   <span class="circle"><i class="fa fa-rocket"></i></span>   <span class="title">Demo</span>   <span class="title-hover">Önizle</span> </a> <a href="https://www.webyazilimciniz.net/" class="mbg-btn-slide2" target="_blank">   <span class="circle2"><i class="fa fa-download"></i></span>   <span class="title2">Download</span>   <span class="title-hover2">İndir</span> </a> </div>

Burda ilk mavi yere demo butonuna tıklandığında açılacak sayfanın urlsini, ikinci mavi yere download butonuna tıklandığında açılacak sayfanın urlsini yazın.
 

WebYazilimciniz Şubat 06, 2025 Yorum

Blogger ?m=1 Nedir?

Blogger ?m=1 Nedir?

blogger

Blogger'da bir URL'de ?m=1 parametresi, sitenin mobil versiyonunun görüntülendiğini gösterir. Google'ın Blogger platformu, mobil cihazlardan erişildiğinde sayfanın mobil uyumlu versiyonunu göstermek için bu parametreyi kullanır.

Örnek Kullanım:

Masaüstü sürüm: https://ornekblog.blogspot.com

Mobil sürüm: https://ornekblog.blogspot.com?m=1

Eğer ?m=1 eklenirse, Blogger'ın mobil uyumlu şablonu devreye girer.

m=1 Nasıl Kaldırılır?

Eğer Blogger sitenizde ?m=1 parametresinin eklenmesini istemiyorsanız, özel bir CSS veya JavaScript yönlendirmesi ile bunu engelleyebilirsiniz.

Blogger'da "m=1" parametresi, sitenizin mobil versiyonunu göstermek için kullanılır.

Detaylı Açıklama:

Blogger, web ve mobil cihazlar için farklı görünümler sunar.

"m=1", sitenizin mobil sürümünün yüklendiğini belirtir.

Örneğin, bir Blogger sitesini açtığınızda https://örnekblog.blogspot.com/?m=1 şeklinde bir URL görebilirsiniz.

Ne İşe Yarar?

Blogger, cihazın ekran genişliğine göre otomatik olarak uygun sürümü gösterir.

Ancak bazı temalar mobil uyumlu olmayabilir ve "m=1" parametresi, sitenin mobil uyumlu versiyonunu zorla göstermenize yardımcı olur.

SEO veya kullanıcı deneyimi açısından bazen mobil versiyon yerine masaüstü versiyonun gösterilmesi istenebilir. Bu durumda "m=0" veya "?m=0" kullanarak masaüstü versiyonuna geçiş yapılabilir.

Sonuç:

"?m=1" › Mobil versiyon

"?m=0" › Masaüstü versiyon

 

WebYazilimciniz Şubat 01, 2025 Yorum

Blogger Karanlık Gece Modu

Blogger Karanlık Gece Modu

blogger

Blogger'da Karanlık Gece Modu, sitenizin veya blogunuzun ziyaretçiler için daha göz dostu bir görünüm sunmasını sağlayan bir tasarım seçeneğidir. Bu mod, özellikle düşük ışıklı ortamlarda daha rahat bir okuma deneyimi sunmak için koyu arka plan renkleri ve açık yazı renkleri kullanır.

Karanlık Gece Modunun Avantajları:

1. Göz Yorgunluğunu Azaltır: Gece veya karanlık ortamlarda, parlak arka plan gözleri yorabilir. Karanlık mod, bu yorgunluğu azaltır.
2. Pil Tasarrufu: OLED ve AMOLED ekranlarda karanlık renkler daha az enerji tüketir, bu da mobil cihazlarda pil ömrünü uzatır.
3. Modern Görünüm: Karanlık mod, birçok kullanıcı tarafından estetik bir tercih olarak görülür ve profesyonel bir hava katar.
4. Daha Rahat Okuma: Düşük ışıkta göz kamaşmasını önler ve metinlerin daha kolay okunmasını sağlar.

Blogger'da Karanlık Mod Nasıl Aktif Edilir?

Blogger'da doğrudan bir "karanlık mod" seçeneği bulunmasa da, aşağıdaki yöntemlerle bu görünümü elde edebilirsiniz:

1. Tema Özellikleri ile:

• Blogger'ın modern temalarında (Contempo, Soho, Notable gibi) yerleşik olarak karanlık mod tasarımları bulunabilir. Tema ayarlarından koyu renk şemalarını seçebilirsiniz.

Blogger Gece Modu (Karanlık Mod) Nasıl Yapılır?​

Şimdi ilk olarak yapmanız gereken /body> etiketini temanızın içerisinde aratarak bulmak olacak. Bulduğunuz zaman aşağıda vereceğimiz javascript kodunu hemen üstüne yapıştıracaksınız. Yani <body> etiketine dark adında bir class eklemiş olacağız. Bu da temanın özelleştirilmesine olanak sağlamış oluyor.

Blogger Gece Modu İçin Javascript Kodları​

JavaScript:

<script>
 $(document).ready(function($) { 
    var mode = localStorage.getItem('mode');
  if (mode)
      $('body').addClass(mode);
  $(".darkmode").click(function() {
    $("body").addClass("dark");
    localStorage.setItem('mode', 'dark');
  });
  $(".normalmode").click(function() {
    $("body").removeClass("dark");
 $("body").addClass("normal");
    localStorage.setItem('mode', null);
  });
});
 </script>

Daha sonra CSS kodları ile yapılması gereken işlemler geliyor. Aşağıda belirttiğimiz CSS kodları sizlere örnek olması amacıyla sunulmuştur. Çünkü kodlar içinde yer alan etiketler tema ya da şablona göre değişiklik gösterebilmektedir. Bu değişikliğe örnek verecek olursak, .post class değil de tema içerisinde .yazi ya da .content class şeklinde kod yapısı olabilmektedir. Tabi bizim için buradaki önemli durumlardan bir tanesi de CSS düzenlemesi yaparken body.dark .post{} veya body.dark .sidebar{} şekillerinde düzenleme yapılması gerektiğidir.

CSS:

<style>
body.dark {background:#212121 !important; color: #f9f9f9;}
body.dark .header{background:#424242}
body.dark a, body.dark h1, body.dark h2, body.dark h3{color: #f9f9f9;}
body.dark .blog {background:#212121 !important; color: #f9f9f9;}
body.dark .blog-post__content{background:#424242}
body.dark .footer{background:#424242}
body.dark .footer__credit{background:#616161}
body.dark .footer__text{color:#f9f9f9}
body.dark #comments{background:#424242}
body.dark #comments a.comment-reply{background:#616161; color: #f9f9f9;}
body.dark ul.trail-items a{color:#f9f9f9}
body.dark .blog-post__content pre{background:#212121; margin-top:15px; margin-bottom:15px; color:#f9f9f9;}
body.dark #xsidebar .widget {margin-bottom: 20px; background:#424242; padding: 20px; box-shadow: 0 10px 30px gba(0,0,0,.05);
}
body.dark .light, body:not(.dark) .dark {display: none;}
</style>

Son olarak elbette ki gece modu ile normal mod arasında geçiş yapılabilmesi için bir ikon ya da bir yazı oluşturmamız gerekecek. Eğer ikon eklemesi yapacaksanız fontawesome kullanmanız gerekiyor. Olur da fontawesome kullanmıyorsanız ikonlar görünmüyor.

CSS:

<a class="normalmode"><i class="dark fal fa-sun"></i>Normal Mod</a>
<a class="darkmode"><i class="light fal fa-moon"></i>Gece Modu</a>

 

WebYazilimciniz Ocak 26, 2025 Yorum