Çoğumuz Dreamweaver'dan sıkılmadık mı? Yeni, gelişmiş bir editör bulamıyoruz belki de. Veya Photoshop artık bazı işlemler için çok karmaşık geliyor?

Web ve yeni medya konusunda tüm bu arayışlara Microsoft güzel bir cevap verdi: Microsoft Expression. Yeni bir stüdyo, yeni bir programlar ailesi. Bu aile senelerdir kullandığımız programlara güzel bir alternatif sunuyor. Bu programlar dizisine minik bir giriş yapıp, hepsini tanıyalım.

Devamını okuyun

Performans optimizasyonunun son iki adımı kullanıcı ayarlarının saklanmasını sağlayan cookie ve mobil taraflı ayarlarda. Ancak daha önce neler yaptığımızı tekrar etmekte fayda var:

• İçeriksel anlamda yapılan iyileştirmeler
• CSS dosyalarında iyileştirmeler
• Resim ve grafiklerde iyileştirmeler
• Javascript dosyalarında iyileştirmeler
• Sunucu tarafında yapılan iyileştirmeler

Devamını okuyun

Şimdiye kadar aşağıdaki konularda optimizasyonlara giderek gerek kullanıcı, gerekse de sunucu tarafında bir hız kazanma arayışı içerisindeyiz. Öncelikle, kullanıcı sayfalarımızı daha hızlı gezecek, aynı zamanda bizim de sunucu masraflarımız düşecek:

• İçerik optimizasyonları
• CSS optimizasyonları
• Görsel optimizasyonları
• JavaScript optimizasyonları

Devamını okuyun...

Optimizasyon konusunda yapacaklarımız sayesinde hem sunucu yükünü azaltıyor hem de ziyaretçinin sitenizi daha hızlı gezmesini sağlıyor.

Şu ana kadar yaptığımız adımlar:

• İçerik optimizasyonları
• CSS optimizasyonları
• Görsel optimizasyonları

Devamını okuyun

Sunucu ve web sayfasındaki bazı optimizasyonlara değinmeye kaldığımız yerden devam. Daha öncesinde şu 2 soruya cevap verdik:

• İçerik optimizasyonu ile site performansı nasıl artırılır?
• CSS optimizasyonu ile site performansı nasıl artırılır?

Devamını okuyun

Sitenizin açılış performansını hızlandırmanız için gereken adımlarda sıra CSS konusunda yapılabilecek olanlar. Bu yazıdan önce,

1. Site performans aracı
2. Sitenizin performansını artırın - İçerik

Yazılarını okuduğunuzdan emin olunuz. Yapmaya çalıştığımız şey, dosyalardan, sunucu ayarlarına kadar birçok kategoride 34 adımda sitemizin daha hızlı açılmasını sağlamak.

Devamını okuyun

Üşengeçlik etmeyip, hemen söz verdiğim yazıya geçiyorum.

Yapmak istediğimiz şey oldukça basit. Bazı iyileştirme ve optimizasyonlarla sunucuya giden istekleri azaltarak sayfamızın daha hızlı açılmasını sağlamak. Bunu ölçümlerdek iki araç oldukça işimize yarayacak. Bunlardan birisi YSlow (bizim bağlantımız üzerinden testler için), bir diğeri ise PingDom'un geliştirdiği test aracı (farklı bir bilgisayardan test için).

Yahoo! Geliştiriciler Ağı, bu optimizasyonlarla ilgili şahane bir liste yaptı. 34 adımda %50'lere varan performans artışı sağlayabiliyorsunuz.

Bir seferde ne yazık ki hepsini anlatamayacağım, onun yerine bir yazı dizisi halinde gruplayarak gideceğim.

Devamını okuyun

Yahoo!'nun son zamanlarda fazlasıyla ağırlık verdiği Yahoo! Geliştiriciler Ağı benim biraz geç farkettiğim bir Firefox eklentisi geliştirmiş. İsmi YSlow.

YSlow, site performansınızı tarayıcı üzerinden değerlendirmek için yapılmış şahane bir araç. Bir web geliştirici olarak kullanmanız gereken 17 faydalı araçtan bir tanesi olan FireBug ile çalışıyor. Yani çalıştırmak için FireBug'ı da kurmuş olmanız gerekiyor.

Araç temel olarak, sayfada bulunan tüm öğeleri, sunucu isteklerini analiz ediyor ve size bir karne notu veriyor. Ayrıca daha yüksek not almak için neler yapmanız gerektiğini de çok net bir şekilde anlatıyor.

Şu sıralar sitenin daha hızlı açılması için sayfa öğeleri ve sunucu taraflı yapılabilecek optimizasyonları inceliyorum. Cem'in de paylaştığı fikirler sayesinde SiberKültür'ün açılış performansında şimdilik %30'lara varan bir hızlanma sağladım YSlow'un değerlerine göre.

Bir sonraki adımım, bu performans ayarlarını biraz daha inceleyip, aldığım sonuçları SiberKültür örneği üzerinden sizlerle paylaşmak olacak. Tabi ki Yahoo!'nun performans ipuçlarını da detaylıca anlatacağım.

CSS için bilgi düzeyleri belirlenir de, HTML için belirlenmez mi? Emil'in makalesi üzerine 456 Berea Street'ten güzel bir karşılık geldi. Roger Johansson'ın yazdığı HTML bilgi seviyeleri yine ciddi yüzünü biraz eğlenceli bir şekilde gösteriyor.

Derece 0

Heyt-ti-em-ne?

Kazara bile olsa HTML'i görmemiş, duymamış insan türüdür. Bu insanlar asla web sektöründe çalışmamışlardır, büyük ihtimalle çalışmayacaklardır da. Hatta bu yazıda bulunma nedenleri de en alt seviyeyi göstermek içindir.

Derece 1

HTML mi? Hani kalın felan yazıyosun?

Bu insanlar web'de üreticiden çok tüketici konumundadırlar. Veya üreticilerse de yaptıkları herşey görsel editörler (WYSIWYG) sayesindedir. Bu editörler olmadan elleri kolları bağlıdır. Düşük bir ihtimal olsa da web site editörleri de bu kategoride olabilir. Yaptıkları iş sadece güncelleme olduğu için bir sonraki dereceye geçmek pek de umurlarında değildir.

Derece 2

Editörde sürükle bırak yaparak koyduğum elementler Internet Explorer'da çalışıyor, HTML'e neden bakayım ki?

Çok sıkıştıkları takdirde HTML kodlarını açıp, kaybolarak da olsa birşeyleri anlayabilirler. Fakat asla HTML kodlarına elle müdahale etmek istemezler. Çünkü kullandıkları program herşeyi yapıyordur. Genellikle programcı olurlar ve HTML'i kendileri için çok basit gördükleri için öğrenmezler. Ancak basit gördükleri dilde bir yerde 8 saat boyunca takılı kaldıklarında tüm egoları yerlebir olacaktır.

Derece 3

Evet şu ul, h1 gibi şeyleri duydum. Ne gerek var ki ben tablolarımla, imajlarımla, br'lerimle mutluyum zaten.

90'lardan bu yana çalışan birçok web geliştiricisi bu kategoride olabilir. Başlarda herşeyi elle yaparken, sonradan Dreamweaver gibi editörlerin çıkmasıyla artık daha fazla HTML öğrenmeye gerek duymamışlar ve oldukları yerde kalmışlardır. Bütün kodları da eski bir alışkanlık olarak tablolar ve spacer.gif'lerden oluşur. Artık editörler herşeyi yaptığına göre, arkaplanda ne olduğunu anlamak yerine yeni birşeyler öğrenmeye başlamışlardır.

Derece 4

Veri tablosunu nasıl div'lerle yaratabilirim?

Bu derecedeki insanlar doctype'ları artık bilerek kullanmaya başlamışlardır. O kadar bilirler ki onlar için XHTML 1.1 en iyisidir, çünkü en son sürüm her zaman iyidir. Çevrelerinden site yapısı için tablo kullanmamaları gerektiğini duyunca artık herşeyi div'lerle yapmaya başlamışlardır. Hatta verilerin gösterildiği tabloları bile!

Çoğunlukla gelişmeye açık insanlardır, araştırırlar, nasıl yapılacağını öğrenirler. Fakat asla neden böyle yapıldığını bilmezler.

Derece 5

Hmm, acaba hangi anlamlı yol, benim dökümanım için daha uygun olacak?

Bu insanlar öncelikle yapıyı ve anlamlılığı düşünürler, ardından sunumu. Genellikle tam doctype'ları kullanırlar. Bazı derece 5 insanlar, XHTML'in kullanımını sorgularlar ve bu konuda sonsuz tartışmalara girebilirler. Çoğunlukla verecekleri class isimleri hakkında ve kodlarını organize etmekle vakit harcarlar. Eğer bu dereceye geldiğinizi düşünüyorsanız, gayet iyi gidiyorsunuz demektir.

Derece 6

Bence HTML 4.01 ve XHTML 2 özellikleri anlamsal olarak çok kısıtlı, yeni bir biçimleme dili üzerinde çalışıyorum...

Bu insanlar endüstride söz sahibi kişilerdir. Şuan için değil de, ilerisi için neler daha kullanışlı olacak bunu düşünürler. Yaptıkları şeyler ise yakın zamanda ortalama geliştiricilerin işine yaramayacaktır. Bu dereceye geldiyseniz artık bazı şeyleri aşmışsınızdır, sitelerden çok kuralları siz yazıyorsunuzdur.

SiberKültür'de minik değişiklikleri farketmişsinizdir. Bunlardan birisi de yazı bilgileri kısmındaki mini ikonlar. Verilen bilgiyi biraz daha görsel hale getirmek için uzun zamandır bu tür birşey kullanıyordum.

Bu yazıyı tabiki de bu minik değişiklikten haberdar olmanız için yazmıyorum. Bu ikonları yerleştirirken kullandığım tekniği sizlerle paylaşmak istiyorum. Bunun neresi paylaşılabilecek demeyin, çünkü hemen yukarıda gördüğünüz 4 farklı ikon aslında bir tane resimden geliyor. Aynen şu şekilde:

4 ikonu aynı gif üzerinden vermek istememin nedeni çok basit aslında. Bir web sayfasında ne kadar çok farklı element olursa, sunucuya gönderilen istekler de buna göre artacaktır. Yani, 4 farklı imaj kullansaydım, 4 farklı imaj için sunucu 4 defa istek alacak ve bunlara ayrı ayrı karşılık verecekti. Dolayısıyla sayfanın açılışı da yavaşlayacaktı.

Tek bir imaj kullanarak ve bunları koordinatlarına göre çağırarak istekleri bire düşürüp sayfa tarama ve sunucu istek zamanını kısaltabilirsiniz. Bunun için yapmanız gerekense oldukça basit:

background: url(imajin_adi.gif) no-repeat 0px 10px;

Sırayla gidersek, css tanımlamanıza bir arkaplan imajı tanımlıyor, bunun adresini veriyor, sadece bir kere konmasını belirliyor (repeat-x ve repeat-y diyerek x/y ekseninde devamlı gelmesini sağlayabilirdik) ve son olarak da soldan ve yukarıdan kaç piksel farkla gösterileceğini belirliyoruz. Mesela ben, 4 farklı ikonum için sırasıyla şunları kullandım:

background: url(ikonlar.gif) no-repeat 0px -29px;
background: url(ikonlar.gif) no-repeat 0px 0px;
background: url(ikonlar.gif) no-repeat 0px -45px;
background: url(ikonlar.gif) no-repeat 0px -16px;

Görebileceğiniz üzere - değerler de kullanabiliyorsunuz. Böylece aşağıda kalan imajlara ulaşmanız mümkün oluyor. Benim kullandığım alanlar yanlara doğru uzadığı için ikonlarımı dikey olarak yerleştirdim. Siz tam tersine yatay olarak da kullanabilirsiniz.

Bu tekniğin bir diğer kullanım yeri de, bağlantılarınız için hover efekti olabilir. Normal ve üzerine gelecek hallerini tek bir resim içinde kullanıp, :hover ile üzerine geldiğinde arkaplanı kaydırarak kullanıcı beklemeden efekti görebilir. Eğer farklı imajlar kullansaydınız, sunucuya istek gönderilecek ve imajın gelmesi beklenecekti.

Küçük ama önemli bir not olarak, kullandığım ikonları iStockPhoto sitesinden satın aldım. Kendileri bedava olmadıkları gibi, satın alınmadan kullanıldıklarında yasal olarak başa bela olabiliyorlar. Kullanmak isterseniz siz de iStockPhoto sayfasından satın alabilirsiniz.