Front-End Goods

2 Ağustos 2016 Salı

Basit HTML Web Sayfası Teması

Web tasarıma yeni başlayan arkadaşlar için yararlı olacağını düşündüğüm basit bir HTML şablon çalışması yaptım. Burada yaptığım aslında sadece freewebsitetemplates.com/ adresinden aldığım bir tasarımı yeniden kodlamaktan ibaret. HTML öğrenmenin en kolay ve çabuk yolu; var olan basit şablonları tekrar yazmaktır.

İlk zamanlar şablonun kod yapısını inceleyip taklit ederek hangi tag'ın ne işe yaradığını ve CSS ile biçimlendirmenin nasıl etkin bir şekilde kullanılabileceğini rahatlıkla öğrenebilirsiniz. Bir sonraki aşamada da aynı şablonu kendi kodlarınızla yazmaya çalışarak ilerleyebilirsiniz.

Zaten yazılmış olan bir şablonu tekrardan yazmaya çalışmak matematikteki bir problemi başka bir yöntemle çözmeye benzer. Aynı matematikte olduğu gibi HTML/CSS kodlarken de PSD halindeki bir tasarımı nasıl bir web sayfasına dünüştürebilirim? sorusuna yanıtlar bulmaya çalışırız. Benzerlik buradan kaynaklanır.

Aynı tasarım birden fazla coder tarafından farklı kodlanarak web sayfası haline getirilenilir. Hepsi de aynı sonucu verir ve çalışır. İşte siz de başta taklit ederek, kopyalayarak yaptığınız pratikleri sonradan kendi yorumlamanızı deneyerek pekiştirebilir geliştirebilirisniz. bu çalışma yöntemi ile çok geçmeden HTML ve CSS dillerini öğrenebilir, kendi tasarımlarınızı rahatlıkla kodlayabilir hale gelebilirsiniz.

Şablonu buradan indirebilirsiniz.

1 Ağustos 2016 Pazartesi

Basit Bir JQuery Responsive Tab Menu Örneği

JQuery ile yapılmış basit bir tab menü. Menü 290 piksel genişliğe kadar responsive çalışıyor. uygulaması son derecede kolay. Renklendirdiğim Kodları kopyala yapıştır yapıp rahatlıkla kullanabilirsiniz.

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
ul.tabmenu{height:30px}
ul.tabmenu,ul.tabmenu li{
list-style-type:none;
margin:0px;
padding:0px;

}
ul.tabmenu li{
display:inline-block;
width:80px;
height:30px;
line-height:30px;
background-color:#4a9fef;
text-align:center;
position:relative;
border-top:solid 1px #4a9fef;
border-left:solid 1px #4a9fef;
border-right:solid 1px #4a9fef;
border-bottom:solid 1px #fff !important;
color:#fff;
}
ul.tabmenu li a:visited{color:inherit;}
.tabmenu li a{text-decoration:none;display:block;position:absolute;width:100%;height:30px;top:0px;z-index:15;}
.kutu{
display:block;
max-width:500px;
border:solid 1px #4a9fef;
height:350px;
}
.tab
{
display:none;
max-width:500px;
height:100%;
position:relative;
padding:10px;
}
.tab:first-child{display:block;}
.active{background-color:#ffffff !important;color:#125899 !important;height:30px;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('ul.tabmenu li').click(function () {
var indeks = $(this).index();
$('ul.tabmenu li').removeClass("active");
$(this).addClass("active");
$(".tab").not(indeks).hide();
$(".tab:eq(" + indeks + ")").show();

});
});
</script>
</head>
<body>

<ul class="tabmenu">
<li class="active"><a href="#">Tab 1</a></li>
<li><a href="#">Tab 2</a></li>
<li><a href="#">Tab 3</a></li>
</ul>
<div class="kutu" >
<div class="tab">Kutu 1</div>
<div class="tab">Kutu 2</div>
<div class="tab">Kutu 3</div>
</div>
</body>
</html>

13 Aralık 2015 Pazar

Responsive JQuery Slider

Touch Screen Destekli Responsive JQuery Slider

Responsive Slider'ın Özellikleri

Modüler yapılı kolay kullanılır tasarım.
Touch Screen destekli(sliderı mouse ile tutup çekerek değiştirebiliyorsunuz ). Responsive uyumlu. İçeriğiniz mobil cihazlarda düzgün görünür.
HTML5 fullscreen destekli
SEO için optimize edilebilir.
Slider içine HTML elemanları koyabilirsiniz. Dinamik slider yapabilirsiniz.
Ajax ile kolay yükleme
Internet Explorer 7,IE9, Chrome, Firefox, Safari ve Opera tarayıcıları ile uyumlu

Bunun gibi pekçok özelliğibarındıran JQuery Slider'ı buradan indirebilirsiniz.

4 Aralık 2015 Cuma

En İyi Wordpress Teması

Avada Responsive Çok Amaçlı Wordpress Teması

Kullanımı kolay ve pratik. Kod bilmeye, kod yazmaya gerek duymadan. Wordpress sitenizin temasını kolayca Avada ile değiştirin. Modern responsive ve şık tasarımlı bir web siteniz olsun.

Avada cep telefonu, ve tablet gibi mobil cihazlarla uyumludur. Sorunsuz çalışır.

Avada Wordpress Temasını Şimdi Görün

30 Kasım 2015 Pazartesi

Javascript Başlangıç Seviyesi Çalışma 1 : Javascript ile Yazı Yazdırmak

Javascript Nedir?

Javascript web sitelerinin önyüz(frontend) tarafındaçalışan bir dinamik programlama dilidir. Javascript Nedir? Ne Değildir? Öğrenmek için vikipedia sayfasına bakabilirsiniz.

Javascript ile Neler Yapılarbilir?

Javascript ile web sayfasının görünümünü değiştirebilir, kullanıcı ile etkileşim kurabilir ve çeşitli animasyonlar, oyunlar programlayabilirsiniz. Ayrıca sunucu ile veri alışverişi sağlayabilirsiniz.

Basit bir Javascript çalışması yapalım.
Aşağıdaki kedi resmine tıklayın bakalım ne olacak?

Javascript İle Sayfadaki bir yazıyı değiştirebilirsiniz?

Kediyi Konuşturun!

Kediyi tekrar konuşturmak için sayfayı yenileyin

Aşağıda mavi ile renklendirdiğimiz kod aslında basit bir javascript kodu. Kedi ikonuna tıklandığı anda sayfadaki id'si kedi1 olan elemanı buluyor ve içeriğindeki yazıyı değiştiriyor.

<img alt="Cat Icon" border="0" src="/cat-icon.png" title="Kediye Tıklayın" onclick="document.getElementById('kedi1').innerHTML = 'Miyavv! Mama yok mu mama?'" class="kedi1"/></a>
<p id="kedi1">Kediyi Konuşturun!</p>

Kullandığımız Javascript Kodlarının Açıklamaları

onclick : tıklama olayını dinleyen html özelliği
innerHTML : HTML elemanının içerğini değiştiren javascript kodu
document : sayfanın kendisi
getElementById : tanımlanan id'yi, taşıyan HTML elemanlarını bulan javascript kodu

Şimdilik bu kadar. Unutmayın Javascript Öğrenmek Kolay ve Eğlencelidir.

Görsel Ara