Python ile neler yapılabilir başlıklı bu yazımız da sizlere python hakkında kısa bilgiler verip avantaj ve dezavantajlarından bahsedeceğim. Hazırsanız yazımıza başlayalım.

Python Hakkında Kısa Bilgi

Yazılım, bugünümüze şekil verirken yarınımıza temel veren bir alandır. Programlama dilleri ise yazılımların temellerini oluşturan en önemli unsurlardan birisidir. Python 30 yıldan fazla geçmişe sahip olan birikimli bir programlama dilidir. Dünya üzerinde en hızlı büyüyen yazılımcı kitlesine sahip programlama dilidir. Python geçmişi sağlam temellere oturmuş geleceğe ise kendinden emin bir şekilde ilerler. Yeni teknolojiler ile arasında bulunan pozitif yönlü yüksek korelasyon bunun en temel kanıtlarından birisidir. Python yüksek seviyeli bir programlama dilidir. İçerisinde bulunan paketler topluluk tarafından her geçen gün daha da geliştirilmektedir yani açık kaynak kodlu bir yapıya sahiptir.

Python Tarihsel Süreci

İlk olarak 1990 yılında geliştirilmeye başlanan python zaman içerisinde isim değişikliğine uğrasa da günümüze kadar gelmiştir. En güzel yanlarından birisi sizin şuan gerçekleştirmek istediğiniz bir proje ile alakalı kodlar muhtemelen bir başka geliştirici tarafından hazırlanıp topluluk ile paylaşılmıştır.

Bu yönüyle toplulukta biriken veriler sizlerin python öğrenme serüveninde sizler için en güzel ve temel kaynaklardan birisi olacaktır. Programlama dilleri temelde iki başlık altında ele alınabilmektedir. Bunlar açık kaynak kodlu programlama dilleri ve kapalı kaynak kodlu programlama dilleri şeklinde olabilir aynı zamanda blok tabanlı programlama dilleri ve metin tabanlı programlama dilleri olarak ta incelenebilir.

Yazılım Dilleri Türleri Nelerdir ?

1- Açık kaynak kodlu programlama dilleri

Açık kaynaklı olan programlama dilleri, belirli bir şirket veya grup tarafından değil tüm kullanıcılar tarafından geliştirilen bir dildir. Mülkiyeti kullanıcılarına aittir. Kendisini sürekli günceller yenilikler peşinde koşar.

Açık kaynak kodlu yazılım türleri hakkında bilgi almak isterseniz.

2- Kapalı kaynak kodlu programlama dilleri

Açık kaynak kodlu programlama dilleri aksine geliştiricisi belirli ve sınırlı olan programlama dilleridir. Hukuksal olarak muhatap bulabileceğiniz bir geliştiricisi vardır.

3- Blok tabanlı programlama dilleri

Blok tabanlı programlama dilleri, programlamaya yeni ve görsel bir soluk katan programlama dilleridir. Özellikle öğrencilere yazılım eğitimi verirken tercih edilirken bunun yanı sıra ciddiyetinden ödün vermeyen bir programlama dilidir. Sürükle bırak yöntemiyle çalışır. Kod blogları bir araya geldikçe program oluşmaya başlar. En bilinen blok tabanlı kodlama araçları Scratch ve Mblock’ tur.

4- Metin tabanlı programlama dilleri

Blok tabanlı programlama dillerine göre daha eski olan bu diller her ne kadar eski olsalar da özellikle iş hayatında kullanılan programlama dillerini içerir. Metin tabanlı programlama dilleri içerisinde yer alan Python bu bölümde ciddi bir yere sahiptiR. Ayrıca C, C++, C#, HTML, Php, JAVA, Javascript, SQL, Perl gibi bir çok dil de bu bölümde yer alır.

Python ile Neler Yapılabilir ?

Çalışma alanı oldukça geniş olan bir programlama dilidir. Bu sebeple de oldukça fazla kullanıcısı bulunmaktadır. Python ile yapılabilen yazılım türleri ;

• Veri bilimi
• Veri analizi
• Makine öğrenmesi
• Otomasyon yazılımları
• Ağ yazılımları
• Oyunlar

Gibi alanlara odaklanmaktadır. Fakat bunların yanı sıra oyun geliştirme, web tasarım gibi konularda da sizlere yardımcı olur. Python, tekrar eden dijital davranışların kontrolünde üstün performans göstermektedir. Diğer programlama dillerine göre daha hızlı çalışır.

Python, en çok yatırımı makine öğrenmesi, derin öğrenme ve veri bilimi alanlarına yapmaktadır. Makine öğrenmesi ile makineler çeşitli durumlar ve senaryolar karşısında seçimler yaparak davranışları incelemektedir. Örneğin Python ile kameralar aracılığıyla yüz tanıma programları geliştirilmektedir. İnsanların yüzlerinin geometrik olarak şifrelenip bir veri tabanında saklanarak kamera önünden geçen insanların cinsiyetleri, bilgileri, beden özellikleri verilenebilmektedir.

Bir başka somut örnek ise şu olabilir düşünün bir restoran işletiyorsunuz ve kendinize rakip olarak gördüğünüz ikinci bir restoran ise sokağın sonunda sizle yarışıyor üstelik gayet iyi menüler çıkarıyor. Python sizin için bir casus gibi çalışıp rakip restoranın internet sitesindeki ne güncel menüleri ve içerikleri depolayabilir, size sunabilir.

Python ile Yazılmış Uygulamalar

Dünya üzerinde geliştirilen yazılımların %27 oranında kullanıldığı bir dildir. Buradaki veriden de göreceğiniz gibi python bir çok yazılıma sirayet etmektedir. Bu hızlı yayılış elbette ki bugün kullandığımız uygulamalar arasında da gerçekleşmiştir. Örneğin;

1. Reddit
2. Spotify
3. Google
4. Nasa
5. Facebook
6. instagram
7. Dropbox
8. İnstagram
9. Blender

gibi uygulamalar Python ile geliştirilmiş uygulamalardandır.

Python ‘ un Avantajları ve Dezavantajları Nelerdir ?

1. Python, diğer programlama dillerine göre daha hızlı çalışır.
2. Diğer programlama dillerine göre daha az kod ile aynı işi yapar.
3. Gelecek teknolojilerini destekleyen ve geliştiren bir yapıya sahiptir.
4. Bir çok platformda kusursuz çalışır.
5. Veri bilimine en çok katkı sağlayan programlama dillerinden birisidir.
6. Makine öğrenmesini destekler.
7. Otomasyonda önde gelir.

Dezavantajlarına gelecek olursak;

1. Python oyun geliştirme alanında Unity gibi ağır abi olamamıştır.
2. Python görsel unsurların işlenmesinde kendisini daha çok geliştirmelidir.

Sıkça Sorulan Sorular 

Daha fazla okumak için Python ile Neler Yapılabilir Avantaj ve Dezavantajları ziyaret edebilirsiniz.

Bu yazımızda w3school sitesi hakkında bilgiler vermek istiyorum. Programlama ile uğraşıyorsanız yolunuz bir şekilde kesişme ihtimalinin bulunduğu w3school nedir , ne işe yarar ve nasıl kullanılır konularında bilgi niteliğindeki yazımıza hemen başlayalım.

W3school Nedir ?

W3School Nedir  HTML , CSS , JavaScript , PHP , SQL , Python , jQuery , Java , C ++ , C # ,  XML  ve Bootstrap gibi web sitesi dillerinde bir çok kaynağa ve uygulamaya ücretsiz bir şekilde ulaşabileceğiniz bir web sitesidir. W3Schools.com sitesi Norveçli bir yazılım şirketi olan Refsnes Data tarafından 1998 yılında kurulmuştur. Günümüzde çok tercih edilen, web programlama konusunda aradığınız bir çok içerikte karşınıza çıkacak ve uygulamaları kullanacağınız web sitesidir.

Sunduğu en büyük özellikler konu bazlı eğitim, eğitimler sırasında öğrenmeyi arttırmaya yönelik quizler olup ve dersleri bitirip yeterli düzeyde öğrendikten sonra sınavlar sizi bekliyor. Online kod düzenleme özelliği ile bir program yüklemeden istediğiniz dilde kodları değiştirip deneyebilme olanağı sunmakta. Site dilleri konusunda en çok tercih edilen sitelerin başında gelmektedir. W3School web sitesinin en güzel özelliği sitede gördüğünüz kodları hemen deneme imkanı sunan kendin dene özelliğidir.

W3school Nasıl Kullanılır ?

W3Schools.com adresine girdiğinizde hangi dilde eğitim almak istiyorsanız o dilin kategorisine giriş yapmalıyız. Seçtiğiniz Programlama dilinin sayfası açıldıktan sonra o dil ile ilgili dersler sol menüde eğitim seviyesine göre listelenmekte olduğu görülecektir. Yukarıdan aşağıya doğru seçilen dilin derslerinde sırası ile ilerleyerek eğitiminizi tamamlayabiliyorsunuz.

Dersler içerisinde bulunan kendin dene butonu ile kodlar üzerinde değişiklik yapıp yaptığınız düzenlemeyi canlı olarak görebiliyorsunuz.

Ayrıca W3School sitesinde ders aralarında sunduğu egzersizler ile öğrendiğiniz bilgilerin pekiştirilmesi sağlanıyor. Sitenin bir diğer özelliği ise size seçtiğiniz dille ilgili quizler yapması. Seçtiğiniz dilin eğitimlerini tamamladıktan ve yeter düzeyde öğrendiğinizi düşündükten sonra W3School  sitesinin online sınavlarını yapabilirsiniz ve bu sınavların sonucunda online sertifika sınavı ile sertifikanızı alabilirsiniz.

Kısacası udemy gibi eğitimin paralı olduğu sitelere alternatif oluşturan ve ücretsiz eğitimleri ile kendinizi geliştirebileceğinizi düşündüğüm güzel bir programlama sitesi. Benim eksi olarak gördüğüm konu ise videolu ders anlatımlarının bulunamaması. Bu da zaten sitenin tarzından kaynaklanan bir yapı olarak düşünmek gerekiyor.

Daha fazla okumak için W3school Nedir , Ne İşe Yarar , Nasıl Kullanılır ? ziyaret edebilirsiniz.

Web sitesi yapmak ve sitenizde güzel bir resim galerisi bölümü oluşturmak istiyorsanız yazımız tam size göre. Yazımızda Lightbox nedir , resim galerisi yapımında gerekli olan kütüphaneler ve nasıl yapılır konularına değineceğim. İlginizi çeken bir konu ise yazımıza hemen başlayalım.

Lightbox Nedir ?

Bootstrap kütüphanesi kullanarak sitenize bir çok özellik ekleyebileceğiniz gibi bu özelliklerden biride resim galerisidir. Web sitesi yapanlar için en gerekli bölümlerden biri olan resim galerisi bölümü yapmanıza yardımcı olmaya çalışacağım.

lightbox olarak bilinen bu resim galerisi için gerekli olan kütüphanelerden bahsetmek istiyorum. Bu sayfayı yapmak için bootstrap ve baguetteBox.min.css kütüphanesi kullanacağız.  Öncelikle ihtiyacımız olan eklentilerden bahsedeyim ve kolay ulaşmanız için linklerini ekleyeyim.

1. bootstrap kütüphanesinin çalışması için gerekli olan komut.
   <link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css”>
2. baguetteBox kütüphanesi ve java dosyası da aynı sayfaya eklenmelidir.
   <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.8.1/baguetteBox.min.css”><script src=”https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.8.1/baguetteBox.min.js”></script>
3. style.css bu dosya için gerekli ayarları ise konunun içine ekleyeceğim.

Lightbox Resim Galerisi Nasıl Yapılır ?

Öncelikle bootstrap kütüphanesi ve guetteBox kütüphanes css dosya linklerini <head></head> etiketleri arasına ekliyoruz. baguetteBox kütüphanesinin java dosyasınıda </body> etiketinin hemen üzerine yani body bitiminden hemen önceye ekliyoruz. ayrıca aşağıdaki

<script>
baguetteBox.run(‘.tz-gallery’);
</script>

bu java komutunu da aynı yere ekliyoruz. Daha sonra resim galerisinin html kodlarını hazırlamaya başlıyoruz. 3 resimlik örnek kodları ekleyeyim.  isterseniz bu örnek kodları genişleterek çoklu bir resim galerisi yapabilirsiniz.

<div class=”tz-gallery”>
<div class=”row”>
<div class=”col-sm-6 col-md-4″>
<div class=”thumbnail”>
<a class=”lighbox” href=”1.resim eklenecek“>
<img src=”1.resim eklenecek“> </a>
</div>
</div>
<div class=”col-sm-6 col-md-4″>
<div class=”thumbnail”>
<a class=”lighbox” href=”2.resim eklenecek“>
<img src=”2.resim eklenecek“>
</div>
</div>
<div class=”col-sm-6 col-md-4″>
<div class=”thumbnail”>
<a class=”lighbox” href=”3.resim eklenecek“>
<img src=”3.resim eklenecek“>
</div>
</div>
</div>
</div>

Burada 1. resim, 2. resim ve 3. resim  yazan yerlere istediğiniz bir resim ekleyebilirsiniz. En son olarak da css dosyası düzenlemesi yapalım.

Link olarak <link rel=”stylesheet” href=”style.css”> head bölümüne ekliyelim ve bu dosyayı oluşturup içerisine yüklenmesi için gerekli olan kodlar ise :

body {
background-color: #fff;
min-height: 100vh;
font: normal 16px sans-serif;
}

.gallery-container h1 {
text-align: center;
margin-top: 69px;
font-family: 'Droid Sans', sans-serif;
font-weight: bold;
color: #58594a;
}

.gallery-container p.page-description {
text-align: center;
margin: 30px auto;
font-size: 19px;
color: #85879c;
}

/* Styles for the gallery */

.tz-gallery {
padding: 40px;
}

.tz-gallery .thumbnail {
padding: 0;
margin-bottom: 30px;
border: none;
}

.tz-gallery img {
border-radius: 2px;
}

.tz-gallery .caption{
padding: 26px 30px;
text-align: center;
}

.tz-gallery .caption h3 {
font-size: 14px;
font-weight: bold;
margin-top: 0;
}

.tz-gallery .caption p {
font-size: 12px;
color: #7b7d7d;
margin: 0;
}

.baguetteBox-button {
background-color: transparent !important;
}

Bu yazıdaki tüm talimatlara uyarak düzenlemeler yapmışsarınız resimgaleriniz sorunsuz bir şekilde çalışacaktır. Bootstrap 4 ile farklı bir uygulama olan slider yapmayı merak ediyorsanız yazımızı inceleyebilirsiniz.

Bootstrap slider ( carousel ) nasıl yapılır ?

Daha fazla okumak için Lightbox Nedir Bootstrap İle Resim Galerisi Nasıl Yapılır? ziyaret edebilirsiniz.

Photoshop programında çok kolay bir şekilde yapılan gradyan renk sistemini css kodları ile yapmak istiyorsanız yazımız tam size göre. Yazımızda css ile gradyan renkler nedir ve nasıl yapılır konusunda bilgiler bulabilirsiniz. Gradyan renkleri yapmak için güzel bir site üzerinden anlatmaya çalışacağım.

Css Gradyan Nedir?

Bir renk tonundan diğer renk tonuna geçiş şeklindeki renklendirmeye gradyan denir. En az iki ve daha çok renk tonu kullanılabilir. Bu renk geçişlerini web sitenizde zemin rengi ya da bir div içerisinde kullanmak istiyorsanız sizin için güzel bir site tanıtacağım.  https://cssgradient.io/

Tanıtımını yapacağım ve kullanımını anlatmayı planladığın çok basit ve kullanışlı bir sitedir. Cssgradien sitesinde yaptığınız düzenlemeleri direk css kodu olarak bize hazırlıyor ve bu sayede sitemize ekleyip kullanabiliyoruz. Css Gradyan Renkler nedir kavramlarını açıkladığımıza göre siteyi tanıyalım ve nasıl kullanabileceğimizi resimlerle anlatalım.

Css İle Gradyan Renkler Nasıl Yapılır ?

https://cssgradient.io/ sitesine girdiğimizde anlaşılır ve basit bir site bizi karşılıyor.

Resimde görülen özellikleri maddeler halinde açıklayacak olursak ;

1. Yaptığımız renklendirmeleri gördüğümüz bir bölüm.
2. Renk geçiş mesafesi ayarı.
3. Secilen rengin alt renklerinin görüldüğü ve seçilebileceği ekran.
4. Dilerseniz renk kodunu RGB yada Hex kodu olarak girme seçeneği.
5. Mesafelerde değişecek renklerin kodlarının girildiği bölüm.
6. Grandyan rengin yapısı secimi yatay yada dairesel.
7. Renk geçiş yönü ayarı.
8. Renk geçiş türleri.
9. Hazırladığımız gradyan renk düzenlemesinin css kodunu bulacağımız bölüm yer almaktadır.

Biraz siteyi incelediğimiz zaman farklı farklı renk kombinasyonları için css kodlarının çok rahat hazırlanmakta olduğu görülmektedir. Hazır gradyan renk paletlerini kullanmak isterseniz bir çok örneğin bulunduğu swatches sayfasını inceleyebilirsiniz.

Bu sayfaya üst menüde giriş yapabilirsiniz. Sayfada bulunan bir çok renk paletlerinden birini beğendiniz ve kullanmak istiyorsanız yapmanız gereken tek şey sağ alt köşesinde bulunan kopyala butonuna tıklamak ve gradyan css renk kodunu almaktır.

Bir diğer hazır renk kodlarını bulup düzenleyebileceğiniz bölüm ise https://cssgradient.io/gradient-backgrounds/ sayfası burada da güzel gradyan renk kombinasyonlarını bulup çok rahat bir şekilde düzenleyip sol üst köşesinde bulunan kopyala butonu ile kopyalayıp sitenizde kullanabilirsiniz.

Daha fazla ayrıntı ve özellik için sitesini ziyaret edebilirsiniz. Umarım faydalı bir yazı olmuştur.

Daha fazla okumak için Css İle Gradyan Renkler Nedir , Nasıl Yapılır ? ziyaret edebilirsiniz.

Web sitesi yapıyorsanız ve resimlerinizde dikkat çekici güzel efektler kullanmak istiyorsanız bu yazımız tam size göre. Yazımızda resim hover efekti nedir ve nasıl kullanılır hazır efektlerin bulunduğu site üzerinden açıklamaya çalışalım.

Resim Hover Efekti Nedir ?

Bir çok web sitesinde karşılaşacağınız resmin üzerine geldiğinizde büyümesi, sosyal medya ikonlarının çıkması ya da çerçevelerin çıkması gibi efektler dikkatinizi çekmiştir. İşte buna resim hover efekti denilmektedir. Bu efekti yapmak için bir çok yöntem bulunmaktadır. Genellikle bu efekt Css ile yapılmaktadır. Css konusunda yeterli düzeyde bilgiye sahipseniz kendiniz de yapabilirsiniz.

Fakat ben bu yazımda size en basit yol olan işinize yarayacak bir site olan https://miketricking.github.io/bootstrap-image-hover/ dan  hazır efekti sitenize nasıl ekleyip  çalıştıracağınızı örneklerle anlatmaya çalışacağım. Resim hover efekti nedir konusunu açıkladığımıza göre nasıl kullanılacağı konusunda bilgiler verelim.

Resim Hover Efekti Nasıl Kullanılır ?

Öncelikle bu özelliği  sitemizdeki resimlerde kullanabilmek için  bootstrap kütüphanesinin sitemizde tanımlı olması gerekiyor. Bootstrap kütüphanesini sitenize tanımlamayı bilmiyorsanız eğer bootstrap nedir? konulu yazımızı inceleyerek sitenize nasıl entegre edeceğiniz  hakkında bilgi alabilirsiniz.

Bu efekt için hazır örnekler ve kodlar bulunan https://miketricking.github.io/bootstrap-image-hover/

sitesine giriş yapıyoruz. Karşımıza çıkan sayfada  16 adet efekt ön izlemesi çıkacak. Bu 16 adet hover efektinden istediğimiz bir taneyi seçip sitemizde kullanabiliriz. Bunun için beğendiğiniz bir efektin üzerine basalım. Açılan pencereden css kodlarını alalım. Bu kodları kendi web siteniz için tanımladığınız css dosyasının içerisine genelde bu style.css olur içerisine ekleyelim. Html kodunu ise kendinize göre düzenleyip sitenizde kullanabilirsiniz. Daha ayrıntılı anlatabilmek için örnek üzerinden anlatmaya çalışalım.

Bootstrap kütüphanesi tanımlama işlemini yaptıktan sonra sitemiz için tanımladığınız style.css dosyanızın ( yada siz hangi isimle css dosyası tanımadıysanız ) içerisine aşağıdaki css kodlarını ekliyorsunuz. Tabi şunu da belirteyim buradaki kod hover bir efektinin kodlarıdır.

html bölümüne ise yine aşağıdaki örnek kodu kullanabileceğimiz gibi isterseniz kendinize göre düzenleyerek de kullanabilirsiniz.

<div class=”col-lg-3 col-md-4 col-sm-6 col-xs-12″>
<div class=”hovereffect”>
<img class=”img-responsive” src=”resim1.jpg” alt=””>  /* resim bu bölüme ekleniyor */
<div class=”overlay”>
<a class=”info” href=”link buraya”></a> /* bir link vermek için bu alan kullanılıyor */
</div>
</div>
</div>

bu şekilde bir düzenleme yapmanız gerekmekte. Sitede bulunan diğer efektlerden de istediğinizi bu şekilde çalıştırabilirsiniz. Umarım yazımız sizin için faydalı olmuştur.

Daha fazla okumak için Resim Hover Efekti Nedir , Web Sitesinde Nasıl Kullanılır? ziyaret edebilirsiniz.

Bu yazımızda web sitesi renk uyumu nedir konusunda zorluk çekiyorsanız işinize yarayacağını düşündüğüm 2 siteden bahsetmek istiyorum. Hazırsanız yazımıza başlayalım.

Web Sitesi Renk Uyumu Nedir ?

Günde bir çok web sitesine girip yazılar okuyup resimlere bakıp çıkıyoruz fakat bazı sitelerde gezerken çok güzel bir web sitesi renk uyumu ve düzeni ile karşılaşırken bazı sitelerde bu uyumu bulamıyoruz. İşte burada uyumlu renklerle çalışma konusunu bilmek gerekiyor.

Genelde insanlar web site yaparken renk paleti açıp buradan beğendiği renklerle çalışmayı tercih ediyorlar. Fakat daha profesyonel siteler tasarlayanlar renk uyumu konusunda içerikler ve renk paletleri olan siteleri tercih ediyor ve bu uyumlu renklerle site çalışmaları yapıyorlar. Sizde site tasarlarken renklere dikkat etmelisiniz.

Ayrıca renk tercihlerinin web sitesi ziyaretçilerinin sitenize girdiğinde ilk olarak neler hissettirdiğini de bilmek önemlidir. Yoksa bilmeden saçma bir renk seçip insanların ilk izlenim olarak siteden çıkma isteğini tetiklemiş olabilirsiniz. Ana renklerin insan duyguları üzerinde ki etkisini de inceleyelim ve kullanacağımız araçları tanıtalım.

Renklerin Hissettirdiği Duygular Nelerdir ?

• Beyaz : Saflık sadeliktir.
• Siyah : Güçlü ve tutkulu olmanın rengidir.
• Kırmızı : Macera ve heyecanın rengidir.
• Sarı : Rahatlama hissi veren renktir.
• Turuncu : Güneş gibi sıcağı simgeler.
• Mavi : Mavi ve tonları web sitelerinden çok kullanılır. Saygı ve ciddiliğin rengidir.
• Yeşil : Doğayı ve huzuru çağrıştırır.

Web Sitesi Renk Uyumu İçin Kullanılacak İki Site

1- Flatuicolors Sitesi

flatuicolors sitesine girdiğimizde sade ve kolay bir tasarımla karşılaşacaksınız. Bir çok renk paletinin olduğu ana sayfa karşımıza çıkmaktadır. Bu sayfadan istediğimiz bir palet türüne giriş yapabiliriz. Açılan renk paleti sayfasından birbiri ile uyumlu renk tonlarından hangi rengi kullanmak istiyorsan o rengin üzerine basılması ile birlikte renk kopyalanmış olacaktır.

Kopyalanan rengin Hex renk formatın da biçimlendirilmiş şekilde kopyalandığı görülmektedir. Genelde kodlama en çok tercih edilen renk kodu türü hex formatıdır. Fakat siz diğer türlerde renk kodlarına da erişmek isterseniz sayfanın üst bölümünde bulunan copy format seçeneğinden. ( üstteki resimde de görüldüğü gibi ) daha farklı bir format türünü de seçip buna göre renk kodlarını kopyalayabilirsiniz. Dört adet renk türü bulunmaktadır hangisi sizin için uygunsa o formatı seçip istediğiniz resme basarak rengin kodunu kopyalayabilirsiniz.

2- Materialcolors Sitesi

materialcolors.com renk uyumu sitesinden de kısaca bahsetmek gerekirse daha kolay bir tasarıma sahip olan bir site. Siteye giriş yaptığımız zaman hemen renk paleti karşımıza çıkıyor. Burada kodları direk üzerine basarak kopyalama imkanı vermese de hex türünde renk kodları üstlerinde yazdığı için beğendiğimizi sitemizde kullanabiliriz.

Bu sitenin en güzel özelliği ise bu renklerin hemen bir menüde yada bir başlık yazısında nasıl göründüğünü görme imkanı tanımasıdır. Renk paletinde gördüğünüz renklerden büyük kutulara bastığınızda üstte bulunan menü renginin ve başlığın o renk tonu ile  nasıl gözüktüğü hemen görülmekte. Küçük renk kutularına açtığınızda ise başlık altı çizginin renk değişimi görülmektedir. Bu  özellik sayesinde hemen sonuçları gözlemleyerek renk tonunu beğenme imkanı bulabiliriz.

Daha fazla okumak için Web Sitesi Renk Uyumu İçin Kullanabileceğiniz Araçlar ziyaret edebilirsiniz.

Fontawesome Nedir ?

Fontawesome nedir kavramını kısaca özetleyecek olursak web sitelerinde kullanılan görsel ( ikonlar ) ögelerin ücretsiz bir şekilde sunulduğu bir css kütüphanesidir. Web sitesi hazırlıyorsunuz ve işinize yarayacak küçük görseller ( ikonlar ) lazım, bunların tamamını bulabileceğiniz bir sitedir. Ücretli olanlar var ancak ücretsiz olarak bulabileceğiniz bir çok seçenek sizin için yeterli olacaktır.

Fontawesome Nasıl Çalışır ?

Bu iconlarını sitenizde kullanmak istiyorsanız yapmanız gereken ilk adım websitesini ziyaret etmektir. Sitenin ana sayfasında bulunan ‘start for free’ butonuna tıklayıp ücretsiz üyelik işlemlerini başlatıyoruz. Bizden bir mail adresi isteyecek, bir mail adresi girilip ‘create & use this kit’ butonuna tıklandığında üyelik onay maili alacaksınız. Mail onaylandıktan sonra bir şifre belirlemenizi isteyecek. Bu adımı da tamamladıktan sonra ayrıntı bilgilere gerek olmadan bize lazım olan koda ulaşabiliyoruz.

Aşağıda yazdığım kod örnektir sitenize eklemeyin çalışmaz.

<script src=”https://kit.fontawesome.com/1535646d55.js” crossorigin=”anonymous”></script>

Buna benzer bir kod üretecek bu kodu alıp sitemizin <head></head> etiketleri arasına eklediğimizde artık fontawesome ikonlarını sitenizde kullanabiliriz.

Bir başka yöntem ise vereceğim link. Daha önce Fontawesome sitesinde böyle üyelik işlemleri yoktu direk kodları veriyordu o kodlar da halen çalışmakta ben linki paylaşayım.

Aşağıdaki link i sitenizde <head></head> etiketleri arasına eklediğiniz zaman Fontawesome kütüphanesi sitenize entegre olacaktır.

<link rel=”stylesheet” href=”https://use.fontawesome.com/releases/v5.5.0/css/all.css” integrity=”sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU” crossorigin=”anonymous”>

Bu İkonlar Nasıl Kullanılır ?

Uygulamanın sitesine giriş yaptığımızda en üstte bulunan ‘search icons’ kutucuğuna kullanmak istediğimiz ikonun ingilizce ismini yazıyoruz. Örneğin facebook gibi. Bulunan sonuçların üzerine geldiğimiz zaman üzerinde pro yazmayanlar ücretsiz olanlardır. Bunlardan beğendiğimize tıklıyoruz.  Açılan sayfadan  ikonumuzun resminin hemen üzerinde sitede kullanmamızı sağlan html kodu bulunmakta.

• <i class=”fab fa-facebook”></i>

Örnekteki gibi kodun üzerine tıkladığınızda kod kopyalanmış olur. Sitenizde nerede kullanmak istiyorsanız bu kodu eklemeniz yeterli olacaktır.

• <i class=”fas fa-facebook”></i>

Not: Eğer fab la başlayan class lar açılmas ise fab yazan yeri  fas yada fa olarak değiştirmenizi öneririm.

Fontawesome İcon Büyütme Nasıl Yapılır ?

Eğer ikon boyutunu büyütmek isterseniz bunun içinde yazacağınız basit bir kod ile boyutlandırma yapabilirsiniz. Örneğin facebook ikonun kullanacaksınız bunu daha büyük bir şekli lazım. Ayrıca bunun için,

• <i class=”fab fa-facebook”></i> olan kodumuzu
• <i class=”fab fa-facebook fa-3x”></i> şeklinde değiştiriyoruz.

Diğer boyutlar için ise yine aynı şekilde fa-2x fa-3x fa-4x fa-5x gibi boyutlandırmalar kullanabilirsiniz.

Daha fazla okumak için Fontawesome Nedir Web Sitesinde Nasıl Kullanılır ? ziyaret edebilirsiniz.

Bootstrap 4 Carousel Nedir ?

Bootstrap 4 carousel nedir : java script desteği ile oluşturulmuş, web sitelerinde kullanılan basit bir slayt ( slider ) gösteridir. Slayt gösterilerinizde resim yada video kullanmanıza imkan tanımaktadır. Ayrıca bu  görsellerin üzerine istediğiniz bileşeni eklemeniz ( yazı ve buton gibi ) mümkündür.

Not: Responsive bir sayfa yapmak istiyorsanız burada eklediğiniz görsellerin boyutlarını ayarlamanız gerekiyor yani hepsinin aynı boyutta olaması gerekmektedir yoksa sorun yaşayabilirsiniz. Bunun için de Photoshop gibi resim düzenleme programlarını kullanmanız gerekmektedir.

Bir çok farklı carousel türü bulunmaktadır fakat bootstrap ‘ın carousel slider ‘i en çok tercih edilenlerden biridir. Zaten bootstrap kütüphanesi ücretsiz ve responsive görüntülenen aygıta göre boyut değiştirebilme özelliği olmasından dolayı bu carousel tercih etmektedir. Yazımızda bootstrap’ın bu bileşeninin sitenizde nasıl kullanılacağından kısaca bahsedeceğiz.

Bootstrap 4 Slider Nasıl Yapılır ?

Bootstrap nedir nasıl kullanılır adlı bir önceki yazımızda da anlattığımız gibi öncelikle bu kütüphanenin sitemize tanıtılması gerekmektedir. Eğer kütüphaneyi sitenize eklemeyi bilmiyorsanız bir önceki yazımıza bakabilirsiniz. Bootstrap 4 Slider bileşenini sitemize eklemek için önce bootstrap corousel sayfasına gidiyoruz. Buradaki kodlar sayesinde istediğimiz tarz bir slayt gösterisi hazırlamamız mümkün olacaktır. Örneklerle anlatacak olursak .

Sadece slayt geçişi olan kullanıcıların geçişlere müdahale etmediği, yani ileri geri slaytları değiştirmelerini istemiyorsanız aşağıdaki kodları kullanabilirsiniz.

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">  "" Bu bölüme  resim ekleniyor ""
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="..."> "" Bu bölüme  resim ekleniyor ""
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="..."> "" Bu bölüme  resim ekleniyor ""
</div>
</div>
</div>

Sitenize eklemeniz yeterli olacaktır burada img etiketlerinde src bölününe resimlerinizin yolunu eklemeniz yeterli olacaktır. Geçiş süresini belirlemek isterseniz  en üst bölümde bulunan div tablosunun icerisine data-interval=”” özelliğini ekleyip icerisine milisaniye cinsinden geçiş süresini yazmanız gerekmektedir.

Bu slayt gösterisinde ileri ve geri butonları olsun isterseniz son kapatılan div etiketi üzerine aşağıdaki kodları eklemeniz yeterli olacaktır.

<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>

Slaty geçişlerinizin kayarak geçmesi yerine solarak bir sonraki slatyın açılması istiyorsanız. en üst bölüme carousel-fade özelliğini eklemeniz gerekiyor. Örneği aşağıda

<div id=”carouselExampleFade” class=”carousel slide carousel-fade” data-ride=”carousel”>

Resim yada Video slaytlarınız üzerine bilgilendirme yazıları eklemeyi düşünüyorsanız ise hangi resme eklemek istiyorsanız o resmin altına h1, h2, h3, h4, h5 gibi yazı boyutları yada P gibi  paragraf yazısı ekleme imkanı bulunmaktadır.

<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">

<h5>Bir başlık ekleyebilirsiniz</h5>
<p>Bir paragraf yazısı yazbilirsiniz</p>

</div>

Bootstrap 4 carousel slider a alternatif bir slider çalışması yapmak isterseniz Owl Carousel 2 nedir başlıklı yazımızı inceleyebilirsiniz.

Daha fazla bilgi ve diğer bootstrap bileşenlerini öğrenmek için web sitesini ziyaret edebilirsiniz.

Daha fazla okumak için Bootstrap 4 Carousel Nedir , Slider Nasıl Yapılır ? ziyaret edebilirsiniz.

Bu yazımız ile bootstrap nedir ne işe yarar konusunu anlatıp daha sonra gelecek yazılar ile daha ayrıntılı kullanımlarına değineceğiz.

Bootstrap Nedir Ne İşe Yarar ?

CSS ve Java script kodları sayesinde daha kolay ve hızlı bir şekilde siteler tasarlamamızı sağlayan araçları barındıran açık kaynak kodlu bir platformdur. Bu platformun en önemli özelliği responsive siteler tasarlamaya imkan vermesidir. Yeni bir kavram daha responsive bir de bu kavramı açıklayalım ki kafa karışıklığı olmasın.

Responsive Nedir ?

Bootstrap platformunun en önemli özelliği responsive siteler hazırlamaktır. Yani bilgisayar, tablet ve cep telefonlarında görüntülenen sitelerin o sistemin ekran çözünürlüğüne göre sayfayı boyutlarını otomatik olarak yeniden düzenlemesidir. Ayrıca bir çok hazır web sitesi bileşenini sadece koplaya yapıştır yöntemi ile kullanmanıza imkan vermektedir.

Bootstrap sitesine girildiğinde sitenizde kullanabileceğiniz bir çok bileşenin hazır kodlarına ulaşabilirsiniz. Örneğin sayfanızda Carosel (Slayt şeklinde resim) bölümü yapmak istiyorsunuz. Bunun için Carosel bölümüne girip oradan istediğiniz bir Carosel türünü seçip kodunu sitenize yapıştırmanız ve kendinize göre değişiklik yapmanız yeterli olacaktır. Ayrıca daha bir çok bileşenin de menüler, formlar gibi hazır kodlarını bulup sitenizde kullanabilirsiniz. Tabi bu kodların sitenizde çalışabilmesi için sitenize bootstrap ı dosyalarını entegre etmelisiniz.

Bootstrap Nasıl Kullanılır ve Siteye Entegre Edilir ?

Getbootstrap  adresine girdiğimizde karşımıza çıkan sayfada getstarted ve download seçenekleri bulunmaktadır. Önce getstarted  bölümünü anlatalım, bu bölüm seçildiğinde yeni acılan sayfada CSS kodunu kopyalayıp
bu kodu sitemizde bulunan <head>    </head> bölümleri arasına yapıştırmamız gerekmektedir. Sonra JS bölümünde bulunan  kodları da kopyalayıp sitemizin <body> ….  bu kısma</body>  bölümünün en altına ekliyoruz. Artık sitemiz bootstrap bileşenlerini çalıştırabilir duruma geliyor. Zaten css kodu ve js kodunun nerelere eklenmesi gerektiği ile ilgili bir örnek bölümünde aynı sayfada yer almakta.

Örnekte olduğu gibi kodlarımızı yerleşimini gerçekleştiriyoruz.

<html>

<head>

buraya css kodunu ekliyoruz

</head>

<body>

burayada JS kodunu ekliyoruz

</body

</html>

ve istediğimiz bileşenin kodunu alıp sitemizde kullanabiliyoruz.

Bu yöntem en kolay olanı.Bir de uzun yöntem var. Bunda da yükleme bölümünden bootstrap dosyalarını indirip sitemize yüklüyoruz. Sonra bootstrap klasörünün içinde  css ve js klasörleri göreceksiniz aynı üstte anlattığımız gibi.  css kodunu aşağıdaki örnekte olduğu gibi <head></head> etiketleri arasına ekliyoruz. burada dosya yolu olarak kendi sitemize göre düzenleme yapmalıyız.

Js klasöründe bulunan dosyayı yüklemek için ise yine kendi sitemize göre dosya yolunu ayarlayıp <body></body> etiketleri içerisinde en alt ekliyoruz.

<body>

Site kodları ve bileşenleri bu kısıma gelmelidir.

js kodu ise bu alana gelecek

</body> kodunun hemen üzerine ekliyoruz.

Bu sayede bootstrap bileşenlerini artık sitemizde çalıştırabilir duruma getiriyoruz.

Daha fazla okumak için Bootstrap Nedir Ne İşe Yarar Web Sitesinde Nasıl Kullanılır ? ziyaret edebilirsiniz.

Öğrencileriniz ve çocuklarınız için araştırdığınız robotik kodlama nedir, setleri nelerdir ve öğretim yöntemleri ile nasıl öğrenilir konusunda kısaca bilgiler vereceğimiz kılavuz niteliğinde bir yazı hazırladık. Umarım faydalı olur.

Robotik Kodlama Nedir Kısaca ?

Bir çok bilim dallarının ortak öğretiminin söz konusu olduğundan. Eğitimde çoklu zeka kuramına denilen yöntemle çocukların gelişimini sağlayan çalışmalar bütünüdür. Bu yönteme STEAM veya FETEMM de denilmektedir. İşte bu bilim dalları kullanılarak öğretim yapılan sisteme denilmektedir.

Günümüzde robotik kodlama setlerinin uygun fiyatlarda olması, robotik eğitim setlerinin çokluğu ve kurulum parçalarının kolay ulaşılabilirliği sebebiyle yaygınlaşmaya başlamıştır. Artık her ilde bu eğitimin verildiği atölyeler kurulmakta sınıflar oluşturulmaktadır. Çocukların ürünler oluşturup bunları sergilemesi ve robotik kodlamayı öğrenmesi çağımız koşullarında elzem bir durum olmaktadır.

En Çok Tercih Edilen Kodlama Eğitim Setleri Nelerdir ?

1. Arduino : Açık kaynak kodlu bir platformdur. Sensörler, motorlar ve diğer elektronik parçalar ile aklınıza gelebilecek tüm devreleri yapmanıza olanak sunmaktadır. En çok tercih edilen setlerden biridir. Daha fazla bilgi almak isterseniz. Arduino nedir yazımızı inceleyebilirsiniz.
2. Mbot : Hazır devre sistemlerini birleştirerek daha kolay hareketli robotlar yapmanıza olanak sunan bir settir. Robotik kodlamada başlangış seti olarak tercih edilebilirsiniz. Arduino ya göre daha az kodlama ve parça bilgisine gerek duymadan öğrenilmesi daha kolaylaştırmaktadır.
3. Lego Mindstorms ev3 : Lego parçaları ile robotik platformunu birleştiren bir sistemdir. Mbot sisteminin gelimiş versiyonudur. Biraz pahalı bir sistem olduğu için içlerinden en son tercih edilen sistem olmaktadır.

Fiyat olarak en uygun olanı ardiuno olduğu için daha çok bu sistem üzerinden robotik kodlama öğretilmektedir. Ardiuno ile elektronik devre setlerinin ve bu devre elemanlarının birleştirilmesi yöntemiyle  uygulamalar yapılmaktadır. Burda çocuklar çoklu disiplinler kuralına uygun mekanik tasarımlar yaparak bu tasarımları oluşturmak için elektronik parçalarını birleştirip sonrada bu oluşturduğu cihaza neler yaptıracağını kodlar sayesinde yükleyerek çalışmalar yapmaktadır.

Robotik Kodlama Nasıl Öğrenilir ?

Ders olarak öncelikle problem çözme ve algoritma kavramlarının öğretilmesi için oyun bazlı scratch programı veya code.org sitesi üzerinden eğitime başlamakta daha sonra Ardiuno gibi elektronik sistemleri ile robotik kodlama öğretilmektedir. Ardiuno sayesinde elektroniği , kodlamayı ve mekaniği yani bir çok bilimsel alanı birlikte kullanmayı öğreniyor.

Velilere önerim çocuğunuzun kodlama öğrenmesini istiyorsanız ama bulunduğunuz bölgede böyle bir kurs yoksa. İnternet üzerinden code.org sitesinde etkinlikleri yaptırarak temel kodlama mantığını öğrenmesini sağlayabilirsiniz. Code.org konusunda bir bilginiz yoksa Code.org nedir yazımızı okuyarak çocuğunuza kodlama öğretmeye başlayabilirsiniz.

Kodlama yapmayı öğrenmek için sadece scratch , code.org yada tynker yeterli olmaz tabi, çocuğun elle tutulur işlemler yapabilmesi ve bu yaptığı çalışmaların sonuçlarını inceleyebilmesi için robotik devre setlerine ihtiyaç vardır. Bu setleri internet üzerinden bulabilirsiniz ve satın alabilirsiniz. Bu konuda önerim bilindik alış veriş sitelerine sipariş vermenizdir.

Sonuç olarak hevesli bir çocuğunuz varsa basit adımlarla ilerleyerek, hem siz kendinizi geliştirebilir hem de çocuğunuz robotik kodlama ile eğlenceli vakit geçirebilecektir.

Daha fazla okumak için Robotik Kodlama Nedir Nasıl Öğrenilir Kısaca Bilgi Verelim ziyaret edebilirsiniz.

Otomatik Sulama Sistemi Nedir ?

Kendi kendine belirli koşullar sağlandığında çalışan, hazır bir sistem kurulumu ile iş gücünü azaltmaya yönelik çalışmalar olarak tanımlayabiliriz. Evet Yanlış okumadınız! Her yerde bulabileceğiniz akvaryum motoru ile çok fazla para harcamadan otomatik sulama sistemi projesini nasıl yaparız, bunu anlatmaya çalışacağım. Bu projeyi aynı zamanda Tübitak 4006 Projesi olarak da kullanılabileceğinizi belirteyim. Proje arayanlar ya da bu tip bir proje yapmayı düşünenler çok para harcamadan da otomatik sulama sistemi yapabilirler.

Arduino İle Basit Otomatik Sulama Sistemi Projesi Nasıl Yapılır ?

Otomatik sulama sistemi kendi kendine belirli koşullar sağlandığında çalışan, hazır bir sistem kurulumu ile iş gücünü azaltmaya yönelik çalışmalar olarak tanımlayabiliriz.

Projemiz için neler gerekli madde madde bunlardan bahsedecek olursak.

1. Arduino uno
2. Nem sensörü
3. 5 volt – 250 volt röle
4. Akvaryum hava motoru
5. Kablolar
6. Su ve Damlama boruları

Otomatik Sulama Sistemi Projesi Devrenin kurulumu ve Kodlar

Kafanızdaki soru işaretini kaldırmak için açıklama yapayım. Akvaryum motoru nasıl su gönderecek diye düşünebilirsiniz. Akvaryum motoru normalde suyun içerisinde hava gönderen bir sistemdir. Fakat biz onun itiş kuvvetinden yararlanacağımız için hava borusunu iptal edip buradan su alacak şekilde bırakıyoruz. Havayı iten ön ucuna ise sulamak istediğimiz yerlere çekeceğimiz boruyu bağlıyoruz. Resimde görüldüğü gibi.

Resimde görülen 1 nolu uç hava giriş bölümü olarak kullanılan yer,  bunu iptal ediyoruz ve motorumuzun tamamını su kaynağının içerisine koyuyoruz.. 2 nolu çıkışına su borusu bağlayarak sulamak istediğimiz yere hortumu çekiyoruz. Gelelim devre kurulumuna. Arduino konusunda hiç bir bilginiz yoksa arduino nedir bileşenleri nelerdir ? konulu yazımıza bakmanızı tavsiye ederim.

Arduino programı ile cihazınıza aşağıdaki kodu yüklüyoruz.

void setup()
{
pinMode(2, OUTPUT);
pinMode(3, OUTPUT);
Serial.begin(9600);
}

void loop()
{
int nem = analogRead(A0);
Serial.println (nem);
if (nem <= 250)
{
Serial.println("Toprak ideal nem seviyesinin cok ustunde");
digitalWrite(2, HIGH);
digitalWrite(3, HIGH);
delay(2000);
}
else if (nem > 250 && nem <= 350)
{
Serial.println("Toprak ideal nem seviyesinin ustunde");
digitalWrite(2, HIGH);
digitalWrite(3, HIGH);
delay(2000);
}
else if (nem > 350 && nem <= 450)

{
Serial.println("Toprak ideal nem seviyesinde");
digitalWrite(2, HIGH);
digitalWrite(3, HIGH);
delay(2000);
}
else if (nem >450 && nem <= 550)
{
Serial.println("Toprak ideal nem seviyesinin altinda ve sulama sistemi devreye girecek");
digitalWrite(2, LOW);
digitalWrite(3, LOW);
delay(2000);
}
else
{
Serial.println("Toprak ideal nem seviyesinin cok altinda ve sulama sistemi devreye girecek");
digitalWrite(2, LOW);
digitalWrite(3, LOW);
delay(2000);
}
delay(2000);
}

kodları yükledikten sonra 2 ve 3 nolu çıkışlara rölemizi bağlıyoruz. Nem sensörü için ise bağlantıları A0 çıkışı A0, a 5v 5v a ve son olarak GND ucunu GND ye bağlıyoruz. Resimde de görüldüğü  gibi yapıyoruz.

Sistemi aşağıdaki örnek resimde görüldüğü gibi kuruyoruz ve sistemimiz çalıştırılmaya hazır hale geliyor.

Eğer tübitak 4006 projesi olarak yapacaksanız 220 volt ile çalışacağı için devre elektrik bağlantı noktalarını çok dikkatli bir şekilde yalıtımlı hale getirmeyi unutmayınız.

Daha fazla okumak için Arduino İle Otomatik Sulama Sistemi Projesi Nasıl Yapılır? ziyaret edebilirsiniz.

Bu yazımızda web sitenizde kullanabileceğiniz harika bir java script kütüphanesinden bahsedeceğim. Benimde kendi sitelerimde kullandığım bu eklenti ile çok güzel siteler tasarlayabilirsiniz. Gelin isterseniz Aos nedir konusunu anlatarak yazımıza başlayalım ve nasıl kullanacağınızı örneklerle açıklayalım.

AOS Nedir ?

Öncelikle AOS nedir kavramını açıklayalım. Bu kütüphane sitemizin içerisindeki div etiketleri kullanarak ayırdığımız bölümleri AOS kütüphanesi sayesinde animasyonlu bir şekilde görüntülenmesini sağlar. Animasyonlu görüntüden kasıt power point programında slayt hazırlar gibi bölümlerin ve içerisindeki bileşenlerin sağdan soldan yukarıdan ve daha bir çok şekilde sayfada görüntülenmesidir. Görsellerle nasıl kullanılacağını kısaca anlatalım.

AOS Kütüphanesini Nasıl Kullanılır?

aos java script kütüphanesi sitesi : michalsnik.github.io/aos/

Öncelikle gerekli olan css dosyası ve java dosyasının bağlantılarını sitemize eklemeliyiz. Bunun için Aos nin web sitesine giriş yapıyoruz. Sayfanın en altında bulunan kodları sayfamıza ekliyoruz. Yazının devamında kodları bulabilirsiniz ancak güncelleme yapılmış olma ihtimaline karşı kodların orijinal sitelerinden alınmasını tavsiye ederim.

AOS Siteye Entegre Etme

css ve java dosyalarının sitemize eklenmesi gerekmektedir. Aşağıda bulunan kodlar sayesinden bu işlemi gerçekleştirebilirsiniz. Css kodunu sitenin head bölümüne ve js kodunu ise body etiketi bitiminden bir önceki satıra eklenmelidir.

CSS

<link href=“https://unpkg.com/aos@2.3.1/dist/aos.css” rel=“stylesheet”>

JS

<script src=“https://unpkg.com/aos@2.3.1/dist/aos.js”></script>

Bu kodlardan Css kodunu <head></head> etiketleri arasına  java script  kodunu ise </body> etiketinin hemen üzerine ekliyoruz. Ayrıca yine </body> etiketinin hemen üzerine aşağıdaki kodu ekliyoruz.

<script>
AOS.init();
</script>

Bu sayede sitemiz artık AOS kütüphanesini kullanabilir hale geliyor.

Örnek kodlarla kullanımını gösterelim.

Bir bölümün tablonuzun sayfa yüklendiği sırada sağdan giriş yapmasını istiyorsanız.

<div data-aos=“fade-right”></div>

yada div etiketlerinin icerisine <section></section> etiketi açıp buna animasyon ekliyoruz. onun yazım şekli ise 

<section data-aos=“fade-right”> </section>

Dönerek açılan bir animasyon istiyorsanız eğer

<div data-aos=“flip-left”></div>

komutlarını kullanıyorsunuz.

Zoom efekti vermek isterseniz

<div data-aos=“zoom-in”></div>

komutlarını kullanıyorsunuz.

Sayfanızda bir bölümün yukarıdan aşağıya belirli bir sürede açılmasını isterseniz ise

<div data-aos=“fade-up”      data-aos-duration=“3000”> </div>

kodlarını kullanıyorsunuz. Burada data-aos-duration=“3000” mili saniye cinsinden efektin süresini ayarlıyor. İsteğinize göre değiştirebilirsiniz.

Daha fazla örnek uygulama ve görselleri için AOS sitesini ziyaret etmelisiniz.

michalsnik.github.io/aos/

Daha fazla okumak için AOS Nedir ? Bu Js Kütüphanesi Nasıl Kullanılır? ziyaret edebilirsiniz.

Dropzone Nedir ?

Dropzone js kütüphanesi Nedir kısaca açıklayacak olursak. Web siteleri için kullanılabilecek çoklu resim yükleme işlemi yapabileceğiniz java script eklentisidir. Çoklu resim yükleme işlemlerini sitenizde kullanmak istiyorsanız bu eklenti tam size göre. Bu kütüphane sayesinde çoklu resim yükleme işlemlerini oldukça kolay bir şekilde yapabilmeniz için ne yapmanız gerektiğini en basit ve çalışan kodlarla anlatmaya çalıştım.

Dropzone JS Kütüphanesi Nasıl Kullanılır ?

Öncelikle kütüphanenin web sitesi olan https://www.dropzonejs.com/ adresine girip bizim için gerekli olan dosyaları sitemize entegre etmemiz gerekmektedir. Siteye giriş yaptığımızda ilk yapmamız gereken  java dosyasını edinmek. dropzone.js dosyasını siteden alıyoruz. Sitemizin <head> </head> etiketleri arasına ekliyoruz. Burada dosyayı alt klasöre atabilirsiniz fakat ben en basit halinin kök dizine atıp link verdiğim kodunu ekleyeyim.

<script src="dropzone.js"></script>

Ayrıca jquery dosyasına da ihtiyaç duyacağından dolayı onu da sitemize entegre etmemiz gerekmekte. code.jquery.com jquery sitesinden gerekli olan js dosyasını da edindikten sonra yine resim yüklemede kullanacağımız sayfamıza ekliyoruz.

<script src=”jquery-3.4.1.min.js”></script>

Yine bu kütüphane için gerekli olan dropzone.min.css dosyasını edinip sitemize ekliyoruz. Vereceğim linkte  gerekli olan bu dosyayı da bulabilirsiniz. Adres https://cdnjs.com/libraries/dropzone

<link href=”dropzone/dist/min/dropzone.min.css” rel=”stylesheet”>

kütüphane için gerekli olan eklentileri ekledikten sonra form bölümünü yapmalıyız. Bu eklentinin en güzel özelliklerinden biri de çok sade bir form yapısı ile çalışıyor olması. Form kodları ise şu şekildedir.

<form method=”post” action=”upload.php” class=”dropzone”></form>

Bütün bu kodların bir html dosyasında olacak şekilde “upload.html”  bir dosya oluşturuyoruz.

<html>
<head>
<meta charset="utf-8">
<title>Başlıksız Belge</title>
<script src="dropzone.js"></script>
<script src="jquery-3.4.1.min.js"></script>
<link href="dropzone.min.css" rel="stylesheet">
</head>
<body>
<form method="post" action="upload.php" class="dropzone"></form>
</body>
</html>

Bu sayfayı oluşturduktan sonra form bölümünde belirttiğimiz dosyaların yükleme işlemini yapacak olan upload.php dosyasını oluşturmakta. Onun örnek kodları ise aşağıdaki gibi olmalıdır.

<?php
$ds = DIRECTORY_SEPARATOR;

$storeFolder = 'img/';

if (!empty($_FILES)) {

$tempFile = $_FILES['file']['tmp_name'];

$targetPath = dirname( __FILE__ ) . $ds. $storeFolder . $ds;

$targetFile = $targetPath. $_FILES['file']['name'];

move_uploaded_file($tempFile,$targetFile);

}
?>

Bu kodlarla upload.php dosyasını oluşturduktan ve $storeFolder içinde belirtilen klasör yani img klasörünü de  açıyoruz resimler bu klasöre gelecek. Çoklu resim yükleme dosyamız artık çalışır hale gelecektir.

Upload.html çalıştırılıp istediğimiz resimleri belirtilen bölüme sürükleyip bıraktığımız zaman sırası ile resimleri belirtilen klasöre yükleme işlemi gerçekleştiğini göreceksiniz. Kullanımı bu kadar kolay umarın anlatım karmaşık olmamıştır.

Çok ayrıntıya girmeden kısaca anlatıp çalışır versiyonunu deneyerek kodlarını siteme ekledim sizinde işinize yarayacağını düşünüyorum. Dropzone nedir , ne işe yarar konulu yazımız umarım faydalı olmuştur.

Daha fazla okumak için Dropzone Nedir , Nasıl Kullanılır Basit Uygulama Örneği ziyaret edebilirsiniz.

Bu yazımızda python nedir , ne işe yarar hangi amaçla kullanılır, Hangi editörü kullanmalısınız, kurulumu ve neler yapılır sorularına kısa kısa değinmek istiyorum. Bu konuda bilgi edinmek isterseniz yazımıza hemen başlayalım.

Python Nedir , Ne İşe Yarar ?

Günümüzde dikkat çeken bir programlama dil haline gelmesi ile nedir bu python ve ne işe yarar ? sorusu akıllara geliyor. Aslında bu dil 90 lı yıllarda Guido van Rossum tarafından geliştirilmeye başlanan ve 91 yılında kullanılmaya başlanan bir programlama dilidir. Bu dilin revaçta olmasının sebebi bir çok avantajı ile diğer programlama dillerinden ayrılıyor olmasıdır.

Neden Python Öğrenmeliyim ?

Neden python öğrenmeliyim diye düşünüyorsanız başlıca avantajları bu konu da fikir verebilir.

1. Öğrenilmesinin kullanımının kolay olması.
2. Daha az kodla daha kolay programlama yapılabilmesi.
3. Ücretsiz dil olması.
4. Hızlı bir programlama dili olmasından dolayı tercih edilmektedir.
5. İş imkanlarının çokluğu.

Genelde liselerde ve üniversitelerde programlama öğretmek için tercih edilen başlıca dillerden biridir. Tabi bu dili popüler yapan en büyük etmen ünlü şirketlerin bu dili tercih etmesidir. Örnek verecek olursak. NASA, Cern, Reddit ve Google gibi firmalar bu dili kullanmaktadır. Bu da iş olanaklarını artırmakta ve bu dile ne kadar hakim olursanız iş imkanlarınızda o kadar artacaktır.

Python Editörü Nasıl Kurulur Ve Kullanılır ?

Bir çok editör ile bu programlama dilini kodlamak mümkünken. En çok kullanılan python editörleri ;

• Wing İDE
• Canopy
• Pycharm

Bu editörler den birini de kullanabilirsiniz fakat en basit olarak kendi sitesinden bulunan editörle de kodlamak mümkün. Yazımızda bu yöntemden bahsetmek istiyorum. Giriş seviyesinde programcı için kendi editörü yeterli olacaktır.

Öncelikle bu programlama dilinin sitesi olan websitesine  giriş yapıyoruz. Anasayfa da yükleme menüsüne tıklayıp açılan menüden en güncel versiyonunun yükleme butonuna tıklayarak programımızı erişiyoruz. Kafa karışıklığı olmasın diye nereden edineceğinizi gösteren resim aşağıda.

İşlem bittikten sonra yükleme dosyasını çalıştıralım ve karşımıza aşağıdaki gibi bir ekran çıkacak

Bu ekranda install now seçeneğine tıklayarak programımızın yükleme işlemini başlatıyoruz en son close seçeneği ile yükleme işlemi bitiriyoruz. Kurulum bu kadar.

Başlat altında tüm programlar bölümüne yüklenmiş olan klasörünün içinden IDLE dosyasını çalıştırarak basit kodlama işlemleri yapmaya başlayabiliriz.

Shell Editör Nedir ?

Yeri gelmişken shell editör de ne demek kısaca ondan da bahsedelim: Eş zamanlı komutları çalıştıran editör türüdür yani kodların tamamını yazıp bitirip çalıştırmak yerine her komut satırı anlık çalışacaktır. Bu da size kod hatalarının bir çok satır kod yazmadan önce müdahale etmenize olanak sağlayacaktır. Dezavantajı ise hatalı satırları düzeltme konusunda yeni başlayanlar için karışıklık olmaktadır.

Bu editörü basit düzey kodlama işlemleri yapmak için kullanabilirsiniz. Yeni başlayanlar için uygun olacaktır. Daha gelişmiş bir editörle çalışmak isterseniz Wing İDE , Canopy, Pycharm gibi editörleri tercih edebilirsiniz. Bu editörler arasında en çok Pycharm editörü kullanılmaktadır.

Örnek Kod Denemesi

Hemen bir örnek uygulama kodu ile programımızı deneyebiliriz.

isim = input(' Lütfen İsminizi Giriniz : ')
print("Merhaba "+isim)

Python Nasıl Öğrenilir?

Programlama dillerinin tamamında olduğu gibi öncelikle algoritma nedir ve akış şemaları konusunu öğrenerek işe başlamalısınız. Bu aşamayı öğrenip algoritma mantığı ile düşündüğünüz zaman artık bir çok programla dilini kavrayabilirsiniz. Bundan sonra yapmanız gereken basit diller ile basit kodlar yazarak işe başlamak. Sonuç olarak Python dili sizin için uygun bir başlangıç olacaktır. 20 Yıl önce bu soru soran olsa direk qbasic derdim :)

Python İle Neler Yapılabilir ?

1. İnternet Uygulamaları Geliştirilebilir.
2. Web sitelerini inceleyen botlar geliştirilebilir.
3. Ağ programcılığı yapılabilir.
4. Yapay zeka uygulamaları yapılabilir.
5. Gelişmiş programlar tasarlanabilir.
6. Oyunlar yapılabilir.

Daha ayrıntılı bilgi için Python ile neler yapılabilir başlıklı yazımızı inceleyebilirsiniz.

Daha fazla okumak için Python Nedir , Ne İşe Yarar ve Nasıl Kullanılır ziyaret edebilirsiniz.

Belirli bir düzey html kodlama ( programlama ) bilgisine sahipseniz ve sitenizde resim geçişi ( slider ) oluşturmak istiyorsanız işte aradığınız kütüphane. Yazımızda Owl carousel 2 nedir ve nasıl kullanılır kısaca örneklerle anlatmaya çalıştık. İlginizi çekmiş ise yazıya hemen başlayalım.

Owl Carousel 2 Nedir?

Owl Carousel 2 web siteleri için geliştirilmiş slider ( kayan resimler ) oluşturmamızı sağlayan bir kütüphanedir. Bu kütüphane sayesinde bir çok slider türünü basit bir şekilde oluşturabilirsiniz. Genel özelliklerine değinecek olursak bu slider sisteminin öne çıkan özellikleri telefon ve tablet gibi sistemler için kaydırma işlemleri yapabilme, bir çok tarayıcıya uyumlu çalışmasıdır. Hatta eski tarayıcılarla bile çalışacağı belirtiliyor. Ayrıca Responsive dediğimiz telefon tablet ve masaüstü bilgisayarlar için ekran çözünürlüklerine göre boyutlandırabilme özelliği bulunması öne çıkan özelliklerinden. Owl Carousel 2 nedir kavramını açıkladığımıza göre web sitemizde nasıl kullanabileceğimizden de biraz bahsedelim.

Owl Carousel 2 Nasıl Kullanılır ?

Nasıl kullanılacağını anlatmaya önce kütüphanenin web sitesine girerek başlayalım. https://owlcarousel2.github.io/OwlCarousel2/   siteye girdiğimizde sayfanın sağ üst köşesinde bulunan yükleme butonu ile owlcarousel 2 nin web sitemizde çalışabilmesi için gerekli olan dosyalara ulaşabiliriz.Bu dosyada bizim için en gerekli olan bölüm dist klasörüdür. Bu klasörün içinde bu slider için gerekli olan jquery hariç tüm dosyalara ulaşacağız. Dist klasörünü sitemizin alt klasörüne ekledikten sonra bu slider i kullanacağımız siteyi bir html editörü ile açıp bu kütüphaneyi sitemize tanıtmaya başlayabiliriz. Her zaman olduğu gibi ilk önce <head> </head> etiketleri arasına aşağıdaki kodları ekliyoruz. Ben dist altında bulunan assents klasörü olarak linkleri ayarladım siz isterseniz başka bir klasöre yükleyip yollarını ona göre ayarlayabilirsiniz.

<link rel=“stylesheet” href=“dist/assets/owl.carousel.min.css”>

<link rel=“stylesheet” href=“dist/assets/owl.theme.default.min.css”>

• Daha sonra </body> etiketi bitiminin hemen üzerine aşağıdaki kodu ekliyoruz.

<script src=“owlcarousel/owl.carousel.min.js”></script>

• Son olarak jquery-3.4.1.min.js   dosyasını da indirip aynı yere aşağıdaki linkle ekliyoruz.

<script src=”jquery-3.4.1.min.js”></script>

sitemizde şu şekilde olmaları gerekiyor.

<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="dist/assets/owl.carousel.min.css">
<link rel="stylesheet" href="dist/assets/owl.theme.default.min.css">
</head>
<body>

<script src="owlcarousel/owl.carousel.min.js"></script>
<script src="jquery-3.4.1.min.js"></script>
</body>
</html>

Artık Owl Carousel 2 kütüphanesini sitemize entegre ettik şimdi sırada örnek bir kod ile nasıl çalışacağına bakalım.

<div class="owl-carousel owl-theme owl-loaded">
<div class="owl-stage-outer">
<div class="owl-stage">
<div class="owl-item">...</div>
<div class="owl-item">...</div>
<div class="owl-item">...</div>
</div>
</div>
</div>

Bu kodu sadece resim geçişleri için kullanabilirsiniz yazan yerlere resim yada yazı ekleyebilirsiniz.

İleri Geri Sekmesi Ekleme

Eğer bu slider de ileri geri butonları ve istediğiniz resmi görüntülemek için noktalar olsun istiyorsanız kod örneğimiz şu şekilde olacaktır.

<div class="owl-carousel owl-theme owl-loaded">
<div class="owl-stage-outer">
<div class="owl-stage">
<div class="owl-item">...</div>
<div class="owl-item">...</div>
<div class="owl-item">...</div>
</div>
</div>
<div class="owl-nav">
<div class="owl-prev">prev</div>
<div class="owl-next">next</div>
</div>
<div class="owl-dots">
<div class="owl-dot active"><span></span></div>
<div class="owl-dot"><span></span></div>
<div class="owl-dot"><span></span></div>
</div>
</div>

Daha fazla okumak için Owl Carousel 2 Nedir Ve Nasıl Kullanılır ? ziyaret edebilirsiniz.