Fatih Hayrioğlu'nun not defteri » Haberler

07 Şubat web’den şeçme haberler

fatih.hayrioglu — Wed, 06 Feb 2008 22:46:29 +0000

Dreamweaver ile javascript kütüphaneleri kolay kullanmamız için güzel bir eklenti hazırlamışlar. Artık dw javascript kütüphaneleri ile çalışmak daha kolay. Bağlantı
Google’dan farklı arama araçları. Bağlantı
Yahoo javascript kütüphanesinden CSS sayfa iskeleti oluşturma aracı. Bağlantı
CSS3 ile birlikte gelen sözde seçicisi :target hakkında güzel bir makale. Bağlantı
Etkileyici web sayfası tasarlamanın 10 yolu. Bağlantı
Güzel html mailing hazırlamanın yolları. Bağlantı
CSS ile kitap bölüm girişi örneği. Bağlantı
Seçilen metinin artalan rengi atamak.(Firefox ve Safari için) Bağlantı
Erişilebilirlik için 10 kural. Bağlantı
web kodlayıcılarının yaptığı 8 hata. Bağlantı
jQuery ve DOM işlemleri Bağlantı
Tasarımcının Sağ, Programcının Sol Eli: HTML Coder Bağlantı

01 Şubat 2008 web’den seçme haberler

fatih.hayrioglu — Fri, 01 Feb 2008 14:08:30 +0000

line-height ve menülerde kullanımı. Bağlantı
Tarayıcı test aracı AcidTest3 artık yayında. Firefox 2(%51), IE7 (%13), Safari3 Beta(%39) ve Opera9.25 (%47) Bağlantı
Float kullanmadan CSS ile sayfa kodlamak. Bağlantı
CSS temizleme ve optimize etme araçları. Bağlantı
Eric Meyer tarayıcıların zaman çizelgesini çıkarmış. Hoş görünüyor. Bağlantı
WordPress hızını arttırmanın yolları. Bağlantı
Metinleri kolayca png’ye çevirmek için. Bağlantı
jQuery ile yapılmış zaman gösterici. Bağlantı
“Ahmetblog.net – CSS Image Menu 2.0″ Bağlantı
jQuery form doğrulama eklentisi güncellenmiş güzel özellikler var. Bağlantı
Firefox Avrupa’da ve genelde yükselmeye devam ediyor. Bağlantı
Tarayıcı savaşlarında 2009′da neler olur? Bağlantı

29 ocak 2008 web’den seçme haberler

fatih.hayrioglu — Tue, 29 Jan 2008 21:16:54 +0000

W3C’nin içeriğini Türkçeye çevirmişler. Gerçekten güzel bir doküman olmuş. Bu kadar geç fark etmem çok büyük kayıp. CSS kitabımı yazarken Türkçe terimler ve içerğinden yaralandım. Bu arada CSS kitabımın birincisini yakında yayınlıyorum. Bağlantı
SitePoint’den çevrimiçi CSS kitabı. Bağlantı
Web programcıları için güzel bir link arşivi sitesi. Bağlantı
“Google Alan adı tadıcılığına el koydu” Bağlantı
IE8 çıkıyor ve web âlemini değiştirmeye kararlı. Standart mod ve garip mod kavramını değiştecek gibi. Bağlantı
Opera’dan HTML5′e dair bir makale. Bağlantı
“Elementlerinizi sıfırlayın” Bağlantı
Linki resimlere stil vermek. Bağlantı
CSS kodlarınız IE’ye uygun hale getirmek için 5 ipucu. Bağlantı
İki artalan(background) resmi uygulamak. Bağlantı

26 Ocak 2008 Web’den Seçme Haberler

fatih.hayrioglu — Sat, 26 Jan 2008 15:32:27 +0000

HTML 5 çıktı. Uzun zamandır üzerinde çalışılan 5. sürümü sonunda çıktı. Bağlantı HTML4 ve HTML5 arasındaki farklar. Bağlantı
“ASP.NET Compile Seçenekleri” Bağlantı
Em tabanlı site kodlamak. Bağlantı
“FeedBurner Kullanmanın 5 Temel Faydası” Bağlantı
jQuery yardımı ile kolay uygulanabilir kaydırma çubuğu(scroll) scripti. Güzel çalışma Bağlantı
12 Adımda profesyonel web siteleri üretmek Bağlantı
Web Standartları yeni tarayıcılar ve IE8 hakkında yazılmış güzel bir makale. Bağlantı
Yukarıdaki yazıya Eric Meyer üstad karşılık yazmış. Bağlantı
“CSS ile Düzenlenen Formlardaki Hatalar ve Çözümleri 3″ Ahmet bu sefer fieldset, legend, form ve input konularına değinmiş. Bağlantı
Güzel bir wordpress teması. Bağlantı
FaceBook kendi javascript kütüphanesini çıkarmış. Bağlantı
Gelişmiş bir lightbox uygulaması. Biraz karışık görüne bilir ama değişik ihtiyaçlara karşılık veriyor. Bağlantı
Firefox 3 ile birlikte hareketli PNG desteğide geliyormuş. Bağlantı
“Visual Studio 2008 ve JavaScript Intellisense kullanımı” Bağlantı
50 adet en iyi wordpress ve blogger eklentisi. Bağlantı
CSS ile farklı bir yuvarlak kenarlı kutu uygulaması. Bağlantı
CSS yapısını farklı bir yöntemle göstermek. Bağlantı

21 Ocak Web’den Seçme Haberler

fatih.hayrioglu — Mon, 21 Jan 2008 19:14:56 +0000

Tabloları daha anlaşılır yapmak için fare imleci hangi satır üzerine geldi ise o satırının tamamını farklı zemin rengi ile belirterek tablo okunabilirliğini arttırırız. Son zamanlarda bunu daha gelişmişini sitlerde görmeye başladım, bana da lazım oldu açıkçası, hem satır hemde kolon seçili hale getirilerek daha anlaşılır tablolar elde edebiliyoruz. Bunun için jquery kütüphanesi kullanılarak hazırlanmış güzel örnekler. Bağlantı
OnlinePrompter (televizyondaki sunucu, spiker veya konuşmacının, konuşma metinlerini takip etmesini sağlayan, koca puntolarla yazılmış metnin yavaş yavaş aktığı ekran) javascript ile yapmışlar. Basit ama sunumlarda yardımcı olabilir. Bağlantı
“.NET Framework 3.5 açık kaynak kodları karşınızda!” Bağlantı
Eric Meyer css başlangıç dosyasını yenilemiş. Bağlantı
Google grafik üreteci için çevrimiçi araç. Çok güzel. Bağlantı
CSS ile geçiş efektli yazılar hazırlamak. Bağlantı
CSS ile geçiş efekti vermek için bir adet makale daha. sFIR ve jquery destekli Bağlantı
WordPress güvenlik ipuçları. Bağlantı
mootools kaynaklı güzel bir lightbox uygulaması. Multibox Bağlantı
evcil.net geri dönmüşde bizim haberimiz yok. “Seyreyle Gönül .NET Framework Kodunu” Bağlantı

15 Ocak 2008 Web’den Seçme Haberler

fatih.hayrioglu — Tue, 15 Jan 2008 20:38:51 +0000

Birçok javascript kütüphanesi css seçicilerinin tarayıcı sorunlarını gidermek için kod çıkardı. Bu kodların zaman çizelgesi. Bağlantı
Tarayıcı değerlendirme aracı Acid’in 3. sürümü çıkmış. Yeni sürüm üzerine bir yorum. Bağlantı
Lightview yuvarlak kenarlı bir lightbox uygulaması. Bağlantı
Kaynak kodların yayınlandığı ve saklandığı bir site. Bağlantı
Güzel css teknikleri. Bağlantı
Ahmet Küçükoğlu “CSS ile Düzenlenen Formlardaki Hatalar ve Çözümleri 2″ Bağlantı
Eburhan “jQuery ve Olaylar” Bağlantı
“İnsanların Web Sitenizi Bulmasını Sağlayın: 8 SEO İpucu” Bağlantı
İnternet reklamcılığının yeni sitesi Linkz açılmış. Bağlantı
jQuery 2. yaş gününde yeni versiyonunu çıkardı. jQuery 1.2.2 Bazı hatalar düzeltilmiş, %300 daha hızlı olmuş ve bazı özellikler eklenmiş. Bağlantı
26 adımda tam erişilebilir web sitesi yapmak. Bağlantı
6 adet ücretsiz SEO aracı. Bağlantı
Google Map’e hava durumu bilgiside eklenmiş. Bağlantı

z-index

fatih.hayrioglu — Mon, 14 Jan 2008 21:10:37 +0000

z-index, konumlandırma elementleri uygulanmış katmanların z-eksenindeki konumu belirlemek için kullanılır.

z-index tüm elementlere uygulanamaz sadece konumlandırma değeri atanmış elementlere uygulanır. Bunun anlamı eğer bir elementi aynı z-ekseni üzerinde üste veya alt sıraya atmak istiyorsanız ilk olarak konumlandırma değeri atamalısınız.

z-index değeri dokümanımızdaki elementlerin istiflenme sıralarını belirler. z-index elementleri z-ekseninde nerede duracağınız belirler, üstte veya altta. z-indeks değeri küçük olan elementler altta büyük olan elementler ise üstte görünecektir. Sitenizi kodlarken birçok yerde z-index ihtiyaç duymayız çünkü normal sayfa akışında elementler yanyana durduğu için böyle bir özelliğe ihtiyaç yoktur, ne zamanki elementlere konumlandırma değeri tanımladığımızda elementler bir biri üzerine bindiğinde z-index değerine ihtiyaç duyarız. z-index mutlak, göreceli ve sabit konumlandırma atandığı veya elemente eksi değer verilerek konumu değiştirildiğinde uygulanır.

Yapısı: z-index:
Aldığı Değerler: <sayısal değer > | auto | inherit
Başlangıç değeri: auto
Uygulanabilen elementler: postion uygulanan elementlere
Kalıtsallık: Yok

Browser Uyumu:

Internet Explorer 4+(kısmen, IE4 den sonra auto ve sayısal değerleri destekliyor)
Netscape 4+(kısmen), 6+(tüm)
Opera 5+
W3C’s CSS Level 2+
CSS Profile 2.0

Konumlandırma değeri relative, absolute ve fixed uygulanmış katmanların görünürlüğünü z-index ile ayarlayabiliriz.

div{
    position:absolute;
    width:150px;
    height:150px;
}
div.bir {
    background: #FEB3BE;
    border:2px solid #CC8B94;
    top: 0;
    left: 0;
}
div.iki {
    background: #E5ECF9;
    border:2px solid #BCCCEB;
    top: 10px;
    left: 10px;
}

Yukarıda örnekte görüldüğü gibi katmanlar üst üste sıralanmıştır. Birbirinden 10px üst ve 10px soldan mesafe bırakılmıştır. Üstte kalan katman alttakileri gizlemiştir. Tüm katmanların z-index değeri atanmamıştır bu nedenle başlangıç değeri olan z-index:auto değerini almışlardır.

z-index değeri otomatik olduğu için her katman html’deki sırasına göre yerleşmiştir. İlk başta yazılmış olanlar altta sonrakiler üstte olacak şekilde sıralanmıştır.

Eğer katmanları istediğimiz sıra ile göstermek istiyor isek her katmana sırasına göre sayısal değer atamalıyız. Yüksek değer alan katmanlar üstte düşük değer alan katmanlar ise altta kalacaktır. Buna göre istediğimiz görüntüyü elde etmek için z-index değerleri vermeliyiz.

Yukarıda yaptığımız örnekte alttaki kırmızı katmanı üste çıkarmak için z-index değerini 2 versek. Mavi katmanın z-index değerini 1 verirsek katman görünümünü tersine dönecektir.

div{
    position:absolute;
    width:150px;
    height:150px;
}
div.bir {
    background: #FEB3BE;
    border:2px solid #CC8B94;
    top: 0;
    left: 0;
    z-index:2
}
div.iki {
    background: #E5ECF9;
    border:2px solid #BCCCEB;
    top: 10px;
    left: 10px;
    z-index:1
}

İçiçe girmiş katmanlarda z-index davranışları farklıdır. İçiçe geçmiş katmanlardaki z-index:auto değeri gibi davranır ve sayısal atamaları dikkate almaz.

z-index değeri yüksek olmasına rağmen bir sınıfını alan katmana altta kalacaktır. Çünkü iç içe geçmiş elementlerde z-index’e atanan sayısal değerler geçersizdir. Sıralama z-index:auto ya göre yapılır.

Not

z-index eksi değerlerinde Firefox sorun çıkarıyor. Firefox 3′da sorun giderilmiş.

Sonuç

Sonuç olarak z-index özelliğinin çok kullanışlı ancak sorunları çok bir özellik olduğunu düşünüyorum. Birçok makalede istediğim manada detaylı bir z-index anlatımı bulamadığımı itiraf etmeliyim. Ancak kodlama yaparken aklımızda olması gereken kuralları kavrarsak z-index özelliğini daha bilinçli kullanacağımız kesin:

z-index değeri; aynı z-ekseninde bulunan(kapsayan elementler hariç) katmanların altta mı üstte mi kalacağınız belirlemek için kullanılır.
z-index sadece position değeri relative, absolute ve fixed olan nesnelere uygulanır.
Saydamlık değeri(opacity) 1′den küçük verilen nesnelerde z-index kullanımı daha kolay anlaşılır.

Konumlandırma uygulanmış elementlerde z-index etkileri

Mevcut sıralama durumunda elementin sırasını belirler
Elementin kendi kısmındaki durumun belirler

Eğer z-index değeri atanmamış ise z-eksenindeki arkadan öne doğru sıralama aşağıdaki gibidir:

Normal akıştaki kutular koddaki sıraya göre sıralanır
float uygulanmış kutular
Konumlandırma uygulanmış elementlerde ise kodlamadaki sıraya göre

z-indeks ile ilgi bazı problemler ve çözüm önerileri var bunları aşağıda listeledik bu linklerdeki çözümleri incelemenizi tavsiye ederiz. Karşıma çıkan bazı problem ve çözümleri sitede yayınlamaya devam edeceğim.

Kaynaklar

http://www.search-this.com/2007/08/15/give-me-some-zzzzzs/
http://www.brainjar.com/css/positioning/default5.asp
http://joshuaink2006.johnoxton.co.uk/blog/82/flash-content-and-z-index (flash ve html elemtnleri)
http://www.blooberry.com/indexdot/css/properties/position/zindex.htm (tarayıcı destek)
http://www.westciv.com/style_master/academy/css_tutorial/properties/page_layout.html#z-index
http://developer.mozilla.org/en/docs/Understanding_CSS_z-index
http://css-discuss.incutio.com/?page=OverlappingAndZIndex
http://csscreator.com/blog/z-index
http://www.fatihhayrioglu.com/?p=151
CSS Mastery Advanced Web Standards Solutions
Cascading Style Sheets The Definitive Guide
Wrox Beginning CSS 2nd.Edition

Sorunlar ve çözümler

12 Ocak 2008 Web’den Seçme Haberler

fatih.hayrioglu — Sat, 12 Jan 2008 12:40:29 +0000

Orhan Ekici “Nedir bu seo?” adlı güzel bir makale yazmış. Bağlantı
Yahoo Medya player ile sitenize görüntü/ses oynatıcı gömebilirsiniz. Bağlantı
VS.NET 2008 yenilikleri. Bağlantı
CSS düzeltme olmadan kullanmak. Bağlantı
50 güzel favori ikonu. Bağlantı
CSS3′ün 3 yeni özelliği(birden fazla zemin resmi, saydamlık ve boyutlandırabilme). Bağlantı
Alta çizgi atmanın(text-deocariotn:underline) farklı tarayıcılardaki durumu. Bağlantı
Anlamlı kod yazmayı anlatan bir kitaptan alıntılar. Bağlantı
Bu oyunu bilgisayarımda oynayabilirmiyim? Bunu test eden bir site. Çok güzel bir araç Bağlantı
100 Adet güzel ücretsiz wordpress teması. Bağlantı
Opera’nın iphone sürümü çıkmış. Bağlantı
Google Flash Animasyonlarındaki Yazıları da Okuyabiliyor! Bağlantı
İkidir sitedeki yazılarımın içinde script kodu ile saldırı oluyor anlayamadım. Genel bir saldırı varmış bu aralar bizi de etkiledi sanırım. WordPress sürümünü yükseltmenin zamnı geldi sanırım.

8 Ocak 2008 Web’den Seçme Haberler

fatih.hayrioglu — Tue, 08 Jan 2008 21:22:05 +0000

Ajax editörleri Bağlantı
GWT semineri görüntüleri. Bağlantı
Resim yerine swf koyma metodu ile resimlere efekt vermek. Bağlantı
css çıktı almada sayfa sonu ekleme. Bağlantı
Google Docs sunu dosyalarını web sitemize ekleye biliyoruz artık. Bağlantı
Thunderbird’e Outlook arşiv dosyalarını içe aktarmak için eklenti. Ben yapamadım yalnız. Bağlantı
El yazısı stilli yenilikçi tasarımlar. Bağlantı
“Team Foundation Server Sistem Gereksinimleri” Bağlantı
Asp.Net ipuçları. Bağlantı
Güzel bir resim galerisi örneği MooFlow0.1 Bağlantı
jquery ile oval kenarlık yapmak. Bağlantı
Ahmet Küçükoğlu’ndan “CSS ile Düzenlenen Formlardaki Hatalar ve Çözümleri” Bağlantı
IE7 isimli javascript dosyası ie5 ve ie6 daki css ve javascript sorunlarımızı gidermemizi sağlıyor. Bağlantı
Sizde benim gibi “Web Seminerleri” ne katılamayanlardan iseniz, seminer notlarına buradan ulaşabilirsiniz. Bağlantı

4 Ocak 2008 Web’den Seçme Haberler

fatih.hayrioglu — Fri, 04 Jan 2008 12:53:37 +0000

YUI 2.4.0 çıkmış. Birçok yenilikler var. Bağlantı
Photoshop icon üretme eklentisi. Bağlantı
Fatih Turan’dan “Firefox 3′de CSS İçin İyileştirmeler” Bağlantı
Erkut Ercan’dan “CSS 3.0 / Yeni Versiyonla Gelen Bazı Özelikler” Bağlantı
Ogalican “Css İle Yatay İstatistik Kutusu” makalesini okuyun. Bağlantı
HTML+ CSS sayflarından yüksek kaliteli pdf dokümanı oluşturmanın video anlatımı. Bağlantı
Google’dan 2007 istatistikleri. Bağlantı
Netscape web tarayıcısı artık yeni sürüm çıkarmayacakmış. Bağlantı
2007′de en çok indirilen programlar. Bağlantı
“2007 yılında ülkemizdeki olumlu internet gelişmeleri” Bağlantı
Kendimize özel selecbox oluşturalım. Bağlantı
Minimum kod kullanarak gölgeli kutu yapmak. Bağlantı
HTML ve CSS ile esneyebilir resimler eklemek. Bağlantı
Float Uygulanmış Elementleri Tam Kapsayamama Sorununa yeni çözümler. Bağlantı
CSS renk tanımlarını anlamak. Bağlantı
Web standartlarının geleceği. Bağlantı
Yeni yılda yeni web tarayıcıları geliyor. Bağlantı