Blog arşivleri - BARIŞ DOĞAN SÜTÇÜ

SCSS ve SASS’ta Each Döngüsü Oluşturma

Barış Doğan Sütçü — Sun, 14 Aug 2022 22:55:39 +0000

SCSS veya SASS kullanırken işimizi rahatlatacak ve bir o kadarda kullanımının keyifli olduğu each döngüsünü ve each kullanımını anlatacağım. Each ile oluşturacağımız kod yapısı, item sayısı kadar döngüye sokup, bu dizeler içerisinde bulunan her bir iteme erişmemiz mümkün.

Öncelikle anlatımımıza başlamadan önce karmaşık olmasa da yorucu bir işlemi CSS ile gösterip, ardından SCSS ile anlatacağım.

HTML kalıbımızı oluşturduk. Ardından CSS ile her bir class’a ayrı ayrı kod parçacığı eklemeliyiz.

.icon-facebook{
	background-image:url("img/icons/facebook.svg") no-repeat 50%;
}
.icon-twitter{
	background-image:url("img/icons/twitter.svg") no-repeat 50%;
}
.icon-instagram{
	background-image:url("img/icons/instagram.svg") no-repeat 50%;
}
.icon-twitter{
	background-image:url("img/icons/youtube.svg") no-repeat 50%;
}
.icon-linkedin{
	background-image:url("img/icons/linkedin.svg") no-repeat 50%;
}

Her sosyal medya için tek tek class açıp farklı url adreslerini girdik. Şimdi ise SCSS’i izleyelim.

$social: facebook twitter instagram youtube linkedin;
	@each $object in $social {
		.icon-#{$object} {
			background:url("img/icons/#{$object}.svg") no-repeat 50%;
		}
	}

Yazdığımız bu kısa kodun çıktısı bu şekilde olacaktır.

.icon-facebook{
	background-image:url("img/icons/facebook.svg") no-repeat 50%;
}
.icon-twitter{
	background-image:url("img/icons/twitter.svg") no-repeat 50%;
}
.icon-instagram{
	background-image:url("img/icons/instagram.svg") no-repeat 50%;
}
.icon-twitter{
	background-image:url("img/icons/youtube.svg") no-repeat 50%;
}
.icon-linkedin{
	background-image:url("img/icons/linkedin.svg") no-repeat 50%;
}

SCSS ve SASS’ta Each Döngüsü Oluşturma yazısı ilk önce BARIŞ DOĞAN SÜTÇÜ üzerinde ortaya çıktı.

CSS Grid ile Masonry Kullanımı

Barış Doğan Sütçü — Sat, 24 Apr 2021 02:26:18 +0000

Öncelikle “Masonry” yapısı için gözükecek ilk item elemanının kodlarını yazıyoruz.


    
        CSS MASONRY PINTEREST

Daha sonra item sayısını arttıralım ve 4 Column olacak şekilde CSS kodumuzu ekleyelim.
.column–wrapper


    
        CSS MASONRY PINTEREST

.grid--content .column--wrapper{
    display: grid;
    grid-template-columns: repeat(4,1fr);
}

… css ile “grid-gap” vererek column aralarını açalım, “box-shadow” vererek gölge ekleyelim, “border-radius” ile görsellerin köşelerini oval yapalım.
gap & box-shadow

.grid--content .column--wrapper{
    display: grid;
    grid-template-columns: repeat(4,1fr);
  	/*devam*/
    grid-gap: 20px;
  
}

.grid--content .column--wrapper .post--item{
    box-shadow: 0 0 3px 2px #00000021;
    border-radius: 10px;
}
.grid--content .column--wrapper .post--item img{
    margin-bottom:10px;
}

… css ile “Masonry” görünümünü elde etmek için gerekli kodları yazalım

.grid--content .column--wrapper{
    display: column;
    columns: 4;
    grid-gap: 20px; 
}
@supports (grid-template-rows: masonry) {
    .grid--content .column--wrapper {
        display: grid;
        grid-template-columns: repeat(4,1fr);
        grid-gap: 20px;
        grid-template-rows: masonry;
        grid-auto-flow: dense;
    }
}

… görünüme ayrıntılar ekleyerek post başlığını ve kullanıcı bilgilerini kodlayalım.


	
  	CSS Masonry Title Post
  		
    		
      			
      			Johnny Bravo

.post--item {
    break-inside: avoid;
}
.grid--content .post-user {
    margin: 10px 0;
}

.grid--content .post-user a {
  display: inherit;
}

.grid--content .post-user a:hover {
    background-color: #f0f0f0;
    border-radius: 50px;
}

.grid--content .post-user img {
    border-radius: 100% !important;
  	max-width:50px;
    max-height: 50px;
    margin: 0;
}

.grid--content .post-user span {
    margin-left: 10px;
    color: #949494;
    font-size: 14px;
}

.grid--content .post--title {
    font-weight: bold;
    color: #1d2327;
}

CSS Masonry Title Post

Johnny Bravo

CSS Masonry Title Post

Johnny Bravo

CSS Masonry Title Post

Johnny Bravo

CSS Masonry Title Post

Johnny Bravo

CSS Masonry Title Post

Johnny Bravo

CSS Masonry Title Post

Johnny Bravo

CSS Masonry Title Post

Johnny Bravo

CSS Masonry Title Post

Johnny Bravo

CSS Masonry Title Post

Johnny Bravo

CSS Masonry Title Post

Johnny Bravo

CSS Masonry Title Post

Johnny Bravo

CSS Masonry Title Post

Johnny Bravo

Dosya Olarak İndir Codepen Üzerinden İncele

CSS Grid ile Masonry Kullanımı yazısı ilk önce BARIŞ DOĞAN SÜTÇÜ üzerinde ortaya çıktı.

Favicon nedir ? Nasıl eklenir ?

Barış Doğan Sütçü — Fri, 02 Apr 2021 15:10:32 +0000

Favicon kavramı için bir nevi web sitemizin kimliğidir diyebiliriz. Sizde olması gereken boyutlarda bir favicon oluşturarak web sitenizin akıllarda kalma oranını artırabilirsiniz.

Favicon Nedir?

Favicon nedir sorusuna bir yanıt olarak şunu söyleyebiliriz; Favicon web sitemizin küçültülmüş bir logosudur ve aynı zamanda sitemizin kimliği de diyebiliriz favicon için. Herhangi bir potansiyel ziyaretçi web sitenize ilk defa giriş yaptığında sonraki girişlerinde web sitenizin adresi aklında kalmayacaktır.

Fakat eğer sitenizde bir favicon var ise bu sefer görsellik ile beraber web siteniz aklında kalacak ve sonraki zamanlarda rahatlıkla tekrardan sitenizi ziyaret edebileceklerdir.

Özet ile favicon web sitenizin akıllarda kalma oranını oldukça ciddi düzeyde artırmaktadır. Bu da bizim web sitemiz için pozitif bir durumdur.

İdeal Favicon Boyutları

Bir favicon için ideal boyut 16×16’dır. Ve 16×16 boyutunda olan favicon kare olmalıdır. Boyut olarak 16×16 en küçük boyutudur. Sizde 16×16’dan daha büyük boyutlarda bir favicon kullanabilirsiniz. Fakat bunu yaparken rastgele bir boyut belirlemeseniz daha iyi olur.

Zira 16×16 boyutlarından daha büyük boyutta bir favicon tasarlamak istiyorsanız 16 ve katları şeklinde olması tavsiye edilir. Burada sözü edilenler öneri niteliğindedir hangi boyutu seçeceğiniz bütünüyle size kalmış. Standart olarak bir favicon şu boyutlarda olabilir; ölçü birimi px’dir

16×16
32×32
48×48
64×64
128×128
128 x 128 px den büyük olmaması gerekiyor.

Kullanım 1

Kullanım 2

Örnek 1

Örnek 2

Bahsi geçen bu boyutlardan dilediğiniz hangisi ise onu seçip favicon tasarlama kısmına geçiş yapabilirsiniz.

Favicon Ne İşe Yarar? Neden Favicon Kullanmalıyız?

Yazımın başında da belirtmiş olduğum gibi web sitemizin akılda kalıcılığını sağlamak için favicon kullanmamız gerekmektedir. Bir diğer favicon kullanma nedenimiz ise markalaşmadır. Zira favicon kullanmak web sitenizin markalaşıp bilinmesi için önemli sebepler arasında yerini korumaktadır.

Favicon Kullanmanın Seo Açısından Faydaları Nelerdir?

Bir web sitesi üzerinde logonun önemi ne ise favicon’unda önemi aynı orantıdadır. Bilhassa dijital dünya üzerinde sitemizi ziyaret eden kullanıcıların aklında web sitemizin kalması için favicon önemli rol oynamaktadır. Burada favicon kullanmanın öneminden bahsettim.

Favicon kullanmak doğrudan doğruya seo’ya olumlu yönde etki etmese de dolaylı bir şekilde seo açısından sitemize olumlu bir değer kattığı söylenebilir.

Favicon nedir ? Nasıl eklenir ? yazısı ilk önce BARIŞ DOĞAN SÜTÇÜ üzerinde ortaya çıktı.

Flutter Nedir?

Barış Doğan Sütçü — Sun, 13 Oct 2019 22:26:14 +0000

İlk kez Google’ın 2017 I/O developer konferansında tanıtılan Flutter, Google tarafından geliştirilen uygulama geliştirme aracı (SDK) dır. Açık kaynak kodlu bir mobil uygulama geliştirme aracı olup, geleneksel android ve ios uygulama geliştirme yöntemlerinden farklı özellikleri bulunmaktadır. Flutter ile uygulamada yapılan bir değişiklik hot reload özelliği ile hızlı bir şekilde görebilir.Derleme için uzun süre beklemeye gerek yoktur. Flutter ile yazılan birçok uygulama en ünlü markaların mağazalarında yerini almış durumdadır. Bunlardan biri de E-ticaret devi olan Alibaba‘dır.

Flutter ile güzel uygulamalar geliştiren organizasyonların listesi

Flutter’ı Nasıl Öğrenebilirim?

Tamamen ücretsiz olan Flutter’i kullanarak her iki platformda istenilen uygulamalar geliştirilebilir Zamandan ve paradan tasarruf sağlayan bir uygulama geliştirme aracı olup Android ve iOS platformlarına uygun başarılı uygulamalar tasarlanabilir. Herhangi bir programlama tecrübeniz olmasa da Flutter’i öğrenebilirsiniz. Dart programla dilini kullanan Flutter’i öğrenmek için sade bir dil olan Dar’ı biraz incelemek yeterlidir. Android için Java ya da Kotlin, iOS için de Swift ya da Objective-C dilini öğrenmenize gerek yok. Google, SDK’yı çıkarırken uygulamanın her iki platformda verimli çalışmasını hedeflemiştir. Performans konusunda son derece başarılı olan Flutter’le increment uygulamasını çalıştırmak sadece 10 saniye sürmektedir. Flutter’le hazır gelen birçok ekran aracını sıfırdan kodlamaya gerek kalmadan kullanıcı arayüzü oluşturulabilir. Google tarafından hazırlanan ücretsiz bir kurs olan Build Mobile Apps with Flutter – Udacity ile Flutter konusunda kendinizi geliştirebilirsiniz.

Kursta;

iOS Geliştiricileri
Android Geliştiricileri
React Geliştiricileri
Xamarin Geliştiricileri

ve Web Geliştiricileri için oldukça öğretici ve açıklayıcı dokümanlar hazırlanmış.

Etkileyici Arayüzler Tasarlama Olanağı

Flutter’ın Hedefleri

Flutter hedefleri; fast development, Expressive, beautiful UIs ve Modern, reactive framework olarak 3 ana başlıkta inceleniyor.

Fast development hedefi: Hızlı bir şekilde yeniden yüklen, yine hızlı ve kolay bir şekilde deneme yapılan, kullanıcı arayüzü oluşturma ve yeni özellikler eklemeye yardımcı olan Flutter, hataları daha hızlı bir şekilde gidermeye de yardımcı oluyor. IOS ve Android uygulamalarda; donanım, emülatör ve simülatör üzerinde son derece hızlı çalışıyor.

Expressive, beautiful UIs hedefi: Android Materyal Tasarımı ve Cupertino (iOS-flavor) widget’larına sahip olan Flutter, platform farkındalığı ve zengin hareket API’leri ile kullanıcıları memnun ediyor.

Modern, reactive framework hedefi: UI(User Interface)’nin mükemmel bir şekilde geliştirildiği Flutter; modern reaktif ve kullanışlı olup zengin bir platforma, düzene ve temel widget setine sahiptir. 2D, animasyon ve efektlerde tüm zorlukları güçlü ve esnek API’lere sahip Flutter’le çözmek son derece kolaydır

Fast Development

Cross-platform mobil uygulamalar geliştirmeye olanak sağlayan Flutter, Dart programlama dilini kullanan bir frameworktür. Hem Android hem de iOS’a odaklanarak uygulama geliştirmeyi sağlar.

Hot reload özelliği ile geliştirilmekte olan uygulamada yapılan değişiklikler saniyeler içinde test edilebilir. Android Studio ile çalışanlar en ufak değişikliği test etmek için oldukça uzun bir süre beklemek zorunda kalırken, Flutter hot reload özelliği ile bu süre saniyeler içerisinde gerçekleşmektedir.

Geliştirilmiş UI özelliği ile uygulama ekranı katmanlara bölünebilir. Böylece geliştirici uygulamanın tüm görünümüne hakim olunur. Kullanılabilecek birçok farklı widget ile uygulama zenginleştirilebilir. Aynı zamanda bu katman elementleri kolayca animasyon haline getirilebilir.

Native performansı özelliği ile Flutter yüksek performans sergiler. Stateless Widget, sayfa içinde bulunan durumu değişmeyecek Widget’ları içermektedir. Stateful Widget’te, İçine yazı ve görsel eklenebilir. Veri göndermek için kullanılan formlar ise dinamiktir.

Flutter’de birşeyler yazarak mantığını daha iyi anlayabilirsiniz. Flutter Resmi Sayfası: https://flutter.io yu inceleyebilir, flutter SDK’ yı indirerek kurulumu yapabilirsiniz.

Yazar : Barış Doğan Sütçü

Flutter Nedir? yazısı ilk önce BARIŞ DOĞAN SÜTÇÜ üzerinde ortaya çıktı.

Node.js Çalışma Mantığı Nasıldır?

Barış Doğan Sütçü — Mon, 12 Aug 2019 20:05:52 +0000

2009 yılında Joyent firma çalışanı Ryan Dahl tarafından geliştirilmeye başlanan node.js, bir Javascript Runtime platformu olup kullanımı ücretsizdir. Web tarayıcıları olmadan da her yerde çalışabilir. Google tarafından geliştirilen V8 javascript motoru üzerinde çalışır.

Node.js Ne İşe Yarar?

Node.js, bir yazılımın arkayüz ve önyüz kodlarını aynı anda ve aynı dilde yazmanın en kolay yoludur. Eşzamansız yani asenkron yapısı ile veritabanlarına ya da Internetteki çeşitli servislere istek yapıp beklemeye gerek yoktur. Node.js, istekleri tek-tek değil paralel olarak yapar ve anlık olarak istekler hızlı bir şekilde işlenir.

Modüler kod yazmayı teşvik eden Node.js ile kod yazmak adeta lego parçalarını birleştirmek gibidir. Binlerce açık kaynak paketi olan NPM’nin irili ufaklı modülleri karıştırılarak kullanılabilir.
Node.js ekosistemini kullanmayan yok gibi. Startup çalışanlardan büyük şirketlere kadar hemen herkes node.js kullanıyor. Google, NASA, Apple, IBM, Microsoft, Pinterest, Netflix ve PayPal bunlardan sadece birkaçı.

Node.js Özellikleri Nelerdir?

Açık kaynaklı yani kullanımının ücretsiz olması, olaylara dayalı olması ve asenkron olması en önemli özellikleridir.

Çok hızlı ve ucuz maliyetli olması da node.js özellikleri arasındadır.
NPM (node package manager) paket yönetim sistemine sahip bir platform olarak sürekli gelişen ve ihtiyaçlara en etkili şekilde cevap veren bir yapıdadır.
Eşzamanlı bağlantıları hızlı ve etkin şekilde işlemektedir.
Client ve server tarafında aynı dili kullanmanın kolaylıklarına sahiptir.
MongoDB gibi veritabanı kullanıldığında istemci ve sunucu tarafında yüzde 100 JavaScript kullanır.

Node.js Çalışma Mantığı

Node.js; Javascript tabanlı scriptleri yorumlayan ve çalıştıran, node.js backend tarafında çalışan, hızlı, ve ölçeklenebilir network uygulamalarını geliştirmeyi sağlayan bir platformdur. Node.js olay bazlı yapısını Event loop (Olay Döngüsü) adı verilen bir işlemle yapıyor.

Olaya dayalı bir uygulama olan node.js, değişkenleri başlatarak işlevleri bildirir ve olayların gerçekleşmesini bekler. Uygulamada olayları dinleyen ve sonrasında bu olaylardan birinin tespit edilmesi durumunda geri arama işlevini tetikleyen bir ana döngü vardır. Olay işleme gözlemci modelinde olup uygulamada olayları dinleyen işlevler “gözlemci” olarak çalışır.
250.000 civarı NPM paket sayısı ve modüler yapısı ile hemen her işi hallederken, aynı anda birden fazla kullanıcıya takılmadan cevap verebilir.

Node.js Çalışma Mantığı Nasıldır? yazısı ilk önce BARIŞ DOĞAN SÜTÇÜ üzerinde ortaya çıktı.

UI Ve UX Arasındaki Farklar Nelerdir?

Barış Doğan Sütçü — Mon, 12 Aug 2019 20:02:42 +0000

Ui ve Ux tasarımcılar kullandıkları araçlar ve sorunlara yaklaşımları ile birbirinden farklıdır. İlk olarak Ui ve Ux tanımına bir göz atalım ve arasındaki farklar nelerdir aktaralım.

User Interface kısaca Ui, kullanıcı arayüzü demek olup deneyimin tasarım kısmı ile ilgilidir. User Experience yani kısaca Ux ise kullanıcı deneyimi olup tasarımcıların üzerine çalıştığı ürünle ilgili geniş bir araştırma yaptığı, tasarımı, kolay kullanımı, kolay anlama ve kullanımdan memnun kalma gibi şeylerle ilgilendiği çalışmadır. Yani Ux Ui’yi de kapsayan geniş bir daldır.

Ux Tasarımcı ve Kullandığı Programlar

Ux, ürünle ilgili derinlemesine araştırmaların yapıldığı, ürünün arayüzünün tasarlandığı ve tasarıma sadece estetik açıdan değil verimlilik, basitlik ve kullanım kolaylığı açısından bakıldığı bir işlevselliğe sahiptir. Aynı zamanda ürünün test edildiği ve kullanıcının ürünle ilgili neler hissettiğinin anlamaya çalışıldığı bir süreçtir.

Deneyimi tasarlamak için Zihin haritalama programı (MindManager), SmartDraw, InVision, MockPlus, UserTesting Microsoft Visio, Axure RP, Flinto, Trello, Time Doctor, Sketch, AppCooker, Optimizely ve Fotojet gibi programlar kullanılır. UX tasarımcılar için piyasada bunlara benzer daha birçok program bulunuyor.

Ui Tasarımcı ve Kullandığı ProgramlarKullanıcı arayüzü için kullanılan programlar; Sketch, Adobe XD, Gravity Designer, Affinity Designer, Figma, PhotoShop ve Illustrator gibi programlar kullanılıyor. Yenilikçi programlar yanında geleneksel tasarımcıların kullandığı programlarla Ui tasarımı yapılıyor.

Uı ve Ux Arasındaki Farklar

Kullandığı programlar yanında birçok özelliği ile Ux ve Ui birbirinden ayrılıyor.
Ux web tasarımlarını kullanışlı hale getirirken, Ui web tasarımlarını güzelleştiriyor.
Ux kullanıcıya amacına ulaşmada yardım ederken, Ui duygusal bağlar oluşturuyor.
Ux ilk adım iken, Ui arkasından geliyor.
Ux, farklı ürünler, arayüz ve hizmetler için kullanılırken, Ui sadece tasarlandığı arayüzle ilgileniyor.
Bir örnek vermek gerekirse; Ui bir bardağın genel tasarımını yaparken, Ux bardağın kullanıcı deneyimi, işlevselliği, kullanıcı memnuniyeti ile ilgileniyor. Ui somu, Ux ise soyut bir çalışma yapıyor.
Yani Ui, Ux’in bir alt kümesi olarak çalışıyor. Her ne kadar aralarında fark olsa da, Ux ile Ui birbirinden ayrı düşünülemiyor. UX tasarımının ana amacı olarak kullanıcı araştırması, içerik stratejisi, görsel tasarım, bilgi mimarisi, etkileşim tasarımı ve kullanılabilirlik faktörleri ile Ui’den ayrılıyor.

UI Ve UX Arasındaki Farklar Nelerdir? yazısı ilk önce BARIŞ DOĞAN SÜTÇÜ üzerinde ortaya çıktı.

Vue.js Nedir, Nerelerde Kullanılır?

Barış Doğan Sütçü — Thu, 08 Aug 2019 19:12:52 +0000

Kullanıcı arayüzleri oluşturmada kullanılan vue.js, Evan You tarafından geliştirilmiş açık kaynaklı bir basitliğin ve kendine yeterliliğin ön planda olduğu progressive javascript frameworktur. Vue’nun odaklandığı konu kolay adapte olmaktır.

Vue.js nedir?

Çekirdek yapısı view katmanına odaklanan vue.js, ihtiyaçlar doğrultusunda kolaylıkla harici kütüphanelerle ilişkilendirilebilen ve bu sayede hızlı ve kapsamlı single-page uygulamalar geliştirilebilen bir uygulamadır. Vue.js nedir denildiğinde, kullanıcı arayüzleri geliştirmede kullanılan interaktif bir front-end kütüphanesi veya bir çeşit progressive web framework diyebiliriz.

Vue.js Özellikleri

– Kolay anlaşılabilir ve öğrenilebilirdir.

– Çok yönlü kullanım imkanına sahiptir.

– Çekirdek yapısı özelliği ve desteklenen kütüphanelerle beraber sürdürülebilir sonuçlar sağlar.

– Düşük boyutta ve hızlıdır.

– Virtual Dom sayesinde yüksek performanslıdır ve kolay test edilebilir.

– Mevcut bir projeye kolay entegre edebilir.

– Reactive bir yapıya sahiptir.

– Ücretsizdir.

– Özelliklere ihtiyaç duyulduğunda özellikler pluginlerle eklenebilir.

– Kullanıcı kendi Component’lerini oluşturabilir.

– Anlaşılması ve öğrenmesi kolaydır.

Vue.js Projeye Ekleme

Öncelikle bize ait olan projeye vue.js ekleyebilmek için aşağıda verdiğim script’i ekleyelim. Tabii bunu bilgisayarınıza indirerek local olarak da ekleyebilirsiniz.

Daha sonra HTML dosyanıza gelerek aşağıda verdiğim kodu ekleyin.


  {{ message }}

Script tagları arasına veya Javascript dosyasına aşağıda ki kodu ekleyin.

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

Artık Vue.js ye başladınız…

Vue.js Nerelerde Kullanılır?

Vue.js, varolan bir projeye çok kolay dahil edilebildiği için kullanımı her geçen gün yaygınlaşıyor. Temel amacı fonksiyonel ve hızlı etkileşimi olan arayüz tasarlamak olan vue.js, web projeleri tasarlamada büyük kolaylık sağlıyor. Birden çok ekran tasarımı olan bir web projesinde, herhangi bir ekran diğer sayfalarda değişiklik yapılmadan tasarlanabiliyor.

Angular’a göre çok daha esnek bir yapıda olan vue.js, interface katmana sahiptir. Tarayıcının DOM’u üzerinde değişiklik yapmak oldukça maliyetlidir. Bu yüzden vue.js virtual DOM kullanılıyor. Vue.js ekleme işlemi gerçekleştirildikten sonra uygulama alanı tanımlanıyor. Vue ile etkileşimli alan ilişkilendiriliyor. Etkileşimli alan Vue’ye iletilen alandır. Data, key ve value ile ilgili veri işlemleri için direktifleri barındırır.

Veritabanı bağlantısı, form kontrolü ve hesap kontrolü denildiğinde artık ilk akla vue.js geliyor.

Vue.js kullanım alanları

Diğer frameworklere göre çok daha fazladır Açık kaynaklı olan ve kullanıcı sayısı her geçen gün artan vue.js, bir script kütüphanesi olup özellikle büyük ölçekli bir projede firmalar tarafından kullanılıyor. Listelemeden metot tanımlamaya, model kullanımından Component kullanımı ve daha birçoğuna kadar vue.js kullanmak tercih ediliyor.

Birden çok platformda hızlıca uygulama geliştirebilmenin yolunu açan vue.js, birçok firma ve yazılımcının tercihidir.

Vue.js Nedir, Nerelerde Kullanılır? yazısı ilk önce BARIŞ DOĞAN SÜTÇÜ üzerinde ortaya çıktı.

Etkili Bir Seo Çalışması İçin Yapılması Gerekenler ?

Barış Doğan Sütçü — Sat, 03 Aug 2019 17:29:52 +0000

Etkili Bir Seo Çalışması İçin Yapılması Gerekenler Nelerdir ?

Son yıllarda dijital pazarlama, web sitesi ya da internet kelimeleri kullanıldığında akla gelen ilk tanımlardan birisi de SEO (Search Engine Optimization)’ dur. Dijital evrenin ayrılmaz bir parçası olan SEO en basit ve genel tanımıyla arama motoru optimizasyonu olarak açıklanmaktadır.

Markaları, ürünleri, hizmetleri ya da internet sitelerini Google, Yandex gibi arama motorlarında ilk sıralarda yer almasını sağlamak için yapılan çalışmalara SEO denmektedir. Kullanılan her arama motorunda örümcekler bulunmaktadır. Örümceklerin görevi dijital evrende dolaşarak gerekli analizler yapmak ve arama motorlarının kriterlerine göre hazırlanmış tüm özgün ve yararlı içerikleri kullanıcıların rahatlıkla ulaşabilmesi için ilk sayfalara taşımaktır. Buna göre örümcekler görevlerini yerine getirerek ilgili içeriklerinin prosedürlere uygun olup olmadığını arama motorlarıyla paylaşmaktadır.

SEO Çalışmaların Ortaya Çıkması Nasıl Olmuştur ?

İnternetin hemen hemen dünyanın her yerinde kullanılır olmasıyla birlikte kurumlar ya da markalar için internett dünyasında var olma mücadelesi de başlamıştır. Bu durumda internet dünyasındaki rekabetinde hızlı bir şekilde artmasına sebep olmuştur.

Dünyada bilinen ilk web sitesi 1991 senesinde İsveç’ te kurulmuştur. İlk oluşturulan web sitesi sonrasında ise web sitelerinin kurulma hızı çok hızlı bir şekilde artmıştır. Talebin bu kadar fazla olması ve internet dünyasındaki bilgi erişiminin ise sonsuz olması kaliteli bilgiye hızlı bir şekilde ulaşma ihtiyacını da beraberinde getirmiştir. SEO ( Search Engine Optimization) çalışmaları da bu ihtiyacı karşılamak amacıya ortaya çıkarılmıştır.

SEO Çalışmalarının Temeli Nedir ?

SEO ya da bir diğer adıyla arama motoru optimizasyon çalışmalarının temelinde anahtar kelime analizi yer almaktadır. Anahtar kelime analizi sayesinde ortaya çıkan anahtar kelimelein yer aldığı özgün ve ilgi çekici içerikler sayesinde başarılı bir SEO çalışması yapmak mümkündür.

Anahtar kelime analizinde en önemli nokta anahtar kelimelerin doğru ve başarılı bir şekilde belirlenmesinin sağlanmasıdır. Bunun için cevaplanması gereken konular;

1. Dijital evrende en çok kullanılan ve ilgi çeken kelimelerin belirlenmesi,
2. İçerik oluşturulması planlanan konuyla ilgili dikkat çekici kelimelerin seçilmesi,
3. İnsanların ilgisini çeken ancak dijital evrende daha az kullanılan kelimelerin bulunması büyük önem taşımaktadır.

Etkili Bir SEO (Search Engine Optimization) Çalışması için Yapılması Gerekenler Nelerdir ?

Firmaların ya da markaların üzerinde en çok düşündükleri konulardan birisi de ürünleri seo yönetimi ile nasıl ön plana çıkarırız sorusunun cevabıdır. Bunun için yapılması gereken çalışmalar site içi ve site dışı olmak üzere ikiye ayrılmaktadır.

İçerik Optimizasyonu

Başarılı bir içerik optimizasyonu için içerik üretilmesi istenen konuyla ilgili kişilerin ilgisini çekecek başarılı, detaya giren ve tüm sorulara cevap veren içerik üretiminin yapılması gerekmektedir.

Kalite

Her işte olduğu gibi SEO çalışmalarında da üretilen içeriklerin kaliteli olması önem arz etmektedir. Kaliteli içerik demek içeriklerin yazıldığı dilin yazım kurallarına dikkat eden, etkili, özgün ve yaratıcı içeriklerin oluşturulmasına dikkat etmekle başlamaktadır.

Etkili Bir Seo Çalışması İçin Yapılması Gerekenler ? yazısı ilk önce BARIŞ DOĞAN SÜTÇÜ üzerinde ortaya çıktı.

E-Ticaret Sitelerinde Seo Yönetimi

Barış Doğan Sütçü — Fri, 02 Aug 2019 21:24:54 +0000

SEO kelimesi İngilizce “Search Engine Optimization” ifadesinin baş harflerinden oluşur ve Türkçe karşılığı “Arama Motoru Optimizasyonu”‘dur. SEO çalışması sitelerin arama motoru aramalarında üst sıralara çıkmasını sağlayan bir çalışmadır. Peki e ticaret sitelerinin seo yönetimi nasıl olmalıdır.

E-Ticaret Sitelerinde SEO Yönetimi

E-ticaret çok büyük hacme sahip bir sektördür. Günümüzde, işletmenin büyüklüğü fark etmeksizin, büyümek isteyen her işletmecinin bir e-ticaret sitesi sahibi olması zorunlu hale gelmiştir. Geleneksel pazarlama yöntemlerin yanı sıra online pazarlama stratejileri de markaları geliştirmek için göz ardı edilmemesi gereken stratejilerinden biridir. E-ticaret işletmelerinin yardımına bu noktada SEO çalışmaları koşmaktadır.

E-ticaret sitelerini ön plana çıkarmak için yapılması gereken SEO çalışmalarından en önemlileri şöyledir:

– Anahtar Kelime Araştırması

– Anahtar Kelime Matrisi

– Site İçi Optimizasyon

– Yapılandırılmış Veri

– Kopya Sorunu

– Stok Dışı Ögeler

– Sayfalandırma

– Site Hızı

– Mobil

1- Anahtar Kelime Araştırması

Müşterilerin araştırma, karşılaştırma ve satın alma adımlarında kullandıkları kelimeler, en fazla dönüşüm potansiyeline sahip olan anahtar kelimelerdir. E-ticaret firmaları, bu anahtar kelimelerden oluşan bir liste oluşturmakla SEO çalışmalarına başlayabilir. Ayrıca anahtar kelime araçlarından destek alarak bu listeleme işlemi çok daha kısa sürede yapılabilir. “Rank Tracker” gibi kelime kombinasyonu oluşturma özelliğine sahip uygulamaları kullanarak anında uzun kuyruklu anahtar kelimeler elde edilebilir.

2-Anahtar Kelime Matrisi

Anahtar kelime parçalama olarak da ifade edilen bu kavram, sitede birden fazla sayfanın aynı anahtar kelime ile odaklanması anlamına gelmektedir. Arama motoru sonuç sayfasında aynı sorguyu hedefleyen bu sayfalar sıralama açısından birbiriyle rekabet edecektir.

3- Site İçi Optimizasyon

Ürün sayfaları için başlık, meta açıklama ve H 1 şablonları oluşturmak gerekir. Örneğin “<ürün adı> satın al – ” kalıbı tüm ürün sayfalarında kullanılabilir. Bu örnekte <ürün adı> kısmı her sayfada farklı olacaktır. Benzer düzenlemeyi H 1 etiketleri ve açıklamalar için de gerçekleştirmek gerekir. Başlıklar ve meta açıklamalar arama motoru sonuç sayfasında görünmektedir. Bu nedenle harekete geçirici mesajları kullanarak sonuçlardaki tıklanma oranını yükseltmek mümkün olabilir.

4- Yapılandırılmış Veri

Schema biçimlendirme kodlarını siteye yerleştirerek arama motorlarının kullanıcıya daha bilgilendirici sonuçlar sunması sağlanabilir.

Schema tarafından desteklenen yüzlerce biçimlendirme bulunmaktadır. E-ticaret siteleri için özellikle ürün şeması ve değerlendirme şeması biçimlendirme türleri çok önemlidir. Schema biçimlendirmeyi uygulandıktan sonra arama sonuçlarında sitenin değerlendirme derecesi, fiyat ve stok durumu, potansiyel ziyaretçilere bilgi verecektir.

5- Kopya Sorunu

E-ticaret siteleri için kopya içerik büyük problem oluşturabilir. Site içi kopya problemi, sitede birden fazla sayfanın aynı içeriğe sahip olmasını ifade ederken, site dışı kopya problemi, kullanılan içeriğin internette pek çok farklı sitede yer alması durumudur.

6- Stok Dışı Ögeler

E-ticaret mağazasında zaman zaman belirli ürünlerin stok dışı kalabilir. Hatta bazı ögelerin satış dışı kalması söz konusu olabilir. Bu sorunu SEO ile çözmek için ürünlerin yeniden temin süresini belirtmek, ürünler temin edilebilir olduğunda ziyaretçilere bildirim göndermek, ziyaretçilere ön sipariş imkanı tanımak ve benzer ürün listeleri oluşturmak, yapılabilecekler arasındadır.

7-Sayfalandırma

Bir içeriği birkaç sayfaya ayırmak için başvurulan kullanışlı yöntemlerden biridir. E-ticaret sitesinde sayfalandırma çalışması, birbiriyle örtüşen içerik oluşturmaya yardımcı olabilir. Eğer sitede sayfalandırma çubuğu varsa ve numara içeriyorsa, bunlar ziyaretçiler tarafından tıklanarak sitede geçirdikleri zaman uzatılabilir.

8- Site Hızı

Site hızı E-ticaret siteleri son derece etkili bir sıralama faktörüdür. Yavaş bir site kötü kullanıcı deneyimi anlamına gelir. Kötü kullanıcı deneyimi de daha düşük satış demektir.

9- Mobil (Responsive)

Google’ın arama trafiğinin %50’si mobilden sağlanmaktadır. Tüketicilerin %60’a yakını, satın alım kararını mobil cihazlarından vermektedir. Bir e-ticaret sitesi bu büyük kitleyi göz ardı etmemeli, siteyi farklı mobil kanallara uyumlu şekilde dizayn etmelidir.

Responsive olmazsa olmaz.

E-Ticaret Sitelerinde Seo Yönetimi yazısı ilk önce BARIŞ DOĞAN SÜTÇÜ üzerinde ortaya çıktı.

Backend Developer Ve Özellikleri

Barış Doğan Sütçü — Wed, 31 Jul 2019 10:44:57 +0000

Backend, bir yazılımda kullanıcıların görmediği kısımların tümüdür ve ana sistemdir. Örneğin, bir site içerisinde yazı okuyorsunuz ve siteye baktığınızda birçok şey görüyorsunuz. Fakat gördüklerinizin aksine, sitenin sistem düzeneğini geliştiren ve gerekli yazılımsal geliştirmelerin yapıldığı kısım; Backend’dir.

Bir yazılımı kullanırken, görmüş olduklarınızın haricinde; o yazılımın meydana getirilmesinden işleyişine kadar, Backend Developer ilgilenir. Bu konuda hazırlanmış olan her bir kısmı, yazılımın Backend kısmına girer. Yazılıma dair görülenler ise, tam ters köşesi olan Frontend’tir.

Backend’i tıpkı bir film gibi düşünmek mümkündür. Filmde oyuncular, Frontend kısmında yer alırken; filmi oluşturan diğer ekip ise, Backend kısmında yer almaktadır.

via Gfycat

Backend Yazılımlar

Web yazılımı ya da bilgisayar yazılımı fark etmeksizin artık yazılımların büyük çoğunluğu katmanlı olarak geliştirilmektedir. Bir programın hangi programlama diliyle yazılacağını bulmak, Backend yazılıma girmektedir.

Yazılımın programlama dilleriyle meydana getirilmesi ile bir veritabanına bağlanması gibi işlemlerin tümü Backend yazılıma girer. Backend kısmı, sistemin ana kısmını oluşturur. Fakat kullanıcılar tarafından görülen kısım ise, Frontend kısmı olacaktır.

Backend Developer Ne İş Yapar?

Backend Developer, önüne getirilen projeyi düşünen ve proje için gerekli programlama dillerine karar veren kişidir. Bir nevi, Backend Developer’a; işin çalışma mantığını şemaya döken ve de sistemi hazırlayan kişi, denilebilir. Backend Developer’ın işi, tamamen arka sahnededir.

Backend Developer, yazılımlarda sistemsel ve fonksiyonel olarak gerekli olan tüm her şeyi hazırlamaktadır. Daha sonra bu aşamadan sonra, iş; yazılımın kullanıcıya görsel olarak sunulabilmesi için Frontend Developer’a aktarılır. Frontend developer, en sonunda; yazılıma bir tasarım giydirerek görsel açıdan düzenler. Yazılımın, kullanıcı için tam ve de anlaşılabilir bir bütün hâline gelmesini sağlar.

Kimi yazılımcılar, yalnızca Backend çalışma potansiyeline sahip iken; kimi yazılımcılarsa, tüm yazılımı yapabilir. Yani bir yazılımın, hem Backend bölümünde; hem Frontend bölümünde görev alan yazılımcılar da bulunmaktadır. Bu tür yazılımcılar, süreç boyunca işin tamamını kendi başına meydana getirebilmektedir.

Yazılımcılar, çoğunlukla belirli bir alanda uzmanlaşmış olsa da; süreci bir bütün olarak görmektedir. Farklı alanlarda bilgi sahibi olunması, eksik olan bir durumu görmek ve iş bütünlüğü açısından önemlidir.

yazan : Barış Doğan Sütçü

Backend Developer Ve Özellikleri yazısı ilk önce BARIŞ DOĞAN SÜTÇÜ üzerinde ortaya çıktı.