Bu gün size size ait bir websitenizi görsele çevirmeyi anlatacağım.Bunun için kullanacağımız eklenti html2canvas.Bu eklentiyi dahil ettiğimiz sayfanın tüm html+css yapısını...
Bir projem için oluşturduğum Türkiye'nin bazı ilçelerinin svg haritalarını paylaşmak istedim.Toplamda 10 adet ilçenin svg hali bulunmakta.Bunlar Adana-Ankara-Antalya...
Bu dersimiz de html5 ile yağmur efekti vermeyi göreceğiz.Bunun için [renk=!d12c69!] rainyday.js[/renk] yi kullanacağız.Yağmur efektini Seçtiğimiz bir resimin üzerine uyguluyoruz.Örneği incelerseniz...
Bir projem için interaktif bir Türkiye haritası lazımdı.Biraz arayınca bunu buldum.Plugini optimize ederek en sade ve hızlı haline getirdim.Başkalarının da işine yarar diye paylaşmak ve kullanımını anlatayım dedim...
HTML5 canvas derslerimize devam ediyoruz.Bu derste fillText ile ekrana bastığımız metnin genişliğini bulmayı göreceğiz.Bunun için kullanacağımız komut measureText.MeasureText tuvalde belirlediğimiz font tipi,büyüklüğünü vs...
Html5 svg serimize devam ediyoruz.Bu derste text tagını anlatacağım.Text tagı ile svg içine metin bastırabiliriz.Uzatmadan parametrelerine geçeyim...
Html5 svg derslerimize devam ediyoruz.Bu derste polyline tagını işleyeceğiz.Polyline,polygon tagından çok farklı değildir.İşleyişi aynı ama polyline tek farkı sadece kesişen yerlerin içini değil istediğimiz zaman içini boyaya bilmemiz.Parametrelerine göz atalım...
Html5 svg derslerimize deavm ediyoruz.Bu derste svg de çizgi çizderme komutu olan lineyi işleyeceğiz.İlk derste gördüğümüz polygona biraz benziyor line.Ama polygondaki çizgiler kesişince bir polygon oluşuyordu.Ama linede...
Html5 svg derslerimize devam ediyoruz.Bu derste elips çizmemizi sağlan ellipse tagını işleyeceğiz.Geçen derste işlediğimiz daire gibi ama bunda dikey ve yatay yarı çapları kendimiz değiştiriyoruz.Daire olduğu gibi...
Html5 svg derslerimize devam ediyoruz.Bu derste daire çizdirmeyi göreceğiz.Bunun için kullancağımız tag circle .Daireyi çizerken belirttiğim konum...
Öncelikle svg den az bahsedeyim.Svg açılımı " [renk=!d12c69!] Scalable Vector Graphics[/renk] " Türkçesi ölçeklenebilir vektör grafikleri.Svg canvas gibi...
Html5 derslerimize devam ediyoruz.Bu derste sayfalara geri dön butonu yada ileri butonu koymayı nasıl yapacağımızı anlatacağım.Bu tür butonlar normal sitelerde çok işe yaramasalar bile mobil sitelerimizde çok işe yarayan özelliklerdir.Hemen komutları inceleyelim...
Html5 serimize devam ediyoruz.Bu derste clip() methodunu anlatacağım.Clip kırpma anlamındadır.Canvasta ise yazıldığı yerde altaki tüm objeleri yukardakinin içine sokmasıdır.Yani yukarıdaki objeden taşan kısımları gizler.
Html5 eğitimimize devam ediyoruz.Bu derste save() ve restore() methodlarını işleyeceğiz.Save ve restore kayıt et yükle işlemini yapıyor.Kayıt ettikleri şey ise canvasın o anki durumu.Şöyleki canvastaki komutların çoğu alt objeleri de etkiler...
Html5 derslerimize devam ediyoruz.Bu derste datalist tagını anlatacağım.Datalist oluşturduğumuz inputlara veritabanı niteliğinde select tagı gibi açılan veriler atar.Örneği incelediğinizde daha iyi anlarsınız...
Html5 canvas dersleri çok fazla olduğu için normal tag anlatımlarına baya ara vermiştim.Canvas hemen hemen bittiği için normal taglara devam ediyoruz.Bu derste time etiketinin kullanımını anlatacağım.Time etiketi işlev...
Html5 serimize devam ediyoruz.Bu derste mouse koordinatlarını almayı göreceğiz.Koordinatları şu şekilde alacağız.Canvasta mouse hareket etttiğinde mousenin sayfadaki konumunu alıp canvasın sayfadaki konumunda çıkardığımızda mousenin canvas üzerindeki koordinatını bulmuş oluruz...
Html5 derslerimize devam ediyoruz.Bu derste event yani olay yakalayıcı olan addEventListener fonksiyonunu işliyeceğiz.Öncelikle ne tür olayları yakalıyor ona bakalım.Mouse hareket,tıkla,klavye tıklamaları,form etkileşimleri,yüklenme,değişim gibi bir çok eventı içinde barındırıyor.Bu derste hepsini ...
Bu dersimizde html5 in sse özelliğini yani Server-Sent Events özelliğini anlatacağım.Sse ajax gibidir belirlediğimiz yerden veri çekeriz.Bunun farkı ise bağlantıyı kurduktan sonra belirli aralıklarla bendi otomatik çeker.Veri çekim sıklığı 5-10 saniye kadar...
Html5 canvas serimize devam ediyoruz.Bu derste bezierCurveTo() kullanımını anlatacağım.BezierCurveTo eğri çizmemizi sağlıyor...
HTML5 canvas derslerimize devam ediyoruz.Bu derste animasyon yapmayı anlatacağım.Bunun için kullanacağımız komutlardan biri [renk=!d12c69!] clearRect()[/renk] .ClearRect belirlediğimiz konumda belirlediğimiz bir alandaki tüm objeleri...
HTML5 canvas serimize devam ediyoruz.Bu derste [b]toDataURL()[/b] komutunu anlatacağım.ToDataURL canvastaki bulunan herşeyi tek bir resim haline getirip,resmin urlsini bize sunuyor.Geçen derste gösterdiğimiz resim rengi değiştirmeyide kullanarak bir örnek yaptım.ToDataURL bize verdiği...
HTML5 canvas derslerimize devam ediyoruz.Bu derste resmin renkleriyle oynamayı göstereceğim.Geçen derste [renk=!d12c69!] getImageData[/renk] 'yla resmin verilerini çekmiştik.GetImageData resmin her pixelin verisini veriyordu.Bu verileri ...
HTML5 canvas derslerimize devam ediyoruz.Bu derste [b]getImageData()[/b] fonksiyonunu anlatacağım.GetImageData belirlediğimiz alan içindeki resimlere ait 4 bilgiyi pixele göre alıp bize verir.Bu veriler rgb ye ait olan [renk=!d12c69!] red,green,blue[/renk] verileri.Bunların dışında birde [renk=!d12c69!] alpha[/renk] değerini verir.Örnek...
Bu dersimizde html5 in svg özelliğini anlatacağım.Svg canvas gibi bize bir çizim alanı sunuyor.Bu çizim alanında polygonlarla çizim yapabiliyoruz.Basit bir örnekle başlayalım...
HTML5 derslerimize devam ediyoruz.Bu derste objenin opaklığını azaltan globalAlpha kodunu işleyeceğiz.GlobalAlpha uygulandıktan sonra kendinden sonra gelen tüm objelere etki eder.Etkisini kapatmak için 1 değeri vererek yapabilirsiniz.Şimdi bir örnek yapalım...
Html5 derslerimize devam ediyoruz.Bu derste objelere ve metinlere gölge vermeyi göreceğiz.Öncelikle kullanacağımız kodları açıklayarak başlayalım...
Bu dersimizde html5 ile audiolar için analyser yapacağız.Analyser ne diye sorarsanız,müziğin ritmine göre hareket eden barlar.Yapacağımız analyser sadece webkit tarayıcılar için.Yani chrome,yandex,safari için...
HTML5 canvas derslerimize devam ediyoruz.Bu derste rotate() fonksiyonumuzu işleyeceğiz.İşlevinden başlayalım.Rotote ile canvas yani tuvalimizi döndürüyoruz.Aşağıda örnek ...
HTML5 derslerimize devam ediyoruz.Bu derste scale() kodunu işleyeceğiz.Öncelikle işlevinden başlayalım.Tuvalimize bir çeşit zoom yani büyültme veya küçültme işlevindedir.Biraz sonra...
HTML5 derslerimize devam ediyoruz.Bu derste drag and drop yani sürükle ve bırak özelliğini işleyeceğiz.Html5 ile gelen yeni parametrelerle sürüklemyi açma,sürüklemenin başlama veya bitme,üzerine vs gibi anları yakalamamıza yarıyor.
HTML5 canvas derslerimize devam ediyoruz.Bu derste translate fonksiyonunu işleyeceğiz.Öncelikle işlevinden başlayayım.Translate canvas içindeki çizim başlama alanını değiştirmemize yarar.Resimli anlatayım daha iyi anlarsınız...
HTML5 derslerimize devam ediyoruz.Bu derste metin işlemlerini göreceğiz.Hemen kodlara geçelim.İlk önce sayfamıza tuvalimizi koyalım...
HTML5 derslerimize devam ediyoruz.Bu derste radial gradient işlemini göreceğiz.Geçen derste linear gradienti işemiştik.linear düz bir geçiş yapıyordu.Bu ise çember şeklinde renk geçişi yapıyor...
HTML5 canvas derslerimize devam ediyoruz.Bu derste linear gradienti işleyeceğiz.Linear gradient renk geçişlerini sağlamaktadır.Şimdi kodumuzu inceleyelim....
Bu gün boş bir vaktimde html5 ile video player yapayım dedim.Bir şeyler yaptım az çok bir şeye benzedi paylaşmak istedim.Çok güzel olmadı ama incelemek isteyen olur diye paylaşmak istedim...
Daha önceden kodladığım audio playerı paylaşmak istedim.Aşağıdan indirebilirsiniz.Sitelerinizde kullanabilirsiniz...
Bu dersimizde html5 kullanarak audio-playeri nasıl yönetiriz onu göstreceğim.Hemen kodlarımıza geçelim...
HTML5 serimize devam ediyoruz.Bu derste yaptığımız çizimlere arkaplan rengi vermeyi göreceğiz.Arka plan rengi seçmeyifillStyle ve boyamayı
HTML5 serimize devam ediyoruz.Bu derste tuvalimize resim eklemeyi göreceğiz.Resim eklemeyi drawImage() koduyla yapıyoruz.Şimdi kodlara geçelim.
HTML5 serimize devam ediyoruz.Bu derste daire çizmeyi göreceğiz.Geçen ders arc ile bir yarıçap belirleyip yay yapıyoduk.Yay başlama ve bitiş ucunu birleştirirsek bir daire oluyo...
HTML5 eğitim serimize devam ediyoruz.Bu derste yay yapımını göreceğiz...
HTML5 canvas serimize devam ediyoruz.Bu derste dikdörtgen yapacağız...
HTML5 canvas eğitim setimize devam ediyoruz.Bu derste çizginin stilini değiştirecez.Yani kalınlığını,rengini,ovalliğini ayarlayacaz...
HTML5 canvas serimize devam ediyoruz.Bu derste artık tuvalimize bir şeyler çizmeye başlayacaz.
İlk olarak...
HTML5le gelen canvas tagını anlatmaya başlayacam.Öncelikle canvas ne onla başlayalım.
Canvas tuval demek...
HTML5 ile daha önceden yaptığım bir istatistlik grafiği örneğini paylaşacam....
Bu dersimizde size html5 in yeni genel site şablonunu anlatacam.
Öncelikle görsel...
HTML5 de tagların anlatmaya devam ediyoruz yeni tagımız audio.Bu tag sayesinde sayfamıza...
HTML5 in video tagını anlatacam bu derste.Adı üzerin de video sayfaya videomuzu...
Bu dersimizde meter tagını işleyecez.Bu can barı gibi ilerleme çubuğu.Daha önce jquery ui nin pluginin de buna benzer anlatmıştım onu kullanmak için dosya çağırıyoduk sayfamıza ama html5...
Bu dersimizde html5 de details tagı ve onun bir alt tagı olan summary tagını görecez.
Öncelikle details...
HTML5 derslerine başlıyoruz.HTML5 web için bir çok yenilik getiren html nin yeni versiyonudur.Daha tamamlanmamıştır ve tarayıcılarda tam olrak çalışmamaktadır.
safari+chrome şuan...
UstaDerslik
