‘XHTML’ Kategorisi Arşivi:
Yatay ve Dikey Ortalama Tekniği
Daha önce CSS Ortalama Tekniği isminde bir yazı yazmıştım ve DIVleri ortalamayı anlatmıştım. Fakat bu ortalama yatay ortalamaydı. Şimdi ise hem yatay hem de dikey ortalama tekniğini anlatacağım.
Adım 1 - HTML kodları
<div id="OrtalananGenelAlan"> <div id="Icerik"> <h1>Yatay ve Dikey Ortalama Tekniği</h1> <p>Gördüğünüz bu kutu şeklindeki DIV, yatay ve dikey olarak ekranın tam ortasında durmaktadır.IE5 ve Mac' lerde bazı problemler olsa da bunları bazı CSS hackler ile çözüyoruz. Yeni nesil tarayıcılar ise hiçbir sorun çıkarmadan yatay ve dikey ortalamayı yapabiliyorlar. Tarayıcınızın ekranını küçülttüğünüzde dahi bu ortalanmış DIV hiçbir şekilde kaymayacaktır. Sayfanın genelinde hiçbir şekilde kaydırma çubuğu görmeyeceksiniz. DIV içindeki kaydırma çubuğu DIV' e verilen overflow özelliğinden kaynaklanmaktadır.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec risus. Sed rhoncus sodales metus. Donec adipiscing mollis neque. Aliquam in nulla. Quisque faucibus tellus. Proin iaculis. Donec lobortis. Maecenas ut velit. Quisque molestie wisi. Sed sem lectus, ullamcorper quis, bibendum in, tincidunt quis, nulla. Nulla malesuada. Donec a elit at risus bibendum commodo. Duis quis ipsum. Sed ultricies, odio quis rutrum porta, lorem lacus sodales erat, nec scelerisque felis ipsum ut diam. Nunc lorem eros, dignissim quis, rhoncus sit amet, mattis eu, lacus. Vestibulum ipsum tellus, imperdiet iaculis, vulputate gravida, venenatis sit amet, lacus. Cras cursus. Cras dignissim mauris nec lorem. Curabitur malesuada. Nulla eleifend.</p> ..... </div> </div> </div>
Adım 2 - CSS Kodları
/* Mac ve IE5 için hack */
#OrtalananGenelAlan {
background-color:#999999;
width:720px;
height:420px;
margin:10px auto;
position:relative;
}
#Icerik {
background-color:#fff;
position:absolute;
top:10px;
left:10px;
height:380px;
width:670px;
padding:10px 20px 10px 10px;
overflow:auto;
}
/* commented backslash hack - invisible to IE 5 \*/
#OrtalananGenelAlan {
position:absolute;
margin:-210px 0 0 -360px;
left:50%;
top:50%;
}
/* hack biter */
OrtalananGenelAlan isimli DIV için Mac ve IE5′ te yatay hizalamasında sorun çıkarmaması için önce bir hack uyguladık. İkinci değerler ise dikey ortalama için verildi.
2008′ den 2009′ a Mutlu Seneler
Şu sıralar hasta olduğum için çok fazla yazamayacağım arkadaşlar. Sabah doktora gittim ve ağır şekilde üst solunum yolları enfeksiyonu geçirdiğimi öğrendim. Bağışıklık sistemim ciddi anlamda zarar görmüş durumda ve buna bağlı olarak en ufak bir soğuk aldığımda bu durum gittikçe kötüye gidiyor. İlaçlarımı aldım ve bir an önce bitirip iyileşmek istiyorum.
Her sene olduğu gibi bu sene de oturup 2008′ den akılda kalanları yazmak isterdim ama öyle uzun uzadıya yazmayacağım sadece benim aklımda kalan sektörel gelişmeler ve haberleri yazacağım;
- Firefox 3.0 sürümü indirilme dünya rekoru kırdı
- CSS2.1 yerini yavaşca 3.0′ a bırakma yolunda ilerlemeye başladı
- Joomla 1.0.x sürümlerinin yanı sıra 1.5.x sürümlerini çıkarmaya başladı
- Wordpress sürüm üzerine sürüm çıkardı ama şu an için en son 2.7 sürümünde karar kıldı
- Betik dil kütüphaneleri arasında jQuery büyük bir atak yaptı ve kendinden çok söz ettirdi
- Facebook kendini yeniledi ve ajax kullanımının dibine vurdu
- Ruby On Rails son 10 yılın en hızlı yükselen yazılım dili olarak açıklandı
- CMS ödüllerinde Drupal birinci olurken Joomla ve dotnetnuke ikinci oldu
- Ben deniz Kadir GÜNAY CMSTURK.NET sitesinde yönetici oldum
- .Net’ e ait framework 3.5 sürümü yayınlandı
- Adobe firması CS4 sürümünü piyasaya sürdü
Arkadaşlar benim aklımda kalanlar bunlar. Sizlerin eklemek istedikleri varsa yorum olarak ekleyebilirsiniz ben de böylece yazıyı güncelleyebilirim.
Bunların haricinde 2008 benim için iyi bir yıldı. Özellikle son 6 ayında kendimi geliştirme adına çok işler yaptım. Antalya’ dan İstanbul’ a taşındım ve kariyerimde ilerleme adına çok başarı bir ajansta çalışmaya başladım.
Her yazı ve konuşmanın sonunda yeni yıl ile ilgili dilekler söylenir ya işte bu kısım da onun için;
Ne olursa olsun yıllar, günler size ne getirirse getirsin bana göre umutlar yitirilmemeli. İnancınız ve umutlarınız ne kadar yüksek olursa o kadar kazanmaya yakınsınız demektir.
Sağlıklı, mutlu ve başarılı bir yıl dileklerimle.
jQuery ile Kayan Panel
Yazı başlığında olduğu gibi jQuery ile oluşturulmuş kayan panel yapıp içine ufak bir iletişim formu ekleyeceğiz.
jQuery Kayan Panel
Adım 1 - XHTML Oluşturmak
<div class="GenelAlan"> <div id="FormAlan"> <div id="IletisimForm"> <fieldset> <label for="Name">İsim *</label> <input id="name" type="text" /> <label for="Email">E-Posta Adresi*</label> <input id="Email" type="text" /> <label for="Message">Mesajınız *</label> <textarea id="Message" rows="3" cols="20"></textarea> <input id="sendMail" type="submit" name="submit" onClick="closeForm()" value="Gönder" /> <span id="MesajGonderildi">Mesajınız başarıyla gönderildi!</span> </fieldset> </div> <div id="IletisimBtn"></div> </div> <div class="header"> <h1> <img src="logo.png" style="margin-top: -20px;" /></h1> </div> .....
Adım 2 - CSS Hazırlamak
.GenelAlan
{
margin: 0px auto;
width:960px;
background-color:#ffffff;
text-align:left;
position: relative;
}
#FormAlan
{
position:absolute;
left:600px;
float:right;
}
#IletisimForm
{
height:277px;
width:351px;
background-image:url('bkg.jpg');
display:none;
}
#IletisimForm fieldset
{
padding:30px;
border:none;
}
#IletisimForm label
{
display:block;
color:#ffc400;
}
#IletisimForm input[type=text]
{
display:block;
border:solid 1px #4d3a24;
width:100%;
margin-bottom:10px;
height:24px;
}
#IletisimForm textarea
{
display:block;
border:solid 1px #4d3a24;
width:100%;
margin-bottom:10px;
}
#IletisimForm input[type=submit]
{
background-color:#4d3a24;
border:solid 1px #23150c;
color:#fecd28;
padding:5px;
}
#IletisimBtn
{
height:40px;
width:351px;
background-image:url('iletisim_form_btn.png');
display:block;
cursor:pointer;
}
#MesajGonderildi
{
color:#ff9933;
display:none;
}
Adım 3 - jQuery Dosyalarını İndirmek ve HTML Dosyasına Tanıtmak
Bildiğiniz gibi jQuery bir javascript kütüphanesi. jQuery ile çalışmak istiyorsanız bu kütüphaneye ait js dosyasını indirmek zorundasınız. İndirmek için jQuery resmi sitesini ziyaret edip son versiyonu indirebilirsiniz. İndirdiğiniz js dosyasını şu şekilde HTML dosyanıza ekleyin;
<script src="dizin/jquery-1.2.6.min.js" type="text/javascript"></script>
Siz direk ana klasöre de ekleyebilirsiniz.
Adım 4 - jQuery Kodlarını HTML Dosyasına Eklemek
Daha önceki konularda da söylediğim gibi jQuery ile ilgili işlemleri gerçekleştirebilmek için sadece js dosyasını eklemek yeterli olmuyor. Gerekli alanlar için tetikleyici bir kod bloğu eklemeniz gerekir.
<script type="text/javascript">
$(document).ready(function(){
$("#IletisimBtn").click(function(){
if ($("#IletisimForm").is(":hidden")){
$("#IletisimForm").slideDown("slow");
}
else{
$("#IletisimForm").slideUp("slow");
}
});
});
function closeForm(){
$("#MesajGonderildi").show("slow");
setTimeout('$("#MesajGonderildi").hide();$("#IletisimForm").slideUp("slow")', 2000);
}
</script>
Bu kod’u kısaca anlatmamız gerekirse;
$(document).ready(function(){
Tetikleyiciyi çalıştır
$("#IletisimBtn").click(function(){
if ($("#IletisimForm").is(":hidden")){
$("#IletisimForm").slideDown("slow");
}
else{
$("#IletisimForm").slideUp("slow");
}
});
#IletisimBtn isimli dive bir tıklama fonksiyonu oluştur ve eğer bu div gizli ise yavaş biçimde (.slideDown(”slow”)) aşağıya kaydır. Gizli değilse yine yavaş biçimde yukarı kaydır (.slideUp(”slow”))
;function closeForm(){
$("#MesajGonderildi").show("slow");
setTimeout('$("#MesajGonderildi").hide();$("#IletisimForm").slideUp("slow")', 2000);
}
closeForm isminde bir fonksiyon oluştur ve #MesajGonderildi isimli div’i yavaşca göster. setTimeout komutu ise MesajGonderildi divi içindeki mesajın yok olma zamanını belirtiyor. Bu mesaj yok olduktan sonra da IletisimForm isimli divi yani aşağıya kayan divimizi yavaşca yukarı doğru ilerlet ve kapat komutunu gerçekleştiriyor.
Not: Orjinal makale adresi http://designshack.co.uk/tutorials/creating-a-slide-in-jquery-contact-form ben jQuery kod bloğunu, css ve xhtml dosyalarını Türkçe anlattığım ve herkesin anlaması için bir bölümünü değiştirdim.
sIFR
Merhaba arkadaşlar. Bu yazımda size jQuery’ nin sayısız nimetlerinden birisi olan sIFR tekniği hakkında bilgi vereceğim.
Öncelikle sIFR nedir ona bakalım?
sIFR jQuery eklentilerinden birisi ve özelliği web sitelerinizdeki metinleri flash tabanlı olarak istediğiniz yazı tipine çevirmenize yarıyor.
Peki jQuery nedir?
jQuery bir Javascript kütüphanesi. Bu kütüphane aracılı ile çok basit şekilde web sitelerinizde çok güzel uygulamalar yapabilirsiniz. Yazımı kolay ve kısadır.
sIFR’ i kullanabilmemiz için gerekli dosyalar nelerdir?
- jQuery kütüphanesi - jquery-1.2.1.pack.js
- jQuery Flash eklentisi - jquery.flash.js
- jQuery sIFR eklentisi - jquery.sifr.js
- Embed (sanırım Türkçesi içine gömmek oluyor) edeceğimiz yazı tipini hazırlayacağımız fla dosyamız - sifr.fla
- fonts dizini
Tüm bu dosyaları ve örnek dosyayı buradan indirebilirsiniz.
Adım 1 - Yazı Tipini Embed Etme (Flash içine gömme)
zipli dosyamız içinden çıkan sifr.fla isimli dosyamızı flash programı ile açın. İç içe gömülü movieclipler göreceksiniz. Metin kutusunu görünceye kadar moviecliplerin içine girin. Karşınıza örnek bir metin gelecek. Orada bulunan metni seçin ve değiştirmek istediğiniz yazı tipini seçerek metnin yazı tipini değiştirin. Değişikliği yaptıktan sonra metin ayarlarının bulunduğu yerde “Embed” isimli bir düğme göreceksiniz işte o düğmeye tıklayın. Karşınıza gelen pencerede “Basic Latin (95glyphs)” seçin ve aşağısında bulunan “Include these characters” isimli kutucuğa şunları ekleyin; “ŞşİiÖöÇçÜüIıĞğ” (tırnaklar olmadan ekleyin). Bu yaptığımız işlem şunun içindir; seçtiğimiz yazı tipi Türkçe karakterleri desteklemiyor ise buraua girdiğimiz karakterleri de almasını sağlayacağız.
Bu işlemleri yaptıysanız eğer son olarak ctrl+enter tuşları yardımı ile swf dosyanızı oluşturun. Bu dosyayı kendi belirleyeceğiniz bir dizin içine atın. Ben fonts olarak ayarladım ve fonts dizini içine attım.
Adım 2 - Javascript dosyalarını tanıtmak
zip dizini içinden çıkan
- jquery-1.2.1.pack.js
- jquery.flash.js
- jquery.sifr.js
dosyalarımızın yolunu <head></head> etiketleri arasında göstererek tanıtın.
Adım 3 - jQuery tetikleyicisini eklemek
Bildiğiniz gibi javascript kodları bir tetikleyici kod satırı ile çalışmaktadır işte jQuery’ de tetikliyici kod bloğu da şu şekilde olmaktadır;
$(document).ready(function(){
// Your code here
});
Şimdi de sIFR için kullanacağımız kodu yazalım
$(function(){
$.sifr({path:'fonts'});
$('h3.KadirGunay, p.KadirGunay').sifr({font:'NeoSans'});
});
Burada dikkat etmemiz gereken şu; $(’.KadirGunay’).sifr({font:’NeoSans’}); bu kısımda .KadirGunay olarak geçen kısım CSS dosyamızda KadirGunay sınıfına atadığımız özellikleri alacaktır ve yine aynı şekilde KadirGunay sınıfındaki değişkenleri sIFR eklentisi ile belirlediğimiz yazı tipine değiştirecektir.
Hepsi bu kadar arkadaşlar
Nedenleri, Sonuçları ve Hataları ile IE6
Internet Explorer 6
7 senedir hayatımızda olan ve bu gidişle çıkmayı da pek düşünmeyen bir tarayıcı IE6. Bu yazımda kendimce IE6′ nın halen neden hayatımızda olduğu, hayatımızda olduğu için doğurduğu sonuçları ve diğer tarayıcılara göre web üzerindeki hatalarını anlatmaya çalışacağım.
Bu yazıyı yazmamda ki en büyük etkenlerden birisi bir kaç paragraf sonra göreceğiniz ve siteme ait olan bazı istatistiksel sonuçlar oldu. Elbette bunların yanında başka etkenler de yok değil ama inanın büyük bir şaşkınlık yaratan bu istatistiklerdi bende. Sözü fazla uzatmadan Internet Explorer 6 hakkındaki yazımıza başlayalım;
Nedenleri
Az önce de dediğim gibi bundan tam 7 sene önce Microsoft’ un Windows XP sürümü ile her zaman olduğu gibi sisteme entegre biçimde biz bilgisayar kullanıcılarının hizmetine sunuldu. O zamanın şartlarında elbette diğer tarayıcılardan farklı olarak (IE’ ler içinde) kendine has bazı özellikleri vardı. Hatta bu has özellikler MS Windows SP2 ile biraz daha arttı ve ek olarak Pop-Up engelleyici, Bilgilendirme çubuğu ve dosya indirme diyalog penceresi v.b özellikler ile gelişimini sürdürdü. Ama bu saydığım özelliklerden ileriye gidemedi ve o hali ile kaldı. O bu hali ile kaldı fakat teknoloji ve internet gelişimini sürdürdü. Yani artık IE6 karşısında duran teknolojiye ayak uyduramaz hale geldi. Bu da ister istemez bazı sonuçlar doğurdu. Birazdan o sonuçları hep beraber inceleyeceğiz ama ondan önce insanlar halen neden IE6′ yı kullanmakta bu kadar ısrarlılar onları biraz irdeleyelim ve bir kaç resim ile IE6′ nın popülerliğini görelim;
kadirgunay.com tarayıcı sonuçları
İşte siteme ait olan tarayıcı sonuçları (WP eklentisi olan StatPress ile elde edilmiş sonuçlar). En üstte yani birinci sırada hakkında yazdığımız IE6 krallığını sürdürmekte. 1785 ziyaret %59.1 oran ile. Hemen arkasından Firefox 3 581 ziyaret %19.2 oranla ikinci sırada. Detaylı görmek isterseniz resme tıklamanız yeterli olacaktır.
Ben sıradan bir günlük yazarıyım. Fakat yazdığım konular işim olan css, xhtml, web arayüzleri, jquery v.b konular. En çok üzen olay ise internet teknolojileri ile ilgili bir günlük yazarının sitesi halen (ki daha önce IE6 ve web standartları ile ilgili bir kaç yazı daha yazdım) IE6 ile görüntüleniyor. Hadi diyelim ki kadirgunay.com kısa bir süredir yayında buyrun diğer günlük yazarlarının istatistiklerine bakalım;
- Fatih Hayrioğlu - www.fatihhayrioglu.com
- Hasan Yalçın - www.hasanyalcin.com
- Hakan Demiray - www.dmry.net
- Fatih Turan - www.fatihturan.com
- Karbonizma - http://karbonizma.blogspot.com
İsmini saydığım günlük yazarlarının sitelerine ait tarayıcı istatistiklerini görmek için lütfen isimlere tıklayınız.
Gördüğünüz gibi bazı günlük yazarlarının sitelerinde de IE6 krallığını koruyor. Peki bu krallığı sürdürmesinin NEDENLERİ nelerdir?
- Bana göre en büyük en büyük neden bilinçsiz kullanıcılar : Teknolojiden bir haber, standartları takip etmeyen çok fazla interneti araştırmayan, sadece çalışıyor mu bu bana yeter mantığındaki kullanıcılar.
- Firmalar : Bir çoğunun lisansı olmasına rağmen halen eski sürümleri kullanmaya devam eden ve çalışanlarına yeni sürümler ile ilgili bililer vermeyen aksine yeni sürümlerin performansı etkileyeceğinden korkan firmalar.
- Lisans : Bildiğiniz gibi IE7 ve IE8 (şu anda beta aşamasında) doğrulama sonucu ile güncellenen sürümler. Öyle ki kullanılan çoğu sistem (ev kullanıcıları ve bunlara büyük oranda firmalar da dahil) korsan olduğundan dolayı yeni sürümler kullanılamıyor.
- Açık Kaynak bilgisizliği : Şu an piyasada lisanslı bir çok uygulamanın yaptığı iş ile aynı işi yapan bir çok açık kaynak yazılım var. Fakat bu açık kaynak yazılımlardan insanların bi’ haber olması. Bu da açık kaynak mantığını bilmediklerinden kaynaklanıyor.
Sonuçları
Her ne kadar IE6 çoğu uyum testi platformundan çıkarılsa bile kullanımı ve krallığı halen devam ediyor. Peki bu krallık sürdükçe ne gibi sonuçlar doğuruyor? Bu sonuçlar en çok da web kodlayan kişileri etkiliyor. Benim nacizane görüşlerimi ve sıkıntılarımı dile getireyim;
- Yaptığım veya yapılan her tasarımı iki ya da üç kez gözden geçirmek zorunda kalıyorum
- Kullandığım scriptleri özenle seçmek zorundayım
- Kullandığım imajları png harici seçmek zorundayım
- Hata ayıklama sürecinde harcadığım zamanı ikiye katlıyorum
- Css dosyasında kullandığım seçicilere dikkat etmek zorundayım
- Sürekli Css hackleri kullanmak zorundayım
- Fazladan bir Css dosyası hazırlamam gerekli
IE6′ nın renderi diğer tarayıcılara göre biraz daha farklı. Bunu şöyle açıklayabiliriz; IE6 yazdığını css kodlarını kafasına göre algılıyor ve kullanıcıya yansıtıyor. PNG uzantılı imajları desteklemiyor. Css 2.1′ de kullandığınız seçicilerin bir çoğu (yeni nesil: çocuk seçiciler, gruplamalar v.b) IE6da desteklenmiyor. Tasarladığınız her tasarımı kodlarken IE6 için ya farklı bir CSS dosyası ya da aynı CSS dosyası içinde belirli hacklere ihtiyaç duyuyorsunuz. Haliyle bu da dosyanızın şişmesine, optimize olmamasına ve CSS doğrulamasından geçmemesine sebep olabiliyor. Sitenizi kodlarken kullandığınız çoğu script IE6da çalışmıyor ya da IE6 desteklemiyor.
Hataları
Aslına bakarsanız nedenleri ve sonuçları kısmında IE6′ nın hatalarına dair de değindik inceden. IE6′ nın en büyük hatalarından birisi renderının farklı olması ve kullanıcı arayüzü istenildiği gibi yansıtmaması. Bunları hemen 1-2 örnek ile inceleyelim
IE6da hatalı site
Göründüğü gibi sitenin sağ kolonu IE6 harici diğer tarayıcılarda normal gözükürken IE6da ise sol kısımdaki alanın üstüne binmesi ile aşağıya kaymış. Peki bu alan onun üzerine biniyorsa bunun diğer tarayıcılarda da aynı olması gerekmez mi? Hayır! Çünkü IE6′ nın render farkı işin içine giriyor. Kısaca yeni nesil tarayıcıların hemen hepsi Acid testinden iyi bir yüzde ile geçtiler ve W3C standartlarına uymaya gayret ediyorlar ama IE6 bunların dışında kalıyor. Dışında kaldığı gibi kullanımdan da çekilmiyor. Css kodunuzda yazdığınız bir margin değeri yeni nesi tarayıcıların hepsinde düzgün gözükür fakat IE6da hayır. Yine benzer bir örnek vereceğim;
IE6da hatalı site
Bu sitede de bilindik hatalar karşımıza çıkıyor yine render farkı ve yine kaymalar. Bu sorunların yanında bir de script hataları var. İşte örnekteki sitede kullanılan script ile ilgili bir hata var ve bu hata IE6′ da karşımıza çıkıyor. Oysaki diğer yeni nesil tarayıcılar da bu scripti kullanıyorlar.
Kısaca
İşim gereği hızlı ve anlaşılabilen xhtml ve css kodları yazmaya çalışıyorum. Olabildiğince hack kullanmadan standartlara uyan web siteleri hazırlamak istiyorum ama maalesef bunları bir yere kadar başarabiliyorum. O bir yerde de karşıma IE6 çıkıyor. Bu yazımda anlatmak istediğim günümüz teknolojisinde yer alan ve standartlara uyan uygulamalar kullanmak. Her ne kadar bilginiz olmasa da doğru ve yanlışı ayırt edebilecek kadar karar verebileceğinizi düşünüyorum. Bu yüzden standartlara uyan ve bu standartları detsekleyen tarayıcılar ile web sitelerinizi test edin. Büyük bir kısım bunu kullanıyor deyip ona göre hazırlamayın. Bu şekilde devam eden süreçler hem standartlara uymayan uygulamaların kullanımdan kalkma süresini uzatır hem de insanların bilinçlenmesine engel olur.
Lütfen standartları destekleyen tarayıcılar kullanmaya ve web sitelerinizi bunlara göre ayarlamaya gayret edin.
Teşekkürler
Bana bu yazıda istatistikleri ile yardımcı olan Fatih Hayrioğlu’ na, Hasan Yalçın’ a, Fatih Turan’ a, Hakan Demiray’ a ve Ahmet Burak Bal’ a teşekkür ederim.