tutorial | 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)

jquery eklentiler güçlü bir tabanı olan bir fantastik kaynak. çoğu zaman aynı türde jquery eklentiler karşımıza çıkıp duruyor. aşağıda farklı amaçlar için derlenmiş jquery eklentiler bulunmakta. bunlara hızlıca göz atarsak; yapışkan notlar, sahne efekti puzzle, sanal klavye, gridte akerdeon efekti ile içerik gösterimi gibi uygulamalar bulunmakta.

1. sliding image puzzle (kayan fotograf puzzle) tutorial - download

fotograflarınızı puzzle haline getirebileceğiniz küçük bir eklenti.

2. quickflip tutorial - download

quickflip, sayesinde bir öğe üzerinde harika bir görüntü oluşturabilirsiniz örneğin kartvizit görünümü gibi.

3. spritley tutorial - download

spritley ile flash kullanmadan hareketli headerlar oluşturmak için eşsiz bir örnek.

Web sitenizin içeriğine göre web sayfalarınızıda kullanıcılarınız için farklı slaytlar yayınlamak isteyebilirsiniz. Ürünlerinizi veya mekanınızı tanıtabileceğiniz bu slaytları bloglarda farklı amaçlarla da kullanabilirsiniz. aeron slideshow sayesinde tüm bu slaytları gerçekleştirebilir ve bu sırada birbirinden farklı temalarda farklı efektleri kullanabilirsiniz.

aeron slideshow 2, temel olarak jQuery ile hazırlanan Mit lisanslı ve oldukça kolay kullanımlı bir slayt aracıdır. Bu uygulama ile web sayfanızda yayınlamak istediğiniz fotoğrafları slayt gösterisi haline getirebilir ve bunu yaparken farklı efektleri kullanabilirsiniz.

Farklı görünümleri sayesinde aeron slideshow web siteniz ile oldukça uyumludur. İsteğinize göre altta veya yanda bulunun fotoğraflar menüsünü kaldırabilir veya farklı biçimlerde kullanabilirsiniz. Fotoğraflarınız slayt gösterisi halindeyken tümüne farklı fotoğraf efektleri ile ziyaretçilerinizin ilgisini çekebilirsiniz.

Daha önce haziran 2009'un en iyi jquery derslerini görmüştük. Bu yazımızda ise Mart 2010'un en iyi jquery derslerini göreceğiz.

1. How to Create an Infinite Scrolling Web Gallery (Sınırsız kaydırma web galerisi nasıl oluşturulur?)

2. Advanced jQuery background image slideshow (Gelişmiş jquery arkaplan imaj slayt gösterisi)

Web3.0, css3 ve Html5'in gelişmesi ile birlikte web sayfaları artık interaktif uygulamalar ile dolmaya başladı. Masaüstü uygulamalarında kullanılan efekler ve uygulamaların birçoğu artık flash kullanmadan web sayfalarında da uygulanabiliyor. Tüm bu yeniliklerle beraber jQuery kütüphaneside sürekli büyüyor ve ön plana çıkıyor. Aşağıdaki benzersiz uygulamaları web sitenizin içeriğine göre veya farklı tarzlarda kullanabileceğiniz gibi jQuery geliştiricisiyseniz benzer uygulamalar yaratabilirsiniz. işte inanılmaz 5 jQuery uygulaması;

Interactive Map | Demo

Artık kendi bilgi haritanızı jQuery ile oluşturmanız mümkün. Genellikle bilgi haritaları, .jpg formatında yapılıyordu veya interaktif uygulamalar için ise flash tercih ediliyordu. Fakat web3.0, css3, html5 ile birlikte jQuery'de ön plana çıkarak bu kalıpları yıkıyor. Kendi bilgi haritanızı yaratabileceğiniz bu uygulamada tooltip özelliği ile bölgeler hakkında bilgi verebilir ayrıca belirli bölgelere yakınlaşarak daha ayrıntılı haritalar yayınlayabilirsiniz.

content slider'lar bir önceki yazımda belirttiğim gibi çok çeşitli uygulama alanına sahip içerik gösterim eklentileridir. web sayfalarınıza kolayca entegre edebileceğiniz jquery ile geliştirilen content slider aşağıda listelendi.

1- jquery tools scrollable - tutorial - demo - download -

2- anythingslider jquery plugin - demo - download - tutorial -

bir grafik tasarımcı asla "her şeyi biliyorum ve benim için öğrenecek başka bir şey kalmadı" dememelidir. çünkü grafik tasarımında sabit olan tek şey yeni teknikleri öğrenmektir. ve grafiksel tasarım, sürekli ortaya çıkan yeniliklerin takip edilmesi gereken bir gelişim sürecidir. photoshop ise piyasadaki tüm grafik yazılımları arasından başarı bir şekilde sıyrılan ve birçok tasarımcının tercih ettiği bir fotoğraf işleme programı.

burada, az önce bahsettiğimiz sürece katkı sağlayacak taptaze 50 photoshop ders ve çeşitli tekniklere yer vereceğiz. bu derslere de Illustration Tutorial, Text Effects, Character and Cartoon Design, Poster Design, Icon Design, Digital Painting, Photo Manipulation ve Photography Techniques alt başlıklarında çeşitli örnekler sunacağız.

--> photoshop ile poster tasarımı

Crank Movie Poster Effect

Avatar Movie Poster

web browserlar tam anlamıyla CSS3'ü desteklemese de web sitelerinde css3 sıkça kullanılmaya başlandı. bu makalede css3 dünyasında nelerin olduğuna değineceğiz. aşağıda sizlere ilham vereceğini düşündüğüm farklı tarzlarda css3 örnekleri mevcut. css3 ile neler yapılabilir sorusunun cevabına yanıt bulabileceğiniz örneklere göz atalım.

CSS3 & jquery saat

analog saat - tutorial

3d cube that rotates using arrow keys- tutorial
(yön tuşlarıyla hareket ettirebileceğiniz 3d küp) -