Archive

Archive for the ‘HTML’ Category

Zen Coding – Visual Studio

November 25th, 2009 No comments

Bir önceki gönderimde (Zen Coding) bahsettiğim Zen Coding ile ilgili yeni bir kaynak buldum. Bu kod için Visual Studio Add-in’i geliştirmeye başlayacağımı söylemiştim. Konu ile ilgilenip, Python kodlarını .NET ortamında compile etmeyi denemeye başladım. Tam IronPython ve IronPyhton Studio ile içli dışlı olmuşken ve bir noktaya gelmişken, Amerika’nın daha önce keşfedildiğini fark ettim…

Einar Regilsson’un Blog’unda, konu ile ilgili bir çalışma yaptığını gördüm. Blog yazısını buradan okuyabilirsiniz. Yazının sonlarına doğru “an installer” linki ile setup dosyasına, “the source” linki ile de kaynak kodlarına erişebilirsiniz. Emeğe saygı olarak hotlink yapmıyorum. Aslında mantık konusunda doğru yolda ilerlediğimi kaynak kodlara baktığımda görmüş oldum. Regilsson da IronPython modülünü kullanarak çalışma yapmıştı. Tek farkı kodu olduğu gibi Python kaynağında bırakıp, on-the-fly compile işlemini IronPython ile yapmış.

Add-in’i çektim, denedim. Hem Visual Studio 2005 hem de 2008′de sorunsuz olarak çalıştı. Kurulumdan sonra Visual Studio’nuz içerisinden bir kısayol ataması yapmanız gerekiyor sadece. Kısaca adımlar şöyle;

  1. Visual Studio kapalı iken Add-in kurulumunu tamamlayın.
  2. Visual Studio’yu açın, “Tools” menüsünden “Add-in Manager…” seçeneğini seçin.
  3. Listede “ZenCoding” karşısındaki iki işaret kutusunu da seçip onaylayın.
  4. “Tools” menüsünden “Options…” seçeneğini seçin.
  5. “Environment” dalından “Keyboard” yaprağını seçin.
  6. Komut listesinden “ZenCoding.VisualStudio.ZenCodingAddIn.Expand” seçeneğini seçin.
  7. “Use new shortcut in” kutusundan “HTML Editor Source View” seçeneğini seçin (eğer ZenCoding özelliklerinin code-behind dosyaları, resource dosyaları gibi diğer bütün yerlerde aktif olmasını istiyorsanız seçimi “Global” olarak bırakabilirsiniz).
  8. “Press shortcut keys” kutusunda istediğiniz kısayolu tuşlayın (ben CTRL+E kullanmayı tercih ettim).
  9. Kutuyu onaylayarak çıkın.
Evet böylelikle ZenCoding add-in’i kullanıma hazır hale gelmiş oluyor. Hemen bir aspx dosyası açıp denemeye başlayabilirsiniz.

table#tblMain.tblClass>th.tblHeaderClass+tr#trSub_$.tblRowClass*5>td#tdSub_$.tblCellClass*3

Yazıp CTRL+E yaptığınızda şu çıktıyı görmek korkunç güzel birşey :) 

<table id="tblMain" class="tblClass">
<th class="tblHeaderClass"></th>
<tr id="trSub_1" class="tblRowClass">
 <td id="tdSub_1" class="tblCellClass"></td>
 <td id="tdSub_2" class="tblCellClass"></td>
 <td id="tdSub_3" class="tblCellClass"></td>
</tr>
<tr id="trSub_2" class="tblRowClass">
 <td id="tdSub_1" class="tblCellClass"></td>
 <td id="tdSub_2" class="tblCellClass"></td>
 <td id="tdSub_3" class="tblCellClass"></td>
</tr>
<tr id="trSub_3" class="tblRowClass">
 <td id="tdSub_1" class="tblCellClass"></td>
 <td id="tdSub_2" class="tblCellClass"></td>
 <td id="tdSub_3" class="tblCellClass"></td>
</tr>
<tr id="trSub_4" class="tblRowClass">
 <td id="tdSub_1" class="tblCellClass"></td>
 <td id="tdSub_2" class="tblCellClass"></td>
 <td id="tdSub_3" class="tblCellClass"></td>
</tr>
<tr id="trSub_5" class="tblRowClass">
 <td id="tdSub_1" class="tblCellClass"></td>
 <td id="tdSub_2" class="tblCellClass"></td>
 <td id="tdSub_3" class="tblCellClass"></td>
</tr>
</table>

Bir süre sonra kısa bir video hazırlayıp yazıyı editlemeyi düşünüyorum. Vakit bulabilirsem tabi…

– Ekleme 25.11.2009 18:25 –
Bahsettiğim videoyu hazırladım ve yükledim. Hem kurulum sonrası ilk ayarların yapılışını hem de bir örnek uygulamayı gösterdim. Umarım işinize yarar, iyi seyirler: http://screencast.com/t/ODkxOTY1MjQt
Categories: HTML, Programming, Visual Studio Tags: , , ,

CheckBoxList’e Hover Tooltip

November 23rd, 2009 1 comment
Bir ASP.NET projemizde, CheckBoxList içerisindeki her bir işaret kutusunun açıklamasının mouse işaret kutusu üzerine geldiğinde tooltip olarak çıkması yönünde bir ihtiyaç başgösterdi. Teknik olarak CheckBoxList içerisindeki her bir kayda ayrı ayrı standart tooltip vermek mümkün değil.
Aklımıza gelen ve sırayla uyguladığımız üç çözüm seçeneği şunlar oldu:
  1. CheckBoxList kullanımından vazgeçip, alanı repeater’a çevirmek istediğimiz gibi özgür olmak.
  2. Bir javascript array içerisinde ilgili açıklamaları ve ID’leri tutup, sayfa yüklendiğinde prototype.js ile (projede prototype kullanılıyor) bunları tooltip’e çevirmek.
  3. Soruna bir CSS yaklaşımı ile çözüm aramak.
İlk seçeneği, projenin bulunduğu durum, bu checklist’in sayfada ve codebehind’da kullanım durumu vs. göz önünde bulunarak ilk etapta eledik. Ardından ikinci çözüm için çalışmaya başladık ve bu çözümü gerçekleştirdik. Ancak sayfada bu işlemin uygulanacağı çok fazla sayıda checkbox olduğu için (yaklaşık 1000 adet) çözüm istediğimiz performansı sağlamadı. Sayfanın açılışı, JS çalışmasından dolayı 10 saniye kadar yavaşladı.
İki başarısız girişimden sonra CSS seçeneğini değerlendirmeye başladık. Asıl yazı amacıma yavaş yavaş yaklaşıyoruz. Burada isteğimizi gerçekleştirmek için 3-5 satırlık bir CSS yeterli oldu. Sonuçta elde ettiğimiz çıktı, CheckBoxList kullanılan her yerde kullanılabilecek bir çözüm oldu. Tek ön koşul var: CheckBoxList’teki her bir nesnenin açıklamasının normalde görüntülenmiyor olması. Örnek olarak şu görüntüye bakabilirsiniz:
Eğer checkboxların açıklamaları buradaki gibi görünmüyorsa, bunları tooltip olarak değerlendirebiliriz. Checkboxlist’i normal şekilde bind ediyoruz. Bu durumda görüntü şu şekilde oluyor:

İlk önce checkboxlist’imize bir class atıyoruz (.NET tarafından CssClass). Örneğin bu class chkOptionHover olsun. Şu şekilde bir style ekliyoruz: 
table.chkOptionHover td label
{
display:none;
}

Bu sayede checkboxlistteki her bir checkbox’a ait açıklamalar görünmez hale geliyor. Bir önceki style’da belirttiğimiz td’nin hover’ına bir class daha vererek üzerine geldiğimizde açıklamaların görünmesini sağlıyoruz. 

table.chkOptionHover td:hover label
{
position:absolute;
display:block;
}

Belirttiğim style eklendikten sonra mouse over efekti şu duruma geliyor:

Her ne kadar görsel olarak kullanılabilir olmasa da isteğimiz aslında teknik olarak gerçekleşmiş durumda. Bir kaç küçük CSS dokunuşu ile label’larımızı gerçek birer tooltip’e döndürüyoruz. Bunun için sadece :hover class’ına bazı eklemeler yapıyoruz. Tabi ki istediğiniz şekilde görsel oluşturabilirsiniz. Bu benim tercihim: 

table.chkOptionHover td:hover label
{
font-size:10pt;
font-weight:bold;
padding:5px;
position:absolute;
background-color:yellow;
-moz-border-radius:3px;
-webkit-border-radius:3px;
display:block;
}

Yukarıdaki uygulamalardan sonra artık tooltip’imiz oturmuş duruma geliyor ve aşağıdaki gibi bir görüntü oluşuyor:

Gerçek bir tooltip’e benziyor değil mi? Uygularken Checklist’e class verip yukarıdaki satırları eklemek dışında da bir geliştirme gerektirmiyor. Ön koşulların sağlandığı durumlarda oldukça uygulanabilir bir çözüm olduğunu düşünüyorum. Ayrıca IE, Firefox ve Chrome (webkit) uyumlu olarak çalışıyor. Tarayıcıdan tarayıcıya tooltiplerin konumları değişebiliyor, ancak hepsi kabul edilebilir sınırlar içerisinde kalıyor. Arzuya göre genişlik de belirterek daha tooltip-benzer bir görüntü de elde edilebilir. Ötesi CSS yeteneklerinize kalmış…

Umarım sizin de işinize yarar…

Categories: ASP.NET, CSS, HTML Tags: , , , ,

Microsoft standartları sabote etmeye de başladı…

October 23rd, 2009 No comments

Ajaxian’ın haberine göre, Microsoft, canvas nesnesinin HTML5 spesifikasyonundan çıkarılması ve ayrı bir spesifikasyon haline getirilmesi için öneride bulunmuş. Hatta bu çalışmaların tamamlanması için kağıt-kürek işlerini de tamamen üstlenebileceğini söylemiş.

Kendileri yapamadıkları/yapmadıkları yetmezmiş gibi, bütün community tarafından benimsenen, beta üretimleri başlayan bazı standartları artık standartlardan ayıklatmaya çalışıyorlar.

Artık pes, inanılır gibi değil…

Categories: HTML, Internet Explorer, Microsoft Tags: , , ,

HTML Playground

October 19th, 2009 No comments

HTML tagları nasıl kullanılır? Çok kullanmadığımız taglar ne işe yarar? Görünüşleri farklı mıdır? Hangi eventleri destekler?

Dene, gör: http://www.htmlplayground.com

Categories: CSS, HTML, Online Tools/Services Tags: ,

Resources for Web Design

October 18th, 2009 No comments

Her web programcısının gündelik hayatında kullandığı bir çok konu ile ilgili farklı kaynakların sınıflandırılıp, bir araya toplanfığı bir sayfa. Çok enteresan şeyler olmasa da birarada derli toplu bir liste güzel olmuş…

Buyrunuz: http://www.kayodeok.btinternet.co.uk/favorites/webdesign.htm

Categories: HTML, Programming Tags: , ,

HTML in Flash

October 17th, 2009 No comments

Bütün Flash programcıların ve onlarla beraber çalışan diğer programcıların baş belası ve korkulu rüyası Flash içerisinde HTML için bir plugin geliştirmişler. Ne kadar başarılı olduğunu bilemem, deneyemem de açıkçası :)

Pazartesi günü bir bilene danışmak için sabırsızlanıyorum…

Buyrun: http://code.google.com/p/htmlwrapper

Categories: Flash, HTML Tags: ,

Dive Into HTML5

September 28th, 2009 No comments

Güncellenmeye devam etmekte olan HTML 5 ile ilgili bir makale…
http://diveintohtml5.org

Categories: HTML Tags: ,