Konular

Eskiler

jQuery UI API – Front End Programlama

jQuery UI Nedir ? jQuery UI, jQuery javaScript kütüphanesi ile yazılmış, kullanıcı arayüzü bileşenleri , web sitesi efektleri ve form elemanları gibi web programlama unsurlarını içinde barındıran, oldukça sık kullanılan bir API yapısıdır. Ön yüz geliştiricisi birçok yazılımcı bu UI yapılarını kullanarak çeşitli işlemleri gerçekleştirmektedir. Form yapılarını ve bazı basit efektleri bu yapılar ile gerçekleştirmek oldukça pratiktir. Yazımızda Bulunan İçerikler  1- User Interface (Kullanıcı Arayüzü) Widget Unsurları Sortable Selectable Draggable Droppable Resizable 2- jQuery UI Widget Kullanımları Accordion Autocomplete Checkboxradio Controlgroup Datepicker Dialog Menu Progressbar Selectmenu Slider Spinner Tooltip 3- Bazı jQuery UI Efektleri Add Class Remove Class Switch Class Toggle Toggle Class Color Animation Effect Show Hide 4- Nereden ulaşabilirsiniz?  User Interface (Kullanıcı Arayüzü) Widget Unsurları Sortable: HTML sayfası içerisinde liste şeklinde tasarlanan ve liste elemanlarını fare yardımıyla sıralamanızı sağlayan javascript yapılarıdır. Selectable: Liste elemanlarını tek tek veya grup olarak seçme imkanı sunan kullanıcı arayüzü bileşenlerindendir. Draggable: HTML etiketlerini fare yardımıyla hareket ettirebilmemizi sağlayan Jquery…

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…

Şekil ve Resim – HTML CANVAS

Şekil ve Resim – HTML CANVAS Geometrik Şekil Oluşturma HTML Canvas kullanarak temel geometrik şekiller oluşturmak son derece kolaydır. HTML dilinin temellerini iyi bilen bir web tasarımcısı kolaylıkla canvas özelliklerini kullanabilir. Bu yazımıza temel geometrik şekillerin çizimlerinden bahsederek başlıyoruz. NOT : Yazımız yapılması gereken işlemlerden teorik olarak bahsetmektedir. Vereceğimiz bağlantılar ile örnek uygulamalarımıza ulaşabilirsiniz. Daire Daire çizimi için kullanacağımız js metodu arc() olacaktır. Bu metod daha önceki yazımızda eğimli çizgi oluşturabilmek için gerekli olduğundan bahsetmiştik. Daire oluştururken x ve y koordinatlarını belirleyen iki değişken ile radius özelliklerinden faydalanmamız gerekmektedir. Örnek uygulamamız için bu linkten faydalanabilirsiniz : Linke ulaşmak için tıklayınız… Dikdörtgen Dikdörtgen çizimi için ise kullanacağımız temel metod rect() olacaktır. Böylece dört çizgiden oluşan dikdörtgen şeklinde bir geometrik çizimi html sayfamızda çizdirmiş olacağız. Genişliği belirlemek için width özelliğini ve boyutlarımızı belirlemek için ise x ve y koordinat değerlerini kullanacağız. Örnek uygulamamız için bu linkten faydalanabilirsiniz : Linke ulaşmak için tıklayınız… Yarım Daire Daire…

Bootstrap Css Kullanışlı Sınıflar

Bootstrap Css Kullanışlı Sınıflar Bootstrap Css barındırdığı sınıflar açısından oldukça kullanışlı bir web teknolojisidir. Css konularına başka bir boyut kazandıran Bootstrap teknolojisi bir çok önde gelen web sitesi ve sosyal medya platformlarında kullanılmaktadır. ( Twitter bootstrap kullanılan en önemli sitedir. Yabancı ve yerli bir çok sitenin kullandığı bilinmektedir. ) Bizim asıl bahsedeceğimiz konu bu kullanışlı sınıflar nelerdir ve nasıl kullanılırlar ? Dilerseniz ilk konumuz ile başlayalım… BS Wells Tanımlandığı elemana gri ve yuvarlak  köşeli bir arkaplan verir. Hazır bir span etiket sınıfı gibi düşünebilir ve güzel bir tasarım için gerekli olabilir. BS Sınıflar – Tables TABLE sınıfı: Normal bir tablo eklemek için kullanılan yararlı bir CSS sınıfıdır. HTML tablosuna benzemekle beraber responsive olarak tablo oluşturmaya yarar.Örnek kullanım aşağıdadır. TABLE-STRIPED: Eğer tablomuzun bir siyah bir beyaz arkaplana sahip şekilde verilerden oluşmasını istiyorsak bu sınıfı kullanabiliriz. Daha iyi anlamanız için aşağıda paylaşacağım görselden faydalanabilirsiniz. Bu tabloyu oluşturmak için yukarıdaki kodda yer alan “class=table”…

Metotlar ve Fonksiyonlar Jquery AngularJS

ANGULARJS FONKSİYON – METOT KULLANIMI Fonksiyonların  tanımlandığı ve metot tanımlamalarının yapıldığı kısım, AngularJS MVC (Model-View-Controller) yapısının controller tarafıdır. View ve Model yapıları arasındaki bağlantı ile işlevselliğin sağlandığı kısımda gerekli fonksiyon-metot tanımlamaları yapılmaktadır. Örnek bir angular fonksiyonunu aşağıda yer alan kısımda görmektesiniz. angular.copy () fonksiyonunun kullanıldığı basit bir angularJS uygulaması aşağıda yer almaktadır… <!doctype html> <html lang="tr"> <head> <meta charset="utf-8"> <title>addClass copy demo </title> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> </head> <body> <div ng-controller="ExampleController"> <form novalidate class="simple-form"> İsim: <input type="text" ng-model="user.name" /><br /> E-mail: <input type="email" ng-model="user.email" /><br /> Cisnsiyet: <input type="radio" ng-model="user.gender" value="male" />erkek <input type="radio" ng-model="user.gender" value="female" />kadın<br /> <button ng-click="reset()">SIFIRLA</button> <button ng-click="update(user)">KAYDET</button> </form> <pre>form = {{user | json}}</pre> <pre>master = {{master | json}}</pre> </div> <script> angular.module('copyExample', []) .controller('ExampleController', ['$scope', function($scope) { $scope.master= {}; $scope.update = function(user) { // Example with 1 argument $scope.master= angular.copy(user); }; $scope.reset = function() { // Example with 2 arguments angular.copy($scope.master, $scope.user); }; $scope.reset(); }]); </script> </body> </html>…

Hafıza Oyunu Uygulaması

AngularJS Uygulamamız Hakkında Bilgiler AngularJS Uygulama Linki: http://www.tolgasariyildiz.com.tr/angularjs-match-master Bu yazımızda AngularJS ve bootstrap kullanarak basit bir eşini bulma oyunu tasarlayacağız. Bildiğiniz gibi bu oyunda seçtiğiniz bir karakterin bir eşini diğer boş karelere tıklayarak bulmaya çalışıyoruz. Hangi oyundan bahsediyorsun tarzında sorularınız devam ediyorsa yazıyı okudukça anlayacağınızdan şüpheniz olmasın Projemiz için gerekli olan Bootstrap ve Javascript( AngularJS – JQuery ) kütüphanelerine aşağıda vermiş üç linkten ulaşabilirsiniz : AngularJS için gerekli dosyalar : https://code.angularjs.org/1.2.9/ //Bağlantıda yer alan .zip uzantılı dosyayı indirmeniz yeterlidir. Bootstrap için gerekli dosyalar https://github.com/twbs/bootstrap/releases/download/v3.3.5/bootstrap-3.3.5-dist.zip //Bağlantıda yer alan .zip uzantılı dosyayı indirmeniz yeterlidir. Jquery için gerekli dosyalar : https://code.jquery.com/jquery-1.11.0.min.js //Bağlantıda yer alan .js uzantılı dosyayı sağ tıklayıp gerekli yere farklı kaydet demeniz yeterlidir. Angular-ui için gerekli dosya : https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.js yolunda bulunan dosyayı sağ tıklayıp gerekli yere farklı kaydet demeniz gerekir. Gerekli yeri yazıda açıkça belirttik sadece adımları doğru izlemeniz yeterlidir. Projemiz için gereken üç adet klasör ve anasayfamız olan index.html dosyasını tanımladıktan sonra yukarıda…

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…