Html5

Uzun zamandır konuşulan, tartışılan konuya son nokta konuldu sanırım. Html dilinin 5. versiyonu yayına girdi. Hatta W3C’ nin açıklamasına göre Xhtml diline destek ve güncelleme 2009 senesi sonunda bitiyor. 1999 yılında yaptıkları açıklamalarında; XML’ in nadir XHTML’ in ise doğru yol olduğunu söylemişlerdi. 2009 senesindeki açıklamarında ise artık XHTML için geliştirme çalışmaları yapılmayacakmış.

XHTML 2 Working Group Expected to Stop Work End of 2009, W3C to Increase Resources on HTML 5

2009-07-02: Today the Director announces that when the XHTML 2 Working Group charter expires as scheduled at the end of 2009, the charter will not be renewed. By doing so, and by increasing resources in the Working Group, W3C hopes to accelerate the progress of HTML 5 and clarify W3C’s position regarding the future of HTML. A FAQ answers questions about the future of deliverables of the XHTML 2 Working Group, and the status of various discussions related to HTML. Learn more about the HTML Activity.

HTML 5 Çıktı! O da Nedir?

Tartışmalardan uzak kendi halinde geliştirilen fakat bir çok web programcısının “amannnn! xhtml var ya daha ne” dediği html 5 yayın hayatına başladı. Artık rahatca kullanabiliriz. Rahatca mı? Kesinlikle hayır. Genel görüntü ve yapı olarak aslında gayet iştah açıcı olsa da şu an için sadece Firefox, Opera ve Safari destekliyor. IE7 ve 8 için ekstra bazı kodlar ekleniyor. Biz halen IE6 gibi bir tarayıcı ile uğraşırken kalkıp HTML5 ile bir web sitesi yaparsak sizce ne kazanmış oluruz?

Bilgi açısından çok şey katabilir ama şunu da bir düşünün, yaptığınızı sadece belirli bir kesim görebiliyor ve geri kalanlar ise size beceriksiz diyor. Ne kadar utanç verici değil mi?

Öncelikle şunu anlamadığımı belirtmek isterim, madem ki HTML5 gibi geniş kullanıma sahip bir dil çıkaracaktınız xhtml’ i neden oluşturdunuz ve bu kadar zaman destek verip bir anda bitiriyoruz dediniz? Çapraz tarayıcı sorunları ile boğuşurken başımıza yeni bir dil ve özellikleri çıkardınız.

HTML5′ in göze çarpan özelliklerine biraz göz atalım;

• Her şeyden önce benim en çok hoşuma giden özelliği şu; en çok kullanılan alanlar, sınıflar v.b. şeyleri bir etiket kapsamına almışlar.
  

  html4 - xhtml kod yapısı

  Gördüğünüz gibi ana alanlar div ile oluşturulup içine diğer öğeler ekleniyor(du!).

  

  html5

  html5de ise en çok kullanılan alanlar birer etiket haline getirilmiş durumda.

• Audio ve Video Özelliği
  html4 veya xhtml de video veya ses eklemek için genelde javascript kullanılırdı. html5de ise bu olay artık tamamen kendisine ait kod yapısı içinde oluyor ve video – audio etiketleri ile yapılıyor. Ayrıca bu etiketler de kendilerine ait nitelikleri alabiliyorlar.
• aside etiketi
  aside etiketi bizim her zaman kullandığımız genel sidebar mantığında bir etiket. kullanıldığı alanı içerik alanından ayırıyor.
• canvas
  grafiksel işlemler için kullanılacak bir etiket
• command
  komut düğmesi
• datagrid
  ağaç listesi içinde ekrana basılacak veri alanı
• datalist
  .net kullananlar bilirler, açılan kutu içinde ekrana basılan veri alanı
• datatemplate
  veri şeması
• details
  bir elemana ait olan detayları göstermek adına kullanılan etiket
• dialog
  konuşma etiketi (henüz denemedim )

bunlardan bazıları. Daha detaylı liste için http://www.smashingmagazine.com/2009/07/06/html-5-cheat-sheet-pdf/ adresine bakabilirsiniz.

Kullanılan yeni etiketlere ve özelliklere bakınca gerçekten insanın hemen geçesi geliyor. Ama işte gelin görün ki yukarıda da belirttiğim gibi 8 sene önce üretilen ve ömrü hayatıda 1 kez güncellenen bir tarayıcı ile bile bu kadar uğraşırken kalkıp bu güzel özellikleri bize sunan fakat yarım yamalak desteklenen bir dili nasıl kullanabiliriz?

jQuery ile Maksimum Karakter Sınırı - Maxlength with jQuery

Bir proje içinde kullanıcıların yazacakları alanları sınırlamak gerekiyor. Bunun bir kaç yöntemi var fakat biraz daha süslü ve basit yolunu birazdan anlatacağım. Metin alanlarına veri girişini kısıtlamak için bazı yollar uygulanır. Bunları çoğu sitede görürsünüz. Mesaj yazarken bastığını her tuştan sonra sağda, solda bir yerde rakamlar azalmaya başlar. Karakter sayınızın kalan rakamını verir size. İşte bu olayı şimdi jQuery ile yapacağız.

Adım 1 – Html Kodlarını Eklemek

  <div id="Main"> <div id="Alan1"> <textarea rows="5" cols="50"></textarea> <div></div> </div> <div id="Alan2"> <textarea rows="5" cols="50"></textarea> <div></div> </div> </div>

Burada 2 adet farklı sınıflara sahip textarea elemanı oluşturduk. Ve kendi değerlerini atadık. Kolon ve satır olarak.

Adım 2 – Css Kodlarını Eklemek

  #Main { width:800px; height:100%; color:#000000; font:Arial, Helvetica, sans-serif 12px;} .Alan1, .Alan2{ border:1px solid #999999; padding:5px;} .KalanKarakter { font-size:12px; font-weight:bold; color:#FF0000; margin-top:10px;} .Uyari {border:3px solid #0066CC; background-color: #FF9900; padding:5px;} span.KalanRakam { color:#000000; font-size:14px;} #Alan2 { margin-top:20px;}

Sınıf atadığımız textarea elemanlarının stil değerlerini girdik ve başka elemanlara da stil atadık. Textarea haricindeki öğeler birazdan ekleyeceğimiz jquery dosyalarının içinde tanımlanmış değişkenlerdir.

Adım 3 – JS Dosyalarını ve jQuery Kod Bloğunu Eklemek

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

İlk dosyamız jQuery çekirdek dosyamız ikincisi ise kullanacağımız eklentinin js dosyasıdır. Şimdi oluşturduğumuz textarea öğelerine istediğimiz şekilde çalışmalarını sağlatacağımız jQuery kod bloğunu ekleyelim;

  $(document).ready(function(){ $('.Alan1').maxlength({status: true}); $('.Alan2').maxlength({status: true, showAlert: true, slider: true}); });

Alan1 isimli sınıf için maxlength değerini atadık ve yukarıdaki 2. js dosyasında belirtilen değişkenlerden birisi olan “status” isimli elemanın aktifliğini “true” ile belirttik. Bu işlem bize metin alanı içine yazarken ne kadar rakam kaldığını gösterecektir. false değer döndürürsek eğer göstermeyecektir. Alan2 isimli sınıf için ise status değişkeninin haricinde 2 ayrı değişken daha belirttik; showAlert ve slider. showAlert bildiğimiz javascript uyarı ekranı. Belirttiğimiz karakter dışına çıkınca ekranın ortasında uyarı ekranı çıkıyor ve jquery.maxlength.js dosyasının içinde belirttiğimiz uyarı metnini ekrana basıyor. Slider değişkeni ise metin alanına tıklanınca çıkacak olan kalan karakter divi ile ilgili. Örneğe bakarsanız çok daha iyi anlayabilirsiniz.

Uygulamaya Ait Örneği Görmek İçin Tıklayınız

Uygulamaya Ait Dosyaları İndirmek İçin Tıklayınız

Not : Uygulamanın orjinal adresine ->http://www.anon-design.se/demo/maxlength-jquery ulaşabilirsiniz. Ben orjianel dosyalarda bazı değişiklikler yaptım.

www.gecce.com

Türkiye’ nin en büyük magazin portalı olma özelliğine sahip olan Gecce.Com yenilendi. Binlerce ziyaretçisi olan, içerik anlamında zengin bir yapıya sahip olan ve okunurluğu ile göz önünde olan gecce.com 1 Temmuz itibaril ile yeni tasarımı ve yazılımı ile yayın hayatına başladı.

Yeni arayüzün tasarımları ve yazılımı Burak Karababa tarafından yapıldı. Arayüz kodlaması bölümü ise bana ait.

Projede yer aldığım alanlar,

• Xhtml Kodlaması
• Css Kodlaması
• Mootools Javascript Kodlaması

jQuery İle DIV Uzunluklarını Ayarlamak

Halk firmasına ait bir proje için arayüz kodlamasını yaparken arama sayfasında başıma gelen bir sorunu yazılım şefimiz Kerim ÇALIK ile tartışırken aklımıza geldi bu yöntem. Bazen yan yana duran iki divimiz olduğunda biri diğerinden uzun olabiliyor. Bu durumu yine bazı scriptler ile de çözebiliyoruz fakat jQuery’ nin sloganını hatırlamamızda fayda var “Write less, do more – Az yaz, çok yap”. Aynen bu şekilde birazdan size hazırladığım örneği anlatacağım.

Adım – 1 HTML Kodlarını Eklemek

<div id="Main">
<div class="Sol">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tempus dui ante. Phasellus aliquet elit in ipsum lacinia porta. In hac habitasse platea dictumst. Morbi condimentum bibendum metus, sit amet dictum neque cursus eget. Sed venenatis tortor in lectus fermentum quis tempor nisi condimentum. Nunc metus arcu, tempor quis laoreet a, vulputate a lorem. Praesent eget tellus erat. Suspendisse porttitor urna risus, nec egestas purus. Ut vitae accumsan risus. Aenean mollis nisl ut tortor porttitor lobortis. Nullam gravida lorem sit amet dui ullamcorper lobortis. Duis vitae lacus a nibh egestas molestie at ut odio. Nulla leo risus, feugiat vel fringilla nec, sollicitudin vel lacus. Sed a commodo sapien. Maecenas aliquet neque ut tellus faucibus viverra. Maecenas in nisi felis. In magna nibh, lacinia vitae pretium in, aliquam ac justo. Nulla enim purus, aliquam non ullamcorper vestibulum, feugiat vel urna.

Morbi euismod commodo dolor, sed iaculis risus semper ultrices. Etiam lobortis feugiat ante id sollicitudin. Sed interdum vehicula diam, in rutrum nisl condimentum non. Donec fringilla, magna vel interdum rhoncus, augue lacus ultricies eros, eget pretium ipsum dolor a sem. Aliquam in nisl ut nulla rutrum fringilla. Vestibulum nunc lacus, vestibulum at iaculis quis, sollicitudin gravida mi. Ut eros mauris, tempor sed congue vitae, dapibus non nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus eu erat eget nisi facilisis suscipit non a sapien. Fusce ultrices lectus ut magna gravida pulvinar. Proin quis nunc in ipsum porta commodo nec in elit. Donec mollis elit ut sem tincidunt condimentum sollicitudin mauris interdum.

Aliquam erat volutpat. Praesent pharetra nisi vitae eros adipiscing et molestie massa molestie. Etiam aliquam, nunc vel condimentum vestibulum, lectus quam lobortis erat, nec lacinia lectus ligula at enim. Proin blandit dignissim risus a eleifend. Maecenas aliquam rutrum gravida. Pellentesque dictum, diam nec elementum vehicula, nunc odio sollicitudin turpis, in luctus dui leo vel turpis. Curabitur vestibulum rutrum leo et luctus. Donec auctor risus tempus lorem lacinia at aliquet turpis eleifend. Curabitur id lacus nunc. Sed ac est nunc, vitae ultrices neque. Cras purus eros, accumsan at congue sit amet, facilisis vel eros. Etiam sagittis mattis egestas. Aliquam vitae facilisis massa. Fusce vel leo quis felis vulputate pretium. Etiam laoreet nisi in augue rutrum pulvinar. Praesent luctus mattis sapien sed faucibus. Nulla eu ipsum sapien. Donec non diam est. </p>
</div>
<div class="Sag">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tempus dui ante. Phasellus aliquet elit in ipsum lacinia porta. In hac habitasse platea dictumst. Morbi condimentum bibendum metus, sit amet dictum neque cursus eget. Sed venenatis tortor in lectus fermentum quis tempor nisi condimentum. Nunc metus arcu, tempor quis laoreet a, vulputate a lorem. Praesent eget tellus erat. Suspendisse porttitor urna risus, nec egestas purus. Ut vitae accumsan risus. Aenean mollis nisl ut tortor porttitor lobortis. Nullam gravida lorem sit amet dui ullamcorper lobortis. Duis vitae lacus a nibh egestas molestie at ut odio. Nulla leo risus, feugiat vel fringilla nec, sollicitudin vel lacus. Sed a commodo sapien. Maecenas aliquet neque ut tellus faucibus viverra. Maecenas in nisi felis. In magna nibh, lacinia vitae pretium in, aliquam ac justo. Nulla enim purus, aliquam non ullamcorper vestibulum, feugiat vel urna.

Morbi euismod commodo dolor, sed iaculis risus semper ultrices. Etiam lobortis feugiat ante id sollicitudin. Sed interdum vehicula diam, in rutrum nisl condimentum non. Donec fringilla, magna vel interdum rhoncus, augue lacus ultricies eros, eget pretium ipsum dolor a sem. Aliquam in nisl ut nulla rutrum fringilla. Vestibulum nunc lacus, vestibulum at iaculis quis, sollicitudin gravida mi. Ut eros mauris, tempor sed congue vitae, dapibus non nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus eu erat eget nisi facilisis suscipit non a sapien. Fusce ultrices lectus ut magna gravida pulvinar. Proin quis nunc in ipsum porta commodo nec in elit. Donec mollis elit ut sem tincidunt condimentum sollicitudin mauris interdum.</p>
</div>
<div class="Clr"></div>
</div>

Çok basit şekilde bir genel kapsayıcı ve içine de iki div yerleştirdik. Sol ve Sag isminde. Şimdi bunların bir de stillerini verelim;

Adım  2 – Css Kodlarını Eklemek

#Main { width:800px; height:100%; margin:0 auto; background-color:#CCCCCC; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#000000;}
.Sol { float:left; display:inline; width:630px; height:100%; background-color:#0099FF; color:#FFFFFF; margin-right:5px; padding:0px 10px;}
.Sag { float:left; display:inline; width:125px; height:100%; background:#CC6633; color:#FFFFFF; padding:0px 10px;}
.Clr { clear:both;}

Gördüğünüz gibi çok basit bir şekilde hemen stilleri ekleyip ön görünümü tamamladık. Burada dikkat etmeniz gereken bir kısım var; her iki divin de yükseklikleri 100% verilmiş durumda. Fakat biz birazdan bunları birbirlerinden yükseklik alacak şekilde ayarlayacağız. .Clr sınıfı kafanızı karıştırmasın, genel kapsayıcının tüm divleri kapsaması için float elemanlarını temizleyen bir sınıf o. Çok sık kullanırım

Adım 3 – jQuery Dosyasını ve Kodlarını Eklemek

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

scriptimizi dosyamıza ekledik ve okuttuk. Şimdi istediğimizi yapması için bazı yönergeler göndereceğiz;

<script>
$(document).ready(function () {

if($(".Sag").height()>$(".Sol").height()) {
$(".Sol").height($(".Sag").height());
}else{
$(".Sag").height($(".Sol").height());
}

});
</script>

İlk kod bloğumuzda eğer ki Sag isimli divin yüksekliği Sol isimli divden büyük ise Sol’ un yüksekliğini Sag kadar yap dedik daha sonra değilse ifadesi ile tam tersi bir işlem döndürdük. Bu işlem sizi bir çok dertten kurtaracaktır eminim. Çünkü beni kurtardı.

Uygulamaya Ait Örneği Görmek İçin Tıklayınız

Uygulamaya Ait Dosyaları İndirmek İçin Tıklayınız

Böylesine boşluğa düşmemiştim daha önce… sanki bir uçurumun kenarında öyle çaresizce durup atlasam mı atlamasam mı diye düşünmekten beter. Çünkü birisinde iki seçeneğiniz var. Ya atlarsınız ve ölürsünüz veya atlamazsınız korkaklığınıza vurursunuz… ama boşluk öyle değil. Ne yapacağınızı bilmeden çaresizce hayata devam etmek bu. Yarının ne getirdiği bugünün ne götürdüğü sizi ilgilendirmez… hem uçurumdan atlarken artık sizin için yeni bir hayat başlamıştır. Aşağıya düşene kadar bunları düşünebilir, yeni yaşama dair planlar yapabilirsiniz… veya en kötü ihtimalle birisi elinizden tutar ve sizi yukarı çeker ki bunun olasılığı oldukça düşüktür… ama bana bir kez oldu. Beni birisi çekti o uçurum kenarından ben ona benim kurtarıcı meleğim adını vermiştim ama o bunu hiç duymadı. Bunu ona hiç söylememiştim. Nedenini ben de bilmiyorum ama inanın bana ona başka hitaplarda bulunurken hep aklımda beni o uçurumdan kurtardığı gün aklıma gelirdi…

Fakat sonuç yine değişmedi. Her güzel şeyde olduğu gibi bunun da sonu gelmişti… kurtarıcı meleğim sanki görevini tamamlamış gibi bir gün çok uzaklara gitti. Biliyorum geri gelmeyecek… yapmam gereken onun yokluğunda sanki o varmışçasına yaşamak…

Bu zor hayatla savaşmak için bir nedenim kalmadı. Daha doğrusu savaşacak gücüm kalmadı. Çok şeyler verdi ama verdiklerinden daha fazlalarını aldı benden… hayata yenildim sadece ve onu yaşamaktan bıktım… savaşmaktan kaçmıyorum ama ne kadar savaşırsam hep o kazanacak biliyorum… o yüzden onunla bir anlaşma yapmaya karar verdim… bundan sonra ne o bana güzelliklerini verecek ve daha sonra alacak ne de ben onunla savaşacağım… ikimiz de sürekli yalnız olarak yaşayacak ve sürekli her güzel şeyin sonunun olduğunu bilerek birbirimizi kandırmayacağız…