bildirgec.org

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)

Sitelerimizde henüz rahatlıkla css3 kullanabilmek için zaman biraz erken olsa da, css3 kod yazımını kolaylaştıracak ve kimi yerde ilham kaynağı olabilecek bu uygulamaları takip etmekte fayda var.

css3 generator

CSS3 Generator basit ve hoş arayüzü ile, siz tıklayarak css3 özelliklerini belirlerken, interaktif olarak çıktısını da göstererek kodunuzu kullanıma sunuyor.

CSS3 Please!

css3 please! sitesi ise, direk tüm tarayıcılarla uyumlu olarak yazılmış css3 stil dosyası arayüzü ile karşımıza çıkıyor. Özellikleri kapatıp açarak, yine interaktif olarak sağdaki kutucuktan o kodun ne işe yaradığını görüyoruz.

CSS3 Gradient Generator

css3 gradient generator, css3 ile birlikte gelen gradient efektinin kullanımına yoğunlaşmış bir araç.

CSS3 Generator

Widgetpad tarafından yapılan bu araç, webkit motoru kullanan tarayıcılar için özel olarak hazırlanmış css3 uygulaması.

* Bonus

Anigma

Anigma css3 kullanılarak hazırlanmış hoş bir tarayıcı oyunu. Öncelikli olarak Webkit motoru kullanan tarayıcılar için tasarlandığı belirtilmiş.

İnternetin popüler tarayıcıların Firefox, süpriz bir karar ile motorlarının alt yapısını değiştireceğini açıkladı. Eskiden en hızlı internet tarayıcısı olan Firefox‘un JavaScript motoru da diğer tarayıcılara göre daha hızlıydı. Fakat giderek hız yarışında arka plana giden Firefox, bu kararı ile yeniden bir hamle yapmayı planlıyor.

Firefox‘un hız konusunda ve JavaScript motoru hızında arka planda kalmasından şikayetçi olan kullanıcıların tepkisi sayesinde bu karara adım attıklarını belirten Firefox ekibi, artık daha hızlı bir Firefox olacak mesajı verdi. Geçtiğimiz günlerde şimdiye kadar hız konusunda lider olan Google Chrome‘u geçerek birinciliğe Opera 10.5 sürümü ile oturmuştu. Bu gelişmelerin ardından Firefox, rakiplerine göre oldukça geride kaldı.

Mozilla’nın geliştiricilerinde David Mandelin, JägerMonkey adındaki yeni bir JavaScript motoru kullanacaklarını ve gidişat ve diğer bilgileri yakın zamanda duyuracaklarını söyledi.

Firefox, artık 3 boyutlu olarak kullanılabilecek. Firefox içine 3D grafik görüntüleme motorunu yerleştiren ise Mozilla değil, bir grup araştırmacı.

Yeni 3D görüntüleme motoru ile Firefox ile çevrimiçi 3 boyutlu oyunlar direkt olarak oynanabilecek. Ayrıca gelişmiş web uygulamalarını da Firefox‘ta çalıştırabileceğiz ve bunlar için Firefox üzerine herhangi bir eklenti kurmamız gerekmeyecek.

Firefox üzerine entegre edilen bu 3 boyutlu görüntüleme motoru bu alandaki ilk çalışma değil. Fakat Saarland Üniversitesinden Profesör Philipp Slusallek tarayıcılar içine entegreli 3D grafik motorları sayesinde kullanıcılara farklı uygulamalar sunabileceğinizi ve 3D‘yi geniş bir kitleye yayabileceğinizi söylüyor.

3 Boyutlu görüntülerin 2 boyutlu ekranlara yansıtan geliştiriciler, bu özelliğe RT Fact adını verdiler ve Webkit içine yerleştirdiler. XML3D sayesinde tüm web programları ve web sayfaları 3 boyutlu olarak yayınlanabilecek.

Hayatı kolaylaştıracak CSS tekniği nasıl mı olur? İşte cevabı… CSS3 birçok yeni nesil tarayıcıda desteklenmeden önce CSS ile yapmaya uğraştığımız birçok efekt vardı. Örneğin Yuvarlak Köşeler (rounded corners) yapmak için ekstra bir imaj ya da javascript dosyası kullanmak zorundaydık. Lakin CSS3 ile beraber ,bu çok kullanılan ama yapılması biraz külfetli olan efektler, rahatça yapılmaya başlanacak. Bu yazıda CS3 desteği ile gelen ve kod yazma süresini oldukça aza indirecek efektleri göreceğiz.

1. Yuvarlak Köşeler
jquery eklentisini kullanarak, yada top şeklindeki bir imaj dosyasını CSS Sprite tekniği ile bölerek yapabildiğimiz yuvarlak köşeleri artık kısa bir kod ile yapabileceğiz.

rounded corners

border-radius: 10px;-moz-border-radius: 10px;-webkit-border-radius: 10px;

2. Eleman Gölgesi
Türkçe mealini eleman gölgesi olarak telaffuz edebileceğimiz Box Shadow’u aslında jQuery‘nin dropShadow eklentisi ile kolayca yapmak mümkündü. Şimdi ise sadece 3 satırlık bir kod ile yeni nesil tarayıcılarda bu özelliği kullanmak mümkün.

CSS, websitelerini stillemek için iyi bilinen ve geniş kesimler tarafından kullanılan bir dildir. Halen üzerinde çalışılan üçüncü sürümü ile geliştiricilere zaman kazandıracak pek çok özellik CSS’ye dahil edilecektir. Her ne kadar sadece en modern tarayıcılar tarafından bu özellikler desteklense de, yakında geniş kesimler tarafından kullanılabilecek olan bu yeniliklerin neler olduğunu şimdiden görmek güzel. Bu rehberde size CSS3 ile hayatımıza girecek olan 5 tekniği göstereceğim.

1: Genel Biçimlendirme

Dersimize başlamadan önce gelin dersimiz süresince kullanacağımız genel biçimlendirmemizi oluşturalım.

Google Reader geçen günlerde tasarımını değiştirerek bir çok kişinin beğendiği yeni görünümüne kavuşmuştu. Bu haliyle daha rahat kullanıma ve sadeliğe kavuşan google reader için daha sade bir arayüz tasarlanmış.

Adı Helvetireader olan bu arayüzü kullanmak için eğer firefox kullanıyorsanız greasemonkey eklentisini kurmanız gerekiyor yada webkit altyapısı kullanan opera,safari, google chrome‘dan herhangi birisini kullanıyorsanız greasekit‘i yüklemeniz gerekiyor. bunlardan uygun olanı yaptıktan sonra bu scripti yükleyerek yeni arayüz ile google reader keyfi yapabilirsiniz.

Kaynak

Temelinde bir web sayfasının adresini yazdığımızda, bu sitenin sunucusundan gelen veriler tarayıcımız tarafından algılanır ve kendi görüntüleme motoru (engine) tarafından yorumlanır ve ekrana iletilir.

Her tarayıcı üreticisi farklı görüntüler üreten motorlar kullanınca bunun sonucu her tarayıcıda farklı görünen sitelerle karşılaşmamız kaçınılmaz oluyor. Bunun en büyük sıkıntısını yaşayan kişiler web sitesi tasarlayan (web designer) kişiler olsa da, son kullanıcılar da bundan nasibini alıyor ve tıklamak istedikleri linklere tıklayamıyor, hepsi tek bir tarafta alt alta dizili sitelerle karşı karşıya kalıyor ve bunun sonucu olarak sağlıklı bir web süreci yaşayamıyorlar.

apple, macintosh ve pc’ler de kullanılan safari tarayıcısının güvenlik açıklarını gideriyor.ayrıca mac os ve mac os x server’daki iki tane webkit açığını da gideriyor.webkit açıkları kötü niyetli kodların kullanıcının bilgisayarına saldırı nedeni olabilir.bu açığı bulan isimler:charlie miller, jake honoroff ve mark daniel.kaynak.