Html5 canvas javascript frameworkler. Html5 canvas ile şekil çizme, maskeleme, koordinatlar vs. gibi yazıları daha önce yazmıştım. Daha da ilerisine gidip sürükle bırak uygulamalar, animasyonlar, oyunlar yapmak istiyorsanız html5 canvas-js üçlüsü sizi biraz zorlayabilir. Bu etapta işinizi kolaylaştırmak için yazılmış hazır frameworkler var. Kineticjs, fabricjs, paperjs, createjs bunlardan bazıları. Kineticjsi daha önce uygulamalarımda kullandım ama şu an kineticjse destek veren
Html5 canvas ile bir resim çağırarak o resme dairesel bir maske uygulayacağız. öncelikle canvasımızı yazalım.
html5 canvas içerisinde kullandığımız restore ve save komutları o anki durumu kaydetmek ve çağırmak için kullanılır. Bir örnekle açıklayayım.
Html5 canvas kullanımı Canvas html5 ile gelen yeni bir etikettir. Canvas ortamı üzerinde çizimler yapabilir, resimler ekleyebilir, animasyonlar oluşturabilir, hatta oyunlar hazırlayabilirsiniz. Kullanımı <canvas id=”canvasim” width=”500″ height=”500″ style=”border:1px solid #000″> Tarayıcınız canvası desteklememektedir. </canvas> Şeklindedir. Tarayıcı canvası desteklemiyorsa etiket arasındaki yazı gözükecektir. Html kodlarıyla canvas etiketini ekledik. Canvasa müdahale etmek, çizimler yapmak için javascripti kullanmamız gerekiyor. <script type=”text/javascript”> var c=document.getElementById(“canvasim”);
Web sitenizde mobil ve masaüstü için iki ayrı tasarım yaptıysanız mobil tarayıcı kontrolünü javascriptte navigotor.useragent fonksiyonu ile yapabilirsiniz. navigator.useragent bize tarayıcı bilgisini vermektedir. Örneğin bir x değişkenine bu değeri aktaralım. var x = “User-agent bilgisi: “ + navigator.userAgent; Bunu yazdırmaya kalktığımızda User-agent bilgisi: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/38.0.2125.111 Safari/537.36 gibi bir sonuçla karşılaşırız. Buradaki bilgiyi
Css frameworkler ile web sitelerini biçimlendirmek, modern, responsive nesneler kullanmak çok kolay. Bu kütüphanelerde hazır, tasarlanmış nesnelerini kullanabileceğiniz gibi istediğiniz değişiklikleri de yapabiliyorsunuz. Tasarımda düzen, görsellik, kolaylık, hız kazandıran bu frameworklere biraz örnek verelim. 1- Bootstrap En popüler css frameworklerden biri olan bootstrapın sitesine ulaşmak için tıklayınız. Componentlerin görünümüne bakmak için de şu linke tıklayabilirsiniz. 2- Foundation Bootstrap gibi popüler olan html5 css frameworklerden biri
Web developerlar genelde tasarım kısmından uzak durmak isterler. Yapacağı projeler için kolayca kullanabilecei 6 hazır responsive tasarımı sizlere sunuyoruz. 1- Telephasic 2- Agency 3- Striped 4- Madison 5- Liquid Gem 6- verflow iyi günlerde kullanın.
<BODY> HTML belgesinin gözüken içeriği burada yer alır. Buraya metinler, resimler, listeler vb.her türlü HTML nesnesi yerleştirilebilir. Kullanılacak parametreler Görevi Bgcolor : Arka plan rengini belirler. Background : Arka planda kullanılmak istenen resmi belirler.
<head> ile </head> tagleri arasına eklenip sayfa bilgilerini içeren etiketler meta etiketleridir. Meta içerisinde name(isim), http-equiv, content(içerik) gibi parametreler kullanılabilir. <meta name=”author” content=”Arif CEYLAN”> Sayfayı kimin tasarladığının bilgisini tutan koddur. <meta name=”Description” content=”Sayfanızın kısa tanıtımı”> Sayfanın kısa tanıtımının bulunduğu bölüm. Gelen arama terimleri:<html> <head> <meta name=robots content=noarchive
Html etiket (tag)lerden oluşmaktadır. Her bir etiket küçük işareti (<) ile büyük işareti (>) arasına yazılmaktadır. Örnek: <b> , <html> <i> html etiketlerinin çoğu etiketin etkileyeceği bölüm bittikten sonra kapatılmaktadır. Kapatılması için küçük işaretinden sonra / kullanılmaktadır. Örnek: </html>, </b>