Web Tasarımında En Çok Kullanılan Yazılım Dilleri
Yazılım Dili | Açıklama | Önemi/Ne İşe Yarar |
---|---|---|
HTML | Hiper Metin İşaretleme Dili | Web sitenin iskeletini yapar ve SEO uyumlu kodları oluşturur. |
CSS | Basamaklı Stil Şablonları | Renkler, boyut ve konumlandırmaları belirler. Web sayfasının dış görünüşünü kodlar. |
Bootstrap | Bootstrap hazır şablonları barındıran bir framework dilidir. | Web projesini responsive design (duyarlı tasarım) yapmamızı sağlar. |
Javascript | Web sitesini dinamik hale getiren bir dil | Slider ve animasyonları kodlar, fonksiyon çağrılarını yönetir. |
İçerik | Web sitesindeki bilgi ve görsel elementler | Tasarımı belirler ve kullanıcı deneyimini etkiler. |
SEO Uyumu | Web sitesinin arama motoru optimizasyonu | Google sıralamalarında sitenin üst sıralarda yer almasını sağlar. |
Renk Dengesi ve Okunabilirlik | Web sitesindeki renk uyumu ve yazılar | Kullanıcı deneyimini etkiler ve bilgi alışverişini kolaylaştırır. |
Ses ve Görseller | Web sitesindeki multimedya elementler | Kullanıcıların ilgisini çeker ve deneyimini artırır. |
İletişim ve Hakkımızda Bölümü | Web sitesindeki iletişim bilgileri ve firma hakkında bilgi | Kullanıcıların site ve firma hakkında bilgi alabilmesini sağlar. |
Sosyal Medya Butonları | Web sitesindeki sosyal medya linkleri | Kullanıcıların sitenin sosyal medya hesaplarına ulaşabilmesini sağlar. |
Web tasarımı, bir web sitesinin yazı tipini, renklerini hatta butonlarının konumuna kadar her şeyin oluşturmasıdır. Kısaca, gözümüzün gördüğü bütün görüntünün ilmek ilmek işlenmesidir.
Web tasarımıyla web geliştirme, birbirleriyle ilişkili olsalar bile farklı uzmanlıklar gerektirirler. Bunun sonucunda da tasarım ve geliştirme için farklı yazılım dilleri, farklı programlar kullanılır. Ayrıca Web tasarımı uzmanları front-end developer, web geliştirme uzmanları ise back-end developer ünvanlarını kullanırlar. Şimdi sizlerle front-end developerların en çok kullandığı yazılım dillerini inceleyelim; bunlar HTML, CSS, Bootstrap ve Javascript'dir.
Html Nedir? Ne İşe Yarar?
HTML'nin açılımı "Hiper Metin İşaretleme Dili"dir (Hypertext Markup Language). Öğrenmesi çok kolay basit bir dildir. Birçok kişi tarafından yazılım dili olarak görülmesede, bilişim dünyasına girişte ilk öğretilen dildir. Web sitesinin sadece iskeletini yani temeli oluşturmaktadır. Yine de html olmadan geliştirilen bir web projesi yoktur. Ayrıca web sayfamızı seo (search engine otimization) uyumlu şekline getireceğimiz kodları html ile kodlarız.
Css Nedir? Ne İşe Yarar?
Css'in açılımı "Basamaklı Stil Şablonları"dır (Cascading Style Sheets). Öğrenmesi html kadar olmasada oldukça basittir. Ayrıca kaynaklara ulaşımı da kolaydır. Kütüphaneleri oldukça gelişmiştir. Farklı boyutlarda ki cihazlar (Telefon, Tablet, Masaüstü pc.) için özel olarak değişiklik yapmamızı da sağlar. İskeletini oluşturduğumuz web projesinin renklerini, boyut ve konumlandırma işlemlerini tamamlamamıza yardımcı olur. Kısaca web sayfamızın dış görünüşünü kodlamamıza yardımcı olur.
Bootstrap Nedir? Ne İşe Yarar?
Bootstrap içerisinde hazır şablonları barındırır. Bunlar; tablolar, açılan menüler, etiketler, butonlar ve navigasyonlardır. Hazırladığımız web projesini kolay bir şekilde responsive design (duyarlı tasarım) şeklinde ayarlamamızı sağlayan açık kaynak kodlu frameworktür. Yani mobil, telefon, tablet ve her türlü ekran boyutuna uyumlu olarak projeler hazırlanabilir. İçerisinde barındırdığı grid yani ızgara sistemi sayesinde en çok tercih edilen frameworktür diyebiliriz. Css'e nazaran çok daha fazla gelişmiş ve büyük bir kütüphaneye sahiptir. Bootstrap bizi satırlarca kod yazmaktan kurtararak büyük kolaylık sağlar.
Javascript Nedir? Ne İşe Yarar?
Javascript web sitemizi dinamik hale getirmemize yardımcı olur. Sayfalarda ki hareketli bölümleri, slider ve animasyonları kodlayabiliriz. Başlangıç için javascript öğrenmeden de web sitesi kurulabilir. Fakat profesyonel işler için öğrenmenizde fayda var çünkü; web sayfalarının davranışlarını yönetmemizi sağlar. Herhangi bir butona basıldığında istenen fonksiyonları gerçekleştirmek için javascripte ihtiyaç duyarız. Diğer dillere nazaran öğrenmesi çok daha kolaydır.
Web Tasarımı İçin Dikkat Edilmesi Gerekenler
Öncelikle web sitesinin içeriği çok önemlidir. Tasarım içeriğe göre belirlenmelidir.
Seo ile uyumluluk; web sitesinin Google sıralamalarda üst sıralarda yer alabilmesi için seo (search engine optimization) ayarları yapılmalıdır.
Renk dengesi ve okunulabilirlik; web sitenizde ilgi çekici renkler kullanabilirsiniz. İçeriğin düzgün, anlaşabilir olması için font ve yazı tipini özenle seçmelisiniz.
Ses ve görseller; Web tarayıcıları her resim dosyasını çalıştıramayabiliyor, buna çözüm olarak web sitelerinde jpg, gif ve png uzantılı resim dosyaları kullanılır.
Video ve animasyonlar; Web tarayıcıları bazı video dosyalarını da çalıştıramayabiliyor, buna çözüm olarak ziyaretçilerin bazı eklentileri yüklemeleri gerekebilir. Bu durumda kullanıcıları uyarmalısınız. Ayrıca eğlenceli animasyonlar eklemeniz ziyaretçilerinizin akıllarında kalmanıza yardımcı olacaktır.
İletişim ve hakkımızda bölümü; web siteniniz hakkında sayfası mutlaka kodlanmalıdır. Seo açısından da hakkımızda sayfası çok önemlidir. İletişim sayfası da aynı şekilde hem ana sayfaya eklenmeli hem de ayrı bir sayfa da oluşturulmalıdır.
Sosyal medya butonları; Günümüz şartları hangi işi yaparsak yapalım sosyal medya ile iç içe olmak durumundayız. Dolayısıyla bir internet sitesinin olmaz olmazı sosyal medya butonlarıdır. Bu hususlar tasarım esnasında dikkate alınmalıdır.
İstanbul İşletme Enstitüsünde yazılarının yayınlanmasını isteyen konuk yazarlarımız için oluşturulan bilgi kartıdır. Birçok alanda ve disiplindeki yazıları bu hesap üzerinde bulabilirsiniz.