Mühendisler Dünyası

Ruby programlama dilinde HTML ve CSS dosyalarının karşılıkları sırasıyla HAML ve SASS dır. Ruby programlama dilinin geniş kitleler tarafından tercih edilmesinin nedeni de kendine özel şemantik yapısının olmasıdır. Ruby’nin yaratıcısı Yukihiro “Matz” Matsumoto en sevdiği programlama dillerinin (Perl, Smalltalk, Eiffel, Ada, ve Lisp) en iyi özelliklerini bir araya toplayarak ve fonksiyonel programlama ile nesneye dayalı programlamaya dayanan yeni bir dil ortaya çıkarmıştır. Bundan sonra oluşan büyük Ruby geliştiricileri topluluğu sayesinde tüm programlama dallarında kullanılmaya başlanmıştır.  Bu yapılardan biri de özellikle satır sayısının çok büyük olduğu klasik HTML dosyalarının okunabilirliğini artırmak için geliştirilmiş HAML dosyalarıdır. HAML dosyaları proje için .haml uzantılı dosyalar halinde yer alır ve bu dosyalar proje derlendikten sonra HTML dosyalarına dönüşürler. Bu noktada klasik HTML ve HAML arasındaki farkı ortaya koyacak küçük bir örnekle devam edelim.

Bir web sitesini değerlendirirken en önemli kriterlerden bir tanesi kullanıcıların web sitelerini rahatça kullanabilmeleridir . Örneğin bir link üzerine geldiğinde bu linkin tıklanabilir olmasını gösterebilmek için renk değişimi, bu linkin diğer yazılardan seçilmesi önemli noktalardan bir tanesidir. Bu makalede CSS'de sıkça başvurduğumuz ve kullanıcının işini kolaylaştıran özelliklerden bir tanesi olan linkler üzerine gelindiğini mouse'un bulunduğu alanın bildirimidir. Yani farenin görünümünü değişmesi... Örneğin bir link üzerindeyken farenin el işaretine dönüşmesi kullanıcının bu linkin tıklanabilir olduğunu bildirecektir. Genel olarak mouse işaretinin görünümünü ayarlamak için CSS de "cursor" özelliği kullanılır ve bu cursor özelliğinin de parametreleri vardır. Örneğin linkin üzerinde el işareti göstermek istiyorsak cursor=pointer gibi kullanmamız gerekiyor.

Web sitesi tasarlarken özellikle modallar veya açılan pencere içinde ihtiyaçlardan bir tanesi de çarpı butonudur. Bu makalemizde çarpı işaretli butonun tasarımını anlatacağım. Genel tasarımı kullanarak sizde buna göre renkleri kendinize göre dizayn edebilirsiniz. Eğer projenizde bootstrap kullanıyorsanız burada close clasını da kullanacağız. Eğer bootstrap kullanmıyorsanız aşağıdakı close sınıfı kodlarını öncelikle css dosyanıza ekleyin.

Blogger'da makale yazarken en çok sıkıntı oluşturan noktalardan bir tanesi blog makalesi için html kodlarını bloğa eklerken oluşur. Bunun nedeni ise blogger makale yazma aracının arkasında da html engine olmasıdır. Bu engine siz makaleyi normal yazı olarak yazsanız bile bu makaleyi html kodlarına çevirir. HTML taglardan oluştuğu için de blogger makale yazma aracı sizin makalenizdeki html kodlarını ayırt edemez ve kodlar içinde işleyerek sadece verileri gösterir. Bu makaleyi okuyorsanız düşünüyorum ki sizin de sıkıntınız tam olarak bu olsa gerek. Bu kısa makalemde size bu sorunu çözmek için bir araç sunacağım. Bunun dışında ise araç kullanmadan kendinizin de mantığını anlayıp basitçe bloğunuza HTML kod satırlarını nasıl ekleyeceğini göstereceğim. Aslında linkini vereceğim araç ile işlemlerinizi kolayca halledebilirsiniz. Ama düşünüyorum ki eğer bloğunuza HTML kodu eklemek istiyorsanız o zaman en azından HTML konusunda biraz bilgilisinizdir. Bu yüzden bu işlem için kullanılan tagı

Web sitesi yaparken kullandığınız template'lerden bağımsız olarak özellikle SPA’da (Single Page Application) ekran yüksekliğini kullanıcın bilgisayarının yüksekliğine göre ayarlamak isteyebilirsiniz. Bu makalede bunun nasıl yapılacağını örnekle açıklamaya çalışacağım. Projelerimde JQuery kullandığım için bunu JQuery kütüphanesini kullanarak yapacağım. Eğer siz JQuery kullanmıyorsanız veya başka kütüphane kullanıyorsanız da bu işlemleri kendi kütüphanenize göre manipüle edebilirsiniz. Yaptığım işlemlerde JQuery kütüphanesini sadece verdiğim ID değerine ulaşmak ve bu değerin boyutunu manipüle etmek için kullanıyorum. İsterseniz fazla laf kalabalığı yapmadan konuyu örnek üzerinden anlatayım. Örnek olması açısından gerekli kodları verdikten sonra açıklamasını yapacağım.

Bu makalemizde, CSS önemli ve çok kullanılan özelliklerinden biri olan genişlik ve yüksekliğin ayarlanması için height, width, min-height, max-height, min-width ve max-width özelliklerini anlatacağım. Bu özellikleri kısaca açıklayacak olursak: height: yükseklik değerlerini ayarlamak için kullanılır. width: genişlik değerlerini ayarlamak için kullanılır. min-height: yükseklik için olabilecek minimum değerleri ayarlamak için kullanılır. max-height: yükseklik için olabilecek maksimum değerleri ayarlamak için kullanılır min-width: genişlik için olabilecek minimum değerleri ayarlamak için kullanılır max-width: genişlik için olabilecek maksimum değerleri ayarlamak için kullanılır.

Web sitesi tasarlarken belirli bir alanının görünüm özelliklerini değiştirirken az tercih edilen yöntemlerden bir tanesi de etikete verilen ID değerlerine göre görünümü özelleştirmektir. Bu yöntem web sitesi tasarlarken profesyonel tasarımcıların tercih etmediği bir yöntemdir. Bunun temel nedenlerinden bir tanesi de web siteniz büyüdükçe ID değerlerini takip etmeniz zorlaşır ve belirli bir süre sonra projenizde kod kalabalığı veya kod çirkinliği oluşmasına neden olur. Aynı zamanda verdiğiniz ID değerlerini de takip etmeniz gerekiyor. Çünkü aynı ID değerine sahip birkaç kod bloğunun olması web sitenizde sorunlara yol açabilir. Genelde ID değerleri JavaScript ile birlikte kullanılabilmek için kod bloklarına eklenir. Bunun temel nedeni de bir kod bloğunun yapacağı işlemleri tekilleştirmektir. Tüm bu olumsuzluklara rağmen bazen ID bazlı görünüm ayarlamasının kullanışlı olduğu durumlar da olabilir.

CSS Class Kullanımı Web site görünümü özelleştirirken en çok kullanılan ve profesyonel tasarımcılar tarafından tercih edilen yöntem class yapısını kullanarak kod bloğuna erişmektir. En çok kullanılan Görünüm kütüphanelerinden olan Bootsrap ya da Foundation yapılarına da dikkat ederseniz  bu yapılarda da görünümü özelleştirmek için class’ların kullanıldığını görebilirsiniz. Classları kullanmak aynı zamanda yaptığınız özel görünümleri kütüphane halinde toplayarak birçok projede tekrar tekrar kullanmanıza yardımcı olur. Ayrıca class yapılarındaki bir çok class tanımlamasının aynı anda kullanılabilirliği avantajından dolayı, mümkün olduğunca tüm görünümleri ayrı ayrı parçalara bölmekte fayda var. Örneğin kalın görünümlü bir kod bloğu için bold-text diye bir tanımlama yapılabilir. Class yapılarını iyi öğrenmek aynı zamanda CSS konusunda kullanacağınız kütüphaneleri daha etkili kullanabilmek için de çok önemlidir. 

Bu makalemizde Front-End developer'lar tarafından en çok tercih edilen CSS kütüphanelerinden biri olan Bootsrapta collapse'nin nasıl kullanıldığı ve uygulandığını anlatacağım. Öncelikle belirtmem gereken önemli konulardan bir tanesi de collapse işlemini uygulamak için tek yöntem bootsrap collapse kullanmak değil. Ama uygulaması açısından ve en basit olanı budur. Kütüphane tarafından sağlanan yazılım formatı doğru uygulandığı sürece bu işlemi yapmak çok basittir. Collapse işlemini de kısaca açıklayacak olursak bir butona veya bir söze tıklandığında altına veya web sayfasının her hangi bir yerinde belirli bir şeyin aktif olması gibi anlayabilirsiniz.