Turgut Arslan

JavaScript İle Göz Egzersizi Uygulaması

Gözlerimiz, dünyayı görmemizi sağlayan en önemli organlarımızdan biridir. Günlük hayatımızda sürekli olarak gözlerimizi kullanırız ve bu da göz kaslarımızın yorulmasına ve zayıflamasına neden olabilir. Göz kaslarını güçlendirmek için ise çeşitli egzersizler mevcuttur.

Bu makalede, göz kaslarını eğlenceli bir şekilde çalıştırmak için geliştirilen bir JavaScript uygulamasını tanıtacağız. Uygulama, ekranda rastgele bir noktada çıkan ve fare ile tıklandıkça kaybolup başka bir noktada çıkan bir göz ikonu içerir. Kullanıcı, göz ikonunu olabildiğince hızlı ve doğru bir şekilde tıklamaya çalışır.

Uygulamanın faydaları şunlardır:

Göz kaslarını güçlendirir: Göz ikonunu takip etmek ve tıklamak, göz kaslarının farklı yönlerde hareket etmesini sağlar. Bu da göz kaslarının güçlenmesine ve daha esnek hale gelmesine yardımcı olur.
Göz-el koordinasyonunu geliştirir: Göz ikonunu tıklamak için göz ve el koordinasyonu gereklidir. Uygulama, göz-el koordinasyonunu geliştirmeye ve daha hızlı ve doğru bir şekilde tıklamaya yardımcı olur.
Odaklanma ve konsantrasyonu artırır: Göz ikonunu takip etmek ve tıklamak, kullanıcının dikkatini ve konsantrasyonunu ekrana odaklamasını sağlar. Bu da odaklanma ve konsantrasyon yeteneğinin gelişmesine yardımcı olur.
Eğlenceli ve motive edici: Uygulama, basit ve eğlenceli bir tasarıma sahiptir. Bu da kullanıcıları motive etmeye ve uygulamayı düzenli olarak kullanmaya teşvik eder.

Bu çalışmamızda saf JavaScript ile basit bir göz egzersizi uygulaması kodladım. Kodları aşağıdaki gibidir.

<!DOCTYPE html>
<html>
<body >

}
function closeContainer(elem,event){
if(event.target == elem){
  elem.style.display="none";
  document.getElementById("containerStarter").innerHTML="Göz Egzersizini Yeniden Başlat";
  document.querySelectorAll(".oneEye")[0].style.left=0;
  document.querySelectorAll(".oneEye")[0].style.top=0;
  }
}
</script>

</body>
</html>

</html>

Kodların Çalışan halini buradan test edebilirsiniz.

Skor: 0

Basit bir HTML / CSS / JS Editörü

Javascriptle basit bir HTML/JS/CSS Editörü örneği

Bu editör HTML, CSS ve JavaScript kodlarını düzenleyip çalıştırabileceğin basit bir ortam sağlar. Kodlarınızı aşağıdaki alana yazıp front-end'te çalıştırabilirsiniz. İsterseniz sadece çalıştır düğmesine basın ve örnek kodu çalıştırın.

(Yazdığınız Kodu Çalıştırmak için CTRL+Enter'a da Basabilirsiniz.)


<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Kodu</h2>

<p id="demo">HTML içeriği</p>

<script>
function deneme(){
alert("heyyoo");
}
</script>
<button onclick="deneme();">Örnek Kodu Çalıştır</button>
</body>
</html>

Sayfa Sıralamanızı Yükseltecek 5 SEO Önerisi

Bir web sitesinin varlığını sürdürebilmesi ziyaretçi sayısına bağlıdır. Ziyaretçi alamayan siteler zamanla unutulur, reklam, satış vb. amaçları yerine getirememelerinden dolayı faaliyeti sona erer. İnternet dünyası bu şekilde kapanmış sayısız domaine ait projelerin mezarlarıyla doludur.

Yayına açılan her sayfa aslında yeni bir projedir. Böylesi yeni projeler için ziyaretçi bulmak önemli bir problemdir. Eğer reklam çalışmaları için yeterli bütçeniz yoksa sitenize ziyaretçi çekmenin en iyi yolu arama motorlarında iyi bir konumda yer edinmekten geçmektedir. Bunun için de iyi bir SEO çalışması yapmalıdır.

SEO ise her geçen gün değişen ve gelişen bir alandır. Arama motorları sürekli olarak yazılımlarını geliştirirler. Site yöneticileri de bu gelişmelerden olumsuz etkilenmek için mutlaka sitelerindeki SEO çalışmalarını güncellemelidir. SEO esasen web sitesi içeriği için yapılır. Kaliteli içerik, iyi malzeme demektir ve çalışmalarınızın verimli olabilmesi için bu şarttır. İçeriği oluştururken SEO kurallarını göz önünde bulundurmak sitenizin arama sonuçlarındaki sırasını daha iyi konumlara taşıyabilir.

Google algoritmalarının son yıllarda gösterdiği gelişim, web sitelerinin arama sonuçlarındaki sıralama kriterlerini de içerik kalitesi ve kullanıcı memnuniyetini dikkate alacak şekilde etkilemiştir. Sadece backlink sayısı ve anahtar kelime popülaritesine bağlı SEO çalışmalarının artık bir geçerliliği yoktur. Bu aslında web sitelerine zarar veren bir durum. Ama Google'ın bunu yapmak için geçerli bir sebebi var.

Google temelde arama sonucu hizmeti sunan bir web sitesi. Tek bir amacı var. Dünya genelinde lider arama motoru olarak popülerliğini sürdürmek. Bunun yolu da kullanıcılarını memnun etmekten geçiyor. Yani bir konuda arama yapan ziyaretçilerini ihtiyaçlarını doğru ve güvenli bir şekilde karşılayan sayfalara yönlendirdiklerinden emin olmak istiyorlar.

Bu durumda size düşen görev hem Google Botlarını içeriğinizin aranan kelime için uygun ve doğru olduğuna ikna etmek, hem de ziyaretçilerinizi kaliteli içeriğinizle memnun etmek. Bu yazımda hem Google hem de ziyaretçi tarafını memnun edebilmenizi sağlayacak birkaç öneri sunuyorum.

Şu 5 öneri sitenizin arama sonuçlarındaki konumunun yükselmesini sağlayabilir.

1) Anahtar kelime seçimi ve kullanımına özen gösterin.

İçeriğiniz için sadece temel anahtar kelimelere odaklanmayın. Uzun kuyruklu anahtar kelimeler ve arama hacmi görece daha düşük olan diğer önemli anahtar kelimeleri de uygun bağlamlarla metninize ekleyin.

Anahtar kelimeleri metninize eklerken, sanki bir kompozisyon sınavındaymış gibi aynı ifadelerin çok fazla tekrar etmediği; konunun alaka düzeyine uygun bir içeriğin oluşturulmasına dikkat edin. Metninizin anlam bütünlüğü özensiz bir şekilde eklenen SEO anahtar kelimeleri yüzünden bozulmasın.

2) Anahtar kelime fikirleri için sadece araçlara güvenmeyin kendi araştırmanızı yapın.

Aranma hacmi yüksek anahtar kelimeleri bulmak için en iyi yöntem, Google Ads panelindeki Anahtar Kelime Planlayıcı aracını kullanmaktır. Bu araç sayesinde sitenizle alakalı pek çok anahtar kelimeyi tespit edebilir ve sitenize ekleyebilirsiniz. Anahtar kelime eklerken, Google arama sonuçlarında(SERP) gösterilen arama önerilerinden de faydalanabilirsiniz. Bulduğunuz anahtar kelimeleri metninizde kullanmadan önce aranma hacimlerini Anahtar Kelime Planlayıcı üzerinde mutlaka kontrol etmelisiniz.

Anahtar kelimelerin arama sonuçlarında hangi tip sitelerin listelendiğini de göz önünde bulundurun. İncelediğiniz her sonuç(SERP) sayfasında olası rakipleriniz sizleri beklemektedir. Onları iyi analiz edip içeriklerinden yeni anahtar kelimeler bulabilirsiniz.

3) Etkileyici başlıklar tıklama oranınızı arttırır.

Google siteleri arama sonuç sayfalarına yerleştirirken aynı vitrinine ürün koyan bir esnaf gibi davranır. Her bir sonuç sırasının yaklaşık olarak ne kadar tıklama alabileceğini bildiği için konumuna göre yeterince tıklama almayan içeriklerin zamanla sıralamalarını düşürür.

Arama sonuçlarında daha alt sıralarda çıkmaya başlarsınız ve siteniz trafik kaybetmeye başlar. Bu yüzden içeriğiniz için belirleyeceğiniz başlığın dikkat çekici ve davetkar olması gerekiyor. Google'ı sayfalarınızı birer ürün gibi vitrinine koyan böyle bir esnafmış gibi düşünün. Satılmayan ürünü vitrinde boşuna yer işgal etmesin diye arka raflara atacaktır. Yani arama sonuçlarında kendisine verilen konumdan yeterince tıklama alamayan sayfalar sıralama kaybedeceklerdir.. Google'ın arama sonuçlarını sıralarken izlediği yollardan birisi de budur.

4) Ziyaretçinizi mutlu edin.

Başlık(title) alanına cezbedici bir başlık girdiniz. Anahtar kelimeleri de belirlediniz. Bir sonraki adım ziyaretçinizin tatmini olmalıdır. Arama sonuçlarındaki başlığın vadettiği bilgiyi ziyaretçiyi çok sıkmadan tam olarak verin.

Sadece anahtar kelime yığılı bir sayfada anlamsız cümleler içinde boğulmalarına izin vermeyin. İnsanlar anlamadıkları sayfayı hemen terk ederler. Eğer başlıkta belirttiğiniz konuyu güzel bir şekilde sunarsanız. Aynı kişilerin sayfayı tekrar tekrar ziyaret ettiğini de görürsünüz. Bu yaklaşım hemen çıkma oranının(bounce rate) da düşmesini sağlar.

5) İçeriğiniz okunaklı olmalı.

Bir lokanta düşünün. Masalar intizamlı ve birbirlerinden yeterince uzak. Gerekli mahremiyeti ve ferahlığı sağlıyor. Böyle bir yerde daha rahat yemek yer ve rahatsız edilmeden sevdiklerinizle vakit geçirebilirsiniz. Ziyaretçilerinizi de lokantaya gelen müşteriler gibi düşünün. Onların da içeriğinizden faydalanabilmeleri sayfa düzeninin paragraf yoğunluğunun iyi ayarlanması gerekir.

Metnin okunabilirliğini bu yoğunluk oranı belirler. Yani sayfadaki metinin kalitesi kadar içeriğinin kolayca okunabilmesi de önemli. Metinlerinizi büyük paragraflar halinde sunmayın. Onları 2 ya da 3 satırlı parçalara bölün. Bazı konularda bütünlük açısından bu sayıyı artırabilirsiniz. Metnin genelinin bu kurala uymasını sağlayın. Paragraflar arasında yeterince boşluk bulunsun. Kullanıcıya Orhun Yazıtlarını okuyormuş izlenimi vermeyin.

Özetle

Tüm bu anlattıklarımın ortak noktası kullanıcı deneyimidir. Kullanıcılarınıza adeta sevdiğiniz misafirleri ağırlar gibi davranın. Onlara iyi birer deneyim yaşatıp mutlu bir şekilde ayrılmalarını sağlayın. İhtiyaçlarını karşılayın. Onları sıkmayın rahatsız etmeyin. Etkileşimi zorlaştıracak uygulamalardan kaçının. Eğer iyi bir deneyim yaşatırsanız, ziyaretçilerinizin sayfanızı yer imlerine kaydedip tekrar tekrar ziyaret etmelerini ve Whatsapp, Instagram gibi ortamlarda paylaşarak yeni ziyaretçileri sayfanıza yönlendirmelerini bile sağlayabilirsiniz. Unutmayın yaşamımız deneyimlerden ibaret. Ve bir insan için iyi bir hatıra veya deneyimden daha değerli bir şey yoktur.

JavaScript Başa Dön | Scroll To Up Butonu Kodu

Sitelerde çokça kullanılan yukarı çık, başa dön vb. isimlerle adlandırılan buton kodu.

var btnP =0;

window.addEventListener("load",function(){

btnP =window.scrollY;

});

window.addEventListener("scroll",function(){

scrollStat();

});

function scrollStat(){

btnP =window.scrollY;

if(btnP <=600 ){

document.getElementById("toTopBtn").className ="scrollToTopBtn";

}

else{

document.getElementById("toTopBtn").className ="scrollToTopBtn scrollToTopBtnShow";

}

function scrollToTop(){

window.scrollTo(0,0);

scrollStat();

}

</script>

<style>

scroll-behavior: smooth;

}

.scrollToTopBtn{

position:fixed;

bottom:3%;

right:5%;

background-color:#e7e7e7;

color:#555;

font-size: 15px;

font-family: 'Helvetica';

font-weight: 400;

cursor:pointer;

transition: all 0.5s ease 0s;

width:auto;

height: auto;

display: none;

padding:10px 15px;

border-radius: 20px;

-moz-border-radius: 20px;

-webkit-border-radius: 2px;

z-index: 99999;

line-height: 30px;

border:solid 1px #e7e7e7;

-webkit-box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 3px 0px;

-moz-box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 3px 0px;

box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 3px 0px;

}

.scrollToTopBtnShow{

display: block;

}

.scrollToTopBtn:hover{

background-color:#079992;

border:solid 1px #079992;

color:#fff;

}

@media only screen and (max-width: 768px) {

.scrollToTopBtn{

font-size: 15px;

}

.scrollToTopBtn:hover{

background-color:#e7e7e7;

border:solid 1px #e7e7e7;

color:#555;

}

</style>

⇡ Başa Dön

JavaScript ile Mesai Sayacı

Javascript Geri Sayım Sayacı Countdown Timer

Bu çalışmamda JavaScript ile bir geri sayım sayacı yaptım.

Input elemanına bitiş zamanını yazıp butona tıkladığınızda belirlediğiniz saate kaç saat kaldığını görebilirisiniz. Bu uygulamada input elemanına yapılan girişleri sınırlandırdım. Program klavyeden girilen değerin sayısal olup olmadığını kontrol ediyor ve girilen değerleri saat formatına göre HH:MM:SS şeklinde düzenliyor. Javascript mesai sayacının kodları aşağıdaki gibidir.

<p>Lütfen mesai bitiş saatini girin</p>
<input type="tel" placeholder="HH:MM:SS" id="timeInputId" />
<input type="button" id="tmrBtn" value="Mesai Sayacını Başlat"/>
<p id="demo"></p>
<p id="demo2"></p>
 
<script>
var x;
var finishTime= "00:00:00";
var brTitle= document.title;
window.addEventListener("load",function(){
var timeBtn = document.getElementById("tmrBtn");
var timeInput = document.getElementById("timeInputId");

timeInput.onkeydown=function(e){
      
    if(!isNaN(e.key)){
     clearInterval(x);
          if(this.value.length == 2)
          {
              this.value=this.value+":";
          }
          if(this.value.length == 5)
          {
              this.value=this.value+":";
          }
          if(this.value.length >= 8)
          {
              this.value=this.value.substring(0,8);
          }
      }
      else{
      	this.value="";
        
      }
    };
    timeBtn.onclick=function(){
    if(timeInput.value.length >= 8)
        {
        timeInput.value=timeInput.value.substring(0,8);
        	finishTime=timeInput.value;
            startTmr();
        }
    	
    };

});

function startTmr(){
finishTime =finishTime.split(":");
var ft =new Date();
 finishTime=ft.setHours(finishTime[0],finishTime[1],finishTime[2]);

var countDownDate = finishTime;

x = setInterval(function() {

var now = new Date().getTime();
    
   var distance = countDownDate - now;
    
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);
    if(hours < 10) hours="0"+hours;
     if(minutes < 10) minutes="0"+minutes;
     if(seconds < 10) seconds="0"+seconds;

document.getElementById("demo").innerHTML ="Mesai Bitimi İçin Ayarlanan Tarih : "+ft+"<br/> Mesai Bitimine Kalan Süre:<br/> <h2 style='color:red;text-align:center;'>"+   hours + " : "
  + minutes + " : " + seconds+" </h2>";
  if(!document.hasFocus()){
   document.title ="Kalan Süre : "+hours +":"+minutes+":"+seconds;
  }
  else{
  document.title=brTitle;
  }

if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "Mesai Bitti";
	document.title="Mesai Bitti";
  }
}, 1000);

}

</script>

Kodları yazarken https://www.w3schools.com/howto/howto_js_countdown.asp linkindeki sayfadan yararlandım

Kodun çalışan örneğini buraya ekliyorum. Dilerseniz günün bir saatini girip kalan sürenin geriye doğru sayılmasını deneyimleyebilirsiniz.

Lütfen mesai bitiş saatini girin

CSS ile Devamını Oku Butonu Tasarımı

Basit bir CSS kodlama örneği yaptım, umarım yardımcı olur.

<h3 class="btnTitle">Devamını Oku Buton alanı başlık metnini buraya yazın</h3>

<a href="#" title="Devamını Oku Buton Başlığı" class="btnReadMore"> Devamını Oku ></a>

</div>

<style>

.btnContainer{

background-color:#2f2f2f;

color:#fefefe;

text-align:center;

padding:1% 2%;

font-family:Arial;

}

.btnTitle{

font-size:24px;

line-height:100%;

}

.btnReadMore{

display:block;

background-color:#dedede;

color:#2f2f2f;

width:50%;

max-width:170px;

text-align:center;

text-decoration:none;

margin:20px auto;

font-family:Arial;

font-size:16px;

padding:10px 2px;

border-radius:2px;

-webkit-border-radius:2px;

-moz-border-radius:2px;

}

</style>

Kodların çalışan hali

Devamını Oku Buton alanı başlık metnini buraya yazın

Devamını Oku >

C# Abstract Factory Method Design Pattern Örneği

C# dilinde Abstract Factory Metot Tasarım Deseni için örnek bir kod hazırladım.

using System;

namespace TekstilFabrikasi

{

public interface IPantolon

{

string PantolonEkle();

}

public interface IGomlek

{

string GomlekEkle();

}

public class Pantolon : IPantolon

{

public string PantolonEkle()

{

return "Pantolon";

}

public class Gomlek : IGomlek

{

public string GomlekEkle()

{

return "Gömlek";

}

public interface ICeket

{

string CeketEkle();

}

public class Ceket : ICeket

{

public string CeketEkle()

{

return "Ceket";

}

public interface IElbiseFactory{

IPantolon PantolonYap();

IGomlek GomlekYap();

ICeket CeketYap();

string KumasTipi();

string Mevsimi();

}

public class Yazlik : IElbiseFactory

{

public string KumasTipi()

{

return "Ürünler Keten Kumaştan İmal Edilmiştir.";

}

public string Mevsimi()

{

return "Yaz Sezonu İçin Takım";

}

public IPantolon PantolonYap()

{

return new Pantolon();

}

public IGomlek GomlekYap()

{

return new Gomlek();

}

public ICeket CeketYap()

{

return new Ceket();

}

public class TakimOlustur{

private readonly IPantolon _pantolon;

private readonly IGomlek _gomlek;

private readonly ICeket _ceket;

private readonly string _kumasTipi;

private readonly string _mevsim;

public TakimOlustur(IElbiseFactory elbiseFactory){

_pantolon = elbiseFactory.PantolonYap();

_gomlek = elbiseFactory.GomlekYap();

_kumasTipi = elbiseFactory.KumasTipi();

_mevsim = elbiseFactory.Mevsimi();

_ceket = elbiseFactory.CeketYap();

}

public void TakimiSun()

{

Console.WriteLine(_mevsim);

Console.WriteLine(_kumasTipi);

Console.WriteLine(_pantolon.PantolonEkle());

Console.WriteLine(_gomlek.GomlekEkle());

Console.WriteLine(_ceket.CeketEkle());

}

public class Program

{

public static void Main(string[] args){

IElbiseFactory yazlik = new Yazlik();

TakimOlustur takimSiparis = new TakimOlustur(yazlik);

takimSiparis.TakimiSun();

}