pillinetwork hesabınızla giriş yapın.

Etiket:

bu etikete sahip olanlar bunlara da sahip: +, +, +, +, +

css hakkındaki yazılar:

CSS İçin DEBUG İşlemi

Aşağıdaki kod parçacığını istediğiniz zaman CSS dosyanıza ekleyerek, tasarımınızdaki her bir katmanın / alanın farklı bir çerçeve ile çevrelenmesini sağlayabilir. Böylece hangi alanların düzgün yerleştiğini, hangilerinin tam oturmadığını görebilirsiniz. Debug kodlarıyla işiniz bittiğinde /* */ yorum kodlarıyla devre dışı bırakabilirsiniz.

devamını okuyun
Spacer
Spacer
/* Etiketler: , , , , */
/* erayalakese yazdı. 21 Temmuz 2010 09:30. 9 yorum var */

Web önyüzü nasıl olmalı?


\

Web önyüzü(frontend) temel olarak üç öÄŸeden oluÅŸur.


Ä°ÅŸaretleme dili
HTML, XHTML, WML gibi işaretleme dilleri. Bunlar sayfanın ana iskeletini oluşturur

Stil dosyaları
CSS. Bunlar ise iskeletin üzerine giydirilen görsel öÄŸeleri belirler.


Dinamik öÄŸeler
JavaScript . JavaScript ise sayfalarda, istemci(client) tarafında dinamik istekler yapmamıza yardımcı olur.


Web önyüz kodlamada yapılan en büyük yanlışlardan birisi de bu üç öÄŸenin birbiri içersinde gereÄŸinden fazla yer almasıdır. Bu üç öÄŸenin etkileÅŸimi kaçınılmaz olsa da, bu etkileÅŸimi en aza indirmek, hem daha güzel/anlaşılır kodlar üretmek, hem de daha hızlı ve kararlı web önyüzleri üretmemizde faydalı olur.

Bu yazıda, nasıl daha standart, anlaşılabilir, güzel, sade web önyüz kodları üretebileceÄŸinizi anlatmaya çalışağım. Bir web önyüzü;

devamını okuyun
Spacer
Spacer
/* Etiketler: , , , , , */
/* osmanyuksel yazdı. 30 Haziran 2010 11:51. 4 yorum var */

DataGrid CSS3

\

Merhabalar geçmiş sayfalardan örnek bir datagrid html modelinin sıfırdan html'e aktarılış hikayesini tüm incelikleriyle açıklamaya çalıştığımız bu yazımızı okuyanlarımız hatırlayacaktır.

O gün için CSS3 multiple background özelliğine destek veremeyen tarayıcıların kodumuza yansıttığı zahmeti belirtmişdik. Bu gün ise explorer haricindeki tarayıcılarımız bu zahmetleri, rahmete çevirecek desteklerine kavuşdukları görünmektedir.

devamını okuyun
Spacer
Spacer
/* Etiketler: , , , , , , , , , */
/* thealico yazdı. 13 Mayıs 2010 12:24. 10 yorum var */

Popeye Jquery ile resim gösterme şeysi

Selamlar dostlar
Yine kodaman da aslında pek çok istenmeyen bir yazımsı ile karşınızdayım. Bu seferki yazı Jquery ile resim gösterme teknikleri ve yeni çıkan bir plugin hakkında olacak hemencecik girizgahımızı yapalım

Efenim jquery hepimizin malumu; web geliştiricilerine çok büyük özgürlükler sağlayan bir framework çatısı. Flash gibi çoğu geliştiriciyi kastıran bir uygulamadansa tek satır kod ile aklınızda olan her türlü efekti (bounce, smoot,) ve uygulamayı yaptırtan (ajax, json ...) eğlenceli bir o kadarda insanın ufkunu açan bir framework

devamını okuyun
Spacer
Spacer
/* Etiketler: , , , , , , , */
/* CeRBeR yazdı. 16 Nisan 2010 11:22. 0 yorum var */

Hangi siteleri gezdiÄŸini biliyorum!

Web sitenize birisi geldi ve bu kullanıcı daha önceleri hangi sitelere girmiş, acaba hürriyet'e girmiş mi, ntvmsnbc'ye ya da digg'e girmiş mi, peki ya facebook'a ya da bbc.co.uk'ye girmiş mi, ya google'a (tamam, ona kesin girmiştir), yetmedi wikipedia'nın Türkiye sayafasına girmiş mi? Gibi sorular sormuş olabilirsiniz, ve kendi kendinize tabii ki bunları bilemeyiz diyeceksiniz ama yanılıyorsunuz, hepsini öğrenebiliriz.

CSS kullanarak bir ziyaretçilerin hangi web sitelerine (daha doğrusu adrese) girdiğini öğrenmek mümkün. Buna CSS açığı da diyorlar ve hala bu açığın nasıl düzeltileceği konusunda bir çözüm bulunabilmiş değil. Hemen olayın nasıl işlediğine geçeyim. Bunu PHP kullanarak göstereceğim, fakat Javascript kullanarak da yapılabilir bir yöntem. Önce HTML sayfamızı oluşturalım (gecmisiogren.html olsun):

1
2
3
4
5
6
7
8
9
 
<head>

 <style type="text/css">

  #kodamanpizbt:visited {

  background: url(takip.php); }

 </style>

</head>

<body>

 <a id="kodamanpizbt" href="http://www.kodaman.org/yazi/php-ile-ziyaretci-bilgilerini-tespit"></a>

</body>

devamını okuyun
Spacer
Spacer
/* Etiketler: , , , , , , , , */
/* darkhorn yazdı. 02 Nisan 2010 11:49. 7 yorum var */

3 Adımda jQuery Sexy DropDown Menu

Çoğu çalışmalarımızda gerekli olan DropDown menü jQuery ile dahada basit hale gelmiştir. 3 adımda aşağıdaki örnekteki gibi yapabilirsiniz. İşinize yarayacağını düşünüyorum.

Adım 1 : HTML
HTML tagları ile menümüzün başlıklarını oluşturuyoruz.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
<ul class="topnav">

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

    <li>

        <a href="#">Tutorials</a>

        <ul class="subnav">

            <li><a href="#">Sub Nav Link</a></li>

            <li><a href="#">Sub Nav Link</a></li>

        </ul>

    </li>

    <li>

        <a href="#">Resources</a>

        <ul class="subnav">

            <li><a href="#">Sub Nav Link</a></li>

            <li><a href="#">Sub Nav Link</a></li>

        </ul>

    </li>

    <li><a href="#">About Us</a></li>

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

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

    <li><a href="#">Contact Us</a></li>

</ul>

devamını okuyun
Spacer
Spacer
/* Etiketler: , , , , , , */
/* rhymes yazdı. 11 Ocak 2010 19:57. 3 yorum var */

JQuery ile fluid grid oluÅŸturmak

Bir web sayfasına magazin/gazete görünümünde gird oluşturmak JQuery ile çok basit bir şekilde olmaktadır. Aşağıda kullanılan yöntem ve fonksiyonlar çok basit olması nedeniyle bir çok kişi tarafından rahatlıkla uygulanabilir. Bunları adımlayarak yapacak olursak:

1- Basit bir html sayfası oluşturalım:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<head>

        <title>Fluid grid</title>

        <script type="text/javascript" src="script/jquery-1.3.2.min.js"></script>

    </head>

    <body>

        <div class="box"><p><span>01</span>01 Numaralı kutu...</p></div>

        <div class="box alt"><p><span>02</span>02 Numaralı kutu...</p></div>

        <div class="box"><p><span>03</span>03 Numaralı kutu...</p></div>

        <div class="box alt"><p><span>04</span>04 Numaralı kutu...</p></div>

        <div class="box"><p><span>05</span>05 Numaralı kutu...</p></div>

        <div class="box alt"><p><span>06</span>06 Numaralı kutu...</p></div>

        <div class="box"><p><span>07</span>07 Numaralı kutu...</p></div>

        <div class="box alt"><p><span>08</span>08 Numaralı kutu...</p></div>

        <div class="box"><p><span>09</span>09 Numaralı kutu...</p></div>

    </body>

devamını okuyun
Spacer
Spacer
/* Etiketler: , , , , , */
/* rhymes yazdı. 04 Ocak 2010 11:31. 5 yorum var */

JQuery ile paket sitelere istemci taraflı çözümler

Merhabalar, uzun bir aradan sonra JQuery'nin kurtarıcı olduğu bir hikaye ile karşınızdayım. Aslında burada çok az kod paylaşacağım ama bu tip bir sorunla karşılaşanlar için iyi bir çözüm olacağına eminim. Hem de kodaman yapısına çok uygun olacak bir paylaşım olduğunu düşünüyorum.

Hikayemiz şöyle : bir paket e-ticaret sitesi kullanıyoruz ve tema yönetim sistemi var ancak sadece istemci taraflı kodlara yani css html vs javascript müdahele edebiliyoruz. hazır bir paket olduğu için sunucu tarafında kod değiştirme gibi gereksinimler tam bir çile oluyor ve paketi satan firmamız ya değişikliklere ek ve biraz da yüksek ücretler, yada bu bir paket sistem o tarz birşey eklemeyiz gibi cevaplar veriyorlar.

devamını okuyun
Spacer
Spacer
/* Etiketler: , , , , , */
/* vectro yazdı. 28 Aralık 2009 11:33. 2 yorum var */

Sprite Tekniği ile Basit Css Menü Yapımı

Merhaba!

css 2.0 ile hayatımıza giren Sprite tekniği çok geniş kullanım alanına sahiptir. Hem sayfa hızını olumlu yönde etkilemesi hemde kişiye sunduğu hız ve kolaylıklada çok kişinin duasını almıştır da diyebiliriz.

Sprite tekniğinde menü vb. gibi imajları tek bir dosya altında toplayarak hız ve pratiklik kazanıyoruz.

css sprite tekniÄŸi
css sprite tekniÄŸi

Yukarıda gördüğünüz örnek menümüzde tek .gif dosyası içinde menünün hem up hemde over hağlini birlikte görüyoruz ve menüyü yaparken sadece tek bu imajı kullanıcaz.

devamını okuyun
Spacer
Spacer
/* Etiketler: , , */
/* goldharpoon yazdı. 05 Kasım 2009 09:57. 13 yorum var */

CSS'de Arkaplan : Bilmeniz Gereken Her Åžey

\
Arkaplan, CSS'nin çekirdek parçalarından birisidir. Az da olsa bilmeniz gereken en temellerindendir. Bu makalede, CSS'de arkaplanların temel özelliklerini öğreneceğiz. Arkaplanlar kullanılarak yapılabilecek bazı hileleri de makalede bulabilirsiniz. Ayrıca CSS3'ün yeni arkaplan özellikleri de makalede mevcut. Aslında bu adreste yazılmış olan makeleyi Türkçe'ye çevirip kendi sitemde yayınlamıştım. Kodaman'da da yayınlamak istedim.

CSS2'de Arkaplanlarla Çalışmak
Gözden Geçirme
CSS2'de 5 ana arkaplan özelliğimiz var. Bunlar;
  • background-color : arkaplanın doldurulacağı düzgün rengi belirler.
  • background-image : arkaplan için bir imaj belirler.
  • background-position : belirlenen imajın arkaplanda nereye konumlandırılacağını belirler.
  • background-repeat : belirlenen imajın arkaplanda tekrar etme durumunu belirler.
  • background-attachment : belirlenen imajın arkaplanda kayma durumunu belirler.

Bu özellikler background denilen daha kısa bir özellik altında toplanabiliyor.Not edilmesi gereken önemli nokta, background özelliği, uygulandığı elemanın içeriğini (content) , iç boşluklarını (padding) ve kenarlıklarını (border) kapsar. Elemanın dış boşluklarını (margin) kapsamaz. Bu özellikleri Firefox, Safari, Opera ve şimdi Internet Explorer 8 desteklemektedir. Fakat aşağıda da görebileceğiniz gibi Internet Explorer 6 ve Internet Explorer 7'de background özelliği kenarlıkları (border) kapsamaz.

\

devamını okuyun
Spacer
Spacer
/* Etiketler: , , , , , , , , , , , */
/* firederick yazdı. 11 Eylül 2009 11:05. 10 yorum var */
1 2 3 Sonraki

etiket menüsü

Bu site

Nokta ve pilli ortak yapımı olan kodaman.org hep birlikte içerik üretip gelirini yazarları ile paylaştığımız kolektif bir kod yazarları blogudur. Siz de katılabilirsiniz.

pilliilan

Bu siteye ilan vermek 7ytl/gün'den başlayan fiyatlarla

son yorumlar

devamı »

arama

pillinetwork