Konular

Eskiler

Category Archives: Front End

CSS Front End Javascript Jquery
Posted by No Comments

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…

10 Nisan 2017
Bootstrap CSS Front End
Posted by No Comments

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…

14 Mart 2017
Bootstrap CSS Front End
Posted by No Comments

Bootstrap Hazır Tema Kullanımları 1

Bootstrap Hazır Tema Kullanımları Bu yazımızda Bootstrap hazır tema kullanımları konusundan bahsedeceğiz. Aşağıdaki soruları yanıtlamaya çalışacağız. Temel olarak bir HTML sayfasının hangi bölümlerden oluşur? Bootstrap temalarının sitemizde nasıl kullanılması gerekir? İnceleyeceğimiz Şablonlar: Temel Web Sitesi Şablonu Blog Web Sitesi Şablonu Sosyal Web Sitesi Şablonu Portfolyo Web Sitesi Şablonu   Temel Web Sitesi Şablonu Bootstrap ve HTML kullanarak oluşturulan web sayfası HTML etiketleri içerisinde dört bölümden meydana gelir. HTML sayfası ise Head ve Body olmak üzere iki temel alandan meydana gelmiştir. 1.Head Meta tanımlamaları,script yapıları ve link atamaları bu kısımda yapılmaktadır. Temel bir HTML sayfasında bulunması gereken, önemli bir kısımdır. Bootstrap hazır tema kullanımları için kritik öneme sahip bir bölümdür. 2.Header ve Navigasyon Kısmı (Body İçerisinde) Menü ve logoları yer aldığı kısımdır. Navigasyon menüsü birden fazla sayfadan veya tek sayfadan oluşmuş web sitelerinde sıklıkla kullanılmaktadır. Bir sitenin kimliği sayılabilecek logolar da web tasarımda önemli bir yerdedir. Bu kısımların tanımlamaları ve tasarımları genel olarak…

8 Şubat 2017
Bootstrap CSS Front End HTML
Posted by No Comments

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

15 Aralık 2016
Canvas CSS Front End HTML
Posted by No Comments

Ş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…

14 Aralık 2016
Bootstrap CSS Front End
Posted by No Comments

BOOTSTRAP CSS Buton Sınıfları

BOOTSTRAP CSS YARARLI SINIFLAR II ( Buton Sınıfları ) Sitemizde daha önce bahsetmiş olduğumuz Bootstrap için yararlı sınıflarına Buton sınıfları ile devam ediyoruz. İsterseniz lafı fazla uzatmadan kaldığımız yerden devam edelim Bootstrap Buttons Sınıfları: Bu sınıflar; tahmin edeceğiniz gibi, tasarladığınız butonları responsive olarak stillemek için kullanılır. Sınıfların tek tek açıklamasını yapmak yerine direkt görselde paylaşacağım örnekle devam edelim. NOT : Eğer Bootstrap stil dosyalarını nerden bulacağınız diyorsanız ilk yazımız olan Bootstrap CSS Nedir? yazısını okumanızı tavsiye ederim. Buton büyüklüğünü için de Bootstrap da tanımlanmış özel sınıflar yer almaktadır. Kullanacağınız classları test etmek için ilk görselde verdiğim butonlarınızın class özelliğini değiştirmeniz yeterlidir. btn-lg : En büyük buton stilidir. btn-md: Orta büyüklükte olan buton stilidir. Normal bir PC için kodlanmış sınıftır. btn-sm: Küçük butonlar için kodlanmış bu buton stili akıllı telefonlar hesaba katılarak oluşturulmuştur. btn-xs : En küçük buton stilidir. Kullanılırken html etiketinde class özelliği kullanılmalıdır. Bir çok sınıfı aynı atama içerisinde kullanabiliriz.Birden…

7 Aralık 2016
Bootstrap CSS Front End
Posted by No Comments

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”…

5 Aralık 2016
Canvas Front End HTML
Posted by No Comments

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…

1 Aralık 2016
AngularJS Backend Javascript
Posted by One Comment

AngularJS Nedir? Temel Yapılar ve Fonksiyonlar

1. AngularJS Giriş Günümüz web teknolojilerinde yaygın olarak kullanılan Javascript, günümüz şartlarına ayak uymasını sağlayabilecek bazı web uygulama mimarilerine ihtiyaç duymaktadır ve bu ihtiyaçlar doğrultusunda AngularJS, tek sayfa üzerinde Model – View – Controller ( MVC ) yazılım mimarisine uyumlu olacak şekilde tasarlanmıştır. Google tarafından geliştirilmiş olıp açık kaynak kodlu bir web uygulama çatısıdır. (Bakınız : https://tr.wikipedia.org/wiki/) Model – View – Controller konusunda bilgi sahibi olmak isterseniz bu yazıdan da faydalanabilirsiniz : http://www.tolgasariyildiz.com.tr/blog/asp-net-mvc-framework/ Konu anlatımları ve teorik bilgilere internet üzerinden pek çok kaynaktan ulaşabilirsiniz. Yazımızda daha çok uygulamalar üzerinde durmayı planlıyorum. Tabiki yeri geldikçe teorik olarak açıklanması gereken yerlerde gerekli bilgilerin verileceğinden şüpheniz olmasın. Yararlanabileceğiniz Bazı Kaynaklar : Temel Düzeyde Öğrenmek İsteyenler İçin : http://www.w3schools.com/angular/ İleri Düzeyde Öğrenmek İsteyenler İçin : https://www.codecademy.com/ https://www.codeschool.com/courses/shaping-up-with-angular-js * Bu iki sitede kurslara girebilmeniz için üye olmanız gerekiyor. AngularJS öğrenmenize yardımcı olacak dokümanlara da bu bağlantıda yer alan ingilizce kaynaktan ulaşabilirsiniz. AngularJS uygulama çatısı web…

21 Kasım 2016
AngularJS Front End Javascript Jquery
Posted by No Comments

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>…

20 Kasım 2016
Bootstrap
Posted by No Comments

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…

20 Kasım 2016
Bootstrap CSS Front End
Posted by One Comment

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…

17 Kasım 2016