Android uygulamanızda bir ses dosyasını oynatmak istediğinizde Media Player kütüphanesini kullanabilirsiniz. Ayrıca projenizde bulanacak ses dosyalarını res klasörünün altında bulunan(yoksa oluşturabilirsiniz) raw klasörünün içerisine atmanız gerekmektedir. (Kullandığınız ses dosyalarının isimlendirmesi küçük harflerden oluşmalıdır.)
- import android.media.MediaPlayer;
kodu ile kütüphaneyi sınıfınıza dahil edebilirsiniz.
- final MediaPlayer ses = MediaPlayer.create(this, R.raw.test);
kodu ile ses dosyanızı oluşturabilirsiniz. this parametresi sizin bulunduğunuz sınıfı, R.raw.test parametresi ise ses dosyanızı göstermektedir.
- ses.start();
kodu ile ses dosyanızı başlatabilirsiniz.
- ses.stop();
kodu ile ses dosyanızı durdurabilirsiniz.
- ses.pause();
kodu ile ses dosyanızı duraklatabilirsiniz. Devam etmek için start metodunu kullanabilirsiniz.
IBM-Q Kullanımı
1.
İlk önce https://quantumexperience.ng.bluemix.net/qx/experience
adresindeki web sitesine üye olmamız gereklidir.
2.
Daha sonra "Start experimenting with a quantum
computer" butonuna basarak devre ekranına gelebiliriz.
3.
Buradaki
"new" butonuna basarak çalışmak istediğimiz topolojiyi seçebiliriz.
"Custom topology" seçeneğini seçmemiz gerekmektedir. Çünkü bu seçenek
ile devremizdeki qübit sayılarını belirleyebiliriz ve yazmaçlarımızı
isimlendirebiliriz.
4.
Yukarıdaki
ekranda "quantum registers" kısmına iki yazmaç ekledik. Bu yazmaçlar
bizim toplama işlemi yapacağımız sayılar olacak. "classical register"
kısmındaki yazmaç ise toplama işleminin sonucunun yazılacağı yazmaç olacak.
İşlemimiz 2 qübit olacağı için qübit sayılarını ona göre belirledik. Daha sonra
"set topology" butonuna basarak devremizi oluşturmaya başlayabiliriz.
5.
Açılan devre
ekranındaki devre elemanlarını sürekle bırak yöntemi ile devremize ekleyebiliriz.
Ayrıca "Gates" yazısının yanında bulunan ünlem işaretine tıklayarak devre
elemanları hakkında detaylı bilgiye ulaşabiliriz.
6.
Devremizi kod
yazarak oluşturmak istersek QISKit dili ile oluşturabiliriz. Resimde gösterilen
butona basarak kod ekranını açabiliriz.
IBM Kuantum Bilgisayarı(IBM Q) ile 2 Qübitlik Toplama İşlemi
1.
Devremizdeki tüm
qübitler başlangıçta 0 girdi değerine sahip olur. 1 değerini almasını
istediğimiz qübitlere not kapısı (X) uygularız.
2.
Daha sonra
toplama işlemi yaptığımız ilk sayıya kuantum fourier dönüşümü uygularız. Yani
ilk qübite 1 hadamard ve 1 adet kontrollü faz kapısı, ikinci qübite 1
uygularız. Hadamard kapısı için "H" kapısını ekleriz. Kontrollü faz
kapısı için "R2" ekleyeceğimiz için bunu "S" kapısı
ekleyerek yapabiliriz.
3.
İkinci işlemin
sonucunun ilk qübitine 2 adet ve ikinci
qübitine 1adet kontrollü faz kapısı uyggularız. Faz kapılarının kontrolleri
toplama işlemindeki ikinci sayı ile yapılır. Bu işlemi yapmak için
"cU1" kapısını kullanarabiliriz. "R1" kapısı için
"pi" ve "R2" kapısı için "pi/2" işlemini uygularız.
4.
Üçüncü işlemin
sonucuna ters kuantum fourier dönüşümü uygularız. Yani ilk qübite 1 adet ters
faz kapısı ve daha sonra hadamard, ikinci hadamard uygularız. Ters faz kapısı
için "S üzeri T" kapısını uygulayabiliriz.
5.
Dördüncü işlemin
sonucunda ölçme işlemi yaparız.
Sonuçlar:
Örnek:
HTML Dosyası
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Güvenlik Resmi Uygulaması</title>
<script type="text/javascript">
var ctx;
var init = function(){
ctx = document.getElementById("c").getContext("2d");
ctx.fillStyle = "#bbeeff";
degistir();
}
var degistir = function(){
var key = "";
for(var i = 0;i<6;i++){
var rnd = Math.random();
if(Math.round(rnd) == 0){
key += String.fromCharCode(48+9*Math.random());
}
else{
key += String.fromCharCode(65+25*Math.random());
}
}
ctx.clearRect(0,0,150,50);
ctx.fillRect(0,0,150,50);
ctx.font="30px calibri";
ctx.strokeText(key,24,34);
}
</script>
</head>
<body onLoad="init();">
Güvenlik Resmi:<br />
<canvas id="c" width="150" height="50"></canvas><br />
<input type="button" value="Değiştir" onClick="degistir();">
</body>
</html>
Ekran Görüntüsü:
Örnek:
HTML Dosyası
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Javascript Zamanlayıcı Örneği</title>
<style type="text/css">
#main{
border-style:solid;
width:100px;
height:100px;
font-size:70px;
text-align:center;
}
</style>
<script type="text/javascript">
var zamanSayac = 0;
var zaman;
function say(){
document.getElementById("main").textContent = zamanSayac;
zamanSayac++;
}
function baslat(){
zaman = window.setInterval("say()",1000);
document.getElementById("buttonBaslat").disabled = true;
document.getElementById("buttonBaslat").value = "Devat Et";
document.getElementById("buttonDurdur").disabled = false;
}
function durdur(){
document.getElementById("buttonBaslat").disabled = false;
document.getElementById("buttonDurdur").disabled = true;
window.clearInterval(zaman);
}
function init(){
document.getElementById("buttonBaslat").disabled = false;
document.getElementById("buttonDurdur").disabled = false;
}
</script>
</head>
<body onLoad="init();">
<div id="main"></div><br />
<input type="button" id="buttonBaslat" value="Baslat" onClick="baslat();" />
<input type="button" id="buttonDurdur" value="Durdur" onClick="durdur();" />
</body>
</html>
Ekran Görüntüsü:
Çanakkale Onsekiz Mart Üniversitesi Bilgisayar Mühendisliği Bölümü dağıtık sistemler ders notlarım.
Çanakkale Onsekiz Mart Üniversitesi Bilgisayar Mühendisliği Bölümü algoritma analizi ders notlarım.
Algoritma analizi dersinde yazdığım tüm kodlar
Android uygulamanıza bir viewPager elemanı ekleyerek fragment'ler ile kaydırmalı sayfalar oluşturabilirsiniz. Bu sayfaların yok edilmesi ve tekrar inşa edilmesi viewPager sınıfı tarafından otomatik olarak yapılır. Aynı anda kaç sayfanın var olacağını viewPager sınıfının setOffscreenPageLimit metodu ile belirleyebilirsiniz. Ancak aynı anda sadece bir sayfa var olmasını isterseniz bunu viewPager sınıfı ile yapmanız mümkün değil. Uygulamanızda her sayfa geçişinde sayfalarınızın yeniden yüklenmesini veya sayfalarınızdaki verilerin güncellenmesini isteyebilirsiniz. Bu sorunu çözmek için bu yazımda bir yöntem önereceğim.
- onTabSelected metodu içerisinde her sayfa seçini için viewPager.getAdapter.notifyDataSetChanged() metodunu çağırın.
- PagerAdapter sınıfında notifyDataSetChanged() metodunu override edin.
- PagerAdapter sınıfının getItem metodunda her pozisyon için oluşturulan sayfayı global bir değişkene atayın.(Override edilen notifyDataSetChange() metodu içerisinden erişebilmek için)
- Override ettiğiniz notifyDataSetChanged() metodu içerisinde oluşturulan sayfalara erişerek istediğiniz değişikliği yapabilirsiniz.
Önemli Not! ViewPager elemanınızda kaç sayfa var ise setOffscreenPageLimit() metodu ile o sayfaların hepsinin aynı anda yüklenmesini sağlamalısınız. Aksi halde sayfa geçişlerinde hata alırsınız. Bunun nedeni sayfa daha oluşturulmadan güncelleme yapılmasıdır.
Not! Bu sorunu çözmek için yabancı kaynaklarda bir çok yöntem var (viewPager sınıfını yeniden yazıp setOffscreenPageLimit metodunu değiştirmek gibi). Ben sorunumu bu yöntem ile çözdüm. Uygulamamda 3 sayfa olduğu için bir sorun oluşturmadı. Ancak uygulamanızda çok fazla sayfa olursa bellek sorunu oluşabilir. Bu durumda farklı bir yöntem denemelisiniz.
Çanakkale Onsekiz Mart Üniversitesi Bilgisayar Mühendisliği Bölümü gömülü sistem tasarımı ders notlarım.
Örnek:
HTML Dosyası
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="css.css" rel="stylesheet" />
<script type="text/javascript">
function func() {
var spanProgress = document.getElementById('progressSpan');
progressWidth = "100%";
spanProgress.style.width = progressWidth;
}
</script>
</head>
<body>
<div class="progress efect" >
<span id="progressSpan" style="width: 0%"></span>
</div>
<input type="button" value="progress" onclick="func()" />
</body>
</html>
.progress{
background-color: #1a1a1a;
height: 25px;
padding: 5px;
width: 350px;
margin: 50px 0;
border-radius: 5px;
}
.efect{
}
.progress span{
display: inline-block;
height: 100%;
border-radius: 3px;
background-color: #008000;
transition-property: width;
transition-duration: 10s;
}
.efect span{
background-size: 30px 30px;
background-image: linear-gradient(135deg,rgba(255,255,255,.15)25%,
transparent 25%,transparent 50%,
rgba(255,255,255,.15)50%,rgba(255,255,255,.15)75%,transparent 75%,transparent);
animation: animation-efect 3s linear infinite;
}
@keyframes animation-efect{
0%{
background-position: 0px 0;
}
100%{
background-position: 60px 0;
}
}
CSS position özellikliği ile sayfa içerisindeki öğelerimizi konumlandırabiliriz. Position özelliği üç değer alabilir. Bu değerler; relative, absolute ve fixed'tir. Bu örneğimde ben relative özelliği üzerine bir örnek yaptım.
Fixed özelliği öğeyi sayfa içerisindeki bir alana sabitlemek için kullanılır. Sayfa içerisinde scroll hareket etse bile öğe aynı yerinde sabit kalır.
Örnek:
HTML Dosyası
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="css3.css" rel="stylesheet" />
</head>
<body>
<div id="kapsayici">
<div id="kutu1" class="ortak"></div>
<div id="kutu2" class="ortak"></div>
<div id="kutu3" class="ortak"></div>
</div>
</body>
</html>
body {
margin: 0px;
padding: 0px;
}
.ortak{
width: 50px;
height: 50px;
}
#kapsayici{
width: 200px;
margin: 100px auto;
background-color: #000000;
}
#kutu1{
background-color: blue;
}
#kutu2{
left: 30px;
top: 30px;
position: fixed;
background-color: red;
}
#kutu3{
background-color: green;
}
CSS position özellikliği ile sayfa içerisindeki öğelerimizi konumlandırabiliriz. Position özelliği üç değer alabilir. Bu değerler; relative, absolute ve fixed'tir. Bu örneğimde ben relative özelliği üzerine bir örnek yaptım.
Absolute özelliği öğeyi onu kapsayan ve position:relative özelliğini almış öğeye göre ayarlar. Aksi halde kök elemente (<body>) göre ayarlar.
Örnek:
HTML Dosyası
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="css3.css" rel="stylesheet" />
</head>
<body>
<div id="kapsayici">
<div id="kutu1" class="ortak"></div>
<div id="kutu2" class="ortak"></div>
<div id="kutu3" class="ortak"></div>
</div>
</body>
</html>
CSS Dosyası
body {
margin: 0px;
padding: 0px;
}
.ortak{
width: 50px;
height: 50px;
}
#kapsayici{
width: 200px;
margin: 100px auto;
background-color: #000000;
position: relative;
}
#kutu1{
background-color: blue;
}
#kutu2{
position: absolute;
left: 30px;
top: 20px;
background-color: red;
}
#kutu3{
background-color: green;
}
Ekran Görüntüsü
Not! Kapsayıcı öğenin position:relative özelliğini silerek kırmızı kutunun <body> elementine göre pozisyonunu ayarladığını görebilirsiniz.
Relative özelliği öğeyi yanındaki elemana göre konumlandırır ve bu konumlandırma işleminden diğer elemanlar etkilenmez.
Örnek:
HTML Dosyası
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="css3.css" rel="stylesheet" />
</head>
<body>
<div id="kapsayici">
<div id="kutu1" class="ortak"></div>
<div id="kutu2" class="ortak"></div>
<div id="kutu3" class="ortak"></div>
</div>
</body>
</html>
body {
margin: 0px;
padding: 0px;
}
.ortak{
width: 50px;
height: 50px;
}
#kapsayici{
width: 200px;
margin: 100px auto;
background-color: #000000;
}
#kutu1{
background-color: blue;
}
#kutu2{
position: relative;
left: 20px;
top: 30px;
background-color: red;
}
#kutu3{
background-color: green;
}
Ekran Görüntüsü
LİNK ÖZELLİKLERİ
a : Linkin, sayfa açıldığında tıklanmadan veya ümleç üzerine getirilmeden önceki durumudur.
a:hover : Linkin imleç üzerine getirildiğindeki durumudur.
a:active : Linkin tıklandığı andaki durumudur.
a:visited : Linkin tıklandıktan sonraki durumudur.
BİÇİMLENDİRME
color: Linkin rengini belirler.
background-color: Linkin zemin rengini belirler.
background-image: Linkin zeminine resim ekler(Bu animated-gif de olabilir.)
text-decoration: Linkin altının,üstünün vs. çizgili olup olmayacağını belirler.
font-weight: Yazının kalınlık veya inceliğini belirler.
border: Linkin etrafına kenarlık ekler.
display: Linki içeren hücre , satır vb. istenilen alanın seçilmesini sağlar.
————————————————————————
LİSTE ÖZELLİKLERİ
disk: Liste biçiminin disk (içi dolu daire) şeklinde olmasını sağlar.
circle : Liste biçiminin çember şeklinde olmasını sağlar.
square : Liste biçiminin kare olmasını sağlar.
decimal : Liste biçiminin rakamlardan oluşmasını sağlar.
lower-roman : Liste biçiminin i,ii,iii gibi küçük roma rakamlarından oluşmasını sağlar.
upper-roman : Liste biçiminin I,II,II gibi büyük roma rakamlarından oluşmasını sağlar.
lower-alpha : Liste biçiminin a,b,c şeklinde küçük harf olmasını sağlar.
upper-alpha : Liste biçiminin A,B,C şeklinde büyük harf olmasını sağlar.
none : Listenin simgesiz olmasını sağlar.
inside : Listenin ikinci satırının en soldan başlamasını sağlar.
Outside : Listenin ikinci satırının ilk satır ile aynı yerden başlamasını sağlar.
list-style-image : Liste biçiminin resim olmasını sağlar.
————————————————————————
KATMAN ÖZELLİKLERİ
position: Katmanın yerinin belirlenmesini sağlar.
absolute: Katmanın yerinin pencere esas alınarak belirlenmesini sağlar.
relative: Katmanın yerinin bir önceki katman esas alınarak belirlenmesini sağlar.
static: Katmanın yerinin sabit olarak (Varsayılan olan sol üst köşe) belirlenmesini sağlar.
top: Katmanın üstten ne kadar aşağıda olması gerektiğini belirler.
left: Katmanın soldan ne kadar içeride olması gerektiğini belirler.
width: Katmanın genişliğinin ne kadar olacağını belirler.
height: Katmanın yüksekliğinin ne kadar olacağını belirler.
overflow: Katmanın belirtilen yükseklik ve genişliğe sığmayan kısmına ne olacağını belirler.
auto: Otomatik olarak belirlenir.
scroll: Kaydırma çubuğu ekleyerek görünmesini sağlar.
visible : Katmanı belirtilen boyutların dışına taşırarak sığmayan yerlerin görünmesini sağlar.
hidden: Sığmayan yerleri gizler.
visibility: Katmanın görünebilirlik ayarını yapar.
visible : Katmanın görünür olmasını sağlar.
hidden: Katmanı gizler.
z-index : Katmanların alttan üste doğru hangi sıra ile gösterileceğini belirler.1 değeri katmanın en altta olacağını belirtir.
————————————————————————
FONT ÖZELLİKLERİ
font-family: Yazı türünü belirler.(Arial , Verdana gibi.)
font-style: Yazının normal veya sağa eğik olmasını sağlar.
font-variant: Yazının normal veya tümünün büyük harflerden oluşmuş olmasını sağlar.
font-weight: Yazının kalınlık-inceliğini belirler.
font-size: Yazının büyüklüğünü belirler.
————————————————————————
TEXT ÖZELLİKLERİ
word-spacing : Kelimeler arasında bırakılacak boşluğu boşluğu belirler.
letter-spacing : Harfler arasında bırakılacak boşluğu boşluğu belirler.
text-decoration : Kelimenin altının , üstünün vs. çizili olup olmayacağını belirler.
underline : Kelimenin altının (Satır altından) çizili olmasını sağlar.
overline : Kelimenin üstünün (Satır üstünden) çizili olmasını sağlar.
line-through : Kelimenin ortasından çizili olmasını sağlar.
blink : Kelimenin yanıp sönmesini sağlar.(Netscape için)
vertical-align : Metnin yatay olarak nasıl hizalanacağını belirler.
text-transform: Kelimelerin büyük harf veya küçük harflerden oluşmasını sağlar.
capitalize : Kelimelerin ilk harflerinin büyük olmasını sağlar.
uppercase : Kelimelerin bütün harflerinin büyük olmasını sağlar.
lowercase : Kelimelerin bütün harflerinin küçük olmasını sağlar.
none : Kelimelerin orjinal metindeki gibi olmasını sağlar.
text-align: Metnin dikey olarak nasıl hizalanacağını belirler.
left : Metni sola yaslar.
right : Metni sağa yaslar.
center : Metni ortalar.
justify : Metni iki yana yaslar.
text-indent : Metnin ilk satırının soldan ne kadar içerden başlayacağını belirler.
line-height : Satırın yüksekliğini ayarlar.(Yüksek değer verildiğinde satırlar arasındaki boşluk artar.)
first-line : Metnin ilk satırının biçimlendirilmesini sağlar.
first-letter : Metnin ilk harfinin biçimlendirilmesini sağlar.
————————————————————————
İMLEÇ ÖZELLİKLERİ
crosshair: İmlecin artı işareti şeklinde olmasını sağlar.
auto: İmlecin metinde dikey çizgi ,boş alanda normal ok şeklinde olmasını sağlar.
default: İmlecin hem metinde hem de boş alanda normal ok şeklinde olmasını sağlar.
hand: İmlecin linkte olduğu gibi el şeklinde olmasını sağlar.
move: İmlecin taşıma işareti şeklinde olmasını sağlar.
ne-resize: İmlecin sağa yatık normal ok olmasını sağlar.
nw-resize: İmlecin sola yatık normal ok olmasını sağlar.
se-resize: İmlecin yukardan aşağı doğru ve sağa yatık normal ok olmasını sağlar.
sw-resize: İmlecin yukardan aşağı doğru ve sola yatık normal ok olmasını sağlar.
n-resize: İmlecin aşağıdan yukarıya doğru ince ok şeklinde olmasını sağlar.
s-resize: İmlecin yukardan aşağı doğru ince ok şeklinde olmasını sağlar.
w-resize: İmlecin sola doğru ince ok şeklinde olmasını sağlar.
e-resize: İmlecin sağa doğru ince ok şeklinde olmasını sağlar.
text: İmlecin hem metinde hem de boş alanda metinde olduğu gibi görünmesini sağlar.
wait: İmlecin meşgul animasyonuna dönüşmesini sağlar.
help: İmlecin yardım-soru işaretine dönüşmesini sağlar.
————————————————————————
ZEMİN ÖZELLİKLERİ
background-color: Zeminin rengini belirler.
color : Renk adı.
transparent: Zeminin saydam olmasını sağlar.
background-image: Zemine resim yerleştirilmesini sağlar.
url : Zemine yerleştirilen resmin adresi.
background-repeat: Zemine yerleştirilen resmin nasıl yayılacağını belirler.
repeat : Resmin bütün zemine yayılmasını sağlar.
repeat-x : Resmin sol-üstten sağ-üste doğru yayılmasını sağlar.
repeat-y : Resmin sol-üstten sol-alta doğru yayılmasını sağlar.
no-repeat: Resmin yayılmadan orjinal boyutuyla görünmesini sağlar.
background-attachment: Zemindeki resmin , sayfa kaydırma çubuğuyla hareket ettirildiğindeki durumunu belirler.
scroll : Sayfa hareket ettirildiğinde zeminin de kaymasını sağlar.
fixed: Sayfa kaydırılsa da zeminin sabit kalmasını sağlar
background-position: Zemindeki resmin istenilen şekilde yerleştirilmesini sağlar.
top : Resmi yukarı yerleştirir.
center : Resmi ortalar.
bottom : Resmi aşağı yerleştirir.
left : Resmi sola yerleştirir.
right: Resmi sağa yerleştirir.
…px : Resmin soldan istenilen ölçüde içerde olmasını sağlar.
————————————————————————
TABLO ÖZELLİKLERİ
margin : Tablo ile pencerenin kenarları arasında bırakılacak boşluğu belirler.
margin-top : Tablo ile pencerenin üst kenarı arasında bırakılacak boşluğu belirler.
margin-right : Tablo ile pencerenin sağ kenarı arasında bırakılacak boşluğu belirler.
margin-bottom : Tablo ile pencerenin alt kenarı arasında bırakılacak boşluğu belirler.
margin-left : Tablo ile pencerenin sol kenarı arasında bırakılacak boşluğu belirler.
padding : Tablo kenarları ile tablo içeriği (Yazı vb.) arasında bırakılacak boşluğu belirler.
padding-top : Tablonun üst kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler.
padding-right : Tablonun sağ kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler.
padding-bottom : Tablonun alt kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler.
padding-left : Tablonun sol kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler.
border : Tablonun kenarlarının şekillendirilmesini sağlar.
border-top : Tablonun üst kenarının şekillendirilmesini sağlar.
border-left : Tablonun sol kenarının şekillendirilmesini sağlar.
border-bottom : Tablonun alt kenarının şekillendirilmesini sağlar.
border-right : Tablonun sağ kenarının şekillendirilmesini sağlar.
border-width : Tablonun kenarlarının kalınlığını belirler.
border-top-width : Tablonun üst kenarının kalınlığını belirler.
border-right-width : Tablonun sağ kenarının kalınlığını belirler.
border-bottom-width : Tablonun alt kenarının kalınlığını belirler.
border-left-width : Tablonun sol kenarının kalınlığını belirler.
border-style : Tablonun kenarlık türünü belirler.
border-top-style : Tablonun üst kenarlık türünü belirler.
border-right-style : Tablonun sağ kenarlık türünü belirler.
border-bottom-style : Tablonun alt kenarlık türünü belirler.
border-left-style : Tablonun sol kenarlık türünü belirler.
border-color : Tablonun kenarlarının rengini belirler.
border-top-color : Tablonun üst kenarının rengini belirler.
border-right-color : Tablonun sağ kenarının rengini belirler.
border-bottom-color : Tablonun alt kenarının rengini belirler.
border-left-color : Tablonun sol kenarının rengini belirler.
color : Tabloda geçen metnin rengini belirler.
width : Tablonon genişliğini belirler.
height : Tablonun yüksekliğini belirler.