Konular

Eskiler

Bootstrap Hazır Tema Kullanımları 2

Bootstrap Site Temaları İnceleyeceğimiz Şablonlar: E-Ticaret Web Sitesi Şablonu 1 Mağaza Web Sitesi Şablonu Mağaza Web Sitesi Şablonu 2 Analiz Web Sitesi Şablonu Nereden ulaşabilirsiniz ? Son E-Ticaret Web Sitesi Şablonu Bootstrap E-Ticaret sitelerinde sunduğu avantajlar sayesinde sıklıkla kullanılmaktadır. Sütun ve satır mantığının sağladığı kolaylıkların yanında ( Bootstrap Grid Yapısı ) ürünlerin listelenmesi, butonların yerleşimi gibi konularda da kolaylık sağlamaktadır. Ayrıca web sitesi geliştiricilere Sidebar yerleşimi konusunda da pratiklik kazandırmaktadır. İçerikler kısmı istenilen şekilde üç, dört hatta altı eşit sütuna bölünebilir. Ürünlerin ve butonların durumuna göre çeşitli şekillerde tasarımlar geliştirilebilir. Aşağıdaki bağlantıda E-Ticaret  sitesinde kullanılabilecek örnek bir web sitesi şablonuna ulaşabilirsiniz. Uygulamaya bu bağlantıdan ulaşabilirsiniz.   Mağaza Web Sitesi Şablonu Kurumsal firmaların web sitelerinde kullanılabilecek bu Bootstrap şablonu, temel olarak basit bir grid yapısıyla tasarlanmıştır. Bu şablonu kullanan web siteleri diğerlerinden farklı olarak genellikle slayt kısmı içermektedir. Bu şablonda içerik kısımları genellikle üç sütuna ayrılarak tasarlanmaktadır. Header kısmında bir navigasyon menüsü, onun…

HTML Nedir ? – HTML5 ve CSS – JS ile Uyumu

HTML5 ve CSS – JS ile Uyumu HTML5 temel web teknolojilerinin başında gelen, web üzerinde statik sayfaları oluşturmak için geliştirilmiş yüksek metin işaretleyici dil olarak adlandırılan bir işaretleme dilidir. Çoğu bilişim otoritesi için HTML dili bir programlama dili değil XML gibi bir işaretleme dilidir çünkü tek başına server taraflı ya da kod arkası olarak işlev yapmaz. ÖNEMLİ NOT: Web Teknojileri her geçen gün kendini geliştirmekte ve kullanıcılara spesifik deneyimler kazandırmayı amaçlamaktadır.Bir web sitesinin görünümü tasarlanırken ilk olarak temel bir HTML yapısı tanımlanarak , kullanıcıya sunmaya çalıştığımız hizmet ne ise ona göre bir tasarım planı çıkartılması gerekir. Örneğin üst düzey bir e-ticaret web sitesi oluşturduğumuzu düşünürsek şüphesiz bir web sitesi dinamik bir şekilde olacak ve server tarafında çalışacak olan bir programlama dili kullanılması gerekecektir. Hiç şüphesiz bu dillerin en popülerleri ASP.Net ve PHP dir. HTML yapısı oluşturulurken etiket yapıları kullanılır ve bunlara bazı özellikler (attribitues) atayarak çeşitli ayarlamalar ve sınıflamalar yapabilirsiniz.…

HTML Canvas Nedir? Nasıl Kullanılır?

HTML Canvas Nedir ? HTML sayfası üzerinde istediğiniz bir şekilde çizim yapmaya ve bu çizimleri kullanarak dinamik bir görünüm sağlamaya yarayan bir HTML etiketidir. Canvas ile Javascript’den de faydalanarak çeşitli oyunlar kodlanabilmekte ya da çeşitli animasyonların gerektiği HTML sayfalarının tasarımları da gerçekleştirilebilmektedir. Daha iyi anlamanız adına teknik detaylar yerine günlük dile daha yakın bir anlatımı sizler için uygun gördüm.Canvas tasarımları 2D (iki boyutlu) veya 3D (özellikle oyun tasarımlarında) şekilde oluşturulabilmektedir. HTML5 teknolojisinin sağladığı en önemli özelliklerden biri hiç şüphesiz “canvas” etiketinin ortaya çıkmasıdır. Temel Şekiller Çizgi (Line) Web sayfası üzerine bir çizgi çizebilmesini sağlayan bir özelliktir. Çizilecek çizginin kalınlığı,uzunluğu,eğimi,rengi gibi bir çok özelliği yapacağınız tanımlamalar ile belirleyebilirsiniz. Temel bazı fonksiyonları kullanarak çizgi özelliklerini belirleriz.İşte bunlardan bazıları : 1.lineTo(): Çizgi eğimini belirlemek için kullanılır. Çizginin eğik yada düz olmasını bu özellik sayesinde ayarlayabiliriz. 2.beginPath(): Çizim yapılmaya başlandığığını deklara eden canvas metodudur. Bu metot line(çizgi) oluşturmak için her zaman gereklidir. 3.stroke(): Çizimin…

Bootstrap Navigasyon – Animasyon

BS Navigasyon ve Animasyon Bu yazımızda Bootstrap CSS kullanılarak web sayfamız üzerinde çeşitli navbar sınıflarını kullanmak ve sayfamıza dinamik anlamda renk katacak animasyonları uygulamak adına gerekli olan temel sınıflardan bahsedeceğiz. Bu iki konu birbiriyleriyle bağlantılı olduğu için ikisini bir arada ele aldık. Yararlandığım kaynak genelde w3School sitesi ile kendim edindiğim deneyimlerim olacaktır. BOOTSTRAP TEMEL NAVİGASYON SINIFLARI 1. Bootstrap Navbar Sayfamızın en üstünde navigasyon için gerekli olan menuler için hazırlanmış bu sınıfımız sayesinde tasarımı gayet şık olan ana menuler oluşturabiliriz. Örnek kodumuz için kendindene sitemizden faydalanabilirsiniz. Bu sınıf tanımlamalarını kullanarak hiçbir css kodlaması yapmadan pratik olarak güzel bir tasarım elde edebiliriz. Bootstrap bu açıdan  web tasarımcıları için gerçekten büyük kolaylık sağlıyor. Navbar-Inverse : Bu sınıfı kullanarak arkaplanı siyah ve menu öğesini tıkladığınızda öğenin arkaplanı gri olacak şekilde bir tasarım söz konusudur. Uygulamak için yukarıda vermiş olduğum kodda default olan sınıf tanımlamasını içerisinde “default” yerine “inverse” yazmanız yeterlidir. Navbar-Fixed-Bottom : Sınıfı kullanarak menumuzu…

Bootstrap Nedir – Nasıl Kullanılır ?

[vc_empty_space height="200px"] Bootstrap Nedir - Nasıl Kullanılır ? Yazımızda " Bootstrap Nedir ? " sorusuna cevap aramakla başlayacağız. Artık yeni sayılmayacak bir CSS teknolojisi olan Bootstrap CSS, tasarım konusunda web tasarımcıların olmazsa olmazlar arasına girmiştir. Dilerseniz ilk olarak Bootstrap CSS dosyalarını nerden bulabileceğinizden bahsedelim. Aşağıda vereceğim linkten faydalanarak dosyayı indirebilir eğer bir web sitesi tasarlıyorsanız dosyayı kök dizininize ftp yoluyla ya da eğer host sağlayan bir paketten faydalanıyorsanız Host şirketinin size sağlamış olduğu yöntemleri kullanarak yükleyebilirsiniz. (Bu konulardan da gelecek yazılarımızda bahsedeceğiz. Takipte kalın) Bootstrap genel olarak web geliştiricilerin yavaş yavaş aşina olmaya başladığı Grid sistemini kullanmaktadır. Bu sistemde sayfa bölümlendirmeleri col – md-1, col md-4 vb. gibi tanımlanan sınıfların sonuna eklenen sayılarla belirlenir. Bu css kodunu oluşturan yazılımcıların belli bir hesaplaması sonrasında tespit edilmiştir. GRID SINIFLARININ TANIMLAMALARI col-xs-? (Akıll telefonlar için) col-sm-? (Tabletler için) c0l-md-? (Masaüstü PCler için) c0l-lg-? (Laptoplar için)   BS JUMBOTRON BOOTSTRAP tarafından biz web tasarımcılar…