bildirgec.org

mbardak hakkında tüm yazılar

Dynamic Drive CSS Kütüphanesi

mglass | 02 August 2009 21:15

css popup image wiever
css popup image wiever

Tasarımcıların en can sıkıcı sorunu ie ,firefox ,safari ve ie farklı versiyonları için tasarım farklılıklarıdır bunun en önemli nedeni ie6 gibi eski browserların kullanımının devam etmesi uyumluluk sorunları hakkında bir çok makale var mesela reset dosyası kullanmak, farklı tarayıcıların desteklediği kodlardan kaçınmak, ie 6 dan css kodlarımızı gizlemek ve bana da en mantıklı gelen bu css’i kullan <-- if [enif] --> önce kullanıcının tarayıcı özelliklerinin öğrenip ona göre farklı css dosyası dahil etmek… bu tarz sorunlardan kurtulduktan sonra uygulayabileceğimiz css örnekleriyle dolu bir kaynaktan söz etmek istiyorum işte :
Dynamic drive CSS kütüphanesi bu kaynakta CSS , jquery ile ilgili bir çok örnek uygulama ve kaynak kodu mevcut örneğin:
CSS ile submit buton tasarımı

css submit form
css submit form

Div ve yorum kutuları

css comment box
css comment box

CSS popup menu resim galeri

css popup image wiever
css popup image wiever

daha bir çok örnek uygulama kütüphaneleri mevcut artık herkes css’ci olacak 🙂 CSS Kütüphanesine buradan ulaşabilirsiniz …

XHTML ve CSS ile Tema Hazırlayalım

admin | 28 July 2009 02:48

xhtml ve css tema
xhtml ve css tema

Bu yazımda sizlere yeni başadığım bir sitenin başlangıç kodlarını paylaşacağım, öncelikle websitemizin tasarımını belirleyeceğiz, klasik bir örnek seçiyorum , websitemizin boyutlarını belirlemek için bir kapsayici katman atıyoruz ve sayfayı üçe bölüyoruz , ilk kısım header yani başlık: buraya bir flash banner ,foto galeri vs. koyalım, ikinci kısım orta alan olarak belirlensin: bu alanda da iki adet div kullanıp sitemizin sol tarafına bir sidebarve sağ tarafına da bir içerik alanı oluşturacağız. orta alanı da bitirdikten sonra hemen altına foote yani altlık ayarlayalım .footer alanı genelde kapsayıcı alanın en altında durur fakat sitenin biraz daha kullanışlı olabilmesi için footer alanını biraz yukarıda bırakıcaz.
gelelim kodlamaya :
XHTML Kodlarımız şu şekilde olacak

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
 
<body>

<div id="kapsayici">

<div id="header">

 <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="720" height="200" title="eca-banner">

    <param name="movie" value="herhangi-bir.swf" />

    <param name="quality" value="high" />

    <embed src="http://arsiv.pilli.com/eca.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="720" height="200"></embed>

  </object>

</div>

<div id="navigasyon" class="ClearFix">  

      <div id="sarkan_menu">

             <ul>

              <li><a href="#">Anasayfa</a></li>

              <li><a href="#" class="">Hizmetler</a></li>

              <li><a href="#">Hakkinda</a></li>

              <li><a href="#">Iletisim</a></li>

            </ul>

    </div>



</div>

<div id="orta">

     <div class="kutu" id="sol-menu">

                <div class="kutu" id="menu">

                <h4 align="center">MENÜ</h4>

                <div>

                    <ul>

                        <li> <a href="javascript:void(alert('bu bölüm henüz hazir degil !'));">XHTML NEDIR?</a> </li>

                        <li> <a href="javascript:void(alert('bu bölüm henüz hazir degil !'));">CSS</a> </li>

                        <li> <a href="javascript:void(alert('bu bölüm henüz hazir degil !'));">XHTML ve CSS</a> </li>

                        <li> <a href="javascript:void(alert('bu bölüm henüz hazir degil !'));">TASARIM</a> </li>

                   </ul>

                </div>

           </div>

	</div>

	<div id="icerik"></div>

</div>

<div id="footer">altlik -  telif hakki vs... </div>

</div>

</body>

Sitemizin header yani başlık kısmına bir de navigasyon alanı yerleştirdim bu alana eburhan ‘ın sarkan menulerini koydum .
Gelelim CSS kodlarımıza :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
 
body { margin:0;

padding:0;

background-image:url(arka-body.png); background-repeat: repeat-x;

	font-family: Arial, Helvetica, sans-serif;

}



td {

	font-family: Arial, Helvetica, sans-serif;

}



th {

	font-family: Arial, Helvetica, sans-serif;

}

#kapsayici{

 margin: 0 auto; width:720px; height:960px; }

#header{height:200px; background-color:#3399FF;}

#navigasyon{height:40px; background-color:#FF9900;}

#orta{height:620px; width:720px; background-image:url(arka-orta.png); background-repeat:repeat-x;}

#sol-menu{ width:200px; float:left; height:600px; background-image:url(arka-orta.png); background-repeat:repeat-x;}

#sol-menu > menu >h4{background-color:#999999;}

.kutu{ margin:0; padding:0;}

#icerik{ width:518px; height:600px; float:right;}

#footer{background-color:#FF9900; height:25px;}

      #sarkan_menu ul {

          margin: 0;

          padding: 0;

          height: 100%;

          overflow: hidden;

          list-style: none;

      }



      #sarkan_menu ul li {



          float: right;

          margin-right: 1px;

          font: bold 12px/14px Arial, Helvetica;



      }

      #sarkan_menu ul li a {

          display: block;

          padding: 5px 0;

          width: 85px;

          border-top: 8px solid #3f3f3f;

          color: #3f3f3f;

          text-align: center;

          text-decoration: none;

      }

      #sarkan_menu ul li a:hover,

      #sarkan_menu ul li a.aktif {

          padding-bottom: 8px;

          border-top: 8px solid #101010;

          background: #101010 url(mouse-over.png) 

           bottom no-repeat;

          color: #fff;

      }

arkaplan da kullandığım resim dosyalarını vermedim , bunların yerine geçici olarak renk verebiliriz. kabaca bir şablon hazırlamaya çalıştım , eleştirilerinizi ve önerilerinizi her zamanki gibi bekliyorum 🙂

SQLite Sunucusuz veritabanı uygulaması

mglass | 24 July 2009 18:22

SQLite
SQLite

Sunucu olmadan çalışan hafif, kullanıcıdan hiçbir ayarlama yapma gereksiniminde bulunmayan, hızlı tek bir dosyadan oluşan SQL komutlarını kullanarak veri alış-verişi yapan gömülü bir veritabanıdır. uygulamalar ile SQLite kullanmak için tek bir dosya ile basit bir kitaplık yeterli. SQLite hiçbir şekilde Sunucu kurulumu gerektirmez ve sunucuya bağlı değildir. detaylı bilgi ve SQLite’ı indirmek için buraya bakabilirsiniz.

SQLite
SQLite

SQLite kitaplığı 500kb’dan daha az yer kaplar. Tek bir dosyayı veritabanı olarak kullanması ve sunucu istemci mantığıyla çalışmaması nedeniyle pek çok avantajı var. birçok platform üzerinde çalışabilir bunlar: Linux, windows, Mac OS Xvb…

Windowssürümünü burdan indirebilirsiniz. ayrıca SQLite’ın açık kaynak kodlarının tamamını da buradan indirip inceleyebilirsiniz.
SQLite C programlama dili kullanılarak geliştirilmiştir… orjinal kaynak için bakınız pdf

php ‘de if koşulunun kısa kullanımı

admin | 23 July 2009 12:15

php - if koşulu
php – if koşulu

php’ de en sık kullanılan koşullardan biri hatta ilkidir if () koşulunun , uzun kullanımını tüm programcılar bilir fakat bunu ( if() koşulu ) kullanmanın daha kısa yolu olamaz mı ? Sorusuna bir örnek ;

Websayfamızın içerisine şu kodları yerleştirelim, basit bir aritmetik karşılaştırma yapalım,

a , b ve c üç sayı olsun , C sayısı a ile b‘ nin toplamı olmak üzere , c sayısının 3 e eşit olup olmadığını sorgulatalım if() koşulumuzun bize durum doğru ise Evet aksi taktirde Hayır cevabını yazdırsın . işte bu örneği anlatan uzun ve kısa metod …

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
<?php



$a=1;

$b=3;

$c = $a+$b;



//Kısa Yöntemi var mı? Sorusuna Cevap

print $c == 3 ? “Evet $c = 3″ : “Hayır $c != 3″.“<br>”;



//Genel , Bilindik Uzun Yöntem 

if($c == 3) {

print “Evet $c = 3“;

}else{

print “Hayır $c != 3“;



}

 ?>

— > Programın Görüntüsü :

Hayır 4 != 3
Hayır 4 != 3 şeklinde olacaktır …

Scratch java programcılığında yeni bir uygulama

mglass | 09 July 2009 14:24

Sctatch
Sctatch

Scratch 8 yaş üzeri bilgisayar meraklılarına programcılığı öğretmeden kendi görsel projelerini üretmeleri için geliştirilmiş yeni bir uygulama … her ne kadar 8 yaş ve üzeri dense de aslında içerdiği hazır program taslakları ve kullanılabilirliği ile gerçekten işleri kolaylaştırıyor .

Sctatch download
Scratch download

Scratch’in buradan ücretsiz indirebilirsiniz , scratch ile yapılmış projeler ve örnek uygulamalar Scratch websitesinde paylaşılıyor. açık kaynak olması uygulamalarının paylaşıldıkça geliştirilmesine yardımcı oluyor . Bana göre modern paint…
Scratch ile geliştirilmiş örnek uygulamalara bir göz atın , üzerinde çalışılan projeleri deneyin …

Sctatch projeleri
Sctatch projeleri

web sitesi üzerinden üye olarak sizde küçük animasyonlar ve oyunlar oluşturun. işte bir kaç hoş uygulama …

Scratch uygulama
Scratch uygulama
Scratch uygulama xp
Scratch uygulama xp

Akıl Haritalama ve şemantik web Arasındaki ilişki

mglass | 30 June 2009 13:00

Akıl Haritalama ve Şemantik web (Anlamsal Ağ) Nedir ?

İlk olarak akıl haritalamadan bahsetmek istiyorum , çocukluğumuzdan erişimimize yani yetişkin bir birey olana kadar kişisel gelişimimiz için bir çok eğitimden geçeriz , bunların en bilinenleri ilk ve ortaöğretim sistemidir tabiki… Yıllarca yeteneklerimiz ve algılarımız doğrultusunda eğitimler alır , sınavlara girer başarılı olduğumuz konularda ilerlememiz için tavsiyeler alırız. Hiç kimse ya da hiç bir çocuk diyeyim okul çağklarında başaramadığı bir konuda yönlendirilmemiştir…

akıl haritalama
akıl haritalama

Peki Bunların Akıl Haritalama ile Ne alakası var ?

His music will live forever

mglass | 29 June 2009 18:43

Mj funs
Mj funs

Popun Kralı Gözlerini yumdu fakat hayranları onu ve onun dans ve müziklerini asla unutmayacak… MJ web sitesi ölümünün ardından hayranlarının mesajlarıyla dolup taştı , His music will live forever başlığı altında milyonlarca hayran Mj hakkında hatıralarını paylaşıyor , saniyeler içinde yüzlerce mesaj rekor kırıyor tıpkı sağlığında olduğu gibi …

Kaydırma çubukları için 30 + javascript ve ajax Tekniği

mglass | 18 June 2009 22:18

1 – Yatay ve Dikey kaydırma çubukları – Slider

slider örnek
slider örnek

demosu için tıklayınız, indirmek için tıklayınız

2 – Slideshow benzeri resimli kaydırma çubukları – flickr slider

flickr benzeri slider örnek
flickr benzeri slider örnek

Nasıl Yapıldığı hakkında konu anlatımı ve kaynak kodunu indirmek için tıklayınız

3 – Yakınlaştırılabilir Kaydırma çubuğu– Accessslider

Accessible slider örnek
Accessible slider örnek

Demosu için buraya bakınız , Nasıl yapıldığını öğrenmek için tıklayınız

Diğer Sliderlar için 4 – 5 – 6– 7 – 8 –Fireworks.js slideradreslere gözatabilirsiniz… kaynak

facebook’un supriz yumurtası

mglass | 09 June 2009 14:30

facebook-süpriz yumurtaları
facebook-süpriz yumurtaları

Çok eskilerde Microsoft‘un Ofis paketlerinde rastladığımız yada Oyun hilelerinde gizli kodlarla klavyeden girilen birkaç ardışık karakterlere atanmış gizli fonksiyonlar Easter egg`diye adlandırdığımız özelliklere Süpriz yumurta demek yanlış olmaz, geçtiğimiz günlerde bu özelliklerin facebook‘ta da raslanmasına hiç şaşırmadık doğrusu kendisinden beklenen şeyleri facebook hiç vakit kaybetmeden sunuyor …

facebook-süpriz yumurta
facebook-süpriz yumurta

işte ilk facebook süpriz yumurtasının kodları :
↑ ↑ ↓ ↓ ← → ← → B A ENTER
(Yukarı Yukarı Aşağı Aşağı Sol Sağ Sol Sağ B A ENTER)
açıklama : Facebook`ta bu kombinasyonu yaptiginizda, Facebook`ta yaptiginiz her tiklamada baloncuklar ortaya cikiyor. Yeni Supriz yumurta kodlarını bekliyoruz facebook developer‘lara teşekkürler 🙂