Uluslararası piyasada çalışmayı planladığmıız için Xhtml Kitchen‘ı ilk etapda İngilizce dil desteği ile yayına aldık. İlerleyen zamanlarda Türkçe dil desteği ile sitemizi tekrar güncellemeyi düşünüyoruz.

Hizmetlerimiz

Xhtml Kitchen‘da sunduğumuz temel hizmetlerimiz 4 ana başlık altında toplanıyor:

XHTML/CSS Dönüştürme Hizmeti

Photoshop veya Fireworks programlarında hazırladığınız tasarımlarınızı elle kodlayarak XHTML/CSS dosyalarına dönüştürüyoruz. Dönüştürdüğümüz XHTML/CSS dosyalar bütün modern tarayıcılarda (IE7-8, Firefox, Safari, Opera, Chrome) sorunsuz olarak gözükür.

Wordpress Tema Adaptasyonu

Wordpress için hazırladığınız blog veya CMS tasarımlarınızı Wordpress’e adaptasyonu, eklenti kurulumu ve eklenti entegrasyonu yapıyoruz.

HTML E-Posta Şablonu Hazırlama

Tasarladığınız e-posta bültenlerinizi Gmail, Yahoo! Mail Classic/Beta, Hotmail, Outlook 2003/2007, Thunderbird 2+ and Apple Mail ile uyumlu HTML e-posta şablonlarına dönüştürüyoruz.

Özel Javascript Uygulaması Oluşturma

Tamamen projenizin ihtiyaçlarına ve kendi isteğinize göre Javascript uygulamaları oluşturuyoruz.

Xhtml Kitchen Nasıl Çalışıyor?

Adım 1:

Sipariş formunu kullanarak projenize ve size ait tüm bilgileri girdikten sonra XHTML’e dönüştürülmesini istediğiniz tasarımlarınıza ait dosyaları (tasarım dosyalarınız katmanlı olacak şekilde .PSD (Photoshop), .PNG (Fireworks), .AI (Illustrator) biçimlerinde olabilir ve eğer varsa tasarımlarınıza ait font dosyalarını) bize ulaştırıyorsunuz.

Siparişinize ait bilgileriniz ve tasarımlarınız incelenir, projeniz onayladıktan ve siparişinize ait yapmanız gereken ödemenizi aldıktan sonra ustalarımız projenize hemen başlar.

Adım 2:

Ustalarımız vermiş olduğunuz bilgi ve talimatlara göre projenize azami özen göstererek çalışır, bitirilmesi gereken süre içinde tasarımlarınız elle ve anlamlı biçimde (semantik) kodlanarak lezzetli web sayfalarına dönüştürülür.

Adım 3:

Dönüştürülen web sayfaları Windows ve Mac işletim sistemlerinde en çok kullanılan IE 7, IE 8, Firefox, Safari, Chrome ve Opera tarayıcılarındaki olası hata veya farklılıklara karşı test edilir. Bütün bu testlerde karşılaşılan her hata mümkün olan en kısa sürede düzeltilir.

Adım 4:

Proje, söz verilen tarihte size yani proje sahibine servis edilir.

Daha fazla bilgi için sizi Xhtml Kitchen‘a bekliyoruz. Xhtml Kitchen hakkında herhangi bir soru, öneri, görüş bildirmek istiyorsanız contact -at- xhtmlkitchen.com e-posta adresini kullanabilir veya burada yorumda bulunarak geri dönüş sağlayabilirsiniz.

Ayrıca Xhtml Kitchen‘daki hizmetlerimize ait fiyat listesini bu sayfadan görebilir ve dilerseniz sipariş sayfasından şimdi yeni bir sipariş verebilirsiniz.

Bu yazı Fatih Turan tarafından 21 June 2010 15:03 tarihinde yazıldı. 4 yorum var. Sen de yorum yaz.

Şahsen ben öyleyim. Devamlı olarak yeni yöntemler keşfederek mevcut düzenimi daha iyiye yönelik geliştiriyorum. Yani şimdiki yöntemimi belkide bir dahaki yıl daha farklı bir biçimde kullanmış olacağım. :) Yine de bu yazımda hali hazırda kullanıyor olduğum mevcut geliştirme düzenimi sizinle paylaşmam yerinde olacağını düşünüyorum.

Projenin Klasör Yapısı

Klasör yapısı web projelerindeki düzeni oluşturmamızı sağlayan önemli etkenlerden biridir. Klasör yapısı ne kadar karmaşık olursa projelerimizi geliştirmek bir o kadar zor olacaktır. Hele bir de ofis çatısında takım olarak çalışıyorsanız işler iyice karmaşık bir hal alabilir. Bu sebepten dolayı takımınızın benimseyeceği, ortak olarak kullanabileceğiniz, akıllı bir şekilde standart klasör yapısını oluşturmanız iyi olacaktır.

Web projelerinde benim oluşturduğum ve kullanıyor olduğum klasör yapım ve açıklamaları aşağıda yer almakta:

Klasör isimlerini İngilizce olarak oluşturdum çünkü XHTML KITCHEN‘da artık yabancılara da hizmet vermeyi planlıyoruz. Siz kendi ihtiyaçlarınıza göre klasör isimlerini Türkçe’de yazabilirsiniz.

İsterseniz yukarıdaki klasör yapısını şablon olarak indirip siz de kendi çalışmalarınızda kullanabilirsiniz.

Projenin Dosya Yapıları

Projelerimizdeki klasör yapısının düzenli olmasının yanısıra dosyalarınızın da düzenli olması tutarlılık ve verimlilik açısından gayet önemli. Bunun için xHTML ve CSS dosyalarınız için size ayrı başlıklar altında tavsiyelerde bulunacağım.

xHTML Dosyaları İçin Tavsiyelerim

• Kodlarınızı TAB tuşunu kullanarak girintili biçimde yazmaya özen gösterin. Girintili kodları okumak daha kolaydır.
• Sayfanızdaki önemli bölümleri xHTML‘de kullanılan yorum etiketi yani <!--YORUM--> ile gruplandırın.
• Beyaz boşluğu en iyi şekilde ayarlayın. Ben genelde xHTML dosyalarımdaki önemli bölümleri yorumlarla ayırmamın yanısıra bir de birer satır boşluk bırakarak ayırmaya çalışırım. Yine okunabilirlik açısından bunu yapıyorum.
• Etiketlere id ve class verirken mantıklı bir isimlendirme yöntemi ile verin. Ben ecnebilerin CamelCase diye tabir ettikleri türde kelimeleri birleşik yazıyorum. Örneğin: <div id="mainContent"></div>. Bunun yanısıra alt çizgi ve tire ile de isimlendirme yapabilirsiniz (yani _ ve - karakteri ile). Örneğin: <div id="main_content"></div> veya <div id="main-content"></div>.

Unutmadan örnek olarak hazırladığım xHTML dosyasının kodunu inceleyebilir ve üstteki tavsiyelerle karşılaştırma yapabilirsiniz.

CSS Dosyaları İçin Tavsiyelerim

• CSS dosyanızın başında hazırladığım örnekteki gibi müşteri ile ilgili isim, editör adı ve tarih/saat gibi bilgiler yerleştirin. Böylece kimin hangi dosyayı ne zaman kim için düzenlediğini belirlemiş olursunuz.
• Yine örnekte görebileceğiniz üzere önemli bölümler için yorumları kullanarak gruplandırma yapabilirsiniz. İşin bu kısmında dikkat ederseniz grup başlıklarında eşittir işareti bulunmakta. Bununla kullandığınız editör ile arama yaparken gruplar arasında kolayca geçebiliyoruz. Kısacası bu eşittir işaretini kullanarak grup adları ile kodlar karışmamış oluyor.
• Web projesindeki sayfaların herhangi bir yerinde kullanılabilecek önemli CSS komutlarını class haline getirip kullanıma hazırlayın. Hazırladığım örnekte Global Classes grubu altında kullanıma hazır 11 tane class vardı.
• Seçici adından önce (yani selector’dan önce) xHTML etiketini yazın. Örneğin: div#header { ... }. Böylece bu kodun xHTML dosyasında hangi etiket için yazılmış olduğunu kolayca görüp anlayabileceğiz.
• Her CSS kodunu tek satırda yazın. Bu CSS dosyanızın boyutunu azaltmakla kalmaz, kodları gözünüzle çok daha rahat tararsınız.
• Daha önce xHTML dosyaları için bahsettiğim TAB tuşu ile girinti oluşturma yöntemini CSS dosyalarınızda da kullanmalısınız.
• Yine daha önce xHTML dosyaları için bahsettiğim beyaz boşluğu iyi ayarlama yöntemini CSS dosyalarınız için de kullanabilirsiniz. Ben CSS dosyalarımda her gruptan sonra üç satırlık boşluk bırakıyorum. Bu da kodları daha okunabilir yapıyor.

Yine örnek olarak hazırladığım CSS dosyasını inceleyebilir ve üstteki tavsiyelerle karşılaştırma yapabilirsiniz.

Benim bilmediğim ve burada yazmadığım, sizin bildiğiniz bu tip güzel tavsiyeleriniz varsa onu yorum yazıp bu yazıya katkıda bulunabilirsiniz.

Bu yazı Fatih Turan tarafından 07 November 2008 22:31 tarihinde yazıldı. 20 yorum var. Sen de yorum yaz.

Şahsen ben bu şekilde web sayfalarımızı geliştirmememiz gerektiğini düşünüyorum. Çünkü:

• WYSIWYG tarzı editörler yeni başlayanlar için genelde kolay gözükmesine karşın arkaplanda ürettiği kodlar bizim kontrolümüz dışında oluşturulur. Bu yüzden bir sürü gereksiz kod ile karşılaşabiliriz.
• Bu gereksiz kodlar yüzünden xHTML ve CSS dosyamızın boyutları artabilir. Aynı zamanda kodların okunulabilirliği de azalır. Okunabilirlik azalırsa, çalışmanızda bir sorun ile karşılaştığınızda profesyonel birinden yardım istemeniz durumunda yardım alma olasılığınız da azalabilir. Şahsen ben forumlarda tablo etiketi ile hazırlanmış, karışık kodlara sahip web sayfalarındaki sorunlarla pek ilgilenmiyorum.
• Gereksiz kodlar aynı zamanda SEO açısından bizim için bir dezavantaj oluşturabilir. Çünkü arama motorları genelde kötü kodlanmış web sayfalarını daha iyi ve sade kodlanmış web sayfalarına göre önemsiz olarak nitelerler (bu konuda bazı istisnalar olabilir).
• Genelde WYSIWYG tarzı editörler web sayfalarını yapı, sunum ve davranış olarak ayırmada (bu konuyu daha sonra ayrı bir yazı olarak ele almayı düşünüyorum) beceriksizdir. Yani oluşturulan xHTML dosyalarınıza CSS ve Javascript kodlarını da katarlar.
• Yine yukarıdaki maddede bahsettiğim arkaplanda yaratılan kodlar otomatik olarak oluşturulduğu için tam olarak ne olduğunu, ne işe yaradığını anlamayabiliriz. Hatta öyle ki bazılarımız -özellikle tembeller xD- “nasıl olsa herşeyi fare ile bir-iki tıkla yapabiliyorum” diye düşünüp hangi etiketin, hangi kodun ne işe yarayıp yaramadığını öğrenme yerine komutları ezberlerler. Kısacası öğrenme ihtiyacı hissetmezler. Sonuçta neyin ne işe yaradığını bilmeden iş yapmış olursunuz ama bir sorunla karşılaştığınızda da kafanızdaki saçlarınızı yolabilirsiniz. xD
• Dreamweaver veya Expression Web gibi WYSIWYG tarzı editörler pahalı uygulamalardır. Neden daha ucuz veya tamamen ücretsiz daha iyi programlar varken bu programları kullanalım ki? Değil mi? :) Ben E Text Editor‘u geçenlerde 35$ karşılığı satın aldım. Böylece uzun bir aradan sonra kod düzenleme aracı arayışıma son verdim. :) Bence siz de kendinize uygun bir kod düzenleme aracını edinin (Mesela Aptana, Notepad++, Komodo Edit, PSPad).

Kısacası web sayfalarını kodlarken WYSIWYG tarzı editörler kullanmayalım. Web sayfalarını kodlarken hangi etiketin, hangi kodun ne işe yaradığını öğrenelim (bunun için Sitepoint‘in çevirimiçi xHTML referansı ve CSS referansı kesinlikle işinize yarayabilir), ezbere gitmeyelim ve tabii ki web sayfalarımızı elle kodlayalım. Bu sayede orta ve uzun vadede siz kazanacaksınız. ;)

Bu yazı Fatih Turan tarafından 31 October 2008 01:01 tarihinde yazıldı. 35 yorum var. Sen de yorum yaz.

Peki geçerlilik testi gerçekten gerekli mi? Bu soruya cevap vermeden önce gelin geçerlilik testinin ne olduğunu, yararlarını ve bu konu hakkında nasıl bir yöntem izleyebiliriz bunları inceleyelim. En sonunda da bu soruya cevap verelim. :)

Geçerlilik Testi Nedir?

Geçerlilik testi yazdığımız HTML, XHTML veya CSS dosyalarının W3C Birliği tarafından oluşturulan kurallara göre yazılıp yazılmadığını ve eğer hata yaptıysak nasıl düzeltileceğine ilişkin önerileri getiren yine W3C Birliği tarafından yaratılan interaktif bir test uygulamasıdır.

XHTML dosyalarını geçerlilik testine tabi tutmak için buradaki aracı, CSS dosyalarını geçerlilik testine tabi tutmak için ise buradaki araç kullanılır.

Yararları Nelerdir?

Geçerlilik testinin yararlarını ve dolayısıyla W3C Birliği’nin oluşturduğu kurallara uyarak elde edeceğiniz yararları listelemek gerekirse:

• Geçerlilik testi sonucunda çıkan sorunları çözmeniz karşılığında tarayıcılar arasındaki oluşabilecek görünüm farkı olasılığını aşağıya çekmiş olursunuz.
• Hataları düzeltilmiş ve kurallara uyan HTML veya XHTML sayfası ile daha temiz ve düzenli kodlara sahip olursunuz.
• Daha temiz ve düzenli kodlardan oluşan sayfalar da SEO açısından önemlidir. Yani Google sayfanızı daha iyi indeksler.
• Geliştirme süreciniz hızlanır. Eğer bir web uygulaması geliştirmeyi düşünüyorsanız muhakkak işin içinde JS, DOM gibi teknolojileri de kullanacaksınız demektir. Yazım yanlışları ve kuraldışı kodlar içeren HTML veya XHTML sayfalarınızın olduğunu bir düşünün. Bu sayfalara bağlı JS kodları yazdığınızda muhtemelen birtakım sorunlarla karşılaşacaksınız. Bu sorunlar da sizin zamanınızı ve paranızı alıp götürecektir.
• Olası gözden kaçan yazım hatalarını geçerlilik testi sayesinde elimine edebilirsiniz.

Şu anda aklıma gelen yararlar bunlar. Eğer bunlardan başka bildiğiniz bir madde varsa makaleyi ona göre güncelleyebiliriz. ;)

Nasıl Bir Yöntem İzlemeliyiz?

Ben kendi tecrübelerime dayanarak sizlere birtakım önerilerde bulunmak istiyorum:

• Otomatik tamamlama özelliğine sahip bir editör kullanın. Böylece yazım hatalarını bir nebze azaltmış olacaksınız. Ayrıca biraz daha hızlı kod yazma olanağına sahip olacaksınız. Size önerim E Text Editor, Aptana veya ActiveState Komodo Edit adlı editörlerden herhangi birini kullanmanız. E Text Editor kişisel tercihimdir.
• Web tasarımınızı XHTML/CSS‘ye çevirirken belli aşamalarda geçerlilik testini muhakkak uygulayın. Örneğin #top, #center, #bottom adlı üç tane div‘imiz varsa her bir div ve iç kısmını kodladıktan hemen sonra geçerlilik testinden geçirin.
• Normalde XHTML dosyalarınız için buradaki geçerlilik testi uygulamasını, CSS için de buradaki geçerlilik testi uygulamasını kullanırız. Her iki geçerlilik testine Web Developer Toolbar adlı Firefox eklentisini kullanarak daha hızlı erişebilirsiniz. Hem FTP‘deki hem de yerel sunucunuzdaki dosyaları Web Developer Toolbar‘ın Tools menüsündeki komutlarla kolayca geçerlilik testine tabi tutabilirsiniz.
• Geliştirme işinizde yine işinize yarayacağını umduğum HTML Validator adlı Firefox eklentisini tavsiye edeceğim. Bu eklenti bir nevi Firefox içinde dahili geçerlilik testi yapıyor. Ama dikkat etmek gerekirki kimi zaman bu eklenti sayfanızda herhangi bir hata olmadığını söylemesine rağmen W3C‘nin geçerlilik testinde sorunlar çıkabiliyor. Kısacası bu eklentiyi muhakkak kullanın ama siz siz olun W3C‘nin geçerlilik testini yabana atmayın. Her ne olursa olsun yukarıda yazdığım önerideki gibi adım adım W3C‘nin geçerlilik testini çalıştırın.
• Yazım hatalarını en aza indirgemek için oluşturduğunuz hazır XHTML ve CSS şablonlarızı kullanın. Böylece tekrar tekrar kod yazmak zorunda kalmaz ve yanlış kod yazma olasılığınızı azaltmış olursunuz.
• XHTML ve CSS için referansları elinizin altında bulundurun. Benim en çok kullandığım Sitepoint‘in yaptığı XHTML referansı ve CSS referansı. Kimi zaman bazı özellikleri unutabiliyoruz değil mi? :)
• Geçerlilik testi sonunda çıkan hataların çözümlerini öğrenin. Bunun için benim daha önce yazdığım Sıkça Karşılaşılan XHTML Hataları adlı yazıma ve Eren Emre Kanal’ın Siberkültür‘de yazmış olduğu yine W3C Kontrolüne Takılan Hataları Ayıklama adlı yazıyı okuyun.

Yine benim bilmediğim sizin bildiğiniz farklı bir öneriniz varsa burada belirtmeniz beni memnun edecektir. Sonuçta bildiklerimizi burada paylaşıyoruz öyle değil mi? :)

Geçerlilik Testinin Önemi

Görebileceğiniz üzere geçerlilik testinin biz web tasarımcı ve web geliştiricileri açısından çok faydası var. Bunları görmezden gelmek tam anlamıyla saçmalık olur.

Ama şöyle de birşey var ki şu anki CSS 2.1 sürümü bazı ihtiyaçlarımızı karşılamıyor. Mesela CSS‘de şeffaflık için kullanılan opacity etiketinin tarayıcıdan tarayıcıya göre değişen kullanımı mevcut. Örneğin Internet Explorer’da sadece filter: alpha(opacity=50); gibi saçma bir kodla şeffaflık verebilirken diğer tarayıcılarda opacity:.5; vermemiz yeterli oluyor. Üstteki filter etiketini kullanınca da W3C geçerlilik uygulaması hata olduğunu belirtiyor.

Başka bir örnek vermek gerekirse mesela yine CSS 2.1′de olmayan ama CSS 3′de olan border-radius özelliği. Bu özellik sayesinde div‘lerin kenarlarına herhangi bir görsel kullanmadan ovallik verebiliyoruz. Ama bu bir CSS 3 özelliği olduğu için yine W3C geçerlilik testinde hata verecektir.

Arkadaşlar ben bu gibi durumları önemsemiyorum. Çünkü gerçekten bu tür özelliklere ihtiyacımız var ve kullanıyorum. Bu tip hataları kafanıza takıp fanatiklik yapmanın bir gereği yok. :)

Bir de web standartlarını sayfalarının XHTML ve CSS kodlarının geçerlilik testinden sıfır hata ile geçmesi sanan arkadaşlar var. Bence bu da yanlış bir düşünce.

Web standartları denen kavram çok geniş. İçinde erişilebilirliği, kullanılabilirliği, yapı ve sunumun ayrılmasını, anlamlı kod oluşturmayı vs. gibi alt kavramları barındırır. Geçerlilik testi ise bu alt kavramların altındaki yapı ve sunumun ayrılması ilkesini doğru ve düzenli bir şekilde yapabilmek için sadece ve sadece bir araç. Başka da birşey değil! :)

Kısacası sitenizin kodlarının geçerli olması demek web standartlarına tamamen uyduğunuz anlamına gelmiyor. Ama unutmamak gerekirki geçerlilik testi çok önemli bir araç ve bunu mutlaka kullanmamız gerekiyor.

Bu yazı Fatih Turan tarafından 22 September 2008 01:29 tarihinde yazıldı. 19 yorum var. Sen de yorum yaz.

sIFR Kullanımı

Bu yazımda size sIFR‘in temelde nasıl kullanılacağını değil, bu tekniği nasıl daha optimum bir şekilde kullanabiliriz buna değineceğim. Zaten etrafta yeterince kullanımı anlatan yazılar var. Mesela bunun için sevgili dostum Muhammet Sevim‘in yazdığı sIFR 3 Kullanım Kılavuzu adlı makaleyi okuyabilirsiniz. Ayrıca sIFR Tutorial: Use Your Own Fonts, This is How You Get sIFR to Work ve sIFR 3 Documentation & FAQ adlı makaleleri de okuyabilirsiniz.

Eğer sIFR ile daha önce hiç tanışmamışsanız mutlaka yukarıda bağlantılarını verdiğim yazılardan en azından birini okumanızı ve sIFR‘in kullanımına aşina olmanızı öneririm.

sIFR‘in yukarıdaki makalelerde anlatılan normal kullanımlarında HTML dosyamıza birçok dosya eklememiz gerektiğini söylüyorlar. Ben sIFR‘i projelerimde kullanırken böyle yapmıyorum. Genelde mümkün olduğunca az dosyayı HTML sayfamdan çağırıyorum.

Yani normal kullanımda HTML dosyanızda aşağıdaki CSS dosyalarını;

1
2

<link rel="stylesheet" href="sIFR-screen.css" type="text/css" media="screen">
<link rel="stylesheet" href="sIFR-print.css" type="text/css" media="print">

ve aşağıdaki dosyaları JS dosyalarını çağırmamız gerekiyor:

1
2

<script src="sifr.js" type="text/javascript"></script>
<script src="sifr-config.js" type="text/javascript"></script>

Toplamda 4 dosyayı çağırıyoruz. Sizce çok değil mi? Peki şimdi burada ben size sadece üstteki <script src="sifr.js" type="text/javascript"></script> dosyasını HTML sayfamıza ekleyerek sIFR‘i kullanabileceğimizi söylesem nasıl olur? İyi olur değil mi? :)

Böyle bir yöntem izleyince sunucuya daha az istek göndermiş ve ayrıca kullanımı daha da basitleştirmiş olacağız.

Neden daha az istek göndermemiz gerektiğini ise daha önce Siberkültür‘de Sitenizin Performansını Arttırın adlı yazıdaki aşağıdaki paragrafta gayet iyi bir şekilde açıklanmıştı:

Sayfanızda ne kadar çok öğe bulunuyorsa, sunucuya gidecek istek de o kadar fazlalaşacaktır. Sunucuya giden her istek ise milisaniyelerle talep/cevap paralelini uzatacaktır. Sayfanızdaki öğelerden kastım tabiki de CSS dosyaları, JavaScript dosyaları ve imaj gibi harici dosyalar.

Hareket Vakti

Şimdi ilk olarak sifr.js dosyasını ve web sayfamız için diğer gerekli fonksiyonları taşıyan functions.js dosyasını aşağıdaki şekilde HTML sayfanıza ekleyin.

1
2

<script src="scripts/sifr.js" type="text/javascript"></script>
<script src="scripts/functions.js" type="text/javascript"></script>

Bakın ben yukarda bütün JS veya gerekli olabilecek küçük PHP betiklerini scripts adlı klasörde tutuyorum. Siz hangi klasörde bu dosyaları tutuyorsanız yukarıdaki kodu ona göre düzenlemeniz gerekir.

Az önce tek bir JS dosyası ile bu işi halledebileceğimizi söyledim. Evet bu doğru. Çünkü çoğu web sayfasında ufak tefekte olsa muhakkak JS kodları kullanıyoruz. Ben genelde yukarıdaki örnekteki gibi bu dosyamın ismini functions.js veriyor ve kodlarımı o dosya içinde tutuyorum.

Sonra functions.js dosyanızı açın, aşağıdaki örnek kodu yapıştırın ve tabi ki kendi kullanım ihtiyacınıza göre yeniden düzenleyin:

1
2
3

var agora_regular = {src: 'images/swf/agora_regular.swf' };
sIFR.activate(agora_regular);
sIFR.replace(agora_regular, {selector: 'div#content h1, div#content h2', css: ['.sIFR-root { color: #3e3e3e; font-weight:bold; letter-spacing:-1 }'], wmode: 'transparent', tuneHeight: '-5'});

Yine burada ilk satırda Flash’da ürettiğim Agora Regular adlı yazıtipini barındıran agora_regular.swf dosyasını images/swf klasöründen çağırıyorum. Yine siz kendi gereksinimlerinize göre yuarıdaki kodu düzenleyebilirsiniz.

Son olarak varsayılan olarak kullandığınız CSS dosyanızı açıp aşağıdaki kodları dosyanızdaki uygun bir yere yapıştırın:

1
2
3
4
5
6
7
8
9
10
11
12

.sIFR-flash { visibility:visible !important; margin:0; padding:0 }
.sIFR-unloading .sIFR-flash { visibility:hidden !important }
.sIFR-replaced, .sIFR-ignore { visibility:visible !important }
.sIFR-alternate { position:absolute; left:0; top:0; width:0; height:0; display:block; overflow:hidden }
.sIFR-replaced div.sIFR-fixfocus { margin:0pt; padding:0pt; overflow:auto; letter-spacing:0px; float:none }
 
@media print {
    .sIFR-flash { display:none !important; height:0; width:0; position: absolute; overflow:hidden; }
    .sIFR-alternate { visibility:visible !important; display:block !important; position:static !important; left:auto !important; top:auto !important; width:auto !important; height:auto !important }
}
 
.sIFR-active div#content h1 { visibility:hidden; font-size:30px; line-height:1em }

Yukarıdaki kodda 1. satırdan 5. satıra kadar sIFR için gerekli CSS kodlarını (yani standart kurulumdaki sifr-screen.css dosyasındaki gerekli satırları), 7. satırdan 10. satıra kadar normalde sifr-print.css adlı sIFR için gerekli dosyadaki kodları ve 12. satırda da sIFR tekniği uyguladığımız başlığın boyutunu belirliyoruz.

Yukarıda @media print kodu sayesinde gereksiz yere sifr-print.css dosyasını HTML sayfamıza gömmekten kurtardık. Ama burada dikkat etmemiz gereken birşey var. Yukarıdaki kodu eklediğiniz ana CSS dosyasını (ben genelde screen.css olarak adlandırırım) HTML dosyasına gömerken <link href="styles/screen.css" rel="stylesheet" type="text/css" media="screen" /> şeklinde media="screen" özelliğini kullanarak verirseniz az önce bahsettiğim @media print arasındaki kodlar çalışmayacaktır. Çünkü bu CSS dosyasını tanımlarken sadece ekran için çalışmasını söylediniz.

Dolayısıyla web sayfanızı yazdırırken sIFR‘in ürettiği .SWF dosyaları yüzünden kimi boşluklar veya birtakım gariplikler görebilirsiniz.

Kısacası HTML sayfamıza ana stil sayfamızı çağırırken media="screen" özelliğini kullanmamamız gerekir.

Ayrıca eğer hali hazırda yazıcı için bir CSS dosyası kullanıyorsanız yukarıdaki örnekte yer alan @media print {} arasındaki kodları o dosya içine de atabilirsiniz.

Sonuç olarak web sayfalarımızı kodlarken mümkün olduğunca az dosya kullanmamız iyi olacaktır. Gerektiğinde bu yazımda anlattığım tarzda bir değişiklik yapmamız da optimizasyon adına iyi olacaktır.

Bu yazı Fatih Turan tarafından 19 September 2008 23:52 tarihinde yazıldı. 15 yorum var. Sen de yorum yaz.

Firefox 3′ün çıkmasıyla birlikte birçok yenilikde bizlerle buluşuyor. Bu yenilikler arasında CSS için iyileştirmeler de bulunuyor. Bunlar arasında anlayabildiklerimi aşağıda sizin için sıraladım:

• Display özelliğinin inline-block ve inline-table değerleri tamamlandı
• Daha önce sadece Windows’da çalışan the font-size-adjust özelliği artık bütün platformlarda çalışıyor.
• Color özelliği için rgba() ve hsla() desteği eklendi.
• :default pseudo-class eklendi
• Width, min-width ve max-width özelliklerine -moz-max-content, -moz-min-content, -moz-fit-content, ve -moz-available değerleri eklendi.
• HTML için yumuşak tire (­) desteği eklendi
• Ime-mode özellik desteği eklendi.
• Text-rendering adlı CSS özelliği HTML için destekleniyor.
• -moz-border-*-start ve -moz-border-*-end CSS özellikleri tamamlandı.
• Bütün CSS özelliklerinde -moz-initial değeri tamamlandı (quotes ve -moz-border-*-colors hariç).
• Bütün desteklenen CSS özelliklerinde window.getComputedStyle() artık destekleniyor.
• content özelliğinin none değeri tamamlandı

Daha önce söylediğim gibi bunlar sadece CSS için dökümanlaştırılan iyileştirmeler. Firefox 3 ile birlikte çok daha fazla yenilik geliyor. Bütün bu yenilikleri inceleyebilir veya Firefox 3 Beta 2 portatif sürümü yükleyerek bilgisayarınızda Firefox 3′ü daha da yakından deneyebilirsiniz.

Bu yazı Fatih Turan tarafından 31 December 2007 15:26 tarihinde yazıldı. 4 yorum var. Sen de yorum yaz.

Projemizin tasarımını ve genel işleyişini Web 2.0 özütüne uygun olarak yapmaya çalıştık. Altyapısını da kendi yapımımız olan bir CMS ile yaptık. Arkadaşlarla ilk projemiz olduğu için sistemde ufak tefek hatalar olabileceğini belirtmek isterim. Eğer sizin de gözünüze çarpan herhangi bir hata var ise bize iletişim formu aracılığıyla bunu bildirebilirsiniz. Ayrıca bu çalışma ile W’07 web tasarım yarışmasına katılıyorum. :)

Bizimle Çalışırken Elde Edeceğiniz Avantajlar

Aslında yukarıda da birazcık değindiğim avantajlara ek olarak bizimle çalışırsanız şu avantajları elde edebileceğinizi söyleyebilirim:

• Güncel tarayıcılarda uyumlu sayfalar
• Arama motorları için optimize edilmiş sayfalar
• El ile yazılılarak düzenli kodlanmış sayfalar
• Size sunduğumuz özel panel ile siparişlerinizi rahatça takip edebilirsiniz

Ayrıca bu konu hakkında daha fazla bilgiye XHTMLMUTFAĞI üzerinden de erişebilirsiniz.

XHTMLMUTFAĞI Nasıl Çalışıyor?

İlk önce sipariş formunu doldurarak bize web tasarımınızı ve siparişiniz ile ilgili bilgileri iletiyorsunuz. Ardından biz sipariş bilgilerinizi ve tasarımınızı kontrol ediyoruz. Herşey yolunda ise size siparişinizin onaylandığına dair bir e-posta yollayıp ödemenizi gerçekleştirebileceğiniz banka hesabını veya sipariş verirken Paypal‘ı seçtiyseniz Paypal üzerinden ödeme ekranı için bir bağlantı sunuyoruz. Ödemenizi yapıyorsunuz ve ardından dekont bilgilerinizi bize ulaştırıyorsunuz. Eğer tasarımınız çok karışık veya teknik anlamda herhangi bir eksiklik var ise sizinle iletişime geçip bunu bildiriyoruz.

Sonrasında bize seçtiğiniz zaman tercihine göre (standart süre 3 gün) bir süre veriyorsunuz. Biz de o süre içinde tasarımınızı mutfağımızda pişirip size sunuyoruz. :)

Ya Ücretler Ne Alemde?

XHTMLMUTFAĞI‘ndaki her işi ben ve arkadaşlarımla beraber en üst kalitede yapmaya özen gösteriyoruz. Kaliteden ödün vermemek adına fiyatlarımızı da tatminkar bir seviyede tutmak zorunda olduğumuzu düşünüyoruz. Bu yüzden aşağıdaki fiyat tarifesi ile bu işe başlamayı uygun bulduk:

• XHTML/CSS Çevirimi: 249$
• XHTML/CSS Çevirimi + Wordpress Tema Entegrasyonu: 498$
• XHTML/CSS Çevirimi + XT-Commerce Tema Entegrasyonu: 848$

Ayrıca ilk sayfadan sonraki sayfalar 75$ olarak ücretlendiriliyor.

Söz Sizde…

Biz bu girişimi Türkiye’de başlatmış bulunuyoruz. Peki siz XHTMLMUTFAĞI adlı projemiz hakkında ne düşünüyorsunuz? Hadi bana ne düşündüğünüzü söyleyin. :)

Bu yazı Fatih Turan tarafından 24 October 2007 12:45 tarihinde yazıldı. 19 yorum var. Sen de yorum yaz.

Geçersiz Yazılmış Ve İmi (“&”)

• Örnek: a href=”foo.php?chapter=1&section=2
• Geçerlilik Testi Rapor Sonucu: Unknown entity (bilinmeyen varlık).
• Çözüm: & karakterinden kaçınıp onun yerine daima & kullanın. Ayrıca diğer karakterlerin yazılışını XHTML Character Entity Reference sayfasında bulabilirsiniz.
• Doğru Kullanım Şekli: a href="foo.php?chapter=1&section=2

Elementlerin Yanlış Yuvalandırılması

• Örnek: <strong><em>…</strong></em>
• Geçerlilik Testi Rapor Sonucu: Missing </em> tag (</em> etiketi kayıp).
• Çözüm: Etiketleri doğru yerde, yani iç içe kapatın.
• Doğru Kullanım Şekli: <strong><em>…</em></strong>

DOCTYPE’ın Küçük Harf Yazılması

• Örnek: <!doctype html public "-//w3c//dtd xhtml 1.0 strict//en"
  "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd" >
• Geçerlilik Testi Rapor Sonucu: Missing DOCTYPE (DOCTYPE Kayıp).
• Çözüm: DOCTYPE tanımlamasını büyük harfle yazın.
• Doğru Kullanım Şekli: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >

Kapanış Etiketi(“/”) Kayıp

• Örnek: <img src="image.gif" width="100" height="100"alt="Logo">
• Geçerlilik Testi Rapor Sonucu: Missing closing tag (kapanış etiketi kayıp).
• Çözüm: img, input, br gibi “boş elementler” olarak çağrılan etiketlerin sonu bir boşluk ve “/” ile kapatılmalı. Bütün XHTML elementlerin kodlarını bu sayfadan görebilirsiniz.
• Doğru Kullanım Şekli: <img src="image.gif" width="100" height="100"alt="Logo" />

Etiketlerin Büyük Harf Yazılması

• Örnek: <STRONG><EM>…</EM></STRONG>
• Geçerlilik Testi Rapor Sonucu: There is no such element (Sözkonusu element orada yok)…
• Çözüm: Bütün element ve özelliklerini küçük harf ile yazın.
• Doğru Kullanım Şekli: <strong><em>…</em></strong>

Tırnaklandırılmamış Özellik Değerleri

• Örnek: <td rowspan=3>
• Geçerlilik Testi Rapor Sonucu: Missing quotation marks (tırnak işaretleri kayıp).
• Çözüm: Bütün özellik değerleri tırnaklandırılmalı.
• Doğru Kullanım Şekli: <td rowspan="3">

Bu yazı Fatih Turan tarafından 28 September 2007 21:12 tarihinde yazıldı. 3 yorum var. Sen de yorum yaz.

Peki Ne Yapabiliriz?

Birazdan kullanımını anlatacağım Dean Edwards‘ın 22KB’lik IE7 adlı Javascript betiği sayesinde Internet Explorer 6 ve aşağı sürümlerinin(5, 5.5 sürümleri) daha fazla web standartlarına uymasını sağlayabilirsiniz.

Bu betik sayesinde Internet Explorer 6 ve aşağı sürümlerinde her element üzerinde CSS ile :hover, :focus, :active gibi pseudo sınıf ve elementlerini kullanabilecek, şeffaf PNG dosyalarını farklı bir Javascript betiği veya CSS hilesine ihtiyaç duymadan kullanabilecek, W3C kutu modelini standart ve garip(quirks mode) modlarının her ikisinde de kullanabileceksiniz.

Bunlar betiğin ilk göze çarpan özellikleri idi. Daha detaylı bilgiye buradan erişebilirsiniz.

Kullanım Kılavuzu

İlk adım olarak IE7_0_9.ZIP dosyasını buradan indirip kullanmak istediğiniz çalışmanızdaki dosya klasörüne atıyorsunuz ve bütün dosyaların ie7 klasöründe olduğundan emin olun(bakınız). Eğer dosyaları farklı bir klasöre atacak olursanız, bir sonraki adımda belirttiğim yolu değiştirmelisiniz.

Sonra bu betiği kullanmak için aşağıdaki kodu meta etiketlerinin hemen sonrasına(eğer sonrasına yerleştirmezseniz bizarre bug denilen bir hata ile karşılaşabilirsiniz) yerleştirin.

1
2
3
4

<!--[if lt IE 7]>
<script src="/ie7/ie7-standard-p.js" type="text/javascript">
</script>
<![endif]-->

Bu noktada dikkat edecek olursanız Conditional Comments denilen şartlı HTML yorumları ile Internet Explorer 7′nin aşağısındaki sürümlerde(6, 5.5, 5) bu betiğin yüklenmesini söyledik. Böylece sadece Internet Explorer 5, 5.5 ve 6′da bu betik çalışacak. Bu betiğin Internet Explorer 7′de çalışmasının pek bir anlamı yok. Zira Internet Explorer 7 zaten web standartlarını destekliyor. Ayrıca bu şartlı yorumların kullanımını daha sonra ayrıntılı olarak anlatmayı düşünüyorum.

Şeffaf PNG’lerin Kullanımına Dair Küçük Bir Not

Şeffaf PNG dosyalarını kullanırken dosya isimlerinizin sonuna -trans eklemeyi unutmayın. Örneğin elimizde deneme.png adlı dosya var ise deneme-trans.png olarak değiştirmelisiniz.

Sonuç

Son olarak sizin için bir örnek hazırladım(Internet Explorer 6′da betik aktifken bakın ve bir de betik pasifken bakın). Artık web standartlarını daha fazla destekleyen bir Internet Explorer’ımız oldu.

Bu yazı Fatih Turan tarafından 18 September 2007 13:37 tarihinde yazıldı. 10 yorum var. Sen de yorum yaz.

Aardavark

Aardavark eklentisi ile sayfa üzerindeki HTML etiketlerini görebiliyoruz, bunların HTML kodlarını inceleyebiliyoruz ve sayfamızdan geçici olarak HTML etiketlerini kaldırabiliyoruz(R.I.P eklentisi ile HTML etiketlerini tamamen kaldırabilirsiniz). Kullanışı da gayet basit: hangi sayfada kullanmak istiyorsanız, o sayfa da sağ tıklayıp START AARDAVARK komutuna uyguluyorsunuz ve eklenti çalışmaya başlıyor. Ardından da klavyedeki kısayolları kullanarak istediğiniz işlemi yapabiliyorsunuz. Bu kısayolları ve ne işe yaradıklarını öğrenmek için Aardavark eklentisi etkinken klavyeden H düğmesine basmanız yeterli. Eklentiyi kapatmak için de Q kısayol tuşunu kullanabilirsiniz.
Aardavark eklentisini bu sayfadan yükleyebilirsiniz.

Colorzilla

Colorzilla eklentisi ile sayfa üzerindeki herhangi bir nesnenin rengini HEX veya RGB kodu olarak alabilirsiniz. Ayrıca COLOR PICKER komutu ile renk seçim penceresini açıp oradan da renk seçimi yapabilirsiniz. Colorzilla eklentisini yüklediğinizde Firefox’un durum çubuğunun solunda simge olarak yerleşecektir. Simge üzerine sol fare tuşu ile birkez basınca renk seçim aracı açılır ve sayfa üzerinde herhangi bir nesneye basarak rengi belirleyebilir, sağ fare tuşuyla basınca da açılan menüden renk kodunu HEX veya RGB olarak alabilirsiniz. Colorzilla eklentisini bu sayfadan yükleyebilirsiniz.

CSS Viewer

CSS Viewer eklentisi de sıkça kullandığım eklentiler arasında. Bu eklenti ile sayfa üzerindeki nesnelerin temel CSS özelliklerini görebilirsiniz. Kullanımı yine çok basit: ARAÇLAR menüsünden CSS VIEWER komutuna birkez basınca CSS Viewer eklentisi aktif hale geliyor ve sayfa üzerinde nesnelerin üzerlerine gelip CSS Viewer kutusunda temel özellikleri görebiliyorsunuz. CSS Viewer’ı kapatmak için yine ARAÇLAR menüsünden CSS VIEWER komutuna basıyoruz. CSS Viewer eklentisini bu sayfadan yükleyebilirsiniz.

Firebug

Firebug benim en sık kullandığım Firefox eklentisidir. Bu eklenti web tasarımcı ve geliştiricileri için adeta bir ilaç! xD Çünkü Firebug sayesinde sayfanızdaki HTML ve CSS etiketlerini görüntüleyebilir, anında düzenleyebilir ve Javascript betiklerinizde yer alan hataları gözlemleyip yok edebilirsiniz. Ayrıca ağ monitörü özelliği(Firebug’daki NET sekmesi) ile sayfanızla ilişik diğer dosyaların yükleniş anında kaç KB olduğunu, kaç saniyede yüklendiğini ve ilişik dosyaların yüklenip yüklenmediğini görebilirsiniz. Firebug eklentisi yüklendiğinde Firefox’un durum çubuğunun sağında simge olarak yerleşecektir. Bu simgeye basarak Firebug penceresini açabilir, aynı zamanda kapatabilirsiniz. Firebug eklentisini bu sayfadan yükleyebilirsiniz.

HTML Validator

HTML Validator eklentisi de bana göre en az Firebug kadar gerekli bir eklentidir. Bu eklenti sayesinde sayfanızın HTML kurallarına uygun olup olmadığını öğrenebilirsiniz. Bu eklenti yüklendiğinde yine Firebug gibi Firefox’un durum çubuğunun sağında simge olarak yerleşecektir. Html Validator eklentisini bu sayfadan yükleyebilirsiniz.

IE Tab

IE Tab eklentisi ile Firefox’dan ayrılmadan sayfanızı Internet Explorer motoru ile aynı veya yeni bir sekmede açabilirsiniz. Bu eklentiyi kurduğunuzda Firefox’un adres satırının yanında simge olarak yerleşecektir. IE Tab eklentisini bu sayfadan yükleyebilirsiniz.

Measure It

Measure It eklentisi ile sayfanızdaki nesnelerin genişlik ve yüksekliğini piksel cinsinden öğrenebilirsiniz. Bu eklenti yüklendiğinde Firefox’un durum çubuğunun solunda simge olarak yerleşecektir. Measure It eklentisini bu sayfadan yükleyebilirsiniz.

Screengrab

Screengrab eklentisi ile sayfanızın bütününü veya görünen kısmını PNG olarak kaydedebilir ya da direkt kopyalayıp hafızaya alabilirsiniz. Bu eklenti kuruldukdan sonra Firefox’un durum çubuğunun sağında ikon olarak yerleşecektir. Simge üzerine basıp SAVE veya COPY menülerinin altındaki komutları uygulayarak bu eklentiyi kullanabilirsiniz. Screengrab eklentisini bu sayfadan yükleyebilirsiniz.

Split Browser

Split Browser eklentisi sayesinde Firefox sayfanızı yatay veya dikey olarak bölümlere ayırabilirsiniz. Bu sayede iki sayfayı karşılıklı görebilme şansına erişeceksiniz. Split Browser eklentisini bu sayfadan yükleyebilirsiniz.

Web Developer Toolbar

Web Developer Toolbar eklentisi yine benim açımdan “olmazsa olmaz” denilebilecek Firefox eklentileri arasına giriyor. Bazı işlevleri açısından Firebug’a benzemesinin yanısıra ondan çok daha fazla işlevi bulunmakta. Bu eklenti yüklendikden sonra Firefox’a yeni bir araç çubuğu olarak yerleşiyor. Web Developer Toolbar eklentisini bu sayfadan yükleyebilirsiniz.

Yet Another Window Resizer

Yet Another Window Resizer eklentisi sayesinde tarayıcınızı 640×480, 800×600 ve 1024×768 gibi boyutlara değişebiliyorsunuz. Bu eklentiyi kullanmak için sayfanızda sağ fare tuşuyla açılan menüden RESIZE WINDOW’ın altındaki komutlardan istediğiniz bir boyutu seçmeniz gerekiyor. Yet Another Window Resizer eklentisini bu sayfadan yükleyebilirsiniz.

Bu yazı Fatih Turan tarafından 03 September 2007 17:56 tarihinde yazıldı. 10 yorum var. Sen de yorum yaz.