Konular

Eskiler

Posts by Ahmet Tolga Sarıyıldız

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…

Sosyal Ağ Platformlarına 5 Alternatif

BEŞ ALTERNATİF SOSYAL AĞ Hayatın vazgeçilmez unsurları haline gelen ve yolda yürüyen yaşlı amcadan 5 6 yaşındaki çocuklara kadar herkesin kullandığı sosyal ağ platformları arasında kullanıcılar farklı içerikte sosyal içerikleri arar duruma geldiler. Bu yazımızda en çok bilinen sosyal medya ağları olan Facebook, Twitter , Instagram gibi sitelere alteratif olabilecek yeni nesil sosyal ağların öne çıkan beş tanesinden bahsedeceğiz. 1. Path : Mobil bir uygulama olarak piyasada yerini alan fotoğraf paylaşım ve mesajlaşma gibi standart sosyal aktiviteleri destekleyen yeni nesil sosyal ağdır.  Sizleri sıkmamak adına tarihinden ve ya hangi dillerle yazıldığı gibi teknik konulardan bahsetmeyip direkt genel özelliklerinden maddeler halinde bahsetmek istiyorum 1. Yakın çevreniz ve aileniz arasında kullanabileceğiniz Path arkadaş sayınızı 150 kişi olarak sınırlamakta bu da diğer sosyal ağlara göre daha özel bir konuma gelmesinde etkili olan faktörlerden biri olmaktadır. 2. Facebook tarzı profil akış sayfası olan Path üzerinden video,müzik ve fotoğraf paylaşımı yapabilir , aynen Facebook’ da…

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

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…

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…

ASP.NET MVC Framework

[vc_empty_space height="200px"] Asp.Net MVC Framework ASP.Net istemci-sunucu mimarisi konusunda ve üç katmanlı mimari konusunda geliştiricilere tam kontrol sağlayan bir web programlam dilidir. Son zamanlarda gelişen MVC Framework yapısı ile web geliştiriciler model – kontrol- görünüm yapısıyla tanışmıştır. Bu yapı ile web sitesi üzerinde daha esnek yapıda kodlama ve tasarım gerçekleştirilmiştir. MODEL MVC Framework içinde yer alan Model yapısı ile veritabanları oluşturulabilmekte, data yapılarına ulaşabilmektedir. Modeller kullanarak web servisler oluşturularak, bunların kullanımı farklı bir dosya yapısında kullanılarak geliştiricileri kod karmaşasından kurtarmıştır. Küçük boyuttaki verileri tutmak için ayrı bir SQL veritabanı oluşturmadan model yapısıyla veriler oluşturularak hem sitenin hızı konusunda hem de SEO (Search Engine Optimization) dostu siteler yapma açısından büyük bir aşama kaydedilebilmektedir. VIEW İlk olarak bir _Layout oluşturularak sitenin genel şablonu belirlenerek daha önce master page olarak bildiğimiz bir html oluşturulur ve bu html’e ayrı bir klasörde tutulan (genelde bu klasörün adı content ->css) stil dosyaları kullanırak (style.css, normalize.css, bootstrap.css…

Yakın gelecekte beklenen 10 teknoloji

 2015 ve Sonrasında Beklenen 10 Önemli Teknoloji Bildiğiniz üzere çağımız teknoloji nin doruk noktasında seyrettiği bir çağ olarak nitelendirilmektedir. Artık yeme-içme kadar hayatımızın bir parçası haline gelmiş teknolojik oyuncaklar durduralamayacak bir şekilde gelişmektedir. Yazımızda değineceğimiz konu da yakın gelecekte beklenen , bilim – kurgu filmlerinden fırlamış gibi gözükse de yapılabilirliği bulunan muhtemel teknolojilerdir. 10. Google Glass: Çıkışı yılan hikayesine dönen Google Glass teknolojisini listeye alıp almamakta çok düşündüm fakat çıkabilme ihtimali şuan bile bulunuyor. Bu teknoloji sayesinde sanal gerçeklik uygulamaları hayatın içine dahil olabilecek. Ayrıca gördüğünüz kişinin sosyal medya içerisindeki profil bilgilerini görebileceğiniz, istediğiniz anda yüksek kalitede fotoğraf çekip video kaydebileceğiniz bu teknolojiler, gelecekte yaygın bir şekilde kullanılabilirler. Ses ile kontrol edebileceğimiz bu teknoloji içerisinde ışık ve hareket sensörü, pusula gibi öğeleri içermekte ve istediğiniz her an Wifi bağlantısı ile internete bağlanabilmektedir. Gooogle tarafından geliştirilmekte olan ve şuan bile bir araştırma projesi olarak devam eden bir teknolojidir. 9. Holografik Telefonlar:…

1 2