AnasayfaBlogWeb Tasarımında En Çok Kullanılan Yazılım Dilleri
Nedir?

Web Tasarımında En Çok Kullanılan Yazılım Dilleri

27 Aralık 2020
Bir masanın yakın çekiminde bir bilgisayar ve tablet görülüyor. Yüzeyde beyaz bir klavye durmakta ve yakınlarda beyaz bir saksı içinde bir bitki durmaktadır. Bilgisayar ekranında bir su kütlesinin resmi vardır. Yanında bir deniz feneri resmi bulunan bir cep telefonu. Beyaz bir saksıdaki bitkinin yakın çekimi sağda ve kapaklı siyah bir fincan daha uzakta. Sağ altta içinde beyaz bir dikdörtgen olan mavi bir daire. En üstte telefonun yakın çekimi görülüyor. Görüntü, masaüstü ortamını çeşitli unsurlarıyla birlikte bütünüyle yakalıyor.
Yazılım DiliAçıklamaÖnemi/Ne İşe Yarar
HTMLHiper Metin İşaretleme DiliWeb sitenin iskeletini yapar ve SEO uyumlu kodları oluşturur.
CSSBasamaklı Stil ŞablonlarıRenkler, boyut ve konumlandırmaları belirler. Web sayfasının dış görünüşünü kodlar.
BootstrapBootstrap hazır şablonları barındıran bir framework dilidir.Web projesini responsive design (duyarlı tasarım) yapmamızı sağlar.
JavascriptWeb sitesini dinamik hale getiren bir dilSlider ve animasyonları kodlar, fonksiyon çağrılarını yönetir.
İçerikWeb sitesindeki bilgi ve görsel elementlerTasarımı belirler ve kullanıcı deneyimini etkiler.
SEO UyumuWeb sitesinin arama motoru optimizasyonuGoogle sıralamalarında sitenin üst sıralarda yer almasını sağlar.
Renk Dengesi ve OkunabilirlikWeb sitesindeki renk uyumu ve yazılarKullanıcı deneyimini etkiler ve bilgi alışverişini kolaylaştırır.
Ses ve GörsellerWeb sitesindeki multimedya elementlerKullanı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 bilgiKullanıcıların site ve firma hakkında bilgi alabilmesini sağlar.
Sosyal Medya ButonlarıWeb sitesindeki sosyal medya linkleriKullanı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. 

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 web tasarımı yazılım dilleri html5 Javascript web tasarımında kullanılan yazılım dilleri Bootstrap
Bu resimde ikisi de gözlük takan bir erkek ve kadın görülüyor. Adam mavi bir gömlek ve siyah bir pantolon giyerken, kadın beyaz bir gömlek ve mavi bir kot pantolon giymektedir. Her ikisinin de gözlükleri takılı ve dümdüz ileriye bakıyorlar. Adamın kolu kadının beline dolanmış ve yüzleri birbirine yakın göründüğü için birlikte bir anı paylaşıyor gibi görünüyorlar. Arka plan yumuşak, kirli beyaz bir renktedir. Işık hafif loş, görüntüye yumuşak ve sıcak bir his veriyor. Gözlüklerine rağmen, gözleri hala bir duygu belirtisi gösteriyor. Birbirlerinin varlığından memnun ve mutlu görünüyorlar.
Konuk Yazar
Blog Yazarı

İ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.

Benzer Yazılar
Doğru ve faydalı bilgiler sağlama konusunda kararlı olan uzman ekibimizle blogumuzu her zaman yeni makaleler ve videolarla güncelliyoruz. Güvenilir tavsiyeler ve bilgilendirici içerikler arıyorsanız, blog sayfamıza mutlaka göz atın.
Bu görsel çevrimiçi bir Python kursuna ait. Kollarını kavuşturmuş, kendine güven ve kararlılık sergileyen bir adam görülüyor. Yüzünün yakın çekimi, odaklanmasını ve öğrenmeye olan bağlılığını ortaya koyuyor. Bir saatin yakın çekimi zaman yönetiminin önemini vurguluyor. Siyah arka plana karşı beyaz harfler, kursun profesyonelliği ve adanmışlığı hakkında bir fikir veriyor. Kıllı kolun yakın çekimi, gerekli olacak sıkı çalışmayı ve çabayı sembolize ediyor. Siyah takım elbiseli adam otorite ve güvenilirlik havası veriyor. Tüm bu unsurlar bir araya gelerek bu kursu olağanüstü bir çevrimiçi Python kursu haline getiriyor. Öğrenciye başarılı olması için gereken bilgi ve becerileri sağlayacağından emin olabilirsiniz.
4.9
(65)

Python Eğitimi

10 Konu5 Saat
Bu görsel, arka planda bir bilgisayar kodu ile bir kadın yüzünü tasvir etmektedir. Bu, kodlamanın temellerinin öğretildiği temel programlamaya giriş niteliğindedir. Kodlama kavramlarını anlamak için kişinin temelleri net bir şekilde anlaması gerekir. Bu ders sayesinde öğrenciler programlama dilinin temellerini ve çeşitli görevler için nasıl kod yazacaklarını öğrenirler. Kodlama görevlerini nasıl daha küçük parçalara ayıracakları ve kodlamanın sözdizimini nasıl anlayacakları konusunda fikir edineceklerdir. Kurs boyunca öğrenciler, yazılım oluşturmak ve geliştirmek için araçları ve kodlama dillerini nasıl kullanacaklarını öğreneceklerdir. Ayrıca hata ayıklama tekniklerini anlayacak ve programlarını nasıl test edeceklerini ve hata ayıklayacaklarını öğreneceklerdir. Dersin sonunda öğrenciler verimli ve iyi yapılandırılmış kod yazabilecek bilgi ve beceriye sahip olacaklardır.
4.9
(58)

Temel Programlamaya Giriş

7 Konu4 Saat
Bu görüntü, içinde bir insan olan siyah bir daireden oluşuyor. Kişi kollarını iki yana açmış, kameraya dönük bir şekilde durmaktadır. Kişi beyaz bir gömlek ve mavi bir kot pantolon giymektedir. Arka plan gri tonda. Kişinin açık kahverengi gözleri ve kısa siyah saçları var. Daire pürüzsüz, kavisli bir dokuya ve parlak bir yüzeye sahip. Kişi kendinden emin ve güçlü görünüyor. Çemberin ortasında dururken kararlı bir ifadesi var. Resmin atmosferi davetkâr ve sıcak.Ders Eğitmeni
1254464
Resimde muhtemelen bir CV görüşmesine hazırlanan takım elbiseli bir adam görülüyor. Gözlüklü, sakallı ve düğmeli gömleğiyle kendinden emin ve iyi giyimli görünüyor. Arka planda metal bir kutunun yakın çekimi, bir saat ve bir kol görülebiliyor. Bu görüntü, bir CV görüşmesine nasıl hazırlanılması gerektiğine dair mükemmel bir örnektir.
4.6
(50)

CV Hazırlama Eğitimi

6 Konu3 Saat