html5 | bildirgec.org

Web ile az çok haşır neşirseniz "html5" kavramını duymuşsunuzdur. Flash'a rakip olarak tayin edilen HTML5'in neler yapabileceğini görmek için aşağıdaki uygulamaları inceleyebilirsiniz...

Canvas Minimal Particle Animation bu uygulama sayesinde sitedeki kutucuğa yazdığınız kelimeyi etkileyici bir animasyon şeklinde görebilirsiniz.

CanvasMol bu uygulamayla varolan yuvarlağı imlecinizle döndürebilirsiniz..

Cloth Simulation varolan elbiseyi fare hareketiyle eğip bükebilirsiniz. inanın çok ilginç.

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.

HTML 5 hakkında çok şey duyduk ve duymaya devam edeceğiniz Sınırlarının nerelere varabileceğini, gücünün nelere yettiği konusunda henüz net bir görüntü yok. Ama şu ana kadar gördüğümüz uygulamalar bile gelecekte bizi bekleyen güzel günlerin habercisi niteliğinde. Zaten birçok uzman da HTML5'in birçok alanda sarsıcı etki yaratacağı görüşünde hem fikir.

Öteki taraftan da HTML5 ile Flash arasındaki amansız rekabet web platformunu her geçen gün geliştiriyor ve zengin uygulamaların kapasitesini artırıyor. Bu noktada da Apple ile Google arasındaki rekabet bu iki altyapının geliştirilmesini tetikliyor. Tüm bunlarda web platformunun hızla gelişeceğinin bir göstergesi.

Şimdi yazının devamında sizlerle paylaşacağım uygulamaları aslında uzun yıllardır Flash ile yapıyorduk. Fakat şimdi HTML5'in Javascript ile gösterdiği harika performansa örnek olabilecek nitelikte birbirinden heyecan verici oyunları sizlerle paylaşmak istiyorum. Çünkü bu oyunlar HTML5'in Flash'a büyük bir alternatif olacağının en büyük delili. Şu an sadece 20 oyun derleyebildim fakat her geçen gün bu sayının artacağına eminim. Şimdi tamamen web browser üzerinden çalışan hiçbir ek bileşene ihtiyaç duymayan bu oyunların tadını çıkartın. (Sadece browser'ın HTML5 uyumluluğu zorunludur.)

Wolfenstein 3D

ID Software'in 1992 yılında duyurduğu çok popüler bir oyun HTML5 ile tekrar gündeme geliyor ve her yerden erişip oynayabileceğiniz bir hal alıyor. Buyrun tadını çıkartın.

Adventure Land

Bir platform oyunu. Mario severlerin vazgeçemeyeceği, iPhone versiyonuda çok popüler olan Adventure Land'de bir platform oyununda görmeye alıştığımız herşey mevcut.

Yeni nesil web dilimiz HTML5 için hazırlanmış, açık kaynak kodlu bir eklenti olan FlareVideo, web kullanıcılarının izlemeye doymadıkları ve doyamayacakları web içeriği olan videoların, web sayfalarından oynatılabilmesini sağlayacak olan bir web video oynatıcı (player).

En göze çarpan özelliği; HTML5'i tanımakta huysuzluk/uyumsuzluk gösterecek olan web tarayıcıları ile karşılaştığında, şapkasında FLash versiyonunu çıkaracak olan FlareVideo, CSS/HTML/JS ile yapılacak müdahalelere izin vermek, tam ekran desteği ve 3 farklı tema (Default theme, Vimeo theme, Spotify theme) gibi özellikleri de geliştiricilere sunmakta.

Web sitenizde video yayınlayanlar genelde flash player ile yapılan video eklentileri veya Media Player kullanırlar. Fakat tüm bunlara gerek kalmadan sadece HTML5 ve CSS3 yardımı ile web sayfanızda video yayınlayabilirsiniz.HTML5'in yükselmesi ile gündeme gelen bu video oynatıcıları henüz Internet Explorer gibi bazı eski sürüm tarayıcılar desteklemese de oldukça popüler ve ilgi çekici oldukları söylenebilir.

Video JS, tamamen HTML5 ve CSS3 ile hazırlanan açık kaynak kodlu ve ücretsiz olarak dağıtılan bir video oynatıcısıdır. Web sitenizde videoları herhangi bir eklentiye gerek kalmadan yayınlamanızı sağlayan bu uygulama ile hertürlü videoyu yayınlayabilirsiniz. H264 ve Theora Ogg gibi formatları da destekleyen bu kolay kullanımlı uygulama kullanıcılar açısından herhangi bir sorun olmadan yayın yapabiliyor.

Tam ekran özelliği, ses ayarı, durdurma/oynatma düğmesi ve herhangi bir bölümüne sarabileceğiniz çubuğu ile diğer video oynatıcılarını aratmayan bu uygulamayı birçok tarayıcıda çalıştırabileceğiniz gibi iPhone veya iPad gibi dokunmatik cihazlarda da çalıştırabilirsiniz.

Sürekli gelişen ve hergeçen gün farklı tasarımlar yapılan web teknolojisinde css3 günümüzde oldukça önemli bir yer tutmaktadır. Bu ayın en popüler css3 uygulama derslerini aşağıdan inceleyebilirsiniz. Bu en popüler 5 dersde farklı teknikleri inceleyerek benzer çalışmalar yapabilirsiniz. Eylül 2010'un En Popüler CSS3 Dersleri;

Simulate Realism with CSS3
(CSS3 ile simüle Gerçekçilik)

CSS3 Speech Bubble
(Css3 ile Konuşma Balonu)

How To Create Depth And Nice 3D Ribbons Only Using CSS3
CSS3 ile Nasıl Derin ve Güzel 3D kurdela yaratma

HTML5 ve CSS3 yeni olmasına rağmen web tasarımcıları oldukça başarılı uygulamalar yapıyorlar. Klasik tasarımların aksine daha renkli ve interaktif tasarımlar kullanıcılar tarafından daha dikkat çekici ve taha tatmin edici gözüküyor. Ayrıca masaüstü uygulamalarından yapabildiğiniz birçok özelliği artık interaktif olarak tarayıcılar üzerinden de kullanabiliyoruz. Muhteşem HTML5 ve CSS3 Uygulamaları;

Carbon Fiber Signup Form - Demo

Html5, css3 ve jQuery ile yapılan bu uygulama gelişmiş bir form sistemidir. Formlarda yer alan sıradışı parlak efekti ziyaretçiler tarafından oldukça dikkat çekici. jQuery ile yapılan tooltip özelliği sayesinde kullanıcılarınız istenilen dışında formu doldururlarsa hata mesajı veriyor.

Create a Cool Messy List with CSS3 and nth-child - Demo

Bu css3 ve Html5 ile yapılan uygulama ile web sitenizdeki blogları istediğiniz şekilde yana yatırarak eğim oluşturabilirsiniz. Ayrıca bunu yaparken içeriğinede aynı şekilde eğimi uygulayabilirsiniz.