Göz atmanızda fayda var; JavaScript – Çözünürlüğe göre stil kullanımı

Bu JavaScript dosyasında bir kaç düzenleme yapılarak çözünürlük dışında tarayıcıya (ie, ff) göre farklı css dosyalarının yüklenmesi de sağlanabilir.

Bunun üzerine, yine css ile hazırlanmış ama daha detaylı bir tasarımı sizlerle paylaşma kararı aldım.

Görselliği 2. planda bırakarak önce çok basit, ardından biraz daha detaylı bir web sayfasını hazırlayarak burada yayınlamayı düşünüyorum. Tabi sizden gelicek fikirlere de açığım.

İnternette bolca kaynak var css`i anlatan. Tek tek konulara bölerek anlatılmış durumda zaten, bu yüzden benzer bir yapı sunmak istemiyorum ve yapacağım bu çalışma ile uygulama anında anlatmayı düşünüyorum. Yani şu özellik şu işe bu özellikte bu işe yarar diye tek tek css`i anlatmaktansa, kullanıldığı yerde açıklamasını yazarak neden orda o özellik kullanılmış onu vermek istiyorum.

Sonuçta elinizde genel hatları ile hazır bir web sitesi olacak ve css dosyasına baktığınızda hangi özelliğin neden orada kullanıldığını anlatan açıklamalar yer alacak. Aynı şekilde html kısmında da tabiki.

Neyse lafı daha fazla uzatmak istemiyorum, bu konuda düşünceleriniz yada istekleriniz varsa lütfen yorumunuzda belirtin.

Bende yorumlarınız doğrultusunda daha kullanışlı bir şeyler hazırlamış olurum böylece.

Bu tekniği ilk duyduğumda birazda anlatan arkadaştan kaynaklanan bilgi eksikliği yüzünden sanırım mantıksız bi şey gibi gelmişti. Çünki arkadaşımın tavsiyesi üzerine mevcut olan css koduma ekleme yaptığımda web sitesinin resmen dağıldığını görüp direk olarak arkadaşımın üzerine saldırmıştım :)

Neyse sonuçta bu tekniğin projeye başlamadan en başta css dosyasına eklenip sonradan buna göre kodlama yapılması gerektiğini öğrenmiş ve bu tekniği bende kullanmaya başlamıştım…

Css sıfırlama tekniği sadece bir tane değil, bir çok insanın kendine göre hazırlamış olduklarının yanı sıra css konusunda hatırı sayılır bir yere sahip olan kişi ve kurumlarında kendince standart olarak kullandığı teknikler var.

Bunlardan en çok bilinenleri:

• Yahoo`nun reset css tekniği
• Eric Meyer`in reset css tekniği
• Hard Reset denilen bir teknik daha var, oda şöyle;

* {margin:0; padding:0}

Bu konuda aslında detaylı bir yazı yazmayı düşünüyordum fakat benden önce davranıp çok güzel bir yazı hazırlamışlar bile. Css Reset tekniği hakkındaki bu güzel yazıyı okumak ve hazırlanan videoyu izlemek için…

Biraz araştırma yapınca bu metinleri oluşturan suçluyuda bulmuş oldum; www.lipsum.com.

Bu anlamsız metin öbeklerinin daha çok tasarım yapanların metin gelicek alanlarda insanların dikkatini metinlerden çok tasarıma çekmek için kullandıklarını öğrendim. Örnek vermek gerekirse bir web sitesi taslağı düşünün ve içinde son 5 haberin başlıkları ve özetleriyle birlikte geldiğini. Şimdi bu taslağı müşterinize gösterirken başlık ve haber özeti alanlarına “Buraya Haber Başlığı Gelicek”, “Buraya haber metni gelicek, Buraya haber metni gelicek, Buraya haber metni gelicek….” gibi şeyler yazmak ilk başta mantıklı gelsede sayfanın genel düzeni ve görünüm açısından hoş durmuyor. Bunun yerine tasarımcılar bu “Lorem ipsum” ile başlayan metinleri kulanıyorlar.

Lorem İpsum`un web sitesinde daha önce dikkat etmediğim bir şey var. Geçtiğimiz ay farkettim bunu, websitesinin üstünde bir çok dile ait çevirilere bağlantı verilmiş. Bu sayfalarda kendi dilinizde (Türkçe dahil) Lorem İpsum Nedir ?, Nereden Gelir ?, Neden Kullanırız ? Nereden Bulabilirim ? sorularına cevaplar bulabilirsiniz. Lorem İpsum”un Türkçe sayfası için…

Bu açıklamaların hemen altında “Lorem İpsum” ile başlayan metinler oluşturmanız için bir bölüm var. Buradan paragraf, sözcük, karakter, liste seçeneklerinden birini seçip yanınada kaç tane olacağını yazıp “Lorem İpsum Üret” butonuna basınca belirlediğiniz kriterlerde metin oluştutup size gösteriliyor. İsterseniz oluşturulacak metnin “Loprem İpsum” ile başlamamasınıda sağlayabiliyorsunuz.

Eğer bu metinleri sık sık kullanıyorsanız ve Firefox tarayıcınızda varsa her seferinde www.lipsum.com adresine girmenize gerek yok. Firefox için hazırlanan Dummy Lipsum eklentisi ile siteye girmeden de aynı metinlerden oluşturabiliyorsunuz. Eklenti www.lipsum.com adresine bağlanarak metinleri oluşturuyor, kendi kafasına göre değil yani.

Ayrıca eklentinin HTML taglarını göstermesi (isterseniz), oluşturulan metni önce seçip ardından CTRL + C tuş kombinasyonunu kullanmanızı gerektirmeyen “Copy to clipboard” butonu ile çok kullanışlı bir eklenti bence.

Dummy Lipsum Ekran Görüntüsü

Dummy Lipsum - Aynı zamanda HTML taglarınıda gösteriyor

Lorem İpsum`a alternatif olarak Türkçe metinler yaratabileceğiniz bir websitesi de mevcut. Oluşturulan bu metinler kendi dilimizde olduğu için biraz komik geldi ama yinede kullanılabilir diye düşünüyorum.
Türkçe Lorem İpsum için…

Türkçe lorem ipsumda oluşturulmuş bir metin örneği;

Uzattı sinema gülüyorum ve yazın sıradanlıktan ekşili çorba un değirmeni tv mıknatıslı okuma sayfası. Düşünüyor sandalye ve sıradanlıktan uzattı filmini mi koştum dergi bilgisayarı batarya kutusu filmini mi tv filmini mi gidecekmiş. Sıradanlıktan dışarı çıktılar eve doğru salladı adanaya anlamsız.

Yaklaşık 1 sene önce basit bir arayüz ile hazırladığım web sitemi wordpress altyapısı ile bir blog sitesi haline getirdim.

Birazdan okuyacağınız satırlar bu websitesinin neden açıldığını ve neler yapmak istediğimin kısa bir özetidir.

WordPresse geçmeden önce basit bir site hazırlamıştım referanslarımı yayınlamak ve iletişim bilgilerimin yer alması için. O sitenin içeriğide çalışmalarımın altına bağlantı olarak kendi sitemi yazdığımdan ve sitenin içeriğinin boş kalmamasıydı. İlerisi için ise kendi websitem ile ilgili planlarım vardı, kendi blog sitemi herşey ile kendim hazırlamak istiyordum. Görselinden, koduna kadar fakat bir türlü zaman bulamıyordum.

Bir kaç deneme yanılmadan sonra hazır bir sistem olan wordpress i düşünmeye başlamıştım .Net programcısı olarak hazır bir php altyapı uygunmuydu diye. Uygunluktan kastım hem koda müdahele açısından hemde istediğim bir yapıda olup olmadığıydı. İhtiyaçlarıma cevap verebilecekmiydi?

Bunun üzerine halihazırda wordpress altyapısı kullanılan siteleri dolaşmaya başladım. Makaleler okudum, WordPressin türkçe sitesini inceledim. WordPress ile ilgili oldukça bol kaynak olduğunu da belirtmek istiyorum.

Genel anlamda paylaşmayı düşündüğüm .Net, Css, Web Tasarımı gibi konulardaki yazılarımı rahatça yayınlayabileceğim bir platform olduğunu gördüm. Bunun üzerine çalışmalara başladım. Windows serverda kurulu olan hostumu bir linux servera taşıdım. Ardından WordPress kurulumunu gerçekleştirip (yaklaşık 2 dakika) detaylı birşekilde kurcalamaya başladım. Kurulum ile ilgili detaylar “İlk Yazı ve WordPress Kurulumu” başlıklı yazımda mevcut. Tema denemeleri ve bu denemeler sırasında yaşanan ufak tefek sorunlarıda çözünce websitem şuanki halini almış oldu.

İlerleyen zamanlar için planlar ise şöyle;

• Eski sitemde yer alan bir kaç yazımı buraya aktarmak.
• Referanslarımı Portfolyo adında bir sayfa hazırlayıp orada sunmak (Bunun için ya tamamen wordpressten ayrı bir sayfa hazırlayacağım yada mevcut yapı içindeki yeni sayfa kısmından bir sayfa oluşturup içine yerleştireceğim. Güncellenebilirlik açısından 2.si daha mantıklı geliyor ama deneyip göreceğiz). Bu konudaki fikirlerinizi yorum kısmından benimle paylaşırsanız çok sevinirim.
• Ayrıca daha önce hazırladığım web sitelerinin bazılarını baştan düzenlemeyi düşünüyorum.
• Oluşturduğum kategoriler altında daha çok kendi hazırladığım yazıları yayınlamak (Fakat bunun için biraz zaman gerekiyor. Hali hazırdaki notlarımı çalışmalarımı toparlayarak makale haline getirmeliyim).
• Sitemin genelinin özgün bir içeriğe sahip olmasını sağlamak (yazılan yazılar ile).
• Hazır bir tema yerine kendi tasarımımı hazırlamak ve kullanmak (Biraz daha php ile haşır neşir olduktan sonra gerçekleşir bu sanırım).
• Teknik Servis diye bir de kategori oluşturdum, burada da 4 yıl boyunca yaptığım internet cafe işletmeciliği sırasında edindiğim tecrüblerimi paylaşmayı düşünüyorum.
• Web tasarımına ve programlamasına ilgi duyanlara yol göstericek bir websitesi olmak.
• Birazda kendimi tanıtmak.

Umarım bu planlarımı en kısa sürede gerçekleştirebilirim.

Bahsettiğim bu kaynak; Fatih Hayrioğlu`nun web sayfasında yayınladığı css derslerinin derlenip .pdf formatında bir e-book haline getirilmiş hali. Bu derlemeyi yapanda zaten kendisi.

Kitap yayınlanalı hayli zaman geçti aslında fakat web sitemi tamamen değiştirip WordPress`e geçtiğim için tekrardan yazmak istedim.

Kitap hakkındaki açıklamanın ve okuyucularının görüşlerinin yer aldığı sayfa için…

Kitabı bilgisayarınıza indirmek için…

Kitapta anlatılan derslerin kaynak kodlarını bilgisayarınıza indirmek için…

Birde kitap için alternatif link (RapidShare)

Oldukça hoş çalışmalar çıkmış ortaya, katılmış olan herkeze başarılar. Bende bir kaç çalışma yapmıştım fakat işlerimin yoğunluğundan, düzenleyip gönderemedim bir türlü. Neyse bir dahaki safere artık.

Yarışmaya katılan tasarımları görmek için…