Konular

Eskiler

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

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…

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…