Front-End Goods

19 Aralık 2016 Pazartesi

Javascript SEO Analiz Aracı

Basit Bir SEO Analiz Aracı

Basit bir seo analiz aracı üzerinde çalışıyorum. Javascript ile tarayıcı üzerinden çalışacak. Şimdilik sadece sayfadaki h taglarını buluyor. Ama geliştirmeye devam edeceğim. Sitenizi analiz etmesi için sadece kaynak kodunu aşağıdaki kutucuğa yapıştırmanız yeterli.

Analiz Et

10 Kasım 2016 Perşembe

Basit CSS Menü Örneği

Menüler web sitelerinin vazgeçilmez bir parçası. Ziyaretçilerin, sitenin diğer sayfalarına ulaşabilmeleri menüler aracılığyla olur. Bu sebepten tasarlanan her web sayfasının mutlaka bir menü çubuğu ya da blogu bulunur. Sayfalar arası geçişler bu menülre yerleştirilen linklerle olur.

Eğer işiniz önyüz geliştirme ise mutlaka CSS menü yapma sorunu ile karşılaşırsınız. CSS menü yapımı profesyönel anlamda Front end developer olarak çalışanlar için kolay bir iş. Ancak bu işe daha yeni başladıysanız biraz yardıma ihtiyacınız olabilir. Bu sayfada basit bir CSS yatay menü çalışması yaptım.

Bu Çalışma Kimin İçin?

Hem önyüz geliştirmeye yeni başlayanlar için basit bir örnek hem de aynı kodları bir daha yazmakla vakit kaybetmek istemeyen profesyoneller için hazır yapılmı CSS Yatay Menü kodu. Evet bu basit çalışmanın tek amacı front end developer arkadaşlarımızın işini kolaylaştırmak.

Aşağıda basit bir CSS menü örneğini paylaşıyorum. Umarım faydalı olur.

CSS Yatay Menünün Kodları:

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #fff;
}

ul.denemenu{
margin:0px;
padding:0px;
border-top:solid 1px #717171;
border-bottom:solid 1px #ff0000;
display:inline-block;
}
.denemenu li{margin:0px;}

.denemenu li a{
font-size:14px;
font-family:arial,sans-serif;
color:#777;
text-decoration:none;
width:auto;
height:35px;
line-height:35px;
padding:0 15px;
background:#fbfbfb;
display:block;
float:left;
}

.denemenu li{display:block;max-width:180px;height:auto;float:left;}

.denemenu li a:hover{background-color:red;color:#fff;}

</style>
</head>
<body>

<div>
<ul class="denemenu">
<li><a href="#">Ansayfa</a></li>
<li><a href="#">Hakkımızda</a></li>
<li><a href="#">Galeri</a></li>
<li><a href="#">İletişim</a></li>
</ul>
</div>

</body>
</html>

CSS Menünün Canlı Hali

15 Ağustos 2016 Pazartesi

Noktalı Çizgiler

Grafiker arkadaşlar için .png uzantılı hazır noktalı çizgiler. Üstelik Web 2.0 renklerinde.

Açık Mavi Noktalı Çizgi

Turuncu Noktalı Çizgi

Açık Turuncu Noktalı Çizgi

Lacivert Noktalı Çizgi

Maroon Noktalı Çizgi

Mavi Noktalı Çizgi

Mor Noktalı Çizgi

Sarı Noktalı Çizgi

Turuncu Noktalı Çizgi

Yeşil Noktalı Çizgi

Açık Yeşil Noktalı Çizgi

5 Ağustos 2016 Cuma

Javascript ile bir nesneyi gizlemek

Javascript ile sayfadaki bir nesne nasıl gizlenir?

Başlangıç seviyesi Javascript programlama çalışmalarımıza devam ediyoruz. Daha önceki derste Javascript ile bir yazının font size'ı nasıl değiştirilir? onu görmüştük. Bu derste da yine onclik olayı üzerinden bir örnek ile olayı açıklayalım.

Sayfada var olan bir elemanın gösterilmesi ya da gizlenmesi CSS kodlarından display ve/veya visibility özellikleri kullanılarak yapılır. Bir nesneyi gizlemek için ya

display:none deriz ya da

visibility:hidden kullanırız.

Bu çalışmada biz bu işi Javascript kodları kullanarak yapmak istiyoruz. Çok da lafı uzatmadan sayfadaki nesneyi gizleyen kodu yazıyorum.

document.getElementById('deneme').style.display='none';

Bu kod ne işe yarıyor?

Sayfada id değeri deneme olan nesneyi buluyor ve CSS stil özelliğine display:none değerini atıyor. Böylelikle nesne görünmez oluyor. sayfa kodlarını FireBug ile görüntülediğinizde gizlediğiniz nesnenin aslında hala orada olduğunu görürsünüz. Sadece CSS değerlerinden display özelliği none olduğu için görünmüyor.

Gizlenmiş olan bir nesneyi tekrar görünür hale getirmek için ise şu kod yeterli olacaktır.

document.getElementById('deneme').style.display='block'

Bu kodları aşağıdaki yazı yazıya onclik yani tıklayınca çalışma özelliğine atadığımızda artık çalışır hale geliyor. Tıklayın ve deneyin.

Bana tıkla ve aşağıdaki resmi gizle!

Bana tıkla ve aşağıdaki resmi göster!

Yukarıda anlattıklarımızın düzgünce kodlanmış halini aşağıda veriyorum. Javascript örnek kodunu editörünüzde açtığınız boş bir HTML sayfasına kopyalayın ve nasıl çalıştığını inceleyin.

<!DOCTYPE html>
<html>
<head>
<title>Javasctipy İle Bir Nesneyi Gizlemek</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>

<body>

<p onclick="document.getElementById('deneme').style.display='none'">Bana tıkla ve aşağıdaki resmi gizle!</p>

<p onclick="document.getElementById('deneme').style.display='block'">Bana tıkla ve aşağıdaki resmi göster!</p>

<img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjexzOG8_ZuzpygvuILfNLbvlFcy-WOAMXgevjYaLjt_-k8TMkRHdeV6P4NFYw3sINNm4ywafSpjC6hgY0yx17N0-nRGBE4Z4qrMIb8evnjJO22pR8ROtH_yEiqAtmu8JnFCaHiZ5BHrqw/s320/learn-jscript.jpg" width="320" id="deneme" />

</body>
</html>

Evet bu seferlik bu benden bu kadar. Umarım sizin için faydalı olabilmişimdir. Fikir ve görüşlerinizi yorum olarak yazarsanız beni çok mutlu eresiniz.

Unutmayın!

JavaScript öğrenmek kolay ve zevkli bir iştir.

4 Ağustos 2016 Perşembe

JavaScript ile metin boyutu nasıl değiştirilir

Javascript kullanarak bir yazının font-size'ı nasıl değiştirilir?

Javascript başlangıç seviyesi çalışmalarımıza devam ediyoruz. Bu sefer web sayfasındaki bir metnin boyutunu JavaScript ile değiştireceğiz. Normalde bir web sayfası kodlarken metin boyutlarını CSS kodları ile düzenleriz. "font-size:" kodunu kullanarak istediğimiz yazıya, istediğimiz boyutu, piksel,yüzde(%), em vs cinsinden verebiliriz.

Javascript basit kodlarla bir metne font-size vermeye ya da font-size'ı değiştirmeye izin verir. Peki CSS kullanarak bu işi yapmak varken neden Javascript kodu yazalım ki?

Aslına bakarsanız CSS ile yapabileceğiniz işleri CSS ile yapmak daha mantıklı. Zaten genelde de yapılan budur. Ancak sayfada bazı olaylar olduğunda(tıklama, yüklenme, fare ile bir nesnenin üzerine gelme gibi). görüntüde değişiklikler yapmak isteyebilirsiniz.

JavaScript işte bu durumlarda bir FrontEnd Developer'ın imdadına yetişiyor. Birkaç satır kod yazarak sayfada istediğiniz manipülasyonu yapabilirsiniz. Nasıl olduğun görmek için aşağıdaki butonu bir deneyin derim.

JavaScript ile bu yazının boyutunu değiştirmek için yukarıdaki butona bas!

Javascript kounu mu merak ettiniz? İşte size kodlar!

<!DOCTYPE html>
<html>
<head>
<title>Javasctipy İle Bir Yazının Boyutunu Değiştirmek</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
</title>
<body>

<h3>Javascript kullanarak bir yazının font-size'ı nasıl değiştirilir?</h3>

<button type="button" onclick="document.getElementById('yazi').style.fontSize='35px'">Font size değiştir!</button>
<button onclick="document.getElementById('yazi').style.fontSize='14px'" type="button">Font size'ı eski haline getir!</button>

<p id="yazi" style="font-size:14px;">JavaScript ile bu yazının boyutunu değiştirmek için yukarıdaki butona bas!</p>

</body>
</html>

Burada butona tıklandığında (onclick) tarayıcı id'si yazi olan nesnenin font-size'ını değiştirir. Bu işlemi yapan minik Javascript kodu şöyle:

document.getElementById('yazi').style.fontSize='35px'

Bu kodun çalışma adımları:

document.getElementById('yazi') : id değeri yazi olan elemanı bul
style : bu elemanın style nesnesine ulaş
fontSize: style nesnesinin bir özelliği olan fontSize'ı uygula ve buna karşısındaki değeri ekle

Hepsi bu kadar.

JavaScript öğrenmek kolay ve zevkli bir iştir.

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>

Kaydol: Kayıtlar ( Atom )

Görsel Ara

19 Aralık 2016 Pazartesi

10 Kasım 2016 Perşembe

Bu Çalışma Kimin İçin?

15 Ağustos 2016 Pazartesi

Grafiker arkadaşlar için .png uzantılı hazır noktalı çizgiler. Üstelik Web 2.0 renklerinde.

5 Ağustos 2016 Cuma

Javascript ile sayfadaki bir nesne nasıl gizlenir?

JavaScript öğrenmek kolay ve zevkli bir iştir.

4 Ağustos 2016 Perşembe

Javascript kullanarak bir yazının font-size'ı nasıl değiştirilir?

JavaScript öğrenmek kolay ve zevkli bir iştir.

2 Ağustos 2016 Salı

1 Ağustos 2016 Pazartesi

Abone Ol: