bildirgec.org

Html5‘in bu kadar popülerleşmesini sağlayan elementlerden biri de canvas elementidir. Web uygulamalarında oldukça popülerleşebilecek olan canvas, 2D olarak dinamik fotoğraflar yapabileceğiniz bir bileşendir. Javascript üzerinden çalışan bu element ile birçok muhteşem uygulama yapılabilir. Aşağıdaki birbirinden eğlenceli canvas uygulamalarını inceleyebilirsiniz. Html5 Canvas Uygulamaları;

Canvas Aquarium

Tarayacı üzerinden sanal olarak siz de büyük bir akvaryuma ve dilediğiniz kadar balığa sahip olabilirsiniz. Gerçekçi balık hareketleri, hareketli su efektleri, kabarcıklar sayesinde oldukça hoş bir uygulama. Daha fazla balık istiyorsanız akvarmuya tıklamanız yeterli.

Twitter. Canvas. 10K

Arka planında siyah hareketli kabarcıkların bulunduğu ve Twitter ile entegre edilmiş hoş bir Html5 Canvas uygulamasında her bir siyah kabarcık bir Twitter kullanıcısını belirtiyor. Haraketli hoş arka planı sayesinde farklı şekillerde kullanılabilecek çok güzel bir uygulama.

Html5’in yeniliklerinden biri olan web sayfasında herhangi bir eklenti gerektirmeksizin video oynatabilme özelliğini kullanarak geliştirilmiş SublimeVideo, video oynatıcılarda isteyebileceğiniz tüm özelliklere sahip olan, özelleştirilebilir bir html5 video oynatıcısıdır.

Tüm tarayıcılarda kullanabileceğiniz ayrıca iPhones, iPads ve Android yüklü telefonlarda da kullanılabilecek olan bu muhteşem html5 video player oldukça kullanışlıdır.

Ses kontrolü, tam ekran modu, zaman ve ters zaman göstergesi, boyutlandırma, şık efektler gibi birçok özelliği bulunan bu html5 video oynatıcıda arayabileceğiniz tüm özellikler bulunmakta. Ekstra olarak sayfada tooltip olarak küçük bir pencere olarak video oynatıcıyı açma, videoları galeri şeklinde sıralama gibi özelliklerde bulunuyor.

AviaSlider; birçok farklı benzersiz geçiş efektine sahip birçok projede farklı amaçlarla kullanabileceğiniz harika bir jquery slider uygulamasıdır. Interaktif olarak kullanabileceğiniz AviaSlider, diğerlerinin aksine farklı efekler sunarak ziyaretçilerinizi etkiler.

8 benzersiz geçiş efetli olan aviaslider’ı web sitenizde manşet veya resimleriniz için küçük bir galeri olarak kullanabilirsiniz. jQuery 1.32 ile hazırlanan bu uygulamayı istediğiniz gibi biçimlendirebilir html5 ve css3 ile renklendirebilirsiniz.

Sadece 8KB boyuntaki bu ufak uygulama içerisindeki farklı efektleri farklı sayfalarda kullanabilir ve tooltip eklentisi sayesinde resimlerin büyük hallerini sayfa içerisinde açılan küçük bir pencereden ziyaretçilerinize gösterebilirsiniz. Bu pencere açılırken resim harici sayfaya uygulanan karartma efekti sayesinde ziyaretçilerinizin resime dikkat çekmelerini sağlayabilirsiniz.

Web tasarım işi oldukça uzun sürebilir. Bu yüzden yapılan birçok uygulama bulunmakta. Bu uygulamalar size zaman kazandırmakla beraber birçok açıdan da yardımcı oluyorlar. Aşağıdaki ücretsiz uygulamaları siz de kullanabilirsiniz.

Flowplayer

Web sitenizde bulunan videoları kullanışlı ve ücretsiz bir flash arayüz olan flowplayer ile yayınlayabilirsiniz. FLV, SWF, MP3, MP4, H.264 video, JPG, PNG gibi formatları destekliyor. ayrıca video içeriğine reklam yerleştirebilme, çalma listeleri oluşturabilme, tam ekran gibi birçok özelliği bulunmakta. Ücretsiz sürümünü kullandığınız takdirde sadece tam ekran modunda sağ alt köşede Flowplayer logosu olmasının dışında herhangi bir eksiği olmayan bu muhteşem arayüz, gpl lisansına sahip ve oldukça gelişmiş.

FancyBox

FancyBox, web sitenizde kullanabileceğiniz gelişmiş bir resim görüntüleme aracıdır. Web sitenizdeki resimleri tooltip şeklinde büyük veya orjinal halini ziyaretçilerinize gösteren bu uygulamayı isterseniz galeri şeklinde de kullanabilirsiniz. swf, iframe gibi desteğe de sahip olan uygulama, oldukça kolay bir kullanıma sahip.

Wordpress için yapılmış bir eklentisi de bulunmakta.

Html5 Canvas elemanı hakkında bişeyler duydunuz mu bilmiyorum yakın zaman içinde hakkında çok şey duyacağınız iddia edebilirim.

Html5 Canvas elemanını kısaca tanımlamak gerekirse; grafikler hazırlayıp düzenleyebileceğimiz özel bir elaman diyebiliriz. Ayrıca üzerine Jquery animasyonları da ekleyebiliriz.

Bir örnek olması açısından HTML5 Slideshow’u sizlerle paylaşmak istiyorum.

CSS3 ve HTML5 ile artık web sitelerimiz daha renkli ve daha interaktif bir şekle giriyor. Yeni özellikler sayesinde hem görsel açıdan tatmin edici çalışmalar yapılırken hem de herhangi bir eklentiye gereksinim kalmıyor. Aşağıdaki benzersiz HTML5 ve CSS3 uygulamalarının nasıl yapıldığını detaylı olarak öğrenebilir ve benzer çalışmalarda bulunabilirsiniz. İlgi Çekici css3 ve html5 Uygulamaları;

Animated 404 Page
(Animasyonlu 404 Sayfası)

jQuery de kullanılarak yapılan bu animasyon uygulaması ile 404 sayfalarını renklendirebilir ve hareketli animasyonları sayfalarınıza taşıyabilirsiniz. Roketten farklı olarak farklı grafikleri kullanarak animasyonlar yaratmanız mümkün.

Building a custom HTML5 video player with CSS3 and jQuery
(CSS3 ve jQuery kullanarak Özel HTML5 Video Oynatıcısı)

Html5‘in getirdiği yeniliklerden biri olan video oynatıcısını tam olarak anlatan bu ders sayesinde HTML video oynatıcıları hakkında büyük bir bilgi sahibi olacaksınız. Yeni getirilen html5 video formatının tüm özelliklerini anlatan bu muhteşem uygulama ile siz de kendi HTML5 Video Oynatıcınızı yaratabilirsiniz.

CSS3 Tile Flip Animation Tutorial
(CSS3 Tile Flip Animasyon Eğitimi)

web 2.0‘dan web 3.0‘a geçiş aşamaları, html5 ve css3 gibi farklı dillerin gelişmesi ile web uygulamaları artık tamamen interaktif olabiliyor. Görsel açıdan oldukça verimli ve klasik web’te genelde eklentilerle sağlanan birçok uygulama artık bunlara gerek kalmadan sağlanabiliyor. jQuery kütüphanesinin genişliği ile birçok farklı uygulama yapılabiliyor. Aşağıdaki açık kaynaklı ve tamamen ücretsiz uygulamaları geliştirebilir veya kullanabilirsiniz.
Captify

Captify, resimler için hazırlanan basit fakat kullanışlı bir başlık aracıdır. Bu muhteşem jQuery uygulaması ile web sayfanızdaki tüm imajlara başlık ekleyebilir ve kısa notlarınızı imajların altına yerleştirebilirsiniz. Sadece 2.3kb. boyutundaki bu ufak fakat çok yararlı uygulama ile ziyaretçilerinizi bilgilendirebilir, kullanım kolaylığı sayesinde her projenizde yer verebilirsiniz.

gvChart

Birçok uygulamada başarılı şekilde kullanabileceğiniz gvChart, istatiksel verileri tablo ve şema halinde herhangi bir eklenti kullanmadan web sitenize yansıtmaya yarar. 5 farklı demosunu tamamen özelleştirebilir ve istediğiniz gibi web siteniz ile uyum aşamasına getirebilirsiniz. Farklı renkler seçebilme ve istatiklerde tooltip kullanabilme gibi özellikleri sayesinde oldukça kullanışlı bir uygulama.

Esneklik ve kullanılabilirlik…
Bu iki kelime bana jquery’i ve tabii ki css’i çağrıştırıyor.
Buyrun size birbirinden esnek ve kullanışlı, tüm projelerinizde kullanabileceğiniz jquery ve css3 kaynakları:

1. TubePlayer – Youtube için Jquery Player

TubePlayer, oldukça akıllı bir jquery video oynatıcı youtupe player api’yi kullananlar için. Ayrıca youtube videolarınız için kendi kontrol ve bileşenlerinizi de oluşturabilirsiniz.

2. BonBon – css3 Butonları

BonBon, oldukça güzel görünümlü css3 butonları ve gerçekten de çok kullanışlı.

3. Orbit – JQuety Resim Slider

Oldukça güzel bir resim slider eklentisi, dilerseniz resimlerin üzerine başlık, açıklama vs. ekliyebiliyorsunuz.

HTML5, henüz geliştirilme ve dağıtım aşamasında olsa, hatta birçok tarayıcı sürümü tarafından desteklenmemiş olsa da oldukça sevilen bir dil halini aldı. Klasik web yapısını tümüyle değiştiren bu farklı dil ile herhangi bir eklentiye gerek kalmadan tümüyle dinamik tasarımlar oluşturulabiliyor. Tamamen açık kaynak kodlu olduğu için aşağıdaki uygulamaları inceleyebilir ve siz de benzer çalışmalar yapabilirsiniz. Muhteşem HTML5 Efektleri;

Breathing Galaxies

Noise Field

Keylight

Ücretsiz website template, hemde css3.

buradan